New source found from dndbeyond.com

ddb_main/tools/js/Shared/containers/DetailChoice/DetailChoice.tsx

@@ -11,18 +11,21 @@ import {
   HtmlSelectOptionGroup,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { Accordion } from "~/components/Accordion";
 import { CollapsibleContent } from "~/components/CollapsibleContent";
 import { HtmlContent } from "~/components/HtmlContent";
+import { Select } from "~/components/Select";
 import { useCharacterEngine } from "~/hooks/useCharacterEngine";
 import { useRuleData } from "~/hooks/useRuleData";
-import Collapsible from "~/tools/js/smartComponents/Collapsible";
-import { Select } from "~/tools/js/smartComponents/legacy";
+
+import styles from "./styles.module.css";
 
 // 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;
+  descriptionIntro?: string;
   choiceInfo: ChoiceData;
   classId?: number | null;
   maxDescriptionLength?: number;
@@ -42,6 +45,7 @@ interface Props extends Omit<BuilderChoiceContract, "options"> {
 export const DetailChoice: FC<Props> = ({
   choice,
   description,
+  descriptionIntro,
   optionValue,
   parentChoiceId,
   maxDescriptionLength = 750,
@@ -66,7 +70,7 @@ export const DetailChoice: FC<Props> = ({
     (ChoiceUtils.isInfinite(choice) && !ChoiceUtils.isOptionSelected(choice)) ||
     ChoiceUtils.isTodo(choice);
 
-  const handleChoiceChange = (value: string): void => {
+  const handleChoiceChange = (value: string | number): void => {
     if (onChange && id !== null) {
       onChange(id, type, value, parentChoiceId);
     }
@@ -92,44 +96,53 @@ export const DetailChoice: FC<Props> = ({
     choiceDescription = description || chosenOption["description"];
   }
 
+  const choiceDescriptionIntro = descriptionIntro ? (
+    <p className={styles.descriptionIntro}>{descriptionIntro}</p>
+  ) : null;
+
   let choiceNode: ReactNode;
   if (choiceDescription) {
     switch (type) {
       case Constants.BuilderChoiceTypeEnum.ENTITY_SPELL_OPTION:
         choiceNode = (
-          <Collapsible layoutType={"minimal"} header="Spell Details">
+          <Accordion variant="text" summary="Spell Details" size="xx-small">
             <HtmlContent
               className="detail-choice-description"
               html={choiceDescription}
               withoutTooltips
             />
-          </Collapsible>
+          </Accordion>
         );
         break;
       default:
         if (collapseDescription) {
           choiceNode = (
-            <Collapsible layoutType={"minimal"} header="Show Details">
+            <Accordion variant="text" summary="Show Details" size="xx-small">
+              {choiceDescriptionIntro}
               <HtmlContent
                 className="detail-choice-description"
                 html={choiceDescription}
                 withoutTooltips
               />
-            </Collapsible>
+            </Accordion>
           );
         } else if (choiceDescription.length > maxDescriptionLength) {
           choiceNode = (
             <CollapsibleContent className="detail-choice-description">
-              {choiceDescription}
+              {choiceDescriptionIntro}
+              <HtmlContent html={choiceDescription} />
             </CollapsibleContent>
           );
         } else {
           choiceNode = (
-            <HtmlContent
-              className="detail-choice-description"
-              html={choiceDescription}
-              withoutTooltips
-            />
+            <>
+              {choiceDescriptionIntro}
+              <HtmlContent
+                className="detail-choice-description"
+                html={choiceDescription}
+                withoutTooltips
+              />
+            </>
           );
         }
     }
@@ -145,7 +158,8 @@ export const DetailChoice: FC<Props> = ({
       ])}
     >
       <Select
-        className="detail-choice-input"
+        value={optionValue}
+        placeholder={label ? `- ${label} -` : "- Choose an Option -"}
         options={ChoiceUtils.getSortedRenderOptions(
           options,
           classId,
@@ -158,9 +172,10 @@ export const DetailChoice: FC<Props> = ({
           choiceInfo,
           optionValue
         )}
-        value={optionValue}
-        placeholder={label ? `- ${label} -` : "- Choose an Option -"}
         onChange={handleChoiceChange}
+        searchThreshold={10}
+        isHighlighted={hasTodo}
+        name={`detail-choice-select-${choice.id}`}
       />
       {choiceNode}
     </div>