New source found from dndbeyond.com

ddb_main/tools/js/CharacterBuilder/components/AbilityScoreManagerManual/AbilityScoreManagerManual.tsx

@@ -5,7 +5,10 @@ import {
   HelperUtils,
 } from "@dndbeyond/character-rules-engine/es";
 
-import { InputField } from "~/subApps/builder/components/InputField";
+import {
+  InputField,
+  InputElements,
+} from "~/subApps/builder/components/InputField";
 
 import styles from "./styles.module.css";
 
@@ -21,7 +24,7 @@ export default function AbilityScoreManagerManual({
   maxScore = 18,
 }: Props) {
   const handleBlur = (
-    e: FocusEvent<HTMLInputElement>,
+    e: FocusEvent<InputElements>,
     abilityScore: AbilityManager
   ) => {
     // Get the int value from the input

ddb_main/tools/js/CharacterBuilder/components/AbilityScoreManagerPointBuy/AbilityScoreManagerPointBuy.tsx

@@ -1,12 +1,12 @@
 import { uniqueId } from "lodash";
 
-import { Select } from "@dndbeyond/character-components/es";
 import {
   AbilityManager,
-  HelperUtils,
   HtmlSelectOption,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { Select } from "~/components/Select";
+
 const totalPoints: number = 27;
 const scoreChoices: Array<number> = [8, 9, 10, 11, 12, 13, 14, 15];
 const scorePoints: Record<number, number> = {
@@ -114,7 +114,9 @@ export default function AbilityScoreManagerPointBuy({ abilities }: Props) {
                     onChange={(value) =>
                       abilityScore.handleScoreChange(Number(value))
                     }
-                    initialOptionRemoved={true}
+                    optionsWidth="large"
+                    name={uId}
+                    hidePlaceholderOption
                   />
                 </span>
                 <div className="ability-score-manager-stat-total">

ddb_main/tools/js/CharacterBuilder/components/AbilityScoreManagerStandardArray/AbilityScoreManagerStandardArray.tsx

@@ -1,12 +1,13 @@
 import { uniqueId } from "lodash";
 
-import { Select } from "@dndbeyond/character-components/es";
 import {
   AbilityManager,
   HelperUtils,
   HtmlSelectOption,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { Select } from "~/components/Select";
+
 import { TypeScriptUtils } from "../../../Shared/utils";
 
 const standardScores: Array<number> = [8, 10, 12, 13, 14, 15];
@@ -61,12 +62,13 @@ export default function AbilityScoreManagerStandardArray({ abilities }: Props) {
                   <Select
                     id={uId}
                     options={availableScoreOptions}
-                    value={abilityScore.getBaseScore()}
-                    onChange={(value) => {
+                    value={abilityScore.ability.baseScore}
+                    onChange={(value: string) => {
                       const parsedValue = HelperUtils.parseInputInt(value);
                       abilityScore.handleScoreChange(parsedValue);
                     }}
                     placeholder={"--"}
+                    name={uId}
                   />
                 </span>
                 <div className="ability-score-manager-stat-total">

ddb_main/tools/js/CharacterBuilder/components/Button/Button.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { JSX, PropsWithChildren } from "react";
 
 import { Button } from "@dndbeyond/character-components/es";
 
-interface withBuilderProps {
+interface withBuilderProps extends PropsWithChildren {
   clsNames: Array<string>;
 }
 function withBuilderButton<P extends object, C>(

ddb_main/tools/js/CharacterBuilder/components/CharacterSheetOptions/RadioGroup/RadioGroup.tsx

@@ -1,68 +0,0 @@
-import FormControl from "@mui/material/FormControl";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormLabel from "@mui/material/FormLabel";
-import Radio from "@mui/material/Radio";
-import MuiRadioGroup from "@mui/material/RadioGroup";
-import Typography from "@mui/material/Typography";
-import { ChangeEvent } from "react";
-
-import { TitleH3 } from "../shared-styles";
-
-type RadioGroupProps = {
-  name?: string;
-  defaultValue?: any;
-  label: string;
-  options?: any;
-  subtitle?: string;
-  onChange?: (event: ChangeEvent, value: any) => void;
-  disabled?: boolean;
-  value?: any;
-};
-
-export const RadioGroup = ({
-  name,
-  defaultValue,
-  label,
-  options,
-  subtitle,
-  onChange,
-  disabled = false,
-  value,
-}: RadioGroupProps) => {
-  return (
-    <FormControl disabled={disabled}>
-      <FormLabel
-        sx={{ ...TitleH3, color: "#000" }}
-        id={`radio-button-group-${label.split(" ").join("-")}`}
-      >
-        {label}
-      </FormLabel>
-      <Typography
-        variant="subtitle1"
-        sx={{ color: "#12181ca3", fontSize: "14px" }}
-      >
-        {subtitle}
-      </Typography>
-      <MuiRadioGroup
-        aria-labelledby={`radio-button-group-${label.split(" ").join("-")}`}
-        name={name}
-        onChange={onChange}
-        {...{
-          ...(defaultValue && { defaultValue }),
-          ...(value && { value }),
-        }}
-      >
-        {options.map((option) => {
-          return (
-            <FormControlLabel
-              value={option.value}
-              control={<Radio color="secondary" />}
-              label={option.label}
-              key={option.value}
-            />
-          );
-        })}
-      </MuiRadioGroup>
-    </FormControl>
-  );
-};

ddb_main/tools/js/CharacterBuilder/components/CharacterSheetOptions/RadioGroup/index.ts

@@ -1,4 +0,0 @@
-import { RadioGroup } from "./RadioGroup";
-
-export default RadioGroup;
-export { RadioGroup };

ddb_main/tools/js/CharacterBuilder/components/CharacterSheetOptions/shared-styles.ts

@@ -1,8 +0,0 @@
-export const TitleH3 = {
-  fontSize: "16px",
-  fontWeight: "bold",
-  fontFamily: "Roboto Condensed",
-  letterSpacing: "normal",
-  lineHeight: 1.5,
-  marginTop: 4,
-};

ddb_main/tools/js/CharacterBuilder/components/ClassDisplaySimple/ClassDisplaySimple.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-
-import { ClassDefinitionContract } from "@dndbeyond/character-rules-engine/es";
-
-import Button from "../Button";
-
-interface Props {
-  charClass: ClassDefinitionContract;
-  onRequestChange: () => void;
-}
-export default class ClassDisplaySimple extends React.PureComponent<Props> {
-  handleChangeClick = () => {
-    const { onRequestChange } = this.props;
-
-    if (onRequestChange) {
-      onRequestChange();
-    }
-  };
-
-  render() {
-    const { charClass } = this.props;
-
-    let portraitAvatarUrl = charClass.portraitAvatarUrl;
-
-    return (
-      <div className="builder-field builder-field-valid class-simple">
-        <div className="builder-field-heading">Selected Class</div>
-        <div className="class-simple-chosen">
-          <div className="class-simple-chosen-preview">
-            <img
-              className="class-simple-chosen-preview-img"
-              src={portraitAvatarUrl ? portraitAvatarUrl : ""}
-              alt=""
-            />
-          </div>
-          <div className="class-simple-chosen-heading">{charClass.name}</div>
-          <div className="class-simple-chosen-action">
-            <Button onClick={this.handleChangeClick} size="small">
-              Change
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}

ddb_main/tools/js/CharacterBuilder/components/ClassDisplaySimple/index.ts

@@ -1,4 +0,0 @@
-import ClassDisplaySimple from "./ClassDisplaySimple";
-
-export default ClassDisplaySimple;
-export { ClassDisplaySimple };

ddb_main/tools/js/CharacterBuilder/components/GrantedFeat/GrantedFeat.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
 
-import { Select } from "@dndbeyond/character-components/es";
 import { FeatList, FormatUtils } from "@dndbeyond/character-rules-engine";
 
 import { Accordion } from "~/components/Accordion";
+import { Select } from "~/components/Select";
 import { FeatDetail } from "~/subApps/sheet/components/Sidebar/panes/FeatsManagePane/FeatDetail";
 import { CharacterFeaturesManagerContext } from "~/tools/js/Shared/managers/CharacterFeaturesManagerContext";
 
@@ -64,10 +64,11 @@ export const GrantedFeat: React.FC<GrantedFeatProps> = ({
     if (!featList.isSingleFeat()) {
       selectBox = (
         <Select
-          onChangePromise={(...args) => featList.handleChoiceSelected(...args)}
+          className="description-manage-background-granted-feat-chooser"
+          onChangeConfirm={(...args) => featList.handleChoiceSelected(...args)}
           options={featList.availableChoices}
           value={featList.chosenFeatId !== null ? featList.chosenFeatId : -1}
-          clsNames={["description-manage-background-granted-feat-chooser"]}
+          name={`granted-feat-select-${featList.definition.id}`}
         />
       );
     }

ddb_main/tools/js/CharacterBuilder/components/OptionalFeature/OptionalFeature.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Checkbox, Select } from "@dndbeyond/character-components/es";
+import { Checkbox } from "@dndbeyond/character-components/es";
 import {
   Constants,
   FormatUtils,
@@ -10,6 +10,7 @@ import {
 
 import { CollapsibleContent } from "~/components/CollapsibleContent";
 import { Link } from "~/components/Link";
+import { Select } from "~/components/Select";
 
 export interface AffectedFeatureInfo {
   name: string;
@@ -161,20 +162,20 @@ export class OptionalFeature extends React.PureComponent<
     }
 
     return (
-      <React.Fragment>
+      <>
         <div className="ct-optional-feature__type">{introText.join(" ")}</div>
         {options.length > 1 && (
           <div className={classNames.join(" ")}>
             <Select
               options={options}
               value={affectedFeatureDefinitionKey}
-              onChangePromise={this.handleReplacementChangePromise}
+              onChangeConfirm={this.handleReplacementChangePromise}
               disabled={!isSelected}
-              preventClickPropagating={true}
+              name={"ct-optional-feature__select-input"}
             />
           </div>
         )}
-      </React.Fragment>
+      </>
     );
   };
 

ddb_main/tools/js/CharacterBuilder/components/Page/Page.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import { PureComponent, PropsWithChildren } from "react";
 
-interface Props {
+interface Props extends PropsWithChildren {
   clsNames: Array<string>;
 }
-export default class Page extends React.PureComponent<Props> {
+export default class Page extends PureComponent<Props> {
   static defaultProps = {
     clsNames: [],
   };

ddb_main/tools/js/CharacterBuilder/components/PageBody/PageBody.tsx

@@ -1,23 +0,0 @@
-import { FC, HTMLAttributes } from "react";
-import { useSelector } from "react-redux";
-
-import { BuilderMethod } from "~/subApps/builder/constants";
-
-import { PortraitName } from "../../../../../subApps/builder/components/PortraitName";
-import { builderSelectors } from "../../selectors";
-
-interface Props extends HTMLAttributes<HTMLDivElement> {}
-export const PageBody: FC<Props> = ({ children, ...props }) => {
-  const builderMethod = useSelector(builderSelectors.getBuilderMethod);
-
-  return (
-    <div className="builder-page-body" {...props}>
-      {builderMethod === BuilderMethod.STEP_BY_STEP && (
-        <div className="builder-page-body-character-name">
-          <PortraitName useDefaultCharacterName={true} />
-        </div>
-      )}
-      {children}
-    </div>
-  );
-};

ddb_main/tools/js/CharacterBuilder/components/PageHeader/PageHeader.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import { PureComponent, PropsWithChildren } from "react";
 
-export default class PageHeader extends React.PureComponent {
+export default class PageHeader extends PureComponent<PropsWithChildren> {
   render() {
     const { children } = this.props;
 

ddb_main/tools/js/CharacterBuilder/components/PageSubHeader/PageSubHeader.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import { PureComponent, PropsWithChildren } from "react";
 
-export default class PageSubHeader extends React.PureComponent {
+export default class PageSubHeader extends PureComponent<PropsWithChildren> {
   render() {
     const { children } = this.props;
 

ddb_main/tools/js/CharacterBuilder/components/SpeciesDisplaySimple/SpeciesDisplaySimple.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-
-import {
-  RaceDefinitionContract,
-  RuleData,
-  RuleDataUtils,
-} from "@dndbeyond/character-rules-engine/es";
-
-import Button from "../Button";
-
-interface Props {
-  species: RaceDefinitionContract | null;
-  onRequestAction: () => void;
-  actionText: string;
-  headingText: string;
-  ruleData: RuleData;
-}
-export default class SpeciesDisplaySimple extends React.PureComponent<Props> {
-  static defaultProps = {
-    actionText: "Change",
-    headingText: "Selected ",
-  };
-
-  render() {
-    const { species, actionText, headingText, ruleData, onRequestAction } =
-      this.props;
-
-    if (species === null) {
-      return null;
-    }
-
-    const { portraitAvatarUrl, baseName, subRaceShortName } = species;
-    const previewUrl: string | null = portraitAvatarUrl
-      ? portraitAvatarUrl
-      : RuleDataUtils.getDefaultRaceImageUrl(ruleData);
-
-    return (
-      <div className="builder-field builder-field-valid race-simple">
-        <div className="builder-field-heading">{headingText}</div>
-        <div className="race-simple-content">
-          <div className="race-simple-preview">
-            <img
-              className="race-simple-preview-img"
-              src={previewUrl ? previewUrl : ""}
-              alt=""
-            />
-          </div>
-          <div className="race-simple-info">
-            {subRaceShortName ? (
-              <div className="race-simple-subclass">{subRaceShortName}</div>
-            ) : null}
-            <div className="race-simple-parent">{baseName}</div>
-          </div>
-          <div className="race-simple-action">
-            <Button onClick={onRequestAction} size="small">
-              {actionText}
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}

ddb_main/tools/js/CharacterBuilder/components/SpeciesDisplaySimple/index.ts

@@ -1,4 +0,0 @@
-import SpeciesDisplaySimple from "./SpeciesDisplaySimple";
-
-export default SpeciesDisplaySimple;
-export { SpeciesDisplaySimple };