New source found from dndbeyond.com

ddb_main/subApps/sheet/components/Sidebar/panes/FeatPane/FeatPane.tsx

@@ -1,18 +1,17 @@
 import { FC, HTMLAttributes, useContext } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
-import { Accordion } from "~/components/Accordion";
+import { ChoiceUtils } from "@dndbeyond/character-rules-engine";
+
 import { Button } from "~/components/Button";
 import { HelperTextAccordion } from "~/components/HelperTextAccordion";
-import { HtmlContent } from "~/components/HtmlContent";
 import { useSidebar } from "~/contexts/Sidebar";
 import { useCharacterEngine } from "~/hooks/useCharacterEngine";
 import { FeatFeatureSnippet } from "~/tools/js/CharacterSheet/components/FeatureSnippet";
-import { DetailChoiceFeat } from "~/tools/js/Shared/containers/DetailChoice";
+import { DetailChoice } from "~/tools/js/Shared/containers/DetailChoice";
 import { CharacterFeaturesManagerContext } from "~/tools/js/Shared/managers/CharacterFeaturesManagerContext";
 import { appEnvSelectors } from "~/tools/js/Shared/selectors";
 import { PaneIdentifierUtils } from "~/tools/js/Shared/utils";
-import { DdbBadgeSvg } from "~/tools/js/smartComponents/Svg";
 import { Action, Spell } from "~/types";
 
 import { Header } from "../../components/Header";
@@ -38,6 +37,8 @@ export const FeatPane: FC<Props> = ({ identifiers, ...props }) => {
     originRef: dataOriginRefData,
     characterTheme: theme,
     entityUtils,
+    entityRestrictionData,
+    choiceInfo,
   } = useCharacterEngine();
 
   const { characterFeaturesManager } = useContext(
@@ -115,6 +116,18 @@ export const FeatPane: FC<Props> = ({ identifiers, ...props }) => {
     }
   };
 
+  const handleChoiceChange = (
+    id: string | null,
+    type: number,
+    value: any
+  ): void => {
+    if (feat && id !== null) {
+      dispatch(
+        characterActions.featChoiceSetRequest(feat.getId(), type, id, value)
+      );
+    }
+  };
+
   if (feat === null) {
     return <PaneInitFailureContent />;
   }
@@ -163,7 +176,31 @@ export const FeatPane: FC<Props> = ({ identifiers, ...props }) => {
       />
       {!isReadonly && feat.getChoices().length > 0 && (
         <div className={styles.choices}>
-          <DetailChoiceFeat featId={feat.getId()} />
+          {feat.getChoices().map((choice) => {
+            const id = ChoiceUtils.getId(choice);
+
+            const { description, options: featChoiceOptions } =
+              ChoiceUtils.getSortedChoiceOptionsForFeatsInfo(
+                feat.getId(),
+                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>
       )}
       {!feat.isHiddenFeat() &&