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

package/select-histogram/types.d.ts

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

package/shared/accessibility/index.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../../_virtual/_tslib.js";import e from"clsx";import t from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{isReact19 as s}from"../../util/version.js";import"../../util/string-helper.js";import"./index_13g9vp.css";const i=t.forwardRef((function(s,i){var{className:a}=s,o=r(s,["className"]);return t.createElement("span",Object.assign(Object.assign({},o),{ref:i,className:e("v17efraz",a)}))})),a=r=>s()?r:r?"true":void 0,o=(...r)=>r.filter((r=>!!r)).join(" ");export{i as VisuallyHidden,o as concatIds,a as inertValue};
+import{__rest as r}from"../../_virtual/_tslib.js";import e from"clsx";import i from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{isReact19 as t}from"../../util/version.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"./index_13g9vp.css";const s=i.forwardRef((function(t,s){var{className:a}=t,o=r(t,["className"]);return i.createElement("span",Object.assign(Object.assign({},o),{ref:s,className:e("v17efraz",a)}))})),a=r=>t()?r:r?"true":void 0,o=(...r)=>r.filter((r=>!!r)).join(" ");export{s as VisuallyHidden,o as concatIds,a as inertValue};
 //# sourceMappingURL=index.js.map

package/shared/accessibility/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/shared/accessibility/index.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isReact19 } from \"../../util\";\n\nconst visuallyHidden = css`\n    clip-path: inset(50%);\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n`;\n\nexport const VisuallyHidden = React.forwardRef<\n    HTMLSpanElement,\n    React.HTMLAttributes<HTMLSpanElement>\n>(function VisuallyHidden({ className, ...otherProps }, ref) {\n    return React.createElement(\"span\", {\n        ...otherProps,\n        ref,\n        className: clsx(visuallyHidden, className),\n    });\n});\n\n/**\n * Handle compatibility of `inert` across React versions.\n * 19+ provides official support as a boolean, while it is handled as string in older versions\n */\nexport const inertValue = (value: boolean | undefined) => {\n    if (isReact19()) {\n        return value;\n    }\n\n    return value ? \"true\" : undefined;\n};\n\nexport const concatIds = (...selectors: (string | undefined)[]) => {\n    return selectors.filter((selector) => !!selector).join(\" \");\n};\n"],"names":["VisuallyHidden","React","forwardRef","_a","ref","className","otherProps","__rest","createElement","Object","assign","clsx","inertValue","value","isReact19","undefined","concatIds","selectors","filter","selector","join"],"mappings":"2SAMA,MASaA,EAAiBC,EAAMC,YAGlC,SAAwBC,EAA8BC,GAA9B,IAAAC,UAAEA,GAASF,EAAKG,EAAUC,EAAAJ,EAA1B,eACtB,OAAOF,EAAMO,cAAc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GAC1BJ,GAAU,CACbF,MACAC,UAAWM,EAhBC,WAgBoBN,KAExC,IAMaO,EAAcC,GACnBC,IACOD,EAGJA,EAAQ,YAASE,EAGfC,EAAYA,IAAIC,IAClBA,EAAUC,QAAQC,KAAeA,IAAUC,KAAK"}
+{"version":3,"file":"index.js","sources":["../../../src/shared/accessibility/index.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isReact19 } from \"../../util\";\n\nconst visuallyHidden = css`\n    clip-path: inset(50%);\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n`;\n\nexport const VisuallyHidden = React.forwardRef<\n    HTMLSpanElement,\n    React.HTMLAttributes<HTMLSpanElement>\n>(function VisuallyHidden({ className, ...otherProps }, ref) {\n    return React.createElement(\"span\", {\n        ...otherProps,\n        ref,\n        className: clsx(visuallyHidden, className),\n    });\n});\n\n/**\n * Handle compatibility of `inert` across React versions.\n * 19+ provides official support as a boolean, while it is handled as string in older versions\n */\nexport const inertValue = (value: boolean | undefined) => {\n    if (isReact19()) {\n        return value;\n    }\n\n    return value ? \"true\" : undefined;\n};\n\nexport const concatIds = (...selectors: (string | undefined)[]) => {\n    return selectors.filter((selector) => !!selector).join(\" \");\n};\n"],"names":["VisuallyHidden","React","forwardRef","_a","ref","className","otherProps","__rest","createElement","Object","assign","clsx","inertValue","value","isReact19","undefined","concatIds","selectors","filter","selector","join"],"mappings":"6YAMA,MASaA,EAAiBC,EAAMC,YAGlC,SAAwBC,EAA8BC,GAA9B,IAAAC,UAAEA,GAASF,EAAKG,EAAUC,EAAAJ,EAA1B,eACtB,OAAOF,EAAMO,cAAc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GAC1BJ,GAAU,CACbF,MACAC,UAAWM,EAhBC,WAgBoBN,KAExC,IAMaO,EAAcC,GACnBC,IACOD,EAGJA,EAAQ,YAASE,EAGfC,EAAYA,IAAIC,IAClBA,EAAUC,QAAQC,KAAeA,IAAUC,KAAK"}

package/shared/accessibility/index_13g9vp.css

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

package/shared/clickable-icon/clickable-icon.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as i}from"react/jsx-runtime";import r from"react";import{Main as e}from"./clickable-icon.style.js";const o=r.forwardRef(((r,o)=>{var{children:c,focusHighlight:l=!0,focusOutline:n="none",type:s="button"}=r,f=t(r,["children","focusHighlight","focusOutline","type"]);return i(e,Object.assign({ref:o,$outline:n,$highlight:l,type:s},f,{children:c}))}));export{o as ClickableIcon};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import e from"clsx";import o from"react";import{main as i,outlineNone as s,highlight as c}from"./clickable-icon.styles.js";const l=o.forwardRef(((o,l)=>{var{children:n,className:m,focusHighlight:a=!0,focusOutline:f="none",type:u="button"}=o,p=t(o,["children","className","focusHighlight","focusOutline","type"]);return r("button",Object.assign({ref:l,className:e(i,"none"===f&&s,a&&c,m),type:u},p,{children:n}))}));export{l as ClickableIcon};
 //# sourceMappingURL=clickable-icon.js.map

package/shared/clickable-icon/clickable-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"clickable-icon.js","sources":["../../../src/shared/clickable-icon/clickable-icon.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Main } from \"./clickable-icon.style\";\nimport type { ClickableIconProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        focusHighlight = true,\n        focusOutline = \"none\",\n        type = \"button\",\n        ...otherProps\n    }: ClickableIconProps,\n    ref: React.Ref<HTMLButtonElement>\n) => {\n    return (\n        <Main\n            ref={ref}\n            $outline={focusOutline}\n            $highlight={focusHighlight}\n            type={type}\n            {...otherProps}\n        >\n            {children}\n        </Main>\n    );\n};\n\nexport const ClickableIcon = React.forwardRef(Component);\n"],"names":["ClickableIcon","React","forwardRef","_a","ref","children","focusHighlight","focusOutline","type","otherProps","__rest","_jsx","Main","Object","assign","$highlight"],"mappings":"gKAKA,MAuBaA,EAAgBC,EAAMC,YAvBjB,CACdC,EAOAC,KAPA,IAAAC,SACIA,EAAQC,eACRA,GAAiB,EAAIC,aACrBA,EAAe,OAAMC,KACrBA,EAAO,UAAQL,EACZM,EAAUC,EAAAP,EALjB,qDASA,OACIQ,EAACC,EAAIC,OAAAC,OAAA,CACDV,IAAKA,WACKG,EAAYQ,WACVT,EACZE,KAAMA,GACFC,EAAU,CAAAJ,SAEbA,IACE"}
+{"version":3,"file":"clickable-icon.js","sources":["../../../src/shared/clickable-icon/clickable-icon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./clickable-icon.styles\";\nimport type { ClickableIconProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        focusHighlight = true,\n        focusOutline = \"none\",\n        type = \"button\",\n        ...otherProps\n    }: ClickableIconProps,\n    ref: React.Ref<HTMLButtonElement>\n) => {\n    return (\n        <button\n            ref={ref}\n            className={clsx(\n                styles.main,\n                focusOutline === \"none\" && styles.outlineNone,\n                focusHighlight && styles.highlight,\n                className\n            )}\n            type={type}\n            {...otherProps}\n        >\n            {children}\n        </button>\n    );\n};\n\nexport const ClickableIcon = React.forwardRef(Component);\n"],"names":["ClickableIcon","React","forwardRef","_a","ref","children","className","focusHighlight","focusOutline","type","otherProps","__rest","_jsx","Object","assign","clsx","styles.main","styles.outlineNone","styles.highlight"],"mappings":"qNAMA,MA4BaA,EAAgBC,EAAMC,YA5BjB,CACdC,EAQAC,SARAC,SACIA,EAAQC,UACRA,EAASC,eACTA,GAAiB,EAAIC,aACrBA,EAAe,OAAMC,KACrBA,EAAO,UAAQN,EACZO,EAAUC,EAAAR,EANjB,iEAUA,OACIS,EAAA,SAAAC,OAAAC,OAAA,CACIV,IAAKA,EACLE,UAAWS,EACPC,EACiB,SAAjBR,GAA2BS,EAC3BV,GAAkBW,EAClBZ,GAEJG,KAAMA,GACFC,YAEHL,IACI"}

package/shared/clickable-icon/clickable-icon.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const main: import("@linaria/core").LinariaClassName;
+export declare const outlineNone: import("@linaria/core").LinariaClassName;
+export declare const highlight: import("@linaria/core").LinariaClassName;

package/shared/clickable-icon/clickable-icon.styles.js

@@ -0,0 +1,2 @@
+import"./clickable-icon.styles_1v2imml.css";const c="m18ljjag",l="o1plr5dj",i="hv69up9";export{i as highlight,c as main,l as outlineNone};
+//# sourceMappingURL=clickable-icon.styles.js.map

package/shared/clickable-icon/clickable-icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickable-icon.styles.js","sources":["../../../src/shared/clickable-icon/clickable-icon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../../theme\";\n\nexport const main = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: ${Spacing[\"spacing-24\"]};\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n\n    img {\n        height: 1rem;\n        width: 1rem;\n    }\n\n    svg {\n        height: 1.125rem;\n        width: 1.125rem;\n    }\n`;\n\nexport const outlineNone = css`\n    &:active,\n    &:focus {\n        outline: none;\n    }\n`;\n\nexport const highlight = css`\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover-neutral\"]};\n    }\n`;\n"],"names":["main","outlineNone","highlight"],"mappings":"iFAIO,MAAMA,EAAI,WAoBJC,EAAW,WAOXC,EAAS"}

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

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

package/shared/component-loading-spinner/component-loading-spinner.d.ts

@@ -1,23 +1,28 @@
+import type { HTMLAttributes } from "react";
+type BaseProps = Omit<HTMLAttributes<HTMLDivElement>, "color">;
+export interface ComponentLoadingSpinnerProps extends BaseProps {
+    /** Measurement in px */
+    size?: number | undefined;
+    /** rgb/hex value or Color token */
+    color?: string | undefined;
+}
 /**
  * This component is mainly used within components and is not to be confused
  * with the main loading spinner in animations/loading-spinner
  *
  * By default it inherits the font size and color of the parent container.
  *
- * The color can be customised via the prop or through styled-components.
+ * The font size and color can be customised via the prop or through css.
  *
  * Example:
  * ```
- * styled(ComponentLoadingSpinner)`
+ * const spinner = css`
  *   color: red;
+ *   font-size: 1lh;
  * `
+ *
+ * <ComponentLoadingSpinner className={styles.spinner} />
  * ```
  */
-export interface ComponentLoadingSpinnerProps {
-    className?: string | undefined;
-    /** Measurement in px */
-    size?: number | undefined;
-    /** rgb/hex value or Color token */
-    color?: string | ((props: any) => string) | undefined;
-}
-export declare const ComponentLoadingSpinner: ({ color, className, size, }: ComponentLoadingSpinnerProps) => JSX.Element;
+export declare const ComponentLoadingSpinner: ({ color, className, size, ...otherProps }: ComponentLoadingSpinnerProps) => JSX.Element;
+export {};

package/shared/component-loading-spinner/component-loading-spinner.js

@@ -1,2 +1,2 @@
-import{jsxs as n,jsx as i}from"react/jsx-runtime";import{OuterRing as e,InnerRing1 as o,InnerRing2 as r,InnerRing3 as s,InnerRing4 as t}from"./component-loading-spinner.style.js";const a=({color:a,className:c,size:d})=>n(e,{className:c,$size:d,$color:a,"data-testid":"component-loading-spinner",children:[i(o,{id:"inner1"}),i(r,{id:"inner2"}),i(s,{id:"inner3"}),i(t,{id:"inner4"})]});export{a as ComponentLoadingSpinner};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as i,jsx as s}from"react/jsx-runtime";import r from"clsx";import{useRef as o}from"react";import{useApplyStyle as t}from"../../theme/utils/use-apply-styles.js";import"../../theme/theme-provider/context.js";import"../../theme/utils/use-media-query.js";import{outerRing as m,innerRing as n,innerRing2 as a,innerRing3 as l,innerRing4 as c,tokens as d}from"./component-loading-spinner.styles.js";const p=p=>{var{color:u,className:v,size:f}=p,j=e(p,["color","className","size"]);const N=o(null);return t(N,{[d.rootSize]:f?`${f}px`:void 0,[d.rootColour]:u}),i("div",Object.assign({ref:N,className:r(m,v)},j,{"data-testid":"component-loading-spinner",children:[s("div",{id:"inner1",className:n}),s("div",{id:"inner2",className:r(n,a)}),s("div",{id:"inner3",className:r(n,l)}),s("div",{id:"inner4",className:r(n,c)})]}))};export{p as ComponentLoadingSpinner};
 //# sourceMappingURL=component-loading-spinner.js.map

package/shared/component-loading-spinner/component-loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-loading-spinner.js","sources":["../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import {\n    InnerRing1,\n    InnerRing2,\n    InnerRing3,\n    InnerRing4,\n    OuterRing,\n} from \"./component-loading-spinner.style\";\n\n/**\n * This component is mainly used within components and is not to be confused\n * with the main loading spinner in animations/loading-spinner\n *\n * By default it inherits the font size and color of the parent container.\n *\n * The color can be customised via the prop or through styled-components.\n *\n * Example:\n * ```\n * styled(ComponentLoadingSpinner)`\n *   color: red;\n * `\n * ```\n */\nexport interface ComponentLoadingSpinnerProps {\n    className?: string | undefined;\n    /** Measurement in px */\n    size?: number | undefined;\n    /** rgb/hex value or Color token */\n    color?: string | ((props: any) => string) | undefined;\n}\n\nexport const ComponentLoadingSpinner = ({\n    color,\n    className,\n    size,\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n    return (\n        <OuterRing\n            className={className}\n            $size={size}\n            $color={color}\n            data-testid={\"component-loading-spinner\"}\n        >\n            <InnerRing1 id=\"inner1\" />\n            <InnerRing2 id=\"inner2\" />\n            <InnerRing3 id=\"inner3\" />\n            <InnerRing4 id=\"inner4\" />\n        </OuterRing>\n    );\n};\n"],"names":["ComponentLoadingSpinner","color","className","size","_jsxs","OuterRing","$color","_jsx","InnerRing1","id","InnerRing2","InnerRing3","InnerRing4"],"mappings":"mLA+BO,MAAMA,EAA0B,EACnCC,QACAC,YACAC,UAGIC,EAACC,EAAS,CACNH,UAAWA,QACJC,EAAIG,OACHL,EAAK,cACA,sCAEbM,EAACC,GAAWC,GAAG,WACfF,EAACG,EAAU,CAACD,GAAG,WACfF,EAACI,EAAU,CAACF,GAAG,WACfF,EAACK,EAAU,CAACH,GAAG"}
+{"version":3,"file":"component-loading-spinner.js","sources":["../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme/utils\";\nimport * as styles from \"./component-loading-spinner.styles\";\n\ntype BaseProps = Omit<HTMLAttributes<HTMLDivElement>, \"color\">;\n\nexport interface ComponentLoadingSpinnerProps extends BaseProps {\n    /** Measurement in px */\n    size?: number | undefined;\n    /** rgb/hex value or Color token */\n    color?: string | undefined;\n}\n\n/**\n * This component is mainly used within components and is not to be confused\n * with the main loading spinner in animations/loading-spinner\n *\n * By default it inherits the font size and color of the parent container.\n *\n * The font size and color can be customised via the prop or through css.\n *\n * Example:\n * ```\n * const spinner = css`\n *   color: red;\n *   font-size: 1lh;\n * `\n *\n * <ComponentLoadingSpinner className={styles.spinner} />\n * ```\n */\nexport const ComponentLoadingSpinner = ({\n    color,\n    className,\n    size,\n    ...otherProps\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n    const spinnerRef = useRef<HTMLDivElement>(null);\n    useApplyStyle(spinnerRef, {\n        [styles.tokens.rootSize]: size ? `${size}px` : undefined,\n        [styles.tokens.rootColour]: color,\n    });\n\n    return (\n        <div\n            ref={spinnerRef}\n            className={clsx(styles.outerRing, className)}\n            {...otherProps}\n            data-testid={\"component-loading-spinner\"}\n        >\n            <div id=\"inner1\" className={styles.innerRing} />\n            <div\n                id=\"inner2\"\n                className={clsx(styles.innerRing, styles.innerRing2)}\n            />\n            <div\n                id=\"inner3\"\n                className={clsx(styles.innerRing, styles.innerRing3)}\n            />\n            <div\n                id=\"inner4\"\n                className={clsx(styles.innerRing, styles.innerRing4)}\n            />\n        </div>\n    );\n};\n"],"names":["ComponentLoadingSpinner","_a","color","className","size","otherProps","__rest","spinnerRef","useRef","useApplyStyle","styles.tokens","rootSize","undefined","rootColour","_jsxs","Object","assign","ref","clsx","styles.outerRing","children","_jsx","id","styles.innerRing","styles.innerRing2","styles.innerRing3","styles.innerRing4"],"mappings":"qcAkCO,MAAMA,EAA2BC,QAAAC,MACpCA,EAAKC,UACLA,EAASC,KACTA,KACGC,EAAUC,EAAAL,EAJuB,CAAA,QAAA,YAAA,SAMpC,MAAMM,EAAaC,EAAuB,MAM1C,OALAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,UAAWP,EAAO,GAAGA,WAAWQ,EAC/C,CAACF,EAAcG,YAAaX,IAI5BY,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKV,EACLJ,UAAWe,EAAKC,EAAkBhB,IAC9BE,iBACS,4BAA2Be,SAAA,CAExCC,SAAKC,GAAG,SAASnB,UAAWoB,IAC5BF,SACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBC,KAEtCH,EAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBE,KAEtCJ,EAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBG,QAEpC"}

package/shared/component-loading-spinner/component-loading-spinner.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const tokens: {
+    readonly rootSize: "--fds-internal-componentLoadingSpinner-root-size";
+    readonly rootColour: "--fds-internal-componentLoadingSpinner-root-colour";
+};
+export declare const outerRing: import("@linaria/core").LinariaClassName;
+export declare const innerRing: import("@linaria/core").LinariaClassName;
+export declare const innerRing2: import("@linaria/core").LinariaClassName;
+export declare const innerRing3: import("@linaria/core").LinariaClassName;
+export declare const innerRing4: import("@linaria/core").LinariaClassName;

package/shared/component-loading-spinner/component-loading-spinner.styles.js

@@ -0,0 +1,2 @@
+import"./component-loading-spinner.styles_15eq02i.css";const o={rootSize:"--fds-internal-componentLoadingSpinner-root-size",rootColour:"--fds-internal-componentLoadingSpinner-root-colour"},n="oqwr3hs",i="i5p5ltp",r="i1trawld",e="iav978u",t="i1fnvvih";export{i as innerRing,r as innerRing2,e as innerRing3,t as innerRing4,n as outerRing,o as tokens};
+//# sourceMappingURL=component-loading-spinner.styles.js.map

package/shared/component-loading-spinner/component-loading-spinner.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-loading-spinner.styles.js","sources":["../../../src/shared/component-loading-spinner/component-loading-spinner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    rootSize: \"--fds-internal-componentLoadingSpinner-root-size\",\n    rootColour: \"--fds-internal-componentLoadingSpinner-root-colour\",\n} as const;\n\nexport const outerRing = css`\n    display: inline-block;\n    position: relative;\n    width: var(${tokens.rootSize}, 1em);\n    height: var(${tokens.rootSize}, 1em);\n    color: var(${tokens.rootColour}, currentColor);\n`;\n\nexport const innerRing = css`\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    top: 1px;\n    width: calc(100% - 2px);\n    height: calc(100% - 2px);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 100%;\n    border-color: currentColor transparent transparent transparent;\n    animation: component-loading-spinner-rotate 1.2s\n        cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    @keyframes component-loading-spinner-rotate {\n        0% {\n            transform: rotate(0deg);\n        }\n\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n`;\n\nexport const innerRing2 = css`\n    animation-delay: -0.45s;\n`;\n\nexport const innerRing3 = css`\n    animation-delay: -0.3s;\n`;\n\nexport const innerRing4 = css`\n    animation-delay: -0.15s;\n`;\n"],"names":["tokens","rootSize","rootColour","outerRing","innerRing","innerRing2","innerRing3","innerRing4"],"mappings":"uGAEO,MAAMA,EAAS,CAClBC,SAAU,mDACVC,WAAY,sDAGHC,EAAS,UAQTC,EAAS,UAyBTC,EAAU,WAIVC,EAAU,UAIVC,EAAU"}

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

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

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

@@ -0,0 +1,15 @@
+import type { DropdownVariantType, LabelDisplayType } from "./types";
+interface DropdownLabelProps {
+    bold?: boolean | undefined;
+    displayType?: LabelDisplayType | undefined;
+    label: string;
+    maxLines?: number | undefined;
+    searchTerm?: string | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    sublabel?: string | undefined;
+    truncationType?: "middle" | "end" | undefined;
+    variant?: DropdownVariantType | undefined;
+}
+export declare const DropdownLabel: ({ bold, displayType, label, searchTerm, maxLines, selected, disabled, sublabel, truncationType, variant, }: DropdownLabelProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import t from"clsx";import{useRef as l,useCallback as s,useMemo as n}from"react";import{useResizeDetector as m}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{Font as d}from"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as o}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{StringHelper as a}from"../../util/string-helper.js";import{tokens as c,primaryText as p,primaryTextBold as h,primaryTextDisabled as u,primaryTextSelected as f,primaryTextLabelInline as x,primaryTextTruncateEnd as b,secondaryText as y,secondaryTextLabelInline as j,secondaryTextTruncateEnd as v,secondaryTextNextLine as N,secondaryTextInline as T,label as g,labelVariantSmall as L,labelNextLine as S,baseTruncateStyle as k,truncateFirstLine as w,truncateLineSingle as z,truncateSecondLine as q,matchedText as C}from"./dropdown-label.styles.js";const $=({bold:$,displayType:O="inline",label:W,searchTerm:A,maxLines:B=2,selected:D,disabled:E,sublabel:F,truncationType:G="middle",variant:H="default"})=>{const I="small"===H?d.Spec["body-size-md"]:d.Spec["body-size-baseline"],J=d.Spec["font-family-body"],{ref:K,width:M}=m(),P=l(null),Q=l(null);o(P,{[c.primaryText.maxLines]:String(B)}),o(Q,{[c.secondaryText.maxLines]:String(B)});const R=s((e=>{if("inline"!==O||!M)return!1;return a.getTextWidth(e,`${I} '${J}'`)>M-50}),[M,O,I,J]),U=n((()=>R(W)),[R,W]),V=n((()=>F&&R(F)),[R,F]),X="middle"===G&&(U||V)?"next-line":O,Y=t=>{if(!A)return t;const l=A.toLowerCase().trim(),s=t.toLowerCase().indexOf(l),n=s+A.length;return-1===s?t:e(r,{children:[W.slice(0,s),i("span",{className:C,children:W.slice(s,n)}),W.slice(n)]})},Z=l=>e(r,{children:[i("div",{className:t(k,w,1===B&&z),"aria-hidden":!0,children:Y(l)}),i("div",{className:t(k,q,1===B&&z),"aria-hidden":!0,children:Y(l)})]});return e("div",{ref:K,className:t(g,"small"===H&&L,"next-line"===X&&S),children:[i("div",{ref:P,"aria-label":W,className:t(p,$&&h,E&&u,!E&&D&&f,"inline"===X&&x,"end"===G&&b),children:"middle"===G&&U?Z(W):Y(W)}),F&&i("div",{ref:Q,"aria-label":F,className:t(y,"inline"===X&&j,"end"===G&&v,"next-line"===O?N:T),children:"middle"===G&&V?Z(F):F})]})};export{$ as DropdownLabel};
+//# sourceMappingURL=dropdown-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family-body\"];\n    const { ref, width } = useResizeDetector();\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"soCAuBO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SAAQC,MACtBA,EACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAKC,KAAK,gBACVD,EAAKC,KAAK,sBACdC,EAAaF,EAAKC,KAAK,qBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAiBC,EAAuB,MACxCC,EAAmBD,EAAuB,MAEhDE,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAcD,EAAkB,CAC5B,CAACE,EAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,GACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,EAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,GACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,GACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,EAAAC,EAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAA,OAAA,CAAMC,UAAWC,EAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAC,EACa,IAAbhD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAG,EACa,IAAblD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EACPK,EACY,UAAZ9C,GAAuB+C,EACH,cAApBvB,GAAmCwB,GACtCb,SAAA,CAEDE,SACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EACPQ,EACA1D,GAAQ2D,EACRrD,GAAYsD,GACXtD,GAAYD,GAAYwD,EACL,WAApB5B,GACI6B,EACe,QAAnBtD,GAA4BuD,GAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EACPc,EACoB,WAApB/B,GACIgC,EACe,QAAnBzD,GACI0D,EACY,cAAhBjE,EACMkE,EACAC,YAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}

package/shared/dropdown-list/dropdown-label.styles.d.ts

@@ -0,0 +1,27 @@
+export declare const tokens: {
+    primaryText: {
+        maxLines: string;
+    };
+    secondaryText: {
+        maxLines: string;
+    };
+};
+export declare const primaryText: import("@linaria/core").LinariaClassName;
+export declare const primaryTextBold: import("@linaria/core").LinariaClassName;
+export declare const primaryTextSelected: import("@linaria/core").LinariaClassName;
+export declare const primaryTextDisabled: import("@linaria/core").LinariaClassName;
+export declare const primaryTextLabelInline: import("@linaria/core").LinariaClassName;
+export declare const primaryTextTruncateEnd: import("@linaria/core").LinariaClassName;
+export declare const secondaryText: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextNextLine: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextInline: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextLabelInline: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextTruncateEnd: import("@linaria/core").LinariaClassName;
+export declare const matchedText: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const labelVariantSmall: import("@linaria/core").LinariaClassName;
+export declare const labelNextLine: import("@linaria/core").LinariaClassName;
+export declare const baseTruncateStyle: import("@linaria/core").LinariaClassName;
+export declare const truncateFirstLine: import("@linaria/core").LinariaClassName;
+export declare const truncateSecondLine: import("@linaria/core").LinariaClassName;
+export declare const truncateLineSingle: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./dropdown-label.styles_mloii0.css";const i={primaryText:{maxLines:"--fds-internal-dropdownLabel-primaryText-maxLines"},secondaryText:{maxLines:"--fds-internal-dropdownLabel-secondaryText-maxLines"}},s="pi58ntt",t="p1wtg030",e="p4cirxp",n="pp0vhoy",o="p1nofioz",p="przdrhy",r="s3fwc7p",a="s132gi2y",d="swx1e24",l="s1kq4iiq",x="s1jjyg61",m="m7dzxku",y="lkpcujm",c="l4129ag",w="l5tt4mi",f="b1tiox0q",L="t1y8fzo0",g="t18n9ljk",T="tgn5sfi";export{f as baseTruncateStyle,y as label,w as labelNextLine,c as labelVariantSmall,m as matchedText,s as primaryText,t as primaryTextBold,n as primaryTextDisabled,o as primaryTextLabelInline,e as primaryTextSelected,p as primaryTextTruncateEnd,r as secondaryText,d as secondaryTextInline,l as secondaryTextLabelInline,a as secondaryTextNextLine,x as secondaryTextTruncateEnd,i as tokens,L as truncateFirstLine,T as truncateLineSingle,g as truncateSecondLine};
+//# sourceMappingURL=dropdown-label.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-label.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampDynamicCss } from \"../styles\";\n\nexport const tokens = {\n    primaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-primaryText-maxLines\",\n    },\n    secondaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-secondaryText-maxLines\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// PRIMARY TEXT\n// -----------------------------------------------------------------------------\nexport const primaryText = css`\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    color: ${Colour[\"text\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const primaryTextBold = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const primaryTextSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const primaryTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const primaryTextLabelInline = css`\n    display: inline;\n`;\n\nexport const primaryTextTruncateEnd = css`\n    ${tokens.primaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.primaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// SECONDARY TEXT\n// -----------------------------------------------------------------------------\nexport const secondaryText = css`\n    color: ${Colour[\"text-subtlest\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const secondaryTextNextLine = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const secondaryTextInline = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const secondaryTextLabelInline = css`\n    display: inline;\n    margin-left: 0.5rem;\n`;\n\nexport const secondaryTextTruncateEnd = css`\n    ${tokens.secondaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.secondaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// MATCHED TEXT\n// -----------------------------------------------------------------------------\nexport const matchedText = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LABEL\n// -----------------------------------------------------------------------------\nexport const label = css`\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    overflow-wrap: break-word;\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const labelVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const labelNextLine = css`\n    display: flex;\n    flex-direction: column;\n`;\n\n// -----------------------------------------------------------------------------\n// TRUNCATION\n// -----------------------------------------------------------------------------\nexport const baseTruncateStyle = css`\n    display: inline-block;\n    width: 100%;\n    height: 1lh;\n    overflow: hidden;\n`;\n\nexport const truncateFirstLine = css`\n    word-break: break-all;\n`;\n\nexport const truncateSecondLine = css`\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    direction: rtl;\n    text-align: right;\n`;\n\nexport const truncateLineSingle = css`\n    width: 50%;\n`;\n"],"names":["tokens","primaryText","maxLines","secondaryText","primaryTextBold","primaryTextSelected","primaryTextDisabled","primaryTextLabelInline","primaryTextTruncateEnd","secondaryTextNextLine","secondaryTextInline","secondaryTextLabelInline","secondaryTextTruncateEnd","matchedText","label","labelVariantSmall","labelNextLine","baseTruncateStyle","truncateFirstLine","truncateSecondLine","truncateLineSingle"],"mappings":"+EAKO,MAAMA,EAAS,CAClBC,YAAa,CACTC,SAAU,qDAEdC,cAAe,CACXD,SAAU,wDAWLD,EAAW,UAOXG,EAAe,WAIfC,EAAmB,UAInBC,EAAmB,UAInBC,EAAsB,WAItBC,EAAsB,UAQtBL,EAAa,UAMbM,EAAqB,WAIrBC,EAAmB,UAInBC,EAAwB,WAKxBC,EAAwB,WAQxBC,EAAW,UAOXC,EAAK,UAQLC,EAAiB,UAIjBC,EAAa,UAQbC,EAAiB,WAOjBC,EAAiB,WAIjBC,EAAkB,WAOlBC,EAAkB"}

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

@@ -0,0 +1,19 @@
+@layer fds{.pi58ntt{font-weight:var(--fds-font-weight-regular);color:var(--fds-colour-text);width:100%;overflow-wrap:break-word;}
+.p1wtg030{font-weight:var(--fds-font-weight-semibold);}
+.p4cirxp{color:var(--fds-colour-text-selected);}
+.pp0vhoy{color:var(--fds-colour-text-disabled);}
+.p1nofioz{display:inline;}
+.przdrhy{--fds-internal-dropdownLabel-primaryText-maxLines:2;--fds-internal-dropdownLabel-primaryText-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-dropdownLabel-primaryText-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.s3fwc7p{color:var(--fds-colour-text-subtlest);width:100%;overflow-wrap:break-word;}
+.s132gi2y{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-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.swx1e24{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);}
+.s1kq4iiq{display:inline;margin-left:0.5rem;}
+.s1jjyg61{--fds-internal-dropdownLabel-secondaryText-maxLines:2;--fds-internal-dropdownLabel-secondaryText-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-dropdownLabel-secondaryText-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.m7dzxku{font-weight:var(--fds-font-weight-semibold);}
+.lkpcujm{text-align:left;width:100%;overflow:hidden;overflow-wrap:break-word;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);}
+.l4129ag{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);}
+.l5tt4mi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.b1tiox0q{display:inline-block;width:100%;height:1lh;overflow:hidden;}
+.t1y8fzo0{word-break:break-all;}
+.t18n9ljk{text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:right;}
+.tgn5sfi{width:50%;}}

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-list-state.js","sources":["../../../src/shared/dropdown-list/dropdown-list-state.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\ninterface DropdownListStateProps {\n    children: React.ReactNode;\n}\n\ninterface DropdownListStateContextProps {\n    focusedIndex: number;\n    setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;\n}\n\nexport const DropdownListStateContext =\n    React.createContext<DropdownListStateContextProps>({\n        focusedIndex: -1,\n        setFocusedIndex: () => {\n            // do nothing\n        },\n    });\n\nexport const DropdownListState = ({ children }: DropdownListStateProps) => {\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n    return (\n        <DropdownListStateContext.Provider\n            value={{\n                focusedIndex,\n                setFocusedIndex,\n            }}\n        >\n            {children}\n        </DropdownListStateContext.Provider>\n    );\n};\n"],"names":["DropdownListStateContext","React","createContext","focusedIndex","setFocusedIndex","DropdownListState","children","useState","_jsx","Provider","value"],"mappings":"4EAWO,MAAMA,EACTC,EAAMC,cAA6C,CAC/CC,cAAc,EACdC,gBAAiB,SAKZC,EAAoB,EAAGC,eAChC,MAAOH,EAAcC,GAAmBG,GAAiB,GAEzD,OACIC,EAACR,EAAyBS,SAAQ,CAC9BC,MAAO,CACHP,eACAC,mBACHE,SAEAA,GAC+B"}

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

@@ -1,6 +1,3 @@
-import type { DropdownListProps } from "./types";
-/**
- * NOTE: This component is not directly exportables
- * but forms part of a component
- */
-export declare const DropdownList: <T, V>({ listItems, listExtractor, valueExtractor, onSelectItem, listStyleWidth, visible, enableSearch, searchPlaceholder, onSearch, searchFunction, onDismiss, disableItemFocus, multiSelect, selectedItems, onSelectAll, onRetry, itemsLoadState, itemTruncationType, itemMaxLines, labelDisplayType, renderListItem, onBlur, hideNoResultsDisplay, renderCustomCallToAction, variant, ...otherProps }: DropdownListProps<T, V>) => JSX.Element;
+import type React from "react";
+import type { DropdownListApi, DropdownListProps } from "./types";
+export declare const DropdownList: <T, V>(props: DropdownListProps<T, V> & React.RefAttributes<DropdownListApi>) => React.ReactElement | null;

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

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

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

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