@mezzanine-ui/react 1.0.0-beta.1 → 1.0.0-beta.2

package/Table/index.d.ts

@@ -1,7 +1,7 @@
-export { tableClasses as classes, getCellAlignClass, getColumnStyle, getRowKey, type FixedType, type SortOrder, type TableColumn, type TableDataSource, type TableDraggable, type TableExpandable, type TableRowSelection, type TableScroll, type TableSize, } from '@mezzanine-ui/core/table';
-export { default, type TableBaseProps, type TableNonVirtualizedProps, type TableProps, type TableVirtualizedProps, } from './Table';
-export { TableContext, TableDataContext, useTableContext, useTableDataContext, type TableColumnState, type TableContextValue, type TableDataContextValue, type TableDraggableState, type TableExpansionState, type TableSelectionState, type TableSortingState, type TableTransitionState, } from './TableContext';
-export { type UpdateDataSourceOptions } from './hooks';
+export { TABLE_ACTIONS_KEY, tableClasses as classes, getCellAlignClass, getRowKey, type ColumnAlign, type FixedType, type HighlightMode, type SortOrder, type TableActionItem, type TableActions, type TableActionsBase, type TableActionsWithMinWidth, type TableBulkActions, type TableBulkGeneralAction, type TableBulkOverflowAction, type TableColumnBase, type TableColumnBaseWithMinWidthRequired, type TableColumn, type TableColumnTitleMenu, type TableColumnWithDataIndex, type TableColumnWithDataIndexAndMinWidth, type TableColumnWithMinWidth, type TableColumnWithRender, type TableColumnWithRenderAndMinWidth, type TableDataSource, type TableDataSourceWithId, type TableDataSourceWithKey, type TableDraggable, type TableExpandable, type TableRecord, type TableRowSelection, type TableRowSelectionBase, type TableRowSelectionCheckbox, type TableRowSelectionRadio, type TableScroll, type TableSelectionMode, type TableSize, } from '@mezzanine-ui/core/table';
+export { default, type TableBaseProps, type TableResizableProps, type TableNonResizableProps, type TableVirtualizedProps, type TableNonVirtualizedProps, type TableProps, } from './Table';
+export { TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext, type TableResizedColumnState, type TableContextValue, type TableDataContextValue, type TableDraggableState, type TableHighlightState, type TableExpansionState, type TableSelectionState, type TableSortingState, } from './TableContext';
+export { type UpdateDataSourceOptions, type UseTableDataSourceOptions, type TableTransitionState, } from './hooks';
 export * from './hooks';
 export * from './components';
 export * from './utils';

package/Table/index.js

@@ -1,14 +1,15 @@
-export { tableClasses as classes, getCellAlignClass, getColumnStyle, getRowKey } from '@mezzanine-ui/core/table';
+export { TABLE_ACTIONS_KEY, tableClasses as classes, getCellAlignClass, getRowKey } from '@mezzanine-ui/core/table';
 export { Table as default } from './Table.js';
-export { TableContext, TableDataContext, useTableContext, useTableDataContext } from './TableContext.js';
+export { TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext } from './TableContext.js';
 export { useTableSorting } from './hooks/useTableSorting.js';
 export { useTableSelection } from './hooks/useTableSelection.js';
-export { useTableColumns } from './hooks/useTableColumns.js';
+export { useTableResizedColumns } from './hooks/useTableResizedColumns.js';
 export { useTableExpansion } from './hooks/useTableExpansion.js';
 export { useTableFixedOffsets } from './hooks/useTableFixedOffsets.js';
 export { useTableScroll } from './hooks/useTableScroll.js';
 export { useTableVirtualization } from './hooks/useTableVirtualization.js';
 export { useTableDataSource } from './hooks/useTableDataSource.js';
+export { TableActionsCell } from './components/TableActionsCell.js';
 export { TableBody } from './components/TableBody.js';
 export { TableCell } from './components/TableCell.js';
 export { TableColGroup } from './components/TableColGroup.js';
@@ -19,4 +20,5 @@ export { TablePagination } from './components/TablePagination.js';
 export { TableResizeHandle } from './components/TableResizeHandle.js';
 export { TableRow } from './components/TableRow.js';
 export { TableSelectionCell } from './components/TableSelectionCell.js';
+export { calculateColumnWidths, clampWidth } from './utils/calculateColumnWidths.js';
 export { useTableRowSelection } from './utils/useTableRowSelection.js';

package/Table/utils/calculateColumnWidths.d.ts

@@ -0,0 +1,28 @@
+import type { TableColumn } from '@mezzanine-ui/core/table';
+/**
+ * Check if width calculation should be applied.
+ * Only calculate explicit widths for root tables (not nested).
+ * Nested tables should let columns use natural CSS behavior.
+ */
+export declare function shouldCalculateWidths(isNestedTable: boolean, containerWidth: number | undefined): boolean;
+/**
+ * Clamp a width value between min and max bounds
+ */
+export declare function clampWidth(width: number, minWidth?: number, maxWidth?: number): number;
+export interface CalculateColumnWidthsOptions {
+    /** Action columns (drag handle, selection, expansion) total width */
+    actionColumnsWidth: number;
+    /** All data columns */
+    columns: TableColumn[];
+    /** Container width */
+    containerWidth: number;
+    /** Get resized column width by key */
+    getResizedColumnWidth?: (key: string) => number | undefined;
+}
+/**
+ * Calculate the resolved width for each column.
+ * - Columns with explicit width use that value
+ * - Columns without width share the remaining space equally (simulating flex: 1)
+ * - All widths are clamped to minWidth/maxWidth if specified
+ */
+export declare function calculateColumnWidths({ actionColumnsWidth, columns, containerWidth, getResizedColumnWidth, }: CalculateColumnWidthsOptions): Map<string, number>;

package/Table/utils/calculateColumnWidths.js

@@ -0,0 +1,80 @@
+/**
+ * Check if width calculation should be applied.
+ * Only calculate explicit widths for root tables (not nested).
+ * Nested tables should let columns use natural CSS behavior.
+ */
+function shouldCalculateWidths(isNestedTable, containerWidth) {
+    // Don't calculate widths for nested tables - they inherit parent's context
+    // and should use natural CSS column sizing
+    if (isNestedTable) {
+        return false;
+    }
+    // Don't calculate if container width is not available
+    if (!containerWidth || containerWidth <= 0) {
+        return false;
+    }
+    return true;
+}
+/**
+ * Clamp a width value between min and max bounds
+ */
+function clampWidth(width, minWidth, maxWidth) {
+    let result = width;
+    if (minWidth !== undefined && result < minWidth) {
+        result = minWidth;
+    }
+    if (maxWidth !== undefined && result > maxWidth) {
+        result = maxWidth;
+    }
+    return result;
+}
+/**
+ * Calculate the resolved width for each column.
+ * - Columns with explicit width use that value
+ * - Columns without width share the remaining space equally (simulating flex: 1)
+ * - All widths are clamped to minWidth/maxWidth if specified
+ */
+function calculateColumnWidths({ actionColumnsWidth, columns, containerWidth, getResizedColumnWidth, }) {
+    const widthMap = new Map();
+    // If container width is not available yet, return empty map
+    if (containerWidth <= 0) {
+        return widthMap;
+    }
+    // Available width for data columns
+    const availableWidth = containerWidth - actionColumnsWidth;
+    if (availableWidth <= 0) {
+        return widthMap;
+    }
+    // First pass: identify columns with explicit width and calculate total fixed width
+    let totalFixedWidth = 0;
+    const flexColumns = [];
+    columns.forEach((column) => {
+        const resizedWidth = getResizedColumnWidth === null || getResizedColumnWidth === void 0 ? void 0 : getResizedColumnWidth(column.key);
+        if (resizedWidth !== undefined) {
+            // Column has been resized, use that width
+            widthMap.set(column.key, resizedWidth);
+            totalFixedWidth += resizedWidth;
+        }
+        else if (column.width !== undefined) {
+            // Column has explicit width
+            const width = clampWidth(column.width, column.minWidth, column.maxWidth);
+            widthMap.set(column.key, width);
+            totalFixedWidth += width;
+        }
+        else {
+            // Column needs flex width calculation
+            flexColumns.push(column);
+        }
+    });
+    // Second pass: distribute remaining width to flex columns
+    if (flexColumns.length > 0) {
+        const averageWidth = (availableWidth - totalFixedWidth) / flexColumns.length;
+        flexColumns.forEach((column) => {
+            const clampedWidth = clampWidth(averageWidth, column.minWidth, column.maxWidth);
+            widthMap.set(column.key, clampedWidth);
+        });
+    }
+    return widthMap;
+}
+
+export { calculateColumnWidths, clampWidth, shouldCalculateWidths };

package/Table/utils/index.d.ts

@@ -1,2 +1,4 @@
+export type { CalculateColumnWidthsOptions } from './calculateColumnWidths';
+export { calculateColumnWidths, clampWidth } from './calculateColumnWidths';
 export type { UseTableRowSelectionProps } from './useTableRowSelection';
 export { useTableRowSelection } from './useTableRowSelection';

package/Table/utils/index.js

@@ -1 +1,2 @@
+export { calculateColumnWidths, clampWidth } from './calculateColumnWidths.js';
 export { useTableRowSelection } from './useTableRowSelection.js';

package/Table/utils/useTableRowSelection.d.ts

@@ -1,4 +1,4 @@
-import { TableDataSource, TableRowSelection } from '@mezzanine-ui/core/table';
+import { TableDataSource, TableRowSelectionCheckbox } from '@mezzanine-ui/core/table';
 export interface UseTableRowSelectionProps<T extends TableDataSource> {
     getSubData: (record: T) => T[] | undefined;
 }
@@ -6,13 +6,13 @@ export interface UseTableRowSelectionProps<T extends TableDataSource> {
  * Custom hook for users to manage row selection state in a table with expandable rows.
  */
 export declare function useTableRowSelection<T extends TableDataSource = TableDataSource>(props: UseTableRowSelectionProps<T>): {
-    parentSelectedKeys: (string | number)[];
-    parentOnChange: (selectedRowKeys: (string | number)[], selectedRow: T | null, selectedRows: T[]) => void;
+    parentSelectedKeys: string[];
+    parentOnChange: (selectedRowKeys: string[], selectedRow: T | null, selectedRows: T[]) => void;
     parentGetCheckboxProps: (record: T) => {
         indeterminate?: boolean;
         selected?: boolean;
     };
-    getChildOnChange: (record: T) => TableRowSelection<T>["onChange"];
-    getChildSelectedRowKeys: (record: T) => (string | number)[];
+    getChildOnChange: (record: T) => TableRowSelectionCheckbox<T>["onChange"];
+    getChildSelectedRowKeys: (record: T) => string[];
     totalSelectionCount: number;
 };

package/Table/utils/useTableRowSelection.js

@@ -49,7 +49,7 @@ function useTableRowSelection(props) {
         const selectedItem = selectedKeys.find((item) => item.key === getRowKey(record));
         return (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.subKeys) || [];
     }, [selectedKeys]);
-    const totalSelectionCount = useMemo(() => selectedKeys.reduce((acc, item) => { var _a; return acc + (((_a = item.subKeys) === null || _a === void 0 ? void 0 : _a.length) || 1); }, 0), [selectedKeys]);
+    const totalSelectionCount = useMemo(() => selectedKeys.reduce((acc, item) => { var _a, _b; return acc + ((_b = (_a = item.subKeys) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + 1; }, 0), [selectedKeys]);
     return {
         parentSelectedKeys,
         parentOnChange,

package/index.d.ts

@@ -1,11 +1,13 @@
 export * from './utils/array-move';
 export * from './utils/composeRefs';
 export * from './utils/cx';
+export * from './utils/format-number-with-commas';
 export * from './utils/general';
 export * from './utils/get-css-variable-value';
 export * from './utils/get-scrollbar-width';
 export * from './utils/getElement';
 export * from './utils/jsx-types';
+export * from './utils/parse-number-with-commas';
 export * from './hooks/useClickAway';
 export * from './hooks/useComposeRefs';
 export * from './hooks/useDocumentEscapeKeyDown';
@@ -71,16 +73,16 @@ export { default as Badge, BadgeContainer } from './Badge';
 export type { BadgeProps } from './Badge';
 export { default as Card, CardActions } from './Card';
 export type { CardActionsProps, CardProps } from './Card';
+export { Description, DescriptionTitle, DescriptionContent, DescriptionGroup, } from './Description';
+export type { DescriptionProps, DescriptionTitleProps, DescriptionContentProps, DescriptionGroupProps, } from './Description';
 export { default as Empty } from './Empty';
 export type { EmptyProps } from './Empty';
 export { OverflowCounterTag } from './OverflowTooltip';
 export type { OverflowCounterTagProps } from './OverflowTooltip';
 export { default as Pagination, PaginationItem, PaginationJumper, PaginationPageSize, usePagination, } from './Pagination';
 export type { PaginationItemProps, PaginationItemType, PaginationJumperProps, PaginationPageSizeProps, PaginationProps, } from './Pagination';
-export { default as Table, TableContext, TableDataContext, useTableContext, useTableDataContext, 
-/** @NOTE Table hooks only for internal usage  */
-useTableRowSelection, } from './Table';
-export type { TableProps, TableContextValue, TableDataContextValue, TableSortingState, TableSelectionState, TableExpansionState, TableColumnState, TableDraggableState, TableSize, UseTableRowSelectionProps, } from './Table';
+export { default as Table, getCellAlignClass, getRowKey, TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext, useTableRowSelection, useTableDataSource, } from './Table';
+export { type TableRecord, type TableDataSourceWithKey, type TableDataSourceWithId, type TableDataSource, type SortOrder, type ColumnAlign, type HighlightMode, type FixedType, type TableSize, type TableColumnTitleMenu, type TableColumnBase, type TableColumnBaseWithMinWidthRequired, type TableColumn, type TableColumnWithMinWidth, type TableColumnWithDataIndex, type TableColumnWithDataIndexAndMinWidth, type TableColumnWithRender, type TableColumnWithRenderAndMinWidth, type TableSelectionMode, type TableBulkGeneralAction, type TableBulkOverflowAction, type TableBulkActions, type TableRowSelectionBase, type TableRowSelectionCheckbox, type TableRowSelectionRadio, type TableRowSelection, type TableScroll, type TableDraggable, type TableExpandable, type TableBaseProps, type TableVirtualizedProps, type TableNonVirtualizedProps, type TableProps, type TableResizedColumnState, type TableContextValue, type TableDataContextValue, type TableDraggableState, type TableExpansionState, type TableSelectionState, type TableSortingState, type UpdateDataSourceOptions, type UseTableDataSourceOptions, type TableTransitionState, type TableActionItem, type TableActions, type TableActionsBase, type TableActionsWithMinWidth, } from './Table';
 export { default as Tag } from './Tag';
 export type { TagProps, TagSize } from './Tag';
 export { default as Tooltip } from './Tooltip';

package/index.js

@@ -1,8 +1,10 @@
 export { arrayMove } from './utils/array-move.js';
 export { composeRefs } from './utils/composeRefs.js';
+export { formatNumberWithCommas } from './utils/format-number-with-commas.js';
 export { getCSSVariableValue, getNumericCSSVariablePixelValue } from './utils/get-css-variable-value.js';
 export { getScrollbarWidth } from './utils/get-scrollbar-width.js';
 export { getElement } from './utils/getElement.js';
+export { parseNumberWithCommas } from './utils/parse-number-with-commas.js';
 export { useClickAway } from './hooks/useClickAway.js';
 export { useComposeRefs } from './hooks/useComposeRefs.js';
 export { useDocumentEscapeKeyDown } from './hooks/useDocumentEscapeKeyDown.js';
@@ -57,6 +59,10 @@ export { default as Badge } from './Badge/Badge.js';
 export { default as BadgeContainer } from './Badge/BadgeContainer.js';
 export { default as Card } from './Card/Card.js';
 export { default as CardActions } from './Card/CardActions.js';
+export { default as Description } from './Description/Description.js';
+export { default as DescriptionTitle } from './Description/DescriptionTitle.js';
+export { default as DescriptionContent } from './Description/DescriptionContent.js';
+export { default as DescriptionGroup } from './Description/DescriptionGroup.js';
 export { default as Empty } from './Empty/Empty.js';
 export { default as OverflowCounterTag } from './OverflowTooltip/OverflowCounterTag.js';
 export { default as Pagination } from './Pagination/Pagination.js';
@@ -147,8 +153,10 @@ export { default as Translate } from './Transition/Translate.js';
 export { default as ConfigProvider } from './Provider/ConfigProvider.js';
 export { useStepper } from './Stepper/useStepper.js';
 export { usePagination } from './Pagination/usePagination.js';
-export { TableContext, TableDataContext, useTableContext, useTableDataContext } from './Table/TableContext.js';
+export { getCellAlignClass, getRowKey } from '@mezzanine-ui/core/table';
+export { TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext } from './Table/TableContext.js';
 export { useTableRowSelection } from './Table/utils/useTableRowSelection.js';
+export { useTableDataSource } from './Table/hooks/useTableDataSource.js';
 export { getTreeNodeEntities } from './Tree/getTreeNodeEntities.js';
 export { toggleValue, toggleValueWithStatusControl, uniqueArray } from './Tree/toggleValue.js';
 export { traverseTree } from './Tree/traverseTree.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,9 +31,9 @@
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react-dom": "^2.1.6",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mezzanine-ui/core": "^1.0.0-beta.1",
-    "@mezzanine-ui/icons": "^1.0.0-beta.1",
-    "@mezzanine-ui/system": "^1.0.0-beta.1",
+    "@mezzanine-ui/core": "^1.0.0-beta.2",
+    "@mezzanine-ui/icons": "^1.0.0-beta.2",
+    "@mezzanine-ui/system": "^1.0.0-beta.2",
     "@tanstack/react-virtual": "^3.13.13",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",

package/utils/format-number-with-commas.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Formats a number or numeric string with commas according to the specified locale.
+ */
+export declare function formatNumberWithCommas(input: number | string, locale?: string, options?: Intl.NumberFormatOptions): string;

package/utils/format-number-with-commas.js

@@ -0,0 +1,27 @@
+'use client';
+/**
+ * Formats a number or numeric string with commas according to the specified locale.
+ */
+function formatNumberWithCommas(input, locale = 'en-US', options) {
+    let value;
+    if (typeof input === 'number') {
+        if (!Number.isFinite(input))
+            return '';
+        value = input;
+    }
+    else {
+        const trimmed = input.trim();
+        if (trimmed === '')
+            return '';
+        const parsed = Number(trimmed);
+        if (!Number.isFinite(parsed))
+            return '';
+        value = parsed;
+    }
+    return new Intl.NumberFormat(locale, {
+        maximumFractionDigits: 20,
+        ...options,
+    }).format(value);
+}
+
+export { formatNumberWithCommas };

package/utils/parse-number-with-commas.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Parses a string representing a number with commas into a number.
+ */
+export declare function parseNumberWithCommas(input: string, strict?: boolean): number | null;

package/utils/parse-number-with-commas.js

@@ -0,0 +1,22 @@
+/**
+ * Parses a string representing a number with commas into a number.
+ */
+function parseNumberWithCommas(input, strict = false) {
+    if (typeof input !== 'string')
+        return null;
+    const trimmed = input.trim();
+    if (trimmed === '')
+        return null;
+    if (strict) {
+        /** Strictly formatted number with commas */
+        const STRICT_FORMAT = /^-?\d{1,3}(?:,\d{3})*(?:\.\d+)?$/;
+        if (!STRICT_FORMAT.test(trimmed)) {
+            return null;
+        }
+    }
+    const normalized = trimmed.split(',').join('');
+    const value = Number(normalized);
+    return Number.isFinite(value) ? value : null;
+}
+
+export { parseNumberWithCommas };

package/Table/hooks/useTableColumns.d.ts

@@ -1,8 +0,0 @@
-import { type TableColumn, type TableDataSource } from '@mezzanine-ui/core/table';
-import type { TableColumnState } from '../TableContext';
-import { ActionColumnConfig } from './typings';
-export interface UseTableColumnsOptions<T extends TableDataSource> {
-    actionConfig: ActionColumnConfig;
-    columns: TableColumn<T>[];
-}
-export declare function useTableColumns<T extends TableDataSource>({ actionConfig, columns, }: UseTableColumnsOptions<T>): TableColumnState;

package/Table/hooks/useTableColumns.js

@@ -1,91 +0,0 @@
-'use client';
-import { useState, useMemo, useCallback } from 'react';
-import { DRAG_HANDLE_COLUMN_WIDTH, EXPANSION_COLUMN_WIDTH, SELECTION_COLUMN_WIDTH } from '@mezzanine-ui/core/table';
-
-function useTableColumns({ actionConfig, columns, }) {
-    const { dragHandleFixed, expansionFixed, selectionFixed } = actionConfig;
-    const [resizedColumnWidths, setResizedColumnWidths] = useState(new Map());
-    const parseFixed = (fixed) => {
-        if (fixed === true || fixed === 'start')
-            return 'start';
-        if (fixed === 'end')
-            return 'end';
-        return null;
-    };
-    const { fixedEndColumns, fixedStartColumns, scrollableColumns } = useMemo(() => {
-        const start = [];
-        const end = [];
-        const scrollable = [];
-        columns.forEach((col) => {
-            const fixedPos = parseFixed(col.fixed);
-            if (fixedPos === 'start') {
-                start.push(col);
-            }
-            else if (fixedPos === 'end') {
-                end.push(col);
-            }
-            else {
-                scrollable.push(col);
-            }
-        });
-        return {
-            fixedEndColumns: end,
-            fixedStartColumns: start,
-            scrollableColumns: scrollable,
-        };
-    }, [columns]);
-    const totalFixedStartWidth = useMemo(() => {
-        let width = 0;
-        if (dragHandleFixed) {
-            width += DRAG_HANDLE_COLUMN_WIDTH;
-        }
-        if (expansionFixed) {
-            width += EXPANSION_COLUMN_WIDTH;
-        }
-        if (selectionFixed) {
-            width += SELECTION_COLUMN_WIDTH;
-        }
-        fixedStartColumns.forEach((col) => {
-            var _a, _b;
-            width += (_b = (_a = resizedColumnWidths.get(col.key)) !== null && _a !== void 0 ? _a : col.width) !== null && _b !== void 0 ? _b : 0;
-        });
-        return width;
-    }, [
-        selectionFixed,
-        expansionFixed,
-        dragHandleFixed,
-        fixedStartColumns,
-        resizedColumnWidths,
-    ]);
-    const totalFixedEndWidth = useMemo(() => {
-        let width = 0;
-        fixedEndColumns.forEach((col) => {
-            var _a, _b;
-            width += (_b = (_a = resizedColumnWidths.get(col.key)) !== null && _a !== void 0 ? _a : col.width) !== null && _b !== void 0 ? _b : 0;
-        });
-        return width;
-    }, [fixedEndColumns, resizedColumnWidths]);
-    const getResizedColumnWidth = useCallback((key) => {
-        return resizedColumnWidths.get(key);
-    }, [resizedColumnWidths]);
-    const setResizedColumnWidth = useCallback((key, width) => {
-        setResizedColumnWidths((prev) => {
-            const next = new Map(prev);
-            next.set(key, width);
-            return next;
-        });
-    }, []);
-    return {
-        resizedColumnWidths,
-        columns: columns,
-        fixedEndColumns,
-        fixedStartColumns,
-        getResizedColumnWidth,
-        scrollableColumns,
-        setResizedColumnWidth,
-        totalFixedEndWidth,
-        totalFixedStartWidth,
-    };
-}
-
-export { useTableColumns };