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

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
@@ -55,8 +70,9 @@ function useTableFixedOffsets(props) {
         if (hasExpansion && expansionFixed) {
             startKeys.push(EXPANSION_KEY);
         }
-        if ((hasDragHandle && dragHandleFixed) || parentHasDragHandleFixed) {
-            startKeys.push(DRAG_HANDLE_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(() => {
@@ -109,8 +125,8 @@ function useTableFixedOffsets(props) {
         if (hasExpansion) {
             keys.push(EXPANSION_KEY);
         }
-        if (hasDragHandle) {
-            keys.push(DRAG_HANDLE_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/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;

package/Transition/Slide.js

@@ -6,14 +6,17 @@ import Transition from './Transition.js';
 import { reflow } from './reflow.js';
 import { useSetNodeTransition } from './useSetNodeTransition.js';
 
-function getStyle(state, inProp) {
+function getStyle(state, inProp, from) {
     if (state === 'entering' || state === 'entered') {
         return {
             transform: 'translate3d(0, 0, 0)',
         };
     }
     const style = {
-        transform: 'translate3d(100%, 0, 0)',
+        transform: {
+            top: 'translate3d(0, -100%, 0)',
+            right: 'translate3d(100%, 0, 0)',
+        }[from],
     };
     if (state === 'exited' && !inProp) {
         style.visibility = 'hidden';
@@ -32,7 +35,7 @@ const defaultEasing = {
  * The react component for `mezzanine` transition slide in/out.
  */
 const Slide = forwardRef(function Slide(props, ref) {
-    const { children, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp = false, onEnter, onEntered, onExit, onExited, ...rest } = props;
+    const { children, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, from = 'right', in: inProp = false, onEnter, onEntered, onExit, onExited, ...rest } = props;
     const duration = durationProp === 'auto' ? defaultDuration : durationProp;
     const nodeRef = useRef(null);
     const composedNodeRef = useComposeRefs([ref, nodeRef]);
@@ -78,7 +81,7 @@ const Slide = forwardRef(function Slide(props, ref) {
                 ...children.props,
                 ref: composedNodeRef,
                 style: {
-                    ...getStyle(state, inProp),
+                    ...getStyle(state, inProp, from),
                     ...children.props.style,
                 },
             })) }));

package/Tree/TreeNode.js

@@ -3,11 +3,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { treeClasses } from '@mezzanine-ui/core/tree';
 import { CaretRightIcon } from '@mezzanine-ui/icons';
 import { forwardRef, useContext, useMemo } from 'react';
-import Checkbox from '../Checkbox/Checkbox.js';
 import Typography from '../Typography/Typography.js';
 import { MezzanineConfig } from '../Provider/context.js';
 import Spin from '../Spin/Spin.js';
 import Icon from '../Icon/Icon.js';
+import Checkbox from '../Checkbox/Checkbox.js';
 import Collapse from '../Transition/Collapse.js';
 import cx from 'clsx';
 

package/index.d.ts

@@ -79,7 +79,7 @@ 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 { 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 { 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 TableCollectable, 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 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 TableToggleable, type TableTransitionState, type TableVirtualizedProps, type UpdateDataSourceOptions, type UseTableDataSourceOptions, type TableDraggableOnlyProps, type TableNoDragOrPinProps, type TableNonResizableProps, type TablePinnableOnlyProps, type TableResizableProps, } from './Table';
 export { default as Tag, TagGroup } from './Tag';
 export type { TagGroupProps, TagProps, TagSize } from './Tag';
 export { default as Tooltip } from './Tooltip';
@@ -100,9 +100,11 @@ export type { DateRangePickerCalendarProps, DateRangePickerProps, UseDateRangePi
 export { default as DateTimePicker } from './DateTimePicker';
 export type { DateTimePickerProps } from './DateTimePicker';
 export { FormControlContext, FormField, FormHintText, FormLabel } from './Form';
+export { FilterArea, FilterLine, Filter } from './FilterArea';
+export type { FilterAreaProps, FilterLineProps, FilterProps, } from './FilterArea';
 export type { FormControl, FormFieldProps, FormHintTextProps, FormLabelProps, } from './Form';
 export { default as Input } from './Input';
-export type { ActionInputProps, BaseInputProps, ClearableInput, InputBaseProps, InputProps, InputSize, InputStrength, NumberInput, NumberInputProps, PasswordInputProps, SearchInputProps, SelectInputProps, UnitInputProps, WithAffixInputProps, WithPasswordStrengthIndicator, } from './Input';
+export type { ActionInputProps, BaseInputProps, ClearableInput, InputBaseProps, InputProps, InputSize, InputStrength, NumberInput, NumberInputProps, PasswordInputProps, SearchInputProps, SelectInputProps, CurrencyInputProps, WithAffixInputProps, WithPasswordStrengthIndicator, } from './Input';
 export { PickerTrigger, RangePickerTrigger, usePickerDocumentEventClose, usePickerValue, useTabKeyClose, } from './Picker';
 export type { PickerTriggerProps, RangePickerTriggerProps, UsePickerDocumentEventCloseProps, UsePickerValueProps, } from './Picker';
 export { default as Radio, RadioGroup } from './Radio';

package/index.js

@@ -29,9 +29,6 @@ export { useSwitchControlValue } from './Form/useSwitchControlValue.js';
 export { default as Button } from './Button/Button.js';
 export { default as ButtonGroup } from './Button/ButtonGroup.js';
 export { default as Typography } from './Typography/Typography.js';
-export { default as Checkbox } from './Checkbox/Checkbox.js';
-export { default as CheckAll } from './Checkbox/CheckAll.js';
-export { default as CheckboxGroup } from './Checkbox/CheckboxGroup.js';
 export { default as Selection } from './Selection/Selection.js';
 export { default as DropdownAction } from './Dropdown/DropdownAction.js';
 export { default as DropdownItem } from './Dropdown/DropdownItem.js';
@@ -86,6 +83,9 @@ export { default as Tree } from './Tree/Tree.js';
 export { default as TreeNode } from './Tree/TreeNode.js';
 export { default as TreeNodeList } from './Tree/TreeNodeList.js';
 export { default as AutoComplete } from './AutoComplete/AutoComplete.js';
+export { default as CheckAll } from './Checkbox/CheckAll.js';
+export { default as Checkbox } from './Checkbox/Checkbox.js';
+export { default as CheckboxGroup } from './Checkbox/CheckboxGroup.js';
 export { default as DatePicker } from './DatePicker/DatePicker.js';
 export { default as DatePickerCalendar } from './DatePicker/DatePickerCalendar.js';
 export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.js';
@@ -94,6 +94,9 @@ export { default as DateTimePicker } from './DateTimePicker/DateTimePicker.js';
 export { default as FormField } from './Form/FormField.js';
 export { default as FormHintText } from './Form/FormHintText.js';
 export { default as FormLabel } from './Form/FormLabel.js';
+export { default as FilterArea } from './FilterArea/FilterArea.js';
+export { default as FilterLine } from './FilterArea/FilterLine.js';
+export { default as Filter } from './FilterArea/Filter.js';
 export { default as Input } from './Input/Input.js';
 export { default as PickerTrigger } from './Picker/PickerTrigger.js';
 export { default as RangePickerTrigger } from './Picker/RangePickerTrigger.js';