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

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

@@ -0,0 +1,8 @@
+.wav7a6b{width:100%;}
+.c1ji5mw9{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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

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

@@ -1 +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 {\n    BorderThickness,\n    Colour,\n    Radius,\n    toCssValue,\n    useApplyStyle,\n    useResolvedTokenValue,\n} from \"../theme\";\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\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":"g+BAqBA,MAqFaA,EAAeC,EAAAA,YArFV,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"}
+{"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 {\n    BorderThickness,\n    Colour,\n    Radius,\n    toCssValue,\n    useApplyStyle,\n    useResolvedTokenValue,\n} from \"../theme\";\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\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":"6gCAqBA,MAqFaA,EAAeC,EAAAA,YArFV,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/data-table/data-table.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("react"),n=require("../external/react-intersection-observer/index.js"),l=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-dots/loading-dots.js");var s=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("../animations/loading-spinner/loading-spinner.js"),require("../theme/theme-provider/context.js");var a=require("../checkbox/checkbox.js"),o=require("../error-display/error-display.js"),d=require("../shared/accessibility/index.js"),c=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var h=require("../util/use-event-listener.js"),g=require("./data-table.styles.js");exports.DataTable=p=>{var{id:x,headers:b,rows:j,className:y,sortIndicators:f,alternatingRows:w,loadState:m="success",enableMultiSelect:C,selectedIds:$,disabledIds:v,enableActionBar:S,enableSelectAll:k,enableStickyHeader:B,emptyView:H,actionBarContent:q,renderCustomEmptyView:R,onHeaderClick:I,onSelect:A,onSelectAll:T,onClearSelectionClick:D}=p,E=e.__rest(p,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const V=i.useRef(null),W=i.useRef(null),L=i.useRef(null),N=i.useRef(null),K=i.useRef(null),M=u.useId(),_=b.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[z,F]=i.useState(!1),[Y,O]=i.useState(!1),[U,G]=i.useState(!1),[J,P]=i.useState(!1),[Q,X]=i.useState(!1),{ref:Z,inView:ee}=n.useInView(),te=i.useCallback((()=>{if(!K.current||!N.current)return;const e=K.current.scrollHeight>K.current.clientHeight;F(e),e?N.current.style.transform="translateY(0)":pe()}),[]);i.useEffect((()=>{te()}),[]),l.useResizeDetector({onResize:te});h.useEventListener("scroll",(()=>{requestAnimationFrame((()=>{z?ge():pe()})),K.current&&G(K.current.getBoundingClientRect().bottom<=window.innerHeight)}),"window"),i.useEffect((()=>{xe()}),[j]);const re=()=>(null==$?void 0:$.length)===(null==j?void 0:j.length),ie=e=>!!(null==$?void 0:$.includes(e)),ne=e=>!!w&&e%2==1,le=e=>!!(null==v?void 0:v.includes(e)),se=e=>{if(E["data-testid"])return`${E["data-testid"]}-${e}`},ae=()=>b.length+(C?1:0),oe=e=>null==f?void 0:f[e],de=e=>{const t=oe(e);if(t)return"asc"===t?"ascending":"descending"},ce=e=>` by ${"asc"===oe(e)?"descending":"ascending"} order`,ue=(e,t)=>`${M}-row-${e}-${t}-key-column`,he=e=>{const t=_.map((t=>ue(e,t.fieldKey)));return d.concatIds(...t)},ge=()=>{if(!K.current)return;const e=K.current.getBoundingClientRect();P(e.bottom>window.innerHeight+30&&e.top<window.innerHeight-200)},pe=()=>{if(!(V.current&&W.current&&K.current&&N.current&&L.current))return;const e=W.current.getBoundingClientRect();if(e.top>window.innerHeight){const t=e.bottom-window.innerHeight,r=V.current.getBoundingClientRect().height-L.current.clientHeight-32,i=Math.min(t,r);N.current.style.transform=`translateY(-${i}px)`}else N.current.style.transform="translateY(0)"},xe=()=>{V.current&&K.current&&X(V.current.clientHeight+(S?56:0)<K.current.clientHeight)},be=e=>{const{fieldKey:r,label:i,clickable:n=!1,style:l}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!oe(r),a=(e=>`${M}-header-${e}`)(r);return t.jsxs(g.HeaderCell,{"data-testid":se(`header-${r}`),$clickable:n,scope:"col","aria-sort":de(r),style:l,$isCheckbox:!1,children:[t.jsxs(g.HeaderCellWrapper,{id:a,children:["string"==typeof i?t.jsx(c.Typography.BodyBL,{weight:"bold",children:i}):i,je(r)]}),(n||s)&&t.jsx(d.VisuallyHidden,{children:t.jsxs("button",{onClick:()=>null==I?void 0:I(r),children:[s&&"Sort ",t.jsx("span",{"aria-labelledby":a}),s&&ce(r)]})})]},r)},je=e=>{const i=null==f?void 0:f[e];return i?"asc"===i?t.jsx(r.ArrowUpIcon,{"aria-hidden":!0,"data-testid":se(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"aria-hidden":!0,"data-testid":se(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},ye=()=>t.jsx(g.HeaderCell,{"data-testid":se("header-selection"),$clickable:!1,$isCheckbox:!0,scope:"col",children:t.jsxs(g.CheckBoxWrapper,{children:[t.jsx(d.VisuallyHidden,{children:"Row selection"}),k&&t.jsx(a.Checkbox,{checked:re(),indeterminate:!!$&&0!==$.length&&!re(),"aria-label":"Select all rows",onClick:()=>{T&&T(re())}})]})}),fe=(e,r)=>{const i="string"!=typeof e?e.style:void 0,n="string"==typeof e?e:e.fieldKey,l=r.id.toString(),s=r[n],a=`${l}-${n}`;return t.jsx(g.BodyCell,{"data-testid":se(`row-${a}`),id:ue(l,n),style:i,$isCheckbox:!1,children:"string"==typeof s||"number"==typeof s?t.jsx(g.BodyCellContent,{children:s}):"function"==typeof s?s(r,{isSelected:ie(l)}):s},a)},we=e=>{const r=e.id.toString();return t.jsx(g.BodyCell,{"data-testid":se(`row-${r}-selection`),$isCheckbox:!0,children:t.jsx(g.CheckBoxWrapper,{children:t.jsx(a.Checkbox,{checked:ie(r),"aria-labelledby":he(r),onClick:()=>{A&&A(r,!ie(r))},disabled:le(r),focusableWhenDisabled:le(r)})})})},me=()=>t.jsx(o.ErrorDisplay,Object.assign({type:"no-item-found"},H,{title:(null==H?void 0:H.title)?"string"==typeof H.title?t.jsx(g.ErrorDisplayTitle,{weight:"bold",children:H.title}):H.title:t.jsx(g.ErrorDisplayTitle,{weight:"bold",children:"No <items> found"}),description:(null==H?void 0:H.description)?H.description:"No matching rows"}));return t.jsxs(g.TableWrapper,{id:x||"table-wrapper","data-testid":E["data-testid"]||"table",className:y,ref:K,onScroll:()=>{z&&K.current&&O(K.current.scrollTop+K.current.clientHeight>=K.current.scrollHeight)},tabIndex:0,children:[t.jsx(g.TableContainer,{children:t.jsxs(g.Table,{$end:U,$scrollable:z,ref:V,$stickyHeader:B,children:[t.jsx("thead",{ref:L,children:t.jsxs(g.HeaderRow,{children:[C&&ye(),b.map(be)]})}),t.jsx(g.TableBody,{$showLastRowBottomBorder:Q,children:"success"===m?!j||j.length<1?t.jsx("tr",{children:t.jsx(g.EmptyViewCell,{colSpan:ae(),children:R?R():me()})}):t.jsx(t.Fragment,{children:null==j?void 0:j.map(((e,r)=>t.jsxs(g.BodyRow,{"data-testid":se(`row-${e.id.toString()}`),$alternating:ne(r),$isSelectable:C,$isSelected:ie(e.id.toString()),children:[C&&we(e),b.map((t=>fe(t,e)))]},e.id.toString())))}):t.jsx("tr",{children:t.jsx("td",{colSpan:ae(),children:t.jsx(g.LoaderWrapper,{role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===m&&t.jsx(s.LoadingDotsSpinner,{})})})})})]})}),S&&$&&$.length>0&&(()=>{var e,r,i,n;const l=null!==(e=null==$?void 0:$.length)&&void 0!==e?e:0;return t.jsx(g.ActionBarWrapper,{ref:N,$fixed:J,$left:null===(i=null===(r=null==V?void 0:V.current)||void 0===r?void 0:r.getBoundingClientRect())||void 0===i?void 0:i.left,$width:null===(n=null==V?void 0:V.current)||void 0===n?void 0:n.clientWidth,children:t.jsxs(g.ActionBar,{$float:(z?!Y:!ee)||J,$scrollable:z,children:[t.jsx(c.Typography.BodyMD,{weight:"semibold",children:`${l} item${l>1?"s":""} selected`}),t.jsx(g.TextButton,{type:"button","aria-label":`Clear selection of ${l} item${1===l?"":"s"}`,onClick:D,children:"Clear selection"}),q]})})})(),t.jsx("div",{ref:e=>{W.current=e,Z(e)}})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("clsx"),n=require("react"),l=require("../external/react-intersection-observer/index.js"),s=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 o=require("../checkbox/checkbox.js"),d=require("../error-display/error-display.js"),c=require("../shared/accessibility/index.js"),u=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 h=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var p=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var y=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var g=require("../util/use-event-listener.js"),m=require("./data-table.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=b(i);exports.DataTable=i=>{var{id:b,headers:x,rows:f,className:w,sortIndicators:v,alternatingRows:C,loadState:S="success",enableMultiSelect:k,selectedIds:q,disabledIds:B,enableActionBar:N,enableSelectAll:$,enableStickyHeader:H,emptyView:R,actionBarContent:I,renderCustomEmptyView:W,onHeaderClick:A,onSelect:T,onSelectAll:V,onClearSelectionClick:D}=i,E=e.__rest(i,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const L=n.useRef(null),M=n.useRef(null),F=n.useRef(null),K=n.useRef(null),_=n.useRef(null),z=y.useId(),Y=x.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[O,P]=n.useState(!1),[U,G]=n.useState(!1),[J,Q]=n.useState(!1),[X,Z]=n.useState(!1),{ref:ee,inView:te}=l.useInView();h.useApplyStyle(K,{[m.tokens.actionBarWrapperLeft]:J&&L.current?`${L.current.getBoundingClientRect().left}px`:void 0,[m.tokens.actionBarWrapperWidth]:J&&L.current?`${L.current.clientWidth}px`:void 0});const re=n.useCallback((()=>{if(!_.current||!K.current)return;const e=_.current.scrollHeight>_.current.clientHeight;P(e),e?K.current.style.transform="translateY(0)":ge()}),[]);n.useEffect((()=>{re()}),[]),s.useResizeDetector({onResize:re});g.useEventListener("scroll",(()=>{requestAnimationFrame((()=>{O?ye():ge()}))}),"window"),n.useEffect((()=>{me()}),[f]);const ie=()=>(null==q?void 0:q.length)===(null==f?void 0:f.length),ne=e=>!!(null==q?void 0:q.includes(e)),le=e=>!!C&&e%2==1,se=e=>!!(null==B?void 0:B.includes(e)),ae=e=>{if(E["data-testid"])return`${E["data-testid"]}-${e}`},oe=()=>x.length+(k?1:0),de=e=>null==v?void 0:v[e],ce=e=>{const t=de(e);if(t)return"asc"===t?"ascending":"descending"},ue=e=>` by ${"asc"===de(e)?"descending":"ascending"} order`,he=(e,t)=>`${z}-row-${e}-${t}-key-column`,pe=e=>{const t=Y.map((t=>he(e,t.fieldKey)));return c.concatIds(...t)},ye=()=>{if(!_.current)return;const e=_.current.getBoundingClientRect();Q(e.bottom>window.innerHeight+30&&e.top<window.innerHeight-200)},ge=()=>{if(!(L.current&&M.current&&_.current&&K.current&&F.current))return;const e=M.current.getBoundingClientRect();if(e.top>window.innerHeight){const t=e.bottom-window.innerHeight,r=L.current.getBoundingClientRect().height-F.current.clientHeight-32,i=Math.min(t,r);K.current.style.transform=`translateY(-${i}px)`}else K.current.style.transform="translateY(0)"},me=()=>{L.current&&_.current&&Z(L.current.clientHeight+(N?56:0)<_.current.clientHeight)},be=e=>{const{fieldKey:r,label:i,clickable:n=!1,style:l}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!de(r),a=(e=>`${z}-header-${e}`)(r);return t.jsxs("th",{"data-testid":ae(`header-${r}`),className:j.default(m.headerCell,n&&m.headerCellClickable),scope:"col","aria-sort":ce(r),style:l,onClick:()=>(e=>{null==A||A(e)})(r),children:[t.jsxs("div",{className:m.headerCellContent,id:a,children:["string"==typeof i?t.jsx(p.Typography.BodyBL,{weight:"bold",children:i}):i,je(r)]}),(n||s)&&t.jsx(c.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==A||A(t)})(e,r),children:[s&&"Sort ",t.jsx("span",{"aria-labelledby":a}),s&&ue(r)]})})]},r)},je=e=>{const i=null==v?void 0:v[e];return i?"asc"===i?t.jsx(r.ArrowUpIcon,{"aria-hidden":!0,"data-testid":ae(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"aria-hidden":!0,"data-testid":ae(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},xe=()=>t.jsx("th",{"data-testid":ae("header-selection"),className:j.default(m.headerCell,m.headerCellCheckbox),scope:"col",children:t.jsxs("div",{className:m.selectionCheckboxWrapper,children:[t.jsx(c.VisuallyHidden,{children:"Row selection"}),$&&t.jsx(o.Checkbox,{checked:ie(),indeterminate:!!q&&0!==q.length&&!ie(),"aria-label":"Select all rows",onClick:()=>{V&&V(ie())}})]})}),fe=(e,r)=>{const i="string"==typeof e?void 0:e.style,n="string"==typeof e?e:e.fieldKey,l=r.id.toString(),s=r[n],a=`${l}-${n}`;let o;return o="string"==typeof s||"number"==typeof s?t.jsx(p.Typography.BodyBL,{className:m.bodyCellText,children:s}):"function"==typeof s?s(r,{isSelected:ne(l)}):s,t.jsx("td",{"data-testid":ae(`row-${a}`),id:he(l,n),className:m.bodyCell,style:i,children:o},a)},we=e=>{const r=e.id.toString();return t.jsx("td",{"data-testid":ae(`row-${r}-selection`),className:j.default(m.bodyCell,m.bodyCellCheckbox),children:t.jsx("div",{className:m.selectionCheckboxWrapper,children:t.jsx(o.Checkbox,{checked:ne(r),"aria-labelledby":pe(r),onClick:()=>{T&&T(r,!ne(r))},disabled:se(r),focusableWhenDisabled:se(r)})})})},ve=()=>{let e;return e=(null==R?void 0:R.title)?"string"==typeof R.title?t.jsx(p.Typography.HeadingSM,{className:m.emptyStateTitle,weight:"bold",children:R.title}):R.title:t.jsx(p.Typography.HeadingSM,{className:m.emptyStateTitle,weight:"bold",children:"No <items> found"}),t.jsx(d.ErrorDisplay,Object.assign({type:"no-item-found"},R,{title:e,description:(null==R?void 0:R.description)?R.description:"No matching rows"}))};return t.jsxs("div",{id:b||"table-wrapper","data-testid":E["data-testid"]||"table",className:j.default(m.tableWrapper,w),ref:_,onScroll:()=>{O&&_.current&&G(_.current.scrollTop+_.current.clientHeight>=_.current.scrollHeight)},tabIndex:0,children:[t.jsx("div",{className:m.tableContainer,children:t.jsxs("table",{ref:L,className:j.default(m.table),children:[t.jsx("thead",{ref:F,className:H?m.stickyHeader:void 0,children:t.jsxs("tr",{className:m.headerRow,children:[k&&xe(),x.map(be)]})}),t.jsx("tbody",{children:"success"===S?!f||f.length<1?t.jsx("tr",{children:t.jsx("td",{className:m.emptyStateCell,colSpan:oe(),children:W?W():ve()})}):t.jsx(t.Fragment,{children:null==f?void 0:f.map(((e,r)=>t.jsxs("tr",{"data-testid":ae(`row-${e.id.toString()}`),className:j.default(m.bodyRow,X&&m.bodyRowWithBottomBorder,le(r)&&m.bodyRowAlternating,k&&m.bodyRowSelectable,ne(e.id.toString())&&m.bodyRowSelected),children:[k&&we(e),x.map((t=>fe(t,e)))]},e.id.toString())))}):t.jsx("tr",{children:t.jsx("td",{colSpan:oe(),children:t.jsx("div",{className:m.loadingStateWrapper,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===S&&t.jsx(a.LoadingDotsSpinner,{})})})})})]})}),N&&q&&q.length>0&&(()=>{var e;const r=null!==(e=null==q?void 0:q.length)&&void 0!==e?e:0,i=O&&!U||!O&&!te||J;return t.jsx("div",{ref:K,className:j.default(m.actionBarWrapper,J&&m.actionBarWrapperFloating),children:t.jsxs("div",{className:j.default(m.actionBar,i&&m.actionBarFloating),children:[t.jsx(p.Typography.BodyMD,{weight:"semibold",children:`${r} item${r>1?"s":""} selected`}),t.jsx(u.BasicButton,{className:m.actionBarButton,type:"button","aria-label":`Clear selection of ${r} item${1===r?"":"s"}`,onClick:D,children:"Clear selection"}),I]})})})(),t.jsx("div",{ref:e=>{M.current=e,ee(e)}})]})};
 //# 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 { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\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 { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport {\n    ActionBar,\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    TableWrapper,\n    TextButton,\n} from \"./data-table.styles\";\nimport type { 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    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 tableEndRef = useRef<HTMLDivElement | null>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarRef = 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 [scrollable, setScrollable] = useState(false);\n    const [scrollEnd, setScrollEnd] = useState(false);\n    const [tableEnd, setTableEnd] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n    const [showLastBorder, setShowLastBorder] = useState(false);\n\n    const { ref: endRef, inView: end } = useInView();\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const onResize = useCallback(() => {\n        if (!wrapperRef.current || !actionBarRef.current) {\n            return;\n        }\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n        setScrollable(scrollable);\n\n        if (scrollable) {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        } else {\n            calculateStickyInViewport();\n        }\n    }, []);\n\n    useEffect(() => {\n        onResize();\n    }, []);\n\n    useResizeDetector({ onResize });\n\n    const scrollHandler = () => {\n        requestAnimationFrame(() => {\n            if (scrollable) {\n                calculateFixedInViewport();\n            } else {\n                calculateStickyInViewport();\n            }\n        });\n\n        if (wrapperRef.current) {\n            setTableEnd(\n                wrapperRef.current.getBoundingClientRect().bottom <=\n                    window.innerHeight\n            );\n        }\n    };\n\n    useEventListener(\"scroll\", scrollHandler, \"window\");\n\n    useEffect(() => {\n        checkLastBorder();\n    }, [rows]);\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\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 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 calculateFixedInViewport = () => {\n        if (!wrapperRef.current) {\n            return;\n        }\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        setIsFloatingActionBar(\n            wrapperBounds.bottom > window.innerHeight + 30 &&\n                wrapperBounds.top < window.innerHeight - 200\n        );\n    };\n\n    const calculateStickyInViewport = () => {\n        if (\n            !tableRef.current ||\n            !tableEndRef.current ||\n            !wrapperRef.current ||\n            !actionBarRef.current ||\n            !headerRef.current\n        ) {\n            return;\n        }\n\n        const endBounds = tableEndRef.current.getBoundingClientRect();\n\n        if (endBounds.top > window.innerHeight) {\n            const bottomOffset = endBounds.bottom - window.innerHeight;\n            const bottomToHeaderOffset =\n                tableRef.current.getBoundingClientRect().height -\n                headerRef.current.clientHeight -\n                32;\n            const maxBottomOffset = Math.min(\n                bottomOffset,\n                bottomToHeaderOffset\n            );\n\n            actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n        } else {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        }\n    };\n\n    const checkLastBorder = () => {\n        if (!tableRef.current || !wrapperRef.current) {\n            return;\n        }\n        // 56 pixels added due to the behavior of action bar\n        setShowLastBorder(\n            tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n                wrapperRef.current.clientHeight\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeaders = () => (\n        <thead ref={headerRef}>\n            <HeaderRow>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </HeaderRow>\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 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            >\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 onClick={() => onHeaderClick?.(fieldKey)}>\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                            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            <tr>\n                <EmptyViewCell colSpan={getTotalColumns()}>\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </EmptyViewCell>\n            </tr>\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                        $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            <tr>\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            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n\n        return (\n            <ActionBarWrapper\n                ref={actionBarRef}\n                $fixed={isFloatingActionBar}\n                $left={tableRef?.current?.getBoundingClientRect()?.left}\n                $width={tableRef?.current?.clientWidth}\n            >\n                <ActionBar\n                    $float={\n                        (scrollable ? !scrollEnd : !end) || isFloatingActionBar\n                    }\n                    $scrollable={scrollable}\n                >\n                    <Typography.BodyMD weight=\"semibold\">{`${count} item${\n                        count > 1 ? \"s\" : \"\"\n                    } selected`}</Typography.BodyMD>\n                    <TextButton\n                        type=\"button\"\n                        aria-label={`Clear selection of ${count} item${\n                            count === 1 ? \"\" : \"s\"\n                        }`}\n                        onClick={onClearSelectionClick}\n                    >\n                        Clear selection\n                    </TextButton>\n                    {actionBarContent}\n                </ActionBar>\n            </ActionBarWrapper>\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            onScroll={() => {\n                if (scrollable && wrapperRef.current) {\n                    setScrollEnd(\n                        wrapperRef.current.scrollTop +\n                            wrapperRef.current.clientHeight >=\n                            wrapperRef.current.scrollHeight\n                    );\n                }\n            }}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <TableContainer>\n                <Table\n                    $end={tableEnd}\n                    $scrollable={scrollable}\n                    ref={tableRef}\n                    $stickyHeader={enableStickyHeader}\n                >\n                    {renderHeaders()}\n                    <TableBody $showLastRowBottomBorder={showLastBorder}>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </TableBody>\n                </Table>\n            </TableContainer>\n            {enableActionBar &&\n                selectedIds &&\n                selectedIds.length > 0 &&\n                renderSelectionBar()}\n            <div\n                ref={(r) => {\n                    tableEndRef.current = r;\n                    endRef(r);\n                }}\n            />\n        </TableWrapper>\n    );\n};\n"],"names":["_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","tableEnd","setTableEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","onResize","useCallback","current","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","getBoundingClientRect","bottom","window","innerHeight","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","undefined","isSortable","headerCellWrapperId","getHeaderWrapperId","_jsxs","HeaderCell","$clickable","scope","$isCheckbox","HeaderCellWrapper","children","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","onClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","CheckBoxWrapper","Checkbox","checked","indeterminate","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","disabled","focusableWhenDisabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","onScroll","scrollTop","tabIndex","TableContainer","Table","$end","$stickyHeader","HeaderRow","TableBody","$showLastRowBottomBorder","EmptyViewCell","colSpan","BodyRow","$alternating","$isSelectable","$isSelected","LoaderWrapper","role","LoadingDotsSpinner","count","ActionBarWrapper","$fixed","$left","_c","_b","left","$width","_d","clientWidth","ActionBar","$float","$scrollable","BodyMD","TextButton","renderSelectionBar","r"],"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 { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\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 { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport * as styles from \"./data-table.styles\";\nimport type { 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    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 tableEndRef = useRef<HTMLDivElement | null>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarRef = 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 [scrollable, setScrollable] = useState(false);\n    const [scrollEnd, setScrollEnd] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n    const [showLastBorder, setShowLastBorder] = useState(false);\n\n    const { ref: endRef, inView: end } = useInView();\n\n    useApplyStyle(actionBarRef, {\n        [styles.tokens.actionBarWrapperLeft]:\n            isFloatingActionBar && tableRef.current\n                ? `${tableRef.current.getBoundingClientRect().left}px`\n                : undefined,\n        [styles.tokens.actionBarWrapperWidth]:\n            isFloatingActionBar && tableRef.current\n                ? `${tableRef.current.clientWidth}px`\n                : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const onResize = useCallback(() => {\n        if (!wrapperRef.current || !actionBarRef.current) {\n            return;\n        }\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n        setScrollable(scrollable);\n\n        if (scrollable) {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        } else {\n            calculateStickyInViewport();\n        }\n    }, []);\n\n    useEffect(() => {\n        onResize();\n    }, []);\n\n    useResizeDetector({ onResize });\n\n    const scrollHandler = () => {\n        requestAnimationFrame(() => {\n            if (scrollable) {\n                calculateFixedInViewport();\n            } else {\n                calculateStickyInViewport();\n            }\n        });\n    };\n\n    useEventListener(\"scroll\", scrollHandler, \"window\");\n\n    useEffect(() => {\n        checkLastBorder();\n    }, [rows]);\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\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 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 calculateFixedInViewport = () => {\n        if (!wrapperRef.current) {\n            return;\n        }\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        setIsFloatingActionBar(\n            wrapperBounds.bottom > window.innerHeight + 30 &&\n                wrapperBounds.top < window.innerHeight - 200\n        );\n    };\n\n    const calculateStickyInViewport = () => {\n        if (\n            !tableRef.current ||\n            !tableEndRef.current ||\n            !wrapperRef.current ||\n            !actionBarRef.current ||\n            !headerRef.current\n        ) {\n            return;\n        }\n\n        const endBounds = tableEndRef.current.getBoundingClientRect();\n\n        if (endBounds.top > window.innerHeight) {\n            const bottomOffset = endBounds.bottom - window.innerHeight;\n            const bottomToHeaderOffset =\n                tableRef.current.getBoundingClientRect().height -\n                headerRef.current.clientHeight -\n                32;\n            const maxBottomOffset = Math.min(\n                bottomOffset,\n                bottomToHeaderOffset\n            );\n\n            actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n        } else {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        }\n    };\n\n    const checkLastBorder = () => {\n        if (!tableRef.current || !wrapperRef.current) {\n            return;\n        }\n        // 56 pixels added due to the behavior of action bar\n        setShowLastBorder(\n            tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n                wrapperRef.current.clientHeight\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                            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>\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                            showLastBorder && 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>\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 hasNotReachedScrollableEnd = scrollable && !scrollEnd;\n        const hasNotReachedTableEnd = !scrollable && !end;\n        const shouldUseFloatingActionBar =\n            hasNotReachedScrollableEnd ||\n            hasNotReachedTableEnd ||\n            isFloatingActionBar;\n\n        return (\n            <div\n                ref={actionBarRef}\n                className={clsx(\n                    styles.actionBarWrapper,\n                    isFloatingActionBar && styles.actionBarWrapperFloating\n                )}\n            >\n                <div\n                    className={clsx(\n                        styles.actionBar,\n                        shouldUseFloatingActionBar && styles.actionBarFloating\n                    )}\n                >\n                    <Typography.BodyMD weight=\"semibold\">{`${count} item${\n                        count > 1 ? \"s\" : \"\"\n                    } selected`}</Typography.BodyMD>\n                    <BasicButton\n                        className={styles.actionBarButton}\n                        type=\"button\"\n                        aria-label={`Clear selection of ${count} item${\n                            count === 1 ? \"\" : \"s\"\n                        }`}\n                        onClick={onClearSelectionClick}\n                    >\n                        Clear selection\n                    </BasicButton>\n                    {actionBarContent}\n                </div>\n            </div>\n        );\n    };\n\n    return (\n        <div\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={clsx(styles.tableWrapper, className)}\n            ref={wrapperRef}\n            onScroll={() => {\n                if (scrollable && wrapperRef.current) {\n                    setScrollEnd(\n                        wrapperRef.current.scrollTop +\n                            wrapperRef.current.clientHeight >=\n                            wrapperRef.current.scrollHeight\n                    );\n                }\n            }}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <div className={styles.tableContainer}>\n                <table ref={tableRef} className={clsx(styles.table)}>\n                    {renderHeaders()}\n                    <tbody>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </tbody>\n                </table>\n            </div>\n            {enableActionBar &&\n                selectedIds &&\n                selectedIds.length > 0 &&\n                renderSelectionBar()}\n            <div\n                ref={(r) => {\n                    tableEndRef.current = r;\n                    endRef(r);\n                }}\n            />\n        </div>\n    );\n};\n"],"names":["_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","onResize","useCallback","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","bottom","window","innerHeight","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","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","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","disabled","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","onScroll","scrollTop","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRow","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","renderSelectionBar","r"],"mappings":"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"}

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

@@ -1,153 +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("../typography/index.js"),d=require("../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(e);const s=d.V3_Colour.border,a=d.V3_Colour.text,n=l.default.div`
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    border: ${d.V3_Border["width-010"]} ${d.V3_Border.solid} ${s};
-    border-radius: ${d.V3_Radius.md};
-
-    // Hide scrollbar
-    &::-webkit-scrollbar {
-        display: none;
-    }
-    * {
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-    }
-`,p=l.default.div`
-    flex: 1;
-`,c=l.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%;
-
-    ${r=>{if(r.$stickyHeader)return e.css`
-                thead {
-                    position: sticky;
-                    top: 0;
-                    z-index: 20;
-                }
-            `}};
-`,$=l.default.tbody`
-    tr:last-child {
-        td {
-            border-bottom: ${e=>e.$showLastRowBottomBorder?`${d.V3_Border["width-010"]} ${d.V3_Border.solid} ${s}`:"none"};
-        }
-    }
-`,u=l.default.div`
-    bottom: 0;
-    ${r=>{if(r.$fixed){const o=r.$left?`${r.$left}px`:"0",t=r.$width?`${r.$width}px`:"100%";return e.css`
-                position: fixed;
-                left: ${o};
-                width: ${t};
-            `}return e.css`
-                position: sticky;
-                left: 0;
-            `}};
-`,f=l.default(r.BasicButton)`
-    ${d.V3_Font["body-md-semibold"]}
-    cursor: pointer;
-    color: ${d.V3_Colour["text-primary"]};
-    transition: ${d.V3_Motion["duration-150"]} ${d.V3_Motion["ease-default"]};
-    padding: 0.75rem;
-    margin: -0.75rem 0;
-
-    &:hover {
-        color: ${d.V3_Colour["text-hover"]};
-    }
-`,m=l.default.div`
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    height: 3.5rem;
-    padding: ${d.V3_Spacing["spacing-16"]} ${d.V3_Spacing["spacing-24"]};
-    border-top: ${d.V3_Border["width-010"]} ${d.V3_Border.solid} ${s};
-    background-color: ${d.V3_Colour["bg-selected"]};
-    transition: all 300ms ease;
-    ${r=>r.$float?e.css`
-                transform: translateX(0.5rem) translateY(-2rem);
-                border-radius: ${d.V3_Radius.sm};
-                box-shadow: ${d.V3_Shadow["xs-subtle"]};
-                width: calc(100% - ${d.V3_Spacing["spacing-16"]});
-                border: ${d.V3_Border["width-010"]} ${d.V3_Border.solid}
-                    ${s};
-            `:e.css`
-                border-radius: ${d.V3_Radius.none} ${d.V3_Radius.none}
-                    ${d.V3_Radius.sm} ${d.V3_Radius.sm};
-            `}
-`,g=l.default.tr`
-    background-color: ${d.V3_Colour["bg-stronger"]};
-    height: 6rem;
-    border-bottom: ${d.V3_Border["width-010"]} ${d.V3_Border.solid}
-        ${s};
-`,b=l.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: ${d.V3_Border["width-010"]} ${d.V3_Border.solid}
-        ${s};
-    ${r=>{if(r.$isCheckbox)return e.css`
-                width: 4rem;
-            `}};
-    &:focus-within {
-        outline: 2px solid ${d.V3_Colour["focus-ring"]};
-        outline-offset: -3px;
-    }
-`,x=l.default.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    svg {
-        color: ${a};
-        margin-left: 0.5rem;
-    }
-`,h=l.default.tr`
-    background-color: ${r=>r.$isSelected?e.css`
-                ${d.V3_Colour["bg-selected"]};
-            `:r.$alternating?e.css`
-                ${d.V3_Colour["bg-strong"]};
-            `:e.css`
-                ${d.V3_Colour.bg};
-            `};
-    border-top: ${d.V3_Border["width-010"]} ${d.V3_Border.solid} ${s};
-    &:hover {
-        ${r=>{if(r.$isSelectable)return e.css`
-                    background-color: ${d.V3_Colour["bg-hover-strong"]};
-                `}};
-    }
-`,V=l.default.td`
-    padding: ${e=>e.$isCheckbox?"1.25rem 0.5rem 1.25rem 1.5rem":"1.25rem 1rem"};
-    vertical-align: middle;
-    color: ${a};
-    border-bottom: ${d.V3_Border["width-010"]} ${d.V3_Border.solid}
-        ${s};
-`,_=l.default(t.Typography.BodyBL)`
-    ${o.lineClampCss(2)}
-    text-overflow: ellipsis;
-`,w=l.default.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`,y=l.default.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 4rem 0;
-`,B=l.default(t.Typography.HeadingSM)`
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-`,C=l.default.td`
-    padding: 4rem 0;
-`;exports.ActionBar=m,exports.ActionBarWrapper=u,exports.BodyCell=V,exports.BodyCellContent=_,exports.BodyRow=h,exports.CheckBoxWrapper=w,exports.EmptyViewCell=C,exports.ErrorDisplayTitle=B,exports.HeaderCell=b,exports.HeaderCellWrapper=x,exports.HeaderRow=g,exports.LoaderWrapper=y,exports.Table=c,exports.TableBody=$,exports.TableContainer=p,exports.TableWrapper=n,exports.TextButton=f;
+"use strict";require("./data-table.styles_1nj2uzq.css");exports.actionBar="anoy5c0",exports.actionBarButton="axywpxo",exports.actionBarFloating="a1gvi5ye",exports.actionBarWrapper="aag0lf9",exports.actionBarWrapperFloating="a1euqarq",exports.bodyCell="bfa3d3x",exports.bodyCellCheckbox="bx1feaw",exports.bodyCellText="b1g3gl2s",exports.bodyRow="b6ks76c",exports.bodyRowAlternating="b1bceurq",exports.bodyRowSelectable="bjmthdi",exports.bodyRowSelected="b8t2s91",exports.bodyRowWithBottomBorder="b1tvp43a",exports.emptyStateCell="e1yxh9il",exports.emptyStateTitle="e1pcc0nq",exports.headerCell="h1744qno",exports.headerCellCheckbox="hp15x3z",exports.headerCellClickable="h1ec4wtd",exports.headerCellContent="h4ne4e9",exports.headerRow="h1nfqacf",exports.loadingStateWrapper="ldhafdm",exports.selectionCheckboxWrapper="s1w2nktt",exports.stickyHeader="s7u4vf5",exports.table="t4ucy2z",exports.tableContainer="t1j0mhj",exports.tableWrapper="t188sfx3",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\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface TableProps {\n    $end: boolean;\n    $scrollable: boolean;\n    $stickyHeader: boolean | undefined;\n}\ninterface TableBodyProps {\n    $showLastRowBottomBorder: boolean;\n}\ninterface HeaderCellProps {\n    $clickable: boolean;\n    $isCheckbox: boolean;\n}\ninterface BodyRowProps {\n    $alternating: boolean;\n    $isSelected?: boolean;\n    $isSelectable?: boolean;\n}\n\ninterface BodyCellProps {\n    $isCheckbox: boolean;\n}\n\ninterface ActionBarWrapperProps {\n    $fixed: boolean;\n    $left?: number | undefined;\n    $width?: number | undefined;\n}\n\ninterface ActionBarProps {\n    $float: boolean;\n    $scrollable: boolean;\n}\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = V3_Colour[\"border\"];\nconst fontColor = V3_Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div`\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n    border-radius: ${V3_Radius[\"md\"]};\n\n    // Hide scrollbar\n    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n    }\n`;\n\nexport const TableContainer = styled.div`\n    flex: 1;\n`;\n\nexport const Table = styled.table<TableProps>`\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    ${(props) => {\n        if (props.$stickyHeader) {\n            return css`\n                thead {\n                    position: sticky;\n                    top: 0;\n                    z-index: 20;\n                }\n            `;\n        }\n    }};\n`;\n\nexport const TableBody = styled.tbody<TableBodyProps>`\n    tr:last-child {\n        td {\n            border-bottom: ${(props) =>\n                props.$showLastRowBottomBorder\n                    ? `${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor}`\n                    : \"none\"};\n        }\n    }\n`;\n\nexport const ActionBarWrapper = styled.div<ActionBarWrapperProps>`\n    bottom: 0;\n    ${(props) => {\n        if (props.$fixed) {\n            const left = props.$left ? `${props.$left}px` : \"0\";\n            const width = props.$width ? `${props.$width}px` : \"100%\";\n            return css`\n                position: fixed;\n                left: ${left};\n                width: ${width};\n            `;\n        } else {\n            return css`\n                position: sticky;\n                left: 0;\n            `;\n        }\n    }};\n`;\n\nexport const TextButton = styled(BasicButton)`\n    ${V3_Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${V3_Colour[\"text-primary\"]};\n    transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${V3_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: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-24\"]};\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n    background-color: ${V3_Colour[\"bg-selected\"]};\n    transition: all 300ms ease;\n    ${(props) => {\n        if (props.$float) {\n            return css`\n                transform: translateX(0.5rem) translateY(-2rem);\n                border-radius: ${V3_Radius[\"sm\"]};\n                box-shadow: ${V3_Shadow[\"xs-subtle\"]};\n                width: calc(100% - ${V3_Spacing[\"spacing-16\"]});\n                border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                    ${borderColor};\n            `;\n        } else {\n            return css`\n                border-radius: ${V3_Radius[\"none\"]} ${V3_Radius[\"none\"]}\n                    ${V3_Radius[\"sm\"]} ${V3_Radius[\"sm\"]};\n            `;\n        }\n    }}\n`;\n\nexport const HeaderRow = styled.tr`\n    background-color: ${V3_Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${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: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${borderColor};\n    ${(props) => {\n        if (props.$isCheckbox) {\n            return css`\n                width: 4rem;\n            `;\n        }\n    }};\n    &:focus-within {\n        outline: 2px solid ${V3_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                ${V3_Colour[\"bg-selected\"]};\n            `;\n        } else if (props.$alternating) {\n            return css`\n                ${V3_Colour[\"bg-strong\"]};\n            `;\n        } else {\n            return css`\n                ${V3_Colour[\"bg\"]};\n            `;\n        }\n    }};\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n    &:hover {\n        ${(props) => {\n            if (props.$isSelectable) {\n                return css`\n                    background-color: ${V3_Colour[\"bg-hover-strong\"]};\n                `;\n            }\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: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${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","V3_Colour","fontColor","TableWrapper","styled","div","V3_Border","V3_Radius","TableContainer","Table","table","props","$stickyHeader","css","TableBody","tbody","$showLastRowBottomBorder","ActionBarWrapper","$fixed","left","$left","width","$width","TextButton","BasicButton","V3_Font","V3_Motion","ActionBar","V3_Spacing","$float","V3_Shadow","HeaderRow","tr","HeaderCell","th","$isCheckbox","$clickable","HeaderCellWrapper","BodyRow","$isSelected","$alternating","$isSelectable","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    overflow: auto;\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    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n    }\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 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: all 300ms ease;\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    bottom: 0;\n    position: sticky;\n    left: 0;\n`;\n\nexport const actionBarWrapperFloating = css`\n    ${tokens.actionBarWrapperLeft}: initial;\n    ${tokens.actionBarWrapperWidth}: initial;\n\n    position: fixed;\n    left: var(${tokens.actionBarWrapperLeft}, 0px);\n    width: var(${tokens.actionBarWrapperWidth}, 100%);\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":"oGAyMsB,kCAbM,oCA0BE,oCAQD,2CAMQ,4BAvHhB,mCAiDQ,+BAIJ,2BAtCL,qCAWW,qCAQD,kCAJF,0CAUQ,kCAkBT,mCAgFC,8BAvLL,sCA0BQ,sCAJC,qCASF,4BArCR,uCAsLU,2CA7DK,gCA/HZ,wBAVP,iCAJS,+BAjBF,0BARH,CAClBA,qBAAsB,iDACtBC,sBAAuB"}

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

@@ -0,0 +1,26 @@
+.t188sfx3{overflow:auto;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);}.t188sfx3::-webkit-scrollbar{display:none;}.t188sfx3 *{-ms-overflow-style:none;scrollbar-width:none;}
+.t1j0mhj{-webkit-flex:1;-ms-flex:1;flex:1;}
+.t4ucy2z{text-align:left;border-collapse:separate;border-spacing:0;width:100%;}
+.s7u4vf5{position:-webkit-sticky;position:sticky;top:0;z-index:20;}
+.h1nfqacf{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);}
+.h1744qno{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);}.h1744qno:first-child{padding-left:1.5rem;}.h1744qno:last-child{padding-right:1.5rem;}.h1744qno:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-3px;}
+.h1ec4wtd{cursor:pointer;}
+.hp15x3z{width:4rem;padding:1.25rem 0.5rem 1.25rem 1.5rem;}
+.h4ne4e9{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;}.h4ne4e9 svg{color:var(--fds-colour-text);margin-left:0.5rem;}
+.bfa3d3x{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);}.bfa3d3x:first-child{padding-left:1.5rem;}.bfa3d3x:last-child{padding-right:1.5rem;}
+.b6ks76c{background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.b6ks76c:last-child .bfa3d3x{border-bottom:none;}
+.b1bceurq{background-color:var(--fds-colour-bg-strong);}
+.b8t2s91{background-color:var(--fds-colour-bg-selected);}
+.bjmthdi:hover{background-color:var(--fds-colour-bg-hover-strong);}
+.b1tvp43a:last-child .bfa3d3x{border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.bx1feaw{padding:1.25rem 0.5rem 1.25rem 1.5rem;}
+.b1g3gl2s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
+.e1yxh9il{padding:4rem 0;}.e1yxh9il:first-child{padding-left:1.5rem;}.e1yxh9il:last-child{padding-right:1.5rem;}
+.s1w2nktt{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;}
+.axywpxo{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-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;}.axywpxo:hover{color:var(--fds-colour-text-hover);}
+.anoy5c0{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:all 300ms ease;transition:all 300ms ease;border-radius:var(--fds-radius-none) var(--fds-radius-none) var(--fds-radius-sm) var(--fds-radius-sm);}
+.a1gvi5ye{-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);}
+.aag0lf9{bottom:0;position:-webkit-sticky;position:sticky;left:0;}
+.a1euqarq{--fds-internal-dataTable-actionBarWrapper-left:initial;--fds-internal-dataTable-actionBarWrapper-width:initial;position:fixed;left:var(--fds-internal-dataTable-actionBarWrapper-left, 0px);width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}
+.ldhafdm{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;}
+.e1pcc0nq{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");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:x,allowDisabledSelection:y,zIndex:q,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),[_,E]=t.useState(!1),K=t.useRef(null),N=t.useRef(null),V=t.useRef(null);t.useEffect((()=>{const e=s.DateInputHelper.sanitizeInput(f);R(e),O(e)}),[f]);const W=e=>{!y&&s.DateInputHelper.isDateDisabled(e,{disabledDates:v,minDate:u,maxDate:c})||(O(e),w||(J(e),R(e),e&&F(!1)))},k=e=>{var a;O(e),w||(J(e),R(e),e&&(null===(a=N.current)||void 0===a||a.focusYearRef(),F(!1)),H(void 0))},T=()=>{g||p||(F(!0),_||(E(!0),m&&m()))},Z=e=>{var a,r,t;const n=e.relatedTarget,i=V.current&&V.current.contains(n),l=K.current&&K.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=N.current)||void 0===t||t.resetInput(),O(Y),E(!1),F(!1),L())},A=e=>{H(e)},G=e=>{var a,t;switch(e){case"reset":O(Y);break;case"confirmed":R(B),J(B)}r.default(B,"YYYY-MM-DD",!0).isValid()?null===(a=N.current)||void 0===a||a.focusYearRef():null===(t=K.current)||void 0===t||t.focus(),F(!1)},J=e=>{b&&b(e)},L=()=>{j&&j()};return a.jsx(n.ElementWithDropdown,{enabled:!g&&!p,isOpen:M,renderElement:()=>a.jsx(d.Container,Object.assign({role:"group",tabIndex:0,ref:K,onBlur:Z,onFocus:T,disabled:p,readOnly:g,focused:_,error:D,id:x,"data-testid":S["data-testid"],"aria-disabled":p},S,{children:a.jsx(l.StandaloneDateInput,{ref:N,disabled:p,onChange:W,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:V,initialCalendarDate:B,withButton:w,value:B,disabledDates:v,minDate:u,maxDate:c,allowDisabledSelection:y,onHover:A,onSelect:k,onDismiss:G,onYearMonthDisplayChange:I,width:e,isFocusable:!g&&!p}),onClose:()=>{var e;null===(e=N.current)||void 0===e||e.resetInput(),O(Y),F(!1),E(!1),L(),H(void 0)},onDismiss:()=>{var e,a;null===(e=N.current)||void 0===e||e.resetInput(),null===(a=K.current)||void 0===a||a.focus(),O(Y),F(!1)},customZIndex:q,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