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

@atom-learning/components 5.12.1 → 5.13.0-beta.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 (183) hide show

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

@@ -24,6 +24,8 @@ 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;
@@ -400,6 +402,8 @@ 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;
@@ -770,6 +774,8 @@ 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;
@@ -1150,6 +1156,8 @@ 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;
@@ -1522,6 +1530,8 @@ 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;
@@ -1903,6 +1913,8 @@ 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;
@@ -2275,6 +2287,8 @@ 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,6 +34,8 @@ declare const StyledChipDismissibleGroupItem: import("@atom-learning/stitches-re
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -406,6 +408,8 @@ declare const StyledChipDismissibleGroupItem: import("@atom-learning/stitches-re
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -781,6 +785,8 @@ 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,6 +34,8 @@ 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;
@@ -406,6 +408,8 @@ 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;
@@ -781,6 +785,8 @@ 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,6 +23,8 @@ 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;
@@ -393,6 +395,8 @@ 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;
@@ -770,6 +774,8 @@ 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;
@@ -1140,6 +1146,8 @@ 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;
@@ -1509,6 +1517,8 @@ 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,6 +26,8 @@ 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,6 +22,8 @@ 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,6 +22,8 @@ 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,6 +22,8 @@ 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: 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" | "white" | "primary" | "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;
@@ -1938,7 +1952,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             };
         }> | undefined;
     }, "size" | "type" | "as"> & {
-        size: import("react").ComponentProps<typeof import("..").Text>["size"];
+        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, style, 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" | "white" | "primary" | "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`.
      *
@@ -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 CHANGED Viewed

@@ -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, style, 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 CHANGED Viewed

@@ -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 D}from"./DataTableContext.js";import{DataTable as H}from"./DataTable.js";const k=({sortable:u=!0,theme:h="light",isSticky:a=!1,stickyOffset:r=0,style:v,css:E,...R})=>{var d;const{getHeaderGroups:w,setIsSortable:m,enableRowSelection:y,getCanSomeRowsExpand:S,tablePosition:e,setTablePosition:g}=D();t.useEffect(()=>{m(u)},[u,m]);const l=t.useRef(null),i=t.useRef(null),T=t.useRef(0),[f,x]=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,n=r+o;e&&g({...e,offsetTop:n||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<r&&e.bottom>100?-e.top+r:0;o!==0&&p(!0),T.current=o,x(o),requestAnimationFrame(()=>{p(!1)})}},[a,r,e]),t.createElement(s.Header,{theme:h,style:{...v,"--header-offset":`${f}px`},css:{position:"relative",zIndex:3,"& tr:not(:last-child) > th":{borderBottom:"none"},"& tr:not(:first-child) > th":{borderRadius:"0 !important"},...E},...R},w().map(o=>t.createElement(s.Row,{key:o.id,ref:l,css:{...a&&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"}}}},S()&&t.createElement(s.HeaderCell,{css:{width:"$4"}}),y&&t.createElement(s.HeaderCell,{css:{width:"$4"}},t.createElement(C,null)),o.headers.map(n=>t.createElement(H.HeaderCell,{header:n,key:n.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 CHANGED Viewed

	@@ -1 +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 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) => (\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","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","DataTable"],"mappings":"~~uPAkBa~~,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,MAAAC,EACA,IAAAC,KACGC,CACL,IAA8C,~~CA1B9C~~,IAAAC,~~EA2BE~~,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,~~EAAa~~,~~EAEjBC,~~EAAM,UAAU,IAAM,CACpBN,~~EAAcT~~,CAAQ,CACxB,EAAG,CAACA,~~EAAUS~~,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,~~KAAA~~,~~OAAAA,~~EAAmB,UAAnB,~~KAAA~~,~~OAAAT,~~EAA4B,QAAQ,~~OAAA~~,~~EAE7D,~~GAAIgB,IAAoBX,GAAA,KAAAA,OAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,~~wBAAwB~~,OAC3DE,~~EAAqBtB~~,~~EAAeqB~~,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAI,~~EAACb~~,IAED,~~CAACe~~,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,~~IAAMT~~,~~GACpBS~~,EAAc,OAAS,IACnB,CAACA,EAAc,~~IAAMT~~,EACrB,~~EAEFuB~~,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,~~CAACpB~~,EAAUC,~~EAAcS~~,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,~~MAAO1B~~,EACP,MAAO,CACL,~~GAAGG~~,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,~~GAEHE~~,~~EAAgB~~,~~EAAE~~,IAAKoB,GAEpBb,EAAA,cAACY,EAAM,IAAN,CACC,IAAKC,EAAY,GACjB,IAAKZ,EACL,IAAK,CACH,~~GAAId~~,~~GACFiB~~,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,~~KACCI~~,EAAA,cAACY,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAA,~~CAAG,~~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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 200ms 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 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'\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 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 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,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,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,~~CAC1B~~,MAAMC,~~EAAgBJ~~,EAAO,OAAO,YAAY,EAC1C,CAAE,~~WAAYK~~,~~CAAgB~~,EAAIC,~~EAAa,EAE~~/CC,~~EAAeP~~,EAAO,OAAO,~~aAE7B~~,CAAE,~~WAAAQ~~,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAA,CAAE,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,~~eACNC~~,~~EAAAA~~,EAASD,CAAgB,EAE7B,EAEME,~~EAAuBd~~,EAAO,OAAO,wBAAwB,EAEnE,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,~~YAAY~~,~~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"}
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"}

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

@@ -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;