@mezzanine-ui/react 1.0.0-alpha.0 → 1.0.0-beta.1

package/Table/hooks/useTableDataSource.d.ts

@@ -0,0 +1,57 @@
+import type { TableDataSource } from '@mezzanine-ui/core/table';
+export interface TableTransitionState {
+    /** Keys of rows that are currently in "adding" state (highlighted) */
+    addingKeys: Set<string>;
+    /** Keys of rows that are currently in "deleting" state (red highlight before fade) */
+    deletingKeys: Set<string>;
+    /** Keys of rows that are currently fading out */
+    fadingOutKeys: Set<string>;
+}
+export interface UseTableDataSourceOptions<T extends TableDataSource> {
+    /** Initial data source */
+    initialData?: T[];
+    /** Duration of highlight animation in ms
+     * @default 1000
+     */
+    highlightDuration?: number;
+    /** Duration of fade out animation in ms
+     * @default 200
+     */
+    fadeOutDuration?: number;
+}
+export interface UpdateDataSourceOptions {
+    /**
+     * Keys of newly added items that should be animated.
+     * If provided, these items will show the adding animation.
+     * If not provided, new items will appear without animation.
+     */
+    addedKeys?: (string | number)[];
+    /**
+     * Keys of items being removed that should be animated.
+     * These items should NOT be in the new data array.
+     * The hook will temporarily keep them for animation, then remove after animation completes.
+     */
+    removedKeys?: (string | number)[];
+}
+export interface UseTableDataSourceReturn<T extends TableDataSource> {
+    /** Current data source to pass to Table component */
+    dataSource: T[];
+    /**
+     * Update the data source with optional animation support.
+     * This is the recommended method for GraphQL refetch pattern.
+     *
+     * @example
+     * // After create mutation + refetch
+     * const { data } = await refetch();
+     * updateDataSource(data.items, { addedKeys: [newItem.id] });
+     *
+     * @example
+     * // After delete mutation + refetch
+     * const { data } = await refetch();
+     * updateDataSource(data.items, { removedKeys: [deletedId] });
+     */
+    updateDataSource: (data: T[], options?: UpdateDataSourceOptions) => void;
+    /** Transition state for Table component */
+    transitionState: TableTransitionState;
+}
+export declare function useTableDataSource<T extends TableDataSource>(options?: UseTableDataSourceOptions<T>): UseTableDataSourceReturn<T>;

package/Table/hooks/useTableDataSource.js

@@ -0,0 +1,183 @@
+'use client';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { getRowKey } from '@mezzanine-ui/core/table';
+
+function useTableDataSource(options = {}) {
+    const { initialData = [], highlightDuration = 1000, fadeOutDuration = 200, } = options;
+    // Internal data source that includes items being deleted (for animation)
+    const [internalData, setInternalData] = useState(initialData);
+    // Track adding keys
+    const [addingKeys, setAddingKeys] = useState(new Set());
+    // Track deleting keys (red highlight phase)
+    const [deletingKeys, setDeletingKeys] = useState(new Set());
+    // Track fading out keys
+    const [fadingOutKeys, setFadingOutKeys] = useState(new Set());
+    // Keep track of items pending removal (after fade out completes)
+    const pendingRemovalRef = useRef(new Set());
+    // Store items being animated for removal (needed when refetch returns data without these items)
+    const removingItemsRef = useRef(new Map());
+    // Timers ref for cleanup
+    const timersRef = useRef(new Map());
+    // Cleanup timers on unmount
+    useEffect(() => {
+        return () => {
+            const { current: timers } = timersRef;
+            timers.forEach((timer) => clearTimeout(timer));
+            timers.clear();
+        };
+    }, []);
+    const clearTimerForKey = useCallback((key) => {
+        const existingTimer = timersRef.current.get(key);
+        if (existingTimer) {
+            clearTimeout(existingTimer);
+            timersRef.current.delete(key);
+        }
+    }, []);
+    // Helper to start adding animation for a key
+    const startAddingAnimation = useCallback((key) => {
+        clearTimerForKey(key);
+        setAddingKeys((prev) => new Set(prev).add(key));
+        const timer = setTimeout(() => {
+            setAddingKeys((prev) => {
+                const next = new Set(prev);
+                next.delete(key);
+                return next;
+            });
+            timersRef.current.delete(key);
+        }, highlightDuration);
+        timersRef.current.set(key, timer);
+    }, [highlightDuration, clearTimerForKey]);
+    // Helper to start removing animation for a key, returns cleanup function
+    const startRemovingAnimation = useCallback((keyStr, onComplete) => {
+        clearTimerForKey(keyStr);
+        clearTimerForKey(`${keyStr}-fade`);
+        pendingRemovalRef.current.add(keyStr);
+        setDeletingKeys((prev) => new Set(prev).add(keyStr));
+        const highlightTimer = setTimeout(() => {
+            setDeletingKeys((prev) => {
+                const next = new Set(prev);
+                next.delete(keyStr);
+                return next;
+            });
+            setFadingOutKeys((prev) => new Set(prev).add(keyStr));
+            const fadeTimer = setTimeout(() => {
+                setFadingOutKeys((prev) => {
+                    const next = new Set(prev);
+                    next.delete(keyStr);
+                    return next;
+                });
+                pendingRemovalRef.current.delete(keyStr);
+                removingItemsRef.current.delete(keyStr);
+                timersRef.current.delete(`${keyStr}-fade`);
+                onComplete();
+            }, fadeOutDuration);
+            timersRef.current.set(`${keyStr}-fade`, fadeTimer);
+            timersRef.current.delete(keyStr);
+        }, highlightDuration);
+        timersRef.current.set(keyStr, highlightTimer);
+    }, [highlightDuration, fadeOutDuration, clearTimerForKey]);
+    const updateDataSource = useCallback((data, updateOptions) => {
+        const { addedKeys = [], removedKeys = [] } = updateOptions || {};
+        // Convert to string keys for comparison
+        const addedKeyStrs = new Set(addedKeys.map(String));
+        const removedKeyStrs = new Set(removedKeys.map(String));
+        // Get current data keys for comparison
+        const currentKeys = new Set(internalData.map((item) => getRowKey(item)));
+        const newKeys = new Set(data.map((item) => getRowKey(item)));
+        // Items to animate as added (either explicitly specified or auto-detected)
+        const keysToAnimateAdd = addedKeyStrs;
+        // Items to animate as removed
+        const keysToAnimateRemove = removedKeyStrs;
+        // For removed items, we need to keep them temporarily for animation
+        // Find items that are being removed and store them
+        const itemsToKeepForAnimation = [];
+        keysToAnimateRemove.forEach((keyStr) => {
+            // Check if already animating
+            if (pendingRemovalRef.current.has(keyStr)) {
+                // Already animating, keep the stored item
+                const storedItem = removingItemsRef.current.get(keyStr);
+                if (storedItem) {
+                    itemsToKeepForAnimation.push(storedItem);
+                }
+                return;
+            }
+            // Find in current data
+            const item = internalData.find((i) => getRowKey(i) === keyStr);
+            if (item && !newKeys.has(keyStr)) {
+                removingItemsRef.current.set(keyStr, item);
+                itemsToKeepForAnimation.push(item);
+                // Start remove animation
+                startRemovingAnimation(keyStr, () => {
+                    // After animation, remove from internal data
+                    setInternalData((prev) => prev.filter((i) => getRowKey(i) !== keyStr));
+                });
+            }
+        });
+        // Clear adding animations for items no longer in data
+        setAddingKeys((prev) => {
+            const next = new Set(prev);
+            prev.forEach((key) => {
+                if (!newKeys.has(key) && !keysToAnimateRemove.has(key)) {
+                    next.delete(key);
+                    clearTimerForKey(key);
+                }
+            });
+            return next;
+        });
+        // Build final data: new data + items being animated for removal
+        const finalData = [...data];
+        // Add items being removed (for animation) that aren't already in new data
+        itemsToKeepForAnimation.forEach((item) => {
+            const key = getRowKey(item);
+            if (!newKeys.has(key)) {
+                // Find original position or add at the end
+                const originalIndex = internalData.findIndex((i) => getRowKey(i) === key);
+                if (originalIndex !== -1) {
+                    // Try to maintain relative position
+                    finalData.splice(Math.min(originalIndex, finalData.length), 0, item);
+                }
+                else {
+                    finalData.push(item);
+                }
+            }
+        });
+        // Also keep any currently animating items that aren't in the removedKeys
+        pendingRemovalRef.current.forEach((keyStr) => {
+            if (!keysToAnimateRemove.has(keyStr) &&
+                !finalData.some((i) => getRowKey(i) === keyStr)) {
+                const storedItem = removingItemsRef.current.get(keyStr);
+                if (storedItem) {
+                    finalData.push(storedItem);
+                }
+            }
+        });
+        setInternalData(finalData);
+        // Start adding animations for new items
+        keysToAnimateAdd.forEach((keyStr) => {
+            if (newKeys.has(keyStr) && !currentKeys.has(keyStr)) {
+                startAddingAnimation(keyStr);
+            }
+            else if (newKeys.has(keyStr)) {
+                // Item exists, still animate it
+                startAddingAnimation(keyStr);
+            }
+        });
+    }, [
+        internalData,
+        clearTimerForKey,
+        startAddingAnimation,
+        startRemovingAnimation,
+    ]);
+    const transitionState = useMemo(() => ({
+        addingKeys,
+        deletingKeys,
+        fadingOutKeys,
+    }), [addingKeys, deletingKeys, fadingOutKeys]);
+    return {
+        dataSource: internalData,
+        transitionState,
+        updateDataSource,
+    };
+}
+
+export { useTableDataSource };

package/Table/hooks/useTableExpansion.d.ts

@@ -0,0 +1,7 @@
+import { type TableDataSource, type TableExpandable } from '@mezzanine-ui/core/table';
+import type { TableExpansionState } from '../TableContext';
+export interface UseTableExpansionOptions<T extends TableDataSource> {
+    expandable?: TableExpandable<T>;
+    hasDragHandle: boolean;
+}
+export declare function useTableExpansion<T extends TableDataSource>({ expandable, hasDragHandle, }: UseTableExpansionOptions<T>): TableExpansionState<T> | undefined;

package/Table/hooks/useTableExpansion.js

@@ -0,0 +1,52 @@
+'use client';
+import { useState, useCallback, useMemo } from 'react';
+import { DRAG_HANDLE_COLUMN_WIDTH, EXPANSION_COLUMN_WIDTH } from '@mezzanine-ui/core/table';
+
+function useTableExpansion({ expandable, hasDragHandle, }) {
+    const [internalExpandedKeys, setInternalExpandedKeys] = useState([]);
+    const { expandedRowKeys: expandedRowKeysProp, onExpand, onExpandedRowsChange, } = expandable || {};
+    const isControlled = expandedRowKeysProp !== undefined;
+    const expandedRowKeys = isControlled && expandedRowKeysProp
+        ? expandedRowKeysProp
+        : internalExpandedKeys;
+    const isRowExpanded = useCallback((key) => {
+        return expandedRowKeys.includes(key);
+    }, [expandedRowKeys]);
+    const toggleExpand = useCallback((key, record) => {
+        const isExpanded = expandedRowKeys.includes(key);
+        const newKeys = isExpanded
+            ? expandedRowKeys.filter((k) => k !== key)
+            : [...expandedRowKeys, key];
+        if (!isControlled) {
+            setInternalExpandedKeys(newKeys);
+        }
+        onExpand === null || onExpand === void 0 ? void 0 : onExpand(!isExpanded, record);
+        onExpandedRowsChange === null || onExpandedRowsChange === void 0 ? void 0 : onExpandedRowsChange(newKeys);
+    }, [expandedRowKeys, isControlled, onExpand, onExpandedRowsChange]);
+    const expansionLeftPadding = useMemo(() => {
+        let padding = 0;
+        // Number(
+        //   getCSSVariableValue('--mzn-spacing-padding-horizontal-comfort').replace(
+        //     'rem',
+        //     '',
+        //   ),
+        // ) * 16;
+        if (hasDragHandle)
+            padding += DRAG_HANDLE_COLUMN_WIDTH;
+        if (expandable)
+            padding += EXPANSION_COLUMN_WIDTH;
+        return padding;
+    }, [expandable, hasDragHandle]);
+    if (!expandable) {
+        return undefined;
+    }
+    return {
+        config: expandable,
+        expansionLeftPadding,
+        expandedRowKeys,
+        isRowExpanded,
+        toggleExpand,
+    };
+}
+
+export { useTableExpansion };

package/Table/hooks/useTableFixedOffsets.d.ts

@@ -0,0 +1,29 @@
+import { type TableColumn } from '@mezzanine-ui/core/table';
+import type { ActionColumnConfig } from './typings';
+export interface FixedOffsetInfo {
+    /** CSS offset value for the column */
+    offset: number;
+    /** Fixed side: 'start' or 'end' */
+    side: 'start' | 'end';
+}
+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 selection column */
+    getSelectionOffset: () => FixedOffsetInfo | null;
+    /** Get offset info for expansion column */
+    getExpansionOffset: () => FixedOffsetInfo | null;
+    /** Check if a column should show shadow based on scroll position */
+    shouldShowShadow: (key: string, scrollLeft: number, containerWidth: number) => boolean;
+}
+export interface UseTableFixedOffsetsOptions {
+    /** Column definitions */
+    columns: TableColumn[];
+    /** Action column configuration */
+    actionConfig: ActionColumnConfig;
+    /** Get computed width for a column (from columnState) */
+    getResizedColumnWidth?: (key: string) => number | undefined;
+}
+export declare function useTableFixedOffsets(options: UseTableFixedOffsetsOptions): UseTableFixedOffsetsReturn;

package/Table/hooks/useTableFixedOffsets.js

@@ -0,0 +1,241 @@
+'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 { useTableSuperContext } from '../TableContext.js';
+
+const parseFixed = (fixed) => {
+    if (fixed === true || fixed === 'start')
+        return 'start';
+    if (fixed === 'end')
+        return 'end';
+    return null;
+};
+function useTableFixedOffsets(options) {
+    const { expansionLeftPadding = 0 } = useTableSuperContext();
+    const { actionConfig, columns, getResizedColumnWidth } = options;
+    // Store measured widths
+    const [measuredWidths, setMeasuredWidths] = useState(new Map());
+    const { hasDragHandle, hasExpansion, hasSelection } = actionConfig;
+    useEffect(() => {
+        const innerMap = new Map();
+        if (hasDragHandle) {
+            innerMap.set(DRAG_HANDLE_KEY, DRAG_HANDLE_COLUMN_WIDTH);
+        }
+        if (hasExpansion) {
+            innerMap.set(EXPANSION_KEY, EXPANSION_COLUMN_WIDTH);
+        }
+        if (hasSelection) {
+            innerMap.set(SELECTION_KEY, SELECTION_COLUMN_WIDTH);
+        }
+        setMeasuredWidths(innerMap);
+    }, [hasDragHandle, hasExpansion, hasSelection]);
+    // Get width for a column (prioritize measured, then computed, then defined, then fallback)
+    const getWidth = useCallback((key, fallback = 0) => {
+        // Get static widths first
+        const measured = measuredWidths.get(key);
+        if (measured !== undefined && measured > 0) {
+            return measured;
+        }
+        // get resized column width
+        const computed = getResizedColumnWidth === null || getResizedColumnWidth === void 0 ? void 0 : getResizedColumnWidth(key);
+        if (computed !== undefined) {
+            return computed;
+        }
+        // Then try to find column definition width
+        const column = columns.find((col) => col.key === key);
+        if ((column === null || column === void 0 ? void 0 : column.width) !== undefined) {
+            return column.width;
+        }
+        return fallback;
+    }, [columns, getResizedColumnWidth, measuredWidths]);
+    // Build ordered list of all fixed columns
+    const { fixedEndKeys, fixedStartKeys } = useMemo(() => {
+        const startKeys = [];
+        const endKeys = [];
+        // Action columns first (in order: drag handle, expansion, selection)
+        if (actionConfig.hasDragHandle && actionConfig.dragHandleFixed) {
+            startKeys.push(DRAG_HANDLE_KEY);
+        }
+        if (actionConfig.hasExpansion && actionConfig.expansionFixed) {
+            startKeys.push(EXPANSION_KEY);
+        }
+        if (actionConfig.hasSelection && actionConfig.selectionFixed) {
+            startKeys.push(SELECTION_KEY);
+        }
+        // Then data columns
+        columns.forEach((column) => {
+            const side = parseFixed(column.fixed);
+            if (side === 'start') {
+                startKeys.push(column.key);
+            }
+            else if (side === 'end') {
+                endKeys.push(column.key);
+            }
+        });
+        return { fixedEndKeys: endKeys, fixedStartKeys: startKeys };
+    }, [actionConfig, columns]);
+    // Calculate all fixed offsets
+    const fixedOffsets = useMemo(() => {
+        const startOffsets = new Map();
+        const endOffsets = new Map();
+        // Calculate start offsets
+        let currentStartOffset = 0;
+        fixedStartKeys.forEach((key) => {
+            startOffsets.set(key, {
+                offset: currentStartOffset,
+                side: 'start',
+            });
+            currentStartOffset += getWidth(key);
+        });
+        // Calculate end offsets (from right to left)
+        let currentEndOffset = 0;
+        for (let i = fixedEndKeys.length - 1; i >= 0; i--) {
+            const key = fixedEndKeys[i];
+            endOffsets.set(key, {
+                offset: currentEndOffset,
+                side: 'end',
+            });
+            currentEndOffset += getWidth(key);
+        }
+        return { endOffsets, startOffsets };
+    }, [fixedEndKeys, fixedStartKeys, getWidth]);
+    // Build ordered list of all columns (for position calculation)
+    const allColumnKeys = useMemo(() => {
+        const keys = [];
+        // Action columns first
+        if (hasDragHandle) {
+            keys.push(DRAG_HANDLE_KEY);
+        }
+        if (hasExpansion) {
+            keys.push(EXPANSION_KEY);
+        }
+        if (hasSelection) {
+            keys.push(SELECTION_KEY);
+        }
+        // Then data columns
+        columns.forEach((column) => {
+            keys.push(column.key);
+        });
+        return keys;
+    }, [hasDragHandle, hasSelection, hasExpansion, columns]);
+    // Calculate original positions (left edge) for all columns
+    const originalPositions = useMemo(() => {
+        const positions = new Map();
+        let currentPosition = 0;
+        allColumnKeys.forEach((key) => {
+            positions.set(key, currentPosition);
+            currentPosition += getWidth(key);
+        });
+        return positions;
+    }, [allColumnKeys, getWidth]);
+    /**
+     * Determine if a column should show shadow.
+     */
+    const shouldShowShadow = useCallback((key, scrollLeft, containerWidth) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const offsetInfo = (_a = fixedOffsets.startOffsets.get(key)) !== null && _a !== void 0 ? _a : fixedOffsets.endOffsets.get(key);
+        if (!offsetInfo)
+            return false;
+        if (offsetInfo.side === 'start') {
+            // For start-fixed columns
+            const keyIndex = fixedStartKeys.indexOf(key);
+            if (keyIndex === -1)
+                return false;
+            const originalPos = (_b = originalPositions.get(key)) !== null && _b !== void 0 ? _b : 0;
+            const isSticky = scrollLeft - expansionLeftPadding > originalPos - offsetInfo.offset;
+            if (!isSticky)
+                return false;
+            // Now check if there's a gap to the right (shadow should show)
+            // Find the next fixed-start column
+            const nextIndex = keyIndex + 1;
+            if (nextIndex < fixedStartKeys.length) {
+                const nextKey = fixedStartKeys[nextIndex];
+                const nextOriginalPos = (_c = originalPositions.get(nextKey)) !== null && _c !== void 0 ? _c : 0;
+                const nextOffset = (_e = (_d = fixedOffsets.startOffsets.get(nextKey)) === null || _d === void 0 ? void 0 : _d.offset) !== null && _e !== void 0 ? _e : 0;
+                // Gap closes when scroll reaches the point where next column becomes sticky
+                const isNextSticky = scrollLeft - expansionLeftPadding >= nextOriginalPos - nextOffset;
+                return !isNextSticky;
+            }
+            return true;
+        }
+        else {
+            // For end-fixed columns
+            const keyIndex = fixedEndKeys.indexOf(key);
+            if (keyIndex === -1)
+                return false;
+            // Get this column's original position from left
+            const originalPos = (_f = originalPositions.get(key)) !== null && _f !== void 0 ? _f : 0;
+            const columnWidth = getWidth(key);
+            const isSticky = scrollLeft + containerWidth <
+                originalPos + columnWidth + offsetInfo.offset + expansionLeftPadding;
+            if (!isSticky)
+                return false;
+            // Check if there's a gap to the left (shadow should show)
+            const prevIndex = keyIndex - 1;
+            if (~prevIndex) {
+                const prevKey = fixedEndKeys[prevIndex];
+                const prevOriginalPos = (_g = originalPositions.get(prevKey)) !== null && _g !== void 0 ? _g : 0;
+                const prevOffset = (_j = (_h = fixedOffsets.endOffsets.get(prevKey)) === null || _h === void 0 ? void 0 : _h.offset) !== null && _j !== void 0 ? _j : 0;
+                const prevColumnWidth = getWidth(prevKey);
+                const isPrevSticky = scrollLeft + containerWidth <
+                    prevOriginalPos +
+                        prevColumnWidth +
+                        prevOffset +
+                        expansionLeftPadding;
+                // If both are sticky, the gap is closed if this column's
+                // left visual edge touches the prev column's right visual edge
+                return !isPrevSticky;
+            }
+            // This is the leftmost fixed-end column
+            return true;
+        }
+    }, [
+        fixedEndKeys,
+        fixedOffsets,
+        fixedStartKeys,
+        getWidth,
+        originalPositions,
+        expansionLeftPadding,
+    ]);
+    const getColumnOffset = useCallback((key) => {
+        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(() => {
+        var _a;
+        if (!actionConfig.hasDragHandle || !actionConfig.dragHandleFixed) {
+            return null;
+        }
+        return (_a = fixedOffsets.startOffsets.get(DRAG_HANDLE_KEY)) !== null && _a !== void 0 ? _a : null;
+    }, [actionConfig, fixedOffsets]);
+    const getSelectionOffset = useCallback(() => {
+        var _a;
+        if (!actionConfig.hasSelection || !actionConfig.selectionFixed) {
+            return null;
+        }
+        return (_a = fixedOffsets.startOffsets.get(SELECTION_KEY)) !== null && _a !== void 0 ? _a : null;
+    }, [actionConfig, fixedOffsets]);
+    const getExpansionOffset = useCallback(() => {
+        var _a;
+        if (!actionConfig.hasExpansion || !actionConfig.expansionFixed) {
+            return null;
+        }
+        return (_a = fixedOffsets.startOffsets.get(EXPANSION_KEY)) !== null && _a !== void 0 ? _a : null;
+    }, [actionConfig, fixedOffsets]);
+    // Memoize return object to prevent unnecessary re-renders
+    return useMemo(() => ({
+        getColumnOffset,
+        getDragHandleOffset,
+        getExpansionOffset,
+        getSelectionOffset,
+        shouldShowShadow,
+    }), [
+        getColumnOffset,
+        getDragHandleOffset,
+        getExpansionOffset,
+        getSelectionOffset,
+        shouldShowShadow,
+    ]);
+}
+
+export { useTableFixedOffsets };

package/Table/hooks/useTableScroll.d.ts

@@ -0,0 +1,12 @@
+export interface UseTableScrollReturn {
+    /** Container width (viewport width) */
+    containerWidth: number;
+    handleScroll: (event: React.UIEvent<HTMLDivElement>) => void;
+    isScrollingHorizontally: boolean;
+    scrollLeft: number;
+    /** Set refs for measuring container width */
+    setContainerRef: (element: HTMLDivElement | null) => void;
+}
+export declare function useTableScroll({ enabled, }: {
+    enabled: boolean;
+}): UseTableScrollReturn;

package/Table/hooks/useTableScroll.js

@@ -0,0 +1,58 @@
+'use client';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+
+function useTableScroll({ enabled, }) {
+    const [isScrollingHorizontally, setIsScrollingHorizontally] = useState(false);
+    const [scrollLeft, setScrollLeft] = useState(0);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const containerRef = useRef(null);
+    const setContainerRef = useCallback((element) => {
+        containerRef.current = element;
+    }, []);
+    const measureDimensions = useCallback(() => {
+        if (containerRef.current) {
+            const newContainerWidth = containerRef.current.clientWidth;
+            setContainerWidth((prev) => prev !== newContainerWidth ? newContainerWidth : prev);
+        }
+    }, []);
+    const handleScroll = useCallback((event) => {
+        const target = event.currentTarget;
+        const newScrollLeft = target.scrollLeft;
+        setScrollLeft(newScrollLeft);
+        setIsScrollingHorizontally(newScrollLeft > 0);
+    }, []);
+    // Set up ResizeObserver to track dimension changes
+    useEffect(() => {
+        const { current: container } = containerRef;
+        if (!container || !enabled)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            measureDimensions();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [measureDimensions, enabled]);
+    // Initial measurement after mount
+    useEffect(() => {
+        if (enabled) {
+            measureDimensions();
+        }
+    }, [measureDimensions, enabled]);
+    return useMemo(() => ({
+        containerWidth,
+        handleScroll,
+        isScrollingHorizontally,
+        scrollLeft,
+        setContainerRef,
+    }), [
+        containerWidth,
+        handleScroll,
+        isScrollingHorizontally,
+        scrollLeft,
+        setContainerRef,
+    ]);
+}
+
+export { useTableScroll };

package/Table/hooks/useTableSelection.d.ts

@@ -0,0 +1,7 @@
+import { type TableDataSource, type TableRowSelection } from '@mezzanine-ui/core/table';
+import type { TableSelectionState } from '../TableContext';
+export interface UseTableSelectionOptions<T extends TableDataSource> {
+    dataSource: T[];
+    rowSelection?: TableRowSelection<T>;
+}
+export declare function useTableSelection<T extends TableDataSource>({ dataSource, rowSelection, }: UseTableSelectionOptions<T>): TableSelectionState<T> | undefined;