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

package/Table/hooks/useTableResizedColumns.js

@@ -0,0 +1,22 @@
+'use client';
+import { useState, useCallback } from 'react';
+
+function useTableResizedColumns() {
+    const [resizedColumnWidths, setResizedColumnWidths] = useState(new Map());
+    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 {
+        getResizedColumnWidth,
+        setResizedColumnWidth,
+    };
+}
+
+export { useTableResizedColumns };

package/Table/hooks/useTableScroll.d.ts

@@ -4,7 +4,9 @@ export interface UseTableScrollReturn {
     handleScroll: (event: React.UIEvent<HTMLDivElement>) => void;
     isScrollingHorizontally: boolean;
     scrollLeft: number;
-    /** Set refs for measuring container width */
+    /** Ref object for internal use */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Callback ref setter that should be used for the scroll container */
     setContainerRef: (element: HTMLDivElement | null) => void;
 }
 export declare function useTableScroll({ enabled, }: {

package/Table/hooks/useTableScroll.js

@@ -6,45 +6,51 @@ function useTableScroll({ enabled, }) {
     const [scrollLeft, setScrollLeft] = useState(0);
     const [containerWidth, setContainerWidth] = useState(0);
     const containerRef = useRef(null);
-    const setContainerRef = useCallback((element) => {
-        containerRef.current = element;
-    }, []);
+    const resizeObserverRef = useRef(null);
     const measureDimensions = useCallback(() => {
         if (containerRef.current) {
             const newContainerWidth = containerRef.current.clientWidth;
             setContainerWidth((prev) => prev !== newContainerWidth ? newContainerWidth : prev);
         }
     }, []);
+    // Callback ref that sets up ResizeObserver when element is attached
+    const setContainerRef = useCallback((element) => {
+        // Clean up previous observer
+        if (resizeObserverRef.current) {
+            resizeObserverRef.current.disconnect();
+            resizeObserverRef.current = null;
+        }
+        containerRef.current = element;
+        if (element && enabled) {
+            // Measure immediately
+            measureDimensions();
+            // Set up ResizeObserver
+            resizeObserverRef.current = new ResizeObserver(() => {
+                measureDimensions();
+            });
+            resizeObserverRef.current.observe(element);
+        }
+    }, [enabled, measureDimensions]);
     const handleScroll = useCallback((event) => {
         const target = event.currentTarget;
         const newScrollLeft = target.scrollLeft;
         setScrollLeft(newScrollLeft);
         setIsScrollingHorizontally(newScrollLeft > 0);
     }, []);
-    // Set up ResizeObserver to track dimension changes
+    // Cleanup on unmount
     useEffect(() => {
-        const { current: container } = containerRef;
-        if (!container || !enabled)
-            return;
-        const resizeObserver = new ResizeObserver(() => {
-            measureDimensions();
-        });
-        resizeObserver.observe(container);
         return () => {
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-    }, [measureDimensions, enabled]);
-    // Initial measurement after mount
-    useEffect(() => {
-        if (enabled) {
-            measureDimensions();
-        }
-    }, [measureDimensions, enabled]);
+    }, []);
     return useMemo(() => ({
         containerWidth,
         handleScroll,
         isScrollingHorizontally,
         scrollLeft,
+        containerRef,
         setContainerRef,
     }), [
         containerWidth,

package/Table/hooks/useTableSelection.js

@@ -3,28 +3,44 @@ import { useMemo, useCallback } from 'react';
 import { getRowKey } from '@mezzanine-ui/core/table';
 
 function useTableSelection({ dataSource, rowSelection, }) {
-    const { selectedRowKeys = [], isCheckboxDisabled, onChange, onSelectAll, preserveSelectedRowKeys = false, } = rowSelection || {};
+    var _a;
+    // Extract common props
+    const { onChange, mode = 'checkbox' } = rowSelection || {};
+    const selections = mode === 'radio'
+        ? rowSelection.selectedRowKey
+        : rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys;
+    const isSelectionDisabled = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.isSelectionDisabled;
+    const onSelectAll = mode === 'radio' ? undefined : rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onSelectAll;
+    const preserveSelectedRowKeys = mode === 'radio' ? false : ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.preserveSelectedRowKeys) !== null && _a !== void 0 ? _a : false);
+    const selectedRowKeys = useMemo(() => {
+        var _a;
+        if (mode === 'radio') {
+            const key = selections;
+            return key !== undefined ? [key] : [];
+        }
+        return (_a = selections) !== null && _a !== void 0 ? _a : [];
+    }, [mode, selections]);
     const selectableKeys = useMemo(() => {
         if (!rowSelection)
             return [];
         return dataSource
             .filter((record) => {
-            if (!isCheckboxDisabled)
+            if (!isSelectionDisabled)
                 return true;
-            const disabled = isCheckboxDisabled(record);
+            const disabled = isSelectionDisabled(record);
             return !disabled;
         })
             .map((record) => getRowKey(record));
-    }, [dataSource, isCheckboxDisabled, rowSelection]);
+    }, [dataSource, isSelectionDisabled, rowSelection]);
     const isRowSelected = useCallback((key) => {
         return selectedRowKeys.includes(key);
     }, [selectedRowKeys]);
     const isRowDisabled = useCallback((record) => {
-        if (!isCheckboxDisabled)
+        if (!isSelectionDisabled)
             return false;
-        const disabled = isCheckboxDisabled(record);
+        const disabled = isSelectionDisabled(record);
         return disabled;
-    }, [isCheckboxDisabled]);
+    }, [isSelectionDisabled]);
     const isAllSelected = useMemo(() => {
         if (!selectableKeys.length)
             return false;
@@ -37,13 +53,20 @@ function useTableSelection({ dataSource, rowSelection, }) {
         return selectedCount > 0 && selectedCount < selectableKeys.length;
     }, [selectableKeys, selectedRowKeys]);
     const toggleRow = useCallback((key) => {
+        // Radio mode: only one selection allowed
+        if (mode === 'radio') {
+            const selectedRow = dataSource.find((r) => getRowKey(r) === key) || null;
+            onChange === null || onChange === void 0 ? void 0 : onChange(key, selectedRow);
+            return;
+        }
+        // Checkbox mode: toggle selection
         const newKeys = selectedRowKeys.includes(key)
             ? selectedRowKeys.filter((k) => k !== key)
             : [...selectedRowKeys, key];
         const selectedRow = dataSource.find((r) => getRowKey(r) === key) || null;
         const selectedRows = dataSource.filter((r) => newKeys.includes(getRowKey(r)));
         onChange === null || onChange === void 0 ? void 0 : onChange(newKeys, selectedRow, selectedRows);
-    }, [selectedRowKeys, dataSource, onChange]);
+    }, [mode, selectedRowKeys, dataSource, onChange]);
     const toggleAll = useCallback(() => {
         let newKeys;
         let type;
@@ -85,6 +108,7 @@ function useTableSelection({ dataSource, rowSelection, }) {
         isIndeterminate,
         isRowDisabled,
         isRowSelected,
+        mode,
         selectedRowKeys,
         toggleAll,
         toggleRow,

package/Table/hooks/useTableVirtualization.d.ts

@@ -3,7 +3,7 @@ import { type TableDataSource } from '@mezzanine-ui/core/table';
 export interface UseTableVirtualizationOptions<T extends TableDataSource> {
     dataSource: T[];
     enabled?: boolean;
-    isRowExpanded?: (key: string | number) => boolean;
+    isRowExpanded?: (key: string) => boolean;
     overscan?: number;
     scrollContainerRef: React.RefObject<HTMLDivElement | null>;
 }

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

@@ -8,15 +8,23 @@ function useTableRowSelection(props) {
     const { getSubData } = props;
     const [selectedKeys, setSelectedKeys] = useState([]);
     const parentSelectedKeys = useMemo(() => selectedKeys.map((item) => item.key), [selectedKeys]);
-    const parentOnChange = useCallback((_, __, selectedRows) => {
-        setSelectedKeys(selectedRows.map((row) => {
+    const parentOnChange = useCallback((_, selectedRow, selectedRows) => {
+        setSelectedKeys((prev) => selectedRows.map((row) => {
+            const isCurrentSelectedRow = row.key === (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.key);
             const subData = getSubData(row);
             const pk = getRowKey(row);
+            const subKeys = (() => {
+                var _a;
+                if (isCurrentSelectedRow) {
+                    return (subData === null || subData === void 0 ? void 0 : subData.length)
+                        ? subData.map((subRow) => getRowKey(subRow))
+                        : undefined;
+                }
+                return (_a = prev.find((item) => item.key === pk)) === null || _a === void 0 ? void 0 : _a.subKeys;
+            })();
             return {
                 key: pk,
-                subKeys: (subData === null || subData === void 0 ? void 0 : subData.length)
-                    ? subData.map((subRow) => getRowKey(subRow))
-                    : undefined,
+                subKeys,
             };
         }));
     }, [getSubData]);
@@ -49,7 +57,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/Tag/TagGroup.d.ts

@@ -6,6 +6,9 @@ import { TransitionImplementationChildProps } from '../Transition';
 type TagElement = ReactElement<TagProps & TransitionImplementationChildProps, typeof Tag>;
 type OverflowCounterTagElement = ReactElement<OverflowCounterTagProps & TransitionImplementationChildProps, typeof OverflowCounterTag>;
 type TagGroupChild = TagElement | OverflowCounterTagElement;
+export type TagGroupProps = Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> & {
+    children: TagGroupChild | TagGroupChild[];
+};
 declare const TagGroup: import("react").ForwardRefExoticComponent<Omit<NativeElementPropsWithoutKeyAndRef<"div">, "children"> & {
     children: TagGroupChild | TagGroupChild[];
 } & import("react").RefAttributes<HTMLDivElement>>;

package/Tag/index.d.ts

@@ -1,3 +1,5 @@
 export type { TagSize } from '@mezzanine-ui/core/tag';
 export type { TagProps } from './typings';
 export { default } from './Tag';
+export type { TagGroupProps } from './TagGroup';
+export { default as TagGroup } from './TagGroup';

package/Tag/index.js

@@ -1 +1,2 @@
 export { default } from './Tag.js';
+export { default as TagGroup } from './TagGroup.js';

package/Upload/UploadPictureCard.js

@@ -95,7 +95,7 @@ const UploadPictureCard = forwardRef(function UploadPictureCard(props, ref) {
     return (jsx("div", { className: cx(uploadPictureCardClasses.host, uploadPictureCardClasses.size(size), disabled && uploadPictureCardClasses.disabled, className), "aria-disabled": disabled, ref: ref, role: "group", tabIndex: disabled ? -1 : 0, ...rest, children: jsxs("div", { className: uploadPictureCardClasses.container, children: [isImage && imageUrl && status !== 'error' && (jsx("img", { alt: fileName, src: imageUrl, style: {
                         objectFit: imageFit,
                         objectPosition: 'center',
-                    } })), status === 'done' && size !== 'minor' && !isImage && (jsxs("div", { className: uploadPictureCardClasses.content, children: [jsx(Icon, { icon: FileIcon, color: "brand", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.name, ellipsis: true, children: fileName })] })), status === 'error' && size !== 'minor' && (jsxs("div", { className: uploadPictureCardClasses.errorMessage, role: "alert", "aria-live": "polite", children: [jsx(Icon, { icon: errorIconContent, color: "error", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.errorMessageText, children: errorMessageContent })] })), jsxs("div", { className: cx(uploadPictureCardClasses.actions, uploadPictureCardClasses.actionsStatus(status)), children: [status === 'loading' && size !== 'minor' && (jsxs(Fragment, { children: [jsx(ClearActions, { type: "embedded", variant: "contrast", onClick: onDelete, className: uploadPictureCardClasses.clearActionsIcon, "aria-label": labels.cancelUpload }), jsx("div", { className: uploadPictureCardClasses.loadingIcon, "aria-label": labels.uploading, children: jsx(Icon, { icon: SpinnerIcon, color: "fixed-light", spin: true, size: 32 }) })] })), status === 'done' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: ZoomInIcon }, onClick: onZoomIn, "aria-label": labels.zoomIn }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: DownloadIcon }, onClick: onDownload, "aria-label": labels.download }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: TrashIcon }, onClick: onDelete, "aria-label": labels.delete })] }) }) })), status === 'error' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: ResetIcon }, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: TrashIcon }, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
+                    } })), status === 'done' && size !== 'minor' && !isImage && (jsxs("div", { className: uploadPictureCardClasses.content, children: [jsx(Icon, { icon: FileIcon, color: "brand", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.name, ellipsis: true, children: fileName })] })), status === 'error' && size !== 'minor' && (jsxs("div", { className: uploadPictureCardClasses.errorMessage, role: "alert", "aria-live": "polite", children: [jsx(Icon, { icon: errorIconContent, color: "error", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.errorMessageText, children: errorMessageContent })] })), jsxs("div", { className: cx(uploadPictureCardClasses.actions, uploadPictureCardClasses.actionsStatus(status)), children: [status === 'loading' && size !== 'minor' && (jsxs(Fragment, { children: [jsx(ClearActions, { type: "embedded", variant: "contrast", onClick: onDelete, className: uploadPictureCardClasses.clearActionsIcon, "aria-label": labels.cancelUpload }), jsx("div", { className: uploadPictureCardClasses.loadingIcon, "aria-label": labels.uploading, children: jsx(Icon, { icon: SpinnerIcon, color: "fixed-light", spin: true, size: 32 }) })] })), status === 'done' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: ZoomInIcon, iconType: "icon-only", onClick: onZoomIn, "aria-label": labels.zoomIn }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: DownloadIcon, onClick: onDownload, "aria-label": labels.download }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), status === 'error' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: ResetIcon, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
 });
 
 export { UploadPictureCard as default };

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';
@@ -48,20 +50,18 @@ export { default as Breadcrumb } from './Breadcrumb';
 export type { BreadcrumbItemProps, BreadcrumbProps } from './Breadcrumb';
 export { default as Drawer } from './Drawer';
 export type { DrawerPlacement, DrawerProps } from './Drawer';
-export { default as Dropdown } from './Dropdown';
-export type { DropdownProps } from './Dropdown';
 export { default as Menu, MenuDivider, MenuItem, MenuItemGroup } from './Menu';
 export type { MenuDividerProps, MenuItemGroupProps, MenuItemProps, MenuProps, MenuSize, } from './Menu';
-export { default as Navigation } from './Navigation';
-export type { NavigationChild, NavigationChildren, NavigationProps, NavigationFooterProps, NavigationHeaderProps, NavigationOptionProps, NavigationUserMenuProps, NavigationIconButtonProps, NavigationOptionCategoryProps, } from './Navigation';
+export { default as Navigation, NavigationFooter, NavigationHeader, NavigationIconButton, NavigationOption, NavigationOptionCategory, NavigationUserMenu, } from './Navigation';
+export type { NavigationChild, NavigationChildren, NavigationFooterProps, NavigationHeaderProps, NavigationIconButtonProps, NavigationOptionCategoryProps, NavigationOptionProps, NavigationProps, NavigationUserMenuProps, } from './Navigation';
 export { default as PageFooter } from './PageFooter';
 export type { PageFooterProps } from './PageFooter';
 export { default as PageHeader } from './PageHeader';
 export type { PageHeaderProps } from './PageHeader';
 export { Step, default as Stepper, useStepper } from './Stepper';
 export type { StepperProps, StepProps } from './Stepper';
-export { TabItem, default as Tab } from './Tab';
-export type { TabItemProps, TabsChild, TabProps } from './Tab';
+export { default as Tab, TabItem } from './Tab';
+export type { TabItemProps, TabProps, TabsChild } from './Tab';
 /**
  * Data Display
  */
@@ -71,18 +71,17 @@ 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, DescriptionContent, DescriptionGroup, DescriptionTitle, } from './Description';
+export type { DescriptionContentProps, DescriptionGroupProps, DescriptionProps, DescriptionTitleProps, } 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 Tag } from './Tag';
-export type { TagProps, TagSize } from './Tag';
+export { getCellAlignClass, getRowKey, default as Table, TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableDataSource, useTableRowSelection, useTableSuperContext, type ColumnAlign, type FixedType, type HighlightMode, type SortOrder, type TableActionItem, type TableActions, type TableActionsBase, type TableActionsWithMinWidth, type TableBaseProps, type TableBulkActions, type TableBulkGeneralAction, type TableBulkOverflowAction, type TableColumn, type TableColumnBase, type TableColumnBaseWithMinWidthRequired, type TableColumnTitleMenu, type TableColumnWithDataIndex, type TableColumnWithDataIndexAndMinWidth, type TableColumnWithMinWidth, type TableColumnWithRender, type TableColumnWithRenderAndMinWidth, type TableContextValue, type TableDataContextValue, type TableDataSource, type TableDataSourceWithId, type TableDataSourceWithKey, type TableDraggable, type TableDraggableState, type TableExpandable, type TableExpansionState, type TableNonVirtualizedProps, type TableProps, type TableRecord, type TableResizedColumnState, type TableRowSelection, type TableRowSelectionBase, type TableRowSelectionCheckbox, type TableRowSelectionRadio, type TableScroll, type TableSelectionMode, type TableSelectionState, type TableSize, type TableSortingState, type TableTransitionState, type TableVirtualizedProps, type UpdateDataSourceOptions, type UseTableDataSourceOptions, } from './Table';
+export { default as Tag, TagGroup } from './Tag';
+export type { TagGroupProps, TagProps, TagSize } from './Tag';
 export { default as Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
 export { getTreeNodeEntities, toggleValue, toggleValueWithStatusControl, traverseTree, default as Tree, TreeNode, TreeNodeList, uniqueArray, useTreeExpandedValue, } from './Tree';
@@ -90,6 +89,8 @@ export type { GetTreeNodeEntitiesProps, TreeExpandControl, TreeNodeData, TreeNod
 /**
  * Data Entry
  */
+export { default as AutoComplete } from './AutoComplete';
+export type { AutoCompleteBaseProps, AutoCompleteMultipleProps, AutoCompleteProps, AutoCompleteSingleProps, } from './AutoComplete';
 export { CheckAll, default as Checkbox, CheckboxGroup } from './Checkbox';
 export type { CheckAllProps, CheckboxGroupChangeEvent, CheckboxGroupChangeEventTarget, CheckboxGroupLayout, CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, } from './Checkbox';
 export { default as DatePicker, DatePickerCalendar } from './DatePicker';
@@ -106,8 +107,8 @@ export { PickerTrigger, RangePickerTrigger, usePickerDocumentEventClose, usePick
 export type { PickerTriggerProps, RangePickerTriggerProps, UsePickerDocumentEventCloseProps, UsePickerValueProps, } from './Picker';
 export { default as Radio, RadioGroup } from './Radio';
 export type { RadioGroupOrientation, RadioGroupProps, RadioProps, RadioSize, } from './Radio';
-export { AutoComplete, Option, OptionGroup, default as Select, SelectControlContext, SelectTrigger, SelectTriggerTags, TreeSelect, } from './Select';
-export type { AutoCompleteProps, OptionGroupProps, OptionProps, SelectControl, SelectProps, SelectTriggerInputProps, SelectTriggerProps, SelectTriggerTagsProps, SelectValue, TreeSelectOption, TreeSelectProps, } from './Select';
+export { Option, OptionGroup, default as Select, SelectControlContext, SelectTrigger, SelectTriggerTags, TreeSelect, } from './Select';
+export type { OptionGroupProps, OptionProps, SelectControl, SelectProps, SelectTriggerInputProps, SelectTriggerProps, SelectTriggerTagsProps, SelectValue, TreeSelectOption, TreeSelectProps, } from './Select';
 export { default as Selection } from './Selection';
 export type { SelectionProps, SelectionPropsBase } from './Selection';
 export { default as Slider, useSlider } from './Slider';
@@ -131,10 +132,10 @@ export { default as ConfirmActions } from './ConfirmActions';
 export type { ConfirmActionsProps } from './ConfirmActions';
 export { default as Message } from './Message';
 export type { MessageData, MessageSeverity, MessageType } from './Message';
-export { default as Modal, ModalActions, ModalBody, ModalFooter, ModalHeader, useModalContainer, } from './Modal';
-export type { ModalActionsProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalSeverity, ModalSize, } from './Modal';
-export { default as Notification } from './Notification';
-export type { NotificationData, NotificationSeverity } from './Notification';
+export { default as Modal, ModalBodyForVerification, ModalFooter, ModalHeader, useModalContainer, } from './Modal';
+export type { ModalBodyForVerificationProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalSize, ModalStatusType, } from './Modal';
+export { default as NotificationCenter } from './NotificationCenter';
+export type { NotificationData, NotificationSeverity, } from './NotificationCenter';
 export { default as Popconfirm } from './Popconfirm';
 export type { PopconfirmProps } from './Popconfirm';
 export { default as Progress } from './Progress';
@@ -150,8 +151,8 @@ export type { ResultStateActions, ResultStateProps } from './ResultState';
 /**
  * Others
  */
-export { default as Anchor } from './Anchor';
-export type { AnchorProps } from './Anchor';
+export { default as Anchor, AnchorGroup } from './Anchor';
+export type { AnchorGroupProps, AnchorProps } from './Anchor';
 export { default as Backdrop } from './Backdrop';
 export type { BackdropProps } from './Backdrop';
 export { default as AlertBanner } from './AlertBanner';
@@ -175,3 +176,18 @@ export type { CollapseProps, FadeProps, RotateProps, ScaleProps, SlideFadeDirect
 /** Context */
 export { default as ConfigProvider, MezzanineConfig } from './Provider';
 export type { ConfigProviderProps, MezzanineConfigContext } from './Provider';
+/**
+ * internal
+ * only export dropdown related components
+ */
+export { default as Dropdown } from './Dropdown';
+export type { DropdownProps } from './Dropdown';
+export { default as DropdownAction } from './Dropdown/DropdownAction';
+export type { DropdownActionProps } from './Dropdown/DropdownAction';
+export { default as DropdownItem } from './Dropdown/DropdownItem';
+export type { DropdownItemProps } from './Dropdown/DropdownItem';
+export { default as DropdownItemCard } from './Dropdown/DropdownItemCard';
+export type { DropdownItemCardProps } from './Dropdown/DropdownItemCard';
+export { default as DropdownStatus } from './Dropdown/DropdownStatus';
+export type { DropdownStatusProps } from './Dropdown/DropdownStatus';
+export type { DropdownCheckPosition, DropdownInputPosition, DropdownItemLevel, DropdownItemSharedProps, DropdownItemValidate, DropdownMode, DropdownOption, DropdownOptionFlat, DropdownOptionGrouped, DropdownOptionsByType, DropdownOptionTree, DropdownStatus as DropdownStatusType, DropdownType, } from '@mezzanine-ui/core/dropdown';