npm - @atom-learning/components - Versions diffs - 5.14.0 → 6.0.0-beta.0 - Mend

@atom-learning/components 5.14.0 → 6.0.0-beta.0

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

Files changed (1010) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableEmptyState.js","sources":["../../../src/components/data-table/DataTableEmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { EmptyState } from '../empty-state'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>\n\nexport const DataTableEmptyState = ({\n children,\n ...rest\n}: DataTableEmptyStateProps) => {\n const { asyncDataState, getTotalRows } = useDataTable()\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n if (!isEmpty) return null\n\n return <EmptyState {...rest}>{children}</EmptyState>\n}\n"],"names":["DataTableEmptyState","children","rest","asyncDataState","getTotalRows","useDataTable","AsyncDataState","React","EmptyState"],"mappings":"mMAQaA,EAAsB,CAAC,CAClC,SAAAC,~~KACGC~~,CACL,IAAgC,CAC9B,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,~~EAKzC~~,~~EAAA~~,OAHkBF,IAAmBG,EAAe,SACtBF,~~MAAmB~~,EAI1CG,EAAA,cAACC,EAAA,CAAY,GAAGN,CAAAA,EAAOD,CAAS,EAFlB,IAGvB"}
1	+ {"version":3,"file":"DataTableEmptyState.js","sources":["../../../src/components/data-table/DataTableEmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { EmptyState } from '../empty-state'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>\n\nexport const DataTableEmptyState = ({\n children,\n ...rest\n}: DataTableEmptyStateProps) => {\n const { asyncDataState, getTotalRows } = useDataTable()\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n if (!isEmpty) return null\n\n return <EmptyState {...rest}>{children}</EmptyState>\n}\n"],"names":["DataTableEmptyState","children","rest","asyncDataState","getTotalRows","useDataTable","AsyncDataState","React","EmptyState"],"mappings":"mMAQaA,EAAsB,CAAC,CAClC,SAAAC,EACA,GAAGC,CACL,IAAgC,CAC9B,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAKtD,OAHkBF,IAAmBG,EAAe,SACtBF,EAAa,IAAM,EAI1CG,EAAA,cAACC,EAAA,CAAY,GAAGN,CAAAA,EAAOD,CAAS,EAFlB,IAGvB"}

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{debounce as f}from"throttle-debounce";import{OptionalVisuallyHiddenWrapper as d}from"../../utilities/optional-visually-hidden-wrapper/OptionalVisuallyHiddenWrapper.js";import{Label as g}from"../label/Label.js";import{SearchInput as h}from"../search-input/SearchInput.js";import{AsyncDataState as D}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";const F=({onChange:a,label:t,hideLabel:r=!1,...n})=>{const{setGlobalFilter:o,getState:m,resetPagination:i,getTotalRows:s,asyncDataState:c}=E(),{globalFilter:p}=m();if(c!==D.PENDING&&s()===0)return null;const u=f(250,l=>{const{target:{value:b}}=l;a==null||a(l),i(),o(b)});return e.createElement(e.Fragment,null,e.createElement(d,{hidden:r},e.createElement(g,{css:{mb:"$3"},htmlFor:t},t)),e.createElement(h,{...n,defaultValue:p,onChange:u,name:t}))};export{F as DataTableGlobalFilter};
+import*as e from"react";import{debounce as f}from"throttle-debounce";import{OptionalVisuallyHiddenWrapper as d}from"../../utilities/optional-visually-hidden-wrapper/OptionalVisuallyHiddenWrapper.js";import{Label as g}from"../label/Label.js";import{SearchInput as h}from"../search-input/SearchInput.js";import{AsyncDataState as D}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";const F=({onChange:a,label:t,hideLabel:r=!1,...n})=>{const{setGlobalFilter:o,getState:m,resetPagination:i,getTotalRows:s,asyncDataState:c}=E(),{globalFilter:p}=m();if(c!==D.PENDING&&s()===0)return null;const u=f(250,l=>{const{target:{value:b}}=l;a==null||a(l),i(),o(b)});return e.createElement(e.Fragment,null,e.createElement(d,{hidden:r},e.createElement(g,{htmlFor:t,className:"mb-3"},t)),e.createElement(h,{...n,defaultValue:p,onChange:u,name:t}))};export{F as DataTableGlobalFilter};
 //# sourceMappingURL=DataTableGlobalFilter.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableGlobalFilter.js","sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { OptionalVisuallyHiddenWrapper } from '../../utilities/optional-visually-hidden-wrapper'\nimport { Label } from '../label'\nimport { SearchInput } from '../search-input'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n label: string\n hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n onChange,\n label,\n hideLabel = false,\n ...props\n}: DataTableSearchProps) => {\n const {\n setGlobalFilter,\n getState,\n resetPagination,\n getTotalRows,\n asyncDataState\n } = useDataTable()\n const { globalFilter } = getState()\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n if (isEmpty) return null\n\n const handleChange = debounce(250, (event) => {\n const {\n target: { value }\n } = event\n\n onChange?.(event)\n resetPagination()\n setGlobalFilter(value)\n })\n\n return (\n <>\n <OptionalVisuallyHiddenWrapper hidden={hideLabel}>\n <Label ~~css~~={{ mb~~: '$~~3~~' }} htmlFor={label}~~>\n {label}\n </Label>\n </OptionalVisuallyHiddenWrapper>\n <SearchInput\n {...props}\n defaultValue={globalFilter}\n onChange={handleChange}\n name={label}\n />\n </>\n )\n}\n"],"names":["DataTableGlobalFilter","onChange","label","hideLabel","props","setGlobalFilter","getState","resetPagination","getTotalRows","asyncDataState","useDataTable","globalFilter","AsyncDataState","handleChange","debounce","event","value","React","OptionalVisuallyHiddenWrapper","Label","SearchInput"],"mappings":"yZAaO,MAAMA,EAAwB,CAAC,CACpC,SAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,~~MACTC~~,CACL,IAA4B,CAC1B,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,~~EAAa~~,~~EACX~~,CAAE,aAAAC,CAAa,EAAIL,~~EAAAA,~~EAKzB,GAHkBG,IAAmBG,EAAe,SACtBJ,~~EAAAA~~,~~IAAmB~~,EAEpC,OAAO,KAEpB,MAAMK,EAAeC,EAAS,IAAMC,GAAU,CAC5C,KAAM,CACJ,OAAQ,CAAE,MAAAC,CAAM,CAClB,EAAID,EAEJd,GAAA,MAAAA,EAAWc,CAAAA,EACXR,IACAF,EAAgBW,CAAK,CACvB,CAAC,EAED,OACEC,EAAA,cAAAA,EAAA,~~SAAA~~,~~KACEA~~,EAAA,cAACC,EAAA,CAA8B,OAAQf,~~CAAAA~~,~~EACrCc~~,EAAA,cAACE,EAAA,CAAM,~~IAAK~~,~~CAAE~~,~~GAAI~~,~~IAAK~~,~~EAAG~~,~~QAASjB,CAAAA,EAChCA,~~CACH,CACF,EACAe,EAAA,cAACG,EAAA,CACE,GAAGhB,EACJ,aAAcO,EACd,SAAUE,EACV,KAAMX,CAAAA,CACR,CACF,CAEJ"}
1	+ {"version":3,"file":"DataTableGlobalFilter.js","sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { OptionalVisuallyHiddenWrapper } from '../../utilities/optional-visually-hidden-wrapper'\nimport { Label } from '../label'\nimport { SearchInput } from '../search-input'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n label: string\n hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n onChange,\n label,\n hideLabel = false,\n ...props\n}: DataTableSearchProps) => {\n const {\n setGlobalFilter,\n getState,\n resetPagination,\n getTotalRows,\n asyncDataState\n } = useDataTable()\n const { globalFilter } = getState()\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n if (isEmpty) return null\n\n const handleChange = debounce(250, (event) => {\n const {\n target: { value }\n } = event\n\n onChange?.(event)\n resetPagination()\n setGlobalFilter(value)\n })\n\n return (\n <>\n <OptionalVisuallyHiddenWrapper hidden={hideLabel}>\n <Label htmlFor={label} className=\"mb-3\">\n {label}\n </Label>\n </OptionalVisuallyHiddenWrapper>\n <SearchInput\n {...props}\n defaultValue={globalFilter}\n onChange={handleChange}\n name={label}\n />\n </>\n )\n}\n"],"names":["DataTableGlobalFilter","onChange","label","hideLabel","props","setGlobalFilter","getState","resetPagination","getTotalRows","asyncDataState","useDataTable","globalFilter","AsyncDataState","handleChange","debounce","event","value","React","OptionalVisuallyHiddenWrapper","Label","SearchInput"],"mappings":"yZAaO,MAAMA,EAAwB,CAAC,CACpC,SAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,IAA4B,CAC1B,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,EACE,EAAA,CAAE,aAAAC,CAAa,EAAIL,EAKzB,EAAA,GAHkBG,IAAmBG,EAAe,SACtBJ,EAAmB,IAAA,EAEpC,OAAO,KAEpB,MAAMK,EAAeC,EAAS,IAAMC,GAAU,CAC5C,KAAM,CACJ,OAAQ,CAAE,MAAAC,CAAM,CAClB,EAAID,EAEJd,GAAA,MAAAA,EAAWc,CAAAA,EACXR,IACAF,EAAgBW,CAAK,CACvB,CAAC,EAED,OACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,CAA8B,OAAQf,CACrCc,EAAAA,EAAA,cAACE,EAAA,CAAM,QAASjB,EAAO,UAAU,MAAA,EAC9BA,CACH,CACF,EACAe,EAAA,cAACG,EAAA,CACE,GAAGhB,EACJ,aAAcO,EACd,SAAUE,EACV,KAAMX,CAAAA,CACR,CACF,CAEJ"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * ~~as React~~ from '~~react~~'\n\nimport { ~~CSS~~ } from '~~~/stitches~~'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n React.ComponentProps<typeof Table.Header>,\n 'children'\n> & {\n sortable?: boolean\n isSticky?: boolean\n stickyOffset?: number\n showTotalInFirstColumn?: boolean\n totalSuffix?: string\n ~~headerCss?: CSS\n~~}\n\nexport const DataTableHead = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n stickyOffset = 0,\n showTotalInFirstColumn,\n totalSuffix,\n style,\n ~~css~~,\n ...props\n}: DataTableHeadProps): React.ReactElement => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand,\n tablePosition,\n setTablePosition\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n const tableRef = React.useRef<HTMLTableElement \| null>(null)\n const headerOffsetRef = React.useRef(0)\n\n const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n if (tableHeadElement && tablePosition?.offsetTop === null) {\n const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n const intersectionOffset = stickyOffset + tableHeadHeight\n if (tablePosition) {\n setTablePosition({ ...tablePosition, offsetTop: intersectionOffset \|\| 0 })\n }\n }\n\n React.useEffect(() => {\n if (!isSticky) return\n\n if (!tableRef.current && tableHeaderRowRef.current) {\n tableRef.current = tableHeaderRowRef.current.closest(\n 'table'\n ) as HTMLTableElement \| null\n }\n\n if (tableRef.current) {\n if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n const newOffset =\n tablePosition?.top != null &&\n tablePosition?.bottom != null &&\n tablePosition.top < stickyOffset &&\n tablePosition.bottom > 100\n ? -tablePosition.top + stickyOffset\n : 0\n\n if (newOffset !== 0) setHeaderHide(true)\n\n headerOffsetRef.current = newOffset\n setHeaderOffset(newOffset)\n\n requestAnimationFrame(() => {\n setHeaderHide(false)\n })\n }\n }\n }, [isSticky, stickyOffset, tablePosition])\n\n return (\n <Table.Header\n theme={theme}\n style={{\n ...style,\n '--header-offset': `${headerOffset}px`\n }}\n ~~css~~={{\n ~~position:~~ 'relative',\n ~~zIndex:~~ 3,\n '& tr:not(:last-child) > th': ~~{\n borderBottom: '~~none'~~\n }~~,\n '& tr:not(:first-child) > th': ~~{\n borderRadius: '0~~ !~~important~~'~~\n }~~,\n ~~...css~~\n }}\n ~~{...props}\n~~ >\n {getHeaderGroups().map((headerGroup) => {\n return (\n <Table.Row\n key={headerGroup.id}\n ref={tableHeaderRowRef}\n ~~css~~={{\n ~~...(~~isSticky &&\n headerOffset !== 0 && {\n ~~transform: `translateY~~(~~var(~~--header-offset)~~)`,\~~n ~~opacity:~~ ~~headerHide ? 0 : 1~~,\n transition: ~~headerHide ?~~ '~~none~~' ~~: `opacity 100ms`,\~~n ~~transitionDelay~~: ~~headerHide ?~~ '~~0ms~~' : ~~`150ms`,\~~n '& th:last~~-child~~:before': {\~~n content:~~ '',\n ~~position~~: '~~absolute'~~,\n ~~right~~: ~~0,\n top~~: ~~0,\n bottom~~: 0,\n ~~width~~: '~~100%'~~,\n ~~boxShadow~~: '$0',\n ~~pointerEvents~~: '~~none'~~\n }\n ~~})\n~~ }}\n >\n {getCanSomeRowsExpand() && ~~(\n~~ <Table.HeaderCell ~~css={{~~ ~~width: '$4'~~ }~~} />\n )}~~\n {enableRowSelection && (\n <Table.HeaderCell ~~css={{ width: '$4' }}~~>\n <DataTableSelectAllRowsCheckbox />\n </Table.HeaderCell>\n )}\n {headerGroup.headers.map((header, index) => (\n <DataTable.HeaderCell\n header={header}\n key={header.id}\n includeTotal={index === 0 && showTotalInFirstColumn}\n totalSuffix={totalSuffix}\n />\n ))}\n </Table.Row>\n )\n })}\n </Table.Header>\n )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","showTotalInFirstColumn","totalSuffix","style","~~css~~","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","index","DataTable"],"mappings":"~~uPAoBa~~,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,uBAAAC,EACA,YAAAC,EACA,MAAAC,EACA,~~IAAAC~~,~~KACGC~~,CACL,IAA8C,~~CA9B9C~~,IAAAC,~~EA+BE~~,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,~~IAEJC~~,EAAM,UAAU,IAAM,CACpBN,EAAcX,CAAQ,CACxB,EAAG,CAACA,EAAUW,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,~~YAAAA~~,EAAmB,UAAnB,~~YAAAT~~,EAA4B,QAAQ,~~SAE7D~~,GAAIgB,IAAoBX,GAAA,~~KAAAA~~,~~OAAAA,~~EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,~~sBAAwB~~,~~EAAA~~,OAC3DE,EAAqBxB,EAAeuB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,~~GAAI~~,~~CAAA,CAACf,~~IAED,CAACiB,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,~~KAAAA~~,OAAAA,EAAe,OAAQ,OAAQA,GAAA,~~YAAAA~~,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,KAAA,OAAAA,EAAe,MAAO,OACtBA,GAAA,KAAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMX,GACpBW,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMX,EACrB,EAEFyB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACtB,EAAUC,EAAcW,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAO5B,EACP,MAAO,CACL,GAAGK,EACH,kBAAmB,~~GAAGe~~,~~KACxB~~,~~EACA~~,~~IAAK~~,~~CACH~~,~~SAAU~~,~~WACV~~,~~OAAQ~~,~~EACR~~,~~6BAA8B~~,~~CAC5B~~,~~aAAc~~,~~MAChB~~,~~EACA~~,~~8BAA+B~~,~~CAC7B~~,~~aAAc~~,~~cAChB,EACA,GAAGd,CACL,EACC,GAAGC,CAEHE,EAAAA,~~IAAkB,~~IAAKoB~~,~~GAEpBb~~,EAAA,cAACY,EAAM,IAAN,CACC,~~IAAKC~~,EAAY,GACjB,~~IAAKZ~~,EACL,~~IAAK~~,~~CACH~~,~~GAAIhB,GACFmB,~~IAAiB,GAAK,CACpB,~~UAAW~~,~~mCACX~~,~~QAASE~~,~~EAAa~~,~~EAAI~~,~~EAC1B~~,~~WAAYA~~,~~EAAa~~,~~OAAS~~,~~gBAClC~~,~~gBAAiBA~~,~~EAAa~~,~~MAAQ~~,~~QACtC~~,~~yBAA0B,CACxB,QAAS,GACT,SAAU,WACV,MAAO,EACP,IAAK,EACL,OAAQ,EACR,MAAO,OACP,UAAW,KACX,cAAe,MACjB,CACF,CACJ,CAECV,EAAAA,EAAAA,GACCI,~~EAAA,cAACY,EAAM,WAAN,CAAiB,~~IAAK~~,~~CAAE~~,~~MAAO~~,~~IAAK~~,~~CAAG,CAAA,EAEzCjB,~~GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,~~IAAK~~,~~CAAE~~,~~MAAO,IAAK,CACnCZ,~~EAAAA,EAAA,~~cAACc~~,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAI,CAACE,EAAQC,~~IAChChB~~,EAAA,~~cAACiB~~,EAAU,WAAV,CACC,OAAQF,EACR,IAAKA,EAAO,GACZ,aAAcC,IAAU,~~GAAK7B~~,EAC7B,YAAaC,CAAAA,CACf,CACD,CACH,CAEH,CACH,CAEJ"}
1	+ {"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n React.ComponentProps<typeof Table.Header>,\n 'children'\n> & {\n sortable?: boolean\n isSticky?: boolean\n stickyOffset?: number\n showTotalInFirstColumn?: boolean\n totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n stickyOffset = 0,\n showTotalInFirstColumn,\n totalSuffix,\n style,\n className,\n ...props\n}: DataTableHeadProps): React.ReactElement => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand,\n tablePosition,\n setTablePosition\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n const tableRef = React.useRef<HTMLTableElement \| null>(null)\n const headerOffsetRef = React.useRef(0)\n\n const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n if (tableHeadElement && tablePosition?.offsetTop === null) {\n const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n const intersectionOffset = stickyOffset + tableHeadHeight\n if (tablePosition) {\n setTablePosition({ ...tablePosition, offsetTop: intersectionOffset \|\| 0 })\n }\n }\n\n React.useEffect(() => {\n if (!isSticky) return\n\n if (!tableRef.current && tableHeaderRowRef.current) {\n tableRef.current = tableHeaderRowRef.current.closest(\n 'table'\n ) as HTMLTableElement \| null\n }\n\n if (tableRef.current) {\n if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n const newOffset =\n tablePosition?.top != null &&\n tablePosition?.bottom != null &&\n tablePosition.top < stickyOffset &&\n tablePosition.bottom > 100\n ? -tablePosition.top + stickyOffset\n : 0\n\n if (newOffset !== 0) setHeaderHide(true)\n\n headerOffsetRef.current = newOffset\n setHeaderOffset(newOffset)\n\n requestAnimationFrame(() => {\n setHeaderHide(false)\n })\n }\n }\n }, [isSticky, stickyOffset, tablePosition])\n\n return (\n <Table.Header\n theme={theme}\n style={{\n ...style,\n '--header-offset': `${headerOffset}px`\n }}\n {...props}\n className={clsx(\n 'relative',\n 'z-3',\n '[&_tr:not(:last-child)>th]:border-b-none',\n '[&_tr:not(:first-child)>th]:rounded-none!',\n className\n )}\n >\n {getHeaderGroups().map((headerGroup) => {\n return (\n <Table.Row\n key={headerGroup.id}\n ref={tableHeaderRowRef}\n className={\n isSticky &&\n headerOffset !== 0 && [\n 'translate-y-(--header-offset)',\n '[object Object]',\n 'transition-[[object Object]]',\n '[object Object]',\n '[&_th]:last:before:absolute',\n '[&_th]:last:before:bottom-0',\n '[&_th]:last:before:content-[\"\"]',\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 }\n >\n {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n {enableRowSelection && (\n <Table.HeaderCell className=\"w-10\">\n <DataTableSelectAllRowsCheckbox />\n </Table.HeaderCell>\n )}\n {headerGroup.headers.map((header, index) => (\n <DataTable.HeaderCell\n header={header}\n key={header.id}\n includeTotal={index === 0 && showTotalInFirstColumn}\n totalSuffix={totalSuffix}\n />\n ))}\n </Table.Row>\n )\n })}\n </Table.Header>\n )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","showTotalInFirstColumn","totalSuffix","style","className","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","clsx","headerGroup","DataTableSelectAllRowsCheckbox","header","index","DataTable"],"mappings":"2QAkBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,uBAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA8C,CA5B9C,IAAAC,EA6BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,EAEJC,EAAAA,EAAM,UAAU,IAAM,CACpBN,EAAcX,CAAQ,CACxB,EAAG,CAACA,EAAUW,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,KAAAA,OAAAA,EAAmB,UAAnB,KAAA,OAAAT,EAA4B,QAAQ,OAAA,EAE7D,GAAIgB,IAAoBX,GAAA,YAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,sBAAsB,EAAE,OAC3DE,EAAqBxB,EAAeuB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAKf,IAED,CAACiB,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,KAAA,OAAAA,EAAe,OAAQ,OAAQA,GAAA,KAAA,OAAAA,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,KAAA,OAAAA,EAAe,MAAO,OACtBA,GAAA,KAAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMX,GACpBW,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMX,EACrB,EAEFyB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACtB,EAAUC,EAAcW,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAO5B,EACP,MAAO,CACL,GAAGK,EACH,kBAAmB,GAAG,OAAAe,EAAY,IAAA,CACpC,EACC,GAAGb,EACJ,UAAWsB,EACT,WACA,MACA,2CACA,4CACAvB,CACF,CAAA,EAECG,IAAkB,IAAKqB,GAEpBd,EAAA,cAACY,EAAM,IAAN,CACC,IAAKE,EAAY,GACjB,IAAKb,EACL,UACEhB,GACAmB,IAAiB,GAAK,CACpB,gCACA,kBACA,+BACA,kBACA,8BACA,8BACA,kCACA,yCACA,6BACA,+BACA,2BACA,2BACF,CAAA,EAGDR,EAA0BI,GAAAA,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAAA,CAAO,EAC7DjB,GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAC1BZ,EAAAA,EAAA,cAACe,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAI,CAACE,EAAQC,IAChCjB,EAAA,cAACkB,EAAU,WAAV,CACC,OAAQF,EACR,IAAKA,EAAO,GACZ,aAAcC,IAAU,GAAK9B,EAC7B,YAAaC,CAAAA,CACf,CACD,CACH,CAEH,CACH,CAEJ"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport { ~~styled~~ } from '@~~atom-learning~~/~~stitches~~-~~react~~'\nimport ~~type~~ { ~~Header~~ } from '@tanstack/react-table'\nimport { ~~flexRender }~~ from '~~@tanstack/react-table~~'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { Text } from '../text'\nimport { useDataTable } from './DataTableContext'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n header: Header<Record<string, unknown>, unknown>\n includeTotal?: boolean\n totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n ~~color~~: '~~$grey600~~'~~,\n whiteSpace:~~ 'nowrap'~~,\n display:~~ '~~none~~'~~,\n~~ '~~@media (~~min-~~width:~~ 800px)': ~~{\n display: '~~block'\n }~~\n}~~)\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n variants: {\n isSortable: {\n true: {\n ~~cursor:~~ '~~pointer~~',\n ~~position~~: '~~relative'~~,\n '& > *'~~: {~~\~~n position~~: '~~relative~~'\~~n }~~,\n '&:before': ~~{\n content:~~ '',\n ~~position~~: '~~absolute'~~,\n inset: 0,\n opacity: 0,\n ~~backgroundColor~~: '~~$primary100'~~,\n ~~transition:~~ '~~opacity 200ms ease~~'~~\n }~~,\n '&:hover': ~~{\n '&::~~before': ~~{\n~~ opacity~~: 0.5\~~n ~~}\n~~ }\n }\n }\n }\n})\n\nconst sortIcons = {\n asc: ArrowUp,\n desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' \| 'desc' }) => (\n <Icon\n is={sortIcons[direction]}\n size=\"sm\"\n ~~css={{~~ ~~position: '~~absolute', left~~: '$~~1~~', stroke: '$primary900' }}~~\n />\n)\n\nexport const DataTableHeaderCell = ({\n header,\n includeTotal = false,\n totalSuffix = 'items',\n children,\n ~~css~~,\n ...props\n}: DataTableHeaderProps) => {\n const sortDirection = header.column.getIsSorted()\n const { isSortable: isSortableTable, getRowModel } = useDataTable()\n // false for display columns, e.g. \"Actions\"\n const isDataColumn = header.column.getCanSort()\n\n const totalRows = getRowModel()?.rows?.length\n\n const { hoverProps, isHovered } = useHover({})\n\n const handleKeyDown = (\n event: React.KeyboardEvent<HTMLTableCellElement>,\n callback: (event: unknown) => void \| undefined\n ) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault()\n callback(event as unknown)\n }\n }\n\n const headerSortingHandler = header.column.getToggleSortingHandler()\n\n return (\n <StyledTableHeaderCell\n isSortable={isSortableTable && isDataColumn}\n colSpan={header.colSpan}\n onClick={\n isSortableTable && isDataColumn && headerSortingHandler\n ? headerSortingHandler\n : undefined\n }\n onKeyDown={(event) =>\n isSortableTable &&\n isDataColumn &&\n headerSortingHandler &&\n handleKeyDown(event, headerSortingHandler)\n }\n tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n {...hoverProps}\n ~~css~~={~~css~~}\n {...props}\n >\n <Flex\n align=\"center\"\n gap={1}\n justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {sortDirection && isSortableTable && (\n <Flex\n align=\"center\"\n ~~css~~={{\n ~~position:~~ 'relative',\n ~~width:~~ '~~24px~~',\n ~~height:~~ '~~24px',\n~~ ml~~: '$~~2',\n ~~bg:~~ isHovered ? '~~$primary200~~' : '~~$primary100~~',\n ~~borderRadius:~~ '$0'\n }}\n >\n <SortIcon direction={sortDirection} />\n </Flex>\n )}\n {includeTotal && (\n <StyledCount size=\"sm\" weight=\"normal\">\n ({totalRows} {totalSuffix})\n </StyledCount>\n )}\n </Flex>\n </StyledTableHeaderCell>\n )\n}\n"],"names":["StyledCount","styled","Text","StyledTableHeaderCell","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","includeTotal","totalSuffix","children","~~css~~","props","_a","_b","sortDirection","isSortableTable","getRowModel","useDataTable","isDataColumn","totalRows","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender"],"mappings":"~~0bAkBA~~,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,~~MAAO~~,~~WACP~~,~~WAAY~~,~~SACZ~~,~~QAAS~~,~~OACT~~,~~4BAA6B~~,~~CAC3B,QAAS,OACX,CACF,~~CAAC,EAEKC,EAAwBF,EAAOG,EAAM,WAAY,CACrD,~~SAAU,CACR,WAAY,CACV,~~KAAM,~~CACJ~~,~~OAAQ~~,~~UACR,~~SAAU,~~WACV~~,~~QAAS,CACP,SAAU,UACZ,EACA,~~WAAY,CACV,~~QAAS~~,~~GACT~~,~~SAAU~~,~~WACV~~,~~MAAO~~,~~EACP~~,~~QAAS~~,~~EACT~~,~~gBAAiB~~,~~cACjB~~,~~WAAY~~,~~oBACd~~,~~EACA~~,~~UAAW~~,~~CACT,YAAa,CACX,QAAS,EACX,~~CACF,CACF,CACF,~~CACF,CACF,~~CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,~~GACd~~,KAAK,KACL,~~IAAK~~,~~CAAE~~,~~SAAU~~,~~WAAY,KAAM,KAAM,OAAQ,aAAc,EACjE,~~EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,aAAAC,EAAe,GACf,YAAAC,EAAc,QACd,SAAAC,EACA,~~IAAAC~~,~~KACGC~~,CACL,IAA4B,~~CA1E5B~~,IAAAC,EAAAC,~~EA2EE~~,MAAMC,EAAgBR,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYS,EAAiB,YAAAC,CAAY,EAAIC,~~IAE/CC~~,EAAeZ,EAAO,OAAO,~~aAE7Ba~~,GAAYN,GAAAD,EAAAI,~~EAAY~~,~~IAAZ~~,~~YAAAJ~~,EAAe,OAAf,~~KAAAC~~,~~OAAAA~~,EAAqB,OAEjC,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAA,~~CAAE,~~EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,~~eAAA~~,~~EACNC~~,EAASD,CAAgB,EAE7B,EAEME,EAAuBpB,EAAO,OAAO,wBAAwB,EAEnE,OACEH,EAAA,cAACP,EAAA,CACC,WAAYmB,GAAmBG,EAC/B,QAASZ,EAAO,QAChB,QACES,GAAmBG,GAAgBQ,EAC/BA,EACA,OAEN,UAAYF,GACVT,GACAG,GACAQ,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUX,GAAmBG,EAAe,EAAI,GAC/C,GAAGE,EACJ,~~IAAKV~~,~~EACJ~~,GAAGC,~~CAAAA~~,~~EAEJR~~,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,EACL,QAASrB,EAAO,QAAU,EAAI,SAAW,~~cAExCsB~~,EAAWtB,EAAO,OAAO,UAAU,OAAQA,EAAO,~~WAAA~~,~~CAAY~~,EAC9DQ,GAAiBC,GAChBZ,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,~~IAAK~~,~~CACH~~,~~SAAU~~,~~WACV~~,~~MAAO~~,~~OACP,OAAQ,OACR,GAAI,KACJ,GAAIN,~~EAAY,~~cAAgB~~,~~cAChC~~,~~aAAc~~,~~IAChB~~,~~GAEAlB~~,EAAA,cAACF,EAAA,CAAS,UAAWa,CAAe,~~CAAA,~~CACtC,EAEDP,GACCJ,EAAA,cAACV,EAAA,CAAY,KAAK,KAAK,OAAO,~~QAAA~~,~~EAAS~~,IACnC0B,EAAU,IAAEX,EAAY,GAC5B,CAEJ,CACF,CAEJ"}
1	+ {"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { Text } from '../text'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n header: Header<Record<string, unknown>, unknown>\n includeTotal?: boolean\n totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n base: [],\n variants: {\n isSortable: {\n true: [\n '*:relative',\n 'before:absolute',\n 'before:bg-primary-100',\n \"before:content-['']\",\n 'before:duration-200',\n 'before:ease-in',\n 'before:inset-0',\n 'before:opacity-0',\n 'before:transition-opacity',\n 'cursor-pointer',\n 'hover:before:opacity-50',\n 'relative'\n ]\n }\n }\n})\n\nconst sortIcons = {\n asc: ArrowUp,\n desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' \| 'desc' }) => (\n <Icon\n is={sortIcons[direction]}\n size=\"sm\"\n className=\"stroke-primary-900 absolute left-1\"\n />\n)\n\nexport const DataTableHeaderCell = ({\n header,\n includeTotal = false,\n totalSuffix = 'items',\n children,\n className,\n ...props\n}: DataTableHeaderProps) => {\n const sortDirection = header.column.getIsSorted()\n const { isSortable: isSortableTable, getRowModel } = useDataTable()\n // false for display columns, e.g. \"Actions\"\n const isDataColumn = header.column.getCanSort()\n\n const totalRows = getRowModel()?.rows?.length\n\n const { hoverProps, isHovered } = useHover({})\n\n const handleKeyDown = (\n event: React.KeyboardEvent<HTMLTableCellElement>,\n callback: (event: unknown) => void \| undefined\n ) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault()\n callback(event as unknown)\n }\n }\n\n const headerSortingHandler = header.column.getToggleSortingHandler()\n\n return (\n <StyledTableHeaderCell\n isSortable={isSortableTable && isDataColumn}\n colSpan={header.colSpan}\n onClick={\n isSortableTable && isDataColumn && headerSortingHandler\n ? headerSortingHandler\n : undefined\n }\n onKeyDown={(event) =>\n isSortableTable &&\n isDataColumn &&\n headerSortingHandler &&\n handleKeyDown(event, headerSortingHandler)\n }\n tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n {...hoverProps}\n className={className}\n {...props}\n >\n <Flex\n align=\"center\"\n gap={1}\n justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {sortDirection && isSortableTable && (\n <Flex\n align=\"center\"\n className={clsx(\n 'relative',\n 'size-6',\n 'ml-2',\n isHovered ? 'bg-primary-200' : 'bg-primary-100',\n 'rounded-sm'\n )}\n >\n <SortIcon direction={sortDirection} />\n </Flex>\n )}\n {includeTotal && (\n <StyledCount size=\"sm\" weight=\"normal\">\n ({totalRows} {totalSuffix})\n </StyledCount>\n )}\n </Flex>\n </StyledTableHeaderCell>\n )\n}\n"],"names":["StyledCount","styled","Text","StyledTableHeaderCell","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","includeTotal","totalSuffix","children","className","props","_a","_b","sortDirection","isSortableTable","getRowModel","useDataTable","isDataColumn","totalRows","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender","clsx"],"mappings":"gcAqBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,KAAM,CAAC,gBAAiB,oBAAqB,SAAU,mBAAmB,CAC5E,CAAC,EAEKC,EAAwBF,EAAOG,EAAM,WAAY,CACrD,KAAM,CACN,EAAA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,aACA,kBACA,wBACA,sBACA,sBACA,iBACA,iBACA,mBACA,4BACA,iBACA,0BACA,UACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,CAAS,EACvB,KAAK,KACL,UAAU,oCACZ,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,aAAAC,EAAe,GACf,YAAAC,EAAc,QACd,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA4B,CAnE5B,IAAAC,EAAAC,EAoEE,MAAMC,EAAgBR,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYS,EAAiB,YAAAC,CAAY,EAAIC,EAAa,EAE5DC,EAAeZ,EAAO,OAAO,WAE7Ba,EAAAA,GAAYN,GAAAD,EAAAI,EAAA,IAAA,KAAA,OAAAJ,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjC,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAE,CAAA,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAASD,CAAgB,EAE7B,EAEME,EAAuBpB,EAAO,OAAO,wBAAwB,EAEnE,OACEH,EAAA,cAACP,EAAA,CACC,WAAYmB,GAAmBG,EAC/B,QAASZ,EAAO,QAChB,QACES,GAAmBG,GAAgBQ,EAC/BA,EACA,OAEN,UAAYF,GACVT,GACAG,GACAQ,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUX,GAAmBG,EAAe,EAAI,GAC/C,GAAGE,EACJ,UAAWV,EACV,GAAGC,CAEJR,EAAAA,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,EACL,QAASrB,EAAO,QAAU,EAAI,SAAW,YAExCsB,EAAAA,EAAWtB,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAY,CAAA,EAC9DQ,GAAiBC,GAChBZ,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,UAAWE,EACT,WACA,SACA,OACAR,EAAY,iBAAmB,iBAC/B,YACF,CAEAlB,EAAAA,EAAA,cAACF,EAAA,CAAS,UAAWa,CAAAA,CAAe,CACtC,EAEDP,GACCJ,EAAA,cAACV,EAAA,CAAY,KAAK,KAAK,OAAO,QAAS,EAAA,IACnC0B,EAAU,IAAEX,EAAY,GAC5B,CAEJ,CACF,CAEJ"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ~~CSS,~~ styled } from '~/~~stitches~~'\n\nimport { ~~Box } from '../box'\nimport {~~ Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled(~~Box~~, {\n p: '$2'~~,\n bg:~~ 'white'~~,\n borderRadius:~~ '$3'\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?: ~~CSS~~\n numberOfStickyColumns?: number\n scrollContainerCss?: ~~CSS~~\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 ~~css~~,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false,\n showTotalInFirstColumn: true,\n totalSuffix: 'items'\n },\n rowAction,\n withContainer = false,\n ...props\n}: DataTableTableProps): JSX.Element \| null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement \| null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n if (typeof window === 'undefined') return null\n return window\n }, [])\n\n React.useEffect(() => {\n if (!scrollTarget \|\| typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const updatePosition = () => {\n if (tableRef.current) {\n const tableTop = tableRef.current.getBoundingClientRect().top\n const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n top: tableTop,\n bottom: tableBottom\n }))\n }\n isScrolling.current = false\n }\n\n const handleScroll = () => {\n if (!isScrolling.current) {\n requestAnimationFrame(updatePosition)\n isScrolling.current = true\n }\n }\n\n if (!tableRef.current) return\n\n const observerOffset = scrollOptions?.stickyHeaderOffset \|\| 0\n\n const observerOptions = {\n rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n threshold: 0\n }\n\n const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n if (!entries \|\| entries.length === 0) return\n const entry = entries[0]\n\n isTableVisible.current = entry.isIntersecting\n\n if (scrollTarget) {\n if (entry.isIntersecting) {\n // add scroll listener\n scrollTarget?.addEventListener('scroll', handleScroll)\n } else {\n // remove scroll listener\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n isVisible: entry.isIntersecting\n }))\n }\n\n const tableObserver = new IntersectionObserver(\n handleTableIntersection,\n observerOptions\n )\n\n //only track table position if we have a sticky header or bulk actions active\n if (\n tableRef.current &&\n (scrollOptions.hasStickyHeader \|\|\n Object.keys(rowSelection \|\| {}).length > 0)\n ) {\n tableObserver.observe(tableRef.current)\n }\n\n return () => {\n tableObserver.disconnect()\n if (scrollTarget) {\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n scrollTarget,\n setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() \|\| !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n const tableComponent = (\n <Table\n corners=\"round\"\n size=\"lg\"\n {...props}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCss={~~{\n ...~~scrollOptions.scrollContainerCss\n }}\n scrollContainerkey={buildScrollContainerKey()}\n ~~css~~={{\n ~~...css~~,\n ~~...(~~isPending && {\n opacity~~: 0.5~~,\n ~~pointerEvents:~~ 'none',\n transition: '~~opacity 250ms~~ linear ~~150ms~~'\n })\n }}\n >\n <DataTable.Head\n theme={theme}\n sortable={sortable}\n isSticky={scrollOptions.hasStickyHeader}\n stickyOffset={scrollOptions.stickyHeaderOffset}\n ~~css~~={scrollOptions.headerCss}\n showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n totalSuffix={scrollOptions.totalSuffix}\n />\n <DataTable.Body striped={striped} rowAction={rowAction} />\n </Table>\n )\n\n return (\n <>\n <DataTableLoading />\n {withContainer ? (\n <TableContainer>{tableComponent}</TableContainer>\n ) : (\n tableComponent\n )}\n </>\n )\n}\n"],"names":["TableContainer","styled","~~Box","~~DataTableTable","sortable","striped","theme","~~css~~","scrollOptions","rowAction","withContainer","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","tableComponent","Table","DataTable","DataTableLoading"],"mappings":"~~gWAaA~~,MAAMA,EAAiBC,~~EAAOC~~,~~EAAK~~,~~CACjC~~,~~EAAG~~,~~KACH~~,~~GAAI~~,~~QACJ~~,~~aAAc~~,~~IAChB~~,CAAC,EAuBYC,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EAAQ,QACR,~~IAAAC~~,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,mBAAoB,EACpB,gBAAiB,GACjB,uBAAwB,GACxB,YAAa,OACf,EACA,UAAAC,EACA,cAAAC,EAAgB,~~MACbC~~,CACL,IAA+C,CAC7C,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,QAAAC,EACA,iBAAAC,CACF,EAAIC,~~EAAAA~~,~~EAEEC,~~EAAWC,EAAM,OAAgC,IAAI,EACrDC,EAAiBD,EAAM,OAAO,EAAK,EACnCE,EAAcF,EAAM,OAAgB,EAAK,EAEzCG,EAAeH,EAAM,QAAQ,IAC7B,OAAO,OAAW,IAAoB,KACnC,OACN,~~EAAE~~,EAELA,EAAM,UAAU,IAAM,CACpB,GAAI,CAACG,GAAgB,OAAO,qBAAyB,IACnD,OAGF,MAAMC,EAAiB,IAAM,CAC3B,GAAIL,EAAS,QAAS,CACpB,MAAMM,EAAWN,EAAS,QAAQ,wBAAwB,IACpDO,EAAcP,EAAS,QAAQ,~~wBAAwB~~,OAE7DF,EAAkBU,IAAkB,CAClC,GAAGA,EACH,IAAKF,EACL,OAAQC,CACV,EAAE,CACJ,CACAJ,EAAY,QAAU,EACxB,EAEMM,EAAe,IAAM,CACpBN,EAAY,UACf,sBAAsBE,CAAc,EACpCF,EAAY,QAAU,GAE1B,EAEA,GAAI,CAACH,EAAS,QAAS,OAEvB,MAAMU,GAAiBtB,GAAA,KAAAA,OAAAA,EAAe,qBAAsB,EAEtDuB,EAAkB,CACtB,WAAY,~~IAAID~~,~~YAAyBA~~,~~UACzC~~,UAAW,CACb,EAEME,EAA2BC,GAAyC,CACxE,GAAI,CAACA,GAAWA,EAAQ,SAAW,EAAG,OACtC,MAAMC,EAAQD,EAAQ,~~GAEtBX~~,EAAe,QAAUY,EAAM,eAE3BV,IACEU,EAAM,eAERV,GAAA,MAAAA,EAAc,iBAAiB,SAAUK,~~CAGzCL~~,~~EAAAA~~,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,~~IAIhDX~~,EAAkBU,IAAkB,CAClC,GAAGA,EACH,UAAWM,EAAM,cACnB,EAAE,CACJ,EAEMC,EAAgB,IAAI,qBACxBH,EACAD,CACF,EAGA,OACEX,EAAS,UACRZ,EAAc,iBACb,OAAO,KAAKO,GAAgB,~~EAAE~~,EAAE,OAAS,IAE3CoB,EAAc,QAAQf,EAAS,OAAO,EAGjC,IAAM,CACXe,EAAc,~~WAAA~~,~~EACVX~~,IACFA,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,~~GAEhD~~,CACF,EAAG,CACDd,EACAP,EAAc,gBACdA,GAAA,~~KAAAA~~,OAAAA,EAAe,mBACfgB,EACAN,CACF,CAAC,EAED,MAAMkB,EAAYxB,IAAmByB,EAAe,QAC9CC,EAAU,CAACF,GAAavB,~~EAAmB~~,~~IAAA,~~EAE3C0B,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAI1B,~~EAAqB~~,~~GAAK,CAAC,CAACE,~~EAC9BwB,EAAqB,GACZ1B,EAAqB,~~GAAK~~,~~CAAC,CAACE,~~KACrCwB,EAAqB,GAGhB,~~GAAGvB~~,~~KAAWuB~~,~~mBACvB~~,EAEA,GAAIF,EAAS,OAAO,KAEpB,MAAMG,EACJpB,EAAA,cAACqB,EAAA,CACC,QAAQ,QACR,KAAK,KACJ,GAAG/B,EACJ,IAAKS,EACL,sBAAuBZ,EAAc,sBACrC,~~mBAAoB~~,~~CAClB,GAAGA,~~EAAc,~~kBACnB~~,~~EACA,~~mBAAoB+B,EAAwB,EAC5C,~~IAAK~~,~~CACH~~,~~GAAGhC~~,~~EACH,GAAI6B,~~GAAa,~~CACf~~,~~QAAS~~,~~GACT~~,~~cAAe~~,~~OACf~~,~~WAAY~~,~~4BACd~~,CACF,CAEAf,EAAAA,EAAA,~~cAACsB~~,EAAU,KAAV,CACC,~~MAAOrC~~,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,aAAcA,EAAc,mBAC5B,~~IAAKA~~,EAAc,~~UACnB~~,uBAAwBA,EAAc,uBACtC,YAAaA,EAAc,WAAA,CAC7B,EACAa,EAAA,~~cAACsB~~,EAAU,KAAV,CAAe,~~QAAStC~~,EAAS,UAAWI,CAAW,CAAA,CAC1D,EAGF,OACEY,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,~~cAACuB~~,EAAA,IAAiB,~~EACjBlC~~,EACCW,EAAA,~~cAACrB~~,EAAA,~~KAAgByC~~,CAAe,EAEhCA,CAEJ,CAEJ"}
1	+ {"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n base: ['p-2', 'bg-white', 'rounded-xl']\n})\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' \| 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' \| 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n stickyHeaderOffset?: number\n headerCss?: string\n numberOfStickyColumns?: number\n scrollContainerCss?: string\n showTotalInFirstColumn?: boolean\n totalSuffix?: string\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n withContainer?: boolean\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme = 'white',\n className,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false,\n showTotalInFirstColumn: true,\n totalSuffix: 'items'\n },\n rowAction,\n withContainer = false,\n ...props\n}: DataTableTableProps): JSX.Element \| null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement \| null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n if (typeof window === 'undefined') return null\n return window\n }, [])\n\n React.useEffect(() => {\n if (!scrollTarget \|\| typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const updatePosition = () => {\n if (tableRef.current) {\n const tableTop = tableRef.current.getBoundingClientRect().top\n const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n top: tableTop,\n bottom: tableBottom\n }))\n }\n isScrolling.current = false\n }\n\n const handleScroll = () => {\n if (!isScrolling.current) {\n requestAnimationFrame(updatePosition)\n isScrolling.current = true\n }\n }\n\n if (!tableRef.current) return\n\n const observerOffset = scrollOptions?.stickyHeaderOffset \|\| 0\n\n const observerOptions = {\n rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n threshold: 0\n }\n\n const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n if (!entries \|\| entries.length === 0) return\n const entry = entries[0]\n\n isTableVisible.current = entry.isIntersecting\n\n if (scrollTarget) {\n if (entry.isIntersecting) {\n // add scroll listener\n scrollTarget?.addEventListener('scroll', handleScroll)\n } else {\n // remove scroll listener\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n isVisible: entry.isIntersecting\n }))\n }\n\n const tableObserver = new IntersectionObserver(\n handleTableIntersection,\n observerOptions\n )\n\n //only track table position if we have a sticky header or bulk actions active\n if (\n tableRef.current &&\n (scrollOptions.hasStickyHeader \|\|\n Object.keys(rowSelection \|\| {}).length > 0)\n ) {\n tableObserver.observe(tableRef.current)\n }\n\n return () => {\n tableObserver.disconnect()\n if (scrollTarget) {\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n scrollTarget,\n setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() \|\| !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n const tableComponent = (\n <Table\n corners=\"round\"\n size=\"lg\"\n {...props}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCss={scrollOptions.scrollContainerCss}\n scrollContainerkey={buildScrollContainerKey()}\n className={clsx(\n className,\n isPending && [\n 'opacity-50',\n 'pointer-events-none',\n 'transition-opacity',\n 'duration-250',\n 'linear',\n 'delay-150'\n ]\n )}\n >\n <DataTable.Head\n theme={theme}\n sortable={sortable}\n isSticky={scrollOptions.hasStickyHeader}\n stickyOffset={scrollOptions.stickyHeaderOffset}\n className={scrollOptions.headerCss}\n showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n totalSuffix={scrollOptions.totalSuffix}\n />\n <DataTable.Body striped={striped} rowAction={rowAction} />\n </Table>\n )\n\n return (\n <>\n <DataTableLoading />\n {withContainer ? (\n <TableContainer>{tableComponent}</TableContainer>\n ) : (\n tableComponent\n )}\n </>\n )\n}\n"],"names":["TableContainer","styled","DataTableTable","sortable","striped","theme","className","scrollOptions","rowAction","withContainer","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","tableComponent","Table","clsx","DataTable","DataTableLoading"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{arrayMove as T}from"@dnd-kit/sortable";import*as t from"react";import{Sortable as y}from"../../sortable/index.js";import{Table as I}from"../../table/Table.js";import{DataTable as g}from"../DataTable.js";import{AsyncDataState as x}from"../DataTable.types.js";import{useDataTable as A}from"../DataTableContext.js";import{DataTableLoading as C}from"../DataTableLoading.js";import{DragAndDropTableBody as S}from"./DragAndDropTableBody.js";const h=({idColumn:r="id",onDragAndDrop:o,sortable:m,striped:s,theme:i,css:d,...p})=>{const{asyncDataState:c,data:e,setData:D}=A(),u=c===x.PENDING,b=t.useMemo(()=>e.results.map(a=>a[r]),[e]),f=t.useCallback(({oldIndex:a,newIndex:n})=>{const l=T(e.results,a,n),E={results:l,total:e.total};D({results:l,total:e.total}),o==null||o({oldIndex:a,newIndex:n,newData:E})},[e,o]);return t.createElement(y.Root,{onSortChange:f,sortableIds:b},t.createElement(C,null),t.createElement(I,{...p,css:{...d,...u&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},t.createElement(g.Head,{theme:i,sortable:m}),t.createElement(S,{striped:s,idColumn:r})))};export{h as DragAndDropTable};
+import{arrayMove as T}from"@dnd-kit/sortable";import E from"clsx";import*as t from"react";import{Sortable as I}from"../../sortable/index.js";import{Table as g}from"../../table/Table.js";import{DataTable as x}from"../DataTable.js";import{AsyncDataState as A}from"../DataTable.types.js";import{useDataTable as C}from"../DataTableContext.js";import{DataTableLoading as N}from"../DataTableLoading.js";import{DragAndDropTableBody as S}from"./DragAndDropTableBody.js";const h=({idColumn:r="id",onDragAndDrop:o,sortable:m,striped:s,theme:i,className:d,...p})=>{const{asyncDataState:c,data:e,setData:D}=C(),u=c===A.PENDING,b=t.useMemo(()=>e.results.map(a=>a[r]),[e]),f=t.useCallback(({oldIndex:a,newIndex:l})=>{const n=T(e.results,a,l),y={results:n,total:e.total};D({results:n,total:e.total}),o==null||o({oldIndex:a,newIndex:l,newData:y})},[e,o]);return t.createElement(I.Root,{onSortChange:f,sortableIds:b},t.createElement(N,null),t.createElement(g,{...p,className:E(d,u&&["opacity-50","pointer-events-none","transition-opacity,duration-250,linear,delay-150"])},t.createElement(x.Head,{theme:i,sortable:m}),t.createElement(S,{striped:s,idColumn:r})))};export{h as DragAndDropTable};
 //# sourceMappingURL=DragAndDropTable.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DragAndDropTable.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Sortable } from '../../sortable'\nimport { Table } from '../../table'\nimport { DataTable } from '../DataTable'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n idColumn?: string\n onDragAndDrop?: (onDragAndDropData: {\n oldIndex: number\n newIndex: number\n newData: TAsyncDataResult\n }) => void\n}\n\nexport const DragAndDropTable = ({\n idColumn = 'id',\n onDragAndDrop,\n sortable,\n striped,\n theme,\n ~~css~~,\n ...props\n}: DragAndDropTableProps) => {\n const { asyncDataState, data, setData } = useDataTable()\n const isPending = asyncDataState === AsyncDataState.PENDING\n\n const rowIds = React.useMemo(\n () =>\n data.results.map((row) => {\n return row[idColumn] as React.ReactText\n }),\n [data]\n )\n const handleSortChange = React.useCallback(\n ({ oldIndex, newIndex }) => {\n const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n const newData = { results: sortedResults, total: data.total }\n setData({ results: sortedResults, total: data.total })\n onDragAndDrop?.({ oldIndex, newIndex, newData })\n },\n [data, onDragAndDrop]\n )\n\n return (\n <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n <DataTableLoading />\n <Table\n {...props}\n ~~css~~={{\n ~~...css~~,\n ~~...(~~isPending && {\n opacity~~: 0.5~~,\n ~~pointerEvents:~~ 'none',\n transition~~: '~~opacity ~~250ms~~ linear ~~150ms~~'\n })\n }}\n >\n <DataTable.Head theme={theme} sortable={sortable} />\n <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n </Table>\n </Sortable.Root>\n )\n}\n"],"names":["DragAndDropTable","idColumn","onDragAndDrop","sortable","striped","theme","~~css~~","props","asyncDataState","data","setData","useDataTable","isPending","AsyncDataState","rowIds","React","row","handleSortChange","oldIndex","newIndex","sortedResults","arrayMove","newData","Sortable","DataTableLoading","Table","DataTable","DragAndDropTableBody"],"mappings":"~~gcAqBaA~~,EAAmB,CAAC,CAC/B,SAAAC,EAAW,KACX,cAAAC,EACA,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,~~IAAAC~~,~~KACGC~~,CACL,IAA6B,CAC3B,KAAM,CAAE,eAAAC,EAAgB,KAAAC,EAAM,QAAAC,CAAQ,EAAIC,~~EAAa~~,~~EACjDC,~~EAAYJ,IAAmBK,EAAe,QAE9CC,EAASC,EAAM,QACnB,IACEN,EAAK,QAAQ,IAAKO,GACTA,EAAIf,~~EACZ~~,EACH,CAACQ,CAAI,CACP,EACMQ,EAAmBF,EAAM,YAC7B,CAAC,CAAE,SAAAG,EAAU,SAAAC,CAAS,IAAM,CAC1B,MAAMC,EAAgBC,EAAUZ,EAAK,QAASS,EAAUC,CAAQ,EAC1DG,EAAU,CAAE,QAASF,EAAe,MAAOX,EAAK,KAAM,EAC5DC,EAAQ,CAAE,QAASU,EAAe,MAAOX,EAAK,KAAM,CAAC,EACrDP,GAAA,MAAAA,EAAgB,CAAE,SAAAgB,EAAU,SAAAC,EAAU,QAAAG,CAAQ,~~CAChD~~,~~CAAA,~~EACA,CAACb,EAAMP,CAAa,CACtB,EAEA,OACEa,EAAA,cAACQ,EAAS,KAAT,CAAc,aAAcN,EAAkB,YAAaH,~~CAC1DC~~,~~EAAAA,~~EAAA,cAACS,EAAA,IAAiB,EAClBT,EAAA,cAACU,EAAA,CACE,GAAGlB,EACJ,~~IAAK~~,~~CACH~~,~~GAAGD~~,~~EACH,GAAIM,~~GAAa,~~CACf~~,~~QAAS~~,~~GACT~~,~~cAAe~~,~~OACf,WAAY,4BACd,~~CACF,CAAA,EAEAG,EAAA,~~cAACW~~,EAAU,KAAV,CAAe,~~MAAOrB~~,EAAO,SAAUF,CAAAA,CAAU,EAClDY,EAAA,~~cAACY~~,EAAA,CAAqB,~~QAASvB~~,EAAS,SAAUH,CAAAA,CAAU,CAC9D,CACF,CAEJ"}
1	+ {"version":3,"file":"DragAndDropTable.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Sortable } from '../../sortable'\nimport { Table } from '../../table'\nimport { DataTable } from '../DataTable'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n className?: string\n idColumn?: string\n onDragAndDrop?: (onDragAndDropData: {\n oldIndex: number\n newIndex: number\n newData: TAsyncDataResult\n }) => void\n}\n\nexport const DragAndDropTable = ({\n idColumn = 'id',\n onDragAndDrop,\n sortable,\n striped,\n theme,\n className,\n ...props\n}: DragAndDropTableProps) => {\n const { asyncDataState, data, setData } = useDataTable()\n const isPending = asyncDataState === AsyncDataState.PENDING\n\n const rowIds = React.useMemo(\n () =>\n data.results.map((row) => {\n return row[idColumn] as React.ReactText\n }),\n [data]\n )\n const handleSortChange = React.useCallback(\n ({ oldIndex, newIndex }) => {\n const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n const newData = { results: sortedResults, total: data.total }\n setData({ results: sortedResults, total: data.total })\n onDragAndDrop?.({ oldIndex, newIndex, newData })\n },\n [data, onDragAndDrop]\n )\n\n return (\n <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n <DataTableLoading />\n <Table\n {...props}\n className={clsx(\n className,\n isPending && [\n 'opacity-50',\n 'pointer-events-none',\n 'transition-opacity,duration-250,linear,delay-150'\n ]\n )}\n >\n <DataTable.Head theme={theme} sortable={sortable} />\n <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n </Table>\n </Sortable.Root>\n )\n}\n"],"names":["DragAndDropTable","idColumn","onDragAndDrop","sortable","striped","theme","className","props","asyncDataState","data","setData","useDataTable","isPending","AsyncDataState","rowIds","React","row","handleSortChange","oldIndex","newIndex","sortedResults","arrayMove","newData","Sortable","DataTableLoading","Table","clsx","DataTable","DragAndDropTableBody"],"mappings":"odAuBaA,EAAmB,CAAC,CAC/B,SAAAC,EAAW,KACX,cAAAC,EACA,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,eAAAC,EAAgB,KAAAC,EAAM,QAAAC,CAAQ,EAAIC,IACpCC,EAAYJ,IAAmBK,EAAe,QAE9CC,EAASC,EAAM,QACnB,IACEN,EAAK,QAAQ,IAAKO,GACTA,EAAIf,CAAQ,CACpB,EACH,CAACQ,CAAI,CACP,EACMQ,EAAmBF,EAAM,YAC7B,CAAC,CAAE,SAAAG,EAAU,SAAAC,CAAS,IAAM,CAC1B,MAAMC,EAAgBC,EAAUZ,EAAK,QAASS,EAAUC,CAAQ,EAC1DG,EAAU,CAAE,QAASF,EAAe,MAAOX,EAAK,KAAM,EAC5DC,EAAQ,CAAE,QAASU,EAAe,MAAOX,EAAK,KAAM,CAAC,EACrDP,GAAA,MAAAA,EAAgB,CAAE,SAAAgB,EAAU,SAAAC,EAAU,QAAAG,CAAQ,EAChD,EACA,CAACb,EAAMP,CAAa,CACtB,EAEA,OACEa,EAAA,cAACQ,EAAS,KAAT,CAAc,aAAcN,EAAkB,YAAaH,GAC1DC,EAAA,cAACS,EAAA,IAAiB,EAClBT,EAAA,cAACU,EAAA,CACE,GAAGlB,EACJ,UAAWmB,EACTpB,EACAM,GAAa,CACX,aACA,sBACA,kDACF,CACF,CAAA,EAEAG,EAAA,cAACY,EAAU,KAAV,CAAe,MAAOtB,EAAO,SAAUF,CAAAA,CAAU,EAClDY,EAAA,cAACa,EAAA,CAAqB,QAASxB,EAAS,SAAUH,CAAAA,CAAU,CAC9D,CACF,CAEJ"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DragAndDropTableBody.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table'\nimport { useDataTable } from '../DataTableContext'\nimport { DragAndDropTableRow } from './DragAndDropTableRow'\n\ntype DataTableBodyProps = Omit<\n React.ComponentProps<typeof Table.Body>,\n 'children'\n> & { idColumn?: string }\n\nexport const DragAndDropTableBody = ({\n striped = false,\n idColumn = 'id',\n ...props\n}: DataTableBodyProps) => {\n const { getRowModel } = useDataTable()\n return (\n <Table.Body {...props} striped={striped}>\n {getRowModel().rows.map((row) => {\n return (\n <DragAndDropTableRow row={row} key={row.id} idColumn={idColumn} />\n )\n })}\n </Table.Body>\n )\n}\n"],"names":["DragAndDropTableBody","striped","idColumn","props","getRowModel","useDataTable","React","Table","row","DragAndDropTableRow"],"mappings":"0LAWa,MAAAA,EAAuB,CAAC,CACnC,QAAAC,EAAU,GACV,SAAAC,EAAW,~~QACRC~~,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,~~EACxB~~,~~EAAA~~,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASF,~~CAC7BG~~,~~EAAAA~~,EAAc,EAAA,KAAK,IAAKI,GAErBF,EAAA,cAACG,EAAA,CAAoB,IAAKD,EAAK,IAAKA,EAAI,GAAI,SAAUN,CAAU,CAAA,CAEnE,CACH,CAEJ"}
1	+ {"version":3,"file":"DragAndDropTableBody.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table'\nimport { useDataTable } from '../DataTableContext'\nimport { DragAndDropTableRow } from './DragAndDropTableRow'\n\ntype DataTableBodyProps = Omit<\n React.ComponentProps<typeof Table.Body>,\n 'children'\n> & { idColumn?: string }\n\nexport const DragAndDropTableBody = ({\n striped = false,\n idColumn = 'id',\n ...props\n}: DataTableBodyProps) => {\n const { getRowModel } = useDataTable()\n return (\n <Table.Body {...props} striped={striped}>\n {getRowModel().rows.map((row) => {\n return (\n <DragAndDropTableRow row={row} key={row.id} idColumn={idColumn} />\n )\n })}\n </Table.Body>\n )\n}\n"],"names":["DragAndDropTableBody","striped","idColumn","props","getRowModel","useDataTable","React","Table","row","DragAndDropTableRow"],"mappings":"0LAWa,MAAAA,EAAuB,CAAC,CACnC,QAAAC,EAAU,GACV,SAAAC,EAAW,KACX,GAAGC,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,EAAa,EACrC,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASF,CAAAA,EAC7BG,EAAc,EAAA,KAAK,IAAKI,GAErBF,EAAA,cAACG,EAAA,CAAoB,IAAKD,EAAK,IAAKA,EAAI,GAAI,SAAUN,CAAU,CAAA,CAEnE,CACH,CAEJ"}

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

@@ -1,2 +1,2 @@
-import{flexRender as i}from"@tanstack/react-table";import*as l from"react";import{Sortable as a}from"../../sortable/index.js";import{Table as m}from"../../table/Table.js";import{DataTableDataCell as c}from"../DataTableDataCell.js";const d=({row:t,idColumn:o="id"})=>{const r=t.original[o];return l.createElement(a.Item,{id:r,asChild:!0},l.createElement(m.Row,null,t.getVisibleCells().map((e,n)=>n===0?l.createElement(m.Cell,{key:e.id},l.createElement(a.Handle,{targetId:r,css:{display:"inline-block"}}),i(e.column.columnDef.cell,e.getContext())):l.createElement(c,{key:e.id,cell:e}))))};export{d as DragAndDropTableRow};
+import{flexRender as i}from"@tanstack/react-table";import*as l from"react";import{Sortable as r}from"../../sortable/index.js";import{Table as a}from"../../table/Table.js";import{DataTableDataCell as c}from"../DataTableDataCell.js";const d=({row:t,idColumn:m="id"})=>{const o=t.original[m];return l.createElement(r.Item,{id:o,asChild:!0},l.createElement(a.Row,null,t.getVisibleCells().map((e,n)=>n===0?l.createElement(a.Cell,{key:e.id},l.createElement(r.Handle,{targetId:o,className:"inline-block"}),i(e.column.columnDef.cell,e.getContext())):l.createElement(c,{key:e.id,cell:e}))))};export{d as DragAndDropTableRow};
 //# sourceMappingURL=DragAndDropTableRow.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DragAndDropTableRow.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Sortable } from '~/components/sortable'\n\nimport { Table } from '../../table'\nimport { DataTableDataCell } from '../DataTableDataCell'\nexport type DataTableDraggableRowProps = React.ComponentProps<\n typeof Table.Row\n> & {\n row: Row<Record<string, unknown>>\n idColumn?: string\n}\n\nexport const DragAndDropTableRow = ({\n row,\n idColumn = 'id'\n}: DataTableDraggableRowProps) => {\n const rowId = row.original[idColumn] as React.ReactText\n return (\n <Sortable.Item id={rowId} asChild>\n <Table.Row>\n {row.getVisibleCells().map((cell, i) => {\n if (i === 0) {\n return (\n <Table.Cell key={cell.id}>\n <Sortable.Handle\n targetId={rowId}~~\n css={{~~ ~~display: '~~inline-block' ~~}}\n~~ />\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Cell>\n )\n }\n return <DataTableDataCell key={cell.id} cell={cell} />\n })}\n </Table.Row>\n </Sortable.Item>\n )\n}\n"],"names":["DragAndDropTableRow","row","idColumn","rowId","React","Sortable","Table","cell","i","flexRender","DataTableDataCell"],"mappings":"~~uOAea~~,~~MAAAA~~,EAAsB,CAAC,CAClC,IAAAC,EACA,SAAAC,EAAW,IACb,IAAkC,CAChC,MAAMC,EAAQF,EAAI,SAASC,~~GAC3B~~,OACEE,EAAA,cAACC,EAAS,KAAT,CAAc,GAAIF,EAAO,QAAO,~~IAC~~/BC,EAAA,cAACE,EAAM,IAAN,KACEL,EAAI,~~gBAAkB~~,~~EAAA,~~IAAI,CAACM,EAAMC,IAC5BA,IAAM,EAENJ,EAAA,cAACE,EAAM,KAAN,CAAW,IAAKC,EAAK,~~EAAA,~~EACpBH,EAAA,cAACC,EAAS,OAAT,~~CACC~~,SAAUF,~~EACV~~,~~IAAK~~,~~CAAE~~,~~QAAS~~,~~cAAe,CACjC,CAAA,EACCM,~~EAAWF,EAAK,OAAO,UAAU,KAAMA,EAAK,WAAY,CAAA,CAC3D,EAGGH,EAAA,cAACM,EAAA,CAAkB,IAAKH,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CACF,CAEJ"}
1	+ {"version":3,"file":"DragAndDropTableRow.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Sortable } from '~/components/sortable'\n\nimport { Table } from '../../table'\nimport { DataTableDataCell } from '../DataTableDataCell'\n\nexport type DataTableDraggableRowProps = React.ComponentProps<\n typeof Table.Row\n> & {\n row: Row<Record<string, unknown>>\n idColumn?: string\n}\n\nexport const DragAndDropTableRow = ({\n row,\n idColumn = 'id'\n}: DataTableDraggableRowProps) => {\n const rowId = row.original[idColumn] as React.ReactText\n return (\n <Sortable.Item id={rowId} asChild>\n <Table.Row>\n {row.getVisibleCells().map((cell, i) => {\n if (i === 0) {\n return (\n <Table.Cell key={cell.id}>\n <Sortable.Handle targetId={rowId} className=\"inline-block\" />\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Cell>\n )\n }\n return <DataTableDataCell key={cell.id} cell={cell} />\n })}\n </Table.Row>\n </Sortable.Item>\n )\n}\n"],"names":["DragAndDropTableRow","row","idColumn","rowId","React","Sortable","Table","cell","i","flexRender","DataTableDataCell"],"mappings":"uOAgBO,MAAMA,EAAsB,CAAC,CAClC,IAAAC,EACA,SAAAC,EAAW,IACb,IAAkC,CAChC,MAAMC,EAAQF,EAAI,SAASC,CAAQ,EACnC,OACEE,EAAA,cAACC,EAAS,KAAT,CAAc,GAAIF,EAAO,QAAO,EAAA,EAC/BC,EAAA,cAACE,EAAM,IAAN,KACEL,EAAI,kBAAkB,IAAI,CAACM,EAAMC,IAC5BA,IAAM,EAENJ,EAAA,cAACE,EAAM,KAAN,CAAW,IAAKC,EAAK,EACpBH,EAAAA,EAAA,cAACC,EAAS,OAAT,CAAgB,SAAUF,EAAO,UAAU,eAAe,EAC1DM,EAAWF,EAAK,OAAO,UAAU,KAAMA,EAAK,WAAY,CAAA,CAC3D,EAGGH,EAAA,cAACM,EAAA,CAAkB,IAAKH,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CACF,CAEJ"}

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

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