@lifesg/react-design-system 4.0.0-alpha.4 → 4.0.0-alpha.6

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/**\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/select-histogram.styles_n260dy.css

@@ -1,5 +1,5 @@
-.h1snxaxy{overflow:hidden;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);padding:var(--fds-spacing-16);min-width:23rem;}:where(body.fds-breakpoint-sm-max) .h1snxaxy{min-width:unset;width:calc(100vw - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xxs) * 2);}
+@layer fds{.h1snxaxy{overflow:hidden;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);padding:var(--fds-spacing-16);min-width:23rem;}:where(body.fds-breakpoint-sm-max) .h1snxaxy{min-width:unset;width:calc(100vw - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xxs) * 2);}
 .l1e4uw6e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
 .s134rtp9{margin:0 0.5rem;color:var(--fds-colour-text);}
 .p11079xa{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);text-align:left;overflow:hidden;color:var(--fds-colour-text-subtler);}
-.p1bydnw6{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
+.p1bydnw6{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}}

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/accessibility/index_13g9vp.css

@@ -1 +1 @@
-.v17efraz{-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;}
+@layer fds{.v17efraz{-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;}}

package/shared/clickable-icon/clickable-icon.styles_1v2imml.css

@@ -1,3 +1,3 @@
-.m18ljjag{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-24);background-color:transparent;border:none;cursor:pointer;}.m18ljjag img{height:1rem;width:1rem;}.m18ljjag svg{height:1.125rem;width:1.125rem;}
+@layer fds{.m18ljjag{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-24);background-color:transparent;border:none;cursor:pointer;}.m18ljjag img{height:1rem;width:1rem;}.m18ljjag svg{height:1.125rem;width:1.125rem;}
 .o1plr5dj:active,.o1plr5dj:focus{outline:none;}
-.hv69up9:active,.hv69up9:focus{background-color:var(--fds-colour-bg-hover-neutral);}
+.hv69up9:active,.hv69up9:focus{background-color:var(--fds-colour-bg-hover-neutral);}}

package/shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css

@@ -1,5 +1,5 @@
-.oqwr3hs{display:inline-block;position:relative;width:var(--fds-internal-componentLoadingSpinner-root-size, 1em);height:var(--fds-internal-componentLoadingSpinner-root-size, 1em);color:var(--fds-internal-componentLoadingSpinner-root-colour, currentColor);}
+@layer fds{.oqwr3hs{display:inline-block;position:relative;width:var(--fds-internal-componentLoadingSpinner-root-size, 1em);height:var(--fds-internal-componentLoadingSpinner-root-size, 1em);color:var(--fds-internal-componentLoadingSpinner-root-colour, currentColor);}
 .i5p5ltp{box-sizing:border-box;display:block;position:absolute;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);border-width:2px;border-style:solid;border-radius:100%;border-color:currentColor transparent transparent transparent;-webkit-animation:component-loading-spinner-rotate-i5p5ltp 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;animation:component-loading-spinner-rotate-i5p5ltp 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;}@-webkit-keyframes component-loading-spinner-rotate-i5p5ltp{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes component-loading-spinner-rotate-i5p5ltp{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
 .i1trawld{-webkit-animation-delay:-0.45s;animation-delay:-0.45s;}
 .iav978u{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
-.i1fnvvih{-webkit-animation-delay:-0.15s;animation-delay:-0.15s;}
+.i1fnvvih{-webkit-animation-delay:-0.15s;animation-delay:-0.15s;}}

package/shared/dropdown-list/dropdown-label.styles_mloii0.css

@@ -1,4 +1,4 @@
-.pi58ntt{font-weight:var(--fds-font-weight-regular);color:var(--fds-colour-text);width:100%;overflow-wrap:break-word;}
+@layer fds{.pi58ntt{font-weight:var(--fds-font-weight-regular);color:var(--fds-colour-text);width:100%;overflow-wrap:break-word;}
 .p1wtg030{font-weight:var(--fds-font-weight-semibold);}
 .p4cirxp{color:var(--fds-colour-text-selected);}
 .pp0vhoy{color:var(--fds-colour-text-disabled);}
@@ -16,4 +16,4 @@
 .b1tiox0q{display:inline-block;width:100%;height:1lh;overflow:hidden;}
 .t1y8fzo0{word-break:break-all;}
 .t18n9ljk{text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:right;}
-.tgn5sfi{width:50%;}
+.tgn5sfi{width:50%;}}

package/shared/dropdown-list/dropdown-list.styles_konwm.css

@@ -1,4 +1,4 @@
-.c1wprmqt{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);--fds-internal-dropdownList-container-xSpacing:0px;--fds-internal-dropdownList-container-availableWidth:calc(
+@layer fds{.c1wprmqt{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);--fds-internal-dropdownList-container-xSpacing:0px;--fds-internal-dropdownList-container-availableWidth:calc(
         100vw - var(--fds-internal-dropdownList-container-xSpacing) * 2
     );max-height:min(
         27rem,
@@ -23,4 +23,4 @@
 .rlpycri{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--fds-spacing-12) var(--fds-spacing-16);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fds-colour-text);}
 .l9eregy{margin-right:var(--fds-spacing-4);color:var(--fds-colour-icon-error);height:1em;width:1em;}
 .smon6ho{margin-right:var(--fds-spacing-8);color:var(--fds-colour-icon);}
-.n1mo99ai{color:var(--fds-colour-text-subtle);padding:0 var(--fds-spacing-16);padding-bottom:var(--fds-spacing-12);}
+.n1mo99ai{color:var(--fds-colour-text-subtle);padding:0 var(--fds-spacing-16);padding-bottom:var(--fds-spacing-12);}}

package/shared/dropdown-list/dropdown-search.styles_1hc1gkh.css

@@ -1,7 +1,7 @@
-.cimxtn{background:var(--fds-colour-bg-strong);border-radius:var(--fds-radius-sm);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+@layer fds{.cimxtn{background:var(--fds-colour-bg-strong);border-radius:var(--fds-radius-sm);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
 .c5t5jsb{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
 .s9xptf8{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);padding:10px var(--fds-spacing-8);}
 .s15dwc6n{padding:var(--fds-spacing-8) var(--fds-spacing-16);}
 .slme00w{-webkit-flex:1;-ms-flex:1;flex:1;}
 .s18shux7{color:var(--fds-colour-icon);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
-.c1ml832z{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;box-sizing:content-box;padding:var(--fds-spacing-8);margin-left:calc(var(--fds-spacing-8) * -1);color:var(--fds-colour-icon);cursor:pointer;font-size:inherit;}.c1ml832z svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
+.c1ml832z{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;box-sizing:content-box;padding:var(--fds-spacing-8);margin-left:calc(var(--fds-spacing-8) * -1);color:var(--fds-colour-icon);cursor:pointer;font-size:inherit;}.c1ml832z svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}}

package/shared/dropdown-list/expandable-element.styles_rkkvqr.css

@@ -1,5 +1,5 @@
-.s14ftgne{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);height:calc(3rem - 2px);}.s14ftgne:disabled{cursor:not-allowed;}.s14ftgne:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}
+@layer fds{.s14ftgne{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);height:calc(3rem - 2px);}.s14ftgne:disabled{cursor:not-allowed;}.s14ftgne:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}
 .s14xk9xz{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);height:calc(2.5rem - 2px);}
 .s2pr33o{padding:var(--fds-spacing-16);}
 .i11rk48k{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}.i11rk48k svg{color:var(--fds-colour-icon);height:1em;width:1em;}
-.i1r624au{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.i1r624au{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}}

package/shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css

@@ -1,4 +1,4 @@
-.l6gdpz7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+@layer fds{.l6gdpz7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 .l2m1xi2{display:none;}
 .l7sjxgx{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--fds-spacing-8);padding:var(--fds-spacing-12) var(--fds-spacing-8);cursor:pointer;overflow:hidden;border-radius:var(--fds-radius-none);outline:none;}
 .lda1ll2{cursor:default;}
@@ -9,4 +9,4 @@
 .uz6io6h{width:1lh;height:1lh;margin-right:var(--fds-spacing-8);}
 .simvld9{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
 .s1en693q{width:1lh;}
-.c1an54qc{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1lh;color:var(--fds-colour-icon-selected);}
+.c1an54qc{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1lh;color:var(--fds-colour-icon-selected);}}

package/shared/dropdown-list/types.d.ts

@@ -1,14 +1,37 @@
+/**
+ * How overflowing option text is truncated.
+ *
+ * - `"middle"` trims the centre of the text.
+ * - `"end"` trims from the right.
+ */
 export type TruncateType = "middle" | "end";
+/**
+ * Async load state for dropdown items.
+ *
+ * - `"loading"` while fetching.
+ * - `"fail"` on error (shows a call-to-action to retry).
+ * - `"success"` when ready.
+ */
 export type ItemsLoadStateType = "loading" | "fail" | "success";
+/** Controls whether secondary labels render inline or on a new line. */
 export type LabelDisplayType = "inline" | "next-line";
+/**
+ * Visual size variant for the dropdown.
+ *
+ * - `"default"` renders standard height.
+ * - `"small"` renders reduced height.
+ */
 export type DropdownVariantType = "small" | "default";
+/** Runtime context passed to a custom `renderListItem` callback. */
 export interface ListItemRenderArgs {
     selected: boolean;
 }
+/** Display model for a list item with an optional secondary label. */
 export interface ListItemDisplayProps {
     title: string;
     secondaryLabel?: string | undefined;
 }
+/** Overrides for built-in text labels rendered inside a dropdown. */
 export interface DropdownCustomLabelProps {
     searchPlaceholder?: string | undefined;
     noResultsLabel?: string | undefined;
@@ -18,48 +41,49 @@ export interface DropdownCustomLabelProps {
     allSelectedLabel?: string | undefined;
     multiSelectedLabel?: string | undefined;
 }
+/** Props controlling how dropdown items are displayed and rendered. */
 export interface DropdownDisplayProps<T, V> {
-    /** Function to derive value from an item */
+    /** Extracts the comparable value from an option item. */
     valueExtractor?: ((item: T) => V) | undefined;
-    /** Function to derive options display value from an item */
+    /** Extracts the display text for a list item. */
     listExtractor?: ((item: T) => string | ListItemDisplayProps) | undefined;
-    /** Function to render custom component */
+    /** Renders a fully custom element for each list item. */
     renderListItem?: ((item: T, args: ListItemRenderArgs) => JSX.Element) | undefined;
     /**
-     * Function to render a custom call-to-action component at the bottom of the dropdown list.
-     * @param hideOptions - A function that can be called to hide the dropdown list.
-     * @param options - The currently displayed list items in the dropdown list.
-     * @returns A JSX.Element representing the custom call-to-action component.
+     * Renders a custom call-to-action at the bottom of the dropdown list.
+     *
+     * @param hideOptions Callback to programmatically close the dropdown.
+     * @param options The currently displayed list items.
      */
     renderCustomCallToAction?: ((hideOptions: () => void, options: T[]) => JSX.Element) | undefined;
 }
+/** Props controlling the search functionality within a dropdown. */
 export interface DropdownSearchProps<T> {
-    /** Specifying will render a search bar in the dropdown */
+    /** Renders a search bar inside the dropdown when `true`. */
     enableSearch?: boolean | undefined;
-    /** If specified, the default no results display will not be rendered */
+    /** Suppresses the built-in "no results" message when `true`. */
     hideNoResultsDisplay?: boolean | undefined;
-    /** @deprecated use `noResultsDescription` inside `customLabels` */
+    /** @deprecated Use `noResultsDescription` inside `customLabels`. */
     noResultsDescription?: React.ReactNode | undefined;
-    /** @deprecated use `searchPlaceholder` inside `customLabels` */
+    /** @deprecated Use `searchPlaceholder` inside `customLabels`. */
     searchPlaceholder?: string | undefined;
-    /** Custom function to perform search when a user keys in a value in the search input */
+    /** Custom filter function invoked on each keystroke in the search input. */
     searchFunction?: ((searchValue: string) => T[]) | undefined;
+    /** Called when the user types in the search input. */
     onSearch?: (() => void) | undefined;
 }
+/** Internal configuration props for the dropdown list behaviour. */
 export interface DropdownConfigProps {
     multiSelect?: boolean | undefined;
     maxSelectable?: number | undefined;
     customLabels?: DropdownCustomLabelProps | undefined;
-    /**
-     * Used when items are loaded from an api call.
-     * Values: "loading" | "fail" | "success"
-     */
+    /** Async load state driving the loading spinner, error retry, or list render. */
     itemsLoadState?: ItemsLoadStateType | undefined;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
+    /** How overflowing item text is truncated. */
     itemTruncationType?: TruncateType | undefined;
-    /** Specifies the maximum number of lines visible before the label is truncated for "end" type */
+    /** Maximum visible lines before the label is truncated (applies to `"end"` truncation). */
     itemMaxLines?: number | undefined;
-    /** Specifies the variant type. Small type will have shorter height. Values: "default" | "small" */
+    /** Visual size variant for the dropdown items. */
     variant?: DropdownVariantType | undefined;
 }
 export interface DropdownListProps<T, V> extends DropdownDisplayProps<T, V>, DropdownSearchProps<T>, DropdownConfigProps {
@@ -86,19 +110,27 @@ export interface DropdownListApi {
         preferSelected?: boolean;
     }) => void;
 }
+/** A leaf node in a nested dropdown tree (has no children). */
 export interface NestedDropdownListLeafItem<T> {
     key: string;
     label: string;
     value: T;
     subItems?: never | undefined;
 }
+/** A parent node in a nested dropdown tree (has child `subItems`). */
 export interface NestedDropdownListParentItem<T> {
     key: string;
     label: string;
     value: T;
     subItems: NestedDropdownListItemProps<T>[];
 }
+/**
+ * A single node in a nested dropdown tree.
+ *
+ * Presence of `subItems` discriminates parent nodes from leaf nodes.
+ */
 export type NestedDropdownListItemProps<T> = NestedDropdownListLeafItem<T> | NestedDropdownListParentItem<T>;
+/** Internal enriched representation of a nested dropdown item with computed tree state. */
 export interface NestedDropdownListLocalItem<T> {
     item: NestedDropdownListItemProps<T>;
     index: number;
@@ -117,6 +149,7 @@ export interface NestedDropdownListLocalItem<T> {
     matched: boolean;
     hasMatchedSubItems: boolean;
 }
+/** Initial expand/collapse state for nested dropdown items when the list opens. */
 export type ExpandMode = "default" | "expand" | "collapse";
 export interface NestedDropdownListProps<T> extends DropdownSearchProps<NestedDropdownListItemProps<T>>, DropdownConfigProps {
     listItems: NestedDropdownListItemProps<T>[];

package/shared/dropdown-wrapper/dropdown-wrapper.styles_15hwwoj.css

@@ -1,3 +1,3 @@
-.l9c71lq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;word-break:break-all;}.l9c71lq[data-disabled="true"]{color:var(--fds-colour-text-disabled);}
+@layer fds{.l9c71lq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;word-break:break-all;}.l9c71lq[data-disabled="true"]{color:var(--fds-colour-text-disabled);}
 .vlxe5wy{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);text-align:left;overflow:hidden;}.vlxe5wy[data-variant="small"]{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}.vlxe5wy:not([data-truncate="middle"]){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
-.p3mumjy{color:var(--fds-colour-text-subtler);}
+.p3mumjy{color:var(--fds-colour-text-subtler);}}

package/shared/dropdown-wrapper/types.d.ts

@@ -19,4 +19,10 @@ export interface LabelContainerProps {
     disabled?: boolean | undefined;
     children: React.ReactNode;
 }
+/**
+ * Horizontal alignment of the dropdown relative to its trigger.
+ *
+ * - `"left"` left-aligns the dropdown with the trigger.
+ * - `"right"` right-aligns the dropdown with the trigger.
+ */
 export type DropdownAlignmentType = "left" | "right";