npm - @atom-learning/components - Versions diffs - 9.0.0 → 10.0.0 - Mend

@atom-learning/components 9.0.0 → 10.0.0

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

Files changed (197) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.context.js","names":[],"sources":["../../../src/components/data-table/DataTable.context.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'\n// Use the named export, not the default: the CJS build's Node-mode interop\n// (__toESM(mod, 1)) shadows this package's `default` with the whole module\n// object, so a default import resolves to a non-callable object at runtime.\n// NoCheck is equivalent here — the dep (`dataProp`) is always an array, so the\n// default export's dev-only all-primitive guard would never fire.\nimport { useDeepCompareEffectNoCheck as useDeepCompareEffect } from 'use-deep-compare-effect'\n\nimport {\n AsyncDataState,\n type DataTableContextType,\n type InitialState,\n type TableData,\n type TablePosition,\n type AsyncDataOptions,\n type AsyncDataResult,\n type DefaultSort,\n type GetAsyncData\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?: DefaultSort\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: GetAsyncData }\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) => {\n const tableId = React.useRef(uuid())\n\n const [data, setData] = React.useState<AsyncDataResult>({\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<AsyncDataOptions>) => {\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 AsyncDataResult)\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 as Row<unknown>).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\n ? (setPaginationState as OnChangeFn<PaginationState>)\n : 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"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable.context.js","names":[],"sources":["../../../src/components/data-table/DataTable.context.tsx"],"sourcesContent":["import 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'\n// Use the named export, not the default: the CJS build's Node-mode interop\n// (__toESM(mod, 1)) shadows this package's `default` with the whole module\n// object, so a default import resolves to a non-callable object at runtime.\n// NoCheck is equivalent here — the dep (`dataProp`) is always an array, so the\n// default export's dev-only all-primitive guard would never fire.\nimport { useDeepCompareEffectNoCheck as useDeepCompareEffect } from 'use-deep-compare-effect'\n\nimport {\n AsyncDataState,\n type DataTableContextType,\n type InitialState,\n type TableData,\n type TablePosition,\n type AsyncDataOptions,\n type AsyncDataResult,\n type DefaultSort,\n type GetAsyncData\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?: DefaultSort\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: GetAsyncData }\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) => {\n // Rendered into checkbox id/htmlFor/name attributes, so it must be\n // identical between server and client render — useId guarantees this.\n const tableId = React.useId()\n\n const [data, setData] = React.useState<AsyncDataResult>({\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 {\n isPaginated,\n applyPagination,\n removePagination,\n paginationState,\n 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 // Monotonic sequence so only the latest in-flight request may commit its\n // response — without this, rapid pagination/sort/filter changes race two\n // requests and the slower, stale response wins `setData`.\n const asyncRequestIdRef = React.useRef(0)\n\n const runAsyncData = React.useCallback(\n async (overrideAsyncDataOptions: Partial<AsyncDataOptions>) => {\n if (!getAsyncData) return\n\n const requestId = ++asyncRequestIdRef.current\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 if (requestId !== asyncRequestIdRef.current) return\n\n setData(newData as AsyncDataResult)\n setAsyncDataState(AsyncDataState.FULFILLED)\n } catch (_error) {\n if (requestId !== asyncRequestIdRef.current) return\n\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 = React.useCallback(() => data.total, [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 as Row<unknown>).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\n ? (setPaginationState as OnChangeFn<PaginationState>)\n : 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 removePagination,\n getTotalRows,\n isSortable,\n asyncDataState,\n runAsyncData,\n hasAsyncData: !!getAsyncData,\n disabledRows,\n enableRowSelection,\n rowSelection,\n tablePosition,\n setTablePosition,\n tableId\n }\n // The value object's identity is what notifies consumers, and the spread\n // `table` instance is stable while its internal state changes — so every\n // piece of provider state must be a dep here or consumers go stale.\n }, [\n table,\n columns,\n data,\n applyPagination,\n removePagination,\n getTotalRows,\n isSortable,\n asyncDataState,\n runAsyncData,\n getAsyncData,\n disabledRows,\n enableRowSelection,\n rowSelection,\n tablePosition,\n expanded,\n sorting,\n globalFilter,\n paginationState,\n isPaginated,\n tableId\n ])\n\n return <DataTableContext value={value}>{children}</DataTableContext>\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n const context = React.use(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"],"mappings":";;;;;;;;;AAsCA,IAAM,mBACJ,QAAM,cAAoD,IAAI;AAehE,IAAa,qBAAqB,EAChC,SACA,MAAM,WAAW,CAAC,GAClB,cACA,aACA,eAAe,KAAA,GACf,cACA,oBACA,sBACA,eAC4B;CAG5B,MAAM,UAAU,QAAM,MAAM;CAE5B,MAAM,CAAC,MAAM,WAAW,QAAM,SAA0B;EACtD,SAAS,YAAY,CAAC;EACtB,OAAO,UAAU,UAAU;CAC7B,CAAC;CAED,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAA4B,CAAC,CAAC;CAC5E,MAAM,CAAC,UAAU,eAAe,QAAM,SAAwB,CAAC,CAAC;CAEhE,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAwB;EACtE,KAAK;EACL,QAAQ;EACR,WAAW;EACX,WAAW;CACb,CAAC;CAED,MAAM,EACJ,aACA,iBACA,kBACA,iBACA,uBACE,cAAc,cAAc,UAAU;CAE1C,MAAM,CAAC,gBAAgB,qBAAqB,QAAM,SAChD,eAAe,IACjB;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,EAAE;CAEjE,MAAM,EAAE,eAAe,YAAY,SAAS,eAC1C,gBAAgB,WAAW;CAK7B,MAAM,oBAAoB,QAAM,OAAO,CAAC;CAExC,MAAM,eAAe,QAAM,YACzB,OAAO,6BAAwD;EAC7D,IAAI,CAAC,cAAc;EAEnB,MAAM,YAAY,EAAE,kBAAkB;EAEtC,IAAI;GACF,kBAAkB,eAAe,OAAO;GAExC,MAAM,UAAU,MAAM,gBACpB,cACA,0BACA,iBACA,SACA,YACF;GAEA,IAAI,cAAc,kBAAkB,SAAS;GAE7C,QAAQ,OAA0B;GAClC,kBAAkB,eAAe,SAAS;EAC5C,SAAS,QAAQ;GACf,IAAI,cAAc,kBAAkB,SAAS;GAE7C,kBAAkB,eAAe,QAAQ;EAC3C;CACF,GACA;EACE;EACA,iBAAiB;EACjB,iBAAiB;EACjB;EACA;CACF,CACF;CAEA,QAAM,gBAAgB;EACpB,aAAa,CAAC,CAAC;CACjB,GAAG,CAAC,YAAY,CAAC;CAEjB,kCAA2B;EACzB,IAAI,CAAC,UAAU;EAEf,QAAQ;GAAE,SAAS;GAAU,OAAO,SAAS;EAAO,CAAC;CACvD,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,QAAM,kBAAkB,KAAK,OAAO,CAAC,KAAK,KAAK,CAAC;CAErE,MAAM,QAAQ,cAAuB;EACnC;EACA,MAAM,KAAK;EACX,WACE,gBAAgB,kBACZ,KAAK,KAAK,aAAa,IAAI,gBAAgB,QAAQ,IACnD;EACQ;EACd,OAAO;GACL;GACA;GACA,YAAY;GACZ;GACA;EACF;EACA,kBAAkB,gBAAgB;EAClC,eAAe,gBAAgB;EAC/B,eAAe,mBAAmB,eAAe;EACjD,oBAAoB,CAAC;EACrB;EACA,kBAAkB;EAClB,aAAa,QAAS,IAAqB;EAC3C,uBAAuB,mBAAmB;GACxC,IAAI,sBAAsB,qBAAqB,cAAc;GAC7D,gBAAgB,cAAc;EAChC;EACA,iBAAiB,gBAAgB;EACjC,uBAAuB,cAAc,sBAAsB,IAAI,KAAA;EAC/D,mBACE,cAAc,QAAQ,SAAS,kBAAkB,IAAI,KAAA;EACvD,qBAAqB,oBAAoB;EACzC,qBAAqB,oBAAoB;EACzC,oBAAoB,cACf,qBACD,KAAA;EACJ,iBAAiB;EACjB,sBAAsB;EACtB,iBAAiB,KAAK,UAAU,gBAAgB;GAC9C,MAAM,0BAA0B,cAC9B,UAAU,YAAY,CAAC,CAAC,SAAS,YAAY,YAAY,CAAC;GAI5D,IAFiB,IAAI,QAAQ,GAEf,OAAO;GAErB,MAAM,QAAQ,IAAI,SAAS,QAAQ;GACnC,QAAQ,OAAO,OAAf;IACE,KAAK,UACH,OAAO,uBAAuB,KAAK;IACrC,KAAK;IACL,KAAK,UACH,OAAO,uBAAuB,OAAO,KAAK,CAAC;IAC7C,SACE,OAAO;GACX;EACF;CACF,CAAC;CAiDD,OAAO,oBAAC,kBAAD;EAAyB,OA/CI,QAAM,cAAc;GACtD,OAAO;IACL,GAAG;IACH;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,cAAc,CAAC,CAAC;IAChB;IACA;IACA;IACA;IACA;IACA;GACF;EAIF,GAAG;GACD;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEgC;EAAQ;CAA2B,CAAA;AACrE;AAEA,IAAa,qBAAwD;CACnE,MAAM,UAAU,QAAM,IAAI,gBAAgB;CAE1C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,iEACF;CAEF,OAAO;AACT"}

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

@@ -27,6 +27,7 @@ export type TablePosition = {
 export type DataTableContextType<T = unknown> = Table<T> & {
     setIsSortable: React.Dispatch<React.SetStateAction<boolean>>;
     applyPagination: () => void;
+    removePagination: () => void;
     getTotalRows: () => number;
     isSortable: boolean;
     asyncDataState?: AsyncDataState;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n InitialTableState,\n Row,\n RowSelectionState,\n SortDirection,\n Table\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n NONE = 'none',\n PENDING = 'pending',\n FULFILLED = 'fulfilled',\n REJECTED = 'rejected'\n}\n\nexport type AsyncDataResult = {\n total: number\n results: TableData\n}\n\nexport type AsyncDataOptions = {\n pageIndex: number\n pageSize: number\n sortBy?: string\n sortDirection?: SortDirection\n globalFilter?: string\n}\n\nexport type GetAsyncData = (\n options: AsyncDataOptions\n) => Promise<AsyncDataResult \| undefined>\n\nexport type TablePosition = {\n top: number \| null\n bottom: number \| null\n offsetTop: number\n isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n applyPagination: () => void\n getTotalRows: () => number\n isSortable: boolean\n asyncDataState?: AsyncDataState\n runAsyncData?: (options: Partial<AsyncDataOptions>) => Promise<void>\n hasAsyncData: boolean\n disabledRows?: Record<string, boolean>\n enableRowSelection?: boolean \| ((row: Row<unknown>) => boolean)\n rowSelection: RowSelectionState\n tablePosition?: TablePosition\n setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n data: AsyncDataResult\n columns: any\n tableId: string\n /*\n Directly update the data array that the table rows are built from.\n * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n \n Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n * — it's probably best to only use one of those two methods for any given table.\n /\n setData: React.Dispatch<React.SetStateAction<AsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\n// Use tanstack's purpose-built initial-state type rather than composing from\n// the full `TableState` interfaces: a shallow `Partial<… & PaginationTableState>`\n// leaves `pagination` typed as the full `PaginationState` (requiring `pageIndex`),\n// whereas `InitialTableState` correctly types it as `Partial<PaginationState>` so\n// consumers can pass e.g. `{ pagination: { pageSize } }`.\nexport type InitialState = InitialTableState\n\nexport type DefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";;AASA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,UAAA;CACA,eAAA,aAAA;CACA,eAAA,eAAA;CACA,eAAA,cAAA;;AACF,EAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n InitialTableState,\n Row,\n RowSelectionState,\n SortDirection,\n Table\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n NONE = 'none',\n PENDING = 'pending',\n FULFILLED = 'fulfilled',\n REJECTED = 'rejected'\n}\n\nexport type AsyncDataResult = {\n total: number\n results: TableData\n}\n\nexport type AsyncDataOptions = {\n pageIndex: number\n pageSize: number\n sortBy?: string\n sortDirection?: SortDirection\n globalFilter?: string\n}\n\nexport type GetAsyncData = (\n options: AsyncDataOptions\n) => Promise<AsyncDataResult \| undefined>\n\nexport type TablePosition = {\n top: number \| null\n bottom: number \| null\n offsetTop: number\n isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n applyPagination: () => void\n removePagination: () => void\n getTotalRows: () => number\n isSortable: boolean\n asyncDataState?: AsyncDataState\n runAsyncData?: (options: Partial<AsyncDataOptions>) => Promise<void>\n hasAsyncData: boolean\n disabledRows?: Record<string, boolean>\n enableRowSelection?: boolean \| ((row: Row<unknown>) => boolean)\n rowSelection: RowSelectionState\n tablePosition?: TablePosition\n setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n data: AsyncDataResult\n columns: any\n tableId: string\n /*\n Directly update the data array that the table rows are built from.\n * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n \n Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n * — it's probably best to only use one of those two methods for any given table.\n /\n setData: React.Dispatch<React.SetStateAction<AsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\n// Use tanstack's purpose-built initial-state type rather than composing from\n// the full `TableState` interfaces: a shallow `Partial<… & PaginationTableState>`\n// leaves `pagination` typed as the full `PaginationState` (requiring `pageIndex`),\n// whereas `InitialTableState` correctly types it as `Partial<PaginationState>` so\n// consumers can pass e.g. `{ pagination: { pageSize } }`.\nexport type InitialState = InitialTableState\n\nexport type DefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";;AASA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,UAAA;CACA,eAAA,aAAA;CACA,eAAA,eAAA;CACA,eAAA,cAAA;;AACF,EAAA,CAAA,CAAA"}

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

@@ -5,7 +5,7 @@ import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { Badge } from "../badge/Badge.js";
 import { useDataTable } from "./DataTable.context.js";
 import { BulkActionsSelectedRowActions } from "./DataTableBulkActionsSelectedRowActions.js";
-import * as React$1 from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@atom-learning/icons";
 //#region src/components/data-table/DataTableBulkActionsFloating.tsx
@@ -39,14 +39,10 @@ var StyledContainer = styled("div", { base: [
 ] });
 var DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(({ children, ...rest }) => {
 	const { rowSelection, toggleAllPageRowsSelected } = useDataTable();
-	const actionBarRef = React$1.useRef(null);
-	const numberOfSelectedRows = React$1.useMemo(() => {
-		return Object.keys(rowSelection || {}).length;
-	}, [rowSelection]);
+	const numberOfSelectedRows = Object.keys(rowSelection || {}).length;
 	const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false);
 	if (numberOfSelectedRows === 0) return null;
 	return /* @__PURE__ */ jsx("section", {
-		ref: actionBarRef,
 		className: "pointer-events-none sticky bottom-0 left-0 flex justify-center",
 		children: /* @__PURE__ */ jsxs(StyledContainer, {
 			...rest,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableBulkActionsFloating.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\n\nconst StyledContainer = styled('div', {\n base: [\n 'flex',\n 'pl-3',\n 'pr-1',\n 'py-2',\n 'mb-4',\n 'mt-2',\n 'justify-between',\n 'items-center',\n 'rounded-lg',\n 'bg-primary-800',\n 'pointer-events-auto',\n 'z-2',\n 'w-full',\n 'mx-4',\n 'shadow-lg',\n 'sm:max-w-200',\n 'lg:max-w-250',\n 'lg:mb-8',\n 'lg:pl-4',\n 'lg:pr-1',\n 'lg:py-3',\n 'xl:max-w-350',\n 'xl:mb-8',\n 'xl:pl-6',\n 'xl:pr-2',\n 'xl:py-4'\n ]\n})\n\nexport const DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(\n ({\n children,\n ...rest\n }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n const ~~actionBarRef = React.useRef<HTMLDivElement>(null)\n\n const~~ numberOfSelectedRows = ~~React.useMemo(() => {\n return~~ Object.keys(rowSelection \|\| {}).length\n ~~}, [rowSelection])~~\n\n const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n if (numberOfSelectedRows === 0) return null\n\n return (\n <section~~\n ref={actionBarRef}\n~~ className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\"\n >\n <StyledContainer {...rest}>\n <div className=\"flex flex-auto items-center justify-start gap-2\">\n <Badge\n theme=\"success\"\n size=\"xs\"\n emphasis=\"subtle\"\n className=\"h-6 min-w-6\"\n >\n {numberOfSelectedRows}\n </Badge>\n <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n selected\n </Text>\n </div>\n <div className=\"flex flex-auto items-center justify-end gap-3\">\n {children}\n <ActionIcon\n appearance=\"simple\"\n theme=\"white\"\n size=\"md\"\n onClick={handleDeselectAllPageRows}\n label=\"close\"\n >\n <Icon is={Close} />\n </ActionIcon>\n </div>\n </StyledContainer>\n </section>\n )\n },\n {\n SelectedRowActions: BulkActionsSelectedRowActions\n }\n)\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,+BAA+C,uBAAO,QAChE,EACC,UACA,GAAG,WACwE;CAC3E,MAAM,EAAE,cAAc,8BAA8B,aAAa;CAEjE,MAAM,~~eAAe,QAAM,OAAuB,IAAI;CAEtD,MAAM,~~uBAAuB,~~QAAM,cAAc;EAC/C,~~OAAO,~~OAAO,~~KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC;~~CACzC~~,~~GAAG,CAAC,YAAY,CAAC;CAEjB,~~MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,yBAAyB,GAAG,OAAO;CAEvC,OACE,oBAAC,WAAD;~~EACE~~,~~KAAK;EACL,~~WAAU;~~YAEV~~,qBAAC,iBAAD;GAAiB,GAAI;aAArB,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KACE,OAAM;KACN,MAAK;KACL,UAAS;KACT,WAAU;eAET;IACI,CAAA,GACP,oBAAC,MAAD;KAAM,MAAK;KAAK,QAAO;KAAO,WAAU;eAAa;IAE/C,CAAA,CACH;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UACD,oBAAC,YAAD;KACE,YAAW;KACX,OAAM;KACN,MAAK;KACL,SAAS;KACT,OAAM;eAEN,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;IACR,CAAA,CACT;KACU;;CACV,CAAA;AAEb,GACA,EACE,oBAAoB,8BACtB,CACF"}
1	+ {"version":3,"file":"DataTableBulkActionsFloating.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\n\nconst StyledContainer = styled('div', {\n base: [\n 'flex',\n 'pl-3',\n 'pr-1',\n 'py-2',\n 'mb-4',\n 'mt-2',\n 'justify-between',\n 'items-center',\n 'rounded-lg',\n 'bg-primary-800',\n 'pointer-events-auto',\n 'z-2',\n 'w-full',\n 'mx-4',\n 'shadow-lg',\n 'sm:max-w-200',\n 'lg:max-w-250',\n 'lg:mb-8',\n 'lg:pl-4',\n 'lg:pr-1',\n 'lg:py-3',\n 'xl:max-w-350',\n 'xl:mb-8',\n 'xl:pl-6',\n 'xl:pr-2',\n 'xl:py-4'\n ]\n})\n\nexport const DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(\n ({\n children,\n ...rest\n }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n const numberOfSelectedRows = Object.keys(rowSelection \|\| {}).length\n\n const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n if (numberOfSelectedRows === 0) return null\n\n return (\n <section className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\">\n <StyledContainer {...rest}>\n <div className=\"flex flex-auto items-center justify-start gap-2\">\n <Badge\n theme=\"success\"\n size=\"xs\"\n emphasis=\"subtle\"\n className=\"h-6 min-w-6\"\n >\n {numberOfSelectedRows}\n </Badge>\n <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n selected\n </Text>\n </div>\n <div className=\"flex flex-auto items-center justify-end gap-3\">\n {children}\n <ActionIcon\n appearance=\"simple\"\n theme=\"white\"\n size=\"md\"\n onClick={handleDeselectAllPageRows}\n label=\"close\"\n >\n <Icon is={Close} />\n </ActionIcon>\n </div>\n </StyledContainer>\n </section>\n )\n },\n {\n SelectedRowActions: BulkActionsSelectedRowActions\n }\n)\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,+BAA+C,uBAAO,QAChE,EACC,UACA,GAAG,WACwE;CAC3E,MAAM,EAAE,cAAc,8BAA8B,aAAa;CAEjE,MAAM,uBAAuB,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC;CAE7D,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,yBAAyB,GAAG,OAAO;CAEvC,OACE,oBAAC,WAAD;EAAS,WAAU;YACjB,qBAAC,iBAAD;GAAiB,GAAI;aAArB,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KACE,OAAM;KACN,MAAK;KACL,UAAS;KACT,WAAU;eAET;IACI,CAAA,GACP,oBAAC,MAAD;KAAM,MAAK;KAAK,QAAO;KAAO,WAAU;eAAa;IAE/C,CAAA,CACH;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UACD,oBAAC,YAAD;KACE,YAAW;KACX,OAAM;KACN,MAAK;KACL,SAAS;KACT,OAAM;eAEN,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;IACR,CAAA,CACT;KACU;;CACV,CAAA;AAEb,GACA,EACE,oBAAoB,8BACtB,CACF"}

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

@@ -3,26 +3,34 @@ import { Label } from "../label/Label.js";
 import { AsyncDataState } from "./DataTable.types.js";
 import { useDataTable } from "./DataTable.context.js";
 import { SearchInput } from "../search-input/SearchInput.js";
-import "react";
+import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "throttle-debounce";
 //#region src/components/data-table/DataTableGlobalFilter.tsx
 var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...rest }) => {
 	const { setGlobalFilter, getState, resetPagination, getTotalRows, asyncDataState } = useDataTable();
 	const { globalFilter } = getState();
-	if (!(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0) return null;
-	const handleChange = debounce(250, (event) => {
-		const { target: { value } } = event;
+	const inputId = React$1.useId();
+	const handleChange = React$1.useMemo(() => debounce(250, (event) => {
 		onChange?.(event);
-		resetPagination();
-		setGlobalFilter(value);
-	});
+		React$1.startTransition(() => {
+			resetPagination();
+			setGlobalFilter(event.target.value);
+		});
+	}), [
+		onChange,
+		resetPagination,
+		setGlobalFilter
+	]);
+	React$1.useEffect(() => () => handleChange.cancel(), [handleChange]);
+	if (!(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Label, {
-		htmlFor: label,
+		htmlFor: inputId,
 		className: cn("mb-3", hideLabel && "sr-only"),
 		children: label
 	}), /* @__PURE__ */ jsx(SearchInput, {
 		...rest,
+		id: inputId,
 		defaultValue: globalFilter,
 		onChange: handleChange,
 		name: label

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { cn } from '../../styled'\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n label: string\n hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n onChange,\n label,\n hideLabel = false,\n ...rest\n}: DataTableSearchProps) => {\n const {\n setGlobalFilter,\n getState,\n resetPagination,\n getTotalRows,\n asyncDataState\n } = useDataTable()\n const { globalFilter } = getState()\n\n const ~~isPending~~ = ~~asyncDataState === AsyncDataState~~.~~PENDING~~\n ~~const~~ ~~isEmpty~~ = ~~!isPending~~ && ~~getTotalRows()~~ ~~===~~ 0\n\n if ~~(isEmpty)~~ ~~return~~ ~~null\~~n\n const handleChange = debounce(250, (event) => {\n ~~const~~ {\n target~~: {~~ value }\n } = ~~event~~\n\n ~~onChange?.(event)~~\n ~~resetPagination~~()\n ~~setGlobalFilter~~(~~value~~)\n })\n\n return (\n <>\n <Label htmlFor={~~label~~} className={cn('mb-3', hideLabel && 'sr-only')}>\n {label}\n </Label>\n <SearchInput\n {...rest}\n defaultValue={globalFilter}\n onChange={handleChange}\n name={label}\n />\n </>\n )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAa,yBAAyB,EACpC,UACA,OACA,YAAY,OACZ,GAAG,WACuB;CAC1B,MAAM,EACJ,iBACA,UACA,iBACA,cACA,mBACE,aAAa;CACjB,MAAM,EAAE,iBAAiB,SAAS;~~CAKlC~~,~~IAFgB~~,~~EADE~~,~~mBAAmB~~,~~eAAe,YACtB,aAAa,~~MAAM~~,GAEpC,OAAO~~;~~CAEpB~~,MAAM,eAAe,~~SAAS~~,~~MAAM~~,~~UAAU;EAC5C~~,MAAM,~~EACJ,QAAQ,EAAE,YACR~~;~~EAEJ~~,WAAW,KAAK;EAChB,gBAAgB;~~EAChB~~,gBAAgB,KAAK;~~CACvB~~,CAAC;~~CAED~~,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAO,SAAS;~~EAAO~~,WAAW,GAAG,QAAQ,aAAa,SAAS;~~YAChE~~;CACI,CAAA,GACP,oBAAC,aAAD;EACE,GAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;CACP,CAAA,CACD,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { cn } from '../../styled'\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n label: string\n hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n onChange,\n label,\n hideLabel = false,\n ...rest\n}: DataTableSearchProps) => {\n const {\n setGlobalFilter,\n getState,\n resetPagination,\n getTotalRows,\n asyncDataState\n } = useDataTable()\n const { globalFilter } = getState()\n const inputId = React.useId()\n\n // Memoized so re-renders don't recreate the debouncer and reset its timer\n // mid-typing. Filtering happens in a transition: re-filtering large row sets\n // must not block keystroke rendering.\n const handleChange = React.useMemo(\n () =>\n debounce(250, (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event)\n React.startTransition(() => {\n resetPagination()\n setGlobalFilter(event.target.value)\n })\n }),\n [onChange, resetPagination, setGlobalFilter]\n )\n\n React.useEffect(() => () => handleChange.cancel(), [handleChange])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n if (isEmpty) return null\n\n return (\n <>\n <Label htmlFor={inputId} className={cn('mb-3', hideLabel && 'sr-only')}>\n {label}\n </Label>\n <SearchInput\n {...rest}\n id={inputId}\n defaultValue={globalFilter}\n onChange={handleChange}\n name={label}\n />\n </>\n )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAa,yBAAyB,EACpC,UACA,OACA,YAAY,OACZ,GAAG,WACuB;CAC1B,MAAM,EACJ,iBACA,UACA,iBACA,cACA,mBACE,aAAa;CACjB,MAAM,EAAE,iBAAiB,SAAS;CAClC,MAAM,UAAU,QAAM,MAAM;CAK5B,MAAM,eAAe,QAAM,cAEvB,SAAS,MAAM,UAA+C;EAC5D,WAAW,KAAK;EAChB,QAAM,sBAAsB;GAC1B,gBAAgB;GAChB,gBAAgB,MAAM,OAAO,KAAK;EACpC,CAAC;CACH,CAAC,GACH;EAAC;EAAU;EAAiB;CAAe,CAC7C;CAEA,QAAM,sBAAsB,aAAa,OAAO,GAAG,CAAC,YAAY,CAAC;CAKjE,IAFgB,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM,GAEpC,OAAO;CAEpB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAO,SAAS;EAAS,WAAW,GAAG,QAAQ,aAAa,SAAS;YAClE;CACI,CAAA,GACP,oBAAC,aAAD;EACE,GAAI;EACJ,IAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;CACP,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -7,23 +7,14 @@ import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableHead.tsx
 var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stickyOffset = 0, showTotalInFirstColumn, totalSuffix, style, className, ...rest }) => {
-	const { getHeaderGroups, setIsSortable, enableRowSelection, getCanSomeRowsExpand, tablePosition, setTablePosition } = useDataTable();
+	const { getHeaderGroups, setIsSortable, enableRowSelection, getCanSomeRowsExpand, tablePosition } = useDataTable();
 	React$1.useEffect(() => {
 		setIsSortable(sortable);
 	}, [sortable, setIsSortable]);
 	const tableHeaderRowRef = React$1.useRef(null);
 	const tableRef = React$1.useRef(null);
-	const headerOffsetRef = React$1.useRef(0);
 	const [headerOffset, setHeaderOffset] = React$1.useState(0);
 	const [headerHide, setHeaderHide] = React$1.useState(false);
-	const tableHeadElement = tableHeaderRowRef?.current?.closest("thead");
-	if (tableHeadElement && tablePosition?.offsetTop === null) {
-		const intersectionOffset = stickyOffset + tableHeadElement.getBoundingClientRect().height;
-		if (tablePosition) setTablePosition({
-			...tablePosition,
-			offsetTop: intersectionOffset || 0
-		});
-	}
 	React$1.useEffect(() => {
 		if (!isSticky) return;
 		if (!tableRef.current && tableHeaderRowRef.current) tableRef.current = tableHeaderRowRef.current.closest("table");
@@ -31,11 +22,11 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 			if (tablePosition?.top !== null && tablePosition?.bottom !== null) {
 				const newOffset = tablePosition?.top != null && tablePosition?.bottom != null && tablePosition.top < stickyOffset && tablePosition.bottom > 100 ? -tablePosition.top + stickyOffset : 0;
 				if (newOffset !== 0) setHeaderHide(true);
-				headerOffsetRef.current = newOffset;
 				setHeaderOffset(newOffset);
-				requestAnimationFrame(() => {
+				const rafId = requestAnimationFrame(() => {
 					setHeaderHide(false);
 				});
+				return () => cancelAnimationFrame(rafId);
 			}
 		}
 	}, [
@@ -51,9 +42,9 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 		},
 		...rest,
 		className: cn("relative", "z-3", "[&_tr:not(:last-child)>th]:border-b-none", "[&_tr:not(:first-child)>th]:rounded-none!", className),
-		children: getHeaderGroups().map((headerGroup) => {
+		children: getHeaderGroups().map((headerGroup, headerGroupIndex) => {
 			return /* @__PURE__ */ jsxs(Table.Row, {
-				ref: tableHeaderRowRef,
+				ref: headerGroupIndex === 0 ? tableHeaderRowRef : void 0,
 				className: isSticky && headerOffset !== 0 ? cn("translate-y-(--header-offset)", headerHide ? "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,
 				children: [
 					getCanSomeRowsExpand() && /* @__PURE__ */ jsx(Table.HeaderCell, { className: "w-10" }),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n React.ComponentProps<typeof Table.Header>,\n 'children'\n> & {\n sortable?: boolean\n isSticky?: boolean\n stickyOffset?: number\n showTotalInFirstColumn?: boolean\n totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n stickyOffset = 0,\n showTotalInFirstColumn,\n totalSuffix,\n style,\n className,\n ...rest\n}: DataTableHeadProps): React.ReactElement<unknown> => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand,\n tablePosition~~,\n setTablePosition~~\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n const tableRef = React.useRef<HTMLTableElement \| null>(null)\n ~~const headerOffsetRef = React.useRef(0)~~\n\n const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n if (tableHeadElement && tablePosition?.offsetTop === null) {\n const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n const intersectionOffset = stickyOffset + tableHeadHeight\n if (tablePosition) {\n setTablePosition({ ...tablePosition, offsetTop: intersectionOffset \|\| 0 })\n }\n }\n\n React.useEffect(() => {\n if (!isSticky) return\n\n if (!tableRef.current && tableHeaderRowRef.current) {\n tableRef.current = tableHeaderRowRef.current.closest(\n 'table'\n ) as HTMLTableElement \| null\n }\n\n if (tableRef.current) {\n if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n const newOffset =\n tablePosition?.top != null &&\n tablePosition?.bottom != null &&\n tablePosition.top < stickyOffset &&\n tablePosition.bottom > 100\n ? -tablePosition.top + stickyOffset\n : 0\n\n if (newOffset !== 0) setHeaderHide(true)\n\n ~~headerOffsetRef.current = newOffset\n~~ setHeaderOffset(newOffset)\n\n requestAnimationFrame(() => {\n setHeaderHide(false)\n })\n }\n }\n }, [isSticky, stickyOffset, tablePosition])\n\n return (\n <Table.Header\n theme={theme}\n style={{\n ...style,\n '--header-offset': `${headerOffset}px`\n }}\n {...rest}\n className={cn(\n 'relative',\n 'z-3',\n '[&_tr:not(:last-child)>th]:border-b-none',\n '[&_tr:not(:first-child)>th]:rounded-none!',\n className\n )}\n >\n {getHeaderGroups().map((headerGroup) => {\n return (\n <Table.Row\n key={headerGroup.id}\n ref={tableHeaderRowRef}\n className={\n isSticky && headerOffset !== 0\n ? cn(\n 'translate-y-(--header-offset)',\n headerHide\n ? 'delay-0ms opacity-0 transition-none'\n : 'delay-150ms opacity-100 transition-opacity duration-100',\n '[&_th]:last:before:absolute',\n '[&_th]:last:before:bottom-0',\n '[&_th]:last:before:pointer-events-none',\n '[&_th]:last:before:right-0',\n '[&_th]:last:before:shadow-sm',\n '[&_th]:last:before:top-0',\n '[&_th]:last:before:w-full'\n )\n : undefined\n }\n >\n {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n {enableRowSelection && (\n <Table.HeaderCell className=\"w-10\">\n <DataTableSelectAllRowsCheckbox />\n </Table.HeaderCell>\n )}\n {headerGroup.headers.map((header, index) => (\n <DataTableHeaderCell\n header={header}\n key={header.id}\n includeTotal={index === 0 && showTotalInFirstColumn}\n totalSuffix={totalSuffix}\n />\n ))}\n </Table.Row>\n )\n })}\n </Table.Header>\n )\n}\n"],"mappings":";;;;;;;;AAmBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,QAAQ,SACR,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,WACkD;CACrD,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,~~eACA~~,~~qBACE,~~aAAa;CAEjB,QAAM,gBAAgB;EACpB,cAAc,QAAQ;CACxB,GAAG,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,oBAAoB,QAAM,OAA4B,IAAI;CAChE,MAAM,WAAW,QAAM,OAAgC,IAAI;~~CAC3D~~,MAAM,~~kBAAkB,QAAM,OAAO,~~CAAC~~;CAEtC~~,~~MAAM,CAAC,~~cAAc,mBAAmB,QAAM,SAAiB,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,KAAK;CAEjE,~~MAAM,mBAAmB,mBAAmB,SAAS,QAAQ,OAAO;CAEpE,IAAI,oBAAoB,eAAe,cAAc,MAAM;EAEzD,MAAM,qBAAqB,eADH,iBAAiB,sBAAsB,CAAC,CAAC;EAEjE,IAAI,eACF,iBAAiB;GAAE,GAAG;GAAe,WAAW,sBAAsB;EAAE,CAAC;CAE7E;CAEA,~~QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,IAAI,CAAC,SAAS,WAAW,kBAAkB,SACzC,SAAS,UAAU,kBAAkB,QAAQ,QAC3C,OACF;EAGF,IAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;IAEN,IAAI,cAAc,GAAG,cAAc,IAAI;IAEvC,gBAAgB,~~UAAU;IAC1B,gBAAgB,~~SAAS;IAEzB,4BAA4B;~~KAC1B~~,cAAc,KAAK;IACrB,CAAC;~~GACH~~;;CAEJ,GAAG;EAAC;EAAU;EAAc;CAAa,CAAC;CAE1C,OACE,oBAAC,MAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;EACrC;EACA,GAAI;EACJ,WAAW,GACT,YACA,OACA,4CACA,6CACA,SACF;YAEC,gBAAgB,CAAC,CAAC,KAAK,~~gBAAgB~~;~~GACtC~~,OACE,qBAAC,MAAM,KAAP;~~IAEE~~,KAAK;~~IACL~~,WACE,YAAY,iBAAiB,IACzB,GACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,2BACF,IACA,KAAA;~~cAlBR~~;~~KAqBG~~,qBAAqB,KAAK,oBAAC,MAAM,YAAP,EAAkB,WAAU,OAAQ,CAAA;KAC9D,sBACC,oBAAC,MAAM,YAAP;MAAkB,WAAU;gBAC1B,oBAAC,gCAAD,CAAiC,CAAA;KACjB,CAAA;KAEnB,YAAY,QAAQ,KAAK,QAAQ,UAChC,oBAAC,qBAAD;MACU;MAER,cAAc,UAAU,KAAK;MAChB;KACd,GAHM,OAAO,EAGb,CACF;IACQ;~~MAlCJ~~,YAAY,~~EAkCR~~;EAEf,CAAC;CACW,CAAA;AAElB"}
1	+ {"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n React.ComponentProps<typeof Table.Header>,\n 'children'\n> & {\n sortable?: boolean\n isSticky?: boolean\n stickyOffset?: number\n showTotalInFirstColumn?: boolean\n totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n stickyOffset = 0,\n showTotalInFirstColumn,\n totalSuffix,\n style,\n className,\n ...rest\n}: DataTableHeadProps): React.ReactElement<unknown> => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand,\n tablePosition\n } = 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\n const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n const [headerHide, setHeaderHide] = React.useState<boolean>(false)\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 setHeaderOffset(newOffset)\n\n const rafId = requestAnimationFrame(() => {\n setHeaderHide(false)\n })\n\n return () => cancelAnimationFrame(rafId)\n }\n }\n }, [isSticky, stickyOffset, tablePosition])\n\n return (\n <Table.Header\n theme={theme}\n style={{\n ...style,\n '--header-offset': `${headerOffset}px`\n }}\n {...rest}\n className={cn(\n 'relative',\n 'z-3',\n '[&_tr:not(:last-child)>th]:border-b-none',\n '[&_tr:not(:first-child)>th]:rounded-none!',\n className\n )}\n >\n {getHeaderGroups().map((headerGroup, headerGroupIndex) => {\n return (\n <Table.Row\n key={headerGroup.id}\n // Single ref slot: only the first header row may carry it, or\n // each successive header group would silently clobber it.\n ref={headerGroupIndex === 0 ? tableHeaderRowRef : undefined}\n className={\n isSticky && headerOffset !== 0\n ? cn(\n 'translate-y-(--header-offset)',\n headerHide\n ? 'delay-0ms opacity-0 transition-none'\n : 'delay-150ms opacity-100 transition-opacity duration-100',\n '[&_th]:last:before:absolute',\n '[&_th]:last:before:bottom-0',\n '[&_th]:last:before:pointer-events-none',\n '[&_th]:last:before:right-0',\n '[&_th]:last:before:shadow-sm',\n '[&_th]:last:before:top-0',\n '[&_th]:last:before:w-full'\n )\n : undefined\n }\n >\n {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n {enableRowSelection && (\n <Table.HeaderCell className=\"w-10\">\n <DataTableSelectAllRowsCheckbox />\n </Table.HeaderCell>\n )}\n {headerGroup.headers.map((header, index) => (\n <DataTableHeaderCell\n header={header}\n key={header.id}\n includeTotal={index === 0 && showTotalInFirstColumn}\n totalSuffix={totalSuffix}\n />\n ))}\n </Table.Row>\n )\n })}\n </Table.Header>\n )\n}\n"],"mappings":";;;;;;;;AAmBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,QAAQ,SACR,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,WACkD;CACrD,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,kBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,cAAc,QAAQ;CACxB,GAAG,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,oBAAoB,QAAM,OAA4B,IAAI;CAChE,MAAM,WAAW,QAAM,OAAgC,IAAI;CAE3D,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,KAAK;CAEjE,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,IAAI,CAAC,SAAS,WAAW,kBAAkB,SACzC,SAAS,UAAU,kBAAkB,QAAQ,QAC3C,OACF;EAGF,IAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;IAEN,IAAI,cAAc,GAAG,cAAc,IAAI;IAEvC,gBAAgB,SAAS;IAEzB,MAAM,QAAQ,4BAA4B;KACxC,cAAc,KAAK;IACrB,CAAC;IAED,aAAa,qBAAqB,KAAK;GACzC;;CAEJ,GAAG;EAAC;EAAU;EAAc;CAAa,CAAC;CAE1C,OACE,oBAAC,MAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;EACrC;EACA,GAAI;EACJ,WAAW,GACT,YACA,OACA,4CACA,6CACA,SACF;YAEC,gBAAgB,CAAC,CAAC,KAAK,aAAa,qBAAqB;GACxD,OACE,qBAAC,MAAM,KAAP;IAIE,KAAK,qBAAqB,IAAI,oBAAoB,KAAA;IAClD,WACE,YAAY,iBAAiB,IACzB,GACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,2BACF,IACA,KAAA;cApBR;KAuBG,qBAAqB,KAAK,oBAAC,MAAM,YAAP,EAAkB,WAAU,OAAQ,CAAA;KAC9D,sBACC,oBAAC,MAAM,YAAP;MAAkB,WAAU;gBAC1B,oBAAC,gCAAD,CAAiC,CAAA;KACjB,CAAA;KAEnB,YAAY,QAAQ,KAAK,QAAQ,UAChC,oBAAC,qBAAD;MACU;MAER,cAAc,UAAU,KAAK;MAChB;KACd,GAHM,OAAO,EAGb,CACF;IACQ;MApCJ,YAAY,EAoCR;EAEf,CAAC;CACW,CAAA;AAElB"}

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

@@ -14,6 +14,7 @@ var DataTableRowSelectionCheckbox = ({ row, checked, onCheckedChange, label = `R
 		style: { "--depth": row.depth },
 		checked,
 		onCheckedChange,
+		id: `${tableId}_row_${row.id}_selection`,
 		name: `${tableId}_row_${row.id}_selection`,
 		disabled: !row.getCanSelect(),
 		className: "mr-3 ml-[calc((var(--depth,0)*2)*4px)]"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableRowSelectionCheckbox = ({\n row,\n checked,\n onCheckedChange,\n label = `Row ${row.id} selection`\n}: {\n row: Row<Record<string, unknown>>\n checked: boolean \| 'indeterminate'\n onCheckedChange: (value: boolean) => void\n label?: string\n}): React.ReactElement<unknown> => {\n const { tableId } = useDataTable()\n\n return (\n <>\n <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n {label}\n </label>\n <Checkbox\n size=\"lg\"\n style={{ '--depth': row.depth }}\n checked={checked}\n onCheckedChange={onCheckedChange}\n name={`${tableId}_row_${row.id}_selection`}\n disabled={!row.getCanSelect()}\n className=\"mr-3 ml-[calc((var(--depth,0)2)4px)]\"\n />\n </>\n )\n}\n"],"mappings":";;;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAMW;CACjC,MAAM,EAAE,YAAY,aAAa;CAEjC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;YAC7D;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,MAAM;EACrB;EACQ;EACjB,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,aAAa;EAC5B,WAAU;CACX,CAAA,CACD,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableRowSelectionCheckbox = ({\n row,\n checked,\n onCheckedChange,\n label = `Row ${row.id} selection`\n}: {\n row: Row<Record<string, unknown>>\n checked: boolean \| 'indeterminate'\n onCheckedChange: (value: boolean) => void\n label?: string\n}): React.ReactElement<unknown> => {\n const { tableId } = useDataTable()\n\n return (\n <>\n <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n {label}\n </label>\n <Checkbox\n size=\"lg\"\n style={{ '--depth': row.depth }}\n checked={checked}\n onCheckedChange={onCheckedChange}\n id={`${tableId}_row_${row.id}_selection`}\n name={`${tableId}_row_${row.id}_selection`}\n disabled={!row.getCanSelect()}\n className=\"mr-3 ml-[calc((var(--depth,0)2)4px)]\"\n />\n </>\n )\n}\n"],"mappings":";;;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAMW;CACjC,MAAM,EAAE,YAAY,aAAa;CAEjC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;YAC7D;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,MAAM;EACrB;EACQ;EACjB,IAAI,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC7B,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,aAAa;EAC5B,WAAU;CACX,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -22,7 +22,8 @@ var DataTableSelectAllRowsCheckbox = ({ label = "All rows selection" }) => {
 		size: "lg",
 		checked: getCheckedState(),
 		onCheckedChange: updateCheckedState,
-		name: `${tableId}_allRowsSelection`
+		id: `${tableId}_all_rows_selection`,
+		name: `${tableId}_all_rows_selection`
 	})] });
 };
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n label = 'All rows selection'\n}: {\n label?: string\n}) => {\n const {\n getIsAllPageRowsSelected,\n getIsSomePageRowsSelected,\n toggleAllPageRowsSelected,\n tableId\n } = useDataTable()\n\n const getCheckedState = () => {\n if (getIsSomePageRowsSelected()) return 'indeterminate'\n if (getIsAllPageRowsSelected()) return true\n return false\n }\n\n const updateCheckedState = () => {\n if (getIsSomePageRowsSelected()) {\n return toggleAllPageRowsSelected(false)\n }\n return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n }\n\n return (\n <>\n <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n {label}\n </label>\n <Checkbox\n size=\"lg\"\n checked={getCheckedState()}\n onCheckedChange={updateCheckedState}\n name={`${tableId}~~_allRowsSelection~~`}\n />\n </>\n )\n}\n"],"mappings":";;;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,aAAa;CAEjB,MAAM,wBAAwB;EAC5B,IAAI,0BAA0B,GAAG,OAAO;EACxC,IAAI,yBAAyB,GAAG,OAAO;EACvC,OAAO;CACT;CAEA,MAAM,2BAA2B;EAC/B,IAAI,0BAA0B,GAC5B,OAAO,0BAA0B,KAAK;EAExC,OAAO,0BAA0B,CAAC,yBAAyB,CAAC;CAC9D;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;YACxD;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,gBAAgB;EACzB,iBAAiB;EACjB,MAAM,GAAG,QAAQ;CAClB,CAAA,CACD,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n label = 'All rows selection'\n}: {\n label?: string\n}) => {\n const {\n getIsAllPageRowsSelected,\n getIsSomePageRowsSelected,\n toggleAllPageRowsSelected,\n tableId\n } = useDataTable()\n\n const getCheckedState = () => {\n if (getIsSomePageRowsSelected()) return 'indeterminate'\n if (getIsAllPageRowsSelected()) return true\n return false\n }\n\n const updateCheckedState = () => {\n if (getIsSomePageRowsSelected()) {\n return toggleAllPageRowsSelected(false)\n }\n return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n }\n\n return (\n <>\n <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n {label}\n </label>\n <Checkbox\n size=\"lg\"\n checked={getCheckedState()}\n onCheckedChange={updateCheckedState}\n id={`${tableId}_all_rows_selection`}\n name={`${tableId}_all_rows_selection`}\n />\n </>\n )\n}\n"],"mappings":";;;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,aAAa;CAEjB,MAAM,wBAAwB;EAC5B,IAAI,0BAA0B,GAAG,OAAO;EACxC,IAAI,yBAAyB,GAAG,OAAO;EACvC,OAAO;CACT;CAEA,MAAM,2BAA2B;EAC/B,IAAI,0BAA0B,GAC5B,OAAO,0BAA0B,KAAK;EAExC,OAAO,0BAA0B,CAAC,yBAAyB,CAAC;CAC9D;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;YACxD;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,gBAAgB;EACzB,iBAAiB;EACjB,IAAI,GAAG,QAAQ;EACf,MAAM,GAAG,QAAQ;CAClB,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -24,10 +24,8 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 	const tableRef = React$1.useRef(null);
 	const isTableVisible = React$1.useRef(false);
 	const isScrolling = React$1.useRef(false);
-	const scrollTarget = React$1.useMemo(() => {
-		if (typeof window === "undefined") return null;
-		return window;
-	}, []);
+	const scrollRafIdRef = React$1.useRef(null);
+	const scrollTarget = typeof window === "undefined" ? null : window;
 	React$1.useEffect(() => {
 		if (!scrollTarget || typeof IntersectionObserver === "undefined") return;
 		const updatePosition = () => {
@@ -44,7 +42,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		};
 		const handleScroll = () => {
 			if (!isScrolling.current) {
-				requestAnimationFrame(updatePosition);
+				scrollRafIdRef.current = requestAnimationFrame(updatePosition);
 				isScrolling.current = true;
 			}
 		};
@@ -69,13 +67,17 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		if (tableRef.current && (scrollOptions.hasStickyHeader || Object.keys(rowSelection || {}).length > 0)) tableObserver.observe(tableRef.current);
 		return () => {
 			tableObserver.disconnect();
+			if (scrollRafIdRef.current !== null) {
+				cancelAnimationFrame(scrollRafIdRef.current);
+				scrollRafIdRef.current = null;
+			}
+			isScrolling.current = false;
 			if (scrollTarget) scrollTarget?.removeEventListener("scroll", handleScroll);
 		};
 	}, [
 		rowSelection,
 		scrollOptions.hasStickyHeader,
 		scrollOptions?.stickyHeaderOffset,
-		scrollTarget,
 		setTablePosition
 	]);
 	const isPending = asyncDataState === AsyncDataState.PENDING;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' \| 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' \| 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n stickyHeaderOffset?: number\n headerCss?: string\n numberOfStickyColumns?: number\n scrollContainerCls?: string \| string[]\n showTotalInFirstColumn?: boolean\n totalSuffix?: string\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n withContainer?: boolean\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme = 'white',\n className,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false,\n showTotalInFirstColumn: true,\n totalSuffix: 'items'\n },\n rowAction,\n withContainer = false,\n ...rest\n}: DataTableTableProps): React.JSX.Element \| null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement \| null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const ~~scrollTarget~~ = React.~~useMemo~~(() ~~=> {~~\n if (typeof window === 'undefined') ~~return~~ null~~\n return~~ window\n ~~}, [])~~\n\n React.useEffect(() => {\n if (!scrollTarget \|\| typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const updatePosition = () => {\n if (tableRef.current) {\n const tableTop = tableRef.current.getBoundingClientRect().top\n const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n top: tableTop,\n bottom: tableBottom\n }))\n }\n isScrolling.current = false\n }\n\n const handleScroll = () => {\n if (!isScrolling.current) {\n requestAnimationFrame(updatePosition)\n isScrolling.current = true\n }\n }\n\n if (!tableRef.current) return\n\n const observerOffset = scrollOptions?.stickyHeaderOffset \|\| 0\n\n const observerOptions = {\n rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n threshold: 0\n }\n\n const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n if (!entries \|\| entries.length === 0) return\n const entry = entries[0]\n\n isTableVisible.current = entry.isIntersecting\n\n if (scrollTarget) {\n if (entry.isIntersecting) {\n // add scroll listener\n scrollTarget?.addEventListener('scroll', handleScroll)\n } else {\n // remove scroll listener\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n isVisible: entry.isIntersecting\n }))\n }\n\n const tableObserver = new IntersectionObserver(\n handleTableIntersection,\n observerOptions\n )\n\n //only track table position if we have a sticky header or bulk actions active\n if (\n tableRef.current &&\n (scrollOptions.hasStickyHeader \|\|\n Object.keys(rowSelection \|\| {}).length > 0)\n ) {\n tableObserver.observe(tableRef.current)\n }\n\n return () => {\n tableObserver.disconnect()\n if (scrollTarget) {\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n ~~scrollTarget,\n~~ setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() \|\| !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n const tableComponent = (\n <Table\n corners=\"round\"\n size=\"lg\"\n {...rest}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCls={scrollOptions.scrollContainerCls}\n scrollContainerkey={buildScrollContainerKey()}\n className={cn(\n isPending && [\n 'opacity-50',\n 'pointer-events-none',\n 'transition-opacity',\n 'duration-250',\n 'linear',\n 'delay-150'\n ],\n className\n )}\n >\n <DataTableHead\n theme={theme}\n sortable={sortable}\n isSticky={scrollOptions.hasStickyHeader}\n stickyOffset={scrollOptions.stickyHeaderOffset}\n className={scrollOptions.headerCss}\n showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n totalSuffix={scrollOptions.totalSuffix}\n />\n <DataTableBody striped={striped} rowAction={rowAction} />\n </Table>\n )\n\n return (\n <>\n <DataTableLoading />\n {withContainer ? (\n <TableContainer\n className={cn(\n scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n )}\n >\n {tableComponent}\n </TableContainer>\n ) : (\n tableComponent\n )}\n </>\n )\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CAAC;CAAO;CAAY;AAAY,EACxC,CAAC;AAuBD,IAAa,kBAAkB,EAC7B,UACA,SACA,QAAQ,SACR,WACA,gBAAgB;CACd,uBAAuB;CACvB,oBAAoB;CACpB,iBAAiB;CACjB,wBAAwB;CACxB,aAAa;AACf,GACA,WACA,gBAAgB,OAChB,GAAG,WACgD;CACnD,MAAM,EACJ,gBACA,cACA,sBACA,cACA,oBACA,SACA,qBACE,aAAa;CAEjB,MAAM,WAAW,QAAM,OAAgC,IAAI;CAC3D,MAAM,iBAAiB,QAAM,OAAO,KAAK;CACzC,MAAM,cAAc,QAAM,OAAgB,KAAK;~~CAE~~/C,MAAM,~~eAAe~~,QAAM,~~cAAc;EACvC~~,IAAI,OAAO,WAAW,~~aAAa~~,OAAO;~~EAC1C~~,~~OAAO;CACT,GAAG,CAAC,CAAC;CAEL,~~QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,OAAO,yBAAyB,aACnD;EAGF,MAAM,uBAAuB;GAC3B,IAAI,SAAS,SAAS;IACpB,MAAM,WAAW,SAAS,QAAQ,sBAAsB,CAAC,CAAC;IAC1D,MAAM,cAAc,SAAS,QAAQ,sBAAsB,CAAC,CAAC;IAE7D,kBAAkB,kBAAkB;KAClC,GAAG;KACH,KAAK;KACL,QAAQ;IACV,EAAE;GACJ;GACA,YAAY,UAAU;EACxB;EAEA,MAAM,qBAAqB;GACzB,IAAI,CAAC,YAAY,SAAS;IACxB,sBAAsB,cAAc;~~IACpC~~,YAAY,UAAU;GACxB;EACF;EAEA,IAAI,CAAC,SAAS,SAAS;EAEvB,MAAM,iBAAiB,eAAe,sBAAsB;EAE5D,MAAM,kBAAkB;GACtB,YAAY,IAAI,eAAe,UAAU,eAAe;GACxD,WAAW;EACb;EAEA,MAAM,2BAA2B,YAAyC;GACxE,IAAI,CAAC,WAAW,QAAQ,WAAW,GAAG;GACtC,MAAM,QAAQ,QAAQ;GAEtB,eAAe,UAAU,MAAM;GAE/B,IAAI,cACF,IAAI,MAAM,gBAER,cAAc,iBAAiB,UAAU,YAAY;QAGrD,cAAc,oBAAoB,UAAU,YAAY;GAI5D,kBAAkB,kBAAkB;IAClC,GAAG;IACH,WAAW,MAAM;GACnB,EAAE;EACJ;EAEA,MAAM,gBAAgB,IAAI,qBACxB,yBACA,eACF;EAGA,IACE,SAAS,YACR,cAAc,mBACb,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,IAE3C,cAAc,QAAQ,SAAS,OAAO;EAGxC,aAAa;GACX,cAAc,WAAW;GACzB,IAAI,cACF,cAAc,oBAAoB,UAAU,YAAY;EAE5D;CACF,GAAG;EACD;EACA,cAAc;EACd,eAAe;EACf;~~EACA;~~CACF,CAAC;CAED,MAAM,YAAY,mBAAmB,eAAe;CACpD,MAAM,UAAU,CAAC,aAAa,aAAa,MAAM;CAEjD,MAAM,gCAAwC;EAC5C,IAAI,qBAAqB;EAEzB,IAAI,qBAAqB,KAAK,CAAC,CAAC,oBAC9B,qBAAqB;OAChB,IAAI,qBAAqB,KAAK,CAAC,CAAC,oBACrC,qBAAqB;EAGvB,OAAO,GAAG,QAAQ,GAAG,mBAAmB;CAC1C;CAEA,IAAI,SAAS,OAAO;CAEpB,MAAM,iBACJ,qBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,GAAI;EACJ,KAAK;EACL,uBAAuB,cAAc;EACrC,oBAAoB,cAAc;EAClC,oBAAoB,wBAAwB;EAC5C,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;YAlBF,CAoBE,oBAAC,eAAD;GACS;GACG;GACV,UAAU,cAAc;GACxB,cAAc,cAAc;GAC5B,WAAW,cAAc;GACzB,wBAAwB,cAAc;GACtC,aAAa,cAAc;EAC5B,CAAA,GACD,oBAAC,eAAD;GAAwB;GAAoB;EAAY,CAAA,CACnD;;CAGT,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,CAAmB,CAAA,GAClB,gBACC,oBAAC,gBAAD;EACE,WAAW,GACT,cAAc,0BAA0B,KAAK,iBAC/C;YAEC;CACa,CAAA,IAEhB,cAEF,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' \| 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' \| 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n stickyHeaderOffset?: number\n headerCss?: string\n numberOfStickyColumns?: number\n scrollContainerCls?: string \| string[]\n showTotalInFirstColumn?: boolean\n totalSuffix?: string\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n withContainer?: boolean\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme = 'white',\n className,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false,\n showTotalInFirstColumn: true,\n totalSuffix: 'items'\n },\n rowAction,\n withContainer = false,\n ...rest\n}: DataTableTableProps): React.JSX.Element \| null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement \| null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n const scrollRafIdRef = React.useRef<number \| null>(null)\n\n const scrollTarget = typeof window === 'undefined' ? null : window\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 scrollRafIdRef.current = 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 (scrollRafIdRef.current !== null) {\n cancelAnimationFrame(scrollRafIdRef.current)\n scrollRafIdRef.current = null\n }\n isScrolling.current = false\n if (scrollTarget) {\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() \|\| !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n const tableComponent = (\n <Table\n corners=\"round\"\n size=\"lg\"\n {...rest}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCls={scrollOptions.scrollContainerCls}\n scrollContainerkey={buildScrollContainerKey()}\n className={cn(\n isPending && [\n 'opacity-50',\n 'pointer-events-none',\n 'transition-opacity',\n 'duration-250',\n 'linear',\n 'delay-150'\n ],\n className\n )}\n >\n <DataTableHead\n theme={theme}\n sortable={sortable}\n isSticky={scrollOptions.hasStickyHeader}\n stickyOffset={scrollOptions.stickyHeaderOffset}\n className={scrollOptions.headerCss}\n showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n totalSuffix={scrollOptions.totalSuffix}\n />\n <DataTableBody striped={striped} rowAction={rowAction} />\n </Table>\n )\n\n return (\n <>\n <DataTableLoading />\n {withContainer ? (\n <TableContainer\n className={cn(\n scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n )}\n >\n {tableComponent}\n </TableContainer>\n ) : (\n tableComponent\n )}\n </>\n )\n}\n"],"mappings":"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"}

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

@@ -15,7 +15,7 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 	const isPending = asyncDataState === AsyncDataState.PENDING;
 	const rowIds = React$1.useMemo(() => data.results.map((row) => {
 		return row[idColumn];
-	}), [data]);
+	}), [data, idColumn]);
 	return /* @__PURE__ */ jsxs(SortableRoot, {
 		onSortChange: React$1.useCallback(({ oldIndex, newIndex }) => {
 			const sortedResults = arrayMove(data.results, oldIndex, newIndex);

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

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

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

@@ -20,10 +20,11 @@ var StyledNav = styled("nav", { base: [
 ] });
 /** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
 var Pagination = ({ colorScheme, ...rest }) => {
-	const { applyPagination, getState, getExpandedRowModel, getRowModel, setPageIndex, getTotalRows, getPageCount, asyncDataState, hasAsyncData } = useDataTable();
+	const { applyPagination, removePagination, getState, getExpandedRowModel, getRowModel, setPageIndex, getTotalRows, getPageCount, asyncDataState, hasAsyncData } = useDataTable();
 	React$1.useEffect(() => {
 		applyPagination();
-	}, [applyPagination]);
+		return () => removePagination();
+	}, [applyPagination, removePagination]);
 	const { pagination: paginationState } = getState();
 	const isEmpty = !(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0;
 	const showPagination = hasAsyncData ? getPageCount() > 1 : getExpandedRowModel().rows.length / paginationState.pageSize > 1;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../../styled'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState } from '../DataTable.types'\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, ...rest }: 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 {...rest}>\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"],"mappings":";;;;;;;;AASA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;;AAOD,IAAa,cAAc,EAAE,aAAa,GAAG,WAA4B;CACvE,MAAM,EACJ,iBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,gBAAgB;~~CAClB~~,GAAG,CAAC,~~eAAe~~,CAAC;~~CAEpB~~,MAAM,EAAE,YAAY,oBAAoB,SAAS;CAEjD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM;CAEjD,MAAM,iBAAiB,eACnB,aAAa,IAAI,IACjB,oBAAoB,CAAC,CAAC,KAAK,SAAS,gBAAgB,WAAW;CAEnE,IAAI,WAAW,CAAC,gBAAgB,OAAO;CACvC,MAAM,mBAAmB,oBAAoB,CAAC,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,YAAY,CAAC,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,gBAAgB;CAGnE,MAAM,WAAW,UAAkB;EACjC,aAAa,QAAQ,CAAC;CACxB;CAEA,MAAM,YAAY,eACd,aAAa,IACb,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,QAAQ,CAAC;CAEtE,OACE,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,aAAa,IAAI,iBACjC;EAAc,CAAA,GACf,oBAAC,cAAD;GACe;GACb,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;EACvB,CAAA,CACQ;;AAEf;AAEA,WAAW,cAAc"}
1	+ {"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../../styled'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState } from '../DataTable.types'\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, ...rest }: PaginationProps) => {\n const {\n applyPagination,\n removePagination,\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 return () => removePagination()\n }, [applyPagination, removePagination])\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 {...rest}>\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"],"mappings":";;;;;;;;AASA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;;AAOD,IAAa,cAAc,EAAE,aAAa,GAAG,WAA4B;CACvE,MAAM,EACJ,iBACA,kBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,gBAAgB;EAChB,aAAa,iBAAiB;CAChC,GAAG,CAAC,iBAAiB,gBAAgB,CAAC;CAEtC,MAAM,EAAE,YAAY,oBAAoB,SAAS;CAEjD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM;CAEjD,MAAM,iBAAiB,eACnB,aAAa,IAAI,IACjB,oBAAoB,CAAC,CAAC,KAAK,SAAS,gBAAgB,WAAW;CAEnE,IAAI,WAAW,CAAC,gBAAgB,OAAO;CACvC,MAAM,mBAAmB,oBAAoB,CAAC,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,YAAY,CAAC,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,gBAAgB;CAGnE,MAAM,WAAW,UAAkB;EACjC,aAAa,QAAQ,CAAC;CACxB;CAEA,MAAM,YAAY,eACd,aAAa,IACb,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,QAAQ,CAAC;CAEtE,OACE,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,aAAa,IAAI,iBACjC;EAAc,CAAA,GACf,oBAAC,cAAD;GACe;GACb,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;EACvB,CAAA,CACQ;;AAEf;AAEA,WAAW,cAAc"}

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

@@ -5,4 +5,5 @@ export declare const usePagination: (initialPaginationState: Partial<PaginationS
     paginationState: PaginationState | undefined;
     setPaginationState: React.Dispatch<React.SetStateAction<PaginationState | undefined>>;
     applyPagination: () => void;
+    removePagination: () => void;
 };

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

@@ -10,12 +10,17 @@ var usePagination = (initialPaginationState) => {
 		...defaultPaginationState,
 		...initialPaginationState || {}
 	});
+	const applyPagination = React$1.useCallback(() => {
+		setIsPaginated(true);
+	}, []);
+	const wasInitiallyPaginated = React$1.useRef(!!initialPaginationState);
 	return {
 		isPaginated,
 		paginationState,
 		setPaginationState,
-		applyPagination: React$1.useCallback(() => {
-			setIsPaginated(true);
+		applyPagination,
+		removePagination: React$1.useCallback(() => {
+			setIsPaginated(wasInitiallyPaginated.current);
 		}, [])
 	};
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/data-table/usePagination.ts"],"sourcesContent":["import type { PaginationState } from '@tanstack/react-table'\nimport * as React from 'react'\n\nconst defaultPaginationState: PaginationState = { pageIndex: 0, pageSize: 10 }\nexport const usePagination = (\n // Initial pagination may be partial (e.g. just `pageSize`); defaults below\n // fill the rest, so the working `paginationState` stays a full PaginationState.\n initialPaginationState: Partial<PaginationState> \| undefined\n) => {\n const [isPaginated, setIsPaginated] = React.useState<boolean>(\n !!initialPaginationState\n )\n\n const [paginationState, setPaginationState] = React.useState<\n PaginationState \| undefined\n >({\n ...defaultPaginationState,\n ...(initialPaginationState \|\| {})\n })\n\n const applyPagination = React.useCallback(() => {\n setIsPaginated(true)\n }, [])\n\n return {\n isPaginated,\n paginationState,\n setPaginationState,\n applyPagination\n }\n}\n"],"mappings":";;AAGA,IAAM,yBAA0C;CAAE,WAAW;CAAG,UAAU;AAAG;AAC7E,IAAa,iBAGX,2BACG;CACH,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAC1C,CAAC,CAAC,sBACJ;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAElD;EACA,GAAG;EACH,GAAI,0BAA0B,CAAC;CACjC,CAAC;~~CAMD~~,OAAO;EACL;EACA;EACA;EACA,~~iBARsB~~,QAAM,kBAAkB;~~GAC9C~~,eAAe,~~IAAI~~;~~EACrB~~,GAAG,CAAC,~~CAMF~~;CACF;AACF"}
1	+ {"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/data-table/usePagination.ts"],"sourcesContent":["import type { PaginationState } from '@tanstack/react-table'\nimport * as React from 'react'\n\nconst defaultPaginationState: PaginationState = { pageIndex: 0, pageSize: 10 }\nexport const usePagination = (\n // Initial pagination may be partial (e.g. just `pageSize`); defaults below\n // fill the rest, so the working `paginationState` stays a full PaginationState.\n initialPaginationState: Partial<PaginationState> \| undefined\n) => {\n const [isPaginated, setIsPaginated] = React.useState<boolean>(\n !!initialPaginationState\n )\n\n const [paginationState, setPaginationState] = React.useState<\n PaginationState \| undefined\n >({\n ...defaultPaginationState,\n ...(initialPaginationState \|\| {})\n })\n\n const applyPagination = React.useCallback(() => {\n setIsPaginated(true)\n }, [])\n\n // Lets <Pagination> undo applyPagination when it unmounts, restoring\n // whatever the provider was configured with initially.\n const wasInitiallyPaginated = React.useRef(!!initialPaginationState)\n const removePagination = React.useCallback(() => {\n setIsPaginated(wasInitiallyPaginated.current)\n }, [])\n\n return {\n isPaginated,\n paginationState,\n setPaginationState,\n applyPagination,\n removePagination\n }\n}\n"],"mappings":";;AAGA,IAAM,yBAA0C;CAAE,WAAW;CAAG,UAAU;AAAG;AAC7E,IAAa,iBAGX,2BACG;CACH,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAC1C,CAAC,CAAC,sBACJ;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAElD;EACA,GAAG;EACH,GAAI,0BAA0B,CAAC;CACjC,CAAC;CAED,MAAM,kBAAkB,QAAM,kBAAkB;EAC9C,eAAe,IAAI;CACrB,GAAG,CAAC,CAAC;CAIL,MAAM,wBAAwB,QAAM,OAAO,CAAC,CAAC,sBAAsB;CAKnE,OAAO;EACL;EACA;EACA;EACA;EACA,kBATuB,QAAM,kBAAkB;GAC/C,eAAe,sBAAsB,OAAO;EAC9C,GAAG,CAAC,CAOF;CACF;AACF"}

package/dist/components/date-input/DateInput.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { DEFAULT_LABELS } from "../calendar/constants.js";
 import { Calendar } from "../calendar/Calendar.js";
 import { DEFAULT_DATE_FORMAT } from "./constants.js";
 import * as React$1 from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarEvent } from "@atom-learning/icons";
 import dayjs from "dayjs";
@@ -18,7 +19,7 @@ var formatDateToString = (date, dateFormat = DEFAULT_DATE_FORMAT) => date ? dayj
 var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...rest }) => {
 	const [date, setDate] = React$1.useState(initialDate ? dayjs(initialDate).toDate() : void 0);
 	const [inputElRef, setInputElRef] = useCallbackRefState();
-	React$1.useImperativeHandle(ref, () => inputElRef);
+	const composedInputRef = useComposedRefs(ref, setInputElRef);
 	const dateString = formatDateToString(date, dateFormat);
 	const handleInputChange = React$1.useCallback((event) => {
 		const newDateString = event.target.value;
@@ -44,7 +45,7 @@ var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayO
 	const [calendarOpen, setCalendarOpen] = React$1.useState(false);
 	const refDateToday = React$1.useRef(null);
 	const refDateSelected = React$1.useRef(null);
-	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
+	const iconSize = getFieldIconSize(size);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative h-max",
 		children: [/* @__PURE__ */ jsx(Input, {
@@ -55,7 +56,7 @@ var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayO
 			theme,
 			...rest,
 			onChange: handleInputChange,
-			ref: setInputElRef,
+			ref: composedInputRef,
 			defaultValue: dateString
 		}), /* @__PURE__ */ jsxs(Popover, {
 			modal: true,

package/dist/components/date-input/DateInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, type CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n CalendarTranslationProps & {\n initialDate?: Date\n dateFormat?: string\n disabled?: boolean\n size?: 'sm' \| 'md' \| 'lg'\n appearance?: 'standard' \| 'modern'\n theme?: 'white' \| 'grey'\n revalidate?: () => Promise<boolean>\n onChange?: (value?: Date) => void\n ref?: React.Ref<HTMLInputElement>\n }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = ({\n ref,\n initialDate,\n dateFormat = DEFAULT_DATE_FORMAT,\n firstDayOfWeek = 1,\n disabled,\n monthNames,\n weekdayNames,\n size = 'md',\n appearance,\n theme,\n labels,\n revalidate,\n onChange,\n minDate,\n maxDate,\n ...rest\n}: DateInputProps) => {\n const [date, setDate] = React.useState(\n initialDate ? dayjs(initialDate).toDate() : undefined\n )\n\n const [inputElRef, setInputElRef] = useCallbackRefState()\n ~~React.useImperativeHandle(ref,~~ () => ~~inputElRef~~ as ~~HTMLInputElement~~)\n\n const dateString = formatDateToString(date, dateFormat)\n\n const handleInputChange = React.useCallback(\n (event) => {\n const newDateString = event.target.value\n const parsedInputDate = dayjs(newDateString, dateFormat)\n const newDate = parsedInputDate.isValid()\n ? parsedInputDate.toDate()\n : undefined\n setDate(newDate)\n onChange?.(newDate)\n },\n [dateFormat, onChange]\n )\n\n const handleCalendarChange = React.useCallback(\n (newDate) => {\n setDate(newDate)\n\n const mirrorChangeToInputElement = () => {\n if (!inputElRef) return\n\n // Call the `set` function on the input value directly to mirror the change.\n // Props to: https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call(\n inputElRef,\n formatDateToString(newDate, dateFormat)\n )\n const event = new Event('input', { bubbles: true })\n inputElRef.dispatchEvent(event)\n }\n mirrorChangeToInputElement()\n },\n [dateFormat, inputElRef]\n )\n\n const updatedLabels = {\n ...DEFAULT_LABELS,\n ...labels\n }\n\n const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n const refDateToday = React.useRef<HTMLButtonElement>(null)\n const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n const iconSize = ~~React.useMemo(() =>~~ getFieldIconSize(size)~~, [size])~~\n\n return (\n <div className=\"relative h-max\">\n <Input\n name=\"date\"\n disabled={disabled}\n size={size}\n appearance={appearance}\n theme={theme}\n {...(rest as React.ComponentProps<typeof Input>)}\n onChange={handleInputChange}\n ref={~~setInputElRef~~}\n defaultValue={dateString}\n />\n <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n <Popover.Trigger asChild>\n <ActionIcon\n disabled={disabled}\n label={updatedLabels.open}\n size={iconSize}\n theme=\"neutral\"\n hasTooltip={false}\n className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n >\n <Icon is={CalendarEvent} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n side=\"bottom\"\n align=\"end\"\n showCloseButton={false}\n onOpenAutoFocus={(e) => {\n e.preventDefault()\n if (date) {\n refDateSelected.current?.focus()\n } else {\n refDateToday.current?.focus()\n }\n }}\n className=\"z-1147483646 pr-6\"\n >\n <Calendar\n date={date \|\| new Date()}\n selected={date}\n onDateSelected={async (date) => {\n setCalendarOpen(false)\n await handleCalendarChange(date.date)\n if (revalidate) revalidate()\n }}\n setYear={async (date) => {\n await handleCalendarChange(date)\n if (revalidate) revalidate()\n }}\n minDate={minDate}\n maxDate={maxDate}\n refDateToday={refDateToday}\n refDateSelected={refDateSelected}\n firstDayOfWeek={firstDayOfWeek}\n monthNames={monthNames}\n weekdayNames={weekdayNames}\n labels={updatedLabels}\n />\n </Popover.Content>\n </Popover.Portal>\n </Popover>\n </div>\n )\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;AAgBA~~,MAAM,OAAO,iBAAiB;AAe9B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,IAAI;AAE1C,IAAa,aAAa,EACxB,KACA,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,OACA,QACA,YACA,UACA,SACA,SACA,GAAG,WACiB;CACpB,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,WAAW,CAAC,CAAC,OAAO,IAAI,KAAA,CAC9C;CAEA,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,~~QAAM~~,~~oBAAoB~~,~~WAAW~~,~~UAA8B~~;~~CAEnE~~,MAAM,aAAa,mBAAmB,MAAM,UAAU;CAEtD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,UAAU;EACvD,MAAM,UAAU,gBAAgB,QAAQ,IACpC,gBAAgB,OAAO,IACvB,KAAA;EACJ,QAAQ,OAAO;EACf,WAAW,OAAO;CACpB,GACA,CAAC,YAAY,QAAQ,CACvB;CAEA,MAAM,uBAAuB,QAAM,aAChC,YAAY;EACX,QAAQ,OAAO;EAEf,MAAM,mCAAmC;GACvC,IAAI,CAAC,YAAY;GAQjB,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,KACtB,YACA,mBAAmB,SAAS,UAAU,CACxC;GACA,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;GAClD,WAAW,cAAc,KAAK;EAChC;EACA,2BAA2B;CAC7B,GACA,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,KAAK;CAE5D,MAAM,eAAe,QAAM,OAA0B,IAAI;CACzD,MAAM,kBAAkB,QAAM,OAA0B,IAAI;CAE5D,MAAM,WAAW,~~QAAM,cAAc,~~iBAAiB,IAAI~~,GAAG,CAAC,IAAI,CAAC~~;~~CAEnE~~,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAK;GACK;GACJ;GACM;GACL;GACP,GAAK;GACL,UAAU;GACV,KAAK;GACL,cAAc;EACf,CAAA,GACD,qBAAC,SAAD;GAAS,OAAA;GAAM,MAAM;GAAc,cAAc;aAAjD,CACE,oBAAC,QAAQ,SAAT;IAAiB,SAAA;cACf,oBAAC,YAAD;KACY;KACV,OAAO,cAAc;KACrB,MAAM;KACN,OAAM;KACN,YAAY;KACZ,WAAU;eAEV,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;IAChB,CAAA;GACG,CAAA,GACjB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IACE,MAAK;IACL,OAAM;IACN,iBAAiB;IACjB,kBAAkB,MAAM;KACtB,EAAE,eAAe;KACjB,IAAI,MACF,gBAAgB,SAAS,MAAM;UAE/B,aAAa,SAAS,MAAM;IAEhC;IACA,WAAU;cAEV,oBAAC,UAAD;KACE,MAAM,wBAAQ,IAAI,KAAK;KACvB,UAAU;KACV,gBAAgB,OAAO,SAAS;MAC9B,gBAAgB,KAAK;MACrB,MAAM,qBAAqB,KAAK,IAAI;MACpC,IAAI,YAAY,WAAW;KAC7B;KACA,SAAS,OAAO,SAAS;MACvB,MAAM,qBAAqB,IAAI;MAC/B,IAAI,YAAY,WAAW;KAC7B;KACS;KACA;KACK;KACG;KACD;KACJ;KACE;KACd,QAAQ;IACT,CAAA;GACc,CAAA,EACH,CAAA,CACT;IACN;;AAET"}
1	+ {"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, type CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n CalendarTranslationProps & {\n initialDate?: Date\n dateFormat?: string\n disabled?: boolean\n size?: 'sm' \| 'md' \| 'lg'\n appearance?: 'standard' \| 'modern'\n theme?: 'white' \| 'grey'\n revalidate?: () => Promise<boolean>\n onChange?: (value?: Date) => void\n ref?: React.Ref<HTMLInputElement>\n }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = ({\n ref,\n initialDate,\n dateFormat = DEFAULT_DATE_FORMAT,\n firstDayOfWeek = 1,\n disabled,\n monthNames,\n weekdayNames,\n size = 'md',\n appearance,\n theme,\n labels,\n revalidate,\n onChange,\n minDate,\n maxDate,\n ...rest\n}: DateInputProps) => {\n const [date, setDate] = React.useState(\n initialDate ? dayjs(initialDate).toDate() : undefined\n )\n\n const [inputElRef, setInputElRef] = useCallbackRefState()\n const composedInputRef = useComposedRefs(\n ref as React.Ref<HTMLElement>,\n setInputElRef\n )\n\n const dateString = formatDateToString(date, dateFormat)\n\n const handleInputChange = React.useCallback(\n (event) => {\n const newDateString = event.target.value\n const parsedInputDate = dayjs(newDateString, dateFormat)\n const newDate = parsedInputDate.isValid()\n ? parsedInputDate.toDate()\n : undefined\n setDate(newDate)\n onChange?.(newDate)\n },\n [dateFormat, onChange]\n )\n\n const handleCalendarChange = React.useCallback(\n (newDate) => {\n setDate(newDate)\n\n const mirrorChangeToInputElement = () => {\n if (!inputElRef) return\n\n // Call the `set` function on the input value directly to mirror the change.\n // Props to: https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call(\n inputElRef,\n formatDateToString(newDate, dateFormat)\n )\n const event = new Event('input', { bubbles: true })\n inputElRef.dispatchEvent(event)\n }\n mirrorChangeToInputElement()\n },\n [dateFormat, inputElRef]\n )\n\n const updatedLabels = {\n ...DEFAULT_LABELS,\n ...labels\n }\n\n const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n const refDateToday = React.useRef<HTMLButtonElement>(null)\n const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n const iconSize = getFieldIconSize(size)\n\n return (\n <div className=\"relative h-max\">\n <Input\n name=\"date\"\n disabled={disabled}\n size={size}\n appearance={appearance}\n theme={theme}\n {...(rest as React.ComponentProps<typeof Input>)}\n onChange={handleInputChange}\n ref={composedInputRef}\n defaultValue={dateString}\n />\n <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n <Popover.Trigger asChild>\n <ActionIcon\n disabled={disabled}\n label={updatedLabels.open}\n size={iconSize}\n theme=\"neutral\"\n hasTooltip={false}\n className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n >\n <Icon is={CalendarEvent} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n side=\"bottom\"\n align=\"end\"\n showCloseButton={false}\n onOpenAutoFocus={(e) => {\n e.preventDefault()\n if (date) {\n refDateSelected.current?.focus()\n } else {\n refDateToday.current?.focus()\n }\n }}\n className=\"z-1147483646 pr-6\"\n >\n <Calendar\n date={date \|\| new Date()}\n selected={date}\n onDateSelected={async (date) => {\n setCalendarOpen(false)\n await handleCalendarChange(date.date)\n if (revalidate) revalidate()\n }}\n setYear={async (date) => {\n await handleCalendarChange(date)\n if (revalidate) revalidate()\n }}\n minDate={minDate}\n maxDate={maxDate}\n refDateToday={refDateToday}\n refDateSelected={refDateSelected}\n firstDayOfWeek={firstDayOfWeek}\n monthNames={monthNames}\n weekdayNames={weekdayNames}\n labels={updatedLabels}\n />\n </Popover.Content>\n </Popover.Portal>\n </Popover>\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,iBAAiB;AAe9B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,IAAI;AAE1C,IAAa,aAAa,EACxB,KACA,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,OACA,QACA,YACA,UACA,SACA,SACA,GAAG,WACiB;CACpB,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,WAAW,CAAC,CAAC,OAAO,IAAI,KAAA,CAC9C;CAEA,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,aAAa,mBAAmB,MAAM,UAAU;CAEtD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,UAAU;EACvD,MAAM,UAAU,gBAAgB,QAAQ,IACpC,gBAAgB,OAAO,IACvB,KAAA;EACJ,QAAQ,OAAO;EACf,WAAW,OAAO;CACpB,GACA,CAAC,YAAY,QAAQ,CACvB;CAEA,MAAM,uBAAuB,QAAM,aAChC,YAAY;EACX,QAAQ,OAAO;EAEf,MAAM,mCAAmC;GACvC,IAAI,CAAC,YAAY;GAQjB,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,KACtB,YACA,mBAAmB,SAAS,UAAU,CACxC;GACA,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;GAClD,WAAW,cAAc,KAAK;EAChC;EACA,2BAA2B;CAC7B,GACA,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,KAAK;CAE5D,MAAM,eAAe,QAAM,OAA0B,IAAI;CACzD,MAAM,kBAAkB,QAAM,OAA0B,IAAI;CAE5D,MAAM,WAAW,iBAAiB,IAAI;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAK;GACK;GACJ;GACM;GACL;GACP,GAAK;GACL,UAAU;GACV,KAAK;GACL,cAAc;EACf,CAAA,GACD,qBAAC,SAAD;GAAS,OAAA;GAAM,MAAM;GAAc,cAAc;aAAjD,CACE,oBAAC,QAAQ,SAAT;IAAiB,SAAA;cACf,oBAAC,YAAD;KACY;KACV,OAAO,cAAc;KACrB,MAAM;KACN,OAAM;KACN,YAAY;KACZ,WAAU;eAEV,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;IAChB,CAAA;GACG,CAAA,GACjB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IACE,MAAK;IACL,OAAM;IACN,iBAAiB;IACjB,kBAAkB,MAAM;KACtB,EAAE,eAAe;KACjB,IAAI,MACF,gBAAgB,SAAS,MAAM;UAE/B,aAAa,SAAS,MAAM;IAEhC;IACA,WAAU;cAEV,oBAAC,UAAD;KACE,MAAM,wBAAQ,IAAI,KAAK;KACvB,UAAU;KACV,gBAAgB,OAAO,SAAS;MAC9B,gBAAgB,KAAK;MACrB,MAAM,qBAAqB,KAAK,IAAI;MACpC,IAAI,YAAY,WAAW;KAC7B;KACA,SAAS,OAAO,SAAS;MACvB,MAAM,qBAAqB,IAAI;MAC/B,IAAI,YAAY,WAAW;KAC7B;KACS;KACA;KACK;KACG;KACD;KACJ;KACE;KACd,QAAQ;IACT,CAAA;GACc,CAAA,EACH,CAAA,CACT;IACN;;AAET"}