@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.10

package/data-table/data-table.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as n,Fragment as i}from"react/jsx-runtime";import{ArrowUpIcon as r,ArrowDownIcon as l}from"@lifesg/react-icons";import{useRef as o,useState as d,useCallback as c,useEffect as s}from"react";import{useInView as a}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 h}from"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"styled-components";import{Checkbox as m}from"../checkbox/checkbox.js";import{ErrorDisplay as g}from"../error-display/error-display.js";import"../v3_theme/index.js";import{Typography as p}from"../typography/index.js";import{useEventListener as f}from"../util/use-event-listener.js";import{TableWrapper as b,TableContainer as w,Table as y,TableBody as $,HeaderRow as v,EmptyViewCell as S,BodyRow as C,LoaderWrapper as k,ActionBarWrapper as x,ActionBar as H,TextButton as j,HeaderCell as B,CheckBoxWrapper as R,HeaderCellWrapper as A,ErrorDisplayTitle as I,BodyCell as N,BodyCellContent as V}from"./data-table.styles.js";const M=M=>{var{id:K,headers:Y,rows:_,className:z,sortIndicators:E,alternatingRows:L,loadState:q="success",enableMultiSelect:D,selectedIds:F,disabledIds:O,enableActionBar:T,enableSelectAll:W,enableStickyHeader:G,emptyView:J,actionBarContent:P,renderCustomEmptyView:Q,onHeaderClick:U,onSelect:X,onSelectAll:Z,onClearSelectionClick:ee}=M,te=e(M,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const ne=o(null),ie=o(null),re=o(null),le=o(null),oe=o(null),[de,ce]=d(!1),[se,ae]=d(!1),[ue,he]=d(!1),[me,ge]=d(!1),[pe,fe]=d(!1),{ref:be,inView:we}=a(),ye=c((()=>{if(!oe.current||!le.current)return;const e=oe.current.scrollHeight>oe.current.clientHeight;ce(e),e?le.current.style.transform="translateY(0)":je()}),[]);s((()=>{ye()}),[]),u({onResize:ye});f("scroll",(()=>{requestAnimationFrame((()=>{de?He():je()})),oe.current&&he(oe.current.getBoundingClientRect().bottom<=window.innerHeight)}),"window"),s((()=>{Be()}),[_]);const $e=()=>(null==F?void 0:F.length)===(null==_?void 0:_.length),ve=e=>!!(null==F?void 0:F.includes(e)),Se=e=>!!L&&e%2==1,Ce=e=>!!(null==O?void 0:O.includes(e)),ke=e=>{if(te["data-testid"])return`${te["data-testid"]}-${e}`},xe=()=>Y.length+(D?1:0),He=()=>{if(!oe.current)return;const e=oe.current.getBoundingClientRect();ge(e.bottom>window.innerHeight+30&&e.top<window.innerHeight-200)},je=()=>{if(!(ne.current&&ie.current&&oe.current&&le.current&&re.current))return;const e=ie.current.getBoundingClientRect();if(e.top>window.innerHeight){const t=e.bottom-window.innerHeight,n=ne.current.getBoundingClientRect().height-re.current.clientHeight-32,i=Math.min(t,n);le.current.style.transform=`translateY(-${i}px)`}else le.current.style.transform="translateY(0)"},Be=()=>{ne.current&&oe.current&&fe(ne.current.clientHeight+(T?56:0)<oe.current.clientHeight)},Re=e=>{const{fieldKey:i,label:r,clickable:l=!1,style:o}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e;return n(B,{"data-testid":ke(`header-${i}`),$clickable:l,onClick:()=>l&&(null==U?void 0:U(i)),style:o,$isCheckbox:!1,children:t(A,{children:["string"==typeof r?n(p.BodyBL,{weight:"bold",children:r}):r,Ae(i)]})},i)},Ae=e=>{const t=null==E?void 0:E[e];return t?"asc"===t?n(r,{"data-testid":ke(`header-${e}-arrowup`)}):n(l,{"data-testid":ke(`header-${e}-arrowdown`)}):n(i,{})},Ie=()=>n(B,{"data-testid":ke("header-selection"),$clickable:!1,$isCheckbox:!0,children:n(R,{children:W&&n(m,{checked:$e(),indeterminate:!!F&&0!==F.length&&!$e(),onClick:()=>{Z&&Z($e())}})})}),Ne=(e,t)=>{const i="string"!=typeof e?e.style:void 0,r="string"==typeof e?e:e.fieldKey,l=t.id.toString(),o=t[r],d=`${l}-${r}`;return n(N,{"data-testid":ke(`row-${d}`),style:i,$isCheckbox:!1,children:"string"==typeof o||"number"==typeof o?n(V,{children:o}):"function"==typeof o?o(t,{isSelected:ve(l)}):o},d)},Ve=e=>n(N,{"data-testid":ke(`row-${e}-selection`),$isCheckbox:!0,children:n(R,{children:n(m,{checked:ve(e),onClick:()=>{X&&X(e,!ve(e))},disabled:Ce(e)})})}),Me=()=>n(g,Object.assign({type:"no-item-found"},J,{title:(null==J?void 0:J.title)?"string"==typeof J.title?n(I,{weight:"bold",children:J.title}):J.title:n(I,{weight:"bold",children:"No <items> found"}),description:(null==J?void 0:J.description)?J.description:"No matching rows"}));return t(b,{id:K||"table-wrapper","data-testid":te["data-testid"]||"table",className:z,ref:oe,onScroll:()=>{de&&oe.current&&ae(oe.current.scrollTop+oe.current.clientHeight>=oe.current.scrollHeight)},tabIndex:0,children:[n(w,{children:t(y,{$end:ue,$scrollable:de,ref:ne,$stickyHeader:G,children:[n("thead",{ref:re,children:t(v,{children:[D&&Ie(),Y.map(Re)]})}),n($,{$showLastRowBottomBorder:pe,children:"success"===q?!_||_.length<1?n("tr",{children:n(S,{colSpan:xe(),children:Q?Q():Me()})}):n(i,{children:null==_?void 0:_.map(((e,n)=>t(C,{"data-testid":ke(`row-${e.id.toString()}`),$alternating:Se(n),$isSelectable:D,$isSelected:ve(e.id.toString()),children:[D&&Ve(e.id.toString()),Y.map((t=>Ne(t,e)))]},e.id.toString())))}):n("tr",{children:n("td",{colSpan:xe(),children:n(k,{children:"loading"===q&&n(h,{})})})})})]})}),T&&F&&F.length>0&&(()=>{var e,i,r,l;const o=null!==(e=null==F?void 0:F.length)&&void 0!==e?e:0;return n(x,{ref:le,$fixed:me,$left:null===(r=null===(i=null==ne?void 0:ne.current)||void 0===i?void 0:i.getBoundingClientRect())||void 0===r?void 0:r.left,$width:null===(l=null==ne?void 0:ne.current)||void 0===l?void 0:l.clientWidth,children:t(H,{$float:(de?!se:!we)||me,$scrollable:de,children:[n(p.BodyMD,{weight:"semibold",children:`${o} item${o>1?"s":""} selected`}),n(j,{type:"button",onClick:ee,children:"Clear selection"}),P]})})})(),n("div",{ref:e=>{ie.current=e,be(e)}})]})};export{M as DataTable};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i,Fragment as n}from"react/jsx-runtime";import{ArrowUpIcon as r,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 A,emptyStateCell as R,bodyRowWithBottomBorder as I,bodyRowAlternating as W,bodyRowSelectable as M,bodyRowSelected as K,loadingStateWrapper as L,actionBarWrapper as V,actionBarButton as q,actionBarGap as z,actionBar as D,actionBarFloating as E,actionBarSpacer as _,selectionCheckboxWrapper as O,headerCell as P,headerCellCheckbox as T,headerCellContent as F,headerCellClickable as G,emptyStateTitle as J,bodyCell as Q,bodyCellCheckbox as U,bodyCellText as X}from"./data-table.styles.js";const Y=Y=>{var{id:Z,headers:ee,rows:te,className:ie,sortIndicators:ne,alternatingRows:re,loadState:le="success",enableMultiSelect:oe,selectedIds:ae,disabledIds:se,enableActionBar:de,enableActionBarWithoutSelection:ce,enableSelectAll:me,enableStickyHeader:he,emptyView:pe,actionBarContent:ue,renderCustomEmptyView:ge,onHeaderClick:be,onSelect:fe,onSelectAll:ye,onClearSelectionClick:we}=Y,ve=e(Y,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const je=a(null),Ne=a(null),Se=a(null),ke=a(null),$e=w(),Ce=ee.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[xe,He]=s("inline"),[Be,Ae]=s(!1),[Re,Ie]=s(!1);f(Se,{[S.actionBarWrapperLeft]:Re&&je.current?`${je.current.getBoundingClientRect().left}px`:void 0,[S.actionBarWrapperWidth]:je.current?`${je.current.clientWidth}px`:void 0});const We=v((()=>{Fe()}));d((()=>{We()}),[We]);const Me=N((()=>Fe()),100);c({targetRef:ke,onResize:()=>Me()}),j("scroll",Me),j("scroll",Me,ke.current);const Ke=()=>!!(te&&te.length&&ae)&&ae.length===te.length,Le=e=>!!(null==ae?void 0:ae.includes(e)),Ve=e=>!!re&&e%2==1,qe=e=>!!(null==se?void 0:se.includes(e)),ze=e=>{if(ve["data-testid"])return`${ve["data-testid"]}-${e}`},De=()=>ee.length+(oe?1:0),Ee=e=>null==ne?void 0:ne[e],_e=e=>{const t=Ee(e);if(t)return"asc"===t?"ascending":"descending"},Oe=e=>` by ${"asc"===Ee(e)?"descending":"ascending"} order`,Pe=(e,t)=>`${$e}-row-${e}-${t}-key-column`,Te=e=>{const t=Ce.map((t=>Pe(e,t.fieldKey)));return g(...t)},Fe=()=>{if(!ke.current||!Ne.current||!Se.current)return;const e=ke.current.getBoundingClientRect(),t=Ne.current.getBoundingClientRect();let i="inline";const n=ke.current.scrollHeight>ke.current.clientHeight;if(e.top>window.innerHeight||e.bottom<0?i="inline":n?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"),Ae(n),He(i),"fixed"===i)Ie(!0);else if("sticky"===i){const e=ke.current.scrollTop+ke.current.clientHeight<ke.current.scrollHeight;Ie(e)}else Ie(!1)},Ge=e=>{const{fieldKey:n,label:r,clickable:l=!1,style:a}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!Ee(n),d=(e=>`${$e}-header-${e}`)(n);return t("th",{"data-testid":ze(`header-${n}`),className:o(P,l&&G),scope:"col","aria-sort":_e(n),style:a,onClick:()=>(e=>{null==be||be(e)})(n),children:[t("div",{className:F,id:d,children:["string"==typeof r?i(y.BodyBL,{weight:"bold",children:r}):r,Je(n)]}),(l||s)&&i(u,{children:t("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==be||be(t)})(e,n),children:[s&&"Sort ",i("span",{"aria-labelledby":d}),s&&Oe(n)]})})]},n)},Je=e=>{const t=null==ne?void 0:ne[e];return t?"asc"===t?i(r,{"aria-hidden":!0,"data-testid":ze(`header-${e}-arrowup`)}):i(l,{"aria-hidden":!0,"data-testid":ze(`header-${e}-arrowdown`)}):i(n,{})},Qe=()=>i("th",{"data-testid":ze("header-selection"),className:o(P,T),scope:"col",children:t("div",{className:O,children:[i(u,{children:"Row selection"}),me&&i(h,{checked:Ke(),indeterminate:!!ae&&0!==ae.length&&!Ke(),disabled:!te||!te.length,"aria-label":"Select all rows",onClick:()=>{ye&&ye(Ke())}})]})}),Ue=(e,t)=>{const n="string"==typeof e?void 0:e.style,r="string"==typeof e?e:e.fieldKey,l=t.id.toString(),o=t[r],a=`${l}-${r}`;let s;return s="string"==typeof o||"number"==typeof o?i(y.BodyBL,{className:X,children:o}):"function"==typeof o?o(t,{isSelected:Le(l)}):o,i("td",{"data-testid":ze(`row-${a}`),id:Pe(l,r),className:Q,style:n,children:s},a)},Xe=e=>{const t=e.id.toString();return i("td",{"data-testid":ze(`row-${t}-selection`),className:o(Q,U),children:i("div",{className:O,children:i(h,{checked:Le(t),"aria-labelledby":Te(t),onClick:()=>{fe&&fe(t,!Le(t))},disabled:qe(t),focusableWhenDisabled:qe(t)})})})},Ye=()=>{let e;return e=(null==pe?void 0:pe.title)?"string"==typeof pe.title?i(y.HeadingSM,{className:J,weight:"bold",children:pe.title}):pe.title:i(y.HeadingSM,{className:J,weight:"bold",children:"No <items> found"}),i(p,Object.assign({type:"no-item-found"},pe,{title:e,description:(null==pe?void 0:pe.description)?pe.description:"No matching rows"}))};return t("div",{id:Z||"table-wrapper","data-testid":ve["data-testid"]||"table",className:o(C,Be&&x,ie),ref:ke,tabIndex:0,children:[i("div",{className:k,children:t("table",{ref:je,className:$,children:[i("thead",{ref:Ne,className:he?H:void 0,children:t("tr",{className:B,children:[oe&&Qe(),ee.map(Ge)]})}),i("tbody",{children:"success"===le?!te||te.length<1?i("tr",{className:A,children:i("td",{className:R,colSpan:De(),children:ge?ge():Ye()})}):i(n,{children:null==te?void 0:te.map(((e,i)=>t("tr",{"data-testid":ze(`row-${e.id.toString()}`),className:o(A,Re&&I,Ve(i)&&W,oe&&M,Le(e.id.toString())&&K),children:[oe&&Xe(e),ee.map((t=>Ue(t,e)))]},e.id.toString())))}):i("tr",{className:A,children:i("td",{colSpan:De(),children:i("div",{className:L,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===le&&i(m,{})})})})})]})}),de&&(ae&&ae.length>0||ce)&&(()=>{var e;const r=null!==(e=null==ae?void 0:ae.length)&&void 0!==e?e:0,l="item"+(1===r?"":"s");return t(n,{children:[i("div",{ref:Se,className:V,"data-strategy":xe,children:t("div",{"data-testid":"data-table-action-bar",className:o(D,Re&&E),children:[i(y.BodyMD,{weight:"semibold",children:`${r} ${l} selected`}),r>0?i(b,{className:q,type:"button","aria-label":`Clear selection of ${r} ${l}`,onClick:we,children:"Clear selection"}):i("div",{className:z}),ue]})}),"sticky"!==xe&&i("div",{className:_})]})})()]})};export{Y 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 { 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 { Typography } from \"../typography\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport {\n    ActionBar,\n    ActionBarWrapper,\n    BodyCell,\n    BodyCellContent,\n    BodyRow,\n    CheckBoxWrapper,\n    EmptyViewCell,\n    ErrorDisplayTitle,\n    HeaderCell,\n    HeaderCellWrapper,\n    HeaderRow,\n    LoaderWrapper,\n    Table,\n    TableBody,\n    TableContainer,\n    TableWrapper,\n    TextButton,\n} from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\nexport const DataTable = ({\n    id,\n    headers,\n    rows,\n    className,\n    sortIndicators,\n    alternatingRows,\n    loadState = \"success\",\n    enableMultiSelect,\n    selectedIds,\n    disabledIds,\n    enableActionBar,\n    enableSelectAll,\n    enableStickyHeader,\n    emptyView,\n    actionBarContent,\n    renderCustomEmptyView,\n    onHeaderClick,\n    onSelect,\n    onSelectAll,\n    onClearSelectionClick,\n    ...otherProps\n}: DataTableProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const tableRef = useRef<HTMLTableElement>(null);\n    const tableEndRef = useRef<HTMLDivElement | null>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [scrollable, setScrollable] = useState(false);\n    const [scrollEnd, setScrollEnd] = useState(false);\n    const [tableEnd, setTableEnd] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n    const [showLastBorder, setShowLastBorder] = useState(false);\n\n    const { ref: endRef, inView: end } = useInView();\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const onResize = useCallback(() => {\n        if (!wrapperRef.current || !actionBarRef.current) {\n            return;\n        }\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n        setScrollable(scrollable);\n\n        if (scrollable) {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        } else {\n            calculateStickyInViewport();\n        }\n    }, []);\n\n    useEffect(() => {\n        onResize();\n    }, []);\n\n    useResizeDetector({ onResize });\n\n    const scrollHandler = () => {\n        requestAnimationFrame(() => {\n            if (scrollable) {\n                calculateFixedInViewport();\n            } else {\n                calculateStickyInViewport();\n            }\n        });\n\n        if (wrapperRef.current) {\n            setTableEnd(\n                wrapperRef.current.getBoundingClientRect().bottom <=\n                    window.innerHeight\n            );\n        }\n    };\n\n    useEventListener(\"scroll\", scrollHandler, \"window\");\n\n    useEffect(() => {\n        checkLastBorder();\n    }, [rows]);\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\n        return selectedIds?.length === rows?.length;\n    };\n\n    const isIndeterminateCheckbox = (): boolean => {\n        return (\n            !!selectedIds &&\n            selectedIds.length !== 0 &&\n            !isAllCheckboxSelected()\n        );\n    };\n\n    const isRowSelected = (rowId: string): boolean => {\n        return !!selectedIds?.includes(rowId);\n    };\n\n    const isAlternatingRow = (index: number): boolean => {\n        return !!alternatingRows && index % 2 === 1;\n    };\n\n    const isDisabledRow = (rowId: string): boolean => {\n        return !!disabledIds?.includes(rowId);\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!otherProps[\"data-testid\"]) return undefined;\n        return `${otherProps[\"data-testid\"]}-${subStr}`;\n    };\n\n    const getTotalColumns = (): number => {\n        return headers.length + (enableMultiSelect ? 1 : 0);\n    };\n\n    const calculateFixedInViewport = () => {\n        if (!wrapperRef.current) {\n            return;\n        }\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        setIsFloatingActionBar(\n            wrapperBounds.bottom > window.innerHeight + 30 &&\n                wrapperBounds.top < window.innerHeight - 200\n        );\n    };\n\n    const calculateStickyInViewport = () => {\n        if (\n            !tableRef.current ||\n            !tableEndRef.current ||\n            !wrapperRef.current ||\n            !actionBarRef.current ||\n            !headerRef.current\n        ) {\n            return;\n        }\n\n        const endBounds = tableEndRef.current.getBoundingClientRect();\n\n        if (endBounds.top > window.innerHeight) {\n            const bottomOffset = endBounds.bottom - window.innerHeight;\n            const bottomToHeaderOffset =\n                tableRef.current.getBoundingClientRect().height -\n                headerRef.current.clientHeight -\n                32;\n            const maxBottomOffset = Math.min(\n                bottomOffset,\n                bottomToHeaderOffset\n            );\n\n            actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n        } else {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        }\n    };\n\n    const checkLastBorder = () => {\n        if (!tableRef.current || !wrapperRef.current) {\n            return;\n        }\n        // 56 pixels added due to the behavior of action bar\n        setShowLastBorder(\n            tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n                wrapperRef.current.clientHeight\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeaders = () => (\n        <thead ref={headerRef}>\n            <HeaderRow>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </HeaderRow>\n        </thead>\n    );\n\n    const renderHeaderCell = (header: HeaderProps) => {\n        const {\n            fieldKey,\n            label,\n            clickable = false,\n            style,\n        } = typeof header === \"string\"\n            ? {\n                  fieldKey: header,\n                  label: header,\n                  style: undefined,\n              }\n            : header;\n\n        return (\n            <HeaderCell\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                $clickable={clickable}\n                onClick={() => clickable && onHeaderClick?.(fieldKey)}\n                style={style}\n                $isCheckbox={false}\n            >\n                <HeaderCellWrapper>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </HeaderCellWrapper>\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                    data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n                />\n            );\n        }\n        return (\n            <ArrowDownIcon\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            >\n                <CheckBoxWrapper>\n                    {enableSelectAll && (\n                        <Checkbox\n                            checked={isAllCheckboxSelected()}\n                            indeterminate={isIndeterminateCheckbox()}\n                            onClick={() => {\n                                if (onSelectAll) {\n                                    onSelectAll(isAllCheckboxSelected());\n                                }\n                            }}\n                        />\n                    )}\n                </CheckBoxWrapper>\n            </HeaderCell>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <tr>\n                <EmptyViewCell colSpan={getTotalColumns()}>\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </EmptyViewCell>\n            </tr>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <BodyRow\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        $alternating={isAlternatingRow(index)}\n                        $isSelectable={enableMultiSelect}\n                        $isSelected={isRowSelected(row.id.toString())}\n                    >\n                        {enableMultiSelect &&\n                            renderRowCheckBox(row.id.toString())}\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                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 = (rowId: string) => {\n        return (\n            <BodyCell\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                $isCheckbox={true}\n            >\n                <CheckBoxWrapper>\n                    <Checkbox\n                        checked={isRowSelected(rowId)}\n                        onClick={() => {\n                            if (onSelect) {\n                                onSelect(rowId, !isRowSelected(rowId));\n                            }\n                        }}\n                        disabled={isDisabledRow(rowId)}\n                    />\n                </CheckBoxWrapper>\n            </BodyCell>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={\n                    emptyView?.title ? (\n                        typeof emptyView.title === \"string\" ? (\n                            <ErrorDisplayTitle weight=\"bold\">\n                                {emptyView.title}\n                            </ErrorDisplayTitle>\n                        ) : (\n                            emptyView.title\n                        )\n                    ) : (\n                        <ErrorDisplayTitle weight=\"bold\">\n                            {\"No <items> found\"}\n                        </ErrorDisplayTitle>\n                    )\n                }\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <tr>\n                <td colSpan={getTotalColumns()}>\n                    <LoaderWrapper>\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </LoaderWrapper>\n                </td>\n            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n\n        return (\n            <ActionBarWrapper\n                ref={actionBarRef}\n                $fixed={isFloatingActionBar}\n                $left={tableRef?.current?.getBoundingClientRect()?.left}\n                $width={tableRef?.current?.clientWidth}\n            >\n                <ActionBar\n                    $float={\n                        (scrollable ? !scrollEnd : !end) || isFloatingActionBar\n                    }\n                    $scrollable={scrollable}\n                >\n                    <Typography.BodyMD weight=\"semibold\">{`${count} item${\n                        count > 1 ? \"s\" : \"\"\n                    } selected`}</Typography.BodyMD>\n                    <TextButton type=\"button\" onClick={onClearSelectionClick}>\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":["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","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","wrapperBounds","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","header","fieldKey","label","clickable","undefined","_jsx","HeaderCell","$clickable","onClick","$isCheckbox","children","_jsxs","HeaderCellWrapper","Typography","BodyBL","weight","renderSortedArrow","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","CheckBoxWrapper","Checkbox","checked","indeterminate","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","disabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","onScroll","scrollTop","tabIndex","TableContainer","Table","$end","$stickyHeader","HeaderRow","map","TableBody","$showLastRowBottomBorder","EmptyViewCell","colSpan","_Fragment","BodyRow","$alternating","$isSelectable","$isSelected","LoaderWrapper","LoadingDotsSpinner","count","ActionBarWrapper","$left","_b","_c","left","$width","_d","clientWidth","ActionBar","$float","$scrollable","BodyMD","TextButton","renderSelectionBar","r"],"mappings":"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"}
+{"version":3,"file":"data-table.js","sources":["../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\n// @catalog\n/**\n * Renders a sortable, selectable data table with scroll-aware action bar and loading state support.\n *\n * Use `DataTable` when presenting structured multi-column data that users may need to sort by\n * column or select rows for bulk actions. Row selection, sort indicators, and the action bar\n * content are all externally controlled; the component manages scroll detection, sticky-header\n * positioning, and floating action bar behaviour internally.\n * @keywords columns, grid, rows, table\n */\nexport const DataTable = ({\n    id,\n    headers,\n    rows,\n    className,\n    sortIndicators,\n    alternatingRows,\n    loadState = \"success\",\n    enableMultiSelect,\n    selectedIds,\n    disabledIds,\n    enableActionBar,\n    enableActionBarWithoutSelection,\n    enableSelectAll,\n    enableStickyHeader,\n    emptyView,\n    actionBarContent,\n    renderCustomEmptyView,\n    onHeaderClick,\n    onSelect,\n    onSelectAll,\n    onClearSelectionClick,\n    ...otherProps\n}: DataTableProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const tableRef = useRef<HTMLTableElement>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const keyColumns = headers.filter(\n        (header): header is Exclude<HeaderProps, string> => {\n            return typeof header !== \"string\" && !!header.keyColumn;\n        }\n    );\n\n    const [actionBarStrategy, setActionBarStrategy] = useState<\n        \"sticky\" | \"fixed\" | \"inline\"\n    >(\"inline\");\n    const [scrollable, setScrollable] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n    useApplyStyle(actionBarWrapperRef, {\n        [styles.tokens.actionBarWrapperLeft]:\n            isFloatingActionBar && tableRef.current\n                ? `${tableRef.current.getBoundingClientRect().left}px`\n                : undefined,\n        [styles.tokens.actionBarWrapperWidth]: tableRef.current\n            ? `${tableRef.current.clientWidth}px`\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const useUpdateActionBarBehaviour = useEvent(() => {\n        updateActionBarBehaviour();\n    });\n\n    useEffect(() => {\n        useUpdateActionBarBehaviour();\n    }, [useUpdateActionBarBehaviour]);\n\n    const updateActionBarBehaviourThrottled = useThrottle(\n        () => updateActionBarBehaviour(),\n        100\n    );\n\n    useResizeDetector({\n        targetRef: wrapperRef,\n        onResize: () => updateActionBarBehaviourThrottled(),\n    });\n\n    useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n    useEventListener(\n        \"scroll\",\n        updateActionBarBehaviourThrottled,\n        wrapperRef.current\n    );\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\n        if (!rows || !rows.length || !selectedIds) {\n            return false;\n        }\n        return selectedIds.length === rows.length;\n    };\n\n    const isIndeterminateCheckbox = (): boolean => {\n        return (\n            !!selectedIds &&\n            selectedIds.length !== 0 &&\n            !isAllCheckboxSelected()\n        );\n    };\n\n    const isHeaderCheckboxDisabled = (): boolean => {\n        return !rows || !rows.length;\n    };\n\n    const isRowSelected = (rowId: string): boolean => {\n        return !!selectedIds?.includes(rowId);\n    };\n\n    const isAlternatingRow = (index: number): boolean => {\n        return !!alternatingRows && index % 2 === 1;\n    };\n\n    const isDisabledRow = (rowId: string): boolean => {\n        return !!disabledIds?.includes(rowId);\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!otherProps[\"data-testid\"]) return undefined;\n        return `${otherProps[\"data-testid\"]}-${subStr}`;\n    };\n\n    const getTotalColumns = (): number => {\n        return headers.length + (enableMultiSelect ? 1 : 0);\n    };\n\n    const getSortDirection = (fieldKey: string) => {\n        return sortIndicators?.[fieldKey];\n    };\n\n    const getHeaderAriaSort = (fieldKey: string) => {\n        const sortDirection = getSortDirection(fieldKey);\n\n        if (!sortDirection) {\n            return undefined;\n        }\n\n        return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n    };\n\n    const getSortButtonAriaLabel = (fieldKey: string) => {\n        const nextSortDirection =\n            getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n        return ` by ${nextSortDirection} order`;\n    };\n\n    const getHeaderCellId = (fieldKey: string) => {\n        return `${internalId}-header-${fieldKey}`;\n    };\n    const getCellId = (rowId: string, fieldKey: string) => {\n        return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n    };\n\n    const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n        const keyColumnIds = keyColumns.map((header) =>\n            getCellId(rowId, header.fieldKey)\n        );\n\n        return concatIds(...keyColumnIds);\n    };\n\n    const updateActionBarBehaviour = () => {\n        if (\n            !wrapperRef.current ||\n            !headerRef.current ||\n            !actionBarWrapperRef.current\n        ) {\n            return;\n        }\n\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        const headerBounds = headerRef.current.getBoundingClientRect();\n\n        let strategy: typeof actionBarStrategy = \"inline\";\n\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n        if (\n            wrapperBounds.top > window.innerHeight ||\n            wrapperBounds.bottom < 0\n        ) {\n            // if fully out of the viewport, disable floating\n            strategy = \"inline\";\n        } else if (scrollable) {\n            if (\n                wrapperBounds.top > 0 &&\n                wrapperBounds.top < window.innerHeight &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if fully in the viewport, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.top < 0 &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if partially offscreen at the top, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.bottom > window.innerHeight &&\n                Math.max(wrapperBounds.top, headerBounds.bottom) +\n                    headerBounds.height <\n                    window.innerHeight\n            ) {\n                // if offscreen at the bottom, pin to the viewport, up until the table/header\n                strategy = \"fixed\";\n            }\n        } else if (\n            wrapperBounds.bottom > window.innerHeight &&\n            headerBounds.bottom + headerBounds.height < window.innerHeight\n        ) {\n            // if offscreen at the bottom, pin to the viewport, up until the header\n            strategy = \"fixed\";\n        }\n\n        setScrollable(scrollable);\n        setActionBarStrategy(strategy);\n\n        if (strategy === \"fixed\") {\n            setIsFloatingActionBar(true);\n        } else if (strategy === \"sticky\") {\n            const beforeScrollEnd =\n                wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n                wrapperRef.current.scrollHeight;\n            setIsFloatingActionBar(beforeScrollEnd);\n        } else {\n            setIsFloatingActionBar(false);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleHeaderClick = (fieldKey: string) => {\n        onHeaderClick?.(fieldKey);\n    };\n\n    const handleHeaderButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>,\n        fieldKey: string\n    ) => {\n        event.stopPropagation();\n        onHeaderClick?.(fieldKey);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeaders = () => (\n        <thead\n            ref={headerRef}\n            className={enableStickyHeader ? styles.stickyHeader : undefined}\n        >\n            <tr className={styles.headerRow}>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </tr>\n        </thead>\n    );\n\n    const renderHeaderCell = (header: HeaderProps) => {\n        const {\n            fieldKey,\n            label,\n            clickable = false,\n            style,\n        } = typeof header === \"string\"\n            ? {\n                  fieldKey: header,\n                  label: header,\n                  style: undefined,\n              }\n            : header;\n\n        const isSortable = !!getSortDirection(fieldKey);\n        const headerCellId = getHeaderCellId(fieldKey);\n        return (\n            <th\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                className={clsx(\n                    styles.headerCell,\n                    clickable && styles.headerCellClickable\n                )}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <div className={styles.headerCellContent} id={headerCellId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </div>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </th>\n        );\n    };\n\n    const renderSortedArrow = (fieldKey: string) => {\n        const isSorted = sortIndicators?.[fieldKey];\n\n        if (!isSorted) {\n            return <></>;\n        }\n        if (isSorted === \"asc\") {\n            return (\n                <ArrowUpIcon\n                    aria-hidden\n                    data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n                />\n            );\n        }\n        return (\n            <ArrowDownIcon\n                aria-hidden\n                data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n            />\n        );\n    };\n\n    const renderHeaderCheckBox = () => {\n        return (\n            <th\n                data-testid={getDataTestId(\"header-selection\")}\n                className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n                scope=\"col\"\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <VisuallyHidden>Row selection</VisuallyHidden>\n                    {enableSelectAll && (\n                        <Checkbox\n                            checked={isAllCheckboxSelected()}\n                            indeterminate={isIndeterminateCheckbox()}\n                            disabled={isHeaderCheckboxDisabled()}\n                            aria-label=\"Select all rows\"\n                            onClick={() => {\n                                if (onSelectAll) {\n                                    onSelectAll(isAllCheckboxSelected());\n                                }\n                            }}\n                        />\n                    )}\n                </div>\n            </th>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <tr className={styles.bodyRow}>\n                <td\n                    className={styles.emptyStateCell}\n                    colSpan={getTotalColumns()}\n                >\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </td>\n            </tr>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <tr\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        className={clsx(\n                            styles.bodyRow,\n                            isFloatingActionBar &&\n                                styles.bodyRowWithBottomBorder,\n                            isAlternatingRow(index) &&\n                                styles.bodyRowAlternating,\n                            enableMultiSelect && styles.bodyRowSelectable,\n                            isRowSelected(row.id.toString()) &&\n                                styles.bodyRowSelected\n                        )}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </tr>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header === \"string\" ? undefined : header.style;\n        const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n        const rowId = row.id.toString();\n        const cellData = row[fieldKey];\n        const cellId = `${rowId}-${fieldKey}`;\n\n        let cellContent: React.ReactNode;\n        if (typeof cellData === \"string\" || typeof cellData === \"number\") {\n            cellContent = (\n                <Typography.BodyBL className={styles.bodyCellText}>\n                    {cellData}\n                </Typography.BodyBL>\n            );\n        } else if (typeof cellData === \"function\") {\n            cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n        } else {\n            cellContent = cellData;\n        }\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                className={styles.bodyCell}\n                style={style}\n            >\n                {cellContent}\n            </td>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <Checkbox\n                        checked={isRowSelected(rowId)}\n                        aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n                        onClick={() => {\n                            if (onSelect) {\n                                onSelect(rowId, !isRowSelected(rowId));\n                            }\n                        }}\n                        disabled={isDisabledRow(rowId)}\n                        focusableWhenDisabled={isDisabledRow(rowId)}\n                    />\n                </div>\n            </td>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        let emptyTitle: JSX.Element;\n        if (!emptyView?.title) {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {\"No <items> found\"}\n                </Typography.HeadingSM>\n            );\n        } else if (typeof emptyView.title === \"string\") {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {emptyView.title}\n                </Typography.HeadingSM>\n            );\n        } else {\n            emptyTitle = emptyView.title;\n        }\n\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={emptyTitle}\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <tr className={styles.bodyRow}>\n                <td colSpan={getTotalColumns()}>\n                    <div\n                        className={styles.loadingStateWrapper}\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </div>\n                </td>\n            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n        const counter = `item${count === 1 ? \"\" : \"s\"}`;\n\n        return (\n            <>\n                <div\n                    ref={actionBarWrapperRef}\n                    className={styles.actionBarWrapper}\n                    data-strategy={actionBarStrategy}\n                >\n                    <div\n                        data-testid=\"data-table-action-bar\"\n                        className={clsx(\n                            styles.actionBar,\n                            isFloatingActionBar && styles.actionBarFloating\n                        )}\n                    >\n                        <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n                        {count > 0 ? (\n                            <BasicButton\n                                className={styles.actionBarButton}\n                                type=\"button\"\n                                aria-label={`Clear selection of ${count} ${counter}`}\n                                onClick={onClearSelectionClick}\n                            >\n                                Clear selection\n                            </BasicButton>\n                        ) : (\n                            <div className={styles.actionBarGap} />\n                        )}\n                        {actionBarContent}\n                    </div>\n                </div>\n                {/* leave a fixed space when action bar floats to avoid layout shift */}\n                {actionBarStrategy !== \"sticky\" && (\n                    <div className={styles.actionBarSpacer} />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={clsx(\n                styles.tableWrapper,\n                scrollable && styles.tableWrapperScrollable,\n                className\n            )}\n            ref={wrapperRef}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <div className={styles.tableContainer}>\n                <table ref={tableRef} className={styles.table}>\n                    {renderHeaders()}\n                    <tbody>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </tbody>\n                </table>\n            </div>\n            {enableActionBar &&\n                ((selectedIds && selectedIds.length > 0) ||\n                    enableActionBarWithoutSelection) &&\n                renderSelectionBar()}\n        </div>\n    );\n};\n"],"names":["DataTable","_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","styles.tableWrapperScrollable","ref","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","counter","styles.actionBarWrapper","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","styles.actionBarGap","styles.actionBarSpacer","renderSelectionBar"],"mappings":"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"}

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

@@ -1,53 +1,32 @@
-interface TableProps {
-    $end: boolean;
-    $scrollable: boolean;
-    $stickyHeader: boolean | undefined;
-}
-interface TableBodyProps {
-    $showLastRowBottomBorder: boolean;
-}
-interface HeaderCellProps {
-    $clickable: boolean;
-    $isCheckbox: boolean;
-}
-interface BodyRowProps {
-    $alternating: boolean;
-    $isSelected?: boolean;
-    $isSelectable?: boolean;
-}
-interface BodyCellProps {
-    $isCheckbox: boolean;
-}
-interface ActionBarWrapperProps {
-    $fixed: boolean;
-    $left?: number | undefined;
-    $width?: number | undefined;
-}
-interface ActionBarProps {
-    $float: boolean;
-    $scrollable: boolean;
-}
-export declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, TableProps>> & string;
-export declare const TableBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, TableBodyProps>> & string;
-export declare const ActionBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ActionBarWrapperProps>> & string;
-export declare const TextButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, never>> & string;
-export declare const ActionBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ActionBarProps>> & string;
-export declare const HeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>> & string;
-export declare const HeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, HeaderCellProps>> & string;
-export declare const HeaderCellWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BodyRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, BodyRowProps>> & string;
-export declare const BodyCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, BodyCellProps>> & string;
-export declare const BodyCellContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const CheckBoxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LoaderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ErrorDisplayTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-}, never>> & string;
-export declare const EmptyViewCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
-export {};
+export declare const tokens: {
+    readonly actionBarWrapperLeft: "--fds-internal-dataTable-actionBarWrapper-left";
+    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;
+export declare const headerRow: import("@linaria/core").LinariaClassName;
+export declare const headerCell: import("@linaria/core").LinariaClassName;
+export declare const headerCellClickable: import("@linaria/core").LinariaClassName;
+export declare const headerCellCheckbox: import("@linaria/core").LinariaClassName;
+export declare const headerCellContent: import("@linaria/core").LinariaClassName;
+export declare const bodyCell: import("@linaria/core").LinariaClassName;
+export declare const bodyRow: import("@linaria/core").LinariaClassName;
+export declare const bodyRowAlternating: import("@linaria/core").LinariaClassName;
+export declare const bodyRowSelected: import("@linaria/core").LinariaClassName;
+export declare const bodyRowSelectable: import("@linaria/core").LinariaClassName;
+export declare const bodyRowWithBottomBorder: import("@linaria/core").LinariaClassName;
+export declare const bodyCellCheckbox: import("@linaria/core").LinariaClassName;
+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 actionBarGap: 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 loadingStateWrapper: import("@linaria/core").LinariaClassName;
+export declare const emptyStateTitle: import("@linaria/core").LinariaClassName;

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

@@ -1,149 +1,2 @@
-import e,{css as r}from"styled-components";import{BasicButton as t}from"../shared/input-wrapper/input-wrapper.js";import{lineClampCss as o}from"../shared/styles/index.js";import{Typography as i}from"../typography/index.js";import{V3_Colour as d,V3_Border as l,V3_Radius as n,V3_Font as s,V3_Motion as a,V3_Spacing as $,V3_Shadow as m}from"../v3_theme/index.js";const c=d.border,p=d.text,b=e.div`
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    border: ${l["width-010"]} ${l.solid} ${c};
-    border-radius: ${n.md};
-
-    // Hide scrollbar
-    &::-webkit-scrollbar {
-        display: none;
-    }
-    * {
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-    }
-`,g=e.div`
-    flex: 1;
-`,h=e.table`
-    th:last-child,
-    td:last-child {
-        padding-right: 1.5rem;
-    }
-    th:first-child,
-    td:first-child {
-        padding-left: 1.5rem;
-    }
-    text-align: left;
-    border-collapse: separate;
-    border-spacing: 0;
-    width: 100%;
-
-    ${e=>{if(e.$stickyHeader)return r`
-                thead {
-                    position: sticky;
-                    top: 0;
-                    z-index: 20;
-                }
-            `}};
-`,f=e.tbody`
-    tr:last-child {
-        td {
-            border-bottom: ${e=>e.$showLastRowBottomBorder?`${l["width-010"]} ${l.solid} ${c}`:"none"};
-        }
-    }
-`,x=e.div`
-    bottom: 0;
-    ${e=>{if(e.$fixed){const t=e.$left?`${e.$left}px`:"0",o=e.$width?`${e.$width}px`:"100%";return r`
-                position: fixed;
-                left: ${t};
-                width: ${o};
-            `}return r`
-                position: sticky;
-                left: 0;
-            `}};
-`,w=e(t)`
-    ${s["body-md-semibold"]}
-    cursor: pointer;
-    color: ${d["text-primary"]};
-    transition: ${a["duration-150"]} ${a["ease-default"]};
-    padding: 0.75rem;
-    margin: -0.75rem 0;
-
-    &:hover {
-        color: ${d["text-hover"]};
-    }
-`,u=e.div`
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    height: 3.5rem;
-    padding: ${$["spacing-16"]} ${$["spacing-24"]};
-    border-top: ${l["width-010"]} ${l.solid} ${c};
-    background-color: ${d["bg-selected"]};
-    transition: all 300ms ease;
-    ${e=>e.$float?r`
-                transform: translateX(0.5rem) translateY(-2rem);
-                border-radius: ${n.sm};
-                box-shadow: ${m["xs-subtle"]};
-                width: calc(100% - ${$["spacing-16"]});
-                border: ${l["width-010"]} ${l.solid}
-                    ${c};
-            `:r`
-                border-radius: ${n.none} ${n.none}
-                    ${n.sm} ${n.sm};
-            `}
-`,v=e.tr`
-    background-color: ${d["bg-stronger"]};
-    height: 6rem;
-    border-bottom: ${l["width-010"]} ${l.solid}
-        ${c};
-`,y=e.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: ${p};
-    border-bottom: ${l["width-010"]} ${l.solid}
-        ${c};
-    ${e=>{if(e.$isCheckbox)return r`
-                width: 4rem;
-            `}};
-`,k=e.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    svg {
-        color: ${p};
-        margin-left: 0.5rem;
-    }
-`,j=e.tr`
-    background-color: ${e=>e.$isSelected?r`
-                ${d["bg-selected"]};
-            `:e.$alternating?r`
-                ${d["bg-strong"]};
-            `:r`
-                ${d.bg};
-            `};
-    border-top: ${l["width-010"]} ${l.solid} ${c};
-    &:hover {
-        ${e=>{if(e.$isSelectable)return r`
-                    background-color: ${d["bg-hover-strong"]};
-                `}};
-    }
-`,B=e.td`
-    padding: ${e=>e.$isCheckbox?"1.25rem 0.5rem 1.25rem 1.5rem":"1.25rem 1rem"};
-    vertical-align: middle;
-    color: ${p};
-    border-bottom: ${l["width-010"]} ${l.solid}
-        ${c};
-`,C=e(i.BodyBL)`
-    ${o(2)}
-    text-overflow: ellipsis;
-`,H=e.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`,S=e.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 4rem 0;
-`,E=e(i.HeadingSM)`
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-`,L=e.td`
-    padding: 4rem 0;
-`;export{u as ActionBar,x as ActionBarWrapper,B as BodyCell,C as BodyCellContent,j as BodyRow,H as CheckBoxWrapper,L as EmptyViewCell,E as ErrorDisplayTitle,y as HeaderCell,k as HeaderCellWrapper,v as HeaderRow,S as LoaderWrapper,h as Table,f as TableBody,g as TableContainer,b as TableWrapper,w as TextButton};
+import"./data-table.styles_1tnlmhe.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",l="h1744qno",p="h1ec4wtd",b="hp15x3z",d="h4ne4e9",f="hfa3d3x",s="b6ks76c",h="b1bceurq",i="b8t2s91",o="bjmthdi",x="b1tvp43a",q="bx1feaw",w="b1g3gl2s",y="b1yxh9il",m="e1w2nktt",W="sxywpxo",g="anoy5c0",u="a1gvi5ye",B="aag0lf9",_="a1euqarq",j="adhafdm",k="a1pcc0nq",v="l1qkofer",T="e8l591w";export{_ as actionBar,g as actionBarButton,j as actionBarFloating,u as actionBarGap,B as actionBarSpacer,k as actionBarWrapper,s as bodyCell,w as bodyCellCheckbox,y as bodyCellText,h as bodyRow,i as bodyRowAlternating,x as bodyRowSelectable,o as bodyRowSelected,q as bodyRowWithBottomBorder,m as emptyStateCell,T as emptyStateTitle,p as headerCell,d as headerCellCheckbox,b as headerCellClickable,f as headerCellContent,l as headerRow,v 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.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface TableProps {\n    $end: boolean;\n    $scrollable: boolean;\n    $stickyHeader: boolean | undefined;\n}\ninterface TableBodyProps {\n    $showLastRowBottomBorder: boolean;\n}\ninterface HeaderCellProps {\n    $clickable: boolean;\n    $isCheckbox: boolean;\n}\ninterface BodyRowProps {\n    $alternating: boolean;\n    $isSelected?: boolean;\n    $isSelectable?: boolean;\n}\n\ninterface BodyCellProps {\n    $isCheckbox: boolean;\n}\n\ninterface ActionBarWrapperProps {\n    $fixed: boolean;\n    $left?: number | undefined;\n    $width?: number | undefined;\n}\n\ninterface ActionBarProps {\n    $float: boolean;\n    $scrollable: boolean;\n}\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = V3_Colour[\"border\"];\nconst fontColor = V3_Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div`\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n    border-radius: ${V3_Radius[\"md\"]};\n\n    // Hide scrollbar\n    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n    }\n`;\n\nexport const TableContainer = styled.div`\n    flex: 1;\n`;\n\nexport const Table = styled.table<TableProps>`\n    th:last-child,\n    td:last-child {\n        padding-right: 1.5rem;\n    }\n    th:first-child,\n    td:first-child {\n        padding-left: 1.5rem;\n    }\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n\n    ${(props) => {\n        if (props.$stickyHeader) {\n            return css`\n                thead {\n                    position: sticky;\n                    top: 0;\n                    z-index: 20;\n                }\n            `;\n        }\n    }};\n`;\n\nexport const TableBody = styled.tbody<TableBodyProps>`\n    tr:last-child {\n        td {\n            border-bottom: ${(props) =>\n                props.$showLastRowBottomBorder\n                    ? `${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor}`\n                    : \"none\"};\n        }\n    }\n`;\n\nexport const ActionBarWrapper = styled.div<ActionBarWrapperProps>`\n    bottom: 0;\n    ${(props) => {\n        if (props.$fixed) {\n            const left = props.$left ? `${props.$left}px` : \"0\";\n            const width = props.$width ? `${props.$width}px` : \"100%\";\n            return css`\n                position: fixed;\n                left: ${left};\n                width: ${width};\n            `;\n        } else {\n            return css`\n                position: sticky;\n                left: 0;\n            `;\n        }\n    }};\n`;\n\nexport const TextButton = styled(BasicButton)`\n    ${V3_Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${V3_Colour[\"text-primary\"]};\n    transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n\nexport const ActionBar = styled.div<ActionBarProps>`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-24\"]};\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n    background-color: ${V3_Colour[\"bg-selected\"]};\n    transition: all 300ms ease;\n    ${(props) => {\n        if (props.$float) {\n            return css`\n                transform: translateX(0.5rem) translateY(-2rem);\n                border-radius: ${V3_Radius[\"sm\"]};\n                box-shadow: ${V3_Shadow[\"xs-subtle\"]};\n                width: calc(100% - ${V3_Spacing[\"spacing-16\"]});\n                border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                    ${borderColor};\n            `;\n        } else {\n            return css`\n                border-radius: ${V3_Radius[\"none\"]} ${V3_Radius[\"none\"]}\n                    ${V3_Radius[\"sm\"]} ${V3_Radius[\"sm\"]};\n            `;\n        }\n    }}\n`;\n\nexport const HeaderRow = styled.tr`\n    background-color: ${V3_Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${borderColor};\n`;\n\nexport const HeaderCell = styled.th<HeaderCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    text-align: left;\n    cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${borderColor};\n    ${(props) => {\n        if (props.$isCheckbox) {\n            return css`\n                width: 4rem;\n            `;\n        }\n    }};\n`;\n\nexport const HeaderCellWrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    svg {\n        color: ${fontColor};\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const BodyRow = styled.tr<BodyRowProps>`\n    background-color: ${(props) => {\n        if (props.$isSelected) {\n            return css`\n                ${V3_Colour[\"bg-selected\"]};\n            `;\n        } else if (props.$alternating) {\n            return css`\n                ${V3_Colour[\"bg-strong\"]};\n            `;\n        } else {\n            return css`\n                ${V3_Colour[\"bg\"]};\n            `;\n        }\n    }};\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n    &:hover {\n        ${(props) => {\n            if (props.$isSelectable) {\n                return css`\n                    background-color: ${V3_Colour[\"bg-hover-strong\"]};\n                `;\n            }\n        }};\n    }\n`;\n\nexport const BodyCell = styled.td<BodyCellProps>`\n    padding: ${(props) =>\n        props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${borderColor};\n`;\n\nexport const BodyCellContent = styled(Typography.BodyBL)`\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n`;\n\nexport const CheckBoxWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const LoaderWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const ErrorDisplayTitle = styled(Typography.HeadingSM)`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n\nexport const EmptyViewCell = styled.td`\n    padding: 4rem 0;\n`;\n"],"names":["borderColor","V3_Colour","fontColor","TableWrapper","styled","div","V3_Border","V3_Radius","TableContainer","Table","table","props","$stickyHeader","css","TableBody","tbody","$showLastRowBottomBorder","ActionBarWrapper","$fixed","left","$left","width","$width","TextButton","BasicButton","V3_Font","V3_Motion","ActionBar","V3_Spacing","$float","V3_Shadow","HeaderRow","tr","HeaderCell","th","$isCheckbox","$clickable","HeaderCellWrapper","BodyRow","$isSelected","$alternating","$isSelectable","BodyCell","td","BodyCellContent","Typography","BodyBL","lineClampCss","CheckBoxWrapper","LoaderWrapper","ErrorDisplayTitle","HeadingSM","EmptyViewCell"],"mappings":"yWAuDA,MAAMA,EAAcC,EAAkB,OAChCC,EAAYD,EAAgB,KAKrBE,EAAeC,EAAOC,GAAG;;;;cAIxBC,EAAU,gBAAgBA,EAAiB,SAAKN;qBACzCO,EAAc;;;;;;;;;;EAYtBC,EAAiBJ,EAAOC,GAAG;;EAI3BI,EAAQL,EAAOM,KAAiB;;;;;;;;;;;;;;MActCC,IACC,GAAIA,EAAMC,cACN,OAAOC,CAAG;;;;;;aAOd;EAIKC,EAAYV,EAAOW,KAAqB;;;6BAGvBJ,GACdA,EAAMK,yBACA,GAAGV,EAAU,gBAAgBA,EAAiB,SAAKN,IACnD;;;EAKTiB,EAAmBb,EAAOC,GAA0B;;MAE1DM,IACC,GAAIA,EAAMO,OAAQ,CACd,MAAMC,EAAOR,EAAMS,MAAQ,GAAGT,EAAMS,UAAY,IAC1CC,EAAQV,EAAMW,OAAS,GAAGX,EAAMW,WAAa,OACnD,OAAOT,CAAG;;wBAEEM;yBACCE;aAEjB,CACI,OAAOR,CAAG;;;aAId;EAIKU,EAAanB,EAAOoB,EAAY;MACvCC,EAAQ;;aAEDxB,EAAU;kBACLyB,EAAU,mBAAmBA,EAAU;;;;;iBAKxCzB,EAAU;;EAId0B,EAAYvB,EAAOC,GAAmB;;;;;eAKpCuB,EAAW,iBAAiBA,EAAW;kBACpCtB,EAAU,gBAAgBA,EAAiB,SAAKN;wBAC1CC,EAAU;;MAE3BU,GACKA,EAAMkB,OACChB,CAAG;;iCAEWN,EAAc;8BACjBuB,EAAU;qCACHF,EAAW;0BACtBtB,EAAU,gBAAgBA,EAAiB;sBAC/CN;cAGHa,CAAG;iCACWN,EAAgB,QAAKA,EAAgB;sBAChDA,EAAc,MAAKA,EAAc;;EAM1CwB,EAAY3B,EAAO4B,EAAE;wBACV/B,EAAU;;qBAEbK,EAAU,gBAAgBA,EAAiB;UACtDN;EAGGiC,EAAa7B,EAAO8B,EAAmB;eACpCvB,GACRA,EAAMwB,YAAc,gCAAkC;;cAE/CxB,GAAWA,EAAMyB,WAAa,UAAY;;aAE5ClC;qBACQI,EAAU,gBAAgBA,EAAiB;UACtDN;MACHW,IACC,GAAIA,EAAMwB,YACN,OAAOtB,CAAG;;aAGd;EAIKwB,EAAoBjC,EAAOC,GAAG;;;;;;iBAM1BH;;;EAKJoC,EAAUlC,EAAO4B,EAAgB;wBACrBrB,GACbA,EAAM4B,YACC1B,CAAG;kBACJZ,EAAU;cAETU,EAAM6B,aACN3B,CAAG;kBACJZ,EAAU;cAGTY,CAAG;kBACJZ,EAAc;;kBAIdK,EAAU,gBAAgBA,EAAiB,SAAKN;;UAEvDW,IACC,GAAIA,EAAM8B,cACN,OAAO5B,CAAG;wCACcZ,EAAU;iBAEtC;;EAKCyC,EAAWtC,EAAOuC,EAAiB;eAChChC,GACRA,EAAMwB,YAAc,gCAAkC;;aAEjDjC;qBACQI,EAAU,gBAAgBA,EAAiB;UACtDN;EAGG4C,EAAkBxC,EAAOyC,EAAWC,OAAO;MAClDC,EAAa;;EAINC,EAAkB5C,EAAOC,GAAG;;;;EAM5B4C,EAAgB7C,EAAOC,GAAG;;;;;EAO1B6C,EAAoB9C,EAAOyC,EAAWM,UAAU;;;EAKhDC,EAAgBhD,EAAOuC,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 actionBarGap = css`\n    width: 0.75rem;\n`;\n\nexport const actionBarSpacer = css`\n    height: 3.5rem;\n`;\n\nexport const actionBar = css`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background-color: ${Colour[\"bg-selected\"]};\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]} ${Radius[\"sm\"]}\n        ${Radius[\"sm\"]};\n`;\n\nexport const actionBarFloating = css`\n    transform: translateX(0.5rem) translateY(-2rem);\n    border-radius: ${Radius[\"sm\"]};\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    width: calc(100% - ${Spacing[\"spacing-16\"]});\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const actionBarWrapper = css`\n    ${tokens.actionBarWrapperLeft}: initial;\n    ${tokens.actionBarWrapperWidth}: initial;\n\n    &[data-strategy=\"inline\"] {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: var(${tokens.actionBarWrapperWidth}, 100%);\n    }\n\n    &[data-strategy=\"fixed\"] {\n        position: fixed;\n        bottom: 0;\n        left: var(${tokens.actionBarWrapperLeft}, 0px);\n        width: var(${tokens.actionBarWrapperWidth}, 100%);\n    }\n\n    &[data-strategy=\"sticky\"] {\n        position: sticky;\n        bottom: 0;\n    }\n`;\n\n// =============================================================================\n// Load and error states\n// =============================================================================\nexport const loadingStateWrapper = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const emptyStateTitle = css`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n"],"names":["tokens","actionBarWrapperLeft","actionBarWrapperWidth","tableWrapper","tableWrapperScrollable","tableContainer","table","stickyHeader","headerRow","headerCell","headerCellClickable","headerCellCheckbox","headerCellContent","bodyCell","bodyRow","bodyRowAlternating","bodyRowSelected","bodyRowSelectable","bodyRowWithBottomBorder","bodyCellCheckbox","bodyCellText","emptyStateCell","selectionCheckboxWrapper","actionBarButton","actionBarGap","actionBarSpacer","actionBar","actionBarFloating","actionBarWrapper","loadingStateWrapper","emptyStateTitle"],"mappings":"kEAaO,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,EAAY,WAIZC,EAAe,UAIfC,EAAS,WAaTC,EAAiB,UAQjBC,EAAgB,WA2BhBC,EAAmB,WAOnBC,EAAe"}

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

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