@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.7

package/schedule/types.d.ts

@@ -1,66 +1,185 @@
-import type { RefObject } from "react";
 import type { PopoverTriggerType } from "../popover";
+/**
+ * Visual state of a schedule time slot.
+ *
+ * - `"booked"` — the slot has confirmed bookings.
+ * - `"available"` — the slot is open for booking.
+ * - `"blocked"` — the slot is unavailable.
+ * - `"pending"` — the slot is under review or awaiting confirmation.
+ */
 export type ScheduleCellType = "booked" | "available" | "blocked" | "pending";
+/**
+ * The active layout for the schedule.
+ */
 export type ScheduleView = "day" | "week";
+/**
+ * A single entity displayed as a column or carousel item.
+ */
 export interface ScheduleEntityProps {
+    /** Unique identifier. */
     id: string;
+    /** Display name shown in the column header. */
     name: string;
+    /** All time slots belonging to this service across all dates. */
     slots: ScheduleSlotProps[];
 }
+/**
+ * Configuration for a popover attached to a schedule slot.
+ */
 export interface SchedulePopoverProps {
+    /** Interaction type that opens the popover. */
     trigger: PopoverTriggerType;
+    /** The popover body. */
     content: string | JSX.Element | (() => React.ReactNode);
+    /**
+     * Open and close delay in milliseconds.
+     */
     delay?: {
         open?: number;
         close?: number;
     } | undefined;
+    /** Distance in pixels between the slot element and the popover. */
     offset?: number | undefined;
 }
+/**
+ * Props for the `Schedule` component.
+ */
 export interface ScheduleProps {
     id?: string | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * The layout view.
+     *
+     * @default "day"
+     *
+     * @remarks `"week"` is automatically overridden to `"day"`
+     * on small screens.
+     */
     view?: ScheduleView | undefined;
+    /**
+     * The currently displayed date in `YYYY-MM-DD` format.
+     * Slots are filtered to match this date in the day view.
+     */
     date: string;
+    /**
+     * Message shown inside the empty-state illustration when `serviceData` is
+     * empty.
+     */
     emptyContentMessage?: string | undefined;
+    /**
+     * Array of service entities to render. Each entity maps to a column in the
+     * week view, or to a carousel item in the day view.
+     */
     serviceData: ScheduleEntityProps[];
+    /**
+     * When `true` the schedule renders a loading animation in place of slot
+     * content.
+     *
+     * @default false
+     */
     loading?: boolean | undefined;
+    /**
+     * Earliest time shown on the time axis, in `HH:mm` format.
+     *
+     * @default "00:00"
+     */
     minTime?: string | undefined;
+    /**
+     * Latest time shown on the time axis, in `HH:mm` format.
+     *
+     * @default "23:59"
+     */
     maxTime?: string | undefined;
+    /**
+     * Time the schedule scrolls to on first render, in `HH:mm` format.
+     *
+     * @remarks Falls back to `minTime` when not provided.
+     */
     initialScrollTime?: string | undefined;
+    /** Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format. */
     minDate?: string | undefined;
+    /** Latest selectable date in the calendar picker, in `YYYY-MM-DD` format. */
     maxDate?: string | undefined;
+    /**
+     * Called when the user navigates to the previous day.
+     *
+     * @param currentDate The date that was active before the navigation, in `YYYY-MM-DD` format.
+     */
     onPreviousDayClick: (currentDate: string) => void;
+    /**
+     * Called when the user navigates to the next day.
+     *
+     * @param currentDate The date that was active before the navigation, in `YYYY-MM-DD` format.
+     */
     onNextDayClick: (currentDate: string) => void;
+    /**
+     * Called when the user picks a date from the calendar popover.
+     *
+     * @param currentDate The selected date in `YYYY-MM-DD` format.
+     */
     onCalendarDateSelect: (currentDate: string) => void;
+    /** Called when the user clicks the "Today" button in the header. */
     onTodayClick: () => void;
+    /**
+     * Called when the user clicks a cell without any time slots in the day view.
+     *
+     * @param slot Details about the clicked empty slot.
+     */
     onEmptySlotClick?: ((slot: ScheduleEmptySlotProps) => void) | undefined;
+    /**
+     * When provided, a popover is attached to each empty slot in the day view
+     * instead of calling `onEmptySlotClick` directly.
+     */
     emptySlotPopover?: ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps) | undefined;
+    /** Message displayed inside blocked slots. */
     blockedMessage?: string | undefined;
+    /**
+     * Called in the week view when the user clicks a cell that contains hidden
+     * overflow slots.
+     *
+     * @param hiddenServices Names of the services whose slots are hidden in the
+     * clicked cell.
+     */
     onClickHiddenSlots?: ((hiddenServices: string[]) => void) | undefined;
 }
-export interface CommonScheduleViewProps {
-    date: string;
-    loading: boolean;
-    minTime: string;
-    maxTime: string;
-    initialScrollTime?: string | undefined;
-    containerRef: RefObject<HTMLDivElement>;
-    blockedMessage?: string | undefined;
-}
+/**
+ * A single bookable time slot within a `ScheduleEntityProps`.
+ */
 export interface ScheduleSlotProps {
+    /** Unique identifier for the slot. */
     id: string;
+    /** Slot start time in `HH:mm` format. */
     startTime: string;
+    /** Slot end time in `HH:mm` format. */
     endTime: string;
+    /** Visual state of the slot. */
     status: ScheduleCellType;
+    /** Total number of bookable places in this slot. */
     capacity?: number | undefined;
+    /** Date this slot belongs to in `YYYY-MM-DD` format. */
     date: string | undefined;
+    /** Number of confirmed bookings already made for this slot. */
     booked?: number | undefined;
+    /** Attaches a popover to this slot with custom configuration. */
     customPopover?: SchedulePopoverProps | undefined;
+    /**
+     * Called when the user clicks this slot.
+     *
+     * @param data The full slot data at the time of the click.
+     * @param e The originating mouse event.
+     */
     onClick?: ((data: ScheduleSlotProps, e: React.MouseEvent) => void) | undefined;
 }
+/**
+ * Describes an empty time slot passed to `onEmptySlotClick` and the
+ * `emptySlotPopover`.
+ */
 export interface ScheduleEmptySlotProps {
+    /** Slot start time in `HH:mm` format. */
     startTime: string;
+    /** Slot end time in `HH:mm` format. */
     endTime: string;
+    /** Name of the service this empty slot belongs to. */
     name: string;
 }

package/select-histogram/select-histogram.d.ts

@@ -1,2 +1,7 @@
 import type { SelectHistogramProps } from "./types";
+/**
+ * A form input that displays the selected range and reveals a histogram slider in a dropdown.
+ *
+ * Use `SelectHistogram` when users need to select a numeric range against a data distribution.
+ */
 export declare const SelectHistogram: ({ alignment, className, disabled, dropdownZIndex, error, histogramSlider, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, onBlur, onChange, onChangeEnd, optionTruncationType, placeholder, rangeLabelPrefix, rangeLabelSuffix, readOnly, renderRangeLabel, value, dropdownRootNode, ...otherProps }: SelectHistogramProps) => JSX.Element;

package/select-histogram/select-histogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.js","sources":["../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <div\n                className={clsx(\n                    styles.placeholderLabel,\n                    optionTruncationType !== \"middle\" &&\n                        styles.placeholderLabelTruncateEnd\n                )}\n            >\n                {placeholder}\n            </div>\n        ) : (\n            <div className={styles.label}>\n                {renderSelector(selection[0])}\n                <div className={styles.separator}>-</div>\n                {renderSelector(selection[1])}\n            </div>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            className={styles.histogramSliderDropdownContainer}\n            style={{ ...floatingStyles, width: elementWidth }}\n            ref={setFloatingRef}\n            data-testid={`${testId}-dropdown`}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </div>\n    );\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["SelectHistogram","_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","styles.label","styles.separator","clsx","styles.placeholderLabel","styles.placeholderLabelTruncateEnd","renderDropdown","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","Object","assign","styles.histogramSliderDropdownContainer","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"select-histogram.js","sources":["../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\n// @catalog\n/**\n * A form input that displays the selected range and reveals a histogram slider in a dropdown.\n *\n * Use `SelectHistogram` when users need to select a numeric range against a data distribution.\n */\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <div\n                className={clsx(\n                    styles.placeholderLabel,\n                    optionTruncationType !== \"middle\" &&\n                        styles.placeholderLabelTruncateEnd\n                )}\n            >\n                {placeholder}\n            </div>\n        ) : (\n            <div className={styles.label}>\n                {renderSelector(selection[0])}\n                <div className={styles.separator}>-</div>\n                {renderSelector(selection[1])}\n            </div>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            className={styles.histogramSliderDropdownContainer}\n            style={{ ...floatingStyles, width: elementWidth }}\n            ref={setFloatingRef}\n            data-testid={`${testId}-dropdown`}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </div>\n    );\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["SelectHistogram","_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","styles.label","styles.separator","clsx","styles.placeholderLabel","styles.placeholderLabelTruncateEnd","renderDropdown","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","Object","assign","styles.histogramSliderDropdownContainer","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/select-histogram/types.d.ts

@@ -2,32 +2,85 @@ import type { AriaAttributes, RefObject } from "react";
 import type { HistogramSliderProps } from "../histogram-slider";
 import type { TruncateType } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+/**
+ * Subset of `HistogramSliderProps` passed to `SelectHistogram` to configure the
+ * embedded histogram slider rendered inside the dropdown.
+ */
 export type SelectHistogramSliderProps = Pick<HistogramSliderProps, "bins" | "interval" | "renderEmptyView" | "ariaLabels">;
+/**
+ * Props for the `SelectHistogram` component.
+ */
 export interface SelectHistogramProps extends Pick<AriaAttributes, "aria-labelledby" | "aria-describedby" | "aria-invalid"> {
+    /**
+     * Horizontal alignment of the dropdown relative to the trigger element.
+     *
+     * @default "left"
+     */
     alignment?: DropdownAlignmentType | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
     disabled?: boolean | undefined;
+    /** CSS `z-index` applied to the dropdown overlay. */
     dropdownZIndex?: number | undefined;
+    /** Renders the trigger in an error state when `true`. */
     error?: boolean | undefined;
     id?: string | undefined;
+    /** Configuration for the histogram slider rendered inside the dropdown. */
     histogramSlider: SelectHistogramSliderProps;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
+    /**
+     * Controls how long option labels are truncated when they overflow.
+     *
+     * @default "end"
+     */
     optionTruncationType?: TruncateType | undefined;
+    /**
+     * Text shown in the trigger when no range is selected or no bins are provided.
+     *
+     * @default "Select"
+     */
     placeholder?: string | undefined;
+    /** Text prepended to each range label value. */
     rangeLabelPrefix?: string | undefined;
+    /** Text appended to each range label value. */
     rangeLabelSuffix?: string | undefined;
     readOnly?: boolean | undefined;
+    /**
+     * The currently selected range as `[min, max]`. When omitted, the selection
+     * initialises to `[minValue, minValue + interval]` derived from the first bin.
+     */
     value?: [number, number] | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
+     *
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
+    /** Called when focus leaves both the input and the dropdown. */
     onBlur?: (() => void) | undefined;
+    /**
+     * Called on every selection change.
+     *
+     * @param value The current `[min, max]` selection.
+     */
     onChange?: ((value: [number, number]) => void) | undefined;
+    /**
+     * Called when a thumb is released after selection is complete.
+     *
+     * @param value The settled `[min, max]` selection.
+     */
     onChangeEnd?: ((value: [number, number]) => void) | undefined;
+    /**
+     * Custom renderer for each bound value displayed in the trigger label.
+     * Overrides `rangeLabelPrefix`, `rangeLabelSuffix`, and the default `Typography.BodyBL` wrapper.
+     *
+     * @param value The numeric bound to render.
+     */
     renderRangeLabel?: ((value: number) => React.ReactNode) | undefined;
 }

package/shared/dropdown-list/dropdown-list.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import{SquareIcon as l}from"@lifesg/react-icons/square";import{SquareFillIcon as o}from"@lifesg/react-icons/square-fill";import{SquareTickFillIcon as n}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as s}from"@lifesg/react-icons/tick";import a from"clsx";import c from"../../external/lodash/find.js";import u from"../../external/lodash/isEqual.js";import{forwardRef as d,useContext as m,useState as p,useRef as f,useCallback as v,useImperativeHandle as h,useEffect as x}from"react";import{Virtuoso as g}from"react-virtuoso";import{Markup as b}from"../../markup/markup.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as y}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as T}from"../../util/use-event.js";import{useEventListener as w}from"../../util/use-event-listener.js";import{useIsMounted as N}from"../../util/use-mount.js";import{useCompare as I}from"../../util/use-previous.js";import{VisuallyHidden as L}from"../accessibility/index.js";import{ComponentLoadingSpinner as k}from"../component-loading-spinner/component-loading-spinner.js";import{useDropdownRender as S}from"../dropdown-wrapper/element-with-dropdown.js";import{BasicButton as C}from"../input-wrapper/input-wrapper.js";import{DropdownLabel as D}from"./dropdown-label.js";import{tokens as E,container as q,containerVariantSmall as A,list as F,selectAllContainer as P,baseButton as R,selectAllButton as M,resultStateContainer as O,labelIcon as _,noResultDescContainer as W,spinner as $,tryAgainButton as B,listItem as z,listItemDisabled as U,listItemActiveSelected as V,listItemActive as G,baseCheckboxIndicatorStyle as H,checkboxDisabledIndicator as J,checkboxSelectedIndicator as K,checkboxUnselectedIndicator as Q,baseIndicatorStyle as X,selectedIndicator as Y}from"./dropdown-list.styles.js";import{DropdownListStateContext as Z}from"./dropdown-list-state.js";import{DropdownSearch as ee}from"./dropdown-search.js";import{VirtuosoItem as te,VirtuosoList as re}from"./virtuoso-components.js";const ie=d((({listItems:d,multiSelect:ie,maxSelectable:le,selectedItems:oe,disableItemFocus:ne,itemsLoadState:se="success",itemTruncationType:ae="end",itemMaxLines:ce=2,labelDisplayType:ue="inline",variant:de="default",listboxId:me,ariaLabel:pe,matchElementWidth:fe=!1,width:ve,topScrollItem:he,onSelectItem:xe,onSelectAll:ge,onDismiss:be,onRetry:je,valueExtractor:ye,listExtractor:Te,renderListItem:we,renderCustomCallToAction:Ne,enableSearch:Ie,hideNoResultsDisplay:Le,noResultsDescription:ke,customLabels:Se,searchPlaceholder:Ce,searchFunction:De,onSearch:Ee},qe)=>{const{noResultsLabel:Ae="No results found.",selectAllButtonLabel:Fe="Select all",clearAllButtonLabel:Pe="Clear all"}=Se||{},Re=(null==Se?void 0:Se.searchPlaceholder)||Ce||"Search",Me=(null==Se?void 0:Se.noResultsDescription)||ke,{focusedIndex:Oe,setFocusedIndex:_e}=m(Z),{elementWidth:We,setFloatingRef:$e,getFloatingProps:Be,styles:ze}=S(),[Ue,Ve]=p(""),[Ge,He]=p(null!=d?d:[]),Je=I(se),Ke=N(),Qe=f(null),Xe=f([]),Ye=f(null),Ze=f(null),et=!!le&&!!oe&&(null==oe?void 0:oe.length)===le;let tt,rt="default";ve?(tt=ve,rt="custom"):fe&&We&&(tt=`${We}px`,rt="match"),j(Qe,{[E.containerWidth]:tt});const it=e=>{const t=Te?Te(e):null==e?void 0:e.toString();return"object"==typeof t?{title:t.title,secondaryLabel:t.secondaryLabel}:{title:null!=t?t:""}},lt=v((e=>!!c(oe,(t=>u(t,e)))),[oe]),ot=T((()=>null==De?void 0:De(Ue))),nt=T((()=>null==d?void 0:d.filter((e=>{const{title:t,secondaryLabel:r}=it(e),i=Ue.trim().toLowerCase();return t.toLowerCase().includes(i)||r&&r.toLowerCase().includes(i)})))),st=v((e=>{var t,r;if(ne)return;if(Ye.current)return _e(-1),void setTimeout((()=>{var e;return null===(e=Ye.current)||void 0===e?void 0:e.focus()}),0);const i=null!=Ge?Ge:[];if(0===i.length)return;if(void 0!==(null==e?void 0:e.index)){const r=Math.max(0,Math.min(e.index,i.length-1));return null===(t=Ze.current)||void 0===t||t.scrollToIndex({index:r,align:"center"}),_e(r),void setTimeout((()=>{var e;return null===(e=Xe.current[r])||void 0===e?void 0:e.focus()}),0)}const l=(null==e?void 0:e.preferSelected)?i.findIndex((e=>lt(e))):-1,o=-1!==l?l:Oe>=0&&Oe<i.length?Oe:0;null===(r=Ze.current)||void 0===r||r.scrollToIndex({index:o,align:"center"}),_e(o),setTimeout((()=>{var e;return null===(e=Xe.current[o])||void 0===e?void 0:e.focus()}),0)}),[lt,ne,Ge,Oe,_e]),at=(e,t)=>{et&&!lt(e)||(_e(t),null==xe||xe(e,(e=>ye?ye(e):e)(e)))},ct=e=>{const t=e.target.value;Ve(t),null==Ee||Ee()},ut=()=>{var e;Ve(""),null===(e=Ye.current)||void 0===e||e.focus(),null==Ee||Ee()},dt=()=>null==je?void 0:je();w("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":if(e.preventDefault(),Oe<Ge.length-1){const e=Oe+1;null===(t=Xe.current[e])||void 0===t||t.focus(),_e(e)}break;case"ArrowUp":if(e.preventDefault(),Oe>0){const e=Oe-1;null===(r=Xe.current[e])||void 0===r||r.focus(),_e(e)}else 0===Oe&&Ye.current&&(Ye.current.focus(),_e(-1));break;case"Space":case"Enter":document.activeElement===Xe.current[Oe]&&(e.preventDefault(),Ge[Oe]&&at(Ge[Oe],Oe))}})),h(qe,(()=>({refocus:st})),[st]),x((()=>{var e;if(!he)return void(null===(e=Ze.current)||void 0===e||e.scrollTo({top:0}));const t=setTimeout((()=>{if(!d)return;const e=d.indexOf(he);Ze.current&&-1!==e&&(Ze.current.scrollToIndex({index:e}),_e(e))}),0);return()=>clearTimeout(t)}),[Xe,d,_e,he]),x((()=>{ne||Ke&&Je&&"success"===se&&Ye.current&&(_e(-1),Ye.current.focus())}),[Ke,Je,se,_e,ne]),x((()=>{var e;He(null!==(e=""===Ue?d:De?ot():nt())&&void 0!==e?e:[])}),[ot,nt,d,De,Ue]),x((()=>{var e,t,r;if(Ke)return;if(ne||!d)return;const i=d.findIndex((e=>lt(e)));Ye.current?(_e(-1),setTimeout((()=>{var e;return null===(e=Ye.current)||void 0===e?void 0:e.focus()}),200)):Oe>0?(null===(e=Ze.current)||void 0===e||e.scrollToIndex({index:Oe,align:"center"}),setTimeout((()=>{var e;return null===(e=Xe.current[Oe])||void 0===e?void 0:e.focus()}),200)):-1!==i?(null===(t=Ze.current)||void 0===t||t.scrollToIndex({index:i,align:"center"}),_e(i),setTimeout((()=>{var e;return null===(e=Xe.current[i])||void 0===e?void 0:e.focus()}),200)):(null===(r=Ze.current)||void 0===r||r.scrollToIndex({index:0}),_e(0),setTimeout((()=>{var e;return null===(e=Xe.current[0])||void 0===e?void 0:e.focus()}),200))}),[lt,ne,Oe,d,Ke,_e]);const mt=e=>ie?et&&!e?t(o,{"aria-hidden":!0,className:a(H,J)}):e?t(n,{"aria-hidden":!0,className:a(H,K)}):t(l,{"aria-hidden":!0,className:a(H,Q)}):e?t(s,{"aria-hidden":!0,className:a(X,Y)}):t("div",{className:X}),pt=(e,r)=>{const{title:i,secondaryLabel:l}=it(e);return t(D,{displayType:ue,label:i,maxLines:ce,selected:r,disabled:!r&&et,sublabel:l,truncationType:ae,variant:de})},ft=(i,l)=>{if(!je||"success"===se){const o=lt(i),n=l===Oe,s=!o&&et;return t("li",{"aria-selected":o,"aria-multiselectable":ie,"aria-disabled":s,"aria-posinset":l+1,"aria-setsize":null==Ge?void 0:Ge.length,"data-testid":"list-item",onClick:()=>at(i,l),onMouseEnter:()=>(e=>_e(e))(l),ref:e=>{Xe.current[l]=e},role:"option",tabIndex:n?0:-1,className:a(z,s&&U||n&&o&&V||n&&G),children:we?we(i,{selected:o}):e(r,{children:[mt(o),pt(i,o)]})},((e,t)=>`item_${t}__${ye?ye(e):e}`)(i,l))}},vt=()=>{if((Ie||De)&&"success"===se)return t(ee,{ref:Ye,onChange:ct,value:Ue,placeholder:Re,"data-testid":"search-input","aria-label":"Enter text to search",onClear:ut,variant:de})},ht=()=>{if(oe&&ie&&Ge.length>0&&!Ue&&"success"===se)return t("div",{className:P,children:t(C,{onClick:ge,type:"button",className:a(R,M),children:le||0!==oe.length?Pe:Fe})})},xt=()=>{if(!Le&&(Ue||!Ie)&&0===Ge.length&&"success"===se)return e(r,{children:[e("div",{"data-testid":"list-no-results",className:O,children:[t(i,{"data-testid":"no-result-icon",className:_}),Ae]}),Me&&t(b,{"data-testid":"no-result-desc",className:W,children:Me})]})},gt=()=>{if(je&&"loading"===se)return e("div",{"data-testid":"list-loading",className:O,children:[t(k,{className:$}),"Loading..."]})},bt=()=>{if(je&&"fail"===se)return e("div",{"data-testid":"list-fail",className:O,children:[t(i,{"data-testid":"load-error-icon",className:_}),"Failed to load. ",t(C,{onClick:dt,type:"button",className:a(R,B),children:"Try again."})]})},jt=()=>{var e;const r="test"===process.env.NODE_ENV;return t(g,Object.assign({ref:Ze,style:{height:"100%"},data:Ge,customScrollParent:null!==(e=Qe.current)&&void 0!==e?e:void 0,itemContent:(e,t)=>ft(t,e),components:{List:re,Item:te},context:{listProps:{id:me,role:"listbox","aria-multiselectable":ie},listItemProps:{role:"none"}}},r?{initialItemCount:Ge.length}:{}),r?Ge.length:void 0)};return e("div",Object.assign({"data-testid":"dropdown-container",ref:y(Qe,$e)},Be(),{"data-width-type":rt,className:a(q,"small"===de&&A),style:ze,children:[t(L,{role:"status",children:pe}),e("div",{"data-testid":"dropdown-list",role:"group","aria-label":pe,className:F,children:[vt(),ht(),xt(),gt(),bt(),jt()]}),(()=>{if(Ne)return t("div",{"data-testid":"custom-cta",children:Ne(be,Ge)})})()]}))}));export{ie as DropdownList};
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import{SquareIcon as l}from"@lifesg/react-icons/square";import{SquareFillIcon as o}from"@lifesg/react-icons/square-fill";import{SquareTickFillIcon as n}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as s}from"@lifesg/react-icons/tick";import a from"clsx";import c from"../../external/lodash/find.js";import u from"../../external/lodash/isEqual.js";import{forwardRef as d,useContext as m,useState as p,useRef as f,useCallback as v,useImperativeHandle as h,useEffect as x}from"react";import{Virtuoso as g}from"react-virtuoso";import{Markup as b}from"../../markup/markup.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as y}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as T}from"../../util/use-event.js";import{useEventListener as w}from"../../util/use-event-listener.js";import{useIsMounted as N}from"../../util/use-mount.js";import{useCompare as I}from"../../util/use-previous.js";import{VisuallyHidden as L}from"../accessibility/index.js";import{ComponentLoadingSpinner as k}from"../component-loading-spinner/component-loading-spinner.js";import{useDropdownRender as S}from"../dropdown-wrapper/element-with-dropdown.js";import{BasicButton as C}from"../input-wrapper/input-wrapper.js";import{DropdownLabel as E}from"./dropdown-label.js";import{tokens as D,container as q,containerVariantSmall as A,list as F,selectAllContainer as P,baseButton as R,selectAllButton as M,resultStateContainer as O,labelIcon as _,noResultDescContainer as W,spinner as $,tryAgainButton as B,listItem as z,listItemDisabled as U,listItemActiveSelected as V,listItemActive as G,baseCheckboxIndicatorStyle as H,checkboxDisabledIndicator as J,checkboxSelectedIndicator as K,checkboxUnselectedIndicator as Q,baseIndicatorStyle as X,selectedIndicator as Y}from"./dropdown-list.styles.js";import{DropdownListStateContext as Z}from"./dropdown-list-state.js";import{DropdownSearch as ee}from"./dropdown-search.js";import{VirtuosoItem as te,VirtuosoList as re}from"./virtuoso-components.js";const ie=d((({listItems:d,multiSelect:ie,maxSelectable:le,selectedItems:oe,disableItemFocus:ne,itemsLoadState:se="success",itemTruncationType:ae="end",itemMaxLines:ce=2,labelDisplayType:ue="inline",variant:de="default",listboxId:me,ariaLabel:pe,matchElementWidth:fe=!1,width:ve,topScrollItem:he,onSelectItem:xe,onSelectAll:ge,onDismiss:be,onRetry:je,valueExtractor:ye,listExtractor:Te,renderListItem:we,renderCustomCallToAction:Ne,enableSearch:Ie,hideNoResultsDisplay:Le,noResultsDescription:ke,customLabels:Se,searchPlaceholder:Ce,searchFunction:Ee,onSearch:De},qe)=>{const{noResultsLabel:Ae="No results found.",selectAllButtonLabel:Fe="Select all",clearAllButtonLabel:Pe="Clear all"}=Se||{},Re=(null==Se?void 0:Se.searchPlaceholder)||Ce||"Search",Me=(null==Se?void 0:Se.noResultsDescription)||ke,{focusedIndex:Oe,setFocusedIndex:_e}=m(Z),{elementWidth:We,setFloatingRef:$e,getFloatingProps:Be,styles:ze}=S(),[Ue,Ve]=p(""),[Ge,He]=p(null!=d?d:[]),Je=I(se),Ke=N(),Qe=f(null),Xe=f([]),Ye=f(null),Ze=f(null),et=!!le&&!!oe&&(null==oe?void 0:oe.length)===le;let tt,rt="default";ve?(tt=ve,rt="custom"):fe&&We&&(tt=`${We}px`,rt="match"),j(Qe,{[D.containerWidth]:tt});const it=e=>{const t=Te?Te(e):null==e?void 0:e.toString();return"object"==typeof t?{title:t.title,secondaryLabel:t.secondaryLabel}:{title:null!=t?t:""}},lt=v((e=>!!c(oe,(t=>u(t,e)))),[oe]),ot=T((()=>null==Ee?void 0:Ee(Ue))),nt=T((()=>null==d?void 0:d.filter((e=>{const{title:t,secondaryLabel:r}=it(e),i=Ue.trim().toLowerCase();return t.toLowerCase().includes(i)||r&&r.toLowerCase().includes(i)})))),st=v((e=>{var t,r;if(ne)return;if(Ye.current)return _e(-1),void setTimeout((()=>{var e;return null===(e=Ye.current)||void 0===e?void 0:e.focus()}),0);const i=null!=Ge?Ge:[];if(0===i.length)return;if(void 0!==(null==e?void 0:e.index)){const r=Math.max(0,Math.min(e.index,i.length-1));return null===(t=Ze.current)||void 0===t||t.scrollToIndex({index:r,align:"center"}),_e(r),void setTimeout((()=>{var e;return null===(e=Xe.current[r])||void 0===e?void 0:e.focus()}),0)}const l=(null==e?void 0:e.preferSelected)?i.findIndex((e=>lt(e))):-1,o=-1!==l?l:Oe>=0&&Oe<i.length?Oe:0;null===(r=Ze.current)||void 0===r||r.scrollToIndex({index:o,align:"center"}),_e(o),setTimeout((()=>{var e;return null===(e=Xe.current[o])||void 0===e?void 0:e.focus()}),0)}),[lt,ne,Ge,Oe,_e]),at=(e,t)=>{et&&!lt(e)||(_e(t),null==xe||xe(e,(e=>ye?ye(e):e)(e)))},ct=e=>{const t=e.target.value;Ve(t),null==De||De()},ut=()=>{var e;Ve(""),null===(e=Ye.current)||void 0===e||e.focus(),null==De||De()},dt=()=>null==je?void 0:je();w("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":if(e.preventDefault(),Oe<Ge.length-1){const e=Oe+1;null===(t=Xe.current[e])||void 0===t||t.focus(),_e(e)}break;case"ArrowUp":if(e.preventDefault(),Oe>0){const e=Oe-1;null===(r=Xe.current[e])||void 0===r||r.focus(),_e(e)}else 0===Oe&&Ye.current&&(Ye.current.focus(),_e(-1));break;case"Space":case"Enter":Oe>=0&&(document.activeElement===Xe.current[Oe]||document.activeElement===Ye.current)&&(e.preventDefault(),Ge[Oe]&&at(Ge[Oe],Oe))}})),h(qe,(()=>({refocus:st})),[st]),x((()=>{var e;if(!he)return void(null===(e=Ze.current)||void 0===e||e.scrollTo({top:0}));const t=setTimeout((()=>{if(!d)return;const e=d.indexOf(he);Ze.current&&-1!==e&&(Ze.current.scrollToIndex({index:e}),_e(e))}),0);return()=>clearTimeout(t)}),[Xe,d,_e,he]),x((()=>{ne||Ke&&Je&&"success"===se&&Ye.current&&(_e(-1),Ye.current.focus())}),[Ke,Je,se,_e,ne]),x((()=>{var e;He(null!==(e=""===Ue?d:Ee?ot():nt())&&void 0!==e?e:[])}),[ot,nt,d,Ee,Ue]),x((()=>{var e,t,r;if(Ke)return;if(ne||!d)return;const i=d.findIndex((e=>lt(e)));Ye.current?(_e(-1),setTimeout((()=>{var e;return null===(e=Ye.current)||void 0===e?void 0:e.focus()}),200)):Oe>0?(null===(e=Ze.current)||void 0===e||e.scrollToIndex({index:Oe,align:"center"}),setTimeout((()=>{var e;return null===(e=Xe.current[Oe])||void 0===e?void 0:e.focus()}),200)):-1!==i?(null===(t=Ze.current)||void 0===t||t.scrollToIndex({index:i,align:"center"}),_e(i),setTimeout((()=>{var e;return null===(e=Xe.current[i])||void 0===e?void 0:e.focus()}),200)):(null===(r=Ze.current)||void 0===r||r.scrollToIndex({index:0}),_e(0),setTimeout((()=>{var e;return null===(e=Xe.current[0])||void 0===e?void 0:e.focus()}),200))}),[lt,ne,Oe,d,Ke,_e]);const mt=e=>ie?et&&!e?t(o,{"aria-hidden":!0,className:a(H,J)}):e?t(n,{"aria-hidden":!0,className:a(H,K)}):t(l,{"aria-hidden":!0,className:a(H,Q)}):e?t(s,{"aria-hidden":!0,className:a(X,Y)}):t("div",{className:X}),pt=(e,r)=>{const{title:i,secondaryLabel:l}=it(e);return t(E,{displayType:ue,label:i,maxLines:ce,selected:r,disabled:!r&&et,sublabel:l,truncationType:ae,variant:de})},ft=(i,l)=>{if(!je||"success"===se){const o=lt(i),n=l===Oe,s=!o&&et;return t("li",{"aria-selected":o,"aria-multiselectable":ie,"aria-disabled":s,"aria-posinset":l+1,"aria-setsize":null==Ge?void 0:Ge.length,"data-testid":"list-item",onClick:()=>at(i,l),onMouseEnter:()=>(e=>_e(e))(l),ref:e=>{Xe.current[l]=e},role:"option",tabIndex:n?0:-1,className:a(z,s&&U||n&&o&&V||n&&G),children:we?we(i,{selected:o}):e(r,{children:[mt(o),pt(i,o)]})},((e,t)=>`item_${t}__${ye?ye(e):e}`)(i,l))}},vt=()=>{if((Ie||Ee)&&"success"===se)return t(ee,{ref:Ye,onChange:ct,value:Ue,placeholder:Re,"data-testid":"search-input","aria-label":"Enter text to search",onClear:ut,variant:de})},ht=()=>{if(oe&&ie&&Ge.length>0&&!Ue&&"success"===se)return t("div",{className:P,children:t(C,{onClick:ge,type:"button",className:a(R,M),children:le||0!==oe.length?Pe:Fe})})},xt=()=>{if(!Le&&(Ue||!Ie)&&0===Ge.length&&"success"===se)return e(r,{children:[e("div",{"data-testid":"list-no-results",className:O,children:[t(i,{"data-testid":"no-result-icon",className:_}),Ae]}),Me&&t(b,{"data-testid":"no-result-desc",className:W,children:Me})]})},gt=()=>{if(je&&"loading"===se)return e("div",{"data-testid":"list-loading",className:O,children:[t(k,{className:$}),"Loading..."]})},bt=()=>{if(je&&"fail"===se)return e("div",{"data-testid":"list-fail",className:O,children:[t(i,{"data-testid":"load-error-icon",className:_}),"Failed to load. ",t(C,{onClick:dt,type:"button",className:a(R,B),children:"Try again."})]})},jt=()=>{var e;const r="test"===process.env.NODE_ENV;return t(g,Object.assign({ref:Ze,style:{height:"100%"},data:Ge,customScrollParent:null!==(e=Qe.current)&&void 0!==e?e:void 0,itemContent:(e,t)=>ft(t,e),components:{List:re,Item:te},context:{listProps:{id:me,role:"listbox","aria-multiselectable":ie},listItemProps:{role:"none"}}},r?{initialItemCount:Ge.length}:{}),r?Ge.length:void 0)};return e("div",Object.assign({"data-testid":"dropdown-container",ref:y(Qe,$e)},Be(),{"data-width-type":rt,className:a(q,"small"===de&&A),style:ze,children:[t(L,{role:"status",children:pe}),e("div",{"data-testid":"dropdown-list",role:"group","aria-label":pe,className:F,children:[vt(),ht(),xt(),gt(),bt(),jt()]}),(()=>{if(Ne)return t("div",{"data-testid":"custom-cta",children:Ne(be,Ge)})})()]}))}));export{ie as DropdownList};
 //# sourceMappingURL=dropdown-list.js.map

package/shared/dropdown-list/dropdown-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list.js","sources":["../../../src/shared/dropdown-list/dropdown-list.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareFillIcon } from \"@lifesg/react-icons/square-fill\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport find from \"lodash/find\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport type { VirtuosoHandle } from \"react-virtuoso\";\nimport { Virtuoso } from \"react-virtuoso\";\n\nimport { Markup } from \"../../markup\";\nimport { useApplyStyle } from \"../../theme\";\nimport {\n    mergeRefs,\n    useCompare,\n    useEvent,\n    useEventListener,\n    useIsMounted,\n} from \"../../util\";\nimport { VisuallyHidden } from \"../accessibility\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport { BasicButton } from \"../input-wrapper\";\nimport { DropdownLabel } from \"./dropdown-label\";\nimport type { ContainerWidthType } from \"./dropdown-list.styles\";\nimport * as styles from \"./dropdown-list.styles\";\nimport { DropdownListStateContext } from \"./dropdown-list-state\";\nimport { DropdownSearch } from \"./dropdown-search\";\nimport type {\n    DropdownListApi,\n    DropdownListProps,\n    ListItemDisplayProps,\n} from \"./types\";\nimport { VirtuosoItem, VirtuosoList } from \"./virtuoso-components\";\n\n/**\n * NOTE: This component is not directly exportable but forms part of a component\n */\nconst DropdownListInner = <T, V>(\n    {\n        listItems,\n        multiSelect,\n        maxSelectable,\n        selectedItems,\n        disableItemFocus,\n        itemsLoadState = \"success\",\n        itemTruncationType = \"end\",\n        itemMaxLines = 2,\n        labelDisplayType = \"inline\",\n        variant = \"default\",\n        listboxId,\n        ariaLabel,\n        matchElementWidth = false,\n        width,\n        topScrollItem,\n        onSelectItem,\n        onSelectAll,\n        onDismiss,\n        onRetry,\n        /* DropdownDisplayProps */\n        valueExtractor,\n        listExtractor,\n        renderListItem,\n        renderCustomCallToAction,\n        /* DropdownSearchProps */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription: _noResultsDescription,\n        customLabels,\n        searchPlaceholder: _searchPlaceholder,\n        searchFunction,\n        onSearch,\n    }: DropdownListProps<T, V>,\n    ref: React.ForwardedRef<DropdownListApi>\n): JSX.Element => {\n    // =========================================================================\n    // CONST, REF, STATE\n    // =========================================================================\n    const {\n        noResultsLabel = \"No results found.\",\n        selectAllButtonLabel = \"Select all\",\n        clearAllButtonLabel = \"Clear all\",\n    } = customLabels || {};\n    const searchPlaceholder =\n        customLabels?.searchPlaceholder || _searchPlaceholder || \"Search\";\n    const noResultsDescription =\n        customLabels?.noResultsDescription || _noResultsDescription;\n    const { focusedIndex, setFocusedIndex } = useContext(\n        DropdownListStateContext\n    );\n    const {\n        elementWidth,\n        setFloatingRef,\n        getFloatingProps,\n        styles: floatingStyles,\n    } = useDropdownRender();\n    const [searchValue, setSearchValue] = useState<string>(\"\");\n    const [displayListItems, setDisplayListItems] = useState(listItems ?? []);\n    const itemsLoadStateChanged = useCompare(itemsLoadState);\n    const mounted = useIsMounted();\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const listItemRefs = useRef<(HTMLElement | null)[]>([]);\n    const searchInputRef = useRef<HTMLInputElement>(null);\n    const virtuosoRef = useRef<VirtuosoHandle>(null);\n\n    const hasSelectedMax =\n        !!maxSelectable &&\n        !!selectedItems &&\n        selectedItems?.length === maxSelectable;\n\n    // =========================================================================\n    // APPLY STYLES\n    // =========================================================================\n    let containerWidthType: ContainerWidthType = \"default\";\n    let containerWidth: string | undefined = undefined;\n    if (width) {\n        containerWidth = width;\n        containerWidthType = \"custom\";\n    } else if (matchElementWidth && elementWidth) {\n        containerWidth = `${elementWidth}px`;\n        containerWidthType = \"match\";\n    }\n\n    useApplyStyle(nodeRef, {\n        [styles.tokens.containerWidth]: containerWidth,\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = (item: T): V => {\n        return valueExtractor ? valueExtractor(item) : (item as unknown as V);\n    };\n\n    const getItemKey = (item: T, index: number) => {\n        const formattedValue = valueExtractor ? valueExtractor(item) : item;\n        return `item_${index}__${formattedValue}`;\n    };\n\n    const getOptionLabel = (item: T): ListItemDisplayProps => {\n        const value = listExtractor ? listExtractor(item) : item?.toString();\n\n        if (typeof value === \"object\") {\n            return { title: value.title, secondaryLabel: value.secondaryLabel };\n        }\n\n        return { title: value ?? \"\" };\n    };\n\n    const checkListItemSelected = useCallback(\n        (item: T): boolean => {\n            return !!find(selectedItems, (arrItem) => {\n                return isEqual(arrItem, item);\n            });\n        },\n        [selectedItems]\n    );\n\n    const filterItemsByCustomSearch = useEvent(() => {\n        return searchFunction?.(searchValue);\n    });\n\n    const filterItemsByLabel = useEvent(() => {\n        return listItems?.filter((item) => {\n            const { title, secondaryLabel } = getOptionLabel(item);\n            const updatedSearchValue = searchValue.trim().toLowerCase();\n            return (\n                title.toLowerCase().includes(updatedSearchValue) ||\n                (secondaryLabel &&\n                    secondaryLabel.toLowerCase().includes(updatedSearchValue))\n            );\n        });\n    });\n\n    const refocus = useCallback(\n        (opts?: { index?: number; preferSelected?: boolean }) => {\n            if (disableItemFocus) return;\n\n            if (searchInputRef.current) {\n                setFocusedIndex(-1);\n                setTimeout(() => searchInputRef.current?.focus(), 0);\n                return;\n            }\n\n            const items = displayListItems ?? [];\n            if (items.length === 0) return;\n\n            if (opts?.index !== undefined) {\n                const forced = Math.max(\n                    0,\n                    Math.min(opts.index, items.length - 1)\n                );\n                virtuosoRef.current?.scrollToIndex({\n                    index: forced,\n                    align: \"center\",\n                });\n                setFocusedIndex(forced);\n                setTimeout(() => listItemRefs.current[forced]?.focus(), 0);\n\n                return;\n            }\n\n            const selectedIndex = opts?.preferSelected\n                ? items.findIndex((item) => checkListItemSelected(item))\n                : -1;\n\n            const nextIndex =\n                selectedIndex !== -1\n                    ? selectedIndex\n                    : focusedIndex >= 0 && focusedIndex < items.length\n                    ? focusedIndex\n                    : 0;\n\n            virtuosoRef.current?.scrollToIndex({\n                index: nextIndex,\n                align: \"center\",\n            });\n            setFocusedIndex(nextIndex);\n            setTimeout(() => listItemRefs.current[nextIndex]?.focus(), 0);\n        },\n        [\n            checkListItemSelected,\n            disableItemFocus,\n            displayListItems,\n            focusedIndex,\n            setFocusedIndex,\n        ]\n    );\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyboardPress = (event: KeyboardEvent) => {\n        switch (event.code) {\n            case \"ArrowDown\":\n                event.preventDefault();\n                if (focusedIndex < displayListItems.length - 1) {\n                    const upcomingIndex = focusedIndex + 1;\n                    listItemRefs.current[upcomingIndex]?.focus();\n                    setFocusedIndex(upcomingIndex);\n                }\n                break;\n            case \"ArrowUp\":\n                event.preventDefault();\n                if (focusedIndex > 0) {\n                    const upcomingIndex = focusedIndex - 1;\n                    listItemRefs.current[upcomingIndex]?.focus();\n                    setFocusedIndex(upcomingIndex);\n                } else if (focusedIndex === 0 && searchInputRef.current) {\n                    searchInputRef.current.focus();\n                    setFocusedIndex(-1);\n                }\n                break;\n            case \"Space\":\n            case \"Enter\":\n                if (\n                    document.activeElement ===\n                    listItemRefs.current[focusedIndex]\n                ) {\n                    event.preventDefault();\n                    if (displayListItems[focusedIndex]) {\n                        handleListItemClick(\n                            displayListItems[focusedIndex],\n                            focusedIndex\n                        );\n                    }\n                }\n                break;\n            default:\n                break;\n        }\n    };\n\n    const handleListItemClick = (item: T, upcomingIndex: number) => {\n        if (hasSelectedMax && !checkListItemSelected(item)) return;\n        setFocusedIndex(upcomingIndex);\n        onSelectItem?.(item, getValue(item));\n    };\n\n    const handleListItemHover = (index: number) => setFocusedIndex(index);\n\n    const handleSearchInputChange = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const value = event.target.value;\n        setSearchValue(value);\n        onSearch?.();\n    };\n\n    const handleOnClear = () => {\n        setSearchValue(\"\");\n        searchInputRef.current?.focus();\n        onSearch?.();\n    };\n\n    const handleTryAgain = () => onRetry?.();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEventListener(\"keydown\", handleKeyboardPress);\n    useImperativeHandle(ref, () => ({ refocus }), [refocus]);\n\n    useEffect(() => {\n        if (!topScrollItem) {\n            virtuosoRef.current?.scrollTo({ top: 0 });\n            return;\n        }\n        const timer = setTimeout(() => {\n            if (!listItems) return;\n\n            const index = listItems.indexOf(topScrollItem);\n            if (virtuosoRef.current && index !== -1) {\n                virtuosoRef.current.scrollToIndex({ index });\n                setFocusedIndex(index);\n            }\n        }, 0);\n\n        return () => clearTimeout(timer);\n    }, [listItemRefs, listItems, setFocusedIndex, topScrollItem]);\n\n    useEffect(() => {\n        if (disableItemFocus) return;\n        if (!mounted || !itemsLoadStateChanged) return;\n\n        if (itemsLoadState === \"success\") {\n            if (searchInputRef.current) {\n                setFocusedIndex(-1);\n                searchInputRef.current.focus();\n            }\n        }\n    }, [\n        mounted,\n        itemsLoadStateChanged,\n        itemsLoadState,\n        setFocusedIndex,\n        disableItemFocus,\n    ]);\n\n    useEffect(() => {\n        const filterItems = () => {\n            if (searchValue === \"\") {\n                return listItems;\n            } else if (searchFunction) {\n                return filterItemsByCustomSearch();\n            } else {\n                return filterItemsByLabel();\n            }\n        };\n\n        setDisplayListItems(filterItems() ?? []);\n    }, [\n        filterItemsByCustomSearch,\n        filterItemsByLabel,\n        listItems,\n        searchFunction,\n        searchValue,\n    ]);\n\n    useEffect(() => {\n        if (mounted) {\n            return;\n        }\n\n        if (disableItemFocus || !listItems) return;\n\n        const index = listItems.findIndex((item) =>\n            checkListItemSelected(item)\n        );\n\n        if (searchInputRef.current) {\n            setFocusedIndex(-1);\n            setTimeout(() => searchInputRef.current?.focus(), 200);\n        } else if (focusedIndex > 0) {\n            virtuosoRef.current?.scrollToIndex({\n                index: focusedIndex,\n                align: \"center\",\n            });\n            setTimeout(() => listItemRefs.current[focusedIndex]?.focus(), 200);\n        } else if (index !== -1) {\n            virtuosoRef.current?.scrollToIndex({ index, align: \"center\" });\n            setFocusedIndex(index);\n            setTimeout(() => listItemRefs.current[index]?.focus(), 200);\n        } else {\n            virtuosoRef.current?.scrollToIndex({ index: 0 });\n            setFocusedIndex(0);\n            setTimeout(() => listItemRefs.current[0]?.focus(), 200);\n        }\n    }, [\n        checkListItemSelected,\n        disableItemFocus,\n        focusedIndex,\n        listItems,\n        mounted,\n        setFocusedIndex,\n    ]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderListItemIcon = (selected: boolean) => {\n        if (multiSelect) {\n            if (hasSelectedMax && !selected) {\n                return (\n                    <SquareFillIcon\n                        aria-hidden\n                        className={clsx(\n                            styles.baseCheckboxIndicatorStyle,\n                            styles.checkboxDisabledIndicator\n                        )}\n                    />\n                );\n            }\n\n            return selected ? (\n                <SquareTickFillIcon\n                    aria-hidden\n                    className={clsx(\n                        styles.baseCheckboxIndicatorStyle,\n                        styles.checkboxSelectedIndicator\n                    )}\n                />\n            ) : (\n                <SquareIcon\n                    aria-hidden\n                    className={clsx(\n                        styles.baseCheckboxIndicatorStyle,\n                        styles.checkboxUnselectedIndicator\n                    )}\n                />\n            );\n        }\n\n        return selected ? (\n            <TickIcon\n                aria-hidden\n                className={clsx(\n                    styles.baseIndicatorStyle,\n                    styles.selectedIndicator\n                )}\n            />\n        ) : (\n            <div className={styles.baseIndicatorStyle} />\n        );\n    };\n\n    const renderDropdownLabel = (item: T, selected: boolean) => {\n        const { title, secondaryLabel } = getOptionLabel(item);\n\n        return (\n            <DropdownLabel\n                displayType={labelDisplayType}\n                label={title}\n                maxLines={itemMaxLines}\n                selected={selected}\n                disabled={!selected && hasSelectedMax}\n                sublabel={secondaryLabel}\n                truncationType={itemTruncationType}\n                variant={variant}\n            />\n        );\n    };\n\n    const renderItem = (item: T, index: number) => {\n        if (!onRetry || itemsLoadState === \"success\") {\n            const selected = checkListItemSelected(item);\n            const active = index === focusedIndex;\n            const disabled = !selected && hasSelectedMax;\n            return (\n                <li\n                    aria-selected={selected}\n                    aria-multiselectable={multiSelect}\n                    aria-disabled={disabled}\n                    aria-posinset={index + 1}\n                    aria-setsize={displayListItems?.length}\n                    data-testid=\"list-item\"\n                    key={getItemKey(item, index)}\n                    onClick={() => handleListItemClick(item, index)}\n                    onMouseEnter={() => handleListItemHover(index)}\n                    ref={(element) => {\n                        listItemRefs.current[index] = element;\n                    }}\n                    role=\"option\"\n                    tabIndex={active ? 0 : -1}\n                    className={clsx(\n                        styles.listItem,\n                        (disabled && styles.listItemDisabled) ||\n                            (active &&\n                                selected &&\n                                styles.listItemActiveSelected) ||\n                            (active && styles.listItemActive)\n                    )}\n                >\n                    {renderListItem ? (\n                        renderListItem(item, { selected })\n                    ) : (\n                        <>\n                            {renderListItemIcon(selected)}\n                            {renderDropdownLabel(item, selected)}\n                        </>\n                    )}\n                </li>\n            );\n        }\n    };\n\n    const renderSearchInput = () => {\n        if ((enableSearch || searchFunction) && itemsLoadState === \"success\") {\n            return (\n                <DropdownSearch\n                    ref={searchInputRef}\n                    onChange={handleSearchInputChange}\n                    value={searchValue}\n                    placeholder={searchPlaceholder}\n                    data-testid=\"search-input\"\n                    aria-label=\"Enter text to search\"\n                    onClear={handleOnClear}\n                    variant={variant}\n                />\n            );\n        }\n    };\n\n    const renderSelectAll = () => {\n        if (\n            selectedItems &&\n            multiSelect &&\n            displayListItems.length > 0 &&\n            !searchValue &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <div className={styles.selectAllContainer}>\n                    <BasicButton\n                        onClick={onSelectAll}\n                        type=\"button\"\n                        className={clsx(\n                            styles.baseButton,\n                            styles.selectAllButton\n                        )}\n                    >\n                        {maxSelectable || selectedItems.length !== 0\n                            ? clearAllButtonLabel\n                            : selectAllButtonLabel}\n                    </BasicButton>\n                </div>\n            );\n        }\n    };\n\n    const renderNoResults = () => {\n        if (\n            !hideNoResultsDisplay &&\n            (searchValue || !enableSearch) &&\n            displayListItems.length === 0 &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <>\n                    <div\n                        data-testid=\"list-no-results\"\n                        className={styles.resultStateContainer}\n                    >\n                        <ExclamationCircleFillIcon\n                            data-testid=\"no-result-icon\"\n                            className={styles.labelIcon}\n                        />\n                        {noResultsLabel}\n                    </div>\n                    {noResultsDescription && (\n                        <Markup\n                            data-testid=\"no-result-desc\"\n                            className={styles.noResultDescContainer}\n                        >\n                            {noResultsDescription}\n                        </Markup>\n                    )}\n                </>\n            );\n        }\n    };\n\n    const renderLoading = () => {\n        if (onRetry && itemsLoadState === \"loading\") {\n            return (\n                <div\n                    data-testid=\"list-loading\"\n                    className={styles.resultStateContainer}\n                >\n                    <ComponentLoadingSpinner className={styles.spinner} />\n                    Loading...\n                </div>\n            );\n        }\n    };\n\n    const renderTryAgain = () => {\n        if (onRetry && itemsLoadState === \"fail\") {\n            return (\n                <div\n                    data-testid=\"list-fail\"\n                    className={styles.resultStateContainer}\n                >\n                    <ExclamationCircleFillIcon\n                        data-testid=\"load-error-icon\"\n                        className={styles.labelIcon}\n                    />\n                    Failed to load.&nbsp;\n                    <BasicButton\n                        onClick={handleTryAgain}\n                        type=\"button\"\n                        className={clsx(\n                            styles.baseButton,\n                            styles.tryAgainButton\n                        )}\n                    >\n                        Try again.\n                    </BasicButton>\n                </div>\n            );\n        }\n    };\n\n    const renderVirtualisedList = () => {\n        const isTestEnv = process.env.NODE_ENV === \"test\";\n\n        return (\n            <Virtuoso\n                ref={virtuosoRef}\n                style={{ height: \"100%\" }}\n                data={displayListItems}\n                customScrollParent={nodeRef.current ?? undefined}\n                itemContent={(index, item) => renderItem(item, index)}\n                components={{\n                    List: VirtuosoList,\n                    Item: VirtuosoItem,\n                }}\n                context={{\n                    listProps: {\n                        id: listboxId,\n                        role: \"listbox\",\n                        \"aria-multiselectable\": multiSelect,\n                    },\n                    listItemProps: {\n                        role: \"none\",\n                    },\n                }}\n                // disable virtualisation in tests\n                // https://github.com/petyosi/react-virtuoso/issues/26#issuecomment-1040316576\n                // explicitly set the `key` prop to avoid React warning\n                key={isTestEnv ? displayListItems.length : undefined}\n                // omit the `initialItemCount` prop to resolve NaN error\n                {...(isTestEnv\n                    ? {\n                          initialItemCount: displayListItems.length,\n                      }\n                    : {})}\n            />\n        );\n    };\n\n    const renderList = () => {\n        return (\n            <div\n                data-testid=\"dropdown-list\"\n                role=\"group\"\n                aria-label={ariaLabel}\n                className={styles.list}\n            >\n                {renderSearchInput()}\n                {renderSelectAll()}\n                {renderNoResults()}\n                {renderLoading()}\n                {renderTryAgain()}\n                {renderVirtualisedList()}\n            </div>\n        );\n    };\n\n    const renderBottomCta = () => {\n        if (!renderCustomCallToAction) {\n            return;\n        }\n\n        return (\n            <div data-testid=\"custom-cta\">\n                {renderCustomCallToAction(onDismiss as any, displayListItems)}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            data-testid=\"dropdown-container\"\n            ref={mergeRefs(nodeRef, setFloatingRef)}\n            {...getFloatingProps()}\n            data-width-type={containerWidthType}\n            className={clsx(\n                styles.container,\n                variant === \"small\" && styles.containerVariantSmall\n            )}\n            style={floatingStyles}\n        >\n            <VisuallyHidden role=\"status\">{ariaLabel}</VisuallyHidden>\n            {renderList()}\n            {renderBottomCta()}\n        </div>\n    );\n};\n\nexport const DropdownList = forwardRef(DropdownListInner);\n"],"names":["DropdownList","forwardRef","listItems","multiSelect","maxSelectable","selectedItems","disableItemFocus","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","variant","listboxId","ariaLabel","matchElementWidth","width","topScrollItem","onSelectItem","onSelectAll","onDismiss","onRetry","valueExtractor","listExtractor","renderListItem","renderCustomCallToAction","enableSearch","hideNoResultsDisplay","noResultsDescription","_noResultsDescription","customLabels","searchPlaceholder","_searchPlaceholder","searchFunction","onSearch","ref","noResultsLabel","selectAllButtonLabel","clearAllButtonLabel","focusedIndex","setFocusedIndex","useContext","DropdownListStateContext","elementWidth","setFloatingRef","getFloatingProps","styles","floatingStyles","useDropdownRender","searchValue","setSearchValue","useState","displayListItems","setDisplayListItems","itemsLoadStateChanged","useCompare","mounted","useIsMounted","nodeRef","useRef","listItemRefs","searchInputRef","virtuosoRef","hasSelectedMax","length","containerWidth","containerWidthType","useApplyStyle","styles.tokens","getOptionLabel","item","value","toString","title","secondaryLabel","checkListItemSelected","useCallback","find","arrItem","isEqual","filterItemsByCustomSearch","useEvent","filterItemsByLabel","filter","updatedSearchValue","trim","toLowerCase","includes","refocus","opts","current","setTimeout","_a","focus","items","undefined","index","forced","Math","max","min","scrollToIndex","align","selectedIndex","preferSelected","findIndex","nextIndex","_b","handleListItemClick","upcomingIndex","getValue","handleSearchInputChange","event","target","handleOnClear","handleTryAgain","useEventListener","code","preventDefault","document","activeElement","useImperativeHandle","useEffect","scrollTo","top","timer","indexOf","clearTimeout","_c","renderListItemIcon","selected","_jsx","SquareFillIcon","className","clsx","styles.baseCheckboxIndicatorStyle","styles.checkboxDisabledIndicator","SquareTickFillIcon","styles.checkboxSelectedIndicator","SquareIcon","styles.checkboxUnselectedIndicator","TickIcon","styles.baseIndicatorStyle","styles.selectedIndicator","renderDropdownLabel","DropdownLabel","displayType","label","maxLines","disabled","sublabel","truncationType","renderItem","active","onClick","onMouseEnter","handleListItemHover","element","role","tabIndex","styles.listItem","styles.listItemDisabled","styles.listItemActiveSelected","styles.listItemActive","children","_jsxs","_Fragment","getItemKey","renderSearchInput","DropdownSearch","onChange","placeholder","onClear","renderSelectAll","styles.selectAllContainer","BasicButton","type","styles.baseButton","styles.selectAllButton","renderNoResults","styles.resultStateContainer","ExclamationCircleFillIcon","styles.labelIcon","Markup","styles.noResultDescContainer","renderLoading","ComponentLoadingSpinner","styles.spinner","renderTryAgain","styles.tryAgainButton","renderVirtualisedList","isTestEnv","process","env","NODE_ENV","Virtuoso","Object","assign","style","height","data","customScrollParent","itemContent","components","List","VirtuosoList","Item","VirtuosoItem","context","listProps","id","listItemProps","initialItemCount","mergeRefs","styles.container","styles.containerVariantSmall","VisuallyHidden","styles.list","renderBottomCta"],"mappings":"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"}
+{"version":3,"file":"dropdown-list.js","sources":["../../../src/shared/dropdown-list/dropdown-list.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareFillIcon } from \"@lifesg/react-icons/square-fill\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport find from \"lodash/find\";\nimport isEqual from \"lodash/isEqual\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport type { VirtuosoHandle } from \"react-virtuoso\";\nimport { Virtuoso } from \"react-virtuoso\";\n\nimport { Markup } from \"../../markup\";\nimport { useApplyStyle } from \"../../theme\";\nimport {\n    mergeRefs,\n    useCompare,\n    useEvent,\n    useEventListener,\n    useIsMounted,\n} from \"../../util\";\nimport { VisuallyHidden } from \"../accessibility\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport { BasicButton } from \"../input-wrapper\";\nimport { DropdownLabel } from \"./dropdown-label\";\nimport type { ContainerWidthType } from \"./dropdown-list.styles\";\nimport * as styles from \"./dropdown-list.styles\";\nimport { DropdownListStateContext } from \"./dropdown-list-state\";\nimport { DropdownSearch } from \"./dropdown-search\";\nimport type {\n    DropdownListApi,\n    DropdownListProps,\n    ListItemDisplayProps,\n} from \"./types\";\nimport { VirtuosoItem, VirtuosoList } from \"./virtuoso-components\";\n\n/**\n * NOTE: This component is not directly exportable but forms part of a component\n */\nconst DropdownListInner = <T, V>(\n    {\n        listItems,\n        multiSelect,\n        maxSelectable,\n        selectedItems,\n        disableItemFocus,\n        itemsLoadState = \"success\",\n        itemTruncationType = \"end\",\n        itemMaxLines = 2,\n        labelDisplayType = \"inline\",\n        variant = \"default\",\n        listboxId,\n        ariaLabel,\n        matchElementWidth = false,\n        width,\n        topScrollItem,\n        onSelectItem,\n        onSelectAll,\n        onDismiss,\n        onRetry,\n        /* DropdownDisplayProps */\n        valueExtractor,\n        listExtractor,\n        renderListItem,\n        renderCustomCallToAction,\n        /* DropdownSearchProps */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription: _noResultsDescription,\n        customLabels,\n        searchPlaceholder: _searchPlaceholder,\n        searchFunction,\n        onSearch,\n    }: DropdownListProps<T, V>,\n    ref: React.ForwardedRef<DropdownListApi>\n): JSX.Element => {\n    // =========================================================================\n    // CONST, REF, STATE\n    // =========================================================================\n    const {\n        noResultsLabel = \"No results found.\",\n        selectAllButtonLabel = \"Select all\",\n        clearAllButtonLabel = \"Clear all\",\n    } = customLabels || {};\n    const searchPlaceholder =\n        customLabels?.searchPlaceholder || _searchPlaceholder || \"Search\";\n    const noResultsDescription =\n        customLabels?.noResultsDescription || _noResultsDescription;\n    const { focusedIndex, setFocusedIndex } = useContext(\n        DropdownListStateContext\n    );\n    const {\n        elementWidth,\n        setFloatingRef,\n        getFloatingProps,\n        styles: floatingStyles,\n    } = useDropdownRender();\n    const [searchValue, setSearchValue] = useState<string>(\"\");\n    const [displayListItems, setDisplayListItems] = useState(listItems ?? []);\n    const itemsLoadStateChanged = useCompare(itemsLoadState);\n    const mounted = useIsMounted();\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const listItemRefs = useRef<(HTMLElement | null)[]>([]);\n    const searchInputRef = useRef<HTMLInputElement>(null);\n    const virtuosoRef = useRef<VirtuosoHandle>(null);\n\n    const hasSelectedMax =\n        !!maxSelectable &&\n        !!selectedItems &&\n        selectedItems?.length === maxSelectable;\n\n    // =========================================================================\n    // APPLY STYLES\n    // =========================================================================\n    let containerWidthType: ContainerWidthType = \"default\";\n    let containerWidth: string | undefined = undefined;\n    if (width) {\n        containerWidth = width;\n        containerWidthType = \"custom\";\n    } else if (matchElementWidth && elementWidth) {\n        containerWidth = `${elementWidth}px`;\n        containerWidthType = \"match\";\n    }\n\n    useApplyStyle(nodeRef, {\n        [styles.tokens.containerWidth]: containerWidth,\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = (item: T): V => {\n        return valueExtractor ? valueExtractor(item) : (item as unknown as V);\n    };\n\n    const getItemKey = (item: T, index: number) => {\n        const formattedValue = valueExtractor ? valueExtractor(item) : item;\n        return `item_${index}__${formattedValue}`;\n    };\n\n    const getOptionLabel = (item: T): ListItemDisplayProps => {\n        const value = listExtractor ? listExtractor(item) : item?.toString();\n\n        if (typeof value === \"object\") {\n            return { title: value.title, secondaryLabel: value.secondaryLabel };\n        }\n\n        return { title: value ?? \"\" };\n    };\n\n    const checkListItemSelected = useCallback(\n        (item: T): boolean => {\n            return !!find(selectedItems, (arrItem) => {\n                return isEqual(arrItem, item);\n            });\n        },\n        [selectedItems]\n    );\n\n    const filterItemsByCustomSearch = useEvent(() => {\n        return searchFunction?.(searchValue);\n    });\n\n    const filterItemsByLabel = useEvent(() => {\n        return listItems?.filter((item) => {\n            const { title, secondaryLabel } = getOptionLabel(item);\n            const updatedSearchValue = searchValue.trim().toLowerCase();\n            return (\n                title.toLowerCase().includes(updatedSearchValue) ||\n                (secondaryLabel &&\n                    secondaryLabel.toLowerCase().includes(updatedSearchValue))\n            );\n        });\n    });\n\n    const refocus = useCallback(\n        (opts?: { index?: number; preferSelected?: boolean }) => {\n            if (disableItemFocus) return;\n\n            if (searchInputRef.current) {\n                setFocusedIndex(-1);\n                setTimeout(() => searchInputRef.current?.focus(), 0);\n                return;\n            }\n\n            const items = displayListItems ?? [];\n            if (items.length === 0) return;\n\n            if (opts?.index !== undefined) {\n                const forced = Math.max(\n                    0,\n                    Math.min(opts.index, items.length - 1)\n                );\n                virtuosoRef.current?.scrollToIndex({\n                    index: forced,\n                    align: \"center\",\n                });\n                setFocusedIndex(forced);\n                setTimeout(() => listItemRefs.current[forced]?.focus(), 0);\n\n                return;\n            }\n\n            const selectedIndex = opts?.preferSelected\n                ? items.findIndex((item) => checkListItemSelected(item))\n                : -1;\n\n            const nextIndex =\n                selectedIndex !== -1\n                    ? selectedIndex\n                    : focusedIndex >= 0 && focusedIndex < items.length\n                    ? focusedIndex\n                    : 0;\n\n            virtuosoRef.current?.scrollToIndex({\n                index: nextIndex,\n                align: \"center\",\n            });\n            setFocusedIndex(nextIndex);\n            setTimeout(() => listItemRefs.current[nextIndex]?.focus(), 0);\n        },\n        [\n            checkListItemSelected,\n            disableItemFocus,\n            displayListItems,\n            focusedIndex,\n            setFocusedIndex,\n        ]\n    );\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyboardPress = (event: KeyboardEvent) => {\n        switch (event.code) {\n            case \"ArrowDown\":\n                event.preventDefault();\n                if (focusedIndex < displayListItems.length - 1) {\n                    const upcomingIndex = focusedIndex + 1;\n                    listItemRefs.current[upcomingIndex]?.focus();\n                    setFocusedIndex(upcomingIndex);\n                }\n                break;\n            case \"ArrowUp\":\n                event.preventDefault();\n                if (focusedIndex > 0) {\n                    const upcomingIndex = focusedIndex - 1;\n                    listItemRefs.current[upcomingIndex]?.focus();\n                    setFocusedIndex(upcomingIndex);\n                } else if (focusedIndex === 0 && searchInputRef.current) {\n                    searchInputRef.current.focus();\n                    setFocusedIndex(-1);\n                }\n                break;\n            case \"Space\":\n            case \"Enter\":\n                if (\n                    focusedIndex >= 0 &&\n                    (document.activeElement ===\n                        listItemRefs.current[focusedIndex] ||\n                        document.activeElement === searchInputRef.current)\n                ) {\n                    event.preventDefault();\n                    if (displayListItems[focusedIndex]) {\n                        handleListItemClick(\n                            displayListItems[focusedIndex],\n                            focusedIndex\n                        );\n                    }\n                }\n                break;\n            default:\n                break;\n        }\n    };\n\n    const handleListItemClick = (item: T, upcomingIndex: number) => {\n        if (hasSelectedMax && !checkListItemSelected(item)) return;\n        setFocusedIndex(upcomingIndex);\n        onSelectItem?.(item, getValue(item));\n    };\n\n    const handleListItemHover = (index: number) => setFocusedIndex(index);\n\n    const handleSearchInputChange = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const value = event.target.value;\n        setSearchValue(value);\n        onSearch?.();\n    };\n\n    const handleOnClear = () => {\n        setSearchValue(\"\");\n        searchInputRef.current?.focus();\n        onSearch?.();\n    };\n\n    const handleTryAgain = () => onRetry?.();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEventListener(\"keydown\", handleKeyboardPress);\n    useImperativeHandle(ref, () => ({ refocus }), [refocus]);\n\n    useEffect(() => {\n        if (!topScrollItem) {\n            virtuosoRef.current?.scrollTo({ top: 0 });\n            return;\n        }\n        const timer = setTimeout(() => {\n            if (!listItems) return;\n\n            const index = listItems.indexOf(topScrollItem);\n            if (virtuosoRef.current && index !== -1) {\n                virtuosoRef.current.scrollToIndex({ index });\n                setFocusedIndex(index);\n            }\n        }, 0);\n\n        return () => clearTimeout(timer);\n    }, [listItemRefs, listItems, setFocusedIndex, topScrollItem]);\n\n    useEffect(() => {\n        if (disableItemFocus) return;\n        if (!mounted || !itemsLoadStateChanged) return;\n\n        if (itemsLoadState === \"success\") {\n            if (searchInputRef.current) {\n                setFocusedIndex(-1);\n                searchInputRef.current.focus();\n            }\n        }\n    }, [\n        mounted,\n        itemsLoadStateChanged,\n        itemsLoadState,\n        setFocusedIndex,\n        disableItemFocus,\n    ]);\n\n    useEffect(() => {\n        const filterItems = () => {\n            if (searchValue === \"\") {\n                return listItems;\n            } else if (searchFunction) {\n                return filterItemsByCustomSearch();\n            } else {\n                return filterItemsByLabel();\n            }\n        };\n\n        setDisplayListItems(filterItems() ?? []);\n    }, [\n        filterItemsByCustomSearch,\n        filterItemsByLabel,\n        listItems,\n        searchFunction,\n        searchValue,\n    ]);\n\n    useEffect(() => {\n        if (mounted) {\n            return;\n        }\n\n        if (disableItemFocus || !listItems) return;\n\n        const index = listItems.findIndex((item) =>\n            checkListItemSelected(item)\n        );\n\n        if (searchInputRef.current) {\n            setFocusedIndex(-1);\n            setTimeout(() => searchInputRef.current?.focus(), 200);\n        } else if (focusedIndex > 0) {\n            virtuosoRef.current?.scrollToIndex({\n                index: focusedIndex,\n                align: \"center\",\n            });\n            setTimeout(() => listItemRefs.current[focusedIndex]?.focus(), 200);\n        } else if (index !== -1) {\n            virtuosoRef.current?.scrollToIndex({ index, align: \"center\" });\n            setFocusedIndex(index);\n            setTimeout(() => listItemRefs.current[index]?.focus(), 200);\n        } else {\n            virtuosoRef.current?.scrollToIndex({ index: 0 });\n            setFocusedIndex(0);\n            setTimeout(() => listItemRefs.current[0]?.focus(), 200);\n        }\n    }, [\n        checkListItemSelected,\n        disableItemFocus,\n        focusedIndex,\n        listItems,\n        mounted,\n        setFocusedIndex,\n    ]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderListItemIcon = (selected: boolean) => {\n        if (multiSelect) {\n            if (hasSelectedMax && !selected) {\n                return (\n                    <SquareFillIcon\n                        aria-hidden\n                        className={clsx(\n                            styles.baseCheckboxIndicatorStyle,\n                            styles.checkboxDisabledIndicator\n                        )}\n                    />\n                );\n            }\n\n            return selected ? (\n                <SquareTickFillIcon\n                    aria-hidden\n                    className={clsx(\n                        styles.baseCheckboxIndicatorStyle,\n                        styles.checkboxSelectedIndicator\n                    )}\n                />\n            ) : (\n                <SquareIcon\n                    aria-hidden\n                    className={clsx(\n                        styles.baseCheckboxIndicatorStyle,\n                        styles.checkboxUnselectedIndicator\n                    )}\n                />\n            );\n        }\n\n        return selected ? (\n            <TickIcon\n                aria-hidden\n                className={clsx(\n                    styles.baseIndicatorStyle,\n                    styles.selectedIndicator\n                )}\n            />\n        ) : (\n            <div className={styles.baseIndicatorStyle} />\n        );\n    };\n\n    const renderDropdownLabel = (item: T, selected: boolean) => {\n        const { title, secondaryLabel } = getOptionLabel(item);\n\n        return (\n            <DropdownLabel\n                displayType={labelDisplayType}\n                label={title}\n                maxLines={itemMaxLines}\n                selected={selected}\n                disabled={!selected && hasSelectedMax}\n                sublabel={secondaryLabel}\n                truncationType={itemTruncationType}\n                variant={variant}\n            />\n        );\n    };\n\n    const renderItem = (item: T, index: number) => {\n        if (!onRetry || itemsLoadState === \"success\") {\n            const selected = checkListItemSelected(item);\n            const active = index === focusedIndex;\n            const disabled = !selected && hasSelectedMax;\n            return (\n                <li\n                    aria-selected={selected}\n                    aria-multiselectable={multiSelect}\n                    aria-disabled={disabled}\n                    aria-posinset={index + 1}\n                    aria-setsize={displayListItems?.length}\n                    data-testid=\"list-item\"\n                    key={getItemKey(item, index)}\n                    onClick={() => handleListItemClick(item, index)}\n                    onMouseEnter={() => handleListItemHover(index)}\n                    ref={(element) => {\n                        listItemRefs.current[index] = element;\n                    }}\n                    role=\"option\"\n                    tabIndex={active ? 0 : -1}\n                    className={clsx(\n                        styles.listItem,\n                        (disabled && styles.listItemDisabled) ||\n                            (active &&\n                                selected &&\n                                styles.listItemActiveSelected) ||\n                            (active && styles.listItemActive)\n                    )}\n                >\n                    {renderListItem ? (\n                        renderListItem(item, { selected })\n                    ) : (\n                        <>\n                            {renderListItemIcon(selected)}\n                            {renderDropdownLabel(item, selected)}\n                        </>\n                    )}\n                </li>\n            );\n        }\n    };\n\n    const renderSearchInput = () => {\n        if ((enableSearch || searchFunction) && itemsLoadState === \"success\") {\n            return (\n                <DropdownSearch\n                    ref={searchInputRef}\n                    onChange={handleSearchInputChange}\n                    value={searchValue}\n                    placeholder={searchPlaceholder}\n                    data-testid=\"search-input\"\n                    aria-label=\"Enter text to search\"\n                    onClear={handleOnClear}\n                    variant={variant}\n                />\n            );\n        }\n    };\n\n    const renderSelectAll = () => {\n        if (\n            selectedItems &&\n            multiSelect &&\n            displayListItems.length > 0 &&\n            !searchValue &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <div className={styles.selectAllContainer}>\n                    <BasicButton\n                        onClick={onSelectAll}\n                        type=\"button\"\n                        className={clsx(\n                            styles.baseButton,\n                            styles.selectAllButton\n                        )}\n                    >\n                        {maxSelectable || selectedItems.length !== 0\n                            ? clearAllButtonLabel\n                            : selectAllButtonLabel}\n                    </BasicButton>\n                </div>\n            );\n        }\n    };\n\n    const renderNoResults = () => {\n        if (\n            !hideNoResultsDisplay &&\n            (searchValue || !enableSearch) &&\n            displayListItems.length === 0 &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <>\n                    <div\n                        data-testid=\"list-no-results\"\n                        className={styles.resultStateContainer}\n                    >\n                        <ExclamationCircleFillIcon\n                            data-testid=\"no-result-icon\"\n                            className={styles.labelIcon}\n                        />\n                        {noResultsLabel}\n                    </div>\n                    {noResultsDescription && (\n                        <Markup\n                            data-testid=\"no-result-desc\"\n                            className={styles.noResultDescContainer}\n                        >\n                            {noResultsDescription}\n                        </Markup>\n                    )}\n                </>\n            );\n        }\n    };\n\n    const renderLoading = () => {\n        if (onRetry && itemsLoadState === \"loading\") {\n            return (\n                <div\n                    data-testid=\"list-loading\"\n                    className={styles.resultStateContainer}\n                >\n                    <ComponentLoadingSpinner className={styles.spinner} />\n                    Loading...\n                </div>\n            );\n        }\n    };\n\n    const renderTryAgain = () => {\n        if (onRetry && itemsLoadState === \"fail\") {\n            return (\n                <div\n                    data-testid=\"list-fail\"\n                    className={styles.resultStateContainer}\n                >\n                    <ExclamationCircleFillIcon\n                        data-testid=\"load-error-icon\"\n                        className={styles.labelIcon}\n                    />\n                    Failed to load.&nbsp;\n                    <BasicButton\n                        onClick={handleTryAgain}\n                        type=\"button\"\n                        className={clsx(\n                            styles.baseButton,\n                            styles.tryAgainButton\n                        )}\n                    >\n                        Try again.\n                    </BasicButton>\n                </div>\n            );\n        }\n    };\n\n    const renderVirtualisedList = () => {\n        const isTestEnv = process.env.NODE_ENV === \"test\";\n\n        return (\n            <Virtuoso\n                ref={virtuosoRef}\n                style={{ height: \"100%\" }}\n                data={displayListItems}\n                customScrollParent={nodeRef.current ?? undefined}\n                itemContent={(index, item) => renderItem(item, index)}\n                components={{\n                    List: VirtuosoList,\n                    Item: VirtuosoItem,\n                }}\n                context={{\n                    listProps: {\n                        id: listboxId,\n                        role: \"listbox\",\n                        \"aria-multiselectable\": multiSelect,\n                    },\n                    listItemProps: {\n                        role: \"none\",\n                    },\n                }}\n                // disable virtualisation in tests\n                // https://github.com/petyosi/react-virtuoso/issues/26#issuecomment-1040316576\n                // explicitly set the `key` prop to avoid React warning\n                key={isTestEnv ? displayListItems.length : undefined}\n                // omit the `initialItemCount` prop to resolve NaN error\n                {...(isTestEnv\n                    ? {\n                          initialItemCount: displayListItems.length,\n                      }\n                    : {})}\n            />\n        );\n    };\n\n    const renderList = () => {\n        return (\n            <div\n                data-testid=\"dropdown-list\"\n                role=\"group\"\n                aria-label={ariaLabel}\n                className={styles.list}\n            >\n                {renderSearchInput()}\n                {renderSelectAll()}\n                {renderNoResults()}\n                {renderLoading()}\n                {renderTryAgain()}\n                {renderVirtualisedList()}\n            </div>\n        );\n    };\n\n    const renderBottomCta = () => {\n        if (!renderCustomCallToAction) {\n            return;\n        }\n\n        return (\n            <div data-testid=\"custom-cta\">\n                {renderCustomCallToAction(onDismiss as any, displayListItems)}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            data-testid=\"dropdown-container\"\n            ref={mergeRefs(nodeRef, setFloatingRef)}\n            {...getFloatingProps()}\n            data-width-type={containerWidthType}\n            className={clsx(\n                styles.container,\n                variant === \"small\" && styles.containerVariantSmall\n            )}\n            style={floatingStyles}\n        >\n            <VisuallyHidden role=\"status\">{ariaLabel}</VisuallyHidden>\n            {renderList()}\n            {renderBottomCta()}\n        </div>\n    );\n};\n\nexport const DropdownList = forwardRef(DropdownListInner);\n"],"names":["DropdownList","forwardRef","listItems","multiSelect","maxSelectable","selectedItems","disableItemFocus","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","variant","listboxId","ariaLabel","matchElementWidth","width","topScrollItem","onSelectItem","onSelectAll","onDismiss","onRetry","valueExtractor","listExtractor","renderListItem","renderCustomCallToAction","enableSearch","hideNoResultsDisplay","noResultsDescription","_noResultsDescription","customLabels","searchPlaceholder","_searchPlaceholder","searchFunction","onSearch","ref","noResultsLabel","selectAllButtonLabel","clearAllButtonLabel","focusedIndex","setFocusedIndex","useContext","DropdownListStateContext","elementWidth","setFloatingRef","getFloatingProps","styles","floatingStyles","useDropdownRender","searchValue","setSearchValue","useState","displayListItems","setDisplayListItems","itemsLoadStateChanged","useCompare","mounted","useIsMounted","nodeRef","useRef","listItemRefs","searchInputRef","virtuosoRef","hasSelectedMax","length","containerWidth","containerWidthType","useApplyStyle","styles.tokens","getOptionLabel","item","value","toString","title","secondaryLabel","checkListItemSelected","useCallback","find","arrItem","isEqual","filterItemsByCustomSearch","useEvent","filterItemsByLabel","filter","updatedSearchValue","trim","toLowerCase","includes","refocus","opts","current","setTimeout","_a","focus","items","undefined","index","forced","Math","max","min","scrollToIndex","align","selectedIndex","preferSelected","findIndex","nextIndex","_b","handleListItemClick","upcomingIndex","getValue","handleSearchInputChange","event","target","handleOnClear","handleTryAgain","useEventListener","code","preventDefault","document","activeElement","useImperativeHandle","useEffect","scrollTo","top","timer","indexOf","clearTimeout","_c","renderListItemIcon","selected","_jsx","SquareFillIcon","className","clsx","styles.baseCheckboxIndicatorStyle","styles.checkboxDisabledIndicator","SquareTickFillIcon","styles.checkboxSelectedIndicator","SquareIcon","styles.checkboxUnselectedIndicator","TickIcon","styles.baseIndicatorStyle","styles.selectedIndicator","renderDropdownLabel","DropdownLabel","displayType","label","maxLines","disabled","sublabel","truncationType","renderItem","active","onClick","onMouseEnter","handleListItemHover","element","role","tabIndex","styles.listItem","styles.listItemDisabled","styles.listItemActiveSelected","styles.listItemActive","children","_jsxs","_Fragment","getItemKey","renderSearchInput","DropdownSearch","onChange","placeholder","onClear","renderSelectAll","styles.selectAllContainer","BasicButton","type","styles.baseButton","styles.selectAllButton","renderNoResults","styles.resultStateContainer","ExclamationCircleFillIcon","styles.labelIcon","Markup","styles.noResultDescContainer","renderLoading","ComponentLoadingSpinner","styles.spinner","renderTryAgain","styles.tryAgainButton","renderVirtualisedList","isTestEnv","process","env","NODE_ENV","Virtuoso","Object","assign","style","height","data","customScrollParent","itemContent","components","List","VirtuosoList","Item","VirtuosoItem","context","listProps","id","listItemProps","initialItemCount","mergeRefs","styles.container","styles.containerVariantSmall","VisuallyHidden","styles.list","renderBottomCta"],"mappings":"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"}