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

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

@@ -1,66 +0,0 @@
-import e,{css as i}from"styled-components";import{V3_Font as l,V3_Colour as t}from"../../v3_theme/index.js";import{lineClampCss as o}from"../styles/index.js";const r=e.div`
-    font-weight: ${e=>e.$bold?l.Spec["weight-semibold"]:l.Spec["weight-regular"]};
-
-    ${e=>e.$disabled?i`
-                color: ${t["text-disabled"]};
-            `:e.$selected?i`
-                color: ${t["text-selected"]};
-            `:i`
-                color: ${t.text};
-            `}
-    width: 100%;
-
-    ${e=>"end"===e.$truncateType&&o(e.$maxLines||2)}
-    overflow-wrap: break-word;
-`,d=e.div`
-    color: ${t["text-subtlest"]};
-    width: 100%;
-
-    ${e=>"end"===e.$truncateType&&o(e.$maxLines||2)}
-    overflow-wrap: break-word;
-
-    ${e=>"next-line"===e.$labelDisplayType?i`
-                    ${l["body-md-semibold"]}
-                `:i`
-                    ${l["body-baseline-regular"]}
-                `}
-`,n=e.span`
-    font-weight: ${l.Spec["weight-semibold"]};
-`,a=e.div`
-    text-align: left;
-    width: 100%;
-    overflow: hidden;
-    overflow-wrap: break-word;
-
-    ${e=>"small"===e.$variant?l["body-md-regular"]:l["body-baseline-regular"]}
-
-    ${e=>{switch(e.$labelDisplayType){case"next-line":return i`
-                    display: flex;
-                    flex-direction: column;
-                `;case"inline":return i`
-                    ${r} {
-                        display: inline;
-                    }
-
-                    ${d} {
-                        display: inline;
-                        margin-left: 0.5rem;
-                    }
-                `}}}
-`,s=e.div`
-    display: inline-block;
-    width: ${e=>1===e.$maxLines?50:100}%;
-    height: 1lh;
-    word-break: break-all;
-    overflow: hidden;
-`,$=e.div`
-    display: inline-block;
-    width: ${e=>1===e.$maxLines?50:100}%;
-    height: 1lh;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    direction: rtl;
-    text-align: right;
-`;export{a as Label,n as MatchedText,r as PrimaryText,d as SecondaryText,s as TruncateFirstLine,$ as TruncateSecondLine};
-//# sourceMappingURL=dropdown-label.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-label.styles.js","sources":["../../../src/shared/dropdown-list-v2/dropdown-label.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font } from \"../../v3_theme\";\nimport type {\n    DropdownVariantType,\n    LabelDisplayType,\n    TruncateType,\n} from \"../dropdown-list/types\";\nimport { lineClampCss } from \"../styles\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface LabelStyleProps {\n    $labelDisplayType: LabelDisplayType;\n    $variant: DropdownVariantType;\n}\n\ninterface LabelTextStyleProps {\n    $labelDisplayType?: LabelDisplayType;\n    $maxLines?: number;\n    $selected?: boolean;\n    $disabled?: boolean;\n    $truncateType?: TruncateType;\n    $bold?: boolean;\n}\n\ninterface MatchedTextStyleProps {\n    $variant: DropdownVariantType;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const PrimaryText = styled.div<LabelTextStyleProps>`\n    font-weight: ${(props) =>\n        props.$bold\n            ? V3_Font.Spec[\"weight-semibold\"]\n            : V3_Font.Spec[\"weight-regular\"]};\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"text-disabled\"]};\n            `;\n        } else if (props.$selected) {\n            return css`\n                color: ${V3_Colour[\"text-selected\"]};\n            `;\n        } else {\n            return css`\n                color: ${V3_Colour[\"text\"]};\n            `;\n        }\n    }}\n    width: 100%;\n\n    ${(props) =>\n        props.$truncateType === \"end\" && lineClampCss(props.$maxLines || 2)}\n    overflow-wrap: break-word;\n`;\n\nexport const SecondaryText = styled.div<LabelTextStyleProps>`\n    color: ${V3_Colour[\"text-subtlest\"]};\n    width: 100%;\n\n    ${(props) =>\n        props.$truncateType === \"end\" && lineClampCss(props.$maxLines || 2)}\n    overflow-wrap: break-word;\n\n    ${(props) => {\n        switch (props.$labelDisplayType) {\n            case \"next-line\":\n                return css`\n                    ${V3_Font[\"body-md-semibold\"]}\n                `;\n            case \"inline\":\n            default:\n                return css`\n                    ${V3_Font[\"body-baseline-regular\"]}\n                `;\n        }\n    }}\n`;\n\nexport const MatchedText = styled.span<MatchedTextStyleProps>`\n    font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const Label = styled.div<LabelStyleProps>`\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    overflow-wrap: break-word;\n\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n\n    ${(props) => {\n        switch (props.$labelDisplayType) {\n            case \"next-line\":\n                return css`\n                    display: flex;\n                    flex-direction: column;\n                `;\n            case \"inline\":\n                return css`\n                    ${PrimaryText} {\n                        display: inline;\n                    }\n\n                    ${SecondaryText} {\n                        display: inline;\n                        margin-left: 0.5rem;\n                    }\n                `;\n        }\n    }}\n`;\n\nexport const TruncateFirstLine = styled.div<LabelTextStyleProps>`\n    display: inline-block;\n    width: ${(props) => (props.$maxLines === 1 ? 50 : 100)}%;\n    height: 1lh;\n    word-break: break-all;\n    overflow: hidden;\n`;\n\nexport const TruncateSecondLine = styled.div<LabelTextStyleProps>`\n    display: inline-block;\n    width: ${(props) => (props.$maxLines === 1 ? 50 : 100)}%;\n    height: 1lh;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    direction: rtl;\n    text-align: right;\n`;\n"],"names":["PrimaryText","styled","div","props","$bold","V3_Font","Spec","$disabled","css","V3_Colour","$selected","$truncateType","lineClampCss","$maxLines","SecondaryText","$labelDisplayType","MatchedText","span","Label","$variant","TruncateFirstLine","TruncateSecondLine"],"mappings":"8JAmCO,MAAMA,EAAcC,EAAOC,GAAwB;mBACtCC,GACZA,EAAMC,MACAC,EAAQC,KAAK,mBACbD,EAAQC,KAAK;;MAEpBH,GACKA,EAAMI,UACCC,CAAG;yBACGC,EAAU;cAEhBN,EAAMO,UACNF,CAAG;yBACGC,EAAU;cAGhBD,CAAG;yBACGC,EAAgB;;;;MAMlCN,GACyB,QAAxBA,EAAMQ,eAA2BC,EAAaT,EAAMU,WAAa;;EAI5DC,EAAgBb,EAAOC,GAAwB;aAC/CO,EAAU;;;MAGhBN,GACyB,QAAxBA,EAAMQ,eAA2BC,EAAaT,EAAMU,WAAa;;;MAGlEV,GAEU,cADDA,EAAMY,kBAECP,CAAG;sBACJH,EAAQ;kBAIPG,CAAG;sBACJH,EAAQ;;EAMjBW,EAAcf,EAAOgB,IAA2B;mBAC1CZ,EAAQC,KAAK;EAGnBY,EAAQjB,EAAOC,GAAoB;;;;;;MAMzCC,GACoB,UAAnBA,EAAMgB,SACAd,EAAQ,mBACRA,EAAQ;;MAEfF,IACC,OAAQA,EAAMY,mBACV,IAAK,YACD,OAAOP,CAAG;;;kBAId,IAAK,SACD,OAAOA,CAAG;sBACJR;;;;sBAIAc;;;;;EASTM,EAAoBnB,EAAOC,GAAwB;;aAElDC,GAA+B,IAApBA,EAAMU,UAAkB,GAAK;;;;EAMzCQ,EAAqBpB,EAAOC,GAAwB;;aAEnDC,GAA+B,IAApBA,EAAMU,UAAkB,GAAK;;;;;;;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-list-state.js","sources":["../../../src/shared/dropdown-list-v2/dropdown-list-state.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\ninterface DropdownListStateProps {\n    children: React.ReactNode;\n}\n\ninterface DropdownListStateContextProps {\n    focusedIndex: number;\n    setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;\n}\n\nexport const DropdownListStateContext =\n    React.createContext<DropdownListStateContextProps>({\n        focusedIndex: -1,\n        setFocusedIndex: () => {\n            // do nothing\n        },\n    });\n\nexport const DropdownListState = ({ children }: DropdownListStateProps) => {\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n    return (\n        <DropdownListStateContext.Provider\n            value={{\n                focusedIndex,\n                setFocusedIndex,\n            }}\n        >\n            {children}\n        </DropdownListStateContext.Provider>\n    );\n};\n"],"names":["DropdownListStateContext","React","createContext","focusedIndex","setFocusedIndex","DropdownListState","children","useState","_jsx","Provider","value"],"mappings":"4EAWO,MAAMA,EACTC,EAAMC,cAA6C,CAC/CC,cAAc,EACdC,gBAAiB,SAKZC,EAAoB,EAAGC,eAChC,MAAOH,EAAcC,GAAmBG,GAAiB,GAEzD,OACIC,EAACR,EAAyBS,SAAQ,CAC9BC,MAAO,CACHP,eACAC,mBACHE,SAEAA,GAC+B"}

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

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

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

@@ -1,2 +0,0 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import n from"../../external/lodash/find.js";import l from"../../external/lodash/isEqual.js";import{forwardRef as o,useContext as i,useState as s,useRef as a,useCallback as d,useImperativeHandle as u,useEffect as c}from"react";import{Virtuoso as m}from"react-virtuoso";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as v}from"../../util/merge-refs.js";import"../../util/string-helper.js";import{useEvent as f}from"../../util/use-event.js";import{useEventListener as p}from"../../util/use-event-listener.js";import{useIsMounted as h}from"../../util/use-mount.js";import{useCompare as x}from"../../util/use-previous.js";import"../dropdown-wrapper/dropdown-wrapper.styles.js";import{useDropdownRender as b}from"../dropdown-wrapper/element-with-dropdown.js";import{DropdownLabel as g}from"./dropdown-label.js";import{Container as w,List as y,SelectAllContainer as T,SelectAllButton as j,ResultStateContainer as I,LabelIcon as L,NoResultDescContainer as S,Spinner as C,TryAgainButton as D,Listbox as E,ListItem as $,CheckboxDisabledIndicator as k,CheckboxSelectedIndicator as A,CheckboxUnselectedIndicator as F,SelectedIndicator as R,UnselectedIndicator as M}from"./dropdown-list.styles.js";import{DropdownListStateContext as N}from"./dropdown-list-state.js";import{DropdownSearch as O}from"./dropdown-search.js";const P=o((({listItems:o,multiSelect:P,maxSelectable:_,selectedItems:W,disableItemFocus:B,itemsLoadState:q="success",itemTruncationType:z="end",itemMaxLines:U=2,labelDisplayType:V="inline",variant:G="default",listboxId:H,matchElementWidth:J=!1,width:K,topScrollItem:Q,onSelectItem:X,onSelectAll:Y,onDismiss:Z,onRetry:ee,valueExtractor:te,listExtractor:re,renderListItem:ne,renderCustomCallToAction:le,enableSearch:oe,hideNoResultsDisplay:ie,noResultsDescription:se,customLabels:ae,searchPlaceholder:de,searchFunction:ue,onSearch:ce},me)=>{const{noResultsLabel:ve="No results found.",selectAllButtonLabel:fe="Select all",clearAllButtonLabel:pe="Clear all"}=ae||{},he=(null==ae?void 0:ae.searchPlaceholder)||de||"Search",xe=(null==ae?void 0:ae.noResultsDescription)||se,{focusedIndex:be,setFocusedIndex:ge}=i(N),{elementWidth:we,setFloatingRef:ye,getFloatingProps:Te,styles:je}=b(),[Ie,Le]=s(""),[Se,Ce]=s(null!=o?o:[]),De=x(q),Ee=h(),$e=a(null),ke=a(null),Ae=a([]),Fe=a(null),Re=a(null),Me=!!_&&!!W&&(null==W?void 0:W.length)===_,Ne=e=>{const t=re?re(e):null==e?void 0:e.toString();return"object"==typeof t?{title:t.title,secondaryLabel:t.secondaryLabel}:{title:null!=t?t:""}},Oe=d((e=>!!n(W,(t=>l(t,e)))),[W]),Pe=f((()=>null==ue?void 0:ue(Ie))),_e=f((()=>null==o?void 0:o.filter((e=>{const{title:t,secondaryLabel:r}=Ne(e),n=Ie.trim().toLowerCase();return t.toLowerCase().includes(n)||r&&r.toLowerCase().includes(n)})))),We=d((e=>{var t,r;if(B)return;if(Fe.current)return ge(-1),void setTimeout((()=>{var e;return null===(e=Fe.current)||void 0===e?void 0:e.focus()}),0);const n=null!=Se?Se:[];if(0===n.length)return;if(void 0!==(null==e?void 0:e.index)){const r=Math.max(0,Math.min(e.index,n.length-1));return null===(t=Re.current)||void 0===t||t.scrollToIndex({index:r,align:"center"}),ge(r),void setTimeout((()=>{var e;return null===(e=Ae.current[r])||void 0===e?void 0:e.focus()}),0)}const l=(null==e?void 0:e.preferSelected)?n.findIndex((e=>Oe(e))):-1,o=-1!==l?l:be>=0&&be<n.length?be:0;null===(r=Re.current)||void 0===r||r.scrollToIndex({index:o,align:"center"}),ge(o),setTimeout((()=>{var e;return null===(e=Ae.current[o])||void 0===e?void 0:e.focus()}),0)}),[Oe,B,Se,be,ge]),Be=(e,t)=>{Me&&!Oe(e)||(ge(t),null==X||X(e,(e=>te?te(e):e)(e)))},qe=e=>{const t=e.target.value;Le(t),null==ce||ce()},ze=()=>{var e;Le(""),null===(e=Fe.current)||void 0===e||e.focus(),null==ce||ce()},Ue=()=>null==ee?void 0:ee();p("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":if(e.preventDefault(),be<Se.length-1){const e=be+1;null===(t=Ae.current[e])||void 0===t||t.focus(),ge(e)}break;case"ArrowUp":if(e.preventDefault(),be>0){const e=be-1;null===(r=Ae.current[e])||void 0===r||r.focus(),ge(e)}else 0===be&&Fe.current&&(Fe.current.focus(),ge(-1));break;case"Space":case"Enter":document.activeElement===Ae.current[be]&&(e.preventDefault(),Se[be]&&Be(Se[be],be))}})),u(me,(()=>({refocus:We})),[We]),c((()=>{var e;if(!Q)return void(null===(e=Re.current)||void 0===e||e.scrollTo({top:0}));const t=setTimeout((()=>{if(!o)return;const e=o.indexOf(Q);Re.current&&-1!==e&&(Re.current.scrollToIndex({index:e}),ge(e))}),0);return()=>clearTimeout(t)}),[Ae,o,ge,Q]),c((()=>{B||Ee&&De&&"success"===q&&Fe.current&&(ge(-1),Fe.current.focus())}),[Ee,De,q,ge,B]),c((()=>{var e;Ce(null!==(e=""===Ie?o:ue?Pe():_e())&&void 0!==e?e:[])}),[Pe,_e,o,ue,Ie]),c((()=>{var e,t,r;if(Ee)return;if(B||!o)return;const n=o.findIndex((e=>Oe(e)));Fe.current?(ge(-1),setTimeout((()=>{var e;return null===(e=Fe.current)||void 0===e?void 0:e.focus()}),200)):be>0?(null===(e=Re.current)||void 0===e||e.scrollToIndex({index:be,align:"center"}),setTimeout((()=>{var e;return null===(e=Ae.current[be])||void 0===e?void 0:e.focus()}),200)):-1!==n?(null===(t=Re.current)||void 0===t||t.scrollToIndex({index:n,align:"center"}),ge(n),setTimeout((()=>{var e;return null===(e=Ae.current[n])||void 0===e?void 0:e.focus()}),200)):(null===(r=Re.current)||void 0===r||r.scrollToIndex({index:0}),ge(0),setTimeout((()=>{var e;return null===(e=Ae.current[0])||void 0===e?void 0:e.focus()}),200))}),[Oe,B,be,o,Ee,ge]);const Ve=e=>P?t(Me&&!e?k:e?A:F,{"aria-hidden":!0}):e?t(R,{"aria-hidden":!0}):t(M,{}),Ge=(e,r)=>{const{title:n,secondaryLabel:l}=Ne(e);return t(g,{displayType:V,label:n,maxLines:U,selected:r,disabled:!r&&Me,sublabel:l,truncationType:z,variant:G})},He=(n,l)=>{if(!ee||"success"===q){const o=Oe(n),i=l===be;return t($,{"aria-selected":o,"aria-multiselectable":P,"aria-disabled":!o&&Me,"aria-posinset":l+1,"aria-setsize":null==Se?void 0:Se.length,"data-testid":"list-item",onClick:()=>Be(n,l),onMouseEnter:()=>(e=>ge(e))(l),ref:e=>{Ae.current[l]=e},role:"option",tabIndex:i?0:-1,$active:i,$selected:o,$disabled:!o&&Me,children:ne?ne(n,{selected:o}):e(r,{children:[Ve(o),Ge(n,o)]})},((e,t)=>`item_${t}__${te?te(e):e}`)(n,l))}},Je=()=>{if((oe||ue)&&"success"===q)return t(O,{ref:Fe,onChange:qe,value:Ie,placeholder:he,"data-testid":"search-input","aria-label":"Enter text to search",onClear:ze,variant:G})},Ke=()=>{if(W&&P&&Se.length>0&&!Ie&&"success"===q)return t(T,{children:t(j,{onClick:Y,type:"button",$variant:G,children:_||0!==W.length?pe:fe})})},Qe=()=>{if(!ie&&(Ie||!oe)&&0===Se.length&&"success"===q)return e(r,{children:[e(I,{"data-testid":"list-no-results",children:[t(L,{"data-testid":"no-result-icon"}),ve]}),xe&&t(S,{"data-testid":"no-result-desc",children:xe})]})},Xe=()=>{if(ee&&"loading"===q)return e(I,{"data-testid":"list-loading",children:[t(C,{}),"Loading..."]})},Ye=()=>{if(ee&&"fail"===q)return e(I,{"data-testid":"list-fail",children:[t(L,{"data-testid":"load-error-icon"}),"Failed to load. ",t(D,{onClick:Ue,type:"button",$variant:G,children:"Try again."})]})},Ze=()=>{var e;const r="test"===process.env.NODE_ENV;return t(E,{role:"listbox",id:H,children:t(m,Object.assign({ref:Re,style:{height:"100%"},data:Se,customScrollParent:null!==(e=$e.current)&&void 0!==e?e:void 0,itemContent:(e,t)=>He(t,e)},r?{initialItemCount:Se.length}:{}),r?Se.length:void 0)})};return e(w,Object.assign({"data-testid":"dropdown-container",ref:v($e,ye),style:je},Te(),{$width:J?we:void 0,$customWidth:K,$variant:G,children:[e(y,{ref:ke,"data-testid":"dropdown-list",children:[Je(),Ke(),Qe(),Xe(),Ye(),Ze()]}),(()=>{if(le)return t("div",{"data-testid":"custom-cta",children:le(Z,Se)})})()]}))}));export{P as DropdownList};
-//# sourceMappingURL=dropdown-list.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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