@atom-learning/components 6.0.0-beta.9 → 6.0.3

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  Row,\n  RowSelectionState\n} from '@tanstack/react-table'\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n  AsyncDataState,\n  DataTableContextType,\n  InitialState,\n  TableData,\n  TablePosition,\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TDefaultSort,\n  TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n  React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n  columns\n  defaultSort?: TDefaultSort\n  children: React.ReactNode\n  initialState?: InitialState\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n  | { data: TableData; getAsyncData?: never }\n  | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n  columns,\n  data: dataProp = [],\n  getAsyncData,\n  defaultSort,\n  initialState = undefined,\n  disabledRows,\n  enableRowSelection,\n  onRowSelectionChange,\n  children\n}: DataTableProviderProps): JSX.Element => {\n  const tableId = React.useRef(uuid())\n\n  const [data, setData] = React.useState<TAsyncDataResult>({\n    results: dataProp ?? [],\n    total: dataProp?.length ?? 0\n  })\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n  const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n  const [tablePosition, setTablePosition] = React.useState<TablePosition>({\n    top: null,\n    bottom: null,\n    offsetTop: 0,\n    isVisible: true\n  })\n\n  const { isPaginated, applyPagination, paginationState, setPaginationState } =\n    usePagination(initialState?.pagination)\n\n  const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n    AsyncDataState.NONE\n  )\n\n  const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n  const { setIsSortable, isSortable, sorting, setSorting } =\n    useSortByColumn(defaultSort)\n\n  const runAsyncData = React.useCallback(\n    async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n      if (!getAsyncData) return\n\n      try {\n        setAsyncDataState(AsyncDataState.PENDING)\n\n        const newData = await getNewAsyncData(\n          getAsyncData,\n          overrideAsyncDataOptions,\n          paginationState as PaginationState,\n          sorting,\n          globalFilter\n        )\n\n        setData(newData as TAsyncDataResult)\n        setAsyncDataState(AsyncDataState.FULFILLED)\n      } catch (error) {\n        setAsyncDataState(AsyncDataState.REJECTED)\n      }\n    },\n    [\n      getAsyncData,\n      paginationState?.pageIndex,\n      paginationState?.pageSize,\n      sorting,\n      globalFilter\n    ]\n  )\n\n  React.useEffect(() => {\n    runAsyncData({})\n  }, [runAsyncData])\n\n  useDeepCompareEffect(() => {\n    if (!dataProp) return\n\n    setData({ results: dataProp, total: dataProp.length })\n  }, [dataProp])\n\n  const getTotalRows = () => data.total\n\n  const hasSelectedRows = Object.keys(rowSelection || {}).length > 0\n\n  const table = useReactTable<unknown>({\n    columns,\n    data: data.results,\n    pageCount: paginationState\n      ? Math.ceil(getTotalRows() / paginationState.pageSize)\n      : -1,\n    initialState: initialState,\n    state: {\n      sorting,\n      globalFilter,\n      pagination: paginationState,\n      rowSelection,\n      expanded\n    },\n    manualPagination: getAsyncData && isPaginated,\n    manualSorting: getAsyncData && isPaginated,\n    enableSorting: asyncDataState !== AsyncDataState.PENDING,\n    enableGlobalFilter: !getAsyncData,\n    enableRowSelection,\n    onExpandedChange: setExpanded,\n    getSubRows: (row: Row<unknown>) => row.subRows,\n    onRowSelectionChange: (updaterOrValue) => {\n      if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n      setRowSelection(updaterOrValue)\n    },\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n    getSortedRowModel:\n      isSortable || sorting.length ? getSortedRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    onPaginationChange: isPaginated ? setPaginationState : undefined,\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    globalFilterFn: (row, columnId, filterValue) => {\n      const checkFilterMatchesCell = (cellValue: string) =>\n        cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n      const isSubRow = row.depth > 0\n\n      if (isSubRow) return true\n\n      const value = row.getValue(columnId)\n      switch (typeof value) {\n        case 'string':\n          return checkFilterMatchesCell(value)\n        case 'boolean':\n        case 'number':\n          return checkFilterMatchesCell(String(value))\n        default:\n          return false\n      }\n    }\n  })\n\n  const value: DataTableContextType = React.useMemo(() => {\n    return {\n      ...table,\n      columns,\n      data,\n      setData,\n      setIsSortable,\n      applyPagination,\n      getTotalRows,\n      isSortable,\n      asyncDataState,\n      runAsyncData,\n      disabledRows,\n      enableRowSelection,\n      rowSelection,\n      tablePosition,\n      setTablePosition,\n      tableId: tableId.current\n    }\n  }, [\n    table,\n    applyPagination,\n    getTotalRows,\n    isSortable,\n    enableRowSelection,\n    tableId\n  ])\n\n  return (\n    <DataTableContext.Provider value={value}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n  const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n  if (!context)\n    throw new Error(\n      'useDataTable can only be called from inside a DataTableProvider'\n    )\n\n  return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","disabledRows","enableRowSelection","onRowSelectionChange","children","_a","tableId","uuid","data","setData","rowSelection","setRowSelection","expanded","setExpanded","tablePosition","setTablePosition","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","row","updaterOrValue","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","getExpandedRowModel","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}
+{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  Row,\n  RowSelectionState\n} from '@tanstack/react-table'\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n  AsyncDataState,\n  DataTableContextType,\n  InitialState,\n  TableData,\n  TablePosition,\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TDefaultSort,\n  TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n  React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n  columns\n  defaultSort?: TDefaultSort\n  children: React.ReactNode\n  initialState?: InitialState\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n  | { data: TableData; getAsyncData?: never }\n  | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n  columns,\n  data: dataProp = [],\n  getAsyncData,\n  defaultSort,\n  initialState = undefined,\n  disabledRows,\n  enableRowSelection,\n  onRowSelectionChange,\n  children\n}: DataTableProviderProps): JSX.Element => {\n  const tableId = React.useRef(uuid())\n\n  const [data, setData] = React.useState<TAsyncDataResult>({\n    results: dataProp ?? [],\n    total: dataProp?.length ?? 0\n  })\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n  const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n  const [tablePosition, setTablePosition] = React.useState<TablePosition>({\n    top: null,\n    bottom: null,\n    offsetTop: 0,\n    isVisible: true\n  })\n\n  const { isPaginated, applyPagination, paginationState, setPaginationState } =\n    usePagination(initialState?.pagination)\n\n  const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n    AsyncDataState.NONE\n  )\n\n  const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n  const { setIsSortable, isSortable, sorting, setSorting } =\n    useSortByColumn(defaultSort)\n\n  const runAsyncData = React.useCallback(\n    async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n      if (!getAsyncData) return\n\n      try {\n        setAsyncDataState(AsyncDataState.PENDING)\n\n        const newData = await getNewAsyncData(\n          getAsyncData,\n          overrideAsyncDataOptions,\n          paginationState as PaginationState,\n          sorting,\n          globalFilter\n        )\n\n        setData(newData as TAsyncDataResult)\n        setAsyncDataState(AsyncDataState.FULFILLED)\n      } catch (error) {\n        setAsyncDataState(AsyncDataState.REJECTED)\n      }\n    },\n    [\n      getAsyncData,\n      paginationState?.pageIndex,\n      paginationState?.pageSize,\n      sorting,\n      globalFilter\n    ]\n  )\n\n  React.useEffect(() => {\n    runAsyncData({})\n  }, [runAsyncData])\n\n  useDeepCompareEffect(() => {\n    if (!dataProp) return\n\n    setData({ results: dataProp, total: dataProp.length })\n  }, [dataProp])\n\n  const getTotalRows = () => data.total\n\n  const table = useReactTable<unknown>({\n    columns,\n    data: data.results,\n    pageCount:\n      getAsyncData && paginationState\n        ? Math.ceil(getTotalRows() / paginationState.pageSize)\n        : -1,\n    initialState: initialState,\n    state: {\n      sorting,\n      globalFilter,\n      pagination: paginationState,\n      rowSelection,\n      expanded\n    },\n    manualPagination: getAsyncData && isPaginated,\n    manualSorting: getAsyncData && isPaginated,\n    enableSorting: asyncDataState !== AsyncDataState.PENDING,\n    enableGlobalFilter: !getAsyncData,\n    enableRowSelection,\n    onExpandedChange: setExpanded,\n    getSubRows: (row: Row<unknown>) => row.subRows,\n    onRowSelectionChange: (updaterOrValue) => {\n      if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n      setRowSelection(updaterOrValue)\n    },\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n    getSortedRowModel:\n      isSortable || sorting.length ? getSortedRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    onPaginationChange: isPaginated ? setPaginationState : undefined,\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    globalFilterFn: (row, columnId, filterValue) => {\n      const checkFilterMatchesCell = (cellValue: string) =>\n        cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n      const isSubRow = row.depth > 0\n\n      if (isSubRow) return true\n\n      const value = row.getValue(columnId)\n      switch (typeof value) {\n        case 'string':\n          return checkFilterMatchesCell(value)\n        case 'boolean':\n        case 'number':\n          return checkFilterMatchesCell(String(value))\n        default:\n          return false\n      }\n    }\n  })\n\n  const value: DataTableContextType = React.useMemo(() => {\n    return {\n      ...table,\n      columns,\n      data,\n      setData,\n      setIsSortable,\n      applyPagination,\n      getTotalRows,\n      isSortable,\n      asyncDataState,\n      runAsyncData,\n      hasAsyncData: !!getAsyncData,\n      disabledRows,\n      enableRowSelection,\n      rowSelection,\n      tablePosition,\n      setTablePosition,\n      tableId: tableId.current\n    }\n  }, [\n    table,\n    applyPagination,\n    getTotalRows,\n    isSortable,\n    enableRowSelection,\n    tableId,\n    getAsyncData\n  ])\n\n  return (\n    <DataTableContext.Provider value={value}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n  const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n  if (!context)\n    throw new Error(\n      'useDataTable can only be called from inside a DataTableProvider'\n    )\n\n  return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","disabledRows","enableRowSelection","onRowSelectionChange","children","tableId","uuid","data","setData","rowSelection","setRowSelection","expanded","setExpanded","tablePosition","setTablePosition","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","row","updaterOrValue","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","getExpandedRowModel","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import h from"clsx";import*as t from"react";import{Table as n}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as D}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as N}from"./DataTableContext.js";import{DataTable as A}from"./DataTable.js";const F=({sortable:c=!0,theme:p="light",isSticky:s=!1,stickyOffset:a=0,showTotalInFirstColumn:y,totalSuffix:v,style:E,className:S,...T})=>{var u;const{getHeaderGroups:_,setIsSortable:f,enableRowSelection:w,getCanSomeRowsExpand:R,tablePosition:e,setTablePosition:g}=N();t.useEffect(()=>{f(c)},[c,f]);const o=t.useRef(null),i=t.useRef(null),x=t.useRef(0),[m,C]=t.useState(0),[H,d]=t.useState(!1),b=(u=o==null?void 0:o.current)==null?void 0:u.closest("thead");if(b&&(e==null?void 0:e.offsetTop)===null){const l=b.getBoundingClientRect().height,r=a+l;e&&g({...e,offsetTop:r||0})}return t.useEffect(()=>{if(s&&(!i.current&&o.current&&(i.current=o.current.closest("table")),i.current&&(e==null?void 0:e.top)!==null&&(e==null?void 0:e.bottom)!==null)){const l=(e==null?void 0:e.top)!=null&&(e==null?void 0:e.bottom)!=null&&e.top<a&&e.bottom>100?-e.top+a:0;l!==0&&d(!0),x.current=l,C(l),requestAnimationFrame(()=>{d(!1)})}},[s,a,e]),t.createElement(n.Header,{theme:p,style:{...E,"--header-offset":"".concat(m,"px")},...T,className:h("relative","z-3","[&_tr:not(:last-child)>th]:border-b-none","[&_tr:not(:first-child)>th]:rounded-none!",S)},_().map(l=>t.createElement(n.Row,{key:l.id,ref:o,className:s&&m!==0?h("translate-y-(--header-offset)",H?"delay-0ms opacity-0 transition-none":"delay-150ms opacity-100 transition-opacity duration-100","[&_th]:last:before:absolute","[&_th]:last:before:bottom-0","[&_th]:last:before:pointer-events-none","[&_th]:last:before:right-0","[&_th]:last:before:shadow-sm","[&_th]:last:before:top-0","[&_th]:last:before:w-full"):void 0},R()&&t.createElement(n.HeaderCell,{className:"w-10"}),w&&t.createElement(n.HeaderCell,{className:"w-10"},t.createElement(D,null)),l.headers.map((r,k)=>t.createElement(A.HeaderCell,{header:r,key:r.id,includeTotal:k===0&&y,totalSuffix:v})))))};export{F as DataTableHead};
+import h from"clsx";import*as t from"react";import{Table as n}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as D}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as N}from"./DataTableContext.js";import{DataTable as $}from"./DataTable.js";const A=({sortable:u=!0,theme:p="light",isSticky:s=!1,stickyOffset:a=0,showTotalInFirstColumn:y,totalSuffix:v,style:E,className:S,...T})=>{var c;const{getHeaderGroups:_,setIsSortable:f,enableRowSelection:w,getCanSomeRowsExpand:R,tablePosition:e,setTablePosition:g}=N();t.useEffect(()=>{f(u)},[u,f]);const o=t.useRef(null),i=t.useRef(null),x=t.useRef(0),[m,C]=t.useState(0),[H,d]=t.useState(!1),b=(c=o==null?void 0:o.current)==null?void 0:c.closest("thead");if(b&&(e==null?void 0:e.offsetTop)===null){const l=b.getBoundingClientRect().height,r=a+l;e&&g({...e,offsetTop:r||0})}return t.useEffect(()=>{if(s&&(!i.current&&o.current&&(i.current=o.current.closest("table")),i.current&&(e==null?void 0:e.top)!==null&&(e==null?void 0:e.bottom)!==null)){const l=(e==null?void 0:e.top)!=null&&(e==null?void 0:e.bottom)!=null&&e.top<a&&e.bottom>100?-e.top+a:0;l!==0&&d(!0),x.current=l,C(l),requestAnimationFrame(()=>{d(!1)})}},[s,a,e]),t.createElement(n.Header,{theme:p,style:{...E,"--header-offset":`${m}px`},...T,className:h("relative","z-3","[&_tr:not(:last-child)>th]:border-b-none","[&_tr:not(:first-child)>th]:rounded-none!",S)},_().map(l=>t.createElement(n.Row,{key:l.id,ref:o,className:s&&m!==0?h("translate-y-(--header-offset)",H?"delay-0ms opacity-0 transition-none":"delay-150ms opacity-100 transition-opacity duration-100","[&_th]:last:before:absolute","[&_th]:last:before:bottom-0","[&_th]:last:before:pointer-events-none","[&_th]:last:before:right-0","[&_th]:last:before:shadow-sm","[&_th]:last:before:top-0","[&_th]:last:before:w-full"):void 0},R()&&t.createElement(n.HeaderCell,{className:"w-10"}),w&&t.createElement(n.HeaderCell,{className:"w-10"},t.createElement(D,null)),l.headers.map((r,k)=>t.createElement($.HeaderCell,{header:r,key:r.id,includeTotal:k===0&&y,totalSuffix:v})))))};export{A as DataTableHead};
 //# sourceMappingURL=DataTableHead.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\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 => {\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={clsx(\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                ? clsx(\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              <DataTable.HeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","showTotalInFirstColumn","totalSuffix","style","className","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","clsx","headerGroup","DataTableSelectAllRowsCheckbox","header","index","DataTable"],"mappings":"2QAkBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,uBAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA8C,CA5B9C,IAAAC,EA6BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,EAEJC,EAAAA,EAAM,UAAU,IAAM,CACpBN,EAAcX,CAAQ,CACxB,EAAG,CAACA,EAAUW,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,KAAAA,OAAAA,EAAmB,UAAnB,KAAA,OAAAT,EAA4B,QAAQ,OAAA,EAE7D,GAAIgB,IAAoBX,GAAA,YAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,sBAAsB,EAAE,OAC3DE,EAAqBxB,EAAeuB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAKf,IAED,CAACiB,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,KAAA,OAAAA,EAAe,OAAQ,OAAQA,GAAA,KAAA,OAAAA,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,KAAA,OAAAA,EAAe,MAAO,OACtBA,GAAA,KAAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMX,GACpBW,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMX,EACrB,EAEFyB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACtB,EAAUC,EAAcW,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAO5B,EACP,MAAO,CACL,GAAGK,EACH,kBAAmB,GAAG,OAAAe,EAAY,IAAA,CACpC,EACC,GAAGb,EACJ,UAAWsB,EACT,WACA,MACA,2CACA,4CACAvB,CACF,CAAA,EAECG,EAAkB,EAAA,IAAKqB,GAEpBd,EAAA,cAACY,EAAM,IAAN,CACC,IAAKE,EAAY,GACjB,IAAKb,EACL,UACEhB,GAAYmB,IAAiB,EACzBS,EACE,gCACAP,EACI,sCACA,0DACJ,8BACA,8BACA,yCACA,6BACA,+BACA,2BACA,2BACF,EACA,MAAA,EAGLV,EAA0BI,GAAAA,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAAA,CAAO,EAC7DjB,GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAC1BZ,EAAAA,EAAA,cAACe,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAI,CAACE,EAAQC,IAChCjB,EAAA,cAACkB,EAAU,WAAV,CACC,OAAQF,EACR,IAAKA,EAAO,GACZ,aAAcC,IAAU,GAAK9B,EAC7B,YAAaC,CAAAA,CACf,CACD,CACH,CAEH,CACH,CAEJ"}
+{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\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 => {\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={clsx(\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                ? clsx(\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              <DataTable.HeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","showTotalInFirstColumn","totalSuffix","style","className","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","clsx","headerGroup","DataTableSelectAllRowsCheckbox","header","index","DataTable"],"mappings":"2QAkBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,uBAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA8C,CA5B9C,IAAAC,EA6BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,EAAa,EAEjBC,EAAM,UAAU,IAAM,CACpBN,EAAcX,CAAQ,CACxB,EAAG,CAACA,EAAUW,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,KAAA,OAAAA,EAAmB,UAAnB,YAAAT,EAA4B,QAAQ,SAE7D,GAAIgB,IAAoBX,GAAA,KAAAA,OAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,sBAAA,EAAwB,OAC3DE,EAAqBxB,EAAeuB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAKf,IAED,CAACiB,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,YAAAA,EAAe,OAAQ,OAAQA,GAAA,YAAAA,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,YAAAA,EAAe,MAAO,OACtBA,GAAA,KAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMX,GACpBW,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMX,EACrB,EAEFyB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACtB,EAAUC,EAAcW,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAO5B,EACP,MAAO,CACL,GAAGK,EACH,kBAAmB,GAAGe,CAAY,IACpC,EACC,GAAGb,EACJ,UAAWsB,EACT,WACA,MACA,2CACA,4CACAvB,CACF,CAAA,EAECG,IAAkB,IAAKqB,GAEpBd,EAAA,cAACY,EAAM,IAAN,CACC,IAAKE,EAAY,GACjB,IAAKb,EACL,UACEhB,GAAYmB,IAAiB,EACzBS,EACE,gCACAP,EACI,sCACA,0DACJ,8BACA,8BACA,yCACA,6BACA,+BACA,2BACA,2BACF,EACA,MAAA,EAGLV,EAA0BI,GAAAA,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAAA,CAAO,EAC7DjB,GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAC1BZ,EAAAA,EAAA,cAACe,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAI,CAACE,EAAQC,IAChCjB,EAAA,cAACkB,EAAU,WAAV,CACC,OAAQF,EACR,IAAKA,EAAO,GACZ,aAAcC,IAAU,GAAK9B,EAC7B,YAAaC,CAAAA,CACf,CACD,CACH,CAEH,CACH,CAEJ"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { Text } from '../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:content-['']\",\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      <Flex\n        align=\"center\"\n        gap={1}\n        justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex\n            align=\"center\"\n            className={clsx(\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          </Flex>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </Flex>\n    </StyledTableHeaderCell>\n  )\n}\n"],"names":["StyledCount","styled","Text","StyledTableHeaderCell","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","includeTotal","totalSuffix","children","className","props","_a","_b","sortDirection","isSortableTable","getRowModel","useDataTable","isDataColumn","totalRows","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender","clsx"],"mappings":"gcAqBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,KAAM,CAAC,gBAAiB,oBAAqB,SAAU,mBAAmB,CAC5E,CAAC,EAEKC,EAAwBF,EAAOG,EAAM,WAAY,CACrD,KAAM,CACN,EAAA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,aACA,kBACA,wBACA,sBACA,sBACA,iBACA,iBACA,mBACA,4BACA,iBACA,0BACA,UACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,CAAS,EACvB,KAAK,KACL,UAAU,oCACZ,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,aAAAC,EAAe,GACf,YAAAC,EAAc,QACd,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA4B,CAnE5B,IAAAC,EAAAC,EAoEE,MAAMC,EAAgBR,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYS,EAAiB,YAAAC,CAAY,EAAIC,EAAa,EAE5DC,EAAeZ,EAAO,OAAO,WAE7Ba,EAAAA,GAAYN,GAAAD,EAAAI,EAAA,IAAA,KAAA,OAAAJ,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjC,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAE,CAAA,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAASD,CAAgB,EAE7B,EAEME,EAAuBpB,EAAO,OAAO,wBAAwB,EAEnE,OACEH,EAAA,cAACP,EAAA,CACC,WAAYmB,GAAmBG,EAC/B,QAASZ,EAAO,QAChB,QACES,GAAmBG,GAAgBQ,EAC/BA,EACA,OAEN,UAAYF,GACVT,GACAG,GACAQ,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUX,GAAmBG,EAAe,EAAI,GAC/C,GAAGE,EACJ,UAAWV,EACV,GAAGC,CAEJR,EAAAA,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,EACL,QAASrB,EAAO,QAAU,EAAI,SAAW,YAExCsB,EAAAA,EAAWtB,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAY,CAAA,EAC9DQ,GAAiBC,GAChBZ,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,UAAWE,EACT,WACA,SACA,OACAR,EAAY,iBAAmB,iBAC/B,YACF,CAEAlB,EAAAA,EAAA,cAACF,EAAA,CAAS,UAAWa,CAAAA,CAAe,CACtC,EAEDP,GACCJ,EAAA,cAACV,EAAA,CAAY,KAAK,KAAK,OAAO,QAAS,EAAA,IACnC0B,EAAU,IAAEX,EAAY,GAC5B,CAEJ,CACF,CAEJ"}
+{"version":3,"file":"DataTableHeaderCell.js","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 clsx from 'clsx'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { Text } from '../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      <Flex\n        align=\"center\"\n        gap={1}\n        justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex\n            align=\"center\"\n            className={clsx(\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          </Flex>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </Flex>\n    </StyledTableHeaderCell>\n  )\n}\n"],"names":["StyledCount","styled","Text","StyledTableHeaderCell","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","includeTotal","totalSuffix","children","className","props","_a","_b","sortDirection","isSortableTable","getRowModel","useDataTable","isDataColumn","totalRows","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender","clsx"],"mappings":"gcAqBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,KAAM,CAAC,gBAAiB,oBAAqB,SAAU,mBAAmB,CAC5E,CAAC,EAEKC,EAAwBF,EAAOG,EAAM,WAAY,CACrD,KAAM,CACN,EAAA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,aACA,kBACA,wBACA,sBACA,iBACA,iBACA,mBACA,4BACA,iBACA,0BACA,UACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,CAAS,EACvB,KAAK,KACL,UAAU,oCAAA,CACZ,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,aAAAC,EAAe,GACf,YAAAC,EAAc,QACd,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA4B,CAlE5B,IAAAC,EAAAC,EAmEE,MAAMC,EAAgBR,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYS,EAAiB,YAAAC,CAAY,EAAIC,EAAa,EAE5DC,EAAeZ,EAAO,OAAO,WAAA,EAE7Ba,GAAYN,GAAAD,EAAAI,EAAAA,IAAA,KAAA,OAAAJ,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjC,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAA,CAAE,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAASD,CAAgB,EAE7B,EAEME,EAAuBpB,EAAO,OAAO,wBAAwB,EAEnE,OACEH,EAAA,cAACP,EAAA,CACC,WAAYmB,GAAmBG,EAC/B,QAASZ,EAAO,QAChB,QACES,GAAmBG,GAAgBQ,EAC/BA,EACA,OAEN,UAAYF,GACVT,GACAG,GACAQ,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUX,GAAmBG,EAAe,EAAI,GAC/C,GAAGE,EACJ,UAAWV,EACV,GAAGC,CAEJR,EAAAA,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,EACL,QAASrB,EAAO,QAAU,EAAI,SAAW,YAExCsB,EAAAA,EAAWtB,EAAO,OAAO,UAAU,OAAQA,EAAO,YAAY,EAC9DQ,GAAiBC,GAChBZ,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,UAAWE,EACT,WACA,SACA,OACAR,EAAY,iBAAmB,iBAC/B,YACF,CAEAlB,EAAAA,EAAA,cAACF,EAAA,CAAS,UAAWa,CAAAA,CAAe,CACtC,EAEDP,GACCJ,EAAA,cAACV,EAAA,CAAY,KAAK,KAAK,OAAO,QAAS,EAAA,IACnC0B,EAAU,IAAEX,EAAY,GAC5B,CAEJ,CACF,CAEJ"}

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

@@ -1,10 +1,19 @@
 import * as React from 'react';
-declare const PendingState: React.ForwardRefExoticComponent<{
+declare const PendingState: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
+    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+} & {
+    as?: React.ElementType;
+} & {
     message?: string;
     size?: "sm" | "md" | "lg";
-    className?: string;
-} & {
+}, never> & {
     as?: React.ElementType;
-} & React.RefAttributes<never>>;
+}>;
 export declare const DataTableLoading: (props: React.ComponentProps<typeof PendingState>) => React.JSX.Element | null;
 export {};

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export declare const DataTableMetaData: ({ copy, ...rest }: {
+import { Text } from '../text';
+export declare const DataTableMetaData: ({ copy, ...rest }: React.ComponentProps<typeof Text> & {
     copy?: {
         sorted_by?: string;
         ascending?: string;

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['odd:bg-primary-100']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={clsx(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell, i) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","clsx","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"8aAkBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,KAAM,CAAC,eAAgB,UAAU,EACjC,SAAU,CACR,WAAY,CACV,KAAM,CAAC,oBAAoB,CAC7B,EACA,WAAY,CACV,KAAM,CAAC,YAAY,CACrB,EACA,YAAa,CACX,KAAM,CACJ,gBACA,eACA,WACA,oBACA,uBACA,sDACA,wBACA,YACA,kBACA,4BACA,sBACA,0BACA,6BACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,EAAA,GAElCO,EAAsBP,EAAI,yBAAA,EAC1BQ,EAAsBR,EAAI,yBAAyB,EAEnDS,EAAkB,IAClBT,EAAI,kBAA4B,EAAA,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,eAAe,EACrBF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,eACN,EAAA,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,YAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAAA,CAEZ,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAc,EAC9B,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,UAAW,iBACX,UAAWC,CACb,CAECT,EAAAA,EAAAA,GACCa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAe,OAAAI,EAAI,EAAA,EAChC,QAASO,EACT,UAAWW,EACT,OACAlB,EAAI,eAAiB,iBAAmB,aAC1C,CAECA,EAAAA,EAAI,gBACHiB,EAAA,cAACE,EAAA,CAAK,GAAInB,EAAI,cAAA,EAAkBoB,EAAcC,EAAc,CAEhE,EAGDnB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,UAAU,MACpBqB,EAAAA,EAAA,cAACK,EAAA,CACC,IAAKtB,EACL,QAASS,IACT,gBAAiBD,CACnB,CAAA,CACF,EAEDR,EAAI,kBAAkB,IAAI,CAACuB,EAAMC,IACzBP,EAAA,cAACQ,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}
+{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['odd:bg-primary-100']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={clsx(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell, i) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","clsx","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"8aAkBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,KAAM,CAAC,eAAgB,UAAU,EACjC,SAAU,CACR,WAAY,CACV,KAAM,CAAC,oBAAoB,CAC7B,EACA,WAAY,CACV,KAAM,CAAC,YAAY,CACrB,EACA,YAAa,CACX,KAAM,CACJ,gBACA,eACA,WACA,oBACA,uBACA,sDACA,wBACA,YACA,kBACA,4BACA,sBACA,0BACA,6BACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,EAAA,GAElCO,EAAsBP,EAAI,yBAAA,EAC1BQ,EAAsBR,EAAI,yBAAyB,EAEnDS,EAAkB,IAClBT,EAAI,kBAA4B,EAAA,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,eAAe,EACrBF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,eACN,EAAA,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,YAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAAA,CAEZ,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAc,EAC9B,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,UAAW,iBACX,UAAWC,CACb,CAECT,EAAAA,EAAAA,GACCa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,EAAE,GAClC,QAASO,EACT,UAAWW,EACT,OACAlB,EAAI,eAAiB,iBAAmB,aAC1C,CAECA,EAAAA,EAAI,gBACHiB,EAAA,cAACE,EAAA,CAAK,GAAInB,EAAI,cAAA,EAAkBoB,EAAcC,EAAc,CAEhE,EAGDnB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,UAAU,MACpBqB,EAAAA,EAAA,cAACK,EAAA,CACC,IAAKtB,EACL,QAASS,IACT,gBAAiBD,CACnB,CAAA,CACF,EAEDR,EAAI,kBAAkB,IAAI,CAACuB,EAAMC,IACzBP,EAAA,cAACQ,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}

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

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

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

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

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

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

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

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

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

@@ -8,7 +8,7 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
         stickyHeaderOffset?: number;
         headerCss?: string;
         numberOfStickyColumns?: number;
-        scrollContainerCss?: string;
+        scrollContainerCls?: string | string[];
         showTotalInFirstColumn?: boolean;
         totalSuffix?: string;
     };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-xl']\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      scrollContainerCss?: 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): 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      scrollContainerCss={scrollOptions.scrollContainerCss}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={clsx(\n        className,\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ]\n      )}\n    >\n      <DataTable.Head\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      <DataTable.Body striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer>{tableComponent}</TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"names":["TableContainer","styled","DataTableTable","sortable","striped","theme","className","scrollOptions","rowAction","withContainer","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","tableComponent","Table","clsx","DataTable","DataTableLoading"],"mappings":"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"}
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\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): 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={clsx(\n        className,\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ]\n      )}\n    >\n      <DataTable.Head\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      <DataTable.Body striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer>{tableComponent}</TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"names":["TableContainer","styled","DataTableTable","sortable","striped","theme","className","scrollOptions","rowAction","withContainer","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","tableComponent","Table","clsx","DataTable","DataTableLoading"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import c from"invariant";const h=e=>{if(e[0])return e[0].desc?"desc":"asc"},m=async(e,t,g,n,p)=>{var l,o,a,i,u,s;const{pageIndex:d,pageSize:y}=g,b={pageIndex:(l=t==null?void 0:t.pageIndex)!=null?l:d,pageSize:(o=t==null?void 0:t.pageSize)!=null?o:y,sortBy:(i=t==null?void 0:t.sortBy)!=null?i:(a=n[0])==null?void 0:a.id,sortDirection:(u=t==null?void 0:t.sortDirection)!=null?u:h(n),globalFilter:(s=t.globalFilter)!=null?s:p},r=await e(b);return c(Array.isArray(r==null?void 0:r.results),"The getAsyncData function must return an object with a property `result` which must be an array"),c(r&&Number.isInteger(r.total)&&r.total>=0,"The getAsyncData function must return an object with a property `total` which must be a positive integer or zero"),r};export{m as getNewAsyncData};
+import n from"invariant";const d=e=>{if(e[0])return e[0].desc?"desc":"asc"},g=async(e,t,i,o,l)=>{var a;const{pageIndex:s,pageSize:u}=i,c={pageIndex:(t==null?void 0:t.pageIndex)??s,pageSize:(t==null?void 0:t.pageSize)??u,sortBy:(t==null?void 0:t.sortBy)??((a=o[0])==null?void 0:a.id),sortDirection:(t==null?void 0:t.sortDirection)??d(o),globalFilter:t.globalFilter??l},r=await e(c);return n(Array.isArray(r==null?void 0:r.results),"The getAsyncData function must return an object with a property `result` which must be an array"),n(r&&Number.isInteger(r.total)&&r.total>=0,"The getAsyncData function must return an object with a property `total` which must be a positive integer or zero"),r};export{g as getNewAsyncData};
 //# sourceMappingURL=getNewAsyncData.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"getNewAsyncData.js","sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n  PaginationState,\n  SortDirection,\n  SortingState\n} from '@tanstack/react-table'\nimport invariant from 'invariant'\n\nimport type {\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TGetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n  if (sorting[0]) {\n    return sorting[0].desc ? 'desc' : 'asc'\n  }\n  return undefined\n}\n\nexport const getNewAsyncData = async (\n  getAsyncData: TGetAsyncData,\n  asyncDataOptions: Partial<TAsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<TAsyncDataResult | undefined> => {\n  const { pageIndex, pageSize } = paginationState\n  const params = {\n    pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n    pageSize: asyncDataOptions?.pageSize ?? pageSize,\n    sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n    sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n    globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n  }\n\n  const newData = await getAsyncData(params)\n\n  invariant(\n    Array.isArray(newData?.results),\n    'The getAsyncData function must return an object with a property `result` which must be an array'\n  )\n  invariant(\n    newData && Number.isInteger(newData.total) && newData.total >= 0,\n    'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n  )\n\n  return newData\n}\n"],"names":["getSortDirection","sorting","getNewAsyncData","getAsyncData","asyncDataOptions","paginationState","globalFilter","_a","_b","_c","_d","_e","_f","pageIndex","pageSize","params","newData","invariant"],"mappings":"yBAaA,MAAMA,EAAoBC,GAAqD,CAC7E,GAAIA,EAAQ,CAAC,EACX,OAAOA,EAAQ,CAAC,EAAE,KAAO,OAAS,KAGtC,EAEaC,EAAkB,MAC7BC,EACAC,EACAC,EACAJ,EACAK,IAC0C,CA1B5C,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EA2BE,KAAM,CAAE,UAAAC,EAAW,SAAAC,CAAS,EAAIT,EAC1BU,EAAS,CACb,WAAWR,EAAAH,GAAA,KAAA,OAAAA,EAAkB,YAAlB,KAAAG,EAA+BM,EAC1C,UAAUL,EAAAJ,GAAA,KAAAA,OAAAA,EAAkB,WAAlB,KAAAI,EAA8BM,EACxC,QAAQJ,EAAAN,GAAA,KAAA,OAAAA,EAAkB,SAAlB,KAAAM,GAA4BD,EAAAR,EAAQ,CAAC,IAAT,KAAAQ,OAAAA,EAAY,GAChD,eAAeE,EAAAP,GAAA,KAAAA,OAAAA,EAAkB,gBAAlB,KAAAO,EAAmCX,EAAiBC,CAAO,EAC1E,cAAcW,EAAAR,EAAiB,eAAjB,KAAAQ,EAAiCN,CACjD,EAEMU,EAAU,MAAMb,EAAaY,CAAM,EAEzC,OAAAE,EACE,MAAM,QAAQD,GAAA,KAAAA,OAAAA,EAAS,OAAO,EAC9B,iGACF,EACAC,EACED,GAAW,OAAO,UAAUA,EAAQ,KAAK,GAAKA,EAAQ,OAAS,EAC/D,kHACF,EAEOA,CACT"}
+{"version":3,"file":"getNewAsyncData.js","sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n  PaginationState,\n  SortDirection,\n  SortingState\n} from '@tanstack/react-table'\nimport invariant from 'invariant'\n\nimport type {\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TGetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n  if (sorting[0]) {\n    return sorting[0].desc ? 'desc' : 'asc'\n  }\n  return undefined\n}\n\nexport const getNewAsyncData = async (\n  getAsyncData: TGetAsyncData,\n  asyncDataOptions: Partial<TAsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<TAsyncDataResult | undefined> => {\n  const { pageIndex, pageSize } = paginationState\n  const params = {\n    pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n    pageSize: asyncDataOptions?.pageSize ?? pageSize,\n    sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n    sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n    globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n  }\n\n  const newData = await getAsyncData(params)\n\n  invariant(\n    Array.isArray(newData?.results),\n    'The getAsyncData function must return an object with a property `result` which must be an array'\n  )\n  invariant(\n    newData && Number.isInteger(newData.total) && newData.total >= 0,\n    'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n  )\n\n  return newData\n}\n"],"names":["getSortDirection","sorting","getNewAsyncData","getAsyncData","asyncDataOptions","paginationState","globalFilter","_a","pageIndex","pageSize","params","newData","invariant"],"mappings":"yBAaA,MAAMA,EAAoBC,GAAqD,CAC7E,GAAIA,EAAQ,CAAC,EACX,OAAOA,EAAQ,CAAC,EAAE,KAAO,OAAS,KAGtC,EAEaC,EAAkB,MAC7BC,EACAC,EACAC,EACAJ,EACAK,IAC0C,CA1B5C,IAAAC,EA2BE,KAAM,CAAE,UAAAC,EAAW,SAAAC,CAAS,EAAIJ,EAC1BK,EAAS,CACb,WAAWN,GAAA,KAAAA,OAAAA,EAAkB,YAAaI,EAC1C,UAAUJ,GAAA,KAAA,OAAAA,EAAkB,WAAYK,EACxC,QAAQL,GAAA,KAAAA,OAAAA,EAAkB,WAAUG,EAAAN,EAAQ,CAAC,IAAT,KAAA,OAAAM,EAAY,IAChD,eAAeH,GAAA,YAAAA,EAAkB,gBAAiBJ,EAAiBC,CAAO,EAC1E,aAAcG,EAAiB,cAAgBE,CACjD,EAEMK,EAAU,MAAMR,EAAaO,CAAM,EAEzC,OAAAE,EACE,MAAM,QAAQD,GAAA,KAAAA,OAAAA,EAAS,OAAO,EAC9B,iGACF,EACAC,EACED,GAAW,OAAO,UAAUA,EAAQ,KAAK,GAAKA,EAAQ,OAAS,EAC/D,kHACF,EAEOA,CACT"}

package/dist/components/data-table/pagination/Pagination.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { TcolorScheme } from '../../../experiments/color-scheme';
 declare const StyledNav: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
-} & {
+}, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLElement>>;
+}>;
 type PaginationProps = React.ComponentProps<typeof StyledNav> & {
     colorScheme?: TcolorScheme;
 };

package/dist/components/data-table/pagination/Pagination.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as S}from"../../../styled.js";import{Pagination as w}from"../../pagination/Pagination.js";import{Text as y}from"../../text/Text.js";import{AsyncDataState as E}from"../DataTable.types.js";import{useDataTable as b}from"../DataTableContext.js";const h=S("nav",{base:["flex","flex-col","justify-between","items-center","tabular-nums","flex-wrap","w-full","gap-4","mt-4","md:flex-row"]}),i=({colorScheme:c,...l})=>{const{applyPagination:a,getState:m,getRowModel:s,getPageCount:o,setPageIndex:g,getTotalRows:n,asyncDataState:p}=b();e.useEffect(()=>{a()},[a]);const{pagination:t}=m(),f=p!==E.PENDING&&n()===0,u=o()>1;if(f||!u)return null;const r=t.pageIndex*t.pageSize+1,P=r+s().rows.length-1,d=x=>{g(x-1)};return e.createElement(h,{...l},e.createElement(y,{size:"sm"},"".concat(r.toString()," - ").concat(P.toString()," of ").concat(n()," items")),e.createElement(w,{colorScheme:c,selectedPage:t.pageIndex+1,pagesCount:o(),onSelectedPageChange:d}))};i.displayName="Pagination";export{i as Pagination};
+import*as n from"react";import{styled as E}from"../../../styled.js";import{Pagination as z}from"../../pagination/Pagination.js";import{Text as M}from"../../text/Text.js";import{AsyncDataState as $}from"../DataTable.types.js";import{useDataTable as b}from"../DataTableContext.js";const I=E("nav",{base:["flex","flex-col","justify-between","items-center","tabular-nums","flex-wrap","w-full","gap-4","mt-4","md:flex-row"]}),m=({colorScheme:c,...p})=>{const{applyPagination:i,getState:f,getExpandedRowModel:r,getRowModel:d,setPageIndex:u,getTotalRows:s,getPageCount:l,asyncDataState:h,hasAsyncData:t}=b();n.useEffect(()=>{i()},[i]);const{pagination:e}=f(),w=h!==$.PENDING&&s()===0,x=t?l()>1:r().rows.length/e.pageSize>1;if(w||!x)return null;const a=r().rows.length,o=a===0?0:e.pageIndex*e.pageSize+1,g=d().rows.length,P=t?g===0?o:o+g-1:Math.min(o+e.pageSize-1,a),S=D=>{u(D-1)},y=t?l():Math.max(1,Math.ceil(a/e.pageSize));return n.createElement(I,{...p},n.createElement(M,{size:"sm"},`${o} - ${P} of ${t?s():a} items`),n.createElement(z,{colorScheme:c,selectedPage:e.pageIndex+1,pagesCount:y,onSelectedPageChange:S}))};m.displayName="Pagination";export{m as Pagination};
 //# sourceMappingURL=Pagination.js.map

package/dist/components/data-table/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme'\nimport { Pagination as PaginationComponent } from '../../pagination'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    setPageIndex,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  // Show pagination only if total pages are more than 1\n  const showPagination = getPageCount() > 1\n\n  if (isEmpty || !showPagination) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n\n  //indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={getPageCount()}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getRowModel","getPageCount","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","isEmpty","AsyncDataState","showPagination","recordsCountFrom","recordsCountTo","setPage","index","Text","PaginationComponent"],"mappings":"uRAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,KAAM,CACJ,OACA,WACA,kBACA,eACA,eACA,YACA,SACA,QACA,OACA,aACF,CACF,CAAC,EAOYC,EAAa,CAAC,CAAE,YAAAC,EAAa,GAAGC,CAAM,IAAuB,CACxE,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBR,EACF,CAAA,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYS,CAAgB,EAAIR,EAAAA,EAElCS,EADYJ,IAAmBK,EAAe,SACtBN,EAAa,IAAM,EAG3CO,EAAiBT,EAAiB,EAAA,EAExC,GAAIO,GAAW,CAACE,EAAgB,OAAO,KAEvC,MAAMC,EACJJ,EAAgB,UAAYA,EAAgB,SAAW,EACnDK,EAAiBD,EAAmBX,EAAY,EAAE,KAAK,OAAS,EAGhEa,EAAWC,GAAkB,CACjCZ,EAAaY,EAAQ,CAAC,CACxB,EAEA,OACER,EAAA,cAACb,EAAA,CAAW,GAAGI,GACbS,EAAA,cAACS,EAAA,CAAK,KAAK,MACR,GAAG,OAAAJ,EAAiB,SAAS,EAAC,OAAM,OAAAC,EAAe,SAAU,EAAA,MAAA,EAAO,OAAAT,EAAa,EAAC,QACrF,CAAA,EACAG,EAAA,cAACU,EAAA,CACC,YAAapB,EACb,aAAcW,EAAgB,UAAY,EAC1C,WAAYN,IACZ,qBAAsBY,CAAAA,CACxB,CACF,CAEJ,EAEAlB,EAAW,YAAc"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme'\nimport { Pagination as PaginationComponent } from '../../pagination'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getExpandedRowModel","getRowModel","setPageIndex","getTotalRows","getPageCount","asyncDataState","hasAsyncData","useDataTable","React","paginationState","isEmpty","AsyncDataState","showPagination","totalVisibleRows","start","asyncRowCount","end","setPage","index","pageCount","Text","PaginationComponent"],"mappings":"uRAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,KAAM,CACJ,OACA,WACA,kBACA,eACA,eACA,YACA,SACA,QACA,OACA,aACF,CACF,CAAC,EAOYC,EAAa,CAAC,CAAE,YAAAC,EAAa,GAAGC,CAAM,IAAuB,CACxE,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,oBAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,EACA,aAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBV,EAAgB,CAClB,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,EAAS,EAE3CW,EADYL,IAAmBM,EAAe,SACtBR,MAAmB,EAE3CS,EAAiBN,EACnBF,EAAa,EAAI,EACjBJ,EAAsB,EAAA,KAAK,OAASS,EAAgB,SAAW,EAEnE,GAAIC,GAAW,CAACE,EAAgB,OAAO,KACvC,MAAMC,EAAmBb,EAAoB,EAAE,KAAK,OAE9Cc,EACJD,IAAqB,EACjB,EACAJ,EAAgB,UAAYA,EAAgB,SAAW,EAEvDM,EAAgBd,EAAY,EAAE,KAAK,OACnCe,EAAMV,EACRS,IAAkB,EAChBD,EACAA,EAAQC,EAAgB,EAC1B,KAAK,IAAID,EAAQL,EAAgB,SAAW,EAAGI,CAAgB,EAG7DI,EAAWC,GAAkB,CACjChB,EAAagB,EAAQ,CAAC,CACxB,EAEMC,EAAYb,EACdF,EACA,EAAA,KAAK,IAAI,EAAG,KAAK,KAAKS,EAAmBJ,EAAgB,QAAQ,CAAC,EAEtE,OACED,EAAA,cAACf,EAAA,CAAW,GAAGI,CAAAA,EACbW,EAAA,cAACY,EAAA,CAAK,KAAK,IAAM,EAAA,GAAGN,CAAK,MAAME,CAAG,OAChCV,EAAeH,EAAa,EAAIU,CAClC,QAAS,EACTL,EAAA,cAACa,EAAA,CACC,YAAazB,EACb,aAAca,EAAgB,UAAY,EAC1C,WAAYU,EACZ,qBAAsBF,EACxB,CACF,CAEJ,EAEAtB,EAAW,YAAc"}

package/dist/components/dialog/Dialog.d.ts

@@ -1,15 +1,15 @@
 export declare const Dialog: import("react").FC<import("@radix-ui/react-dialog").DialogProps> & {
     Background: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    }, never> & {
         as?: import("react").ElementType;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    }>;
     Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: ({ size, children, closeDialogText, showCloseButton, ...remainingProps }: Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement> & {
+    Content: ({ size, children, closeDialogText, showCloseButton, ...remainingProps }: Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "size"> & {
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen">>) | undefined;
     } & {
         as?: import("react").ElementType;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    } & {
         closeDialogText?: string;
         showCloseButton?: boolean;
     }) => import("react").JSX.Element;

package/dist/components/dialog/DialogBackground.d.ts

@@ -1,5 +1,5 @@
 export declare const DialogBackground: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, never> & {
     as?: import("react").ElementType;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/components/dialog/DialogContent.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-declare const StyledDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement> & {
+declare const StyledDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen">>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}>;
 type DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {
     closeDialogText?: string;
     showCloseButton?: boolean;

package/dist/components/dialog/DialogContent.js

@@ -1,2 +1,2 @@
-import{Close as p}from"@atom-learning/icons";import{Overlay as u,Content as c,Portal as v,Close as f}from"@radix-ui/react-dialog";import*as o from"react";import{styled as n}from"../../styled.js";import{backdropOverlay as w}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Icon as g}from"../icon/Icon.js";import{DialogBackground as r}from"./DialogBackground.js";const l="modal_overlay",C=n(u,{base:w}),t=["w-auto","h-auto","max-w-none","max-h-none","supports-[height:100svh]:h-auto","supports-[height:100svh]:max-h-none"],b=n(c,{base:["-translate-1/2","bg-white","shadow-xl","box-border","left-1/2","max-w-[90vw]","max-h-[90vh]","overflow-y-auto","p-8","fixed","top-1/2","z-1147483646","focus:outline-none","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{xs:[...t,"rounded-md","w-95"],sm:[...t,"rounded-md","w-120"],md:[...t,"rounded-md","w-150"],lg:[...t,"rounded-md","w-200"],xl:[...t,"rounded-md","w-275"],fullscreen:["w-screen","h-screen","max-w-screen","max-h-screen","supports-[height:100svh]:h-svh","supports-[height:100svh]:max-h-svh"]}}}),y=({size:i="sm",children:a,closeDialogText:m="Close dialog",showCloseButton:d=!0,...h})=>o.createElement(v,null,o.createElement(C,{id:l},o.Children.map(a,e=>(e==null?void 0:e.type)===r&&e),o.createElement(b,{size:i,"aria-label":"Dialog",onPointerDownOutside:e=>{const s=e.target;(s==null?void 0:s.id)!==l&&e.preventDefault()},...h},d&&o.createElement(x,{as:f,label:m,hasTooltip:!1,size:"md",theme:"neutral",className:"absolute top-4 right-4 size-12"},o.createElement(g,{is:p})),o.Children.map(a,e=>(e==null?void 0:e.type)!==r&&e))));export{y as DialogContent};
+import{Close as d}from"@atom-learning/icons";import{Overlay as p,Content as u,Portal as v,Close as x}from"@radix-ui/react-dialog";import*as o from"react";import{styled as a}from"../../styled.js";import{backdropOverlay as c}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as f}from"../icon/Icon.js";import{DialogBackground as r}from"./DialogBackground.js";const m="modal_overlay",z=a(p,{base:c}),b=a(u,{base:["-translate-1/2","bg-white","shadow-xl","box-border","left-1/2","h-auto","max-w-[90vw]","max-h-[90vh]","overflow-y-auto","rounded-md","p-8","fixed","top-1/2","z-1147483646","focus:outline-none","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{xs:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-95"],sm:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-120"],md:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-150"],lg:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-200"],xl:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-275"],fullscreen:["rounded-none","w-screen","h-screen","max-w-screen","max-h-screen","supports-svh:h-svh","supports-svh:max-h-svh"]}}},{enabledResponsiveVariants:!0}),g=({size:n="sm",children:s,closeDialogText:h="Close dialog",showCloseButton:l=!0,...i})=>o.createElement(v,null,o.createElement(z,{id:m},o.Children.map(s,e=>(e==null?void 0:e.type)===r&&e),o.createElement(b,{size:n,"aria-label":"Dialog",onPointerDownOutside:e=>{const t=e.target;(t==null?void 0:t.id)!==m&&e.preventDefault()},...i},l&&o.createElement(w,{as:x,label:h,hasTooltip:!1,size:"md",theme:"neutral",className:"absolute top-4 right-4 size-12"},o.createElement(f,{is:d})),o.Children.map(s,e=>(e==null?void 0:e.type)!==r&&e))));export{g as DialogContent};
 //# sourceMappingURL=DialogContent.js.map