npm - @lifesg/react-design-system - Versions diffs - 3.5.0-canary.5 → 3.5.0-canary.6 - Mend

@lifesg/react-design-system 3.5.0-canary.5 → 3.5.0-canary.6

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 (24) hide show

package/cjs/data-table/data-table.js +1 -1
package/cjs/data-table/data-table.js.map +1 -1
package/cjs/navbar/navbar-items.js +1 -1
package/cjs/navbar/navbar-items.js.map +1 -1
package/cjs/navbar/navbar-items.styles.js +11 -7
package/cjs/navbar/navbar-items.styles.js.map +1 -1
package/cjs/toggle/toggle.js +1 -1
package/cjs/toggle/toggle.js.map +1 -1
package/cjs/toggle/toggle.styles.js +42 -20
package/cjs/toggle/toggle.styles.js.map +1 -1
package/data-table/data-table.js +1 -1
package/data-table/data-table.js.map +1 -1
package/data-table/types.d.ts +7 -0
package/navbar/navbar-items.js +1 -1
package/navbar/navbar-items.js.map +1 -1
package/navbar/navbar-items.styles.d.ts +20 -4
package/navbar/navbar-items.styles.js +13 -9
package/navbar/navbar-items.styles.js.map +1 -1
package/package.json +1 -1
package/toggle/toggle.js +1 -1
package/toggle/toggle.js.map +1 -1
package/toggle/toggle.styles.d.ts +1 -0
package/toggle/toggle.styles.js +65 -43
package/toggle/toggle.styles.js.map +1 -1

package/cjs/data-table/data-table.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),r=require("react"),n=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-spinner/loading-spinner.js"),require("../animations/loading-dots/loading-dots.js");var l=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("styled-components");var s=require("../checkbox/checkbox.js"),o=require("../error-display/error-display.js");require("../error-display/helper.js");var a=require("../shared/accessibility/index.js"),d=require("../typography/typography.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var c=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("../util/use-event.js"),h=require("../util/use-event-listener.js"),p=require("../util/use-throttle.js"),g=require("./data-table.styles.js");exports.DataTable=b=>{var{id:y,headers:j,rows:x,className:w,sortIndicators:m,alternatingRows:f,loadState:C="success",enableMultiSelect:$,selectedIds:v,disabledIds:S,enableActionBar:k,enableActionBarWithoutSelection:B,enableSelectAll:q,enableStickyHeader:H,emptyView:R,actionBarContent:A,renderCustomEmptyView:T,onHeaderClick:I,onSelect:E,onSelectAll:W,onClearSelectionClick:D}=b,L=e.__rest(b,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const V=r.useRef(null),N=r.useRef(null),K=r.useRef(null),M=r.useRef(null),_=c.useId(),z=j.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[F,G]=r.useState("inline"),[O,P]=r.useState(!1),[U,J]=r.useState(!1),Q=u.useEvent((()=>{de()}));r.useEffect((()=>{Q()}),[Q]);const X=p.useThrottle((()=>de()),100);n.useResizeDetector({targetRef:M,onResize:()=>X()}),h.useEventListener("scroll",X),h.useEventListener("scroll",X,M.current);const Y=()=>!!(x&&x.length&&v)&&v.length===x.length,Z=e=>!!(null==v?void 0:v.includes(e)),ee=e=>!!f&&e%2==1,te=e=>!!(null==S?void 0:S.includes(e)),ie=e=>{if(L["data-testid"])return`${L["data-testid"]}-${e}`},re=()=>j.length+($?1:0),ne=e=>null==m?void 0:m[e],le=e=>{const t=ne(e);if(t)return"asc"===t?"ascending":"descending"},se=e=>` by ${"asc"===ne(e)?"descending":"ascending"} order`,oe=(e,t)=>`${_}-row-${e}-${t}-key-column`,ae=e=>{const t=z.map((t=>oe(e,t.fieldKey)));return a.concatIds(...t)},de=()=>{if(!M.current||!N.current||!K.current)return;const e=M.current.getBoundingClientRect(),t=N.current.getBoundingClientRect();let i="inline";const r=M.current.scrollHeight>M.current.clientHeight;if(e.top>window.innerHeight||e.bottom<0?i="inline":r?e.top>0&&e.top<window.innerHeight&&e.bottom>0&&e.bottom<window.innerHeight||e.top<0&&e.bottom>0&&e.bottom<window.innerHeight?i="sticky":e.bottom>window.innerHeight&&Math.max(e.top,t.bottom)+t.height<window.innerHeight&&(i="fixed"):e.bottom>window.innerHeight&&t.bottom+t.height<window.innerHeight&&(i="fixed"),P(r),G(i),"fixed"===i)J(!0);else if("sticky"===i){const e=M.current.scrollTop+M.current.clientHeight<M.current.scrollHeight;J(e)}else J(!1)},ce=e=>{const{fieldKey:i,label:r,clickable:n=!1,style:l}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!ne(i),o=(e=>`${_}-header-${e}`)(i);return t.jsxs(g.HeaderCell,{"data-testid":ie(`header-${i}`),$clickable:n,scope:"col","aria-sort":le(i),style:l,$isCheckbox:!1,onClick:()=>(e=>{null==I||I(e)})(i),children:[t.jsxs(g.HeaderCellWrapper,{id:o,children:["string"==typeof r?t.jsx(d.Typography.BodyBL,{weight:"bold",children:r}):r,ue(i)]}),(n||s)&&t.jsx(a.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==I||I(t)})(e,i),children:[s&&"Sort ",t.jsx("span",{"aria-labelledby":o}),s&&se(i)]})})]},i)},ue=e=>{const r=null==m?void 0:m[e];return r?"asc"===r?t.jsx(i.ArrowUpIcon,{"aria-hidden":!0,"data-testid":ie(`header-${e}-arrowup`)}):t.jsx(i.ArrowDownIcon,{"aria-hidden":!0,"data-testid":ie(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},he=()=>t.jsx(g.HeaderCell,{"data-testid":ie("header-selection"),$clickable:!1,$isCheckbox:!0,scope:"col",children:t.jsxs(g.CheckBoxWrapper,{children:[t.jsx(a.VisuallyHidden,{children:"Row selection"}),q&&t.jsx(s.Checkbox,{checked:Y(),indeterminate:!!v&&0!==v.length&&!Y(),disabled:!x||!x.length||!v,"aria-label":"Select all rows",onClick:()=>{W&&W(Y())}})]})}),pe=(e,i)=>{const r="string"!=typeof e?e.style:void 0,n="string"==typeof e?e:e.fieldKey,l=i.id.toString(),s=i[n],o=`${l}-${n}`;return t.jsx(g.BodyCell,{"data-testid":ie(`row-${o}`),id:oe(l,n),style:r,$isCheckbox:!1,children:"string"==typeof s||"number"==typeof s?t.jsx(g.BodyCellContent,{children:s}):"function"==typeof s?s(i,{isSelected:Z(l)}):s},o)},ge=e=>{const i=e.id.toString();return t.jsx(g.BodyCell,{"data-testid":ie(`row-${i}-selection`),$isCheckbox:!0,children:t.jsx(g.CheckBoxWrapper,{children:t.jsx(s.Checkbox,{checked:Z(i),"aria-labelledby":ae(i),onClick:()=>{E&&E(i,!Z(i))},disabled:te(i),focusableWhenDisabled:te(i)})})})},be=()=>t.jsx(o.ErrorDisplay,Object.assign({type:"no-item-found"},R,{title:(null==R?void 0:R.title)?"string"==typeof R.title?t.jsx(g.ErrorDisplayTitle,{weight:"bold",children:R.title}):R.title:t.jsx(g.ErrorDisplayTitle,{weight:"bold",children:"No <items> found"}),description:(null==R?void 0:R.description)?R.description:"No matching rows"}));return t.jsxs(g.TableWrapper,{id:y||"table-wrapper","data-testid":L["data-testid"]||"table",className:w,ref:M,tabIndex:0,$scrollable:O,children:[t.jsx(g.TableContainer,{children:t.jsxs(g.Table,{ref:V,children:[t.jsx(g.TableHead,{ref:N,$stickyHeader:H,children:t.jsxs(g.HeaderRow,{children:[$&&he(),j.map(ce)]})}),t.jsx(g.TableBody,{children:"success"===C?!x||x.length<1?t.jsx(g.BodyRow,{$alternating:!1,children:t.jsx(g.EmptyViewCell,{colSpan:re(),children:T?T():be()})}):t.jsx(t.Fragment,{children:null==x?void 0:x.map(((e,i)=>t.jsxs(g.BodyRow,{"data-testid":ie(`row-${e.id.toString()}`),$showLastRowBottomBorder:U,$alternating:ee(i),$isSelectable:$,$isSelected:Z(e.id.toString()),children:[$&&ge(e),j.map((t=>pe(t,e)))]},e.id.toString())))}):t.jsx(g.BodyRow,{$alternating:!1,children:t.jsx("td",{colSpan:re(),children:t.jsx(g.LoaderWrapper,{role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===C&&t.jsx(l.LoadingDotsSpinner,{})})})})})]})}),k&&(v&&v.length>0||B)&&(()=>{var e,i,r,n;const l=null!==(e=null==v?void 0:v.length)&&void 0!==e?e:0,s="item"+(1===l?"":"s");return t.jsxs(t.Fragment,{children:[t.jsx(g.ActionBarWrapper,{ref:K,$strategy:F,$left:U?null===(r=null===(i=null==V?void 0:V.current)||void 0===i?void 0:i.getBoundingClientRect())||void 0===r?void 0:r.left:0,$width:null===(n=null==V?void 0:V.current)||void 0===n?void 0:n.clientWidth,children:t.jsxs(g.ActionBar,{$float:U,children:[t.jsx(d.Typography.BodyMD,{weight:"semibold",children:`${l} ${s} selected`}),l>0?t.jsx(g.TextButton,{type:"button","aria-label":`Clear selection of ${l} ${s}`,onClick:D,children:"Clear selection"}):t.jsx(g.ActionBarGap,{}),A]})}),"sticky"!==F&&t.jsx(g.ActionBarSpacer,{})]})})()]})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),r=require("react"),n=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-spinner/loading-spinner.js"),require("../animations/loading-dots/loading-dots.js");var l=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("styled-components");var s=require("../checkbox/checkbox.js"),o=require("../error-display/error-display.js");require("../error-display/helper.js");var a=require("../shared/accessibility/index.js"),d=require("../typography/typography.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var c=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("../util/use-event.js"),h=require("../util/use-event-listener.js"),p=require("../util/use-throttle.js"),g=require("./data-table.styles.js");exports.DataTable=b=>{var{id:y,headers:j,rows:x,className:w,sortIndicators:m,alternatingRows:f,loadState:C="success",enableMultiSelect:$,selectedIds:v,disabledIds:S,enableActionBar:k,enableActionBarWithoutSelection:B,enableSelectAll:q,enableStickyHeader:H,emptyView:R,actionBarContent:A,renderCustomEmptyView:T,onHeaderClick:I,onSelect:E,onSelectAll:W,onClearSelectionClick:D}=b,L=e.__rest(b,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const V=r.useRef(null),N=r.useRef(null),K=r.useRef(null),M=r.useRef(null),_=c.useId(),z=j.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[F,G]=r.useState("inline"),[O,P]=r.useState(!1),[U,J]=r.useState(!1),Q=u.useEvent((()=>{de()}));r.useEffect((()=>{Q()}),[Q]);const X=p.useThrottle((()=>de()),100);n.useResizeDetector({targetRef:M,onResize:()=>X()}),h.useEventListener("scroll",X),h.useEventListener("scroll",X,M.current);const Y=()=>!!(x&&x.length&&v)&&v.length===x.length,Z=e=>!!(null==v?void 0:v.includes(e)),ee=e=>!!f&&e%2==1,te=e=>!!(null==S?void 0:S.includes(e)),ie=e=>{if(L["data-testid"])return`${L["data-testid"]}-${e}`},re=()=>j.length+($?1:0),ne=e=>null==m?void 0:m[e],le=e=>{const t=ne(e);if(t)return"asc"===t?"ascending":"descending"},se=e=>` by ${"asc"===ne(e)?"descending":"ascending"} order`,oe=(e,t)=>`${_}-row-${e}-${t}-key-column`,ae=e=>{const t=z.map((t=>oe(e,t.fieldKey)));return a.concatIds(...t)},de=()=>{if(!M.current||!N.current||!K.current)return;const e=M.current.getBoundingClientRect(),t=N.current.getBoundingClientRect();let i="inline";const r=M.current.scrollHeight>M.current.clientHeight;if(e.top>window.innerHeight||e.bottom<0?i="inline":r?e.top>0&&e.top<window.innerHeight&&e.bottom>0&&e.bottom<window.innerHeight||e.top<0&&e.bottom>0&&e.bottom<window.innerHeight?i="sticky":e.bottom>window.innerHeight&&Math.max(e.top,t.bottom)+t.height<window.innerHeight&&(i="fixed"):e.bottom>window.innerHeight&&t.bottom+t.height<window.innerHeight&&(i="fixed"),P(r),G(i),"fixed"===i)J(!0);else if("sticky"===i){const e=M.current.scrollTop+M.current.clientHeight<M.current.scrollHeight;J(e)}else J(!1)},ce=e=>{const{fieldKey:i,label:r,clickable:n=!1,style:l}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!ne(i),o=(e=>`${_}-header-${e}`)(i);return t.jsxs(g.HeaderCell,{"data-testid":ie(`header-${i}`),$clickable:n,scope:"col","aria-sort":le(i),style:l,$isCheckbox:!1,onClick:()=>(e=>{null==I||I(e)})(i),children:[t.jsxs(g.HeaderCellWrapper,{id:o,children:["string"==typeof r?t.jsx(d.Typography.BodyBL,{weight:"bold",children:r}):r,ue(i)]}),(n||s)&&t.jsx(a.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==I||I(t)})(e,i),children:[s&&"Sort ",t.jsx("span",{"aria-labelledby":o}),s&&se(i)]})})]},i)},ue=e=>{const r=null==m?void 0:m[e];return r?"asc"===r?t.jsx(i.ArrowUpIcon,{"aria-hidden":!0,"data-testid":ie(`header-${e}-arrowup`)}):t.jsx(i.ArrowDownIcon,{"aria-hidden":!0,"data-testid":ie(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},he=()=>t.jsx(g.HeaderCell,{"data-testid":ie("header-selection"),$clickable:!1,$isCheckbox:!0,scope:"col",children:t.jsxs(g.CheckBoxWrapper,{children:[t.jsx(a.VisuallyHidden,{children:"Row selection"}),q&&t.jsx(s.Checkbox,{checked:Y(),indeterminate:!!v&&0!==v.length&&!Y(),disabled:!x||!x.length,"aria-label":"Select all rows",onClick:()=>{W&&W(Y())}})]})}),pe=(e,i)=>{const r="string"!=typeof e?e.style:void 0,n="string"==typeof e?e:e.fieldKey,l=i.id.toString(),s=i[n],o=`${l}-${n}`;return t.jsx(g.BodyCell,{"data-testid":ie(`row-${o}`),id:oe(l,n),style:r,$isCheckbox:!1,children:"string"==typeof s||"number"==typeof s?t.jsx(g.BodyCellContent,{children:s}):"function"==typeof s?s(i,{isSelected:Z(l)}):s},o)},ge=e=>{const i=e.id.toString();return t.jsx(g.BodyCell,{"data-testid":ie(`row-${i}-selection`),$isCheckbox:!0,children:t.jsx(g.CheckBoxWrapper,{children:t.jsx(s.Checkbox,{checked:Z(i),"aria-labelledby":ae(i),onClick:()=>{E&&E(i,!Z(i))},disabled:te(i),focusableWhenDisabled:te(i)})})})},be=()=>t.jsx(o.ErrorDisplay,Object.assign({type:"no-item-found"},R,{title:(null==R?void 0:R.title)?"string"==typeof R.title?t.jsx(g.ErrorDisplayTitle,{weight:"bold",children:R.title}):R.title:t.jsx(g.ErrorDisplayTitle,{weight:"bold",children:"No <items> found"}),description:(null==R?void 0:R.description)?R.description:"No matching rows"}));return t.jsxs(g.TableWrapper,{id:y||"table-wrapper","data-testid":L["data-testid"]||"table",className:w,ref:M,tabIndex:0,$scrollable:O,children:[t.jsx(g.TableContainer,{children:t.jsxs(g.Table,{ref:V,children:[t.jsx(g.TableHead,{ref:N,$stickyHeader:H,children:t.jsxs(g.HeaderRow,{children:[$&&he(),j.map(ce)]})}),t.jsx(g.TableBody,{children:"success"===C?!x||x.length<1?t.jsx(g.BodyRow,{$alternating:!1,children:t.jsx(g.EmptyViewCell,{colSpan:re(),children:T?T():be()})}):t.jsx(t.Fragment,{children:null==x?void 0:x.map(((e,i)=>t.jsxs(g.BodyRow,{"data-testid":ie(`row-${e.id.toString()}`),$showLastRowBottomBorder:U,$alternating:ee(i),$isSelectable:$,$isSelected:Z(e.id.toString()),children:[$&&ge(e),j.map((t=>pe(t,e)))]},e.id.toString())))}):t.jsx(g.BodyRow,{$alternating:!1,children:t.jsx("td",{colSpan:re(),children:t.jsx(g.LoaderWrapper,{role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===C&&t.jsx(l.LoadingDotsSpinner,{})})})})})]})}),k&&(v&&v.length>0||B)&&(()=>{var e,i,r,n;const l=null!==(e=null==v?void 0:v.length)&&void 0!==e?e:0,s="item"+(1===l?"":"s");return t.jsxs(t.Fragment,{children:[t.jsx(g.ActionBarWrapper,{ref:K,$strategy:F,$left:U?null===(r=null===(i=null==V?void 0:V.current)||void 0===i?void 0:i.getBoundingClientRect())||void 0===r?void 0:r.left:0,$width:null===(n=null==V?void 0:V.current)||void 0===n?void 0:n.clientWidth,children:t.jsxs(g.ActionBar,{$float:U,children:[t.jsx(d.Typography.BodyMD,{weight:"semibold",children:`${l} ${s} selected`}),l>0?t.jsx(g.TextButton,{type:"button","aria-label":`Clear selection of ${l} ${s}`,onClick:D,children:"Clear selection"}):t.jsx(g.ActionBarGap,{}),A]})}),"sticky"!==F&&t.jsx(g.ActionBarSpacer,{})]})})()]})};
 //# sourceMappingURL=data-table.js.map

package/cjs/data-table/data-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table.js","sources":["../../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport {\n ActionBar,\n ActionBarGap,\n ActionBarSpacer,\n ActionBarWrapper,\n BodyCell,\n BodyCellContent,\n BodyRow,\n CheckBoxWrapper,\n EmptyViewCell,\n ErrorDisplayTitle,\n HeaderCell,\n HeaderCellWrapper,\n HeaderRow,\n LoaderWrapper,\n Table,\n TableBody,\n TableContainer,\n TableHead,\n TableWrapper,\n TextButton,\n} from \"./data-table.styles\";\nimport { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\nexport const DataTable = ({\n id,\n headers,\n rows,\n className,\n sortIndicators,\n alternatingRows,\n loadState = \"success\",\n enableMultiSelect,\n selectedIds,\n disabledIds,\n enableActionBar,\n enableActionBarWithoutSelection,\n enableSelectAll,\n enableStickyHeader,\n emptyView,\n actionBarContent,\n renderCustomEmptyView,\n onHeaderClick,\n onSelect,\n onSelectAll,\n onClearSelectionClick,\n ...otherProps\n}: DataTableProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const tableRef = useRef<HTMLTableElement>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const keyColumns = headers.filter(\n (header): header is Exclude<HeaderProps, string> => {\n return typeof header !== \"string\" && !!header.keyColumn;\n }\n );\n\n const [actionBarStrategy, setActionBarStrategy] = useState<\n \"sticky\" \| \"fixed\" \| \"inline\"\n >(\"inline\");\n const [scrollable, setScrollable] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const useUpdateActionBarBehaviour = useEvent(() => {\n updateActionBarBehaviour();\n });\n\n useEffect(() => {\n useUpdateActionBarBehaviour();\n }, [useUpdateActionBarBehaviour]);\n\n const updateActionBarBehaviourThrottled = useThrottle(\n () => updateActionBarBehaviour(),\n 100\n );\n\n useResizeDetector({\n targetRef: wrapperRef,\n onResize: () => updateActionBarBehaviourThrottled(),\n });\n\n useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n useEventListener(\n \"scroll\",\n updateActionBarBehaviourThrottled,\n wrapperRef.current\n );\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\n if (!rows \|\| !rows.length \|\| !selectedIds) {\n return false;\n }\n\n return selectedIds.length === rows.length;\n };\n\n const isIndeterminateCheckbox = (): boolean => {\n return (\n !!selectedIds &&\n selectedIds.length !== 0 &&\n !isAllCheckboxSelected()\n );\n };\n\n const isHeaderCheckboxDisabled = (): boolean => {\n return !rows \|\| !rows.length \|\| !selectedIds;\n };\n\n const isRowSelected = (rowId: string): boolean => {\n return !!selectedIds?.includes(rowId);\n };\n\n const isAlternatingRow = (index: number): boolean => {\n return !!alternatingRows && index % 2 === 1;\n };\n\n const isDisabledRow = (rowId: string): boolean => {\n return !!disabledIds?.includes(rowId);\n };\n\n const getDataTestId = (subStr: string) => {\n if (!otherProps[\"data-testid\"]) return undefined;\n return `${otherProps[\"data-testid\"]}-${subStr}`;\n };\n\n const getTotalColumns = (): number => {\n return headers.length + (enableMultiSelect ? 1 : 0);\n };\n\n const getSortDirection = (fieldKey: string) => {\n return sortIndicators?.[fieldKey];\n };\n\n const getHeaderAriaSort = (fieldKey: string) => {\n const sortDirection = getSortDirection(fieldKey);\n\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n };\n\n const getSortButtonAriaLabel = (fieldKey: string) => {\n const nextSortDirection =\n getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n return ` by ${nextSortDirection} order`;\n };\n\n const getHeaderWrapperId = (fieldKey: string) => {\n return `${internalId}-header-${fieldKey}`;\n };\n const getCellId = (rowId: string, fieldKey: string) => {\n return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n };\n\n const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n const keyColumnIds = keyColumns.map((header) =>\n getCellId(rowId, header.fieldKey)\n );\n\n return concatIds(...keyColumnIds);\n };\n\n const updateActionBarBehaviour = () => {\n if (\n !wrapperRef.current \|\|\n !headerRef.current \|\|\n !actionBarWrapperRef.current\n ) {\n return;\n }\n\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n const headerBounds = headerRef.current.getBoundingClientRect();\n\n let strategy: typeof actionBarStrategy = \"inline\";\n\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n if (\n wrapperBounds.top > window.innerHeight \|\|\n wrapperBounds.bottom < 0\n ) {\n // if fully out of the viewport, disable floating\n strategy = \"inline\";\n } else if (scrollable) {\n if (\n wrapperBounds.top > 0 &&\n wrapperBounds.top < window.innerHeight &&\n wrapperBounds.bottom > 0 &&\n wrapperBounds.bottom < window.innerHeight\n ) {\n // if fully in the viewport, use the native sticky behaviour\n strategy = \"sticky\";\n } else if (\n wrapperBounds.top < 0 &&\n wrapperBounds.bottom > 0 &&\n wrapperBounds.bottom < window.innerHeight\n ) {\n // if partially offscreen at the top, use the native sticky behaviour\n strategy = \"sticky\";\n } else if (\n wrapperBounds.bottom > window.innerHeight &&\n Math.max(wrapperBounds.top, headerBounds.bottom) +\n headerBounds.height <\n window.innerHeight\n ) {\n // if offscreen at the bottom, pin to the viewport, up until the table/header\n strategy = \"fixed\";\n }\n } else if (\n wrapperBounds.bottom > window.innerHeight &&\n headerBounds.bottom + headerBounds.height < window.innerHeight\n ) {\n // if offscreen at the bottom, pin to the viewport, up until the header\n strategy = \"fixed\";\n }\n\n setScrollable(scrollable);\n setActionBarStrategy(strategy);\n\n if (strategy === \"fixed\") {\n setIsFloatingActionBar(true);\n } else if (strategy === \"sticky\") {\n const beforeScrollEnd =\n wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n wrapperRef.current.scrollHeight;\n setIsFloatingActionBar(beforeScrollEnd);\n } else {\n setIsFloatingActionBar(false);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleHeaderClick = (fieldKey: string) => {\n onHeaderClick?.(fieldKey);\n };\n\n const handleHeaderButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>,\n fieldKey: string\n ) => {\n event.stopPropagation();\n onHeaderClick?.(fieldKey);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <TableHead ref={headerRef} $stickyHeader={enableStickyHeader}>\n <HeaderRow>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </HeaderRow>\n </TableHead>\n );\n\n const renderHeaderCell = (header: HeaderProps) => {\n const {\n fieldKey,\n label,\n clickable = false,\n style,\n } = typeof header === \"string\"\n ? {\n fieldKey: header,\n label: header,\n style: undefined,\n }\n : header;\n\n const isSortable = !!getSortDirection(fieldKey);\n const headerCellWrapperId = getHeaderWrapperId(fieldKey);\n\n return (\n <HeaderCell\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n $clickable={clickable}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n $isCheckbox={false}\n onClick={() => handleHeaderClick(fieldKey)}\n >\n <HeaderCellWrapper id={headerCellWrapperId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </HeaderCellWrapper>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button\n onClick={(event) =>\n handleHeaderButtonClick(event, fieldKey)\n }\n >\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellWrapperId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </HeaderCell>\n );\n };\n\n const renderSortedArrow = (fieldKey: string) => {\n const isSorted = sortIndicators?.[fieldKey];\n\n if (!isSorted) {\n return <></>;\n }\n if (isSorted === \"asc\") {\n return (\n <ArrowUpIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <HeaderCell\n data-testid={getDataTestId(\"header-selection\")}\n $clickable={false}\n $isCheckbox={true}\n scope=\"col\"\n >\n <CheckBoxWrapper>\n <VisuallyHidden>Row selection</VisuallyHidden>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n disabled={isHeaderCheckboxDisabled()}\n aria-label=\"Select all rows\"\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </CheckBoxWrapper>\n </HeaderCell>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <BodyRow $alternating={false}>\n <EmptyViewCell colSpan={getTotalColumns()}>\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </EmptyViewCell>\n </BodyRow>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <BodyRow\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n $showLastRowBottomBorder={isFloatingActionBar}\n $alternating={isAlternatingRow(index)}\n $isSelectable={enableMultiSelect}\n $isSelected={isRowSelected(row.id.toString())}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </BodyRow>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header !== \"string\" ? header.style : undefined;\n const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n const rowId = row.id.toString();\n const cellData = row[fieldKey];\n const cellId = `${rowId}-${fieldKey}`;\n\n return (\n <BodyCell\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n style={style}\n $isCheckbox={false}\n >\n {typeof cellData === \"string\" \|\|\n typeof cellData === \"number\" ? (\n <BodyCellContent>{cellData}</BodyCellContent>\n ) : typeof cellData === \"function\" ? (\n cellData(row, { isSelected: isRowSelected(rowId) })\n ) : (\n cellData\n )}\n </BodyCell>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <BodyCell\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n $isCheckbox={true}\n >\n <CheckBoxWrapper>\n <Checkbox\n checked={isRowSelected(rowId)}\n aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n focusableWhenDisabled={isDisabledRow(rowId)}\n />\n </CheckBoxWrapper>\n </BodyCell>\n );\n };\n\n const renderBasicEmptyView = () => {\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={\n emptyView?.title ? (\n typeof emptyView.title === \"string\" ? (\n <ErrorDisplayTitle weight=\"bold\">\n {emptyView.title}\n </ErrorDisplayTitle>\n ) : (\n emptyView.title\n )\n ) : (\n <ErrorDisplayTitle weight=\"bold\">\n {\"No <items> found\"}\n </ErrorDisplayTitle>\n )\n }\n description={\n emptyView?.description\n ? emptyView.description\n : \"No matching rows\"\n }\n />\n );\n };\n\n const renderLoader = () => {\n return (\n <BodyRow $alternating={false}>\n <td colSpan={getTotalColumns()}>\n <LoaderWrapper\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </LoaderWrapper>\n </td>\n </BodyRow>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n const counter = `item${count === 1 ? \"\" : \"s\"}`;\n\n return (\n <>\n <ActionBarWrapper\n ref={actionBarWrapperRef}\n $strategy={actionBarStrategy}\n $left={\n isFloatingActionBar\n ? tableRef?.current?.getBoundingClientRect()?.left\n : 0\n }\n $width={tableRef?.current?.clientWidth}\n >\n <ActionBar $float={isFloatingActionBar}>\n <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n {count > 0 ? (\n <TextButton\n type=\"button\"\n aria-label={`Clear selection of ${count} ${counter}`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </TextButton>\n ) : (\n <ActionBarGap />\n )}\n {actionBarContent}\n </ActionBar>\n </ActionBarWrapper>\n {/* leave a fixed space when action bar floats to avoid layout shift */}\n {actionBarStrategy !== \"sticky\" && <ActionBarSpacer />}\n </>\n );\n };\n\n return (\n <TableWrapper\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={className}\n ref={wrapperRef}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n $scrollable={scrollable}\n >\n <TableContainer>\n <Table ref={tableRef}>\n {renderHeaders()}\n <TableBody>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </TableBody>\n </Table>\n </TableContainer>\n {enableActionBar &&\n ((selectedIds && selectedIds.length > 0) \|\|\n enableActionBarWithoutSelection) &&\n renderSelectionBar()}\n </TableWrapper>\n );\n};\n"],"names":["_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","current","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","getBoundingClientRect","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","undefined","isSortable","headerCellWrapperId","getHeaderWrapperId","_jsxs","HeaderCell","$clickable","scope","$isCheckbox","onClick","handleHeaderClick","children","HeaderCellWrapper","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","CheckBoxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","focusableWhenDisabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","ref","tabIndex","$scrollable","TableContainer","Table","TableHead","$stickyHeader","HeaderRow","TableBody","BodyRow","$alternating","EmptyViewCell","colSpan","$isSelected","LoaderWrapper","role","LoadingDotsSpinner","count","counter","_Fragment","ActionBarWrapper","$strategy","$left","_c","_b","left","$width","_d","clientWidth","ActionBar","BodyMD","TextButton","ActionBarGap","ActionBarSpacer","renderSelectionBar"],"mappings":"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"}
1	+ {"version":3,"file":"data-table.js","sources":["../../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport {\n ActionBar,\n ActionBarGap,\n ActionBarSpacer,\n ActionBarWrapper,\n BodyCell,\n BodyCellContent,\n BodyRow,\n CheckBoxWrapper,\n EmptyViewCell,\n ErrorDisplayTitle,\n HeaderCell,\n HeaderCellWrapper,\n HeaderRow,\n LoaderWrapper,\n Table,\n TableBody,\n TableContainer,\n TableHead,\n TableWrapper,\n TextButton,\n} from \"./data-table.styles\";\nimport { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\nexport const DataTable = ({\n id,\n headers,\n rows,\n className,\n sortIndicators,\n alternatingRows,\n loadState = \"success\",\n enableMultiSelect,\n selectedIds,\n disabledIds,\n enableActionBar,\n enableActionBarWithoutSelection,\n enableSelectAll,\n enableStickyHeader,\n emptyView,\n actionBarContent,\n renderCustomEmptyView,\n onHeaderClick,\n onSelect,\n onSelectAll,\n onClearSelectionClick,\n ...otherProps\n}: DataTableProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const tableRef = useRef<HTMLTableElement>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const keyColumns = headers.filter(\n (header): header is Exclude<HeaderProps, string> => {\n return typeof header !== \"string\" && !!header.keyColumn;\n }\n );\n\n const [actionBarStrategy, setActionBarStrategy] = useState<\n \"sticky\" \| \"fixed\" \| \"inline\"\n >(\"inline\");\n const [scrollable, setScrollable] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const useUpdateActionBarBehaviour = useEvent(() => {\n updateActionBarBehaviour();\n });\n\n useEffect(() => {\n useUpdateActionBarBehaviour();\n }, [useUpdateActionBarBehaviour]);\n\n const updateActionBarBehaviourThrottled = useThrottle(\n () => updateActionBarBehaviour(),\n 100\n );\n\n useResizeDetector({\n targetRef: wrapperRef,\n onResize: () => updateActionBarBehaviourThrottled(),\n });\n\n useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n useEventListener(\n \"scroll\",\n updateActionBarBehaviourThrottled,\n wrapperRef.current\n );\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\n if (!rows \|\| !rows.length \|\| !selectedIds) {\n return false;\n }\n\n return selectedIds.length === rows.length;\n };\n\n const isIndeterminateCheckbox = (): boolean => {\n return (\n !!selectedIds &&\n selectedIds.length !== 0 &&\n !isAllCheckboxSelected()\n );\n };\n\n const isHeaderCheckboxDisabled = (): boolean => {\n return !rows \|\| !rows.length;\n };\n\n const isRowSelected = (rowId: string): boolean => {\n return !!selectedIds?.includes(rowId);\n };\n\n const isAlternatingRow = (index: number): boolean => {\n return !!alternatingRows && index % 2 === 1;\n };\n\n const isDisabledRow = (rowId: string): boolean => {\n return !!disabledIds?.includes(rowId);\n };\n\n const getDataTestId = (subStr: string) => {\n if (!otherProps[\"data-testid\"]) return undefined;\n return `${otherProps[\"data-testid\"]}-${subStr}`;\n };\n\n const getTotalColumns = (): number => {\n return headers.length + (enableMultiSelect ? 1 : 0);\n };\n\n const getSortDirection = (fieldKey: string) => {\n return sortIndicators?.[fieldKey];\n };\n\n const getHeaderAriaSort = (fieldKey: string) => {\n const sortDirection = getSortDirection(fieldKey);\n\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n };\n\n const getSortButtonAriaLabel = (fieldKey: string) => {\n const nextSortDirection =\n getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n return ` by ${nextSortDirection} order`;\n };\n\n const getHeaderWrapperId = (fieldKey: string) => {\n return `${internalId}-header-${fieldKey}`;\n };\n const getCellId = (rowId: string, fieldKey: string) => {\n return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n };\n\n const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n const keyColumnIds = keyColumns.map((header) =>\n getCellId(rowId, header.fieldKey)\n );\n\n return concatIds(...keyColumnIds);\n };\n\n const updateActionBarBehaviour = () => {\n if (\n !wrapperRef.current \|\|\n !headerRef.current \|\|\n !actionBarWrapperRef.current\n ) {\n return;\n }\n\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n const headerBounds = headerRef.current.getBoundingClientRect();\n\n let strategy: typeof actionBarStrategy = \"inline\";\n\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n if (\n wrapperBounds.top > window.innerHeight \|\|\n wrapperBounds.bottom < 0\n ) {\n // if fully out of the viewport, disable floating\n strategy = \"inline\";\n } else if (scrollable) {\n if (\n wrapperBounds.top > 0 &&\n wrapperBounds.top < window.innerHeight &&\n wrapperBounds.bottom > 0 &&\n wrapperBounds.bottom < window.innerHeight\n ) {\n // if fully in the viewport, use the native sticky behaviour\n strategy = \"sticky\";\n } else if (\n wrapperBounds.top < 0 &&\n wrapperBounds.bottom > 0 &&\n wrapperBounds.bottom < window.innerHeight\n ) {\n // if partially offscreen at the top, use the native sticky behaviour\n strategy = \"sticky\";\n } else if (\n wrapperBounds.bottom > window.innerHeight &&\n Math.max(wrapperBounds.top, headerBounds.bottom) +\n headerBounds.height <\n window.innerHeight\n ) {\n // if offscreen at the bottom, pin to the viewport, up until the table/header\n strategy = \"fixed\";\n }\n } else if (\n wrapperBounds.bottom > window.innerHeight &&\n headerBounds.bottom + headerBounds.height < window.innerHeight\n ) {\n // if offscreen at the bottom, pin to the viewport, up until the header\n strategy = \"fixed\";\n }\n\n setScrollable(scrollable);\n setActionBarStrategy(strategy);\n\n if (strategy === \"fixed\") {\n setIsFloatingActionBar(true);\n } else if (strategy === \"sticky\") {\n const beforeScrollEnd =\n wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n wrapperRef.current.scrollHeight;\n setIsFloatingActionBar(beforeScrollEnd);\n } else {\n setIsFloatingActionBar(false);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleHeaderClick = (fieldKey: string) => {\n onHeaderClick?.(fieldKey);\n };\n\n const handleHeaderButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>,\n fieldKey: string\n ) => {\n event.stopPropagation();\n onHeaderClick?.(fieldKey);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <TableHead ref={headerRef} $stickyHeader={enableStickyHeader}>\n <HeaderRow>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </HeaderRow>\n </TableHead>\n );\n\n const renderHeaderCell = (header: HeaderProps) => {\n const {\n fieldKey,\n label,\n clickable = false,\n style,\n } = typeof header === \"string\"\n ? {\n fieldKey: header,\n label: header,\n style: undefined,\n }\n : header;\n\n const isSortable = !!getSortDirection(fieldKey);\n const headerCellWrapperId = getHeaderWrapperId(fieldKey);\n\n return (\n <HeaderCell\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n $clickable={clickable}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n $isCheckbox={false}\n onClick={() => handleHeaderClick(fieldKey)}\n >\n <HeaderCellWrapper id={headerCellWrapperId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </HeaderCellWrapper>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button\n onClick={(event) =>\n handleHeaderButtonClick(event, fieldKey)\n }\n >\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellWrapperId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </HeaderCell>\n );\n };\n\n const renderSortedArrow = (fieldKey: string) => {\n const isSorted = sortIndicators?.[fieldKey];\n\n if (!isSorted) {\n return <></>;\n }\n if (isSorted === \"asc\") {\n return (\n <ArrowUpIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <HeaderCell\n data-testid={getDataTestId(\"header-selection\")}\n $clickable={false}\n $isCheckbox={true}\n scope=\"col\"\n >\n <CheckBoxWrapper>\n <VisuallyHidden>Row selection</VisuallyHidden>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n disabled={isHeaderCheckboxDisabled()}\n aria-label=\"Select all rows\"\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </CheckBoxWrapper>\n </HeaderCell>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <BodyRow $alternating={false}>\n <EmptyViewCell colSpan={getTotalColumns()}>\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </EmptyViewCell>\n </BodyRow>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <BodyRow\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n $showLastRowBottomBorder={isFloatingActionBar}\n $alternating={isAlternatingRow(index)}\n $isSelectable={enableMultiSelect}\n $isSelected={isRowSelected(row.id.toString())}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </BodyRow>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header !== \"string\" ? header.style : undefined;\n const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n const rowId = row.id.toString();\n const cellData = row[fieldKey];\n const cellId = `${rowId}-${fieldKey}`;\n\n return (\n <BodyCell\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n style={style}\n $isCheckbox={false}\n >\n {typeof cellData === \"string\" \|\|\n typeof cellData === \"number\" ? (\n <BodyCellContent>{cellData}</BodyCellContent>\n ) : typeof cellData === \"function\" ? (\n cellData(row, { isSelected: isRowSelected(rowId) })\n ) : (\n cellData\n )}\n </BodyCell>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <BodyCell\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n $isCheckbox={true}\n >\n <CheckBoxWrapper>\n <Checkbox\n checked={isRowSelected(rowId)}\n aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n focusableWhenDisabled={isDisabledRow(rowId)}\n />\n </CheckBoxWrapper>\n </BodyCell>\n );\n };\n\n const renderBasicEmptyView = () => {\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={\n emptyView?.title ? (\n typeof emptyView.title === \"string\" ? (\n <ErrorDisplayTitle weight=\"bold\">\n {emptyView.title}\n </ErrorDisplayTitle>\n ) : (\n emptyView.title\n )\n ) : (\n <ErrorDisplayTitle weight=\"bold\">\n {\"No <items> found\"}\n </ErrorDisplayTitle>\n )\n }\n description={\n emptyView?.description\n ? emptyView.description\n : \"No matching rows\"\n }\n />\n );\n };\n\n const renderLoader = () => {\n return (\n <BodyRow $alternating={false}>\n <td colSpan={getTotalColumns()}>\n <LoaderWrapper\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </LoaderWrapper>\n </td>\n </BodyRow>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n const counter = `item${count === 1 ? \"\" : \"s\"}`;\n\n return (\n <>\n <ActionBarWrapper\n ref={actionBarWrapperRef}\n $strategy={actionBarStrategy}\n $left={\n isFloatingActionBar\n ? tableRef?.current?.getBoundingClientRect()?.left\n : 0\n }\n $width={tableRef?.current?.clientWidth}\n >\n <ActionBar $float={isFloatingActionBar}>\n <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n {count > 0 ? (\n <TextButton\n type=\"button\"\n aria-label={`Clear selection of ${count} ${counter}`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </TextButton>\n ) : (\n <ActionBarGap />\n )}\n {actionBarContent}\n </ActionBar>\n </ActionBarWrapper>\n {/* leave a fixed space when action bar floats to avoid layout shift */}\n {actionBarStrategy !== \"sticky\" && <ActionBarSpacer />}\n </>\n );\n };\n\n return (\n <TableWrapper\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={className}\n ref={wrapperRef}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n $scrollable={scrollable}\n >\n <TableContainer>\n <Table ref={tableRef}>\n {renderHeaders()}\n <TableBody>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </TableBody>\n </Table>\n </TableContainer>\n {enableActionBar &&\n ((selectedIds && selectedIds.length > 0) \|\|\n enableActionBarWithoutSelection) &&\n renderSelectionBar()}\n </TableWrapper>\n );\n};\n"],"names":["_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","current","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","getBoundingClientRect","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","undefined","isSortable","headerCellWrapperId","getHeaderWrapperId","_jsxs","HeaderCell","$clickable","scope","$isCheckbox","onClick","handleHeaderClick","children","HeaderCellWrapper","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","CheckBoxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","focusableWhenDisabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","ref","tabIndex","$scrollable","TableContainer","Table","TableHead","$stickyHeader","HeaderRow","TableBody","BodyRow","$alternating","EmptyViewCell","colSpan","$isSelected","LoaderWrapper","role","LoadingDotsSpinner","count","counter","_Fragment","ActionBarWrapper","$strategy","$left","_c","_b","left","$width","_d","clientWidth","ActionBar","BodyMD","TextButton","ActionBarGap","ActionBarSpacer","renderSelectionBar"],"mappings":"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"}

package/cjs/navbar/navbar-items.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),r=require("../menu/menu.js"),t=require("./menu.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:u,mobile:d=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:h})=>{const[p,j]=i.useState(-1),[m,x]=i.useState(!1),[b,g]=i.useState(null),v=i.useRef(null),k=s.useId();i.useEffect((()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&(x(!1),j(-1),g(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const L=(e,n)=>i=>{var r;if(i.stopPropagation(),d&&(null===(r=e.subMenu)||void 0===r?void 0:r.length)){const e=!(p===n&&m);j(n),x(e)}h(i,e)},$=(e,n)=>{e.stopPropagation(),h(e,n),x(!1),j(-1)},f=(e,i)=>n.jsx(r.Menu.Content,{id:i,children:n.jsx(r.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(r.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),q=e=>n.jsx(t.Menu,{items:e,onItemClick:$}),I=(i,t)=>{const{children:s,options:a,subMenu:h}=i,j=e.__rest(i,["children","options","subMenu"]),x=!!(null==h?void 0:h.length),v=(e=>{var n;return e.id===u||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===u))})(i),$=d&&x&&p===t&&m,I=!d&&x&&b===t||$,M=null!==b?b===t:v,C=!c&&M,_=M?d?"bold":"semibold":"regular",O=d?`link__mobile-${t+1}`:`link__${t+1}`,S=()=>C?n.jsx(l.LinkIndicator,{"data-testid":`${O}-indicator`,$selected:M}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:x?(()=>{const e=`navbar-submenu-${k}-${i.id}`;return d?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":O,weight:_,$selected:M,underlineStyle:"none"},j,{"aria-current":v?"page":void 0,"aria-haspopup":"menu","aria-expanded":I,onClick:L(i,t)},a,{children:[n.jsx(l.LinkLabel,{children:s}),S(),d&&x?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${O}-expand-collapse-button`,$selected:$,focusHighlight:!1,focusOutline:"browser","aria-label":$?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:M})})}):null]})),$&&q(h)]}):n.jsx(r.Menu,{position:"bottom",customOffset:0,menuContent:f(h,e),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>g(t),onPopoverDismiss:()=>{g((e=>e===t?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":O,weight:_,$selected:M,"aria-haspopup":"menu","aria-expanded":I},a,{children:[n.jsx(l.LinkLabel,{children:s}),S()]}))})})():n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":O,weight:_,$selected:M,underlineStyle:"none"},j,{"aria-current":v?"page":void 0,onClick:L(i,t)},a,{children:[n.jsx(l.LinkLabel,{children:s}),S()]}))},t)},M=()=>a.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):I(e,i)}));return a&&a.length>0?d?n.jsx(l.MobileWrapper,{ref:v,children:M()}):n.jsx(l.Wrapper,{ref:v,$alignLeft:o,children:M()}):n.jsx(n.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),t=require("../menu/menu.js"),r=require("./menu.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:d,mobile:u=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:p})=>{const[h,j]=i.useState(-1),[x,m]=i.useState(!1),[b,g]=i.useState(null),v=i.useRef(null),k=s.useId();i.useEffect((()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&(m(!1),j(-1),g(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const $=(e,n)=>i=>{var t;if(i.stopPropagation(),u&&(null===(t=e.subMenu)||void 0===t?void 0:t.length)){const e=!(h===n&&x);j(n),m(e)}p(i,e)},L=(e,n)=>{e.stopPropagation(),p(e,n),m(!1),j(-1)},f=(e,i)=>n.jsx(t.Menu.Content,{id:i,children:n.jsx(t.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(t.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),I=e=>n.jsx(r.Menu,{items:e,onItemClick:L}),q=(i,r)=>{const{children:s,options:p,subMenu:j}=i,m=e.__rest(i,["children","options","subMenu"]),v=!!(null==j?void 0:j.length),L=(e=>{var n;return e.id===d||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===d))})(i),q=u&&v&&h===r&&x,M=!u&&v&&b===r||q,C=null!==b?b===r:L,_=!c&&C,O=C?u?"bold":"semibold":"regular",S=u?`link__mobile-${r+1}`:`link__${r+1}`,w=()=>_?n.jsx(l.LinkIndicator,{"data-testid":`${S}-indicator`,$selected:C}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:v?(e=>{const a=`navbar-submenu-${k}-${i.id}`;return u?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":S,weight:O,$selected:C,underlineStyle:"none"},m,{"aria-current":L?"page":void 0,"aria-haspopup":"menu","aria-expanded":M,onClick:$(i,r)},p,{children:[n.jsx(l.LinkLabel,{children:s}),w(),u&&v?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${S}-expand-collapse-button`,$selected:C,$expanded:M,focusHighlight:!1,focusOutline:"browser","aria-label":M?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:C})})}):null]})),q&&I(j)]}):n.jsx(t.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:f(j,a),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>g(r),onPopoverDismiss:()=>{g((e=>e===r?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":S,weight:O,$selected:C,"aria-haspopup":"menu","aria-expanded":M},p,{children:[n.jsx(l.LinkLabel,{children:s}),w(),n.jsx(l.ChevronIconDesktop,{$selected:C,$expanded:M})]}))})})(r===a.length-1):n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":S,weight:O,$selected:C,underlineStyle:"none"},m,{"aria-current":L?"page":void 0,onClick:$(i,r)},p,{children:[n.jsx(l.LinkLabel,{children:s}),w()]}))},r)},M=()=>a.map(((e,i)=>{var t;return"component"===e.itemType?n.jsx("li",{children:null!==(t=e.children)&&void 0!==t?t:null},i):q(e,i)}));return a&&a.length>0?u?n.jsx(l.MobileWrapper,{ref:v,children:M()}):n.jsx(l.Wrapper,{ref:v,$alignLeft:o,children:M()}):n.jsx(n.Fragment,{})};
 //# sourceMappingURL=navbar-items.js.map

package/cjs/navbar/navbar-items.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n ChevronIcon,\n ExpandCollapseButton,\n Link,\n LinkButton,\n LinkIconContainer,\n LinkIndicator,\n LinkItem,\n LinkLabel,\n MobileWrapper,\n Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n items: NavItemProps<T>[];\n selectedId?: string \| undefined;\n /** toggle for mobile or desktop view /\n mobile?: boolean \| undefined;\n hideNavBranding?: boolean \| undefined;\n /* hide the selected LinkIndicator */\n hideLinkIndicator?: boolean \| undefined;\n onItemClick: (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemProps<T> \| NavItemCommonProps<T>\n ) => void;\n}\n\nexport const NavbarItems = <T,>({\n items,\n selectedId,\n mobile = false,\n hideNavBranding,\n hideLinkIndicator = false,\n onItemClick,\n}: Props<T>): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number \| null>(\n null\n );\n const listRef = useRef<HTMLUListElement>(null);\n const instanceId = useId();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const resetAll = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n setOpenSubMenuIndex(null);\n };\n\n const closeMobileSubMenu = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n };\n\n const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n if (item.id === selectedId) return true;\n if (item.subMenu?.length) {\n return !!item.subMenu.find((s) => s.id === selectedId);\n }\n return false;\n };\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n listRef.current &&\n !listRef.current.contains(event.target as Node)\n ) {\n resetAll();\n }\n };\n document.addEventListener(\"click\", handleClickOutside, true);\n return () => {\n document.removeEventListener(\"click\", handleClickOutside, true);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n return (event: React.MouseEvent<HTMLAnchorElement>) => {\n event.stopPropagation();\n\n // mobile expands inline when link has submenu\n if (mobile && item.subMenu?.length) {\n const nextExpanded = !(selectedIndex === index && showSubMenu);\n setSelectedIndex(index);\n setShowSubMenu(nextExpanded);\n }\n\n onItemClick(event, item);\n };\n };\n\n const handleMobileSubLinkClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemCommonProps<T>\n ) => {\n event.stopPropagation();\n onItemClick(event, item);\n closeMobileSubMenu();\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderDesktopSubMenu = (\n subMenu: NavItemCommonProps<T>[],\n subMenuId: string\n ) => (\n <DesktopMenu.Content id={subMenuId}>\n <DesktopMenu.Section showDivider={false}>\n {subMenu.map((item, subIndex) => (\n <DesktopMenu.Link\n key={`${item.id}-${subIndex}`}\n href={item.href}\n >\n {item.children}\n </DesktopMenu.Link>\n ))}\n </DesktopMenu.Section>\n </DesktopMenu.Content>\n );\n\n const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n );\n\n const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n const { children, options, subMenu, ...otherItemAttrs } = item;\n\n const hasSubMenu = !!subMenu?.length;\n\n const isRouteSelected = checkSelected(item);\n\n // desktop popover open state\n const isDesktopExpanded =\n !mobile && hasSubMenu && openSubMenuIndex === index;\n\n // mobile inline expanded state\n const isMobileExpanded =\n mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n const isExpanded = isDesktopExpanded \|\| isMobileExpanded;\n\n const selected =\n openSubMenuIndex !== null\n ? openSubMenuIndex === index\n : isRouteSelected;\n\n const showIndicator = !hideLinkIndicator && selected;\n\n const textWeight: TypographyWeight = selected\n ? mobile\n ? \"bold\"\n : \"semibold\"\n : \"regular\";\n\n const testId = mobile\n ? `link__mobile-${index + 1}`\n : `link__${index + 1}`;\n\n const renderIndicator = () =>\n showIndicator ? (\n <LinkIndicator\n data-testid={`${testId}-indicator`}\n $selected={selected}\n />\n ) : null;\n\n const renderMobileChevron = () =>\n mobile && hasSubMenu ? (\n <LinkIconContainer>\n <ExpandCollapseButton\n data-testid={`${testId}-expand-collapse-button`}\n $selected={isMobileExpanded}\n focusHighlight={false}\n focusOutline=\"browser\"\n aria-label={isMobileExpanded ? \"Collapse\" : \"Expand\"}\n >\n <ChevronIcon $selected={selected} />\n </ExpandCollapseButton>\n </LinkIconContainer>\n ) : null;\n\n const renderLink = () => (\n <Link\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n </Link>\n );\n\n const renderLinkWithSubmenu = () => {\n const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n if (mobile) {\n return (\n <>\n <Link\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n {renderMobileChevron()}\n </Link>\n\n {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n </>\n );\n }\n\n return (\n <DesktopMenu\n position=\"bottom\"\n customOffset={0}\n menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n triggerOnFocus\n isModal={false}\n onPopoverAppear={() => setOpenSubMenuIndex(index)}\n onPopoverDismiss={() => {\n setOpenSubMenuIndex((prev) =>\n prev === index ? null : prev\n );\n }}\n >\n <LinkButton\n type=\"button\"\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n </LinkButton>\n </DesktopMenu>\n );\n };\n\n return (\n <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n {hasSubMenu ? renderLinkWithSubmenu() : renderLink()}\n </LinkItem>\n );\n };\n\n const renderItems = () =>\n items.map((item, index) => {\n switch (item.itemType) {\n case \"component\": {\n return <li key={index}>{item.children ?? null}</li>;\n }\n case \"link\":\n default: {\n return renderLinkItem(item as NavItemLinkProps<T>, index);\n }\n }\n });\n\n if (items && items.length > 0) {\n return mobile ? (\n <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n ) : (\n <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n {renderItems()}\n </Wrapper>\n );\n }\n\n return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","_jsxs","_Fragment","Object","assign","weight","underlineStyle","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
1	+ {"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n ChevronIcon,\n ChevronIconDesktop,\n ExpandCollapseButton,\n Link,\n LinkButton,\n LinkIconContainer,\n LinkIndicator,\n LinkItem,\n LinkLabel,\n MobileWrapper,\n Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n items: NavItemProps<T>[];\n selectedId?: string \| undefined;\n /** toggle for mobile or desktop view /\n mobile?: boolean \| undefined;\n hideNavBranding?: boolean \| undefined;\n /* hide the selected LinkIndicator */\n hideLinkIndicator?: boolean \| undefined;\n onItemClick: (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemProps<T> \| NavItemCommonProps<T>\n ) => void;\n}\n\nexport const NavbarItems = <T,>({\n items,\n selectedId,\n mobile = false,\n hideNavBranding,\n hideLinkIndicator = false,\n onItemClick,\n}: Props<T>): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number \| null>(\n null\n );\n const listRef = useRef<HTMLUListElement>(null);\n const instanceId = useId();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const resetAll = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n setOpenSubMenuIndex(null);\n };\n\n const closeMobileSubMenu = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n };\n\n const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n if (item.id === selectedId) return true;\n if (item.subMenu?.length) {\n return !!item.subMenu.find((s) => s.id === selectedId);\n }\n return false;\n };\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n listRef.current &&\n !listRef.current.contains(event.target as Node)\n ) {\n resetAll();\n }\n };\n document.addEventListener(\"click\", handleClickOutside, true);\n return () => {\n document.removeEventListener(\"click\", handleClickOutside, true);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n return (event: React.MouseEvent<HTMLAnchorElement>) => {\n event.stopPropagation();\n\n // mobile expands inline when link has submenu\n if (mobile && item.subMenu?.length) {\n const nextExpanded = !(selectedIndex === index && showSubMenu);\n setSelectedIndex(index);\n setShowSubMenu(nextExpanded);\n }\n\n onItemClick(event, item);\n };\n };\n\n const handleMobileSubLinkClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemCommonProps<T>\n ) => {\n event.stopPropagation();\n onItemClick(event, item);\n closeMobileSubMenu();\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderDesktopSubMenu = (\n subMenu: NavItemCommonProps<T>[],\n subMenuId: string\n ) => (\n <DesktopMenu.Content id={subMenuId}>\n <DesktopMenu.Section showDivider={false}>\n {subMenu.map((item, subIndex) => (\n <DesktopMenu.Link\n key={`${item.id}-${subIndex}`}\n href={item.href}\n >\n {item.children}\n </DesktopMenu.Link>\n ))}\n </DesktopMenu.Section>\n </DesktopMenu.Content>\n );\n\n const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n );\n\n const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n const { children, options, subMenu, ...otherItemAttrs } = item;\n\n const hasSubMenu = !!subMenu?.length;\n\n const isRouteSelected = checkSelected(item);\n\n // desktop popover open state\n const isDesktopExpanded =\n !mobile && hasSubMenu && openSubMenuIndex === index;\n\n // mobile inline expanded state\n const isMobileExpanded =\n mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n const isExpanded = isDesktopExpanded \|\| isMobileExpanded;\n\n const selected =\n openSubMenuIndex !== null\n ? openSubMenuIndex === index\n : isRouteSelected;\n\n const showIndicator = !hideLinkIndicator && selected;\n\n const textWeight: TypographyWeight = selected\n ? mobile\n ? \"bold\"\n : \"semibold\"\n : \"regular\";\n\n const testId = mobile\n ? `link__mobile-${index + 1}`\n : `link__${index + 1}`;\n\n const renderIndicator = () =>\n showIndicator ? (\n <LinkIndicator\n data-testid={`${testId}-indicator`}\n $selected={selected}\n />\n ) : null;\n\n const renderMobileChevron = () =>\n mobile && hasSubMenu ? (\n <LinkIconContainer>\n <ExpandCollapseButton\n data-testid={`${testId}-expand-collapse-button`}\n $selected={selected}\n $expanded={isExpanded}\n focusHighlight={false}\n focusOutline=\"browser\"\n aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n >\n <ChevronIcon $selected={selected} />\n </ExpandCollapseButton>\n </LinkIconContainer>\n ) : null;\n\n const renderLink = () => (\n <Link\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n </Link>\n );\n\n const renderLinkWithSubmenu = (isLastItem: boolean) => {\n const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n if (mobile) {\n return (\n <>\n <Link\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n {renderMobileChevron()}\n </Link>\n\n {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n </>\n );\n }\n\n return (\n <DesktopMenu\n position={isLastItem ? \"bottom-end\" : \"bottom\"}\n customOffset={0}\n menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n triggerOnFocus\n isModal={false}\n onPopoverAppear={() => setOpenSubMenuIndex(index)}\n onPopoverDismiss={() => {\n setOpenSubMenuIndex((prev) =>\n prev === index ? null : prev\n );\n }}\n >\n <LinkButton\n type=\"button\"\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n <ChevronIconDesktop\n $selected={selected}\n $expanded={isExpanded}\n />\n </LinkButton>\n </DesktopMenu>\n );\n };\n\n return (\n <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n {hasSubMenu\n ? renderLinkWithSubmenu(index === items.length - 1)\n : renderLink()}\n </LinkItem>\n );\n };\n\n const renderItems = () =>\n items.map((item, index) => {\n switch (item.itemType) {\n case \"component\": {\n return <li key={index}>{item.children ?? null}</li>;\n }\n case \"link\":\n default: {\n return renderLinkItem(item as NavItemLinkProps<T>, index);\n }\n }\n });\n\n if (items && items.length > 0) {\n return mobile ? (\n <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n ) : (\n <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n {renderItems()}\n </Wrapper>\n );\n }\n\n return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","weight","underlineStyle","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}

package/cjs/navbar/navbar-items.styles.js CHANGED Viewed

@@ -41,6 +41,7 @@
     text-align: center;
     color: ${i.ThemeNavbar["navbar-link-colour-text"]};
     height: 100%;
+    gap: 0.5rem;
     &:active,
     &:hover,
@@ -53,7 +54,6 @@
         width: 100%;
         padding: 0.5rem 1rem;
         text-align: left;
-        align-items: flex-start;
     }
 `,u=a.default.a`
     ${c}
@@ -70,14 +70,13 @@
     color: inherit;
 `,p=a.default.div`
     flex: 1;
-    margin-top: 0.25rem;
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     white-space: pre-wrap;
-`,f=a.default.div`
+`,m=a.default.div`
     position: absolute;
     bottom: 0;
     left: 0;
@@ -104,12 +103,11 @@
         height: 100%;
         width: 0.25rem;
     }
-`,m=a.default.div`
-    padding-left: 0.5rem;
+`,f=a.default.div`
     margin-right: -0.5rem;
 `,g=a.default(r.ClickableIcon)`
     padding: 0.5rem;
-    transform: rotate(${e=>e.$selected?0:180}deg);
+    transform: rotate(${e=>e.$expanded?0:180}deg);
     transition: transform 300ms ease-in-out;
     margin: auto 0.25rem auto 0;
 `,$=a.default(e.ChevronUpIcon)`
@@ -125,5 +123,11 @@
     ${h}:focus & {
         color: ${e=>e.$selected?o.Colour["icon-selected-hover"]:o.Colour["icon-hover"]};
     }
-`;exports.ChevronIcon=$,exports.ExpandCollapseButton=g,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=m,exports.LinkIndicator=f,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=l;
+`,v=a.default($)`
+    transform: rotate(${e=>e.$expanded?0:180}deg);
+    transition: transform 300ms ease-in-out;
+    height: 1.125rem;
+    width: 1.125rem;
+`;exports.ChevronIcon=$,exports.ChevronIconDesktop=v,exports.ExpandCollapseButton=g,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=f,exports.LinkIndicator=m,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=l;
 //# sourceMappingURL=navbar-items.styles.js.map

package/cjs/navbar/navbar-items.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n $selected: boolean;\n}\n\ninterface WrapperStyleProps {\n $alignLeft: boolean \| undefined;\n}\n\ninterface ItemStyleProps {\n $hiddenBranding: boolean \| undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n display: flex;\n list-style: none;\n position: relative;\n\n ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n }\n`;\n\nexport const MobileWrapper = styled.ul`\n display: none;\n list-style: none;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n display: flex;\n margin: 0 1rem;\n\n &:first-child {\n // negative margin to preserve touch target size for link\n margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n padding: 0.125rem 0;\n width: 100%;\n margin-left: 0rem;\n }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n ${(props) => Font[`body-md-${props.weight}`]}\n\n display: flex;\n position: relative;\n align-items: center;\n text-align: center;\n color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n height: 100%;\n\n &:active,\n &:hover,\n &:focus,\n &:focus-within {\n color: ${(props) =>\n props.$selected\n ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n padding: 0.5rem 1rem;\n text-align: left;\n ~~align-items: flex-start;\n~~ }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n $selected: boolean;\n weight: TypographyWeight;\n}>`\n ${linkCss}\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n margin: 0;\n box-shadow: none;\n font: inherit;\n color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n flex: 1;\n ~~margin-top: 0.25rem;\n~~\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.25rem;\n background-color: ${Colour[\"border-selected\"]};\n\n ${(props) =>\n props.$selected &&\n css`\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n background-color: ${Colour[\"border-selected-hover\"]};\n }\n `};\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n right: unset;\n top: 0;\n bottom: 0;\n height: 100%;\n width: 0.25rem;\n }\n`;\n\nexport const LinkIconContainer = styled.div`\n ~~padding-left: 0.5rem;\n~~ margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n padding: 0.5rem;\n transform: rotate(${(props) => (props.$~~selected~~ ? 0 : 180)}deg);\n transition: transform 300ms ease-in-out;\n margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour.icon};\n\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n color: ${(props) =>\n props.$selected\n ? Colour[\"icon-selected-hover\"]\n : Colour[\"icon-hover\"]};\n }\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","ChevronIcon","ChevronUpIcon","icon"],"mappings":"~~uTA4BO~~,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;;EAQpBK,EAAUC,EAAAA,GAAqD;MAC9DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY~~;;;;;;;iBAOPb~~,GACNA,EAAMc,UACAD,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC~~;;;;;;EAObW~~,EAAOjB,EAAAA,QAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAAA,QAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAAA,QAAOsB,GAAG~~;;;;;;;;;EAWtBC~~,EAAgBvB,EAAAA,QAAOsB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;MAExBtB,GACCA,EAAMc,WACNJ,KAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAAA,OAAO;;;;MAIrCpB,EAAAA,WAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAAA,QAAOsB,GAAG~~;;;EAK9BI~~,EAAuB1B,EAAAA,QAAO2B,EAAAA,cAA0B;;wBAE5CzB,GAAWA,~~EAAMc~~,UAAY,EAAI;;;~~EAK7CY~~,~~EAAc5B~~,EAAAA,~~QAAO6B~~,EAAAA,cAA0B;;;aAG/CL,EAAAA,~~OAAOM~~;;~~MAEdb~~;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;"}
1	+ {"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n $selected: boolean;\n $expanded?: boolean;\n}\n\ninterface WrapperStyleProps {\n $alignLeft: boolean \| undefined;\n}\n\ninterface ItemStyleProps {\n $hiddenBranding: boolean \| undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n display: flex;\n list-style: none;\n position: relative;\n\n ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n }\n`;\n\nexport const MobileWrapper = styled.ul`\n display: none;\n list-style: none;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n display: flex;\n margin: 0 1rem;\n\n &:first-child {\n // negative margin to preserve touch target size for link\n margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n padding: 0.125rem 0;\n width: 100%;\n margin-left: 0rem;\n }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n ${(props) => Font[`body-md-${props.weight}`]}\n\n display: flex;\n position: relative;\n align-items: center;\n text-align: center;\n color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n height: 100%;\n gap: 0.5rem;\n\n &:active,\n &:hover,\n &:focus,\n &:focus-within {\n color: ${(props) =>\n props.$selected\n ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n padding: 0.5rem 1rem;\n text-align: left;\n }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n $selected: boolean;\n weight: TypographyWeight;\n}>`\n ${linkCss}\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n margin: 0;\n box-shadow: none;\n font: inherit;\n color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n flex: 1;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.25rem;\n background-color: ${Colour[\"border-selected\"]};\n\n ${(props) =>\n props.$selected &&\n css`\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n background-color: ${Colour[\"border-selected-hover\"]};\n }\n `};\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n right: unset;\n top: 0;\n bottom: 0;\n height: 100%;\n width: 0.25rem;\n }\n`;\n\nexport const LinkIconContainer = styled.div`\n margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n padding: 0.5rem;\n transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n transition: transform 300ms ease-in-out;\n margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour.icon};\n\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n color: ${(props) =>\n props.$selected\n ? Colour[\"icon-selected-hover\"]\n : Colour[\"icon-hover\"]};\n }\n`;\n\nexport const ChevronIconDesktop = styled(ChevronIcon)<StyleProps>`\n transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n transition: transform 300ms ease-in-out;\n\n height: 1.125rem;\n width: 1.125rem;\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","$expanded","ChevronIcon","ChevronUpIcon","icon","ChevronIconDesktop"],"mappings":"uTA6BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;;EAQpBK,EAAUC,EAAAA,GAAqD;MAC9DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY;;;;;;;;iBAQPb,GACNA,EAAMc,UACAD,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC;;;;;EAMbW,EAAOjB,EAAAA,QAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAAA,QAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAAA,QAAOsB,GAAG;;;;;;;;EAUtBC,EAAgBvB,EAAAA,QAAOsB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;MAExBtB,GACCA,EAAMc,WACNJ,KAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAAA,OAAO;;;;MAIrCpB,EAAAA,WAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAAA,QAAOsB,GAAG;;EAI9BI,EAAuB1B,EAAAA,QAAO2B,EAAAA,cAA0B;;wBAE5CzB,GAAWA,EAAM0B,UAAY,EAAI;;;EAK7CC,EAAc7B,EAAAA,QAAO8B,EAAAA,cAA0B;;;aAG/CN,EAAAA,OAAOO;;MAEdd;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;EAIZQ,EAAqBhC,EAAAA,QAAO6B,EAAwB;wBACxC3B,GAAWA,EAAM0B,UAAY,EAAI;;;;;"}

package/cjs/toggle/toggle.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-down"),t=require("@lifesg/react-icons/chevron-up"),a=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./toggle.styles.js");exports.Toggle=d=>{var{type:l="checkbox",indicator:o,checked:c,styleType:u="default",children:b,childrenMaxLines:h,subLabel:p,disabled:$,error:x,name:j,id:g,className:m,compositeSection:y,removable:v,focusableWhenDisabled:C,useContentWidth:f,onRemove:k,onChange:q,"data-testid":I,"aria-describedby":T}=d,w=e.__rest(d,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:E=!0,errors:L,children:S,initialExpanded:A}=y||{},[R,W]=a.useState(c),[D,N]=a.useState(!!A),_=a.useMemo((()=>{const e=Array.isArray(L)&&(null==L?void 0:L.length)>0,r=!Array.isArray(L)&&!!L;return e||r}),[L]),B=s.useId(),F=g?`${g}`:`tg-${B}`,M=a.useRef(null),P=!!$&&!!C,H=!!$&&!C,O=!!$;a.useEffect((()=>{W(c)}),[c]),a.useEffect((()=>{R&&N(null==A||A)}),[R]);const U=e=>{if(O)e.preventDefault();else if(q)q(e);else switch(l){case"checkbox":W((e=>!e));break;case"radio":case"yes":case"no":R||W(!0)}},V=()=>{$||N(!D)},z=()=>{$||!k||k()},G=()=>{var e;null===(e=null==M?void 0:M.current)||void 0===e||e.click()},J=e=>{e.stopPropagation()},K=()=>{let e;switch(l){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=l}return r.jsx(n.StyledToggleIcon,{type:e,active:R,disabled:$,$selected:R,$disabled:$})},Q=()=>{if(!p)return null;let e;return e="function"==typeof p?p():p,r.jsx(n.SubLabel,{"data-id":"toggle-sublabel",id:`${F}-sublabel`,"aria-hidden":!0,children:e})},X=()=>{const e=!D&&!_;return E&&r.jsxs(n.ExpandButton,{$paddingTopRequired:e,disabled:$,onClick:V,"data-testid":D?"collapse-button":"expand-button",children:[D?"Show less":"Show more",D?r.jsx(t.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(i.ChevronDownIcon,{"aria-hidden":!0})]})},Y=e=>r.jsxs(r.Fragment,{children:[r.jsx(n.ErrorText,{weight:"semibold",$disabled:$,children:"Error"}),r.jsx(n.ErrorList,{$disabled:$,children:null==e?void 0:e.map(((e,i)=>r.jsx("li",{id:`${F}-error-list-item-${i}`,children:r.jsx(n.ErrorText,{weight:"semibold",$disabled:$,children:e})},i)))})]});return r.jsxs(n.Container,{$selected:R,$disabled:$,className:m,$styleType:u,$error:x,$indicator:o,$useContentWidth:f,id:g,"data-testid":I,children:[(()=>{const e=["string"==typeof p?`${F}-sublabel`:null,T].filter(Boolean).join(" ")||void 0;return r.jsxs(n.HeaderContainer,{id:`${F}-header-container`,$disabled:$,$error:x,$selected:R,$indicator:o,$styleType:u,children:[r.jsx(n.IndicatorLabelContainer,{$addPadding:v,children:r.jsxs(n.InputContainer,{id:`${F}-input-container`,onClick:G,children:[r.jsx(n.Input,Object.assign({ref:M,name:j,id:`${F}-input`,type:"checkbox"===l?"checkbox":"radio","data-testid":"toggle-input",disabled:H,"aria-disabled":P,$disabledVisual:$,onChange:U,onClick:J,checked:R,tabIndex:P?0:void 0,"aria-describedby":e},w)),o&&K(),r.jsxs(n.TextContainer,{$selected:R,$disabled:$,children:[r.jsx(n.Label,{htmlFor:`${F}-input`,"data-testid":"toggle-label",id:`${F}-label`,$maxLines:h,$selected:R,children:b}),p&&Q()]})]})}),v&&r.jsx(n.RemoveButton,{type:"button",$disabled:$,onClick:z,id:`${F}-remove-button`,children:"Remove"})]})})(),S&&r.jsxs("div",{children:[(!E||D)&&r.jsx(n.Children,{"data-id":"toggle-composite-children",$isFinalItem:!E,$disabled:$,children:S}),E&&!D&&_&&r.jsx(n.ErrorContainer,{$disabled:$,onClick:V,id:`${F}-error-alert`,children:r.jsx(n.AlertContainer,{type:$?"description":"error",className:m,showIcon:!0,children:Array.isArray(L)?Y(L):L})}),X()]})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-down"),t=require("@lifesg/react-icons/chevron-up"),a=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./toggle.styles.js");exports.Toggle=d=>{var{type:l="checkbox",indicator:o,checked:c,styleType:u="default",children:b,childrenMaxLines:h,subLabel:p,disabled:$,error:x,name:j,id:g,className:m,compositeSection:y,removable:v,focusableWhenDisabled:C,useContentWidth:f,onRemove:k,onChange:q,"data-testid":I,"aria-describedby":T}=d,w=e.__rest(d,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:E=!0,errors:L,children:S,initialExpanded:A}=y||{},[R,W]=a.useState(c),[D,N]=a.useState(!!A),_=a.useMemo((()=>{const e=Array.isArray(L)&&(null==L?void 0:L.length)>0,r=!Array.isArray(L)&&!!L;return e||r}),[L]),B=s.useId(),F=g?`${g}`:`tg-${B}`,M=a.useRef(null),P=!!$&&!!C,H=!!$&&!C,O=!!$;a.useEffect((()=>{W(c)}),[c]),a.useEffect((()=>{R&&N(null==A||A)}),[R]);const U=e=>{if(O)e.preventDefault();else if(q)q(e);else switch(l){case"checkbox":W((e=>!e));break;case"radio":case"yes":case"no":R||W(!0)}},V=()=>{$||N(!D)},z=()=>{$||!k||k()},G=()=>{var e;null===(e=null==M?void 0:M.current)||void 0===e||e.click()},J=e=>{e.stopPropagation()},K=()=>{let e;switch(l){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=l}return r.jsx(n.StyledToggleIcon,{type:e,active:R,disabled:$,$selected:R,$disabled:$,$error:x})},Q=()=>{if(!p)return null;let e;return e="function"==typeof p?p():p,r.jsx(n.SubLabel,{"data-id":"toggle-sublabel",id:`${F}-sublabel`,"aria-hidden":!0,children:e})},X=()=>{const e=!D&&!_;return E&&r.jsxs(n.ExpandButton,{$paddingTopRequired:e,disabled:$,onClick:V,"data-testid":D?"collapse-button":"expand-button",children:[D?"Show less":"Show more",D?r.jsx(t.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(i.ChevronDownIcon,{"aria-hidden":!0})]})},Y=e=>r.jsxs(r.Fragment,{children:[r.jsx(n.ErrorText,{weight:"semibold",$disabled:$,children:"Error"}),r.jsx(n.ErrorList,{$disabled:$,children:null==e?void 0:e.map(((e,i)=>r.jsx("li",{id:`${F}-error-list-item-${i}`,children:r.jsx(n.ErrorText,{weight:"semibold",$disabled:$,children:e})},i)))})]});return r.jsxs(n.Container,{$selected:R,$disabled:$,className:m,$styleType:u,$error:x,$indicator:o,$useContentWidth:f,id:g,"data-testid":I,children:[(()=>{const e=["string"==typeof p?`${F}-sublabel`:null,T].filter(Boolean).join(" ")||void 0;return r.jsxs(n.HeaderContainer,{id:`${F}-header-container`,$disabled:$,$error:x,$selected:R,$indicator:o,$styleType:u,children:[r.jsx(n.IndicatorLabelContainer,{$addPadding:v,children:r.jsxs(n.InputContainer,{id:`${F}-input-container`,onClick:G,children:[r.jsx(n.Input,Object.assign({ref:M,name:j,id:`${F}-input`,type:"checkbox"===l?"checkbox":"radio","data-testid":"toggle-input",disabled:H,"aria-disabled":P,$disabledVisual:$,onChange:U,onClick:J,checked:R,tabIndex:P?0:void 0,"aria-describedby":e},w)),o&&K(),r.jsxs(n.TextContainer,{$selected:R,$disabled:$,$error:x,children:[r.jsx(n.Label,{htmlFor:`${F}-input`,"data-testid":"toggle-label",id:`${F}-label`,$maxLines:h,$selected:R,children:b}),p&&Q()]})]})}),v&&r.jsx(n.RemoveButton,{type:"button",$disabled:$,onClick:z,id:`${F}-remove-button`,children:"Remove"})]})})(),S&&r.jsxs("div",{children:[(!E||D)&&r.jsx(n.Children,{"data-id":"toggle-composite-children",$isFinalItem:!E,$disabled:$,children:S}),E&&!D&&_&&r.jsx(n.ErrorContainer,{$disabled:$,onClick:V,id:`${F}-error-alert`,children:r.jsx(n.AlertContainer,{type:$?"description":"error",className:m,showIcon:!0,children:Array.isArray(L)?Y(L):L})}),X()]})]})};
 //# sourceMappingURL=toggle.js.map

package/cjs/toggle/toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.js","sources":["../../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ToggleIconType } from \"../shared/toggle-icon/toggle-icon\";\nimport { useId } from \"../util\";\nimport {\n AlertContainer,\n Children,\n Container,\n ErrorContainer,\n ErrorList,\n ErrorText,\n ExpandButton,\n HeaderContainer,\n IndicatorLabelContainer,\n Input,\n InputContainer,\n Label,\n RemoveButton,\n StyledToggleIcon,\n SubLabel,\n TextContainer,\n} from \"./toggle.styles\";\nimport { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n type = \"checkbox\",\n indicator,\n checked,\n styleType = \"default\",\n children,\n childrenMaxLines,\n subLabel,\n disabled,\n error,\n name,\n id,\n className,\n compositeSection,\n removable,\n focusableWhenDisabled,\n useContentWidth,\n onRemove,\n onChange,\n \"data-testid\": testId,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: ToggleProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n collapsible = true,\n errors,\n children: compositeSectionChildren,\n initialExpanded,\n } = compositeSection \|\| {};\n const [selected, setSelected] = useState<boolean \| undefined>(checked);\n const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n const hasCompositeSectionError = useMemo(() => {\n const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n const hasErrorElement = !Array.isArray(errors) && !!errors;\n return hasErrorList \|\| hasErrorElement;\n }, [errors]);\n const uniqueId = useId();\n const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n const isInteractionBlocked = !!disabled;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(checked);\n }, [checked]);\n\n useEffect(() => {\n if (selected) {\n setExpanded(initialExpanded ?? true);\n }\n }, [selected]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isInteractionBlocked) {\n event.preventDefault();\n return;\n }\n\n if (onChange) {\n onChange(event);\n return;\n }\n\n switch (type) {\n case \"checkbox\":\n setSelected((prevSelected) => {\n return !prevSelected;\n });\n break;\n case \"radio\":\n case \"yes\":\n case \"no\":\n if (!selected) {\n setSelected(true);\n }\n break;\n }\n };\n\n const handleExpandCollapseClick = () => {\n if (!disabled) {\n setExpanded(!expanded);\n }\n };\n\n const handleOnRemove = () => {\n if (!disabled) {\n if (onRemove) {\n onRemove();\n return;\n }\n }\n };\n\n const handleContainerClick = () => {\n inputRef?.current?.click();\n };\n\n const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n e.stopPropagation();\n };\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIndicator = () => {\n let toggleIconType: ToggleIconType;\n\n switch (type) {\n case \"yes\":\n toggleIconType = \"tick\";\n break;\n case \"no\":\n toggleIconType = \"cross\";\n break;\n case \"checkbox\":\n case \"radio\":\n toggleIconType = type;\n break;\n }\n\n return (\n <StyledToggleIcon\n type={toggleIconType}\n active={selected}\n disabled={disabled}\n $selected={selected}\n $disabled={disabled}\n />\n );\n };\n\n const renderSubLabel = () => {\n if (!subLabel) {\n return null;\n }\n\n let component: string \| JSX.Element;\n\n if (typeof subLabel === \"function\") {\n component = subLabel();\n } else {\n component = subLabel;\n }\n\n // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n return (\n <SubLabel\n data-id=\"toggle-sublabel\"\n id={`${generatedId}-sublabel`}\n aria-hidden\n >\n {component}\n </SubLabel>\n );\n };\n\n const renderCompositeChildren = () => {\n return (\n (!collapsible \|\| expanded) && (\n <Children\n data-id=\"toggle-composite-children\"\n $isFinalItem={!collapsible}\n $disabled={disabled}\n >\n {compositeSectionChildren}\n </Children>\n )\n );\n };\n\n const renderExpandButton = () => {\n const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n return (\n collapsible && (\n <ExpandButton\n $paddingTopRequired={collapsedWithoutErrors}\n disabled={disabled}\n onClick={handleExpandCollapseClick}\n data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n >\n {expanded ? \"Show less\" : \"Show more\"}\n {expanded ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </ExpandButton>\n )\n );\n };\n\n const renderToggleWithRemoveButton = () => {\n const ariaDescriptions =\n [\n typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n ariaDescribedBy,\n ]\n .filter(Boolean)\n .join(\" \") \|\| undefined;\n\n return (\n <HeaderContainer\n id={`${generatedId}-header-container`}\n $disabled={disabled}\n $error={error}\n $selected={selected}\n $indicator={indicator}\n $styleType={styleType}\n >\n <IndicatorLabelContainer $addPadding={removable}>\n <InputContainer\n id={`${generatedId}-input-container`}\n onClick={handleContainerClick}\n >\n <Input\n ref={inputRef}\n name={name}\n id={`${generatedId}-input`}\n type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n data-testid=\"toggle-input\"\n disabled={isNativeDisabled}\n aria-disabled={isFocusableWhenDisabled}\n $disabledVisual={disabled}\n onChange={handleOnChange}\n onClick={handleInputClick}\n checked={selected}\n tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n aria-describedby={ariaDescriptions}\n {...otherProps}\n />\n {indicator && renderIndicator()}\n <TextContainer\n $selected={selected}\n $disabled={disabled}\n >\n <Label\n htmlFor={`${generatedId}-input`}\n data-testid={`toggle-label`}\n id={`${generatedId}-label`}\n $maxLines={childrenMaxLines}\n $selected={selected}\n >\n {children}\n </Label>\n {subLabel && renderSubLabel()}\n </TextContainer>\n </InputContainer>\n </IndicatorLabelContainer>\n\n {removable && (\n <RemoveButton\n type=\"button\"\n $disabled={disabled}\n onClick={handleOnRemove}\n id={`${generatedId}-remove-button`}\n >\n Remove\n </RemoveButton>\n )}\n </HeaderContainer>\n );\n };\n\n const renderErrorList = (errors: string[]) => {\n return (\n <>\n <ErrorText weight=\"semibold\" $disabled={disabled}>\n Error\n </ErrorText>\n <ErrorList $disabled={disabled}>\n {errors?.map((item, index) => {\n return (\n <li\n key={index}\n id={`${generatedId}-error-list-item-${index}`}\n >\n <ErrorText\n weight=\"semibold\"\n $disabled={disabled}\n >\n {item}\n </ErrorText>\n </li>\n );\n })}\n </ErrorList>\n </>\n );\n };\n\n const renderError = () => {\n return (\n collapsible &&\n !expanded &&\n hasCompositeSectionError && (\n <ErrorContainer\n $disabled={disabled}\n onClick={handleExpandCollapseClick}\n id={`${generatedId}-error-alert`}\n >\n <AlertContainer\n type={disabled ? \"description\" : \"error\"}\n className={className}\n showIcon\n >\n {Array.isArray(errors)\n ? renderErrorList(errors)\n : errors}\n </AlertContainer>\n </ErrorContainer>\n )\n );\n };\n\n const renderCompositeSection = () => {\n return (\n compositeSectionChildren && (\n <div>\n {renderCompositeChildren()}\n {renderError()}\n {renderExpandButton()}\n </div>\n )\n );\n };\n\n return (\n <Container\n $selected={selected}\n $disabled={disabled}\n className={className}\n $styleType={styleType}\n $error={error}\n $indicator={indicator}\n $useContentWidth={useContentWidth}\n id={id}\n data-testid={testId}\n >\n {renderToggleWithRemoveButton()}\n {renderCompositeSection()}\n </Container>\n );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","StyledToggleIcon","active","$selected","$disabled","renderSubLabel","component","SubLabel","renderExpandButton","collapsedWithoutErrors","_jsxs","ExpandButton","$paddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","ErrorText","weight","ErrorList","map","item","index","Container","$styleType","$indicator","$useContentWidth","ariaDescriptions","filter","Boolean","join","undefined","HeaderContainer","IndicatorLabelContainer","InputContainer","Input","ref","tabIndex","TextContainer","Label","htmlFor","$maxLines","RemoveButton","renderToggleWithRemoveButton","Children","$isFinalItem","ErrorContainer","AlertContainer","showIcon"],"mappings":"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"}
1	+ {"version":3,"file":"toggle.js","sources":["../../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ToggleIconType } from \"../shared/toggle-icon/toggle-icon\";\nimport { useId } from \"../util\";\nimport {\n AlertContainer,\n Children,\n Container,\n ErrorContainer,\n ErrorList,\n ErrorText,\n ExpandButton,\n HeaderContainer,\n IndicatorLabelContainer,\n Input,\n InputContainer,\n Label,\n RemoveButton,\n StyledToggleIcon,\n SubLabel,\n TextContainer,\n} from \"./toggle.styles\";\nimport { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n type = \"checkbox\",\n indicator,\n checked,\n styleType = \"default\",\n children,\n childrenMaxLines,\n subLabel,\n disabled,\n error,\n name,\n id,\n className,\n compositeSection,\n removable,\n focusableWhenDisabled,\n useContentWidth,\n onRemove,\n onChange,\n \"data-testid\": testId,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: ToggleProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n collapsible = true,\n errors,\n children: compositeSectionChildren,\n initialExpanded,\n } = compositeSection \|\| {};\n const [selected, setSelected] = useState<boolean \| undefined>(checked);\n const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n const hasCompositeSectionError = useMemo(() => {\n const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n const hasErrorElement = !Array.isArray(errors) && !!errors;\n return hasErrorList \|\| hasErrorElement;\n }, [errors]);\n const uniqueId = useId();\n const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n const isInteractionBlocked = !!disabled;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(checked);\n }, [checked]);\n\n useEffect(() => {\n if (selected) {\n setExpanded(initialExpanded ?? true);\n }\n }, [selected]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isInteractionBlocked) {\n event.preventDefault();\n return;\n }\n\n if (onChange) {\n onChange(event);\n return;\n }\n\n switch (type) {\n case \"checkbox\":\n setSelected((prevSelected) => {\n return !prevSelected;\n });\n break;\n case \"radio\":\n case \"yes\":\n case \"no\":\n if (!selected) {\n setSelected(true);\n }\n break;\n }\n };\n\n const handleExpandCollapseClick = () => {\n if (!disabled) {\n setExpanded(!expanded);\n }\n };\n\n const handleOnRemove = () => {\n if (!disabled) {\n if (onRemove) {\n onRemove();\n return;\n }\n }\n };\n\n const handleContainerClick = () => {\n inputRef?.current?.click();\n };\n\n const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n e.stopPropagation();\n };\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIndicator = () => {\n let toggleIconType: ToggleIconType;\n\n switch (type) {\n case \"yes\":\n toggleIconType = \"tick\";\n break;\n case \"no\":\n toggleIconType = \"cross\";\n break;\n case \"checkbox\":\n case \"radio\":\n toggleIconType = type;\n break;\n }\n\n return (\n <StyledToggleIcon\n type={toggleIconType}\n active={selected}\n disabled={disabled}\n $selected={selected}\n $disabled={disabled}\n $error={error}\n />\n );\n };\n\n const renderSubLabel = () => {\n if (!subLabel) {\n return null;\n }\n\n let component: string \| JSX.Element;\n\n if (typeof subLabel === \"function\") {\n component = subLabel();\n } else {\n component = subLabel;\n }\n\n // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n return (\n <SubLabel\n data-id=\"toggle-sublabel\"\n id={`${generatedId}-sublabel`}\n aria-hidden\n >\n {component}\n </SubLabel>\n );\n };\n\n const renderCompositeChildren = () => {\n return (\n (!collapsible \|\| expanded) && (\n <Children\n data-id=\"toggle-composite-children\"\n $isFinalItem={!collapsible}\n $disabled={disabled}\n >\n {compositeSectionChildren}\n </Children>\n )\n );\n };\n\n const renderExpandButton = () => {\n const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n return (\n collapsible && (\n <ExpandButton\n $paddingTopRequired={collapsedWithoutErrors}\n disabled={disabled}\n onClick={handleExpandCollapseClick}\n data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n >\n {expanded ? \"Show less\" : \"Show more\"}\n {expanded ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </ExpandButton>\n )\n );\n };\n\n const renderToggleWithRemoveButton = () => {\n const ariaDescriptions =\n [\n typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n ariaDescribedBy,\n ]\n .filter(Boolean)\n .join(\" \") \|\| undefined;\n\n return (\n <HeaderContainer\n id={`${generatedId}-header-container`}\n $disabled={disabled}\n $error={error}\n $selected={selected}\n $indicator={indicator}\n $styleType={styleType}\n >\n <IndicatorLabelContainer $addPadding={removable}>\n <InputContainer\n id={`${generatedId}-input-container`}\n onClick={handleContainerClick}\n >\n <Input\n ref={inputRef}\n name={name}\n id={`${generatedId}-input`}\n type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n data-testid=\"toggle-input\"\n disabled={isNativeDisabled}\n aria-disabled={isFocusableWhenDisabled}\n $disabledVisual={disabled}\n onChange={handleOnChange}\n onClick={handleInputClick}\n checked={selected}\n tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n aria-describedby={ariaDescriptions}\n {...otherProps}\n />\n {indicator && renderIndicator()}\n <TextContainer\n $selected={selected}\n $disabled={disabled}\n $error={error}\n >\n <Label\n htmlFor={`${generatedId}-input`}\n data-testid={`toggle-label`}\n id={`${generatedId}-label`}\n $maxLines={childrenMaxLines}\n $selected={selected}\n >\n {children}\n </Label>\n {subLabel && renderSubLabel()}\n </TextContainer>\n </InputContainer>\n </IndicatorLabelContainer>\n\n {removable && (\n <RemoveButton\n type=\"button\"\n $disabled={disabled}\n onClick={handleOnRemove}\n id={`${generatedId}-remove-button`}\n >\n Remove\n </RemoveButton>\n )}\n </HeaderContainer>\n );\n };\n\n const renderErrorList = (errors: string[]) => {\n return (\n <>\n <ErrorText weight=\"semibold\" $disabled={disabled}>\n Error\n </ErrorText>\n <ErrorList $disabled={disabled}>\n {errors?.map((item, index) => {\n return (\n <li\n key={index}\n id={`${generatedId}-error-list-item-${index}`}\n >\n <ErrorText\n weight=\"semibold\"\n $disabled={disabled}\n >\n {item}\n </ErrorText>\n </li>\n );\n })}\n </ErrorList>\n </>\n );\n };\n\n const renderError = () => {\n return (\n collapsible &&\n !expanded &&\n hasCompositeSectionError && (\n <ErrorContainer\n $disabled={disabled}\n onClick={handleExpandCollapseClick}\n id={`${generatedId}-error-alert`}\n >\n <AlertContainer\n type={disabled ? \"description\" : \"error\"}\n className={className}\n showIcon\n >\n {Array.isArray(errors)\n ? renderErrorList(errors)\n : errors}\n </AlertContainer>\n </ErrorContainer>\n )\n );\n };\n\n const renderCompositeSection = () => {\n return (\n compositeSectionChildren && (\n <div>\n {renderCompositeChildren()}\n {renderError()}\n {renderExpandButton()}\n </div>\n )\n );\n };\n\n return (\n <Container\n $selected={selected}\n $disabled={disabled}\n className={className}\n $styleType={styleType}\n $error={error}\n $indicator={indicator}\n $useContentWidth={useContentWidth}\n id={id}\n data-testid={testId}\n >\n {renderToggleWithRemoveButton()}\n {renderCompositeSection()}\n </Container>\n );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","StyledToggleIcon","active","$selected","$disabled","$error","renderSubLabel","component","SubLabel","renderExpandButton","collapsedWithoutErrors","_jsxs","ExpandButton","$paddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","ErrorText","weight","ErrorList","map","item","index","Container","$styleType","$indicator","$useContentWidth","ariaDescriptions","filter","Boolean","join","undefined","HeaderContainer","IndicatorLabelContainer","InputContainer","Input","ref","$disabledVisual","tabIndex","TextContainer","Label","htmlFor","$maxLines","RemoveButton","renderToggleWithRemoveButton","Children","$isFinalItem","ErrorContainer","AlertContainer","showIcon"],"mappings":"6dAyBuBA,QAAAC,KACnBA,EAAO,WAAUC,UACjBA,EAASC,QACTA,EAAOC,UACPA,EAAY,UAASC,SACrBA,EAAQC,iBACRA,EAAgBC,SAChBA,EAAQC,SACRA,EAAQC,MACRA,EAAKC,KACLA,EAAIC,GACJA,EAAEC,UACFA,EAASC,iBACTA,EAAgBC,UAChBA,EAASC,sBACTA,EAAqBC,gBACrBA,EAAeC,SACfA,EAAQC,SACRA,EACA,cAAeC,EACf,mBAAoBC,KACjBC,EAAUC,EAAAA,OAAAtB,EArBM,CAAA,OAAA,YAAA,UAAA,YAAA,WAAA,mBAAA,WAAA,WAAA,QAAA,OAAA,KAAA,YAAA,mBAAA,YAAA,wBAAA,kBAAA,WAAA,WAAA,cAAA,qBA0BnB,MAAMuB,YACFA,GAAc,EAAIC,OAClBA,EACAnB,SAAUoB,EAAwBC,gBAClCA,GACAb,GAAoB,CAAA,GACjBc,EAAUC,GAAeC,EAAAA,SAA8B1B,IACvD2B,EAAUC,GAAeF,EAAAA,WAAoBH,GAC9CM,EAA2BC,EAAAA,SAAQ,KACrC,MAAMC,EAAeC,MAAMC,QAAQZ,KAAWA,aAAM,EAANA,EAAQa,QAAS,EACzDC,GAAmBH,MAAMC,QAAQZ,MAAaA,EACpD,OAAOU,GAAgBI,CAAe,GACvC,CAACd,IACEe,EAAWC,EAAAA,QACXC,EAAc9B,EAAK,GAAGA,IAAO,MAAM4B,IAEnCG,EAAWC,EAAAA,OAAyB,MAEpCC,IAA4BpC,KAAcO,EAC1C8B,IAAqBrC,IAAaO,EAClC+B,IAAyBtC,EAK/BuC,EAAAA,WAAU,KACNnB,EAAYzB,EAAQ,GACrB,CAACA,IAEJ4C,EAAAA,WAAU,KACFpB,GACAI,EAAYL,SAAAA,EAChB,GACD,CAACC,IAKJ,MAAMqB,EAAkBC,IACpB,GAAIH,EACAG,EAAMC,sBAIV,GAAIhC,EACAA,EAAS+B,QAIb,OAAQhD,GACJ,IAAK,WACD2B,GAAauB,IACDA,IAEZ,MACJ,IAAK,QACL,IAAK,MACL,IAAK,KACIxB,GACDC,GAAY,KAMtBwB,EAA4B,KACzB5C,GACDuB,GAAaD,EACjB,EAGEuB,EAAiB,KACd7C,IACGS,GACAA,GAGR,EAGEqC,EAAuB,WACR,QAAjBtD,EAAA0C,aAAQ,EAARA,EAAUa,eAAO,IAAAvD,GAAAA,EAAEwD,OAAO,EAGxBC,EAAoBC,IACtBA,EAAEC,iBAAiB,EAKjBC,EAAkB,KACpB,IAAIC,EAEJ,OAAQ5D,GACJ,IAAK,MACD4D,EAAiB,OACjB,MACJ,IAAK,KACDA,EAAiB,QACjB,MACJ,IAAK,WACL,IAAK,QACDA,EAAiB5D,EAIzB,OACI6D,EAAAA,IAACC,EAAAA,iBAAgB,CACb9D,KAAM4D,EACNG,OAAQrC,EACRnB,SAAUA,EAAQyD,UACPtC,EAAQuC,UACR1D,EAAQ2D,OACX1D,GACV,EAIJ2D,EAAiB,KACnB,IAAK7D,EACD,OAAO,KAGX,IAAI8D,EASJ,OANIA,EADoB,mBAAb9D,EACKA,IAEAA,EAKZuD,EAAAA,IAACQ,EAAAA,SAAQ,CAAA,UACG,kBACR3D,GAAI,GAAG8B,aAAsB,eAAA,EAAApC,SAG5BgE,GACM,EAkBbE,EAAqB,KACvB,MAAMC,GAA0B1C,IAAaE,EAE7C,OACIT,GACIkD,EAAAA,KAACC,EAAAA,aAAY,CAAAC,oBACYH,EACrBhE,SAAUA,EACVoE,QAASxB,EAAyB,cACrBtB,EAAW,kBAAoB,gBAAezB,SAAA,CAE1DyB,EAAW,YAAc,YACzBA,EACGgC,EAAAA,IAACe,EAAAA,cAAa,CAAA,eAAA,IAEdf,EAAAA,IAACgB,EAAAA,gBAAe,CAAA,eAAA,MAG3B,EA6EHC,EAAmBvD,GAEjBiD,EAAAA,KAAAO,EAAAA,SAAA,CAAA3E,SAAA,CACIyD,EAAAA,IAACmB,EAAAA,UAAS,CAACC,OAAO,WAAUhB,UAAY1D,EAAQH,SAAA,UAGhDyD,MAACqB,EAAAA,UAAS,CAAAjB,UAAY1D,EAAQH,SACzBmB,aAAM,EAANA,EAAQ4D,KAAI,CAACC,EAAMC,IAEZxB,EAAAA,IAAA,KAAA,CAEInD,GAAI,GAAG8B,qBAA+B6C,IAAOjF,SAE7CyD,EAAAA,IAACmB,aACGC,OAAO,WAAUhB,UACN1D,EAAQH,SAElBgF,KAPAC,UAqDjC,OACIb,EAAAA,KAACc,EAAAA,UAAS,CAAAtB,UACKtC,EAAQuC,UACR1D,EACXI,UAAWA,EAAS4E,WACRpF,SACJK,EAAKgF,WACDvF,EAASwF,iBACH1E,EAClBL,GAAIA,EAAE,cACOQ,EAAMd,SAAA,CAlJU,MACjC,MAAMsF,EACF,CACwB,iBAAbpF,EAAwB,GAAGkC,aAAyB,KAC3DrB,GAECwE,OAAOC,SACPC,KAAK,WAAQC,EAEtB,OACItB,EAAAA,KAACuB,EAAAA,iBACGrF,GAAI,GAAG8B,qBAA8ByB,UAC1B1D,SACHC,EAAKwD,UACFtC,EAAQ8D,WACPvF,aACAE,EAASC,SAAA,CAErByD,EAAAA,IAACmC,EAAAA,qCAAqCnF,EAAST,SAC3CoE,EAAAA,KAACyB,EAAAA,eAAc,CACXvF,GAAI,GAAG8B,oBACPmC,QAAStB,YAETQ,EAAAA,IAACqC,EAAAA,qBACGC,IAAK1D,EACLhC,KAAMA,EACNC,GAAI,GAAG8B,UACPxC,KAAe,aAATA,EAAsB,WAAa,sBAC7B,eACZO,SAAUqC,kBACKD,EAAuByD,gBACrB7F,EACjBU,SAAU8B,EACV4B,QAASnB,EACTtD,QAASwB,EACT2E,SAAU1D,EAA0B,OAAImD,EAAS,mBAC/BJ,GACdtE,IAEPnB,GAAa0D,IACda,EAAAA,KAAC8B,EAAAA,cAAa,CAAAtC,UACCtC,YACAnB,EAAQ2D,OACX1D,EAAKJ,SAAA,CAEbyD,EAAAA,IAAC0C,EAAAA,MAAK,CACFC,QAAS,GAAGhE,UAAmB,cAClB,eACb9B,GAAI,GAAG8B,UAAmBiE,UACfpG,YACAqB,EAAQtB,SAElBA,IAEJE,GAAY6D,YAKxBtD,GACGgD,EAAAA,IAAC6C,EAAAA,aAAY,CACT1G,KAAK,mBACMO,EACXoE,QAASvB,EACT1C,GAAI,GAAG8B,wCAKD,EA+EjBmE,GAtBDnF,GACIgD,EAAAA,KAAA,MAAA,CAAApE,SAAA,GAjKFkB,GAAeO,IACbgC,EAAAA,IAAC+C,EAAAA,oBACW,4BAA2BC,cACpBvF,EAAW2C,UACf1D,WAEViB,IAkITF,IACCO,GACDE,GACI8B,EAAAA,IAACiD,EAAAA,eAAc,CAAA7C,UACA1D,EACXoE,QAASxB,EACTzC,GAAI,GAAG8B,gBAAyBpC,SAEhCyD,MAACkD,EAAAA,eAAc,CACX/G,KAAMO,EAAW,cAAgB,QACjCI,UAAWA,EACXqG,UAAQ,EAAA5G,SAEP8B,MAAMC,QAAQZ,GACTuD,EAAgBvD,GAChBA,MAaT+C,SAoBD"}