@atom-learning/components 5.12.0 → 5.13.0-beta.0

package/dist/components/data-table/DataTable.d.ts

@@ -6,7 +6,7 @@
 export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defaultSort, initialState, disabledRows, enableRowSelection, onRowSelectionChange, children }: {
     columns: any;
     defaultSort?: import("./DataTable.types").TDefaultSort;
-    children: import("react").ReactNode;
+    children: React.ReactNode;
     initialState?: import("./DataTable.types").InitialState;
     disabledRows?: Record<string, boolean>;
     enableRowSelection?: boolean | ((row: import("@tanstack/table-core").Row<unknown>) => boolean);
@@ -52,6 +52,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -398,7 +400,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             };
         }> | undefined;
     }, "children"> & {
-        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
+        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
     }) => import("react").JSX.Element;
     /** Default table data cell implementation for `DataTable`
      *
@@ -440,6 +442,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -793,7 +797,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     }, "ref"> & import("react").RefAttributes<HTMLTableElement>, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     }, "css" | "theme" | "isSticky"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        theme?: "light" | "primary" | "white" | "primaryDark" | "primaryLight" | undefined;
+        theme?: "white" | "light" | "primary" | "primaryDark" | "primaryLight" | undefined;
         isSticky?: boolean | "true" | undefined;
     }, {
         sm: string;
@@ -820,6 +824,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1169,6 +1175,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         sortable?: boolean;
         isSticky?: boolean;
         stickyOffset?: number;
+        showTotalInFirstColumn?: boolean;
+        totalSuffix?: string;
         headerCss?: import("../..").CSS;
     }, "theme" | "sortable">> & Partial<Pick<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
@@ -1199,6 +1207,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1551,8 +1561,10 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             headerCss?: import("../..").CSS;
             numberOfStickyColumns?: number;
             scrollContainerCss?: import("../..").CSS;
+            showTotalInFirstColumn?: boolean;
+            totalSuffix?: string;
         };
-        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
+        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
     } & {
         idColumn?: string;
         onDragAndDrop?: (onDragAndDropData: {
@@ -1592,6 +1604,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1937,8 +1951,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-    }, "size" | "as" | "type"> & {
-        size: import("react").ComponentProps<typeof import("..").Text>["size"];
+    }, "size" | "type" | "as"> & {
+        size: React.ComponentProps<typeof import("..").Text>["size"];
         type?: "text" | "number" | "email" | "password" | "tel" | "url" | "search";
         as?: never;
     }, "appearance" | "size" | "state"> & {
@@ -1985,7 +1999,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         defaultValue?: string;
         onValueChange?: (newValue: string) => void;
         clearText?: string;
-        onChange?: (e: import("react").ChangeEvent<HTMLInputElement>) => void;
+        onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     } & {
         label: string;
         hideLabel?: boolean;
@@ -1996,10 +2010,10 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation options, you can build your own implementation
      * with `useDataTable` and the UI-only `Table` components.
      */
-    Head: ({ sortable, theme, isSticky, stickyOffset, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    Head: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     }, "css" | "theme" | "isSticky"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        theme?: "light" | "primary" | "white" | "primaryDark" | "primaryLight" | undefined;
+        theme?: "white" | "light" | "primary" | "primaryDark" | "primaryLight" | undefined;
         isSticky?: boolean | "true" | undefined;
     }, {
         sm: string;
@@ -2026,6 +2040,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -2375,14 +2391,16 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         sortable?: boolean;
         isSticky?: boolean;
         stickyOffset?: number;
+        showTotalInFirstColumn?: boolean;
+        totalSuffix?: string;
         headerCss?: import("../..").CSS;
-    }) => import("react").ReactElement;
+    }) => React.ReactElement;
     /** Default header implementation for `DataTable`
      *
      * Can be configured to make the column sortable. If you need more customisation options,
      * you can build your own implementation with the UI-only `Table` components.
      */
-    HeaderCell: ({ header, children, css, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
+    HeaderCell: ({ header, includeTotal, totalSuffix, children, css, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
         ref?: ((instance: HTMLTableHeaderCellElement | null) => void) | import("react").RefObject<HTMLTableHeaderCellElement> | null | undefined;
     }, "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{}, {
         sm: string;
@@ -2409,6 +2427,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -2756,6 +2776,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         }> | undefined;
     } & {
         header: import("@tanstack/table-core").Header<Record<string, unknown>, unknown>;
+        includeTotal?: boolean;
+        totalSuffix?: string;
     }) => import("react").JSX.Element;
     /** Default pagination implementation for `DataTable`
      *
@@ -2804,6 +2826,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                     textMinimal: string;
                     background: string;
                     backgroundAccent: string;
+                    black: string;
+                    white: string;
                     grey100: string;
                     grey200: string;
                     grey300: string;
@@ -3177,7 +3201,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation, you can compose your own implentation, `asyncDataState`
      * can be retrieved from `useDataTable`
      */
-    Loading: (props: import("react").ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<({ css, message, size, ...props }: {
+    Loading: (props: React.ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<({ css, message, size, ...props }: {
         message?: string;
         size?: "sm" | "md" | "lg";
         css?: import("../..").CSS;
@@ -3205,6 +3229,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -3562,7 +3588,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      */
     Error: ({ children }: {
-        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => import("react").ReactElement;
+        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => React.ReactElement;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     /** Empty state implementation for `DataTable`.
      *
@@ -3570,11 +3596,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      */
     EmptyState: ({ children, ...rest }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }, "direction" | "gap" | "css" | "align" | "wrap" | "justify"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-        wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-        justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-        align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    }, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+        direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+        wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+        justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+        align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
         gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
     }, {
         sm: string;
@@ -3601,6 +3627,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -3973,6 +4001,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -4335,31 +4365,31 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         checked: boolean | "indeterminate";
         onCheckedChange: (value: boolean) => void;
         label?: string;
-    }) => import("react").ReactElement;
+    }) => React.ReactElement;
     /** Bulk actions for selected rows.
      *
      * Renders a toolbar with actions that can be applied to all selected rows
      */
     BulkActions: (({ children, ...rest }: {
         css?: import("../..").CSS;
-        children: import("react").ReactElement<import("react").ComponentProps<({ children }: {
-            children: import("react").ReactElement;
-        }) => import("react").ReactElement | null>> | import("react").ReactElement<import("react").ComponentProps<({ cancelLabel, children }: {
+        children: React.ReactElement<React.ComponentProps<({ children }: {
+            children: React.ReactElement;
+        }) => React.ReactElement | null>> | React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
             cancelLabel?: string;
-            children: import("react").ReactNode;
-        }) => import("react").JSX.Element | null>> | [import("react").ReactElement<import("react").ComponentProps<({ children }: {
-            children: import("react").ReactElement;
-        }) => import("react").ReactElement | null>>, import("react").ReactElement<import("react").ComponentProps<({ cancelLabel, children }: {
+            children: React.ReactNode;
+        }) => import("react").JSX.Element | null>> | [React.ReactElement<React.ComponentProps<({ children }: {
+            children: React.ReactElement;
+        }) => React.ReactElement | null>>, React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
             cancelLabel?: string;
-            children: import("react").ReactNode;
+            children: React.ReactNode;
         }) => import("react").JSX.Element | null>>];
     }) => import("react").JSX.Element) & {
         DefaultActions: ({ children }: {
-            children: import("react").ReactElement;
-        }) => import("react").ReactElement | null;
+            children: React.ReactElement;
+        }) => React.ReactElement | null;
         SelectedRowActions: ({ cancelLabel, children }: {
             cancelLabel?: string;
-            children: import("react").ReactNode;
+            children: React.ReactNode;
         }) => import("react").JSX.Element | null;
     };
     /** Bulk actions for selected rows.
@@ -4368,12 +4398,12 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      */
     BulkActionsFloating: (({ css, children, ...rest }: {
         css?: import("../..").CSS;
-        children: import("react").ReactNode;
+        children: React.ReactNode;
     }) => import("react").JSX.Element | null) & {
         SelectedRowActions: ({ cancelLabel, showDividers, children }: {
             cancelLabel?: string;
             showDividers?: boolean;
-            children: import("react").ReactNode;
+            children: React.ReactNode;
         }) => import("react").JSX.Element | null;
     };
 };

package/dist/components/data-table/DataTableHead.d.ts

@@ -5,7 +5,9 @@ type DataTableHeadProps = Omit<React.ComponentProps<typeof Table.Header>, 'child
     sortable?: boolean;
     isSticky?: boolean;
     stickyOffset?: number;
+    showTotalInFirstColumn?: boolean;
+    totalSuffix?: string;
     headerCss?: CSS;
 };
-export declare const DataTableHead: ({ sortable, theme, isSticky, stickyOffset, css, ...props }: DataTableHeadProps) => React.ReactElement;
+export declare const DataTableHead: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, css, ...props }: DataTableHeadProps) => React.ReactElement;
 export {};

package/dist/components/data-table/DataTableHead.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{Table as s}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as C}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as x}from"./DataTableContext.js";import{DataTable as H}from"./DataTable.js";const k=({sortable:u=!0,theme:h="light",isSticky:a=!1,stickyOffset:n=0,css:E,...v})=>{var d;const{getHeaderGroups:R,setIsSortable:m,enableRowSelection:w,getCanSomeRowsExpand:S,tablePosition:e,setTablePosition:g}=x();t.useEffect(()=>{m(u)},[u,m]);const l=t.useRef(null),i=t.useRef(null),T=t.useRef(0),[f,y]=t.useState(0),[c,p]=t.useState(!1),b=(d=l==null?void 0:l.current)==null?void 0:d.closest("thead");if(b&&(e==null?void 0:e.offsetTop)===null){const o=b.getBoundingClientRect().height,r=n+o;e&&g({...e,offsetTop:r||0})}return t.useEffect(()=>{if(!!a&&(!i.current&&l.current&&(i.current=l.current.closest("table")),i.current&&(e==null?void 0:e.top)!==null&&(e==null?void 0:e.bottom)!==null)){const o=(e==null?void 0:e.top)!=null&&(e==null?void 0:e.bottom)!=null&&e.top<n&&e.bottom>100?-e.top+n:0;o!==0&&p(!0),T.current=o,y(o),requestAnimationFrame(()=>{p(!1)})}},[a,n,e]),t.createElement(s.Header,{theme:h,css:{position:"relative",zIndex:3,"& tr:not(:last-child) > th":{borderBottom:"none"},"& tr:not(:first-child) > th":{borderRadius:"0 !important"},...E},...v},R().map(o=>t.createElement(s.Row,{key:o.id,ref:l,css:{...a&&f!==0&&{transform:`translateY(${f}px)`,opacity:c?0:1,transition:c?"none":"opacity 100ms",transitionDelay:c?"0ms":"150ms","& th:last-child:before":{content:"",position:"absolute",right:0,top:0,bottom:0,width:"100%",boxShadow:"$0",pointerEvents:"none"}}}},S()&&t.createElement(s.HeaderCell,{css:{width:"$4"}}),w&&t.createElement(s.HeaderCell,{css:{width:"$4"}},t.createElement(C,null)),o.headers.map(r=>t.createElement(H.HeaderCell,{header:r,key:r.id})))))};export{k as DataTableHead};
+import*as t from"react";import{Table as r}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as k}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as $}from"./DataTableContext.js";import{DataTable as I}from"./DataTable.js";const A=({sortable:u=!0,theme:b="light",isSticky:s=!1,stickyOffset:n=0,showTotalInFirstColumn:v,totalSuffix:E,style:y,css:R,...S})=>{var d;const{getHeaderGroups:T,setIsSortable:m,enableRowSelection:w,getCanSomeRowsExpand:x,tablePosition:e,setTablePosition:g}=$();t.useEffect(()=>{m(u)},[u,m]);const l=t.useRef(null),i=t.useRef(null),C=t.useRef(0),[f,D]=t.useState(0),[c,p]=t.useState(!1),h=(d=l==null?void 0:l.current)==null?void 0:d.closest("thead");if(h&&(e==null?void 0:e.offsetTop)===null){const o=h.getBoundingClientRect().height,a=n+o;e&&g({...e,offsetTop:a||0})}return t.useEffect(()=>{if(!!s&&(!i.current&&l.current&&(i.current=l.current.closest("table")),i.current&&(e==null?void 0:e.top)!==null&&(e==null?void 0:e.bottom)!==null)){const o=(e==null?void 0:e.top)!=null&&(e==null?void 0:e.bottom)!=null&&e.top<n&&e.bottom>100?-e.top+n:0;o!==0&&p(!0),C.current=o,D(o),requestAnimationFrame(()=>{p(!1)})}},[s,n,e]),t.createElement(r.Header,{theme:b,style:{...y,"--header-offset":`${f}px`},css:{position:"relative",zIndex:3,"& tr:not(:last-child) > th":{borderBottom:"none"},"& tr:not(:first-child) > th":{borderRadius:"0 !important"},...R},...S},T().map(o=>t.createElement(r.Row,{key:o.id,ref:l,css:{...s&&f!==0&&{transform:"translateY(var(--header-offset))",opacity:c?0:1,transition:c?"none":"opacity 100ms",transitionDelay:c?"0ms":"150ms","& th:last-child:before":{content:"",position:"absolute",right:0,top:0,bottom:0,width:"100%",boxShadow:"$0",pointerEvents:"none"}}}},x()&&t.createElement(r.HeaderCell,{css:{width:"$4"}}),w&&t.createElement(r.HeaderCell,{css:{width:"$4"}},t.createElement(k,null)),o.headers.map((a,H)=>t.createElement(I.HeaderCell,{header:a,key:a.id,includeTotal:H===0&&v,totalSuffix:E})))))};export{A as DataTableHead};
 //# sourceMappingURL=DataTableHead.js.map

package/dist/components/data-table/DataTableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  headerCss?: CSS\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  css,\n  ...props\n}: DataTableHeadProps): React.ReactElement => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      css={{\n        position: 'relative',\n        zIndex: 3,\n        '& tr:not(:last-child) > th': {\n          borderBottom: 'none'\n        },\n        '& tr:not(:first-child) > th': {\n          borderRadius: '0 !important'\n        },\n        ...css\n      }}\n      {...props}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            css={{\n              ...(isSticky &&\n                headerOffset !== 0 && {\n                  transform: `translateY(${headerOffset}px)`,\n                  opacity: headerHide ? 0 : 1,\n                  transition: headerHide ? 'none' : `opacity 100ms`,\n                  transitionDelay: headerHide ? '0ms' : `150ms`,\n                  '& th:last-child:before': {\n                    content: '',\n                    position: 'absolute',\n                    right: 0,\n                    top: 0,\n                    bottom: 0,\n                    width: '100%',\n                    boxShadow: '$0',\n                    pointerEvents: 'none'\n                  }\n                })\n            }}\n          >\n            {getCanSomeRowsExpand() && (\n              <Table.HeaderCell css={{ width: '$4' }} />\n            )}\n            {enableRowSelection && (\n              <Table.HeaderCell css={{ width: '$4' }}>\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header) => (\n              <DataTable.HeaderCell header={header} key={header.id} />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","css","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAkBO,MAAMA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,IAAAC,KACGC,CACL,IAA8C,CAzB9C,IAAAC,EA0BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBN,EAAcR,CAAQ,CACxB,EAAG,CAACA,EAAUQ,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,KAAAA,OAAAA,EAAmB,UAAnB,KAAAT,OAAAA,EAA4B,QAAQ,OAAA,EAE7D,GAAIgB,IAAoBX,GAAA,YAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,wBAAwB,OAC3DE,EAAqBrB,EAAeoB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAI,EAACZ,IAED,CAACc,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,YAAAA,EAAe,OAAQ,OAAQA,GAAA,KAAA,OAAAA,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,KAAAA,OAAAA,EAAe,MAAO,OACtBA,GAAA,KAAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMR,GACpBQ,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMR,EACrB,EAEFsB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACnB,EAAUC,EAAcQ,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAOzB,EACP,IAAK,CACH,SAAU,WACV,OAAQ,EACR,6BAA8B,CAC5B,aAAc,MAChB,EACA,8BAA+B,CAC7B,aAAc,cAChB,EACA,GAAGG,CACL,EACC,GAAGC,GAEHE,EAAgB,EAAE,IAAKoB,GAEpBb,EAAA,cAACY,EAAM,IAAN,CACC,IAAKC,EAAY,GACjB,IAAKZ,EACL,IAAK,CACH,GAAIb,GACFgB,IAAiB,GAAK,CACpB,UAAW,cAAcA,OACzB,QAASE,EAAa,EAAI,EAC1B,WAAYA,EAAa,OAAS,gBAClC,gBAAiBA,EAAa,MAAQ,QACtC,yBAA0B,CACxB,QAAS,GACT,SAAU,WACV,MAAO,EACP,IAAK,EACL,OAAQ,EACR,MAAO,OACP,UAAW,KACX,cAAe,MACjB,CACF,CACJ,GAECV,EAAqB,GACpBI,EAAA,cAACY,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAG,CAAA,EAEzCjB,GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAA,EACnCZ,EAAA,cAACc,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBf,EAAA,cAACgB,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAA,CAAI,CACvD,CACH,CAEH,CACH,CAEJ"}
+{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n  headerCss?: CSS\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  css,\n  ...props\n}: DataTableHeadProps): React.ReactElement => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      css={{\n        position: 'relative',\n        zIndex: 3,\n        '& tr:not(:last-child) > th': {\n          borderBottom: 'none'\n        },\n        '& tr:not(:first-child) > th': {\n          borderRadius: '0 !important'\n        },\n        ...css\n      }}\n      {...props}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            css={{\n              ...(isSticky &&\n                headerOffset !== 0 && {\n                  transform: `translateY(var(--header-offset))`,\n                  opacity: headerHide ? 0 : 1,\n                  transition: headerHide ? 'none' : `opacity 100ms`,\n                  transitionDelay: headerHide ? '0ms' : `150ms`,\n                  '& th:last-child:before': {\n                    content: '',\n                    position: 'absolute',\n                    right: 0,\n                    top: 0,\n                    bottom: 0,\n                    width: '100%',\n                    boxShadow: '$0',\n                    pointerEvents: 'none'\n                  }\n                })\n            }}\n          >\n            {getCanSomeRowsExpand() && (\n              <Table.HeaderCell css={{ width: '$4' }} />\n            )}\n            {enableRowSelection && (\n              <Table.HeaderCell css={{ width: '$4' }}>\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTable.HeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","showTotalInFirstColumn","totalSuffix","style","css","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","index","DataTable"],"mappings":"uPAoBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,uBAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,KACGC,CACL,IAA8C,CA9B9C,IAAAC,EA+BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBN,EAAcX,CAAQ,CACxB,EAAG,CAACA,EAAUW,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,YAAAA,EAAmB,UAAnB,YAAAT,EAA4B,QAAQ,SAE7D,GAAIgB,IAAoBX,GAAA,KAAAA,OAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,sBAAwB,EAAA,OAC3DE,EAAqBxB,EAAeuB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAI,CAAA,CAACf,IAED,CAACiB,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,KAAAA,OAAAA,EAAe,OAAQ,OAAQA,GAAA,YAAAA,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,KAAA,OAAAA,EAAe,MAAO,OACtBA,GAAA,KAAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMX,GACpBW,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMX,EACrB,EAEFyB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACtB,EAAUC,EAAcW,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAO5B,EACP,MAAO,CACL,GAAGK,EACH,kBAAmB,GAAGe,KACxB,EACA,IAAK,CACH,SAAU,WACV,OAAQ,EACR,6BAA8B,CAC5B,aAAc,MAChB,EACA,8BAA+B,CAC7B,aAAc,cAChB,EACA,GAAGd,CACL,EACC,GAAGC,CAEHE,EAAAA,IAAkB,IAAKoB,GAEpBb,EAAA,cAACY,EAAM,IAAN,CACC,IAAKC,EAAY,GACjB,IAAKZ,EACL,IAAK,CACH,GAAIhB,GACFmB,IAAiB,GAAK,CACpB,UAAW,mCACX,QAASE,EAAa,EAAI,EAC1B,WAAYA,EAAa,OAAS,gBAClC,gBAAiBA,EAAa,MAAQ,QACtC,yBAA0B,CACxB,QAAS,GACT,SAAU,WACV,MAAO,EACP,IAAK,EACL,OAAQ,EACR,MAAO,OACP,UAAW,KACX,cAAe,MACjB,CACF,CACJ,CAECV,EAAAA,EAAAA,GACCI,EAAA,cAACY,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAG,CAAA,EAEzCjB,GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CACnCZ,EAAAA,EAAA,cAACc,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAI,CAACE,EAAQC,IAChChB,EAAA,cAACiB,EAAU,WAAV,CACC,OAAQF,EACR,IAAKA,EAAO,GACZ,aAAcC,IAAU,GAAK7B,EAC7B,YAAaC,CAAAA,CACf,CACD,CACH,CAEH,CACH,CAEJ"}

package/dist/components/data-table/DataTableHeaderCell.d.ts

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { Table } from '../table';
 type DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {
     header: Header<Record<string, unknown>, unknown>;
+    includeTotal?: boolean;
+    totalSuffix?: string;
 };
-export declare const DataTableHeaderCell: ({ header, children, css, ...props }: DataTableHeaderProps) => React.JSX.Element;
+export declare const DataTableHeaderCell: ({ header, includeTotal, totalSuffix, children, css, ...props }: DataTableHeaderProps) => React.JSX.Element;
 export {};

package/dist/components/data-table/DataTableHeaderCell.js

@@ -1,2 +1,2 @@
-import{ArrowUp as u,ArrowDown as b}from"@atom-learning/icons";import{styled as g}from"@atom-learning/stitches-react";import{flexRender as y}from"@tanstack/react-table";import*as t from"react";import{useHover as v}from"react-aria";import{Flex as s}from"../flex/Flex.js";import{Icon as x}from"../icon/Icon.js";import{Table as S}from"../table/Table.js";import{useDataTable as h}from"./DataTableContext.js";const D=g(S.HeaderCell,{variants:{isSortable:{true:{cursor:"pointer",position:"relative","& > *":{position:"relative"},"&:before":{content:"",position:"absolute",inset:0,opacity:0,backgroundColor:"$primary100",transition:"opacity 0.2s ease"},"&:hover:before":{opacity:.5}}}}}),k={asc:u,desc:b},w=({direction:e})=>t.createElement(x,{is:k[e],size:"sm",css:{position:"absolute",left:"$1",stroke:"$primary900"}}),C=({header:e,children:E,css:l,...c})=>{const a=e.column.getIsSorted(),{isSortable:o}=h(),i=e.column.getCanSort(),{hoverProps:m,isHovered:p}=v({}),d=(r,f)=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),f(r))},n=e.column.getToggleSortingHandler();return t.createElement(D,{isSortable:o&&i,colSpan:e.colSpan,onClick:o&&i&&n?n:void 0,onKeyDown:r=>o&&i&&n&&d(r,n),tabIndex:o&&i?0:-1,...m,css:l,...c},t.createElement(s,{align:"center",justify:e.colSpan>1?"center":"flex-start"},y(e.column.columnDef.header,e.getContext()),a&&o&&t.createElement(s,{align:"center",css:{position:"relative",width:"24px",height:"24px",ml:"$2",bg:p?"$primary200":"$primary100",borderRadius:"$0"}},t.createElement(w,{direction:a}))))};export{C as DataTableHeaderCell};
+import{ArrowUp as S,ArrowDown as x}from"@atom-learning/icons";import{styled as m}from"@atom-learning/stitches-react";import{flexRender as E}from"@tanstack/react-table";import*as r from"react";import{useHover as k}from"react-aria";import{Flex as c}from"../flex/Flex.js";import{Icon as C}from"../icon/Icon.js";import{Table as D}from"../table/Table.js";import{useDataTable as T}from"./DataTableContext.js";import{Text as H}from"../text/Text.js";const I=m(H,{color:"$grey600",whiteSpace:"nowrap",display:"none","@media (min-width: 800px)":{display:"block"}}),R=m(D.HeaderCell,{variants:{isSortable:{true:{cursor:"pointer",position:"relative","& > *":{position:"relative"},"&:before":{content:"",position:"absolute",inset:0,opacity:0,backgroundColor:"$primary100",transition:"opacity 200ms ease"},"&:hover":{"&::before":{opacity:.5}}}}}}),z={asc:S,desc:x},A=({direction:e})=>r.createElement(C,{is:z[e],size:"sm",css:{position:"absolute",left:"$1",stroke:"$primary900"}}),F=({header:e,includeTotal:p=!1,totalSuffix:d="items",children:K,css:f,...u})=>{var a,l;const s=e.column.getIsSorted(),{isSortable:t,getRowModel:g}=T(),i=e.column.getCanSort(),y=(l=(a=g())==null?void 0:a.rows)==null?void 0:l.length,{hoverProps:b,isHovered:v}=k({}),h=(o,w)=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),w(o))},n=e.column.getToggleSortingHandler();return r.createElement(R,{isSortable:t&&i,colSpan:e.colSpan,onClick:t&&i&&n?n:void 0,onKeyDown:o=>t&&i&&n&&h(o,n),tabIndex:t&&i?0:-1,...b,css:f,...u},r.createElement(c,{align:"center",gap:1,justify:e.colSpan>1?"center":"flex-start"},E(e.column.columnDef.header,e.getContext()),s&&t&&r.createElement(c,{align:"center",css:{position:"relative",width:"24px",height:"24px",ml:"$2",bg:v?"$primary200":"$primary100",borderRadius:"$0"}},r.createElement(A,{direction:s})),p&&r.createElement(I,{size:"sm",weight:"normal"},"(",y," ",d,")")))};export{F as DataTableHeaderCell};
 //# sourceMappingURL=DataTableHeaderCell.js.map

package/dist/components/data-table/DataTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport { styled } from '@atom-learning/stitches-react'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n}\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  variants: {\n    isSortable: {\n      true: {\n        cursor: 'pointer',\n        position: 'relative',\n        '& > *': {\n          position: 'relative'\n        },\n        '&:before': {\n          content: '',\n          position: 'absolute',\n          inset: 0,\n          opacity: 0,\n          backgroundColor: '$primary100',\n          transition: 'opacity 0.2s ease'\n        },\n        '&:hover:before': {\n          opacity: 0.5\n        }\n      }\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    css={{ position: 'absolute', left: '$1', stroke: '$primary900' }}\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  children,\n  css,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      css={css}\n      {...props}\n    >\n      <Flex\n        align=\"center\"\n        justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex\n            align=\"center\"\n            css={{\n              position: 'relative',\n              width: '24px',\n              height: '24px',\n              ml: '$2',\n              bg: isHovered ? '$primary200' : '$primary100',\n              borderRadius: '$0'\n            }}\n          >\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n      </Flex>\n    </StyledTableHeaderCell>\n  )\n}\n"],"names":["StyledTableHeaderCell","styled","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","children","css","props","sortDirection","isSortableTable","useDataTable","isDataColumn","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender"],"mappings":"mZAeA,MAAMA,EAAwBC,EAAOC,EAAM,WAAY,CACrD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,OAAQ,UACR,SAAU,WACV,QAAS,CACP,SAAU,UACZ,EACA,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,QAAS,EACT,gBAAiB,cACjB,WAAY,mBACd,EACA,iBAAkB,CAChB,QAAS,EACX,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,GACd,KAAK,KACL,IAAK,CAAE,SAAU,WAAY,KAAM,KAAM,OAAQ,aAAc,CACjE,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,CAC1B,MAAMC,EAAgBJ,EAAO,OAAO,cAC9B,CAAE,WAAYK,CAAgB,EAAIC,EAElCC,EAAAA,EAAeP,EAAO,OAAO,aAE7B,CAAE,WAAAQ,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAE,CAAA,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAASD,CAAgB,EAE7B,EAEME,EAAuBd,EAAO,OAAO,wBAAA,EAE3C,OACEH,EAAA,cAACR,EAAA,CACC,WAAYgB,GAAmBE,EAC/B,QAASP,EAAO,QAChB,QACEK,GAAmBE,GAAgBO,EAC/BA,EACA,OAEN,UAAYF,GACVP,GACAE,GACAO,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUT,GAAmBE,EAAe,EAAI,GAC/C,GAAGC,EACJ,IAAKN,EACJ,GAAGC,CAAAA,EAEJN,EAAA,cAACkB,EAAA,CACC,MAAM,SACN,QAASf,EAAO,QAAU,EAAI,SAAW,YAExCgB,EAAAA,EAAWhB,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAA,CAAY,EAC9DI,GAAiBC,GAChBR,EAAA,cAACkB,EAAA,CACC,MAAM,SACN,IAAK,CACH,SAAU,WACV,MAAO,OACP,OAAQ,OACR,GAAI,KACJ,GAAIN,EAAY,cAAgB,cAChC,aAAc,IAChB,GAEAZ,EAAA,cAACF,EAAA,CAAS,UAAWS,CAAAA,CAAe,CACtC,CAEJ,CACF,CAEJ"}
+{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport { styled } from '@atom-learning/stitches-react'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { Text } from '../text'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  color: '$grey600',\n  whiteSpace: 'nowrap',\n  display: 'none',\n  '@media (min-width: 800px)': {\n    display: 'block'\n  }\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  variants: {\n    isSortable: {\n      true: {\n        cursor: 'pointer',\n        position: 'relative',\n        '& > *': {\n          position: 'relative'\n        },\n        '&:before': {\n          content: '',\n          position: 'absolute',\n          inset: 0,\n          opacity: 0,\n          backgroundColor: '$primary100',\n          transition: 'opacity 200ms ease'\n        },\n        '&:hover': {\n          '&::before': {\n            opacity: 0.5\n          }\n        }\n      }\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    css={{ position: 'absolute', left: '$1', stroke: '$primary900' }}\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  css,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      css={css}\n      {...props}\n    >\n      <Flex\n        align=\"center\"\n        gap={1}\n        justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex\n            align=\"center\"\n            css={{\n              position: 'relative',\n              width: '24px',\n              height: '24px',\n              ml: '$2',\n              bg: isHovered ? '$primary200' : '$primary100',\n              borderRadius: '$0'\n            }}\n          >\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </Flex>\n    </StyledTableHeaderCell>\n  )\n}\n"],"names":["StyledCount","styled","Text","StyledTableHeaderCell","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","includeTotal","totalSuffix","children","css","props","_a","_b","sortDirection","isSortableTable","getRowModel","useDataTable","isDataColumn","totalRows","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender"],"mappings":"0bAkBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,MAAO,WACP,WAAY,SACZ,QAAS,OACT,4BAA6B,CAC3B,QAAS,OACX,CACF,CAAC,EAEKC,EAAwBF,EAAOG,EAAM,WAAY,CACrD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,OAAQ,UACR,SAAU,WACV,QAAS,CACP,SAAU,UACZ,EACA,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,QAAS,EACT,gBAAiB,cACjB,WAAY,oBACd,EACA,UAAW,CACT,YAAa,CACX,QAAS,EACX,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,GACd,KAAK,KACL,IAAK,CAAE,SAAU,WAAY,KAAM,KAAM,OAAQ,aAAc,EACjE,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,aAAAC,EAAe,GACf,YAAAC,EAAc,QACd,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,CA1E5B,IAAAC,EAAAC,EA2EE,MAAMC,EAAgBR,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYS,EAAiB,YAAAC,CAAY,EAAIC,IAE/CC,EAAeZ,EAAO,OAAO,aAE7Ba,GAAYN,GAAAD,EAAAI,EAAY,IAAZ,YAAAJ,EAAe,OAAf,KAAAC,OAAAA,EAAqB,OAEjC,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAA,CAAE,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAA,EACNC,EAASD,CAAgB,EAE7B,EAEME,EAAuBpB,EAAO,OAAO,wBAAwB,EAEnE,OACEH,EAAA,cAACP,EAAA,CACC,WAAYmB,GAAmBG,EAC/B,QAASZ,EAAO,QAChB,QACES,GAAmBG,GAAgBQ,EAC/BA,EACA,OAEN,UAAYF,GACVT,GACAG,GACAQ,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUX,GAAmBG,EAAe,EAAI,GAC/C,GAAGE,EACJ,IAAKV,EACJ,GAAGC,CAAAA,EAEJR,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,EACL,QAASrB,EAAO,QAAU,EAAI,SAAW,cAExCsB,EAAWtB,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAA,CAAY,EAC9DQ,GAAiBC,GAChBZ,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,CACH,SAAU,WACV,MAAO,OACP,OAAQ,OACR,GAAI,KACJ,GAAIN,EAAY,cAAgB,cAChC,aAAc,IAChB,GAEAlB,EAAA,cAACF,EAAA,CAAS,UAAWa,CAAe,CAAA,CACtC,EAEDP,GACCJ,EAAA,cAACV,EAAA,CAAY,KAAK,KAAK,OAAO,QAAA,EAAS,IACnC0B,EAAU,IAAEX,EAAY,GAC5B,CAEJ,CACF,CAEJ"}

package/dist/components/data-table/DataTableLoading.d.ts

@@ -27,6 +27,8 @@ declare const PendingState: import("@atom-learning/stitches-react/types/styled-c
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/data-table/DataTableRow.js

@@ -1,2 +1,2 @@
-import{ChevronDown as x,ChevronRight as w}from"@atom-learning/icons";import*as n from"react";import{styled as h}from"../../stitches.js";import{Icon as C}from"../icon/Icon.js";import{Table as i}from"../table/Table.js";import{useDataTable as E}from"./DataTableContext.js";import{DataTableDataCell as D}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as S}from"./DataTableRowSelectionCheckbox.js";const v=h(i.Row,{bg:"initial",variants:{isSelected:{true:{["&:nth-child(odd), &:nth-child(even)"]:{bg:"$primary100"}}},isDisabled:{true:{opacity:"30%"}},isFocusable:{true:{transition:"transform 150ms ease-in-out, box-shadow 150ms ease-in-out","&:hover":{transform:"translateY(-1px)",boxShadow:"0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)",position:"relative",zIndex:3},"&:focus":{outline:"2px solid $primary500",outlineOffset:"-4px","& td":{bg:"transparent"}}}}}}),d=e=>e?!!(e.closest("button, a, input, select, textarea")||e.getAttribute("role")==="button"):!1,k=({row:e,rowAction:r})=>{const{enableRowSelection:m,disabledRows:l,getCanSomeRowsExpand:p}=E(),s=!!(l!=null&&l[e.id]),g=e.getToggleExpandedHandler(),u=e.getToggleSelectedHandler(),b=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!r||!o.target.closest("tr")||d(o.target)||r(t.original,o)},f=t=>{if(t.key==="Enter"||t.key===" "){if(d(t.target))return;t.preventDefault(),c(e,t)}if(t.key==="ArrowDown"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.nextElementSibling;a&&a.tagName==="TR"&&a.focus()}if(t.key==="ArrowUp"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.previousElementSibling;a&&a.tagName==="TR"&&a.focus()}};return n.createElement(v,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!r&&!s,...r&&{onClick:t=>c(e,t),tabIndex:0,css:{cursor:"pointer"},onKeyDown:f}},p()&&n.createElement(i.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:g},e.getCanExpand()&&n.createElement(C,{is:e.getIsExpanded()?x:w})),m&&n.createElement(i.Cell,{css:{width:"$4"}},n.createElement(S,{row:e,checked:b(),onCheckedChange:u})),e.getVisibleCells().map((t,o)=>n.createElement(D,{key:t.id,cell:t})))};export{k as DataTableRow};
+import{ChevronDown as f,ChevronRight as h}from"@atom-learning/icons";import*as n from"react";import{styled as w}from"../../stitches.js";import{Icon as D}from"../icon/Icon.js";import{Table as i}from"../table/Table.js";import{useDataTable as C}from"./DataTableContext.js";import{DataTableDataCell as E}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as S}from"./DataTableRowSelectionCheckbox.js";const v=w(i.Row,{bg:"initial",position:"relative",variants:{isSelected:{true:{"&:nth-child(odd), &:nth-child(even)":{bg:"$primary100"}}},isDisabled:{true:{opacity:"30%"}},isFocusable:{true:{transform:"translateY(0)",boxShadow:"0px 4px 11px 0px hsla(0, 0%, 12%, 0)",transition:"transform 300ms ease-in-out, box-shadow 300ms ease-in-out","&:hover":{transform:"translateY(-1px)",boxShadow:"0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)",transitionDuration:"100ms",zIndex:3},"&:focus":{outline:"2px solid $primary500",outlineOffset:"-4px","& td":{bg:"transparent"}}}}}}),d=e=>e?!!(e.closest("button, a, input, select, textarea")||e.getAttribute("role")==="button"):!1,k=({row:e,rowAction:r})=>{const{enableRowSelection:p,disabledRows:l,getCanSomeRowsExpand:m}=C(),s=!!(l!=null&&l[e.id]),g=e.getToggleExpandedHandler(),u=e.getToggleSelectedHandler(),b=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!r||!o.target.closest("tr")||d(o.target)||r(t.original,o)},x=t=>{if(t.key==="Enter"||t.key===" "){if(d(t.target))return;t.preventDefault(),c(e,t)}if(t.key==="ArrowDown"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.nextElementSibling;a&&a.tagName==="TR"&&a.focus()}if(t.key==="ArrowUp"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.previousElementSibling;a&&a.tagName==="TR"&&a.focus()}};return n.createElement(v,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!r&&!s,...r&&{onClick:t=>c(e,t),tabIndex:0,css:{cursor:"pointer"},onKeyDown:x}},m()&&n.createElement(i.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:g},e.getCanExpand()&&n.createElement(D,{is:e.getIsExpanded()?f:h})),p&&n.createElement(i.Cell,{css:{width:"$4"}},n.createElement(S,{row:e,checked:b(),onCheckedChange:u})),e.getVisibleCells().map((t,o)=>n.createElement(E,{key:t.id,cell:t})))};export{k as DataTableRow};
 //# sourceMappingURL=DataTableRow.js.map

package/dist/components/data-table/DataTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  bg: 'initial',\n  variants: {\n    isSelected: {\n      true: {\n        [`&:nth-child(odd), &:nth-child(even)`]: {\n          bg: '$primary100'\n        }\n      }\n    },\n    isDisabled: {\n      true: {\n        opacity: '30%'\n      }\n    },\n    isFocusable: {\n      true: {\n        transition: 'transform 150ms ease-in-out, box-shadow 150ms ease-in-out',\n        '&:hover': {\n          transform: 'translateY(-1px)',\n          boxShadow: '0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)',\n          position: 'relative',\n          zIndex: 3\n        },\n        '&:focus': {\n          outline: '2px solid $primary500',\n          outlineOffset: '-4px',\n          '& td': {\n            bg: 'transparent'\n          }\n        }\n      }\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        css: { cursor: 'pointer' },\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          css={{ width: '$4', cursor: row.getCanExpand() ? 'pointer' : 'auto' }}\n          onClick={toggleExpandHandler}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell css={{ width: '$4' }}>\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell, i) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAiBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,CACR,WAAY,CACV,KAAM,CACJ,CAAC,uCAAwC,CACvC,GAAI,aACN,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,EACA,YAAa,CACX,KAAM,CACJ,WAAY,4DACZ,UAAW,CACT,UAAW,mBACX,UAAW,0CACX,SAAU,WACV,OAAQ,CACV,EACA,UAAW,CACT,QAAS,wBACT,cAAe,OACf,OAAQ,CACN,GAAI,aACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,GAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,EAEIC,EAAAA,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,KAElCO,EAAsBP,EAAI,2BAC1BQ,EAAsBR,EAAI,yBAAyB,EAEnDS,EAAkB,IAClBT,EAAI,kBAA4B,EAAA,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,iBACNF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,YAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAEZ,CAAA,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAA,EAChB,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,IAAK,CAAE,OAAQ,SAAU,EACzB,UAAWC,CACb,GAECT,EAAqB,GACpBa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,eAAiB,UAAY,MAAO,EACpE,QAASO,GAERP,EAAI,gBACHiB,EAAA,cAACC,EAAA,CAAK,GAAIlB,EAAI,cAAc,EAAImB,EAAcC,CAAc,CAAA,CAEhE,EAGDlB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAAA,EAC7BqB,EAAA,cAACI,EAAA,CACC,IAAKrB,EACL,QAASS,EAAgB,EACzB,gBAAiBD,CACnB,CAAA,CACF,EAEDR,EAAI,gBAAA,EAAkB,IAAI,CAACsB,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}
+{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  bg: 'initial',\n  position: 'relative',\n  variants: {\n    isSelected: {\n      true: {\n        '&:nth-child(odd), &:nth-child(even)': {\n          bg: '$primary100'\n        }\n      }\n    },\n    isDisabled: {\n      true: {\n        opacity: '30%'\n      }\n    },\n    isFocusable: {\n      true: {\n        transform: 'translateY(0)',\n        boxShadow: '0px 4px 11px 0px hsla(0, 0%, 12%, 0)',\n        transition: 'transform 300ms ease-in-out, box-shadow 300ms ease-in-out',\n        '&:hover': {\n          transform: 'translateY(-1px)',\n          boxShadow: '0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)',\n          transitionDuration: '100ms',\n          zIndex: 3\n        },\n        '&:focus': {\n          outline: '2px solid $primary500',\n          outlineOffset: '-4px',\n          '& td': {\n            bg: 'transparent'\n          }\n        }\n      }\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        css: { cursor: 'pointer' },\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          css={{ width: '$4', cursor: row.getCanExpand() ? 'pointer' : 'auto' }}\n          onClick={toggleExpandHandler}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell css={{ width: '$4' }}>\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell, i) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAiBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,WACV,SAAU,CACR,WAAY,CACV,KAAM,CACJ,sCAAuC,CACrC,GAAI,aACN,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,EACA,YAAa,CACX,KAAM,CACJ,UAAW,gBACX,UAAW,uCACX,WAAY,4DACZ,UAAW,CACT,UAAW,mBACX,UAAW,0CACX,mBAAoB,QACpB,OAAQ,CACV,EACA,UAAW,CACT,QAAS,wBACT,cAAe,OACf,OAAQ,CACN,GAAI,aACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,EAAa,EAETC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,KAElCO,EAAsBP,EAAI,yBAAyB,EACnDQ,EAAsBR,EAAI,2BAE1BS,EAAkB,IAClBT,EAAI,kBAAkB,EAAU,gBAC7BA,EAAI,cAAA,EAGPU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,iBACNF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,KAAA,OAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAAM,CAElB,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,YAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,OAEhB,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAc,EAC9B,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,IAAK,CAAE,OAAQ,SAAU,EACzB,UAAWC,CACb,CAECT,EAAAA,EAAAA,GACCa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASO,CAERP,EAAAA,EAAI,gBACHiB,EAAA,cAACC,EAAA,CAAK,GAAIlB,EAAI,gBAAkBmB,EAAcC,CAAAA,CAAc,CAEhE,EAGDlB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,GAC7BqB,EAAA,cAACI,EAAA,CACC,IAAKrB,EACL,QAASS,IACT,gBAAiBD,CAAAA,CACnB,CACF,EAEDR,EAAI,gBAAkB,EAAA,IAAI,CAACsB,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAAA,CAAM,CACrD,CACH,CAEJ"}

package/dist/components/data-table/DataTableRowSelectionCheckbox.js

@@ -1,2 +1,2 @@
-import*as c from"@radix-ui/react-visually-hidden";import*as t from"react";import{Checkbox as n}from"../checkbox/Checkbox.js";import{Label as m}from"../label/Label.js";import{useDataTable as i}from"./DataTableContext.js";const d=({row:e,checked:l,onCheckedChange:r,label:a=`Row ${e.id} selection`})=>{const{tableId:o}=i();return t.createElement(t.Fragment,null,t.createElement(c.Root,null,t.createElement(m,{htmlFor:`${o}_row_${e.id}_selection`},a)),t.createElement(n,{size:"lg",css:{ml:e.depth?`$${e.depth*2}`:0},checked:l,onCheckedChange:r,name:`${o}_row_${e.id}_selection`,disabled:!e.getCanSelect()}))};export{d as DataTableRowSelectionCheckbox};
+import*as c from"@radix-ui/react-visually-hidden";import*as t from"react";import{Checkbox as n}from"../checkbox/Checkbox.js";import{Label as m}from"../label/Label.js";import{useDataTable as i}from"./DataTableContext.js";const d=({row:e,checked:l,onCheckedChange:r,label:a=`Row ${e.id} selection`})=>{const{tableId:o}=i();return t.createElement(t.Fragment,null,t.createElement(c.Root,null,t.createElement(m,{htmlFor:`${o}_row_${e.id}_selection`},a)),t.createElement(n,{size:"lg",style:{"--depth":e.depth},css:{mr:"$3",ml:"calc((var(--depth, 0) * 2) * 4px)"},checked:l,onCheckedChange:r,name:`${o}_row_${e.id}_selection`,disabled:!e.getCanSelect()}))};export{d as DataTableRowSelectionCheckbox};
 //# sourceMappingURL=DataTableRowSelectionCheckbox.js.map

package/dist/components/data-table/DataTableRowSelectionCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRowSelectionCheckbox.js","sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_row_${row.id}_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n      <Checkbox\n        size=\"lg\"\n        css={{ ml: row.depth ? `$${row.depth * 2}` : 0 }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n      />\n    </>\n  )\n}\n"],"names":["DataTableRowSelectionCheckbox","row","checked","onCheckedChange","label","tableId","useDataTable","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAQa,MAAAA,EAAgC,CAAC,CAC5C,IAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,OAAOH,EAAI,cACrB,IAK0B,CACxB,KAAM,CAAE,QAAAI,CAAQ,EAAIC,IAEpB,OACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,SAAeJ,EAAI,gBAAiBG,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,IAAK,CAAE,GAAIT,EAAI,MAAQ,IAAIA,EAAI,MAAQ,IAAM,CAAE,EAC/C,QAASC,EACT,gBAAiBC,EACjB,KAAM,GAAGE,SAAeJ,EAAI,eAC5B,SAAU,CAACA,EAAI,aACjB,CAAA,CAAA,CACF,CAEJ"}
+{"version":3,"file":"DataTableRowSelectionCheckbox.js","sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_row_${row.id}_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        css={{ mr: '$3', ml: 'calc((var(--depth, 0) * 2) * 4px)' }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n      />\n    </>\n  )\n}\n"],"names":["DataTableRowSelectionCheckbox","row","checked","onCheckedChange","label","tableId","useDataTable","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAQa,MAAAA,EAAgC,CAAC,CAC5C,IAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,OAAOH,EAAI,cACrB,IAK0B,CACxB,KAAM,CAAE,QAAAI,CAAQ,EAAIC,EAAa,EAEjC,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,SAAeJ,EAAI,cAAA,EAAiBG,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,MAAO,CAAE,UAAWT,EAAI,KAAM,EAC9B,IAAK,CAAE,GAAI,KAAM,GAAI,mCAAoC,EACzD,QAASC,EACT,gBAAiBC,EACjB,KAAM,GAAGE,SAAeJ,EAAI,eAC5B,SAAU,CAACA,EAAI,aACjB,CAAA,CAAA,CACF,CAEJ"}

package/dist/components/data-table/DataTableTable.d.ts

@@ -10,6 +10,8 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
         headerCss?: CSS;
         numberOfStickyColumns?: number;
         scrollContainerCss?: CSS;
+        showTotalInFirstColumn?: boolean;
+        totalSuffix?: string;
     };
     rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
 };

package/dist/components/data-table/DataTableTable.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as A}from"../table/Table.js";import{DataTable as g}from"./DataTable.js";import{AsyncDataState as L}from"./DataTable.types.js";import{useDataTable as B}from"./DataTableContext.js";import{DataTableLoading as P}from"./DataTableLoading.js";const _=({sortable:k,striped:E,theme:S="white",css:h,scrollOptions:t={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1},rowAction:v,...C})=>{const{asyncDataState:O,getTotalRows:w,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:H,setTablePosition:i}=B(),r=e.useRef(null),R=e.useRef(!1),l=e.useRef(!1),n=e.useMemo(()=>typeof document>"u"?null:document.body,[]);e.useEffect(()=>{if(!n||typeof IntersectionObserver>"u")return;const o=()=>{if(r.current){const s=r.current.getBoundingClientRect().top,c=r.current.getBoundingClientRect().bottom;i(u=>({...u,top:s,bottom:c}))}l.current=!1},a=()=>{l.current||(requestAnimationFrame(o),l.current=!0)};if(!r.current)return;const p=(t==null?void 0:t.stickyHeaderOffset)||0,T={rootMargin:`-${p}px 0px -${p}px 0px`,threshold:0},x=s=>{if(!s||s.length===0)return;const c=s[0];R.current=c.isIntersecting,n&&(c.isIntersecting?n==null||n.addEventListener("scroll",a):n==null||n.removeEventListener("scroll",a)),i(u=>({...u,isVisible:c.isIntersecting}))},b=new IntersectionObserver(x,T);return r.current&&(t.hasStickyHeader||Object.keys(f||{}).length>0)&&b.observe(r.current),()=>{b.disconnect(),n&&(n==null||n.removeEventListener("scroll",a))}},[f,t.hasStickyHeader,t==null?void 0:t.stickyHeaderOffset,n,i]);const y=O===L.PENDING,D=!y&&w()===0,I=()=>{let o=0;return m()&&!!d?o=2:(m()||!!d)&&(o=1),`${H}_${o}_control_columns`};return D?null:e.createElement(e.Fragment,null,e.createElement(P,null),e.createElement("div",{style:{display:"contents"}},e.createElement(A,{...C,ref:r,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:{...t.scrollContainerCss},scrollContainerkey:I(),css:{...h,...y&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(g.Head,{theme:S,sortable:k,isSticky:t.hasStickyHeader,stickyOffset:t.stickyHeaderOffset,css:t.headerCss}),e.createElement(g.Body,{striped:E,rowAction:v}))))};export{_ as DataTableTable};
+import*as t from"react";import{styled as F}from"../../stitches.js";import{Box as A}from"../box/Box.js";import{Table as B}from"../table/Table.js";import{DataTable as g}from"./DataTable.js";import{AsyncDataState as L}from"./DataTable.types.js";import{useDataTable as _}from"./DataTableContext.js";import{DataTableLoading as P}from"./DataTableLoading.js";const M=F(A,{p:"$2",bg:"white",borderRadius:"$3"}),N=({sortable:h,striped:w,theme:C="white",css:S,scrollOptions:e={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1,showTotalInFirstColumn:!0,totalSuffix:"items"},rowAction:k,...E})=>{const{asyncDataState:O,getTotalRows:v,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:x,setTablePosition:l}=_(),n=t.useRef(null),I=t.useRef(!1),c=t.useRef(!1),r=t.useMemo(()=>typeof window>"u"?null:window,[]);t.useEffect(()=>{if(!r||typeof IntersectionObserver>"u")return;const o=()=>{if(n.current){const s=n.current.getBoundingClientRect().top,i=n.current.getBoundingClientRect().bottom;l(u=>({...u,top:s,bottom:i}))}c.current=!1},a=()=>{c.current||(requestAnimationFrame(o),c.current=!0)};if(!n.current)return;const b=(e==null?void 0:e.stickyHeaderOffset)||0,R={rootMargin:`-${b}px 0px -${b}px 0px`,threshold:0},D=s=>{if(!s||s.length===0)return;const i=s[0];I.current=i.isIntersecting,r&&(i.isIntersecting?r==null||r.addEventListener("scroll",a):r==null||r.removeEventListener("scroll",a)),l(u=>({...u,isVisible:i.isIntersecting}))},y=new IntersectionObserver(D,R);return n.current&&(e.hasStickyHeader||Object.keys(f||{}).length>0)&&y.observe(n.current),()=>{y.disconnect(),r&&(r==null||r.removeEventListener("scroll",a))}},[f,e.hasStickyHeader,e==null?void 0:e.stickyHeaderOffset,r,l]);const p=O===L.PENDING,T=!p&&v()===0,H=()=>{let o=0;return m()&&!!d?o=2:(m()||!!d)&&(o=1),`${x}_${o}_control_columns`};return T?null:t.createElement(t.Fragment,null,t.createElement(P,null),t.createElement(M,null,t.createElement(B,{corners:"round",size:"lg",...E,ref:n,numberOfStickyColumns:e.numberOfStickyColumns,scrollContainerCss:{...e.scrollContainerCss},scrollContainerkey:H(),css:{...S,...p&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},t.createElement(g.Head,{theme:C,sortable:h,isSticky:e.hasStickyHeader,stickyOffset:e.stickyHeaderOffset,css:e.headerCss,showTotalInFirstColumn:e.showTotalInFirstColumn,totalSuffix:e.totalSuffix}),t.createElement(g.Body,{striped:w,rowAction:k}))))};export{N as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map