@atom-learning/components 8.0.3 → 8.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableDataCell.js","names":[],"sources":["../../../src/components/data-table/DataTableDataCell.tsx"],"sourcesContent":["import type { Cell } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table } from '../table/Table'\n\ntype DataTableDataCellProps = {\n  cell: Cell<Record<string, unknown>, unknown>\n}\n\nexport const DataTableDataCell = ({ cell }: DataTableDataCellProps) => {\n  return (\n    <Table.Cell key={cell.id}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </Table.Cell>\n  )\n}\n"],"mappings":";;;;;AAUA,IAAa,qBAAqB,EAAE,WAAmC;AACrE,QACE,oBAAC,MAAM,MAAP,EAAA,UACG,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,YAAY,CAAC,EAC/C,EAFI,KAAK,GAET"}
+{"version":3,"file":"DataTableDataCell.js","names":[],"sources":["../../../src/components/data-table/DataTableDataCell.tsx"],"sourcesContent":["import type { Cell } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table } from '../table/Table'\n\ntype DataTableDataCellProps = {\n  cell: Cell<Record<string, unknown>, unknown>\n}\n\nexport const DataTableDataCell = ({ cell }: DataTableDataCellProps) => (\n  <Table.Cell key={cell.id}>\n    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n  </Table.Cell>\n)\n"],"mappings":";;;;;AAUA,IAAa,qBAAqB,EAAE,WAClC,oBAAC,MAAM,MAAP,EAAA,UACG,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC,EAC/C,GAFK,KAAK,EAEV"}

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

@@ -1,5 +1,5 @@
 import { AsyncDataState } from "./DataTable.types.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
 import { EmptyState } from "../empty-state/EmptyState.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableEmptyState.js","names":[],"sources":["../../../src/components/data-table/DataTableEmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { EmptyState } from '../empty-state/EmptyState'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>\n\nexport const DataTableEmptyState = ({\n  children,\n  ...rest\n}: DataTableEmptyStateProps) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (!isEmpty) return null\n\n  return <EmptyState {...rest}>{children}</EmptyState>\n}\n"],"mappings":";;;;;;AAQA,IAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,gBAAgB,iBAAiB,cAAc;AAKvD,KAAI,EAFY,EADE,mBAAmB,eAAe,YACtB,cAAc,KAAK,GAEnC,QAAO;AAErB,QAAO,oBAAC,YAAD;EAAY,GAAI;EAAO;EAAsB,CAAA"}
+{"version":3,"file":"DataTableEmptyState.js","names":[],"sources":["../../../src/components/data-table/DataTableEmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { EmptyState } from '../empty-state/EmptyState'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\n\ntype DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>\n\nexport const DataTableEmptyState = ({\n  children,\n  ...rest\n}: DataTableEmptyStateProps) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (!isEmpty) return null\n\n  return <EmptyState {...rest}>{children}</EmptyState>\n}\n"],"mappings":";;;;;;AAQA,IAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,gBAAgB,iBAAiB,aAAa;CAKtD,IAAI,EAFY,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM,IAEnC,OAAO;CAErB,OAAO,oBAAC,YAAD;EAAY,GAAI;EAAO;CAAqB,CAAA;AACrD"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataTableContextType } from './DataTable.types';
+import { type DataTableContextType } from './DataTable.types';
 export declare const DataTableError: ({ children }: {
-    children: (retry?: DataTableContextType["runAsyncData"]) => React.ReactElement<unknown>;
+    children: (retry?: DataTableContextType['runAsyncData']) => React.ReactElement<unknown>;
 }) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

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

@@ -1,5 +1,6 @@
 import { AsyncDataState } from "./DataTable.types.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
+import "react";
 //#region src/components/data-table/DataTableError.tsx
 var DataTableError = ({ children }) => {
 	const { asyncDataState, runAsyncData } = useDataTable();

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableError.js","names":[],"sources":["../../../src/components/data-table/DataTableError.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { AsyncDataState, DataTableContextType } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableError = ({\n  children\n}: {\n  children: (\n    retry?: DataTableContextType['runAsyncData']\n  ) => React.ReactElement<unknown>\n}) => {\n  const { asyncDataState, runAsyncData } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.REJECTED) return null\n\n  return children(runAsyncData)\n}\n"],"mappings":";;;AAKA,IAAa,kBAAkB,EAC7B,eAKI;CACJ,MAAM,EAAE,gBAAgB,iBAAiB,cAAc;AAEvD,KAAI,mBAAmB,eAAe,SAAU,QAAO;AAEvD,QAAO,SAAS,aAAa"}
+{"version":3,"file":"DataTableError.js","names":[],"sources":["../../../src/components/data-table/DataTableError.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState, type DataTableContextType } from './DataTable.types'\n\nexport const DataTableError = ({\n  children\n}: {\n  children: (\n    retry?: DataTableContextType['runAsyncData']\n  ) => React.ReactElement<unknown>\n}) => {\n  const { asyncDataState, runAsyncData } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.REJECTED) return null\n\n  return children(runAsyncData)\n}\n"],"mappings":";;;;AAKA,IAAa,kBAAkB,EAC7B,eAKI;CACJ,MAAM,EAAE,gBAAgB,iBAAiB,aAAa;CAEtD,IAAI,mBAAmB,eAAe,UAAU,OAAO;CAEvD,OAAO,SAAS,YAAY;AAC9B"}

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

@@ -4,5 +4,5 @@ type DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {
     label: string;
     hideLabel?: boolean;
 };
-export declare const DataTableGlobalFilter: ({ onChange, label, hideLabel, ...props }: DataTableSearchProps) => React.JSX.Element | null;
+export declare const DataTableGlobalFilter: ({ onChange, label, hideLabel, ...rest }: DataTableSearchProps) => React.JSX.Element | null;
 export {};

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

@@ -1,13 +1,13 @@
 import { cn } from "../../styled.js";
 import { Label } from "../label/Label.js";
 import { AsyncDataState } from "./DataTable.types.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
 import { SearchInput } from "../search-input/SearchInput.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "throttle-debounce";
 //#region src/components/data-table/DataTableGlobalFilter.tsx
-var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...props }) => {
+var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...rest }) => {
 	const { setGlobalFilter, getState, resetPagination, getTotalRows, asyncDataState } = useDataTable();
 	const { globalFilter } = getState();
 	if (!(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0) return null;
@@ -22,7 +22,7 @@ var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...props }) =
 		className: cn("mb-3", hideLabel && "sr-only"),
 		children: label
 	}), /* @__PURE__ */ jsx(SearchInput, {
-		...props,
+		...rest,
 		defaultValue: globalFilter,
 		onChange: handleChange,
 		name: label

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { cn } from '~/styled'\n\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...props\n}: DataTableSearchProps) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const handleChange = debounce(250, (event) => {\n    const {\n      target: { value }\n    } = event\n\n    onChange?.(event)\n    resetPagination()\n    setGlobalFilter(value)\n  })\n\n  return (\n    <>\n      <Label htmlFor={label} className={cn('mb-3', hideLabel && 'sr-only')}>\n        {label}\n      </Label>\n      <SearchInput\n        {...props}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAcA,IAAa,yBAAyB,EACpC,UACA,OACA,YAAY,OACZ,GAAG,YACuB;CAC1B,MAAM,EACJ,iBACA,UACA,iBACA,cACA,mBACE,cAAc;CAClB,MAAM,EAAE,iBAAiB,UAAU;AAKnC,KAFgB,EADE,mBAAmB,eAAe,YACtB,cAAc,KAAK,EAEpC,QAAO;CAEpB,MAAM,eAAe,SAAS,MAAM,UAAU;EAC5C,MAAM,EACJ,QAAQ,EAAE,YACR;AAEJ,aAAW,MAAM;AACjB,mBAAiB;AACjB,kBAAgB,MAAM;GACtB;AAEF,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAO,SAAS;EAAO,WAAW,GAAG,QAAQ,aAAa,UAAU;YACjE;EACK,CAAA,EACR,oBAAC,aAAD;EACE,GAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;EACN,CAAA,CACD,EAAA,CAAA"}
+{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { cn } from '../../styled'\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...rest\n}: DataTableSearchProps) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const handleChange = debounce(250, (event) => {\n    const {\n      target: { value }\n    } = event\n\n    onChange?.(event)\n    resetPagination()\n    setGlobalFilter(value)\n  })\n\n  return (\n    <>\n      <Label htmlFor={label} className={cn('mb-3', hideLabel && 'sr-only')}>\n        {label}\n      </Label>\n      <SearchInput\n        {...rest}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAa,yBAAyB,EACpC,UACA,OACA,YAAY,OACZ,GAAG,WACuB;CAC1B,MAAM,EACJ,iBACA,UACA,iBACA,cACA,mBACE,aAAa;CACjB,MAAM,EAAE,iBAAiB,SAAS;CAKlC,IAFgB,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM,GAEpC,OAAO;CAEpB,MAAM,eAAe,SAAS,MAAM,UAAU;EAC5C,MAAM,EACJ,QAAQ,EAAE,YACR;EAEJ,WAAW,KAAK;EAChB,gBAAgB;EAChB,gBAAgB,KAAK;CACvB,CAAC;CAED,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAO,SAAS;EAAO,WAAW,GAAG,QAAQ,aAAa,SAAS;YAChE;CACI,CAAA,GACP,oBAAC,aAAD;EACE,GAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;CACP,CAAA,CACD,EAAA,CAAA;AAEN"}

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

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

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

@@ -1,12 +1,12 @@
 import { cn } from "../../styled.js";
+import { useDataTable } from "./DataTable.context.js";
 import { Table } from "../table/Table.js";
-import { useDataTable } from "./DataTableContext.js";
 import { DataTableHeaderCell } from "./DataTableHeaderCell.js";
 import { DataTableSelectAllRowsCheckbox } from "./DataTableSelectAllRowsCheckbox.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableHead.tsx
-var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stickyOffset = 0, showTotalInFirstColumn, totalSuffix, style, className, ...props }) => {
+var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stickyOffset = 0, showTotalInFirstColumn, totalSuffix, style, className, ...rest }) => {
 	const { getHeaderGroups, setIsSortable, enableRowSelection, getCanSomeRowsExpand, tablePosition, setTablePosition } = useDataTable();
 	React$1.useEffect(() => {
 		setIsSortable(sortable);
@@ -49,7 +49,7 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 			...style,
 			"--header-offset": `${headerOffset}px`
 		},
-		...props,
+		...rest,
 		className: cn("relative", "z-3", "[&_tr:not(:last-child)>th]:border-b-none", "[&_tr:not(:first-child)>th]:rounded-none!", className),
 		children: getHeaderGroups().map((headerGroup) => {
 			return /* @__PURE__ */ jsxs(Table.Row, {

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\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}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...props\n}: DataTableHeadProps): React.ReactElement<unknown> => {\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      {...props}\n      className={cn(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky && headerOffset !== 0\n                ? cn(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\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"],"mappings":";;;;;;;;AAoBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,QAAQ,SACR,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,YACkD;CACrD,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,eACA,qBACE,cAAc;AAElB,SAAM,gBAAgB;AACpB,gBAAc,SAAS;IACtB,CAAC,UAAU,cAAc,CAAC;CAE7B,MAAM,oBAAoB,QAAM,OAA4B,KAAK;CACjE,MAAM,WAAW,QAAM,OAAgC,KAAK;CAC5D,MAAM,kBAAkB,QAAM,OAAO,EAAE;CAEvC,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,EAAE;CACjE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,MAAM;CAElE,MAAM,mBAAmB,mBAAmB,SAAS,QAAQ,QAAQ;AAErE,KAAI,oBAAoB,eAAe,cAAc,MAAM;EAEzD,MAAM,qBAAqB,eADH,iBAAiB,uBAAuB,CAAC;AAEjE,MAAI,cACF,kBAAiB;GAAE,GAAG;GAAe,WAAW,sBAAsB;GAAG,CAAC;;AAI9E,SAAM,gBAAgB;AACpB,MAAI,CAAC,SAAU;AAEf,MAAI,CAAC,SAAS,WAAW,kBAAkB,QACzC,UAAS,UAAU,kBAAkB,QAAQ,QAC3C,QACD;AAGH,MAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;AAEN,QAAI,cAAc,EAAG,eAAc,KAAK;AAExC,oBAAgB,UAAU;AAC1B,oBAAgB,UAAU;AAE1B,gCAA4B;AAC1B,mBAAc,MAAM;MACpB;;;IAGL;EAAC;EAAU;EAAc;EAAc,CAAC;AAE3C,QACE,oBAAC,MAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;GACpC;EACD,GAAI;EACJ,WAAW,GACT,YACA,OACA,4CACA,6CACA,UACD;YAEA,iBAAiB,CAAC,KAAK,gBAAgB;AACtC,UACE,qBAAC,MAAM,KAAP;IAEE,KAAK;IACL,WACE,YAAY,iBAAiB,IACzB,GACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,4BACD,GACD,KAAA;cAlBR;KAqBG,sBAAsB,IAAI,oBAAC,MAAM,YAAP,EAAkB,WAAU,QAAS,CAAA;KAC/D,sBACC,oBAAC,MAAM,YAAP;MAAkB,WAAU;gBAC1B,oBAAC,gCAAD,EAAkC,CAAA;MACjB,CAAA;KAEpB,YAAY,QAAQ,KAAK,QAAQ,UAChC,oBAAC,qBAAD;MACU;MAER,cAAc,UAAU,KAAK;MAChB;MACb,EAHK,OAAO,GAGZ,CACF;KACQ;MAlCL,YAAY,GAkCP;IAEd;EACW,CAAA"}
+{"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\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}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...rest\n}: DataTableHeadProps): React.ReactElement<unknown> => {\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      {...rest}\n      className={cn(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky && headerOffset !== 0\n                ? cn(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\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"],"mappings":";;;;;;;;AAmBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,QAAQ,SACR,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,WACkD;CACrD,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,eACA,qBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,cAAc,QAAQ;CACxB,GAAG,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,oBAAoB,QAAM,OAA4B,IAAI;CAChE,MAAM,WAAW,QAAM,OAAgC,IAAI;CAC3D,MAAM,kBAAkB,QAAM,OAAO,CAAC;CAEtC,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,KAAK;CAEjE,MAAM,mBAAmB,mBAAmB,SAAS,QAAQ,OAAO;CAEpE,IAAI,oBAAoB,eAAe,cAAc,MAAM;EAEzD,MAAM,qBAAqB,eADH,iBAAiB,sBAAsB,CAAC,CAAC;EAEjE,IAAI,eACF,iBAAiB;GAAE,GAAG;GAAe,WAAW,sBAAsB;EAAE,CAAC;CAE7E;CAEA,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,IAAI,CAAC,SAAS,WAAW,kBAAkB,SACzC,SAAS,UAAU,kBAAkB,QAAQ,QAC3C,OACF;EAGF,IAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;IAEN,IAAI,cAAc,GAAG,cAAc,IAAI;IAEvC,gBAAgB,UAAU;IAC1B,gBAAgB,SAAS;IAEzB,4BAA4B;KAC1B,cAAc,KAAK;IACrB,CAAC;GACH;;CAEJ,GAAG;EAAC;EAAU;EAAc;CAAa,CAAC;CAE1C,OACE,oBAAC,MAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;EACrC;EACA,GAAI;EACJ,WAAW,GACT,YACA,OACA,4CACA,6CACA,SACF;YAEC,gBAAgB,CAAC,CAAC,KAAK,gBAAgB;GACtC,OACE,qBAAC,MAAM,KAAP;IAEE,KAAK;IACL,WACE,YAAY,iBAAiB,IACzB,GACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,2BACF,IACA,KAAA;cAlBR;KAqBG,qBAAqB,KAAK,oBAAC,MAAM,YAAP,EAAkB,WAAU,OAAQ,CAAA;KAC9D,sBACC,oBAAC,MAAM,YAAP;MAAkB,WAAU;gBAC1B,oBAAC,gCAAD,CAAiC,CAAA;KACjB,CAAA;KAEnB,YAAY,QAAQ,KAAK,QAAQ,UAChC,oBAAC,qBAAD;MACU;MAER,cAAc,UAAU,KAAK;MAChB;KACd,GAHM,OAAO,EAGb,CACF;IACQ;MAlCJ,YAAY,EAkCR;EAEf,CAAC;CACW,CAAA;AAElB"}

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

@@ -6,5 +6,5 @@ type DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {
     includeTotal?: boolean;
     totalSuffix?: string;
 };
-export declare const DataTableHeaderCell: ({ header, includeTotal, totalSuffix, children, className, ...props }: DataTableHeaderProps) => React.JSX.Element;
+export declare const DataTableHeaderCell: ({ header, includeTotal, totalSuffix, children, className, ...rest }: DataTableHeaderProps) => React.JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 import { cn, styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { Text } from "../text/Text.js";
+import { useDataTable } from "./DataTable.context.js";
 import { Table } from "../table/Table.js";
-import { useDataTable } from "./DataTableContext.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp } from "@atom-learning/icons";
@@ -40,7 +40,7 @@ var SortIcon = ({ direction }) => /* @__PURE__ */ jsx(Icon, {
 	size: "sm",
 	className: "stroke-primary-900 absolute left-1"
 });
-var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items", children, className, ...props }) => {
+var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items", children, className, ...rest }) => {
 	const sortDirection = header.column.getIsSorted();
 	const { isSortable: isSortableTable, getRowModel } = useDataTable();
 	const isDataColumn = header.column.getCanSort();
@@ -61,7 +61,7 @@ var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items"
 		tabIndex: isSortableTable && isDataColumn ? 0 : -1,
 		...hoverProps,
 		className,
-		...props,
+		...rest,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn("flex", "gap-1", "items-center", header.colSpan > 1 ? "justify-center" : "justify-start"),
 			children: [

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\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 { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\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  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\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    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\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      className={className}\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={cn(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;CAAoB,EAC5E,CAAC;AAEF,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,EAAE;CACR,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EACF,EACF;CACF,CAAC;AAEF,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;CACP;AAED,IAAM,YAAY,EAAE,gBAClB,oBAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;CACV,CAAA;AAGJ,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,YACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,aAAa;CACjD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,cAAc;CAEnE,MAAM,eAAe,OAAO,OAAO,YAAY;CAE/C,MAAM,YAAY,aAAa,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAE9C,MAAM,iBACJ,OACA,aACG;AACH,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,SAAM,gBAAgB;AACtB,YAAS,MAAiB;;;CAI9B,MAAM,uBAAuB,OAAO,OAAO,yBAAyB;AAEpE,QACE,oBAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,qBAAqB;EAE5C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;YAEJ,qBAAC,OAAD;GACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,gBACzC;aANH;IAQG,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY,CAAC;IAC/D,iBAAiB,mBAChB,oBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,aACD;eAED,oBAAC,UAAD,EAAU,WAAW,eAAiB,CAAA;KAClC,CAAA;IAEP,gBACC,qBAAC,aAAD;KAAa,MAAK;KAAK,QAAO;eAA9B;MAAuC;MACnC;MAAU;MAAE;MAAY;MACd;;IAEZ;;EACgB,CAAA"}
+{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\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 { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\n\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  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\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    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...rest\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      className={className}\n      {...rest}\n    >\n      <div\n        className={cn(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={cn(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAkBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;AAAmB,EAC5E,CAAC;AAED,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,CAAC;CACP,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAED,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;AACR;AAEA,IAAM,YAAY,EAAE,gBAClB,oBAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;AACX,CAAA;AAGH,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,WACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,YAAY;CAChD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,aAAa;CAElE,MAAM,eAAe,OAAO,OAAO,WAAW;CAE9C,MAAM,YAAY,YAAY,CAAC,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,CAAC,CAAC;CAE7C,MAAM,iBACJ,OACA,aACG;EACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAe;GACrB,SAAS,KAAgB;EAC3B;CACF;CAEA,MAAM,uBAAuB,OAAO,OAAO,wBAAwB;CAEnE,OACE,oBAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,oBAAoB;EAE3C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;YAEJ,qBAAC,OAAD;GACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,eAC1C;aANF;IAQG,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;IAC9D,iBAAiB,mBAChB,oBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,YACF;eAEA,oBAAC,UAAD,EAAU,WAAW,cAAgB,CAAA;IAClC,CAAA;IAEN,gBACC,qBAAC,aAAD;KAAa,MAAK;KAAK,QAAO;eAA9B;MAAuC;MACnC;MAAU;MAAE;MAAY;KACf;;GAEZ;;CACgB,CAAA;AAE3B"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 declare const PendingState: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     message?: string;
-    size?: "sm" | "md" | "lg";
+    size?: 'sm' | 'md' | 'lg';
 }, never> & {
     as?: React.ElementType;
 }>;

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

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 import { Loader } from "../loader/Loader.js";
 import { AsyncDataState } from "./DataTable.types.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableLoading.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableLoading.js","names":[],"sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Loader } from '../loader/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"],"mappings":";;;;;;;AAQA,IAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,oBACX,UACG;CACH,MAAM,EAAE,mBAAmB,cAAc;AAEzC,KAAI,mBAAmB,eAAe,QAAS,QAAO;AAEtD,QAAO,oBAAC,cAAD,EAAc,GAAI,OAAS,CAAA"}
+{"version":3,"file":"DataTableLoading.js","names":[],"sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Loader } from '../loader/Loader'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\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"],"mappings":";;;;;;;AAOA,IAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,oBACX,UACG;CACH,MAAM,EAAE,mBAAmB,aAAa;CAExC,IAAI,mBAAmB,eAAe,SAAS,OAAO;CAEtD,OAAO,oBAAC,cAAD,EAAc,GAAI,MAAQ,CAAA;AACnC"}

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

@@ -1,5 +1,5 @@
 import { Text } from "../text/Text.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableMetaData.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableMetaData.js","names":[],"sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\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"],"mappings":";;;;;AAKA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ;AAED,IAAa,qBAAqB,EAChC,MACA,GAAG,WASC;CACJ,MAAM,EAAE,UAAU,SAAS,aAAa,iBAAiB,cAAc;CACvE,MAAM,EAAE,YAAY,UAAU;CAC9B,MAAM,WAAW,QAAQ,SAAS;CAElC,MAAM,YAAY,aAAa,EAAE,MAAM;CAEvC,MAAM,eAAe,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC;CAErD,MAAM,aAAa;EAAE,GAAG;EAAa,GAAG;EAAM;CAE9C,MAAM,wBAAwB,OAAe;AAE3C,SADqB,QAAQ,MAAM,QAAQ,IAAI,OAAO,GAAG,EACpC,UAAU;;CAGjC,MAAM,oBAAoB,YAAY;AACpC,SAAO,GAAG,WAAW,UAAU,GAC7B,WAAW,UACZ,GAAG,qBAAqB,QAAQ,GAAG,GAAG,CAAC,GACtC,QAAQ,GAAG,OAAO,WAAW,aAAa,WAAW;;AAIzD,QACE,oBAAC,MAAD;EAAM,QAAO;EAAO,GAAI;YAAO,GAAG,gBAAgB,UAAU,IACzD,gBAAgB,eAAe,IAAI,SAAS,QAC9C,GAAG,eAAe,aAAa,GAAG,GACjC,WAAW,iBAAiB,QAAQ,GAAG;EAC/B,CAAA"}
+{"version":3,"file":"DataTableMetaData.js","names":[],"sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\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"],"mappings":";;;;;AAKA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;AACb;AAEA,IAAa,qBAAqB,EAChC,MACA,GAAG,WASC;CACJ,MAAM,EAAE,UAAU,SAAS,aAAa,iBAAiB,aAAa;CACtE,MAAM,EAAE,YAAY,SAAS;CAC7B,MAAM,WAAW,QAAQ,SAAS;CAElC,MAAM,YAAY,YAAY,CAAC,EAAE,MAAM;CAEvC,MAAM,eAAe,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC;CAErD,MAAM,aAAa;EAAE,GAAG;EAAa,GAAG;CAAK;CAE7C,MAAM,wBAAwB,OAAe;EAE3C,OADqB,QAAQ,MAAM,QAAQ,IAAI,OAAO,EAC/C,CAAA,EAAc,UAAU;CACjC;CAEA,MAAM,oBAAoB,YAAY;EACpC,OAAO,GAAG,WAAW,UAAU,GAC7B,WAAW,UACZ,GAAG,qBAAqB,QAAQ,EAAE,CAAC,EAAE,EAAE,GACtC,QAAQ,EAAE,CAAC,OAAO,WAAW,aAAa,WAAW;CAEzD;CAEA,OACE,oBAAC,MAAD;EAAM,QAAO;EAAO,GAAI;YAAO,GAAG,gBAAgB,UAAU,IACzD,gBAAgB,eAAe,IAAI,SAAS,QAC9C,GAAG,eAAe,aAAa,GAAG,GACjC,WAAW,iBAAiB,OAAO,IAAI;CAChC,CAAA;AAEb"}

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

@@ -1,7 +1,7 @@
 import { cn, styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
+import { useDataTable } from "./DataTable.context.js";
 import { Table } from "../table/Table.js";
-import { useDataTable } from "./DataTableContext.js";
 import { DataTableDataCell } from "./DataTableDataCell.js";
 import { DataTableRowSelectionCheckbox } from "./DataTableRowSelectionCheckbox.js";
 import "react";

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","names":[],"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 '~/styled'\nimport { cn } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/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: ['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={cn(\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) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,WAAW;CAClC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,kBAAkB,EAC1B;EACD,YAAY,EACV,MAAM,CAAC,aAAa,EACrB;EACD,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACF,CAAC;AAEF,IAAM,wBAAwB,YAAqC;AACjE,KAAI,CAAC,QAAS,QAAO;AACrB,KAAI,QAAQ,QAAQ,qCAAqC,CAAE,QAAO;AAClE,KAAI,QAAQ,aAAa,OAAO,KAAK,SAAU,QAAO;AACtD,QAAO;;AAGT,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,cAAc;CAEhB,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,0BAA0B;CAC1D,MAAM,sBAAsB,IAAI,0BAA0B;CAE1D,MAAM,wBAAmD;AACvD,MAAI,IAAI,mBAAmB,CAAE,QAAO;AACpC,SAAO,IAAI,eAAe;;CAG5B,MAAM,kBACJ,SACA,UACG;AACH,MAAI,CAAC,UAAW;AAIhB,MAAI,CADgB,MAAM,OAAmB,QAAQ,KAAK,IACvC,qBAAqB,MAAM,OAAkB,CAC9D;AAGF,YAAU,QAAQ,UAAU,MAAM;;CAGpC,MAAM,iBAAiB,UAAoD;AACzE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,OAAI,qBAAqB,MAAM,OAAkB,CAC/C;AAEF,SAAM,gBAAgB;AACtB,kBACE,KACA,MACD;;AAEH,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;GAEtB,MAAM,UADc,MAAM,OAAuB,QAAQ,KAAK,EAClC;AAC5B,OAAI,WAAW,QAAQ,YAAY,KACjC,SAAQ,OAAO;;AAGnB,MAAI,MAAM,QAAQ,WAAW;AAC3B,SAAM,gBAAgB;GAEtB,MAAM,cADc,MAAM,OAAuB,QAAQ,KAAK,EAC9B;AAChC,OAAI,eAAe,YAAY,YAAY,KACzC,aAAY,OAAO;;;AAKzB,QACE,qBAAC,WAAD;EACE,YAAY,IAAI,eAAe;EACnB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,MAAM;GAC9C,UAAU;GACV,WAAW;GACX,WAAW;GACZ;YATH;GAWG,sBAAsB,IACrB,oBAAC,MAAM,MAAP;IACE,eAAa,eAAe,IAAI;IAChC,SAAS;IACT,WAAW,GACT,QACA,IAAI,cAAc,GAAG,mBAAmB,cACzC;cAEA,IAAI,cAAc,IACjB,oBAAC,MAAD,EAAM,IAAI,IAAI,eAAe,GAAG,cAAc,cAAgB,CAAA;IAErD,CAAA;GAGd,sBACC,oBAAC,MAAM,MAAP;IAAY,WAAU;cACpB,oBAAC,+BAAD;KACO;KACL,SAAS,iBAAiB;KAC1B,iBAAiB;KACjB,CAAA;IACS,CAAA;GAEd,IAAI,iBAAiB,CAAC,KAAK,SAAS;AACnC,WAAO,oBAAC,mBAAD,EAAuC,MAAQ,EAAvB,KAAK,GAAkB;KACtD;GACQ"}
+{"version":3,"file":"DataTableRow.js","names":[],"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, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\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: ['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={cn(\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) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,UAAU;CACjC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,iBAAiB,EAC1B;EACA,YAAY,EACV,MAAM,CAAC,YAAY,EACrB;EACA,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF;AACF,CAAC;AAED,IAAM,wBAAwB,YAAqC;CACjE,IAAI,CAAC,SAAS,OAAO;CACrB,IAAI,QAAQ,QAAQ,oCAAoC,GAAG,OAAO;CAClE,IAAI,QAAQ,aAAa,MAAM,MAAM,UAAU,OAAO;CACtD,OAAO;AACT;AAEA,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,aAAa;CAEf,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,yBAAyB;CACzD,MAAM,sBAAsB,IAAI,yBAAyB;CAEzD,MAAM,wBAAmD;EACvD,IAAI,IAAI,kBAAkB,GAAG,OAAO;EACpC,OAAO,IAAI,cAAc;CAC3B;CAEA,MAAM,kBACJ,SACA,UACG;EACH,IAAI,CAAC,WAAW;EAIhB,IAAI,CADgB,MAAM,OAAmB,QAAQ,IAChD,KAAc,qBAAqB,MAAM,MAAiB,GAC7D;EAGF,UAAU,QAAQ,UAAU,KAAK;CACnC;CAEA,MAAM,iBAAiB,UAAoD;EACzE,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,IAAI,qBAAqB,MAAM,MAAiB,GAC9C;GAEF,MAAM,eAAe;GACrB,eACE,KACA,KACF;EACF;EACA,IAAI,MAAM,QAAQ,aAAa;GAC7B,MAAM,eAAe;GAErB,MAAM,UADc,MAAM,OAAuB,QAAQ,IACzC,CAAA,EAAY;GAC5B,IAAI,WAAW,QAAQ,YAAY,MACjC,QAAQ,MAAM;EAElB;EACA,IAAI,MAAM,QAAQ,WAAW;GAC3B,MAAM,eAAe;GAErB,MAAM,cADc,MAAM,OAAuB,QAAQ,IACrC,CAAA,EAAY;GAChC,IAAI,eAAe,YAAY,YAAY,MACzC,YAAY,MAAM;EAEtB;CACF;CAEA,OACE,qBAAC,WAAD;EACE,YAAY,IAAI,cAAc;EAClB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,KAAK;GAC7C,UAAU;GACV,WAAW;GACX,WAAW;EACb;YATF;GAWG,qBAAqB,KACpB,oBAAC,MAAM,MAAP;IACE,eAAa,eAAe,IAAI;IAChC,SAAS;IACT,WAAW,GACT,QACA,IAAI,aAAa,IAAI,mBAAmB,aAC1C;cAEC,IAAI,aAAa,KAChB,oBAAC,MAAD,EAAM,IAAI,IAAI,cAAc,IAAI,cAAc,aAAe,CAAA;GAErD,CAAA;GAGb,sBACC,oBAAC,MAAM,MAAP;IAAY,WAAU;cACpB,oBAAC,+BAAD;KACO;KACL,SAAS,gBAAgB;KACzB,iBAAiB;IAClB,CAAA;GACS,CAAA;GAEb,IAAI,gBAAgB,CAAC,CAAC,KAAK,SAAS;IACnC,OAAO,oBAAC,mBAAD,EAAuC,KAAO,GAAtB,KAAK,EAAiB;GACvD,CAAC;EACQ;;AAEf"}

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

@@ -2,7 +2,7 @@ import type { Row } from '@tanstack/react-table';
 import * as React from 'react';
 export declare const DataTableRowSelectionCheckbox: ({ row, checked, onCheckedChange, label }: {
     row: Row<Record<string, unknown>>;
-    checked: boolean | "indeterminate";
+    checked: boolean | 'indeterminate';
     onCheckedChange: (value: boolean) => void;
     label?: string;
 }) => React.ReactElement<unknown>;

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

@@ -1,5 +1,5 @@
 import { Checkbox } from "../checkbox/Checkbox.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableRowSelectionCheckbox.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\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<unknown> => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n        {label}\n      </label>\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"],"mappings":";;;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAMW;CACjC,MAAM,EAAE,YAAY,cAAc;AAElC,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;YAC7D;EACK,CAAA,EACR,oBAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,OAAO;EACtB;EACQ;EACjB,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,cAAc;EAC7B,WAAU;EACV,CAAA,CACD,EAAA,CAAA"}
+{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTable.context'\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<unknown> => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n        {label}\n      </label>\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"],"mappings":";;;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAMW;CACjC,MAAM,EAAE,YAAY,aAAa;CAEjC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;YAC7D;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,MAAM;EACrB;EACQ;EACjB,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,aAAa;EAC5B,WAAU;CACX,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -1,5 +1,5 @@
 import { Checkbox } from "../checkbox/Checkbox.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableSelectAllRowsCheckbox.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/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      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,cAAc;CAElB,MAAM,wBAAwB;AAC5B,MAAI,2BAA2B,CAAE,QAAO;AACxC,MAAI,0BAA0B,CAAE,QAAO;AACvC,SAAO;;CAGT,MAAM,2BAA2B;AAC/B,MAAI,2BAA2B,CAC7B,QAAO,0BAA0B,MAAM;AAEzC,SAAO,0BAA0B,CAAC,0BAA0B,CAAC;;AAG/D,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;YACxD;EACK,CAAA,EACR,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,iBAAiB;EAC1B,iBAAiB;EACjB,MAAM,GAAG,QAAQ;EACjB,CAAA,CACD,EAAA,CAAA"}
+{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTable.context'\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      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,aAAa;CAEjB,MAAM,wBAAwB;EAC5B,IAAI,0BAA0B,GAAG,OAAO;EACxC,IAAI,yBAAyB,GAAG,OAAO;EACvC,OAAO;CACT;CAEA,MAAM,2BAA2B;EAC/B,IAAI,0BAA0B,GAC5B,OAAO,0BAA0B,KAAK;EAExC,OAAO,0BAA0B,CAAC,yBAAyB,CAAC;CAC9D;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;YACxD;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,gBAAgB;EACzB,iBAAiB;EACjB,MAAM,GAAG,QAAQ;CAClB,CAAA,CACD,EAAA,CAAA;AAEN"}

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

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

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

@@ -1,7 +1,7 @@
 import { cn, styled } from "../../styled.js";
-import { Table } from "../table/Table.js";
 import { AsyncDataState } from "./DataTable.types.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
+import { Table } from "../table/Table.js";
 import { DataTableBody } from "./DataTableBody.js";
 import { DataTableHead } from "./DataTableHead.js";
 import { DataTableLoading } from "./DataTableLoading.js";
@@ -19,7 +19,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 	hasStickyHeader: false,
 	showTotalInFirstColumn: true,
 	totalSuffix: "items"
-}, rowAction, withContainer = false, ...props }) => {
+}, rowAction, withContainer = false, ...rest }) => {
 	const { asyncDataState, getTotalRows, getCanSomeRowsExpand, rowSelection, enableRowSelection, tableId, setTablePosition } = useDataTable();
 	const tableRef = React$1.useRef(null);
 	const isTableVisible = React$1.useRef(false);
@@ -90,7 +90,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 	const tableComponent = /* @__PURE__ */ jsxs(Table, {
 		corners: "round",
 		size: "lg",
-		...props,
+		...rest,
 		ref: tableRef,
 		numberOfStickyColumns: scrollOptions.numberOfStickyColumns,
 		scrollContainerCls: scrollOptions.scrollContainerCls,

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...props\n}: DataTableTableProps): React.JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...props}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CAAC;CAAO;CAAY;CAAa,EACxC,CAAC;AAuBF,IAAa,kBAAkB,EAC7B,UACA,SACA,QAAQ,SACR,WACA,gBAAgB;CACd,uBAAuB;CACvB,oBAAoB;CACpB,iBAAiB;CACjB,wBAAwB;CACxB,aAAa;CACd,EACD,WACA,gBAAgB,OAChB,GAAG,YACgD;CACnD,MAAM,EACJ,gBACA,cACA,sBACA,cACA,oBACA,SACA,qBACE,cAAc;CAElB,MAAM,WAAW,QAAM,OAAgC,KAAK;CAC5D,MAAM,iBAAiB,QAAM,OAAO,MAAM;CAC1C,MAAM,cAAc,QAAM,OAAgB,MAAM;CAEhD,MAAM,eAAe,QAAM,cAAc;AACvC,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO;IACN,EAAE,CAAC;AAEN,SAAM,gBAAgB;AACpB,MAAI,CAAC,gBAAgB,OAAO,yBAAyB,YACnD;EAGF,MAAM,uBAAuB;AAC3B,OAAI,SAAS,SAAS;IACpB,MAAM,WAAW,SAAS,QAAQ,uBAAuB,CAAC;IAC1D,MAAM,cAAc,SAAS,QAAQ,uBAAuB,CAAC;AAE7D,sBAAkB,kBAAkB;KAClC,GAAG;KACH,KAAK;KACL,QAAQ;KACT,EAAE;;AAEL,eAAY,UAAU;;EAGxB,MAAM,qBAAqB;AACzB,OAAI,CAAC,YAAY,SAAS;AACxB,0BAAsB,eAAe;AACrC,gBAAY,UAAU;;;AAI1B,MAAI,CAAC,SAAS,QAAS;EAEvB,MAAM,iBAAiB,eAAe,sBAAsB;EAE5D,MAAM,kBAAkB;GACtB,YAAY,IAAI,eAAe,UAAU,eAAe;GACxD,WAAW;GACZ;EAED,MAAM,2BAA2B,YAAyC;AACxE,OAAI,CAAC,WAAW,QAAQ,WAAW,EAAG;GACtC,MAAM,QAAQ,QAAQ;AAEtB,kBAAe,UAAU,MAAM;AAE/B,OAAI,aACF,KAAI,MAAM,eAER,eAAc,iBAAiB,UAAU,aAAa;OAGtD,eAAc,oBAAoB,UAAU,aAAa;AAI7D,qBAAkB,kBAAkB;IAClC,GAAG;IACH,WAAW,MAAM;IAClB,EAAE;;EAGL,MAAM,gBAAgB,IAAI,qBACxB,yBACA,gBACD;AAGD,MACE,SAAS,YACR,cAAc,mBACb,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS,GAE3C,eAAc,QAAQ,SAAS,QAAQ;AAGzC,eAAa;AACX,iBAAc,YAAY;AAC1B,OAAI,aACF,eAAc,oBAAoB,UAAU,aAAa;;IAG5D;EACD;EACA,cAAc;EACd,eAAe;EACf;EACA;EACD,CAAC;CAEF,MAAM,YAAY,mBAAmB,eAAe;CACpD,MAAM,UAAU,CAAC,aAAa,cAAc,KAAK;CAEjD,MAAM,gCAAwC;EAC5C,IAAI,qBAAqB;AAEzB,MAAI,sBAAsB,IAAI,CAAC,CAAC,mBAC9B,sBAAqB;WACZ,sBAAsB,IAAI,CAAC,CAAC,mBACrC,sBAAqB;AAGvB,SAAO,GAAG,QAAQ,GAAG,mBAAmB;;AAG1C,KAAI,QAAS,QAAO;CAEpB,MAAM,iBACJ,qBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,GAAI;EACJ,KAAK;EACL,uBAAuB,cAAc;EACrC,oBAAoB,cAAc;EAClC,oBAAoB,yBAAyB;EAC7C,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;GACD,EACD,UACD;YAlBH,CAoBE,oBAAC,eAAD;GACS;GACG;GACV,UAAU,cAAc;GACxB,cAAc,cAAc;GAC5B,WAAW,cAAc;GACzB,wBAAwB,cAAc;GACtC,aAAa,cAAc;GAC3B,CAAA,EACF,oBAAC,eAAD;GAAwB;GAAoB;GAAa,CAAA,CACnD;;AAGV,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAoB,CAAA,EACnB,gBACC,oBAAC,gBAAD;EACE,WAAW,GACT,cAAc,0BAA0B,KAAK,kBAC9C;YAEA;EACc,CAAA,GAEjB,eAED,EAAA,CAAA"}
+{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...rest\n}: DataTableTableProps): React.JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...rest}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/data-table/drag-and-drop/DragAndDropTable.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TAsyncDataResult } from '../DataTable.types';
+import { type AsyncDataResult } from '../DataTable.types';
 import type { DataTableTableProps } from '../DataTableTable';
 type DragAndDropTableProps = DataTableTableProps & {
     className?: string;
@@ -7,8 +7,8 @@ type DragAndDropTableProps = DataTableTableProps & {
     onDragAndDrop?: (onDragAndDropData: {
         oldIndex: number;
         newIndex: number;
-        newData: TAsyncDataResult;
+        newData: AsyncDataResult;
     }) => void;
 };
-export declare const DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, className, ...props }: DragAndDropTableProps) => React.JSX.Element;
+export declare const DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, className, ...rest }: DragAndDropTableProps) => React.JSX.Element;
 export {};

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js

@@ -1,7 +1,7 @@
 import { cn } from "../../../styled.js";
-import { Table } from "../../table/Table.js";
 import { AsyncDataState } from "../DataTable.types.js";
-import { useDataTable } from "../DataTableContext.js";
+import { useDataTable } from "../DataTable.context.js";
+import { Table } from "../../table/Table.js";
 import { DataTableHead } from "../DataTableHead.js";
 import { DataTableLoading } from "../DataTableLoading.js";
 import { SortableRoot } from "../../sortable/SortableRoot.js";
@@ -10,7 +10,7 @@ import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { arrayMove } from "@dnd-kit/sortable";
 //#region src/components/data-table/drag-and-drop/DragAndDropTable.tsx
-var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, theme, className, ...props }) => {
+var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, theme, className, ...rest }) => {
 	const { asyncDataState, data, setData } = useDataTable();
 	const isPending = asyncDataState === AsyncDataState.PENDING;
 	const rowIds = React$1.useMemo(() => data.results.map((row) => {
@@ -35,7 +35,7 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 		}, [data, onDragAndDrop]),
 		sortableIds: rowIds,
 		children: [/* @__PURE__ */ jsx(DataTableLoading, {}), /* @__PURE__ */ jsxs(Table, {
-			...props,
+			...rest,
 			className: cn(isPending && [
 				"opacity-50",
 				"pointer-events-none",

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  className,\n  ...props\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as string | number\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\n        className={cn(\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity',\n            'duration-250',\n            'linear',\n            'delay-150'\n          ],\n          className\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,cAAc;CACxD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;AACxB,SAAO,IAAI;GACX,EACJ,CAAC,KAAK,CACP;AAWD,QACE,qBAAC,cAAD;EAAe,cAXQ,QAAM,aAC5B,EAAE,UAAU,eAAe;GAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,SAAS;GACjE,MAAM,UAAU;IAAE,SAAS;IAAe,OAAO,KAAK;IAAO;AAC7D,WAAQ;IAAE,SAAS;IAAe,OAAO,KAAK;IAAO,CAAC;AACtD,mBAAgB;IAAE;IAAU;IAAU;IAAS,CAAC;KAElD,CAAC,MAAM,cAAc,CACtB;EAGgD,aAAa;YAA5D,CACE,oBAAC,kBAAD,EAAoB,CAAA,EACpB,qBAAC,OAAD;GACE,GAAI;GACJ,WAAW,GACT,aAAa;IACX;IACA;IACA;IACA;IACA;IACA;IACD,EACD,UACD;aAZH,CAcE,oBAAC,eAAD;IAAsB;IAAiB;IAAY,CAAA,EACnD,oBAAC,sBAAD;IAA+B;IAAmB;IAAY,CAAA,CACxD;KACM"}
+{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '../../../styled'\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState, type AsyncDataResult } from '../DataTable.types'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: AsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  className,\n  ...rest\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as string | number\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...rest}\n        className={cn(\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity',\n            'duration-250',\n            'linear',\n            'delay-150'\n          ],\n          className\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,WACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,aAAa;CACvD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;EACxB,OAAO,IAAI;CACb,CAAC,GACH,CAAC,IAAI,CACP;CAWA,OACE,qBAAC,cAAD;EAAe,cAXQ,QAAM,aAC5B,EAAE,UAAU,eAAe;GAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,QAAQ;GAChE,MAAM,UAAU;IAAE,SAAS;IAAe,OAAO,KAAK;GAAM;GAC5D,QAAQ;IAAE,SAAS;IAAe,OAAO,KAAK;GAAM,CAAC;GACrD,gBAAgB;IAAE;IAAU;IAAU;GAAQ,CAAC;EACjD,GACA,CAAC,MAAM,aAAa,CAIS;EAAkB,aAAa;YAA5D,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,qBAAC,OAAD;GACE,GAAI;GACJ,WAAW,GACT,aAAa;IACX;IACA;IACA;IACA;IACA;IACA;GACF,GACA,SACF;aAZF,CAcE,oBAAC,eAAD;IAAsB;IAAiB;GAAW,CAAA,GAClD,oBAAC,sBAAD;IAA+B;IAAmB;GAAW,CAAA,CACxD;IACM;;AAEnB"}

package/dist/components/data-table/drag-and-drop/DragAndDropTableBody.d.ts

@@ -3,5 +3,5 @@ import { Table } from '../../table/Table';
 type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'> & {
     idColumn?: string;
 };
-export declare const DragAndDropTableBody: ({ striped, idColumn, ...props }: DataTableBodyProps) => React.JSX.Element;
+export declare const DragAndDropTableBody: ({ striped, idColumn, ...rest }: DataTableBodyProps) => React.JSX.Element;
 export {};