@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.11

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

@@ -1,376 +1,19 @@
 import * as React from 'react';
-declare const PendingState: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<({ css, message, size, ...props }: {
+declare const PendingState: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
+    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement> & {
     message?: string;
     size?: "sm" | "md" | "lg";
-    css?: import("../../stitches").CSS;
-}) => React.JSX.Element, {}, {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, import("@atom-learning/stitches-react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, {
-    colors: {
-        textBold: string;
-        textRegular: string;
-        textSubtle: string;
-        textMinimal: string;
-        background: string;
-        backgroundAccent: string;
-        grey100: string;
-        grey200: string;
-        grey300: string;
-        grey400: string;
-        grey500: string;
-        grey600: string;
-        grey700: string;
-        grey800: string;
-        grey900: string;
-        grey1000: string;
-        grey1100: string;
-        grey1200: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        blue1000: string;
-        blue1100: string;
-        blue1200: string;
-        pink100: string;
-        pink200: string;
-        pink300: string;
-        pink400: string;
-        pink500: string;
-        pink600: string;
-        pink700: string;
-        pink800: string;
-        pink900: string;
-        pink1000: string;
-        pink1100: string;
-        pink1200: string;
-        purple100: string;
-        purple200: string;
-        purple300: string;
-        purple400: string;
-        purple500: string;
-        purple600: string;
-        purple700: string;
-        purple800: string;
-        purple900: string;
-        purple1000: string;
-        purple1100: string;
-        purple1200: string;
-        cyan100: string;
-        cyan200: string;
-        cyan300: string;
-        cyan400: string;
-        cyan500: string;
-        cyan600: string;
-        cyan700: string;
-        cyan800: string;
-        cyan900: string;
-        cyan1000: string;
-        cyan1100: string;
-        cyan1200: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        green1000: string;
-        green1100: string;
-        green1200: string;
-        magenta100: string;
-        magenta200: string;
-        magenta300: string;
-        magenta400: string;
-        magenta500: string;
-        magenta600: string;
-        magenta700: string;
-        magenta800: string;
-        magenta900: string;
-        magenta1000: string;
-        magenta1100: string;
-        magenta1200: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        red1000: string;
-        red1100: string;
-        red1200: string;
-        teal100: string;
-        teal200: string;
-        teal300: string;
-        teal400: string;
-        teal500: string;
-        teal600: string;
-        teal700: string;
-        teal800: string;
-        teal900: string;
-        teal1000: string;
-        teal1100: string;
-        teal1200: string;
-        orange100: string;
-        orange200: string;
-        orange300: string;
-        orange400: string;
-        orange500: string;
-        orange600: string;
-        orange700: string;
-        orange800: string;
-        orange900: string;
-        orange1000: string;
-        orange1100: string;
-        orange1200: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        yellow1000: string;
-        yellow1100: string;
-        yellow1200: string;
-        lime100: string;
-        lime200: string;
-        lime300: string;
-        lime400: string;
-        lime500: string;
-        lime600: string;
-        lime700: string;
-        lime800: string;
-        lime900: string;
-        lime1000: string;
-        lime1100: string;
-        lime1200: string;
-        lapis100: string;
-        lapis200: string;
-        lapis300: string;
-        lapis400: string;
-        lapis500: string;
-        lapis600: string;
-        lapis700: string;
-        lapis800: string;
-        lapis900: string;
-        lapis1000: string;
-        lapis1100: string;
-        lapis1200: string;
-        maroon100: string;
-        maroon200: string;
-        maroon300: string;
-        maroon400: string;
-        maroon500: string;
-        maroon600: string;
-        maroon700: string;
-        maroon800: string;
-        maroon900: string;
-        maroon1000: string;
-        maroon1100: string;
-        maroon1200: string;
-        marsh100: string;
-        marsh200: string;
-        marsh300: string;
-        marsh400: string;
-        marsh500: string;
-        marsh600: string;
-        marsh700: string;
-        marsh800: string;
-        marsh900: string;
-        marsh1000: string;
-        marsh1100: string;
-        marsh1200: string;
-        alpha100: string;
-        alpha150: string;
-        alpha200: string;
-        alpha250: string;
-        alpha600: string;
-        infoLight: string;
-        info: string;
-        infoMid: string;
-        infoDark: string;
-        successLight: string;
-        success: string;
-        successMid: string;
-        successDark: string;
-        dangerLight: string;
-        danger: string;
-        dangerMid: string;
-        dangerDark: string;
-        warningLight: string;
-        warning: string;
-        warningMid: string;
-        warningDark: string;
-        warningText: string;
-        subjectEnglish: string;
-        subjectMaths: string;
-        subjectScience: string;
-        subjectVerbalReasoning: string;
-        subjectNonVerbalReasoning: string;
-        subjectCreativeWriting: string;
-        subjectExamSkills: string;
-        subjectGcseEnglishLiterature: string;
-        subjectGcseMaths: string;
-        subjectGcseChemistry: string;
-        subjectGcsePhysics: string;
-        subjectGcseBiology: string;
-        glBlueLight: string;
-        glBluePrimary: string;
-        glBlueDark: string;
-        primary100: string;
-        primary200: string;
-        primary300: string;
-        primary400: string;
-        primary500: string;
-        primary600: string;
-        primary700: string;
-        primary800: string;
-        primary900: string;
-        primary1000: string;
-        primary1100: string;
-        primary1200: string;
-    };
-    space: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "24": string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-    };
-    fonts: {
-        sans: string;
-        mono: string;
-        display: string;
-        body: string;
-    };
-    sizes: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-    };
-    radii: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        round: string;
-    };
-    shadows: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-    };
-    ratios: {
-        "16-9": string;
-        "3-2": string;
-        "4-3": string;
-        "1-1": string;
-        "3-4": string;
-    };
-}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
-    bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
-        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
-    };
-    size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
-        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-    };
-    p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-}>>;
+}, never> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const DataTableLoading: (props: React.ComponentProps<typeof PendingState>) => React.JSX.Element | null;
 export {};

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

@@ -1,2 +1,2 @@
-import*as a from"react";import{styled as e}from"../../stitches.js";import{Loader as r}from"../loader/Loader.js";import{AsyncDataState as m}from"./DataTable.types.js";import{useDataTable as n}from"./DataTableContext.js";const s=e(r,{position:"absolute",left:"50%",top:"50%",transform:"translate(-50%, -50%)",zIndex:1}),l=t=>{const{asyncDataState:o}=n();return o!==m.PENDING?null:a.createElement(s,{...t})};export{l as DataTableLoading};
+import*as e from"react";import{styled as o}from"../../styled.js";import{Loader as r}from"../loader/Loader.js";import{AsyncDataState as m}from"./DataTable.types.js";import{useDataTable as s}from"./DataTableContext.js";const n=o(r,{base:["absolute","left-1/2","top-1/2","-translate-x-1/2","-translate-y-1/2","z-1"]}),l=t=>{const{asyncDataState:a}=s();return a!==m.PENDING?null:e.createElement(n,{...t})};export{l as DataTableLoading};
 //# sourceMappingURL=DataTableLoading.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableLoading.js","sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Loader } from '../loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  position: 'absolute',\n  left: '50%',\n  top: '50%',\n  transform: 'translate(-50%, -50%)',\n  zIndex: 1\n})\n\nexport const DataTableLoading = (\n  props: React.ComponentProps<typeof PendingState>\n) => {\n  const { asyncDataState } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.PENDING) return null\n\n  return <PendingState {...props} />\n}\n"],"names":["PendingState","styled","Loader","DataTableLoading","props","asyncDataState","useDataTable","AsyncDataState","React"],"mappings":"2NAQA,MAAMA,EAAeC,EAAOC,EAAQ,CAClC,SAAU,WACV,KAAM,MACN,IAAK,MACL,UAAW,wBACX,OAAQ,CACV,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,eAAAC,CAAe,EAAIC,EAAAA,EAE3B,OAAID,IAAmBE,EAAe,QAAgB,KAE/CC,EAAA,cAACR,EAAA,CAAc,GAAGI,CAAAA,CAAO,CAClC"}
+{"version":3,"file":"DataTableLoading.js","sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Loader } from '../loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  base: [\n    'absolute',\n    'left-1/2',\n    'top-1/2',\n    '-translate-x-1/2',\n    '-translate-y-1/2',\n    'z-1'\n  ]\n})\n\nexport const DataTableLoading = (\n  props: React.ComponentProps<typeof PendingState>\n) => {\n  const { asyncDataState } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.PENDING) return null\n\n  return <PendingState {...props} />\n}\n"],"names":["PendingState","styled","Loader","DataTableLoading","props","asyncDataState","useDataTable","AsyncDataState","React"],"mappings":"yNAQA,MAAMA,EAAeC,EAAOC,EAAQ,CAClC,KAAM,CACJ,WACA,WACA,UACA,mBACA,mBACA,KACF,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,eAAAC,CAAe,EAAIC,IAE3B,OAAID,IAAmBE,EAAe,QAAgB,KAE/CC,EAAA,cAACR,EAAA,CAAc,GAAGI,CAAAA,CAAO,CAClC"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { CSS } from '../../stitches';
-export declare const DataTableMetaData: ({ copy, css }: {
+import { Text } from '../text';
+export declare const DataTableMetaData: ({ copy, ...rest }: React.ComponentProps<typeof Text> & {
     copy?: {
         sorted_by?: string;
         ascending?: string;
@@ -8,5 +8,4 @@ export declare const DataTableMetaData: ({ copy, css }: {
         separator?: string;
     };
     sortLabel?: string;
-    css?: CSS;
 }) => React.JSX.Element;

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

@@ -1,2 +1,2 @@
-import*as y from"react";import{Text as h}from"../text/Text.js";import{useDataTable as f}from"./DataTableContext.js";import"./DataTable.js";const v={sorted_by:"Sorted by",ascending:"ascending",descending:"descending",separator:"-"},w=({copy:a,css:c})=>{var o,s;const{getState:l,columns:g,getRowModel:m,rowSelection:p}=f(),{sorting:r}=l(),$=r.length>0,d=(s=(o=m())==null?void 0:o.rows)==null?void 0:s.length,n=Object.keys(p||{}).length,t={...v,...a},u=e=>{const i=g.find(b=>b.id===e);return(i==null?void 0:i.header)||e};return y.createElement(h,{weight:"bold",css:c},`${n||d} ${(n||d)===1?"item":"items"} ${n?"selected":""} ${$?(e=>`${t.separator} ${t.sorted_by} ${u(e[0].id)} ${e[0].desc?t.descending:t.ascending}`)(r):""}`)};export{w as DataTableMetaData};
+import*as f from"react";import{Text as v}from"../text/Text.js";import{useDataTable as w}from"./DataTableContext.js";import"./DataTable.js";const D={sorted_by:"Sorted by",ascending:"ascending",descending:"descending",separator:"-"},S=({copy:d,...i})=>{var o,c;const{getState:l,columns:g,getRowModel:m,rowSelection:p}=w(),{sorting:a}=l(),b=a.length>0,r=(c=(o=m())==null?void 0:o.rows)==null?void 0:c.length,n=Object.keys(p||{}).length,e={...D,...d},u=t=>{const s=g.find(y=>y.id===t);return(s==null?void 0:s.header)||t},h=t=>"".concat(e.separator," ").concat(e.sorted_by," ").concat(u(t[0].id)," ").concat(t[0].desc?e.descending:e.ascending);return f.createElement(v,{weight:"bold",...i},"".concat(n||r," ").concat((n||r)===1?"item":"items"," ").concat(n?"selected":""," ").concat(b?h(a):""))};export{S as DataTableMetaData};
 //# sourceMappingURL=DataTableMetaData.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableMetaData.js","sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CSS } from '~/stitches'\n\nimport { Text } from '../text'\nimport { useDataTable } from './index'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  css\n}: {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n  css?: CSS\n}) => {\n  const { getState, columns, getRowModel, rowSelection } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const selectedRows = Object.keys(rowSelection || {}).length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text weight=\"bold\" css={css}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"names":["defaultCopy","DataTableMetaData","copy","css","_a","_b","getState","columns","getRowModel","rowSelection","useDataTable","sorting","isSorted","totalRows","selectedRows","copyMerged","getColumnDisplayName","id","sortedColumn","col","React","Text"],"mappings":"2IAOA,MAAMA,EAAc,CAClB,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,GACb,EAEaC,EAAoB,CAAC,CAChC,KAAAC,EACA,IAAAC,CACF,IASM,CA1BN,IAAAC,EAAAC,EA2BE,KAAM,CAAE,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,aAAAC,CAAa,EAAIC,EAAa,EAChE,CAAE,QAAAC,CAAQ,EAAIL,EAAAA,EACdM,EAAWD,EAAQ,OAAS,EAE5BE,GAAYR,GAAAD,EAAAI,EAAAA,IAAA,KAAA,OAAAJ,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjCS,EAAe,OAAO,KAAKL,GAAgB,CAAA,CAAE,EAAE,OAE/CM,EAAa,CAAE,GAAGf,EAAa,GAAGE,CAAK,EAEvCc,EAAwBC,GAAe,CAC3C,MAAMC,EAAeX,EAAQ,KAAMY,GAAQA,EAAI,KAAOF,CAAE,EACxD,OAAOC,GAAA,KAAA,OAAAA,EAAc,SAAUD,CACjC,EAUA,OACEG,EAAA,cAACC,EAAA,CAAK,OAAO,OAAO,IAAKlB,CAAM,EAAA,GAAGW,GAAgBD,MAC/CC,GAAgBD,KAAe,EAAI,OAAS,WAC3CC,EAAe,WAAa,MAC9BF,GAZsBD,GACjB,GAAGI,EAAW,aACnBA,EAAW,aACTC,EAAqBL,EAAQ,GAAG,EAAE,KACpCA,EAAQ,GAAG,KAAOI,EAAW,WAAaA,EAAW,aAQzBJ,CAAO,EAAI,IACtC,CAEP"}
+{"version":3,"file":"DataTableMetaData.js","sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text'\nimport { useDataTable } from './index'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  ...rest\n}: React.ComponentProps<typeof Text> & {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n}) => {\n  const { getState, columns, getRowModel, rowSelection } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const selectedRows = Object.keys(rowSelection || {}).length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text weight=\"bold\" {...rest}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"names":["defaultCopy","DataTableMetaData","copy","rest","_a","_b","getState","columns","getRowModel","rowSelection","useDataTable","sorting","isSorted","totalRows","selectedRows","copyMerged","getColumnDisplayName","id","sortedColumn","col","getSortingString","React","Text"],"mappings":"2IAKA,MAAMA,EAAc,CAClB,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,GACb,EAEaC,EAAoB,CAAC,CAChC,KAAAC,EACA,GAAGC,CACL,IAQM,CAvBN,IAAAC,EAAAC,EAwBE,KAAM,CAAE,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,aAAAC,CAAa,EAAIC,EACnD,EAAA,CAAE,QAAAC,CAAQ,EAAIL,IACdM,EAAWD,EAAQ,OAAS,EAE5BE,GAAYR,GAAAD,EAAAI,MAAA,KAAAJ,OAAAA,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjCS,EAAe,OAAO,KAAKL,GAAgB,CAAA,CAAE,EAAE,OAE/CM,EAAa,CAAE,GAAGf,EAAa,GAAGE,CAAK,EAEvCc,EAAwBC,GAAe,CAC3C,MAAMC,EAAeX,EAAQ,KAAMY,GAAQA,EAAI,KAAOF,CAAE,EACxD,OAAOC,GAAA,KAAA,OAAAA,EAAc,SAAUD,CACjC,EAEMG,EAAoBT,GACjB,GAAG,OAAAI,EAAW,UAAS,KAC5B,OAAAA,EAAW,UACb,GAAA,EAAI,OAAAC,EAAqBL,EAAQ,CAAC,EAAE,EAAE,EAAC,GACrC,EAAA,OAAAA,EAAQ,CAAC,EAAE,KAAOI,EAAW,WAAaA,EAAW,WAIzD,OACEM,EAAA,cAACC,EAAA,CAAK,OAAO,OAAQ,GAAGnB,CAAO,EAAA,GAAG,OAAAW,GAAgBD,EAAS,GACxD,EAAA,QAAAC,GAAgBD,KAAe,EAAI,OAAS,QAC/C,KAAI,OAAAC,EAAe,WAAa,GAAE,KAChC,OAAAF,EAAWQ,EAAiBT,CAAO,EAAI,GACtC,CAEP"}

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

@@ -3,5 +3,6 @@ import * as React from 'react';
 import { Table } from '../table';
 export type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
     row: Row<Record<string, unknown>>;
+    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
 };
-export declare const DataTableRow: ({ row }: DataTableRowProps) => React.JSX.Element;
+export declare const DataTableRow: ({ row, rowAction }: DataTableRowProps) => React.JSX.Element;

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

@@ -1,2 +1,2 @@
-import{ChevronDown as m,ChevronRight as p}from"@atom-learning/icons";import*as t from"react";import{styled as g}from"../../stitches.js";import{Icon as b}from"../icon/Icon.js";import{Table as a}from"../table/Table.js";import{useDataTable as C}from"./DataTableContext.js";import{DataTableDataCell as w}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as E}from"./DataTableRowSelectionCheckbox.js";const S=g(a.Row,{bg:"initial",variants:{isSelected:{true:{bg:"$primary100 !important"}},isDisabled:{true:{opacity:"30%"}}}}),f=({row:e})=>{const{enableRowSelection:r,disabledRows:o,getCanSomeRowsExpand:i}=C(),n=!!(o!=null&&o[e.id]),d=e.getToggleExpandedHandler(),s=e.getToggleSelectedHandler(),c=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected();return t.createElement(S,{isSelected:e.getIsSelected(),isDisabled:n},i()&&t.createElement(a.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:d},e.getCanExpand()&&t.createElement(b,{is:e.getIsExpanded()?m:p})),r&&t.createElement(a.Cell,{css:{width:"$4"}},t.createElement(E,{row:e,checked:c(),onCheckedChange:s})),e.getVisibleCells().map((l,h)=>t.createElement(w,{key:l.id,cell:l})))};export{f as DataTableRow};
+import{ChevronDown as w,ChevronRight as x}from"@atom-learning/icons";import C from"clsx";import*as r from"react";import{styled as D}from"../../styled.js";import{Icon as E}from"../icon/Icon.js";import{Table as l}from"../table/Table.js";import{useDataTable as h}from"./DataTableContext.js";import{DataTableDataCell as v}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as y}from"./DataTableRowSelectionCheckbox.js";const S=D(l.Row,{base:["bg-[initial]","relative"],variants:{isSelected:{true:["odd:bg-primary-100"]},isDisabled:{true:["opacity-30"]},isFocusable:{true:["translate-y-0","duration-200","ease-out","transition-shadow","transition-transform","hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]","hover:-translate-y-px","hover:z-3","focus:outline-2","focus:outline-primary-500","focus:outline-solid","focus:-outline-offset-4","focus:[&_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:m,disabledRows:i,getCanSomeRowsExpand:u}=h(),s=!!(i!=null&&i[e.id]),p=e.getToggleExpandedHandler(),g=e.getToggleSelectedHandler(),f=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!n||!o.target.closest("tr")||d(o.target)||n(t.original,o)},b=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(S,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!n&&!s,...n&&{onClick:t=>c(e,t),tabIndex:0,className:"cursor-pointer",onKeyDown:b}},u()&&r.createElement(l.Cell,{"data-testid":"expand-icon-".concat(e.id),onClick:p,className:C("w-10",e.getCanExpand()?"cursor-pointer":"cursor-auto")},e.getCanExpand()&&r.createElement(E,{is:e.getIsExpanded()?w:x})),m&&r.createElement(l.Cell,{className:"w-10"},r.createElement(y,{row:e,checked:f(),onCheckedChange:g})),e.getVisibleCells().map((t,o)=>r.createElement(v,{key:t.id,cell:t})))};export{k as DataTableRow};
 //# sourceMappingURL=DataTableRow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n}\n\nconst StyledRow = styled(Table.Row, {\n  bg: 'initial',\n  variants: {\n    isSelected: {\n      true: {\n        // the !important rule is needed because the bg property is set elsewhere and it's more specific than this one would be without the !important modifier.\n        bg: '$primary100 !important'\n      }\n    },\n    isDisabled: {\n      true: {\n        opacity: '30%'\n      }\n    }\n  }\n})\n\nexport const DataTableRow = ({ row }: 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  return (\n    <StyledRow isSelected={row.getIsSelected()} isDisabled={isDisabled}>\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","DataTableRow","row","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAgBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,CACR,WAAY,CACV,KAAM,CAEJ,GAAI,wBACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,CACF,CACF,CAAC,EAEYC,EAAe,CAAC,CAAE,IAAAC,CAAI,IAAyB,CAC1D,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeF,EAAI,KAElCM,EAAsBN,EAAI,yBAAA,EAC1BO,EAAsBP,EAAI,yBAAyB,EAEnDQ,EAAkB,IAClBR,EAAI,kBAAkB,EAAU,gBAC7BA,EAAI,gBAGb,OACES,EAAA,cAACb,EAAA,CAAU,WAAYI,EAAI,gBAAiB,WAAYK,CAAAA,EACrDF,KACCM,EAAA,cAACX,EAAM,KAAN,CACC,cAAa,eAAeE,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASM,CAERN,EAAAA,EAAI,aACHS,GAAAA,EAAA,cAACC,EAAA,CAAK,GAAIV,EAAI,cAAc,EAAIW,EAAcC,CAAc,CAAA,CAEhE,EAGDX,GACCQ,EAAA,cAACX,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAAA,EAC7BW,EAAA,cAACI,EAAA,CACC,IAAKb,EACL,QAASQ,IACT,gBAAiBD,EACnB,CACF,EAEDP,EAAI,kBAAkB,IAAI,CAACc,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAAA,CAAM,CACrD,CACH,CAEJ"}
+{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\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  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['odd:bg-primary-100']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\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        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={clsx(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\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","clsx","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"8aAkBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,KAAM,CAAC,eAAgB,UAAU,EACjC,SAAU,CACR,WAAY,CACV,KAAM,CAAC,oBAAoB,CAC7B,EACA,WAAY,CACV,KAAM,CAAC,YAAY,CACrB,EACA,YAAa,CACX,KAAM,CACJ,gBACA,eACA,WACA,oBACA,uBACA,sDACA,wBACA,YACA,kBACA,4BACA,sBACA,0BACA,6BACF,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,EAAA,GAElCO,EAAsBP,EAAI,yBAAA,EAC1BQ,EAAsBR,EAAI,yBAAyB,EAEnDS,EAAkB,IAClBT,EAAI,kBAA4B,EAAA,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,eAAe,EACrBF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,eACN,EAAA,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,YAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAAA,CAEZ,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,iBACN,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,cAAc,EAC9B,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,UAAW,iBACX,UAAWC,CACb,CAECT,EAAAA,EAAAA,GACCa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAe,OAAAI,EAAI,EAAA,EAChC,QAASO,EACT,UAAWW,EACT,OACAlB,EAAI,eAAiB,iBAAmB,aAC1C,CAECA,EAAAA,EAAI,gBACHiB,EAAA,cAACE,EAAA,CAAK,GAAInB,EAAI,cAAA,EAAkBoB,EAAcC,EAAc,CAEhE,EAGDnB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,UAAU,MACpBqB,EAAAA,EAAA,cAACK,EAAA,CACC,IAAKtB,EACL,QAASS,IACT,gBAAiBD,CACnB,CAAA,CACF,EAEDR,EAAI,kBAAkB,IAAI,CAACuB,EAAMC,IACzBP,EAAA,cAACQ,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}

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

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

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

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

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

@@ -1,2 +1,2 @@
-import*as c from"@radix-ui/react-visually-hidden";import*as e from"react";import{Checkbox as s}from"../checkbox/Checkbox.js";import{Label as i}from"../label/Label.js";import{useDataTable as g}from"./DataTableContext.js";const b=({label:r="All rows selection"})=>{const{getIsAllPageRowsSelected:l,getIsSomePageRowsSelected:t,toggleAllPageRowsSelected:o,tableId:a}=g(),m=()=>t()?"indeterminate":!!l(),n=()=>t()?o(!1):o(!l());return e.createElement(e.Fragment,null,e.createElement(c.Root,null,e.createElement(i,{htmlFor:`${a}_all_rows_selection`},r)),e.createElement(s,{checked:m(),onCheckedChange:n,name:`${a}_allRowsSelection`}))};export{b as DataTableSelectAllRowsCheckbox};
+import*as m from"@radix-ui/react-visually-hidden";import*as e from"react";import{Checkbox as s}from"../checkbox/Checkbox.js";import{Label as i}from"../label/Label.js";import{useDataTable as g}from"./DataTableContext.js";const b=({label:r="All rows selection"})=>{const{getIsAllPageRowsSelected:t,getIsSomePageRowsSelected:l,toggleAllPageRowsSelected:o,tableId:a}=g(),c=()=>l()?"indeterminate":!!t(),n=()=>l()?o(!1):o(!t());return e.createElement(e.Fragment,null,e.createElement(m.Root,null,e.createElement(i,{htmlFor:"".concat(a,"_all_rows_selection")},r)),e.createElement(s,{size:"lg",checked:c(),onCheckedChange:n,name:"".concat(a,"_allRowsSelection")}))};export{b as DataTableSelectAllRowsCheckbox};
 //# sourceMappingURL=DataTableSelectAllRowsCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_all_rows_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n\n      <Checkbox\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"names":["DataTableSelectAllRowsCheckbox","label","getIsAllPageRowsSelected","getIsSomePageRowsSelected","toggleAllPageRowsSelected","tableId","useDataTable","getCheckedState","updateCheckedState","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAOa,MAAAA,EAAiC,CAAC,CAC7C,MAAAC,EAAQ,oBACV,IAEM,CACJ,KAAM,CACJ,yBAAAC,EACA,0BAAAC,EACA,0BAAAC,EACA,QAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAkB,IAClBJ,EAA0B,EAAU,gBACpC,CAAAD,CAAAA,EAAAA,EAIAM,EAAqB,IACrBL,EACKC,EAAAA,EAA0B,EAAK,EAEjCA,EAA0B,CAACF,EAAyB,CAAC,EAG9D,OACEO,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGN,sBAAAA,EAA+BJ,CAAM,CAC1D,EAEAQ,EAAA,cAACG,EAAA,CACC,QAASL,IACT,gBAAiBC,EACjB,KAAM,GAAGH,oBAAAA,CACX,CACF,CAEJ"}
+{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_all_rows_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"names":["DataTableSelectAllRowsCheckbox","label","getIsAllPageRowsSelected","getIsSomePageRowsSelected","toggleAllPageRowsSelected","tableId","useDataTable","getCheckedState","updateCheckedState","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAOa,MAAAA,EAAiC,CAAC,CAC7C,MAAAC,EAAQ,oBACV,IAEM,CACJ,KAAM,CACJ,yBAAAC,EACA,0BAAAC,EACA,0BAAAC,EACA,QAAAC,CACF,EAAIC,EAAa,EAEXC,EAAkB,IAClBJ,IAAoC,gBACpC,CAAA,CAAAD,EAAyB,EAIzBM,EAAqB,IACrBL,IACKC,EAA0B,EAAK,EAEjCA,EAA0B,CAACF,GAA0B,EAG9D,OACEO,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAG,OAAAN,EAAO,wBAAwBJ,CAAM,CAC1D,EAEAQ,EAAA,cAACG,EAAA,CACC,KAAK,KACL,QAASL,EAAgB,EACzB,gBAAiBC,EACjB,KAAM,GAAG,OAAAH,EAAO,mBAClB,CAAA,CAAA,CACF,CAEJ"}

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

@@ -1,14 +1,18 @@
 import * as React from 'react';
-import { CSS } from '../../stitches';
 import { Table } from '../table';
 import { TableBody } from '../table/TableBody';
 import { DataTableHead } from './DataTableHead';
 export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children' | 'numberOfStickyColumns'> & Partial<Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {
     scrollOptions?: {
         hasStickyHeader?: boolean;
-        headerCss?: CSS;
+        stickyHeaderOffset?: number;
+        headerCss?: string;
         numberOfStickyColumns?: number;
-        scrollContainerCss?: CSS;
+        scrollContainerCls?: string | string[];
+        showTotalInFirstColumn?: boolean;
+        totalSuffix?: string;
     };
+    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+    withContainer?: boolean;
 };
-export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, ...props }: DataTableTableProps) => React.JSX.Element | null;
+export declare const DataTableTable: ({ sortable, striped, theme, className, scrollOptions, rowAction, withContainer, ...props }: DataTableTableProps) => JSX.Element | null;

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

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