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

package/cjs/countdown-timer/countdown-timer.styles_ipn1b0.css

@@ -0,0 +1,8 @@
+@layer fds{.wav7a6b{width:100%;}
+.c1ji5mw9{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-8) var(--fds-spacing-16);border-radius:var(--fds-radius-sm);color:var(--fds-colour-text-primary);border:var(--fds-border-width-010) var(--fds-border-style-solid);border-color:var(--fds-colour-border-primary);background-color:var(--fds-colour-bg);}:where(body.fds-breakpoint-sm-max) .c1ji5mw9{padding:var(--fds-spacing-16);}.c1ji5mw9[data-warn="true"]{color:var(--fds-colour-text-error);border-color:var(--fds-colour-border-error);}
+.csdqyky{opacity:0;}
+.cibq1kp{position:relative;}
+.c1ehax2j{position:fixed;z-index:10;--fds-internal-countdownTimer-fixedCountdown-top:initial;--fds-internal-countdownTimer-fixedCountdown-left:initial;--fds-internal-countdownTimer-fixedCountdown-right:initial;top:var(--fds-internal-countdownTimer-fixedCountdown-top);left:var(--fds-internal-countdownTimer-fixedCountdown-left);right:var(--fds-internal-countdownTimer-fixedCountdown-right);box-shadow:var(--fds-shadow-xs-focus-strong);}:where(body.fds-breakpoint-sm-max) .c1ehax2j{left:0;right:0;border-radius:0;border-left:none;border-right:none;box-shadow:none;}.c1ehax2j[data-warn="true"]{box-shadow:var(--fds-shadow-xs-error-strong);}
+.t6f42l5{font-weight:var(--fds-font-weight-bold);margin-left:var(--fds-spacing-8);margin-right:var(--fds-spacing-24);}:where(body.fds-breakpoint-sm-max) .t6f42l5{margin-right:var(--fds-spacing-48);}
+.t19x1azi{font-weight:var(--fds-font-weight-semibold);margin-left:auto;}
+.t1pvvziw{color:var(--fds-colour-icon-primary);}.t1pvvziw[data-warn="true"]{color:var(--fds-colour-icon-error);}}

package/cjs/dashed-border/dashed-border.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),u=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var o=require("../theme/tokens/border.js"),i=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/tokens/radius.js"),a=require("../theme/utils/use-apply-styles.js"),t=require("../theme/utils/use-design-token.js");require("../theme/utils/use-media-query.js");var n=require("../theme/utils/token-resolver.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var d=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("../util/styling-helper.js"),k=require("./dashed-border.styles.js"),m=require("./dashed-border.utils.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=h(s);const q=u.forwardRef(((s,h)=>{const{enabled:q=!0,thickness:v=o.BorderThickness["width-010"],radius:f=l.Radius.none,colour:b=i.Colour.border,backgroundColor:g,className:y,children:T}=s,p=e.__rest(s,["enabled","thickness","radius","colour","backgroundColor","className","children"]),C=t.useResolvedTokenValue({value:v,fallback:o.BorderThickness["width-010"],isToken:c.isThicknessToken,normalizeCustom:n.toCssValue}),R=t.useResolvedTokenValue({value:f,fallback:l.Radius.none,isToken:c.isRadiusToken,normalizeCustom:n.toCssValue}),x=t.useResolvedTokenValue({value:b,fallback:i.Colour.border,isToken:c.isColourToken,normalizeCustom:String}),B=t.useResolvedTokenValue({value:g,fallback:"none",isToken:c.isColourToken,normalizeCustom:String}),V=q||!!g,S=m.createSvgBackgroundImage({radius:R,colour:x,thickness:C,enabled:q}),z=u.useRef(null),N=u.useRef(null),_=h?d.mergeRefs(z,h):z;return a.useApplyStyle(z,{[k.tokens.rootRadius]:R,[k.tokens.rootBackgroundColor]:g?B:null}),a.useApplyStyle(N,{[k.tokens.overlayBackgroundImage]:V?S:null}),r.jsxs("div",Object.assign({ref:_,className:j.default(k.root,y)},p,{children:[V&&r.jsx("div",{"aria-hidden":"true",className:k.overlay,ref:N}),T]}))}));exports.DashedBorder=q;
+//# sourceMappingURL=dashed-border.js.map

package/cjs/dashed-border/dashed-border.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashed-border.js","sources":["../../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A container that renders a dashed border using an SVG overlay.\n *\n * Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n * @keywords boundary, outline, region\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"ihCAeA,MA6FaA,EAAeC,EAAAA,YA7FV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAAA,gBAAgB,aAAYC,OACxCA,EAASC,EAAAA,OAAa,KAACC,OACvBA,EAASC,EAAAA,OAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EAAAA,OACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAAA,sBAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAAA,gBAAgB,aAC1Bc,QAASC,EAAAA,iBACTC,gBAAiBC,EAAAA,aAGfC,EAAkBP,EAAAA,sBAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAAA,OAAa,KACvBY,QAASK,EAAAA,cACTH,gBAAiBC,EAAAA,aAGfG,EAAkBT,EAAAA,sBAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAAA,OAAe,OACzBU,QAASO,EAAAA,cACTL,gBAAiBM,SAGfC,EAA2BZ,EAAAA,sBAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EAAAA,cACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAAA,yBAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAAA,OAAuB,MACjCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAgBjC,EAAMkC,EAAAA,UAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAAA,cAAcL,EAAS,CACnB,CAACM,EAAAA,OAAcC,YAAahB,EAC5B,CAACe,EAAAA,OAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAAA,cAAcH,EAAY,CACtB,CAACI,EAAAA,OAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAAA,QAAKC,EAAAA,KAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,EAAAA,yBACgB,OACZnC,UAAWoC,UACX7C,IAAKgC,IAGZtB,KACC"}

package/cjs/dashed-border/dashed-border.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./dashed-border.styles_zszoox.css");exports.overlay="okel4vg",exports.root="r1c3yh16",exports.tokens={rootRadius:"--fds-internal-dashedBorder-root-radius",rootBackgroundColor:"--fds-internal-dashedBorder-root-backgroundColor",overlayBackgroundImage:"--fds-internal-dashedBorder-overlay-backgroundImage"};
+//# sourceMappingURL=dashed-border.styles.js.map

package/cjs/dashed-border/dashed-border.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashed-border.styles.js","sources":["../../../src/dashed-border/dashed-border.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    rootRadius: \"--fds-internal-dashedBorder-root-radius\",\n    rootBackgroundColor: \"--fds-internal-dashedBorder-root-backgroundColor\",\n    overlayBackgroundImage:\n        \"--fds-internal-dashedBorder-overlay-backgroundImage\",\n} as const;\n\nexport const root = css`\n    position: relative;\n    overflow: hidden;\n    border-radius: var(${tokens.rootRadius}, 0);\n    background-color: var(${tokens.rootBackgroundColor}, transparent);\n`;\n\nexport const overlay = css`\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    background-image: var(${tokens.overlayBackgroundImage}, none);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: 100% 100%;\n    pointer-events: none;\n`;\n"],"names":["rootRadius","rootBackgroundColor","overlayBackgroundImage"],"mappings":"uGAgBoB,uBAPH,0BAPK,CAClBA,WAAY,0CACZC,oBAAqB,mDACrBC,uBACI"}

package/cjs/dashed-border/dashed-border.styles_zszoox.css

@@ -0,0 +1,2 @@
+@layer fds{.r1c3yh16{position:relative;overflow:hidden;border-radius:var(--fds-internal-dashedBorder-root-radius, 0);background-color:var(--fds-internal-dashedBorder-root-backgroundColor, transparent);}
+.okel4vg{position:absolute;inset:0;width:100%;height:100%;background-image:var(--fds-internal-dashedBorder-overlay-backgroundImage, none);background-repeat:no-repeat;-webkit-background-position:center;background-position:center;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none;}}

package/cjs/dashed-border/dashed-border.utils.js

@@ -0,0 +1,2 @@
+"use strict";exports.createSvgBackgroundImage=({colour:e,enabled:n,radius:t,thickness:s})=>`url("data:image/svg+xml,${encodeURIComponent(`\n    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>\n        <rect\n            width='100%' height='100%' fill='none'\n            rx='${t}'\n            ry='${t}'\n            stroke='${n?e:"none"}'\n            stroke-width='${n?s:0}'\n            stroke-dasharray='4, 8' stroke-dashoffset='0' stroke-linecap='square'\n        />\n    </svg>`)}")`;
+//# sourceMappingURL=dashed-border.utils.js.map

package/cjs/dashed-border/dashed-border.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashed-border.utils.js","sources":["../../../src/dashed-border/dashed-border.utils.ts"],"sourcesContent":["export interface CreateSvgBackgroundImageOptions {\n    /** Resolved stroke color for the dashed border. */\n    colour: string;\n    /** Whether dashed stroke should be rendered. */\n    enabled: boolean;\n    /** Resolved CSS border radius for the SVG rect. */\n    radius: string;\n    /** Resolved stroke width for the dashed border. */\n    thickness: string;\n}\n\n/**\n * Builds a data-URI SVG used as the dashed border background image.\n * @param options SVG background image options.\n * @returns Encoded SVG as CSS `url(...)` string.\n */\nexport const createSvgBackgroundImage = ({\n    colour,\n    enabled,\n    radius,\n    thickness,\n}: CreateSvgBackgroundImageOptions) => {\n    const svg = `\n    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>\n        <rect\n            width='100%' height='100%' fill='none'\n            rx='${radius}'\n            ry='${radius}'\n            stroke='${enabled ? colour : \"none\"}'\n            stroke-width='${enabled ? thickness : 0}'\n            stroke-dasharray='4, 8' stroke-dashoffset='0' stroke-linecap='square'\n        />\n    </svg>`;\n\n    return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`;\n};\n"],"names":["colour","enabled","radius","thickness","encodeURIComponent"],"mappings":"8CAgBwC,EACpCA,SACAC,UACAC,SACAC,eAcO,2BAA2BC,mBAZtB,iKAIEF,uBACAA,2BACID,EAAUD,EAAS,sCACbC,EAAUE,EAAY"}

package/cjs/dashed-border/index.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("./dashed-border.js");exports.DashedBorder=r.DashedBorder;
+//# sourceMappingURL=index.js.map

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

@@ -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,"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"),r=require("@lifesg/react-icons"),i=require("clsx"),l=require("react"),n=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-dots/loading-dots.js");var a=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("../animations/loading-spinner/loading-spinner.js"),require("../theme/theme-provider/context.js");var s=require("../checkbox/checkbox.js"),o=require("../error-display/error-display.js"),d=require("../shared/accessibility/index.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var u=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var h=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var p=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var b=require("../util/use-event.js"),g=require("../util/use-event-listener.js"),m=require("../util/use-throttle.js"),y=require("./data-table.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=j(i);exports.DataTable=i=>{var{id:j,headers:f,rows:w,className:v,sortIndicators:S,alternatingRows:C,loadState:k="success",enableMultiSelect:q,selectedIds:N,disabledIds:B,enableActionBar:$,enableActionBarWithoutSelection:H,enableSelectAll:R,enableStickyHeader:W,emptyView:A,actionBarContent:I,renderCustomEmptyView:T,onHeaderClick:D,onSelect:E,onSelectAll:L,onClearSelectionClick:M}=i,V=e.__rest(i,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const F=l.useRef(null),K=l.useRef(null),_=l.useRef(null),z=l.useRef(null),G=p.useId(),O=f.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[P,U]=l.useState("inline"),[J,Q]=l.useState(!1),[X,Y]=l.useState(!1);u.useApplyStyle(_,{[y.tokens.actionBarWrapperLeft]:X&&F.current?`${F.current.getBoundingClientRect().left}px`:void 0,[y.tokens.actionBarWrapperWidth]:F.current?`${F.current.clientWidth}px`:void 0});const Z=b.useEvent((()=>{he()}));l.useEffect((()=>{Z()}),[Z]);const ee=m.useThrottle((()=>he()),100);n.useResizeDetector({targetRef:z,onResize:()=>ee()}),g.useEventListener("scroll",ee),g.useEventListener("scroll",ee,z.current);const te=()=>!!(w&&w.length&&N)&&N.length===w.length,re=e=>!!(null==N?void 0:N.includes(e)),ie=e=>!!C&&e%2==1,le=e=>!!(null==B?void 0:B.includes(e)),ne=e=>{if(V["data-testid"])return`${V["data-testid"]}-${e}`},ae=()=>f.length+(q?1:0),se=e=>null==S?void 0:S[e],oe=e=>{const t=se(e);if(t)return"asc"===t?"ascending":"descending"},de=e=>` by ${"asc"===se(e)?"descending":"ascending"} order`,ce=(e,t)=>`${G}-row-${e}-${t}-key-column`,ue=e=>{const t=O.map((t=>ce(e,t.fieldKey)));return d.concatIds(...t)},he=()=>{if(!z.current||!K.current||!_.current)return;const e=z.current.getBoundingClientRect(),t=K.current.getBoundingClientRect();let r="inline";const i=z.current.scrollHeight>z.current.clientHeight;if(e.top>window.innerHeight||e.bottom<0?r="inline":i?e.top>0&&e.top<window.innerHeight&&e.bottom>0&&e.bottom<window.innerHeight||e.top<0&&e.bottom>0&&e.bottom<window.innerHeight?r="sticky":e.bottom>window.innerHeight&&Math.max(e.top,t.bottom)+t.height<window.innerHeight&&(r="fixed"):e.bottom>window.innerHeight&&t.bottom+t.height<window.innerHeight&&(r="fixed"),Q(i),U(r),"fixed"===r)Y(!0);else if("sticky"===r){const e=z.current.scrollTop+z.current.clientHeight<z.current.scrollHeight;Y(e)}else Y(!1)},pe=e=>{const{fieldKey:r,label:i,clickable:l=!1,style:n}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,a=!!se(r),s=(e=>`${G}-header-${e}`)(r);return t.jsxs("th",{"data-testid":ne(`header-${r}`),className:x.default(y.headerCell,l&&y.headerCellClickable),scope:"col","aria-sort":oe(r),style:n,onClick:()=>(e=>{null==D||D(e)})(r),children:[t.jsxs("div",{className:y.headerCellContent,id:s,children:["string"==typeof i?t.jsx(h.Typography.BodyBL,{weight:"bold",children:i}):i,be(r)]}),(l||a)&&t.jsx(d.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==D||D(t)})(e,r),children:[a&&"Sort ",t.jsx("span",{"aria-labelledby":s}),a&&de(r)]})})]},r)},be=e=>{const i=null==S?void 0:S[e];return i?"asc"===i?t.jsx(r.ArrowUpIcon,{"aria-hidden":!0,"data-testid":ne(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"aria-hidden":!0,"data-testid":ne(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},ge=()=>t.jsx("th",{"data-testid":ne("header-selection"),className:x.default(y.headerCell,y.headerCellCheckbox),scope:"col",children:t.jsxs("div",{className:y.selectionCheckboxWrapper,children:[t.jsx(d.VisuallyHidden,{children:"Row selection"}),R&&t.jsx(s.Checkbox,{checked:te(),indeterminate:!!N&&0!==N.length&&!te(),disabled:!w||!w.length,"aria-label":"Select all rows",onClick:()=>{L&&L(te())}})]})}),me=(e,r)=>{const i="string"==typeof e?void 0:e.style,l="string"==typeof e?e:e.fieldKey,n=r.id.toString(),a=r[l],s=`${n}-${l}`;let o;return o="string"==typeof a||"number"==typeof a?t.jsx(h.Typography.BodyBL,{className:y.bodyCellText,children:a}):"function"==typeof a?a(r,{isSelected:re(n)}):a,t.jsx("td",{"data-testid":ne(`row-${s}`),id:ce(n,l),className:y.bodyCell,style:i,children:o},s)},ye=e=>{const r=e.id.toString();return t.jsx("td",{"data-testid":ne(`row-${r}-selection`),className:x.default(y.bodyCell,y.bodyCellCheckbox),children:t.jsx("div",{className:y.selectionCheckboxWrapper,children:t.jsx(s.Checkbox,{checked:re(r),"aria-labelledby":ue(r),onClick:()=>{E&&E(r,!re(r))},disabled:le(r),focusableWhenDisabled:le(r)})})})},je=()=>{let e;return e=(null==A?void 0:A.title)?"string"==typeof A.title?t.jsx(h.Typography.HeadingSM,{className:y.emptyStateTitle,weight:"bold",children:A.title}):A.title:t.jsx(h.Typography.HeadingSM,{className:y.emptyStateTitle,weight:"bold",children:"No <items> found"}),t.jsx(o.ErrorDisplay,Object.assign({type:"no-item-found"},A,{title:e,description:(null==A?void 0:A.description)?A.description:"No matching rows"}))};return t.jsxs("div",{id:j||"table-wrapper","data-testid":V["data-testid"]||"table",className:x.default(y.tableWrapper,J&&y.tableWrapperScrollable,v),ref:z,tabIndex:0,children:[t.jsx("div",{className:y.tableContainer,children:t.jsxs("table",{ref:F,className:y.table,children:[t.jsx("thead",{ref:K,className:W?y.stickyHeader:void 0,children:t.jsxs("tr",{className:y.headerRow,children:[q&&ge(),f.map(pe)]})}),t.jsx("tbody",{children:"success"===k?!w||w.length<1?t.jsx("tr",{className:y.bodyRow,children:t.jsx("td",{className:y.emptyStateCell,colSpan:ae(),children:T?T():je()})}):t.jsx(t.Fragment,{children:null==w?void 0:w.map(((e,r)=>t.jsxs("tr",{"data-testid":ne(`row-${e.id.toString()}`),className:x.default(y.bodyRow,X&&y.bodyRowWithBottomBorder,ie(r)&&y.bodyRowAlternating,q&&y.bodyRowSelectable,re(e.id.toString())&&y.bodyRowSelected),children:[q&&ye(e),f.map((t=>me(t,e)))]},e.id.toString())))}):t.jsx("tr",{className:y.bodyRow,children:t.jsx("td",{colSpan:ae(),children:t.jsx("div",{className:y.loadingStateWrapper,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===k&&t.jsx(a.LoadingDotsSpinner,{})})})})})]})}),$&&(N&&N.length>0||H)&&(()=>{var e;const r=null!==(e=null==N?void 0:N.length)&&void 0!==e?e:0,i="item"+(1===r?"":"s");return t.jsxs(t.Fragment,{children:[t.jsx("div",{ref:_,className:y.actionBarWrapper,"data-strategy":P,children:t.jsxs("div",{"data-testid":"data-table-action-bar",className:x.default(y.actionBar,X&&y.actionBarFloating),children:[t.jsx(h.Typography.BodyMD,{weight:"semibold",children:`${r} ${i} selected`}),r>0?t.jsx(c.BasicButton,{className:y.actionBarButton,type:"button","aria-label":`Clear selection of ${r} ${i}`,onClick:M,children:"Clear selection"}):t.jsx("div",{className:y.actionBarGap}),I]})}),"sticky"!==P&&t.jsx("div",{className:y.actionBarSpacer})]})})()]})};
 //# sourceMappingURL=data-table.js.map

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

@@ -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;\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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"}
+{"version":3,"file":"data-table.js","sources":["../../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\n// @catalog\n/**\n * Renders a sortable, selectable data table with scroll-aware action bar and loading state support.\n *\n * Use `DataTable` when presenting structured multi-column data that users may need to sort by\n * column or select rows for bulk actions. Row selection, sort indicators, and the action bar\n * content are all externally controlled; the component manages scroll detection, sticky-header\n * positioning, and floating action bar behaviour internally.\n * @keywords columns, grid, rows, table\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    useApplyStyle(actionBarWrapperRef, {\n        [styles.tokens.actionBarWrapperLeft]:\n            isFloatingActionBar && tableRef.current\n                ? `${tableRef.current.getBoundingClientRect().left}px`\n                : undefined,\n        [styles.tokens.actionBarWrapperWidth]: tableRef.current\n            ? `${tableRef.current.clientWidth}px`\n            : undefined,\n    });\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        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 getHeaderCellId = (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        <thead\n            ref={headerRef}\n            className={enableStickyHeader ? styles.stickyHeader : undefined}\n        >\n            <tr className={styles.headerRow}>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </tr>\n        </thead>\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 headerCellId = getHeaderCellId(fieldKey);\n        return (\n            <th\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                className={clsx(\n                    styles.headerCell,\n                    clickable && styles.headerCellClickable\n                )}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <div className={styles.headerCellContent} id={headerCellId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </div>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </th>\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            <th\n                data-testid={getDataTestId(\"header-selection\")}\n                className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n                scope=\"col\"\n            >\n                <div className={styles.selectionCheckboxWrapper}>\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                </div>\n            </th>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <tr className={styles.bodyRow}>\n                <td\n                    className={styles.emptyStateCell}\n                    colSpan={getTotalColumns()}\n                >\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </td>\n            </tr>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <tr\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        className={clsx(\n                            styles.bodyRow,\n                            isFloatingActionBar &&\n                                styles.bodyRowWithBottomBorder,\n                            isAlternatingRow(index) &&\n                                styles.bodyRowAlternating,\n                            enableMultiSelect && styles.bodyRowSelectable,\n                            isRowSelected(row.id.toString()) &&\n                                styles.bodyRowSelected\n                        )}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </tr>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header === \"string\" ? undefined : header.style;\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        let cellContent: React.ReactNode;\n        if (typeof cellData === \"string\" || typeof cellData === \"number\") {\n            cellContent = (\n                <Typography.BodyBL className={styles.bodyCellText}>\n                    {cellData}\n                </Typography.BodyBL>\n            );\n        } else if (typeof cellData === \"function\") {\n            cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n        } else {\n            cellContent = cellData;\n        }\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                className={styles.bodyCell}\n                style={style}\n            >\n                {cellContent}\n            </td>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n            >\n                <div className={styles.selectionCheckboxWrapper}>\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                </div>\n            </td>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        let emptyTitle: JSX.Element;\n        if (!emptyView?.title) {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {\"No <items> found\"}\n                </Typography.HeadingSM>\n            );\n        } else if (typeof emptyView.title === \"string\") {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {emptyView.title}\n                </Typography.HeadingSM>\n            );\n        } else {\n            emptyTitle = emptyView.title;\n        }\n\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={emptyTitle}\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <tr className={styles.bodyRow}>\n                <td colSpan={getTotalColumns()}>\n                    <div\n                        className={styles.loadingStateWrapper}\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </div>\n                </td>\n            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n        const counter = `item${count === 1 ? \"\" : \"s\"}`;\n\n        return (\n            <>\n                <div\n                    ref={actionBarWrapperRef}\n                    className={styles.actionBarWrapper}\n                    data-strategy={actionBarStrategy}\n                >\n                    <div\n                        data-testid=\"data-table-action-bar\"\n                        className={clsx(\n                            styles.actionBar,\n                            isFloatingActionBar && styles.actionBarFloating\n                        )}\n                    >\n                        <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n                        {count > 0 ? (\n                            <BasicButton\n                                className={styles.actionBarButton}\n                                type=\"button\"\n                                aria-label={`Clear selection of ${count} ${counter}`}\n                                onClick={onClearSelectionClick}\n                            >\n                                Clear selection\n                            </BasicButton>\n                        ) : (\n                            <div className={styles.actionBarGap} />\n                        )}\n                        {actionBarContent}\n                    </div>\n                </div>\n                {/* leave a fixed space when action bar floats to avoid layout shift */}\n                {actionBarStrategy !== \"sticky\" && (\n                    <div className={styles.actionBarSpacer} />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={clsx(\n                styles.tableWrapper,\n                scrollable && styles.tableWrapperScrollable,\n                className\n            )}\n            ref={wrapperRef}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <div className={styles.tableContainer}>\n                <table ref={tableRef} className={styles.table}>\n                    {renderHeaders()}\n                    <tbody>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </tbody>\n                </table>\n            </div>\n            {enableActionBar &&\n                ((selectedIds && selectedIds.length > 0) ||\n                    enableActionBarWithoutSelection) &&\n                renderSelectionBar()}\n        </div>\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","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","styles.tableWrapperScrollable","ref","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","counter","styles.actionBarWrapper","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","styles.actionBarGap","styles.actionBarSpacer","renderSelectionBar"],"mappings":"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"}

package/cjs/data-table/data-table.styles.js

@@ -1,160 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../shared/input-wrapper/input-wrapper.js"),o=require("../shared/styles/index.js"),t=require("../theme/index.js"),i=require("../typography/typography.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=d(e);const l=t.Colour.border,a=t.Colour.text,n=s.default.div`
-    /* we separate the overflow styles so that sticky elements can still work
-       with horizontal scrolling on supported browsers
-       see: https://github.com/w3c/csswg-drafts/issues/12289 */
-    overflow-y: ${e=>e.$scrollable?"auto":"clip"};
-    overflow-x: auto;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    border: ${t.Border["width-010"]} ${t.Border.solid} ${l};
-    border-radius: ${t.Radius.md};
-
-    /* Hide scrollbar */
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-`,c=s.default.div`
-    flex: 1;
-`,p=s.default.table`
-    th:last-child,
-    td:last-child {
-        padding-right: 1.5rem;
-    }
-    th:first-child,
-    td:first-child {
-        padding-left: 1.5rem;
-    }
-    text-align: left;
-    border-collapse: separate;
-    border-spacing: 0;
-    width: 100%;
-`,u=s.default.thead`
-    ${r=>{if(r.$stickyHeader)return e.css`
-                position: sticky;
-                top: 0;
-                z-index: 20;
-            `}};
-`,$=s.default.tbody``,f=s.default.div`
-    ${r=>{const o=r.$left?`${r.$left}px`:"0",t=r.$width?`${r.$width}px`:"100%";switch(r.$strategy){case"inline":return e.css`
-                    position: absolute;
-                    bottom: 0;
-                    left: 0;
-                    width: ${t};
-                `;case"fixed":return e.css`
-                    position: fixed;
-                    bottom: 0;
-                    left: ${o};
-                    width: ${t};
-                `;case"sticky":return e.css`
-                    position: sticky;
-                    bottom: 0;
-                    width: ${t};
-                `}}}
-`,m=s.default(r.BasicButton)`
-    ${t.Font["body-md-semibold"]}
-    cursor: pointer;
-    color: ${t.Colour["text-primary"]};
-    transition: ${t.Motion["duration-150"]} ${t.Motion["ease-default"]};
-    padding: 0.75rem;
-    margin: -0.75rem 0;
-
-    &:hover {
-        color: ${t.Colour["text-hover"]};
-    }
-`,h=s.default.div`
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    height: 3.5rem;
-    padding: ${t.Spacing["spacing-16"]} ${t.Spacing["spacing-24"]};
-    border-top: ${t.Border["width-010"]} ${t.Border.solid} ${l};
-    background-color: ${t.Colour["bg-selected"]};
-    transition: transform ${t.Motion["duration-350"]} ${t.Motion["ease-default"]};
-    ${r=>r.$float?e.css`
-                transform: translateX(0.5rem) translateY(-2rem);
-                border-radius: ${t.Radius.sm};
-                box-shadow: ${t.Shadow["xs-subtle"]};
-                width: calc(100% - ${t.Spacing["spacing-16"]});
-                border: ${t.Border["width-010"]} ${t.Border.solid} ${l};
-            `:e.css`
-                border-radius: ${t.Radius.none} ${t.Radius.none}
-                    ${t.Radius.sm} ${t.Radius.sm};
-            `}
-`,b=s.default.div`
-    width: 0.75rem;
-`,g=s.default.div`
-    height: 3.5rem;
-`,x=s.default.tr`
-    background-color: ${t.Colour["bg-stronger"]};
-    height: 6rem;
-    border-bottom: ${t.Border["width-010"]} ${t.Border.solid} ${l};
-`,w=s.default.th`
-    padding: ${e=>e.$isCheckbox?"1.25rem 0.5rem 1.25rem 1.5rem":"1.25rem 1rem"};
-    text-align: left;
-    cursor: ${e=>e.$clickable?"pointer":"default"};
-    vertical-align: middle;
-    color: ${a};
-    border-bottom: ${t.Border["width-010"]} ${t.Border.solid} ${l};
-    ${r=>{if(r.$isCheckbox)return e.css`
-                width: 4rem;
-            `}};
-    &:focus-within {
-        outline: 2px solid ${t.Colour["focus-ring"]};
-        outline-offset: -3px;
-    }
-`,y=s.default.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    svg {
-        color: ${a};
-        margin-left: 0.5rem;
-    }
-`,B=s.default.tr`
-    background-color: ${r=>r.$isSelected?e.css`
-                ${t.Colour["bg-selected"]};
-            `:r.$alternating?e.css`
-                ${t.Colour["bg-strong"]};
-            `:e.css`
-                ${t.Colour.bg};
-            `};
-    border-top: ${t.Border["width-010"]} ${t.Border.solid} ${l};
-    &:hover {
-        ${r=>{if(r.$isSelectable)return e.css`
-                    background-color: ${t.Colour["bg-hover-strong"]};
-                `}};
-    }
-
-    &:last-child {
-        td {
-            border-bottom: ${e=>e.$showLastRowBottomBorder?`${t.Border["width-010"]} ${t.Border.solid} ${l}`:"none"};
-        }
-    }
-`,v=s.default.td`
-    padding: ${e=>e.$isCheckbox?"1.25rem 0.5rem 1.25rem 1.5rem":"1.25rem 1rem"};
-    vertical-align: middle;
-    color: ${a};
-    border-bottom: ${t.Border["width-010"]} ${t.Border.solid} ${l};
-`,C=s.default(i.Typography.BodyBL)`
-    ${o.lineClampCss(2)}
-    text-overflow: ellipsis;
-`,k=s.default.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`,R=s.default.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 4rem 0;
-`,S=s.default(i.Typography.HeadingSM)`
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-`,T=s.default.td`
-    padding: 4rem 0;
-`;exports.ActionBar=h,exports.ActionBarGap=b,exports.ActionBarSpacer=g,exports.ActionBarWrapper=f,exports.BodyCell=v,exports.BodyCellContent=C,exports.BodyRow=B,exports.CheckBoxWrapper=k,exports.EmptyViewCell=T,exports.ErrorDisplayTitle=S,exports.HeaderCell=w,exports.HeaderCellWrapper=y,exports.HeaderRow=x,exports.LoaderWrapper=R,exports.Table=p,exports.TableBody=$,exports.TableContainer=c,exports.TableHead=u,exports.TableWrapper=n,exports.TextButton=m;
+"use strict";require("./data-table.styles_1tnlmhe.css");exports.actionBar="a1euqarq",exports.actionBarButton="anoy5c0",exports.actionBarFloating="adhafdm",exports.actionBarGap="a1gvi5ye",exports.actionBarSpacer="aag0lf9",exports.actionBarWrapper="a1pcc0nq",exports.bodyCell="b6ks76c",exports.bodyCellCheckbox="b1g3gl2s",exports.bodyCellText="b1yxh9il",exports.bodyRow="b1bceurq",exports.bodyRowAlternating="b8t2s91",exports.bodyRowSelectable="b1tvp43a",exports.bodyRowSelected="bjmthdi",exports.bodyRowWithBottomBorder="bx1feaw",exports.emptyStateCell="e1w2nktt",exports.emptyStateTitle="e8l591w",exports.headerCell="h1ec4wtd",exports.headerCellCheckbox="h4ne4e9",exports.headerCellClickable="hp15x3z",exports.headerCellContent="hfa3d3x",exports.headerRow="h1744qno",exports.loadingStateWrapper="l1qkofer",exports.selectionCheckboxWrapper="sxywpxo",exports.stickyHeader="s1nfqacf",exports.table="t7u4vf5",exports.tableContainer="t4ucy2z",exports.tableWrapper="t188sfx3",exports.tableWrapperScrollable="t1j0mhj",exports.tokens={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"};
 //# sourceMappingURL=data-table.styles.js.map

package/cjs/data-table/data-table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.styles.js","sources":["../../../src/data-table/data-table.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Colour,\n    Font,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } 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 TableWrapperProps {\n    $scrollable: boolean;\n}\ninterface TableHeadProps {\n    $stickyHeader: boolean | undefined;\n}\ninterface HeaderCellProps {\n    $clickable: boolean;\n    $isCheckbox: boolean;\n}\ninterface BodyRowProps {\n    $alternating: boolean;\n    $isSelected?: boolean;\n    $isSelectable?: boolean;\n    $showLastRowBottomBorder?: boolean;\n}\n\ninterface BodyCellProps {\n    $isCheckbox: boolean;\n}\n\ninterface ActionBarWrapperProps {\n    $strategy: \"fixed\" | \"sticky\" | \"inline\";\n    $left?: number | undefined;\n    $width?: number | undefined;\n}\n\ninterface ActionBarProps {\n    $float: boolean;\n}\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div<TableWrapperProps>`\n    /* we separate the overflow styles so that sticky elements can still work\n       with horizontal scrolling on supported browsers\n       see: https://github.com/w3c/csswg-drafts/issues/12289 */\n    overflow-y: ${(props) => (props.$scrollable ? \"auto\" : \"clip\")};\n    overflow-x: auto;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const TableContainer = styled.div`\n    flex: 1;\n`;\n\nexport const Table = styled.table`\n    th:last-child,\n    td:last-child {\n        padding-right: 1.5rem;\n    }\n    th:first-child,\n    td:first-child {\n        padding-left: 1.5rem;\n    }\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nexport const TableHead = styled.thead<TableHeadProps>`\n    ${(props) => {\n        if (props.$stickyHeader) {\n            return css`\n                position: sticky;\n                top: 0;\n                z-index: 20;\n            `;\n        }\n    }};\n`;\n\nexport const TableBody = styled.tbody``;\n\nexport const ActionBarWrapper = styled.div<ActionBarWrapperProps>`\n    ${(props) => {\n        const left = props.$left ? `${props.$left}px` : \"0\";\n        const width = props.$width ? `${props.$width}px` : \"100%\";\n\n        switch (props.$strategy) {\n            case \"inline\":\n                return css`\n                    position: absolute;\n                    bottom: 0;\n                    left: 0;\n                    width: ${width};\n                `;\n            case \"fixed\":\n                return css`\n                    position: fixed;\n                    bottom: 0;\n                    left: ${left};\n                    width: ${width};\n                `;\n            case \"sticky\":\n                return css`\n                    position: sticky;\n                    bottom: 0;\n                    width: ${width};\n                `;\n        }\n    }}\n`;\n\nexport const TextButton = styled(BasicButton)`\n    ${Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${Colour[\"text-primary\"]};\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const ActionBar = styled.div<ActionBarProps>`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    background-color: ${Colour[\"bg-selected\"]};\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-default\"]};\n    ${(props) => {\n        if (props.$float) {\n            return css`\n                transform: translateX(0.5rem) translateY(-2rem);\n                border-radius: ${Radius[\"sm\"]};\n                box-shadow: ${Shadow[\"xs-subtle\"]};\n                width: calc(100% - ${Spacing[\"spacing-16\"]});\n                border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n            `;\n        } else {\n            return css`\n                border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]}\n                    ${Radius[\"sm\"]} ${Radius[\"sm\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ActionBarGap = styled.div`\n    width: 0.75rem;\n`;\n\nexport const ActionBarSpacer = styled.div`\n    height: 3.5rem;\n`;\n\nexport const HeaderRow = styled.tr`\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const HeaderCell = styled.th<HeaderCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    text-align: left;\n    cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    ${(props) => {\n        if (props.$isCheckbox) {\n            return css`\n                width: 4rem;\n            `;\n        }\n    }};\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -3px;\n    }\n`;\n\nexport const HeaderCellWrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    svg {\n        color: ${fontColor};\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const BodyRow = styled.tr<BodyRowProps>`\n    background-color: ${(props) => {\n        if (props.$isSelected) {\n            return css`\n                ${Colour[\"bg-selected\"]};\n            `;\n        } else if (props.$alternating) {\n            return css`\n                ${Colour[\"bg-strong\"]};\n            `;\n        } else {\n            return css`\n                ${Colour[\"bg\"]};\n            `;\n        }\n    }};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    &:hover {\n        ${(props) => {\n            if (props.$isSelectable) {\n                return css`\n                    background-color: ${Colour[\"bg-hover-strong\"]};\n                `;\n            }\n        }};\n    }\n\n    &:last-child {\n        td {\n            border-bottom: ${(props) =>\n                props.$showLastRowBottomBorder\n                    ? `${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor}`\n                    : \"none\"};\n        }\n    }\n`;\n\nexport const BodyCell = styled.td<BodyCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const BodyCellContent = styled(Typography.BodyBL)`\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n`;\n\nexport const CheckBoxWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const LoaderWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const ErrorDisplayTitle = styled(Typography.HeadingSM)`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n\nexport const EmptyViewCell = styled.td`\n    padding: 4rem 0;\n`;\n"],"names":["borderColor","Colour","fontColor","TableWrapper","styled","div","props","$scrollable","Border","Radius","TableContainer","Table","table","TableHead","thead","$stickyHeader","css","TableBody","tbody","ActionBarWrapper","left","$left","width","$width","$strategy","TextButton","BasicButton","Font","Motion","ActionBar","Spacing","$float","Shadow","ActionBarGap","ActionBarSpacer","HeaderRow","tr","HeaderCell","th","$isCheckbox","$clickable","HeaderCellWrapper","BodyRow","$isSelected","$alternating","$isSelectable","$showLastRowBottomBorder","BodyCell","td","BodyCellContent","Typography","BodyBL","lineClampCss","CheckBoxWrapper","LoaderWrapper","ErrorDisplayTitle","HeadingSM","EmptyViewCell"],"mappings":"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"}
+{"version":3,"file":"data-table.styles.js","sources":["../../../src/data-table/data-table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Colour,\n    Font,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\nexport const tokens = {\n    actionBarWrapperLeft: \"--fds-internal-dataTable-actionBarWrapper-left\",\n    actionBarWrapperWidth: \"--fds-internal-dataTable-actionBarWrapper-width\",\n} as const;\n\n// =============================================================================\n// Layout\n// =============================================================================\nexport const tableWrapper = css`\n    /* we separate the overflow styles so that sticky elements can still work\n       with horizontal scrolling on supported browsers\n       see: https://github.com/w3c/csswg-drafts/issues/12289 */\n    overflow-y: clip;\n    overflow-x: auto;\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const tableWrapperScrollable = css`\n    overflow-y: auto;\n`;\n\nexport const tableContainer = css`\n    flex: 1;\n`;\n\nexport const table = css`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\n// =============================================================================\n// Header\n// =============================================================================\nexport const stickyHeader = css`\n    position: sticky;\n    top: 0;\n    z-index: 20;\n`;\n\nexport const headerRow = css`\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const headerCell = css`\n    padding: 1.25rem 1rem;\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${Colour[\"text\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -3px;\n    }\n`;\n\nexport const headerCellClickable = css`\n    cursor: pointer;\n`;\n\nexport const headerCellCheckbox = css`\n    width: 4rem;\n    padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const headerCellContent = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    svg {\n        color: ${Colour[\"text\"]};\n        margin-left: 0.5rem;\n    }\n`;\n\n// =============================================================================\n// Body\n// =============================================================================\nexport const bodyCell = css`\n    padding: 1.25rem 1rem;\n    vertical-align: middle;\n    color: ${Colour[\"text\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n`;\n\nexport const bodyRow = css`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:last-child {\n        .${bodyCell} {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const bodyRowAlternating = css`\n    background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const bodyRowSelected = css`\n    background-color: ${Colour[\"bg-selected\"]};\n`;\n\nexport const bodyRowSelectable = css`\n    &:hover {\n        background-color: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const bodyRowWithBottomBorder = css`\n    &:last-child {\n        .${bodyCell} {\n            border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n                ${Colour[\"border\"]};\n        }\n    }\n`;\n\nexport const bodyCellCheckbox = css`\n    padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const bodyCellText = css`\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n`;\n\nexport const emptyStateCell = css`\n    padding: 4rem 0;\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n`;\n\nexport const selectionCheckboxWrapper = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\n// =============================================================================\n// Action bar\n// =============================================================================\nexport const actionBarButton = css`\n    ${Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${Colour[\"text-primary\"]};\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const actionBarGap = css`\n    width: 0.75rem;\n`;\n\nexport const actionBarSpacer = css`\n    height: 3.5rem;\n`;\n\nexport const actionBar = css`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background-color: ${Colour[\"bg-selected\"]};\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]} ${Radius[\"sm\"]}\n        ${Radius[\"sm\"]};\n`;\n\nexport const actionBarFloating = css`\n    transform: translateX(0.5rem) translateY(-2rem);\n    border-radius: ${Radius[\"sm\"]};\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    width: calc(100% - ${Spacing[\"spacing-16\"]});\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const actionBarWrapper = css`\n    ${tokens.actionBarWrapperLeft}: initial;\n    ${tokens.actionBarWrapperWidth}: initial;\n\n    &[data-strategy=\"inline\"] {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: var(${tokens.actionBarWrapperWidth}, 100%);\n    }\n\n    &[data-strategy=\"fixed\"] {\n        position: fixed;\n        bottom: 0;\n        left: var(${tokens.actionBarWrapperLeft}, 0px);\n        width: var(${tokens.actionBarWrapperWidth}, 100%);\n    }\n\n    &[data-strategy=\"sticky\"] {\n        position: sticky;\n        bottom: 0;\n    }\n`;\n\n// =============================================================================\n// Load and error states\n// =============================================================================\nexport const loadingStateWrapper = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const emptyStateTitle = css`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n"],"names":["actionBarWrapperLeft","actionBarWrapperWidth"],"mappings":"oGAyNsB,mCArBM,oCAkCE,+BArBL,mCAIG,mCAyBC,4BAzHR,mCAiDQ,gCAIJ,2BAtCL,sCAWW,oCAQD,mCAJF,0CAUQ,iCAkBT,mCAiGC,6BAxML,sCA0BQ,sCAJC,oCASF,4BArCR,uCAuMU,4CA9EK,+BA/HZ,yBAVP,iCAJS,+BAzBF,0CAqBU,yBA7Bb,CAClBA,qBAAsB,iDACtBC,sBAAuB"}

package/cjs/data-table/data-table.styles_1tnlmhe.css

@@ -0,0 +1,28 @@
+@layer fds{.t188sfx3{overflow-y:clip;overflow-x:auto;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);scrollbar-width:none;-ms-overflow-style:none;}.t188sfx3::-webkit-scrollbar{display:none;}
+.t1j0mhj{overflow-y:auto;}
+.t4ucy2z{-webkit-flex:1;-ms-flex:1;flex:1;}
+.t7u4vf5{text-align:left;border-collapse:separate;border-spacing:0;width:100%;}
+.s1nfqacf{position:-webkit-sticky;position:sticky;top:0;z-index:20;}
+.h1744qno{background-color:var(--fds-colour-bg-stronger);height:6rem;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.h1ec4wtd{padding:1.25rem 1rem;text-align:left;cursor:default;vertical-align:middle;color:var(--fds-colour-text);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.h1ec4wtd:first-child{padding-left:1.5rem;}.h1ec4wtd:last-child{padding-right:1.5rem;}.h1ec4wtd:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-3px;}
+.hp15x3z{cursor:pointer;}
+.h4ne4e9{width:4rem;padding:1.25rem 0.5rem 1.25rem 1.5rem;}
+.hfa3d3x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.hfa3d3x svg{color:var(--fds-colour-text);margin-left:0.5rem;}
+.b6ks76c{padding:1.25rem 1rem;vertical-align:middle;color:var(--fds-colour-text);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.b6ks76c:first-child{padding-left:1.5rem;}.b6ks76c:last-child{padding-right:1.5rem;}
+.b1bceurq{background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.b1bceurq:last-child .b6ks76c{border-bottom:none;}
+.b8t2s91{background-color:var(--fds-colour-bg-strong);}
+.bjmthdi{background-color:var(--fds-colour-bg-selected);}
+.b1tvp43a:hover{background-color:var(--fds-colour-bg-hover-strong);}
+.bx1feaw:last-child .b6ks76c{border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.b1g3gl2s{padding:1.25rem 0.5rem 1.25rem 1.5rem;}
+.b1yxh9il{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
+.e1w2nktt{padding:4rem 0;}.e1w2nktt:first-child{padding-left:1.5rem;}.e1w2nktt:last-child{padding-right:1.5rem;}
+.sxywpxo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.anoy5c0{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;color:var(--fds-colour-text-primary);-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.75rem;margin:-0.75rem 0;}.anoy5c0:hover{color:var(--fds-colour-text-hover);}
+.a1gvi5ye{width:0.75rem;}
+.aag0lf9{height:3.5rem;}
+.a1euqarq{overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-24);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background-color:var(--fds-colour-bg-selected);-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-default);border-radius:var(--fds-radius-none) var(--fds-radius-none) var(--fds-radius-sm) var(--fds-radius-sm);}
+.adhafdm{-webkit-transform:translateX(0.5rem) translateY(-2rem);-moz-transform:translateX(0.5rem) translateY(-2rem);-ms-transform:translateX(0.5rem) translateY(-2rem);transform:translateX(0.5rem) translateY(-2rem);border-radius:var(--fds-radius-sm);box-shadow:var(--fds-shadow-xs-subtle);width:calc(100% - var(--fds-spacing-16));border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.a1pcc0nq{--fds-internal-dataTable-actionBarWrapper-left:initial;--fds-internal-dataTable-actionBarWrapper-width:initial;}.a1pcc0nq[data-strategy="inline"]{position:absolute;bottom:0;left:0;width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}.a1pcc0nq[data-strategy="fixed"]{position:fixed;bottom:0;left:var(--fds-internal-dataTable-actionBarWrapper-left, 0px);width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}.a1pcc0nq[data-strategy="sticky"]{position:-webkit-sticky;position:sticky;bottom:0;}
+.l1qkofer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4rem 0;}
+.e8l591w{margin-top:2rem;margin-bottom:1rem;}}

package/cjs/date-input/date-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("../external/dayjs/dayjs.min.js"),t=require("react"),n=require("../shared/dropdown-wrapper/element-with-dropdown.js"),i=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var l=require("../shared/standalone-date-input/standalone-date-input.js");require("../util/calendar-helper.js"),require("../util/date-helper.js");var s=require("../util/date-input-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var d=require("./date-input.style.js");exports.DateInput=o=>{var{minDate:u,maxDate:c,disabled:p,disabledDates:v,error:D,hideInputKeyboard:h,value:f,onChange:b,onFocus:m,onBlur:j,onYearMonthDisplayChange:I,withButton:w=!0,readOnly:g,id:q,allowDisabledSelection:x,zIndex:y,dropdownRootNode:C}=o,S=e.__rest(o,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode"]);const[Y,R]=t.useState(s.DateInputHelper.sanitizeInput(f)),[B,O]=t.useState(s.DateInputHelper.sanitizeInput(f)),[z,H]=t.useState(void 0),[M,F]=t.useState(!1),[$,_]=t.useState(!1),E=t.useRef(null),K=t.useRef(null),N=t.useRef(null);t.useEffect((()=>{const e=s.DateInputHelper.sanitizeInput(f);R(e),O(e)}),[f]);const V=e=>{!x&&s.DateInputHelper.isDateDisabled(e,{disabledDates:v,minDate:u,maxDate:c})||(O(e),w||(G(e),R(e),e&&F(!1)))},W=e=>{var a;O(e),w||(G(e),R(e),e&&(null===(a=K.current)||void 0===a||a.focusYearRef(),F(!1)),H(void 0))},k=()=>{g||p||(F(!0),$||(_(!0),m&&m()))},T=e=>{var a,r,t;const n=e.relatedTarget,i=N.current&&N.current.contains(n),l=E.current&&E.current.contains(n),s=(null===(a=null==n?void 0:n.matches)||void 0===a?void 0:a.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));($&&!M&&!l&&!s||M&&!l&&!i&&!s)&&(null===(t=K.current)||void 0===t||t.resetInput(),O(Y),_(!1),F(!1),J())},Z=e=>{M&&H(e)},A=e=>{var a,t;switch(e){case"reset":O(Y);break;case"confirmed":R(B),G(B)}r.default(B,"YYYY-MM-DD",!0).isValid()?null===(a=K.current)||void 0===a||a.focusYearRef():null===(t=E.current)||void 0===t||t.focus(),F(!1)},G=e=>{b&&b(e)},J=()=>{j&&j()};return a.jsx(n.ElementWithDropdown,{enabled:!g&&!p,isOpen:M,renderElement:()=>a.jsx(d.Container,Object.assign({role:"group",tabIndex:0,ref:E,onBlur:T,onFocus:k,$disabled:p,$readOnly:g,$focused:$,$error:D,id:q,"data-testid":S["data-testid"],"aria-disabled":p},S,{children:a.jsx(l.StandaloneDateInput,{ref:K,disabled:p,onChange:V,readOnly:g,focused:M,names:["start-day","start-month","start-year"],value:B,hoverValue:z,hideInputKeyboard:h})})),renderDropdown:({elementWidth:e})=>a.jsx(i.CalendarDropdown,{variant:"single",ref:N,initialCalendarDate:B,withButton:w,value:B,disabledDates:v,minDate:u,maxDate:c,allowDisabledSelection:x,onHover:Z,onSelect:W,onDismiss:A,onYearMonthDisplayChange:I,width:e,isFocusable:!g&&!p}),onClose:()=>{var e;null===(e=K.current)||void 0===e||e.resetInput(),O(Y),F(!1),_(!1),J(),H(void 0)},onDismiss:()=>{var e,a;null===(e=K.current)||void 0===e||e.resetInput(),null===(a=E.current)||void 0===a||a.focus(),O(Y),F(!1)},customZIndex:y,offset:16,rootNode:C})};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("clsx"),t=require("../external/dayjs/dayjs.min.js"),n=require("react"),i=require("../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../shared/input-wrapper/input-wrapper.js"),s=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var d=require("../shared/standalone-date-input/standalone-date-input.js");require("../util/calendar-helper.js");var o=require("../util/date-input-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./date-input.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(r);exports.DateInput=r=>{var{minDate:c,maxDate:v,disabled:D,disabledDates:h,error:f,hideInputKeyboard:m,value:b,onChange:j,onFocus:w,onBlur:I,onYearMonthDisplayChange:q,withButton:x=!0,readOnly:y,id:g,allowDisabledSelection:S,zIndex:C,dropdownRootNode:Y,className:R}=r,B=e.__rest(r,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className"]);const[N,O]=n.useState(o.DateInputHelper.sanitizeInput(b)),[z,H]=n.useState(o.DateInputHelper.sanitizeInput(b)),[M,F]=n.useState(void 0),[_,E]=n.useState(!1),[K,W]=n.useState(!1),V=n.useRef(null),k=n.useRef(null),T=n.useRef(null);n.useEffect((()=>{const e=o.DateInputHelper.sanitizeInput(b);O(e),H(e)}),[b]);const Z=e=>{!S&&o.DateInputHelper.isDateDisabled(e,{disabledDates:h,minDate:c,maxDate:v})||(H(e),x||(Q(e),O(e),e&&E(!1)))},A=e=>{var a;H(e),x||(Q(e),O(e),e&&(null===(a=k.current)||void 0===a||a.focusYearRef(),E(!1)),F(void 0))},G=()=>{y||D||(E(!0),K||(W(!0),w&&w()))},J=e=>{var a,r,t;const n=e.relatedTarget,i=T.current&&T.current.contains(n),l=V.current&&V.current.contains(n),s=(null===(a=null==n?void 0:n.matches)||void 0===a?void 0:a.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));(K&&!_&&!l&&!s||_&&!l&&!i&&!s)&&(null===(t=k.current)||void 0===t||t.resetInput(),H(N),W(!1),E(!1),U())},L=e=>{_&&F(e)},P=e=>{var a,r;switch(e){case"reset":H(N);break;case"confirmed":O(z),Q(z)}t.default(z,"YYYY-MM-DD",!0).isValid()?null===(a=k.current)||void 0===a||a.focusYearRef():null===(r=V.current)||void 0===r||r.focus(),E(!1)},Q=e=>{j&&j(e)},U=()=>{I&&I()};return a.jsx(i.ElementWithDropdown,{enabled:!y&&!D,isOpen:_,renderElement:()=>a.jsx(l.InputWrapper,Object.assign({role:"group",tabIndex:0,ref:V,onBlur:J,onFocus:G,disabled:D,readOnly:y,focused:K,error:f,id:g,"data-testid":B["data-testid"],"aria-disabled":D,className:p.default(u.container,R)},B,{children:a.jsx(d.StandaloneDateInput,{ref:k,disabled:D,onChange:Z,readOnly:y,focused:_,names:["start-day","start-month","start-year"],value:z,hoverValue:M,hideInputKeyboard:m})})),renderDropdown:({elementWidth:e})=>a.jsx(s.CalendarDropdown,{variant:"single",ref:T,initialCalendarDate:z,withButton:x,value:z,disabledDates:h,minDate:c,maxDate:v,allowDisabledSelection:S,onHover:L,onSelect:A,onDismiss:P,onYearMonthDisplayChange:q,width:e,isFocusable:!y&&!D}),onClose:()=>{var e;null===(e=k.current)||void 0===e||e.resetInput(),H(N),E(!1),W(!1),U(),F(void 0)},onDismiss:()=>{var e,a;null===(e=k.current)||void 0===e||e.resetInput(),null===(a=V.current)||void 0===a||a.focus(),H(N),E(!1)},customZIndex:C,offset:16,rootNode:Y})};
 //# sourceMappingURL=date-input.js.map