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

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{CaretRightIcon as i}from"@lifesg/react-icons/caret-right";import{useState as n,useRef as l,useMemo as s,useEffect as o}from"react";import{Virtuoso as a}from"react-virtuoso";import{Spinner as d}from"../../button/button.style.js";import"../../util/calendar-helper.js";import"../../util/date-helper.js";import"../../util/date-input-helper.js";import{mergeRefs as c}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as u}from"../../util/use-event.js";import{useEventListener as m}from"../../util/use-event-listener.js";import{useIsMounted as h}from"../../util/use-mount.js";import{useDropdownRender as p}from"../dropdown-wrapper/element-with-dropdown.js";import{DropdownLabel as f}from"./dropdown-label.js";import{Container as v,List as b,SelectAllContainer as g,SelectAllButton as j,ResultStateContainer as w,LabelIcon as x,NoResultDescContainer as y,TryAgainButton as S,CheckboxUnselectedIndicator as k,CheckboxSelectedIndicator as I,SelectedIndicator as C}from"./dropdown-list.styles.js";import{DropdownSearch as $}from"./dropdown-search.js";import{flattenList as L,expandSelectedSubtrees as P,expandFirstSubtree as D,updateSelectedState as T,expandMatchedSubtrees as A,findItemFromEnd as E,findItemFromStart as R,toggleSubtree as N}from"./nested-dropdown-list-helpers.js";import{ListItemContainer as O,Indent as z,UnexpandableIndicator as F,ListItem as W,ExpandButton as B,CheckboxMixedIndicator as M,SelectionIndicator as K}from"./nested-dropdown-list.styles.js";import{VirtuosoItem as U,VirtuosoList as V}from"./virtuoso-components.js";const _=({listItems:_,multiSelect:q=!1,selectedKeyPaths:G,itemsLoadState:H="success",itemTruncationType:J="end",itemMaxLines:Q=2,variant:X="default",listboxId:Y,matchElementWidth:Z=!1,width:ee,mode:te="default",selectableCategory:re,onSelectItem:ie,onSelectAll:ne,onRetry:le,enableSearch:se,hideNoResultsDisplay:oe,noResultsDescription:ae,customLabels:de,searchPlaceholder:ce,onSearch:ue})=>{const{noResultsLabel:me="No results found.",selectAllButtonLabel:he="Select all",clearAllButtonLabel:pe="Clear all"}=de||{},fe=(null==de?void 0:de.searchPlaceholder)||ce||"Search",ve=(null==de?void 0:de.noResultsDescription)||ae,be=q||re,{elementWidth:ge,setFloatingRef:je,getFloatingProps:we,styles:xe}=p(),[ye,Se]=n(""),ke=ye.toLowerCase().trim(),[Ie,Ce]=n(!1),$e=l(null),Le=l([]),Pe=l(null),De=h(),[Te,Ae]=n([]),[Ee,Re]=n([]),Ne=Ie?Ee:Te,Oe=s((()=>{let e=0;for(const t of Te)t.level>e&&(e=t.level);return e}),[Te]),[ze,Fe]=n(0),[We,Be]=n([]),[Me,Ke]=n(0),Ue=e=>{const t=e.target.value;Se(t),""===t?Ce(!1):t.trim().length>=3&&Ce(!0),null==ue||ue()},Ve=()=>{var e;Se(""),Ce(!1),null===(e=Pe.current)||void 0===e||e.focus(),null==ue||ue()},_e=()=>{null==le||le()},qe=()=>{if(0===G.size){const e=[],t=[];Te.forEach((r=>{r.hasSubItems||(e.push(r.keyPath),t.push(r))})),null==ne||ne(e,t)}else null==ne||ne([],[])},Ge=u(((e,t)=>L(e,G,q,ke,t))),He=u((e=>G.size?P(Ge(e,!1)):D(Ge(e,!1)))),Je=u((e=>{const t=e=>{const r=[];for(const i of e){if(-1!==i.label.toLowerCase().indexOf(ke))r.push(i);else if(i.subItems){const e=t(i.subItems);if(e.length>0){r.push(Object.assign(Object.assign({},i),{subItems:e}));continue}}}return r};return t(e)})),Qe=u((()=>{Ae((e=>T(e,G,q))),Ie&&Re((e=>T(e,G,q)))})),Xe=(e,t,r)=>{const i=N(Ne,e,t);Fe(e),Ke(r),Ie?Re(i):Ae(i)};m("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":{e.preventDefault();const r=R(Ne,(e=>e.visible),ze+1);r&&(Ke((e=>e+1)),Fe(r.index),null===(t=Le.current[r.index])||void 0===t||t.focus());break}case"ArrowUp":{e.preventDefault();const t=E(Ne,(e=>e.visible),ze-1);t?(Ke((e=>e-1)),Fe(t.index),null===(r=Le.current[t.index])||void 0===r||r.focus()):0===Me&&Pe.current&&(Pe.current.focus(),Ke(-1),Fe(-1));break}case"ArrowRight":e.preventDefault(),Xe(ze,!0,Me);break;case"ArrowLeft":e.preventDefault(),Xe(ze,!1,Me);break;case"Space":if(document.activeElement===Le.current[ze]){e.preventDefault();const t=Ne[ze];if(t.hasSubItems&&!be)return;null==ie||ie(t)}}})),o((()=>{let e=[];"default"===te?e=He(_):"expand"===te?e=Ge(_,!0):"collapse"===te&&(e=Ge(_,!1)),Ae(e)}),[Ge,He,_,te]),o((()=>{Be(Ne.filter((e=>e.visible)))}),[Ie,Ne]),o((()=>{Qe()}),[q,G,Qe]),o((()=>{if(Ie&&ye.trim().length>=3){const e=Je(_),t=A(Ge(e,!1));Re(t)}}),[Je,Ge,_,Ie,ye]),o((()=>{De||(Pe.current?(Fe(-1),Ke(-1),setTimeout((()=>{var e;return null===(e=Pe.current)||void 0===e?void 0:e.focus()}),200)):Le.current[ze]?setTimeout((()=>{var e;return null===(e=Le.current[ze])||void 0===e?void 0:e.focus()}),200):(Fe(0),Ke(0),setTimeout((()=>{var e;return null===(e=Le.current[0])||void 0===e?void 0:e.focus()}),200)))}),[ze,Me,De]);const Ye=()=>{if(se&&"success"===H)return e($,{ref:Pe,onChange:Ue,value:ye,placeholder:fe,"data-testid":"search-input","aria-label":"Enter text to search",onClear:Ve,variant:X})},Ze=()=>{if(q&&!Ie&&Te.length>0&&"success"===H)return e(g,{children:e(j,{onClick:qe,type:"button",$variant:X,children:0===G.size?he:pe})})},et=()=>{if(!oe&&Ie&&0===Ee.length&&"success"===H)return t(r,{children:[t(w,{"data-testid":"list-no-results",children:[e(x,{"data-testid":"no-result-icon"}),me]}),ve&&e(y,{"data-testid":"no-result-desc",children:ve})]})},tt=()=>{if(le&&"loading"===H)return t(w,{"data-testid":"list-loading",children:[e(d,{$hasChildren:!0}),"Loading..."]})},rt=()=>{if(le&&"fail"===H)return t(w,{"data-testid":"list-fail",children:[e(x,{"data-testid":"load-error-icon"}),"Failed to load. ",e(S,{onClick:_e,type:"button",$variant:X,children:"Try again."})]})},it=t=>{if(q)switch(t.checked){case"mixed":return e(M,{"aria-hidden":!0});case!0:return e(I,{"aria-hidden":!0});default:return e(k,{"aria-hidden":!0})}if(!t.hasSubItems)return e(K,{$hasNestedSiblings:t.hasNestedSiblings||0===t.level,children:t.checked&&e(C,{"aria-hidden":!0})})},nt=(r,n)=>{const{level:l,visible:s,expanded:o,keyPath:a,checked:d,hasSubItems:c,indexInParent:u,parentSetSize:m}=r,h=r.index,p=Me===n,v=c&&!be;return t(O,{$visible:s,role:"none",children:[Oe>0&&e(z,{$level:l}),Oe>0&&!c&&q&&e(F,{}),t(W,{"aria-checked":d,"aria-selected":!!d,"aria-expanded":c?o:void 0,"aria-level":l+1,"aria-posinset":u+1,"aria-setsize":m,"data-testid":"list-item",onClick:e=>{e.stopPropagation(),v?Xe(h,!o,n):((e,t)=>{Ke(t),Fe(e),null==ie||ie(Ne[e])})(h,n)},onMouseEnter:()=>((e,t)=>{Fe(t.index),Ke(e)})(n,r),ref:e=>Le.current[r.index]=e,role:"treeitem",tabIndex:p?0:-1,$active:p,$toggleable:v,children:[c&&e(B,{"data-testid":"toggle-category-button",onClick:e=>{e.stopPropagation(),Xe(h,!o,n)},$expanded:o,"aria-hidden":!0,children:e(i,{})}),it(r),e(f,{bold:c,searchTerm:Ie?ke:void 0,label:r.item.label,selected:!!d,truncationType:J,maxLines:Q})]})]},`[${a.join("---")}]`)},lt=()=>{var t;const r="test"===process.env.NODE_ENV;return e(a,Object.assign({style:{height:"100%"},customScrollParent:null!==(t=$e.current)&&void 0!==t?t:void 0,data:We,itemContent:(e,t)=>nt(t,e),components:{List:V,Item:U},context:{listProps:{id:Y,role:"tree","aria-multiselectable":q},listItemProps:{role:"none"}}},r?{initialItemCount:We.length}:{}),r?We.length:void 0)};return e(v,Object.assign({"data-testid":"dropdown-container",ref:c($e,je),style:xe},we(),{$width:Z?ge:void 0,$variant:X,$customWidth:ee,children:t(b,{"data-testid":"nested-dropdown-list",children:[Ye(),Ze(),et(),tt(),rt(),lt()]})}))};export{_ as NestedDropdownList};
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{CaretRightIcon as s}from"@lifesg/react-icons/caret-right";import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import{MinusSquareFillIcon as o}from"@lifesg/react-icons/minus-square-fill";import{SquareIcon as l}from"@lifesg/react-icons/square";import{SquareTickFillIcon as n}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as a}from"@lifesg/react-icons/tick";import c from"clsx";import{useState as d,useRef as m,useMemo as u,useEffect as p}from"react";import{Virtuoso as h}from"react-virtuoso";import{Markup as f}from"../../markup/markup.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as v}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as g}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as b}from"../../util/use-event.js";import{useEventListener as j}from"../../util/use-event-listener.js";import{useIsMounted as x}from"../../util/use-mount.js";import{ComponentLoadingSpinner as y}from"../component-loading-spinner/component-loading-spinner.js";import{useDropdownRender as N}from"../dropdown-wrapper/element-with-dropdown.js";import{BasicButton as w}from"../input-wrapper/input-wrapper.js";import{DropdownLabel as k}from"./dropdown-label.js";import{tokens as S,container as I,containerVariantSmall as P,list as C,selectAllContainer as L,baseButton as D,selectAllButton as T,resultStateContainer as A,labelIcon as E,noResultDescContainer as R,spinner as O,tryAgainButton as q,baseCheckboxIndicatorStyle as z,checkboxUnselectedIndicator as F,checkboxSelectedIndicator as W,baseIndicatorStyle as B,selectedIndicator as M}from"./dropdown-list.styles.js";import{DropdownSearch as $}from"./dropdown-search.js";import{indent as K,tokens as U,unexpandableIndicator as V,expandButton as _,expandButtonExpanded as G,listItem as H,listItemActive as J,listItemToggleable as Q,listItemContainer as X,listItemContainerHidden as Y,checkboxMixedIndicator as Z,selectionIndicator as ee,selectionIndicatorNested as te}from"./nested-dropdown-list.styles.js";import{flattenList as re,expandSelectedSubtrees as se,expandFirstSubtree as ie,updateSelectedState as oe,expandMatchedSubtrees as le,findItemFromEnd as ne,findItemFromStart as ae,toggleSubtree as ce}from"./nested-dropdown-list-helpers.js";import{VirtuosoItem as de,VirtuosoList as me}from"./virtuoso-components.js";const ue=({listItems:ue,multiSelect:pe=!1,selectedKeyPaths:he,itemsLoadState:fe="success",itemTruncationType:ve="end",itemMaxLines:ge=2,variant:be="default",listboxId:je,matchElementWidth:xe=!1,width:ye,mode:Ne="default",selectableCategory:we,onSelectItem:ke,onSelectAll:Se,onRetry:Ie,enableSearch:Pe,hideNoResultsDisplay:Ce,noResultsDescription:Le,customLabels:De,searchPlaceholder:Te,onSearch:Ae})=>{const{noResultsLabel:Ee="No results found.",selectAllButtonLabel:Re="Select all",clearAllButtonLabel:Oe="Clear all"}=De||{},qe=(null==De?void 0:De.searchPlaceholder)||Te||"Search",ze=(null==De?void 0:De.noResultsDescription)||Le,Fe=pe||we,{elementWidth:We,setFloatingRef:Be,getFloatingProps:Me,styles:$e}=N(),[Ke,Ue]=d(""),Ve=Ke.toLowerCase().trim(),[_e,Ge]=d(!1),He=m(null),Je=m([]),Qe=m(null),Xe=x(),[Ye,Ze]=d([]),[et,tt]=d([]),rt=_e?et:Ye,st=u((()=>{let e=0;for(const t of Ye)t.level>e&&(e=t.level);return e}),[Ye]),[it,ot]=d(0),[lt,nt]=d([]),[at,ct]=d(0);let dt,mt="default";ye?(dt=ye,mt="custom"):xe&&We&&(dt=`${We}px`,mt="match"),v(He,{[S.containerWidth]:dt});const ut=e=>{const t=e.target.value;Ue(t),""===t?Ge(!1):t.trim().length>=3&&Ge(!0),null==Ae||Ae()},pt=()=>{var e;Ue(""),Ge(!1),null===(e=Qe.current)||void 0===e||e.focus(),null==Ae||Ae()},ht=()=>{null==Ie||Ie()},ft=()=>{if(0===he.size){const e=[],t=[];Ye.forEach((r=>{r.hasSubItems||(e.push(r.keyPath),t.push(r))})),null==Se||Se(e,t)}else null==Se||Se([],[])},vt=b(((e,t)=>re(e,he,pe,Ve,t))),gt=b((e=>he.size?se(vt(e,!1)):ie(vt(e,!1)))),bt=b((e=>{const t=e=>{const r=[];for(const s of e){if(-1!==s.label.toLowerCase().indexOf(Ve))r.push(s);else if(s.subItems){const e=t(s.subItems);if(e.length>0){r.push(Object.assign(Object.assign({},s),{subItems:e}));continue}}}return r};return t(e)})),jt=b((()=>{Ze((e=>oe(e,he,pe))),_e&&tt((e=>oe(e,he,pe)))})),xt=(e,t,r)=>{const s=ce(rt,e,t);ot(e),ct(r),_e?tt(s):Ze(s)};j("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":{e.preventDefault();const r=ae(rt,(e=>e.visible),it+1);r&&(ct((e=>e+1)),ot(r.index),null===(t=Je.current[r.index])||void 0===t||t.focus());break}case"ArrowUp":{e.preventDefault();const t=ne(rt,(e=>e.visible),it-1);t?(ct((e=>e-1)),ot(t.index),null===(r=Je.current[t.index])||void 0===r||r.focus()):0===at&&Qe.current&&(Qe.current.focus(),ct(-1),ot(-1));break}case"ArrowRight":e.preventDefault(),xt(it,!0,at);break;case"ArrowLeft":e.preventDefault(),xt(it,!1,at);break;case"Space":if(document.activeElement===Je.current[it]){e.preventDefault();const t=rt[it];if(t.hasSubItems&&!Fe)return;null==ke||ke(t)}}})),p((()=>{let e=[];"default"===Ne?e=gt(ue):"expand"===Ne?e=vt(ue,!0):"collapse"===Ne&&(e=vt(ue,!1)),Ze(e)}),[vt,gt,ue,Ne]),p((()=>{nt(rt.filter((e=>e.visible)))}),[_e,rt]),p((()=>{jt()}),[pe,he,jt]),p((()=>{if(_e&&Ke.trim().length>=3){const e=bt(ue),t=le(vt(e,!1));tt(t)}}),[bt,vt,ue,_e,Ke]),p((()=>{Xe||(Qe.current?(ot(-1),ct(-1),setTimeout((()=>{var e;return null===(e=Qe.current)||void 0===e?void 0:e.focus()}),200)):Je.current[it]?setTimeout((()=>{var e;return null===(e=Je.current[it])||void 0===e?void 0:e.focus()}),200):(ot(0),ct(0),setTimeout((()=>{var e;return null===(e=Je.current[0])||void 0===e?void 0:e.focus()}),200)))}),[it,at,Xe]);const yt=()=>{if(Pe&&"success"===fe)return e($,{ref:Qe,onChange:ut,value:Ke,placeholder:qe,"data-testid":"search-input","aria-label":"Enter text to search",onClear:pt,variant:be})},Nt=()=>{if(pe&&!_e&&Ye.length>0&&"success"===fe)return e("div",{className:L,children:e(w,{onClick:ft,type:"button",className:c(D,T),children:0===he.size?Re:Oe})})},wt=()=>{if(!Ce&&_e&&0===et.length&&"success"===fe)return t(r,{children:[t("div",{"data-testid":"list-no-results",className:A,children:[e(i,{"data-testid":"no-result-icon",className:E}),Ee]}),ze&&e(f,{"data-testid":"no-result-desc",className:R,children:ze})]})},kt=()=>{if(Ie&&"loading"===fe)return t("div",{"data-testid":"list-loading",className:A,children:[e(y,{className:O}),"Loading..."]})},St=()=>{if(Ie&&"fail"===fe)return t("div",{"data-testid":"list-fail",className:A,children:[e(i,{"data-testid":"load-error-icon",className:E}),"Failed to load. ",e(w,{onClick:ht,type:"button",className:c(D,q),children:"Try again."})]})},It=t=>{if(pe)switch(t.checked){case"mixed":return e(o,{"aria-hidden":!0,className:Z});case!0:return e(n,{"aria-hidden":!0,className:c(z,W)});default:return e(l,{"aria-hidden":!0,className:c(z,F)})}if(!t.hasSubItems)return e("div",{className:c(ee,(t.hasNestedSiblings||0===t.level)&&te),children:t.checked&&e(a,{"aria-hidden":!0,className:c(B,M)})})},Pt=(r,i)=>{const{level:o,visible:l,expanded:n,keyPath:a,checked:d,hasSubItems:m,indexInParent:u,parentSetSize:p}=r,h=r.index,f=at===i,v=m&&!Fe;return t("li",{role:"none",className:c(X,!l&&Y),children:[st>0&&e("div",{className:K,ref:e=>{e&&e.style.setProperty(U.level,String(o))}}),st>0&&!m&&pe&&e("div",{className:V}),t("div",{"aria-checked":d,"aria-selected":!!d,"aria-expanded":m?n:void 0,"aria-level":o+1,"aria-posinset":u+1,"aria-setsize":p,"data-testid":"list-item",onClick:e=>{e.stopPropagation(),v?xt(h,!n,i):((e,t)=>{ct(t),ot(e),null==ke||ke(rt[e])})(h,i)},onMouseEnter:()=>((e,t)=>{ot(t.index),ct(e)})(i,r),ref:e=>Je.current[r.index]=e,role:"treeitem",tabIndex:f?0:-1,className:c(H,f&&J,v&&Q),children:[m&&e("div",{"data-testid":"toggle-category-button",onClick:e=>{e.stopPropagation(),xt(h,!n,i)},className:c(_,n&&G),"aria-hidden":!0,children:e(s,{})}),It(r),e(k,{bold:m,searchTerm:_e?Ve:void 0,label:r.item.label,selected:!!d,truncationType:ve,maxLines:ge})]})]},`[${a.join("---")}]`)},Ct=()=>{var t;const r="test"===process.env.NODE_ENV;return e(h,Object.assign({style:{height:"100%"},customScrollParent:null!==(t=He.current)&&void 0!==t?t:void 0,data:lt,itemContent:(e,t)=>Pt(t,e),components:{List:me,Item:de},context:{listProps:{id:je,role:"tree","aria-multiselectable":pe},listItemProps:{role:"none"}}},r?{initialItemCount:lt.length}:{}),r?lt.length:void 0)};return e("div",Object.assign({"data-testid":"dropdown-container",ref:g(He,Be)},Me(),{"data-width-type":mt,className:c(I,"small"===be&&P),style:$e,children:t("div",{"data-testid":"nested-dropdown-list",className:C,children:[yt(),Nt(),wt(),kt(),St(),Ct()]})}))};export{ue as NestedDropdownList};
 //# sourceMappingURL=nested-dropdown-list.js.map

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

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

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

@@ -1,29 +1,15 @@
-interface ListItemStyleProps {
-    $active?: boolean;
-    $visible?: boolean;
-    $toggleable?: boolean;
-}
-interface IndentStyleProps {
-    $level?: number;
-}
-interface IndicatorStyleProps {
-    $hasNestedSiblings?: boolean;
-}
-interface ExpandButtonStyleProps {
-    $expanded?: boolean;
-}
-export declare const ListItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ListItemStyleProps> & ListItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ListItemStyleProps> & ListItemStyleProps, never>>> & string;
-export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ListItemStyleProps> & ListItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ListItemStyleProps> & ListItemStyleProps, never>>> & string;
-export declare const Indent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$level"> & IndentStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$level"> & IndentStyleProps, never>>> & string;
-export declare const ExpandButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$expanded"> & ExpandButtonStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$expanded"> & ExpandButtonStyleProps, never>>> & string;
-export declare const UnexpandableIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const SelectionIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasNestedSiblings"> & IndicatorStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasNestedSiblings"> & IndicatorStyleProps, never>>> & string;
-export declare const CheckboxMixedIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const tokens: {
+    level: string;
+};
+export declare const listItemContainer: import("@linaria/core").LinariaClassName;
+export declare const listItemContainerHidden: import("@linaria/core").LinariaClassName;
+export declare const listItem: import("@linaria/core").LinariaClassName;
+export declare const listItemToggleable: import("@linaria/core").LinariaClassName;
+export declare const listItemActive: import("@linaria/core").LinariaClassName;
+export declare const indent: import("@linaria/core").LinariaClassName;
+export declare const expandButton: import("@linaria/core").LinariaClassName;
+export declare const expandButtonExpanded: import("@linaria/core").LinariaClassName;
+export declare const unexpandableIndicator: import("@linaria/core").LinariaClassName;
+export declare const selectionIndicator: import("@linaria/core").LinariaClassName;
+export declare const selectionIndicatorNested: import("@linaria/core").LinariaClassName;
+export declare const checkboxMixedIndicator: import("@linaria/core").LinariaClassName;

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

@@ -1,53 +1,2 @@
-import{MinusSquareFillIcon as i}from"@lifesg/react-icons/minus-square-fill";import e,{css as t}from"styled-components";import{Spacing as r,Radius as l,Colour as n,Motion as o}from"../../theme/index.js";const h=e.li`
-    display: ${i=>i.$visible?"flex":"none"};
-`,s=e.div`
-    flex: 1;
-    display: flex;
-    align-items: flex-start;
-    gap: ${r["spacing-8"]};
-    padding: ${r["spacing-12"]} ${r["spacing-8"]};
-    cursor: ${i=>i.$toggleable?"default":"pointer"};
-    overflow: hidden; // required for label to truncate properly
-    border-radius: ${l.none};
-    outline: none;
-
-    ${i=>i.$active&&t`
-            background: ${n["bg-hover"]};
-        `}
-`,a=e.div`
-    height: 1px;
-    width: calc((1lh + ${r["spacing-8"]}) * ${i=>i.$level});
-`,d=e.div`
-    width: 1lh;
-    height: 1lh;
-    color: ${n["icon-primary"]};
-    cursor: pointer;
-
-    svg {
-        width: 1lh;
-        height: 1lh;
-        transition: transform ${o["duration-350"]}
-            ${o["ease-standard"]};
-
-        ${i=>{if(i.$expanded)return t`
-                    transform: rotate(90deg);
-                `}}
-    }
-`,g=e.div`
-    width: 1lh;
-    height: 1lh;
-    margin-right: ${r["spacing-8"]};
-`,c=e.div`
-    flex-shrink: 0;
-    height: 1lh;
-    width: ${i=>i.$hasNestedSiblings?"1lh":r["spacing-16"]};
-
-    display: flex;
-    justify-content: center;
-`,p=e(i)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: 1lh;
-    color: ${n["icon-selected"]};
-`;export{p as CheckboxMixedIndicator,d as ExpandButton,a as Indent,s as ListItem,h as ListItemContainer,c as SelectionIndicator,g as UnexpandableIndicator};
+import"./nested-dropdown-list.styles_wdhxoe.css";const l={level:"--fds-internal-nestedDropdownList-indentLevel"},e="l6gdpz7",s="l2m1xi2",d="l7sjxgx",o="lda1ll2",n="l1lwwclz",t="i1roxhhm",i="e11oztmx",r="e18lkgul",x="uz6io6h",p="simvld9",w="s1en693q",c="c1an54qc";export{c as checkboxMixedIndicator,i as expandButton,r as expandButtonExpanded,t as indent,d as listItem,n as listItemActive,e as listItemContainer,s as listItemContainerHidden,o as listItemToggleable,p as selectionIndicator,w as selectionIndicatorNested,l as tokens,x as unexpandableIndicator};
 //# sourceMappingURL=nested-dropdown-list.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nested-dropdown-list.styles.js","sources":["../../../src/shared/dropdown-list/nested-dropdown-list.styles.tsx"],"sourcesContent":["import { MinusSquareFillIcon } from \"@lifesg/react-icons/minus-square-fill\";\nimport styled, { css } from \"styled-components\";\nimport { Colour, Motion, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ListItemStyleProps {\n    $active?: boolean;\n    $visible?: boolean;\n    $toggleable?: boolean;\n}\n\ninterface IndentStyleProps {\n    $level?: number;\n}\n\ninterface IndicatorStyleProps {\n    $hasNestedSiblings?: boolean;\n}\n\ninterface ExpandButtonStyleProps {\n    $expanded?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItemContainer = styled.li<ListItemStyleProps>`\n    display: ${(props) => (props.$visible ? \"flex\" : \"none\")};\n`;\n\nexport const ListItem = styled.div<ListItemStyleProps>`\n    flex: 1;\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: ${(props) => (props.$toggleable ? \"default\" : \"pointer\")};\n    overflow: hidden; // required for label to truncate properly\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n\n    ${(props) =>\n        props.$active &&\n        css`\n            background: ${Colour[\"bg-hover\"]};\n        `}\n`;\n\nexport const Indent = styled.div<IndentStyleProps>`\n    height: 1px;\n    width: calc((1lh + ${Spacing[\"spacing-8\"]}) * ${(props) => props.$level});\n`;\n\nexport const ExpandButton = styled.div<ExpandButtonStyleProps>`\n    width: 1lh;\n    height: 1lh;\n    color: ${Colour[\"icon-primary\"]};\n    cursor: pointer;\n\n    svg {\n        width: 1lh;\n        height: 1lh;\n        transition: transform ${Motion[\"duration-350\"]}\n            ${Motion[\"ease-standard\"]};\n\n        ${(props) => {\n            if (props.$expanded) {\n                return css`\n                    transform: rotate(90deg);\n                `;\n            }\n        }}\n    }\n`;\n\nexport const UnexpandableIndicator = styled.div`\n    width: 1lh;\n    height: 1lh;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const SelectionIndicator = styled.div<IndicatorStyleProps>`\n    flex-shrink: 0;\n    height: 1lh;\n    width: ${(props) =>\n        props.$hasNestedSiblings ? \"1lh\" : Spacing[\"spacing-16\"]};\n\n    display: flex;\n    justify-content: center;\n`;\n\nexport const CheckboxMixedIndicator = styled(MinusSquareFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-selected\"]};\n`;\n"],"names":["ListItemContainer","styled","li","props","$visible","ListItem","div","Spacing","$toggleable","Radius","$active","css","Colour","Indent","$level","ExpandButton","Motion","$expanded","UnexpandableIndicator","SelectionIndicator","$hasNestedSiblings","CheckboxMixedIndicator","MinusSquareFillIcon"],"mappings":"0MAiCO,MAAMA,EAAoBC,EAAOC,EAAsB;eAC9CC,GAAWA,EAAMC,SAAW,OAAS;EAGxCC,EAAWJ,EAAOK,GAAuB;;;;WAI3CC,EAAQ;eACJA,EAAQ,iBAAiBA,EAAQ;cACjCJ,GAAWA,EAAMK,YAAc,UAAY;;qBAErCC,EAAa;;;MAG3BN,GACCA,EAAMO,SACNC,CAAG;0BACeC,EAAO;;EAIpBC,EAASZ,EAAOK,GAAqB;;yBAEzBC,EAAQ,mBAAoBJ,GAAUA,EAAMW;EAGxDC,EAAed,EAAOK,GAA2B;;;aAGjDM,EAAO;;;;;;gCAMYI,EAAO;cACzBA,EAAO;;UAEVb,IACC,GAAIA,EAAMc,UACN,OAAON,CAAG;;iBAGd;;EAKCO,EAAwBjB,EAAOK,GAAG;;;oBAG3BC,EAAQ;EAGfY,EAAqBlB,EAAOK,GAAwB;;;aAGnDH,GACNA,EAAMiB,mBAAqB,MAAQb,EAAQ;;;;EAMtCc,EAAyBpB,EAAOqB,EAAoB;;;;aAIpDV,EAAO;"}
+{"version":3,"file":"nested-dropdown-list.styles.js","sources":["../../../src/shared/dropdown-list/nested-dropdown-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Motion, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const tokens = {\n    level: \"--fds-internal-nestedDropdownList-indentLevel\",\n};\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const listItemContainer = css`\n    display: flex;\n`;\n\nexport const listItemContainerHidden = css`\n    display: none;\n`;\n\nexport const listItem = css`\n    flex: 1;\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    overflow: hidden;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n`;\n\nexport const listItemToggleable = css`\n    cursor: default;\n`;\n\nexport const listItemActive = css`\n    background: ${Colour[\"bg-hover\"]};\n`;\n\nexport const indent = css`\n    ${tokens.level}: 0;\n    height: 1px;\n    width: calc((1lh + ${Spacing[\"spacing-8\"]}) * var(${tokens.level}));\n`;\n\nexport const expandButton = css`\n    width: 1lh;\n    height: 1lh;\n    color: ${Colour[\"icon-primary\"]};\n    cursor: pointer;\n\n    svg {\n        width: 1lh;\n        height: 1lh;\n        transition: transform ${Motion[\"duration-350\"]}\n            ${Motion[\"ease-standard\"]};\n    }\n`;\n\nexport const expandButtonExpanded = css`\n    svg {\n        transform: rotate(90deg);\n    }\n`;\n\nexport const unexpandableIndicator = css`\n    width: 1lh;\n    height: 1lh;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const selectionIndicator = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: ${Spacing[\"spacing-16\"]};\n    display: flex;\n    justify-content: center;\n`;\n\nexport const selectionIndicatorNested = css`\n    width: 1lh;\n`;\n\nexport const checkboxMixedIndicator = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-selected\"]};\n`;\n"],"names":["tokens","level","listItemContainer","listItemContainerHidden","listItem","listItemToggleable","listItemActive","indent","expandButton","expandButtonExpanded","unexpandableIndicator","selectionIndicator","selectionIndicatorNested","checkboxMixedIndicator"],"mappings":"qFAQO,MAAMA,EAAS,CAClBC,MAAO,iDAOEC,EAAiB,UAIjBC,EAAuB,UAIvBC,EAAQ,UAYRC,EAAkB,UAIlBC,EAAc,WAIdC,EAAM,WAMNC,EAAY,WAcZC,EAAoB,WAMpBC,EAAqB,UAMrBC,EAAkB,UAQlBC,EAAwB,WAIxBC,EAAsB"}

package/shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css

@@ -0,0 +1,12 @@
+@layer fds{.l6gdpz7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.l2m1xi2{display:none;}
+.l7sjxgx{-webkit-flex:1;-ms-flex:1;flex:1;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;overflow:hidden;border-radius:var(--fds-radius-none);outline:none;}
+.lda1ll2{cursor:default;}
+.l1lwwclz{background:var(--fds-colour-bg-hover);}
+.i1roxhhm{--fds-internal-nestedDropdownList-indentLevel:0;height:1px;width:calc((1lh + var(--fds-spacing-8)) * var(--fds-internal-nestedDropdownList-indentLevel));}
+.e11oztmx{width:1lh;height:1lh;color:var(--fds-colour-icon-primary);cursor:pointer;}.e11oztmx svg{width:1lh;height:1lh;-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
+.e18lkgul svg{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
+.uz6io6h{width:1lh;height:1lh;margin-right:var(--fds-spacing-8);}
+.simvld9{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.s1en693q{width:1lh;}
+.c1an54qc{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1lh;color:var(--fds-colour-icon-selected);}}

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

@@ -1,15 +1,38 @@
+/**
+ * How overflowing option text is truncated.
+ *
+ * - `"middle"` trims the centre of the text.
+ * - `"end"` trims from the right.
+ */
 export type TruncateType = "middle" | "end";
+/**
+ * Async load state for dropdown items.
+ *
+ * - `"loading"` while fetching.
+ * - `"fail"` on error (shows a call-to-action to retry).
+ * - `"success"` when ready.
+ */
 export type ItemsLoadStateType = "loading" | "fail" | "success";
+/** Controls whether secondary labels render inline or on a new line. */
 export type LabelDisplayType = "inline" | "next-line";
+/**
+ * Visual size variant for the dropdown.
+ *
+ * - `"default"` renders standard height.
+ * - `"small"` renders reduced height.
+ */
 export type DropdownVariantType = "small" | "default";
+/** Runtime context passed to a custom `renderListItem` callback. */
 export interface ListItemRenderArgs {
     selected: boolean;
     disabled: boolean;
 }
+/** Display model for a list item with an optional secondary label. */
 export interface ListItemDisplayProps {
     title: string;
     secondaryLabel?: string | undefined;
 }
+/** Overrides for built-in text labels rendered inside a dropdown. */
 export interface DropdownCustomLabelProps {
     searchPlaceholder?: string | undefined;
     noResultsLabel?: string | undefined;
@@ -19,50 +42,51 @@ export interface DropdownCustomLabelProps {
     allSelectedLabel?: string | undefined;
     multiSelectedLabel?: string | undefined;
 }
+/** Props controlling how dropdown items are displayed and rendered. */
 export interface DropdownDisplayProps<T, V> {
-    /** Function to derive value from an item */
+    /** Extracts the comparable value from an option item. */
     valueExtractor?: ((item: T) => V) | undefined;
-    /** Function to derive options display value from an item */
+    /** Extracts the display text for a list item. */
     listExtractor?: ((item: T) => string | ListItemDisplayProps) | undefined;
     /** Returns `true` if the given option should be shown but not selectable. */
     isOptionDisabled?: ((item: T) => boolean) | undefined;
     /** Renders a fully custom element for each list item. */
     renderListItem?: ((item: T, args: ListItemRenderArgs) => JSX.Element) | undefined;
     /**
-     * Function to render a custom call-to-action component at the bottom of the dropdown list.
-     * @param hideOptions - A function that can be called to hide the dropdown list.
-     * @param options - The currently displayed list items in the dropdown list.
-     * @returns A JSX.Element representing the custom call-to-action component.
+     * Renders a custom call-to-action at the bottom of the dropdown list.
+     *
+     * @param hideOptions Callback to programmatically close the dropdown.
+     * @param options The currently displayed list items.
      */
     renderCustomCallToAction?: ((hideOptions: () => void, options: T[]) => JSX.Element) | undefined;
 }
+/** Props controlling the search functionality within a dropdown. */
 export interface DropdownSearchProps<T> {
-    /** Specifying will render a search bar in the dropdown */
+    /** Renders a search bar inside the dropdown when `true`. */
     enableSearch?: boolean | undefined;
-    /** If specified, the default no results display will not be rendered */
+    /** Suppresses the built-in "no results" message when `true`. */
     hideNoResultsDisplay?: boolean | undefined;
-    /** @deprecated use `noResultsDescription` inside `customLabels` */
+    /** @deprecated Use `noResultsDescription` inside `customLabels`. */
     noResultsDescription?: React.ReactNode | undefined;
-    /** @deprecated use `searchPlaceholder` inside `customLabels` */
+    /** @deprecated Use `searchPlaceholder` inside `customLabels`. */
     searchPlaceholder?: string | undefined;
-    /** Custom function to perform search when a user keys in a value in the search input */
+    /** Custom filter function invoked on each keystroke in the search input. */
     searchFunction?: ((searchValue: string) => T[]) | undefined;
+    /** Called when the user types in the search input. */
     onSearch?: (() => void) | undefined;
 }
+/** Internal configuration props for the dropdown list behaviour. */
 export interface DropdownConfigProps {
     multiSelect?: boolean | undefined;
     maxSelectable?: number | undefined;
     customLabels?: DropdownCustomLabelProps | undefined;
-    /**
-     * Used when items are loaded from an api call.
-     * Values: "loading" | "fail" | "success"
-     */
+    /** Async load state driving the loading spinner, error retry, or list render. */
     itemsLoadState?: ItemsLoadStateType | undefined;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
+    /** How overflowing item text is truncated. */
     itemTruncationType?: TruncateType | undefined;
-    /** Specifies the maximum number of lines visible before the label is truncated for "end" type */
+    /** Maximum visible lines before the label is truncated (applies to `"end"` truncation). */
     itemMaxLines?: number | undefined;
-    /** Specifies the variant type. Small type will have shorter height. Values: "default" | "small" */
+    /** Visual size variant for the dropdown items. */
     variant?: DropdownVariantType | undefined;
 }
 export interface DropdownListProps<T, V> extends DropdownDisplayProps<T, V>, DropdownSearchProps<T>, DropdownConfigProps {
@@ -89,19 +113,27 @@ export interface DropdownListApi {
         preferSelected?: boolean;
     }) => void;
 }
+/** A leaf node in a nested dropdown tree (has no children). */
 export interface NestedDropdownListLeafItem<T> {
     key: string;
     label: string;
     value: T;
     subItems?: never | undefined;
 }
+/** A parent node in a nested dropdown tree (has child `subItems`). */
 export interface NestedDropdownListParentItem<T> {
     key: string;
     label: string;
     value: T;
     subItems: NestedDropdownListItemProps<T>[];
 }
+/**
+ * A single node in a nested dropdown tree.
+ *
+ * Presence of `subItems` discriminates parent nodes from leaf nodes.
+ */
 export type NestedDropdownListItemProps<T> = NestedDropdownListLeafItem<T> | NestedDropdownListParentItem<T>;
+/** Internal enriched representation of a nested dropdown item with computed tree state. */
 export interface NestedDropdownListLocalItem<T> {
     item: NestedDropdownListItemProps<T>;
     index: number;
@@ -120,6 +152,7 @@ export interface NestedDropdownListLocalItem<T> {
     matched: boolean;
     hasMatchedSubItems: boolean;
 }
+/** Initial expand/collapse state for nested dropdown items when the list opens. */
 export type ExpandMode = "default" | "expand" | "collapse";
 export interface NestedDropdownListProps<T> extends DropdownSearchProps<NestedDropdownListItemProps<T>>, DropdownConfigProps {
     listItems: NestedDropdownListItemProps<T>[];

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

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
-import { Components } from "react-virtuoso";
+import type { ComponentProps } from "react";
+import type { Components } from "react-virtuoso";
 interface VirtuosoContext {
     listProps: React.HTMLAttributes<HTMLDivElement>;
     listItemProps: React.HTMLAttributes<HTMLDivElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"virtuoso-components.js","sources":["../../../src/shared/dropdown-list/virtuoso-components.tsx"],"sourcesContent":["import { ComponentProps, forwardRef } from \"react\";\nimport { Components } from \"react-virtuoso\";\n\ninterface VirtuosoContext {\n    listProps: React.HTMLAttributes<HTMLDivElement>;\n    listItemProps: React.HTMLAttributes<HTMLDivElement>;\n}\n\ntype VirtuosoListProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"List\"],\n    undefined\n>;\n\ntype VirtuosoItemProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"Item\"],\n    undefined\n>;\n\nconst List = (\n    props: ComponentProps<VirtuosoListProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, ...otherProps } = props;\n    return <div ref={ref} {...context?.listProps} {...otherProps} />;\n};\n\nexport const VirtuosoList = forwardRef(List);\n\nconst Item = (\n    props: ComponentProps<VirtuosoItemProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, item: _item, ...otherProps } = props;\n\n    return <div ref={ref} {...context?.listItemProps} {...otherProps} />;\n};\n\nexport const VirtuosoItem = forwardRef(Item);\n"],"names":["VirtuosoList","forwardRef","props","ref","context","otherProps","__rest","_jsx","Object","assign","listProps","VirtuosoItem","item","_item","listItemProps"],"mappings":"6HAkBA,MAQaA,EAAeC,GARf,CACTC,EACAC,KAEA,MAAMC,QAAEA,GAA2BF,EAAfG,EAAUC,EAAKJ,EAA7B,CAAA,YACN,OAAOK,EAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASM,UAAeL,GAAc,IAcvDM,EAAeV,GATf,CACTC,EACAC,KAEA,MAAMC,QAAEA,EAASQ,KAAMC,GAAyBX,EAAfG,EAAUC,EAAKJ,EAA1C,CAAA,UAAA,SAEN,OAAOK,EAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASU,cAAmBT,GAAc"}
+{"version":3,"file":"virtuoso-components.js","sources":["../../../src/shared/dropdown-list/virtuoso-components.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { Components } from \"react-virtuoso\";\n\ninterface VirtuosoContext {\n    listProps: React.HTMLAttributes<HTMLDivElement>;\n    listItemProps: React.HTMLAttributes<HTMLDivElement>;\n}\n\ntype VirtuosoListProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"List\"],\n    undefined\n>;\n\ntype VirtuosoItemProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"Item\"],\n    undefined\n>;\n\nconst List = (\n    props: ComponentProps<VirtuosoListProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, ...otherProps } = props;\n    return <div ref={ref} {...context?.listProps} {...otherProps} />;\n};\n\nexport const VirtuosoList = forwardRef(List);\n\nconst Item = (\n    props: ComponentProps<VirtuosoItemProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, item: _item, ...otherProps } = props;\n\n    return <div ref={ref} {...context?.listItemProps} {...otherProps} />;\n};\n\nexport const VirtuosoItem = forwardRef(Item);\n"],"names":["VirtuosoList","forwardRef","props","ref","context","otherProps","__rest","_jsx","Object","assign","listProps","VirtuosoItem","item","_item","listItemProps"],"mappings":"6HAmBA,MAQaA,EAAeC,GARf,CACTC,EACAC,KAEA,MAAMC,QAAEA,GAA2BF,EAAfG,EAAUC,EAAKJ,EAA7B,CAAA,YACN,OAAOK,EAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASM,UAAeL,GAAc,IAcvDM,EAAeV,GATf,CACTC,EACAC,KAEA,MAAMC,QAAEA,EAASQ,KAAMC,GAAyBX,EAAfG,EAAUC,EAAKJ,EAA1C,CAAA,UAAA,SAEN,OAAOK,EAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASU,cAAmBT,GAAc"}

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

@@ -0,0 +1,4 @@
+import type { LabelContainerProps, ValueLabelProps } from "./types";
+export declare const ValueLabel: ({ variant, truncateType, children, }: ValueLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PlaceholderLabel: ({ variant, truncateType, children, }: ValueLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LabelContainer: (props: LabelContainerProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/shared/dropdown-wrapper/dropdown-wrapper.js

@@ -0,0 +1,2 @@
+import{jsx as a}from"react/jsx-runtime";import r from"clsx";import{forwardRef as t}from"react";import{labelContainer as e,valueLabel as i,placeholderLabel as d}from"./dropdown-wrapper.styles.js";const n=({variant:r,truncateType:t,children:e})=>a("div",{className:i,"data-variant":r,"data-truncate":t,children:e}),c=({variant:t,truncateType:e,children:n})=>a("div",{className:r(i,d),"data-variant":t,"data-truncate":e,children:n}),s=t((function({disabled:r,children:t},i){return a("div",{className:e,"data-disabled":r,ref:i,children:t})}));export{s as LabelContainer,c as PlaceholderLabel,n as ValueLabel};
+//# sourceMappingURL=dropdown-wrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-wrapper.js","sources":["../../../src/shared/dropdown-wrapper/dropdown-wrapper.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport * as styles from \"./dropdown-wrapper.styles\";\nimport type { LabelContainerProps, ValueLabelProps } from \"./types\";\n\nexport const ValueLabel = ({\n    variant,\n    truncateType,\n    children,\n}: ValueLabelProps) => (\n    <div\n        className={styles.valueLabel}\n        data-variant={variant}\n        data-truncate={truncateType}\n    >\n        {children}\n    </div>\n);\n\nexport const PlaceholderLabel = ({\n    variant,\n    truncateType,\n    children,\n}: ValueLabelProps) => (\n    <div\n        className={clsx(styles.valueLabel, styles.placeholderLabel)}\n        data-variant={variant}\n        data-truncate={truncateType}\n    >\n        {children}\n    </div>\n);\n\nexport const LabelContainer = forwardRef<HTMLDivElement, LabelContainerProps>(\n    function LabelContainer({ disabled, children }, ref) {\n        return (\n            <div\n                className={styles.labelContainer}\n                data-disabled={disabled}\n                ref={ref}\n            >\n                {children}\n            </div>\n        );\n    }\n);\n"],"names":["ValueLabel","variant","truncateType","children","_jsx","className","styles.valueLabel","PlaceholderLabel","clsx","styles.placeholderLabel","LabelContainer","forwardRef","disabled","ref","styles.labelContainer"],"mappings":"mMAMO,MAAMA,EAAa,EACtBC,UACAC,eACAC,cAEAC,EAAA,MAAA,CACIC,UAAWC,EAAiB,eACdL,EAAO,gBACNC,EAAYC,SAE1BA,IAIII,EAAmB,EAC5BN,UACAC,eACAC,cAEAC,EAAA,MAAA,CACIC,UAAWG,EAAKF,EAAmBG,GAAwB,eAC7CR,EAAO,gBACNC,WAEdC,IAIIO,EAAiBC,GAC1B,UAAwBC,SAAEA,EAAQT,SAAEA,GAAYU,GAC5C,OACIT,EAAA,MAAA,CACIC,UAAWS,EAAqB,gBACjBF,EACfC,IAAKA,WAEJV,GAGb"}