@lifesg/react-design-system 3.5.0-canary.2 → 3.5.0-canary.3

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

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

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

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

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

@@ -1,21 +1,24 @@
-"use strict";var e=require("styled-components"),r=require("../shared/input-wrapper/input-wrapper.js"),o=require("../shared/styles/index.js"),t=require("../theme/index.js"),d=require("../typography/typography.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(e);const s=t.Colour.border,a=t.Colour.text,n=l.default.div`
-    overflow: auto;
+"use strict";var e=require("styled-components"),r=require("../shared/input-wrapper/input-wrapper.js"),o=require("../shared/styles/index.js"),t=require("../theme/index.js"),i=require("../typography/typography.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=d(e);const l=t.Colour.border,a=t.Colour.text,n=s.default.div`
+    /* we separate the overflow styles so that sticky elements can still work
+       with horizontal scrolling on supported browsers
+       see: https://github.com/w3c/csswg-drafts/issues/12289 */
+    overflow-y: ${e=>e.$scrollable?"auto":"clip"};
+    overflow-x: auto;
+    position: relative;
     display: flex;
     flex-direction: column;
-    border: ${t.Border["width-010"]} ${t.Border.solid} ${s};
+    border: ${t.Border["width-010"]} ${t.Border.solid} ${l};
     border-radius: ${t.Radius.md};
 
-    // Hide scrollbar
+    /* Hide scrollbar */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
     &::-webkit-scrollbar {
-        display: none;
+        display: none; /* Chrome/Safari/Webkit */
     }
-    * {
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-    }
-`,p=l.default.div`
+`,c=s.default.div`
     flex: 1;
-`,c=l.default.table`
+`,p=s.default.table`
     th:last-child,
     td:last-child {
         padding-right: 1.5rem;
@@ -28,31 +31,29 @@
     border-collapse: separate;
     border-spacing: 0;
     width: 100%;
-
+`,$=s.default.thead`
     ${r=>{if(r.$stickyHeader)return e.css`
-                thead {
-                    position: sticky;
-                    top: 0;
-                    z-index: 20;
-                }
-            `}};
-`,$=l.default.tbody`
-    tr:last-child {
-        td {
-            border-bottom: ${e=>e.$showLastRowBottomBorder?`${t.Border["width-010"]} ${t.Border.solid} ${s}`:"none"};
-        }
-    }
-`,u=l.default.div`
-    bottom: 0;
-    ${r=>{if(r.$fixed){const o=r.$left?`${r.$left}px`:"0",t=r.$width?`${r.$width}px`:"100%";return e.css`
-                position: fixed;
-                left: ${o};
-                width: ${t};
-            `}return e.css`
                 position: sticky;
-                left: 0;
+                top: 0;
+                z-index: 20;
             `}};
-`,f=l.default(r.BasicButton)`
+`,u=s.default.tbody``,f=s.default.div`
+    ${r=>{const o=r.$left?`${r.$left}px`:"0",t=r.$width?`${r.$width}px`:"100%";switch(r.$strategy){case"inline":return e.css`
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    width: ${t};
+                `;case"fixed":return e.css`
+                    position: fixed;
+                    bottom: 0;
+                    left: ${o};
+                    width: ${t};
+                `;case"sticky":return e.css`
+                    position: sticky;
+                    bottom: 0;
+                    width: ${t};
+                `}}}
+`,m=s.default(r.BasicButton)`
     ${t.Font["body-md-semibold"]}
     cursor: pointer;
     color: ${t.Colour["text-primary"]};
@@ -63,36 +64,38 @@
     &:hover {
         color: ${t.Colour["text-hover"]};
     }
-`,m=l.default.div`
+`,h=s.default.div`
     overflow: hidden;
     display: flex;
     align-items: center;
     height: 3.5rem;
     padding: ${t.Spacing["spacing-16"]} ${t.Spacing["spacing-24"]};
-    border-top: ${t.Border["width-010"]} ${t.Border.solid} ${s};
+    border-top: ${t.Border["width-010"]} ${t.Border.solid} ${l};
     background-color: ${t.Colour["bg-selected"]};
-    transition: all 300ms ease;
+    transition: transform ${t.Motion["duration-350"]} ${t.Motion["ease-default"]};
     ${r=>r.$float?e.css`
                 transform: translateX(0.5rem) translateY(-2rem);
                 border-radius: ${t.Radius.sm};
                 box-shadow: ${t.Shadow["xs-subtle"]};
                 width: calc(100% - ${t.Spacing["spacing-16"]});
-                border: ${t.Border["width-010"]} ${t.Border.solid} ${s};
+                border: ${t.Border["width-010"]} ${t.Border.solid} ${l};
             `:e.css`
                 border-radius: ${t.Radius.none} ${t.Radius.none}
                     ${t.Radius.sm} ${t.Radius.sm};
             `}
-`,g=l.default.tr`
+`,b=s.default.div`
+    height: 3.5rem;
+`,g=s.default.tr`
     background-color: ${t.Colour["bg-stronger"]};
     height: 6rem;
-    border-bottom: ${t.Border["width-010"]} ${t.Border.solid} ${s};
-`,b=l.default.th`
+    border-bottom: ${t.Border["width-010"]} ${t.Border.solid} ${l};
+`,x=s.default.th`
     padding: ${e=>e.$isCheckbox?"1.25rem 0.5rem 1.25rem 1.5rem":"1.25rem 1rem"};
     text-align: left;
     cursor: ${e=>e.$clickable?"pointer":"default"};
     vertical-align: middle;
     color: ${a};
-    border-bottom: ${t.Border["width-010"]} ${t.Border.solid} ${s};
+    border-bottom: ${t.Border["width-010"]} ${t.Border.solid} ${l};
     ${r=>{if(r.$isCheckbox)return e.css`
                 width: 4rem;
             `}};
@@ -100,7 +103,7 @@
         outline: 2px solid ${t.Colour["focus-ring"]};
         outline-offset: -3px;
     }
-`,h=l.default.div`
+`,w=s.default.div`
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -109,7 +112,7 @@
         color: ${a};
         margin-left: 0.5rem;
     }
-`,x=l.default.tr`
+`,y=s.default.tr`
     background-color: ${r=>r.$isSelected?e.css`
                 ${t.Colour["bg-selected"]};
             `:r.$alternating?e.css`
@@ -117,33 +120,39 @@
             `:e.css`
                 ${t.Colour.bg};
             `};
-    border-top: ${t.Border["width-010"]} ${t.Border.solid} ${s};
+    border-top: ${t.Border["width-010"]} ${t.Border.solid} ${l};
     &:hover {
         ${r=>{if(r.$isSelectable)return e.css`
                     background-color: ${t.Colour["bg-hover-strong"]};
                 `}};
     }
-`,y=l.default.td`
+
+    &:last-child {
+        td {
+            border-bottom: ${e=>e.$showLastRowBottomBorder?`${t.Border["width-010"]} ${t.Border.solid} ${l}`:"none"};
+        }
+    }
+`,B=s.default.td`
     padding: ${e=>e.$isCheckbox?"1.25rem 0.5rem 1.25rem 1.5rem":"1.25rem 1rem"};
     vertical-align: middle;
     color: ${a};
-    border-bottom: ${t.Border["width-010"]} ${t.Border.solid} ${s};
-`,w=l.default(d.Typography.BodyBL)`
+    border-bottom: ${t.Border["width-010"]} ${t.Border.solid} ${l};
+`,C=s.default(i.Typography.BodyBL)`
     ${o.lineClampCss(2)}
     text-overflow: ellipsis;
-`,B=l.default.div`
+`,v=s.default.div`
     display: flex;
     align-items: center;
     justify-content: center;
-`,C=l.default.div`
+`,k=s.default.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 4rem 0;
-`,v=l.default(d.Typography.HeadingSM)`
+`,R=s.default(i.Typography.HeadingSM)`
     margin-top: 2rem;
     margin-bottom: 1rem;
-`,k=l.default.td`
+`,S=s.default.td`
     padding: 4rem 0;
-`;exports.ActionBar=m,exports.ActionBarWrapper=u,exports.BodyCell=y,exports.BodyCellContent=w,exports.BodyRow=x,exports.CheckBoxWrapper=B,exports.EmptyViewCell=k,exports.ErrorDisplayTitle=v,exports.HeaderCell=b,exports.HeaderCellWrapper=h,exports.HeaderRow=g,exports.LoaderWrapper=C,exports.Table=c,exports.TableBody=$,exports.TableContainer=p,exports.TableWrapper=n,exports.TextButton=f;
+`;exports.ActionBar=h,exports.ActionBarSpacer=b,exports.ActionBarWrapper=f,exports.BodyCell=B,exports.BodyCellContent=C,exports.BodyRow=y,exports.CheckBoxWrapper=v,exports.EmptyViewCell=S,exports.ErrorDisplayTitle=R,exports.HeaderCell=x,exports.HeaderCellWrapper=w,exports.HeaderRow=g,exports.LoaderWrapper=k,exports.Table=p,exports.TableBody=u,exports.TableContainer=c,exports.TableHead=$,exports.TableWrapper=n,exports.TextButton=m;
 //# sourceMappingURL=data-table.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table.styles.js","sources":["../../../src/data-table/data-table.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Colour,\n    Font,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface TableProps {\n    $end: boolean;\n    $scrollable: boolean;\n    $stickyHeader: boolean | undefined;\n}\ninterface TableBodyProps {\n    $showLastRowBottomBorder: boolean;\n}\ninterface HeaderCellProps {\n    $clickable: boolean;\n    $isCheckbox: boolean;\n}\ninterface BodyRowProps {\n    $alternating: boolean;\n    $isSelected?: boolean;\n    $isSelectable?: boolean;\n}\n\ninterface BodyCellProps {\n    $isCheckbox: boolean;\n}\n\ninterface ActionBarWrapperProps {\n    $fixed: boolean;\n    $left?: number | undefined;\n    $width?: number | undefined;\n}\n\ninterface ActionBarProps {\n    $float: boolean;\n    $scrollable: boolean;\n}\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div`\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    // Hide scrollbar\n    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n    }\n`;\n\nexport const TableContainer = styled.div`\n    flex: 1;\n`;\n\nexport const Table = styled.table<TableProps>`\n    th:last-child,\n    td:last-child {\n        padding-right: 1.5rem;\n    }\n    th:first-child,\n    td:first-child {\n        padding-left: 1.5rem;\n    }\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n\n    ${(props) => {\n        if (props.$stickyHeader) {\n            return css`\n                thead {\n                    position: sticky;\n                    top: 0;\n                    z-index: 20;\n                }\n            `;\n        }\n    }};\n`;\n\nexport const TableBody = styled.tbody<TableBodyProps>`\n    tr:last-child {\n        td {\n            border-bottom: ${(props) =>\n                props.$showLastRowBottomBorder\n                    ? `${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor}`\n                    : \"none\"};\n        }\n    }\n`;\n\nexport const ActionBarWrapper = styled.div<ActionBarWrapperProps>`\n    bottom: 0;\n    ${(props) => {\n        if (props.$fixed) {\n            const left = props.$left ? `${props.$left}px` : \"0\";\n            const width = props.$width ? `${props.$width}px` : \"100%\";\n            return css`\n                position: fixed;\n                left: ${left};\n                width: ${width};\n            `;\n        } else {\n            return css`\n                position: sticky;\n                left: 0;\n            `;\n        }\n    }};\n`;\n\nexport const TextButton = styled(BasicButton)`\n    ${Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${Colour[\"text-primary\"]};\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const ActionBar = styled.div<ActionBarProps>`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    background-color: ${Colour[\"bg-selected\"]};\n    transition: all 300ms ease;\n    ${(props) => {\n        if (props.$float) {\n            return css`\n                transform: translateX(0.5rem) translateY(-2rem);\n                border-radius: ${Radius[\"sm\"]};\n                box-shadow: ${Shadow[\"xs-subtle\"]};\n                width: calc(100% - ${Spacing[\"spacing-16\"]});\n                border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n            `;\n        } else {\n            return css`\n                border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]}\n                    ${Radius[\"sm\"]} ${Radius[\"sm\"]};\n            `;\n        }\n    }}\n`;\n\nexport const HeaderRow = styled.tr`\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const HeaderCell = styled.th<HeaderCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    text-align: left;\n    cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    ${(props) => {\n        if (props.$isCheckbox) {\n            return css`\n                width: 4rem;\n            `;\n        }\n    }};\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -3px;\n    }\n`;\n\nexport const HeaderCellWrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    svg {\n        color: ${fontColor};\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const BodyRow = styled.tr<BodyRowProps>`\n    background-color: ${(props) => {\n        if (props.$isSelected) {\n            return css`\n                ${Colour[\"bg-selected\"]};\n            `;\n        } else if (props.$alternating) {\n            return css`\n                ${Colour[\"bg-strong\"]};\n            `;\n        } else {\n            return css`\n                ${Colour[\"bg\"]};\n            `;\n        }\n    }};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    &:hover {\n        ${(props) => {\n            if (props.$isSelectable) {\n                return css`\n                    background-color: ${Colour[\"bg-hover-strong\"]};\n                `;\n            }\n        }};\n    }\n`;\n\nexport const BodyCell = styled.td<BodyCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const BodyCellContent = styled(Typography.BodyBL)`\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n`;\n\nexport const CheckBoxWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const LoaderWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const ErrorDisplayTitle = styled(Typography.HeadingSM)`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n\nexport const EmptyViewCell = styled.td`\n    padding: 4rem 0;\n`;\n"],"names":["borderColor","Colour","fontColor","TableWrapper","styled","div","Border","Radius","TableContainer","Table","table","props","$stickyHeader","css","TableBody","tbody","$showLastRowBottomBorder","ActionBarWrapper","$fixed","left","$left","width","$width","TextButton","BasicButton","Font","Motion","ActionBar","Spacing","$float","Shadow","HeaderRow","tr","HeaderCell","th","$isCheckbox","$clickable","HeaderCellWrapper","BodyRow","$isSelected","$alternating","$isSelectable","BodyCell","td","BodyCellContent","Typography","BodyBL","lineClampCss","CheckBoxWrapper","LoaderWrapper","ErrorDisplayTitle","HeadingSM","EmptyViewCell"],"mappings":"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"}
+{"version":3,"file":"data-table.styles.js","sources":["../../../src/data-table/data-table.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Colour,\n    Font,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface TableWrapperProps {\n    $scrollable: boolean;\n}\ninterface TableHeadProps {\n    $stickyHeader: boolean | undefined;\n}\ninterface HeaderCellProps {\n    $clickable: boolean;\n    $isCheckbox: boolean;\n}\ninterface BodyRowProps {\n    $alternating: boolean;\n    $isSelected?: boolean;\n    $isSelectable?: boolean;\n    $showLastRowBottomBorder?: boolean;\n}\n\ninterface BodyCellProps {\n    $isCheckbox: boolean;\n}\n\ninterface ActionBarWrapperProps {\n    $strategy: \"fixed\" | \"sticky\" | \"inline\";\n    $left?: number | undefined;\n    $width?: number | undefined;\n}\n\ninterface ActionBarProps {\n    $float: boolean;\n}\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div<TableWrapperProps>`\n    /* we separate the overflow styles so that sticky elements can still work\n       with horizontal scrolling on supported browsers\n       see: https://github.com/w3c/csswg-drafts/issues/12289 */\n    overflow-y: ${(props) => (props.$scrollable ? \"auto\" : \"clip\")};\n    overflow-x: auto;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const TableContainer = styled.div`\n    flex: 1;\n`;\n\nexport const Table = styled.table`\n    th:last-child,\n    td:last-child {\n        padding-right: 1.5rem;\n    }\n    th:first-child,\n    td:first-child {\n        padding-left: 1.5rem;\n    }\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nexport const TableHead = styled.thead<TableHeadProps>`\n    ${(props) => {\n        if (props.$stickyHeader) {\n            return css`\n                position: sticky;\n                top: 0;\n                z-index: 20;\n            `;\n        }\n    }};\n`;\n\nexport const TableBody = styled.tbody``;\n\nexport const ActionBarWrapper = styled.div<ActionBarWrapperProps>`\n    ${(props) => {\n        const left = props.$left ? `${props.$left}px` : \"0\";\n        const width = props.$width ? `${props.$width}px` : \"100%\";\n\n        switch (props.$strategy) {\n            case \"inline\":\n                return css`\n                    position: absolute;\n                    bottom: 0;\n                    left: 0;\n                    width: ${width};\n                `;\n            case \"fixed\":\n                return css`\n                    position: fixed;\n                    bottom: 0;\n                    left: ${left};\n                    width: ${width};\n                `;\n            case \"sticky\":\n                return css`\n                    position: sticky;\n                    bottom: 0;\n                    width: ${width};\n                `;\n        }\n    }}\n`;\n\nexport const TextButton = styled(BasicButton)`\n    ${Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${Colour[\"text-primary\"]};\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const ActionBar = styled.div<ActionBarProps>`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    background-color: ${Colour[\"bg-selected\"]};\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-default\"]};\n    ${(props) => {\n        if (props.$float) {\n            return css`\n                transform: translateX(0.5rem) translateY(-2rem);\n                border-radius: ${Radius[\"sm\"]};\n                box-shadow: ${Shadow[\"xs-subtle\"]};\n                width: calc(100% - ${Spacing[\"spacing-16\"]});\n                border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n            `;\n        } else {\n            return css`\n                border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]}\n                    ${Radius[\"sm\"]} ${Radius[\"sm\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ActionBarSpacer = styled.div`\n    height: 3.5rem;\n`;\n\nexport const HeaderRow = styled.tr`\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const HeaderCell = styled.th<HeaderCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    text-align: left;\n    cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    ${(props) => {\n        if (props.$isCheckbox) {\n            return css`\n                width: 4rem;\n            `;\n        }\n    }};\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -3px;\n    }\n`;\n\nexport const HeaderCellWrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    svg {\n        color: ${fontColor};\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const BodyRow = styled.tr<BodyRowProps>`\n    background-color: ${(props) => {\n        if (props.$isSelected) {\n            return css`\n                ${Colour[\"bg-selected\"]};\n            `;\n        } else if (props.$alternating) {\n            return css`\n                ${Colour[\"bg-strong\"]};\n            `;\n        } else {\n            return css`\n                ${Colour[\"bg\"]};\n            `;\n        }\n    }};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    &:hover {\n        ${(props) => {\n            if (props.$isSelectable) {\n                return css`\n                    background-color: ${Colour[\"bg-hover-strong\"]};\n                `;\n            }\n        }};\n    }\n\n    &:last-child {\n        td {\n            border-bottom: ${(props) =>\n                props.$showLastRowBottomBorder\n                    ? `${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor}`\n                    : \"none\"};\n        }\n    }\n`;\n\nexport const BodyCell = styled.td<BodyCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const BodyCellContent = styled(Typography.BodyBL)`\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n`;\n\nexport const CheckBoxWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const LoaderWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const ErrorDisplayTitle = styled(Typography.HeadingSM)`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n\nexport const EmptyViewCell = styled.td`\n    padding: 4rem 0;\n`;\n"],"names":["borderColor","Colour","fontColor","TableWrapper","styled","div","props","$scrollable","Border","Radius","TableContainer","Table","table","TableHead","thead","$stickyHeader","css","TableBody","tbody","ActionBarWrapper","left","$left","width","$width","$strategy","TextButton","BasicButton","Font","Motion","ActionBar","Spacing","$float","Shadow","ActionBarSpacer","HeaderRow","tr","HeaderCell","th","$isCheckbox","$clickable","HeaderCellWrapper","BodyRow","$isSelected","$alternating","$isSelectable","$showLastRowBottomBorder","BodyCell","td","BodyCellContent","Typography","BodyBL","lineClampCss","CheckBoxWrapper","LoaderWrapper","ErrorDisplayTitle","HeadingSM","EmptyViewCell"],"mappings":"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"}