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

package/Table/hooks/useTableExpansion.js

@@ -1,8 +1,8 @@
 'use client';
 import { useState, useCallback, useMemo } from 'react';
-import { DRAG_HANDLE_COLUMN_WIDTH, EXPANSION_COLUMN_WIDTH } from '@mezzanine-ui/core/table';
+import { DRAG_OR_PIN_HANDLE_COLUMN_WIDTH, EXPANSION_COLUMN_WIDTH } from '@mezzanine-ui/core/table';
 
-function useTableExpansion({ expandable, hasDragHandle, }) {
+function useTableExpansion({ expandable, hasDragOrPinHandle, }) {
     const [internalExpandedKeys, setInternalExpandedKeys] = useState([]);
     const { expandedRowKeys: expandedRowKeysProp, onExpand, onExpandedRowsChange, } = expandable || {};
     const isControlled = expandedRowKeysProp !== undefined;
@@ -25,12 +25,12 @@ function useTableExpansion({ expandable, hasDragHandle, }) {
     }, [expandedRowKeys, isControlled, onExpand, onExpandedRowsChange]);
     const expansionLeftPadding = useMemo(() => {
         let padding = 0;
-        if (hasDragHandle)
-            padding += DRAG_HANDLE_COLUMN_WIDTH;
+        if (hasDragOrPinHandle)
+            padding += DRAG_OR_PIN_HANDLE_COLUMN_WIDTH;
         if (expandable)
             padding += EXPANSION_COLUMN_WIDTH;
         return padding;
-    }, [expandable, hasDragHandle]);
+    }, [expandable, hasDragOrPinHandle]);
     if (!expandable) {
         return undefined;
     }

package/Table/hooks/useTableFixedOffsets.d.ts

@@ -9,12 +9,16 @@ export interface FixedOffsetInfo {
 export interface UseTableFixedOffsetsReturn {
     /** Get offset info for a specific column by key */
     getColumnOffset: (key: string) => FixedOffsetInfo | null;
-    /** Get offset info for drag handle column */
-    getDragHandleOffset: () => FixedOffsetInfo | null;
+    /** Get offset info for drag or pin handle column */
+    getDragOrPinHandleOffset: () => FixedOffsetInfo | null;
     /** Get offset info for selection column */
     getSelectionOffset: () => FixedOffsetInfo | null;
     /** Get offset info for expansion column */
     getExpansionOffset: () => FixedOffsetInfo | null;
+    /** Get offset info for toggleable column */
+    getToggleableOffset: () => FixedOffsetInfo | null;
+    /** Get offset info for collectable column */
+    getCollectableOffset: () => FixedOffsetInfo | null;
     /** Check if a column should show shadow based on scroll position */
     shouldShowShadow: (key: string, scrollLeft: number, containerWidth: number) => boolean;
 }

package/Table/hooks/useTableFixedOffsets.js

@@ -1,6 +1,6 @@
 'use client';
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { DRAG_HANDLE_KEY, DRAG_HANDLE_COLUMN_WIDTH, EXPANSION_KEY, EXPANSION_COLUMN_WIDTH, SELECTION_KEY, SELECTION_COLUMN_WIDTH } from '@mezzanine-ui/core/table';
+import { DRAG_OR_PIN_HANDLE_KEY, DRAG_OR_PIN_HANDLE_COLUMN_WIDTH, EXPANSION_KEY, EXPANSION_COLUMN_WIDTH, SELECTION_KEY, SELECTION_COLUMN_WIDTH, TOGGLEABLE_KEY, COLLECTABLE_KEY } from '@mezzanine-ui/core/table';
 import { useTableSuperContext } from '../TableContext.js';
 
 const parseFixed = (fixed) => {
@@ -11,15 +11,15 @@ const parseFixed = (fixed) => {
     return null;
 };
 function useTableFixedOffsets(props) {
-    const { expansionLeftPadding = 0, hasDragHandleFixed: parentHasDragHandleFixed, } = useTableSuperContext();
+    const { expansionLeftPadding = 0, hasDragOrPinHandleFixed: parentHasDragOrPinHandleFixed, } = useTableSuperContext();
     const { actionConfig, columns, getResizedColumnWidth } = props;
     // Store measured widths
     const [measuredWidths, setMeasuredWidths] = useState(new Map());
-    const { hasDragHandle, hasExpansion, hasSelection, dragHandleFixed, expansionFixed, selectionFixed, } = actionConfig;
+    const { hasDragOrPinHandle, hasExpansion, hasSelection, hasToggleable, hasCollectable, dragOrPinHandleFixed, expansionFixed, selectionFixed, toggleableMinWidth, toggleableFixed, collectableMinWidth, collectableFixed, } = actionConfig;
     useEffect(() => {
         const innerMap = new Map();
-        if (hasDragHandle || parentHasDragHandleFixed) {
-            innerMap.set(DRAG_HANDLE_KEY, DRAG_HANDLE_COLUMN_WIDTH);
+        if (hasDragOrPinHandle || parentHasDragOrPinHandleFixed) {
+            innerMap.set(DRAG_OR_PIN_HANDLE_KEY, DRAG_OR_PIN_HANDLE_COLUMN_WIDTH);
         }
         if (hasExpansion) {
             innerMap.set(EXPANSION_KEY, EXPANSION_COLUMN_WIDTH);
@@ -27,8 +27,23 @@ function useTableFixedOffsets(props) {
         if (hasSelection) {
             innerMap.set(SELECTION_KEY, SELECTION_COLUMN_WIDTH);
         }
+        if (hasToggleable) {
+            innerMap.set(TOGGLEABLE_KEY, toggleableMinWidth);
+        }
+        if (hasCollectable) {
+            innerMap.set(COLLECTABLE_KEY, collectableMinWidth);
+        }
         setMeasuredWidths(innerMap);
-    }, [hasDragHandle, hasExpansion, hasSelection, parentHasDragHandleFixed]);
+    }, [
+        hasDragOrPinHandle,
+        hasExpansion,
+        hasSelection,
+        hasToggleable,
+        hasCollectable,
+        parentHasDragOrPinHandleFixed,
+        toggleableMinWidth,
+        collectableMinWidth,
+    ]);
     // Get width for a column (prioritize measured, then computed, then defined, then fallback)
     const getWidth = useCallback((key, fallback = 0) => {
         // Get static widths first
@@ -52,12 +67,13 @@ function useTableFixedOffsets(props) {
     const { fixedEndKeys, fixedStartKeys } = useMemo(() => {
         const startKeys = [];
         const endKeys = [];
-        if ((hasDragHandle && dragHandleFixed) || parentHasDragHandleFixed) {
-            startKeys.push(DRAG_HANDLE_KEY);
-        }
         if (hasExpansion && expansionFixed) {
             startKeys.push(EXPANSION_KEY);
         }
+        if ((hasDragOrPinHandle && dragOrPinHandleFixed) ||
+            parentHasDragOrPinHandleFixed) {
+            startKeys.push(DRAG_OR_PIN_HANDLE_KEY);
+        }
         if (hasSelection && selectionFixed) {
             startKeys.push(SELECTION_KEY);
         }
@@ -72,14 +88,14 @@ function useTableFixedOffsets(props) {
         });
         return { fixedEndKeys: endKeys, fixedStartKeys: startKeys };
     }, [
-        hasDragHandle,
-        dragHandleFixed,
+        hasDragOrPinHandle,
+        dragOrPinHandleFixed,
         hasExpansion,
         expansionFixed,
         hasSelection,
         selectionFixed,
         columns,
-        parentHasDragHandleFixed,
+        parentHasDragOrPinHandleFixed,
     ]);
     // Calculate all fixed offsets
     const fixedOffsets = useMemo(() => {
@@ -106,12 +122,12 @@ function useTableFixedOffsets(props) {
     }, [fixedEndKeys, fixedStartKeys, getWidth]);
     const allColumnKeys = useMemo(() => {
         const keys = [];
-        if (hasDragHandle) {
-            keys.push(DRAG_HANDLE_KEY);
-        }
         if (hasExpansion) {
             keys.push(EXPANSION_KEY);
         }
+        if (hasDragOrPinHandle) {
+            keys.push(DRAG_OR_PIN_HANDLE_KEY);
+        }
         if (hasSelection) {
             keys.push(SELECTION_KEY);
         }
@@ -119,7 +135,7 @@ function useTableFixedOffsets(props) {
             keys.push(column.key);
         });
         return keys;
-    }, [hasDragHandle, hasSelection, hasExpansion, columns]);
+    }, [hasDragOrPinHandle, hasSelection, hasExpansion, columns]);
     const originalPositions = useMemo(() => {
         const positions = new Map();
         let currentPosition = 0;
@@ -199,39 +215,57 @@ function useTableFixedOffsets(props) {
         var _a, _b;
         return ((_b = (_a = fixedOffsets.startOffsets.get(key)) !== null && _a !== void 0 ? _a : fixedOffsets.endOffsets.get(key)) !== null && _b !== void 0 ? _b : null);
     }, [fixedOffsets]);
-    const getDragHandleOffset = useCallback(() => {
+    const getDragOrPinHandleOffset = useCallback(() => {
         var _a;
-        if (!actionConfig.hasDragHandle || !actionConfig.dragHandleFixed) {
+        if (!hasDragOrPinHandle || !dragOrPinHandleFixed) {
             return null;
         }
-        return (_a = fixedOffsets.startOffsets.get(DRAG_HANDLE_KEY)) !== null && _a !== void 0 ? _a : null;
-    }, [actionConfig, fixedOffsets]);
+        return (_a = fixedOffsets.startOffsets.get(DRAG_OR_PIN_HANDLE_KEY)) !== null && _a !== void 0 ? _a : null;
+    }, [hasDragOrPinHandle, dragOrPinHandleFixed, fixedOffsets]);
     const getSelectionOffset = useCallback(() => {
         var _a;
-        if (!actionConfig.hasSelection || !actionConfig.selectionFixed) {
+        if (!hasSelection || !selectionFixed) {
             return null;
         }
         return (_a = fixedOffsets.startOffsets.get(SELECTION_KEY)) !== null && _a !== void 0 ? _a : null;
-    }, [actionConfig, fixedOffsets]);
+    }, [hasSelection, selectionFixed, fixedOffsets]);
     const getExpansionOffset = useCallback(() => {
         var _a;
-        if (!actionConfig.hasExpansion || !actionConfig.expansionFixed) {
+        if (!hasExpansion || !expansionFixed) {
             return null;
         }
         return (_a = fixedOffsets.startOffsets.get(EXPANSION_KEY)) !== null && _a !== void 0 ? _a : null;
-    }, [actionConfig, fixedOffsets]);
+    }, [hasExpansion, expansionFixed, fixedOffsets]);
+    const getToggleableOffset = useCallback(() => {
+        var _a;
+        if (!hasToggleable || !toggleableFixed) {
+            return null;
+        }
+        return (_a = fixedOffsets.endOffsets.get(TOGGLEABLE_KEY)) !== null && _a !== void 0 ? _a : null;
+    }, [hasToggleable, toggleableFixed, fixedOffsets]);
+    const getCollectableOffset = useCallback(() => {
+        var _a;
+        if (!hasCollectable || !collectableFixed) {
+            return null;
+        }
+        return (_a = fixedOffsets.endOffsets.get(COLLECTABLE_KEY)) !== null && _a !== void 0 ? _a : null;
+    }, [hasCollectable, collectableFixed, fixedOffsets]);
     // Memoize return object to prevent unnecessary re-renders
     return useMemo(() => ({
+        getCollectableOffset,
         getColumnOffset,
-        getDragHandleOffset,
+        getDragOrPinHandleOffset,
         getExpansionOffset,
         getSelectionOffset,
+        getToggleableOffset,
         shouldShowShadow,
     }), [
+        getCollectableOffset,
         getColumnOffset,
-        getDragHandleOffset,
+        getDragOrPinHandleOffset,
         getExpansionOffset,
         getSelectionOffset,
+        getToggleableOffset,
         shouldShowShadow,
     ]);
 }

package/Table/hooks/useTableScroll.d.ts

@@ -1,12 +1,18 @@
+import type { OverlayScrollbars } from 'overlayscrollbars';
 export interface UseTableScrollReturn {
     /** Container width (viewport width) */
     containerWidth: number;
-    handleScroll: (event: React.UIEvent<HTMLDivElement>) => void;
+    /** OverlayScrollbars scroll event handler */
+    handleScrollbarScroll: (instance: OverlayScrollbars, event: Event) => void;
+    /** Handler to be passed to Scrollbar's onViewportReady prop */
+    handleViewportReady: (viewport: HTMLDivElement, instance?: OverlayScrollbars) => void;
+    /** Whether the scroll container ref has been set and is ready */
+    isContainerReady: boolean;
     isScrollingHorizontally: boolean;
     scrollLeft: number;
-    /** Ref object for internal use */
+    /** Ref object for internal use - points to the actual scrolling element */
     containerRef: React.RefObject<HTMLDivElement | null>;
-    /** Callback ref setter that should be used for the scroll container */
+    /** Callback ref setter for disabled Scrollbar fallback (plain div) */
     setContainerRef: (element: HTMLDivElement | null) => void;
 }
 export declare function useTableScroll({ enabled, }: {

package/Table/hooks/useTableScroll.js

@@ -5,6 +5,7 @@ function useTableScroll({ enabled, }) {
     const [isScrollingHorizontally, setIsScrollingHorizontally] = useState(false);
     const [scrollLeft, setScrollLeft] = useState(0);
     const [containerWidth, setContainerWidth] = useState(0);
+    const [isContainerReady, setIsContainerReady] = useState(false);
     const containerRef = useRef(null);
     const resizeObserverRef = useRef(null);
     const measureDimensions = useCallback(() => {
@@ -13,8 +14,8 @@ function useTableScroll({ enabled, }) {
             setContainerWidth((prev) => prev !== newContainerWidth ? newContainerWidth : prev);
         }
     }, []);
-    // Callback ref that sets up ResizeObserver when element is attached
-    const setContainerRef = useCallback((element) => {
+    // Setup ResizeObserver on an element
+    const setupResizeObserver = useCallback((element) => {
         // Clean up previous observer
         if (resizeObserverRef.current) {
             resizeObserverRef.current.disconnect();
@@ -22,6 +23,8 @@ function useTableScroll({ enabled, }) {
         }
         containerRef.current = element;
         if (element && enabled) {
+            // Mark container as ready
+            setIsContainerReady(true);
             // Measure immediately
             measureDimensions();
             // Set up ResizeObserver
@@ -31,8 +34,28 @@ function useTableScroll({ enabled, }) {
             resizeObserverRef.current.observe(element);
         }
     }, [enabled, measureDimensions]);
-    const handleScroll = useCallback((event) => {
-        const target = event.currentTarget;
+    // Callback ref for disabled Scrollbar (plain div) fallback
+    const setContainerRef = useCallback((element) => {
+        if (element) {
+            setupResizeObserver(element);
+        }
+        else {
+            // Clean up when element is removed
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+                resizeObserverRef.current = null;
+            }
+            containerRef.current = null;
+            setIsContainerReady(false);
+        }
+    }, [setupResizeObserver]);
+    // Handler for Scrollbar's onViewportReady - receives the viewport element
+    const handleViewportReady = useCallback((viewport) => {
+        setupResizeObserver(viewport);
+    }, [setupResizeObserver]);
+    // OverlayScrollbars scroll event handler
+    const handleScrollbarScroll = useCallback((_instance, event) => {
+        const target = event.target;
         const newScrollLeft = target.scrollLeft;
         setScrollLeft(newScrollLeft);
         setIsScrollingHorizontally(newScrollLeft > 0);
@@ -46,15 +69,19 @@ function useTableScroll({ enabled, }) {
         };
     }, []);
     return useMemo(() => ({
+        containerRef,
         containerWidth,
-        handleScroll,
+        handleScrollbarScroll,
+        handleViewportReady,
+        isContainerReady,
         isScrollingHorizontally,
         scrollLeft,
-        containerRef,
         setContainerRef,
     }), [
         containerWidth,
-        handleScroll,
+        handleScrollbarScroll,
+        handleViewportReady,
+        isContainerReady,
         isScrollingHorizontally,
         scrollLeft,
         setContainerRef,

package/Table/hooks/useTableVirtualization.d.ts

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

package/Table/hooks/useTableVirtualization.js

@@ -1,19 +1,13 @@
 'use client';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useRef, useCallback, useEffect, useMemo } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { getRowKey } from '@mezzanine-ui/core/table';
 import { useTableContext } from '../TableContext.js';
 
-function useTableVirtualization({ dataSource, enabled = true, isRowExpanded, overscan = 5, scrollContainerRef, }) {
+function useTableVirtualization({ dataSource, enabled = true, isContainerReady = false, isRowExpanded, overscan = 5, scrollContainerRef, }) {
     var _a, _b, _c, _d;
     const { rowHeight } = useTableContext();
-    const [isContainerReady, setIsContainerReady] = useState(false);
     const expandedRowHeightsRef = useRef(new Map());
-    useEffect(() => {
-        if (scrollContainerRef.current && enabled) {
-            setIsContainerReady(true);
-        }
-    }, [scrollContainerRef, enabled]);
     // Estimate size callback that accounts for expanded rows
     const estimateSize = useCallback((index) => {
         const record = dataSource[index];

package/Table/index.d.ts

@@ -1,6 +1,7 @@
-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 { 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 TableCollectable, type TableDraggable, type TableExpandable, type TablePinnable, type TableRecord, type TableToggleable, type TableRowSelection, type TableRowSelectionBase, type TableRowSelectionCheckbox, type TableRowSelectionRadio, type TableScroll, type TableSelectionMode, type TableSize, } from '@mezzanine-ui/core/table';
+export { default } from './Table';
+export type { TableBaseProps, TableDraggableOnlyProps, TableNoDragOrPinProps, TableNonResizableProps, TableNonVirtualizedProps, TablePinnableOnlyProps, TableProps, TableResizableProps, TableVirtualizedProps, } from './typings';
+export { TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext, type TableResizedColumnState, type TableContextValue, type TableDataContextValue, 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';

package/Table/index.js

@@ -13,6 +13,7 @@ export { TableActionsCell } from './components/TableActionsCell.js';
 export { TableBody } from './components/TableBody.js';
 export { TableCell } from './components/TableCell.js';
 export { TableColGroup } from './components/TableColGroup.js';
+export { TableDragOrPinHandleCell } from './components/TableDragOrPinHandleCell.js';
 export { TableExpandCell } from './components/TableExpandCell.js';
 export { TableExpandedRow } from './components/TableExpandedRow.js';
 export { TableHeader } from './components/TableHeader.js';
@@ -20,5 +21,7 @@ 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 { TableToggleableCell } from './components/TableToggleableCell.js';
+export { TableCollectableCell } from './components/TableCollectableCell.js';
 export { calculateColumnWidths, clampWidth } from './utils/calculateColumnWidths.js';
 export { useTableRowSelection } from './utils/useTableRowSelection.js';

package/Table/typings.d.ts

@@ -0,0 +1,172 @@
+import type { HighlightMode, TableActions, TableActionsWithMinWidth, TableCollectable, TableColumn, TableColumnWithMinWidth, TableDataSource, TableDraggable, TableExpandable, TablePinnable, TableRowSelection, TableScroll, TableSize, TableToggleable } from '@mezzanine-ui/core/table';
+import type { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import type { EmptyProps } from '../Empty';
+import type { TablePaginationProps } from './components/TablePagination';
+import type { TableTransitionState } from './hooks/useTableDataSource';
+/**
+ * Base props shared by all Table variants.
+ */
+export interface TableBaseProps<T extends TableDataSource = TableDataSource> extends Omit<NativeElementPropsWithoutKeyAndRef<'table'>, 'children' | 'draggable' | 'summary' | 'onChange'> {
+    /** Data source */
+    dataSource: T[];
+    /** Props for Empty component when no data */
+    emptyProps?: EmptyProps & {
+        height?: number | string;
+    };
+    /** Expandable row configuration */
+    expandable?: TableExpandable<T>;
+    /** Collectable row configuration (star/favorite functionality) */
+    collectable?: TableCollectable<T>;
+    /**
+     * Whether the table should stretch to fill its container width.
+     * When true, the table will always be 100% width of its container.
+     * Note: If the sum of all column widths is less than the table width,
+     * columns will be proportionally stretched to fill the remaining space.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** Highlight mode for hover effects
+     * @default 'row'
+     */
+    highlight?: HighlightMode;
+    /** Loading state */
+    loading?: boolean;
+    /** Number of rows to display when loading */
+    loadingRowsCount?: number;
+    /** Minimum height of the table */
+    minHeight?: number | string;
+    /**
+     * Whether the table is nested inside an expanded row content area
+     */
+    nested?: boolean;
+    /** Pagination configuration */
+    pagination?: TablePaginationProps;
+    /**
+     * Row height preset token.
+     */
+    rowHeightPreset?: 'base' | 'condensed' | 'detailed' | 'roomy';
+    /** Row selection configuration */
+    rowSelection?: TableRowSelection<T>;
+    /** Row indexes where a separator border should be displayed */
+    separatorAtRowIndexes?: number[];
+    /** Show header row */
+    showHeader?: boolean;
+    /** Custom size variant
+     * @default 'main'
+     */
+    size?: TableSize;
+    /** Whether to enable sticky header
+     *  @default true
+     */
+    sticky?: boolean;
+    /** Toggleable row configuration */
+    toggleable?: TableToggleable<T>;
+    /** Transition state for row add/remove animations (from useTableDataSource hook) */
+    transitionState?: TableTransitionState;
+    /** Enable zebra striping for alternating row backgrounds */
+    zebraStriping?: boolean;
+}
+/**
+ * Props when resizable is enabled.
+ * Requires minWidth on all columns.
+ */
+export interface TableResizableProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
+    /** Actions column configuration - minWidth required when resizable */
+    actions?: TableActionsWithMinWidth<T>;
+    /** Column configuration - minWidth required for each column when resizable */
+    columns: TableColumnWithMinWidth<T>[];
+    /**
+     * Whether columns are resizable by user interaction
+     */
+    resizable: true;
+}
+/**
+ * Props when resizable is disabled or not specified.
+ */
+export interface TableNonResizableProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
+    /** Actions column configuration */
+    actions?: TableActions<T>;
+    /** Column configuration */
+    columns: TableColumn<T>[];
+    /**
+     * Whether columns are resizable by user interaction
+     * @default false
+     */
+    resizable?: false;
+}
+/**
+ * Props when draggable is enabled.
+ * Pinnable is not allowed when draggable is enabled.
+ */
+export type TableDraggableOnlyProps<T extends TableDataSource = TableDataSource> = {
+    /** Draggable row configuration */
+    draggable: TableDraggable<T>;
+    /** Not available when draggable is enabled */
+    pinnable?: never;
+};
+/**
+ * Props when pinnable is enabled.
+ * Draggable is not allowed when pinnable is enabled.
+ */
+export type TablePinnableOnlyProps<T extends TableDataSource = TableDataSource> = {
+    /** Not available when pinnable is enabled */
+    draggable?: never;
+    /** Pinnable row configuration */
+    pinnable: TablePinnable<T>;
+};
+/**
+ * Props when neither draggable nor pinnable is enabled.
+ */
+export type TableNoDragOrPinProps = {
+    /** Draggable row configuration */
+    draggable?: undefined;
+    /** Pinnable row configuration */
+    pinnable?: undefined;
+};
+/**
+ * Combined drag or pin props - discriminated union.
+ */
+export type TableDragOrPinProps<T extends TableDataSource = TableDataSource> = TableDraggableOnlyProps<T> | TablePinnableOnlyProps<T> | TableNoDragOrPinProps;
+/**
+ * Props when virtualized scrolling is enabled.
+ * Draggable is not allowed in this mode, but pinnable is allowed.
+ */
+export type TableVirtualizedScrollProps = {
+    /** Draggable row configuration - not available when virtualized is enabled */
+    draggable?: never;
+    /** Scroll configuration with virtualized enabled */
+    scroll: TableScroll & {
+        virtualized: true;
+        y: number | string;
+    };
+};
+/**
+ * Props when virtualized scrolling is disabled or not specified.
+ * Both draggable and pinnable are allowed.
+ */
+export type TableNonVirtualizedScrollProps = {
+    /** Scroll configuration for scrolling (virtualized defaults to false) */
+    scroll?: TableScroll & {
+        virtualized?: false;
+    };
+};
+/**
+ * Props when virtualized scrolling is enabled.
+ * Draggable is not allowed, but pinnable is allowed.
+ */
+export type TableVirtualizedProps<T extends TableDataSource = TableDataSource> = (TableResizableProps<T> | TableNonResizableProps<T>) & TableVirtualizedScrollProps & {
+    /** Pinnable row configuration - allowed with virtualized */
+    pinnable?: TablePinnable<T>;
+};
+/**
+ * Props when virtualized scrolling is disabled or not specified.
+ * Draggable and pinnable are mutually exclusive.
+ */
+export type TableNonVirtualizedProps<T extends TableDataSource = TableDataSource> = (TableResizableProps<T> | TableNonResizableProps<T>) & TableNonVirtualizedScrollProps & TableDragOrPinProps<T>;
+/**
+ * TableProps - discriminated union to ensure:
+ * 1. Draggable and virtualized scrolling are mutually exclusive
+ * 2. Draggable and pinnable are mutually exclusive (they share the same column position)
+ * 3. Resizable requires minWidth on all columns
+ */
+export type TableProps<T extends TableDataSource = TableDataSource> = TableVirtualizedProps<T> | TableNonVirtualizedProps<T>;

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]);

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/Transition/Slide.d.ts

@@ -1,7 +1,14 @@
 import { TransitionImplementationProps } from './Transition';
-export type SlideProps = TransitionImplementationProps;
+export type SlideFrom = 'right' | 'top';
+export interface SlideProps extends TransitionImplementationProps {
+    /**
+     * The position of child element will enter from.
+     * @default 'right'
+     */
+    from?: SlideFrom;
+}
 /**
  * The react component for `mezzanine` transition slide in/out.
  */
-declare const Slide: import("react").ForwardRefExoticComponent<TransitionImplementationProps & import("react").RefAttributes<HTMLElement>>;
+declare const Slide: import("react").ForwardRefExoticComponent<SlideProps & import("react").RefAttributes<HTMLElement>>;
 export default Slide;