@mage-ui/components 1.0.91 → 1.0.93
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.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/DataTableHeader.mjs +1 -1
- package/dist/components/data-display/datatables/DataTableHeader.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 +2 -2
|
@@ -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}=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(),
|
|
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};
|
|
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 } = 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
|
|
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 } = 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 />\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":"8qBAqIA,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,mBAAoB,EAAa,CACpE,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,kBACjB,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=({columns:
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";const t=(e,t)=>{if(e.columnDef.meta?.classNames?.header==null&&t.has(e.id))return`${e.getSize()}px`},n=({columns:n,explicitSizeIds:r})=>n.some(e=>r.has(e.id)||e.columnDef.meta?.classNames?.header!=null)?e(`colgroup`,{children:n.map(n=>e(`col`,{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\nimport type { DataTableColumnMeta } from './DataTable';\n\ntype DataTableColGroupProps<Data> = {\n columns: Column<Data, unknown>[];\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\nimport type { DataTableColumnMeta } from './DataTable';\n\ntype DataTableColGroupProps<Data> = {\n columns: Column<Data, unknown>[];\n explicitSizeIds: Set<string>;\n};\n\nconst getColumnWidth = <Data,>(\n column: Column<Data, unknown>,\n explicitSizeIds: Set<string>,\n) => {\n const meta = column.columnDef.meta as DataTableColumnMeta | undefined;\n if (meta?.classNames?.header != null) return undefined;\n if (!explicitSizeIds.has(column.id)) return undefined;\n return `${column.getSize()}px`;\n};\n\nexport const DataTableColGroup = <Data,>({\n columns,\n explicitSizeIds,\n}: DataTableColGroupProps<Data>): ReactNode => {\n const hasExplicitSizes = columns.some(\n (col) =>\n explicitSizeIds.has(col.id) ||\n (col.columnDef.meta as DataTableColumnMeta | undefined)?.classNames\n ?.header != null,\n );\n if (!hasExplicitSizes) return null;\n\n return (\n <colgroup>\n {columns.map((column) => (\n <col\n key={column.id}\n style={{ width: getColumnWidth(column, explicitSizeIds) }}\n />\n ))}\n </colgroup>\n );\n};\n"],"mappings":"wCAWA,MAAM,GACJ,EACA,IACG,CACU,KAAO,UAAU,MACpB,YAAY,QAAU,MAC3B,EAAgB,IAAI,EAAO,GAAG,CACnC,MAAO,GAAG,EAAO,SAAS,CAAC,KAGhB,GAA4B,CACvC,UACA,qBAEyB,EAAQ,KAC9B,GACC,EAAgB,IAAI,EAAI,GAAG,EAC1B,EAAI,UAAU,MAA0C,YACrD,QAAU,KACjB,CAIC,EAAC,WAAD,CAAA,SACG,EAAQ,IAAK,GACZ,EAAC,MAAD,CAEE,MAAO,CAAE,MAAO,EAAe,EAAQ,EAAgB,CAAE,CACzD,CAFK,EAAO,GAEZ,CACF,CACO,CAAA,CAViB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Button as e}from"../../buttons/button/Button.mjs";import{VisuallyHidden as t}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{Table as n}from"../table/Table.mjs";import{Icon as r}from"../icons/icon/Icon.mjs";import{useDataTableContext as i}from"./useDataTableContext.mjs";import{cx as a}from"@mage-ui/styled-system/css";import{dataTableHeader as o,dataTableLoading as s,dataTableSortButton as c,dataTableSortButtonIndicator as l}from"@mage-ui/styled-system/recipes";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{flexRender as f}from"@tanstack/react-table";const p=e=>e===`asc`?`ascending`:e===`desc`?`descending`:`none`,m=({sorted:e,className:t})=>u(r,{path:`/icons/sprite-mage.svg`,name:e===`asc`?`mage-datatable-sort-arrow-narrow-up`:e===`desc`?`mage-datatable-sort-arrow-narrow-down`:`mage-datatable-sort-switch-vertical-02`,classNames:{icon:t??l()}}),h=({header:n,className:r})=>{let{labels:o}=i(),s=n.column.getIsSorted();return d(e,{classNames:{button:a(r??c(),`group`)},onClick:n.column.getToggleSortingHandler(),endSlot:u(m,{sorted:s}),children:[f(n.column.columnDef.header,n.getContext()),u(t,{children:s===`asc`?o.sortedAscending:s===`desc`?o.sortedDescending:o.activateToSort})]})},g=({header:e,sortButtonClassName:t})=>e.isPlaceholder?null:e.column.getCanSort()?u(h,{header:e,className:t}):f(e.column.columnDef.header,e.getContext()),_=({header:e,
|
|
1
|
+
import{Button as e}from"../../buttons/button/Button.mjs";import{VisuallyHidden as t}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{Table as n}from"../table/Table.mjs";import{Icon as r}from"../icons/icon/Icon.mjs";import{useDataTableContext as i}from"./useDataTableContext.mjs";import{cx as a}from"@mage-ui/styled-system/css";import{dataTableHeader as o,dataTableLoading as s,dataTableSortButton as c,dataTableSortButtonIndicator as l}from"@mage-ui/styled-system/recipes";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{flexRender as f}from"@tanstack/react-table";const p=e=>e===`asc`?`ascending`:e===`desc`?`descending`:`none`,m=({sorted:e,className:t})=>u(r,{path:`/icons/sprite-mage.svg`,name:e===`asc`?`mage-datatable-sort-arrow-narrow-up`:e===`desc`?`mage-datatable-sort-arrow-narrow-down`:`mage-datatable-sort-switch-vertical-02`,classNames:{icon:t??l()}}),h=({header:n,className:r})=>{let{labels:o}=i(),s=n.column.getIsSorted();return d(e,{classNames:{button:a(r??c(),`group`)},onClick:n.column.getToggleSortingHandler(),endSlot:u(m,{sorted:s}),children:[f(n.column.columnDef.header,n.getContext()),u(t,{children:s===`asc`?o.sortedAscending:s===`desc`?o.sortedDescending:o.activateToSort})]})},g=({header:e,sortButtonClassName:t})=>e.isPlaceholder?null:e.column.getCanSort()?u(h,{header:e,className:t}):f(e.column.columnDef.header,e.getContext()),_=(e,t)=>{if(e.column.columnDef.meta?.classNames?.header==null&&t.has(e.column.id))return`${e.getSize()}px`},v=({header:e,explicitSizeIds:t,classNames:r})=>{let i=e.column.getCanSort(),a=e.column.getIsSorted(),o=e.column.columnDef.meta,s=_(e,t);return u(n.HeaderCell,{classNames:o?.classNames?.header?{th:o.classNames.header}:void 0,scope:`col`,style:{width:s},"aria-sort":i?p(a):void 0,"data-sortable":i||void 0,"data-sort":a||void 0,children:u(g,{header:e,sortButtonClassName:r?.sortButton})})},y=({headerGroups:e,explicitSizeIds:t,loading:r,classNames:i})=>u(n.Head,{classNames:{thead:a(i?.header??o(),r?i?.loading??s():void 0)},"data-loading":r||void 0,children:e.map(e=>u(n.Row,{children:e.headers.map(e=>u(v,{header:e,explicitSizeIds:t,classNames:i},e.id))},e.id))});export{y as DataTableHeader};
|
|
2
2
|
//# sourceMappingURL=DataTableHeader.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableHeader.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dataTableHeader,\n dataTableLoading,\n dataTableSortButton,\n dataTableSortButtonIndicator,\n} from '@mage-ui/styled-system/recipes';\nimport {\n flexRender,\n type Header,\n type HeaderGroup,\n} from '@tanstack/react-table';\nimport { Button } from '@/components/buttons';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { Icon } from '../icons/icon/Icon';\nimport { Table } from '../table/Table';\nimport type { DataTableClassNames, DataTableColumnMeta } from './DataTable';\nimport { useDataTableContext } from './useDataTableContext';\n\ntype DataTableHeaderProps<Data> = {\n headerGroups: HeaderGroup<Data>[];\n
|
|
1
|
+
{"version":3,"file":"DataTableHeader.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dataTableHeader,\n dataTableLoading,\n dataTableSortButton,\n dataTableSortButtonIndicator,\n} from '@mage-ui/styled-system/recipes';\nimport {\n flexRender,\n type Header,\n type HeaderGroup,\n} from '@tanstack/react-table';\nimport { Button } from '@/components/buttons';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { Icon } from '../icons/icon/Icon';\nimport { Table } from '../table/Table';\nimport type { DataTableClassNames, DataTableColumnMeta } from './DataTable';\nimport { useDataTableContext } from './useDataTableContext';\n\ntype DataTableHeaderProps<Data> = {\n headerGroups: HeaderGroup<Data>[];\n explicitSizeIds: Set<string>;\n loading?: boolean;\n classNames?: Pick<DataTableClassNames, 'header' | 'loading' | 'sortButton'>;\n};\n\nconst getAriaSort = (sorted: false | 'asc' | 'desc') => {\n if (sorted === 'asc') return 'ascending';\n if (sorted === 'desc') return 'descending';\n return 'none';\n};\n\nconst SortIndicator = ({\n sorted,\n className,\n}: {\n sorted: false | 'asc' | 'desc';\n className?: string;\n}) => (\n <Icon\n path='/icons/sprite-mage.svg'\n name={\n sorted === 'asc'\n ? 'mage-datatable-sort-arrow-narrow-up'\n : sorted === 'desc'\n ? 'mage-datatable-sort-arrow-narrow-down'\n : 'mage-datatable-sort-switch-vertical-02'\n }\n classNames={{\n icon: className ?? dataTableSortButtonIndicator(),\n }}\n />\n);\n\nconst SortButton = <Data,>({\n header,\n className,\n}: {\n header: Header<Data, unknown>;\n className?: string;\n}): ReactNode => {\n const { labels } = useDataTableContext();\n const sorted = header.column.getIsSorted();\n\n const getSortStatusText = () => {\n if (sorted === 'asc') return labels.sortedAscending;\n if (sorted === 'desc') return labels.sortedDescending;\n return labels.activateToSort;\n };\n\n return (\n <Button\n classNames={{\n button: cx(className ?? dataTableSortButton(), 'group'),\n }}\n onClick={header.column.getToggleSortingHandler()}\n endSlot={<SortIndicator sorted={sorted} />}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n <VisuallyHidden>{getSortStatusText()}</VisuallyHidden>\n </Button>\n );\n};\n\nconst HeaderCellContent = <Data,>({\n header,\n sortButtonClassName,\n}: {\n header: Header<Data, unknown>;\n sortButtonClassName?: string;\n}): ReactNode => {\n if (header.isPlaceholder) return null;\n\n if (header.column.getCanSort()) {\n return <SortButton header={header} className={sortButtonClassName} />;\n }\n\n return flexRender(header.column.columnDef.header, header.getContext());\n};\n\nconst getHeaderWidth = <Data,>(\n header: Header<Data, unknown>,\n explicitSizeIds: Set<string>,\n) => {\n const meta = header.column.columnDef.meta as DataTableColumnMeta | undefined;\n if (meta?.classNames?.header != null) return undefined;\n if (!explicitSizeIds.has(header.column.id)) return undefined;\n return `${header.getSize()}px`;\n};\n\nconst HeaderCell = <Data,>({\n header,\n explicitSizeIds,\n classNames,\n}: {\n header: Header<Data, unknown>;\n explicitSizeIds: Set<string>;\n classNames?: Pick<DataTableClassNames, 'sortButton'>;\n}): ReactNode => {\n const canSort = header.column.getCanSort();\n const sorted = header.column.getIsSorted();\n const columnMeta = header.column.columnDef.meta as\n | DataTableColumnMeta\n | undefined;\n const width = getHeaderWidth(header, explicitSizeIds);\n\n return (\n <Table.HeaderCell\n classNames={\n columnMeta?.classNames?.header\n ? { th: columnMeta.classNames.header }\n : undefined\n }\n scope='col'\n style={{ width }}\n aria-sort={canSort ? getAriaSort(sorted) : undefined}\n data-sortable={canSort || undefined}\n data-sort={(sorted || undefined) as string | undefined}\n >\n <HeaderCellContent\n header={header}\n sortButtonClassName={classNames?.sortButton}\n />\n </Table.HeaderCell>\n );\n};\n\nexport const DataTableHeader = <Data,>({\n headerGroups,\n explicitSizeIds,\n loading,\n classNames,\n}: DataTableHeaderProps<Data>): ReactNode => (\n <Table.Head\n classNames={{\n thead: cx(\n classNames?.header ?? dataTableHeader(),\n loading ? (classNames?.loading ?? dataTableLoading()) : undefined,\n ),\n }}\n data-loading={loading || undefined}\n >\n {headerGroups.map((headerGroup) => (\n <Table.Row key={headerGroup.id}>\n {headerGroup.headers.map((header) => (\n <HeaderCell\n key={header.id}\n header={header}\n explicitSizeIds={explicitSizeIds}\n classNames={classNames}\n />\n ))}\n </Table.Row>\n ))}\n </Table.Head>\n);\n"],"mappings":"wkBA6BA,MAAM,EAAe,GACf,IAAW,MAAc,YACzB,IAAW,OAAe,aACvB,OAGH,GAAiB,CACrB,SACA,eAKA,EAAC,EAAD,CACE,KAAK,yBACL,KACE,IAAW,MACP,sCACA,IAAW,OACT,wCACA,yCAER,WAAY,CACV,KAAM,GAAa,GAA8B,CAClD,CACD,CAAA,CAGE,GAAqB,CACzB,SACA,eAIe,CACf,GAAM,CAAE,UAAW,GAAqB,CAClC,EAAS,EAAO,OAAO,aAAa,CAQ1C,OACE,EAAC,EAAD,CACE,WAAY,CACV,OAAQ,EAAG,GAAa,GAAqB,CAAE,QAAQ,CACxD,CACD,QAAS,EAAO,OAAO,yBAAyB,CAChD,QAAS,EAAC,EAAD,CAAuB,SAAU,CAAA,UAL5C,CAOG,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAChE,EAAC,EAAD,CAAA,SAdE,IAAW,MAAc,EAAO,gBAChC,IAAW,OAAe,EAAO,iBAC9B,EAAO,eAY0C,CAAA,CAC/C,IAIP,GAA4B,CAChC,SACA,yBAKI,EAAO,cAAsB,KAE7B,EAAO,OAAO,YAAY,CACrB,EAAC,EAAD,CAAoB,SAAQ,UAAW,EAAuB,CAAA,CAGhE,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAGlE,GACJ,EACA,IACG,CACU,KAAO,OAAO,UAAU,MAC3B,YAAY,QAAU,MAC3B,EAAgB,IAAI,EAAO,OAAO,GAAG,CAC1C,MAAO,GAAG,EAAO,SAAS,CAAC,KAGvB,GAAqB,CACzB,SACA,kBACA,gBAKe,CACf,IAAM,EAAU,EAAO,OAAO,YAAY,CACpC,EAAS,EAAO,OAAO,aAAa,CACpC,EAAa,EAAO,OAAO,UAAU,KAGrC,EAAQ,EAAe,EAAQ,EAAgB,CAErD,OACE,EAAC,EAAM,WAAP,CACE,WACE,GAAY,YAAY,OACpB,CAAE,GAAI,EAAW,WAAW,OAAQ,CACpC,IAAA,GAEN,MAAM,MACN,MAAO,CAAE,QAAO,CAChB,YAAW,EAAU,EAAY,EAAO,CAAG,IAAA,GAC3C,gBAAe,GAAW,IAAA,GAC1B,YAAY,GAAU,IAAA,YAEtB,EAAC,EAAD,CACU,SACR,oBAAqB,GAAY,WACjC,CAAA,CACe,CAAA,EAIV,GAA0B,CACrC,eACA,kBACA,UACA,gBAEA,EAAC,EAAM,KAAP,CACE,WAAY,CACV,MAAO,EACL,GAAY,QAAU,GAAiB,CACvC,EAAW,GAAY,SAAW,GAAkB,CAAI,IAAA,GACzD,CACF,CACD,eAAc,GAAW,IAAA,YAExB,EAAa,IAAK,GACjB,EAAC,EAAM,IAAP,CAAA,SACG,EAAY,QAAQ,IAAK,GACxB,EAAC,EAAD,CAEU,SACS,kBACL,aACZ,CAJK,EAAO,GAIZ,CACF,CACQ,CATI,EAAY,GAShB,CACZ,CACS,CAAA"}
|
|
@@ -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=s({data:l,columns:i(()=>[...E,...c(u,d)],[E,u,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}}}),O=i(()=>m?Object.entries(m.state).filter(([,e])=>e).map(([e])=>e):[],[m?.state]),k=r(()=>{_?.()},[_]);return{layout:S,contextValue:i(()=>({table:D,refresh:k,loading:g,selectedIds:O,labels:C,sorting:f,pagination:p,selection:m,expansion:h}),[D,k,g,O,C,f,p,m,h]),table:D}};export{l as useDataTable};
|
|
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=s({data:l,columns:i(()=>[...E,...c(u,d)],[E,u,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}}}),O=i(()=>m?Object.entries(m.state).filter(([,e])=>e).map(([e])=>e):[],[m?.state]),k=r(()=>{_?.()},[_]);return{layout:S,contextValue:i(()=>({table:D,refresh:k,loading:g,selectedIds:O,labels:C,sorting:f,pagination:p,selection:m,expansion:h}),[D,k,g,O,C,f,p,m,h]),table:D,explicitSizeIds:i(()=>{let e=new Set;for(let t of u)`size`in t&&(`accessorKey`in t&&t.accessorKey?e.add(String(t.accessorKey).replaceAll(`.`,`_`)):t.id&&e.add(t.id));return e},[u])}};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 { DataTableExtraColumnConfig, DataTableProps } 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};\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 ),\n ]\n : []),\n ...(selection ? [getDataTableSelectColumn<Data>(resolvedLabels)] : []),\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 return {\n layout,\n contextValue,\n table,\n };\n};\n"],"mappings":"
|
|
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 { DataTableExtraColumnConfig, DataTableProps } 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};\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 ),\n ]\n : []),\n ...(selection ? [getDataTableSelectColumn<Data>(resolvedLabels)] : []),\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 col of columns) {\n if (!('size' in col)) continue;\n if ('accessorKey' in col && col.accessorKey) {\n ids.add(String(col.accessorKey).replaceAll('.', '_'));\n } else if (col.id) {\n ids.add(col.id);\n }\n }\n return ids;\n }, [columns]);\n\n return {\n layout,\n contextValue,\n table,\n explicitSizeIds,\n };\n};\n"],"mappings":"2TAgCA,MAAM,GACJ,EACA,IAC+B,CAC/B,GAAI,CAAC,GAAgB,EAAa,SAAW,EAC3C,OAAO,EAGT,IAAM,EAAwC,EAAY,KACvD,EAAQ,KAAW,CAAE,SAAQ,QAAO,EACtC,CAEK,EAAyC,EAAa,KACzD,CAAE,SAAQ,YAAY,KAAW,CAChC,SACA,WACA,MAAO,EAAY,OAAS,EAC7B,EACF,CAED,MAAO,CAAC,GAAG,EAAa,GAAG,EAAa,CACrC,MAAM,EAAM,IAAU,CACrB,IAAM,EAAY,EAAK,UAAY,EAAK,MAClC,EAAa,EAAM,UAAY,EAAM,MAM3C,OAJI,IAAc,EAIX,EAAK,MAAQ,EAAM,MAHjB,EAAY,GAIrB,CACD,KAAK,CAAE,YAAa,EAAO,EAGnB,GAAsB,CACjC,OACA,UACA,eACA,UACA,aACA,YACA,YACA,UACA,YACA,UACA,aACA,SACA,OAAQ,KAC4C,CACpD,IAAM,EAAS,GAAkB,QAC3B,EAAiB,CAAE,GAAG,EAA2B,GAAG,EAAQ,CAC5D,EAAgB,GAAW,cAC3B,EAAkB,EACpB,CACE,UAAW,KAAK,IAAI,EAAW,YAAc,EAAG,EAAE,CAClD,SAAU,EAAW,SACtB,CACD,IAAA,GAEE,EAAiB,MACf,CACJ,GAAI,EACA,CACE,EACE,GAAY,aACZ,EACD,CACF,CACD,EAAE,CACN,GAAI,EAAY,CAAC,EAA+B,EAAe,CAAC,CAAG,EAAE,CACtE,CACD,CAAC,EAAW,EAAW,GAAY,aAAc,EAAe,CACjE,CAOK,EAAQ,EAAoB,CAChC,OACA,QAPiB,MACX,CAAC,GAAG,EAAgB,GAAG,EAAe,EAAS,EAAa,CAAC,CACnE,CAAC,EAAgB,EAAS,EAAa,CACxC,CAKC,gBAAiB,GAAiB,CAClC,cAAe,EAAQ,EACvB,GAAI,GAAW,CACb,cAAe,GACf,gBAAiB,EAAQ,SAC1B,CACD,GAAI,GAAc,CAChB,iBAAkB,GAClB,mBAAoB,EAAW,SAC/B,UAAW,EAAW,UACtB,GAAI,EAAW,WAAa,IAAA,IAAa,CACvC,SAAU,EAAW,SACtB,CACF,CACD,GAAI,GAAa,CACf,mBAAoB,EACf,GAAQ,CAAC,EAAc,EAAI,SAAS,CACrC,GACJ,qBAAsB,EAAU,SAChC,GAAI,EAAU,UAAY,CACxB,SAAW,GAAc,EAAU,WAAW,EAAI,EAAI,GACvD,CACF,CACD,GAAI,GAAa,CACf,gBAAiB,GACjB,oBAAuB,GACvB,oBAAqB,GAAqB,CAC1C,iBAAkB,EAAU,SAC7B,CACD,GAAG,EACH,MAAO,CACL,GAAI,GAAW,CAAE,QAAS,EAAQ,MAAO,CACzC,GAAI,GAAmB,CAAE,WAAY,EAAiB,CACtD,GAAI,GAAa,CAAE,aAAc,EAAU,MAAO,CAClD,GAAI,GAAa,CAAE,SAAU,EAAU,MAAO,CAC/C,CACF,CAAC,CAEI,EAAc,MACX,EACH,OAAO,QAAQ,EAAU,MAAM,CAC5B,QAAQ,EAAG,KAAgB,EAAW,CACtC,KAAK,CAAC,KAAQ,EAAG,CACpB,EAAE,CACL,CAAC,GAAW,MAAM,CAAC,CAEhB,EAAU,MAAkB,CAC3B,KAAa,EACjB,CAAC,EAAU,CAAC,CAyCf,MAAO,CACL,SACA,aAzCmB,OAEhB,CACC,QACA,UACA,UACA,cACA,OAAQ,EACR,UACA,aACA,YACA,YACD,EACH,CACE,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CACF,CAkBC,QACA,gBAjBsB,MAAc,CACpC,IAAM,EAAM,IAAI,IAChB,IAAK,IAAM,KAAO,EACV,SAAU,IACZ,gBAAiB,GAAO,EAAI,YAC9B,EAAI,IAAI,OAAO,EAAI,YAAY,CAAC,WAAW,IAAK,IAAI,CAAC,CAC5C,EAAI,IACb,EAAI,IAAI,EAAI,GAAG,EAGnB,OAAO,GACN,CAAC,EAAQ,CAAC,CAOZ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.93",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.21.4",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/preset": "1.0.
|
|
28
|
+
"@mage-ui/preset": "1.0.93",
|
|
29
29
|
"@mage-ui/styled-system": "1.0.8"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|