@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.11

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

@@ -1,73 +1,171 @@
+/**
+ * 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;
+    disabled: 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;
+    noResultsDescription?: React.ReactNode | undefined;
+    selectAllButtonLabel?: string | undefined;
+    clearAllButtonLabel?: string | undefined;
+    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 */
+    /** Returns `true` if the given option should be shown but not selectable. */
+    isOptionDisabled?: ((item: T) => boolean) | undefined;
+    /** 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;
-}
-export interface DropdownStyleProps {
-    listStyleWidth?: string | undefined;
-}
-export interface DropdownEventHandlerProps<T, V> {
-    onSelectItem?: ((item: T, extractedValue: V) => void) | undefined;
-    onSelectItems?: ((items: T[]) => void) | undefined;
+    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`. */
+    noResultsDescription?: React.ReactNode | undefined;
+    /** @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;
 }
-export interface DropdownListProps<T, V> extends React.HTMLAttributes<HTMLUListElement>, DropdownEventHandlerProps<T, V>, DropdownDisplayProps<T, V>, DropdownSearchProps<T>, DropdownStyleProps {
-    listItems?: T[] | undefined;
-    visible?: boolean | undefined;
+/** Internal configuration props for the dropdown list behaviour. */
+export interface DropdownConfigProps {
     multiSelect?: boolean | undefined;
-    selectedItems?: T[] | undefined;
-    disableItemFocus?: boolean | undefined;
-    /**
-     * Used when items are loaded from an api call.
-     * Values: "loading" | "fail" | "success"
-     */
+    maxSelectable?: number | undefined;
+    customLabels?: DropdownCustomLabelProps | undefined;
+    /** 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;
+    /** Visual size variant for the dropdown items. */
+    variant?: DropdownVariantType | undefined;
+}
+export interface DropdownListProps<T, V> extends DropdownDisplayProps<T, V>, DropdownSearchProps<T>, DropdownConfigProps {
+    listItems?: T[] | undefined;
+    selectedItems?: T[] | undefined;
+    disableItemFocus?: boolean | undefined;
+    listboxId?: string | undefined;
     /** Specifying flex direction within item */
     labelDisplayType?: LabelDisplayType | undefined;
-    /** Specifies the variant type. Small type will have shorter height. Values: "default" | "small" */
-    variant?: DropdownVariantType | undefined;
-    onDismiss?: ((setSelectorFocus?: boolean | undefined) => void) | undefined;
+    /** Specifies the item for which the dropdown’s scroll position will be automatically adjusted */
+    topScrollItem?: T | undefined;
+    matchElementWidth?: boolean | undefined;
+    /** Custom width for the dropdown. When specified, takes precedence over matchElementWidth */
+    width?: string | undefined;
+    ariaLabel?: string | undefined;
+    onSelectItem?: ((item: T, extractedValue: V) => void) | undefined;
     onSelectAll?: (() => void) | undefined;
+    onDismiss?: ((setSelectorFocus?: boolean | undefined) => void) | undefined;
     onRetry?: (() => void) | undefined;
-    onBlur?: (() => void) | undefined;
 }
-export interface ListItemSelectorProps {
-    onClick?: (() => void) | undefined;
+export interface DropdownListApi {
+    refocus: (opts?: {
+        index?: number;
+        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>[];
 }
-export interface IconProps {
-    $variant?: DropdownVariantType | undefined;
+/**
+ * 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;
+    indexInParent: number;
+    parentSetSize: number;
+    keyPath: string[];
+    parentIndex: number;
+    parentKeyPath: string[];
+    level: number;
+    visible: boolean;
+    expanded: boolean;
+    checked: "mixed" | true | false;
+    hasSubItems: boolean;
+    subItemIndexes: number[];
+    hasNestedSiblings: boolean;
+    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>[];
+    selectedKeyPaths: Set<string>;
+    listboxId?: string | undefined;
+    /** Specifies if items are expanded or collapsed when the dropdown is opened */
+    mode?: ExpandMode | undefined;
+    /** If specified, the category label is selectable */
+    selectableCategory?: boolean | undefined;
+    matchElementWidth?: boolean | undefined;
+    /** Custom width for the dropdown. When specified, takes precedence over matchElementWidth */
+    width?: string | undefined;
+    onSelectItem?: ((item: NestedDropdownListLocalItem<T>) => void) | undefined;
+    onSelectAll?: ((keyPaths: string[][], items: NestedDropdownListLocalItem<T>[]) => void) | undefined;
+    onRetry?: (() => void) | undefined;
 }

package/shared/dropdown-list/virtuoso-components.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+import type { Components } from "react-virtuoso";
+interface VirtuosoContext {
+    listProps: React.HTMLAttributes<HTMLDivElement>;
+    listItemProps: React.HTMLAttributes<HTMLDivElement>;
+}
+type VirtuosoListProps = Exclude<Components<unknown, VirtuosoContext>["List"], undefined>;
+type VirtuosoItemProps = Exclude<Components<unknown, VirtuosoContext>["Item"], undefined>;
+export declare const VirtuosoList: (props: ComponentProps<VirtuosoListProps> & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const VirtuosoItem: (props: ComponentProps<VirtuosoItemProps> & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export {};

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

@@ -0,0 +1,2 @@
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{forwardRef as o}from"react";const e=o(((o,e)=>{const{context:i}=o,n=t(o,["context"]);return r("div",Object.assign({ref:e},null==i?void 0:i.listProps,n))})),i=o(((o,e)=>{const{context:i,item:n}=o,s=t(o,["context","item"]);return r("div",Object.assign({ref:e},null==i?void 0:i.listItemProps,s))}));export{i as VirtuosoItem,e as VirtuosoList};
+//# sourceMappingURL=virtuoso-components.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"virtuoso-components.js","sources":["../../../src/shared/dropdown-list/virtuoso-components.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { Components } from \"react-virtuoso\";\n\ninterface VirtuosoContext {\n    listProps: React.HTMLAttributes<HTMLDivElement>;\n    listItemProps: React.HTMLAttributes<HTMLDivElement>;\n}\n\ntype VirtuosoListProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"List\"],\n    undefined\n>;\n\ntype VirtuosoItemProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"Item\"],\n    undefined\n>;\n\nconst List = (\n    props: ComponentProps<VirtuosoListProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, ...otherProps } = props;\n    return <div ref={ref} {...context?.listProps} {...otherProps} />;\n};\n\nexport const VirtuosoList = forwardRef(List);\n\nconst Item = (\n    props: ComponentProps<VirtuosoItemProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, item: _item, ...otherProps } = props;\n\n    return <div ref={ref} {...context?.listItemProps} {...otherProps} />;\n};\n\nexport const VirtuosoItem = forwardRef(Item);\n"],"names":["VirtuosoList","forwardRef","props","ref","context","otherProps","__rest","_jsx","Object","assign","listProps","VirtuosoItem","item","_item","listItemProps"],"mappings":"6HAmBA,MAQaA,EAAeC,GARf,CACTC,EACAC,KAEA,MAAMC,QAAEA,GAA2BF,EAAfG,EAAUC,EAAKJ,EAA7B,CAAA,YACN,OAAOK,EAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASM,UAAeL,GAAc,IAcvDM,EAAeV,GATf,CACTC,EACAC,KAEA,MAAMC,QAAEA,EAASQ,KAAMC,GAAyBX,EAAfG,EAAUC,EAAKJ,EAA1C,CAAA,UAAA,SAEN,OAAOK,EAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASU,cAAmBT,GAAc"}

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

@@ -1,2 +1,4 @@
-import type { DropdownSelectorProps } from "./types";
-export declare const DropdownWrapper: ({ children, show, error, disabled, testId, onBlur, readOnly, className, variant, }: DropdownSelectorProps) => JSX.Element;
+import type { LabelContainerProps, ValueLabelProps } from "./types";
+export declare const ValueLabel: ({ variant, truncateType, children, }: ValueLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PlaceholderLabel: ({ variant, truncateType, children, }: ValueLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LabelContainer: (props: LabelContainerProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/shared/dropdown-wrapper/dropdown-wrapper.js

@@ -0,0 +1,2 @@
+import{jsx as a}from"react/jsx-runtime";import r from"clsx";import{forwardRef as t}from"react";import{labelContainer as e,valueLabel as i,placeholderLabel as d}from"./dropdown-wrapper.styles.js";const n=({variant:r,truncateType:t,children:e})=>a("div",{className:i,"data-variant":r,"data-truncate":t,children:e}),c=({variant:t,truncateType:e,children:n})=>a("div",{className:r(i,d),"data-variant":t,"data-truncate":e,children:n}),s=t((function({disabled:r,children:t},i){return a("div",{className:e,"data-disabled":r,ref:i,children:t})}));export{s as LabelContainer,c as PlaceholderLabel,n as ValueLabel};
+//# sourceMappingURL=dropdown-wrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-wrapper.js","sources":["../../../src/shared/dropdown-wrapper/dropdown-wrapper.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport * as styles from \"./dropdown-wrapper.styles\";\nimport type { LabelContainerProps, ValueLabelProps } from \"./types\";\n\nexport const ValueLabel = ({\n    variant,\n    truncateType,\n    children,\n}: ValueLabelProps) => (\n    <div\n        className={styles.valueLabel}\n        data-variant={variant}\n        data-truncate={truncateType}\n    >\n        {children}\n    </div>\n);\n\nexport const PlaceholderLabel = ({\n    variant,\n    truncateType,\n    children,\n}: ValueLabelProps) => (\n    <div\n        className={clsx(styles.valueLabel, styles.placeholderLabel)}\n        data-variant={variant}\n        data-truncate={truncateType}\n    >\n        {children}\n    </div>\n);\n\nexport const LabelContainer = forwardRef<HTMLDivElement, LabelContainerProps>(\n    function LabelContainer({ disabled, children }, ref) {\n        return (\n            <div\n                className={styles.labelContainer}\n                data-disabled={disabled}\n                ref={ref}\n            >\n                {children}\n            </div>\n        );\n    }\n);\n"],"names":["ValueLabel","variant","truncateType","children","_jsx","className","styles.valueLabel","PlaceholderLabel","clsx","styles.placeholderLabel","LabelContainer","forwardRef","disabled","ref","styles.labelContainer"],"mappings":"mMAMO,MAAMA,EAAa,EACtBC,UACAC,eACAC,cAEAC,EAAA,MAAA,CACIC,UAAWC,EAAiB,eACdL,EAAO,gBACNC,EAAYC,SAE1BA,IAIII,EAAmB,EAC5BN,UACAC,eACAC,cAEAC,EAAA,MAAA,CACIC,UAAWG,EAAKF,EAAmBG,GAAwB,eAC7CR,EAAO,gBACNC,WAEdC,IAIIO,EAAiBC,GAC1B,UAAwBC,SAAEA,EAAQT,SAAEA,GAAYU,GAC5C,OACIT,EAAA,MAAA,CACIC,UAAWS,EAAqB,gBACjBF,EACfC,IAAKA,WAEJV,GAGb"}

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

@@ -1,35 +1,3 @@
-import type { DropdownVariantType, TruncateType } from "../dropdown-list/types";
-export interface DropdownWrapperStyleProps {
-    $disabled?: boolean;
-    $readOnly?: boolean;
-    $error?: boolean;
-    $expanded?: boolean;
-}
-export interface ValueLabelStyleProps {
-    $truncateType?: TruncateType;
-    $variant?: DropdownVariantType | undefined;
-}
-export interface SelectorStyleProps {
-    $variant?: DropdownVariantType | undefined;
-}
-export interface LabelContainerStyleProps {
-    $disabled?: boolean | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectorStyleProps>> & string;
-export declare const baseSelectorCSS: import("styled-components").RuleSet<SelectorStyleProps>;
-export declare const Selector: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, SelectorStyleProps>> & string;
-export declare const SelectorDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectorStyleProps>> & string;
-export declare const ElementBoundary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DropdownWrapperStyleProps>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DropdownWrapperStyleProps>> & string;
-export declare const StyledChevronIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, SelectorStyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LabelContainerStyleProps>> & string;
-export declare const ValueLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ValueLabelStyleProps>> & string;
-export declare const PlaceholderLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+export declare const labelContainer: import("@linaria/core").LinariaClassName;
+export declare const valueLabel: import("@linaria/core").LinariaClassName;
+export declare const placeholderLabel: import("@linaria/core").LinariaClassName;

package/shared/dropdown-wrapper/dropdown-wrapper.styles.js

@@ -1,131 +1,2 @@
-import{ChevronDownIcon as o}from"@lifesg/react-icons/chevron-down";import r,{css as e,keyframes as i}from"styled-components";import{V3_Spacing as t,V3_Radius as n,V3_Colour as d,V3_Border as s,V3_Motion as a,V3_Font as l}from"../../v3_theme/index.js";import{lineClampCss as b}from"../styles/index.js";const $=o=>"small"===o?2.5:3,c=r.div`
-    position: relative;
-    width: 100%;
-    ${o=>{const r=$(o.$variant);return e`
-            min-height: ${r}rem;
-            height: ${r}rem; // Need this to persist the height when expanding or collapsing list
-        `}}
-`,p=e`
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 ${t["spacing-16"]};
-    // exclude top and bottom borders
-    height: calc(${o=>$(o.$variant)}rem - 2px);
-    width: 100%;
-    border-radius: ${n.sm};
-    border: none;
-    background: transparent;
-
-    &:focus,
-    &:active {
-        outline: none;
-    }
-
-    &:focus-visible {
-        outline: 2px solid ${d["border-focus"]};
-    }
-`,u=r.button`
-    ${p}
-    cursor: pointer;
-`;r.div`
-    ${p}
-`;const f=i`
-	from {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		z-index: 2;
-	}
-
-	to {
-		position: relative;
-        width: 100%;
-	}
-`;r.div`
-    position: relative;
-    border: ${s["width-010"]} ${s.solid}
-        ${d.border};
-    border-radius: ${n.sm};
-    background: ${d.bg};
-    overflow: hidden;
-
-    &:focus-within {
-        border-color: ${d["border-focus"]};
-        box-shadow: 0px 0px 4px 0px
-            rgb(from ${d["border-focus"]} r g b / 50%) inset; // TODO: confirm shadow
-    }
-
-    ${o=>o.$expanded?e`
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                z-index: 2;
-            `:e`
-                animation: ${f} 0.5s ease-in-out;
-            `}
-
-    ${o=>o.$disabled?e`
-                background: ${d["bg-disabled"]};
-
-                ${u} {
-                    cursor: not-allowed;
-                }
-
-                &:focus-within {
-                    border-color: ${d.border};
-                    box-shadow: none;
-                }
-            `:o.$readOnly?e`
-                border: none;
-                background: transparent !important;
-
-                ${u} {
-                    padding: 0;
-                }
-
-                &:focus-within {
-                    border: none;
-                    box-shadow: none;
-                }
-            `:o.$error?e`
-                border-color: ${d["border-error"]};
-
-                &:focus-within {
-                    border-color: ${d["border-error"]};
-                    box-shadow: 0px 0px 4px 0px
-                        rgb(from ${d["border-error"]} r g b / 50%) inset; // TODO: confirm shadow
-                }
-            `:void 0}
-`,r.div`
-    transform: rotate(${o=>o.$expanded?180:0}deg);
-    transition: transform ${a["duration-250"]}
-        ${a["ease-default"]};
-    margin-left: ${t["spacing-16"]};
-`,r(o)`
-    color: ${d.icon};
-`,r.div`
-    height: 1px;
-    background: ${d.border};
-    margin: 0 ${t["spacing-8"]};
-`;const h=r.div`
-    display: flex;
-    flex: 1;
-    word-break: break-all;
-    ${o=>{if(o.$disabled)return e`
-                color: ${d["text-disabled"]};
-            `}}
-`,m=r.div`
-    ${o=>"small"===o.$variant?l["body-md-regular"]:l["body-baseline-regular"]}
-    text-align: left;
-    ${o=>{if("middle"!==o.$truncateType)return e`
-                    ${b(1)}
-                `}}
-    overflow: hidden;
-`,g=r(m)`
-    color: ${d["text-subtler"]};
-`;export{h as LabelContainer,g as PlaceholderLabel,u as Selector,m as ValueLabel,c as Wrapper,p as baseSelectorCSS};
+import"./dropdown-wrapper.styles_15hwwoj.css";const p="l9c71lq",r="vlxe5wy",o="p3mumjy";export{p as labelContainer,o as placeholderLabel,r as valueLabel};
 //# sourceMappingURL=dropdown-wrapper.styles.js.map

package/shared/dropdown-wrapper/dropdown-wrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport styled, { css, keyframes } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport type { DropdownVariantType, TruncateType } from \"../dropdown-list/types\";\nimport { lineClampCss } from \"../styles\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\nexport interface DropdownWrapperStyleProps {\n    $disabled?: boolean;\n    $readOnly?: boolean;\n    $error?: boolean;\n    $expanded?: boolean;\n}\n\nexport interface ValueLabelStyleProps {\n    $truncateType?: TruncateType;\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface SelectorStyleProps {\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface LabelContainerStyleProps {\n    $disabled?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getHeight = (variant?: DropdownVariantType | undefined) => {\n    return variant === \"small\" ? 2.5 : 3;\n};\n\nexport const Wrapper = styled.div<SelectorStyleProps>`\n    position: relative;\n    width: 100%;\n    ${(props) => {\n        const height = getHeight(props.$variant);\n        return css`\n            min-height: ${height}rem;\n            height: ${height}rem; // Need this to persist the height when expanding or collapsing list\n        `;\n    }}\n`;\n\nexport const baseSelectorCSS = css<SelectorStyleProps>`\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 ${V3_Spacing[\"spacing-16\"]};\n    // exclude top and bottom borders\n    height: calc(${(props) => getHeight(props.$variant)}rem - 2px);\n    width: 100%;\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: none;\n    background: transparent;\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"border-focus\"]};\n    }\n`;\n\nexport const Selector = styled.button<SelectorStyleProps>`\n    ${baseSelectorCSS}\n    cursor: pointer;\n`;\n\nexport const SelectorDiv = styled.div<SelectorStyleProps>`\n    ${baseSelectorCSS}\n`;\n\n// Note: Need this to only switch back after\n// react-spring animation ends\nconst zindexPositionHide = keyframes`\n\tfrom {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tz-index: 2;\n\t}\n\n\tto {\n\t\tposition: relative;\n        width: 100%;\n\t}\n`;\n\nexport const ElementBoundary = styled.div<DropdownWrapperStyleProps>`\n    position: relative;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n    overflow: hidden;\n\n    &:focus-within {\n        border-color: ${V3_Colour[\"border-focus\"]};\n        box-shadow: 0px 0px 4px 0px\n            rgb(from ${V3_Colour[\"border-focus\"]} r g b / 50%) inset; // TODO: confirm shadow\n    }\n\n    ${(props) => {\n        if (props.$expanded) {\n            return css`\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                z-index: 2;\n            `;\n        } else {\n            return css`\n                animation: ${zindexPositionHide} 0.5s ease-in-out;\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                background: ${V3_Colour[\"bg-disabled\"]};\n\n                ${Selector} {\n                    cursor: not-allowed;\n                }\n\n                &:focus-within {\n                    border-color: ${V3_Colour[\"border\"]};\n                    box-shadow: none;\n                }\n            `;\n        } else if (props.$readOnly) {\n            return css`\n                border: none;\n                background: transparent !important;\n\n                ${Selector} {\n                    padding: 0;\n                }\n\n                &:focus-within {\n                    border: none;\n                    box-shadow: none;\n                }\n            `;\n        } else if (props.$error) {\n            return css`\n                border-color: ${V3_Colour[\"border-error\"]};\n\n                &:focus-within {\n                    border-color: ${V3_Colour[\"border-error\"]};\n                    box-shadow: 0px 0px 4px 0px\n                        rgb(from ${V3_Colour[\"border-error\"]} r g b / 50%) inset; // TODO: confirm shadow\n                }\n            `;\n        }\n    }}\n`;\n\nexport const IconContainer = styled.div<DropdownWrapperStyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: transform ${V3_Motion[\"duration-250\"]}\n        ${V3_Motion[\"ease-default\"]};\n    margin-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const StyledChevronIcon = styled(ChevronDownIcon)<SelectorStyleProps>`\n    color: ${V3_Colour[\"icon\"]};\n`;\n\nexport const Divider = styled.div`\n    height: 1px;\n    background: ${V3_Colour[\"border\"]};\n    margin: 0 ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const LabelContainer = styled.div<LabelContainerStyleProps>`\n    display: flex;\n    flex: 1;\n    word-break: break-all;\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"text-disabled\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["getHeight","variant","Wrapper","styled","div","props","height","$variant","css","baseSelectorCSS","V3_Spacing","V3_Radius","V3_Colour","Selector","button","zindexPositionHide","keyframes","V3_Border","$expanded","$disabled","$readOnly","$error","V3_Motion","ChevronDownIcon","LabelContainer","ValueLabel","V3_Font","$truncateType","lineClampCss","PlaceholderLabel"],"mappings":"6SAwCA,MAAMA,EAAaC,GACI,UAAZA,EAAsB,IAAM,EAG1BC,EAAUC,EAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAASN,EAAUK,EAAME,UAC/B,OAAOC,CAAG;0BACQF;sBACJA;SACb;EAIIG,EAAkBD,CAAuB;;;;;iBAKrCE,EAAW;;mBAERL,GAAUL,EAAUK,EAAME;;qBAEzBI,EAAc;;;;;;;;;;6BAUNC,EAAU;;EAI1BC,EAAWV,EAAOW,MAA0B;MACnDL;;EAIqBN,EAAOC,GAAuB;MACnDK;EAKN,MAAMM,EAAqBC,CAAS;;;;;;;;;;;;;EAeLb,EAAOC,GAA8B;;cAEtDa,EAAU,gBAAgBA,EAAiB;UAC/CL,EAAkB;qBACPD,EAAc;kBACjBC,EAAc;;;;wBAIRA,EAAU;;uBAEXA,EAAU;;;MAG1BP,GACKA,EAAMa,UACCV,CAAG;;;;;;cAQHA,CAAG;6BACOO;;;MAKtBV,GACKA,EAAMc,UACCX,CAAG;8BACQI,EAAU;;kBAEtBC;;;;;oCAKkBD,EAAkB;;;cAInCP,EAAMe,UACNZ,CAAG;;;;kBAIJK;;;;;;;;cASCR,EAAMgB,OACNb,CAAG;gCACUI,EAAU;;;oCAGNA,EAAU;;mCAEXA,EAAU;;mBAP9B;EAccT,EAAOC,GAA8B;wBACzCC,GAAWA,EAAMa,UAAY,IAAM;4BAChCI,EAAU;UAC5BA,EAAU;mBACDZ,EAAW;EAGGP,EAAOoB,EAAoC;aAC/DX,EAAgB;EAGNT,EAAOC,GAAG;;kBAEfQ,EAAkB;gBACpBF,EAAW;EAGpB,MAAMc,EAAiBrB,EAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMc,UACN,OAAOX,CAAG;yBACGI,EAAU;aAE3B;EAIKa,EAAatB,EAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAmB,EAAQ,mBACRA,EAAQ;;MAEfrB,IACC,GACS,WADDA,EAAMsB,cAKN,OAAOnB,CAAG;sBACJoB,EAAa;;;EAOtBC,EAAmB1B,EAAOsB,EAAW;aACrCb,EAAU;"}
+{"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampCss } from \"../styles\";\n\nexport const labelContainer = css`\n    display: flex;\n    flex: 1;\n    word-break: break-all;\n\n    &[data-disabled=\"true\"] {\n        color: ${Colour[\"text-disabled\"]};\n    }\n`;\n\nexport const valueLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    text-align: left;\n    overflow: hidden;\n\n    &[data-variant=\"small\"] {\n        ${Font[\"body-md-regular\"]}\n    }\n\n    &:not([data-truncate=\"middle\"]) {\n        ${lineClampCss(1)}\n    }\n`;\n\nexport const placeholderLabel = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["labelContainer","valueLabel","placeholderLabel"],"mappings":"qFAKO,MAAMA,EAAc,UAUdC,EAAU,UAeVC,EAAgB"}

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

@@ -0,0 +1,3 @@
+@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);}}

package/shared/dropdown-wrapper/element-with-dropdown.d.ts

@@ -10,9 +10,10 @@ export interface DropdownRenderProps {
 interface ElementWithDropdownProps {
     enabled: boolean;
     isOpen: boolean;
-    onOpen?: () => void | undefined;
-    onClose?: (reason: OpenChangeReason | undefined) => void | undefined;
-    onDismiss?: () => void | undefined;
+    onOpen?: (() => void) | undefined;
+    onClose?: ((reason: OpenChangeReason | undefined) => void) | undefined;
+    onDismiss?: (() => void) | undefined;
+    onHide?: (() => void) | undefined;
     renderElement: () => React.ReactNode;
     renderDropdown: (props: DropdownRenderProps) => React.ReactNode;
     customZIndex?: number | undefined;
@@ -62,5 +63,5 @@ export declare const useDropdownRender: () => DropdownRenderProps;
  * })
  * ```
  */
-export declare const ElementWithDropdown: ({ enabled, isOpen, onOpen, onClose, onDismiss, renderElement, renderDropdown, customZIndex, clickToToggle, offset: dropdownOffset, alignment, fitAvailableHeight, rootNode, positionRef, }: ElementWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ElementWithDropdown: ({ enabled, isOpen, onOpen, onClose, onDismiss, onHide, renderElement, renderDropdown, customZIndex, clickToToggle, offset: dropdownOffset, alignment, fitAvailableHeight, rootNode, positionRef, }: ElementWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/shared/dropdown-wrapper/element-with-dropdown.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import{useFloating as i,autoUpdate as o,offset as l,flip as r,shift as s,limitShift as a,size as d,useTransitionStyles as m,useClick as c,useDismiss as g,useInteractions as h,FloatingPortal as p,FloatingFocusManager as f}from"@floating-ui/react";import{createContext as u,useContext as y,useRef as b}from"react";import{useResizeDetector as x}from"../../external/react-resize-detector/build/index.esm.js";import{ThemeContext as v}from"styled-components";import{useFloatingChild as w}from"../../overlay/use-floating-context.js";import{useInheritedThemeScope as j}from"../../theme/theme-provider/hooks.js";import{V3_Breakpoint as F}from"../../v3_theme/index.js";const O=e=>"right"===e?"bottom-end":"bottom-start",P=u({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})}),R=()=>y(P),H=({enabled:u,isOpen:R,onOpen:H,onClose:W,onDismiss:k,renderElement:M,renderDropdown:z,customZIndex:C,clickToToggle:D=!1,offset:E=0,alignment:I="left",fitAvailableHeight:S,rootNode:T,positionRef:A})=>{var N;const Z=y(v),$=F["sm-max"]({theme:Z}),_=b(null),{width:q=0}=x({targetRef:null!=A?A:_,handleHeight:!1}),B={name:"center",fn:({x:e,rects:t})=>{const n=0===e||e+t.floating.width===window.innerWidth,i=window.innerWidth<$;return{x:n&&i?(window.innerWidth-t.floating.width)/2:e}}},{refs:G,floatingStyles:J,context:K}=i({open:R,onOpenChange:(e,t,n)=>{"escape-key"===n?null==k||k():e&&!R?null==H||H():!e&&R&&(null==W||W(n))},whileElementsMounted:o,placement:O(I),middleware:[l(E),r(),s({limiter:a()}),d({apply({availableHeight:e,elements:t}){!S||e>=t.floating.scrollHeight?t.floating.style.setProperty("--available-height",""):t.floating.style.setProperty("--available-height",`${Math.max(0,e)}px`)}}),B]}),L=w(),{isMounted:Q,styles:U}=m(K,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:V,themeStyle:X}=j(Q),Y=c(K,{enabled:u,toggle:D,keyboardHandlers:D}),ee=g(K,{enabled:u}),{getReferenceProps:te,getFloatingProps:ne}=h([Y,ee]),ie={elementWidth:q,styles:Object.assign(Object.assign(Object.assign({},U),J),{zIndex:null!==(N=null!=C?C:L)&&void 0!==N?N:50}),setFloatingRef:G.setFloating,getFloatingProps:ne};return e(t,{children:[n("div",Object.assign({ref:e=>{_.current=e,G.setReference(e)}},te(),{children:M()})),Q&&n(p,{root:T,children:n(f,{context:K,modal:!1,initialFocus:-1,returnFocus:!1,children:n(P.Provider,{value:ie,children:n("div",Object.assign({},V,{style:X,children:z(ie)}))})})})]})};export{P as DropdownRenderContext,H as ElementWithDropdown,R as useDropdownRender};
+import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useFloating as o,autoUpdate as n,offset as r,flip as l,shift as s,limitShift as a,size as m,useTransitionStyles as d,useClick as p,useDismiss as c,useInteractions as g,FloatingPortal as h,FloatingFocusManager as u}from"@floating-ui/react";import{createContext as f,useContext as j,useRef as y,useEffect as b}from"react";import{useResizeDetector as v}from"../../external/react-resize-detector/build/index.esm.js";import{useFloatingChild as x}from"../../overlay/use-floating-context.js";import"../../theme/theme-provider/index.js";import{useInheritedThemeScope as w}from"../../theme/theme-provider/hooks.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as k}from"../../util/use-event.js";import{usePrevious as F}from"../../util/use-previous.js";import{useMaxWidthMediaQuery as H}from"../../theme/utils/use-media-query.js";import{tokens as O}from"./element-with-dropdown.styles.js";const P=e=>"right"===e?"bottom-end":"bottom-start",R=f({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})}),W=()=>j(R),M=({enabled:f,isOpen:j,onOpen:W,onClose:M,onDismiss:q,onHide:z,renderElement:C,renderDropdown:D,customZIndex:E,clickToToggle:I=!1,offset:S=0,alignment:T="left",fitAvailableHeight:A,rootNode:N,positionRef:Z})=>{var $;const B=H("sm"),G=y(null),{width:J=0}=v({targetRef:null!=Z?Z:G,handleHeight:!1}),K={name:"center",fn:({x:e,rects:t})=>({x:(0===e||e+t.floating.width===window.innerWidth)&&B?(window.innerWidth-t.floating.width)/2:e})},{refs:L,floatingStyles:Q,context:U}=o({open:j,onOpenChange:(e,t,i)=>{"escape-key"===i?null==q||q():e&&!j?null==W||W():!e&&j&&(null==M||M(i))},whileElementsMounted:n,placement:P(T),middleware:[r(S),l(),s({limiter:a()}),m({apply({availableHeight:e,elements:t}){!A||e>=t.floating.scrollHeight?t.floating.style.setProperty(O.availableHeight,""):t.floating.style.setProperty(O.availableHeight,`${Math.max(0,e)}px`)}}),K]}),V=x(),{isMounted:X,styles:Y}=d(U,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:_,themeStyle:ee}=w(X),te=p(U,{enabled:f,toggle:I,keyboardHandlers:I}),ie=c(U,{enabled:f}),{getReferenceProps:oe,getFloatingProps:ne}=g([te,ie]),re=F(X),le=k((()=>null==z?void 0:z()));b((()=>{re&&!X&&le()}),[re,X,le]);const se={elementWidth:J,styles:Object.assign(Object.assign(Object.assign({},Y),Q),{zIndex:null!==($=null!=E?E:V)&&void 0!==$?$:50}),setFloatingRef:L.setFloating,getFloatingProps:ne};return e(t,{children:[i("div",Object.assign({ref:e=>{G.current=e,L.setReference(e)}},oe(),{children:C()})),X&&i(h,{root:N,children:i(u,{context:U,modal:!1,initialFocus:-1,returnFocus:!1,children:i(R.Provider,{value:se,children:i("div",Object.assign({},_,{style:ee,children:D(se)}))})})})]})};export{R as DropdownRenderContext,M as ElementWithDropdown,W as useDropdownRender};
 //# sourceMappingURL=element-with-dropdown.js.map

package/shared/dropdown-wrapper/element-with-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"element-with-dropdown.js","sources":["../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n    Middleware,\n    OpenChangeReason,\n    Placement,\n} from \"@floating-ui/react\";\nimport {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { useInheritedThemeScope } from \"../../theme/theme-provider/hooks\";\nimport { V3_Breakpoint } from \"../../v3_theme\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n    elementWidth: number;\n    styles: CSSProperties;\n    setFloatingRef: (node: HTMLElement | null) => void;\n    getFloatingProps: (\n        userProps?: React.HTMLProps<HTMLElement>\n    ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n    enabled: boolean;\n    isOpen: boolean;\n    onOpen?: () => void | undefined;\n    onClose?: (reason: OpenChangeReason | undefined) => void | undefined;\n    onDismiss?: () => void | undefined;\n    renderElement: () => React.ReactNode;\n    renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n    customZIndex?: number | undefined;\n    clickToToggle?: boolean | undefined;\n    /* the distance between the reference element and the dropdown */\n    offset?: number | undefined;\n    /* the alignment of the dropdown to the left or right of the reference element */\n    alignment?: DropdownAlignmentType | undefined;\n    fitAvailableHeight?: boolean | undefined;\n    /**\n     * The root element that contains the popover element. Defaults to the document body.\n     *\n     * If the parent that contains the trigger element has a higher z-index than the popover,\n     * the popover may not be visible. Specify the parent element here instead\n     */\n    rootNode?: RefObject<HTMLElement> | undefined;\n    /** If set, the `elementWidth` refers to this instead of the reference element */\n    positionRef?: RefObject<HTMLElement> | undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n    switch (alignment) {\n        case \"right\":\n            return \"bottom-end\";\n        case \"left\":\n        default:\n            return \"bottom-start\";\n    }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n    elementWidth: 0,\n    styles: {},\n    setFloatingRef: () => {\n        // noop\n    },\n    getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n    return useContext(DropdownRenderContext);\n};\n\n/**\n * A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n *\n * Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n *   `max-height: min(100px, var(--available-height, infinity * 1px))`\n *\n * Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n *   ref={setFloatingRef}\n *   style={styles}\n *   {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n *\n * If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n *   onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n    enabled,\n    isOpen,\n    onOpen,\n    onClose,\n    onDismiss,\n    renderElement,\n    renderDropdown,\n    customZIndex,\n    clickToToggle = false,\n    offset: dropdownOffset = 0,\n    alignment = \"left\",\n    fitAvailableHeight,\n    rootNode,\n    positionRef,\n}: ElementWithDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const elementRef = useRef<HTMLDivElement | null>(null);\n    const { width: referenceWidth = 0 } = useResizeDetector({\n        targetRef: positionRef ?? elementRef,\n        handleHeight: false,\n    });\n    const center: Middleware = {\n        name: \"center\",\n        fn: ({ x, rects }) => {\n            const noGapInBetween =\n                x === 0 || x + rects.floating.width === window.innerWidth;\n            const isMobileScreen = window.innerWidth < mobileBreakpoint;\n            return {\n                x:\n                    noGapInBetween && isMobileScreen\n                        ? (window.innerWidth - rects.floating.width) / 2\n                        : x,\n            };\n        },\n    };\n    const { refs, floatingStyles, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open, _event, reason) => {\n            if (reason === \"escape-key\") {\n                onDismiss?.();\n            } else if (open && !isOpen) {\n                onOpen?.();\n            } else if (!open && isOpen) {\n                onClose?.(reason);\n            }\n        },\n        whileElementsMounted: autoUpdate,\n        placement: getFloatingPlacement(alignment),\n        middleware: [\n            offset(dropdownOffset),\n            flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            size({\n                // shrink to fit available vertical space\n                apply({ availableHeight, elements }) {\n                    if (\n                        !fitAvailableHeight ||\n                        availableHeight >= elements.floating.scrollHeight\n                    ) {\n                        // reset this so that dropdown can expand as needed\n                        elements.floating.style.setProperty(\n                            \"--available-height\",\n                            \"\"\n                        );\n                        return;\n                    }\n\n                    elements.floating.style.setProperty(\n                        \"--available-height\",\n                        `${Math.max(0, availableHeight)}px`\n                    );\n                },\n            }),\n            center,\n        ],\n    });\n    const parentZIndex = useFloatingChild();\n\n    const { isMounted, styles } = useTransitionStyles(context, {\n        initial: { opacity: 0 },\n        open: { opacity: 1 },\n        duration: 300,\n    });\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    const click = useClick(context, {\n        enabled,\n        toggle: clickToToggle,\n        keyboardHandlers: clickToToggle,\n    });\n    const dismiss = useDismiss(context, { enabled });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n    ]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const dropdownRenderProps = {\n        elementWidth: referenceWidth,\n        styles: {\n            ...styles,\n            ...floatingStyles,\n            zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n        },\n        setFloatingRef: refs.setFloating,\n        getFloatingProps,\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    elementRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps()}\n            >\n                {renderElement()}\n            </div>\n            {isMounted && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                        returnFocus={false} // leads to focus trap. parent to handle the final focus state\n                    >\n                        <DropdownRenderContext.Provider\n                            value={dropdownRenderProps}\n                        >\n                            <div {...themeProps} style={themeStyle}>\n                                {renderDropdown(dropdownRenderProps)}\n                            </div>\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","useDropdownRender","useContext","ElementWithDropdown","enabled","isOpen","onOpen","onClose","onDismiss","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","theme","ThemeContext","mobileBreakpoint","V3_Breakpoint","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","noGapInBetween","floating","window","innerWidth","isMobileScreen","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"mtBAiEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,KAGlBC,EAAoB,IACtBC,EAAWP,GAiCTQ,EAAsB,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBpB,YAAY,OACZqB,qBACAC,WACAC,wBAKA,MAAMC,EAAQhB,EAAWiB,GACnBC,EAAmBC,EAAc,UAAU,CAAEH,UAC7CI,EAAaC,EAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAkB,CACpDC,UAAWV,QAAAA,EAAeK,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YACN,MAAMC,EACI,IAANF,GAAWA,EAAIC,EAAME,SAASX,QAAUY,OAAOC,WAC7CC,EAAiBF,OAAOC,WAAajB,EAC3C,MAAO,CACHY,EACIE,GAAkBI,GACXF,OAAOC,WAAaJ,EAAME,SAASX,OAAS,EAC7CQ,EACb,IAGHO,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAY,CAClDC,KAAMtC,EACNuC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAtC,SAAAA,IACOmC,IAAStC,EAChBC,SAAAA,KACQqC,GAAQtC,IAChBE,SAAAA,EAAUuC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWxD,EAAqBC,GAChCwD,WAAY,CACRrC,EAAOC,GACPqC,IACAC,EAAM,CACFC,QAASC,MAEbC,EAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhB3C,GACD0C,GAAmBC,EAASvB,SAASwB,aAGrCD,EAASvB,SAASyB,MAAMC,YACpB,qBACA,IAKRH,EAASvB,SAASyB,MAAMC,YACpB,qBACA,GAAGC,KAAKC,IAAI,EAAGN,OAEvB,IAEJ5B,KAGFmC,EAAeC,KAEfC,UAAEA,EAASpE,OAAEA,GAAWqE,EAAoB1B,EAAS,CACvD2B,QAAS,CAAEC,QAAS,GACpB1B,KAAM,CAAE0B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAuBP,GAEpDQ,EAAQC,EAASlC,EAAS,CAC5BrC,UACAwE,OAAQhE,EACRiE,iBAAkBjE,IAEhBkE,GAAUC,EAAWtC,EAAS,CAAErC,aAEhC4E,kBAAEA,GAAiBhF,iBAAEA,IAAqBiF,EAAgB,CAC5DP,EACAI,KAMEI,GAAsB,CACxBrF,aAAc4B,EACd3B,oDACOA,GACA0C,GAAc,CACjB2C,OAAoC,QAA5BC,EAAAzE,QAAAA,EAAgBqD,SAAY,IAAAoB,EAAAA,EA7JxB,KA+JhBrF,eAAgBwC,EAAK8C,YACrBrF,qBAGJ,OACIsF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFrE,EAAWsE,QAAUD,EACrBpD,EAAKsD,aAAaF,EAAK,GAEvBX,KAAmB,CAAAc,SAEtBrF,OAEJyD,GACGqB,EAACQ,EAAc,CAACC,KAAMhF,EAAQ8E,SAC1BP,EAACU,EAAoB,CACjBxD,QAASA,EACTyD,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAC5F,EAAsB0G,SAAQ,CAC3BC,MAAOpB,YAEPK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASlB,EAAU,CAAEX,MAAOY,EAAUsB,SACjCpF,EAAewE,eAMrC"}
+{"version":3,"file":"element-with-dropdown.js","sources":["../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n    Middleware,\n    OpenChangeReason,\n    Placement,\n} from \"@floating-ui/react\";\nimport {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useEffect, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../../theme\";\nimport { useEvent, usePrevious } from \"../../util\";\nimport * as elementWithDropdownStyles from \"./element-with-dropdown.styles\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n    elementWidth: number;\n    styles: CSSProperties;\n    setFloatingRef: (node: HTMLElement | null) => void;\n    getFloatingProps: (\n        userProps?: React.HTMLProps<HTMLElement>\n    ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n    enabled: boolean;\n    isOpen: boolean;\n    onOpen?: (() => void) | undefined;\n    onClose?: ((reason: OpenChangeReason | undefined) => void) | undefined;\n    onDismiss?: (() => void) | undefined;\n    onHide?: (() => void) | undefined;\n    renderElement: () => React.ReactNode;\n    renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n    customZIndex?: number | undefined;\n    clickToToggle?: boolean | undefined;\n    /* the distance between the reference element and the dropdown */\n    offset?: number | undefined;\n    /* the alignment of the dropdown to the left or right of the reference element */\n    alignment?: DropdownAlignmentType | undefined;\n    fitAvailableHeight?: boolean | undefined;\n    /**\n     * The root element that contains the popover element. Defaults to the document body.\n     *\n     * If the parent that contains the trigger element has a higher z-index than the popover,\n     * the popover may not be visible. Specify the parent element here instead\n     */\n    rootNode?: RefObject<HTMLElement> | undefined;\n    /** If set, the `elementWidth` refers to this instead of the reference element */\n    positionRef?: RefObject<HTMLElement> | undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n    switch (alignment) {\n        case \"right\":\n            return \"bottom-end\";\n        case \"left\":\n        default:\n            return \"bottom-start\";\n    }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n    elementWidth: 0,\n    styles: {},\n    setFloatingRef: () => {\n        // noop\n    },\n    getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n    return useContext(DropdownRenderContext);\n};\n\n/**\n * A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n *\n * Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n *   `max-height: min(100px, var(--available-height, infinity * 1px))`\n *\n * Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n *   ref={setFloatingRef}\n *   style={styles}\n *   {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n *\n * If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n *   onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n    enabled,\n    isOpen,\n    onOpen,\n    onClose,\n    onDismiss,\n    onHide,\n    renderElement,\n    renderDropdown,\n    customZIndex,\n    clickToToggle = false,\n    offset: dropdownOffset = 0,\n    alignment = \"left\",\n    fitAvailableHeight,\n    rootNode,\n    positionRef,\n}: ElementWithDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const elementRef = useRef<HTMLDivElement | null>(null);\n    const { width: referenceWidth = 0 } = useResizeDetector({\n        targetRef: positionRef ?? elementRef,\n        handleHeight: false,\n    });\n    const center: Middleware = {\n        name: \"center\",\n        fn: ({ x, rects }) => {\n            const noGapInBetween =\n                x === 0 || x + rects.floating.width === window.innerWidth;\n            return {\n                x:\n                    noGapInBetween && isMobile\n                        ? (window.innerWidth - rects.floating.width) / 2\n                        : x,\n            };\n        },\n    };\n    const { refs, floatingStyles, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open, _event, reason) => {\n            if (reason === \"escape-key\") {\n                onDismiss?.();\n            } else if (open && !isOpen) {\n                onOpen?.();\n            } else if (!open && isOpen) {\n                onClose?.(reason);\n            }\n        },\n        whileElementsMounted: autoUpdate,\n        placement: getFloatingPlacement(alignment),\n        middleware: [\n            offset(dropdownOffset),\n            flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            size({\n                // shrink to fit available vertical space\n                apply({ availableHeight, elements }) {\n                    if (\n                        !fitAvailableHeight ||\n                        availableHeight >= elements.floating.scrollHeight\n                    ) {\n                        // reset this so that dropdown can expand as needed\n                        elements.floating.style.setProperty(\n                            elementWithDropdownStyles.tokens.availableHeight,\n                            \"\"\n                        );\n                        return;\n                    }\n\n                    elements.floating.style.setProperty(\n                        elementWithDropdownStyles.tokens.availableHeight,\n                        `${Math.max(0, availableHeight)}px`\n                    );\n                },\n            }),\n            center,\n        ],\n    });\n    const parentZIndex = useFloatingChild();\n\n    const { isMounted, styles } = useTransitionStyles(context, {\n        initial: { opacity: 0 },\n        open: { opacity: 1 },\n        duration: 300,\n    });\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    const click = useClick(context, {\n        enabled,\n        toggle: clickToToggle,\n        keyboardHandlers: clickToToggle,\n    });\n    const dismiss = useDismiss(context, { enabled });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n    ]);\n\n    // =========================================================================\n    // ON HIDE EFFECT\n    // =========================================================================\n    const prevIsMounted = usePrevious(isMounted);\n    const onHideEvent = useEvent(() => onHide?.());\n\n    useEffect(() => {\n        if (prevIsMounted && !isMounted) {\n            onHideEvent();\n        }\n    }, [prevIsMounted, isMounted, onHideEvent]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const dropdownRenderProps = {\n        elementWidth: referenceWidth,\n        styles: {\n            ...styles,\n            ...floatingStyles,\n            zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n        },\n        setFloatingRef: refs.setFloating,\n        getFloatingProps,\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    elementRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps()}\n            >\n                {renderElement()}\n            </div>\n            {isMounted && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                        returnFocus={false} // leads to focus trap. parent to handle the final focus state\n                    >\n                        <DropdownRenderContext.Provider\n                            value={dropdownRenderProps}\n                        >\n                            <div {...themeProps} style={themeStyle}>\n                                {renderDropdown(dropdownRenderProps)}\n                            </div>\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","useDropdownRender","useContext","ElementWithDropdown","enabled","isOpen","onOpen","onClose","onDismiss","onHide","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","isMobile","useMaxWidthMediaQuery","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","floating","window","innerWidth","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","elementWithDropdownStyles.tokens","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","prevIsMounted","usePrevious","onHideEvent","useEvent","useEffect","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"ivCAkEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,KAGlBC,EAAoB,IACtBC,EAAWP,GAiCTQ,EAAsB,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,SACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBrB,YAAY,OACZsB,qBACAC,WACAC,wBAKA,MAAMC,EAAWC,EAAsB,MACjCC,EAAaC,EAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAkB,CACpDC,UAAWR,QAAAA,EAAeG,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YAGC,CACHD,GAFM,IAANA,GAAWA,EAAIC,EAAMC,SAASV,QAAUW,OAAOC,aAGzBhB,GACXe,OAAOC,WAAaH,EAAMC,SAASV,OAAS,EAC7CQ,MAIhBK,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAY,CAClDC,KAAMnC,EACNoC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAnC,SAAAA,IACOgC,IAASnC,EAChBC,SAAAA,KACQkC,GAAQnC,IAChBE,SAAAA,EAAUoC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWrD,EAAqBC,GAChCqD,WAAY,CACRjC,EAAOC,GACPiC,IACAC,EAAM,CACFC,QAASC,MAEbC,EAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhBvC,GACDsC,GAAmBC,EAAStB,SAASuB,aAGrCD,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,IAKRC,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,GAAGM,KAAKC,IAAI,EAAGP,OAEvB,IAEJ1B,KAGFkC,EAAeC,KAEfC,UAAEA,EAASlE,OAAEA,GAAWmE,EAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,IAAeC,EAAuBP,GAEpDQ,GAAQC,EAASnC,EAAS,CAC5BlC,UACAsE,OAAQ7D,EACR8D,iBAAkB9D,IAEhB+D,GAAUC,EAAWvC,EAAS,CAAElC,aAEhC0E,kBAAEA,GAAiB9E,iBAAEA,IAAqB+E,EAAgB,CAC5DP,GACAI,KAMEI,GAAgBC,EAAYjB,GAC5BkB,GAAcC,GAAS,IAAM1E,aAAM,EAANA,MAEnC2E,GAAU,KACFJ,KAAkBhB,GAClBkB,IACJ,GACD,CAACF,GAAehB,EAAWkB,KAK9B,MAAMG,GAAsB,CACxBxF,aAAc2B,EACd1B,oDACOA,GACAuC,GAAc,CACjBiD,OAAoC,QAA5BC,EAAA3E,QAAAA,EAAgBkD,SAAY,IAAAyB,EAAAA,EAxKxB,KA0KhBxF,eAAgBqC,EAAKoD,YACrBxF,qBAGJ,OACIyF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFzE,EAAW0E,QAAUD,EACrB1D,EAAK4D,aAAaF,EAAK,GAEvBhB,KAAmB,CAAAmB,SAEtBvF,OAEJsD,GACG0B,EAACQ,EAAc,CAACC,KAAMlF,EAAQgF,SAC1BP,EAACU,EAAoB,CACjB9D,QAASA,EACT+D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAC/F,EAAsB6G,SAAQ,CAC3BC,MAAOpB,YAEPK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASvB,EAAU,CAAEZ,MAAOa,GAAU2B,SACjCtF,EAAe0E,eAMrC"}

package/shared/dropdown-wrapper/element-with-dropdown.styles.d.ts

@@ -1 +1,3 @@
-export declare const DropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const tokens: {
+    availableHeight: string;
+};

package/shared/dropdown-wrapper/element-with-dropdown.styles.js

@@ -0,0 +1,2 @@
+const a={availableHeight:"--fds-internal-dropdownWrapper-availableHeight"};export{a as tokens};
+//# sourceMappingURL=element-with-dropdown.styles.js.map

package/shared/dropdown-wrapper/element-with-dropdown.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-with-dropdown.styles.js","sources":["../../../src/shared/dropdown-wrapper/element-with-dropdown.styles.ts"],"sourcesContent":["export const tokens = {\n    availableHeight: \"--fds-internal-dropdownWrapper-availableHeight\",\n};\n"],"names":["tokens","availableHeight"],"mappings":"AAAO,MAAMA,EAAS,CAClBC,gBAAiB"}

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

@@ -1,3 +1,2 @@
-export * from "./dropdown-wrapper";
 export * from "./element-with-dropdown";
 export * from "./types";