New source found from dndbeyond.com

2025-07-16 01:00:16 -07:00
parent 151590af7a
commit f9f8dd0e7a
25 changed files with 886 additions and 1299 deletions
@@ -1,11 +1,8 @@
-import axios, { Canceler } from "axios";
 import React from "react";

-import { LoadingPlaceholder } from "@dndbeyond/character-components/es";
 import {
  ApiAdapterPromise,
  ApiAdapterRequestConfig,
-  ApiAdapterUtils,
  ApiResponse,
  CharacterPreferences,
  CharClass,
@@ -18,10 +15,8 @@ import {
  Constants,
  DefinitionPool,
  EntitledEntity,
-  Feat,
  FeatDefinitionContract,
  FeatLookup,
-  FeatUtils,
  FormatUtils,
  HelperUtils,
  InfusionChoice,
@@ -35,20 +30,16 @@ import {
  OptionalClassFeatureUtils,
  PrerequisiteData,
  RuleData,
-  RuleDataUtils,
-  SourceData,
  TypeValueLookup,
 } from "@dndbeyond/character-rules-engine/es";

 import { Accordion } from "~/components/Accordion";
 import { CollapsibleContent } from "~/components/CollapsibleContent";
-import { FeatureChoice } from "~/components/FeatureChoice";
+import { FeatureChoices } from "~/components/FeatureChoices";
 import { Link } from "~/components/Link";
 import { GrantedFeat } from "~/tools/js/CharacterBuilder/components/GrantedFeat/GrantedFeat";

 import InfusionChoiceManager from "../../../../../Shared/components/InfusionChoiceManager";
-import DataLoadingStatusEnum from "../../../../../Shared/constants/DataLoadingStatusEnum";
-import { AppLoggerUtils, TypeScriptUtils } from "../../../../../Shared/utils";

 interface Props {
  isActive: boolean;
@@ -122,13 +113,7 @@ interface Props {
  inventoryManager: InventoryManager;
 }
 interface State {
-  featData: Array<Feat>;
-  subclassData: Array<ClassDefinitionContract>;
-  hasFeatChoice: boolean;
-  hasSubclassChoice: boolean;
  collapsibleOpened: boolean;
-  featLoadingStatus: DataLoadingStatusEnum;
-  subclassLoadingStatus: DataLoadingStatusEnum;
 }
 export default class ClassManagerFeature extends React.PureComponent<
  Props,
@@ -139,157 +124,16 @@ export default class ClassManagerFeature extends React.PureComponent<
    featLookup: {},
  };

-  loadFeatsCanceler: null | Canceler = null;
-  loadSubclassesCanceler: null | Canceler = null;
-
  constructor(props: Props) {
    super(props);

    this.state = {
-      featData: [],
-      subclassData: [],
-      hasFeatChoice: false,
-      hasSubclassChoice: false,
      collapsibleOpened: false,
-      featLoadingStatus: DataLoadingStatusEnum.NOT_INITIALIZED,
-      subclassLoadingStatus: DataLoadingStatusEnum.NOT_INITIALIZED,
    };
  }

-  componentDidMount(): void {
-    this.setState(
-      {
-        hasFeatChoice: this.hasFeatChoice(this.props),
-        hasSubclassChoice: this.hasSubclassChoice(this.props),
-      },
-      () => {
-        this.conditionallyLoadFeatData();
-      }
-    );
-  }
-
-  componentDidUpdate(
-    prevProps: Readonly<Props>,
-    prevState: Readonly<State>,
-    snapshot?: any
-  ): void {
+  hasSubclassChoice = (): boolean => {
    const { feature } = this.props;
-    const { collapsibleOpened } = this.state;
-
-    if (feature !== prevProps.feature) {
-      this.setState(
-        {
-          hasFeatChoice: this.hasFeatChoice(this.props),
-          hasSubclassChoice: this.hasSubclassChoice(this.props),
-        },
-        () => {
-          this.conditionallyLoadFeatData();
-        }
-      );
-    }
-    if (collapsibleOpened && !prevState.collapsibleOpened) {
-      this.conditionallyLoadFeatData();
-    }
-  }
-
-  conditionallyLoadFeatData = (): void => {
-    const { loadAvailableFeats, loadAvailableSubclasses, charClass } =
-      this.props;
-    const {
-      hasFeatChoice,
-      hasSubclassChoice,
-      featLoadingStatus,
-      subclassLoadingStatus,
-      collapsibleOpened,
-    } = this.state;
-
-    if (
-      hasFeatChoice &&
-      collapsibleOpened &&
-      featLoadingStatus === DataLoadingStatusEnum.NOT_INITIALIZED
-    ) {
-      this.setState({
-        featLoadingStatus: DataLoadingStatusEnum.LOADING,
-      });
-
-      loadAvailableFeats({
-        cancelToken: new axios.CancelToken((c) => {
-          this.loadFeatsCanceler = c;
-        }),
-      })
-        .then((response) => {
-          let featData: Array<Feat> = [];
-
-          const data = ApiAdapterUtils.getResponseData(response);
-          if (data !== null) {
-            featData = data.map((definition) =>
-              FeatUtils.simulateFeat(definition)
-            );
-          }
-
-          this.setState({
-            featData,
-            featLoadingStatus: DataLoadingStatusEnum.LOADED,
-          });
-          this.loadFeatsCanceler = null;
-        })
-        .catch(AppLoggerUtils.handleAdhocApiError);
-    }
-
-    if (
-      hasSubclassChoice &&
-      collapsibleOpened &&
-      subclassLoadingStatus === DataLoadingStatusEnum.NOT_INITIALIZED
-    ) {
-      this.setState({
-        subclassLoadingStatus: DataLoadingStatusEnum.LOADING,
-      });
-
-      loadAvailableSubclasses(ClassUtils.getId(charClass), {
-        cancelToken: new axios.CancelToken((c) => {
-          this.loadSubclassesCanceler = c;
-        }),
-      })
-        .then((response) => {
-          let subclassData: Array<ClassDefinitionContract> = [];
-
-          const data = ApiAdapterUtils.getResponseData(response);
-          if (data !== null) {
-            subclassData = data;
-          }
-
-          this.setState({
-            subclassData,
-            subclassLoadingStatus: DataLoadingStatusEnum.LOADED,
-          });
-          this.loadSubclassesCanceler = null;
-        })
-        .catch(AppLoggerUtils.handleAdhocApiError);
-    }
-  };
-
-  componentWillUnmount(): void {
-    if (this.loadFeatsCanceler !== null) {
-      this.loadFeatsCanceler();
-    }
-    if (this.loadSubclassesCanceler !== null) {
-      this.loadSubclassesCanceler();
-    }
-  }
-
-  hasFeatChoice = (props: Props): boolean => {
-    const { feature } = props;
-
-    const choices = ClassFeatureUtils.getChoices(feature);
-    return choices.some(
-      (choice) =>
-        ChoiceUtils.getType(choice) ===
-        Constants.BuilderChoiceTypeEnum.FEAT_CHOICE_OPTION
-    );
-  };
-
-  hasSubclassChoice = (props: Props): boolean => {
-    const { feature } = props;

    const choices = ClassFeatureUtils.getChoices(feature);
    return choices.some(
@@ -299,28 +143,6 @@ export default class ClassManagerFeature extends React.PureComponent<
    );
  };

-  isDataLoaded = (): boolean => {
-    const {
-      hasSubclassChoice,
-      hasFeatChoice,
-      subclassLoadingStatus,
-      featLoadingStatus,
-    } = this.state;
-
-    if (hasSubclassChoice) {
-      if (subclassLoadingStatus !== DataLoadingStatusEnum.LOADED) {
-        return false;
-      }
-    }
-    if (hasFeatChoice) {
-      if (featLoadingStatus !== DataLoadingStatusEnum.LOADED) {
-        return false;
-      }
-    }
-
-    return true;
-  };
-
  handleCollapsibleOpened = (id: string, state: boolean): void => {
    this.setState({
      collapsibleOpened: state,
@@ -436,46 +258,6 @@ export default class ClassManagerFeature extends React.PureComponent<
    );
  };

-  getSubclassSources = (
-    subclass: ClassDefinitionContract
-  ): Array<SourceData> => {
-    const { ruleData } = this.props;
-
-    if (subclass.sources === null) {
-      return [];
-    }
-
-    return subclass.sources
-      .map((sourceMapping) =>
-        HelperUtils.lookupDataOrFallback(
-          RuleDataUtils.getSourceDataLookup(ruleData),
-          sourceMapping.sourceId
-        )
-      )
-      .filter(TypeScriptUtils.isNotNullOrUndefined);
-  };
-
-  getSubclassData = (): Array<ClassDefinitionContract> => {
-    const { subclassData } = this.state;
-    const { charClass } = this.props;
-
-    let data: Array<ClassDefinitionContract> = [...subclassData];
-
-    let existingSubclass = ClassUtils.getSubclass(charClass);
-    if (
-      existingSubclass !== null &&
-      !data.some(
-        (classDefinition) =>
-          existingSubclass !== null &&
-          classDefinition.id === existingSubclass.id
-      )
-    ) {
-      data.push(existingSubclass);
-    }
-
-    return data;
-  };
-
  getClassFeatureDescription = (): string => {
    const { feature, isStartingClass } = this.props;

@@ -493,33 +275,6 @@ export default class ClassManagerFeature extends React.PureComponent<
    return description === null ? "" : description;
  };

-  renderChoices = (): React.ReactNode => {
-    const { isActive, feature, charClass } = this.props;
-    const { featData } = this.state;
-
-    if (!isActive) {
-      return null;
-    }
-
-    const choices = ClassFeatureUtils.getChoices(feature);
-
-    if (choices === null) {
-      return null;
-    }
-
-    return choices.map((choice) => (
-      <FeatureChoice
-        choice={choice}
-        charClass={charClass}
-        feature={feature}
-        featsData={featData}
-        subclassData={this.getSubclassData()}
-        onChoiceChange={this.handleChoiceChange}
-        key={ChoiceUtils.getId(choice)}
-      />
-    ));
-  };
-
  getMetaItems = () => {
    const { feature, optionalClassFeatureLookup, definitionPool } = this.props;
    const choiceCount = this.getTotalChoiceCount();
@@ -590,7 +345,7 @@ export default class ClassManagerFeature extends React.PureComponent<
      feature,
      inventoryManager,
    } = this.props;
-    const { hasSubclassChoice, hasFeatChoice } = this.state;
+    const { collapsibleOpened } = this.state;

    // If the class feature grants feats, render those instead of the class feature.
    if (feature.featLists.length > 0) {
@@ -604,22 +359,11 @@ export default class ClassManagerFeature extends React.PureComponent<
    }

    const conClsNames: Array<string> = ["class-manager-feature-name"];
-    let contentNode: React.ReactNode;

    if (isActive) {
      if (this.getTotalTodoCount() > 0) {
        conClsNames.push("collapsible-todo");
      }
-
-      if (hasFeatChoice || hasSubclassChoice) {
-        if (this.isDataLoaded()) {
-          contentNode = this.renderChoices();
-        } else {
-          contentNode = <LoadingPlaceholder />;
-        }
-      } else {
-        contentNode = this.renderChoices();
-      }
    }
    const hasChoices = this.getTotalTodoCount() > 0;
    const accordionId = ClassFeatureUtils.getId(feature).toString();
@@ -636,13 +380,20 @@ export default class ClassManagerFeature extends React.PureComponent<
        <CollapsibleContent className="class-manager-feature-description">
          {this.getClassFeatureDescription()}
        </CollapsibleContent>
-        {isActive && hasSubclassChoice && (
+        {isActive && this.hasSubclassChoice() && (
          <div className="ct-character-tools__marketplace-callout">
            Looking for something not in the list below? Unlock all official
            options in the <Link href="/marketplace">Marketplace</Link>.
          </div>
        )}
-        {contentNode}
+        {isActive && (
+          <FeatureChoices
+            choices={ClassFeatureUtils.getChoices(feature)}
+            charClass={charClass}
+            onChoiceChange={this.handleChoiceChange}
+            shouldFetch={collapsibleOpened}
+          />
+        )}
        {isActive && (
          <InfusionChoiceManager
            infusionChoices={this.getAvailableInfusionChoices()}
@@ -585,7 +585,6 @@ class DescriptionManage extends React.PureComponent<Props, State> {
  handleChoiceChange = (
    choiceId: string,
    choiceType: number,
-    choiceSubType: number | null,
    optionValue: any
  ): void => {
    const { dispatch } = this.props;
@@ -1,11 +1,8 @@
-import axios, { Canceler } from "axios";
 import React from "react";

-import { LoadingPlaceholder } from "@dndbeyond/character-components/es";
 import {
  ApiAdapterPromise,
  ApiAdapterRequestConfig,
-  ApiAdapterUtils,
  ApiResponse,
  CharacterPreferences,
  ChoiceData,
@@ -13,10 +10,8 @@ import {
  Constants,
  CoreUtils,
  DefinitionPool,
-  Feat,
  FeatDefinitionContract,
  FeatLookup,
-  FeatUtils,
  HelperUtils,
  OptionalOriginLookup,
  OptionalOriginUtils,
@@ -26,12 +21,9 @@ import {
 } from "@dndbeyond/character-rules-engine/es";

 import { Accordion } from "~/components/Accordion";
-import { FeatureChoice } from "~/components/FeatureChoice";
+import { FeatureChoices } from "~/components/FeatureChoices";
 import { HtmlContent } from "~/components/HtmlContent";

-import DataLoadingStatusEnum from "../../../../../Shared/constants/DataLoadingStatusEnum";
-import { AppLoggerUtils } from "../../../../../Shared/utils";
-
 interface Props {
  speciesTrait: RacialTrait;
  choiceInfo: ChoiceData;
@@ -52,10 +44,7 @@ interface Props {
  speciesName?: string | null;
 }
 interface State {
-  featData: Array<Feat>;
-  hasFeatChoice: boolean;
  collapsibleOpened: boolean;
-  loadingStatus: DataLoadingStatusEnum;
 }
 export default class SpeciesManageSpeciesTrait extends React.PureComponent<
  Props,
@@ -65,115 +54,10 @@ export default class SpeciesManageSpeciesTrait extends React.PureComponent<
    super(props);

    this.state = {
-      featData: [],
-      hasFeatChoice: false,
      collapsibleOpened: false,
-      loadingStatus: DataLoadingStatusEnum.NOT_INITIALIZED,
    };
  }

-  loadFeatsCanceler: null | Canceler = null;
-
-  componentDidMount(): void {
-    this.setState(
-      {
-        hasFeatChoice: this.hasFeatChoice(this.props),
-      },
-      () => {
-        this.conditionallyLoadFeatData();
-      }
-    );
-  }
-
-  componentDidUpdate(
-    prevProps: Readonly<Props>,
-    prevState: Readonly<State>,
-    snapshot?: any
-  ): void {
-    const { speciesTrait } = this.props;
-    const { collapsibleOpened } = this.state;
-
-    if (speciesTrait !== prevProps.speciesTrait) {
-      this.setState(
-        {
-          hasFeatChoice: this.hasFeatChoice(this.props),
-        },
-        () => {
-          this.conditionallyLoadFeatData();
-        }
-      );
-    }
-    if (collapsibleOpened && !prevState.collapsibleOpened) {
-      this.conditionallyLoadFeatData();
-    }
-  }
-
-  componentWillUnmount(): void {
-    if (this.loadFeatsCanceler !== null) {
-      this.loadFeatsCanceler();
-    }
-  }
-
-  conditionallyLoadFeatData = (): void => {
-    const { loadAvailableFeats } = this.props;
-    const { hasFeatChoice, loadingStatus, collapsibleOpened } = this.state;
-
-    if (
-      hasFeatChoice &&
-      collapsibleOpened &&
-      loadingStatus === DataLoadingStatusEnum.NOT_INITIALIZED
-    ) {
-      this.setState({
-        loadingStatus: DataLoadingStatusEnum.LOADING,
-      });
-
-      loadAvailableFeats({
-        cancelToken: new axios.CancelToken((c) => {
-          this.loadFeatsCanceler = c;
-        }),
-      })
-        .then((response) => {
-          let featData: Array<Feat> = [];
-
-          const data = ApiAdapterUtils.getResponseData(response);
-          if (data !== null) {
-            featData = data.map((definition) =>
-              FeatUtils.simulateFeat(definition)
-            );
-          }
-
-          this.setState({
-            featData,
-            loadingStatus: DataLoadingStatusEnum.LOADED,
-          });
-          this.loadFeatsCanceler = null;
-        })
-        .catch(AppLoggerUtils.handleAdhocApiError);
-    }
-  };
-
-  getFeatData = (existingFeatId: number | null): Array<Feat> => {
-    const { featData } = this.state;
-    const { featLookup } = this.props;
-
-    let data: Array<Feat> = [...featData];
-
-    if (existingFeatId !== null) {
-      let existingFeat = HelperUtils.lookupDataOrFallback(
-        featLookup,
-        existingFeatId
-      );
-      if (
-        existingFeat !== null &&
-        !data.some((feat) => FeatUtils.getId(feat) === existingFeatId)
-      ) {
-        data.push(existingFeat);
-      }
-    }
-
-    return data;
-  };
-
  getSummary = () => {
    const { speciesTrait, speciesName } = this.props;
    // Get base name for the species trait
@@ -277,29 +161,9 @@ export default class SpeciesManageSpeciesTrait extends React.PureComponent<
    }
  };

-  renderChoices = (): React.ReactNode => {
-    const { speciesTrait } = this.props;
-    const { featData } = this.state;
-
-    const choices = RacialTraitUtils.getChoices(speciesTrait);
-
-    if (choices === null) {
-      return null;
-    }
-
-    return choices.map((choice) => (
-      <FeatureChoice
-        choice={choice}
-        featsData={featData}
-        onChoiceChange={this.handleChoiceChange}
-        key={ChoiceUtils.getId(choice)}
-      />
-    ));
-  };
-
  render() {
    const { speciesTrait } = this.props;
-    const { hasFeatChoice, loadingStatus } = this.state;
+    const { collapsibleOpened } = this.state;

    const description = RacialTraitUtils.getDescription(speciesTrait);
    const choices = RacialTraitUtils.getChoices(speciesTrait);
@@ -314,17 +178,6 @@ export default class SpeciesManageSpeciesTrait extends React.PureComponent<
      conClsNames.push("collapsible-todo");
    }

-    let contentNode: React.ReactNode;
-    if (hasFeatChoice) {
-      if (loadingStatus === DataLoadingStatusEnum.LOADED) {
-        contentNode = this.renderChoices();
-      } else {
-        contentNode = <LoadingPlaceholder />;
-      }
-    } else {
-      contentNode = this.renderChoices();
-    }
-
    return (
      <Accordion
        id={accordionId}
@@ -339,7 +192,11 @@ export default class SpeciesManageSpeciesTrait extends React.PureComponent<
          html={description ? description : ""}
          withoutTooltips
        />
-        {contentNode}
+        <FeatureChoices
+          choices={RacialTraitUtils.getChoices(speciesTrait)}
+          onChoiceChange={this.handleChoiceChange}
+          shouldFetch={collapsibleOpened}
+        />
      </Accordion>
    );
  }
@@ -64,12 +64,19 @@ export default class ClassFeatureSnippet extends React.PureComponent<Props> {
  };

  renderDescription = (): React.ReactNode => {
-    const { feature, showDescription } = this.props;
+    const { feature, showDescription, charClass } = this.props;

+    const isStartingClass = ClassUtils.isStartingClass(charClass);
+    const multiClassDescription =
+      ClassFeatureUtils.getMultiClassDescription(feature);
+
+    // If the class feature is accessible, show the description or multi-class description, otherwise show a "Check out the Marketplace" message.
    const description: string | null = AccessUtils.isAccessible(
      ClassFeatureUtils.getAccessType(feature)
    )
-      ? ClassFeatureUtils.getDescription(feature)
+      ? !isStartingClass && multiClassDescription
+        ? multiClassDescription
+        : ClassFeatureUtils.getDescription(feature)
      : "Check out the Marketplace to unlock this Class Feature.";

    return showDescription
@@ -1,5 +1,5 @@
 import React from "react";
-import { RacialTraitAccessors } from "@dndbeyond/character-rules-engine/es/engine/RacialTrait";
+
 import {
  AbilityLookup,
  BaseFeat,
@@ -16,7 +16,6 @@ import {
  CharacterFeaturesManager,
 } from "@dndbeyond/character-rules-engine/es";

-
 import { DataOriginTypeEnum } from "~/constants";
 import { FeatureSnippet } from "~/subApps/sheet/components/FeatureSnippet";

@@ -83,7 +82,7 @@ export default class SpeciesTraitFeatureSnippet extends React.PureComponent<Prop

    const feats = featuresManager.getDataOriginOnlyFeatsByPrimary(
      DataOriginTypeEnum.RACE,
-      `${RacialTraitAccessors.getId(speciesTrait)}`
+      `${RacialTraitUtils.getId(speciesTrait)}`
    );

    return (
@@ -383,18 +383,38 @@ export class ItemDetail extends React.PureComponent<Props> {
            />
          </div>
        )}
-        {replacementWeaponStats.map((statId) => (
-          <div className="ct-item-detail__class-customize-item" key={statId}>
+        {replacementWeaponStats.map((replacementInfo) => (
+          <div
+            className="ct-item-detail__class-customize-item"
+            key={`${replacementInfo.statId}-${replacementInfo.dataOrigin.primary.definition.id}`}
+          >
            <Checkbox
-              enabled={appliedWeaponReplacementStats.includes(statId)}
+              enabled={appliedWeaponReplacementStats.includes(
+                replacementInfo.statId
+              )}
              onChange={(enabled) =>
-                this.handleReplaceAbilityStatChange(enabled, statId)
+                this.handleReplaceAbilityStatChange(
+                  enabled,
+                  replacementInfo.statId
+                )
+              }
+              label={
+                <>
+                  Use{" "}
+                  {RuleDataUtils.getStatNameById(
+                    replacementInfo.statId,
+                    ruleData,
+                    true
+                  )}{" "}
+                  <span className={styles.origin}>
+                    (<span className={styles.originLabel}>From</span>
+                    <span className={styles.originName}>
+                      {replacementInfo.dataOrigin.primary.definition.name}
+                    </span>
+                    )
+                  </span>
+                </>
              }
-              label={`Use ${RuleDataUtils.getStatNameById(
-                statId,
-                ruleData,
-                true
-              )}`}
            />
          </div>
        ))}
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { FC, ReactNode } from "react";

 import {
@@ -18,6 +19,7 @@ import Collapsible from "~/tools/js/smartComponents/Collapsible";
 import { Select } from "~/tools/js/smartComponents/legacy";

 // TODO this needs to not extend builder contract and options typing needs to be fixed
+// TODO scss to styles.module.css
 interface Props extends Omit<BuilderChoiceContract, "options"> {
  choice: Choice;
  description?: string;
@@ -31,7 +33,6 @@ interface Props extends Omit<BuilderChoiceContract, "options"> {
  onChange?: (
    id: string,
    type: number,
-    subType: number | null,
    value: any,
    parentChoiceId: string | null
  ) => void;
@@ -61,12 +62,17 @@ export const DetailChoice: FC<Props> = ({
  const { entityRestrictionData, ruleData } = useCharacterEngine();
  const { languages } = useRuleData();

+  const hasTodo =
+    (ChoiceUtils.isInfinite(choice) && !ChoiceUtils.isOptionSelected(choice)) ||
+    ChoiceUtils.isTodo(choice);
+
  const handleChoiceChange = (value: string): void => {
    if (onChange && id !== null) {
-      onChange(id, type, subType, value, parentChoiceId);
+      onChange(id, type, value, parentChoiceId);
    }
  };

+  //Don't render the choice if hideWhenOnlyDefaultSelected is true and the choice is only default selected.
  if (
    hideWhenOnlyDefaultSelected &&
    ChoiceUtils.isOnlyDefaultSelected(choice)
@@ -74,14 +80,6 @@ export const DetailChoice: FC<Props> = ({
    return null;
  }

-  let classNames: Array<string> = ["detail-choice", className];
-  if (
-    (ChoiceUtils.isInfinite(choice) && !ChoiceUtils.isOptionSelected(choice)) ||
-    ChoiceUtils.isTodo(choice)
-  ) {
-    classNames.push("detail-choice--todo");
-  }
-
  // Use the description prop or, if a chosenOption is found and a description wasn't passed in, use the chosenOption description instead.
  let choiceDescription = description;

@@ -94,10 +92,6 @@ export const DetailChoice: FC<Props> = ({
    choiceDescription = description || chosenOption["description"];
  }

-  if (parentChoiceId !== null) {
-    classNames.push("detail-choice--child");
-  }
-
  let choiceNode: ReactNode;
  if (choiceDescription) {
    switch (type) {
@@ -142,7 +136,14 @@ export const DetailChoice: FC<Props> = ({
  }

  return (
-    <div className={classNames.join(" ")}>
+    <div
+      className={clsx([
+        "detail-choice",
+        hasTodo && "detail-choice--todo",
+        parentChoiceId !== null && "detail-choice--child",
+        className,
+      ])}
+    >
      <Select
        className="detail-choice-input"
        options={ChoiceUtils.getSortedRenderOptions(
@@ -1,77 +0,0 @@
-import { FC } from "react";
-import { useDispatch } from "react-redux";
-
-import {
-  characterActions,
-  ChoiceUtils,
-  FeatUtils,
-} from "@dndbeyond/character-rules-engine/es";
-
-import { useCharacterEngine } from "~/hooks/useCharacterEngine";
-
-import { DetailChoice } from "../DetailChoice";
-
-//This component is a wrapper for DetailChoice that is specifically for Feats
-//given a featId, it will render the choices for that feat
-//used in FeatDetail, FeatPane and FeatureChoice (for feats that are given by Class Features, Species Traits and Backgrounds)
-
-export interface Props {
-  featId: number;
-}
-
-export const DetailChoiceFeat: FC<Props> = ({ featId }) => {
-  const dispatch = useDispatch();
-  const { entityRestrictionData, choiceInfo, feats, ruleData } =
-    useCharacterEngine();
-
-  const handleChoiceChange = (
-    id: string | null,
-    type: number,
-    subType: number | null,
-    value: any
-  ): void => {
-    if (id !== null) {
-      dispatch(characterActions.featChoiceSetRequest(featId, type, id, value));
-    }
-  };
-
-  const feat = feats.find((feat) => FeatUtils.getId(feat) === featId);
-
-  if (!feat) {
-    return null;
-  }
-
-  const choices = FeatUtils.getChoices(feat);
-  if (choices.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="ct-detail-choice-feat">
-      {choices.map((choice) => {
-        const id = ChoiceUtils.getId(choice);
-
-        const { description, options: featChoiceOptions } =
-          ChoiceUtils.getSortedChoiceOptionsInfo(
-            choice,
-            ruleData,
-            entityRestrictionData
-          );
-
-        return (
-          <DetailChoice
-            {...choice}
-            label={choice.label}
-            choice={choice}
-            key={id !== null ? id : ""}
-            options={featChoiceOptions}
-            onChange={handleChoiceChange}
-            choiceInfo={choiceInfo}
-            showBackgroundProficiencyOptions={true}
-            description={description}
-          />
-        );
-      })}
-    </div>
-  );
-};
@@ -1,267 +0,0 @@
-import React, { useContext } from "react";
-import { connect, DispatchProp } from "react-redux";
-
-import {
-  AbilityLookup,
-  Action,
-  ActionUtils,
-  BaseFeat,
-  characterActions,
-  CharacterFeaturesManager,
-  CharacterTheme,
-  DataOriginRefData,
-  FeatManager,
-  Race,
-  RaceUtils,
-  RacialTrait,
-  RacialTraitUtils,
-  RuleData,
-  rulesEngineSelectors,
-  SnippetData,
-  Spell,
-  SpellUtils,
-} from "@dndbeyond/character-rules-engine/es";
-
-import { useSidebar } from "~/contexts/Sidebar";
-import { PaneInfo } from "~/contexts/Sidebar/Sidebar";
-import { Header } from "~/subApps/sheet/components/Sidebar/components/Header";
-import { Preview } from "~/subApps/sheet/components/Sidebar/components/Preview";
-import {
-  PaneComponentEnum,
-  PaneIdentifiersRacialTrait,
-} from "~/subApps/sheet/components/Sidebar/types";
-
-import { PaneInitFailureContent } from "../../../../../../subApps/sheet/components/Sidebar/components/PaneInitFailureContent";
-import { SpeciesTraitFeatureSnippet } from "../../../../CharacterSheet/components/FeatureSnippet";
-import { CharacterFeaturesManagerContext } from "../../../managers/CharacterFeaturesManagerContext";
-import { appEnvSelectors } from "../../../selectors";
-import { SharedAppState } from "../../../stores/typings";
-import { PaneIdentifierUtils } from "../../../utils";
-
-interface Props extends DispatchProp {
-  species: Race | null;
-  identifiers: PaneIdentifiersRacialTrait | null;
-  feats: Array<BaseFeat>;
-  snippetData: SnippetData;
-  ruleData: RuleData;
-  abilityLookup: AbilityLookup;
-  dataOriginRefData: DataOriginRefData;
-  isReadonly: boolean;
-  proficiencyBonus: number;
-  theme: CharacterTheme;
-  characterFeaturesManager: CharacterFeaturesManager;
-  paneContext: PaneInfo;
-}
-interface State {
-  speciesTrait: RacialTrait | null;
-}
-class SpeciesTraitPane extends React.PureComponent<Props, State> {
-  constructor(props) {
-    super(props);
-
-    this.state = this.generateStateData(props);
-  }
-
-  componentDidUpdate(
-    prevProps: Readonly<Props>,
-    prevState: Readonly<State>
-  ): void {
-    const { species, identifiers } = this.props;
-
-    if (
-      species !== prevProps.species ||
-      identifiers !== prevProps.identifiers
-    ) {
-      this.setState(this.generateStateData(this.props));
-    }
-  }
-
-  generateStateData = (props: Props): State => {
-    const { species, identifiers } = props;
-
-    let foundSpeciesTrait: RacialTrait | null | undefined = null;
-    if (species !== null && identifiers !== null) {
-      foundSpeciesTrait = RaceUtils.getVisibleRacialTraits(species).find(
-        (speciesTrait) =>
-          identifiers.id === RacialTraitUtils.getId(speciesTrait)
-      );
-    }
-
-    return {
-      speciesTrait: foundSpeciesTrait ? foundSpeciesTrait : null,
-    };
-  };
-
-  handleActionUseSet = (action: Action, uses: number): void => {
-    const { dispatch } = this.props;
-
-    const id = ActionUtils.getId(action);
-    const entityTypeId = ActionUtils.getEntityTypeId(action);
-    if (id !== null && entityTypeId !== null) {
-      dispatch(
-        characterActions.actionUseSet(
-          id,
-          entityTypeId,
-          uses,
-          ActionUtils.getDataOriginType(action)
-        )
-      );
-    }
-  };
-
-  handleSpellUseSet = (spell: Spell, uses: number): void => {
-    const { dispatch } = this.props;
-
-    const mappingId = SpellUtils.getMappingId(spell);
-    const mappingEntityTypeId = SpellUtils.getMappingEntityTypeId(spell);
-    if (mappingId !== null && mappingEntityTypeId !== null) {
-      dispatch(
-        characterActions.spellUseSet(
-          mappingId,
-          mappingEntityTypeId,
-          uses,
-          SpellUtils.getDataOriginType(spell)
-        )
-      );
-    }
-  };
-
-  handleSpellDetailShow = (spell: Spell): void => {
-    const {
-      paneContext: { paneHistoryPush },
-    } = this.props;
-
-    const mappingId = SpellUtils.getMappingId(spell);
-    if (mappingId !== null) {
-      paneHistoryPush(
-        PaneComponentEnum.CHARACTER_SPELL_DETAIL,
-        PaneIdentifierUtils.generateCharacterSpell(mappingId)
-      );
-    }
-  };
-
-  handleSpeciesTraitShow = (speciesTrait: RacialTrait): void => {
-    const {
-      paneContext: { paneHistoryStart },
-    } = this.props;
-    paneHistoryStart(
-      PaneComponentEnum.SPECIES_TRAIT_DETAIL,
-      PaneIdentifierUtils.generateRacialTrait(
-        RacialTraitUtils.getId(speciesTrait)
-      )
-    );
-  };
-
-  handleActionShow = (action: Action): void => {
-    const {
-      paneContext: { paneHistoryPush },
-    } = this.props;
-
-    const mappingId = ActionUtils.getMappingId(action);
-    const mappingEntityTypeId = ActionUtils.getMappingEntityTypeId(action);
-    if (mappingId !== null && mappingEntityTypeId !== null) {
-      paneHistoryPush(
-        PaneComponentEnum.ACTION,
-        PaneIdentifierUtils.generateAction(mappingId, mappingEntityTypeId)
-      );
-    }
-  };
-
-  handleFeatShow = (feat: FeatManager): void => {
-    const {
-      paneContext: { paneHistoryPush },
-    } = this.props;
-    paneHistoryPush(
-      PaneComponentEnum.FEAT_DETAIL,
-      PaneIdentifierUtils.generateFeat(feat.getId())
-    );
-  };
-
-  render() {
-    const { speciesTrait } = this.state;
-    const {
-      species,
-      feats,
-      abilityLookup,
-      snippetData,
-      ruleData,
-      dataOriginRefData,
-      isReadonly,
-      proficiencyBonus,
-      theme,
-      characterFeaturesManager,
-    } = this.props;
-
-    if (species === null || speciesTrait === null) {
-      return <PaneInitFailureContent />;
-    }
-
-    let fullName = RaceUtils.getFullName(species);
-    let portrait = RaceUtils.getPortraitAvatarUrl(species);
-
-    return (
-      <div
-        className="ct-racial-trait-pane"
-        key={RacialTraitUtils.getId(speciesTrait)}
-      >
-        <Header
-          parent={fullName}
-          preview={portrait && <Preview imageUrl={portrait} />}
-        >
-          {RacialTraitUtils.getName(speciesTrait)}
-        </Header>
-        <SpeciesTraitFeatureSnippet
-          speciesTrait={speciesTrait}
-          onActionUseSet={this.handleActionUseSet}
-          onActionClick={this.handleActionShow}
-          onSpellUseSet={this.handleSpellUseSet}
-          onSpellClick={this.handleSpellDetailShow}
-          onFeatureClick={this.handleSpeciesTraitShow}
-          showHeader={false}
-          showDescription={true}
-          feats={feats}
-          snippetData={snippetData}
-          ruleData={ruleData}
-          abilityLookup={abilityLookup}
-          dataOriginRefData={dataOriginRefData}
-          isReadonly={isReadonly}
-          proficiencyBonus={proficiencyBonus}
-          theme={theme}
-          onFeatClick={this.handleFeatShow}
-          featuresManager={characterFeaturesManager}
-        />
-      </div>
-    );
-  }
-}
-
-function mapStateToProps(state: SharedAppState) {
-  return {
-    species: rulesEngineSelectors.getRace(state),
-    feats: rulesEngineSelectors.getBaseFeats(state),
-    snippetData: rulesEngineSelectors.getSnippetData(state),
-    ruleData: rulesEngineSelectors.getRuleData(state),
-    abilityLookup: rulesEngineSelectors.getAbilityLookup(state),
-    dataOriginRefData: rulesEngineSelectors.getDataOriginRefData(state),
-    isReadonly: appEnvSelectors.getIsReadonly(state),
-    proficiencyBonus: rulesEngineSelectors.getProficiencyBonus(state),
-  };
-}
-
-const SpeciesTraitPaneWrapper = (props) => {
-  const { characterFeaturesManager } = useContext(
-    CharacterFeaturesManagerContext
-  );
-
-  const { pane } = useSidebar();
-
-  return (
-    <SpeciesTraitPane
-      characterFeaturesManager={characterFeaturesManager}
-      paneContext={pane}
-      {...props}
-    />
-  );
-};
-
-export default connect(mapStateToProps)(SpeciesTraitPaneWrapper);
@@ -1,4 +0,0 @@
-import SpeciesTraitPane from "./SpeciesTraitPane";
-
-export default SpeciesTraitPane;
-export { SpeciesTraitPane };
@@ -15,7 +15,7 @@ interface Props {
    accept: () => void,
    reject: () => void
  ) => void;
-  label?: string;
+  label?: React.ReactNode;
  preventDefault: boolean;
  stopPropagation: boolean;
  isInteractive?: boolean;