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

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

@@ -1,66 +1,2 @@
-import e,{css as i}from"styled-components";import{Font as l,Colour as t}from"../../theme/index.js";import{lineClampCss as o}from"../styles/index.js";const r=e.div`
-    font-weight: ${e=>e.$bold?l.Spec["weight-semibold"]:l.Spec["weight-regular"]};
-
-    ${e=>e.$disabled?i`
-                color: ${t["text-disabled"]};
-            `:e.$selected?i`
-                color: ${t["text-selected"]};
-            `:i`
-                color: ${t.text};
-            `}
-    width: 100%;
-
-    ${e=>"end"===e.$truncateType&&o(e.$maxLines||2)}
-    overflow-wrap: break-word;
-`,d=e.div`
-    color: ${t["text-subtlest"]};
-    width: 100%;
-
-    ${e=>"end"===e.$truncateType&&o(e.$maxLines||2)}
-    overflow-wrap: break-word;
-
-    ${e=>"next-line"===e.$labelDisplayType?i`
-                    ${l["body-md-semibold"]}
-                `:i`
-                    ${l["body-baseline-regular"]}
-                `}
-`,n=e.span`
-    font-weight: ${l.Spec["weight-semibold"]};
-`,a=e.div`
-    text-align: left;
-    width: 100%;
-    overflow: hidden;
-    overflow-wrap: break-word;
-
-    ${e=>"small"===e.$variant?l["body-md-regular"]:l["body-baseline-regular"]}
-
-    ${e=>{switch(e.$labelDisplayType){case"next-line":return i`
-                    display: flex;
-                    flex-direction: column;
-                `;case"inline":return i`
-                    ${r} {
-                        display: inline;
-                    }
-
-                    ${d} {
-                        display: inline;
-                        margin-left: 0.5rem;
-                    }
-                `}}}
-`,s=e.div`
-    display: inline-block;
-    width: ${e=>1===e.$maxLines?50:100}%;
-    height: 1lh;
-    word-break: break-all;
-    overflow: hidden;
-`,$=e.div`
-    display: inline-block;
-    width: ${e=>1===e.$maxLines?50:100}%;
-    height: 1lh;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    direction: rtl;
-    text-align: right;
-`;export{a as Label,n as MatchedText,r as PrimaryText,d as SecondaryText,s as TruncateFirstLine,$ as TruncateSecondLine};
+import"./dropdown-label.styles_mloii0.css";const i={primaryText:{maxLines:"--fds-internal-dropdownLabel-primaryText-maxLines"},secondaryText:{maxLines:"--fds-internal-dropdownLabel-secondaryText-maxLines"}},s="pi58ntt",t="p1wtg030",e="p4cirxp",n="pp0vhoy",o="p1nofioz",p="przdrhy",r="s3fwc7p",a="s132gi2y",d="swx1e24",l="s1kq4iiq",x="s1jjyg61",m="m7dzxku",y="lkpcujm",c="l4129ag",w="l5tt4mi",f="b1tiox0q",L="t1y8fzo0",g="t18n9ljk",T="tgn5sfi";export{f as baseTruncateStyle,y as label,w as labelNextLine,c as labelVariantSmall,m as matchedText,s as primaryText,t as primaryTextBold,n as primaryTextDisabled,o as primaryTextLabelInline,e as primaryTextSelected,p as primaryTextTruncateEnd,r as secondaryText,d as secondaryTextInline,l as secondaryTextLabelInline,a as secondaryTextNextLine,x as secondaryTextTruncateEnd,i as tokens,L as truncateFirstLine,T as truncateLineSingle,g as truncateSecondLine};
 //# sourceMappingURL=dropdown-label.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-label.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-label.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour, Font } from \"../../theme\";\nimport { DropdownVariantType, LabelDisplayType, TruncateType } from \"./types\";\nimport { lineClampCss } from \"../styles\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface LabelStyleProps {\n    $labelDisplayType: LabelDisplayType;\n    $variant: DropdownVariantType;\n}\n\ninterface LabelTextStyleProps {\n    $labelDisplayType?: LabelDisplayType;\n    $maxLines?: number;\n    $selected?: boolean;\n    $disabled?: boolean;\n    $truncateType?: TruncateType;\n    $bold?: boolean;\n}\n\ninterface MatchedTextStyleProps {\n    $variant: DropdownVariantType;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const PrimaryText = styled.div<LabelTextStyleProps>`\n    font-weight: ${(props) =>\n        props.$bold\n            ? Font.Spec[\"weight-semibold\"]\n            : Font.Spec[\"weight-regular\"]};\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        } else if (props.$selected) {\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        } else {\n            return css`\n                color: ${Colour[\"text\"]};\n            `;\n        }\n    }}\n    width: 100%;\n\n    ${(props) =>\n        props.$truncateType === \"end\" && lineClampCss(props.$maxLines || 2)}\n    overflow-wrap: break-word;\n`;\n\nexport const SecondaryText = styled.div<LabelTextStyleProps>`\n    color: ${Colour[\"text-subtlest\"]};\n    width: 100%;\n\n    ${(props) =>\n        props.$truncateType === \"end\" && lineClampCss(props.$maxLines || 2)}\n    overflow-wrap: break-word;\n\n    ${(props) => {\n        switch (props.$labelDisplayType) {\n            case \"next-line\":\n                return css`\n                    ${Font[\"body-md-semibold\"]}\n                `;\n            case \"inline\":\n            default:\n                return css`\n                    ${Font[\"body-baseline-regular\"]}\n                `;\n        }\n    }}\n`;\n\nexport const MatchedText = styled.span<MatchedTextStyleProps>`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const Label = styled.div<LabelStyleProps>`\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    overflow-wrap: break-word;\n\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : Font[\"body-baseline-regular\"]}\n\n    ${(props) => {\n        switch (props.$labelDisplayType) {\n            case \"next-line\":\n                return css`\n                    display: flex;\n                    flex-direction: column;\n                `;\n            case \"inline\":\n                return css`\n                    ${PrimaryText} {\n                        display: inline;\n                    }\n\n                    ${SecondaryText} {\n                        display: inline;\n                        margin-left: 0.5rem;\n                    }\n                `;\n        }\n    }}\n`;\n\nexport const TruncateFirstLine = styled.div<LabelTextStyleProps>`\n    display: inline-block;\n    width: ${(props) => (props.$maxLines === 1 ? 50 : 100)}%;\n    height: 1lh;\n    word-break: break-all;\n    overflow: hidden;\n`;\n\nexport const TruncateSecondLine = styled.div<LabelTextStyleProps>`\n    display: inline-block;\n    width: ${(props) => (props.$maxLines === 1 ? 50 : 100)}%;\n    height: 1lh;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    direction: rtl;\n    text-align: right;\n`;\n"],"names":["PrimaryText","styled","div","props","$bold","Font","Spec","$disabled","css","Colour","$selected","$truncateType","lineClampCss","$maxLines","SecondaryText","$labelDisplayType","MatchedText","span","Label","$variant","TruncateFirstLine","TruncateSecondLine"],"mappings":"qJA8BO,MAAMA,EAAcC,EAAOC,GAAwB;mBACtCC,GACZA,EAAMC,MACAC,EAAKC,KAAK,mBACVD,EAAKC,KAAK;;MAEjBH,GACKA,EAAMI,UACCC,CAAG;yBACGC,EAAO;cAEbN,EAAMO,UACNF,CAAG;yBACGC,EAAO;cAGbD,CAAG;yBACGC,EAAa;;;;MAM/BN,GACyB,QAAxBA,EAAMQ,eAA2BC,EAAaT,EAAMU,WAAa;;EAI5DC,EAAgBb,EAAOC,GAAwB;aAC/CO,EAAO;;;MAGbN,GACyB,QAAxBA,EAAMQ,eAA2BC,EAAaT,EAAMU,WAAa;;;MAGlEV,GAEU,cADDA,EAAMY,kBAECP,CAAG;sBACJH,EAAK;kBAIJG,CAAG;sBACJH,EAAK;;EAMdW,EAAcf,EAAOgB,IAA2B;mBAC1CZ,EAAKC,KAAK;EAGhBY,EAAQjB,EAAOC,GAAoB;;;;;;MAMzCC,GACoB,UAAnBA,EAAMgB,SACAd,EAAK,mBACLA,EAAK;;MAEZF,IACC,OAAQA,EAAMY,mBACV,IAAK,YACD,OAAOP,CAAG;;;kBAId,IAAK,SACD,OAAOA,CAAG;sBACJR;;;;sBAIAc;;;;;EASTM,EAAoBnB,EAAOC,GAAwB;;aAElDC,GAA+B,IAApBA,EAAMU,UAAkB,GAAK;;;;EAMzCQ,EAAqBpB,EAAOC,GAAwB;;aAEnDC,GAA+B,IAApBA,EAAMU,UAAkB,GAAK;;;;;;;"}
+{"version":3,"file":"dropdown-label.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampDynamicCss } from \"../styles\";\n\nexport const tokens = {\n    primaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-primaryText-maxLines\",\n    },\n    secondaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-secondaryText-maxLines\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// PRIMARY TEXT\n// -----------------------------------------------------------------------------\nexport const primaryText = css`\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    color: ${Colour[\"text\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const primaryTextBold = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const primaryTextSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const primaryTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const primaryTextLabelInline = css`\n    display: inline;\n`;\n\nexport const primaryTextTruncateEnd = css`\n    ${tokens.primaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.primaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// SECONDARY TEXT\n// -----------------------------------------------------------------------------\nexport const secondaryText = css`\n    color: ${Colour[\"text-subtlest\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const secondaryTextNextLine = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const secondaryTextInline = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const secondaryTextLabelInline = css`\n    display: inline;\n    margin-left: 0.5rem;\n`;\n\nexport const secondaryTextTruncateEnd = css`\n    ${tokens.secondaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.secondaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// MATCHED TEXT\n// -----------------------------------------------------------------------------\nexport const matchedText = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LABEL\n// -----------------------------------------------------------------------------\nexport const label = css`\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    overflow-wrap: break-word;\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const labelVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const labelNextLine = css`\n    display: flex;\n    flex-direction: column;\n`;\n\n// -----------------------------------------------------------------------------\n// TRUNCATION\n// -----------------------------------------------------------------------------\nexport const baseTruncateStyle = css`\n    display: inline-block;\n    width: 100%;\n    height: 1lh;\n    overflow: hidden;\n`;\n\nexport const truncateFirstLine = css`\n    word-break: break-all;\n`;\n\nexport const truncateSecondLine = css`\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    direction: rtl;\n    text-align: right;\n`;\n\nexport const truncateLineSingle = css`\n    width: 50%;\n`;\n"],"names":["tokens","primaryText","maxLines","secondaryText","primaryTextBold","primaryTextSelected","primaryTextDisabled","primaryTextLabelInline","primaryTextTruncateEnd","secondaryTextNextLine","secondaryTextInline","secondaryTextLabelInline","secondaryTextTruncateEnd","matchedText","label","labelVariantSmall","labelNextLine","baseTruncateStyle","truncateFirstLine","truncateSecondLine","truncateLineSingle"],"mappings":"+EAKO,MAAMA,EAAS,CAClBC,YAAa,CACTC,SAAU,qDAEdC,cAAe,CACXD,SAAU,wDAWLD,EAAW,UAOXG,EAAe,WAIfC,EAAmB,UAInBC,EAAmB,UAInBC,EAAsB,WAItBC,EAAsB,UAQtBL,EAAa,UAMbM,EAAqB,WAIrBC,EAAmB,UAInBC,EAAwB,WAKxBC,EAAwB,WAQxBC,EAAW,UAOXC,EAAK,UAQLC,EAAiB,UAIjBC,EAAa,UAQbC,EAAiB,WAOjBC,EAAiB,WAIjBC,EAAkB,WAOlBC,EAAkB"}

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

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

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

@@ -1,3 +1,3 @@
-import React from "react";
-import { DropdownListApi, DropdownListProps } from "./types";
+import type React from "react";
+import type { DropdownListApi, DropdownListProps } from "./types";
 export declare const DropdownList: <T, V>(props: DropdownListProps<T, V> & React.RefAttributes<DropdownListApi>) => React.ReactElement | null;

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

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

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

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

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

@@ -1,125 +1,27 @@
-import { DropdownVariantType } from "./types";
-interface ContainerStyleProps {
-    $width?: number;
-    $customWidth?: string;
-    $variant: DropdownVariantType;
-}
-export interface ListItemStyleProps {
-    $active: boolean;
-    $selected: boolean;
-    $disabled: boolean;
-}
-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>, keyof ContainerStyleProps> & ContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerStyleProps> & ContainerStyleProps, never>>> & 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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ListItemStyleProps> & ListItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ListItemStyleProps> & ListItemStyleProps, never>>> & 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> & 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 UnselectedIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<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> & 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 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> & 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 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> & 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 SelectAllContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<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("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;
-}, never> & Partial<Pick<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;
-}, 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("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;
-}, never> & Partial<Pick<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;
-}, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, 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;
-}, never> & Partial<Pick<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;
-}, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, 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("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;
-}, never> & Partial<Pick<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;
-}, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, 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;
-}, never> & Partial<Pick<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;
-}, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, 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> & Partial<Pick<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> & 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 Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../component-loading-spinner").ComponentLoadingSpinnerProps, never> & Partial<Pick<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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export {};
+export type ContainerWidthType = "default" | "custom" | "match";
+export declare const tokens: {
+    readonly availableWidth: "--fds-internal-dropdownList-container-availableWidth";
+    readonly containerWidth: "--fds-internal-dropdownList-containerWidth";
+    readonly xSpacing: "--fds-internal-dropdownList-container-xSpacing";
+};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerVariantSmall: import("@linaria/core").LinariaClassName;
+export declare const list: import("@linaria/core").LinariaClassName;
+export declare const listItem: import("@linaria/core").LinariaClassName;
+export declare const listItemActive: import("@linaria/core").LinariaClassName;
+export declare const listItemActiveSelected: import("@linaria/core").LinariaClassName;
+export declare const listItemDisabled: import("@linaria/core").LinariaClassName;
+export declare const baseIndicatorStyle: import("@linaria/core").LinariaClassName;
+export declare const selectedIndicator: import("@linaria/core").LinariaClassName;
+export declare const baseCheckboxIndicatorStyle: import("@linaria/core").LinariaClassName;
+export declare const checkboxSelectedIndicator: import("@linaria/core").LinariaClassName;
+export declare const checkboxUnselectedIndicator: import("@linaria/core").LinariaClassName;
+export declare const checkboxDisabledIndicator: import("@linaria/core").LinariaClassName;
+export declare const selectAllContainer: import("@linaria/core").LinariaClassName;
+export declare const baseButton: import("@linaria/core").LinariaClassName;
+export declare const selectAllButton: import("@linaria/core").LinariaClassName;
+export declare const tryAgainButton: import("@linaria/core").LinariaClassName;
+export declare const resultStateContainer: import("@linaria/core").LinariaClassName;
+export declare const labelIcon: import("@linaria/core").LinariaClassName;
+export declare const spinner: import("@linaria/core").LinariaClassName;
+export declare const noResultDescContainer: import("@linaria/core").LinariaClassName;