Remove duplicated code and give some types more generic names

KoolADE85 · KoolADE85 · commit c5be31f482b9 · 2025-09-26T12:50:49.000-06:00
diff --git a/components/dash-core-components/src/fragments/Dropdown.tsx b/components/dash-core-components/src/fragments/Dropdown.tsx
@@ -17,69 +17,8 @@ import * as Popover from '@radix-ui/react-popover';
 import '../components/css/dropdown.css';
 
 import isEqual from 'react-fast-compare';
-import {DetailedDropdownOption, DropdownProps, DropdownValue} from '../types';
-import {OptionsList} from '../utils/optionRendering';
-
-interface DropdownOptionProps {
-    index: number;
-    option: DetailedDropdownOption;
-    isSelected: boolean;
-    onClick: (option: DetailedDropdownOption) => void;
-    style?: React.CSSProperties;
-}
-
-function DropdownLabel(
-    props: DetailedDropdownOption & {index: string | number}
-): JSX.Element {
-    const ctx = window.dash_component_api.useDashContext();
-    const ExternalWrapper = window.dash_component_api.ExternalWrapper;
-
-    if (typeof props.label === 'object') {
-        return (
-            <ExternalWrapper
-                component={props.label}
-                componentPath={[...ctx.componentPath, props.index]}
-            />
-        );
-    }
-    const displayLabel = `${props.label ?? props.value}`;
-    return <span title={props.title}>{displayLabel}</span>;
-}
-
-const DropdownOption: React.FC<DropdownOptionProps> = ({
-    option,
-    isSelected,
-    onClick,
-    style,
-    index,
-}) => {
-    return (
-        <label
-            className={`dash-dropdown-option ${isSelected ? 'selected' : ''}`}
-            role="option"
-            aria-selected={isSelected}
-            style={style}
-            title={option.title}
-        >
-            <input
-                type="checkbox"
-                checked={isSelected}
-                value={
-                    typeof option.value === 'boolean'
-                        ? `${option.value}`
-                        : option.value
-                }
-                disabled={!!option.disabled}
-                onChange={() => onClick(option)}
-                readOnly
-                className="dash-dropdown-option-checkbox"
-            />
-            <span className="dash-dropdown-option-text">
-                <DropdownLabel {...option} index={index} />
-            </span>
-        </label>
-    );
-};
+import {DetailedOption, DropdownProps, OptionValue} from '../types';
+import {OptionsList, OptionLabel} from '../utils/optionRendering';
 
 const Dropdown = (props: DropdownProps) => {
     const {
@@ -98,12 +37,9 @@ const Dropdown = (props: DropdownProps) => {
         style,
         value,
     } = props;
-    const [optionsCheck, setOptionsCheck] =
-        useState<DetailedDropdownOption[]>();
+    const [optionsCheck, setOptionsCheck] = useState<DetailedOption[]>();
     const [isOpen, setIsOpen] = useState(false);
-    const [displayOptions, setDisplayOptions] = useState<
-        DetailedDropdownOption[]
-    >([]);
+    const [displayOptions, setDisplayOptions] = useState<DetailedOption[]>([]);
     const persistentOptions = useRef<DropdownProps['options']>([]);
     const dropdownContainerRef = useRef<HTMLDivElement>(null);
 
@@ -124,7 +60,7 @@ const Dropdown = (props: DropdownProps) => {
         [persistentOptions.current, searchable, search_value]
     );
 
-    const sanitizedValues: DropdownValue[] = useMemo(() => {
+    const sanitizedValues: OptionValue[] = useMemo(() => {
         if (value instanceof Array) {
             return value;
         }
@@ -134,58 +70,8 @@ const Dropdown = (props: DropdownProps) => {
         return [value];
     }, [value]);
 
-    const toggleOption = useCallback(
-        (option: DetailedDropdownOption) => {
-            const isCurrentlySelected = sanitizedValues.includes(option.value);
-
-            // Close dropdown if closeOnSelect is true (default behavior)
-            if (closeOnSelect !== false) {
-                setIsOpen(false);
-            }
-
-            if (multi) {
-                let newValues: DropdownValue[];
-
-                if (isCurrentlySelected) {
-                    // Deselecting: only allow if clearable is true or more than one option selected
-                    if (clearable || sanitizedValues.length > 1) {
-                        newValues = sanitizedValues.filter(
-                            v => v !== option.value
-                        );
-                    } else {
-                        // Cannot deselect the last option when clearable is false
-                        return;
-                    }
-                } else {
-                    // Selecting: add to current selection
-                    newValues = [...sanitizedValues, option.value];
-                }
-
-                setProps({value: newValues});
-            } else {
-                let newValue: DropdownValue | null;
-
-                if (isCurrentlySelected) {
-                    // Deselecting: only allow if clearable is true
-                    if (clearable) {
-                        newValue = null;
-                    } else {
-                        // Cannot deselect when clearable is false
-                        return;
-                    }
-                } else {
-                    // Selecting: set as the single value
-                    newValue = option.value;
-                }
-
-                setProps({value: newValue});
-            }
-        },
-        [multi, clearable, closeOnSelect, sanitizedValues]
-    );
-
     const updateSelection = useCallback(
-        (selection: DropdownValue[]) => {
+        (selection: OptionValue[]) => {
             if (closeOnSelect !== false) {
                 setIsOpen(false);
             }
@@ -266,7 +152,7 @@ const Dropdown = (props: DropdownProps) => {
             );
             return (
                 <React.Fragment key={`${option?.value}-${i}`}>
-                    {option && <DropdownLabel {...option} index={i} />}
+                    {option && <OptionLabel {...option} index={i} />}
                     {i === sanitizedValues.length - 1 ? '' : ', '}
                 </React.Fragment>
             );
@@ -283,13 +169,6 @@ const Dropdown = (props: DropdownProps) => {
         );
     }, [clearable, sanitizedValues, displayOptions, search_value]);
 
-    const handleOptionClick = useCallback(
-        (option: DetailedDropdownOption) => {
-            toggleOption(option);
-        },
-        [toggleOption]
-    );
-
     const handleClear = useCallback(() => {
         const finalValue: DropdownProps['value'] = multi ? [] : null;
         setProps({value: finalValue});
@@ -433,8 +312,8 @@ const Dropdown = (props: DropdownProps) => {
 
             if (open) {
                 // Sort options: selected first, then unselected
-                const selectedOptions: DetailedDropdownOption[] = [];
-                const unselectedOptions: DetailedDropdownOption[] = [];
+                const selectedOptions: DetailedOption[] = [];
+                const unselectedOptions: DetailedOption[] = [];
 
                 // First, collect selected options in the order they appear in the `value` array
                 sanitizedValues.forEach(value => {
@@ -583,6 +462,11 @@ const Dropdown = (props: DropdownProps) => {
                                     onSelectionChange={updateSelection}
                                     className="dash-dropdown-options"
                                     optionClassName="dash-dropdown-option"
+                                    optionStyle={{
+                                        height: optionHeight
+                                            ? `${optionHeight}px`
+                                            : undefined,
+                                    }}
                                 />
                             </>
                         )}
diff --git a/components/dash-core-components/src/types.ts b/components/dash-core-components/src/types.ts
@@ -344,16 +344,16 @@ export interface RangeSliderProps {
     persistence_type?: PersistenceTypes;
 }
 
-export type DropdownValue = string | number | boolean;
+export type OptionValue = string | number | boolean;
 
-export type DetailedDropdownOption = {
+export type DetailedOption = {
     label: string | DashComponent | DashComponent[];
     /**
      * The value of the option. This value
      * corresponds to the items specified in the
      * `value` property.
      */
-    value: DropdownValue;
+    value: OptionValue;
     /**
      * If true, this option is disabled and cannot be selected.
      */
@@ -376,22 +376,22 @@ export type DetailedDropdownOption = {
 /**
  * Array of options where the label and the value are the same thing, or an option dict
  */
-export type DropdownOptionsArray = (DropdownValue | DetailedDropdownOption)[];
+export type OptionsArray = (OptionValue | DetailedOption)[];
 
 /**
  * Simpler `options` representation in dictionary format. The order is not guaranteed.
  * {`value1`: `label1`, `value2`: `label2`, ... }
  * which is equal to
  * [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
  */
-export type DropdownOptionsDict = Record<string, string>;
+export type OptionsDict = Record<string, string>;
 
 export interface DropdownProps {
     /**
      * An array of options {label: [string|number], value: [string|number]},
      * an optional disabled field can be used for each option
      */
-    options?: DropdownOptionsArray | DropdownOptionsDict;
+    options?: OptionsArray | OptionsDict;
 
     /**
      * The value of the input. If `multi` is false (the default)
@@ -401,7 +401,7 @@ export interface DropdownProps {
      * array of items with values corresponding to those in the
      * `options` prop.
      */
-    value?: DropdownValue | DropdownValue[] | null;
+    value?: OptionValue | OptionValue[] | null;
 
     /**
      * If true, the user can select multiple values
@@ -502,12 +502,12 @@ export interface ChecklistProps {
     /**
      * An array of options
      */
-    options?: DropdownOptionsArray | DropdownOptionsDict;
+    options?: OptionsArray | OptionsDict;
 
     /**
      * The currently selected value
      */
-    value?: DropdownValue[] | null;
+    value?: OptionValue[] | null;
 
     /**
      * Indicates whether the options labels should be displayed inline (true=horizontal)
diff --git a/components/dash-core-components/src/utils/dropdownSearch.ts b/components/dash-core-components/src/utils/dropdownSearch.ts
@@ -5,7 +5,7 @@ import {
     UnorderedSearchIndex,
 } from 'js-search';
 import {sanitizeOptions} from './optionTypes';
-import {DetailedDropdownOption, DropdownProps} from '../types';
+import {DetailedOption, DropdownProps} from '../types';
 
 // Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
 // Split on spaces
@@ -20,8 +20,8 @@ const TOKENIZER = {
 };
 
 interface FilteredOptionsResult {
-    sanitizedOptions: DetailedDropdownOption[];
-    filteredOptions: DetailedDropdownOption[];
+    sanitizedOptions: DetailedOption[];
+    filteredOptions: DetailedOption[];
 }
 
 /**
@@ -83,7 +83,7 @@ export function createFilteredOptions(
         search.addDocuments(sanitized);
     }
 
-    const filtered = search.search(searchValue) as DetailedDropdownOption[];
+    const filtered = search.search(searchValue) as DetailedOption[];
 
     return {
         sanitizedOptions: sanitized || [],
diff --git a/components/dash-core-components/src/utils/optionRendering.tsx b/components/dash-core-components/src/utils/optionRendering.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {append, includes, without} from 'ramda';
-import {DetailedDropdownOption, DropdownValue} from 'src/types';
+import {DetailedOption, OptionValue} from 'src/types';
 import '../components/css/optionslist.css';
 
 interface StylingProps {
@@ -18,13 +18,13 @@ interface StylingProps {
 
 interface OptionProps extends StylingProps {
     index: number;
-    option: DetailedDropdownOption;
+    option: DetailedOption;
     isSelected: boolean;
-    onChange: (option: DetailedDropdownOption) => void;
+    onChange: (option: DetailedOption) => void;
 }
 
-function OptionLabel(
-    props: DetailedDropdownOption & {index: string | number}
+export function OptionLabel(
+    props: DetailedOption & {index: string | number}
 ): JSX.Element {
     const ctx = window.dash_component_api.useDashContext();
     const ExternalWrapper = window.dash_component_api.ExternalWrapper;
@@ -108,9 +108,9 @@ export const Option: React.FC<OptionProps> = ({
 };
 
 interface OptionsListProps extends StylingProps {
-    options: DetailedDropdownOption[];
-    selected: DropdownValue[];
-    onSelectionChange: (selected: DropdownValue[]) => void;
+    options: DetailedOption[];
+    selected: OptionValue[];
+    onSelectionChange: (selected: OptionValue[]) => void;
 }
 
 export const OptionsList: React.FC<OptionsListProps> = ({
@@ -134,7 +134,7 @@ export const OptionsList: React.FC<OptionsListProps> = ({
                         option={option}
                         isSelected={isSelected}
                         onChange={option => {
-                            let newValue: DropdownValue[];
+                            let newValue: OptionValue[];
                             if (includes(option.value, selected)) {
                                 newValue = without([option.value], selected);
                             } else {
diff --git a/components/dash-core-components/src/utils/optionTypes.ts b/components/dash-core-components/src/utils/optionTypes.ts
@@ -1,13 +1,13 @@
 import React from 'react';
-import {DetailedDropdownOption, DropdownProps, DropdownValue} from '../types';
+import {DetailedOption, DropdownProps, OptionValue} from '../types';
 
-const isDropdownValue = (option: unknown): option is DropdownValue => {
+const isDropdownValue = (option: unknown): option is OptionValue => {
     return ['string', 'number', 'boolean'].includes(typeof option);
 };
 
 export const sanitizeOptions = (
     options: DropdownProps['options']
-): DetailedDropdownOption[] => {
+): DetailedOption[] => {
     if (typeof options === 'object' && !(options instanceof Array)) {
         return Object.entries(options).map(([value, label]) => ({
             label: React.isValidElement(label) ? label : String(label),
