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

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

@@ -0,0 +1,12 @@
+.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;}
+.l1lwwclz{background:var(--fds-colour-bg-hover);}
+.i1roxhhm{--fds-internal-nestedDropdownList-indentLevel:0;height:1px;width:calc((1lh + var(--fds-spacing-8)) * var(--fds-internal-nestedDropdownList-indentLevel));}
+.e11oztmx{width:1lh;height:1lh;color:var(--fds-colour-icon-primary);cursor:pointer;}.e11oztmx svg{width:1lh;height:1lh;-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
+.e18lkgul svg{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
+.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);}

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

@@ -9,6 +9,15 @@ export interface ListItemDisplayProps {
     title: string;
     secondaryLabel?: string | undefined;
 }
+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;
+}
 export interface DropdownDisplayProps<T, V> {
     /** Function to derive value from an item */
     valueExtractor?: ((item: T) => V) | undefined;
@@ -22,31 +31,25 @@ export interface DropdownDisplayProps<T, V> {
      * @param options - The currently displayed list items in the dropdown list.
      * @returns A JSX.Element representing the custom call-to-action component.
      */
-    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;
 }
 export interface DropdownSearchProps<T> {
     /** Specifying will render a search bar in the dropdown */
     enableSearch?: boolean | undefined;
     /** If specified, the default no results display will not be rendered */
     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 */
     searchFunction?: ((searchValue: string) => T[]) | undefined;
     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;
+export interface DropdownConfigProps {
     multiSelect?: boolean | undefined;
-    selectedItems?: T[] | undefined;
-    disableItemFocus?: boolean | undefined;
+    maxSelectable?: number | undefined;
+    customLabels?: DropdownCustomLabelProps | undefined;
     /**
      * Used when items are loaded from an api call.
      * Values: "loading" | "fail" | "success"
@@ -56,18 +59,77 @@ export interface DropdownListProps<T, V> extends React.HTMLAttributes<HTMLUListE
     itemTruncationType?: TruncateType | undefined;
     /** Specifies the maximum number of lines visible before the label is truncated for "end" type */
     itemMaxLines?: number | 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;
+}
+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 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;
+}
+export interface NestedDropdownListLeafItem<T> {
+    key: string;
+    label: string;
+    value: T;
+    subItems?: never | undefined;
+}
+export interface NestedDropdownListParentItem<T> {
+    key: string;
+    label: string;
+    value: T;
+    subItems: NestedDropdownListItemProps<T>[];
 }
-export interface IconProps {
-    $variant?: DropdownVariantType | undefined;
+export type NestedDropdownListItemProps<T> = NestedDropdownListLeafItem<T> | NestedDropdownListParentItem<T>;
+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;
+}
+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_v10jbi.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    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":"oFAKO,MAAMA,EAAc,UAUdC,EAAU,UAcVC,EAAgB"}

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

@@ -0,0 +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);}
+.vlxe5wy{font-family:var(--fds-font-family);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;}.vlxe5wy[data-variant="small"]{font-family:var(--fds-font-family);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.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 f}from"@floating-ui/react";import{createContext as u,useContext as j,useRef as y}from"react";import{useResizeDetector as b}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 v}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{useMaxWidthMediaQuery as w}from"../../theme/utils/use-media-query.js";import{tokens as k}from"./element-with-dropdown.styles.js";const F=e=>"right"===e?"bottom-end":"bottom-start",O=u({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})}),P=()=>j(O),H=({enabled:u,isOpen:j,onOpen:P,onClose:H,onDismiss:R,renderElement:W,renderDropdown:M,customZIndex:q,clickToToggle:z=!1,offset:C=0,alignment:D="left",fitAvailableHeight:E,rootNode:I,positionRef:S})=>{var T;const A=w("sm"),N=y(null),{width:Z=0}=b({targetRef:null!=S?S:N,handleHeight:!1}),$={name:"center",fn:({x:e,rects:t})=>({x:(0===e||e+t.floating.width===window.innerWidth)&&A?(window.innerWidth-t.floating.width)/2:e})},{refs:B,floatingStyles:G,context:J}=o({open:j,onOpenChange:(e,t,i)=>{"escape-key"===i?null==R||R():e&&!j?null==P||P():!e&&j&&(null==H||H(i))},whileElementsMounted:n,placement:F(D),middleware:[r(C),l(),s({limiter:a()}),m({apply({availableHeight:e,elements:t}){!E||e>=t.floating.scrollHeight?t.floating.style.setProperty(k.availableHeight,""):t.floating.style.setProperty(k.availableHeight,`${Math.max(0,e)}px`)}}),$]}),K=x(),{isMounted:L,styles:Q}=d(J,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:U,themeStyle:V}=v(L),X=p(J,{enabled:u,toggle:z,keyboardHandlers:z}),Y=c(J,{enabled:u}),{getReferenceProps:_,getFloatingProps:ee}=g([X,Y]),te={elementWidth:Z,styles:Object.assign(Object.assign(Object.assign({},Q),G),{zIndex:null!==(T=null!=q?q:K)&&void 0!==T?T:50}),setFloatingRef:B.setFloating,getFloatingProps:ee};return e(t,{children:[i("div",Object.assign({ref:e=>{N.current=e,B.setReference(e)}},_(),{children:W()})),L&&i(h,{root:I,children:i(f,{context:J,modal:!1,initialFocus:-1,returnFocus:!1,children:i(O.Provider,{value:te,children:i("div",Object.assign({},U,{style:V,children:M(te)}))})})})]})};export{O as DropdownRenderContext,H as ElementWithDropdown,P 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, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../../theme\";\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    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 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    // 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","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","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"snCAgEA,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,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,KAAMlC,EACNmC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAlC,SAAAA,IACO+B,IAASlC,EAChBC,SAAAA,KACQiC,GAAQlC,IAChBE,SAAAA,EAAUmC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWpD,EAAqBC,GAChCoD,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,EAASjE,OAAEA,GAAWkE,EAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAuBP,GAEpDQ,EAAQC,EAASnC,EAAS,CAC5BjC,UACAqE,OAAQ7D,EACR8D,iBAAkB9D,IAEhB+D,EAAUC,EAAWvC,EAAS,CAAEjC,aAEhCyE,kBAAEA,EAAiB7E,iBAAEA,IAAqB8E,EAAgB,CAC5DP,EACAI,IAMEI,GAAsB,CACxBlF,aAAc0B,EACdzB,oDACOA,GACAsC,GAAc,CACjB4C,OAAoC,QAA5BC,EAAAtE,QAAAA,EAAgBkD,SAAY,IAAAoB,EAAAA,EA3JxB,KA6JhBlF,eAAgBoC,EAAK+C,YACrBlF,qBAGJ,OACImF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFpE,EAAWqE,QAAUD,EACrBrD,EAAKuD,aAAaF,EAAK,GAEvBX,IAAmB,CAAAc,SAEtBlF,OAEJsD,GACGqB,EAACQ,EAAc,CAACC,KAAM7E,EAAQ2E,SAC1BP,EAACU,EAAoB,CACjBzD,QAASA,EACT0D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAACzF,EAAsBuG,SAAQ,CAC3BC,MAAOpB,YAEPK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASlB,EAAU,CAAEZ,MAAOa,EAAUsB,SACjCjF,EAAeqE,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";

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

@@ -1,4 +1,4 @@
-import type { DropdownVariantType } from "../dropdown-list/types";
+import type { DropdownVariantType, TruncateType } from "../dropdown-list/types";
 export interface DropdownSelectorProps {
     children: React.ReactNode;
     show: boolean;
@@ -10,4 +10,13 @@ export interface DropdownSelectorProps {
     className?: string | undefined;
     variant?: DropdownVariantType | undefined;
 }
+export interface ValueLabelProps {
+    variant?: DropdownVariantType | undefined;
+    truncateType?: TruncateType | undefined;
+    children: React.ReactNode;
+}
+export interface LabelContainerProps {
+    disabled?: boolean | undefined;
+    children: React.ReactNode;
+}
 export type DropdownAlignmentType = "left" | "right";

package/shared/fade-wrapper/fade-wrapper.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as n}from"@lifesg/react-icons/chevron-right";import l from"../../external/lodash/throttle.js";import{forwardRef as d,useState as c,useRef as s,useImperativeHandle as a,useEffect as f}from"react";import{useResizeDetector as h}from"../../external/react-resize-detector/build/index.esm.js";import{Wrapper as u,Content as m,Fade as p,FadeIndicatorButton as g}from"./fade-wrapper.style.js";const b=d(((d,b)=>{var{children:v,fadeColor:$,fadePosition:j="both",showIndicator:w=!1,onResize:x}=d,z=r(d,["children","fadeColor","fadePosition","showIndicator","onResize"]);const[R,C]=c("left"===j||"both"===j),[I,L]=c("right"===j||"both"===j),W=s(null),y=s(null),k=l(A,50);function A(){const r=W.current,t=y.current;r&&t&&t.scrollWidth>r.offsetWidth?(L(Math.round(t.scrollLeft)<t.scrollWidth-t.offsetWidth),C(t.scrollLeft>=1)):(L(!1),C(!1))}function E(){A(),x&&x({content:y.current,wrapper:W.current})}h({onResize:E,targetRef:W,refreshMode:"debounce",refreshRate:50}),a(b,(()=>({resize(){E()}}))),f((()=>{const r=y.current;return A(),r&&r.addEventListener("scroll",k),()=>{r&&r.removeEventListener("scroll",k)}}),[]);return t(u,Object.assign({ref:W},z,{children:[e(m,{ref:y,children:v}),(()=>{let r;return r=Array.isArray($)&&$.length>0?{left:$,right:$}:$||{left:void 0,right:void 0},t(o,{children:[R&&e(p,{$backgroundColor:r.left,$position:"left",$showIndicator:w,"data-id":"left-fade",children:w&&e(g,{$position:"left","data-id":"left-fade-indicator-button",children:e(i,{})})}),I&&e(p,{$backgroundColor:r.right,$position:"right",$showIndicator:w,"data-id":"right-fade",children:w&&e(g,{$position:"right","data-id":"right-fade-indicator-button",children:e(n,{})})})]})})()]}))}));export{b as FadeWrapper};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as s}from"@lifesg/react-icons/chevron-right";import l from"clsx";import n from"../../external/lodash/throttle.js";import{forwardRef as c,useState as a,useRef as d,useImperativeHandle as m,useCallback as f,useMemo as h,useEffect as p}from"react";import{useResizeDetector as u}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{ClickableIcon as b}from"../clickable-icon/clickable-icon.js";import{tokens as v,wrapper as g,content as k,fadeIndicatorButton as x,indicatorLeft as N,fade as y,fadeLeft as z,indicatorRight as R,fadeRight as w}from"./fade-wrapper.styles.js";import{getFadeColorSet as C,getFadeBackgroundColorValue as L}from"./helpers.js";const W=c(((c,W)=>{var{children:q,className:E,fadeColor:I,fadePosition:M="both",showIndicator:P=!1,onResize:_}=c,O=e(c,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[A,B]=a("left"===M||"both"===M),[D,F]=a("right"===M||"both"===M),G=d(null),H=d(null),J=d(null),K=d(null),Q=C(I);j(J,{[v.backgroundColor]:L(Q.left,P)}),j(K,{[v.backgroundColor]:L(Q.right,P)}),u({onResize:U,targetRef:G,refreshMode:"debounce",refreshRate:50}),m(W,(()=>({resize(){U()}})));const S=f((()=>{const e=G.current,r=H.current;e&&r&&r.scrollWidth>e.offsetWidth?(F(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),B(r.scrollLeft>=1)):(F(!1),B(!1))}),[]),T=h((()=>n(S,50)),[S]);function U(){S(),_&&_({content:H.current,wrapper:G.current})}p((()=>{const e=H.current;return S(),e&&e.addEventListener("scroll",T),()=>{e&&e.removeEventListener("scroll",T),T.cancel()}}),[S,T]);return r("div",Object.assign({ref:G,className:l(g,E)},O,{children:[t("div",{ref:H,className:k,children:q}),r(o,{children:[A&&t("div",{ref:J,className:l(y,z),"data-id":"left-fade",children:P&&t(b,{className:l(x,N),"data-id":"left-fade-indicator-button",children:t(i,{})})}),D&&t("div",{ref:K,className:l(y,w),"data-id":"right-fade",children:P&&t(b,{className:l(x,R),"data-id":"right-fade-indicator-button",children:t(s,{})})})]})]}))}));export{W as FadeWrapper};
 //# sourceMappingURL=fade-wrapper.js.map