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

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

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

package/cjs/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":"qMA8BO,MAAMA,EAAcC,EAAAA,QAAOC,GAAwB;mBACtCC,GACZA,EAAMC,MACAC,EAAAA,KAAKC,KAAK,mBACVD,OAAKC,KAAK;;MAEjBH,GACKA,EAAMI,UACCC,KAAG;yBACGC,EAAAA,OAAO;cAEbN,EAAMO,UACNF,KAAG;yBACGC,EAAAA,OAAO;cAGbD,KAAG;yBACGC,EAAAA,OAAa;;;;MAM/BN,GACyB,QAAxBA,EAAMQ,eAA2BC,eAAaT,EAAMU,WAAa;;EAI5DC,EAAgBb,EAAAA,QAAOC,GAAwB;aAC/CO,EAAAA,OAAO;;;MAGbN,GACyB,QAAxBA,EAAMQ,eAA2BC,eAAaT,EAAMU,WAAa;;;MAGlEV,GAEU,cADDA,EAAMY,kBAECP,KAAG;sBACJH,EAAAA,KAAK;kBAIJG,KAAG;sBACJH,EAAAA,KAAK;;EAMdW,EAAcf,EAAAA,QAAOgB,IAA2B;mBAC1CZ,EAAAA,KAAKC,KAAK;EAGhBY,EAAQjB,EAAAA,QAAOC,GAAoB;;;;;;MAMzCC,GACoB,UAAnBA,EAAMgB,SACAd,EAAAA,KAAK,mBACLA,EAAAA,KAAK;;MAEZF,IACC,OAAQA,EAAMY,mBACV,IAAK,YACD,OAAOP,KAAG;;;kBAId,IAAK,SACD,OAAOA,KAAG;sBACJR;;;;sBAIAc;;;;;EASTM,EAAoBnB,EAAAA,QAAOC,GAAwB;;aAElDC,GAA+B,IAApBA,EAAMU,UAAkB,GAAK;;;;EAMzCQ,EAAqBpB,EAAAA,QAAOC,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":["primaryText","maxLines","secondaryText"],"mappings":"yHA0G8B,yBApBZ,gCAYQ,oCAJI,8BAfN,8BA1DA,kCAOI,uCAQI,yCAIG,uCARH,yCAYG,gCAQT,sCAUM,2CAIK,yCARH,4CAaG,0BAlEf,CAClBA,YAAa,CACTC,SAAU,qDAEdC,cAAe,CACXD,SAAU,kFAuGY,sCAWC,qCAPA"}

package/cjs/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/cjs/shared/dropdown-list/dropdown-list.js

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

package/cjs/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/cjs/shared/dropdown-list/dropdown-list.styles.js

@@ -1,123 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/exclamation-circle-fill"),i=require("@lifesg/react-icons/square"),r=require("@lifesg/react-icons/square-fill"),t=require("@lifesg/react-icons/square-tick-fill"),o=require("@lifesg/react-icons/tick"),a=require("styled-components"),n=require("../../theme/index.js"),l=require("../component-loading-spinner/component-loading-spinner.js"),d=require("../html-content/html-content.js"),s=require("../input-wrapper/input-wrapper.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(a);const u=p.default.div`
-    border: ${n.Border["width-010"]} ${n.Border.solid} ${n.Colour.border};
-    border-radius: ${n.Radius.sm};
-    background: ${n.Colour.bg};
-
-    --x-spacing: 0px;
-    --available-width: calc(100vw - var(--x-spacing) * 2);
-
-    ${n.MediaQuery.MaxWidth.sm} {
-        --x-spacing: ${n.Breakpoint["sm-margin"]}px;
-        max-height: 15rem;
-    }
-
-    ${n.MediaQuery.MaxWidth.xs} {
-        --x-spacing: ${n.Breakpoint["xs-margin"]}px;
-    }
-
-    ${n.MediaQuery.MaxWidth.xxs} {
-        --x-spacing: ${n.Breakpoint["xxs-margin"]}px;
-    }
-
-    max-width: var(--available-width);
-
-    ${e=>e.$customWidth?`width: ${e.$customWidth};`:e.$width?`width: ${e.$width}px; min-width: min(23rem, var(--available-width));`:"min-width: min(23rem, var(--available-width));"}
-
-    max-height: min(27rem, var(--available-height, infinity * 1px));
-    overflow: hidden;
-    overflow-y: auto;
-    ${e=>"small"===e.$variant?n.Font["body-md-regular"]:n.Font["body-baseline-regular"]}
-
-    &::-webkit-scrollbar {
-        width: 14px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: ${n.Colour["bg-inverse-subtlest"]};
-        border: 5px solid transparent;
-        border-radius: ${n.Radius.full};
-        background-clip: padding-box;
-    }
-`,g=p.default.div`
-    background: transparent;
-    padding: ${n.Spacing["spacing-8"]};
-`,h=p.default.li`
-    display: flex;
-    align-items: flex-start;
-    gap: ${n.Spacing["spacing-8"]};
-    padding: ${n.Spacing["spacing-12"]} ${n.Spacing["spacing-8"]};
-    cursor: pointer;
-    border: none;
-    border-radius: ${n.Radius.none};
-    outline: none;
-
-    ${e=>e.$disabled?a.css`
-                cursor: not-allowed;
-            `:e.$active&&e.$selected?a.css`
-                background: ${n.Colour["bg-hover"]};
-            `:e.$active?a.css`
-                background: ${n.Colour["bg-hover-subtle"]};
-            `:void 0}
-`,x=p.default(o.TickIcon)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1rem;
-    color: ${n.Colour["icon-selected"]};
-`,$=p.default.div`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1rem;
-`,b=p.default(t.SquareTickFillIcon)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${n.Colour["icon-selected"]};
-`,m=p.default(i.SquareIcon)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${n.Colour["icon-primary-subtlest"]};
-`,f=p.default(r.SquareFillIcon)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${n.Colour["icon-disabled-subtle"]};
-`,w=p.default.div`
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-`,v=p.default(s.BasicButton)`
-    cursor: pointer;
-    overflow: hidden;
-    color: ${n.Colour["text-primary"]};
-    font-size: inherit;
-`,k=p.default(v)`
-    ${n.Font["body-baseline-semibold"]}
-`,C=p.default(v)`
-    ${n.Font["body-md-semibold"]}
-    padding: ${n.Spacing["spacing-8"]} ${n.Spacing["spacing-8"]};
-`,S=p.default.div`
-    width: 100%;
-    display: flex;
-    padding: ${n.Spacing["spacing-12"]} ${n.Spacing["spacing-16"]};
-    align-items: center;
-    color: ${n.Colour.text};
-`,y=p.default(e.ExclamationCircleFillIcon)`
-    margin-right: ${n.Spacing["spacing-4"]};
-    color: ${n.Colour["icon-error"]};
-    height: 1em;
-    width: 1em;
-`,q=p.default(l.ComponentLoadingSpinner)`
-    margin-right: ${n.Spacing["spacing-8"]};
-    color: ${n.Colour.icon};
-`,I=p.default.div`
-    ${d.applyHtmlContentStyle()}
-    color: ${n.Colour["text-subtle"]};
-    padding: 0 ${n.Spacing["spacing-16"]} ${n.Spacing["spacing-12"]}
-        ${n.Spacing["spacing-16"]};
-`;exports.CheckboxDisabledIndicator=f,exports.CheckboxSelectedIndicator=b,exports.CheckboxUnselectedIndicator=m,exports.Container=u,exports.DropdownCommonButton=v,exports.LabelIcon=y,exports.List=g,exports.ListItem=h,exports.NoResultDescContainer=I,exports.ResultStateContainer=S,exports.SelectAllButton=C,exports.SelectAllContainer=w,exports.SelectedIndicator=x,exports.Spinner=q,exports.TryAgainButton=k,exports.UnselectedIndicator=$;
+"use strict";require("./dropdown-list.styles_konwm.css");exports.baseButton="b51546q",exports.baseCheckboxIndicatorStyle="bswyxh7",exports.baseIndicatorStyle="b3myji2",exports.checkboxDisabledIndicator="cxvb3yc",exports.checkboxSelectedIndicator="c1kods4c",exports.checkboxUnselectedIndicator="c2iuhda",exports.container="c1wprmqt",exports.containerVariantSmall="cv4jfw8",exports.labelIcon="l9eregy",exports.list="llrkh2h",exports.listItem="lsgm7b1",exports.listItemActive="l1sloxru",exports.listItemActiveSelected="lp7vqom",exports.listItemDisabled="l1li8r4s",exports.noResultDescContainer="n1mo99ai",exports.resultStateContainer="rlpycri",exports.selectAllButton="s5v4wu0",exports.selectAllContainer="s1gfnl3t",exports.selectedIndicator="s1bv8amb",exports.spinner="smon6ho",exports.tokens={containerWidth:"--fds-internal-dropdownList-containerWidth"},exports.tryAgainButton="t14h29ix";
 //# sourceMappingURL=dropdown-list.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-list.styles.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareFillIcon } from \"@lifesg/react-icons/square-fill\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport styled, { css } from \"styled-components\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../../theme\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { applyHtmlContentStyle } from \"../html-content/html-content\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport { DropdownVariantType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ContainerStyleProps {\n    $width?: number;\n    $customWidth?: string;\n    $variant: DropdownVariantType;\n}\n\nexport interface ListItemStyleProps {\n    $active: boolean;\n    $selected: boolean;\n    $disabled: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const Container = styled.div<ContainerStyleProps>`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    --x-spacing: 0px;\n    --available-width: calc(100vw - var(--x-spacing) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        --x-spacing: ${Breakpoint[\"sm-margin\"]}px;\n        max-height: 15rem;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        --x-spacing: ${Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        --x-spacing: ${Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    max-width: var(--available-width);\n\n    ${(props) => {\n        if (props.$customWidth) return `width: ${props.$customWidth};`;\n        if (props.$width)\n            return `width: ${props.$width}px; min-width: min(23rem, var(--available-width));`;\n\n        return \"min-width: min(23rem, var(--available-width));\";\n    }}\n\n    max-height: min(27rem, var(--available-height, infinity * 1px));\n    overflow: hidden;\n    overflow-y: auto;\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : Font[\"body-baseline-regular\"]}\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\nexport const List = styled.div`\n    background: transparent;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItem = styled.li<ListItemStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$active && props.$selected) {\n            return css`\n                background: ${Colour[\"bg-hover\"]};\n            `;\n        } else if (props.$active) {\n            return css`\n                background: ${Colour[\"bg-hover-subtle\"]};\n            `;\n        }\n    }}\n`;\n\nexport const SelectedIndicator = styled(TickIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const UnselectedIndicator = styled.div`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n`;\n\nexport const CheckboxSelectedIndicator = styled(SquareTickFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const CheckboxUnselectedIndicator = styled(SquareIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const CheckboxDisabledIndicator = styled(SquareFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\n\nexport const SelectAllContainer = styled.div`\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n`;\n\nexport const DropdownCommonButton = styled(BasicButton)`\n    cursor: pointer;\n    overflow: hidden;\n    color: ${Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const TryAgainButton = styled(DropdownCommonButton)`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const SelectAllButton = styled(DropdownCommonButton)`\n    ${Font[\"body-md-semibold\"]}\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ResultStateContainer = styled.div`\n    width: 100%;\n    display: flex;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const LabelIcon = styled(ExclamationCircleFillIcon)`\n    margin-right: ${Spacing[\"spacing-4\"]};\n    color: ${Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\nexport const NoResultDescContainer = styled.div`\n    ${applyHtmlContentStyle()}\n    color: ${Colour[\"text-subtle\"]};\n    padding: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-12\"]}\n        ${Spacing[\"spacing-16\"]};\n`;\n"],"names":["Container","styled","div","Border","Colour","Radius","MediaQuery","MaxWidth","sm","Breakpoint","xs","xxs","props","$customWidth","$width","$variant","Font","List","Spacing","ListItem","li","$disabled","css","$active","$selected","SelectedIndicator","TickIcon","UnselectedIndicator","CheckboxSelectedIndicator","SquareTickFillIcon","CheckboxUnselectedIndicator","SquareIcon","CheckboxDisabledIndicator","SquareFillIcon","SelectAllContainer","DropdownCommonButton","BasicButton","TryAgainButton","SelectAllButton","ResultStateContainer","LabelIcon","ExclamationCircleFillIcon","Spinner","ComponentLoadingSpinner","NoResultDescContainer","applyHtmlContentStyle"],"mappings":"8iBA0CO,MAAMA,EAAYC,EAAAA,QAAOC,GAAwB;cAC1CC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDC,EAAAA,OAAW;kBACdD,EAAAA,OAAW;;;;;MAKvBE,EAAAA,WAAWC,SAASC;uBACHC,EAAAA,WAAW;;;;MAI5BH,EAAAA,WAAWC,SAASG;uBACHD,EAAAA,WAAW;;;MAG5BH,EAAAA,WAAWC,SAASI;uBACHF,EAAAA,WAAW;;;;;MAK3BG,GACKA,EAAMC,aAAqB,UAAUD,EAAMC,gBAC3CD,EAAME,OACC,UAAUF,EAAME,2DAEpB;;;;;MAMRF,GACoB,UAAnBA,EAAMG,SACAC,EAAAA,KAAK,mBACLA,EAAAA,KAAK;;;;;;;;;;;sBAWGZ,EAAAA,OAAO;;yBAEJC,EAAAA,OAAa;;;EAIzBY,EAAOhB,EAAAA,QAAOC,GAAG;;eAEfgB,EAAAA,QAAQ;EAOVC,EAAWlB,EAAAA,QAAOmB,EAAsB;;;WAG1CF,EAAAA,QAAQ;eACJA,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;qBAG3Bb,EAAAA,OAAa;;;MAG3BO,GACKA,EAAMS,UACCC,KAAG;;cAGHV,EAAMW,SAAWX,EAAMY,UACvBF,KAAG;8BACQlB,EAAAA,OAAO;cAElBQ,EAAMW,QACND,KAAG;8BACQlB,EAAAA,OAAO;mBAFtB;EAQFqB,EAAoBxB,EAAAA,QAAOyB,EAAAA,SAAS;;;;aAIpCtB,EAAAA,OAAO;EAGPuB,EAAsB1B,EAAAA,QAAOC,GAAG;;;;EAMhC0B,EAA4B3B,EAAAA,QAAO4B,EAAAA,mBAAmB;;;;aAItDzB,EAAAA,OAAO;EAGP0B,EAA8B7B,EAAAA,QAAO8B,EAAAA,WAAW;;;;aAIhD3B,EAAAA,OAAO;EAGP4B,EAA4B/B,EAAAA,QAAOgC,EAAAA,eAAe;;;;aAIlD7B,EAAAA,OAAO;EAOP8B,EAAqBjC,EAAAA,QAAOC,GAAG;;;;EAM/BiC,EAAuBlC,EAAAA,QAAOmC,EAAAA,YAAY;;;aAG1ChC,EAAAA,OAAO;;EAIPiC,EAAiBpC,EAAAA,QAAOkC,EAAqB;MACpDnB,EAAAA,KAAK;EAGEsB,EAAkBrC,EAAAA,QAAOkC,EAAqB;MACrDnB,EAAAA,KAAK;eACIE,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;EAGlCqB,EAAuBtC,EAAAA,QAAOC,GAAG;;;eAG/BgB,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;aAEnCd,EAAAA,OAAa;EAGboC,EAAYvC,EAAAA,QAAOwC,EAAAA,0BAA0B;oBACtCvB,EAAAA,QAAQ;aACfd,EAAAA,OAAO;;;EAKPsC,EAAUzC,EAAAA,QAAO0C,EAAAA,wBAAwB;oBAClCzB,EAAAA,QAAQ;aACfd,EAAAA,OAAa;EAGbwC,EAAwB3C,EAAAA,QAAOC,GAAG;MACzC2C;aACOzC,EAAAA,OAAO;iBACHc,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;UACxCA,EAAAA,QAAQ;"}
+{"version":3,"file":"dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../../theme\";\nimport * as elementWithDropdownStyles from \"../dropdown-wrapper/element-with-dropdown.styles\";\n\nexport type ContainerWidthType = \"default\" | \"custom\" | \"match\";\n\nexport const tokens = {\n    availableWidth: \"--fds-internal-dropdownList-container-availableWidth\",\n    containerWidth: \"--fds-internal-dropdownList-containerWidth\",\n    xSpacing: \"--fds-internal-dropdownList-container-xSpacing\",\n} as const;\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const container = css`\n    ${Font[\"body-baseline-regular\"]}\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    ${tokens.xSpacing}: 0px;\n    ${tokens.availableWidth}: calc(\n        100vw - var(${tokens.xSpacing}) * 2\n    );\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n        max-height: 15rem;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n    }\n\n    &[data-width-type=\"default\"] {\n        min-width: min(23rem, var(${tokens.availableWidth}));\n    }\n\n    &[data-width-type=\"custom\"] {\n        width: var(${tokens.containerWidth});\n    }\n\n    &[data-width-type=\"match\"] {\n        width: var(${tokens.containerWidth});\n        min-width: min(23rem, var(${tokens.availableWidth}));\n    }\n\n    max-height: min(\n        27rem,\n        var(${elementWithDropdownStyles.tokens.availableHeight}, 9999px)\n    );\n    overflow: hidden;\n    overflow-y: auto;\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const containerVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const list = css`\n    background: transparent;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\nexport const listItem = css`\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n`;\n\nexport const listItemActive = css`\n    background: ${Colour[\"bg-hover-subtle\"]};\n`;\n\nexport const listItemActiveSelected = css`\n    background: ${Colour[\"bg-hover\"]};\n`;\n\nexport const listItemDisabled = css`\n    cursor: not-allowed;\n`;\n\nexport const baseIndicatorStyle = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n`;\n\nexport const selectedIndicator = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const baseCheckboxIndicatorStyle = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n`;\n\nexport const checkboxSelectedIndicator = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const checkboxUnselectedIndicator = css`\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const checkboxDisabledIndicator = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\nexport const selectAllContainer = css`\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n`;\n\nexport const baseButton = css`\n    cursor: pointer;\n    overflow: hidden;\n    color: ${Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const selectAllButton = css`\n    ${Font[\"body-md-semibold\"]}\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const tryAgainButton = css`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const resultStateContainer = css`\n    width: 100%;\n    display: flex;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const labelIcon = css`\n    margin-right: ${Spacing[\"spacing-4\"]};\n    color: ${Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const spinner = css`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\nexport const noResultDescContainer = css`\n    color: ${Colour[\"text-subtle\"]};\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    padding-bottom: ${Spacing[\"spacing-12\"]};\n`;\n"],"names":["containerWidth"],"mappings":"gHA4JuB,6CA3BgB,qCAVR,4CAwBO,4CARA,+CAIE,4BAnHlB,yCA4DY,4BAgGZ,uBA5FL,2BAQI,iCAWM,0CAIQ,mCAIN,yCA6EK,wCApBD,kCATL,qCAbG,qCAzBD,2BA8DV,yBA5KE,CAElBA,eAAgB,qEAuJO"}

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

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

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

@@ -1,2 +1,2 @@
-"use strict";var r=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),a=require("@lifesg/react-icons/cross"),s=require("react"),i=require("./dropdown-search.styles.js");const n=s.forwardRef(((s,n)=>{var{value:t,variant:c,onClear:o}=s,l=r.__rest(s,["value","variant","onClear"]);return e.jsxs(i.Container,{$variant:c,children:[e.jsxs(i.SearchBox,{$variant:c,children:[e.jsx(i.SearchIcon,{"aria-hidden":!0}),e.jsx(i.SearchInput,Object.assign({ref:n,value:t,$variant:c},l))]}),t&&e.jsx(i.ClearButton,{"aria-label":"Clear search",focusOutline:"browser",onClick:o,children:e.jsx(a.CrossIcon,{"aria-hidden":!0})})]})}));exports.DropdownSearch=n;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/cross"),s=require("@lifesg/react-icons/magnifier"),i=require("clsx"),c=require("react"),l=require("../clickable-icon/clickable-icon.js"),n=require("../input-wrapper/input-wrapper.js"),t=require("./dropdown-search.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(i);const d=c.forwardRef(((i,c)=>{var{value:o,variant:d,onClear:f}=i,j=e.__rest(i,["value","variant","onClear"]);return r.jsxs("div",{className:u.default(t.container,"small"===d&&t.containerVariantSmall),children:[r.jsxs("label",{className:u.default(t.searchBox,"small"===d&&t.searchBoxVariantSmall),children:[r.jsx(s.MagnifierIcon,{"aria-hidden":!0,className:t.searchIcon}),r.jsx(n.BasicInput,Object.assign({ref:c,value:o,variant:d,className:t.searchInput},j))]}),o&&r.jsx(l.ClickableIcon,{"aria-label":"Clear search",focusOutline:"browser",onClick:f,className:t.clearButton,children:r.jsx(a.CrossIcon,{"aria-hidden":!0})})]})}));exports.DropdownSearch=d;
 //# sourceMappingURL=dropdown-search.js.map