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

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

@@ -1,60 +0,0 @@
-import type { DropdownVariantType } from "./types";
-interface ContainerStyleProps {
-    $width?: number;
-    $customWidth?: string;
-    $variant: DropdownVariantType;
-}
-interface ListItemStyleProps {
-    $active: boolean;
-    $selected: boolean;
-    $disabled: boolean;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerStyleProps>> & string;
-export declare const List: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Listbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ListItemStyleProps>> & string;
-export declare const SelectedIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const UnselectedIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CheckboxSelectedIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const CheckboxUnselectedIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const CheckboxDisabledIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const SelectAllContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DropdownCommonButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, never>> & string;
-export declare const TryAgainButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, never>, never>> & string;
-export declare const SelectAllButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, never>, never>> & string;
-export declare const ResultStateContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LabelIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../component-loading-spinner").ComponentLoadingSpinnerProps, never>> & string & Omit<({ color, className, size, }: import("../component-loading-spinner").ComponentLoadingSpinnerProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const NoResultDescContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};

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

@@ -1,125 +0,0 @@
-import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import{SquareIcon as r}from"@lifesg/react-icons/square";import{SquareFillIcon as e}from"@lifesg/react-icons/square-fill";import{SquareTickFillIcon as t}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as o}from"@lifesg/react-icons/tick";import a,{css as n}from"styled-components";import{V3_Border as l,V3_Colour as s,V3_Radius as d,V3_MediaQuery as c,V3_Breakpoint as h,V3_Font as p,V3_Spacing as g}from"../../v3_theme/index.js";import{ComponentLoadingSpinner as m}from"../component-loading-spinner/component-loading-spinner.js";import{applyHtmlContentStyle as $}from"../html-content/html-content.js";import{BasicButton as b}from"../input-wrapper/input-wrapper.js";const x=a.div`
-    border: ${l["width-010"]} ${l.solid}
-        ${s.border};
-    border-radius: ${d.sm};
-    background: ${s.bg};
-
-    --x-spacing: 0px;
-    --available-width: calc(100vw - var(--x-spacing) * 2);
-
-    ${c.MaxWidth.sm} {
-        --x-spacing: ${h["sm-margin"]}px;
-        max-height: 15rem;
-    }
-
-    ${c.MaxWidth.xs} {
-        --x-spacing: ${h["xs-margin"]}px;
-    }
-
-    ${c.MaxWidth.xxs} {
-        --x-spacing: ${h["xxs-margin"]}px;
-    }
-
-    max-width: var(--available-width);
-
-    ${i=>i.$customWidth?`width: ${i.$customWidth};`:i.$width?`width: ${i.$width}px; min-width: min(23rem, var(--available-width));`:"min-width: min(23rem, var(--available-width));"}
-
-    max-height: min(27rem, var(--available-height, infinity * 1px));
-    overflow: hidden;
-    overflow-y: auto;
-    ${i=>"small"===i.$variant?p["body-md-regular"]:p["body-baseline-regular"]}
-
-    &::-webkit-scrollbar {
-        width: 14px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: ${s["bg-inverse-subtlest"]};
-        border: 5px solid transparent;
-        border-radius: ${d.full};
-        background-clip: padding-box;
-    }
-`,f=a.div`
-    background: transparent;
-    padding: ${g["spacing-8"]};
-`,u=a.ul`
-    list-style-type: none;
-`,w=a.li`
-    display: flex;
-    align-items: flex-start;
-    gap: ${g["spacing-8"]};
-    padding: ${g["spacing-12"]} ${g["spacing-8"]};
-    cursor: pointer;
-    border: none;
-    border-radius: ${d.none};
-    outline: none;
-
-    ${i=>i.$disabled?n`
-                cursor: not-allowed;
-            `:i.$active&&i.$selected?n`
-                background: ${s["bg-hover"]};
-            `:i.$active?n`
-                background: ${s["bg-hover-subtle"]};
-            `:void 0}
-`,v=a(o)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1rem;
-    color: ${s["icon-selected"]};
-`,k=a.div`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1rem;
-`,y=a(t)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${s["icon-selected"]};
-`,j=a(r)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${s["icon-primary-subtlest"]};
-`,W=a(e)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${s["icon-disabled-subtle"]};
-`,q=a.div`
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-`,M=a(b)`
-    cursor: pointer;
-    overflow: hidden;
-    color: ${s["text-primary"]};
-    font-size: inherit;
-`,z=a(M)`
-    ${p["body-baseline-semibold"]}
-`,_=a(M)`
-    ${p["body-md-semibold"]}
-    padding: ${g["spacing-8"]} ${g["spacing-8"]};
-`,A=a.div`
-    width: 100%;
-    display: flex;
-    padding: ${g["spacing-12"]} ${g["spacing-16"]};
-    align-items: center;
-`,B=a(i)`
-    margin-right: ${g["spacing-4"]};
-    color: ${s["icon-error"]};
-    height: 1em;
-    width: 1em;
-`,C=a(m)`
-    margin-right: ${g["spacing-8"]};
-    color: ${s.icon};
-`,D=a.div`
-    ${$()}
-    color: ${s["text-subtle"]};
-    padding: 0 ${g["spacing-16"]} ${g["spacing-12"]}
-        ${g["spacing-16"]};
-`;export{W as CheckboxDisabledIndicator,y as CheckboxSelectedIndicator,j as CheckboxUnselectedIndicator,x as Container,M as DropdownCommonButton,B as LabelIcon,f as List,w as ListItem,u as Listbox,D as NoResultDescContainer,A as ResultStateContainer,_ as SelectAllButton,q as SelectAllContainer,v as SelectedIndicator,C as Spinner,z as TryAgainButton,k as UnselectedIndicator};
-//# sourceMappingURL=dropdown-list.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-list.styles.js","sources":["../../../src/shared/dropdown-list-v2/dropdown-list.styles.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 styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Breakpoint,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { applyHtmlContentStyle } from \"../html-content/html-content\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport type { DropdownVariantType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ContainerStyleProps {\n    $width?: number;\n    $customWidth?: string;\n    $variant: DropdownVariantType;\n}\n\ninterface ListItemStyleProps {\n    $active: boolean;\n    $selected: boolean;\n    $disabled: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const Container = styled.div<ContainerStyleProps>`\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n\n    --x-spacing: 0px;\n    --available-width: calc(100vw - var(--x-spacing) * 2);\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        --x-spacing: ${V3_Breakpoint[\"sm-margin\"]}px;\n        max-height: 15rem;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        --x-spacing: ${V3_Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        --x-spacing: ${V3_Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    max-width: var(--available-width);\n\n    ${(props) => {\n        if (props.$customWidth) return `width: ${props.$customWidth};`;\n        if (props.$width)\n            return `width: ${props.$width}px; min-width: min(23rem, var(--available-width));`;\n\n        return \"min-width: min(23rem, var(--available-width));\";\n    }}\n\n    max-height: min(27rem, var(--available-height, infinity * 1px));\n    overflow: hidden;\n    overflow-y: auto;\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${V3_Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${V3_Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\nexport const List = styled.div`\n    background: transparent;\n    padding: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const Listbox = styled.ul`\n    list-style-type: none;\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItem = styled.li<ListItemStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${V3_Radius[\"none\"]};\n    outline: none;\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$active && props.$selected) {\n            return css`\n                background: ${V3_Colour[\"bg-hover\"]};\n            `;\n        } else if (props.$active) {\n            return css`\n                background: ${V3_Colour[\"bg-hover-subtle\"]};\n            `;\n        }\n    }}\n`;\n\nexport const SelectedIndicator = styled(TickIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n    color: ${V3_Colour[\"icon-selected\"]};\n`;\n\nexport const UnselectedIndicator = styled.div`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n`;\n\nexport const CheckboxSelectedIndicator = styled(SquareTickFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${V3_Colour[\"icon-selected\"]};\n`;\n\nexport const CheckboxUnselectedIndicator = styled(SquareIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${V3_Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const CheckboxDisabledIndicator = styled(SquareFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${V3_Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\n\nexport const SelectAllContainer = styled.div`\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n`;\n\nexport const DropdownCommonButton = styled(BasicButton)`\n    cursor: pointer;\n    overflow: hidden;\n    color: ${V3_Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const TryAgainButton = styled(DropdownCommonButton)`\n    ${V3_Font[\"body-baseline-semibold\"]}\n`;\n\nexport const SelectAllButton = styled(DropdownCommonButton)`\n    ${V3_Font[\"body-md-semibold\"]}\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const ResultStateContainer = styled.div`\n    width: 100%;\n    display: flex;\n    padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-16\"]};\n    align-items: center;\n`;\n\nexport const LabelIcon = styled(ExclamationCircleFillIcon)`\n    margin-right: ${V3_Spacing[\"spacing-4\"]};\n    color: ${V3_Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    margin-right: ${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"icon\"]};\n`;\n\nexport const NoResultDescContainer = styled.div`\n    ${applyHtmlContentStyle()}\n    color: ${V3_Colour[\"text-subtle\"]};\n    padding: 0 ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-12\"]}\n        ${V3_Spacing[\"spacing-16\"]};\n`;\n"],"names":["Container","styled","div","V3_Border","V3_Colour","V3_Radius","V3_MediaQuery","MaxWidth","sm","V3_Breakpoint","xs","xxs","props","$customWidth","$width","$variant","V3_Font","List","V3_Spacing","Listbox","ul","ListItem","li","$disabled","css","$active","$selected","SelectedIndicator","TickIcon","UnselectedIndicator","CheckboxSelectedIndicator","SquareTickFillIcon","CheckboxUnselectedIndicator","SquareIcon","CheckboxDisabledIndicator","SquareFillIcon","SelectAllContainer","DropdownCommonButton","BasicButton","TryAgainButton","SelectAllButton","ResultStateContainer","LabelIcon","ExclamationCircleFillIcon","Spinner","ComponentLoadingSpinner","NoResultDescContainer","applyHtmlContentStyle"],"mappings":"2vBA2CO,MAAMA,EAAYC,EAAOC,GAAwB;cAC1CC,EAAU,gBAAgBA,EAAiB;UAC/CC,EAAkB;qBACPC,EAAc;kBACjBD,EAAc;;;;;MAK1BE,EAAcC,SAASC;uBACNC,EAAc;;;;MAI/BH,EAAcC,SAASG;uBACND,EAAc;;;MAG/BH,EAAcC,SAASI;uBACNF,EAAc;;;;;MAK9BG,GACKA,EAAMC,aAAqB,UAAUD,EAAMC,gBAC3CD,EAAME,OACC,UAAUF,EAAME,2DAEpB;;;;;MAMRF,GACoB,UAAnBA,EAAMG,SACAC,EAAQ,mBACRA,EAAQ;;;;;;;;;;;sBAWAZ,EAAU;;yBAEPC,EAAgB;;;EAI5BY,EAAOhB,EAAOC,GAAG;;eAEfgB,EAAW;EAGbC,EAAUlB,EAAOmB,EAAE;;EAQnBC,EAAWpB,EAAOqB,EAAsB;;;WAG1CJ,EAAW;eACPA,EAAW,iBAAiBA,EAAW;;;qBAGjCb,EAAgB;;;MAG9BO,GACKA,EAAMW,UACCC,CAAG;;cAGHZ,EAAMa,SAAWb,EAAMc,UACvBF,CAAG;8BACQpB,EAAU;cAErBQ,EAAMa,QACND,CAAG;8BACQpB,EAAU;mBAFzB;EAQFuB,EAAoB1B,EAAO2B,EAAS;;;;aAIpCxB,EAAU;EAGVyB,EAAsB5B,EAAOC,GAAG;;;;EAMhC4B,EAA4B7B,EAAO8B,EAAmB;;;;aAItD3B,EAAU;EAGV4B,EAA8B/B,EAAOgC,EAAW;;;;aAIhD7B,EAAU;EAGV8B,EAA4BjC,EAAOkC,EAAe;;;;aAIlD/B,EAAU;EAOVgC,EAAqBnC,EAAOC,GAAG;;;;EAM/BmC,EAAuBpC,EAAOqC,EAAY;;;aAG1ClC,EAAU;;EAIVmC,EAAiBtC,EAAOoC,EAAqB;MACpDrB,EAAQ;EAGDwB,EAAkBvC,EAAOoC,EAAqB;MACrDrB,EAAQ;eACCE,EAAW,gBAAgBA,EAAW;EAGxCuB,EAAuBxC,EAAOC,GAAG;;;eAG/BgB,EAAW,iBAAiBA,EAAW;;EAIzCwB,EAAYzC,EAAO0C,EAA0B;oBACtCzB,EAAW;aAClBd,EAAU;;;EAKVwC,EAAU3C,EAAO4C,EAAwB;oBAClC3B,EAAW;aAClBd,EAAgB;EAGhB0C,EAAwB7C,EAAOC,GAAG;MACzC6C;aACO3C,EAAU;iBACNc,EAAW,iBAAiBA,EAAW;UAC9CA,EAAW;"}

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

@@ -1,9 +0,0 @@
-import type React from "react";
-import type { DropdownVariantType } from "../dropdown-list/types";
-interface Props extends React.HTMLAttributes<HTMLInputElement> {
-    value: string /** override to cast type */;
-    variant?: DropdownVariantType | undefined;
-    onClear?: (() => void) | undefined;
-}
-export declare const DropdownSearch: (props: Props & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
-export {};

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

@@ -1,2 +0,0 @@
-import{__rest as r}from"../../_virtual/_tslib.js";import{jsxs as a,jsx as e}from"react/jsx-runtime";import{CrossIcon as i}from"@lifesg/react-icons/cross";import{forwardRef as t}from"react";import{Container as o,SearchBox as n,SearchIcon as l,SearchInput as s,ClearButton as c}from"./dropdown-search.styles.js";const m=t(((t,m)=>{var{value:v,variant:d,onClear:f}=t,u=r(t,["value","variant","onClear"]);return a(o,{$variant:d,children:[a(n,{$variant:d,children:[e(l,{"aria-hidden":!0}),e(s,Object.assign({ref:m,value:v,$variant:d},u))]}),v&&e(c,{"aria-label":"Clear search",focusOutline:"browser",onClick:f,children:e(i,{"aria-hidden":!0})})]})}));export{m as DropdownSearch};
-//# sourceMappingURL=dropdown-search.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-search.js","sources":["../../../src/shared/dropdown-list-v2/dropdown-search.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport type { DropdownVariantType } from \"../dropdown-list/types\";\nimport {\n    ClearButton,\n    Container,\n    SearchBox,\n    SearchIcon,\n    SearchInput,\n} from \"./dropdown-search.styles\";\n\ninterface Props extends React.HTMLAttributes<HTMLInputElement> {\n    value: string /** override to cast type */;\n    variant?: DropdownVariantType | undefined;\n    onClear?: (() => void) | undefined;\n}\n\nconst Component = (\n    { value, variant, onClear, ...otherProps }: Props,\n    ref: React.Ref<HTMLInputElement>\n): JSX.Element => {\n    return (\n        <Container $variant={variant}>\n            <SearchBox $variant={variant}>\n                <SearchIcon aria-hidden />\n                <SearchInput\n                    ref={ref}\n                    value={value}\n                    $variant={variant}\n                    {...otherProps}\n                />\n            </SearchBox>\n            {value && (\n                <ClearButton\n                    aria-label=\"Clear search\"\n                    focusOutline=\"browser\"\n                    onClick={onClear}\n                >\n                    <CrossIcon aria-hidden />\n                </ClearButton>\n            )}\n        </Container>\n    );\n};\n\nexport const DropdownSearch = forwardRef(Component);\n"],"names":["DropdownSearch","forwardRef","_a","ref","value","variant","onClear","otherProps","__rest","_jsxs","Container","$variant","SearchBox","children","_jsx","SearchIcon","SearchInput","Object","assign","ClearButton","focusOutline","onClick","CrossIcon"],"mappings":"sTAmBA,MA4BaA,EAAiBC,GA5BZ,CACdC,EACAC,SADAC,MAAEA,EAAKC,QAAEA,EAAOC,QAAEA,KAAYC,EAAUC,EAAAN,EAAxC,CAAA,QAAA,UAAA,YAGA,OACIO,EAACC,EAAS,CAAAC,SAAWN,YACjBI,EAACG,EAAS,CAAAD,SAAWN,EAAOQ,SAAA,CACxBC,EAACC,EAAU,CAAA,eAAA,IACXD,EAACE,EAAWC,OAAAC,OAAA,CACRf,IAAKA,EACLC,MAAOA,EAAKO,SACFN,GACNE,OAGXH,GACGU,EAACK,EAAW,CAAA,aACG,eACXC,aAAa,UACbC,QAASf,EAAOO,SAEhBC,EAACQ,EAAS,CAAA,eAAA,QAGV"}

package/shared/dropdown-list-v2/dropdown-search.styles.d.ts

@@ -1,17 +0,0 @@
-import type { DropdownVariantType } from "../dropdown-list/types";
-import type { InputStyleProps } from "../input-wrapper/input-wrapper";
-export interface StyleProps {
-    $variant: DropdownVariantType | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const SearchBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyleProps>> & string;
-export declare const SearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, InputStyleProps>> & string;
-export declare const SearchIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;

package/shared/dropdown-list-v2/dropdown-search.styles.js

@@ -1,39 +0,0 @@
-import{MagnifierIcon as i}from"@lifesg/react-icons/magnifier";import e,{css as r}from"styled-components";import{V3_Colour as n,V3_Radius as o,V3_Font as a,V3_Spacing as s}from"../../v3_theme/index.js";import{ClickableIcon as t}from"../clickable-icon/clickable-icon.js";import{BasicInput as l}from"../input-wrapper/input-wrapper.js";const c=e.div`
-    background: ${n["bg-strong"]};
-    border-radius: ${o.sm};
-    display: flex;
-    align-items: center;
-
-    ${i=>"small"===i.$variant?a["body-md-regular"]:a["body-baseline-regular"]}
-`,p=e.label`
-    flex: 1;
-    display: flex;
-    align-items: center;
-    gap: ${s["spacing-8"]};
-    padding: ${i=>"small"===i.$variant?r`
-                  ${s["spacing-8"]} ${s["spacing-16"]}
-              `:r`10px ${s["spacing-8"]}`};
-`,g=e(l)`
-    flex: 1;
-`,m=e(i)`
-    color: ${n.icon};
-    flex-shrink: 0;
-    height: 1em;
-    width: 1em;
-`,d=e(t)`
-    flex-shrink: 0;
-    align-self: stretch;
-    box-sizing: content-box;
-    padding: ${s["spacing-8"]};
-    margin-left: -${s["spacing-8"]};
-    color: ${n.icon};
-    cursor: pointer;
-    font-size: inherit;
-
-    svg {
-        flex-shrink: 0;
-        height: 1em;
-        width: 1em;
-    }
-`;export{d as ClearButton,c as Container,p as SearchBox,m as SearchIcon,g as SearchInput};
-//# sourceMappingURL=dropdown-search.styles.js.map

package/shared/dropdown-list-v2/dropdown-search.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-search.styles.js","sources":["../../../src/shared/dropdown-list-v2/dropdown-search.styles.tsx"],"sourcesContent":["import { MagnifierIcon } from \"@lifesg/react-icons/magnifier\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font, V3_Radius, V3_Spacing } from \"../../v3_theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport type { DropdownVariantType } from \"../dropdown-list/types\";\nimport type { InputStyleProps } from \"../input-wrapper/input-wrapper\";\nimport { BasicInput } from \"../input-wrapper/input-wrapper\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\nexport interface StyleProps {\n    $variant: DropdownVariantType | undefined;\n}\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.div<StyleProps>`\n    background: ${V3_Colour[\"bg-strong\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    display: flex;\n    align-items: center;\n\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n`;\n\nexport const SearchBox = styled.label<StyleProps>`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    padding: ${(props) =>\n        props.$variant === \"small\"\n            ? css`\n                  ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-16\"]}\n              `\n            : // TODO: confirm vertical spacing\n              css`10px ${V3_Spacing[\"spacing-8\"]}`};\n`;\n\nexport const SearchInput = styled(BasicInput)<InputStyleProps>`\n    flex: 1;\n`;\n\nexport const SearchIcon = styled(MagnifierIcon)`\n    color: ${V3_Colour[\"icon\"]};\n    flex-shrink: 0;\n    height: 1em;\n    width: 1em;\n`;\n\nexport const ClearButton = styled(ClickableIcon)`\n    flex-shrink: 0;\n    align-self: stretch;\n    box-sizing: content-box;\n    padding: ${V3_Spacing[\"spacing-8\"]};\n    margin-left: -${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"icon\"]};\n    cursor: pointer;\n    font-size: inherit;\n\n    svg {\n        flex-shrink: 0;\n        height: 1em;\n        width: 1em;\n    }\n`;\n"],"names":["Container","styled","div","V3_Colour","V3_Radius","props","$variant","V3_Font","SearchBox","label","V3_Spacing","css","SearchInput","BasicInput","SearchIcon","MagnifierIcon","ClearButton","ClickableIcon"],"mappings":"4UAmBO,MAAMA,EAAYC,EAAOC,GAAe;kBAC7BC,EAAU;qBACPC,EAAc;;;;MAI5BC,GACoB,UAAnBA,EAAMC,SACAC,EAAQ,mBACRA,EAAQ;EAGTC,EAAYP,EAAOQ,KAAiB;;;;WAItCC,EAAW;eACNL,GACW,UAAnBA,EAAMC,SACAK,CAAG;oBACGD,EAAW,gBAAgBA,EAAW;gBAG5CC,CAAG,QAAQD,EAAW;EAGvBE,EAAcX,EAAOY,EAA4B;;EAIjDC,EAAab,EAAOc,EAAc;aAClCZ,EAAgB;;;;EAMhBa,EAAcf,EAAOgB,EAAc;;;;eAIjCP,EAAW;oBACNA,EAAW;aAClBP,EAAgB;;;;;;;;;"}

package/shared/dropdown-list-v2/expandable-element.d.ts

@@ -1,13 +0,0 @@
-import type { AriaAttributes, Ref } from "react";
-import type { DropdownVariantType } from "./types";
-export interface ExpandableElementProps extends Pick<AriaAttributes, "aria-labelledby" | "aria-describedby" | "aria-invalid"> {
-    children: React.ReactNode;
-    disabled: boolean | undefined;
-    expanded: boolean | undefined;
-    listboxId: string;
-    popupRole: AriaAttributes["aria-haspopup"];
-    readOnly: boolean | undefined;
-    variant?: DropdownVariantType | undefined;
-}
-export declare const Component: ({ children, disabled, expanded, listboxId, popupRole, readOnly, variant, ...otherProps }: ExpandableElementProps, ref: Ref<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const ExpandableElement: (props: ExpandableElementProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/shared/dropdown-list-v2/expandable-element.js

@@ -1,2 +0,0 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as a,jsx as r}from"react/jsx-runtime";import{ChevronDownIcon as i}from"@lifesg/react-icons/chevron-down";import{forwardRef as o}from"react";import{Selector as d,IconContainer as t}from"./expandable-element.styles.js";const n=(o,n)=>{var{children:l,disabled:p,expanded:s,listboxId:c,popupRole:m,readOnly:b,variant:x}=o,v=e(o,["children","disabled","expanded","listboxId","popupRole","readOnly","variant"]);return a(d,Object.assign({ref:n,type:"button",role:"combobox","aria-expanded":s,"aria-haspopup":m,"aria-controls":s?c:void 0,"data-testid":"selector","aria-disabled":p,"aria-readonly":b,$variant:x,$readOnly:b},v,{children:[l,!b&&r(t,{$expanded:s,$variant:x,children:r(i,{"aria-hidden":!0})})]}))},l=o(n);export{n as Component,l as ExpandableElement};
-//# sourceMappingURL=expandable-element.js.map

package/shared/dropdown-list-v2/expandable-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"expandable-element.js","sources":["../../../src/shared/dropdown-list-v2/expandable-element.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport type { AriaAttributes, Ref } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { IconContainer, Selector } from \"./expandable-element.styles\";\nimport type { DropdownVariantType } from \"./types\";\n\nexport interface ExpandableElementProps\n    extends Pick<\n        AriaAttributes,\n        \"aria-labelledby\" | \"aria-describedby\" | \"aria-invalid\"\n    > {\n    children: React.ReactNode;\n    disabled: boolean | undefined;\n    expanded: boolean | undefined;\n    listboxId: string;\n    popupRole: AriaAttributes[\"aria-haspopup\"];\n    readOnly: boolean | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const Component = (\n    {\n        children,\n        disabled,\n        expanded,\n        listboxId,\n        popupRole,\n        readOnly,\n        variant,\n        ...otherProps\n    }: ExpandableElementProps,\n    ref: Ref<HTMLButtonElement>\n) => {\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    return (\n        <Selector\n            ref={ref}\n            type=\"button\"\n            role=\"combobox\"\n            aria-expanded={expanded}\n            aria-haspopup={popupRole}\n            aria-controls={expanded ? listboxId : undefined} // only apply when dropdown is mounted\n            data-testid=\"selector\"\n            aria-disabled={disabled}\n            aria-readonly={readOnly}\n            $variant={variant}\n            $readOnly={readOnly}\n            {...otherProps}\n        >\n            {children}\n            {!readOnly && (\n                <IconContainer $expanded={expanded} $variant={variant}>\n                    <ChevronDownIcon aria-hidden />\n                </IconContainer>\n            )}\n        </Selector>\n    );\n};\n\nexport const ExpandableElement = forwardRef(Component);\n"],"names":["Component","_a","ref","children","disabled","expanded","listboxId","popupRole","readOnly","variant","otherProps","__rest","_jsxs","Selector","Object","assign","type","role","undefined","$variant","$readOnly","_jsx","IconContainer","$expanded","ChevronDownIcon","ExpandableElement","forwardRef"],"mappings":"6RAqBaA,EAAY,CACrBC,EAUAC,KAVA,IAAAC,SACIA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,UACRA,EAASC,UACTA,EAASC,SACTA,EAAQC,QACRA,GAAOR,EACJS,EAAUC,EAAAV,EARjB,iFAeA,OACIW,EAACC,EAAQC,OAAAC,OAAA,CACLb,IAAKA,EACLc,KAAK,SACLC,KAAK,WAAU,gBACAZ,EAAQ,gBACRE,EAAS,gBACTF,EAAWC,OAAYY,EAAS,cACnC,WAAU,gBACPd,EAAQ,gBACRI,EAAQW,SACbV,EAAOW,UACNZ,GACPE,EAAU,CAAAP,SAAA,CAEbA,GACCK,GACEa,EAACC,EAAa,CAAAC,UAAYlB,EAAQc,SAAYV,EAAON,SACjDkB,EAACG,EAAe,CAAA,eAAA,SAGjB,EAINC,EAAoBC,EAAW1B"}

package/shared/dropdown-list-v2/expandable-element.styles.d.ts

@@ -1,11 +0,0 @@
-import type { DropdownVariantType } from "./types";
-interface StyleProps {
-    $expanded?: boolean;
-    $variant?: DropdownVariantType;
-    $readOnly?: boolean;
-}
-export declare const Selector: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, StyleProps>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export {};

package/shared/dropdown-list-v2/expandable-element.styles.js

@@ -1,37 +0,0 @@
-import e,{css as i}from"styled-components";import{V3_Spacing as t,V3_Colour as r,V3_Font as o,V3_Motion as a}from"../../v3_theme/index.js";import{BasicButton as n}from"../input-wrapper/input-wrapper.js";const s=e(n)`
-    display: flex;
-    align-items: center;
-    gap: ${t["spacing-8"]};
-    width: 100%;
-    padding: ${e=>e.$readOnly?`0 ${t["spacing-16"]}`:t["spacing-16"]};
-
-    ${e=>"small"===e.$variant?i`
-                  ${o["body-md-regular"]}
-                  height: calc(2.5rem - 2px); // exclude top and bottom borders
-              `:i`
-                  ${o["body-baseline-regular"]}
-                  height: calc(3rem - 2px);
-              `}
-
-    &:disabled {
-        cursor: not-allowed;
-    }
-
-    &:focus-visible {
-        outline: 2px solid ${r["focus-ring"]};
-        outline-offset: -2px;
-    }
-`,d=e.div`
-    display: flex;
-    align-items: center;
-    transform: rotate(${e=>e.$expanded?180:0}deg);
-    transition: transform ${a["duration-250"]}
-        ${a["ease-default"]};
-
-    svg {
-        color: ${r.icon};
-        height: 1em;
-        width: 1em;
-    }
-`;export{d as IconContainer,s as Selector};
-//# sourceMappingURL=expandable-element.styles.js.map

package/shared/dropdown-list-v2/expandable-element.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"expandable-element.styles.js","sources":["../../../src/shared/dropdown-list-v2/expandable-element.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font, V3_Motion, V3_Spacing } from \"../../v3_theme\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport type { DropdownVariantType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $expanded?: boolean;\n    $variant?: DropdownVariantType;\n    $readOnly?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Selector = styled(BasicButton)<StyleProps>`\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    width: 100%;\n    padding: ${(props) =>\n        props.$readOnly\n            ? `0 ${V3_Spacing[\"spacing-16\"]}`\n            : V3_Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$variant === \"small\"\n            ? css`\n                  ${V3_Font[\"body-md-regular\"]}\n                  height: calc(2.5rem - 2px); // exclude top and bottom borders\n              `\n            : css`\n                  ${V3_Font[\"body-baseline-regular\"]}\n                  height: calc(3rem - 2px);\n              `}\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const IconContainer = styled.div<StyleProps>`\n    display: flex;\n    align-items: center;\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: transform ${V3_Motion[\"duration-250\"]}\n        ${V3_Motion[\"ease-default\"]};\n\n    svg {\n        color: ${V3_Colour[\"icon\"]};\n        height: 1em;\n        width: 1em;\n    }\n`;\n"],"names":["Selector","styled","BasicButton","V3_Spacing","props","$readOnly","$variant","css","V3_Font","V3_Colour","IconContainer","div","$expanded","V3_Motion"],"mappings":"iNAkBaA,EAAWC,EAAOC,EAAwB;;;WAG5CC,EAAW;;eAENC,GACRA,EAAMC,UACA,KAAKF,EAAW,gBAChBA,EAAW;;MAElBC,GACoB,UAAnBA,EAAME,SACAC,CAAG;oBACGC,EAAQ;;gBAGdD,CAAG;oBACGC,EAAQ;;;;;;;;;6BASCC,EAAU;;;EAK1BC,EAAgBT,EAAOU,GAAe;;;wBAG1BP,GAAWA,EAAMQ,UAAY,IAAM;4BAChCC,EAAU;UAC5BA,EAAU;;;iBAGHJ,EAAgB;;;;"}

package/shared/dropdown-list-v2/nested-dropdown-list-helpers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nested-dropdown-list-helpers.js","sources":["../../../src/shared/dropdown-list-v2/nested-dropdown-list-helpers.ts"],"sourcesContent":["import { produce } from \"immer\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\n\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n} from \"./types\";\n\n/**\n * builds a flattened representation of the tree\n * the items are listed in their visual order\n */\nexport const flattenList = <T>(\n    nestedList: NestedDropdownListItemProps<T>[],\n    selectedKeyPaths: Set<string>,\n    multiSelect: boolean,\n    searchTerm: string,\n    initialExpanded: boolean\n): NestedDropdownListLocalItem<T>[] => {\n    const items: NestedDropdownListLocalItem<T>[] = [];\n\n    const flatten = (\n        list: NestedDropdownListItemProps<T>[],\n        parentItem: NestedDropdownListLocalItem<T> | undefined\n    ) => {\n        const current: NestedDropdownListLocalItem<T>[] = [];\n        const hasNestedSiblings = list.some(\n            (option) => option.subItems?.length\n        );\n\n        list.forEach((option, i) => {\n            const level = parentItem ? parentItem.level + 1 : 0;\n            const keyPath = parentItem\n                ? [...parentItem.keyPath, option.key]\n                : [option.key];\n            const keyPathString = buildKeyPath(keyPath);\n\n            const item: (typeof items)[number] = {\n                item: option,\n                index: items.length,\n                indexInParent: i,\n                parentSetSize: list.length,\n                keyPath,\n                parentIndex: parentItem ? parentItem.index : -1,\n                parentKeyPath: parentItem ? parentItem.keyPath : [],\n                level,\n                visible:\n                    level === 0 ||\n                    initialExpanded ||\n                    parentItem?.expanded ||\n                    false,\n                expanded: initialExpanded,\n                checked: selectedKeyPaths.has(keyPathString),\n                hasSubItems: !!option.subItems?.length,\n                subItemIndexes: [],\n                hasNestedSiblings,\n                matched: searchTerm\n                    ? option.label.toLowerCase().indexOf(searchTerm) !== -1\n                    : false,\n                hasMatchedSubItems: false,\n            };\n            current.push(item);\n            items.push(item);\n\n            if (option.subItems?.length) {\n                const children = flatten(option.subItems, item);\n\n                if (multiSelect && item.checked !== true) {\n                    const allChildrenSelected = children.every(\n                        (child) => child.checked === true\n                    );\n                    const mixed = children.some(\n                        (child) => child.checked !== false\n                    );\n\n                    if (allChildrenSelected) {\n                        item.checked = true;\n                    } else if (mixed) {\n                        item.checked = \"mixed\";\n                    }\n                }\n\n                item.hasMatchedSubItems = children.some(\n                    (child) => child.matched || child.hasMatchedSubItems\n                );\n                item.subItemIndexes = children.map((child) => child.index);\n            }\n        });\n        return current;\n    };\n\n    flatten(nestedList, undefined);\n    return items;\n};\n\nexport const expandSelectedSubtrees = <T>(\n    list: NestedDropdownListLocalItem<T>[]\n) => {\n    return produce(list, (draft) => {\n        const selectedItems = draft.filter((item) => item.checked === true);\n        for (const selectedItem of selectedItems) {\n            let parentIndex = selectedItem.parentIndex;\n            while (parentIndex >= 0) {\n                const parent = draft[parentIndex];\n                parent.visible = true;\n                parent.expanded = true;\n\n                for (const i of parent.subItemIndexes) {\n                    draft[i].visible = true;\n                }\n\n                parentIndex = parent.parentIndex;\n            }\n        }\n    });\n};\n\nexport const expandMatchedSubtrees = <T>(\n    list: NestedDropdownListLocalItem<T>[]\n) => {\n    return produce(list, (draft) => {\n        for (const item of draft) {\n            if (item.matched) {\n                item.visible = true;\n            }\n\n            if (item.hasMatchedSubItems) {\n                item.visible = true;\n                item.expanded = true;\n\n                for (const i of item.subItemIndexes) {\n                    draft[i].visible = true;\n                }\n            }\n        }\n    });\n};\n\nexport const expandFirstSubtree = <T>(\n    list: NestedDropdownListLocalItem<T>[]\n) => {\n    return produce(list, (draft) => {\n        const firstSubtreeIndex = draft.findIndex((item) => item.hasSubItems);\n        if (firstSubtreeIndex < 0) {\n            return;\n        }\n        let index = firstSubtreeIndex;\n        let length = 0;\n        // find the first subtree\n        for (let i = index; i < draft.length; i++) {\n            const nextItemLength = draft[i].keyPath.length;\n            if (nextItemLength > length) {\n                length = nextItemLength;\n            } else if (nextItemLength < length) {\n                break;\n            }\n\n            index = i;\n            draft[i].visible = true;\n            draft[i].expanded = true;\n        }\n\n        // expand siblings of ancestors\n        for (let i = 0; i < draft.length; i++) {\n            const item = draft[i];\n            const parentKeyPath = item.keyPath.slice(0, -1);\n            const ancestorKeyPath = draft[index].keyPath.slice(\n                0,\n                parentKeyPath.length\n            );\n            if (isEqual(parentKeyPath, ancestorKeyPath)) {\n                item.visible = true;\n            }\n        }\n        return draft;\n    });\n};\n\nexport const toggleSubtree = <T>(\n    list: NestedDropdownListLocalItem<T>[],\n    index: number,\n    expanded: boolean\n) => {\n    return produce(list, (draft) => {\n        draft[index].expanded = expanded;\n        const keyPath = draft[index].keyPath;\n        for (let i = index + 1; i < draft.length; i++) {\n            const item = draft[i];\n            const parent = draft[item.parentIndex];\n            const ancestorKeyPath = item.keyPath.slice(0, keyPath.length);\n            if (isEqual(keyPath, ancestorKeyPath)) {\n                item.visible = expanded && parent.expanded && parent.visible;\n            } else {\n                // no more descendents\n                break;\n            }\n        }\n    });\n};\n\nexport const updateSelectedState = <T>(\n    list: NestedDropdownListLocalItem<T>[],\n    selectedKeyPaths: Set<string>,\n    multiSelect: boolean\n) => {\n    const res = produce(list, (draft) => {\n        for (let i = draft.length - 1; i >= 0; i--) {\n            const item = draft[i];\n            const itemKeyPathString = buildKeyPath(item.keyPath);\n            item.checked = selectedKeyPaths.has(itemKeyPathString);\n            if (item.hasSubItems) {\n                if (multiSelect && item.checked !== true) {\n                    const children = item.subItemIndexes.map(\n                        (index) => draft[index]\n                    );\n\n                    const allChildrenSelected = children.every(\n                        (child) => child.checked === true\n                    );\n                    const mixed = children.some(\n                        (child) => child.checked !== false\n                    );\n\n                    if (allChildrenSelected) {\n                        item.checked = true;\n                    } else if (mixed) {\n                        item.checked = \"mixed\";\n                    }\n                }\n            }\n        }\n    });\n    return res;\n};\n\nexport const findItemFromStart = <T>(\n    arr: T[],\n    predicate: (e: T) => boolean,\n    start: number\n): T | undefined => {\n    for (let i = start; i < arr.length; i++) {\n        if (predicate(arr[i])) {\n            return arr[i];\n        }\n    }\n\n    return undefined;\n};\n\nexport const findItemFromEnd = <T>(\n    arr: T[],\n    predicate: (e: T) => boolean,\n    end: number\n): T | undefined => {\n    for (let i = end; i >= 0; i--) {\n        if (predicate(arr[i])) {\n            return arr[i];\n        }\n    }\n\n    return undefined;\n};\n\nexport const findItemByKeyPath = <T>(\n    nestedList: NestedDropdownListItemProps<T>[] | undefined,\n    keyPath: string[]\n): NestedDropdownListItemProps<T> | undefined => {\n    const [currentKey, ...nextKeyPath] = keyPath;\n    if (isEmpty(nestedList) || isEmpty(currentKey)) {\n        return undefined;\n    }\n\n    const item = nestedList!.find((item) => item.key === currentKey);\n\n    if (!item || !nextKeyPath.length) {\n        return item;\n    }\n\n    return findItemByKeyPath(item.subItems, nextKeyPath);\n};\n\nexport const buildKeyPath = (keyPath: string[]): string => {\n    return keyPath.join(\",\");\n};\n\nexport const buildKeyPathToSet = (keyPathArr: string[][]): Set<string> => {\n    return new Set<string>(keyPathArr.map((keyPath) => keyPath.join(\",\")));\n};\n"],"names":["flattenList","nestedList","selectedKeyPaths","multiSelect","searchTerm","initialExpanded","items","flatten","list","parentItem","current","hasNestedSiblings","some","option","_a","subItems","length","forEach","i","level","keyPath","key","keyPathString","buildKeyPath","item","index","indexInParent","parentSetSize","parentIndex","parentKeyPath","visible","expanded","checked","has","hasSubItems","subItemIndexes","matched","label","toLowerCase","indexOf","hasMatchedSubItems","push","_b","children","allChildrenSelected","every","child","mixed","map","undefined","expandSelectedSubtrees","produce","draft","selectedItems","filter","selectedItem","parent","expandMatchedSubtrees","expandFirstSubtree","firstSubtreeIndex","findIndex","nextItemLength","slice","ancestorKeyPath","isEqual","toggleSubtree","updateSelectedState","itemKeyPathString","findItemFromStart","arr","predicate","start","findItemFromEnd","end","findItemByKeyPath","currentKey","nextKeyPath","isEmpty","find","join","buildKeyPathToSet","keyPathArr","Set"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{CaretRightIcon as i}from"@lifesg/react-icons/caret-right";import{useState as n,useRef as l,useMemo as s,useEffect as o}from"react";import{Virtuoso as a}from"react-virtuoso";import{Spinner as d}from"../../button/button.style.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as c}from"../../util/merge-refs.js";import"../../util/string-helper.js";import{useEvent as u}from"../../util/use-event.js";import{useEventListener as h}from"../../util/use-event-listener.js";import{useIsMounted as m}from"../../util/use-mount.js";import"../dropdown-wrapper/dropdown-wrapper.styles.js";import{useDropdownRender as p}from"../dropdown-wrapper/element-with-dropdown.js";import{DropdownLabel as f}from"./dropdown-label.js";import{Container as v,List as b,SelectAllContainer as g,SelectAllButton as w,ResultStateContainer as j,LabelIcon as x,NoResultDescContainer as y,TryAgainButton as S,CheckboxUnselectedIndicator as k,CheckboxSelectedIndicator as C,SelectedIndicator as I}from"./dropdown-list.styles.js";import{DropdownSearch as $}from"./dropdown-search.js";import{ListItemContainer as L,Indent as D,UnexpandableIndicator as P,ListItem as T,ExpandButton as A,CheckboxMixedIndicator as E,SelectionIndicator as R}from"./nested-dropdown-list.styles.js";import{flattenList as N,expandSelectedSubtrees as O,expandFirstSubtree as z,updateSelectedState as F,expandMatchedSubtrees as W,findItemFromEnd as B,findItemFromStart as M,toggleSubtree as K}from"./nested-dropdown-list-helpers.js";const U=({listItems:U,multiSelect:V=!1,selectedKeyPaths:_,itemsLoadState:q="success",itemTruncationType:G="end",itemMaxLines:H=2,variant:J="default",listboxId:Q,matchElementWidth:X=!1,width:Y,mode:Z="default",selectableCategory:ee,onSelectItem:te,onSelectAll:re,onRetry:ie,enableSearch:ne,hideNoResultsDisplay:le,noResultsDescription:se,customLabels:oe,searchPlaceholder:ae,onSearch:de})=>{const{noResultsLabel:ce="No results found.",selectAllButtonLabel:ue="Select all",clearAllButtonLabel:he="Clear all"}=oe||{},me=(null==oe?void 0:oe.searchPlaceholder)||ae||"Search",pe=(null==oe?void 0:oe.noResultsDescription)||se,fe=V||ee,{elementWidth:ve,setFloatingRef:be,getFloatingProps:ge,styles:we}=p(),[je,xe]=n(""),ye=je.toLowerCase().trim(),[Se,ke]=n(!1),Ce=l(null),Ie=l(null),$e=l([]),Le=l(null),De=m(),[Pe,Te]=n([]),[Ae,Ee]=n([]),Re=Se?Ae:Pe,Ne=s((()=>{let e=0;for(const t of Pe)t.level>e&&(e=t.level);return e}),[Pe]),[Oe,ze]=n(0),[Fe,We]=n([]),[Be,Me]=n(0),Ke=e=>{const t=e.target.value;xe(t),""===t?ke(!1):t.trim().length>=3&&ke(!0),null==de||de()},Ue=()=>{var e;xe(""),ke(!1),null===(e=Le.current)||void 0===e||e.focus(),null==de||de()},Ve=()=>{null==ie||ie()},_e=()=>{if(0===_.size){const e=[],t=[];Pe.forEach((r=>{r.hasSubItems||(e.push(r.keyPath),t.push(r))})),null==re||re(e,t)}else null==re||re([],[])},qe=u(((e,t)=>N(e,_,V,ye,t))),Ge=u((e=>_.size?O(qe(e,!1)):z(qe(e,!1)))),He=u((e=>{const t=e=>{const r=[];for(const i of e){if(-1!==i.label.toLowerCase().indexOf(ye))r.push(i);else if(i.subItems){const e=t(i.subItems);if(e.length>0){r.push(Object.assign(Object.assign({},i),{subItems:e}));continue}}}return r};return t(e)})),Je=u((()=>{Te((e=>F(e,_,V))),Se&&Ee((e=>F(e,_,V)))})),Qe=(e,t,r)=>{const i=K(Re,e,t);ze(e),Me(r),Se?Ee(i):Te(i)};h("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":{e.preventDefault();const r=M(Re,(e=>e.visible),Oe+1);r&&(Me((e=>e+1)),ze(r.index),null===(t=$e.current[r.index])||void 0===t||t.focus());break}case"ArrowUp":{e.preventDefault();const t=B(Re,(e=>e.visible),Oe-1);t?(Me((e=>e-1)),ze(t.index),null===(r=$e.current[t.index])||void 0===r||r.focus()):0===Be&&Le.current&&(Le.current.focus(),Me(-1),ze(-1));break}case"ArrowRight":e.preventDefault(),Qe(Oe,!0,Be);break;case"ArrowLeft":e.preventDefault(),Qe(Oe,!1,Be);break;case"Space":if(document.activeElement===$e.current[Oe]){e.preventDefault();const t=Re[Oe];if(t.hasSubItems&&!fe)return;null==te||te(t)}}})),o((()=>{let e=[];"default"===Z?e=Ge(U):"expand"===Z?e=qe(U,!0):"collapse"===Z&&(e=qe(U,!1)),Te(e)}),[qe,Ge,U,Z]),o((()=>{We(Re.filter((e=>e.visible)))}),[Se,Re]),o((()=>{Je()}),[V,_,Je]),o((()=>{if(Se&&je.trim().length>=3){const e=He(U),t=W(qe(e,!1));Ee(t)}}),[He,qe,U,Se,je]),o((()=>{De||(Le.current?(ze(-1),Me(-1),setTimeout((()=>{var e;return null===(e=Le.current)||void 0===e?void 0:e.focus()}),200)):$e.current[Oe]?setTimeout((()=>{var e;return null===(e=$e.current[Oe])||void 0===e?void 0:e.focus()}),200):(ze(0),Me(0),setTimeout((()=>{var e;return null===(e=$e.current[0])||void 0===e?void 0:e.focus()}),200)))}),[Oe,Be,De]);const Xe=()=>{if(ne&&"success"===q)return e($,{ref:Le,onChange:Ke,value:je,placeholder:me,"data-testid":"search-input","aria-label":"Enter text to search",onClear:Ue,variant:J})},Ye=()=>{if(V&&!Se&&Pe.length>0&&"success"===q)return e(g,{children:e(w,{onClick:_e,type:"button",$variant:J,children:0===_.size?ue:he})})},Ze=()=>{if(!le&&Se&&0===Ae.length&&"success"===q)return t(r,{children:[t(j,{"data-testid":"list-no-results",children:[e(x,{"data-testid":"no-result-icon"}),ce]}),pe&&e(y,{"data-testid":"no-result-desc",children:pe})]})},et=()=>{if(ie&&"loading"===q)return t(j,{"data-testid":"list-loading",children:[e(d,{$hasChildren:!0}),"Loading..."]})},tt=()=>{if(ie&&"fail"===q)return t(j,{"data-testid":"list-fail",children:[e(x,{"data-testid":"load-error-icon"}),"Failed to load. ",e(S,{onClick:Ve,type:"button",$variant:J,children:"Try again."})]})},rt=t=>{if(V)switch(t.checked){case"mixed":return e(E,{"aria-hidden":!0});case!0:return e(C,{"aria-hidden":!0});default:return e(k,{"aria-hidden":!0})}if(!t.hasSubItems)return e(R,{$hasNestedSiblings:t.hasNestedSiblings||0===t.level,children:t.checked&&e(I,{"aria-hidden":!0})})},it=(r,n)=>{const{level:l,visible:s,expanded:o,keyPath:a,checked:d,hasSubItems:c,indexInParent:u,parentSetSize:h}=r,m=r.index,p=Be===n,v=c&&!fe;return t(L,{$visible:s,children:[Ne>0&&e(D,{$level:l}),Ne>0&&!c&&V&&e(P,{}),t(T,{"aria-checked":d,"aria-selected":!!d,"aria-expanded":c?o:void 0,"aria-level":l+1,"aria-posinset":u+1,"aria-setsize":h,"data-testid":"list-item",onClick:e=>{e.stopPropagation(),v?Qe(m,!o,n):((e,t)=>{Me(t),ze(e),null==te||te(Re[e])})(m,n)},onMouseEnter:()=>((e,t)=>{ze(t.index),Me(e)})(n,r),ref:e=>$e.current[r.index]=e,role:"treeitem",tabIndex:p?0:-1,$active:p,$toggleable:v,children:[c&&e(A,{"data-testid":"toggle-category-button",onClick:e=>{e.stopPropagation(),Qe(m,!o,n)},$expanded:o,children:e(i,{})}),rt(r),e(f,{bold:c,searchTerm:Se?ye:void 0,label:r.item.label,selected:!!d,truncationType:G,maxLines:H})]})]},`[${a.join("---")}]`)},nt=()=>{var t;const r="test"===process.env.NODE_ENV;return e("div",{"aria-multiselectable":V,id:Q,ref:Ie,role:"tree",children:e(a,Object.assign({style:{height:"100%"},customScrollParent:null!==(t=Ce.current)&&void 0!==t?t:void 0,data:Fe,itemContent:(e,t)=>it(t,e)},r?{initialItemCount:Fe.length}:{}),r?Fe.length:void 0)})};return e(v,Object.assign({"data-testid":"dropdown-container",ref:c(Ce,be),style:we},ge(),{$width:X?ve:void 0,$variant:J,$customWidth:Y,children:t(b,{"data-testid":"nested-dropdown-list",children:[Xe(),Ye(),Ze(),et(),tt(),nt()]})}))};export{U as NestedDropdownList};
-//# sourceMappingURL=nested-dropdown-list.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"nested-dropdown-list.js","sources":["../../../src/shared/dropdown-list-v2/nested-dropdown-list.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@lifesg/react-icons/caret-right\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Virtuoso } from \"react-virtuoso\";\n\nimport { Spinner } from \"../../button/button.style\";\nimport {\n    mergeRefs,\n    useEvent,\n    useEventListener,\n    useIsMounted,\n} from \"../../util\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport { DropdownLabel } from \"./dropdown-label\";\nimport {\n    CheckboxSelectedIndicator,\n    CheckboxUnselectedIndicator,\n    Container,\n    LabelIcon,\n    List,\n    NoResultDescContainer,\n    ResultStateContainer,\n    SelectAllButton,\n    SelectAllContainer,\n    SelectedIndicator,\n    TryAgainButton,\n} from \"./dropdown-list.styles\";\nimport { DropdownSearch } from \"./dropdown-search\";\nimport {\n    CheckboxMixedIndicator,\n    ExpandButton,\n    Indent,\n    ListItem,\n    ListItemContainer,\n    SelectionIndicator,\n    UnexpandableIndicator,\n} from \"./nested-dropdown-list.styles\";\nimport {\n    expandFirstSubtree,\n    expandMatchedSubtrees,\n    expandSelectedSubtrees,\n    findItemFromEnd,\n    findItemFromStart,\n    flattenList,\n    toggleSubtree,\n    updateSelectedState,\n} from \"./nested-dropdown-list-helpers\";\nimport type {\n    NestedDropdownListItemProps,\n    NestedDropdownListLocalItem,\n    NestedDropdownListProps,\n} from \"./types\";\n\nexport const NestedDropdownList = <T,>({\n    listItems,\n    multiSelect = false,\n    selectedKeyPaths,\n    itemsLoadState = \"success\",\n    itemTruncationType = \"end\",\n    itemMaxLines = 2,\n    variant = \"default\",\n    listboxId,\n    matchElementWidth = false,\n    width,\n    mode = \"default\",\n    selectableCategory: _selectableCategory,\n    onSelectItem,\n    onSelectAll,\n    onRetry,\n    /* DropdownSearchProps */\n    enableSearch,\n    hideNoResultsDisplay,\n    noResultsDescription: _noResultsDescription,\n    customLabels,\n    searchPlaceholder: _searchPlaceholder,\n    onSearch,\n}: NestedDropdownListProps<T>) => {\n    // =========================================================================\n    // CONST, STATE, REF\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 selectableCategory = multiSelect || _selectableCategory;\n\n    const { elementWidth, setFloatingRef, getFloatingProps, styles } =\n        useDropdownRender();\n    const [searchValue, setSearchValue] = useState<string>(\"\");\n    const searchTerm = searchValue.toLowerCase().trim();\n    const [searchActive, setSearchActive] = useState<boolean>(false);\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const listRef = useRef<HTMLDivElement>(null);\n    const listItemRefs = useRef<(HTMLElement | null)[]>([]);\n    const searchInputRef = useRef<HTMLInputElement>(null);\n    const mounted = useIsMounted();\n\n    // maintaining a separate list for search and non-search as we need to\n    // preserve the original expanded state\n    const [unfilteredListItems, setUnfilteredListItems] = useState<\n        NestedDropdownListLocalItem<T>[]\n    >([]);\n    const [filteredListItems, setFilteredListItems] = useState<\n        NestedDropdownListLocalItem<T>[]\n    >([]);\n\n    const activeList = searchActive ? filteredListItems : unfilteredListItems;\n\n    const maxLevel = useMemo(() => {\n        let currentMaxLevel = 0;\n        for (const item of unfilteredListItems) {\n            if (item.level > currentMaxLevel) {\n                currentMaxLevel = item.level;\n            }\n        }\n        return currentMaxLevel;\n    }, [unfilteredListItems]);\n\n    // TODO: persist in context?\n    const [focusedIndex, setFocusedIndex] = useState(0);\n\n    /**\n     * NOTE: Keeping track of the visible items to pass to Virtuoso for virtualisation to work.\n     * This is required due to the nature of show/hide sub-items, to omit them from the DOM entirely.\n     */\n    const [visibleItems, setVisibleItems] = useState<\n        NestedDropdownListLocalItem<T>[]\n    >([]);\n\n    // NOTE: Maintaining a separate index for UI to keep track on which item (in terms of Virtuoso's indexing) is currently focused on keyboard press events.\n    const [virtuosoIndex, setVirtuosoIndex] = useState(0);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyboardPress = (event: KeyboardEvent) => {\n        /**\n         *  NOTE: When navigating up/down the list using keyboard, need to use virtuoso index, when expanding/collapsing, need actual index as we need to toggle the visible state of the sub-items\n         */\n        switch (event.code) {\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const upcomingItem = findItemFromStart(\n                    activeList,\n                    (item) => item.visible,\n                    focusedIndex + 1\n                );\n                if (upcomingItem) {\n                    setVirtuosoIndex((vIndex) => vIndex + 1);\n                    setFocusedIndex(upcomingItem.index);\n                    listItemRefs.current[upcomingItem.index]?.focus();\n                }\n                break;\n            }\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const upcomingItem = findItemFromEnd(\n                    activeList,\n                    (item) => item.visible,\n                    focusedIndex - 1\n                );\n                if (upcomingItem) {\n                    setVirtuosoIndex((vIndex) => vIndex - 1);\n                    setFocusedIndex(upcomingItem.index);\n                    listItemRefs.current[upcomingItem.index]?.focus();\n                } else if (virtuosoIndex === 0 && searchInputRef.current) {\n                    searchInputRef.current.focus();\n                    setVirtuosoIndex(-1);\n                    setFocusedIndex(-1);\n                }\n                break;\n            }\n            case \"ArrowRight\": {\n                event.preventDefault();\n                toggleCategory(focusedIndex, true, virtuosoIndex);\n                break;\n            }\n            case \"ArrowLeft\": {\n                event.preventDefault();\n                toggleCategory(focusedIndex, false, virtuosoIndex);\n                break;\n            }\n            case \"Space\": {\n                if (\n                    document.activeElement ===\n                    listItemRefs.current[focusedIndex]\n                ) {\n                    event.preventDefault();\n                    const target = activeList[focusedIndex];\n                    if (target.hasSubItems && !selectableCategory) {\n                        return;\n                    }\n                    onSelectItem?.(target);\n                }\n                break;\n            }\n        }\n    };\n\n    const handleSearchInputChange = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const value = event.target.value;\n        setSearchValue(value);\n\n        if (value === \"\") {\n            setSearchActive(false);\n        } else if (value.trim().length >= 3) {\n            setSearchActive(true);\n        }\n\n        onSearch?.();\n    };\n\n    const handleOnClear = () => {\n        setSearchValue(\"\");\n        setSearchActive(false);\n        searchInputRef.current?.focus();\n\n        onSearch?.();\n    };\n\n    const handleTryAgain = () => {\n        onRetry?.();\n    };\n\n    const handleListItemClick = (itemIndex: number, vIndex: number) => {\n        setVirtuosoIndex(vIndex);\n        setFocusedIndex(itemIndex);\n        onSelectItem?.(activeList[itemIndex]);\n    };\n\n    const handleListItemHover = (\n        virtuosoIndex: number,\n        listItem: NestedDropdownListLocalItem<T>\n    ) => {\n        setFocusedIndex(listItem.index);\n        setVirtuosoIndex(virtuosoIndex);\n    };\n\n    const handleOnSelectAll = () => {\n        if (selectedKeyPaths.size === 0) {\n            const keyPaths: string[][] = [];\n            const items: NestedDropdownListLocalItem<T>[] = [];\n            unfilteredListItems.forEach((item) => {\n                if (item.hasSubItems) {\n                    return;\n                }\n                keyPaths.push(item.keyPath);\n                items.push(item);\n            });\n\n            onSelectAll?.(keyPaths, items);\n        } else {\n            onSelectAll?.([], []);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const flatten = useEvent(\n        (\n            nestedList: NestedDropdownListItemProps<T>[],\n            initialExpanded: boolean\n        ): NestedDropdownListLocalItem<T>[] => {\n            return flattenList(\n                nestedList,\n                selectedKeyPaths,\n                multiSelect,\n                searchTerm,\n                initialExpanded\n            );\n        }\n    );\n\n    const flattenDefaultMode = useEvent(\n        (nestedList: NestedDropdownListItemProps<T>[]) => {\n            if (selectedKeyPaths.size) {\n                return expandSelectedSubtrees(flatten(nestedList, false));\n            } else {\n                return expandFirstSubtree(flatten(nestedList, false));\n            }\n        }\n    );\n\n    const filter = useEvent((nestedList: NestedDropdownListItemProps<T>[]) => {\n        const filterMatchedItems = (list: NestedDropdownListItemProps<T>[]) => {\n            const matchedItems: NestedDropdownListItemProps<T>[] = [];\n            for (const item of list) {\n                const match =\n                    item.label.toLowerCase().indexOf(searchTerm) !== -1;\n\n                if (match) {\n                    matchedItems.push(item);\n                    continue;\n                }\n\n                if (item.subItems) {\n                    const matchedSubItems = filterMatchedItems(item.subItems);\n                    if (matchedSubItems.length > 0) {\n                        matchedItems.push({\n                            ...item,\n                            subItems: matchedSubItems,\n                        });\n                        continue;\n                    }\n                }\n            }\n            return matchedItems;\n        };\n        return filterMatchedItems(nestedList);\n    });\n\n    const updateSelectedItemsInList = useEvent(() => {\n        setUnfilteredListItems((unfilteredListItems) =>\n            updateSelectedState(\n                unfilteredListItems,\n                selectedKeyPaths,\n                multiSelect\n            )\n        );\n\n        if (searchActive) {\n            setFilteredListItems((filteredListItems) =>\n                updateSelectedState(\n                    filteredListItems,\n                    selectedKeyPaths,\n                    multiSelect\n                )\n            );\n        }\n    });\n\n    const toggleCategory = (\n        index: number,\n        nextExpanded: boolean,\n        virtuosoIndex: number\n    ) => {\n        const list = toggleSubtree(activeList, index, nextExpanded);\n        setFocusedIndex(index);\n        setVirtuosoIndex(virtuosoIndex);\n        if (searchActive) {\n            setFilteredListItems(list);\n        } else {\n            setUnfilteredListItems(list);\n        }\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEventListener(\"keydown\", handleKeyboardPress);\n\n    useEffect(() => {\n        let list: NestedDropdownListLocalItem<T>[] = [];\n        if (mode === \"default\") {\n            list = flattenDefaultMode(listItems);\n        } else if (mode === \"expand\") {\n            list = flatten(listItems, true);\n        } else if (mode === \"collapse\") {\n            list = flatten(listItems, false);\n        }\n        setUnfilteredListItems(list);\n    }, [flatten, flattenDefaultMode, listItems, mode]);\n\n    useEffect(() => {\n        // Filter out non-visible items before passing to Virtuoso\n        setVisibleItems(activeList.filter((item) => item.visible));\n    }, [searchActive, activeList]);\n\n    useEffect(() => {\n        updateSelectedItemsInList();\n    }, [multiSelect, selectedKeyPaths, updateSelectedItemsInList]);\n\n    useEffect(() => {\n        if (searchActive && searchValue.trim().length >= 3) {\n            const filteredListItems = filter(listItems);\n            const list = expandMatchedSubtrees(\n                flatten(filteredListItems, false)\n            );\n\n            setFilteredListItems(list);\n        }\n    }, [filter, flatten, listItems, searchActive, searchValue]);\n\n    useEffect(() => {\n        if (mounted) {\n            // only run on mount\n            return;\n        }\n\n        // Focus search input if there is one\n        if (searchInputRef.current) {\n            setFocusedIndex(-1);\n            setVirtuosoIndex(-1);\n            setTimeout(() => searchInputRef.current?.focus(), 200); // wait for animation\n        } else if (listItemRefs.current[focusedIndex]) {\n            // Else focus on the specified element\n            setTimeout(() => listItemRefs.current[focusedIndex]?.focus(), 200);\n        } else {\n            // Else focus on the first list item\n            setFocusedIndex(0);\n            setVirtuosoIndex(0);\n            setTimeout(() => listItemRefs.current[0]?.focus(), 200);\n        }\n    }, [focusedIndex, virtuosoIndex, mounted]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderSearchInput = () => {\n        if (enableSearch && 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            multiSelect &&\n            !searchActive &&\n            unfilteredListItems.length > 0 &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <SelectAllContainer>\n                    <SelectAllButton\n                        onClick={handleOnSelectAll}\n                        type=\"button\"\n                        $variant={variant}\n                    >\n                        {selectedKeyPaths.size === 0\n                            ? selectAllButtonLabel\n                            : clearAllButtonLabel}\n                    </SelectAllButton>\n                </SelectAllContainer>\n            );\n        }\n    };\n\n    const renderNoResults = () => {\n        if (\n            !hideNoResultsDisplay &&\n            searchActive &&\n            filteredListItems.length === 0 &&\n            itemsLoadState === \"success\"\n        ) {\n            return (\n                <>\n                    <ResultStateContainer data-testid=\"list-no-results\">\n                        <LabelIcon data-testid=\"no-result-icon\" />\n                        {noResultsLabel}\n                    </ResultStateContainer>\n                    {noResultsDescription && (\n                        <NoResultDescContainer data-testid=\"no-result-desc\">\n                            {noResultsDescription}\n                        </NoResultDescContainer>\n                    )}\n                </>\n            );\n        }\n    };\n\n    const renderLoading = () => {\n        if (onRetry && itemsLoadState === \"loading\") {\n            return (\n                <ResultStateContainer data-testid=\"list-loading\">\n                    <Spinner $hasChildren={true} />\n                    Loading...\n                </ResultStateContainer>\n            );\n        }\n    };\n\n    const renderTryAgain = () => {\n        if (onRetry && itemsLoadState === \"fail\") {\n            return (\n                <ResultStateContainer data-testid=\"list-fail\">\n                    <LabelIcon data-testid=\"load-error-icon\" />\n                    Failed to load.&nbsp;\n                    <TryAgainButton\n                        onClick={handleTryAgain}\n                        type=\"button\"\n                        $variant={variant}\n                    >\n                        Try again.\n                    </TryAgainButton>\n                </ResultStateContainer>\n            );\n        }\n    };\n    const renderSelectionIcon = (listItem: NestedDropdownListLocalItem<T>) => {\n        if (multiSelect) {\n            switch (listItem.checked) {\n                case \"mixed\":\n                    return <CheckboxMixedIndicator aria-hidden />;\n                case true:\n                    return <CheckboxSelectedIndicator aria-hidden />;\n                default:\n                    return <CheckboxUnselectedIndicator aria-hidden />;\n            }\n        }\n\n        if (listItem.hasSubItems) {\n            // no icon needed\n            return;\n        }\n\n        return (\n            <SelectionIndicator\n                $hasNestedSiblings={\n                    listItem.hasNestedSiblings || listItem.level === 0\n                }\n            >\n                {listItem.checked && <SelectedIndicator aria-hidden />}\n            </SelectionIndicator>\n        );\n    };\n\n    const renderItem = (\n        listItem: NestedDropdownListLocalItem<T>,\n        vIndex: number\n    ) => {\n        const {\n            level,\n            visible,\n            expanded,\n            keyPath,\n            checked,\n            hasSubItems,\n            indexInParent,\n            parentSetSize,\n        } = listItem;\n        const itemIndex = listItem.index;\n        const active = virtuosoIndex === vIndex;\n        const toggleable = hasSubItems && !selectableCategory;\n\n        return (\n            <ListItemContainer\n                key={`[${keyPath.join(\"---\")}]`}\n                $visible={visible}\n            >\n                {maxLevel > 0 && <Indent $level={level} />}\n                {maxLevel > 0 && !hasSubItems && multiSelect && (\n                    <UnexpandableIndicator />\n                )}\n                <ListItem\n                    aria-checked={checked} // not working with safari voiceover\n                    aria-selected={!!checked} // required for safari voiceover\n                    aria-expanded={hasSubItems ? expanded : undefined}\n                    aria-level={level + 1}\n                    aria-posinset={indexInParent + 1}\n                    aria-setsize={parentSetSize}\n                    data-testid=\"list-item\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        if (toggleable) {\n                            toggleCategory(itemIndex, !expanded, vIndex);\n                        } else {\n                            handleListItemClick(itemIndex, vIndex);\n                        }\n                    }}\n                    onMouseEnter={() => handleListItemHover(vIndex, listItem)}\n                    ref={(node) =>\n                        (listItemRefs.current[listItem.index] = node)\n                    }\n                    role=\"treeitem\"\n                    tabIndex={active ? 0 : -1}\n                    $active={active}\n                    $toggleable={toggleable}\n                >\n                    {hasSubItems && (\n                        // not an actual button, only required for visual display\n                        <ExpandButton\n                            data-testid=\"toggle-category-button\"\n                            onClick={(e) => {\n                                e.stopPropagation();\n                                toggleCategory(itemIndex, !expanded, vIndex);\n                            }}\n                            $expanded={expanded}\n                        >\n                            <CaretRightIcon />\n                        </ExpandButton>\n                    )}\n                    {renderSelectionIcon(listItem)}\n                    <DropdownLabel\n                        bold={hasSubItems}\n                        searchTerm={searchActive ? searchTerm : undefined}\n                        label={listItem.item.label}\n                        selected={!!checked}\n                        truncationType={itemTruncationType}\n                        maxLines={itemMaxLines}\n                    />\n                </ListItem>\n            </ListItemContainer>\n        );\n    };\n\n    const renderVirtualisedList = () => {\n        const isTestEnv = process.env.NODE_ENV === \"test\";\n\n        return (\n            <div\n                aria-multiselectable={multiSelect}\n                id={listboxId}\n                ref={listRef}\n                role=\"tree\"\n            >\n                <Virtuoso\n                    style={{ height: \"100%\" }}\n                    customScrollParent={nodeRef.current ?? undefined}\n                    data={visibleItems}\n                    itemContent={(vIndex, item) => renderItem(item, vIndex)}\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 ? visibleItems.length : undefined}\n                    // omit the `initialItemCount` prop to resolve NaN error\n                    {...(isTestEnv\n                        ? {\n                              initialItemCount: visibleItems.length,\n                          }\n                        : {})}\n                />\n            </div>\n        );\n    };\n\n    const renderList = () => {\n        return (\n            <List data-testid=\"nested-dropdown-list\">\n                {renderSearchInput()}\n                {renderSelectAll()}\n                {renderNoResults()}\n                {renderLoading()}\n                {renderTryAgain()}\n                {renderVirtualisedList()}\n            </List>\n        );\n    };\n\n    return (\n        <Container\n            data-testid=\"dropdown-container\"\n            ref={mergeRefs(nodeRef, setFloatingRef)}\n            style={styles}\n            {...getFloatingProps()}\n            $width={matchElementWidth ? elementWidth : undefined}\n            $variant={variant}\n            $customWidth={width}\n        >\n            {renderList()}\n        </Container>\n    );\n};\n"],"names":["NestedDropdownList","listItems","multiSelect","selectedKeyPaths","itemsLoadState","itemTruncationType","itemMaxLines","variant","listboxId","matchElementWidth","width","mode","selectableCategory","_selectableCategory","onSelectItem","onSelectAll","onRetry","enableSearch","hideNoResultsDisplay","noResultsDescription","_noResultsDescription","customLabels","searchPlaceholder","_searchPlaceholder","onSearch","noResultsLabel","selectAllButtonLabel","clearAllButtonLabel","elementWidth","setFloatingRef","getFloatingProps","styles","useDropdownRender","searchValue","setSearchValue","useState","searchTerm","toLowerCase","trim","searchActive","setSearchActive","nodeRef","useRef","listRef","listItemRefs","searchInputRef","mounted","useIsMounted","unfilteredListItems","setUnfilteredListItems","filteredListItems","setFilteredListItems","activeList","maxLevel","useMemo","currentMaxLevel","item","level","focusedIndex","setFocusedIndex","visibleItems","setVisibleItems","virtuosoIndex","setVirtuosoIndex","handleSearchInputChange","event","value","target","length","handleOnClear","_a","current","focus","handleTryAgain","handleOnSelectAll","size","keyPaths","items","forEach","hasSubItems","push","keyPath","flatten","useEvent","nestedList","initialExpanded","flattenList","flattenDefaultMode","expandSelectedSubtrees","expandFirstSubtree","filter","filterMatchedItems","list","matchedItems","label","indexOf","subItems","matchedSubItems","Object","assign","updateSelectedItemsInList","updateSelectedState","toggleCategory","index","nextExpanded","toggleSubtree","useEventListener","code","preventDefault","upcomingItem","findItemFromStart","visible","vIndex","findItemFromEnd","_b","document","activeElement","useEffect","expandMatchedSubtrees","setTimeout","renderSearchInput","_jsx","DropdownSearch","ref","onChange","placeholder","onClear","renderSelectAll","SelectAllContainer","children","SelectAllButton","onClick","type","$variant","renderNoResults","_jsxs","_Fragment","ResultStateContainer","LabelIcon","NoResultDescContainer","renderLoading","Spinner","$hasChildren","renderTryAgain","TryAgainButton","renderSelectionIcon","listItem","checked","CheckboxMixedIndicator","CheckboxSelectedIndicator","CheckboxUnselectedIndicator","SelectionIndicator","$hasNestedSiblings","hasNestedSiblings","SelectedIndicator","renderItem","expanded","indexInParent","parentSetSize","itemIndex","active","toggleable","ListItemContainer","$visible","Indent","UnexpandableIndicator","ListItem","undefined","e","stopPropagation","handleListItemClick","onMouseEnter","handleListItemHover","node","role","tabIndex","$active","$toggleable","ExpandButton","$expanded","CaretRightIcon","DropdownLabel","bold","selected","truncationType","maxLines","join","renderVirtualisedList","isTestEnv","process","env","NODE_ENV","id","Virtuoso","style","height","customScrollParent","data","itemContent","initialItemCount","Container","mergeRefs","$width","List"],"mappings":"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"}

package/shared/dropdown-list-v2/nested-dropdown-list.styles.d.ts

@@ -1,27 +0,0 @@
-interface ListItemStyleProps {
-    $active?: boolean;
-    $visible?: boolean;
-    $toggleable?: boolean;
-}
-interface IndentStyleProps {
-    $level?: number;
-}
-interface IndicatorStyleProps {
-    $hasNestedSiblings?: boolean;
-}
-interface ExpandButtonStyleProps {
-    $expanded?: boolean;
-}
-export declare const ListItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ListItemStyleProps>> & string;
-export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ListItemStyleProps>> & string;
-export declare const Indent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IndentStyleProps>> & string;
-export declare const ExpandButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ExpandButtonStyleProps>> & string;
-export declare const UnexpandableIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SelectionIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IndicatorStyleProps>> & string;
-export declare const CheckboxMixedIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export {};