npm - @atom-learning/components - Versions diffs - 5.13.0-beta.0 → 5.14.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (172) hide show

package/dist/components/chip/Chip.d.ts CHANGED Viewed

@@ -24,8 +24,6 @@ export declare const StyledChipContent: import("@atom-learning/stitches-react/ty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -402,8 +400,6 @@ export declare const StyledRoot: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -774,8 +770,6 @@ export declare const StyledRoot: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -1156,8 +1150,6 @@ export declare const ChipRootContext: React.Context<Omit<Omit<Omit<React.Detaile
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1530,8 +1522,6 @@ export declare const ChipRootContext: React.Context<Omit<Omit<Omit<React.Detaile
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1913,8 +1903,6 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -2287,8 +2275,6 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.d.ts CHANGED Viewed

@@ -34,8 +34,6 @@ declare const StyledChipDismissibleGroupItem: import("@atom-learning/stitches-re
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -408,8 +406,6 @@ declare const StyledChipDismissibleGroupItem: import("@atom-learning/stitches-re
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -785,8 +781,6 @@ declare const StyledChipDismissibleGroupItem: import("@atom-learning/stitches-re
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/chip-toggle-group/ChipToggleGroupItem.d.ts CHANGED Viewed

@@ -34,8 +34,6 @@ declare const StyledChipToggleGroupItem: import("@atom-learning/stitches-react/t
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -408,8 +406,6 @@ declare const StyledChipToggleGroupItem: import("@atom-learning/stitches-react/t
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -785,8 +781,6 @@ declare const StyledChipToggleGroupItem: import("@atom-learning/stitches-react/t
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/combobox/Combobox.d.ts CHANGED Viewed

@@ -23,8 +23,6 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -395,8 +393,6 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -774,8 +770,6 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
-                black: string;
-                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1146,8 +1140,6 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1517,8 +1509,6 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

package/dist/components/combobox/ComboboxInput.d.ts CHANGED Viewed

@@ -26,8 +26,6 @@ export declare const StyledComboboxInput: import("@atom-learning/stitches-react/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/combobox/ComboboxList.d.ts CHANGED Viewed

@@ -22,8 +22,6 @@ export declare const ComboboxList: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/combobox/ComboboxOption.d.ts CHANGED Viewed

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

package/dist/components/combobox/ComboboxPopover.d.ts CHANGED Viewed

@@ -22,8 +22,6 @@ export declare const ComboboxPopover: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -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: React.ReactNode;
+    children: import("react").ReactNode;
     initialState?: import("./DataTable.types").InitialState;
     disabledRows?: Record<string, boolean>;
     enableRowSelection?: boolean | ((row: import("@tanstack/table-core").Row<unknown>) => boolean);
@@ -52,8 +52,6 @@ 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;
@@ -400,7 +398,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             };
         }> | undefined;
     }, "children"> & {
-        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
     }) => import("react").JSX.Element;
     /** Default table data cell implementation for `DataTable`
      *
@@ -442,8 +440,6 @@ 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;
@@ -797,7 +793,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?: "white" | "light" | "primary" | "primaryDark" | "primaryLight" | undefined;
+        theme?: "light" | "white" | "primary" | "primaryDark" | "primaryLight" | undefined;
         isSticky?: boolean | "true" | undefined;
     }, {
         sm: string;
@@ -824,8 +820,6 @@ 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;
@@ -1207,8 +1201,6 @@ 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;
@@ -1564,7 +1556,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             showTotalInFirstColumn?: boolean;
             totalSuffix?: string;
         };
-        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
+        withContainer?: boolean;
     } & {
         idColumn?: string;
         onDragAndDrop?: (onDragAndDropData: {
@@ -1604,8 +1597,6 @@ 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;
@@ -1952,7 +1943,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             };
         }> | undefined;
     }, "size" | "type" | "as"> & {
-        size: React.ComponentProps<typeof import("..").Text>["size"];
+        size: import("react").ComponentProps<typeof import("..").Text>["size"];
         type?: "text" | "number" | "email" | "password" | "tel" | "url" | "search";
         as?: never;
     }, "appearance" | "size" | "state"> & {
@@ -1999,7 +1990,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         defaultValue?: string;
         onValueChange?: (newValue: string) => void;
         clearText?: string;
-        onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        onChange?: (e: import("react").ChangeEvent<HTMLInputElement>) => void;
     } & {
         label: string;
         hideLabel?: boolean;
@@ -2013,7 +2004,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     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?: "white" | "light" | "primary" | "primaryDark" | "primaryLight" | undefined;
+        theme?: "light" | "white" | "primary" | "primaryDark" | "primaryLight" | undefined;
         isSticky?: boolean | "true" | undefined;
     }, {
         sm: string;
@@ -2040,8 +2031,6 @@ 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;
@@ -2394,7 +2383,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         showTotalInFirstColumn?: boolean;
         totalSuffix?: string;
         headerCss?: import("../..").CSS;
-    }) => React.ReactElement;
+    }) => import("react").ReactElement;
     /** Default header implementation for `DataTable`
      *
      * Can be configured to make the column sortable. If you need more customisation options,
@@ -2427,8 +2416,6 @@ 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;
@@ -2826,8 +2813,6 @@ 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;
@@ -3193,7 +3178,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * scratch with `useDataTable` and the UI-only `Table` components.
      *
      */
-    Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: import("./DataTableTable").DataTableTableProps) => JSX.Element | null;
+    Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, withContainer, ...props }: import("./DataTableTable").DataTableTableProps) => JSX.Element | null;
     /** Default loading implementation for remote data
      *
      * Renders a loading component while fetching the paginated data using `getAsyncData`.
@@ -3201,7 +3186,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: React.ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<({ css, message, size, ...props }: {
+    Loading: (props: import("react").ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<({ css, message, size, ...props }: {
         message?: string;
         size?: "sm" | "md" | "lg";
         css?: import("../..").CSS;
@@ -3229,8 +3214,6 @@ 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;
@@ -3588,7 +3571,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      */
     Error: ({ children }: {
-        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => React.ReactElement;
+        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => import("react").ReactElement;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     /** Empty state implementation for `DataTable`.
      *
@@ -3627,8 +3610,6 @@ 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;
@@ -4001,8 +3982,6 @@ 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;
@@ -4365,31 +4344,31 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         checked: boolean | "indeterminate";
         onCheckedChange: (value: boolean) => void;
         label?: string;
-    }) => React.ReactElement;
+    }) => import("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: React.ReactElement<React.ComponentProps<({ children }: {
-            children: React.ReactElement;
-        }) => React.ReactElement | null>> | React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
+        children: import("react").ReactElement<import("react").ComponentProps<({ children }: {
+            children: import("react").ReactElement;
+        }) => import("react").ReactElement | null>> | import("react").ReactElement<import("react").ComponentProps<({ cancelLabel, children }: {
             cancelLabel?: string;
-            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 }: {
+            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 }: {
             cancelLabel?: string;
-            children: React.ReactNode;
+            children: import("react").ReactNode;
         }) => import("react").JSX.Element | null>>];
     }) => import("react").JSX.Element) & {
         DefaultActions: ({ children }: {
-            children: React.ReactElement;
-        }) => React.ReactElement | null;
+            children: import("react").ReactElement;
+        }) => import("react").ReactElement | null;
         SelectedRowActions: ({ cancelLabel, children }: {
             cancelLabel?: string;
-            children: React.ReactNode;
+            children: import("react").ReactNode;
         }) => import("react").JSX.Element | null;
     };
     /** Bulk actions for selected rows.
@@ -4398,12 +4377,12 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      */
     BulkActionsFloating: (({ css, children, ...rest }: {
         css?: import("../..").CSS;
-        children: React.ReactNode;
+        children: import("react").ReactNode;
     }) => import("react").JSX.Element | null) & {
         SelectedRowActions: ({ cancelLabel, showDividers, children }: {
             cancelLabel?: string;
             showDividers?: boolean;
-            children: React.ReactNode;
+            children: import("react").ReactNode;
         }) => import("react").JSX.Element | null;
     };
 };

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

@@ -1,2 +1,2 @@
-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};
+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{Text as T}from"../text/Text.js";import{useDataTable as H}from"./DataTableContext.js";const I=m(T,{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}=H(),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 CHANGED Viewed

	@@ -1 +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~~'\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"}
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 { Text } from '../text'\nimport { useDataTable } from './DataTableContext'\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 CHANGED Viewed

@@ -27,8 +27,6 @@ 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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+import{ChevronDown as f,ChevronRight as h}from"@atom-learning/icons";import*as r from"react";import{styled as w}from"../../stitches.js";import{Icon as S}from"../icon/Icon.js";import{Table as l}from"../table/Table.js";import{useDataTable as C}from"./DataTableContext.js";import{DataTableDataCell as E}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as D}from"./DataTableRowSelectionCheckbox.js";const v=w(l.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 200ms ease-out, box-shadow 200ms ease-out","&:hover":{transform:"translateY(-1px)",boxShadow:"0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)",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:n})=>{const{enableRowSelection:p,disabledRows:i,getCanSomeRowsExpand:m}=C(),s=!!(i!=null&&i[e.id]),g=e.getToggleExpandedHandler(),u=e.getToggleSelectedHandler(),b=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!n||!o.target.closest("tr")||d(o.target)||n(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 r.createElement(v,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!n&&!s,...n&&{onClick:t=>c(e,t),tabIndex:0,css:{cursor:"pointer"},onKeyDown:x}},m()&&r.createElement(l.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:g},e.getCanExpand()&&r.createElement(S,{is:e.getIsExpanded()?f:h})),p&&r.createElement(l.Cell,{css:{width:"$4"}},r.createElement(D,{row:e,checked:b(),onCheckedChange:u})),e.getVisibleCells().map((t,o)=>r.createElement(E,{key:t.id,cell:t})))};export{k as DataTableRow};
 //# sourceMappingURL=DataTableRow.js.map

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

	@@ -1 +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 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"}
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 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 200ms ease-out, box-shadow 200ms ease-out',\n '&:hover': {\n transform: 'translateY(-1px)',\n boxShadow: '0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)',\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,sDACZ,UAAW,CACT,UAAW,mBACX,UAAW,0CACX,OAAQ,CACV,EACA,UAAW,CACT,QAAS,wBACT,cAAe,OACf,OAAQ,CACN,GAAI,aACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAA,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,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,KAElCO,EAAsBP,EAAI,2BAC1BQ,EAAsBR,EAAI,yBAE1BS,EAAAA,EAAkB,IAClBT,EAAI,oBAA4B,gBAC7BA,EAAI,gBAGPU,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,eAAe,EACrBF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,eAAA,EACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,KAAAA,OAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,OAEZ,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,eACN,EAAA,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAChB,EAAA,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,KACCa,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,cAAA,EAAkBmB,EAAcC,CAAAA,CAAc,CAEhE,EAGDlB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,GAC7BqB,EAAA,cAACI,EAAA,CACC,IAAKrB,EACL,QAASS,EAAAA,EACT,gBAAiBD,CAAAA,CACnB,CACF,EAEDR,EAAI,kBAAkB,IAAI,CAACsB,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAAA,CAAM,CACrD,CACH,CAEJ"}

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

@@ -14,5 +14,6 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
         totalSuffix?: string;
     };
     rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+    withContainer?: boolean;
 };
-export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: DataTableTableProps) => JSX.Element | null;
+export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, rowAction, withContainer, ...props }: DataTableTableProps) => JSX.Element | null;

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

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