@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

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

@@ -1,123 +1,2 @@
-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{Border as l,Colour as s,Radius as d,MediaQuery as c,Breakpoint as h,Font as p,Spacing as g}from"../../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.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}
-`,w=a(o)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1rem;
-    color: ${s["icon-selected"]};
-`,v=a.div`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1rem;
-`,k=a(t)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${s["icon-selected"]};
-`,y=a(r)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${s["icon-primary-subtlest"]};
-`,j=a(e)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${s["icon-disabled-subtle"]};
-`,W=a.div`
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-`,q=a(b)`
-    cursor: pointer;
-    overflow: hidden;
-    color: ${s["text-primary"]};
-    font-size: inherit;
-`,M=a(q)`
-    ${p["body-baseline-semibold"]}
-`,z=a(q)`
-    ${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;
-    color: ${s.text};
-`,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{j as CheckboxDisabledIndicator,k as CheckboxSelectedIndicator,y as CheckboxUnselectedIndicator,x as Container,q as DropdownCommonButton,B as LabelIcon,f as List,u as ListItem,D as NoResultDescContainer,A as ResultStateContainer,z as SelectAllButton,W as SelectAllContainer,w as SelectedIndicator,C as Spinner,M as TryAgainButton,v as UnselectedIndicator};
+import"./dropdown-list.styles_konwm.css";const s={containerWidth:"--fds-internal-dropdownList-containerWidth"},o="c1wprmqt",r="cv4jfw8",i="llrkh2h",l="lsgm7b1",t="l1sloxru",n="lp7vqom",c="l1li8r4s",d="b3myji2",h="s1bv8amb",m="bswyxh7",e="c1kods4c",p="c2iuhda",w="cxvb3yc",a="s1gfnl3t",b="b51546q",y="s5v4wu0",v="t14h29ix",x="rlpycri",_="l9eregy",f="smon6ho",g="n1mo99ai";export{b as baseButton,m as baseCheckboxIndicatorStyle,d as baseIndicatorStyle,w as checkboxDisabledIndicator,e as checkboxSelectedIndicator,p as checkboxUnselectedIndicator,o as container,r as containerVariantSmall,_ as labelIcon,i as list,l as listItem,t as listItemActive,n as listItemActiveSelected,c as listItemDisabled,g as noResultDescContainer,x as resultStateContainer,y as selectAllButton,a as selectAllContainer,h as selectedIndicator,f as spinner,s as tokens,v as tryAgainButton};
 //# sourceMappingURL=dropdown-list.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list.styles.js","sources":["../../../src/shared/dropdown-list/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\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../../theme\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { applyHtmlContentStyle } from \"../html-content/html-content\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport { DropdownVariantType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ContainerStyleProps {\n    $width?: number;\n    $customWidth?: string;\n    $variant: DropdownVariantType;\n}\n\nexport interface 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: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    --x-spacing: 0px;\n    --available-width: calc(100vw - var(--x-spacing) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        --x-spacing: ${Breakpoint[\"sm-margin\"]}px;\n        max-height: 15rem;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        --x-spacing: ${Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        --x-spacing: ${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            ? Font[\"body-md-regular\"]\n            : 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: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\nexport const List = styled.div`\n    background: transparent;\n    padding: ${Spacing[\"spacing-8\"]};\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: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${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: ${Colour[\"bg-hover\"]};\n            `;\n        } else if (props.$active) {\n            return css`\n                background: ${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: ${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: ${Colour[\"icon-selected\"]};\n`;\n\nexport const CheckboxUnselectedIndicator = styled(SquareIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const CheckboxDisabledIndicator = styled(SquareFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${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: ${Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const TryAgainButton = styled(DropdownCommonButton)`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const SelectAllButton = styled(DropdownCommonButton)`\n    ${Font[\"body-md-semibold\"]}\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ResultStateContainer = styled.div`\n    width: 100%;\n    display: flex;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const LabelIcon = styled(ExclamationCircleFillIcon)`\n    margin-right: ${Spacing[\"spacing-4\"]};\n    color: ${Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\nexport const NoResultDescContainer = styled.div`\n    ${applyHtmlContentStyle()}\n    color: ${Colour[\"text-subtle\"]};\n    padding: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-12\"]}\n        ${Spacing[\"spacing-16\"]};\n`;\n"],"names":["Container","styled","div","Border","Colour","Radius","MediaQuery","MaxWidth","sm","Breakpoint","xs","xxs","props","$customWidth","$width","$variant","Font","List","Spacing","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":"muBA0CO,MAAMA,EAAYC,EAAOC,GAAwB;cAC1CC,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;qBAClDC,EAAW;kBACdD,EAAW;;;;;MAKvBE,EAAWC,SAASC;uBACHC,EAAW;;;;MAI5BH,EAAWC,SAASG;uBACHD,EAAW;;;MAG5BH,EAAWC,SAASI;uBACHF,EAAW;;;;;MAK3BG,GACKA,EAAMC,aAAqB,UAAUD,EAAMC,gBAC3CD,EAAME,OACC,UAAUF,EAAME,2DAEpB;;;;;MAMRF,GACoB,UAAnBA,EAAMG,SACAC,EAAK,mBACLA,EAAK;;;;;;;;;;;sBAWGZ,EAAO;;yBAEJC,EAAa;;;EAIzBY,EAAOhB,EAAOC,GAAG;;eAEfgB,EAAQ;EAOVC,EAAWlB,EAAOmB,EAAsB;;;WAG1CF,EAAQ;eACJA,EAAQ,iBAAiBA,EAAQ;;;qBAG3Bb,EAAa;;;MAG3BO,GACKA,EAAMS,UACCC,CAAG;;cAGHV,EAAMW,SAAWX,EAAMY,UACvBF,CAAG;8BACQlB,EAAO;cAElBQ,EAAMW,QACND,CAAG;8BACQlB,EAAO;mBAFtB;EAQFqB,EAAoBxB,EAAOyB,EAAS;;;;aAIpCtB,EAAO;EAGPuB,EAAsB1B,EAAOC,GAAG;;;;EAMhC0B,EAA4B3B,EAAO4B,EAAmB;;;;aAItDzB,EAAO;EAGP0B,EAA8B7B,EAAO8B,EAAW;;;;aAIhD3B,EAAO;EAGP4B,EAA4B/B,EAAOgC,EAAe;;;;aAIlD7B,EAAO;EAOP8B,EAAqBjC,EAAOC,GAAG;;;;EAM/BiC,EAAuBlC,EAAOmC,EAAY;;;aAG1ChC,EAAO;;EAIPiC,EAAiBpC,EAAOkC,EAAqB;MACpDnB,EAAK;EAGEsB,EAAkBrC,EAAOkC,EAAqB;MACrDnB,EAAK;eACIE,EAAQ,gBAAgBA,EAAQ;EAGlCqB,EAAuBtC,EAAOC,GAAG;;;eAG/BgB,EAAQ,iBAAiBA,EAAQ;;aAEnCd,EAAa;EAGboC,EAAYvC,EAAOwC,EAA0B;oBACtCvB,EAAQ;aACfd,EAAO;;;EAKPsC,EAAUzC,EAAO0C,EAAwB;oBAClCzB,EAAQ;aACfd,EAAa;EAGbwC,EAAwB3C,EAAOC,GAAG;MACzC2C;aACOzC,EAAO;iBACHc,EAAQ,iBAAiBA,EAAQ;UACxCA,EAAQ;"}
+{"version":3,"file":"dropdown-list.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../../theme\";\nimport * as elementWithDropdownStyles from \"../dropdown-wrapper/element-with-dropdown.styles\";\n\nexport type ContainerWidthType = \"default\" | \"custom\" | \"match\";\n\nexport const tokens = {\n    availableWidth: \"--fds-internal-dropdownList-container-availableWidth\",\n    containerWidth: \"--fds-internal-dropdownList-containerWidth\",\n    xSpacing: \"--fds-internal-dropdownList-container-xSpacing\",\n} as const;\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const container = css`\n    ${Font[\"body-baseline-regular\"]}\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    ${tokens.xSpacing}: 0px;\n    ${tokens.availableWidth}: calc(\n        100vw - var(${tokens.xSpacing}) * 2\n    );\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n        max-height: 15rem;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n    }\n\n    &[data-width-type=\"default\"] {\n        min-width: min(23rem, var(${tokens.availableWidth}));\n    }\n\n    &[data-width-type=\"custom\"] {\n        width: var(${tokens.containerWidth});\n    }\n\n    &[data-width-type=\"match\"] {\n        width: var(${tokens.containerWidth});\n        min-width: min(23rem, var(${tokens.availableWidth}));\n    }\n\n    max-height: min(\n        27rem,\n        var(${elementWithDropdownStyles.tokens.availableHeight}, 9999px)\n    );\n    overflow: hidden;\n    overflow-y: auto;\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const containerVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const list = css`\n    background: transparent;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\nexport const listItem = css`\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n`;\n\nexport const listItemActive = css`\n    background: ${Colour[\"bg-hover-subtle\"]};\n`;\n\nexport const listItemActiveSelected = css`\n    background: ${Colour[\"bg-hover\"]};\n`;\n\nexport const listItemDisabled = css`\n    cursor: not-allowed;\n`;\n\nexport const baseIndicatorStyle = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n`;\n\nexport const selectedIndicator = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const baseCheckboxIndicatorStyle = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n`;\n\nexport const checkboxSelectedIndicator = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const checkboxUnselectedIndicator = css`\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const checkboxDisabledIndicator = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\nexport const selectAllContainer = css`\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n`;\n\nexport const baseButton = css`\n    cursor: pointer;\n    overflow: hidden;\n    color: ${Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const selectAllButton = css`\n    ${Font[\"body-md-semibold\"]}\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const tryAgainButton = css`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const resultStateContainer = css`\n    width: 100%;\n    display: flex;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const labelIcon = css`\n    margin-right: ${Spacing[\"spacing-4\"]};\n    color: ${Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const spinner = css`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\nexport const noResultDescContainer = css`\n    color: ${Colour[\"text-subtle\"]};\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    padding-bottom: ${Spacing[\"spacing-12\"]};\n`;\n"],"names":["tokens","containerWidth","container","containerVariantSmall","list","listItem","listItemActive","listItemActiveSelected","listItemDisabled","baseIndicatorStyle","selectedIndicator","baseCheckboxIndicatorStyle","checkboxSelectedIndicator","checkboxUnselectedIndicator","checkboxDisabledIndicator","selectAllContainer","baseButton","selectAllButton","tryAgainButton","resultStateContainer","labelIcon","spinner","noResultDescContainer"],"mappings":"6EAeO,MAAMA,EAAS,CAElBC,eAAgB,8CAOPC,EAAS,WA4DTC,EAAqB,UAIrBC,EAAI,UAQJC,EAAQ,UAWRC,EAAc,WAIdC,EAAsB,UAItBC,EAAgB,WAIhBC,EAAkB,UAMlBC,EAAiB,WAIjBC,EAA0B,UAM1BC,EAAyB,WAIzBC,EAA2B,UAI3BC,EAAyB,UAOzBC,EAAkB,WAMlBC,EAAU,UAOVC,EAAe,UAKfC,EAAc,WAIdC,EAAoB,UAQpBC,EAAS,UAOTC,EAAO,UAKPC,EAAqB"}

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

@@ -0,0 +1,26 @@
+@layer fds{.c1wprmqt{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);--fds-internal-dropdownList-container-xSpacing:0px;--fds-internal-dropdownList-container-availableWidth:calc(
+        100vw - var(--fds-internal-dropdownList-container-xSpacing) * 2
+    );max-height:min(
+        27rem,
+        var(--fds-internal-dropdownWrapper-availableHeight, 9999px)
+    );overflow:hidden;overflow-y:auto;}:where(body.fds-breakpoint-sm-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-sm);max-height:15rem;}:where(body.fds-breakpoint-xs-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .c1wprmqt{--fds-internal-dropdownList-container-xSpacing:var(--fds-breakpoint-margin-xxs);}.c1wprmqt[data-width-type="default"]{min-width:min(23rem, var(--fds-internal-dropdownList-container-availableWidth));}.c1wprmqt[data-width-type="custom"]{width:var(--fds-internal-dropdownList-containerWidth);}.c1wprmqt[data-width-type="match"]{width:var(--fds-internal-dropdownList-containerWidth);min-width:min(23rem, var(--fds-internal-dropdownList-container-availableWidth));}.c1wprmqt::-webkit-scrollbar{width:14px;}.c1wprmqt::-webkit-scrollbar-track{background:transparent;}.c1wprmqt::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
+.cv4jfw8{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);}
+.llrkh2h{background:transparent;padding:var(--fds-spacing-8);}
+.lsgm7b1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--fds-spacing-8);padding:var(--fds-spacing-12) var(--fds-spacing-8);cursor:pointer;border:none;border-radius:var(--fds-radius-none);outline:none;}
+.l1sloxru{background:var(--fds-colour-bg-hover-subtle);}
+.lp7vqom{background:var(--fds-colour-bg-hover);}
+.l1li8r4s{cursor:not-allowed;}
+.b3myji2{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1rem;}
+.s1bv8amb{color:var(--fds-colour-icon-selected);}
+.bswyxh7{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1lh;}
+.c1kods4c{color:var(--fds-colour-icon-selected);}
+.c2iuhda{color:var(--fds-colour-icon-primary-subtlest);}
+.cxvb3yc{color:var(--fds-colour-icon-disabled-subtle);}
+.s1gfnl3t{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}
+.b51546q{cursor:pointer;overflow:hidden;color:var(--fds-colour-text-primary);font-size:inherit;}
+.s5v4wu0{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);padding:var(--fds-spacing-8);}
+.t14h29ix{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-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.rlpycri{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--fds-spacing-12) var(--fds-spacing-16);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fds-colour-text);}
+.l9eregy{margin-right:var(--fds-spacing-4);color:var(--fds-colour-icon-error);height:1em;width:1em;}
+.smon6ho{margin-right:var(--fds-spacing-8);color:var(--fds-colour-icon);}
+.n1mo99ai{color:var(--fds-colour-text-subtle);padding:0 var(--fds-spacing-16);padding-bottom:var(--fds-spacing-12);}}

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { DropdownVariantType } from "./types";
+import type React from "react";
+import type { DropdownVariantType } from "./types";
 interface Props extends React.HTMLAttributes<HTMLInputElement> {
     value: string /** override to cast type */;
     variant?: DropdownVariantType | undefined;

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

@@ -1,2 +1,2 @@
-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};
+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{MagnifierIcon as l}from"@lifesg/react-icons/magnifier";import s from"clsx";import{forwardRef as o}from"react";import{ClickableIcon as c}from"../clickable-icon/clickable-icon.js";import{BasicInput as m}from"../input-wrapper/input-wrapper.js";import{searchIcon as t,searchInput as n,searchBox as p,searchBoxVariantSmall as f,clearButton as d,container as u,containerVariantSmall as v}from"./dropdown-search.styles.js";const b=o(((o,b)=>{var{value:h,variant:j,onClear:N}=o,g=r(o,["value","variant","onClear"]);return a("div",{className:s(u,"small"===j&&v),children:[a("label",{className:s(p,"small"===j&&f),children:[e(l,{"aria-hidden":!0,className:t}),e(m,Object.assign({ref:b,value:h,variant:j,className:n},g))]}),h&&e(c,{"aria-label":"Clear search",focusOutline:"browser",onClick:N,className:d,children:e(i,{"aria-hidden":!0})})]})}));export{b as DropdownSearch};
 //# sourceMappingURL=dropdown-search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-search.js","sources":["../../../src/shared/dropdown-list/dropdown-search.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport React, { forwardRef } from \"react\";\nimport { DropdownVariantType } from \"./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":"sTAiBA,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"}
+{"version":3,"file":"dropdown-search.js","sources":["../../../src/shared/dropdown-list/dropdown-search.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { MagnifierIcon } from \"@lifesg/react-icons/magnifier\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ClickableIcon } from \"../clickable-icon\";\nimport { BasicInput } from \"../input-wrapper\";\nimport * as styles from \"./dropdown-search.styles\";\nimport type { DropdownVariantType } from \"./types\";\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        <div\n            className={clsx(\n                styles.container,\n                variant === \"small\" && styles.containerVariantSmall\n            )}\n        >\n            <label\n                className={clsx(\n                    styles.searchBox,\n                    variant === \"small\" && styles.searchBoxVariantSmall\n                )}\n            >\n                <MagnifierIcon aria-hidden className={styles.searchIcon} />\n                <BasicInput\n                    ref={ref}\n                    value={value}\n                    variant={variant}\n                    className={styles.searchInput}\n                    {...otherProps}\n                />\n            </label>\n            {value && (\n                <ClickableIcon\n                    aria-label=\"Clear search\"\n                    focusOutline=\"browser\"\n                    onClick={onClear}\n                    className={styles.clearButton}\n                >\n                    <CrossIcon aria-hidden />\n                </ClickableIcon>\n            )}\n        </div>\n    );\n};\n\nexport const DropdownSearch = forwardRef(Component);\n"],"names":["DropdownSearch","forwardRef","_a","ref","value","variant","onClear","otherProps","__rest","_jsxs","className","clsx","styles.container","styles.containerVariantSmall","children","styles.searchBox","styles.searchBoxVariantSmall","_jsx","MagnifierIcon","styles.searchIcon","BasicInput","Object","assign","styles.searchInput","ClickableIcon","focusOutline","onClick","styles.clearButton","CrossIcon"],"mappings":"ikBAiBA,MAwCaA,EAAiBC,GAxCZ,CACdC,EACAC,SADAC,MAAEA,EAAKC,QAAEA,EAAOC,QAAEA,KAAYC,EAAUC,EAAAN,EAAxC,CAAA,QAAA,UAAA,YAGA,OACIO,SACIC,UAAWC,EACPC,EACY,UAAZP,GAAuBQ,GAC1BC,SAAA,CAEDL,EAAA,QAAA,CACIC,UAAWC,EACPI,EACY,UAAZV,GAAuBW,GAC1BF,SAAA,CAEDG,EAACC,EAAa,CAAA,eAAA,EAAaR,UAAWS,IACtCF,EAACG,EAAUC,OAAAC,OAAA,CACPnB,IAAKA,EACLC,MAAOA,EACPC,QAASA,EACTK,UAAWa,GACPhB,OAGXH,GACGa,EAACO,EAAa,CAAA,aACC,eACXC,aAAa,UACbC,QAASpB,EACTI,UAAWiB,EAAkBb,SAE7BG,EAACW,0BAGP"}

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

@@ -1,27 +1,7 @@
-import { DropdownVariantType } from "./types";
-import { 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").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & StyleProps, never>>> & string;
-export declare const SearchBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$variant"> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$variant"> & StyleProps, never>>> & string;
-export declare const SearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & InputStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "$variant"> & InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & InputStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "$variant"> & InputStyleProps, never>>> & 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> & Partial<Pick<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> & Partial<Pick<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>>;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerVariantSmall: import("@linaria/core").LinariaClassName;
+export declare const searchBox: import("@linaria/core").LinariaClassName;
+export declare const searchBoxVariantSmall: import("@linaria/core").LinariaClassName;
+export declare const searchInput: import("@linaria/core").LinariaClassName;
+export declare const searchIcon: import("@linaria/core").LinariaClassName;
+export declare const clearButton: import("@linaria/core").LinariaClassName;

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

@@ -1,39 +1,2 @@
-import{MagnifierIcon as i}from"@lifesg/react-icons/magnifier";import e,{css as r}from"styled-components";import{Colour as n,Radius as o,Font as a,Spacing as s}from"../../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};
+import"./dropdown-search.styles_1hc1gkh.css";const s="cimxtn",c="c5t5jsb",t="s9xptf8",o="s15dwc6n",d="slme00w",r="s18shux7",e="c1ml832z";export{e as clearButton,s as container,c as containerVariantSmall,t as searchBox,o as searchBoxVariantSmall,r as searchIcon,d as searchInput};
 //# sourceMappingURL=dropdown-search.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-search.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-search.styles.tsx"],"sourcesContent":["import { MagnifierIcon } from \"@lifesg/react-icons/magnifier\";\nimport styled, { css } from \"styled-components\";\nimport { Colour, Font, Radius, Spacing } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport { DropdownVariantType } from \"./types\";\nimport { BasicInput, InputStyleProps } 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: ${Colour[\"bg-strong\"]};\n    border-radius: ${Radius[\"sm\"]};\n    display: flex;\n    align-items: center;\n\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : Font[\"body-baseline-regular\"]}\n`;\n\nexport const SearchBox = styled.label<StyleProps>`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${(props) =>\n        props.$variant === \"small\"\n            ? css`\n                  ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]}\n              `\n            : // TODO: confirm vertical spacing\n              css`10px ${Spacing[\"spacing-8\"]}`};\n`;\n\nexport const SearchInput = styled(BasicInput)<InputStyleProps>`\n    flex: 1;\n`;\n\nexport const SearchIcon = styled(MagnifierIcon)`\n    color: ${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: ${Spacing[\"spacing-8\"]};\n    margin-left: -${Spacing[\"spacing-8\"]};\n    color: ${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","Colour","Radius","props","$variant","Font","SearchBox","label","Spacing","css","SearchInput","BasicInput","SearchIcon","MagnifierIcon","ClearButton","ClickableIcon"],"mappings":"6TAiBO,MAAMA,EAAYC,EAAOC,GAAe;kBAC7BC,EAAO;qBACJC,EAAW;;;;MAIzBC,GACoB,UAAnBA,EAAMC,SACAC,EAAK,mBACLA,EAAK;EAGNC,EAAYP,EAAOQ,KAAiB;;;;WAItCC,EAAQ;eACHL,GACW,UAAnBA,EAAMC,SACAK,CAAG;oBACGD,EAAQ,gBAAgBA,EAAQ;gBAGtCC,CAAG,QAAQD,EAAQ;EAGpBE,EAAcX,EAAOY,EAA4B;;EAIjDC,EAAab,EAAOc,EAAc;aAClCZ,EAAa;;;;EAMba,EAAcf,EAAOgB,EAAc;;;;eAIjCP,EAAQ;oBACHA,EAAQ;aACfP,EAAa;;;;;;;;;"}
+{"version":3,"file":"dropdown-search.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-search.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const container = css`\n    background: ${Colour[\"bg-strong\"]};\n    border-radius: ${Radius[\"sm\"]};\n    display: flex;\n    align-items: center;\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const containerVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const searchBox = css`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: 10px ${Spacing[\"spacing-8\"]};\n`;\n\nexport const searchBoxVariantSmall = css`\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const searchInput = css`\n    flex: 1;\n`;\n\nexport const searchIcon = css`\n    color: ${Colour[\"icon\"]};\n    flex-shrink: 0;\n    height: 1em;\n    width: 1em;\n`;\n\nexport const clearButton = css`\n    flex-shrink: 0;\n    align-self: stretch;\n    box-sizing: content-box;\n    padding: ${Spacing[\"spacing-8\"]};\n    margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n    color: ${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","containerVariantSmall","searchBox","searchBoxVariantSmall","searchInput","searchIcon","clearButton"],"mappings":"iFAQO,MAAMA,EAAS,SAQTC,EAAqB,UAIrBC,EAAS,UAQTC,EAAqB,WAIrBC,EAAW,UAIXC,EAAU,WAOVC,EAAW"}

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

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

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

@@ -1,7 +1,8 @@
-import { AriaAttributes, Ref } from "react";
-import { DropdownVariantType } from "./types";
+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;
+    className?: string | undefined;
     disabled: boolean | undefined;
     expanded: boolean | undefined;
     listboxId: string;
@@ -9,5 +10,5 @@ export interface ExpandableElementProps extends Pick<AriaAttributes, "aria-label
     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 Component: ({ children, className, 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/expandable-element.js

@@ -1,2 +1,2 @@
-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};
+import{__rest as a}from"../../_virtual/_tslib.js";import{jsxs as r,jsx as e}from"react/jsx-runtime";import{ChevronDownIcon as i}from"@lifesg/react-icons/chevron-down";import o from"clsx";import{forwardRef as t}from"react";import{BasicButton as s}from"../input-wrapper/input-wrapper.js";import{selector as l,selectorVariantSmall as d,selectorEditable as p,iconContainer as n,iconContainerExpanded as m}from"./expandable-element.styles.js";const c=(t,c)=>{var{children:b,className:x,disabled:f,expanded:u,listboxId:h,popupRole:v,readOnly:j,variant:y}=t,N=a(t,["children","className","disabled","expanded","listboxId","popupRole","readOnly","variant"]);return r(s,Object.assign({ref:c,type:"button",role:"combobox","aria-expanded":u,"aria-haspopup":v,"aria-controls":u?h:void 0,"data-testid":"selector","aria-disabled":f,"aria-readonly":j,className:o(l,"small"===y&&d,!j&&p,x)},N,{children:[b,!j&&e("div",{className:o(n,u&&m),children:e(i,{"aria-hidden":!0})})]}))},b=t(c);export{c as Component,b as ExpandableElement};
 //# sourceMappingURL=expandable-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"expandable-element.js","sources":["../../../src/shared/dropdown-list/expandable-element.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { AriaAttributes, Ref, forwardRef } from \"react\";\nimport { IconContainer, Selector } from \"./expandable-element.styles\";\nimport { 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":"6RAmBaA,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"}
+{"version":3,"file":"expandable-element.js","sources":["../../../src/shared/dropdown-list/expandable-element.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport clsx from \"clsx\";\nimport type { AriaAttributes, Ref } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { BasicButton } from \"../input-wrapper\";\nimport * as styles 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    className?: string | undefined;\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        className,\n        disabled,\n        expanded,\n        listboxId,\n        popupRole,\n        readOnly,\n        variant,\n        ...otherProps\n    }: ExpandableElementProps,\n    ref: Ref<HTMLButtonElement>\n) => {\n    return (\n        <BasicButton\n            ref={ref}\n            type=\"button\"\n            role=\"combobox\"\n            aria-expanded={expanded}\n            aria-haspopup={popupRole}\n            aria-controls={expanded ? listboxId : undefined}\n            data-testid=\"selector\"\n            aria-disabled={disabled}\n            aria-readonly={readOnly}\n            className={clsx(\n                styles.selector,\n                variant === \"small\" && styles.selectorVariantSmall,\n                !readOnly && styles.selectorEditable,\n                className\n            )}\n            {...otherProps}\n        >\n            {children}\n            {!readOnly && (\n                <div\n                    className={clsx(\n                        styles.iconContainer,\n                        expanded && styles.iconContainerExpanded\n                    )}\n                >\n                    <ChevronDownIcon aria-hidden />\n                </div>\n            )}\n        </BasicButton>\n    );\n};\n\nexport const ExpandableElement = forwardRef(Component);\n"],"names":["Component","_a","ref","children","className","disabled","expanded","listboxId","popupRole","readOnly","variant","otherProps","__rest","_jsxs","BasicButton","Object","assign","type","role","undefined","clsx","styles.selector","styles.selectorVariantSmall","styles.selectorEditable","_jsx","styles.iconContainer","styles.iconContainerExpanded","ChevronDownIcon","ExpandableElement","forwardRef"],"mappings":"4bAwBaA,EAAY,CACrBC,EAWAC,SAXAC,SACIA,EAAQC,UACRA,EAASC,SACTA,EAAQC,SACRA,EAAQC,UACRA,EAASC,UACTA,EAASC,SACTA,EAAQC,QACRA,GAAOT,EACJU,EAAUC,EAAAX,EATjB,6FAaA,OACIY,EAACC,EAAWC,OAAAC,OAAA,CACRd,IAAKA,EACLe,KAAK,SACLC,KAAK,WAAU,gBACAZ,EAAQ,gBACRE,kBACAF,EAAWC,OAAYY,EAAS,cACnC,2BACGd,EAAQ,gBACRI,EACfL,UAAWgB,EACPC,EACY,UAAZX,GAAuBY,GACtBb,GAAYc,EACbnB,IAEAO,EAAU,CAAAR,SAAA,CAEbA,GACCM,GACEe,SACIpB,UAAWgB,EACPK,EACAnB,GAAYoB,YAGhBF,EAACG,2BAGC,EAITC,EAAoBC,EAAW7B"}

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

@@ -1,19 +1,5 @@
-import { 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").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../input-wrapper").InputStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../input-wrapper").InputStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export {};
+export declare const selector: import("@linaria/core").LinariaClassName;
+export declare const selectorVariantSmall: import("@linaria/core").LinariaClassName;
+export declare const selectorEditable: import("@linaria/core").LinariaClassName;
+export declare const iconContainer: import("@linaria/core").LinariaClassName;
+export declare const iconContainerExpanded: import("@linaria/core").LinariaClassName;

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

@@ -1,36 +1,2 @@
-import e,{css as i}from"styled-components";import{Spacing as t,Colour as r,Font as o,Motion as a}from"../../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};
+import"./expandable-element.styles_rkkvqr.css";const s="s14ftgne",e="s14xk9xz",r="s2pr33o",t="i11rk48k",o="i1r624au";export{t as iconContainer,o as iconContainerExpanded,s as selector,r as selectorEditable,e as selectorVariantSmall};
 //# sourceMappingURL=expandable-element.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"expandable-element.styles.js","sources":["../../../src/shared/dropdown-list/expandable-element.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour, Font, Motion, Spacing } from \"../../theme\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport { 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: ${Spacing[\"spacing-8\"]};\n    width: 100%;\n    padding: ${(props) =>\n        props.$readOnly ? `0 ${Spacing[\"spacing-16\"]}` : Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$variant === \"small\"\n            ? css`\n                  ${Font[\"body-md-regular\"]}\n                  height: calc(2.5rem - 2px); // exclude top and bottom borders\n              `\n            : css`\n                  ${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 ${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 ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        color: ${Colour[\"icon\"]};\n        height: 1em;\n        width: 1em;\n    }\n`;\n"],"names":["Selector","styled","BasicButton","Spacing","props","$readOnly","$variant","css","Font","Colour","IconContainer","div","$expanded","Motion"],"mappings":"kMAiBaA,EAAWC,EAAOC,EAAwB;;;WAG5CC,EAAQ;;eAEHC,GACRA,EAAMC,UAAY,KAAKF,EAAQ,gBAAkBA,EAAQ;;MAE1DC,GACoB,UAAnBA,EAAME,SACAC,CAAG;oBACGC,EAAK;;gBAGXD,CAAG;oBACGC,EAAK;;;;;;;;;6BASIC,EAAO;;;EAKvBC,EAAgBT,EAAOU,GAAe;;;wBAG1BP,GAAWA,EAAMQ,UAAY,IAAM;4BAChCC,EAAO,mBAAmBA,EAAO;;;iBAG5CJ,EAAa;;;;"}
+{"version":3,"file":"expandable-element.styles.js","sources":["../../../src/shared/dropdown-list/expandable-element.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const selector = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    width: 100%;\n\n    ${Font[\"body-baseline-regular\"]}\n    height: calc(3rem - 2px);\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const selectorVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n    height: calc(2.5rem - 2px);\n`;\n\nexport const selectorEditable = css`\n    padding: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    align-items: center;\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        color: ${Colour[\"icon\"]};\n        height: 1em;\n        width: 1em;\n    }\n`;\n\nexport const iconContainerExpanded = css`\n    transform: rotate(180deg);\n`;\n"],"names":["selector","selectorVariantSmall","selectorEditable","iconContainer","iconContainerExpanded"],"mappings":"mFAQO,MAAMA,EAAQ,WAmBRC,EAAoB,WAKpBC,EAAgB,UAIhBC,EAAa,WAYbC,EAAqB"}

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

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

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

@@ -1,4 +1,4 @@
-import { NestedDropdownListItemProps, NestedDropdownListLocalItem } from "./types";
+import type { NestedDropdownListItemProps, NestedDropdownListLocalItem } from "./types";
 /**
  * builds a flattened representation of the tree
  * the items are listed in their visual order

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

@@ -1 +1 @@
-{"version":3,"file":"nested-dropdown-list-helpers.js","sources":["../../../src/shared/dropdown-list/nested-dropdown-list-helpers.ts"],"sourcesContent":["import { produce } from \"immer\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\nimport {\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":"gIAYO,MAAMA,EAAc,CACvBC,EACAC,EACAC,EACAC,EACAC,KAEA,MAAMC,EAA0C,GAE1CC,EAAU,CACZC,EACAC,KAEA,MAAMC,EAA4C,GAC5CC,EAAoBH,EAAKI,MAC1BC,UAAW,eAAAC,EAAAD,EAAOE,+BAAUC,MAAM,IA6DvC,OA1DAR,EAAKS,SAAQ,CAACJ,EAAQK,aAClB,MAAMC,EAAQV,EAAaA,EAAWU,MAAQ,EAAI,EAC5CC,EAAUX,EACV,IAAIA,EAAWW,QAASP,EAAOQ,KAC/B,CAACR,EAAOQ,KACRC,EAAgBC,EAAaH,GAE7BI,EAA+B,CACjCA,KAAMX,EACNY,MAAOnB,EAAMU,OACbU,cAAeR,EACfS,cAAenB,EAAKQ,OACpBI,UACAQ,YAAanB,EAAaA,EAAWgB,OAAQ,EAC7CI,cAAepB,EAAaA,EAAWW,QAAU,GACjDD,QACAW,QACc,IAAVX,GACAd,IACAI,aAAU,EAAVA,EAAYsB,YACZ,EACJA,SAAU1B,EACV2B,QAAS9B,EAAiB+B,IAAIX,GAC9BY,eAA8B,QAAfpB,EAAAD,EAAOE,gBAAQ,IAAAD,OAAA,EAAAA,EAAEE,QAChCmB,eAAgB,GAChBxB,oBACAyB,UAAShC,IACgD,IAAnDS,EAAOwB,MAAMC,cAAcC,QAAQnC,GAEzCoC,oBAAoB,GAKxB,GAHA9B,EAAQ+B,KAAKjB,GACblB,EAAMmC,KAAKjB,GAEQ,UAAfX,EAAOE,gBAAQ,IAAA2B,OAAA,EAAAA,EAAE1B,OAAQ,CACzB,MAAM2B,EAAWpC,EAAQM,EAAOE,SAAUS,GAE1C,GAAIrB,IAAgC,IAAjBqB,EAAKQ,QAAkB,CACtC,MAAMY,EAAsBD,EAASE,OAChCC,IAA4B,IAAlBA,EAAMd,UAEfe,EAAQJ,EAAS/B,MAClBkC,IAA4B,IAAlBA,EAAMd,UAGjBY,EACApB,EAAKQ,SAAU,EACRe,IACPvB,EAAKQ,QAAU,QAEvB,CAEAR,EAAKgB,mBAAqBG,EAAS/B,MAC9BkC,GAAUA,EAAMV,SAAWU,EAAMN,qBAEtChB,EAAKW,eAAiBQ,EAASK,KAAKF,GAAUA,EAAMrB,OACxD,KAEGf,CAAO,EAIlB,OADAH,EAAQN,OAAYgD,GACb3C,CAAK,EAGH4C,EACT1C,GAEO2C,EAAQ3C,GAAO4C,IAClB,MAAMC,EAAgBD,EAAME,QAAQ9B,IAA0B,IAAjBA,EAAKQ,UAClD,IAAK,MAAMuB,KAAgBF,EAAe,CACtC,IAAIzB,EAAc2B,EAAa3B,YAC/B,KAAOA,GAAe,GAAG,CACrB,MAAM4B,EAASJ,EAAMxB,GACrB4B,EAAO1B,SAAU,EACjB0B,EAAOzB,UAAW,EAElB,IAAK,MAAMb,KAAKsC,EAAOrB,eACnBiB,EAAMlC,GAAGY,SAAU,EAGvBF,EAAc4B,EAAO5B,WACzB,CACJ,KAIK6B,EACTjD,GAEO2C,EAAQ3C,GAAO4C,IAClB,IAAK,MAAM5B,KAAQ4B,EAKf,GAJI5B,EAAKY,UACLZ,EAAKM,SAAU,GAGfN,EAAKgB,mBAAoB,CACzBhB,EAAKM,SAAU,EACfN,EAAKO,UAAW,EAEhB,IAAK,MAAMb,KAAKM,EAAKW,eACjBiB,EAAMlC,GAAGY,SAAU,CAE3B,CACJ,IAIK4B,EACTlD,GAEO2C,EAAQ3C,GAAO4C,IAClB,MAAMO,EAAoBP,EAAMQ,WAAWpC,GAASA,EAAKU,cACzD,GAAIyB,EAAoB,EACpB,OAEJ,IAAIlC,EAAQkC,EACR3C,EAAS,EAEb,IAAK,IAAIE,EAAIO,EAAOP,EAAIkC,EAAMpC,OAAQE,IAAK,CACvC,MAAM2C,EAAiBT,EAAMlC,GAAGE,QAAQJ,OACxC,GAAI6C,EAAiB7C,EACjBA,EAAS6C,OACN,GAAIA,EAAiB7C,EACxB,MAGJS,EAAQP,EACRkC,EAAMlC,GAAGY,SAAU,EACnBsB,EAAMlC,GAAGa,UAAW,CACxB,CAGA,IAAK,IAAIb,EAAI,EAAGA,EAAIkC,EAAMpC,OAAQE,IAAK,CACnC,MAAMM,EAAO4B,EAAMlC,GACbW,EAAgBL,EAAKJ,QAAQ0C,MAAM,GAAG,GACtCC,EAAkBX,EAAM3B,GAAOL,QAAQ0C,MACzC,EACAjC,EAAcb,QAEdgD,EAAQnC,EAAekC,KACvBvC,EAAKM,SAAU,EAEvB,CACA,OAAOsB,CAAK,IAIPa,EAAgB,CACzBzD,EACAiB,EACAM,IAEOoB,EAAQ3C,GAAO4C,IAClBA,EAAM3B,GAAOM,SAAWA,EACxB,MAAMX,EAAUgC,EAAM3B,GAAOL,QAC7B,IAAK,IAAIF,EAAIO,EAAQ,EAAGP,EAAIkC,EAAMpC,OAAQE,IAAK,CAC3C,MAAMM,EAAO4B,EAAMlC,GACbsC,EAASJ,EAAM5B,EAAKI,aACpBmC,EAAkBvC,EAAKJ,QAAQ0C,MAAM,EAAG1C,EAAQJ,QACtD,IAAIgD,EAAQ5C,EAAS2C,GAIjB,MAHAvC,EAAKM,QAAUC,GAAYyB,EAAOzB,UAAYyB,EAAO1B,OAK7D,KAIKoC,EAAsB,CAC/B1D,EACAN,EACAC,IAEYgD,EAAQ3C,GAAO4C,IACvB,IAAK,IAAIlC,EAAIkC,EAAMpC,OAAS,EAAGE,GAAK,EAAGA,IAAK,CACxC,MAAMM,EAAO4B,EAAMlC,GACbiD,EAAoB5C,EAAaC,EAAKJ,SAE5C,GADAI,EAAKQ,QAAU9B,EAAiB+B,IAAIkC,GAChC3C,EAAKU,aACD/B,IAAgC,IAAjBqB,EAAKQ,QAAkB,CACtC,MAAMW,EAAWnB,EAAKW,eAAea,KAChCvB,GAAU2B,EAAM3B,KAGfmB,EAAsBD,EAASE,OAChCC,IAA4B,IAAlBA,EAAMd,UAEfe,EAAQJ,EAAS/B,MAClBkC,IAA4B,IAAlBA,EAAMd,UAGjBY,EACApB,EAAKQ,SAAU,EACRe,IACPvB,EAAKQ,QAAU,QAEvB,CAER,KAKKoC,EAAoB,CAC7BC,EACAC,EACAC,KAEA,IAAK,IAAIrD,EAAIqD,EAAOrD,EAAImD,EAAIrD,OAAQE,IAChC,GAAIoD,EAAUD,EAAInD,IACd,OAAOmD,EAAInD,EAIH,EAGPsD,EAAkB,CAC3BH,EACAC,EACAG,KAEA,IAAK,IAAIvD,EAAIuD,EAAKvD,GAAK,EAAGA,IACtB,GAAIoD,EAAUD,EAAInD,IACd,OAAOmD,EAAInD,EAIH,EAGPwD,EAAoB,CAC7BzE,EACAmB,KAEA,MAAOuD,KAAeC,GAAexD,EACrC,GAAIyD,EAAQ5E,IAAe4E,EAAQF,GAC/B,OAGJ,MAAMnD,EAAOvB,EAAY6E,MAAMtD,GAASA,EAAKH,MAAQsD,IAErD,OAAKnD,GAASoD,EAAY5D,OAInB0D,EAAkBlD,EAAKT,SAAU6D,GAH7BpD,CAGyC,EAG3CD,EAAgBH,GAClBA,EAAQ2D,KAAK,KAGXC,EAAqBC,GACvB,IAAIC,IAAYD,EAAWjC,KAAK5B,GAAYA,EAAQ2D,KAAK"}
+{"version":3,"file":"nested-dropdown-list-helpers.js","sources":["../../../src/shared/dropdown-list/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/nested-dropdown-list.d.ts

@@ -1,2 +1,2 @@
-import { NestedDropdownListProps } from "./types";
+import type { NestedDropdownListProps } from "./types";
 export declare const NestedDropdownList: <T>({ listItems, multiSelect, selectedKeyPaths, itemsLoadState, itemTruncationType, itemMaxLines, variant, listboxId, matchElementWidth, width, mode, selectableCategory: _selectableCategory, onSelectItem, onSelectAll, onRetry, enableSearch, hideNoResultsDisplay, noResultsDescription: _noResultsDescription, customLabels, searchPlaceholder: _searchPlaceholder, onSearch, }: NestedDropdownListProps<T>) => import("react/jsx-runtime").JSX.Element;