@lifesg/react-design-system 4.0.0-alpha.4 → 4.0.0-alpha.6

package/data-table/data-table.js

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

package/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 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        if (!rows || !rows.length || !selectedIds) {\n            return false;\n        }\n        return selectedIds.length === rows.length;\n    };\n\n    const isIndeterminateCheckbox = (): boolean => {\n        return (\n            !!selectedIds &&\n            selectedIds.length !== 0 &&\n            !isAllCheckboxSelected()\n        );\n    };\n\n    const isHeaderCheckboxDisabled = (): boolean => {\n        return !rows || !rows.length || !selectedIds;\n    };\n\n    const isRowSelected = (rowId: string): boolean => {\n        return !!selectedIds?.includes(rowId);\n    };\n\n    const isAlternatingRow = (index: number): boolean => {\n        return !!alternatingRows && index % 2 === 1;\n    };\n\n    const isDisabledRow = (rowId: string): boolean => {\n        return !!disabledIds?.includes(rowId);\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!otherProps[\"data-testid\"]) return undefined;\n        return `${otherProps[\"data-testid\"]}-${subStr}`;\n    };\n\n    const getTotalColumns = (): number => {\n        return headers.length + (enableMultiSelect ? 1 : 0);\n    };\n\n    const getSortDirection = (fieldKey: string) => {\n        return sortIndicators?.[fieldKey];\n    };\n\n    const getHeaderAriaSort = (fieldKey: string) => {\n        const sortDirection = getSortDirection(fieldKey);\n\n        if (!sortDirection) {\n            return undefined;\n        }\n\n        return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n    };\n\n    const getSortButtonAriaLabel = (fieldKey: string) => {\n        const nextSortDirection =\n            getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n        return ` by ${nextSortDirection} order`;\n    };\n\n    const 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                            disabled={isHeaderCheckboxDisabled()}\n                            aria-label=\"Select all rows\"\n                            onClick={() => {\n                                if (onSelectAll) {\n                                    onSelectAll(isAllCheckboxSelected());\n                                }\n                            }}\n                        />\n                    )}\n                </div>\n            </th>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <tr className={styles.bodyRow}>\n                <td\n                    className={styles.emptyStateCell}\n                    colSpan={getTotalColumns()}\n                >\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </td>\n            </tr>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <tr\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        className={clsx(\n                            styles.bodyRow,\n                            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 className={styles.bodyRow}>\n                <td colSpan={getTotalColumns()}>\n                    <div\n                        className={styles.loadingStateWrapper}\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </div>\n                </td>\n            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n        const 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":["DataTable","_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","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","onScroll","scrollTop","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","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 { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\n/**\n * Renders a sortable, selectable data table with scroll-aware action bar and loading state support.\n *\n * Use `DataTable` when presenting structured multi-column data that users may need to sort by\n * column or select rows for bulk actions. Row selection, sort indicators, and the action bar\n * content are all externally controlled; the component manages scroll detection, sticky-header\n * positioning, and floating action bar behaviour internally.\n */\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 headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const keyColumns = headers.filter(\n        (header): header is Exclude<HeaderProps, string> => {\n            return typeof header !== \"string\" && !!header.keyColumn;\n        }\n    );\n\n    const [actionBarStrategy, setActionBarStrategy] = useState<\n        \"sticky\" | \"fixed\" | \"inline\"\n    >(\"inline\");\n    const [scrollable, setScrollable] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n    useApplyStyle(actionBarWrapperRef, {\n        [styles.tokens.actionBarWrapperLeft]:\n            isFloatingActionBar && tableRef.current\n                ? `${tableRef.current.getBoundingClientRect().left}px`\n                : undefined,\n        [styles.tokens.actionBarWrapperWidth]: tableRef.current\n            ? `${tableRef.current.clientWidth}px`\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const useUpdateActionBarBehaviour = useEvent(() => {\n        updateActionBarBehaviour();\n    });\n\n    useEffect(() => {\n        useUpdateActionBarBehaviour();\n    }, [useUpdateActionBarBehaviour]);\n\n    const updateActionBarBehaviourThrottled = useThrottle(\n        () => updateActionBarBehaviour(),\n        100\n    );\n\n    useResizeDetector({\n        targetRef: wrapperRef,\n        onResize: () => updateActionBarBehaviourThrottled(),\n    });\n\n    useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n    useEventListener(\n        \"scroll\",\n        updateActionBarBehaviourThrottled,\n        wrapperRef.current\n    );\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\n        if (!rows || !rows.length || !selectedIds) {\n            return false;\n        }\n        return selectedIds.length === rows.length;\n    };\n\n    const isIndeterminateCheckbox = (): boolean => {\n        return (\n            !!selectedIds &&\n            selectedIds.length !== 0 &&\n            !isAllCheckboxSelected()\n        );\n    };\n\n    const isHeaderCheckboxDisabled = (): boolean => {\n        return !rows || !rows.length || !selectedIds;\n    };\n\n    const isRowSelected = (rowId: string): boolean => {\n        return !!selectedIds?.includes(rowId);\n    };\n\n    const isAlternatingRow = (index: number): boolean => {\n        return !!alternatingRows && index % 2 === 1;\n    };\n\n    const isDisabledRow = (rowId: string): boolean => {\n        return !!disabledIds?.includes(rowId);\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!otherProps[\"data-testid\"]) return undefined;\n        return `${otherProps[\"data-testid\"]}-${subStr}`;\n    };\n\n    const getTotalColumns = (): number => {\n        return headers.length + (enableMultiSelect ? 1 : 0);\n    };\n\n    const getSortDirection = (fieldKey: string) => {\n        return sortIndicators?.[fieldKey];\n    };\n\n    const getHeaderAriaSort = (fieldKey: string) => {\n        const sortDirection = getSortDirection(fieldKey);\n\n        if (!sortDirection) {\n            return undefined;\n        }\n\n        return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n    };\n\n    const getSortButtonAriaLabel = (fieldKey: string) => {\n        const nextSortDirection =\n            getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n        return ` by ${nextSortDirection} order`;\n    };\n\n    const getHeaderCellId = (fieldKey: string) => {\n        return `${internalId}-header-${fieldKey}`;\n    };\n    const getCellId = (rowId: string, fieldKey: string) => {\n        return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n    };\n\n    const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n        const keyColumnIds = keyColumns.map((header) =>\n            getCellId(rowId, header.fieldKey)\n        );\n\n        return concatIds(...keyColumnIds);\n    };\n\n    const updateActionBarBehaviour = () => {\n        if (\n            !wrapperRef.current ||\n            !headerRef.current ||\n            !actionBarWrapperRef.current\n        ) {\n            return;\n        }\n\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        const headerBounds = headerRef.current.getBoundingClientRect();\n\n        let strategy: typeof actionBarStrategy = \"inline\";\n\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n        if (\n            wrapperBounds.top > window.innerHeight ||\n            wrapperBounds.bottom < 0\n        ) {\n            // if fully out of the viewport, disable floating\n            strategy = \"inline\";\n        } else if (scrollable) {\n            if (\n                wrapperBounds.top > 0 &&\n                wrapperBounds.top < window.innerHeight &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if fully in the viewport, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.top < 0 &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if partially offscreen at the top, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.bottom > window.innerHeight &&\n                Math.max(wrapperBounds.top, headerBounds.bottom) +\n                    headerBounds.height <\n                    window.innerHeight\n            ) {\n                // if offscreen at the bottom, pin to the viewport, up until the table/header\n                strategy = \"fixed\";\n            }\n        } else if (\n            wrapperBounds.bottom > window.innerHeight &&\n            headerBounds.bottom + headerBounds.height < window.innerHeight\n        ) {\n            // if offscreen at the bottom, pin to the viewport, up until the header\n            strategy = \"fixed\";\n        }\n\n        setScrollable(scrollable);\n        setActionBarStrategy(strategy);\n\n        if (strategy === \"fixed\") {\n            setIsFloatingActionBar(true);\n        } else if (strategy === \"sticky\") {\n            const beforeScrollEnd =\n                wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n                wrapperRef.current.scrollHeight;\n            setIsFloatingActionBar(beforeScrollEnd);\n        } else {\n            setIsFloatingActionBar(false);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleHeaderClick = (fieldKey: string) => {\n        onHeaderClick?.(fieldKey);\n    };\n\n    const handleHeaderButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>,\n        fieldKey: string\n    ) => {\n        event.stopPropagation();\n        onHeaderClick?.(fieldKey);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeaders = () => (\n        <thead\n            ref={headerRef}\n            className={enableStickyHeader ? styles.stickyHeader : undefined}\n        >\n            <tr className={styles.headerRow}>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </tr>\n        </thead>\n    );\n\n    const renderHeaderCell = (header: HeaderProps) => {\n        const {\n            fieldKey,\n            label,\n            clickable = false,\n            style,\n        } = typeof header === \"string\"\n            ? {\n                  fieldKey: header,\n                  label: header,\n                  style: undefined,\n              }\n            : header;\n\n        const isSortable = !!getSortDirection(fieldKey);\n        const headerCellId = getHeaderCellId(fieldKey);\n        return (\n            <th\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                className={clsx(\n                    styles.headerCell,\n                    clickable && styles.headerCellClickable\n                )}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <div className={styles.headerCellContent} id={headerCellId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </div>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </th>\n        );\n    };\n\n    const renderSortedArrow = (fieldKey: string) => {\n        const isSorted = sortIndicators?.[fieldKey];\n\n        if (!isSorted) {\n            return <></>;\n        }\n        if (isSorted === \"asc\") {\n            return (\n                <ArrowUpIcon\n                    aria-hidden\n                    data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n                />\n            );\n        }\n        return (\n            <ArrowDownIcon\n                aria-hidden\n                data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n            />\n        );\n    };\n\n    const renderHeaderCheckBox = () => {\n        return (\n            <th\n                data-testid={getDataTestId(\"header-selection\")}\n                className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n                scope=\"col\"\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <VisuallyHidden>Row selection</VisuallyHidden>\n                    {enableSelectAll && (\n                        <Checkbox\n                            checked={isAllCheckboxSelected()}\n                            indeterminate={isIndeterminateCheckbox()}\n                            disabled={isHeaderCheckboxDisabled()}\n                            aria-label=\"Select all rows\"\n                            onClick={() => {\n                                if (onSelectAll) {\n                                    onSelectAll(isAllCheckboxSelected());\n                                }\n                            }}\n                        />\n                    )}\n                </div>\n            </th>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <tr className={styles.bodyRow}>\n                <td\n                    className={styles.emptyStateCell}\n                    colSpan={getTotalColumns()}\n                >\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </td>\n            </tr>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <tr\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        className={clsx(\n                            styles.bodyRow,\n                            isFloatingActionBar &&\n                                styles.bodyRowWithBottomBorder,\n                            isAlternatingRow(index) &&\n                                styles.bodyRowAlternating,\n                            enableMultiSelect && styles.bodyRowSelectable,\n                            isRowSelected(row.id.toString()) &&\n                                styles.bodyRowSelected\n                        )}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </tr>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header === \"string\" ? undefined : header.style;\n        const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n        const rowId = row.id.toString();\n        const cellData = row[fieldKey];\n        const cellId = `${rowId}-${fieldKey}`;\n\n        let cellContent: React.ReactNode;\n        if (typeof cellData === \"string\" || typeof cellData === \"number\") {\n            cellContent = (\n                <Typography.BodyBL className={styles.bodyCellText}>\n                    {cellData}\n                </Typography.BodyBL>\n            );\n        } else if (typeof cellData === \"function\") {\n            cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n        } else {\n            cellContent = cellData;\n        }\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                className={styles.bodyCell}\n                style={style}\n            >\n                {cellContent}\n            </td>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <Checkbox\n                        checked={isRowSelected(rowId)}\n                        aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n                        onClick={() => {\n                            if (onSelect) {\n                                onSelect(rowId, !isRowSelected(rowId));\n                            }\n                        }}\n                        disabled={isDisabledRow(rowId)}\n                        focusableWhenDisabled={isDisabledRow(rowId)}\n                    />\n                </div>\n            </td>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        let emptyTitle: JSX.Element;\n        if (!emptyView?.title) {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {\"No <items> found\"}\n                </Typography.HeadingSM>\n            );\n        } else if (typeof emptyView.title === \"string\") {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {emptyView.title}\n                </Typography.HeadingSM>\n            );\n        } else {\n            emptyTitle = emptyView.title;\n        }\n\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={emptyTitle}\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <tr className={styles.bodyRow}>\n                <td colSpan={getTotalColumns()}>\n                    <div\n                        className={styles.loadingStateWrapper}\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </div>\n                </td>\n            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n        const counter = `item${count > 1 ? \"s\" : \"\"}`;\n\n        return (\n            <>\n                <div\n                    ref={actionBarWrapperRef}\n                    className={styles.actionBarWrapper}\n                    data-strategy={actionBarStrategy}\n                >\n                    <div\n                        data-testid=\"data-table-action-bar\"\n                        className={clsx(\n                            styles.actionBar,\n                            isFloatingActionBar && styles.actionBarFloating\n                        )}\n                    >\n                        <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n                        <BasicButton\n                            className={styles.actionBarButton}\n                            type=\"button\"\n                            aria-label={`Clear selection of ${count} ${counter}`}\n                            onClick={onClearSelectionClick}\n                        >\n                            Clear selection\n                        </BasicButton>\n                        {actionBarContent}\n                    </div>\n                </div>\n                {/* leave a fixed space when action bar floats to avoid layout shift */}\n                {actionBarStrategy !== \"sticky\" && (\n                    <div className={styles.actionBarSpacer} />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={clsx(\n                styles.tableWrapper,\n                scrollable && styles.tableWrapperScrollable,\n                className\n            )}\n            ref={wrapperRef}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <div className={styles.tableContainer}>\n                <table ref={tableRef} className={styles.table}>\n                    {renderHeaders()}\n                    <tbody>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </tbody>\n                </table>\n            </div>\n            {enableActionBar &&\n                selectedIds &&\n                selectedIds.length > 0 &&\n                renderSelectionBar()}\n        </div>\n    );\n};\n"],"names":["DataTable","_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","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","styles.tableWrapperScrollable","ref","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","counter","styles.actionBarWrapper","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","styles.actionBarSpacer","renderSelectionBar"],"mappings":"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"}

package/data-table/data-table.styles.d.ts

@@ -3,6 +3,7 @@ export declare const tokens: {
     readonly actionBarWrapperWidth: "--fds-internal-dataTable-actionBarWrapper-width";
 };
 export declare const tableWrapper: import("@linaria/core").LinariaClassName;
+export declare const tableWrapperScrollable: import("@linaria/core").LinariaClassName;
 export declare const tableContainer: import("@linaria/core").LinariaClassName;
 export declare const table: import("@linaria/core").LinariaClassName;
 export declare const stickyHeader: import("@linaria/core").LinariaClassName;
@@ -22,9 +23,9 @@ export declare const bodyCellText: import("@linaria/core").LinariaClassName;
 export declare const emptyStateCell: import("@linaria/core").LinariaClassName;
 export declare const selectionCheckboxWrapper: import("@linaria/core").LinariaClassName;
 export declare const actionBarButton: import("@linaria/core").LinariaClassName;
+export declare const actionBarSpacer: import("@linaria/core").LinariaClassName;
 export declare const actionBar: import("@linaria/core").LinariaClassName;
 export declare const actionBarFloating: import("@linaria/core").LinariaClassName;
 export declare const actionBarWrapper: import("@linaria/core").LinariaClassName;
-export declare const actionBarWrapperFloating: import("@linaria/core").LinariaClassName;
 export declare const loadingStateWrapper: import("@linaria/core").LinariaClassName;
 export declare const emptyStateTitle: import("@linaria/core").LinariaClassName;

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

@@ -1,2 +1,2 @@
-import"./data-table.styles_1iqq1g7.css";const a={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"},t="t188sfx3",e="t1j0mhj",r="t4ucy2z",n="s7u4vf5",c="h1nfqacf",p="h1744qno",b="h1ec4wtd",d="hp15x3z",i="h4ne4e9",s="bfa3d3x",f="b6ks76c",l="b1bceurq",h="b8t2s91",o="bjmthdi",q="b1tvp43a",x="bx1feaw",y="b1g3gl2s",g="e1yxh9il",w="s1w2nktt",W="axywpxo",m="anoy5c0",u="a1gvi5ye",B="aag0lf9",_="a1euqarq",j="ldhafdm",v="e1pcc0nq";export{m as actionBar,W as actionBarButton,u as actionBarFloating,B as actionBarWrapper,_ as actionBarWrapperFloating,s as bodyCell,x as bodyCellCheckbox,y as bodyCellText,f as bodyRow,l as bodyRowAlternating,o as bodyRowSelectable,h as bodyRowSelected,q as bodyRowWithBottomBorder,g as emptyStateCell,v as emptyStateTitle,p as headerCell,d as headerCellCheckbox,b as headerCellClickable,i as headerCellContent,c as headerRow,j as loadingStateWrapper,w as selectionCheckboxWrapper,n as stickyHeader,r as table,e as tableContainer,t as tableWrapper,a as tokens};
+import"./data-table.styles_rxganh.css";const a={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"},t="t188sfx3",e="t1j0mhj",r="t4ucy2z",n="t7u4vf5",c="s1nfqacf",p="h1744qno",b="h1ec4wtd",d="hp15x3z",f="h4ne4e9",s="hfa3d3x",h="b6ks76c",i="b1bceurq",l="b8t2s91",o="bjmthdi",x="b1tvp43a",q="bx1feaw",y="b1g3gl2s",g="b1yxh9il",w="e1w2nktt",W="sxywpxo",m="anoy5c0",u="a1gvi5ye",B="aag0lf9",_="a1euqarq",j="adhafdm",k="l1pcc0nq",v="e1qkofer";export{B as actionBar,m as actionBarButton,_ as actionBarFloating,u as actionBarSpacer,j as actionBarWrapper,h as bodyCell,y as bodyCellCheckbox,g as bodyCellText,i as bodyRow,l as bodyRowAlternating,x as bodyRowSelectable,o as bodyRowSelected,q as bodyRowWithBottomBorder,w as emptyStateCell,v as emptyStateTitle,b as headerCell,f as headerCellCheckbox,d as headerCellClickable,s as headerCellContent,p as headerRow,k as loadingStateWrapper,W as selectionCheckboxWrapper,c as stickyHeader,n as table,r as tableContainer,t as tableWrapper,e as tableWrapperScrollable,a as tokens};
 //# sourceMappingURL=data-table.styles.js.map

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

@@ -1 +1 @@
-{"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":["tokens","actionBarWrapperLeft","actionBarWrapperWidth","tableWrapper","tableContainer","table","stickyHeader","headerRow","headerCell","headerCellClickable","headerCellCheckbox","headerCellContent","bodyCell","bodyRow","bodyRowAlternating","bodyRowSelected","bodyRowSelectable","bodyRowWithBottomBorder","bodyCellCheckbox","bodyCellText","emptyStateCell","selectionCheckboxWrapper","actionBarButton","actionBar","actionBarFloating","actionBarWrapper","actionBarWrapperFloating","loadingStateWrapper","emptyStateTitle"],"mappings":"kEAaO,MAAMA,EAAS,CAClBC,qBAAsB,iDACtBC,sBAAuB,mDAMdC,EAAY,WAiBZC,EAAc,UAIdC,EAAK,UAULC,EAAY,UAMZC,EAAS,WAMTC,EAAU,WAsBVC,EAAmB,WAInBC,EAAkB,UAKlBC,EAAiB,UAcjBC,EAAQ,UAeRC,EAAO,UAWPC,EAAkB,WAIlBC,EAAe,UAIfC,EAAiB,UAMjBC,EAAuB,WASvBC,EAAgB,UAIhBC,EAAY,WAKZC,EAAc,WAYdC,EAAwB,WASxBC,EAAe,UAafC,EAAS,UAaTC,EAAiB,WAQjBC,EAAgB,UAMhBC,EAAwB,WAYxBC,EAAmB,UAOnBC,EAAe"}
+{"version":3,"file":"data-table.styles.js","sources":["../../src/data-table/data-table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Colour,\n    Font,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\nexport const tokens = {\n    actionBarWrapperLeft: \"--fds-internal-dataTable-actionBarWrapper-left\",\n    actionBarWrapperWidth: \"--fds-internal-dataTable-actionBarWrapper-width\",\n} as const;\n\n// =============================================================================\n// Layout\n// =============================================================================\nexport const tableWrapper = css`\n    /* we separate the overflow styles so that sticky elements can still work\n       with horizontal scrolling on supported browsers\n       see: https://github.com/w3c/csswg-drafts/issues/12289 */\n    overflow-y: clip;\n    overflow-x: auto;\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const tableWrapperScrollable = css`\n    overflow-y: auto;\n`;\n\nexport const tableContainer = css`\n    flex: 1;\n`;\n\nexport const table = css`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\n// =============================================================================\n// Header\n// =============================================================================\nexport const stickyHeader = css`\n    position: sticky;\n    top: 0;\n    z-index: 20;\n`;\n\nexport const headerRow = css`\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const headerCell = css`\n    padding: 1.25rem 1rem;\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${Colour[\"text\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -3px;\n    }\n`;\n\nexport const headerCellClickable = css`\n    cursor: pointer;\n`;\n\nexport const headerCellCheckbox = css`\n    width: 4rem;\n    padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const headerCellContent = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    svg {\n        color: ${Colour[\"text\"]};\n        margin-left: 0.5rem;\n    }\n`;\n\n// =============================================================================\n// Body\n// =============================================================================\nexport const bodyCell = css`\n    padding: 1.25rem 1rem;\n    vertical-align: middle;\n    color: ${Colour[\"text\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n`;\n\nexport const bodyRow = css`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:last-child {\n        .${bodyCell} {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const bodyRowAlternating = css`\n    background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const bodyRowSelected = css`\n    background-color: ${Colour[\"bg-selected\"]};\n`;\n\nexport const bodyRowSelectable = css`\n    &:hover {\n        background-color: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const bodyRowWithBottomBorder = css`\n    &:last-child {\n        .${bodyCell} {\n            border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n                ${Colour[\"border\"]};\n        }\n    }\n`;\n\nexport const bodyCellCheckbox = css`\n    padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const bodyCellText = css`\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n`;\n\nexport const emptyStateCell = css`\n    padding: 4rem 0;\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n`;\n\nexport const selectionCheckboxWrapper = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\n// =============================================================================\n// Action bar\n// =============================================================================\nexport const actionBarButton = css`\n    ${Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${Colour[\"text-primary\"]};\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const actionBarSpacer = css`\n    height: 3.5rem;\n`;\n\nexport const actionBar = css`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background-color: ${Colour[\"bg-selected\"]};\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]} ${Radius[\"sm\"]}\n        ${Radius[\"sm\"]};\n`;\n\nexport const actionBarFloating = css`\n    transform: translateX(0.5rem) translateY(-2rem);\n    border-radius: ${Radius[\"sm\"]};\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    width: calc(100% - ${Spacing[\"spacing-16\"]});\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const actionBarWrapper = css`\n    ${tokens.actionBarWrapperLeft}: initial;\n    ${tokens.actionBarWrapperWidth}: initial;\n\n    &[data-strategy=\"inline\"] {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: var(${tokens.actionBarWrapperWidth}, 100%);\n    }\n\n    &[data-strategy=\"fixed\"] {\n        position: fixed;\n        bottom: 0;\n        left: var(${tokens.actionBarWrapperLeft}, 0px);\n        width: var(${tokens.actionBarWrapperWidth}, 100%);\n    }\n\n    &[data-strategy=\"sticky\"] {\n        position: sticky;\n        bottom: 0;\n    }\n`;\n\n// =============================================================================\n// Load and error states\n// =============================================================================\nexport const loadingStateWrapper = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const emptyStateTitle = css`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n"],"names":["tokens","actionBarWrapperLeft","actionBarWrapperWidth","tableWrapper","tableWrapperScrollable","tableContainer","table","stickyHeader","headerRow","headerCell","headerCellClickable","headerCellCheckbox","headerCellContent","bodyCell","bodyRow","bodyRowAlternating","bodyRowSelected","bodyRowSelectable","bodyRowWithBottomBorder","bodyCellCheckbox","bodyCellText","emptyStateCell","selectionCheckboxWrapper","actionBarButton","actionBarSpacer","actionBar","actionBarFloating","actionBarWrapper","loadingStateWrapper","emptyStateTitle"],"mappings":"iEAaO,MAAMA,EAAS,CAClBC,qBAAsB,iDACtBC,sBAAuB,mDAMdC,EAAY,WAqBZC,EAAsB,UAItBC,EAAc,UAIdC,EAAK,UAULC,EAAY,WAMZC,EAAS,WAMTC,EAAU,WAsBVC,EAAmB,UAInBC,EAAkB,UAKlBC,EAAiB,UAcjBC,EAAQ,UAeRC,EAAO,WAWPC,EAAkB,UAIlBC,EAAe,UAIfC,EAAiB,WAMjBC,EAAuB,UASvBC,EAAgB,WAIhBC,EAAY,WAKZC,EAAc,WAYdC,EAAwB,UASxBC,EAAe,UAafC,EAAe,WAIfC,EAAS,UAaTC,EAAiB,WAQjBC,EAAgB,UA2BhBC,EAAmB,WAOnBC,EAAe"}

package/data-table/data-table.styles_rxganh.css

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

package/data-table/types.d.ts

@@ -1,40 +1,70 @@
 import type { CSSProperties, ReactNode } from "react";
 import type { ErrorDisplayAttributes } from "../error-display/types";
+/** Props for the `DataTable` component. */
 export interface DataTableProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
-    /** Configuration for each header */
+    /** Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry. */
     headers: HeaderProps[];
+    /** Row data to render. When omitted or empty the empty state is shown. */
     rows?: RowProps[] | undefined;
     className?: string | undefined;
+    /**
+     * Controlled set of row IDs that are currently selected.
+     *
+     * @remarks Must be provided alongside `enableMultiSelect` for selection to work. Pass an
+     * empty array (not `undefined`) to enable the select-all checkbox while having no rows
+     * selected.
+     */
     selectedIds?: string[] | undefined;
+    /** Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible. */
     disabledIds?: string[] | undefined;
-    /** Enables a checkbox for each row */
+    /** Renders a checkbox column as the first column of each row to support row selection. */
     enableMultiSelect?: boolean | undefined;
-    /** Enables a select all checkbox */
+    /** Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`. */
     enableSelectAll?: boolean | undefined;
-    /** Specifies if an action bar is visible when one or more rows are selected */
+    /** Shows the action bar whenever one or more rows are selected. */
     enableActionBar?: boolean | undefined;
-    /** Specifies if the header is fixed to the top */
+    /** Keeps the header row visible as the user scrolls down through the table. */
     enableStickyHeader?: boolean | undefined;
-    /** Custom content to be rendered within the action bar */
+    /** Additional content rendered inside the action bar. */
     actionBarContent?: ReactNode | undefined;
+    /**
+     * Controls whether the table body renders data rows or a loading indicator.
+     * @default "success"
+     */
     loadState?: LoadStateType | undefined;
+    /** Called when a row's checkbox is toggled; receives the row ID and the new selected state. */
     onSelect?: ((rowId: string, isSelected: boolean) => void) | undefined;
+    /**
+     * Called when the select-all checkbox is toggled.
+     */
     onSelectAll?: ((isAllSelected: boolean) => void) | undefined;
+    /** Called when a header cell is clicked; receives the `fieldKey` of the clicked column. */
     onHeaderClick?: ((fieldKey: string) => void) | undefined;
+    /** Called when the "Clear selection" button inside the action bar is clicked. */
     onClearSelectionClick?: (() => void) | undefined;
-    /** Specifies the sort indicator display state for each column **/
+    /**
+     * Maps each `fieldKey` to its current sort direction. A key present in this map causes the
+     * corresponding header to render a directional arrow and expose sort controls to assistive
+     * technology.
+     */
     sortIndicators?: SortIndicatorsProps | undefined;
-    /** Specifies if every alternate row has a different background colour */
+    /** Applies an alternate background colour to every odd-indexed row. */
     alternatingRows?: boolean | undefined;
-    /** Override props for the empty view display */
+    /**
+     * Overrides the title and description shown in the built-in empty state. Ignored when
+     * `renderCustomEmptyView` is provided.
+     */
     emptyView?: ErrorDisplayAttributes | undefined;
-    /** Returns a custom view to be rendered when the table is empty */
+    /** Renders a fully custom empty state in place of the default `ErrorDisplay`. */
     renderCustomEmptyView?: (() => ReactNode) | undefined;
 }
+/** Whether the table body is in a loading or data-ready state. */
 export type LoadStateType = "loading" | "success";
+/** Direction of a column sort indicator. */
 export type SortIndicatorType = "asc" | "desc";
+/** Maps column `fieldKey` values to their current sort direction. */
 export interface SortIndicatorsProps {
     [fieldKey: string]: SortIndicatorType;
 }
@@ -45,23 +75,39 @@ export interface SortIndicatorsProps {
  * For additional customisation, pass a `HeaderItemProps` object
  */
 export type HeaderProps = string | HeaderItemProps;
+/**
+ * Full object form of a column header definition;
+ * use instead of a plain string when custom labels, click handling,
+ * or accessibility metadata is needed. */
 interface HeaderItemProps {
+    /** Key used to read the corresponding cell value from each `RowProps` entry. */
     fieldKey: string;
+    /** Column heading content. Pass a string for plain text or a `ReactNode` for custom markup. */
     label: string | ReactNode;
+    /** Makes the header cell interactive, firing `onHeaderClick` when clicked. */
     clickable?: boolean | undefined;
-    /** Used with `enableMultiSelect`. Marks this column as descriptive of the row
+    /**
+     * Used with `enableMultiSelect`. Marks this column as descriptive of the row
      * (e.g. a name or unique ID). Its value is used to label the row's checkbox
      * for screen readers.
      */
     keyColumn?: boolean | undefined;
     style?: CSSProperties | undefined;
 }
+/** Props for each row of data in the table. */
 export interface RowProps {
+    /** Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. */
     id: string | number;
-    /** data with key matching fieldKey in `HeaderProps` */
+    /**
+     * Cell values keyed by the `fieldKey` of the matching `HeaderProps`. Values can be a
+     * primitive (rendered inside a `Typography.BodyBL`), a `ReactNode`, or a render function
+     * that receives the full row and `RowRenderProps`.
+     */
     [fieldKey: string]: string | number | ReactNode | ((row: RowProps, renderProps: RowRenderProps) => ReactNode) | undefined;
 }
+/** Runtime context passed to a cell's render function when the value is a function. */
 interface RowRenderProps {
+    /** Whether the row is currently in the `selectedIds` set. */
     isSelected: boolean;
 }
 export {};

package/date-input/date-input.d.ts

@@ -1,2 +1,7 @@
 import type { DateInputProps } from "./types";
+/**
+ * A single-date input field with an attached calendar dropdown.
+ *
+ * Use this to enter or pick a single date.
+ */
 export declare const DateInput: ({ minDate, maxDate, disabled, disabledDates, error, hideInputKeyboard, value, onChange, onFocus, onBlur, onYearMonthDisplayChange, withButton, readOnly, id, allowDisabledSelection, zIndex, dropdownRootNode, className, ...otherProps }: DateInputProps) => import("react/jsx-runtime").JSX.Element;

package/date-input/date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.js","sources":["../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n    CalendarAction,\n    InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\nexport const DateInput = ({\n    minDate,\n    maxDate,\n    disabled,\n    disabledDates,\n    error,\n    hideInputKeyboard,\n    value,\n    onChange,\n    onFocus,\n    onBlur,\n    onYearMonthDisplayChange,\n    withButton = true,\n    readOnly,\n    id,\n    allowDisabledSelection,\n    zIndex,\n    dropdownRootNode,\n    className,\n    ...otherProps\n}: DateInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [initialDate, setInitialDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [selectedDate, setSelectedDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [hoveredDate, setHoveredDate] = useState<string | undefined>(\n        undefined\n    );\n    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<StandaloneDateInputRef>(null);\n    const calendarRef = useRef<InternalCalendarRef>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const newValue = DateInputHelper.sanitizeInput(value);\n        setInitialDate(newValue);\n        setSelectedDate(newValue);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClose = () => {\n        inputRef.current?.resetInput();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n        setFocused(false);\n\n        performOnBlurHandler();\n\n        // clear hover value for mobile scrolling\n        setHoveredDate(undefined);\n    };\n\n    const handleDismiss = () => {\n        inputRef.current?.resetInput();\n        nodeRef.current?.focus();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n    };\n\n    const handleChange = (val: string) => {\n        if (\n            !allowDisabledSelection &&\n            DateInputHelper.isDateDisabled(val, {\n                disabledDates,\n                minDate,\n                maxDate,\n            })\n        ) {\n            return;\n        }\n\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                setCalendarOpen(false);\n            }\n        }\n    };\n\n    const handleSelect = (val: string) => {\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                inputRef.current?.focusYearRef();\n                setCalendarOpen(false);\n            }\n\n            // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n            setHoveredDate(undefined);\n        }\n    };\n\n    const handleFocus = () => {\n        if (readOnly || disabled) return;\n\n        setCalendarOpen(true);\n\n        if (focused) return;\n\n        setFocused(true);\n\n        if (onFocus) {\n            onFocus();\n        }\n    };\n\n    const handleBlur = (e: React.FocusEvent) => {\n        const target = e.relatedTarget as HTMLElement;\n\n        const isInsideCalendar =\n            calendarRef.current && calendarRef.current.contains(target);\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n        // Condition when the calendar is open, and focus went outside both input and calendar\n        const shouldBlurWhenOpenOutside =\n            calendarOpen &&\n            !isInsideNode &&\n            !isInsideCalendar &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed || shouldBlurWhenOpenOutside) {\n            inputRef.current?.resetInput();\n            setSelectedDate(initialDate);\n            setFocused(false);\n            setCalendarOpen(false);\n            performOnBlurHandler();\n        }\n    };\n\n    const handleHoverDayCell = (value: string) => {\n        if (!calendarOpen) return;\n        setHoveredDate(value);\n    };\n\n    const handleCalendarAction = (buttonAction: CalendarAction) => {\n        // handle button in day calendar view\n        switch (buttonAction) {\n            case \"reset\":\n                setSelectedDate(initialDate);\n                break;\n            case \"confirmed\":\n                setInitialDate(selectedDate);\n                performOnChangeHandler(selectedDate);\n                break;\n        }\n\n        const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n        // Focus on year input if the selected date is valid to avoid restarting entire tab order\n        if (isValid) {\n            inputRef.current?.focusYearRef();\n        } else {\n            nodeRef.current?.focus();\n        }\n        setCalendarOpen(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (changeValue: string) => {\n        if (onChange) {\n            onChange(changeValue);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (onBlur) {\n            onBlur();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderInput = () => {\n        return (\n            <InputWrapper\n                role=\"group\"\n                tabIndex={0}\n                ref={nodeRef}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                disabled={disabled}\n                readOnly={readOnly}\n                focused={focused}\n                error={error}\n                id={id}\n                data-testid={otherProps[\"data-testid\"]}\n                aria-disabled={disabled}\n                className={clsx(styles.container, className)}\n                {...otherProps}\n            >\n                <StandaloneDateInput\n                    ref={inputRef}\n                    disabled={disabled}\n                    onChange={handleChange}\n                    readOnly={readOnly}\n                    focused={calendarOpen}\n                    names={[\"start-day\", \"start-month\", \"start-year\"]}\n                    value={selectedDate}\n                    hoverValue={hoveredDate}\n                    hideInputKeyboard={hideInputKeyboard}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n        return (\n            <CalendarDropdown\n                variant=\"single\"\n                ref={calendarRef}\n                initialCalendarDate={selectedDate}\n                withButton={withButton}\n                value={selectedDate}\n                disabledDates={disabledDates}\n                minDate={minDate}\n                maxDate={maxDate}\n                allowDisabledSelection={allowDisabledSelection}\n                onHover={handleHoverDayCell}\n                onSelect={handleSelect}\n                onDismiss={handleCalendarAction}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                width={elementWidth}\n                isFocusable={!readOnly && !disabled}\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={calendarOpen}\n            renderElement={renderInput}\n            renderDropdown={renderCalendar}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            customZIndex={zIndex}\n            offset={16}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["DateInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}
+{"version":3,"file":"date-input.js","sources":["../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n    CalendarAction,\n    InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\n/**\n * A single-date input field with an attached calendar dropdown.\n *\n * Use this to enter or pick a single date.\n */\nexport const DateInput = ({\n    minDate,\n    maxDate,\n    disabled,\n    disabledDates,\n    error,\n    hideInputKeyboard,\n    value,\n    onChange,\n    onFocus,\n    onBlur,\n    onYearMonthDisplayChange,\n    withButton = true,\n    readOnly,\n    id,\n    allowDisabledSelection,\n    zIndex,\n    dropdownRootNode,\n    className,\n    ...otherProps\n}: DateInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [initialDate, setInitialDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [selectedDate, setSelectedDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [hoveredDate, setHoveredDate] = useState<string | undefined>(\n        undefined\n    );\n    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<StandaloneDateInputRef>(null);\n    const calendarRef = useRef<InternalCalendarRef>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const newValue = DateInputHelper.sanitizeInput(value);\n        setInitialDate(newValue);\n        setSelectedDate(newValue);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClose = () => {\n        inputRef.current?.resetInput();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n        setFocused(false);\n\n        performOnBlurHandler();\n\n        // clear hover value for mobile scrolling\n        setHoveredDate(undefined);\n    };\n\n    const handleDismiss = () => {\n        inputRef.current?.resetInput();\n        nodeRef.current?.focus();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n    };\n\n    const handleChange = (val: string) => {\n        if (\n            !allowDisabledSelection &&\n            DateInputHelper.isDateDisabled(val, {\n                disabledDates,\n                minDate,\n                maxDate,\n            })\n        ) {\n            return;\n        }\n\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                setCalendarOpen(false);\n            }\n        }\n    };\n\n    const handleSelect = (val: string) => {\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                inputRef.current?.focusYearRef();\n                setCalendarOpen(false);\n            }\n\n            // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n            setHoveredDate(undefined);\n        }\n    };\n\n    const handleFocus = () => {\n        if (readOnly || disabled) return;\n\n        setCalendarOpen(true);\n\n        if (focused) return;\n\n        setFocused(true);\n\n        if (onFocus) {\n            onFocus();\n        }\n    };\n\n    const handleBlur = (e: React.FocusEvent) => {\n        const target = e.relatedTarget as HTMLElement;\n\n        const isInsideCalendar =\n            calendarRef.current && calendarRef.current.contains(target);\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n        // Condition when the calendar is open, and focus went outside both input and calendar\n        const shouldBlurWhenOpenOutside =\n            calendarOpen &&\n            !isInsideNode &&\n            !isInsideCalendar &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed || shouldBlurWhenOpenOutside) {\n            inputRef.current?.resetInput();\n            setSelectedDate(initialDate);\n            setFocused(false);\n            setCalendarOpen(false);\n            performOnBlurHandler();\n        }\n    };\n\n    const handleHoverDayCell = (value: string) => {\n        if (!calendarOpen) return;\n        setHoveredDate(value);\n    };\n\n    const handleCalendarAction = (buttonAction: CalendarAction) => {\n        // handle button in day calendar view\n        switch (buttonAction) {\n            case \"reset\":\n                setSelectedDate(initialDate);\n                break;\n            case \"confirmed\":\n                setInitialDate(selectedDate);\n                performOnChangeHandler(selectedDate);\n                break;\n        }\n\n        const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n        // Focus on year input if the selected date is valid to avoid restarting entire tab order\n        if (isValid) {\n            inputRef.current?.focusYearRef();\n        } else {\n            nodeRef.current?.focus();\n        }\n        setCalendarOpen(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (changeValue: string) => {\n        if (onChange) {\n            onChange(changeValue);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (onBlur) {\n            onBlur();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderInput = () => {\n        return (\n            <InputWrapper\n                role=\"group\"\n                tabIndex={0}\n                ref={nodeRef}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                disabled={disabled}\n                readOnly={readOnly}\n                focused={focused}\n                error={error}\n                id={id}\n                data-testid={otherProps[\"data-testid\"]}\n                aria-disabled={disabled}\n                className={clsx(styles.container, className)}\n                {...otherProps}\n            >\n                <StandaloneDateInput\n                    ref={inputRef}\n                    disabled={disabled}\n                    onChange={handleChange}\n                    readOnly={readOnly}\n                    focused={calendarOpen}\n                    names={[\"start-day\", \"start-month\", \"start-year\"]}\n                    value={selectedDate}\n                    hoverValue={hoveredDate}\n                    hideInputKeyboard={hideInputKeyboard}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n        return (\n            <CalendarDropdown\n                variant=\"single\"\n                ref={calendarRef}\n                initialCalendarDate={selectedDate}\n                withButton={withButton}\n                value={selectedDate}\n                disabledDates={disabledDates}\n                minDate={minDate}\n                maxDate={maxDate}\n                allowDisabledSelection={allowDisabledSelection}\n                onHover={handleHoverDayCell}\n                onSelect={handleSelect}\n                onDismiss={handleCalendarAction}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                width={elementWidth}\n                isFocusable={!readOnly && !disabled}\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={calendarOpen}\n            renderElement={renderInput}\n            renderDropdown={renderCalendar}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            customZIndex={zIndex}\n            offset={16}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["DateInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}

package/date-input/date-input.styles_1r5kcc7.css

@@ -1 +1 @@
-.c1udubt6{height:3rem;}
+@layer fds{.c1udubt6{height:3rem;}}