npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2348) hide show

package/cjs/shared/dropdown-list/expandable-element.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./expandable-element.styles_5o9f9w.css");exports.iconContainer="i1r624au",exports.iconContainerExpanded="icaxgep",exports.selector="s14ftgne",exports.selectorEditable="s11rk48k",exports.selectorReadOnly="s2pr33o",exports.selectorVariantSmall="s14xk9xz";
2	+ //# sourceMappingURL=expandable-element.styles.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"expandable-element.styles.js","sources":["../../../../src/shared/dropdown-list/expandable-element.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const selector = css`\n display: flex;\n align-items: center;\n gap: ${Spacing[\"spacing-8\"]};\n width: 100%;\n\n ${Font[\"body-baseline-regular\"]}\n height: calc(3rem - 2px);\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: -2px;\n }\n`;\n\nexport const selectorVariantSmall = css`\n ${Font[\"body-md-regular\"]}\n height: calc(2.5rem - 2px);\n`;\n\nexport const selectorReadOnly = css`\n padding: 0 ${Spacing[\"spacing-16\"]};\n`;\n\nexport const selectorEditable = css`\n padding: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const iconContainer = css`\n display: flex;\n align-items: center;\n transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n svg {\n color: ${Colour[\"icon\"]};\n height: 1em;\n width: 1em;\n }\n`;\n\nexport const iconContainerExpanded = css`\n transform: rotate(180deg);\n`;\n"],"names":[],"mappings":"yHAwC0B,yCAYQ,2BA5Cb,oCA4BQ,oCAJA,uCALI"}

package/cjs/shared/dropdown-list/expandable-element.styles_5o9f9w.css ADDED Viewed

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

package/cjs/shared/dropdown-list/nested-dropdown-list-helpers.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"nested-dropdown-list-helpers.js","sources":["../../../../src/shared/dropdown-list/nested-dropdown-list-helpers.ts"],"sourcesContent":["import { produce } from \"immer\";\nimport isEmpty from \"lodash/isEmpty\";\nimport isEqual from \"lodash/isEqual\";\n\nimport type {\n NestedDropdownListItemProps,\n NestedDropdownListLocalItem,\n} from \"./types\";\n\n/**\n * builds a flattened representation of the tree\n * the items are listed in their visual order\n */\nexport const flattenList = <T>(\n nestedList: NestedDropdownListItemProps<T>[],\n selectedKeyPaths: Set<string>,\n multiSelect: boolean,\n searchTerm: string,\n initialExpanded: boolean\n): NestedDropdownListLocalItem<T>[] => {\n const items: NestedDropdownListLocalItem<T>[] = [];\n\n const flatten = (\n list: NestedDropdownListItemProps<T>[],\n parentItem: NestedDropdownListLocalItem<T> | undefined\n ) => {\n const current: NestedDropdownListLocalItem<T>[] = [];\n const hasNestedSiblings = list.some(\n (option) => option.subItems?.length\n );\n\n list.forEach((option, i) => {\n const level = parentItem ? parentItem.level + 1 : 0;\n const keyPath = parentItem\n ? [...parentItem.keyPath, option.key]\n : [option.key];\n const keyPathString = buildKeyPath(keyPath);\n\n const item: (typeof items)[number] = {\n item: option,\n index: items.length,\n indexInParent: i,\n parentSetSize: list.length,\n keyPath,\n parentIndex: parentItem ? parentItem.index : -1,\n parentKeyPath: parentItem ? parentItem.keyPath : [],\n level,\n visible:\n level === 0 ||\n initialExpanded ||\n parentItem?.expanded ||\n false,\n expanded: initialExpanded,\n checked: selectedKeyPaths.has(keyPathString),\n hasSubItems: !!option.subItems?.length,\n subItemIndexes: [],\n hasNestedSiblings,\n matched: searchTerm\n ? option.label.toLowerCase().indexOf(searchTerm) !== -1\n : false,\n hasMatchedSubItems: false,\n };\n current.push(item);\n items.push(item);\n\n if (option.subItems?.length) {\n const children = flatten(option.subItems, item);\n\n if (multiSelect && item.checked !== true) {\n const allChildrenSelected = children.every(\n (child) => child.checked === true\n );\n const mixed = children.some(\n (child) => child.checked !== false\n );\n\n if (allChildrenSelected) {\n item.checked = true;\n } else if (mixed) {\n item.checked = \"mixed\";\n }\n }\n\n item.hasMatchedSubItems = children.some(\n (child) => child.matched || child.hasMatchedSubItems\n );\n item.subItemIndexes = children.map((child) => child.index);\n }\n });\n return current;\n };\n\n flatten(nestedList, undefined);\n return items;\n};\n\nexport const expandSelectedSubtrees = <T>(\n list: NestedDropdownListLocalItem<T>[]\n) => {\n return produce(list, (draft) => {\n const selectedItems = draft.filter((item) => item.checked === true);\n for (const selectedItem of selectedItems) {\n let parentIndex = selectedItem.parentIndex;\n while (parentIndex >= 0) {\n const parent = draft[parentIndex];\n parent.visible = true;\n parent.expanded = true;\n\n for (const i of parent.subItemIndexes) {\n draft[i].visible = true;\n }\n\n parentIndex = parent.parentIndex;\n }\n }\n });\n};\n\nexport const expandMatchedSubtrees = <T>(\n list: NestedDropdownListLocalItem<T>[]\n) => {\n return produce(list, (draft) => {\n for (const item of draft) {\n if (item.matched) {\n item.visible = true;\n }\n\n if (item.hasMatchedSubItems) {\n item.visible = true;\n item.expanded = true;\n\n for (const i of item.subItemIndexes) {\n draft[i].visible = true;\n }\n }\n }\n });\n};\n\nexport const expandFirstSubtree = <T>(\n list: NestedDropdownListLocalItem<T>[]\n) => {\n return produce(list, (draft) => {\n const firstSubtreeIndex = draft.findIndex((item) => item.hasSubItems);\n if (firstSubtreeIndex < 0) {\n return;\n }\n let index = firstSubtreeIndex;\n let length = 0;\n // find the first subtree\n for (let i = index; i < draft.length; i++) {\n const nextItemLength = draft[i].keyPath.length;\n if (nextItemLength > length) {\n length = nextItemLength;\n } else if (nextItemLength < length) {\n break;\n }\n\n index = i;\n draft[i].visible = true;\n draft[i].expanded = true;\n }\n\n // expand siblings of ancestors\n for (let i = 0; i < draft.length; i++) {\n const item = draft[i];\n const parentKeyPath = item.keyPath.slice(0, -1);\n const ancestorKeyPath = draft[index].keyPath.slice(\n 0,\n parentKeyPath.length\n );\n if (isEqual(parentKeyPath, ancestorKeyPath)) {\n item.visible = true;\n }\n }\n return draft;\n });\n};\n\nexport const toggleSubtree = <T>(\n list: NestedDropdownListLocalItem<T>[],\n index: number,\n expanded: boolean\n) => {\n return produce(list, (draft) => {\n draft[index].expanded = expanded;\n const keyPath = draft[index].keyPath;\n for (let i = index + 1; i < draft.length; i++) {\n const item = draft[i];\n const parent = draft[item.parentIndex];\n const ancestorKeyPath = item.keyPath.slice(0, keyPath.length);\n if (isEqual(keyPath, ancestorKeyPath)) {\n item.visible = expanded && parent.expanded && parent.visible;\n } else {\n // no more descendents\n break;\n }\n }\n });\n};\n\nexport const updateSelectedState = <T>(\n list: NestedDropdownListLocalItem<T>[],\n selectedKeyPaths: Set<string>,\n multiSelect: boolean\n) => {\n const res = produce(list, (draft) => {\n for (let i = draft.length - 1; i >= 0; i--) {\n const item = draft[i];\n const itemKeyPathString = buildKeyPath(item.keyPath);\n item.checked = selectedKeyPaths.has(itemKeyPathString);\n if (item.hasSubItems) {\n if (multiSelect && item.checked !== true) {\n const children = item.subItemIndexes.map(\n (index) => draft[index]\n );\n\n const allChildrenSelected = children.every(\n (child) => child.checked === true\n );\n const mixed = children.some(\n (child) => child.checked !== false\n );\n\n if (allChildrenSelected) {\n item.checked = true;\n } else if (mixed) {\n item.checked = \"mixed\";\n }\n }\n }\n }\n });\n return res;\n};\n\nexport const findItemFromStart = <T>(\n arr: T[],\n predicate: (e: T) => boolean,\n start: number\n): T | undefined => {\n for (let i = start; i < arr.length; i++) {\n if (predicate(arr[i])) {\n return arr[i];\n }\n }\n\n return undefined;\n};\n\nexport const findItemFromEnd = <T>(\n arr: T[],\n predicate: (e: T) => boolean,\n end: number\n): T | undefined => {\n for (let i = end; i >= 0; i--) {\n if (predicate(arr[i])) {\n return arr[i];\n }\n }\n\n return undefined;\n};\n\nexport const findItemByKeyPath = <T>(\n nestedList: NestedDropdownListItemProps<T>[] | undefined,\n keyPath: string[]\n): NestedDropdownListItemProps<T> | undefined => {\n const [currentKey, ...nextKeyPath] = keyPath;\n if (isEmpty(nestedList) || isEmpty(currentKey)) {\n return undefined;\n }\n\n const item = nestedList!.find((item) => item.key === currentKey);\n\n if (!item || !nextKeyPath.length) {\n return item;\n }\n\n return findItemByKeyPath(item.subItems, nextKeyPath);\n};\n\nexport const buildKeyPath = (keyPath: string[]): string => {\n return keyPath.join(\",\");\n};\n\nexport const buildKeyPathToSet = (keyPathArr: string[][]): Set<string> => {\n return new Set<string>(keyPathArr.map((keyPath) => keyPath.join(\",\")));\n};\n"],"names":["findItemByKeyPath","nestedList","keyPath","currentKey","nextKeyPath","isEmpty","item","find","key","length","subItems","buildKeyPath","join","keyPathArr","Set","map","list","produce","draft","firstSubtreeIndex","findIndex","hasSubItems","index","i","nextItemLength","visible","expanded","parentKeyPath","slice","ancestorKeyPath","isEqual","matched","hasMatchedSubItems","subItemIndexes","selectedItems","filter","checked","selectedItem","parentIndex","parent","arr","predicate","end","start","selectedKeyPaths","multiSelect","searchTerm","initialExpanded","items","flatten","parentItem","current","hasNestedSiblings","some","option","_a","forEach","level","keyPathString","indexInParent","parentSetSize","has","label","toLowerCase","indexOf","push","_b","children","allChildrenSelected","every","child","mixed","undefined","itemKeyPathString"],"mappings":"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"}

package/cjs/shared/dropdown-list/nested-dropdown-list.js ADDED Viewed

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

package/cjs/shared/dropdown-list/nested-dropdown-list.js.map ADDED Viewed

@@ -0,0 +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 { 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 * 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 let containerWidthStyle = {};\n if (width) {\n containerWidthStyle = {\n [styles.tokens.containerWidth]: `${width}px`,\n [styles.tokens.containerMinWidth]: `0px`,\n };\n } else if (matchElementWidth && elementWidth) {\n containerWidthStyle = {\n [styles.tokens.containerWidth]: `${elementWidth}px`,\n [styles.tokens.containerMinWidth]: `${elementWidth}px`,\n };\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 // APPLY STYLE\n // =========================================================================\n\n useApplyStyle(nodeRef, {\n ...containerWidthStyle,\n });\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. \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 className={clsx(\n styles.container,\n variant === \"small\" && styles.containerVariantSmall\n )}\n style={floatingStyles}\n >\n {renderList()}\n </div>\n );\n};\n"],"names":["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","containerWidthStyle","styles.tokens","containerWidth","containerMinWidth","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","useApplyStyle","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/cjs/shared/dropdown-list/nested-dropdown-list.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./nested-dropdown-list.styles_wdhxoe.css");exports.checkboxMixedIndicator="c1an54qc",exports.expandButton="e11oztmx",exports.expandButtonExpanded="e18lkgul",exports.indent="i1roxhhm",exports.listItem="l7sjxgx",exports.listItemActive="l1lwwclz",exports.listItemContainer="l6gdpz7",exports.listItemContainerHidden="l2m1xi2",exports.listItemToggleable="lda1ll2",exports.selectionIndicator="simvld9",exports.selectionIndicatorNested="s1en693q",exports.tokens={level:"--fds-internal-nestedDropdownList-indentLevel"},exports.unexpandableIndicator="uz6io6h";
2	+ //# sourceMappingURL=nested-dropdown-list.styles.js.map

package/cjs/shared/dropdown-list/nested-dropdown-list.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"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":["level"],"mappings":"oIAwFmC,gCAtCV,wCAcQ,0BApBd,4BApBE,iCAgBM,qCAxBG,0CAIM,qCAgBL,qCAwCA,2CAQM,0BA5Ef,CAClBA,MAAO,+EA6DuB"}

package/cjs/shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css ADDED Viewed

@@ -0,0 +1,12 @@
+.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/cjs/shared/dropdown-list/virtuoso-components.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var t=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),r=require("react");const s=r.forwardRef(((r,s)=>{const{context:i}=r,o=t.__rest(r,["context"]);return e.jsx("div",Object.assign({ref:s},null==i?void 0:i.listProps,o))})),i=r.forwardRef(((r,s)=>{const{context:i,item:o}=r,n=t.__rest(r,["context","item"]);return e.jsx("div",Object.assign({ref:s},null==i?void 0:i.listItemProps,n))}));exports.VirtuosoItem=i,exports.VirtuosoList=s;
2	+ //# sourceMappingURL=virtuoso-components.js.map

package/cjs/shared/dropdown-list/virtuoso-components.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"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":"yGAmBA,MAQaA,EAAeC,EAAAA,YARf,CACTC,EACAC,KAEA,MAAMC,QAAEA,GAA2BF,EAAfG,EAAUC,EAAAA,OAAKJ,EAA7B,CAAA,YACN,OAAOK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASM,UAAeL,GAAc,IAcvDM,EAAeV,EAAAA,YATf,CACTC,EACAC,KAEA,MAAMC,QAAEA,EAASQ,KAAMC,GAAyBX,EAAfG,EAAUC,EAAAA,OAAKJ,EAA1C,CAAA,UAAA,SAEN,OAAOK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASU,cAAmBT,GAAc"}

package/cjs/shared/dropdown-wrapper/dropdown-wrapper.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),a=require("clsx"),r=require("react"),t=require("./dropdown-wrapper.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(a);const d=r.forwardRef((function({disabled:a,children:r},l){return e.jsx("div",{className:t.labelContainer,"data-disabled":a,ref:l,children:r})}));exports.LabelContainer=d,exports.PlaceholderLabel=({variant:a,truncateType:r,children:l})=>e.jsx("div",{className:n.default(t.valueLabel,t.placeholderLabel),"data-variant":a,"data-truncate":r,children:l}),exports.ValueLabel=({variant:a,truncateType:r,children:l})=>e.jsx("div",{className:t.valueLabel,"data-variant":a,"data-truncate":r,children:l});
2	+ //# sourceMappingURL=dropdown-wrapper.js.map

package/cjs/shared/dropdown-wrapper/dropdown-wrapper.js.map ADDED Viewed

@@ -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":["LabelContainer","forwardRef","disabled","children","ref","_jsx","className","styles.labelContainer","variant","truncateType","clsx","styles.valueLabel","styles.placeholderLabel"],"mappings":"kNAMO,MA4BMA,EAAiBC,EAAAA,YAC1B,UAAwBC,SAAEA,EAAQC,SAAEA,GAAYC,GAC5C,OACIC,MAAA,MAAA,CACIC,UAAWC,EAAAA,eAAqB,gBACjBL,EACfE,IAAKA,WAEJD,GAGb,sDAzB4B,EAC5BK,UACAC,eACAN,cAEAE,EAAAA,IAAA,MAAA,CACIC,UAAWI,EAAAA,QAAKC,aAAmBC,EAAAA,kBAAwB,eAC7CJ,EAAO,gBACNC,WAEdN,uBAxBiB,EACtBK,UACAC,eACAN,cAEAE,EAAAA,IAAA,MAAA,CACIC,UAAWK,EAAAA,WAAiB,eACdH,EAAO,gBACNC,EAAYN,SAE1BA"}

package/cjs/shared/dropdown-wrapper/dropdown-wrapper.styles.js CHANGED Viewed

@@ -1,131 +1,2 @@
-"use strict";var o=require("@lifesg/react-icons/chevron-down"),e=require("styled-components"),r=require("../../v3_theme/index.js"),t=require("../styles/index.js");function i(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var n=i(e);const d=o=>"small"===o?2.5:3,s=n.default.div`
-    position: relative;
-    width: 100%;
-    ${o=>{const r=d(o.$variant);return e.css`
-            min-height: ${r}rem;
-            height: ${r}rem; // Need this to persist the height when expanding or collapsing list
-        `}}
-`,a=e.css`
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 ${r.V3_Spacing["spacing-16"]};
-    // exclude top and bottom borders
-    height: calc(${o=>d(o.$variant)}rem - 2px);
-    width: 100%;
-    border-radius: ${r.V3_Radius.sm};
-    border: none;
-    background: transparent;
-    &:focus,
-    &:active {
-        outline: none;
-    }
-    &:focus-visible {
-        outline: 2px solid ${r.V3_Colour["border-focus"]};
-    }
-`,l=n.default.button`
-    ${a}
-    cursor: pointer;
-`;n.default.div`
-    ${a}
-`;const u=e.keyframes`
-	from {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		z-index: 2;
-	}
-	to {
-		position: relative;
-        width: 100%;
-	}
-`;n.default.div`
-    position: relative;
-    border: ${r.V3_Border["width-010"]} ${r.V3_Border.solid}
-        ${r.V3_Colour.border};
-    border-radius: ${r.V3_Radius.sm};
-    background: ${r.V3_Colour.bg};
-    overflow: hidden;
-    &:focus-within {
-        border-color: ${r.V3_Colour["border-focus"]};
-        box-shadow: 0px 0px 4px 0px
-            rgb(from ${r.V3_Colour["border-focus"]} r g b / 50%) inset; // TODO: confirm shadow
-    }
-    ${o=>o.$expanded?e.css`
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                z-index: 2;
-            `:e.css`
-                animation: ${u} 0.5s ease-in-out;
-            `}
-    ${o=>o.$disabled?e.css`
-                background: ${r.V3_Colour["bg-disabled"]};
-                ${l} {
-                    cursor: not-allowed;
-                }
-                &:focus-within {
-                    border-color: ${r.V3_Colour.border};
-                    box-shadow: none;
-                }
-            `:o.$readOnly?e.css`
-                border: none;
-                background: transparent !important;
-                ${l} {
-                    padding: 0;
-                }
-                &:focus-within {
-                    border: none;
-                    box-shadow: none;
-                }
-            `:o.$error?e.css`
-                border-color: ${r.V3_Colour["border-error"]};
-                &:focus-within {
-                    border-color: ${r.V3_Colour["border-error"]};
-                    box-shadow: 0px 0px 4px 0px
-                        rgb(from ${r.V3_Colour["border-error"]} r g b / 50%) inset; // TODO: confirm shadow
-                }
-            `:void 0}
-`,n.default.div`
-    transform: rotate(${o=>o.$expanded?180:0}deg);
-    transition: transform ${r.V3_Motion["duration-250"]}
-        ${r.V3_Motion["ease-default"]};
-    margin-left: ${r.V3_Spacing["spacing-16"]};
-`,n.default(o.ChevronDownIcon)`
-    color: ${r.V3_Colour.icon};
-`,n.default.div`
-    height: 1px;
-    background: ${r.V3_Colour.border};
-    margin: 0 ${r.V3_Spacing["spacing-8"]};
-`;const c=n.default.div`
-    display: flex;
-    flex: 1;
-    word-break: break-all;
-    ${o=>{if(o.$disabled)return e.css`
-                color: ${r.V3_Colour["text-disabled"]};
-            `}}
-`,b=n.default.div`
-    ${o=>"small"===o.$variant?r.V3_Font["body-md-regular"]:r.V3_Font["body-baseline-regular"]}
-    text-align: left;
-    ${o=>{if("middle"!==o.$truncateType)return e.css`
-                    ${t.lineClampCss(1)}
-                `}}
-    overflow: hidden;
-`,p=n.default(b)`
-    color: ${r.V3_Colour["text-subtler"]};
-`;exports.LabelContainer=c,exports.PlaceholderLabel=p,exports.Selector=l,exports.ValueLabel=b,exports.Wrapper=s,exports.baseSelectorCSS=a;
+"use strict";require("./dropdown-wrapper.styles_v10jbi.css");exports.labelContainer="l9c71lq",exports.placeholderLabel="p3mumjy",exports.valueLabel="vlxe5wy";
 //# sourceMappingURL=dropdown-wrapper.styles.js.map

package/cjs/shared/dropdown-wrapper/dropdown-wrapper.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.~~tsx~~"],"sourcesContent":["import { ~~ChevronDownIcon~~ } from \"@~~lifesg~~/~~react-icons/chevron-down~~\";\~~nimport styled, { css, keyframes } from \"styled-components\";\~~n\nimport {~~\n V3_Border,\n V3_Colour,\n V3_Font,\n V3_Motion,\n V3_Radius,\n V3_Spacing,\n}~~ ~~from \"../../v3_theme\";\nimport type { DropdownVariantType~~, ~~TruncateType~~ } from \"~~../dropdown-list/types~~\";\nimport { lineClampCss } from \"../styles\";\n\~~n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\~~nexport interface DropdownWrapperStyleProps {\n $disabled?: boolean;\n $readOnly?: boolean;\n $error?: boolean;\n $expanded?: boolean;\n}\n\nexport interface ValueLabelStyleProps {\n $truncateType?: TruncateType;\n $variant?: DropdownVariantType \| undefined;\n}\n\nexport interface SelectorStyleProps {\n $variant?: DropdownVariantType \| undefined;\n}\n\nexport interface LabelContainerStyleProps {\n $disabled?: boolean \| undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getHeight = (variant?: DropdownVariantType \| undefined) => {\n return variant === \"small\" ? 2.5 : 3;\n};\n\nexport const ~~Wrapper~~ = ~~styled.div<SelectorStyleProps>`\n position: relative;\n width: 100%;\n ${(props) => {\n const height = getHeight(props.$variant);\n return~~ css`\n ~~min-height: ${height}rem;\n height: ${height}rem; // Need this to persist the height when expanding or collapsing list\n `;\n~~ ~~}}\n`;\n\nexport const baseSelectorCSS = css<SelectorStyleProps>`\n~~ display: flex;\n ~~position~~: ~~relative~~;\n ~~align~~-~~items~~: ~~center;\n justify~~-~~content: space-between~~;\n ~~padding: 0 ${V3_Spacing[~~\~~"spacing-16\"]};\~~n ~~// exclude top and bottom borders\n height: calc(${(props) => getHeight(props.$variant)}rem~~ - ~~2px);\n width: 100%;\n border-radius: ${V3_Radius[\~~"sm\"]~~};\n border:~~ ~~none;\n background: transparent;\n\n &:focus,\n &:active~~ {\n ~~outline~~: ~~none;\n }\n\n &:focus-visible {\n outline: 2px solid~~ ${~~V3_Colour~~[\"~~border~~-~~focus~~\"]};\n }\n`;\n\nexport const ~~Selector~~ = styled.button<SelectorStyleProps>`\n ${baseSelectorCSS}\n cursor: pointer;\n`;\n\nexport const SelectorDiv = styled.div<SelectorStyleProps>`\n ${baseSelectorCSS}\n`;\n\n// Note: Need this to only switch back after\n// react-spring animation ends\nconst zindexPositionHide = keyframes`\n\tfrom {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tz-index: 2;\n\t}\n\n\tto {\n\t\tposition: relative;\n width: 100%;\n\t}\n`;\n\nexport const ElementBoundary = styled.div<DropdownWrapperStyleProps>`\n ~~position: relative;\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~~ overflow: hidden;\n\n ~~&:focus-within {\n border-color: ${V3_Colour~~[~~\"border~~-~~focus\~~"~~]};\n box-shadow: 0px 0px 4px 0px~~\~~n rgb(from ${V3_Colour[\~~"~~border-focus\"~~]} ~~r g b / 50%) inset; // TODO: confirm shadow\n }\n\n $~~{~~(props) => {~~\n if (props.$expanded) {\n return css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 2;\n `;\n } else {\n return css`\n animation: ${~~zindexPositionHide} 0.5s ease-in-out;\n `;\n }\n }}\n\n ${(props) => {\n if (props.$disabled) {\n return css`\n background: ${V3_Colour~~[\"bg-~~disabled\"]};\n\n ${Selector} {\n cursor: not~~-~~allowed;\n }~~\~~n\n &:focus-within {\n border-color: ${V3_Colour[\~~"~~border\"~~]}~~;\n box-shadow: none;\n }~~\n `;\n } else if (props.$readOnly) {\n return css`\n border: none;\n background: transparent !important;\n\n ${Selector} {\n padding: 0;\n }\n\n &:focus-within {\n border: none;\n box-shadow: none;\n }\n `;\n } else if (props.$error) {\n return css`\n border-color: ${V3_Colour[\"border-error\"]};\n\n &:focus-within {\n border-color: ${V3_Colour[\"border-error\"]};\n box-shadow: 0px 0px 4px 0px\n rgb(from ${V3_Colour[\"border-error\"]} r g b / 50%) inset; // TODO: confirm shadow\n }\n `;\n }\n }}\n~~`;\n~~\~~nexport const IconContainer = styled.div<DropdownWrapperStyleProps>`\~~n ~~transform: rotate~~(~~${(props) => (props.$expanded ? 180 : 0)}deg);\n transition: transform ${V3_Motion~~[~~\"duration~~-~~250\~~"]}\~~n ${V3_Motion[\~~"~~ease-default\"~~]~~};\n margin-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const StyledChevronIcon = styled(ChevronDownIcon~~)~~<SelectorStyleProps>`\n color:~~ ${~~V3_Colour[~~\~~"icon\"]};\~~n`;\n\nexport const Divider = styled.div`\n height: 1px;\n background: ${V3_Colour[\"border\"]};\n margin: 0 ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const LabelContainer = styled.div<LabelContainerStyleProps>`\n display: flex;\n flex: 1;\n word-break: break-all;\n ${(props) => {\n ~~if (props.$disabled) {\n return css`\n color:~~ ${V3_Colour[\"text-disabled\"]};\n `;\n }\n }}\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n ${(props) =>\n props.$variant === \"small\"\n ? V3_Font[\"body-md-regular\"]\n : V3_Font[\"body-baseline-regular\"]}\n text-align: left;\n ${(props) => {\n switch (props.$truncateType) {\n case \"middle\":\n break;\n case \"end\":\n default:\n return css`\n ${lineClampCss(1)}\n ~~`;\n }\n~~ }}\n ~~overflow: hidden;\n~~`;\n\nexport const ~~PlaceholderLabel~~ = ~~styled(ValueLabel)~~`\n color: ${~~V3_Colour~~[\"text-subtler\"]};\n`;\n"],"names":["getHeight","variant","Wrapper","styled","div","props","height","$variant","css","baseSelectorCSS","V3_Spacing","V3_Radius","V3_Colour","Selector","button","zindexPositionHide","keyframes","V3_Border","$expanded","$disabled","$readOnly","$error","V3_Motion","ChevronDownIcon","LabelContainer","ValueLabel","V3_Font","$truncateType","lineClampCss","PlaceholderLabel"],"mappings":"~~sPAwCA~~,~~MAAMA~~,EAAaC,GACI,UAAZA,EAAsB,IAAM,EAG1BC,EAAUC,EAAAA,QAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAASN,EAAUK,EAAME,UAC/B,OAAOC,KAAG;0BACQF;sBACJA;SACb;EAIIG,EAAkBD,EAAAA,GAAuB;;;;;iBAKrCE,EAAAA,WAAW;;mBAERL,GAAUL,EAAUK,EAAME;;qBAEzBI,EAAAA,UAAc;;;;;;;;;;6BAUNC,EAAAA,UAAU;;EAI1BC,EAAWV,EAAAA,QAAOW,MAA0B;MACnDL;;EAIqBN,EAAAA,QAAOC,GAAuB;MACnDK;EAKN,MAAMM,EAAqBC,EAAAA,SAAS;;;;;;;;;;;;;EAeLb,EAAAA,QAAOC,GAA8B;;cAEtDa,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CL,EAAAA,UAAkB;qBACPD,EAAAA,UAAc;kBACjBC,EAAAA,UAAc;;;;wBAIRA,EAAAA,UAAU;;uBAEXA,EAAAA,UAAU;;;MAG1BP,GACKA,EAAMa,UACCV,KAAG;;;;;;cAQHA,KAAG;6BACOO;;;MAKtBV,GACKA,EAAMc,UACCX,KAAG;8BACQI,EAAAA,UAAU;;kBAEtBC;;;;;oCAKkBD,EAAAA,UAAkB;;;cAInCP,EAAMe,UACNZ,KAAG;;;;kBAIJK;;;;;;;;cASCR,EAAMgB,OACNb,KAAG;gCACUI,EAAAA,UAAU;;;oCAGNA,EAAAA,UAAU;;mCAEXA,EAAAA,UAAU;;mBAP9B;EAccT,EAAAA,QAAOC,GAA8B;wBACzCC,GAAWA,EAAMa,UAAY,IAAM;4BAChCI,EAAAA,UAAU;UAC5BA,EAAAA,UAAU;mBACDZ,EAAAA,WAAW;EAGGP,EAAAA,QAAOoB,EAAAA,gBAAoC;aAC/DX,EAAAA,UAAgB;EAGNT,EAAAA,QAAOC,GAAG;;kBAEfQ,EAAAA,UAAkB;gBACpBF,EAAAA,WAAW;EAGpB,MAAMc,EAAiBrB,EAAAA,QAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMc,UACN,OAAOX,KAAG;yBACGI,EAAAA,UAAU;aAE3B;EAIKa,EAAatB,EAAAA,QAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAmB,EAAAA,QAAQ,mBACRA,EAAAA,QAAQ;;MAEfrB,IACC,GACS,WADDA,EAAMsB,cAKN,OAAOnB,KAAG;sBACJoB,EAAAA,aAAa;;;EAOtBC,EAAmB1B,EAAAA,QAAOsB,EAAW;aACrCb,EAAAA,UAAU;"}
1	+ {"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampCss } from \"../styles\";\n\nexport const labelContainer = css`\n display: flex;\n flex: 1;\n word-break: break-all;\n\n &[data-disabled=\"true\"] {\n color: ${Colour[\"text-disabled\"]};\n }\n`;\n\nexport const valueLabel = css`\n ${Font[\"body-baseline-regular\"]}\n text-align: left;\n overflow: hidden;\n\n &[data-variant=\"small\"] {\n ${Font[\"body-md-regular\"]}\n }\n\n &:not([data-truncate=\"middle\"]) {\n ${lineClampCss(1)}\n }\n`;\n\nexport const placeholderLabel = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"2HAK2B,mCAwBE,6BAdN"}

package/cjs/shared/dropdown-wrapper/dropdown-wrapper.styles_v10jbi.css ADDED Viewed

@@ -0,0 +1,3 @@
+.l9c71lq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;word-break:break-all;}.l9c71lq[data-disabled="true"]{color:var(--fds-colour-text-disabled);}
+.vlxe5wy{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);text-align:left;overflow:hidden;}.vlxe5wy[data-variant="small"]{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}.vlxe5wy:not([data-truncate="middle"]){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
+.p3mumjy{color:var(--fds-colour-text-subtler);}

package/cjs/shared/dropdown-wrapper/element-with-dropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("react"),i=require("../../external/react-resize-detector/build/index.esm.js"),o=require("styled-components"),s=require("../../overlay/use-floating-context.js"),r=require("../../theme/theme-provider/hooks.js"),l=require("../../v3_theme/index.js");const a=e=>"right"===e?"bottom-end":"bottom-start",d=n.createContext({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})});exports.DropdownRenderContext=d,exports.ElementWithDropdown=({enabled:c,isOpen:u,onOpen:g,onClose:h,onDismiss:m,renderElement:p,renderDropdown:x,customZIndex:f,clickToToggle:y=!1,offset:b=0,alignment:j="left",fitAvailableHeight:w,rootNode:v,positionRef:F})=>{var R;const C=n.useContext(o.ThemeContext),P=l.V3_Breakpoint["sm-max"]({theme:C}),q=n.useRef(null),{width:O=0}=i.useResizeDetector({targetRef:null!=F?F:q,handleHeight:!1}),D={name:"center",fn:({x:e,rects:t})=>{const n=0===e||e+t.floating.width===window.innerWidth,i=window.innerWidth<P;return{x:n&&i?(window.innerWidth-t.floating.width)/2:e}}},{refs:k,floatingStyles:W,context:H}=t.useFloating({open:u,onOpenChange:(e,t,n)=>{"escape-key"===n?null==m||m():e&&!u?null==g||g():!e&&u&&(null==h||h(n))},whileElementsMounted:t.autoUpdate,placement:a(j),middleware:[t.offset(b),t.flip(),t.shift({limiter:t.limitShift()}),t.size({apply({availableHeight:e,elements:t}){!w||e>=t.floating.scrollHeight?t.floating.style.setProperty("--available-height",""):t.floating.style.setProperty("--available-height",`${Math.max(0,e)}px`)}}),D]}),S=s.useFloatingChild(),{isMounted:T,styles:z}=t.useTransitionStyles(H,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:I,themeStyle:M}=r.useInheritedThemeScope(T),E=t.useClick(H,{enabled:c,toggle:y,keyboardHandlers:y}),_=t.useDismiss(H,{enabled:c}),{getReferenceProps:A,getFloatingProps:B}=t.useInteractions([E,_]),N={elementWidth:O,styles:Object.assign(Object.assign(Object.assign({},z),W),{zIndex:null!==(R=null!=f?f:S)&&void 0!==R?R:50}),setFloatingRef:k.setFloating,getFloatingProps:B};return e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>{q.current=e,k.setReference(e)}},A(),{children:p()})),T&&e.jsx(t.FloatingPortal,{root:v,children:e.jsx(t.FloatingFocusManager,{context:H,modal:!1,initialFocus:-1,returnFocus:!1,children:e.jsx(d.Provider,{value:N,children:e.jsx("div",Object.assign({},I,{style:M,children:x(N)}))})})})]})},exports.useDropdownRender=()=>n.useContext(d);
+"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),i=require("react"),r=require("../../external/react-resize-detector/build/index.esm.js"),n=require("../../overlay/use-floating-context.js");require("../../theme/theme-provider/index.js");var s=require("../../theme/theme-provider/hooks.js");require("../../theme/tokens/border.js");var o=require("../../theme/tokens/breakpoint.js");require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var l=require("../../theme/utils/media-query.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../../theme/utils/use-design-token.js"),u=require("./element-with-dropdown.styles.js");const d=e=>"right"===e?"bottom-end":"bottom-start",h=i.createContext({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})});exports.DropdownRenderContext=h,exports.ElementWithDropdown=({enabled:c,isOpen:g,onOpen:m,onClose:p,onDismiss:j,renderElement:f,renderDropdown:x,customZIndex:y,clickToToggle:q=!1,offset:v=0,alignment:b="left",fitAvailableHeight:k,rootNode:w,positionRef:F})=>{var R;const P=a.useDesignToken(o.Breakpoint["sm-max"]),D=l.useSafeMaxWidthMediaQuery(P),O=i.useRef(null),{width:C=0}=r.useResizeDetector({targetRef:null!=F?F:O,handleHeight:!1}),H={name:"center",fn:({x:e,rects:t})=>({x:(0===e||e+t.floating.width===window.innerWidth)&&D?(window.innerWidth-t.floating.width)/2:e})},{refs:M,floatingStyles:S,context:W}=t.useFloating({open:g,onOpenChange:(e,t,i)=>{"escape-key"===i?null==j||j():e&&!g?null==m||m():!e&&g&&(null==p||p(i))},whileElementsMounted:t.autoUpdate,placement:d(b),middleware:[t.offset(v),t.flip(),t.shift({limiter:t.limitShift()}),t.size({apply({availableHeight:e,elements:t}){!k||e>=t.floating.scrollHeight?t.floating.style.setProperty(u.tokens.availableHeight,""):t.floating.style.setProperty(u.tokens.availableHeight,`${Math.max(0,e)}px`)}}),H]}),T=n.useFloatingChild(),{isMounted:z,styles:I}=t.useTransitionStyles(W,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:E,themeStyle:A}=s.useInheritedThemeScope(z),B=t.useClick(W,{enabled:c,toggle:q,keyboardHandlers:q}),N=t.useDismiss(W,{enabled:c}),{getReferenceProps:Q,getFloatingProps:U}=t.useInteractions([B,N]),Z={elementWidth:C,styles:Object.assign(Object.assign(Object.assign({},I),S),{zIndex:null!==(R=null!=y?y:T)&&void 0!==R?R:50}),setFloatingRef:M.setFloating,getFloatingProps:U};return e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>{O.current=e,M.setReference(e)}},Q(),{children:f()})),z&&e.jsx(t.FloatingPortal,{root:w,children:e.jsx(t.FloatingFocusManager,{context:W,modal:!1,initialFocus:-1,returnFocus:!1,children:e.jsx(h.Provider,{value:Z,children:e.jsx("div",Object.assign({},E,{style:A,children:x(Z)}))})})})]})},exports.useDropdownRender=()=>i.useContext(h);
 //# sourceMappingURL=element-with-dropdown.js.map

package/cjs/shared/dropdown-wrapper/element-with-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element-with-dropdown.js","sources":["../../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n Middleware,\n OpenChangeReason,\n Placement,\n} from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n limitShift,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { useInheritedThemeScope } from \"../../theme/theme-provider/hooks\";\nimport { V3_Breakpoint } from \"../../v3_theme\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n elementWidth: number;\n styles: CSSProperties;\n setFloatingRef: (node: HTMLElement \| null) => void;\n getFloatingProps: (\n userProps?: React.HTMLProps<HTMLElement>\n ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n enabled: boolean;\n isOpen: boolean;\n onOpen?: () => void \| undefined;\n onClose?: (reason: OpenChangeReason \| undefined) => void \| undefined;\n onDismiss?: () => void \| undefined;\n renderElement: () => React.ReactNode;\n renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n customZIndex?: number \| undefined;\n clickToToggle?: boolean \| undefined;\n /* the distance between the reference element and the dropdown /\n offset?: number \| undefined;\n / the alignment of the dropdown to the left or right of the reference element /\n alignment?: DropdownAlignmentType \| undefined;\n fitAvailableHeight?: boolean \| undefined;\n /\n The root element that contains the popover element. Defaults to the document body.\n \n If the parent that contains the trigger element has a higher z-index than the popover,\n * the popover may not be visible. Specify the parent element here instead\n /\n rootNode?: RefObject<HTMLElement> \| undefined;\n /* If set, the `elementWidth` refers to this instead of the reference element /\n positionRef?: RefObject<HTMLElement> \| undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n switch (alignment) {\n case \"right\":\n return \"bottom-end\";\n case \"left\":\n default:\n return \"bottom-start\";\n }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n elementWidth: 0,\n styles: {},\n setFloatingRef: () => {\n // noop\n },\n getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n return useContext(DropdownRenderContext);\n};\n\n/\n A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n \n Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n * `max-height: min(100px, var(--available-height, infinity * 1px))`\n \n Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n * ref={setFloatingRef}\n * style={styles}\n * {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n \n If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n * onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n enabled,\n isOpen,\n onOpen,\n onClose,\n onDismiss,\n renderElement,\n renderDropdown,\n customZIndex,\n clickToToggle = false,\n offset: dropdownOffset = 0,\n alignment = \"left\",\n fitAvailableHeight,\n rootNode,\n positionRef,\n}: ElementWithDropdownProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const theme = useContext(ThemeContext);\n const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n const elementRef = useRef<HTMLDivElement \| null>(null);\n const { width: referenceWidth = 0 } = useResizeDetector({\n targetRef: positionRef ?? elementRef,\n handleHeight: false,\n });\n const center: Middleware = {\n name: \"center\",\n fn: ({ x, rects }) => {\n const noGapInBetween =\n x === 0 \|\| x + rects.floating.width === window.innerWidth;\n const isMobileScreen = window.innerWidth < mobileBreakpoint;\n return {\n x:\n noGapInBetween && isMobileScreen\n ? (window.innerWidth - rects.floating.width) / 2\n : x,\n };\n },\n };\n const { refs, floatingStyles, context } = useFloating({\n open: isOpen,\n onOpenChange: (open, _event, reason) => {\n if (reason === \"escape-key\") {\n onDismiss?.();\n } else if (open && !isOpen) {\n onOpen?.();\n } else if (!open && isOpen) {\n onClose?.(reason);\n }\n },\n whileElementsMounted: autoUpdate,\n placement: getFloatingPlacement(alignment),\n middleware: [\n offset(dropdownOffset),\n flip(),\n shift({\n limiter: limitShift(),\n }),\n size({\n // shrink to fit available vertical space\n apply({ availableHeight, elements }) {\n if (\n !fitAvailableHeight \|\|\n availableHeight >= elements.floating.scrollHeight\n ) {\n // reset this so that dropdown can expand as needed\n elements.floating.style.setProperty(\n \"--available-height\",\n \"\"\n );\n return;\n }\n\n elements.floating.style.setProperty(\n \"--available-height\",\n `${Math.max(0, availableHeight)}px`\n );\n },\n }),\n center,\n ],\n });\n const parentZIndex = useFloatingChild();\n\n const { isMounted, styles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n duration: 300,\n });\n const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n const click = useClick(context, {\n enabled,\n toggle: clickToToggle,\n keyboardHandlers: clickToToggle,\n });\n const dismiss = useDismiss(context, { enabled });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n click,\n dismiss,\n ]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const dropdownRenderProps = {\n elementWidth: referenceWidth,\n styles: {\n ...styles,\n ...floatingStyles,\n zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n },\n setFloatingRef: refs.setFloating,\n getFloatingProps,\n };\n\n return (\n <>\n <div\n ref={(node) => {\n elementRef.current = node;\n refs.setReference(node);\n }}\n {...getReferenceProps()}\n >\n {renderElement()}\n </div>\n {isMounted && (\n <FloatingPortal root={rootNode}>\n <FloatingFocusManager\n context={context}\n modal={false}\n initialFocus={-1}\n returnFocus={false} // leads to focus trap. parent to handle the final focus state\n >\n <DropdownRenderContext.Provider\n value={dropdownRenderProps}\n >\n <div {...themeProps} style={themeStyle}>\n {renderDropdown(dropdownRenderProps)}\n </div>\n </DropdownRenderContext.Provider>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </>\n );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","enabled","isOpen","onOpen","onClose","onDismiss","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","noGapInBetween","floating","window","innerWidth","isMobileScreen","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"gVAiEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAAA,cAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,iEAqCI,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBjB,YAAY,OACZkB,qBACAC,WACAC,wBAKA,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAaC,EAAAA,OAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAAA,kBAAkB,CACpDC,UAAWX,QAAAA,EAAeM,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YACN,MAAMC,EACI,IAANF,GAAWA,EAAIC,EAAME,SAASX,QAAUY,OAAOC,WAC7CC,EAAiBF,OAAOC,WAAajB,EAC3C,MAAO,CACHY,EACIE,GAAkBI,GACXF,OAAOC,WAAaJ,EAAME,SAASX,OAAS,EAC7CQ,EACb,IAGHO,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAAA,YAAY,CAClDC,KAAMvC,EACNwC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAvC,SAAAA,IACOoC,IAASvC,EAChBC,SAAAA,KACQsC,GAAQvC,IAChBE,SAAAA,EAAUwC,GACd,EAEJC,qBAAsBC,EAAAA,WACtBC,UAAWtD,EAAqBC,GAChCsD,WAAY,CACRtC,EAAAA,OAAOC,GACPsC,SACAC,QAAM,CACFC,QAASC,EAAAA,eAEbC,OAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhB5C,GACD2C,GAAmBC,EAASvB,SAASwB,aAGrCD,EAASvB,SAASyB,MAAMC,YACpB,qBACA,IAKRH,EAASvB,SAASyB,MAAMC,YACpB,qBACA,GAAGC,KAAKC,IAAI,EAAGN,OAEvB,IAEJ5B,KAGFmC,EAAeC,EAAAA,oBAEfC,UAAEA,EAASlE,OAAEA,GAAWmE,EAAAA,oBAAoB1B,EAAS,CACvD2B,QAAS,CAAEC,QAAS,GACpB1B,KAAM,CAAE0B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAAA,uBAAuBP,GAEpDQ,EAAQC,EAAAA,SAASlC,EAAS,CAC5BtC,UACAyE,OAAQjE,EACRkE,iBAAkBlE,IAEhBmE,EAAUC,EAAAA,WAAWtC,EAAS,CAAEtC,aAEhC6E,kBAAEA,EAAiB9E,iBAAEA,GAAqB+E,kBAAgB,CAC5DP,EACAI,IAMEI,EAAsB,CACxBnF,aAAc0B,EACdzB,oDACOA,GACAwC,GAAc,CACjB2C,OAAoC,QAA5BC,EAAA1E,QAAAA,EAAgBsD,SAAY,IAAAoB,EAAAA,EA7JxB,KA+JhBnF,eAAgBsC,EAAK8C,YACrBnF,oBAGJ,OACIoF,6BACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFrE,EAAWsE,QAAUD,EACrBpD,EAAKsD,aAAaF,EAAK,GAEvBX,IAAmB,CAAAc,SAEtBtF,OAEJ0D,GACGqB,EAAAA,IAACQ,EAAAA,eAAc,CAACC,KAAMjF,EAAQ+E,SAC1BP,EAAAA,IAACU,EAAAA,qBAAoB,CACjBxD,QAASA,EACTyD,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAAA,IAAC1F,EAAsBwG,SAAQ,CAC3BC,MAAOpB,WAEPK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EAASlB,EAAU,CAAEX,MAAOY,EAAUsB,SACjCrF,EAAeyE,cAMrC,4BArLsB,IACtBhE,EAAAA,WAAWrB"}
1	+ {"version":3,"file":"element-with-dropdown.js","sources":["../../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n Middleware,\n OpenChangeReason,\n Placement,\n} from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n limitShift,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport {\n Breakpoint,\n useDesignToken,\n useSafeMaxWidthMediaQuery,\n} from \"../../theme\";\nimport { useInheritedThemeScope } from \"../../theme/theme-provider/hooks\";\nimport * as elementWithDropdownStyles from \"./element-with-dropdown.styles\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n elementWidth: number;\n styles: CSSProperties;\n setFloatingRef: (node: HTMLElement \| null) => void;\n getFloatingProps: (\n userProps?: React.HTMLProps<HTMLElement>\n ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n enabled: boolean;\n isOpen: boolean;\n onOpen?: () => void \| undefined;\n onClose?: (reason: OpenChangeReason \| undefined) => void \| undefined;\n onDismiss?: () => void \| undefined;\n renderElement: () => React.ReactNode;\n renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n customZIndex?: number \| undefined;\n clickToToggle?: boolean \| undefined;\n /* the distance between the reference element and the dropdown /\n offset?: number \| undefined;\n / the alignment of the dropdown to the left or right of the reference element /\n alignment?: DropdownAlignmentType \| undefined;\n fitAvailableHeight?: boolean \| undefined;\n /\n The root element that contains the popover element. Defaults to the document body.\n \n If the parent that contains the trigger element has a higher z-index than the popover,\n * the popover may not be visible. Specify the parent element here instead\n /\n rootNode?: RefObject<HTMLElement> \| undefined;\n /* If set, the `elementWidth` refers to this instead of the reference element /\n positionRef?: RefObject<HTMLElement> \| undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n switch (alignment) {\n case \"right\":\n return \"bottom-end\";\n case \"left\":\n default:\n return \"bottom-start\";\n }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n elementWidth: 0,\n styles: {},\n setFloatingRef: () => {\n // noop\n },\n getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n return useContext(DropdownRenderContext);\n};\n\n/\n A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n \n Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n * `max-height: min(100px, var(--available-height, infinity * 1px))`\n \n Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n * ref={setFloatingRef}\n * style={styles}\n * {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n \n If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n * onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n enabled,\n isOpen,\n onOpen,\n onClose,\n onDismiss,\n renderElement,\n renderDropdown,\n customZIndex,\n clickToToggle = false,\n offset: dropdownOffset = 0,\n alignment = \"left\",\n fitAvailableHeight,\n rootNode,\n positionRef,\n}: ElementWithDropdownProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\n const elementRef = useRef<HTMLDivElement \| null>(null);\n const { width: referenceWidth = 0 } = useResizeDetector({\n targetRef: positionRef ?? elementRef,\n handleHeight: false,\n });\n const center: Middleware = {\n name: \"center\",\n fn: ({ x, rects }) => {\n const noGapInBetween =\n x === 0 \|\| x + rects.floating.width === window.innerWidth;\n return {\n x:\n noGapInBetween && isMobile\n ? (window.innerWidth - rects.floating.width) / 2\n : x,\n };\n },\n };\n const { refs, floatingStyles, context } = useFloating({\n open: isOpen,\n onOpenChange: (open, _event, reason) => {\n if (reason === \"escape-key\") {\n onDismiss?.();\n } else if (open && !isOpen) {\n onOpen?.();\n } else if (!open && isOpen) {\n onClose?.(reason);\n }\n },\n whileElementsMounted: autoUpdate,\n placement: getFloatingPlacement(alignment),\n middleware: [\n offset(dropdownOffset),\n flip(),\n shift({\n limiter: limitShift(),\n }),\n size({\n // shrink to fit available vertical space\n apply({ availableHeight, elements }) {\n if (\n !fitAvailableHeight \|\|\n availableHeight >= elements.floating.scrollHeight\n ) {\n // reset this so that dropdown can expand as needed\n elements.floating.style.setProperty(\n elementWithDropdownStyles.tokens.availableHeight,\n \"\"\n );\n return;\n }\n\n elements.floating.style.setProperty(\n elementWithDropdownStyles.tokens.availableHeight,\n `${Math.max(0, availableHeight)}px`\n );\n },\n }),\n center,\n ],\n });\n const parentZIndex = useFloatingChild();\n\n const { isMounted, styles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n duration: 300,\n });\n const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n const click = useClick(context, {\n enabled,\n toggle: clickToToggle,\n keyboardHandlers: clickToToggle,\n });\n const dismiss = useDismiss(context, { enabled });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n click,\n dismiss,\n ]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const dropdownRenderProps = {\n elementWidth: referenceWidth,\n styles: {\n ...styles,\n ...floatingStyles,\n zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n },\n setFloatingRef: refs.setFloating,\n getFloatingProps,\n };\n\n return (\n <>\n <div\n ref={(node) => {\n elementRef.current = node;\n refs.setReference(node);\n }}\n {...getReferenceProps()}\n >\n {renderElement()}\n </div>\n {isMounted && (\n <FloatingPortal root={rootNode}>\n <FloatingFocusManager\n context={context}\n modal={false}\n initialFocus={-1}\n returnFocus={false} // leads to focus trap. parent to handle the final focus state\n >\n <DropdownRenderContext.Provider\n value={dropdownRenderProps}\n >\n <div {...themeProps} style={themeStyle}>\n {renderDropdown(dropdownRenderProps)}\n </div>\n </DropdownRenderContext.Provider>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </>\n );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","enabled","isOpen","onOpen","onClose","onDismiss","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","floating","window","innerWidth","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","elementWithDropdownStyles.tokens","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value","useContext"],"mappings":"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"}

package/cjs/shared/dropdown-wrapper/element-with-dropdown.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";exports.tokens={availableHeight:"--fds-internal-dropdownWrapper-availableHeight"};
2	+ //# sourceMappingURL=element-with-dropdown.styles.js.map

package/cjs/shared/dropdown-wrapper/element-with-dropdown.styles.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"element-with-dropdown.styles.js","sources":["../../../../src/shared/dropdown-wrapper/element-with-dropdown.styles.ts"],"sourcesContent":["export const tokens = {\n availableHeight: \"--fds-internal-dropdownWrapper-availableHeight\",\n};\n"],"names":["availableHeight"],"mappings":"4BAAsB,CAClBA,gBAAiB"}

package/cjs/shared/fade-wrapper/fade-wrapper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-left"),i=require("@lifesg/react-icons/chevron-right"),o=require("../../external/lodash/throttle.js"),n=require("react"),s=require("../../external/react-resize-detector/build/index.esm.js"),a=require("./fade-wrapper.style.js");const d=n.forwardRef(((d,c)=>{var{children:l,fadeColor:f,fadePosition:h="both",showIndicator:u=!1,onResize:g}=d,j=e.__rest(d,["children","fadeColor","fadePosition","showIndicator","onResize"]);const[p,x]=n.useState("left"===h||"both"===h),[v,b]=n.useState("right"===h||"both"===h),R=n.useRef(null),I=n.useRef(null),q=o.default($,50);function $(){const e=R.current,r=I.current;e&&r&&r.scrollWidth>e.offsetWidth?(b(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),x(r.scrollLeft>=1)):(b(!1),x(!1))}function w(){$(),g&&g({content:I.current,wrapper:R.current})}s.useResizeDetector({onResize:w,targetRef:R,refreshMode:"debounce",refreshRate:50}),n.useImperativeHandle(c,(()=>({resize(){w()}}))),n.useEffect((()=>{const e=I.current;return $(),e&&e.addEventListener("scroll",q),()=>{e&&e.removeEventListener("scroll",q)}}),[]);return r.jsxs(a.Wrapper,Object.assign({ref:R},j,{children:[r.jsx(a.Content,{ref:I,children:l}),(()=>{let e;return e=Array.isArray(f)&&f.length>0?{left:f,right:f}:f||{left:void 0,right:void 0},r.jsxs(r.Fragment,{children:[p&&r.jsx(a.Fade,{$backgroundColor:e.left,$position:"left",$showIndicator:u,"data-id":"left-fade",children:u&&r.jsx(a.FadeIndicatorButton,{$position:"left","data-id":"left-fade-indicator-button",children:r.jsx(t.ChevronLeftIcon,{})})}),v&&r.jsx(a.Fade,{$backgroundColor:e.right,$position:"right",$showIndicator:u,"data-id":"right-fade",children:u&&r.jsx(a.FadeIndicatorButton,{$position:"right","data-id":"right-fade-indicator-button",children:r.jsx(i.ChevronRightIcon,{})})})]})})()]}))}));exports.FadeWrapper=d;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-left"),s=require("@lifesg/react-icons/chevron-right"),a=require("clsx"),i=require("../../external/lodash/throttle.js"),o=require("react"),l=require("../../external/react-resize-detector/build/index.esm.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var n=require("../../theme/utils/use-apply-styles.js"),c=require("../clickable-icon/clickable-icon.js"),d=require("./fade-wrapper.styles.js"),u=require("./helpers.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=f(a);const j=o.forwardRef(((a,f)=>{var{children:j,className:m,fadeColor:g,fadePosition:p="both",showIndicator:q=!1,onResize:v}=a,b=e.__rest(a,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[x,k]=o.useState("left"===p||"both"===p),[R,C]=o.useState("right"===p||"both"===p),y=o.useRef(null),I=o.useRef(null),N=o.useRef(null),L=o.useRef(null),w=u.getFadeColorSet(g);n.useApplyStyle(N,{[d.tokens.backgroundColor]:u.getFadeBackgroundColorValue(w.left,q)}),n.useApplyStyle(L,{[d.tokens.backgroundColor]:u.getFadeBackgroundColorValue(w.right,q)}),l.useResizeDetector({onResize:S,targetRef:y,refreshMode:"debounce",refreshRate:50}),o.useImperativeHandle(f,(()=>({resize(){S()}})));const z=o.useCallback((()=>{const e=y.current,r=I.current;e&&r&&r.scrollWidth>e.offsetWidth?(C(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),k(r.scrollLeft>=1)):(C(!1),k(!1))}),[]),F=o.useMemo((()=>i.default(z,50)),[z]);function S(){z(),v&&v({content:I.current,wrapper:y.current})}o.useEffect((()=>{const e=I.current;return z(),e&&e.addEventListener("scroll",F),()=>{e&&e.removeEventListener("scroll",F),F.cancel()}}),[z,F]);return r.jsxs("div",Object.assign({ref:y,className:h.default(d.wrapper,m)},b,{children:[r.jsx("div",{ref:I,className:d.content,children:j}),r.jsxs(r.Fragment,{children:[x&&r.jsx("div",{ref:N,className:h.default(d.fade,d.fadeLeft),"data-id":"left-fade",children:q&&r.jsx(c.ClickableIcon,{className:h.default(d.fadeIndicatorButton,d.indicatorLeft),"data-id":"left-fade-indicator-button",children:r.jsx(t.ChevronLeftIcon,{})})}),R&&r.jsx("div",{ref:L,className:h.default(d.fade,d.fadeRight),"data-id":"right-fade",children:q&&r.jsx(c.ClickableIcon,{className:h.default(d.fadeIndicatorButton,d.indicatorRight),"data-id":"right-fade-indicator-button",children:r.jsx(s.ChevronRightIcon,{})})})]})]}))}));exports.FadeWrapper=j;
 //# sourceMappingURL=fade-wrapper.js.map

package/cjs/shared/fade-wrapper/fade-wrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fade-wrapper.js","sources":["../../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n Content,\n Fade,\n FadeIndicatorButton,\n Wrapper,\n} from \"./fade-wrapper.style\";\nimport type { FadeColorSet, FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n {\n children,\n fadeColor,\n fadePosition = \"both\",\n showIndicator = false,\n onResize,\n ...otherProps\n }: FadeWrapperProps,\n ref: React.Ref<FadeWrapperRef>\n) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n fadePosition === \"left\" \|\| fadePosition === \"both\"\n );\n const [showFadeRight, setShowFadeRight] = useState<boolean>(\n fadePosition === \"right\" \|\| fadePosition === \"both\"\n );\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n\n const throttledScrollHandler = throttle(handleScroll, 50);\n\n // To scroll left when wrapper resizes\n useResizeDetector({\n onResize: handleResize,\n targetRef: wrapperRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n });\n\n useImperativeHandle(ref, () => {\n return {\n resize() {\n handleResize();\n },\n };\n });\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n const content = contentRef.current;\n\n handleScroll();\n\n if (content) {\n content.addEventListener(\"scroll\", throttledScrollHandler);\n }\n\n return () => {\n if (content) {\n content.removeEventListener(\"scroll\", throttledScrollHandler);\n }\n };\n }, []);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n\n function handleScroll() {\n const wrapper = wrapperRef.current;\n const content = contentRef.current;\n\n if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n /*\n NOTE: Used Math.round because we observe a 0.5 difference\n * even when we scroll to the end. This causes the fade right\n * to not be removed\n */\n setShowFadeRight(\n Math.round(content.scrollLeft) <\n content.scrollWidth - content.offsetWidth\n );\n setShowFadeLeft(content.scrollLeft >= 1);\n } else {\n setShowFadeRight(false);\n setShowFadeLeft(false);\n }\n }\n\n function handleResize() {\n handleScroll();\n\n if (onResize) {\n onResize({\n content: contentRef.current!,\n wrapper: wrapperRef.current!,\n });\n }\n\n // TODO: Will move this out to Breadcrumb when it uses this component\n // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n // content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n // }\n }\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderFade = () => {\n let fadeColorSet: FadeColorSet;\n\n if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n // Single array, apply same color\n fadeColorSet = {\n left: fadeColor,\n right: fadeColor,\n };\n } else if (!fadeColor) {\n fadeColorSet = {\n left: undefined,\n right: undefined,\n };\n } else {\n fadeColorSet = fadeColor as FadeColorSet;\n }\n\n return (\n <>\n {showFadeLeft && (\n <Fade\n $backgroundColor={fadeColorSet.left}\n $position=\"left\"\n $showIndicator={showIndicator}\n data-id=\"left-fade\"\n >\n {showIndicator && (\n <FadeIndicatorButton\n $position=\"left\"\n data-id=\"left-fade-indicator-button\"\n >\n <ChevronLeftIcon />\n </FadeIndicatorButton>\n )}\n </Fade>\n )}\n {showFadeRight && (\n <Fade\n $backgroundColor={fadeColorSet.right}\n $position=\"right\"\n $showIndicator={showIndicator}\n data-id=\"right-fade\"\n >\n {showIndicator && (\n <FadeIndicatorButton\n $position=\"right\"\n data-id=\"right-fade-indicator-button\"\n >\n <ChevronRightIcon />\n </FadeIndicatorButton>\n )}\n </Fade>\n )}\n </>\n );\n };\n\n return (\n <Wrapper ref={wrapperRef} {...otherProps}>\n <Content ref={contentRef}>{children}</Content>\n {renderFade()}\n </Wrapper>\n );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","throttledScrollHandler","throttle","handleScroll","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","handleResize","useResizeDetector","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","useEffect","addEventListener","removeEventListener","_jsxs","Wrapper","Object","assign","_jsx","Content","fadeColorSet","Array","isArray","length","left","right","undefined","_Fragment","Fade","$backgroundColor","$position","FadeIndicatorButton","ChevronLeftIcon","$showIndicator","ChevronRightIcon","renderFade"],"mappings":"+VAqBA,MA2KaA,EAAcC,EAAAA,YA3KT,CACdC,EAQAC,KARA,IAAAC,SACIA,EAAQC,UACRA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQN,EACLO,EAAUC,EAAAA,OAAAR,EANjB,oEAaA,MAAOS,EAAcC,GAAmBC,EAAAA,SACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EAAAA,SACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAuB,MAEpCE,EAAyBC,EAAAA,QAASC,EAAc,IAyCtD,SAASA,IACL,MAAMC,EAAUN,EAAWO,QACrBC,EAAUN,EAAWK,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpDX,EACIY,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtCd,EAAgBY,EAAQK,YAAc,KAEtCd,GAAiB,GACjBH,GAAgB,GAExB,CAEA,SAASkB,IACLT,IAEIb,GACAA,EAAS,CACLgB,QAASN,EAAWK,QACpBD,QAASN,EAAWO,SAQhC,CAzEAQ,oBAAkB,CACdvB,SAAUsB,EACVE,UAAWhB,EACXiB,YAAa,WACbC,YAAa,KAGjBC,EAAAA,oBAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIN,GACJ,MAORO,EAAAA,WAAU,KACN,MAAMb,EAAUN,EAAWK,QAQ3B,OANAF,IAEIG,GACAA,EAAQc,iBAAiB,SAAUnB,GAGhC,KACCK,GACAA,EAAQe,oBAAoB,SAAUpB,EAC1C,CACH,GACF,IAwGH,OACIqB,EAAAA,KAACC,UAAOC,OAAAC,OAAA,CAACxC,IAAKa,GAAgBP,EAAU,CAAAL,SAAA,CACpCwC,EAAAA,IAACC,EAAAA,SAAQ1C,IAAKe,EAAUd,SAAGA,IA5DhB,MACf,IAAI0C,EAiBJ,OAbIA,EAFAC,MAAMC,QAAQ3C,IAAcA,EAAU4C,OAAS,EAEhC,CACXC,KAAM7C,EACN8C,MAAO9C,GAEHA,GACO,CACX6C,UAAME,EACND,WAAOC,GAOXZ,EAAAA,KAAAa,EAAAA,SAAA,CAAAjD,SAAA,CACKO,GACGiC,EAAAA,IAACU,EAAAA,KAAI,CAAAC,iBACiBT,EAAaI,KAAIM,UACzB,sBACMjD,EAAa,UACrB,YAAWH,SAElBG,GACGqC,EAAAA,IAACa,EAAAA,oBAAmB,CAAAD,UACN,OAAM,UACR,sCAERZ,EAAAA,IAACc,EAAAA,gBAAe,CAAA,OAK/B5C,GACG8B,EAAAA,IAACU,EAAAA,uBACqBR,EAAaK,MAAKK,UAC1B,QAAOG,eACDpD,EAAa,UACrB,sBAEPA,GACGqC,EAAAA,IAACa,EAAAA,oBAAmB,CAAAD,UACN,QAAO,UACT,8BAA6BpD,SAErCwC,EAAAA,IAACgB,EAAAA,iBAAgB,CAAA,SAKlC,EAOFC,MACK"}
1	+ {"version":3,"file":"fade-wrapper.js","sources":["../../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n {\n children,\n className,\n fadeColor,\n fadePosition = \"both\",\n showIndicator = false,\n onResize,\n ...otherProps\n }: FadeWrapperProps,\n ref: React.Ref<FadeWrapperRef>\n) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n fadePosition === \"left\" \|\| fadePosition === \"both\"\n );\n const [showFadeRight, setShowFadeRight] = useState<boolean>(\n fadePosition === \"right\" \|\| fadePosition === \"both\"\n );\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const fadeLeftRef = useRef<HTMLDivElement>(null);\n const fadeRightRef = useRef<HTMLDivElement>(null);\n\n const fadeColorSet = getFadeColorSet(fadeColor);\n\n useApplyStyle(fadeLeftRef, {\n [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n fadeColorSet.left,\n showIndicator\n ),\n });\n useApplyStyle(fadeRightRef, {\n [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n fadeColorSet.right,\n showIndicator\n ),\n });\n\n // To scroll left when wrapper resizes\n useResizeDetector({\n onResize: handleResize,\n targetRef: wrapperRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n });\n\n useImperativeHandle(ref, () => {\n return {\n resize() {\n handleResize();\n },\n };\n });\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n const handleScroll = useCallback(() => {\n const wrapper = wrapperRef.current;\n const content = contentRef.current;\n\n if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n /*\n NOTE: Used Math.round because we observe a 0.5 difference\n * even when we scroll to the end. This causes the fade right\n * to not be removed\n */\n setShowFadeRight(\n Math.round(content.scrollLeft) <\n content.scrollWidth - content.offsetWidth\n );\n setShowFadeLeft(content.scrollLeft >= 1);\n } else {\n setShowFadeRight(false);\n setShowFadeLeft(false);\n }\n }, []);\n\n const throttledScrollHandler = useMemo(() => {\n return throttle(handleScroll, 50);\n }, [handleScroll]);\n\n useEffect(() => {\n const content = contentRef.current;\n\n handleScroll();\n\n if (content) {\n content.addEventListener(\"scroll\", throttledScrollHandler);\n }\n\n return () => {\n if (content) {\n content.removeEventListener(\"scroll\", throttledScrollHandler);\n }\n\n throttledScrollHandler.cancel();\n };\n }, [handleScroll, throttledScrollHandler]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n\n function handleResize() {\n handleScroll();\n\n if (onResize) {\n onResize({\n content: contentRef.current!,\n wrapper: wrapperRef.current!,\n });\n }\n\n // TODO: Will move this out to Breadcrumb when it uses this component\n // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n // content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n // }\n }\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderFade = () => {\n return (\n <>\n {showFadeLeft && (\n <div\n ref={fadeLeftRef}\n className={clsx(styles.fade, styles.fadeLeft)}\n data-id=\"left-fade\"\n >\n {showIndicator && (\n <ClickableIcon\n className={clsx(\n styles.fadeIndicatorButton,\n styles.indicatorLeft\n )}\n data-id=\"left-fade-indicator-button\"\n >\n <ChevronLeftIcon />\n </ClickableIcon>\n )}\n </div>\n )}\n {showFadeRight && (\n <div\n ref={fadeRightRef}\n className={clsx(styles.fade, styles.fadeRight)}\n data-id=\"right-fade\"\n >\n {showIndicator && (\n <ClickableIcon\n className={clsx(\n styles.fadeIndicatorButton,\n styles.indicatorRight\n )}\n data-id=\"right-fade-indicator-button\"\n >\n <ChevronRightIcon />\n </ClickableIcon>\n )}\n </div>\n )}\n </>\n );\n };\n\n return (\n <div\n ref={wrapperRef}\n className={clsx(styles.wrapper, className)}\n {...otherProps}\n >\n <div ref={contentRef} className={styles.content}>\n {children}\n </div>\n {renderFade()}\n </div>\n );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","handleScroll","useCallback","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"00BAsBA,MA0LaA,EAAcC,EAAAA,YA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAA,OAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EAAAA,SACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EAAAA,SACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAcF,EAAAA,OAAuB,MACrCG,EAAeH,EAAAA,OAAuB,MAEtCI,EAAeC,EAAAA,gBAAgBjB,GAErCkB,EAAAA,cAAcJ,EAAa,CACvB,CAACK,EAAAA,OAAcC,iBAAkBC,EAAAA,4BAC7BL,EAAaM,KACbpB,KAGRgB,EAAAA,cAAcH,EAAc,CACxB,CAACI,EAAAA,OAAcC,iBAAkBC,EAAAA,4BAC7BL,EAAaO,MACbrB,KAKRsB,oBAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAAA,oBAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,EAAAA,aAAY,KAC7B,MAAMC,EAAUtB,EAAWuB,QACrBC,EAAUtB,EAAWqB,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpD3B,EACI4B,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtC9B,EAAgB4B,EAAQK,YAAc,KAEtC9B,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGkC,EAAyBC,EAAAA,SAAQ,IAC5BC,EAAAA,QAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,EAAAA,WAAU,KACN,MAAMT,EAAUtB,EAAWqB,QAQ3B,OANAH,IAEII,GACAA,EAAQU,iBAAiB,SAAUJ,GAGhC,KACCN,GACAA,EAAQW,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAAChB,EAAcU,IAsElB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAAA,QAAKC,EAAAA,QAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAAA,IAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,UAAcxD,SAC1CA,IAlDLkD,EAAAA,2BACK1C,GACG+C,EAAAA,IAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAAA,QAAKI,EAAAA,KAAaC,EAAAA,UAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAAAA,IAACI,EAAAA,cAAa,CACV1D,UAAWoD,EAAAA,QACPO,sBACAC,EAAAA,eACH,UACO,6BAA4B7D,SAEpCuD,EAAAA,IAACO,EAAAA,gBAAe,CAAA,OAK/BnD,GACG4C,EAAAA,IAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAAA,QAAKI,EAAAA,KAAaM,EAAAA,qBACrB,aAAY/D,SAEnBI,GACGmD,EAAAA,IAACI,EAAAA,cAAa,CACV1D,UAAWoD,EAAAA,QACPO,EAAAA,oBACAI,EAAAA,0BAEI,8BAA6BhE,SAErCuD,EAAAA,IAACU,EAAAA,iBAAgB,CAAA,aAmBnC"}

package/cjs/shared/fade-wrapper/fade-wrapper.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./fade-wrapper.styles_16iug7l.css");exports.content="cv4qfjc",exports.fade="f4ndmik",exports.fadeIndicatorButton="fgwhr72",exports.fadeLeft="f10r53jk",exports.fadeRight="f1mdli9d",exports.indicatorLeft="i135a9q0",exports.indicatorRight="i18cgy8z",exports.tokens={backgroundColor:"--fds-internal-fadeWrapper-fade-backgroundColor"},exports.wrapper="wslc1qs";
2	+ //# sourceMappingURL=fade-wrapper.styles.js.map