npm - @mage-ui/components - Versions diffs - 1.0.71 → 1.0.72 - Mend

@mage-ui/components 1.0.71 → 1.0.72

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 (95) hide show

package/dist/components/data-display/datatables/DataTable.d.mts ADDED Viewed

@@ -0,0 +1,103 @@
+import { TableClassNames, TableProps } from "../table/TableRoot.mjs";
+import "../table/Table.mjs";
+import { DataTableSlots } from "./DataTableSlotRow.mjs";
+import { DataTableLabels } from "./useDataTableContext.mjs";
+import { ReactNode } from "react";
+import { ColumnDef, ExpandedState, OnChangeFn, PaginationState, RowSelectionState, SortingState, TableOptions } from "@tanstack/react-table";
+//#region src/components/data-display/datatables/DataTable.d.ts
+type DataTableRecord = Record<string, unknown>;
+type DataTableSortingConfig = {
+  state: SortingState;
+  onChange: OnChangeFn<SortingState>;
+};
+type DataTablePaginationConfig = {
+  currentPage: number;
+  pageSize: number;
+  onChange: OnChangeFn<PaginationState>;
+  pageCount: number;
+  rowCount?: number;
+};
+type DataTableColumnMeta = {
+  classNames?: {
+    header?: string;
+    cell?: string;
+  };
+};
+type DataTableSelectionConfig<Data = unknown> = {
+  state: RowSelectionState;
+  onChange: OnChangeFn<RowSelectionState>;
+  getRowId?: (row: Data) => string;
+  isRowDisabled?: (row: Data) => boolean;
+  bulkActions?: (selectedIds: string[]) => ReactNode;
+};
+type DataTableExpansionConfig<Data = unknown> = {
+  state: ExpandedState;
+  onChange: OnChangeFn<ExpandedState>;
+  renderContent: (row: Data) => ReactNode;
+};
+type DataTableSearchConfig = {
+  placeholder?: string;
+  label?: string;
+};
+type DataTableFiltersConfig = {
+  initial: Record<string, unknown>;
+  render: (filters: Record<string, unknown>, onChange: (next: Record<string, unknown>) => void) => ReactNode;
+};
+type DataTableTableConfig = Omit<TableProps, 'children' | 'classNames'>;
+type DataTableClassNames = {
+  dataTable?: string;
+  root?: string;
+  viewport?: string;
+  header?: string;
+  sortButton?: string;
+  expandButton?: string;
+  slotRow?: string;
+  bulkBar?: string;
+  loading?: string;
+  empty?: string;
+  expandedContent?: string;
+  skeleton?: string;
+  table?: TableClassNames;
+};
+type DataTableManagedOptions<Data> = Partial<Omit<TableOptions<Data>, 'columns' | 'data' | 'onExpandedChange' | 'onPaginationChange' | 'onRowSelectionChange' | 'onSortingChange'>>;
+type DataTableExtraColumnConfig<Data> = {
+  column: ColumnDef<Data, unknown>;
+  position?: number;
+};
+type DataTableProps<Data> = {
+  data: Data[];
+  columns: ColumnDef<Data, unknown>[];
+  extraColumns?: DataTableExtraColumnConfig<Data>[];
+  sorting?: DataTableSortingConfig;
+  pagination?: DataTablePaginationConfig;
+  selection?: DataTableSelectionConfig<Data>;
+  expansion?: DataTableExpansionConfig<Data>;
+  loading?: boolean;
+  skeleton?: number;
+  onRefresh?: () => void | Promise<void>;
+  slots?: DataTableSlots;
+  classNames?: DataTableClassNames;
+  options?: DataTableManagedOptions<Data>;
+  labels?: Partial<DataTableLabels>;
+} & DataTableTableConfig;
+declare const DataTable: <Data>({
+  classNames,
+  slots,
+  loading,
+  skeleton,
+  pagination,
+  selection,
+  expansion,
+  data,
+  columns,
+  extraColumns,
+  sorting,
+  onRefresh,
+  options,
+  labels,
+  ...tableProps
+}: DataTableProps<Data>) => ReactNode;
+//#endregion
+export { DataTable, DataTableClassNames, DataTableColumnMeta, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFiltersConfig, DataTablePaginationConfig, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig };
+//# sourceMappingURL=DataTable.d.mts.map

package/dist/components/data-display/datatables/DataTable.d.mts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTable.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"mappings":";;;;;;;;KA2BY,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,KAG/B,wBAAA;EACV,KAAA,EAAO,aAAA;EACP,QAAA,EAAU,UAAA,CAAW,aAAA;EACrB,aAAA,GAAgB,GAAA,EAAK,IAAA,KAAS,SAAA;AAAA;AAAA,KAGpB,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,YAAA;EACA,OAAA;EACA,OAAA;EACA,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"}

package/dist/components/data-display/datatables/DataTable.mjs ADDED Viewed

	@@ -0,0 +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{DataTableHeader as i}from"./DataTableHeader.mjs";import{DataTableRootContainer as a}from"./DataTableRootContainer.mjs";import{DataTableSkeleton as o}from"./DataTableSkeleton.mjs";import{DataTableSlotRow as s}from"./DataTableSlotRow.mjs";import{DataTableViewport as c}from"./DataTableViewport.mjs";import{useDataTable as l}from"./useDataTable.mjs";import{jsx as u,jsxs as d}from"react/jsx-runtime";const f=({classNames:f,slots:p,loading:m,skeleton:h,pagination:g,selection:_,expansion:v,data:y,columns:b,extraColumns:x,sorting:S,onRefresh:C,options:w,labels:T,...E})=>{let{layout:D,contextValue:O,table:k}=l({data:y,columns:b,extraColumns:x,sorting:S,onRefresh:C,options:w,labels:T,classNames:f,loading:m,skeleton:h,pagination:g,selection:_,expansion:v,...E});return u(n,{value:O,children:d(a,{busy:m,classNames:f,children:[u(s,{classNames:{root:f?.slotRow},children:p?.top}),u(c,{className:f?.viewport,children:h!=null&&y.length===0?u(o,{rows:h,className:f?.skeleton}):d(e,{...E,layout:D,classNames:f?.table,children:[u(i,{loading:m,classNames:f,headerGroups:k.getHeaderGroups(),totalSize:k.getTotalSize()}),u(t,{rows:k.getRowModel().rows,colCount:k.getVisibleLeafColumns().length,loading:m,empty:p?.empty,emptyClassName:f?.empty,expandedContentClassName:f?.expandedContent,expansion:v,selection:_})]})}),u(s,{classNames:{root:f?.slotRow},children:p?.bottom}),u(r,{selectedIds:O.selectedIds,className:f?.bulkBar,selection:_})]})})};export{f as DataTable};
2	+ //# sourceMappingURL=DataTable.mjs.map

package/dist/components/data-display/datatables/DataTable.mjs.map ADDED Viewed

@@ -0,0 +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 { DataTableBulkBar } from './DataTableBulkBar';\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 expandButton?: string;\n slotRow?: string;\n bulkBar?: string;\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 <DataTableHeader\n loading={loading}\n classNames={classNames}\n headerGroups={table.getHeaderGroups()}\n totalSize={table.getTotalSize()}\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":"knBAgIA,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,SAAU,EAAa,CACnD,OACA,UACA,eACA,UACA,YACA,UACA,SACA,aACA,UACA,WACA,aACA,YACA,YACA,GAAG,EACJ,CAAC,CAEF,OACE,EAAC,EAAA,CACC,MAAO,WAEP,EAAC,EAAA,CAAuB,KAAM,EAAqB,uBACjD,EAAC,EAAA,CAAiB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,KACS,CAEnB,EAAC,EAAA,CAAkB,UAAW,GAAY,kBACvC,GAAY,MAAQ,EAAK,SAAW,EACnC,EAAC,EAAA,CACC,KAAM,EACN,UAAW,GAAY,UACvB,CAEF,EAAC,EAAA,CACC,GAAI,EACI,SACR,WAAY,GAAY,gBAExB,EAAC,EAAA,CACU,UACG,aACZ,aAAc,EAAM,iBAAiB,CACrC,UAAW,EAAM,cAAc,EAC/B,CACF,EAAC,EAAA,CACC,KAAM,EAAM,aAAa,CAAC,KAC1B,SAAU,EAAM,uBAAuB,CAAC,OAC/B,UACT,MAAO,GAAO,MACd,eAAgB,GAAY,MAC5B,yBAA0B,GAAY,gBAC3B,YACA,aACX,CAAA,EACI,EAEQ,CAEpB,EAAC,EAAA,CAAiB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,QACS,CAEnB,EAAC,EAAA,CACC,YAAa,EAAa,YAC1B,UAAW,GAAY,QACZ,aACX,GACqB,EACA"}

package/dist/components/data-display/datatables/DataTableBody.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{Table as e}from"../table/Table.mjs";import{dataTableEmpty as t,dataTableExpandedContent as n}from"@mage-ui/styled-system/recipes";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import{flexRender as o}from"@tanstack/react-table";const s=({cell:t})=>{let n=t.column.columnDef.meta;return i(e.Cell,{classNames:n?.classNames?.cell?{td:n.classNames.cell}:void 0,children:o(t.column.columnDef.cell,t.getContext())})},c=({row:t,colCount:r,className:a,expansion:o})=>i(e.Row,{id:`data-table-expanded-${t.id}`,children:i(e.Cell,{colSpan:r,classNames:{td:a??n()},children:o.renderContent(t.original)})}),l=({row:t,colCount:n,expandedContentClassName:o,expansion:l,selection:u})=>a(r,{children:[i(e.Row,{"data-selected":t.getIsSelected()\|\|void 0,"data-disabled":u&&!t.getCanSelect()\|\|void 0,"data-expanded":t.getIsExpanded()\|\|void 0,children:t.getVisibleCells().map(e=>i(s,{cell:e},e.id))}),l&&t.getIsExpanded()?i(c,{row:t,colCount:n,className:o,expansion:l}):null]}),u=({colCount:n,className:r,children:a})=>i(e.Row,{children:i(e.Cell,{colSpan:n,classNames:{td:r??t()},children:a})}),d=({rows:t,colCount:n,loading:r,empty:a,emptyClassName:o,expandedContentClassName:s,expansion:c,selection:d})=>{let f=!r&&t.length===0;return i(e.Body,{children:f?i(u,{colCount:n,className:o,children:a}):t.map(e=>i(l,{row:e,colCount:n,expandedContentClassName:s,expansion:c,selection:d},e.id))})};export{d as DataTableBody};
2	+ //# sourceMappingURL=DataTableBody.mjs.map

package/dist/components/data-display/datatables/DataTableBody.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTableBody.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBody.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n dataTableEmpty,\n dataTableExpandedContent,\n} from '@mage-ui/styled-system/recipes';\nimport { flexRender, type Row } from '@tanstack/react-table';\n\nimport { Table } from '../table/Table';\nimport type {\n DataTableColumnMeta,\n DataTableExpansionConfig,\n DataTableProps,\n DataTableSelectionConfig,\n} from './DataTable';\n\n\ntype DataTableBodyProps<Data> = Pick<\n DataTableProps<Data>,\n 'loading' | 'expansion' | 'selection'\n> & {\n rows: Row<Data>[];\n colCount: number;\n empty?: ReactNode;\n emptyClassName?: string;\n expandedContentClassName?: string;\n};\n\nconst BodyCell = <Data,>({\n cell,\n}: {\n cell: import('@tanstack/react-table').Cell<Data, unknown>;\n}): ReactNode => {\n const columnMeta = cell.column.columnDef.meta as\n | DataTableColumnMeta\n | undefined;\n\n return (\n <Table.Cell\n classNames={\n columnMeta?.classNames?.cell\n ? { td: columnMeta.classNames.cell }\n : undefined\n }\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n};\n\nconst ExpandedRow = <Data,>({\n row,\n colCount,\n className,\n expansion,\n}: {\n row: Row<Data>;\n colCount: number;\n className?: string;\n expansion: DataTableExpansionConfig<Data>;\n}): ReactNode => (\n <Table.Row id={`data-table-expanded-${row.id}`}>\n <Table.Cell\n colSpan={colCount}\n classNames={{ td: className ?? dataTableExpandedContent() }}\n >\n {expansion.renderContent(row.original)}\n </Table.Cell>\n </Table.Row>\n);\n\nconst BodyRow = <Data,>({\n row,\n colCount,\n expandedContentClassName,\n expansion,\n selection,\n}: {\n row: Row<Data>;\n colCount: number;\n expandedContentClassName?: string;\n expansion?: DataTableExpansionConfig<Data>;\n selection?: DataTableSelectionConfig<Data>;\n}): ReactNode => (\n <>\n <Table.Row\n data-selected={row.getIsSelected() || undefined}\n data-disabled={(selection && !row.getCanSelect()) || undefined}\n data-expanded={row.getIsExpanded() || undefined}\n >\n {row.getVisibleCells().map((cell) => (\n <BodyCell key={cell.id} cell={cell} />\n ))}\n </Table.Row>\n {expansion && row.getIsExpanded() ? (\n <ExpandedRow\n row={row}\n colCount={colCount}\n className={expandedContentClassName}\n expansion={expansion}\n />\n ) : null}\n </>\n);\n\nconst EmptyRow = ({\n colCount,\n className,\n children,\n}: {\n colCount: number;\n className?: string;\n children?: ReactNode;\n}): ReactNode => (\n <Table.Row>\n <Table.Cell\n colSpan={colCount}\n classNames={{ td: className ?? dataTableEmpty() }}\n >\n {children}\n </Table.Cell>\n </Table.Row>\n);\n\nexport const DataTableBody = <Data,>({\n rows,\n colCount,\n loading,\n empty,\n emptyClassName,\n expandedContentClassName,\n expansion,\n selection,\n}: DataTableBodyProps<Data>): ReactNode => {\n const showEmptyState = !loading && rows.length === 0;\n\n return (\n <Table.Body>\n {showEmptyState ? (\n <EmptyRow colCount={colCount} className={emptyClassName}>\n {empty}\n </EmptyRow>\n ) : (\n rows.map((row) => (\n <BodyRow\n key={row.id}\n row={row}\n colCount={colCount}\n expandedContentClassName={expandedContentClassName}\n expansion={expansion}\n selection={selection}\n />\n ))\n )}\n </Table.Body>\n );\n};\n"],"mappings":"4PA4BA,MAAM,GAAmB,CACvB,UAGe,CACf,IAAM,EAAa,EAAK,OAAO,UAAU,KAIzC,OACE,EAAC,EAAM,KAAA,CACL,WACE,GAAY,YAAY,KACpB,CAAE,GAAI,EAAW,WAAW,KAAM,CAClC,IAAA,YAGL,EAAW,EAAK,OAAO,UAAU,KAAM,EAAK,YAAY,CAAC,EAC/C,EAIX,GAAsB,CAC1B,MACA,WACA,YACA,eAOA,EAAC,EAAM,IAAA,CAAI,GAAI,uBAAuB,EAAI,cACxC,EAAC,EAAM,KAAA,CACL,QAAS,EACT,WAAY,CAAE,GAAI,GAAa,GAA0B,CAAE,UAE1D,EAAU,cAAc,EAAI,SAAS,EAC3B,EACH,CAGR,GAAkB,CACtB,MACA,WACA,2BACA,YACA,eAQA,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAM,IAAA,CACL,gBAAe,EAAI,eAAe,EAAI,IAAA,GACtC,gBAAgB,GAAa,CAAC,EAAI,cAAc,EAAK,IAAA,GACrD,gBAAe,EAAI,eAAe,EAAI,IAAA,YAErC,EAAI,iBAAiB,CAAC,IAAK,GAC1B,EAAC,EAAA,CAA6B,OAAA,CAAf,EAAK,GAAkB,CACtC,EACQ,CACX,GAAa,EAAI,eAAe,CAC/B,EAAC,EAAA,CACM,MACK,WACV,UAAW,EACA,aACX,CACA,KAAA,CAAA,CACH,CAGC,GAAY,CAChB,WACA,YACA,cAMA,EAAC,EAAM,IAAA,CAAA,SACL,EAAC,EAAM,KAAA,CACL,QAAS,EACT,WAAY,CAAE,GAAI,GAAa,GAAgB,CAAE,CAEhD,YACU,CAAA,CACH,CAGD,GAAwB,CACnC,OACA,WACA,UACA,QACA,iBACA,2BACA,YACA,eACyC,CACzC,IAAM,EAAiB,CAAC,GAAW,EAAK,SAAW,EAEnD,OACE,EAAC,EAAM,KAAA,CAAA,SACJ,EACC,EAAC,EAAA,CAAmB,WAAU,UAAW,WACtC,GACQ,CAEX,EAAK,IAAK,GACR,EAAC,EAAA,CAEM,MACK,WACgB,2BACf,YACA,aALN,EAAI,GAMT,CACF,CAAA,CAEO"}

package/dist/components/data-display/datatables/DataTableBottomSlot.d.mts ADDED Viewed

@@ -0,0 +1,25 @@
+import { DataTablePageSizeProps } from "./DataTablePageSize.mjs";
+import { DataTablePaginationProps } from "./DataTablePagination.mjs";
+import { ReactNode } from "react";
+//#region src/components/data-display/datatables/DataTableBottomSlot.d.ts
+type DataTableBottomSlotClassNames = {
+  root?: string;
+  pageSize?: DataTablePageSizeProps['classNames'];
+  pagination?: DataTablePaginationProps['classNames'];
+};
+type DataTableBottomSlotProps = {
+  children?: ReactNode;
+  withPagination?: boolean;
+  pageSizeOptions?: number[];
+  classNames?: DataTableBottomSlotClassNames;
+};
+declare const DataTableBottomSlot: <Data>({
+  children,
+  withPagination,
+  pageSizeOptions,
+  classNames
+}: DataTableBottomSlotProps) => ReactNode;
+//#endregion
+export { DataTableBottomSlot, DataTableBottomSlotProps };
+//# sourceMappingURL=DataTableBottomSlot.d.mts.map

package/dist/components/data-display/datatables/DataTableBottomSlot.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"DataTableBottomSlot.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBottomSlot.tsx"],"mappings":";;;;;KAUK,6BAAA;EACH,IAAA;EACA,QAAA,GAAW,sBAAA;EACX,UAAA,GAAa,wBAAA;AAAA;AAAA,KAGH,wBAAA;EACV,QAAA,GAAW,SAAA;EACX,cAAA;EACA,eAAA;EACA,UAAA,GAAa,6BAAA;AAAA;AAAA,cAcF,mBAAA;EAA8B,QAAA;EAAA,cAAA;EAAA,eAAA;EAAA;AAAA,GAKxC,wBAAA,KAA2B,SAAA"}

package/dist/components/data-display/datatables/DataTableBottomSlot.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{useDataTableContext as e}from"./useDataTableContext.mjs";import{DataTablePageSize as t}from"./DataTablePageSize.mjs";import{DataTablePagination as n}from"./DataTablePagination.mjs";import{dataTableBottomSlot as r}from"@mage-ui/styled-system/recipes";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";const s=(e,t)=>{let n=t??[15,25,50];return[...new Set([e,...n])].sort((e,t)=>e-t)},c=({children:c,withPagination:l=!1,pageSizeOptions:u,classNames:d})=>{let{pagination:f}=e(),p=f?s(f.pageSize,u):[],m=!!f&&p.length>1,h=(f?.pageCount??0)>0;return!l&&!(c!=null&&c!==!1)?null:o(i,{children:[l&&(m\|\|h)?o(`div`,{className:d?.root??r(),children:[m&&f?a(t,{value:f.pageSize,options:p,classNames:d?.pageSize,onChange:e=>{f.onChange(t=>({...t,pageIndex:0,pageSize:e}))}}):null,h?a(n,{withEdges:!0,classNames:d?.pagination}):null]}):null,c]})};export{c as DataTableBottomSlot};
2	+ //# sourceMappingURL=DataTableBottomSlot.mjs.map

package/dist/components/data-display/datatables/DataTableBottomSlot.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTableBottomSlot.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBottomSlot.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableBottomSlot } from '@mage-ui/styled-system/recipes';\n\nimport type { DataTablePageSizeProps } from './DataTablePageSize';\nimport { DataTablePageSize } from './DataTablePageSize';\nimport type { DataTablePaginationProps } from './DataTablePagination';\nimport { DataTablePagination } from './DataTablePagination';\nimport { useDataTableContext } from './useDataTableContext';\n\ntype DataTableBottomSlotClassNames = {\n root?: string;\n pageSize?: DataTablePageSizeProps['classNames'];\n pagination?: DataTablePaginationProps['classNames'];\n};\n\nexport type DataTableBottomSlotProps = {\n children?: ReactNode;\n withPagination?: boolean;\n pageSizeOptions?: number[];\n classNames?: DataTableBottomSlotClassNames;\n};\n\nconst getPageSizeOptions = (\n pageSize: number,\n pageSizeOptions?: number[],\n): number[] => {\n const options = pageSizeOptions ?? [15, 25, 50];\n\n return [...new Set([pageSize, ...options])].sort(\n (left, right) => left - right,\n );\n};\n\nexport const DataTableBottomSlot = <Data,>({\n children,\n withPagination = false,\n pageSizeOptions,\n classNames,\n}: DataTableBottomSlotProps): ReactNode => {\n const { pagination } = useDataTableContext<Data>();\n const options = pagination\n ? getPageSizeOptions(pagination.pageSize, pageSizeOptions)\n : [];\n const showPageSize = Boolean(pagination) && options.length > 1;\n const showPagination = (pagination?.pageCount ?? 0) > 0;\n const hasChildren =\n children !== null && children !== undefined && children !== false;\n\n if (!withPagination && !hasChildren) {\n return null;\n }\n\n return (\n <>\n {withPagination && (showPageSize || showPagination) ? (\n <div className={classNames?.root ?? dataTableBottomSlot()}>\n {showPageSize && pagination ? (\n <DataTablePageSize\n value={pagination.pageSize}\n options={options}\n classNames={classNames?.pageSize}\n onChange={(nextPageSize) => {\n pagination.onChange((current) => ({\n ...current,\n pageIndex: 0,\n pageSize: nextPageSize,\n }));\n }}\n />\n ) : null}\n {showPagination ? (\n <DataTablePagination\n withEdges\n classNames={classNames?.pagination}\n />\n ) : null}\n </div>\n ) : null}\n {children}\n </>\n );\n};\n"],"mappings":"iUAuBA,MAAM,GACJ,EACA,IACa,CACb,IAAM,EAAU,GAAmB,CAAC,GAAI,GAAI,GAAG,CAE/C,MAAO,CAAC,GAAG,IAAI,IAAI,CAAC,EAAU,GAAG,EAAQ,CAAC,CAAC,CAAC,MACzC,EAAM,IAAU,EAAO,EACzB,EAGU,GAA8B,CACzC,WACA,iBAAiB,GACjB,kBACA,gBACyC,CACzC,GAAM,CAAE,cAAe,GAA2B,CAC5C,EAAU,EACZ,EAAmB,EAAW,SAAU,EAAgB,CACxD,EAAE,CACA,EAAe,EAAQ,GAAe,EAAQ,OAAS,EACvD,GAAkB,GAAY,WAAa,GAAK,EAQtD,MAJI,CAAC,GAAkB,EAFrB,GAAa,MAAkC,IAAa,IAGrD,KAIP,EAAA,EAAA,CAAA,SAAA,CACG,IAAmB,GAAgB,GAClC,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAqB,WACtD,GAAgB,EACf,EAAC,EAAA,CACC,MAAO,EAAW,SACT,UACT,WAAY,GAAY,SACxB,SAAW,GAAiB,CAC1B,EAAW,SAAU,IAAa,CAChC,GAAG,EACH,UAAW,EACX,SAAU,EACX,EAAE,GAEL,CACA,KACH,EACC,EAAC,EAAA,CACC,UAAA,GACA,WAAY,GAAY,YACxB,CACA,KAAA,EACA,CACJ,KACH,EAAA,CAAA,CACA"}

package/dist/components/data-display/datatables/DataTableBulkBar.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{useDataTableContext as e}from"./useDataTableContext.mjs";import{dataTableBulkBar as t}from"@mage-ui/styled-system/recipes";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({selectedIds:i,className:a,selection:o})=>{let{labels:s}=e();return!o?.bulkActions\|\|i.length===0?null:r(`div`,{className:a??t(),children:[n(`span`,{children:s.selectedCount(i.length)}),o.bulkActions(i)]})};export{i as DataTableBulkBar};
2	+ //# sourceMappingURL=DataTableBulkBar.mjs.map

package/dist/components/data-display/datatables/DataTableBulkBar.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTableBulkBar.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBulkBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableBulkBar } from '@mage-ui/styled-system/recipes';\n\nimport type { DataTableSelectionConfig } from './DataTable';\nimport { useDataTableContext } from './useDataTableContext';\n\ntype DataTableBulkBarProps<Data> = {\n selectedIds: string[];\n className?: string;\n selection?: DataTableSelectionConfig<Data>;\n};\n\nexport const DataTableBulkBar = <Data,>({\n selectedIds,\n className,\n selection,\n}: DataTableBulkBarProps<Data>): ReactNode => {\n const { labels } = useDataTableContext();\n\n if (!selection?.bulkActions || selectedIds.length === 0) {\n return null;\n }\n\n return (\n <div className={className ?? dataTableBulkBar()}>\n <span>{labels.selectedCount(selectedIds.length)}</span>\n {selection.bulkActions(selectedIds)}\n </div>\n );\n};\n"],"mappings":"oLAaA,MAAa,GAA2B,CACtC,cACA,YACA,eAC4C,CAC5C,GAAM,CAAE,UAAW,GAAqB,CAMxC,MAJI,CAAC,GAAW,aAAe,EAAY,SAAW,EAC7C,KAIP,EAAC,MAAA,CAAI,UAAW,GAAa,GAAkB,WAC7C,EAAC,OAAA,CAAA,SAAM,EAAO,cAAc,EAAY,OAAO,CAAA,CAAQ,CACtD,EAAU,YAAY,EAAY,CAAA,EAC/B"}

package/dist/components/data-display/datatables/DataTableColumns.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{Checkbox as e}from"../../controls/checkbox/Checkbox.mjs";import{dataTableExpandButton as t}from"@mage-ui/styled-system/recipes";import{jsx as n}from"react/jsx-runtime";const r=t=>({id:`_select`,size:40,header:({table:r})=>n(e,{"aria-label":t.selectAllRows,checked:r.getIsAllPageRowsSelected(),indeterminate:r.getIsSomePageRowsSelected()&&!r.getIsAllPageRowsSelected(),onChange:r.getToggleAllPageRowsSelectedHandler()}),cell:({row:r})=>n(e,{"aria-label":t.selectRow(r.index+1),checked:r.getIsSelected(),disabled:!r.getCanSelect(),onChange:r.getToggleSelectedHandler()})}),i=(e,r)=>({id:`_expand`,size:40,header:()=>null,cell:({row:i})=>n(`button`,{className:e??t(),type:`button`,onClick:i.getToggleExpandedHandler(),"data-expanded":i.getIsExpanded()\|\|void 0,"aria-expanded":i.getIsExpanded(),"aria-controls":`data-table-expanded-${i.id}`,"aria-label":i.getIsExpanded()?r.collapseRow:r.expandRow,children:n(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`currentColor`,"aria-hidden":`true`,focusable:`false`,children:n(`path`,{d:`M6 4l4 4-4 4`,stroke:`currentColor`,strokeWidth:`1.5`,fill:`none`,strokeLinecap:`round`,strokeLinejoin:`round`})})})});export{i as getDataTableExpandColumn,r as getDataTableSelectColumn};
2	+ //# sourceMappingURL=DataTableColumns.mjs.map

package/dist/components/data-display/datatables/DataTableColumns.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTableColumns.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableColumns.tsx"],"sourcesContent":["import { dataTableExpandButton } 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 size: 40,\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 size: 40,\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":"+KAMA,MAAa,EACX,IAC8B,CAC9B,GAAI,UACJ,KAAM,GACN,QAAS,CAAE,WAEP,EAAC,EAAA,CACC,aAAY,EAAO,cACnB,QAAS,EAAM,0BAA0B,CACzC,cACE,EAAM,2BAA2B,EAAI,CAAC,EAAM,0BAA0B,CAExE,SAAU,EAAM,qCAAqC,EACrD,CAGN,MAAO,CAAE,SACP,EAAC,EAAA,CACC,aAAY,EAAO,UAAU,EAAI,MAAQ,EAAE,CAC3C,QAAS,EAAI,eAAe,CAC5B,SAAU,CAAC,EAAI,cAAc,CAC7B,SAAU,EAAI,0BAA0B,EACxC,CAEL,EAEY,GACX,EACA,KAC8B,CAC9B,GAAI,UACJ,KAAM,GACN,WAAc,KACd,MAAO,CAAE,SACP,EAAC,SAAA,CACC,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,MAAA,CACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,eACL,cAAY,OACZ,UAAU,iBAEV,EAAC,OAAA,CACC,EAAE,eACF,OAAO,eACP,YAAY,MACZ,KAAK,OACL,cAAc,QACd,eAAe,SACf,EACE,EACC,CAEZ"}

package/dist/components/data-display/datatables/DataTableHeader.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{VisuallyHidden as e}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{Table as t}from"../table/Table.mjs";import{useDataTableContext as n}from"./useDataTableContext.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dataTableHeader as i,dataTableLoading as a,dataTableSortButton as o}from"@mage-ui/styled-system/recipes";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{flexRender as l}from"@tanstack/react-table";const u=e=>e===`asc`?`ascending`:e===`desc`?`descending`:`none`,d=({sorted:e})=>s(`span`,{"aria-hidden":!0,children:e===`asc`?`↑`:e===`desc`?`↓`:``}),f=({header:t,className:r})=>{let{labels:i}=n(),a=t.column.getIsSorted();return c(`button`,{className:r??o(),type:`button`,onClick:t.column.getToggleSortingHandler(),children:[s(`span`,{children:l(t.column.columnDef.header,t.getContext())}),s(d,{sorted:a}),s(e,{children:a===`asc`?i.sortedAscending:a===`desc`?i.sortedDescending:i.activateToSort})]})},p=({header:e,sortButtonClassName:t})=>e.isPlaceholder?null:e.column.getCanSort()?s(f,{header:e,className:t}):l(e.column.columnDef.header,e.getContext()),m=({header:e,totalSize:n,classNames:r})=>{let i=e.column.getCanSort(),a=e.column.getIsSorted(),o=e.column.columnDef.meta,c=n>0&&e.column.columnDef.size!==150?`${e.getSize()/n*100}%`:void 0;return s(t.HeaderCell,{classNames:o?.classNames?.header?{th:o.classNames.header}:void 0,scope:`col`,style:{width:c},"aria-sort":i?u(a):void 0,"data-sortable":i\|\|void 0,"data-sort":a\|\|void 0,children:s(p,{header:e,sortButtonClassName:r?.sortButton})})},h=({headerGroups:e,totalSize:n,loading:o,classNames:c})=>s(t.Head,{classNames:{thead:r(c?.header??i(),o?c?.loading??a():void 0)},"data-loading":o\|\|void 0,children:e.map(e=>s(t.Row,{children:e.headers.map(e=>s(m,{header:e,totalSize:n,classNames:c},e.id))},e.id))});export{h as DataTableHeader};
2	+ //# sourceMappingURL=DataTableHeader.mjs.map

package/dist/components/data-display/datatables/DataTableHeader.mjs.map ADDED Viewed

@@ -0,0 +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} from '@mage-ui/styled-system/recipes';\nimport {\n flexRender,\n type Header,\n type HeaderGroup,\n} from '@tanstack/react-table';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { Table } from '../table/Table';\nimport type { DataTableClassNames, DataTableColumnMeta } from './DataTable';\nimport { useDataTableContext } from './useDataTableContext';\n\ntype DataTableHeaderProps<Data> = {\n headerGroups: HeaderGroup<Data>[];\n totalSize: number;\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 = ({ sorted }: { sorted: false | 'asc' | 'desc' }) => (\n <span aria-hidden>\n {sorted === 'asc' ? '↑' : sorted === 'desc' ? '↓' : ''}\n </span>\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 className={className ?? dataTableSortButton()}\n type='button'\n onClick={header.column.getToggleSortingHandler()}\n >\n <span>\n {flexRender(header.column.columnDef.header, header.getContext())}\n </span>\n <SortIndicator sorted={sorted} />\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 HeaderCell = <Data,>({\n header,\n totalSize,\n classNames,\n}: {\n header: Header<Data, unknown>;\n totalSize: number;\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 =\n totalSize > 0 && header.column.columnDef.size !== 150\n ? `${(header.getSize() / totalSize) * 100}%`\n : undefined;\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 totalSize,\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 totalSize={totalSize}\n classNames={classNames}\n />\n ))}\n </Table.Row>\n ))}\n </Table.Head>\n);\n"],"mappings":"+bA0BA,MAAM,EAAe,GACf,IAAW,MAAc,YACzB,IAAW,OAAe,aACvB,OAGH,GAAiB,CAAE,YACvB,EAAC,OAAA,CAAK,cAAA,YACH,IAAW,MAAQ,IAAM,IAAW,OAAS,IAAM,IAC/C,CAGH,GAAqB,CACzB,SACA,eAIe,CACf,GAAM,CAAE,UAAW,GAAqB,CAClC,EAAS,EAAO,OAAO,aAAa,CAQ1C,OACE,EAAC,SAAA,CACC,UAAW,GAAa,GAAqB,CAC7C,KAAK,SACL,QAAS,EAAO,OAAO,yBAAyB,WAEhD,EAAC,OAAA,CAAA,SACE,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAAA,CAC3D,CACP,EAAC,EAAA,CAAsB,SAAA,CAAU,CACjC,EAAC,EAAA,CAAA,SAfC,IAAW,MAAc,EAAO,gBAChC,IAAW,OAAe,EAAO,iBAC9B,EAAO,eAawB,CAAkB,GAC/C,EAIP,GAA4B,CAChC,SACA,yBAKI,EAAO,cAAsB,KAE7B,EAAO,OAAO,YAAY,CACrB,EAAC,EAAA,CAAmB,SAAQ,UAAW,GAAuB,CAGhE,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAGlE,GAAqB,CACzB,SACA,YACA,gBAKe,CACf,IAAM,EAAU,EAAO,OAAO,YAAY,CACpC,EAAS,EAAO,OAAO,aAAa,CACpC,EAAa,EAAO,OAAO,UAAU,KAGrC,EACJ,EAAY,GAAK,EAAO,OAAO,UAAU,OAAS,IAC9C,GAAI,EAAO,SAAS,CAAG,EAAa,IAAI,GACxC,IAAA,GAEN,OACE,EAAC,EAAM,WAAA,CACL,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,EAAA,CACS,SACR,oBAAqB,GAAY,YACjC,EACe,EAIV,GAA0B,CACrC,eACA,YACA,UACA,gBAEA,EAAC,EAAM,KAAA,CACL,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,IAAA,CAAA,SACJ,EAAY,QAAQ,IAAK,GACxB,EAAC,EAAA,CAES,SACG,YACC,cAHP,EAAO,GAIZ,CACF,CAAA,CARY,EAAY,GAShB,CACZ,EACS"}

package/dist/components/data-display/datatables/DataTablePageSize.d.mts ADDED Viewed

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+//#region src/components/data-display/datatables/DataTablePageSize.d.ts
+type DataTablePageSizeProps = {
+  value: number;
+  options: number[];
+  onChange: (size: number) => void;
+  label?: string;
+  classNames?: {
+    root?: string;
+  };
+};
+declare const DataTablePageSize: ({
+  value,
+  options,
+  onChange,
+  label,
+  classNames
+}: DataTablePageSizeProps) => ReactNode;
+//#endregion
+export { DataTablePageSize, DataTablePageSizeProps };
+//# sourceMappingURL=DataTablePageSize.d.mts.map

package/dist/components/data-display/datatables/DataTablePageSize.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"DataTablePageSize.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTablePageSize.tsx"],"mappings":";;;KAMY,sBAAA;EACV,KAAA;EACA,OAAA;EACA,QAAA,GAAW,IAAA;EACX,KAAA;EACA,UAAA;IACE,IAAA;EAAA;AAAA;AAAA,cAIS,iBAAA;EAAqB,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA;AAAA,GAM/B,sBAAA,KAAyB,SAAA"}

package/dist/components/data-display/datatables/DataTablePageSize.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{useDataTableContext as e}from"./useDataTableContext.mjs";import{dataTablePageSize as t}from"@mage-ui/styled-system/recipes";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({value:i,options:a,onChange:o,label:s,classNames:c})=>{let{labels:l}=e(),u=s??l.rowsPerPage;return r(`label`,{className:c?.root??t(),children:[n(`span`,{children:u}),n(`select`,{value:i,onChange:e=>o(Number(e.target.value)),children:a.map(e=>n(`option`,{value:e,children:e},e))})]})};export{i as DataTablePageSize};
2	+ //# sourceMappingURL=DataTablePageSize.mjs.map

package/dist/components/data-display/datatables/DataTablePageSize.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTablePageSize.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTablePageSize.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTablePageSize } from '@mage-ui/styled-system/recipes';\n\nimport { useDataTableContext } from './useDataTableContext';\n\nexport type DataTablePageSizeProps = {\n value: number;\n options: number[];\n onChange: (size: number) => void;\n label?: string;\n classNames?: {\n root?: string;\n };\n};\n\nexport const DataTablePageSize = ({\n value,\n options,\n onChange,\n label,\n classNames,\n}: DataTablePageSizeProps): ReactNode => {\n const { labels } = useDataTableContext();\n const displayLabel = label ?? labels.rowsPerPage;\n\n return (\n <label className={classNames?.root ?? dataTablePageSize()}>\n <span>{displayLabel}</span>\n <select value={value} onChange={(e) => onChange(Number(e.target.value))}>\n {options.map((size) => (\n <option key={size} value={size}>\n {size}\n </option>\n ))}\n </select>\n </label>\n );\n};\n"],"mappings":"qLAgBA,MAAa,GAAqB,CAChC,QACA,UACA,WACA,QACA,gBACuC,CACvC,GAAM,CAAE,UAAW,GAAqB,CAClC,EAAe,GAAS,EAAO,YAErC,OACE,EAAC,QAAA,CAAM,UAAW,GAAY,MAAQ,GAAmB,WACvD,EAAC,OAAA,CAAA,SAAM,EAAA,CAAoB,CAC3B,EAAC,SAAA,CAAc,QAAO,SAAW,GAAM,EAAS,OAAO,EAAE,OAAO,MAAM,CAAC,UACpE,EAAQ,IAAK,GACZ,EAAC,SAAA,CAAkB,MAAO,WACvB,GADU,EAEJ,CACT,EACK,CAAA,EACH"}

package/dist/components/data-display/datatables/DataTablePagination.d.mts ADDED Viewed

@@ -0,0 +1,19 @@
+import { PaginationClassNames } from "../../navigations/pagination/Pagination.mjs";
+import { ReactNode } from "react";
+//#region src/components/data-display/datatables/DataTablePagination.d.ts
+type DataTablePaginationProps = {
+  withEdges?: boolean;
+  classNames?: {
+    root?: string;
+    pagination?: PaginationClassNames;
+    paginationWrapper?: string;
+  };
+};
+declare const DataTablePagination: ({
+  withEdges,
+  classNames
+}: DataTablePaginationProps) => ReactNode;
+//#endregion
+export { DataTablePagination, DataTablePaginationProps };
+//# sourceMappingURL=DataTablePagination.d.mts.map

package/dist/components/data-display/datatables/DataTablePagination.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"DataTablePagination.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTablePagination.tsx"],"mappings":";;;;KAcY,wBAAA;EACV,SAAA;EACA,UAAA;IACE,IAAA;IACA,UAAA,GAAa,oBAAA;IACb,iBAAA;EAAA;AAAA;AAAA,cAIS,mBAAA;EAAuB,SAAA;EAAA;AAAA,GAGjC,wBAAA,KAA2B,SAAA"}

package/dist/components/data-display/datatables/DataTablePagination.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{useDataTableContext as e}from"./useDataTableContext.mjs";import{Pagination as t}from"../../navigations/pagination/Pagination.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{dataTablePagination as r,paginationWrapper as i}from"@mage-ui/styled-system/recipes";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({withEdges:s=!1,classNames:c})=>{let{pagination:l}=e();return l?a(`div`,{className:c?.root??r(),children:o(t.Root,{classNames:c?.pagination,total:l.pageCount,value:l.currentPage,onChange:e=>{l.onChange(t=>({...t,pageIndex:e-1}))},children:[s&&a(t.First,{}),o(`div`,{className:n(c?.paginationWrapper??i(),`group`),children:[a(t.Previous,{}),a(t.Items,{}),a(t.Next,{})]}),s&&a(t.Last,{})]})}):null};export{s as DataTablePagination};
2	+ //# sourceMappingURL=DataTablePagination.mjs.map

package/dist/components/data-display/datatables/DataTablePagination.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTablePagination.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTablePagination.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dataTablePagination,\n paginationWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport {\n Pagination,\n type PaginationClassNames,\n} from '../../navigations/pagination/Pagination';\nimport { useDataTableContext } from './useDataTableContext';\n\nexport type DataTablePaginationProps = {\n withEdges?: boolean;\n classNames?: {\n root?: string;\n pagination?: PaginationClassNames;\n paginationWrapper?: string;\n };\n};\n\nexport const DataTablePagination = ({\n withEdges = false,\n classNames,\n}: DataTablePaginationProps): ReactNode => {\n const { pagination } = useDataTableContext();\n\n if (!pagination) {\n return null;\n }\n\n return (\n <div className={classNames?.root ?? dataTablePagination()}>\n <Pagination.Root\n classNames={classNames?.pagination}\n total={pagination.pageCount}\n value={pagination.currentPage}\n onChange={(page: number) => {\n pagination.onChange((current) => ({\n ...current,\n pageIndex: page - 1,\n }));\n }}\n >\n {withEdges && <Pagination.First />}\n <div\n className={cx(\n classNames?.paginationWrapper ?? paginationWrapper(),\n 'group',\n )}\n >\n <Pagination.Previous />\n <Pagination.Items />\n <Pagination.Next />\n </div>\n {withEdges && <Pagination.Last />}\n </Pagination.Root>\n </div>\n );\n};\n"],"mappings":"uUAuBA,MAAa,GAAuB,CAClC,YAAY,GACZ,gBACyC,CACzC,GAAM,CAAE,cAAe,GAAqB,CAM5C,OAJK,EAKH,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAqB,UACvD,EAAC,EAAW,KAAA,CACV,WAAY,GAAY,WACxB,MAAO,EAAW,UAClB,MAAO,EAAW,YAClB,SAAW,GAAiB,CAC1B,EAAW,SAAU,IAAa,CAChC,GAAG,EACH,UAAW,EAAO,EACnB,EAAE,YAGJ,GAAa,EAAC,EAAW,MAAA,EAAA,CAAQ,CAClC,EAAC,MAAA,CACC,UAAW,EACT,GAAY,mBAAqB,GAAmB,CACpD,QACD,WAED,EAAC,EAAW,SAAA,EAAA,CAAW,CACvB,EAAC,EAAW,MAAA,EAAA,CAAQ,CACpB,EAAC,EAAW,KAAA,EAAA,CAAO,GACf,CACL,GAAa,EAAC,EAAW,KAAA,EAAA,CAAO,GACjB,EACd,CA7BC"}

package/dist/components/data-display/datatables/{datatable-stateless/StatelessDataTableRootContainer.mjs → DataTableRootContainer.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{cx as e}from"@mage-ui/styled-system/css";import{dataTable as t,dataTableRoot as n}from"@mage-ui/styled-system/recipes";import{jsx as r}from"react/jsx-runtime";const i=({busy:i,classNames:a,children:o})=>r(`div`,{"aria-busy":i||void 0,className:e(a?.dataTable??t(),a?.root??n()),children:o});export{i as StatelessDataTableRootContainer};
-//# sourceMappingURL=StatelessDataTableRootContainer.mjs.map
+import{cx as e}from"@mage-ui/styled-system/css";import{dataTable as t,dataTableRoot as n}from"@mage-ui/styled-system/recipes";import{jsx as r}from"react/jsx-runtime";const i=({busy:i,classNames:a,children:o})=>r(`div`,{"aria-busy":i||void 0,className:e(a?.dataTable??t(),a?.root??n()),children:o});export{i as DataTableRootContainer};
+//# sourceMappingURL=DataTableRootContainer.mjs.map

package/dist/components/data-display/datatables/DataTableRootContainer.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTableRootContainer.mjs","names":["dataTableRecipe"],"sources":["../../../../src/components/data-display/datatables/DataTableRootContainer.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dataTable as dataTableRecipe,\n dataTableRoot,\n} from '@mage-ui/styled-system/recipes';\n\nimport type { DataTableClassNames } from './DataTable';\n\ntype DataTableRootContainerProps = {\n busy?: boolean;\n classNames?: DataTableClassNames;\n children: ReactNode;\n};\n\nexport const DataTableRootContainer = ({\n busy,\n classNames,\n children,\n}: DataTableRootContainerProps): ReactNode => {\n return (\n <div\n aria-busy={busy || undefined}\n className={cx(\n classNames?.dataTable ?? dataTableRecipe(),\n classNames?.root ?? dataTableRoot(),\n )}\n >\n {children}\n </div>\n );\n};\n"],"mappings":"sKAgBA,MAAa,GAA0B,CACrC,OACA,aACA,cAGE,EAAC,MAAA,CACC,YAAW,GAAQ,IAAA,GACnB,UAAW,EACT,GAAY,WAAaA,GAAiB,CAC1C,GAAY,MAAQ,GAAe,CACpC,CAEA,YACG"}

package/dist/components/data-display/datatables/DataTableSkeleton.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{VisuallyHidden as e}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{useDataTableContext as t}from"./useDataTableContext.mjs";import{dataTableSkeleton as n,dataTableSkeletonCell as r,dataTableSkeletonRow as i}from"@mage-ui/styled-system/recipes";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=[[`35%`,`45%`,`20%`],[`25%`,`55%`,`20%`],[`40%`,`35%`,`25%`]],c=({rows:c,className:l})=>{let{labels:u}=t();return o(`div`,{className:l??n(),role:`status`,"aria-busy":`true`,children:[a(e,{children:u.loading}),Array.from({length:c},(e,t)=>{let n=s[t%s.length];return a(`div`,{className:i(),children:n.map((e,t)=>a(`div`,{className:r(),style:{width:e}},t))},t)})]})};export{c as DataTableSkeleton};
2	+ //# sourceMappingURL=DataTableSkeleton.mjs.map

package/dist/components/data-display/datatables/DataTableSkeleton.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTableSkeleton.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableSkeleton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n dataTableSkeleton,\n dataTableSkeletonCell,\n dataTableSkeletonRow,\n} from '@mage-ui/styled-system/recipes';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { useDataTableContext } from './useDataTableContext';\n\n// Cycling widths to give rows visual variety\nconst CELL_WIDTH_PATTERNS = [\n ['35%', '45%', '20%'],\n ['25%', '55%', '20%'],\n ['40%', '35%', '25%'],\n];\n\ntype DataTableSkeletonProps = {\n rows: number;\n className?: string;\n};\n\nexport const DataTableSkeleton = ({\n rows,\n className,\n}: DataTableSkeletonProps): ReactNode => {\n const { labels } = useDataTableContext();\n\n return (\n <div\n className={className ?? dataTableSkeleton()}\n role='status'\n aria-busy='true'\n >\n <VisuallyHidden>{labels.loading}</VisuallyHidden>\n {Array.from({ length: rows }, (_, i) => {\n const widths = CELL_WIDTH_PATTERNS[i % CELL_WIDTH_PATTERNS.length];\n\n return (\n <div key={i} className={dataTableSkeletonRow()}>\n {widths.map((width, j) => (\n <div\n key={j}\n className={dataTableSkeletonCell()}\n style={{ width }}\n />\n ))}\n </div>\n );\n })}\n </div>\n );\n};\n"],"mappings":"yTAYA,MAAM,EAAsB,CAC1B,CAAC,MAAO,MAAO,MAAM,CACrB,CAAC,MAAO,MAAO,MAAM,CACrB,CAAC,MAAO,MAAO,MAAM,CACtB,CAOY,GAAqB,CAChC,OACA,eACuC,CACvC,GAAM,CAAE,UAAW,GAAqB,CAExC,OACE,EAAC,MAAA,CACC,UAAW,GAAa,GAAmB,CAC3C,KAAK,SACL,YAAU,iBAEV,EAAC,EAAA,CAAA,SAAgB,EAAO,QAAA,CAAyB,CAChD,MAAM,KAAK,CAAE,OAAQ,EAAM,EAAG,EAAG,IAAM,CACtC,IAAM,EAAS,EAAoB,EAAI,EAAoB,QAE3D,OACE,EAAC,MAAA,CAAY,UAAW,GAAsB,UAC3C,EAAO,KAAK,EAAO,IAClB,EAAC,MAAA,CAEC,UAAW,GAAuB,CAClC,MAAO,CAAE,QAAO,EAFX,EAGL,CACF,EAPM,EAQJ,EAER,CAAA,EACE"}

package/dist/components/data-display/datatables/DataTableSlotRow.d.mts ADDED Viewed

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+//#region src/components/data-display/datatables/DataTableSlotRow.d.ts
+type DataTableSlots = {
+  top?: ReactNode;
+  bottom?: ReactNode;
+  empty?: ReactNode;
+};
+//#endregion
+export { DataTableSlots };
+//# sourceMappingURL=DataTableSlotRow.d.mts.map

package/dist/components/data-display/datatables/DataTableSlotRow.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"DataTableSlotRow.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableSlotRow.tsx"],"mappings":";;;KAIY,cAAA;EACV,GAAA,GAAM,SAAA;EACN,MAAA,GAAS,SAAA;EACT,KAAA,GAAQ,SAAA;AAAA"}

package/dist/components/data-display/datatables/DataTableSlotRow.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{dataTableSlotRow as e}from"@mage-ui/styled-system/recipes";import{jsx as t}from"react/jsx-runtime";const n=({children:n,classNames:r})=>n==null\|\|n===!1?null:t(`div`,{className:r?.root??e(),children:n});export{n as DataTableSlotRow};
2	+ //# sourceMappingURL=DataTableSlotRow.mjs.map

package/dist/components/data-display/datatables/DataTableSlotRow.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTableSlotRow.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableSlotRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableSlotRow } from '@mage-ui/styled-system/recipes';\n\nexport type DataTableSlots = {\n top?: ReactNode;\n bottom?: ReactNode;\n empty?: ReactNode;\n};\n\ntype DataTableSlotRowProps = {\n children?: ReactNode;\n classNames?: {\n root?: string;\n };\n};\n\nexport const DataTableSlotRow = ({\n children,\n classNames,\n}: DataTableSlotRowProps): ReactNode => {\n if (children === null || children === undefined || children === false) {\n return null;\n }\n\n return (\n <div className={classNames?.root ?? dataTableSlotRow()}>{children}</div>\n );\n};\n"],"mappings":"0GAiBA,MAAa,GAAoB,CAC/B,WACA,gBAEI,GAAa,MAAkC,IAAa,GACvD,KAIP,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAkB,CAAG,YAAe"}

package/dist/components/data-display/datatables/DataTableTopSlot.d.mts ADDED Viewed

@@ -0,0 +1,30 @@
+import { DataTableFiltersConfig, DataTableSearchConfig } from "./DataTable.mjs";
+import { ReactNode } from "react";
+//#region src/components/data-display/datatables/DataTableTopSlot.d.ts
+type DataTableTopSlotClassNames = {
+  root?: string;
+};
+type DataTableTopSlotProps = {
+  children?: ReactNode;
+  search?: DataTableSearchConfig;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  filters?: DataTableFiltersConfig;
+  filtersState?: Record<string, unknown>;
+  onFiltersChange?: (next: Record<string, unknown>) => void;
+  classNames?: DataTableTopSlotClassNames;
+};
+declare const DataTableTopSlot: ({
+  children,
+  search,
+  searchValue,
+  onSearchChange,
+  filters,
+  filtersState,
+  onFiltersChange,
+  classNames
+}: DataTableTopSlotProps) => ReactNode;
+//#endregion
+export { DataTableTopSlot, DataTableTopSlotProps };
+//# sourceMappingURL=DataTableTopSlot.d.mts.map

package/dist/components/data-display/datatables/DataTableTopSlot.d.mts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTableTopSlot.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableTopSlot.tsx"],"mappings":";;;;KAUK,0BAAA;EACH,IAAA;AAAA;AAAA,KAGU,qBAAA;EACV,QAAA,GAAW,SAAA;EACX,MAAA,GAAS,qBAAA;EACT,WAAA;EACA,cAAA,IAAkB,KAAA;EAClB,OAAA,GAAU,sBAAA;EACV,YAAA,GAAe,MAAA;EACf,eAAA,IAAmB,IAAA,EAAM,MAAA;EACzB,UAAA,GAAa,0BAAA;AAAA;AAAA,cAGF,gBAAA;EAAoB,QAAA;EAAA,MAAA;EAAA,WAAA;EAAA,cAAA;EAAA,OAAA;EAAA,YAAA;EAAA,eAAA;EAAA;AAAA,GAS9B,qBAAA,KAAwB,SAAA"}

package/dist/components/data-display/datatables/DataTableTopSlot.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{TextInput as e}from"../../controls/text-input/TextInput.mjs";import{dataTableTopSlot as t}from"@mage-ui/styled-system/recipes";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({children:i,search:a,searchValue:o,onSearchChange:s,filters:c,filtersState:l,onFiltersChange:u,classNames:d})=>{let f=a!=null,p=c!=null&&l!=null&&u!=null;return!f&&!p&&!(i!=null&&i!==!1)?null:r(`div`,{className:d?.root??t(),children:[p?c.render(l,u):null,f&&s?n(e,{placeholder:a.placeholder,"aria-label":a.label??a.placeholder,value:o??``,onChange:e=>s(e.currentTarget.value)}):null,i]})};export{i as DataTableTopSlot};
2	+ //# sourceMappingURL=DataTableTopSlot.mjs.map

package/dist/components/data-display/datatables/DataTableTopSlot.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTableTopSlot.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableTopSlot.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableTopSlot } from '@mage-ui/styled-system/recipes';\n\nimport { TextInput } from '../../controls/text-input/TextInput';\nimport type {\n DataTableFiltersConfig,\n DataTableSearchConfig,\n} from './DataTable';\n\ntype DataTableTopSlotClassNames = {\n root?: string;\n};\n\nexport type DataTableTopSlotProps = {\n children?: ReactNode;\n search?: DataTableSearchConfig;\n searchValue?: string;\n onSearchChange?: (value: string) => void;\n filters?: DataTableFiltersConfig;\n filtersState?: Record<string, unknown>;\n onFiltersChange?: (next: Record<string, unknown>) => void;\n classNames?: DataTableTopSlotClassNames;\n};\n\nexport const DataTableTopSlot = ({\n children,\n search,\n searchValue,\n onSearchChange,\n filters,\n filtersState,\n onFiltersChange,\n classNames,\n}: DataTableTopSlotProps): ReactNode => {\n const hasSearch = search != null;\n const hasFilters =\n filters != null && filtersState != null && onFiltersChange != null;\n const hasChildren =\n children !== null && children !== undefined && children !== false;\n\n if (!hasSearch && !hasFilters && !hasChildren) {\n return null;\n }\n\n return (\n <div className={classNames?.root ?? dataTableTopSlot()}>\n {hasFilters ? filters.render(filtersState, onFiltersChange) : null}\n {hasSearch && onSearchChange ? (\n <TextInput\n placeholder={search.placeholder}\n aria-label={search.label ?? search.placeholder}\n value={searchValue ?? ''}\n onChange={(event) => onSearchChange(event.currentTarget.value)}\n />\n ) : null}\n {children}\n </div>\n );\n};\n"],"mappings":"wLAyBA,MAAa,GAAoB,CAC/B,WACA,SACA,cACA,iBACA,UACA,eACA,kBACA,gBACsC,CACtC,IAAM,EAAY,GAAU,KACtB,EACJ,GAAW,MAAQ,GAAgB,MAAQ,GAAmB,KAQhE,MAJI,CAAC,GAAa,CAAC,GAAc,EAF/B,GAAa,MAAkC,IAAa,IAGrD,KAIP,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAkB,WACnD,EAAa,EAAQ,OAAO,EAAc,EAAgB,CAAG,KAC7D,GAAa,EACZ,EAAC,EAAA,CACC,YAAa,EAAO,YACpB,aAAY,EAAO,OAAS,EAAO,YACnC,MAAO,GAAe,GACtB,SAAW,GAAU,EAAe,EAAM,cAAc,MAAM,EAC9D,CACA,KACH,IACG"}

package/dist/components/data-display/datatables/DataTableViewport.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{dataTableViewport as e}from"@mage-ui/styled-system/recipes";import{jsx as t}from"react/jsx-runtime";const n=({className:n,children:r})=>t(`div`,{className:n??e(),children:r});export{n as DataTableViewport};
2	+ //# sourceMappingURL=DataTableViewport.mjs.map

package/dist/components/data-display/datatables/DataTableViewport.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTableViewport.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableViewport.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableViewport } from '@mage-ui/styled-system/recipes';\n\ntype DataTableViewportProps = {\n className?: string;\n children: ReactNode;\n};\n\nexport const DataTableViewport = ({\n className,\n children,\n}: DataTableViewportProps): ReactNode => {\n return <div className={className ?? dataTableViewport()}>{children}</div>;\n};\n"],"mappings":"2GASA,MAAa,GAAqB,CAChC,YACA,cAEO,EAAC,MAAA,CAAI,UAAW,GAAa,GAAmB,CAAG,YAAe"}

package/dist/components/data-display/datatables/index.d.mts CHANGED Viewed

@@ -1,5 +1,8 @@
-import { StatelessDataTableContextProvider, StatelessDataTableContextValue, useStatelessDataTableContext } from "./datatable-stateless/useStatelessDataTableContext.mjs";
-import { StatelessDataTableSlotContent, StatelessDataTableSlotRenderProps, StatelessDataTableSlotRow, StatelessDataTableSlotRowProps, StatelessDataTableSlots } from "./datatable-stateless/StatelessDataTableSlotRow.mjs";
-import { StatelessDataTable, StatelessDataTableClassNames, StatelessDataTableExpansionConfig, StatelessDataTablePaginationConfig, StatelessDataTableProps, StatelessDataTableSelectionConfig, StatelessDataTableSortingConfig, StatelessDataTableTableConfig } from "./datatable-stateless/StatelessDataTable.mjs";
-import { StatelessDataTablePageSize, StatelessDataTablePageSizeProps } from "./datatable-stateless/StatelessDataTablePageSize.mjs";
-import { ColumnDef, ExpandedState, PaginationState, RowSelectionState, SortingState } from "./datatable-stateless/index.mjs";
+import { DEFAULT_DATA_TABLE_LABELS, DataTableContextProvider, DataTableContextValue, DataTableLabels, useDataTableContext } from "./useDataTableContext.mjs";
+import { DataTable, DataTableClassNames, DataTableColumnMeta, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFiltersConfig, DataTablePaginationConfig, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig } from "./DataTable.mjs";
+import { DataTablePageSize, DataTablePageSizeProps } from "./DataTablePageSize.mjs";
+import { DataTablePagination, DataTablePaginationProps } from "./DataTablePagination.mjs";
+import { DataTableBottomSlot, DataTableBottomSlotProps } from "./DataTableBottomSlot.mjs";
+import { DataTableTopSlot, DataTableTopSlotProps } from "./DataTableTopSlot.mjs";
+import { ColumnDef as ColumnDef$1, ExpandedState as ExpandedState$1, PaginationState as PaginationState$1, RowSelectionState as RowSelectionState$1, SortingState as SortingState$1 } from "@tanstack/react-table";
+export { type ColumnDef$1 as ColumnDef, type ExpandedState$1 as ExpandedState, type PaginationState$1 as PaginationState, type RowSelectionState$1 as RowSelectionState, type SortingState$1 as SortingState };

package/dist/components/data-display/datatables/useDataTable.mjs ADDED Viewed

	@@ -0,0 +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};
2	+ //# sourceMappingURL=useDataTable.mjs.map

package/dist/components/data-display/datatables/useDataTable.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useDataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTable.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\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 DEFAULT_DATA_TABLE_LABELS,\n type DataTableContextValue,\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":"2TA8BA,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,CA4Bf,MAAO,CACL,SACA,aA5BmB,OAEhB,CACC,QACA,UACA,UACA,cACA,OAAQ,EACR,UACA,aACA,YACA,YACD,EACH,CACE,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CACF,CAKC,QACD"}

package/dist/components/data-display/datatables/useDataTableContext.d.mts ADDED Viewed

@@ -0,0 +1,29 @@
+import { DataTableProps } from "./DataTable.mjs";
+import * as react from "react";
+import * as _tanstack_react_table0 from "@tanstack/react-table";
+//#region src/components/data-display/datatables/useDataTableContext.d.ts
+type DataTableLabels = {
+  rowsPerPage: string;
+  selectedCount: (count: number) => string;
+  sortedAscending: string;
+  sortedDescending: string;
+  activateToSort: string;
+  selectAllRows: string;
+  selectRow: (index: number) => string;
+  expandRow: string;
+  collapseRow: string;
+  loading: string;
+};
+declare const DEFAULT_DATA_TABLE_LABELS: DataTableLabels;
+type DataTableContextValue<Data> = {
+  table: _tanstack_react_table0.Table<Data>;
+  refresh: () => void;
+  selectedIds: string[];
+  labels: DataTableLabels;
+} & Pick<DataTableProps<Data>, 'loading' | 'sorting' | 'pagination' | 'selection' | 'expansion'>;
+declare const useDataTableContext: <Data>() => DataTableContextValue<Data>;
+declare const DataTableContextProvider: react.Provider<DataTableContextValue<unknown> | null>;
+//#endregion
+export { DEFAULT_DATA_TABLE_LABELS, DataTableContextProvider, DataTableContextValue, DataTableLabels, useDataTableContext };
+//# sourceMappingURL=useDataTableContext.d.mts.map

package/dist/components/data-display/datatables/useDataTableContext.d.mts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useDataTableContext.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTableContext.ts"],"mappings":";;;;;KAIY,eAAA;EACV,WAAA;EACA,aAAA,GAAgB,KAAA;EAChB,eAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,SAAA,GAAY,KAAA;EACZ,SAAA;EACA,WAAA;EACA,OAAA;AAAA;AAAA,cAGW,yBAAA,EAA2B,eAAA;AAAA,KAa5B,qBAAA;EACV,KAAA,EAAiD,sBAAA,CAAV,KAAA,CAAM,IAAA;EAC7C,OAAA;EACA,WAAA;EACA,MAAA,EAAQ,eAAA;AAAA,IACN,IAAA,CACF,cAAA,CAAe,IAAA;AAAA,cAQJ,mBAAA,cAAgC,qBAAA,CAAsB,IAAA;AAAA,cAYtD,wBAAA,EAAwB,KAAA,CAAA,QAAA,CAAA,qBAAA"}

package/dist/components/data-display/datatables/useDataTableContext.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{createContext as e,useContext as t}from"react";const n={rowsPerPage:`Rows per page`,selectedCount:e=>`${e} selected`,sortedAscending:`Sorted ascending`,sortedDescending:`Sorted descending`,activateToSort:`Activate to sort`,selectAllRows:`Select all rows`,selectRow:e=>`Select row ${e}`,expandRow:`Expand row`,collapseRow:`Collapse row`,loading:`Loading`},r=e(null),i=()=>{let e=t(r);if(!e)throw Error(`useDataTableContext must be used within <DataTable> or one of its slots.`);return e},a=r.Provider;export{n as DEFAULT_DATA_TABLE_LABELS,a as DataTableContextProvider,i as useDataTableContext};
2	+ //# sourceMappingURL=useDataTableContext.mjs.map

package/dist/components/data-display/datatables/useDataTableContext.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useDataTableContext.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTableContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { DataTableProps } from './DataTable';\n\nexport type DataTableLabels = {\n rowsPerPage: string;\n selectedCount: (count: number) => string;\n sortedAscending: string;\n sortedDescending: string;\n activateToSort: string;\n selectAllRows: string;\n selectRow: (index: number) => string;\n expandRow: string;\n collapseRow: string;\n loading: string;\n};\n\nexport const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {\n rowsPerPage: 'Rows per page',\n selectedCount: (count) => `${count} selected`,\n sortedAscending: 'Sorted ascending',\n sortedDescending: 'Sorted descending',\n activateToSort: 'Activate to sort',\n selectAllRows: 'Select all rows',\n selectRow: (index) => `Select row ${index}`,\n expandRow: 'Expand row',\n collapseRow: 'Collapse row',\n loading: 'Loading',\n};\n\nexport type DataTableContextValue<Data> = {\n table: import('@tanstack/react-table').Table<Data>;\n refresh: () => void;\n selectedIds: string[];\n labels: DataTableLabels;\n} & Pick<\n DataTableProps<Data>,\n 'loading' | 'sorting' | 'pagination' | 'selection' | 'expansion'\n>;\n\nconst DataTableContext = createContext<DataTableContextValue<unknown> | null>(\n null,\n);\n\nexport const useDataTableContext = <Data>(): DataTableContextValue<Data> => {\n const context = useContext(DataTableContext);\n\n if (!context) {\n throw new Error(\n 'useDataTableContext must be used within <DataTable> or one of its slots.',\n );\n }\n\n return context as DataTableContextValue<Data>;\n};\n\nexport const DataTableContextProvider = DataTableContext.Provider;\n"],"mappings":"sDAiBA,MAAa,EAA6C,CACxD,YAAa,gBACb,cAAgB,GAAU,GAAG,EAAM,WACnC,gBAAiB,mBACjB,iBAAkB,oBAClB,eAAgB,mBAChB,cAAe,kBACf,UAAY,GAAU,cAAc,IACpC,UAAW,aACX,YAAa,eACb,QAAS,UACV,CAYK,EAAmB,EACvB,KACD,CAEY,MAA+D,CAC1E,IAAM,EAAU,EAAW,EAAiB,CAE5C,GAAI,CAAC,EACH,MAAU,MACR,2EACD,CAGH,OAAO,GAGI,EAA2B,EAAiB"}

package/dist/components/data-display/index.d.mts CHANGED Viewed

@@ -11,12 +11,13 @@ import { TableHeaderCellProps } from "./table/TableHeaderCell.mjs";
 import { TableCellProps } from "./table/TableCell.mjs";
 import { TableCaptionProps } from "./table/TableCaption.mjs";
 import { Table } from "./table/Table.mjs";
-import { StatelessDataTableContextProvider, StatelessDataTableContextValue, useStatelessDataTableContext } from "./datatables/datatable-stateless/useStatelessDataTableContext.mjs";
-import { StatelessDataTableSlotContent, StatelessDataTableSlotRenderProps, StatelessDataTableSlotRow, StatelessDataTableSlotRowProps, StatelessDataTableSlots } from "./datatables/datatable-stateless/StatelessDataTableSlotRow.mjs";
-import { StatelessDataTable, StatelessDataTableClassNames, StatelessDataTableExpansionConfig, StatelessDataTablePaginationConfig, StatelessDataTableProps, StatelessDataTableSelectionConfig, StatelessDataTableSortingConfig, StatelessDataTableTableConfig } from "./datatables/datatable-stateless/StatelessDataTable.mjs";
-import { StatelessDataTablePageSize, StatelessDataTablePageSizeProps } from "./datatables/datatable-stateless/StatelessDataTablePageSize.mjs";
-import { ColumnDef, ExpandedState, PaginationState, RowSelectionState, SortingState } from "./datatables/datatable-stateless/index.mjs";
-import "./datatables/index.mjs";
+import { DEFAULT_DATA_TABLE_LABELS, DataTableContextProvider, DataTableContextValue, DataTableLabels, useDataTableContext } from "./datatables/useDataTableContext.mjs";
+import { DataTable, DataTableClassNames, DataTableColumnMeta, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFiltersConfig, DataTablePaginationConfig, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig } from "./datatables/DataTable.mjs";
+import { DataTablePageSize, DataTablePageSizeProps } from "./datatables/DataTablePageSize.mjs";
+import { DataTablePagination, DataTablePaginationProps } from "./datatables/DataTablePagination.mjs";
+import { DataTableBottomSlot, DataTableBottomSlotProps } from "./datatables/DataTableBottomSlot.mjs";
+import { DataTableTopSlot, DataTableTopSlotProps } from "./datatables/DataTableTopSlot.mjs";
+import { ColumnDef, ExpandedState, PaginationState, RowSelectionState, SortingState } from "./datatables/index.mjs";
 import { DescriptionList, DescriptionListClassNames, DescriptionListItemProps, DescriptionListProps } from "./description-list/DescriptionList.mjs";
 import { Icon, IconProps } from "./icons/icon/Icon.mjs";
 import { IconRaw, IconRawProps } from "./icons/icon-raw/IconRaw.mjs";

package/dist/components/data-display/kanban/KanbanCardAdder.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Button as e}from"../../buttons/button/Button.mjs";import{addCard as t,removeCardPlaceholder as n}from"./kanbanUtils.mjs";import{TextInput as r}from"../../controls/text-input/TextInput.mjs";import{cx as i}from"@mage-ui/styled-system/css";import{kanbanCardAdder as a,kanbanCardAdderButtonAdd as o,kanbanCardAdderButtonAddInner as s,kanbanCardAdderButtonAddLabel as c,kanbanCardAdderButtonAddRoot as l,kanbanCardAdderButtonAddSection as u,kanbanCardAdderButtonCancel as d,kanbanCardAdderButtonCancelInner as f,kanbanCardAdderButtonCancelLabel as p,kanbanCardAdderButtonCancelRoot as m,kanbanCardAdderButtonCancelSection as h,kanbanCardAdderButtonWrapper as g,kanbanCardAdderRoot as _,kanbanCardAdderTextInput as v,kanbanCardAdderTextInputDescription as y,kanbanCardAdderTextInputError as b,kanbanCardAdderTextInputInput as x,kanbanCardAdderTextInputLabel as S,kanbanCardAdderTextInputRequired as C,kanbanCardAdderTextInputRoot as w,kanbanCardAdderTextInputSection as T,kanbanCardAdderTextInputWrapper as E}from"@mage-ui/styled-system/recipes";import{jsx as D,jsxs as O}from"react/jsx-runtime";import{useState as k}from"react";import{visuallyHidden as A}from"@mage-ui/styled-system/patterns";const j=({columnId:j,dataSource:M,setDataSource:N,inTop:P,inputLabel:F=`Task Title`,inputPlaceholder:I=`Enter task title`,addLabel:L=`Add Task`,cancelLabel:R=`Cancel`,classNames:z})=>{let[B,V]=k(``),H=e=>{N(n(e,M))},U=(e,n)=>{n.trim()&&N(t(e,M,n,P))};return O(`div`,{className:i(z?.cardAdder??a(),z?.root??_()),children:[D(r,{label:F,value:B,onChange:e=>V(e.currentTarget.value),placeholder:I,onKeyDown:e=>{e.key===`Enter`?U(j,B):e.key===`Escape`&&H(j)},classNames:{textInput:z?.textInput??v(),root:z?.root??w(),label:z?.label??i(S(),A()),description:z?.description??y(),error:z?.error??b(),wrapper:z?.wrapper??E(),input:z?.input??x(),section:z?.section??T(),required:z?.required??C()}}),O(`div`,{className:z?.buttonWrapper??g(),children:[D(e,{type:`button`,onClick:()=>H(j),classNames:{button:z?.cancelButton?.button??d(),root:z?.cancelButton?.root??m(),inner:z?.cancelButton?.inner??f(),label:z?.cancelButton?.label??p(),section:z?.cancelButton?.section??h()},children:R}),D(e,{type:`button`,onClick:()=>U(j,B),classNames:{button:z?.addButton?.button??o(),root:z?.addButton?.root??l(),inner:z?.addButton?.inner??s(),label:z?.addButton?.label??c(),section:z?.addButton?.section??u()},children:L})]})]})};export{j as KanbanCardAdder};
+import{Button as e}from"../../buttons/button/Button.mjs";import{TextInput as t}from"../../controls/text-input/TextInput.mjs";import{addCard as n,removeCardPlaceholder as r}from"./kanbanUtils.mjs";import{cx as i}from"@mage-ui/styled-system/css";import{kanbanCardAdder as a,kanbanCardAdderButtonAdd as o,kanbanCardAdderButtonAddInner as s,kanbanCardAdderButtonAddLabel as c,kanbanCardAdderButtonAddRoot as l,kanbanCardAdderButtonAddSection as u,kanbanCardAdderButtonCancel as d,kanbanCardAdderButtonCancelInner as f,kanbanCardAdderButtonCancelLabel as p,kanbanCardAdderButtonCancelRoot as m,kanbanCardAdderButtonCancelSection as h,kanbanCardAdderButtonWrapper as g,kanbanCardAdderRoot as _,kanbanCardAdderTextInput as v,kanbanCardAdderTextInputDescription as y,kanbanCardAdderTextInputError as b,kanbanCardAdderTextInputInput as x,kanbanCardAdderTextInputLabel as S,kanbanCardAdderTextInputRequired as C,kanbanCardAdderTextInputRoot as w,kanbanCardAdderTextInputSection as T,kanbanCardAdderTextInputWrapper as E}from"@mage-ui/styled-system/recipes";import{jsx as D,jsxs as O}from"react/jsx-runtime";import{useState as k}from"react";import{visuallyHidden as A}from"@mage-ui/styled-system/patterns";const j=({columnId:j,dataSource:M,setDataSource:N,inTop:P,inputLabel:F=`Task Title`,inputPlaceholder:I=`Enter task title`,addLabel:L=`Add Task`,cancelLabel:R=`Cancel`,classNames:z})=>{let[B,V]=k(``),H=e=>{N(r(e,M))},U=(e,t)=>{t.trim()&&N(n(e,M,t,P))};return O(`div`,{className:i(z?.cardAdder??a(),z?.root??_()),children:[D(t,{label:F,value:B,onChange:e=>V(e.currentTarget.value),placeholder:I,onKeyDown:e=>{e.key===`Enter`?U(j,B):e.key===`Escape`&&H(j)},classNames:{textInput:z?.textInput??v(),root:z?.root??w(),label:z?.label??i(S(),A()),description:z?.description??y(),error:z?.error??b(),wrapper:z?.wrapper??E(),input:z?.input??x(),section:z?.section??T(),required:z?.required??C()}}),O(`div`,{className:z?.buttonWrapper??g(),children:[D(e,{type:`button`,onClick:()=>H(j),classNames:{button:z?.cancelButton?.button??d(),root:z?.cancelButton?.root??m(),inner:z?.cancelButton?.inner??f(),label:z?.cancelButton?.label??p(),section:z?.cancelButton?.section??h()},children:R}),D(e,{type:`button`,onClick:()=>U(j,B),classNames:{button:z?.addButton?.button??o(),root:z?.addButton?.root??l(),inner:z?.addButton?.inner??s(),label:z?.addButton?.label??c(),section:z?.addButton?.section??u()},children:L})]})]})};export{j as KanbanCardAdder};
 //# sourceMappingURL=KanbanCardAdder.mjs.map

package/dist/components/data-display/table/TableBody.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Virtual as e}from"../../misc/virtual/Virtual.mjs";import{useScrollableContext as t}from"./TableContext.mjs";import{Table as n}from"@mantine/core";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import{Children as o,cloneElement as s,isValidElement as c}from"react";const l=({height:e})=>e<=0?null:i(`tr`,{"aria-hidden":!0,children:i(`td`,{style:{height:e}})}),u=({item:e})=>{let t=e.row;if(!c(t))return t;let n=t.props.ref;return s(t,{ref:t=>{e.measureRef(t),typeof n==`function`?n(t):n&&(n.current=t)}})},d=({classNames:s,children:c,...d})=>{let f=t();if(f){let t=o.toArray(c);return i(n.Tbody,{className:s?.tbody,...d,children:i(e,{rows:t,estimateSize:f.estimateSize,scrollRef:f.viewportRef,overscan:f.overscan,children:(e,t)=>a(r,{children:[i(l,{height:t.top}),e.map(e=>i(u,{item:e},e.key)),i(l,{height:t.bottom})]})})})}return i(n.Tbody,{className:s?.tbody,...d,children:c})};export{d as TableBody};
+import{Virtual as e}from"../../misc/virtual/Virtual.mjs";import{useScrollableContext as t}from"./TableContext.mjs";import{Table as n}from"@mantine/core";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import{Children as o,cloneElement as s,isValidElement as c}from"react";const l=({height:e})=>e<=0?null:i(`tr`,{"aria-hidden":!0,children:i(`td`,{style:{height:e}})}),u=({item:e})=>{let t=e.row;if(!c(t))return t;let n=t.props.ref;return s(t,{ref:t=>{e.measureRef(t),typeof n==`function`?n(t):n&&(n.current=t)}})},d=({classNames:s,children:c,...d})=>{let f=t();if(f?.virtualized){let t=o.toArray(c);return i(n.Tbody,{className:s?.tbody,...d,children:i(e,{rows:t,estimateSize:f.estimateSize,scrollRef:f.viewportRef,overscan:f.overscan,children:(e,t)=>a(r,{children:[i(l,{height:t.top}),e.map(e=>i(u,{item:e},e.key)),i(l,{height:t.bottom})]})})})}return i(n.Tbody,{className:s?.tbody,...d,children:c})};export{d as TableBody};
 //# sourceMappingURL=TableBody.mjs.map