@mage-ui/components 1.0.95 → 1.0.96
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.
- package/dist/components/data-display/datatables/DataTable.d.mts +2 -0
- package/dist/components/data-display/datatables/DataTable.d.mts.map +1 -1
- package/dist/components/data-display/datatables/DataTable.mjs +1 -1
- package/dist/components/data-display/datatables/DataTable.mjs.map +1 -1
- package/dist/components/data-display/datatables/DataTableColGroup.mjs +1 -1
- package/dist/components/data-display/datatables/DataTableColGroup.mjs.map +1 -1
- package/dist/components/data-display/datatables/DataTableColumns.mjs +1 -1
- package/dist/components/data-display/datatables/DataTableColumns.mjs.map +1 -1
- package/dist/components/data-display/datatables/useDataTable.mjs +1 -1
- package/dist/components/data-display/datatables/useDataTable.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -30,11 +30,13 @@ type DataTableSelectionConfig<Data = unknown> = {
|
|
|
30
30
|
getRowId?: (row: Data) => string;
|
|
31
31
|
isRowDisabled?: (row: Data) => boolean;
|
|
32
32
|
bulkActions?: (selectedIds: string[]) => ReactNode;
|
|
33
|
+
columnOverrides?: Partial<ColumnDef<Data, unknown>>;
|
|
33
34
|
};
|
|
34
35
|
type DataTableExpansionConfig<Data = unknown> = {
|
|
35
36
|
state: ExpandedState;
|
|
36
37
|
onChange: OnChangeFn<ExpandedState>;
|
|
37
38
|
renderContent: (row: Data) => ReactNode;
|
|
39
|
+
columnOverrides?: Partial<ColumnDef<Data, unknown>>;
|
|
38
40
|
};
|
|
39
41
|
type DataTableSearchConfig = {
|
|
40
42
|
placeholder?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"mappings":";;;;;;;;KA+BY,eAAA,GAAkB,MAAA;AAAA,KAElB,sBAAA;EACV,KAAA,EAAO,YAAA;EACP,QAAA,EAAU,UAAA,CAAW,YAAA;AAAA;AAAA,KAGX,yBAAA;EACV,WAAA;EACA,QAAA;EACA,QAAA,EAAU,UAAA,CAAW,eAAA;EACrB,SAAA;EACA,QAAA;AAAA;AAAA,KAGU,mBAAA;EACV,UAAA;IACE,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,KAIQ,wBAAA;EACV,KAAA,EAAO,iBAAA;EACP,QAAA,EAAU,UAAA,CAAW,iBAAA;EACrB,QAAA,IAAY,GAAA,EAAK,IAAA;EACjB,aAAA,IAAiB,GAAA,EAAK,IAAA;EACtB,WAAA,IAAe,WAAA,eAA0B,SAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"DataTable.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"mappings":";;;;;;;;KA+BY,eAAA,GAAkB,MAAA;AAAA,KAElB,sBAAA;EACV,KAAA,EAAO,YAAA;EACP,QAAA,EAAU,UAAA,CAAW,YAAA;AAAA;AAAA,KAGX,yBAAA;EACV,WAAA;EACA,QAAA;EACA,QAAA,EAAU,UAAA,CAAW,eAAA;EACrB,SAAA;EACA,QAAA;AAAA;AAAA,KAGU,mBAAA;EACV,UAAA;IACE,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,KAIQ,wBAAA;EACV,KAAA,EAAO,iBAAA;EACP,QAAA,EAAU,UAAA,CAAW,iBAAA;EACrB,QAAA,IAAY,GAAA,EAAK,IAAA;EACjB,aAAA,IAAiB,GAAA,EAAK,IAAA;EACtB,WAAA,IAAe,WAAA,eAA0B,SAAA;EACzC,eAAA,GAAkB,OAAA,CAAQ,SAAA,CAAU,IAAA;AAAA;AAAA,KAG1B,wBAAA;EACV,KAAA,EAAO,aAAA;EACP,QAAA,EAAU,UAAA,CAAW,aAAA;EACrB,aAAA,GAAgB,GAAA,EAAK,IAAA,KAAS,SAAA;EAC9B,eAAA,GAAkB,OAAA,CAAQ,SAAA,CAAU,IAAA;AAAA;AAAA,KAG1B,qBAAA;EACV,WAAA;EACA,KAAA;AAAA;AAAA,KAGU,sBAAA;EACV,OAAA,EAAS,MAAA;EACT,MAAA,GACE,OAAA,EAAS,MAAA,mBACT,QAAA,GAAW,IAAA,EAAM,MAAA,+BACd,SAAA;AAAA;AAAA,KAGK,oBAAA,GAAuB,IAAA,CAAK,UAAA;AAAA,KAE5B,mBAAA;EACV,SAAA;EACA,IAAA;EACA,QAAA;EACA,MAAA;EACA,UAAA;EACA,aAAA;EACA,YAAA;EACA,OAAA;EACA,OAAA,GAAU,0BAAA;EACV,OAAA;EACA,KAAA;EACA,eAAA;EACA,QAAA;EACA,KAAA,GAAQ,eAAA;AAAA;AAAA,KAGL,uBAAA,SAAgC,OAAA,CACnC,IAAA,CACE,YAAA,CAAa,IAAA;AAAA,KAUL,0BAAA;EACV,MAAA,EAAQ,SAAA,CAAU,IAAA;EAClB,QAAA;AAAA;AAAA,KAGU,cAAA;EACV,IAAA,EAAM,IAAA;EACN,OAAA,EAAS,SAAA,CAAU,IAAA;EACnB,YAAA,GAAe,0BAAA,CAA2B,IAAA;EAC1C,OAAA,GAAU,sBAAA;EACV,UAAA,GAAa,yBAAA;EACb,SAAA,GAAY,wBAAA,CAAyB,IAAA;EACrC,SAAA,GAAY,wBAAA,CAAyB,IAAA;EACrC,OAAA;EACA,QAAA;EACA,SAAA,gBAAyB,OAAA;EACzB,KAAA,GAAQ,cAAA;EACR,UAAA,GAAa,mBAAA;EACb,OAAA,GAAU,uBAAA,CAAwB,IAAA;EAClC,MAAA,GAAS,OAAA,CAAQ,eAAA;AAAA,IACf,oBAAA;AAAA,cAES,SAAA;EAAoB,UAAA;EAAA,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,UAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,YAAA;EAAA,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,MAAA;EAAA,GAAA;AAAA,GAgB9B,cAAA,CAAe,IAAA,MAAQ,SAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Table as e}from"../table/Table.mjs";import{DataTableBody as t}from"./DataTableBody.mjs";import{DataTableContextProvider as n}from"./useDataTableContext.mjs";import{DataTableBulkBar as r}from"./DataTableBulkBar.mjs";import{DataTableColGroup as i}from"./DataTableColGroup.mjs";import{DataTableHeader as a}from"./DataTableHeader.mjs";import{DataTableRootContainer as o}from"./DataTableRootContainer.mjs";import{DataTableSkeleton as s}from"./DataTableSkeleton.mjs";import{DataTableSlotRow as c}from"./DataTableSlotRow.mjs";import{DataTableViewport as l}from"./DataTableViewport.mjs";import{useDataTable as u}from"./useDataTable.mjs";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({classNames:p,slots:m,loading:h,skeleton:g,pagination:_,selection:v,expansion:y,data:b,columns:x,extraColumns:S,sorting:C,onRefresh:w,options:T,labels:E,...D})=>{let{layout:O,contextValue:k,table:A,explicitSizeIds:j}=u({data:b,columns:x,extraColumns:S,sorting:C,onRefresh:w,options:T,labels:E,classNames:p,loading:h,skeleton:g,pagination:_,selection:v,expansion:y,...D});return d(n,{value:k,children:f(o,{busy:h,classNames:p,children:[d(c,{classNames:{root:p?.slotRow},children:m?.top}),d(l,{className:p?.viewport,children:g!=null&&b.length===0?d(s,{rows:g,className:p?.skeleton}):f(e,{...D,layout:O,classNames:p?.table,children:[d(i,{columns:A.getVisibleLeafColumns(),explicitSizeIds:j}),d(a,{loading:h,classNames:p,headerGroups:A.getHeaderGroups(),explicitSizeIds:j}),d(t,{rows:A.getRowModel().rows,colCount:A.getVisibleLeafColumns().length,loading:h,empty:m?.empty,emptyClassName:p?.empty,expandedContentClassName:p?.expandedContent,expansion:y,selection:v})]})}),d(c,{classNames:{root:p?.slotRow},children:m?.bottom}),d(r,{selectedIds:k.selectedIds,className:p?.bulkBar,selection:v})]})})};export{p as DataTable};
|
|
1
|
+
import{Table as e}from"../table/Table.mjs";import{DataTableBody as t}from"./DataTableBody.mjs";import{DataTableContextProvider as n}from"./useDataTableContext.mjs";import{DataTableBulkBar as r}from"./DataTableBulkBar.mjs";import{DataTableColGroup as i}from"./DataTableColGroup.mjs";import{DataTableHeader as a}from"./DataTableHeader.mjs";import{DataTableRootContainer as o}from"./DataTableRootContainer.mjs";import{DataTableSkeleton as s}from"./DataTableSkeleton.mjs";import{DataTableSlotRow as c}from"./DataTableSlotRow.mjs";import{DataTableViewport as l}from"./DataTableViewport.mjs";import{useDataTable as u}from"./useDataTable.mjs";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({classNames:p,slots:m,loading:h,skeleton:g,pagination:_,selection:v,expansion:y,data:b,columns:x,extraColumns:S,sorting:C,onRefresh:w,options:T,labels:E,...D})=>{let{layout:O,contextValue:k,table:A,explicitSizeIds:j,columnHeaderClasses:M}=u({data:b,columns:x,extraColumns:S,sorting:C,onRefresh:w,options:T,labels:E,classNames:p,loading:h,skeleton:g,pagination:_,selection:v,expansion:y,...D});return d(n,{value:k,children:f(o,{busy:h,classNames:p,children:[d(c,{classNames:{root:p?.slotRow},children:m?.top}),d(l,{className:p?.viewport,children:g!=null&&b.length===0?d(s,{rows:g,className:p?.skeleton}):f(e,{...D,layout:O,classNames:p?.table,children:[d(i,{columns:A.getVisibleLeafColumns(),explicitSizeIds:j,columnHeaderClasses:M}),d(a,{loading:h,classNames:p,headerGroups:A.getHeaderGroups(),explicitSizeIds:j}),d(t,{rows:A.getRowModel().rows,colCount:A.getVisibleLeafColumns().length,loading:h,empty:m?.empty,emptyClassName:p?.empty,expandedContentClassName:p?.expandedContent,expansion:y,selection:v})]})}),d(c,{classNames:{root:p?.slotRow},children:m?.bottom}),d(r,{selectedIds:k.selectedIds,className:p?.bulkBar,selection:v})]})})};export{p as DataTable};
|
|
2
2
|
//# sourceMappingURL=DataTable.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type {\n ColumnDef,\n ExpandedState,\n OnChangeFn,\n PaginationState,\n RowSelectionState,\n SortingState,\n TableOptions,\n} from '@tanstack/react-table';\n\nimport { Table, type TableClassNames, type TableProps } from '../table/Table';\nimport { DataTableBody } from './DataTableBody';\nimport {\n DataTableBulkBar,\n type DataTableBulkBarClassNames,\n} from './DataTableBulkBar';\nimport { DataTableColGroup } from './DataTableColGroup';\nimport { DataTableHeader } from './DataTableHeader';\nimport { DataTableRootContainer } from './DataTableRootContainer';\nimport { DataTableSkeleton } from './DataTableSkeleton';\nimport { DataTableSlotRow, type DataTableSlots } from './DataTableSlotRow';\nimport { DataTableViewport } from './DataTableViewport';\nimport { useDataTable } from './useDataTable';\nimport {\n DataTableContextProvider,\n type DataTableContextValue,\n type DataTableLabels,\n} from './useDataTableContext';\n\nexport type DataTableRecord = Record<string, unknown>;\n\nexport type DataTableSortingConfig = {\n state: SortingState;\n onChange: OnChangeFn<SortingState>;\n};\n\nexport type DataTablePaginationConfig = {\n currentPage: number;\n pageSize: number;\n onChange: OnChangeFn<PaginationState>;\n pageCount: number;\n rowCount?: number;\n};\n\nexport type DataTableColumnMeta = {\n classNames?: {\n header?: string;\n cell?: string;\n };\n};\n\nexport type DataTableSelectionConfig<Data = unknown> = {\n state: RowSelectionState;\n onChange: OnChangeFn<RowSelectionState>;\n getRowId?: (row: Data) => string;\n isRowDisabled?: (row: Data) => boolean;\n bulkActions?: (selectedIds: string[]) => ReactNode;\n};\n\nexport type DataTableExpansionConfig<Data = unknown> = {\n state: ExpandedState;\n onChange: OnChangeFn<ExpandedState>;\n renderContent: (row: Data) => ReactNode;\n};\n\nexport type DataTableSearchConfig = {\n placeholder?: string;\n label?: string;\n};\n\nexport type DataTableFiltersConfig = {\n initial: Record<string, unknown>;\n render: (\n filters: Record<string, unknown>,\n onChange: (next: Record<string, unknown>) => void,\n ) => ReactNode;\n};\n\nexport type DataTableTableConfig = Omit<TableProps, 'children' | 'classNames'>;\n\nexport type DataTableClassNames = {\n dataTable?: string;\n root?: string;\n viewport?: string;\n header?: string;\n sortButton?: string;\n sortIndicator?: string;\n expandButton?: string;\n slotRow?: string;\n bulkBar?: DataTableBulkBarClassNames;\n loading?: string;\n empty?: string;\n expandedContent?: string;\n skeleton?: string;\n table?: TableClassNames;\n};\n\ntype DataTableManagedOptions<Data> = Partial<\n Omit<\n TableOptions<Data>,\n | 'columns'\n | 'data'\n | 'onExpandedChange'\n | 'onPaginationChange'\n | 'onRowSelectionChange'\n | 'onSortingChange'\n >\n>;\n\nexport type DataTableExtraColumnConfig<Data> = {\n column: ColumnDef<Data, unknown>;\n position?: number;\n};\n\nexport type DataTableProps<Data> = {\n data: Data[];\n columns: ColumnDef<Data, unknown>[];\n extraColumns?: DataTableExtraColumnConfig<Data>[];\n sorting?: DataTableSortingConfig;\n pagination?: DataTablePaginationConfig;\n selection?: DataTableSelectionConfig<Data>;\n expansion?: DataTableExpansionConfig<Data>;\n loading?: boolean;\n skeleton?: number;\n onRefresh?: () => void | Promise<void>;\n slots?: DataTableSlots;\n classNames?: DataTableClassNames;\n options?: DataTableManagedOptions<Data>;\n labels?: Partial<DataTableLabels>;\n} & DataTableTableConfig;\n\nexport const DataTable = <Data,>({\n classNames,\n slots,\n loading,\n skeleton,\n pagination,\n selection,\n expansion,\n data,\n columns,\n extraColumns,\n sorting,\n onRefresh,\n options,\n labels,\n ...tableProps\n}: DataTableProps<Data>): ReactNode => {\n const { layout, contextValue, table, explicitSizeIds }
|
|
1
|
+
{"version":3,"file":"DataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type {\n ColumnDef,\n ExpandedState,\n OnChangeFn,\n PaginationState,\n RowSelectionState,\n SortingState,\n TableOptions,\n} from '@tanstack/react-table';\n\nimport { Table, type TableClassNames, type TableProps } from '../table/Table';\nimport { DataTableBody } from './DataTableBody';\nimport {\n DataTableBulkBar,\n type DataTableBulkBarClassNames,\n} from './DataTableBulkBar';\nimport { DataTableColGroup } from './DataTableColGroup';\nimport { DataTableHeader } from './DataTableHeader';\nimport { DataTableRootContainer } from './DataTableRootContainer';\nimport { DataTableSkeleton } from './DataTableSkeleton';\nimport { DataTableSlotRow, type DataTableSlots } from './DataTableSlotRow';\nimport { DataTableViewport } from './DataTableViewport';\nimport { useDataTable } from './useDataTable';\nimport {\n DataTableContextProvider,\n type DataTableContextValue,\n type DataTableLabels,\n} from './useDataTableContext';\n\nexport type DataTableRecord = Record<string, unknown>;\n\nexport type DataTableSortingConfig = {\n state: SortingState;\n onChange: OnChangeFn<SortingState>;\n};\n\nexport type DataTablePaginationConfig = {\n currentPage: number;\n pageSize: number;\n onChange: OnChangeFn<PaginationState>;\n pageCount: number;\n rowCount?: number;\n};\n\nexport type DataTableColumnMeta = {\n classNames?: {\n header?: string;\n cell?: string;\n };\n};\n\nexport type DataTableSelectionConfig<Data = unknown> = {\n state: RowSelectionState;\n onChange: OnChangeFn<RowSelectionState>;\n getRowId?: (row: Data) => string;\n isRowDisabled?: (row: Data) => boolean;\n bulkActions?: (selectedIds: string[]) => ReactNode;\n columnOverrides?: Partial<ColumnDef<Data, unknown>>;\n};\n\nexport type DataTableExpansionConfig<Data = unknown> = {\n state: ExpandedState;\n onChange: OnChangeFn<ExpandedState>;\n renderContent: (row: Data) => ReactNode;\n columnOverrides?: Partial<ColumnDef<Data, unknown>>;\n};\n\nexport type DataTableSearchConfig = {\n placeholder?: string;\n label?: string;\n};\n\nexport type DataTableFiltersConfig = {\n initial: Record<string, unknown>;\n render: (\n filters: Record<string, unknown>,\n onChange: (next: Record<string, unknown>) => void,\n ) => ReactNode;\n};\n\nexport type DataTableTableConfig = Omit<TableProps, 'children' | 'classNames'>;\n\nexport type DataTableClassNames = {\n dataTable?: string;\n root?: string;\n viewport?: string;\n header?: string;\n sortButton?: string;\n sortIndicator?: string;\n expandButton?: string;\n slotRow?: string;\n bulkBar?: DataTableBulkBarClassNames;\n loading?: string;\n empty?: string;\n expandedContent?: string;\n skeleton?: string;\n table?: TableClassNames;\n};\n\ntype DataTableManagedOptions<Data> = Partial<\n Omit<\n TableOptions<Data>,\n | 'columns'\n | 'data'\n | 'onExpandedChange'\n | 'onPaginationChange'\n | 'onRowSelectionChange'\n | 'onSortingChange'\n >\n>;\n\nexport type DataTableExtraColumnConfig<Data> = {\n column: ColumnDef<Data, unknown>;\n position?: number;\n};\n\nexport type DataTableProps<Data> = {\n data: Data[];\n columns: ColumnDef<Data, unknown>[];\n extraColumns?: DataTableExtraColumnConfig<Data>[];\n sorting?: DataTableSortingConfig;\n pagination?: DataTablePaginationConfig;\n selection?: DataTableSelectionConfig<Data>;\n expansion?: DataTableExpansionConfig<Data>;\n loading?: boolean;\n skeleton?: number;\n onRefresh?: () => void | Promise<void>;\n slots?: DataTableSlots;\n classNames?: DataTableClassNames;\n options?: DataTableManagedOptions<Data>;\n labels?: Partial<DataTableLabels>;\n} & DataTableTableConfig;\n\nexport const DataTable = <Data,>({\n classNames,\n slots,\n loading,\n skeleton,\n pagination,\n selection,\n expansion,\n data,\n columns,\n extraColumns,\n sorting,\n onRefresh,\n options,\n labels,\n ...tableProps\n}: DataTableProps<Data>): ReactNode => {\n const { layout, contextValue, table, explicitSizeIds, columnHeaderClasses } =\n useDataTable({\n data,\n columns,\n extraColumns,\n sorting,\n onRefresh,\n options,\n labels,\n classNames,\n loading,\n skeleton,\n pagination,\n selection,\n expansion,\n ...tableProps,\n });\n\n return (\n <DataTableContextProvider\n value={contextValue as DataTableContextValue<unknown>}\n >\n <DataTableRootContainer busy={loading} classNames={classNames}>\n <DataTableSlotRow classNames={{ root: classNames?.slotRow }}>\n {slots?.top}\n </DataTableSlotRow>\n\n <DataTableViewport className={classNames?.viewport}>\n {skeleton != null && data.length === 0 ? (\n <DataTableSkeleton\n rows={skeleton}\n className={classNames?.skeleton}\n />\n ) : (\n <Table\n {...tableProps}\n layout={layout}\n classNames={classNames?.table}\n >\n <DataTableColGroup\n columns={table.getVisibleLeafColumns()}\n explicitSizeIds={explicitSizeIds}\n columnHeaderClasses={columnHeaderClasses}\n />\n <DataTableHeader\n loading={loading}\n classNames={classNames}\n headerGroups={table.getHeaderGroups()}\n explicitSizeIds={explicitSizeIds}\n />\n <DataTableBody\n rows={table.getRowModel().rows}\n colCount={table.getVisibleLeafColumns().length}\n loading={loading}\n empty={slots?.empty}\n emptyClassName={classNames?.empty}\n expandedContentClassName={classNames?.expandedContent}\n expansion={expansion}\n selection={selection}\n />\n </Table>\n )}\n </DataTableViewport>\n\n <DataTableSlotRow classNames={{ root: classNames?.slotRow }}>\n {slots?.bottom}\n </DataTableSlotRow>\n\n <DataTableBulkBar\n selectedIds={contextValue.selectedIds}\n className={classNames?.bulkBar}\n selection={selection}\n />\n </DataTableRootContainer>\n </DataTableContextProvider>\n );\n};\n"],"mappings":"8qBAuIA,MAAa,GAAoB,CAC/B,aACA,QACA,UACA,WACA,aACA,YACA,YACA,OACA,UACA,eACA,UACA,YACA,UACA,SACA,GAAG,KACkC,CACrC,GAAM,CAAE,SAAQ,eAAc,QAAO,kBAAiB,uBACpD,EAAa,CACb,OACA,UACA,eACA,UACA,YACA,UACA,SACA,aACA,UACA,WACA,aACA,YACA,YACA,GAAG,EACJ,CAAC,CAEF,OACE,EAAC,EAAD,CACE,MAAO,WAEP,EAAC,EAAD,CAAwB,KAAM,EAAqB,sBAAnD,CACE,EAAC,EAAD,CAAkB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,IACS,CAAA,CAEnB,EAAC,EAAD,CAAmB,UAAW,GAAY,kBACvC,GAAY,MAAQ,EAAK,SAAW,EACnC,EAAC,EAAD,CACE,KAAM,EACN,UAAW,GAAY,SACvB,CAAA,CAEF,EAAC,EAAD,CACE,GAAI,EACI,SACR,WAAY,GAAY,eAH1B,CAKE,EAAC,EAAD,CACE,QAAS,EAAM,uBAAuB,CACrB,kBACI,sBACrB,CAAA,CACF,EAAC,EAAD,CACW,UACG,aACZ,aAAc,EAAM,iBAAiB,CACpB,kBACjB,CAAA,CACF,EAAC,EAAD,CACE,KAAM,EAAM,aAAa,CAAC,KAC1B,SAAU,EAAM,uBAAuB,CAAC,OAC/B,UACT,MAAO,GAAO,MACd,eAAgB,GAAY,MAC5B,yBAA0B,GAAY,gBAC3B,YACA,YACX,CAAA,CACI,GAEQ,CAAA,CAEpB,EAAC,EAAD,CAAkB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,OACS,CAAA,CAEnB,EAAC,EAAD,CACE,YAAa,EAAa,YAC1B,UAAW,GAAY,QACZ,YACX,CAAA,CACqB,GACA,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";const t=(e,t)=>{if(t.has(e.id))return`${e.getSize()}px`},n=({columns:n,explicitSizeIds:r})=>n.some(e=>r.has(e.id)||e.
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";const t=(e,t)=>{if(t.has(e.id))return`${e.getSize()}px`},n=({columns:n,explicitSizeIds:r,columnHeaderClasses:i})=>n.some(e=>r.has(e.id)||i.has(e.id))?e(`colgroup`,{children:n.map(n=>e(`col`,{className:i.get(n.id),style:{width:t(n,r)}},n.id))}):null;export{n as DataTableColGroup};
|
|
2
2
|
//# sourceMappingURL=DataTableColGroup.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableColGroup.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableColGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { Column } from '@tanstack/react-table';\n\
|
|
1
|
+
{"version":3,"file":"DataTableColGroup.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableColGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { Column } from '@tanstack/react-table';\n\ntype DataTableColGroupProps<Data> = {\n columns: Column<Data, unknown>[];\n explicitSizeIds: Set<string>;\n columnHeaderClasses: Map<string, string>;\n};\n\nconst getColumnWidth = <Data,>(\n column: Column<Data, unknown>,\n explicitSizeIds: Set<string>,\n) => {\n if (!explicitSizeIds.has(column.id)) return undefined;\n return `${column.getSize()}px`;\n};\n\nexport const DataTableColGroup = <Data,>({\n columns,\n explicitSizeIds,\n columnHeaderClasses,\n}: DataTableColGroupProps<Data>): ReactNode => {\n const hasExplicitSizes = columns.some(\n (col) => explicitSizeIds.has(col.id) || columnHeaderClasses.has(col.id),\n );\n if (!hasExplicitSizes) return null;\n\n return (\n <colgroup>\n {columns.map((column) => (\n <col\n key={column.id}\n className={columnHeaderClasses.get(column.id)}\n style={{ width: getColumnWidth(column, explicitSizeIds) }}\n />\n ))}\n </colgroup>\n );\n};\n"],"mappings":"wCAUA,MAAM,GACJ,EACA,IACG,CACE,KAAgB,IAAI,EAAO,GAAG,CACnC,MAAO,GAAG,EAAO,SAAS,CAAC,KAGhB,GAA4B,CACvC,UACA,kBACA,yBAEyB,EAAQ,KAC9B,GAAQ,EAAgB,IAAI,EAAI,GAAG,EAAI,EAAoB,IAAI,EAAI,GAAG,CACxE,CAIC,EAAC,WAAD,CAAA,SACG,EAAQ,IAAK,GACZ,EAAC,MAAD,CAEE,UAAW,EAAoB,IAAI,EAAO,GAAG,CAC7C,MAAO,CAAE,MAAO,EAAe,EAAQ,EAAgB,CAAE,CACzD,CAHK,EAAO,GAGZ,CACF,CACO,CAAA,CAXiB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Checkbox as e}from"../../controls/checkbox/Checkbox.mjs";import{columnCheck as t,columnExpand as n,dataTableExpandButton as r}from"@mage-ui/styled-system/recipes";import{jsx as i}from"react/jsx-runtime";const a=n=>({id:`_select`,meta:{classNames:{header:t(),cell:t()}},size:48,header:({table:t})=>i(e,{"aria-label":n.selectAllRows,checked:t.getIsAllPageRowsSelected(),indeterminate:t.getIsSomePageRowsSelected()&&!t.getIsAllPageRowsSelected(),onChange:t.getToggleAllPageRowsSelectedHandler()}),cell:({row:t})=>i(e,{"aria-label":n.selectRow(t.index+1),checked:t.getIsSelected(),disabled:!t.getCanSelect(),onChange:t.getToggleSelectedHandler()})}),o=(e,t)=>({id:`_expand`,meta:{classNames:{header:n(),cell:n()}},size:48,header:()=>null,cell:({row:n})=>i(`button`,{className:e??r(),type:`button`,onClick:n.getToggleExpandedHandler(),"data-expanded":n.getIsExpanded()||void 0,"aria-expanded":n.getIsExpanded(),"aria-controls":`data-table-expanded-${n.id}`,"aria-label":n.getIsExpanded()?t.collapseRow:t.expandRow,children:i(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`currentColor`,"aria-hidden":`true`,focusable:`false`,children:i(`path`,{d:`M6 4l4 4-4 4`,stroke:`currentColor`,strokeWidth:`1.5`,fill:`none`,strokeLinecap:`round`,strokeLinejoin:`round`})})})});export{o as getDataTableExpandColumn,a as getDataTableSelectColumn};
|
|
1
|
+
import{Checkbox as e}from"../../controls/checkbox/Checkbox.mjs";import{columnCheck as t,columnExpand as n,dataTableExpandButton as r}from"@mage-ui/styled-system/recipes";import{jsx as i}from"react/jsx-runtime";const a=(n,r)=>({id:`_select`,meta:{classNames:{header:t(),cell:t()}},size:48,header:({table:t})=>i(e,{"aria-label":n.selectAllRows,checked:t.getIsAllPageRowsSelected(),indeterminate:t.getIsSomePageRowsSelected()&&!t.getIsAllPageRowsSelected(),onChange:t.getToggleAllPageRowsSelectedHandler()}),cell:({row:t})=>i(e,{"aria-label":n.selectRow(t.index+1),checked:t.getIsSelected(),disabled:!t.getCanSelect(),onChange:t.getToggleSelectedHandler()}),...r}),o=(e,t,a)=>({id:`_expand`,meta:{classNames:{header:n(),cell:n()}},size:48,header:()=>null,cell:({row:n})=>i(`button`,{className:e??r(),type:`button`,onClick:n.getToggleExpandedHandler(),"data-expanded":n.getIsExpanded()||void 0,"aria-expanded":n.getIsExpanded(),"aria-controls":`data-table-expanded-${n.id}`,"aria-label":n.getIsExpanded()?t.collapseRow:t.expandRow,children:i(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`currentColor`,"aria-hidden":`true`,focusable:`false`,children:i(`path`,{d:`M6 4l4 4-4 4`,stroke:`currentColor`,strokeWidth:`1.5`,fill:`none`,strokeLinecap:`round`,strokeLinejoin:`round`})})}),...a});export{o as getDataTableExpandColumn,a as getDataTableSelectColumn};
|
|
2
2
|
//# sourceMappingURL=DataTableColumns.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableColumns.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableColumns.tsx"],"sourcesContent":["import {\n columnCheck,\n columnExpand,\n dataTableExpandButton,\n} from '@mage-ui/styled-system/recipes';\nimport type { ColumnDef } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../controls/checkbox/Checkbox';\nimport type { DataTableLabels } from './useDataTableContext';\n\nexport const getDataTableSelectColumn = <Data,>(\n labels: DataTableLabels,\n): ColumnDef<Data, unknown> => ({\n id: '_select',\n meta: {\n classNames: {\n header: columnCheck(),\n cell: columnCheck(),\n },\n },\n size: 48,\n header: ({ table }) => {\n return (\n <Checkbox\n aria-label={labels.selectAllRows}\n checked={table.getIsAllPageRowsSelected()}\n indeterminate={\n table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()\n }\n onChange={table.getToggleAllPageRowsSelectedHandler()}\n />\n );\n },\n cell: ({ row }) => (\n <Checkbox\n aria-label={labels.selectRow(row.index + 1)}\n checked={row.getIsSelected()}\n disabled={!row.getCanSelect()}\n onChange={row.getToggleSelectedHandler()}\n />\n ),\n});\n\nexport const getDataTableExpandColumn = <Data,>(\n className: string | undefined,\n labels: DataTableLabels,\n): ColumnDef<Data, unknown> => ({\n id: '_expand',\n meta: {\n classNames: {\n header: columnExpand(),\n cell: columnExpand(),\n },\n },\n size: 48,\n header: () => null,\n cell: ({ row }) => (\n <button\n className={className ?? dataTableExpandButton()}\n type='button'\n onClick={row.getToggleExpandedHandler()}\n data-expanded={row.getIsExpanded() || undefined}\n aria-expanded={row.getIsExpanded()}\n aria-controls={`data-table-expanded-${row.id}`}\n aria-label={row.getIsExpanded() ? labels.collapseRow : labels.expandRow}\n >\n <svg\n width='16'\n height='16'\n viewBox='0 0 16 16'\n fill='currentColor'\n aria-hidden='true'\n focusable='false'\n >\n <path\n d='M6 4l4 4-4 4'\n stroke='currentColor'\n strokeWidth='1.5'\n fill='none'\n strokeLinecap='round'\n strokeLinejoin='round'\n />\n </svg>\n </button>\n ),\n});\n"],"mappings":"kNAUA,MAAa,
|
|
1
|
+
{"version":3,"file":"DataTableColumns.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableColumns.tsx"],"sourcesContent":["import {\n columnCheck,\n columnExpand,\n dataTableExpandButton,\n} from '@mage-ui/styled-system/recipes';\nimport type { ColumnDef } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../controls/checkbox/Checkbox';\nimport type { DataTableLabels } from './useDataTableContext';\n\nexport const getDataTableSelectColumn = <Data,>(\n labels: DataTableLabels,\n overrides?: Partial<ColumnDef<Data, unknown>>,\n): ColumnDef<Data, unknown> => ({\n id: '_select',\n meta: {\n classNames: {\n header: columnCheck(),\n cell: columnCheck(),\n },\n },\n size: 48,\n header: ({ table }) => {\n return (\n <Checkbox\n aria-label={labels.selectAllRows}\n checked={table.getIsAllPageRowsSelected()}\n indeterminate={\n table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()\n }\n onChange={table.getToggleAllPageRowsSelectedHandler()}\n />\n );\n },\n cell: ({ row }) => (\n <Checkbox\n aria-label={labels.selectRow(row.index + 1)}\n checked={row.getIsSelected()}\n disabled={!row.getCanSelect()}\n onChange={row.getToggleSelectedHandler()}\n />\n ),\n ...overrides,\n});\n\nexport const getDataTableExpandColumn = <Data,>(\n className: string | undefined,\n labels: DataTableLabels,\n overrides?: Partial<ColumnDef<Data, unknown>>,\n): ColumnDef<Data, unknown> => ({\n id: '_expand',\n meta: {\n classNames: {\n header: columnExpand(),\n cell: columnExpand(),\n },\n },\n size: 48,\n header: () => null,\n cell: ({ row }) => (\n <button\n className={className ?? dataTableExpandButton()}\n type='button'\n onClick={row.getToggleExpandedHandler()}\n data-expanded={row.getIsExpanded() || undefined}\n aria-expanded={row.getIsExpanded()}\n aria-controls={`data-table-expanded-${row.id}`}\n aria-label={row.getIsExpanded() ? labels.collapseRow : labels.expandRow}\n >\n <svg\n width='16'\n height='16'\n viewBox='0 0 16 16'\n fill='currentColor'\n aria-hidden='true'\n focusable='false'\n >\n <path\n d='M6 4l4 4-4 4'\n stroke='currentColor'\n strokeWidth='1.5'\n fill='none'\n strokeLinecap='round'\n strokeLinejoin='round'\n />\n </svg>\n </button>\n ),\n ...overrides,\n});\n"],"mappings":"kNAUA,MAAa,GACX,EACA,KAC8B,CAC9B,GAAI,UACJ,KAAM,CACJ,WAAY,CACV,OAAQ,GAAa,CACrB,KAAM,GAAa,CACpB,CACF,CACD,KAAM,GACN,QAAS,CAAE,WAEP,EAAC,EAAD,CACE,aAAY,EAAO,cACnB,QAAS,EAAM,0BAA0B,CACzC,cACE,EAAM,2BAA2B,EAAI,CAAC,EAAM,0BAA0B,CAExE,SAAU,EAAM,qCAAqC,CACrD,CAAA,CAGN,MAAO,CAAE,SACP,EAAC,EAAD,CACE,aAAY,EAAO,UAAU,EAAI,MAAQ,EAAE,CAC3C,QAAS,EAAI,eAAe,CAC5B,SAAU,CAAC,EAAI,cAAc,CAC7B,SAAU,EAAI,0BAA0B,CACxC,CAAA,CAEJ,GAAG,EACJ,EAEY,GACX,EACA,EACA,KAC8B,CAC9B,GAAI,UACJ,KAAM,CACJ,WAAY,CACV,OAAQ,GAAc,CACtB,KAAM,GAAc,CACrB,CACF,CACD,KAAM,GACN,WAAc,KACd,MAAO,CAAE,SACP,EAAC,SAAD,CACE,UAAW,GAAa,GAAuB,CAC/C,KAAK,SACL,QAAS,EAAI,0BAA0B,CACvC,gBAAe,EAAI,eAAe,EAAI,IAAA,GACtC,gBAAe,EAAI,eAAe,CAClC,gBAAe,uBAAuB,EAAI,KAC1C,aAAY,EAAI,eAAe,CAAG,EAAO,YAAc,EAAO,mBAE9D,EAAC,MAAD,CACE,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,eACL,cAAY,OACZ,UAAU,iBAEV,EAAC,OAAD,CACE,EAAE,eACF,OAAO,eACP,YAAY,MACZ,KAAK,OACL,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACC,CAAA,CAEX,GAAG,EACJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{DEFAULT_DATA_TABLE_LABELS as e}from"./useDataTableContext.mjs";import{getDataTableExpandColumn as t,getDataTableSelectColumn as n}from"./DataTableColumns.mjs";import{useCallback as r,useMemo as i}from"react";import{getCoreRowModel as a,getExpandedRowModel as o,useReactTable as s}from"@tanstack/react-table";const c=(e,t)=>{if(!t||t.length===0)return e;let n=e.map((e,t)=>({column:e,index:t})),r=t.map(({column:t,position:n},r)=>({column:t,position:n,index:e.length+r}));return[...n,...r].sort((e,t)=>{let n=e.position??e.index,r=t.position??t.index;return n===r?e.index-t.index:n-r}).map(({column:e})=>e)},l=({data:l,columns:u,extraColumns:d,sorting:f,pagination:p,selection:m,expansion:h,loading:g,onRefresh:_,options:v,classNames:y,labels:b,layout:x})=>{let S=x??`fixed`,C={...e,...b},w=m?.isRowDisabled,T=p?{pageIndex:Math.max(p.currentPage-1,0),pageSize:p.pageSize}:void 0,E=i(()=>[...h?[t(y?.expandButton,C)]:[],...m?[n(C)]:[]],[h,m,y?.expandButton,C]),D=i(()=>[...E,...c(u,d)],[E,u,d]),O=s({data:l,columns:D,getCoreRowModel:a(),enableSorting:!!f,...f&&{manualSorting:!0,onSortingChange:f.onChange},...p&&{manualPagination:!0,onPaginationChange:p.onChange,pageCount:p.pageCount,...p.rowCount!==void 0&&{rowCount:p.rowCount}},...m&&{enableRowSelection:w?e=>!w(e.original):!0,onRowSelectionChange:m.onChange,...m.getRowId&&{getRowId:e=>m.getRowId?.(e)??``}},...h&&{enableExpanding:!0,getRowCanExpand:()=>!0,getExpandedRowModel:o(),onExpandedChange:h.onChange},...v,state:{...f&&{sorting:f.state},...T&&{pagination:T},...m&&{rowSelection:m.state},...h&&{expanded:h.state}}}),k=i(()=>m?Object.entries(m.state).filter(([,e])=>e).map(([e])=>e):[],[m?.state]),A=r(()=>{_?.()},[_]);return{layout:S,contextValue:i(()=>({table:O,refresh:A,loading:g,selectedIds:k,labels:C,sorting:f,pagination:p,selection:m,expansion:h}),[O,A,g,k,C,f,p,m,h]),table:O,explicitSizeIds:i(()=>{let e=new Set;for(let t of
|
|
1
|
+
import{DEFAULT_DATA_TABLE_LABELS as e}from"./useDataTableContext.mjs";import{getDataTableExpandColumn as t,getDataTableSelectColumn as n}from"./DataTableColumns.mjs";import{useCallback as r,useMemo as i}from"react";import{getCoreRowModel as a,getExpandedRowModel as o,useReactTable as s}from"@tanstack/react-table";const c=(e,t)=>{if(!t||t.length===0)return e;let n=e.map((e,t)=>({column:e,index:t})),r=t.map(({column:t,position:n},r)=>({column:t,position:n,index:e.length+r}));return[...n,...r].sort((e,t)=>{let n=e.position??e.index,r=t.position??t.index;return n===r?e.index-t.index:n-r}).map(({column:e})=>e)},l=({data:l,columns:u,extraColumns:d,sorting:f,pagination:p,selection:m,expansion:h,loading:g,onRefresh:_,options:v,classNames:y,labels:b,layout:x})=>{let S=x??`fixed`,C={...e,...b},w=m?.isRowDisabled,T=p?{pageIndex:Math.max(p.currentPage-1,0),pageSize:p.pageSize}:void 0,E=i(()=>[...h?[t(y?.expandButton,C,h.columnOverrides)]:[],...m?[n(C,m.columnOverrides)]:[]],[h,m,y?.expandButton,C]),D=i(()=>[...E,...c(u,d)],[E,u,d]),O=s({data:l,columns:D,getCoreRowModel:a(),enableSorting:!!f,...f&&{manualSorting:!0,onSortingChange:f.onChange},...p&&{manualPagination:!0,onPaginationChange:p.onChange,pageCount:p.pageCount,...p.rowCount!==void 0&&{rowCount:p.rowCount}},...m&&{enableRowSelection:w?e=>!w(e.original):!0,onRowSelectionChange:m.onChange,...m.getRowId&&{getRowId:e=>m.getRowId?.(e)??``}},...h&&{enableExpanding:!0,getRowCanExpand:()=>!0,getExpandedRowModel:o(),onExpandedChange:h.onChange},...v,state:{...f&&{sorting:f.state},...T&&{pagination:T},...m&&{rowSelection:m.state},...h&&{expanded:h.state}}}),k=i(()=>m?Object.entries(m.state).filter(([,e])=>e).map(([e])=>e):[],[m?.state]),A=r(()=>{_?.()},[_]);return{layout:S,contextValue:i(()=>({table:O,refresh:A,loading:g,selectedIds:k,labels:C,sorting:f,pagination:p,selection:m,expansion:h}),[O,A,g,k,C,f,p,m,h]),table:O,explicitSizeIds:i(()=>{let e=new Set;for(let t of D)if(t.size!=null){let n=t.id??(`accessorKey`in t&&typeof t.accessorKey==`string`?t.accessorKey:void 0);n&&e.add(n)}return e},[D]),columnHeaderClasses:i(()=>{let e=new Map;for(let t of D){let n=t.meta?.classNames?.header;if(n){let r=t.id??(`accessorKey`in t&&typeof t.accessorKey==`string`?t.accessorKey:void 0);r&&e.set(r,n)}}return e},[D])}};export{l as useDataTable};
|
|
2
2
|
//# sourceMappingURL=useDataTable.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTable.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport type { ColumnDef } from '@tanstack/react-table';\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport type {
|
|
1
|
+
{"version":3,"file":"useDataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTable.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport type { ColumnDef } from '@tanstack/react-table';\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport type {\n DataTableColumnMeta,\n DataTableExtraColumnConfig,\n DataTableProps,\n} from './DataTable';\nimport {\n getDataTableExpandColumn,\n getDataTableSelectColumn,\n} from './DataTableColumns';\nimport {\n type DataTableContextValue,\n DEFAULT_DATA_TABLE_LABELS,\n} from './useDataTableContext';\n\ntype UseDataTableResult<Data> = {\n layout: 'auto' | 'fixed';\n contextValue: DataTableContextValue<Data>;\n table: DataTableContextValue<Data>['table'];\n explicitSizeIds: Set<string>;\n columnHeaderClasses: Map<string, string>;\n};\n\ntype PositionedColumn<Data> = {\n column: ColumnDef<Data, unknown>;\n position?: number;\n index: number;\n};\n\nconst resolveColumns = <Data>(\n baseColumns: ColumnDef<Data, unknown>[],\n extraColumns?: DataTableExtraColumnConfig<Data>[],\n): ColumnDef<Data, unknown>[] => {\n if (!extraColumns || extraColumns.length === 0) {\n return baseColumns;\n }\n\n const baseEntries: PositionedColumn<Data>[] = baseColumns.map(\n (column, index) => ({ column, index }),\n );\n\n const extraEntries: PositionedColumn<Data>[] = extraColumns.map(\n ({ column, position }, index) => ({\n column,\n position,\n index: baseColumns.length + index,\n }),\n );\n\n return [...baseEntries, ...extraEntries]\n .sort((left, right) => {\n const leftOrder = left.position ?? left.index;\n const rightOrder = right.position ?? right.index;\n\n if (leftOrder !== rightOrder) {\n return leftOrder - rightOrder;\n }\n\n return left.index - right.index;\n })\n .map(({ column }) => column);\n};\n\nexport const useDataTable = <Data>({\n data,\n columns,\n extraColumns,\n sorting,\n pagination,\n selection,\n expansion,\n loading,\n onRefresh,\n options,\n classNames,\n labels,\n layout: providedLayout,\n}: DataTableProps<Data>): UseDataTableResult<Data> => {\n const layout = providedLayout ?? 'fixed';\n const resolvedLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...labels };\n const isRowDisabled = selection?.isRowDisabled;\n const paginationState = pagination\n ? {\n pageIndex: Math.max(pagination.currentPage - 1, 0),\n pageSize: pagination.pageSize,\n }\n : undefined;\n\n const builtInColumns = useMemo(\n () => [\n ...(expansion\n ? [\n getDataTableExpandColumn<Data>(\n classNames?.expandButton,\n resolvedLabels,\n expansion.columnOverrides,\n ),\n ]\n : []),\n ...(selection\n ? [\n getDataTableSelectColumn<Data>(\n resolvedLabels,\n selection.columnOverrides,\n ),\n ]\n : []),\n ],\n [expansion, selection, classNames?.expandButton, resolvedLabels],\n );\n\n const allColumns = useMemo(\n () => [...builtInColumns, ...resolveColumns(columns, extraColumns)],\n [builtInColumns, columns, extraColumns],\n );\n\n const table = useReactTable<Data>({\n data,\n columns: allColumns,\n getCoreRowModel: getCoreRowModel(),\n enableSorting: Boolean(sorting),\n ...(sorting && {\n manualSorting: true,\n onSortingChange: sorting.onChange,\n }),\n ...(pagination && {\n manualPagination: true,\n onPaginationChange: pagination.onChange,\n pageCount: pagination.pageCount,\n ...(pagination.rowCount !== undefined && {\n rowCount: pagination.rowCount,\n }),\n }),\n ...(selection && {\n enableRowSelection: isRowDisabled\n ? (row) => !isRowDisabled(row.original)\n : true,\n onRowSelectionChange: selection.onChange,\n ...(selection.getRowId && {\n getRowId: (row: Data) => selection.getRowId?.(row) ?? '',\n }),\n }),\n ...(expansion && {\n enableExpanding: true,\n getRowCanExpand: () => true,\n getExpandedRowModel: getExpandedRowModel(),\n onExpandedChange: expansion.onChange,\n }),\n ...options,\n state: {\n ...(sorting && { sorting: sorting.state }),\n ...(paginationState && { pagination: paginationState }),\n ...(selection && { rowSelection: selection.state }),\n ...(expansion && { expanded: expansion.state }),\n },\n });\n\n const selectedIds = useMemo(() => {\n return selection\n ? Object.entries(selection.state)\n .filter(([, isSelected]) => isSelected)\n .map(([id]) => id)\n : [];\n }, [selection?.state]);\n\n const refresh = useCallback(() => {\n void onRefresh?.();\n }, [onRefresh]);\n\n const contextValue = useMemo(\n () =>\n ({\n table,\n refresh,\n loading,\n selectedIds,\n labels: resolvedLabels,\n sorting,\n pagination,\n selection,\n expansion,\n }) satisfies DataTableContextValue<Data>,\n [\n table,\n refresh,\n loading,\n selectedIds,\n resolvedLabels,\n sorting,\n pagination,\n selection,\n expansion,\n ],\n );\n\n const explicitSizeIds = useMemo(() => {\n const ids = new Set<string>();\n for (const colDef of allColumns) {\n if (colDef.size != null) {\n const id =\n colDef.id ??\n ('accessorKey' in colDef && typeof colDef.accessorKey === 'string'\n ? colDef.accessorKey\n : undefined);\n if (id) ids.add(id);\n }\n }\n return ids;\n }, [allColumns]);\n\n const columnHeaderClasses = useMemo(() => {\n const map = new Map<string, string>();\n for (const colDef of allColumns) {\n const cls = (colDef.meta as DataTableColumnMeta | undefined)?.classNames\n ?.header;\n if (cls) {\n const id =\n colDef.id ??\n ('accessorKey' in colDef && typeof colDef.accessorKey === 'string'\n ? colDef.accessorKey\n : undefined);\n if (id) map.set(id, cls);\n }\n }\n return map;\n }, [allColumns]);\n\n return {\n layout,\n contextValue,\n table,\n explicitSizeIds,\n columnHeaderClasses,\n };\n};\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.96",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.21.4",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/
|
|
29
|
-
"@mage-ui/
|
|
28
|
+
"@mage-ui/preset": "1.0.96",
|
|
29
|
+
"@mage-ui/styled-system": "1.0.8"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@dnd-kit/core": "^6.3.1",
|