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

package/codemods/index.ts

@@ -1,23 +1,36 @@
-import { API, FileInfo, JSCodeshift } from "jscodeshift";
+import {
+    API,
+    ASTPath,
+    FileInfo,
+    JSCodeshift,
+    MemberExpression,
+} from "jscodeshift";
 import { CodemodUtils } from "../codemod-utils";
-import { sizePropMapping } from "./data";
+import { textComponentMap, textStyleFontMap, weightMap } from "./data";
 
 // ======= Constants ======= //
 
 const IMPORT_PATHS = {
-    TEXT_LIST: "@lifesg/react-design-system/text-list",
-    V2_TEXT_LIST: "@lifesg/react-design-system/v2_text-list",
+    V2_TEXT: "@lifesg/react-design-system/v2_text",
     DESIGN_SYSTEM: "@lifesg/react-design-system",
+    TYPOGRAPHY: "@lifesg/react-design-system/typography",
+    THEME: "@lifesg/react-design-system/theme",
 };
 
 const IMPORT_SPECIFIERS = {
-    TEXT_LIST: "TextList",
-    V2_TEXT_LIST: "V2_TextList",
+    V2_TEXT: "V2_Text",
+    V2_TEXT_STYLE_HELPER: "V2_TextStyleHelper",
+    TYPOGRAPHY: "Typography",
+    FONT: "Font",
 };
 
 const JSX_IDENTIFIERS = {
-    TEXT_LIST: "TextList",
-    V2_TEXT_LIST: "V2_TextList",
+    V2_TEXT: "V2_Text",
+    TYPOGRAPHY: "Typography",
+};
+
+const IDENTIFIERS = {
+    V2_GET_TEXT_STYLE: "getTextStyle",
 };
 
 // ======= Transformer Function ======= //
@@ -26,84 +39,156 @@ export default function transformer(file: FileInfo, api: API) {
     const j: JSCodeshift = api.jscodeshift;
     const source = j(file.source);
 
-    const isV2TextListImport = CodemodUtils.hasImport(
+    const importsText = CodemodUtils.hasImport(
+        source,
+        api,
+        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
+        IMPORT_SPECIFIERS.V2_TEXT
+    );
+    const importsTextStyleHelper = CodemodUtils.hasImport(
         source,
         api,
-        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT_LIST],
-        IMPORT_SPECIFIERS.V2_TEXT_LIST
+        [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
+        IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER
     );
 
-    if (isV2TextListImport) {
+    const replaceWithTypography = (
+        path: ASTPath<MemberExpression>,
+        newComponentValue: string
+    ) => {
+        path.replace(
+            j.memberExpression(
+                j.identifier(JSX_IDENTIFIERS.TYPOGRAPHY),
+                j.identifier(newComponentValue)
+            )
+        );
+    };
+
+    if (importsText) {
         CodemodUtils.addImport(
             source,
             api,
-            IMPORT_PATHS.TEXT_LIST,
-            IMPORT_SPECIFIERS.TEXT_LIST
+            IMPORT_PATHS.TYPOGRAPHY,
+            IMPORT_SPECIFIERS.TYPOGRAPHY
         );
 
         CodemodUtils.removeImport(
             source,
             api,
-            [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT_LIST],
-            IMPORT_SPECIFIERS.V2_TEXT_LIST
+            [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
+            IMPORT_SPECIFIERS.V2_TEXT
         );
 
         source
-            .find(j.Identifier, { name: JSX_IDENTIFIERS.V2_TEXT_LIST })
+            .find(j.Identifier, { name: JSX_IDENTIFIERS.V2_TEXT })
             .forEach((path) => {
-                path.node.name = JSX_IDENTIFIERS.TEXT_LIST;
+                // Replace V2_Text with Typography
+                path.node.name = JSX_IDENTIFIERS.TYPOGRAPHY;
             });
 
+        // Map to respective V3 Typography component usage
         source.find(j.MemberExpression).forEach((path) => {
-            if (
-                j.Identifier.check(path.node.object) &&
-                path.node.object.name === JSX_IDENTIFIERS.V2_TEXT_LIST
-            ) {
-                path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST;
+            const propertyNameParts: string[] = [];
+            let currentPath = path.node;
+            let startsWithTypography = false;
+
+            while (j.MemberExpression.check(currentPath)) {
+                const property = currentPath.property;
+                const object = currentPath.object;
+
+                if (j.Identifier.check(property)) {
+                    propertyNameParts.unshift(property.name);
+                }
+
+                if (j.MemberExpression.check(object)) {
+                    currentPath = object;
+                } else if (j.Identifier.check(object)) {
+                    if (object.name === JSX_IDENTIFIERS.TYPOGRAPHY) {
+                        startsWithTypography = true;
+                    }
+                    break;
+                } else {
+                    break;
+                }
             }
-        });
 
-        source.find(j.JSXMemberExpression).forEach((path) => {
-            if (
-                j.JSXIdentifier.check(path.node.object) &&
-                path.node.object.name === JSX_IDENTIFIERS.V2_TEXT_LIST
-            ) {
-                path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST;
+            if (startsWithTypography) {
+                const propertyName = propertyNameParts.join(
+                    "."
+                ) as keyof typeof textComponentMap;
+                const newTypographyValue = textComponentMap[propertyName];
+                if (newTypographyValue) {
+                    replaceWithTypography(path, newTypographyValue);
+                }
             }
         });
+    }
 
-        source.find(j.JSXOpeningElement).forEach((path) => {
-            const openingElement = path.node;
-            let isTextListElement = false;
+    if (importsTextStyleHelper) {
+        let usesTextStyleHelper = false;
 
+        source.find(j.CallExpression).forEach((path) => {
             if (
-                j.JSXMemberExpression.check(openingElement.name) &&
-                j.JSXIdentifier.check(openingElement.name.object) &&
-                openingElement.name.object.name === JSX_IDENTIFIERS.TEXT_LIST
+                !j.CallExpression.check(path.node) ||
+                !j.MemberExpression.check(path.node.callee) ||
+                !j.Identifier.check(path.node.callee.object) ||
+                path.node.callee.object.name !==
+                    IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER ||
+                !j.Identifier.check(path.node.callee.property) ||
+                path.node.callee.property.name !== IDENTIFIERS.V2_GET_TEXT_STYLE
             ) {
-                isTextListElement = true;
+                return;
             }
 
-            if (isTextListElement) {
-                const attributes = openingElement.attributes;
-
-                attributes?.forEach((attribute) => {
-                    if (
-                        j.JSXAttribute.check(attribute) &&
-                        attribute.name.name === "size" &&
-                        j.StringLiteral.check(attribute.value)
-                    ) {
-                        const sizeValue = attribute.value
-                            .value as keyof typeof sizePropMapping;
-                        if (sizePropMapping[sizeValue]) {
-                            attribute.value = j.literal(
-                                sizePropMapping[sizeValue]
-                            );
-                        }
-                    }
-                });
+            const style = j.Literal.check(path.node.arguments[0])
+                ? path.node.arguments[0].value
+                : undefined;
+            const weight = j.Literal.check(path.node.arguments[1])
+                ? path.node.arguments[1].value
+                : "regular";
+
+            if (!style) {
+                return;
             }
+
+            const mappedType =
+                textStyleFontMap[style as keyof typeof textStyleFontMap];
+            const mappedWeight = weightMap[weight as keyof typeof weightMap];
+
+            j(path).replaceWith(() => {
+                return j.memberExpression(
+                    j.identifier("Font"),
+                    j.literal(`${mappedType}-${mappedWeight}`)
+                );
+            });
+
+            usesTextStyleHelper = true;
         });
+
+        if (usesTextStyleHelper) {
+            CodemodUtils.addImport(
+                source,
+                api,
+                IMPORT_PATHS.THEME,
+                IMPORT_SPECIFIERS.FONT
+            );
+        }
+
+        if (
+            !CodemodUtils.hasReferences(
+                source,
+                api,
+                [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
+                IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER
+            )
+        ) {
+            CodemodUtils.removeImport(
+                source,
+                api,
+                [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
+                IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER
+            );
+        }
     }
 
     return source.toSource();

package/data-table/data-table.js

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

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

@@ -1,10 +1,8 @@
-interface TableProps {
-    $end: boolean;
+interface TableWrapperProps {
     $scrollable: boolean;
-    $stickyHeader: boolean | undefined;
 }
-interface TableBodyProps {
-    $showLastRowBottomBorder: boolean;
+interface TableHeadProps {
+    $stickyHeader: boolean | undefined;
 }
 interface HeaderCellProps {
     $clickable: boolean;
@@ -14,23 +12,24 @@ interface BodyRowProps {
     $alternating: boolean;
     $isSelected?: boolean;
     $isSelectable?: boolean;
+    $showLastRowBottomBorder?: boolean;
 }
 interface BodyCellProps {
     $isCheckbox: boolean;
 }
 interface ActionBarWrapperProps {
-    $fixed: boolean;
+    $strategy: "fixed" | "sticky" | "inline";
     $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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$scrollable"> & TableWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$scrollable"> & TableWrapperProps, 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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof TableProps> & TableProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof TableProps> & TableProps, never>>> & string;
-export declare const TableBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "$showLastRowBottomBorder"> & TableBodyProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "$showLastRowBottomBorder"> & TableBodyProps, never>>> & string;
+export declare const Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>> & string;
+export declare const TableHead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "$stickyHeader"> & TableHeadProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "$stickyHeader"> & TableHeadProps, never>>> & string;
+export declare const TableBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>>> & string;
 export declare const ActionBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionBarWrapperProps> & ActionBarWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionBarWrapperProps> & ActionBarWrapperProps, never>>> & string;
 export declare const TextButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never>> & {
     as?: import("styled-components").WebTarget | undefined;
@@ -43,7 +42,8 @@ export declare const TextButton: import("styled-components/dist/types").IStyledC
 }, "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").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionBarProps> & ActionBarProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionBarProps> & ActionBarProps, never>>> & string;
+export declare const ActionBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$float"> & ActionBarProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$float"> & ActionBarProps, never>>> & string;
+export declare const ActionBarSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & 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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>>> & string;
 export declare const HeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, keyof HeaderCellProps> & HeaderCellProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, keyof HeaderCellProps> & HeaderCellProps, never>>> & 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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;