@flikk/ui 1.0.0-beta.23 → 1.0.0-beta.25

package/dist/components/core/Tree/Tree.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useCallback, useState, useMemo } from 'react';
+import React__default, { useCallback, useState, useRef, useMemo } from 'react';
 import { motion, AnimatePresence, useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { treeTheme } from './Tree.theme.js';
@@ -7,6 +7,32 @@ import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { ChevronRightIcon, DocumentIcon } from '@heroicons/react/24/outline';
 import { getReducedMotionVariants, treeNodeVariants, expandIconVariants, childNodeVariants, childrenStagger } from './Tree.animations.js';
 
+// Build a flat ordered list of visible (non-collapsed) node ids via depth-first traversal.
+// Disabled nodes are included in the list so that ArrowDown/Up skip over them in the
+// keyboard handler rather than here — keeping the traversal pure.
+const buildVisibleNodeList = (nodes, expandedSet) => {
+    const result = [];
+    const traverse = (currentNodes) => {
+        for (const node of currentNodes) {
+            result.push(node.id);
+            if (node.children && node.children.length > 0 && expandedSet.has(node.id)) {
+                traverse(node.children);
+            }
+        }
+    };
+    traverse(nodes);
+    return result;
+};
+// Build a map from node id → parent node id for ArrowLeft "move to parent" navigation.
+const buildParentMap = (nodes, parentId = null, acc = new Map()) => {
+    for (const node of nodes) {
+        acc.set(node.id, parentId);
+        if (node.children && node.children.length > 0) {
+            buildParentMap(node.children, node.id, acc);
+        }
+    }
+    return acc;
+};
 // Simplified selection utilities (merged from Tree.utils.ts)
 const getDescendantIds = (node) => {
     const descendants = [];
@@ -72,7 +98,7 @@ const calculateSelection = (nodeId, selectedKeys, data) => {
         indeterminateKeys
     };
 };
-const InternalTreeNode = React__default.memo(({ node, level, expanded, selected, isIndeterminate, selectable, checkable, hierarchicalSelection, expandable, expandedKeysSet, selectedKeysSet, indeterminateKeysSet, onNodeClick, onToggleExpand, theme, className, shouldReduceMotion, }) => {
+const InternalTreeNode = React__default.memo(({ node, level, expanded, selected, isIndeterminate, selectable, checkable, hierarchicalSelection, expandable, expandedKeysSet, selectedKeysSet, indeterminateKeysSet, onNodeClick, onToggleExpand, onKeyboardNavigate, nodeRefs, focusedNodeId, onFocusNode, theme, className, shouldReduceMotion, }) => {
     var _a;
     const hasChildren = node.children && node.children.length > 0;
     const isExpandable = expandable && hasChildren;
@@ -80,20 +106,40 @@ const InternalTreeNode = React__default.memo(({ node, level, expanded, selected,
     const nodeVariants = shouldReduceMotion ? getReducedMotionVariants(treeNodeVariants) : treeNodeVariants;
     const iconVariants = shouldReduceMotion ? getReducedMotionVariants(expandIconVariants) : expandIconVariants;
     const childVariants = shouldReduceMotion ? getReducedMotionVariants(childNodeVariants) : childNodeVariants;
+    // Register/unregister this node's DOM element in the shared refs map.
+    const itemRef = useCallback((el) => {
+        if (el) {
+            nodeRefs.current.set(node.id, el);
+        }
+        else {
+            nodeRefs.current.delete(node.id);
+        }
+    }, [node.id, nodeRefs]);
+    // Roving tabIndex: only the focused node is reachable via Tab.
+    // If no node is focused yet, the first root node (level 0) gets tabIndex 0 as
+    // a sensible initial entry point — this is handled at the Tree root.
+    const isFocused = focusedNodeId === node.id;
+    const tabIndexValue = node.disabled ? -1 : (isFocused ? 0 : -1);
     const handleNodeClick = useCallback((e) => {
         e.stopPropagation();
         if (node.disabled)
             return;
+        onFocusNode(node.id);
         if (selectable) {
             onNodeClick(node);
         }
-    }, [node, selectable, onNodeClick]);
+    }, [node, selectable, onNodeClick, onFocusNode]);
     const handleExpandClick = useCallback((e) => {
         e.stopPropagation();
         if (isExpandable && !node.disabled) {
             onToggleExpand(node);
         }
     }, [isExpandable, node, onToggleExpand]);
+    const handleFocus = useCallback(() => {
+        if (!node.disabled) {
+            onFocusNode(node.id);
+        }
+    }, [node.id, node.disabled, onFocusNode]);
     const handleKeyDown = (e) => {
         if (node.disabled)
             return;
@@ -106,16 +152,43 @@ const InternalTreeNode = React__default.memo(({ node, level, expanded, selected,
                 }
                 break;
             case 'ArrowRight':
+                e.preventDefault();
                 if (isExpandable && !expanded) {
-                    e.preventDefault();
+                    // Collapsed node with children: expand it
                     onToggleExpand(node);
                 }
+                else if (isExpandable && expanded) {
+                    // Expanded node with children: move focus to first child
+                    onKeyboardNavigate(node.id, 'ArrowRight');
+                }
+                // Leaf node: do nothing (APG spec)
                 break;
             case 'ArrowLeft':
+                e.preventDefault();
                 if (isExpandable && expanded) {
-                    e.preventDefault();
+                    // Expanded node: collapse it
                     onToggleExpand(node);
                 }
+                else {
+                    // Collapsed node or leaf: move to parent
+                    onKeyboardNavigate(node.id, 'ArrowLeft');
+                }
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                onKeyboardNavigate(node.id, 'ArrowDown');
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                onKeyboardNavigate(node.id, 'ArrowUp');
+                break;
+            case 'Home':
+                e.preventDefault();
+                onKeyboardNavigate(node.id, 'Home');
+                break;
+            case 'End':
+                e.preventDefault();
+                onKeyboardNavigate(node.id, 'End');
                 break;
         }
     };
@@ -126,10 +199,10 @@ const InternalTreeNode = React__default.memo(({ node, level, expanded, selected,
     const labelStyle = cn(theme.labelStyle, {
         'text-[var(--color-text-muted)]': node.disabled,
     });
-    return (jsxs("div", { children: [jsxs("div", { className: nodeStyle, style: { paddingLeft: `calc(${level} * ${theme.indentSize} + 0.25rem)` }, onClick: handleNodeClick, onKeyDown: handleKeyDown, tabIndex: node.disabled ? -1 : 0, role: "treeitem", "aria-expanded": isExpandable ? expanded : false, "aria-selected": selectable ? selected : undefined, "aria-disabled": node.disabled, children: [isExpandable ? (jsx(motion.span, { className: cn(theme.expandIconStyle), variants: iconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick, role: "button", "aria-label": expanded ? 'Collapse' : 'Expand', tabIndex: -1, children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })) : (jsx("span", { className: "w-4 mr-1" })), checkable && (jsx(Checkbox, { size: 'sm', id: `tree-checkbox-${node.id}`, name: `tree-checkbox-${node.id}`, value: node.id, checked: selected, indeterminate: hierarchicalSelection && isIndeterminate, onChange: () => onNodeClick(node), state: node.disabled ? "disabled" : "default", className: "flex-shrink-0", onClick: (e) => e.stopPropagation() })), (node.icon || !isExpandable) && (jsx("span", { className: cn(theme.iconStyle), children: node.icon || jsx(DocumentIcon, { className: "w-4 h-4" }) })), jsx("span", { className: labelStyle, title: node.label, children: node.label })] }), hasChildren && (jsx(AnimatePresence, { initial: false, children: expanded && (jsx(motion.div, { variants: nodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: {
+    return (jsxs("div", { children: [jsxs("div", { ref: itemRef, className: nodeStyle, style: { paddingLeft: `calc(${level} * ${theme.indentSize} + 0.25rem)` }, onClick: handleNodeClick, onKeyDown: handleKeyDown, onFocus: handleFocus, tabIndex: tabIndexValue, role: "treeitem", "aria-expanded": isExpandable ? expanded : undefined, "aria-selected": selectable ? selected : undefined, "aria-disabled": node.disabled, children: [isExpandable ? (jsx(motion.span, { className: cn(theme.expandIconStyle), variants: iconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick, "aria-label": expanded ? 'Collapse' : 'Expand', tabIndex: -1, children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })) : (jsx("span", { className: "w-4 mr-1" })), checkable && (jsx(Checkbox, { size: 'sm', id: `tree-checkbox-${node.id}`, name: `tree-checkbox-${node.id}`, value: node.id, checked: selected, indeterminate: hierarchicalSelection && isIndeterminate, onChange: () => onNodeClick(node), state: node.disabled ? "disabled" : "default", className: "flex-shrink-0", onClick: (e) => e.stopPropagation() })), (node.icon || !isExpandable) && (jsx("span", { className: cn(theme.iconStyle), children: node.icon || jsx(DocumentIcon, { className: "w-4 h-4" }) })), jsx("span", { className: labelStyle, title: node.label, children: node.label })] }), hasChildren && (jsx(AnimatePresence, { initial: false, children: expanded && (jsx(motion.div, { variants: nodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: {
                         overflow: 'hidden',
                         transformOrigin: 'top'
-                    }, transition: shouldReduceMotion ? { duration: 0.01 } : childrenStagger, children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((childNode, index) => (jsx(motion.div, { variants: childVariants, initial: "hidden", animate: "visible", exit: "hidden", custom: index, children: jsx(InternalTreeNode, { node: childNode, level: level + 1, expanded: expandedKeysSet.has(childNode.id), selected: selectedKeysSet.has(childNode.id), isIndeterminate: indeterminateKeysSet.has(childNode.id), selectable: selectable, checkable: checkable, hierarchicalSelection: hierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: onNodeClick, onToggleExpand: onToggleExpand, theme: theme, shouldReduceMotion: shouldReduceMotion }) }, childNode.id))) }, `${node.id}-children`)) }))] }));
+                    }, transition: shouldReduceMotion ? { duration: 0.01 } : childrenStagger, children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((childNode, index) => (jsx(motion.div, { variants: childVariants, initial: "hidden", animate: "visible", exit: "hidden", custom: index, children: jsx(InternalTreeNode, { node: childNode, level: level + 1, expanded: expandedKeysSet.has(childNode.id), selected: selectedKeysSet.has(childNode.id), isIndeterminate: indeterminateKeysSet.has(childNode.id), selectable: selectable, checkable: checkable, hierarchicalSelection: hierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: onNodeClick, onToggleExpand: onToggleExpand, onKeyboardNavigate: onKeyboardNavigate, nodeRefs: nodeRefs, focusedNodeId: focusedNodeId, onFocusNode: onFocusNode, theme: theme, shouldReduceMotion: shouldReduceMotion }) }, childNode.id))) }, `${node.id}-children`)) }))] }));
 });
 const TreeRoot = React__default.forwardRef(({ data, selectable = false, checkable = false, hierarchicalSelection, expandable = true, defaultExpandedKeys = [], defaultSelectedKeys = [], onSelectionChange, onExpand, className, theme: customTheme = {}, ...htmlProps }, ref) => {
     var _a;
@@ -144,9 +217,106 @@ const TreeRoot = React__default.forwardRef(({ data, selectable = false, checkabl
     const [expandedKeys, setExpandedKeys] = useState(defaultExpandedKeys);
     const [selectedKeys, setSelectedKeys] = useState(defaultSelectedKeys);
     const [indeterminateKeys, setIndeterminateKeys] = useState([]);
+    // Roving tabIndex: track which node currently owns tabIndex=0.
+    // Initialise to the first root node (if any) so the tree is keyboard-enterable.
+    const [focusedNodeId, setFocusedNodeId] = useState(data.length > 0 ? data[0].id : null);
+    // Map from node id → DOM element, populated by each InternalTreeNode on mount.
+    const nodeRefs = useRef(new Map());
     const expandedKeysSet = useMemo(() => new Set(expandedKeys), [expandedKeys]);
     const selectedKeysSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
     const indeterminateKeysSet = useMemo(() => new Set(indeterminateKeys), [indeterminateKeys]);
+    // Parent map for ArrowLeft navigation (move to parent node).
+    const parentMap = useMemo(() => buildParentMap(data), [data]);
+    // Called by InternalTreeNode when it receives focus (mouse or keyboard).
+    const handleFocusNode = useCallback((nodeId) => {
+        setFocusedNodeId(nodeId);
+    }, []);
+    // Central keyboard navigation handler: moves focus within the tree.
+    const handleKeyboardNavigate = useCallback((nodeId, key) => {
+        const visibleIds = buildVisibleNodeList(data, expandedKeysSet);
+        const focusById = (targetId) => {
+            const el = nodeRefs.current.get(targetId);
+            if (el) {
+                setFocusedNodeId(targetId);
+                el.focus();
+            }
+        };
+        const currentIndex = visibleIds.indexOf(nodeId);
+        switch (key) {
+            case 'ArrowDown': {
+                // Move to next visible node, skipping disabled ones.
+                for (let i = currentIndex + 1; i < visibleIds.length; i++) {
+                    const candidateId = visibleIds[i];
+                    const candidateEl = nodeRefs.current.get(candidateId);
+                    if (candidateEl && candidateEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(candidateId);
+                        break;
+                    }
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                // Move to previous visible node, skipping disabled ones.
+                for (let i = currentIndex - 1; i >= 0; i--) {
+                    const candidateId = visibleIds[i];
+                    const candidateEl = nodeRefs.current.get(candidateId);
+                    if (candidateEl && candidateEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(candidateId);
+                        break;
+                    }
+                }
+                break;
+            }
+            case 'Home': {
+                // Move to the first non-disabled visible node.
+                for (let i = 0; i < visibleIds.length; i++) {
+                    const candidateId = visibleIds[i];
+                    const candidateEl = nodeRefs.current.get(candidateId);
+                    if (candidateEl && candidateEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(candidateId);
+                        break;
+                    }
+                }
+                break;
+            }
+            case 'End': {
+                // Move to the last non-disabled visible node.
+                for (let i = visibleIds.length - 1; i >= 0; i--) {
+                    const candidateId = visibleIds[i];
+                    const candidateEl = nodeRefs.current.get(candidateId);
+                    if (candidateEl && candidateEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(candidateId);
+                        break;
+                    }
+                }
+                break;
+            }
+            case 'ArrowRight': {
+                // Move focus to the first child of an already-expanded node.
+                // (Expand-when-collapsed is handled directly in InternalTreeNode.)
+                const firstChildIndex = currentIndex + 1;
+                if (firstChildIndex < visibleIds.length) {
+                    const firstChildId = visibleIds[firstChildIndex];
+                    const firstChildEl = nodeRefs.current.get(firstChildId);
+                    if (firstChildEl && firstChildEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(firstChildId);
+                    }
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                // Move focus to the parent node (when current node is collapsed or a leaf).
+                const parentId = parentMap.get(nodeId);
+                if (parentId) {
+                    const parentEl = nodeRefs.current.get(parentId);
+                    if (parentEl && parentEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(parentId);
+                    }
+                }
+                break;
+            }
+        }
+    }, [data, expandedKeysSet, parentMap]);
     // Handle node selection
     const handleNodeSelect = useCallback((node) => {
         if (!selectable || node.disabled)
@@ -194,7 +364,7 @@ const TreeRoot = React__default.forwardRef(({ data, selectable = false, checkabl
         setExpandedKeys(newExpandedKeys);
         onExpand === null || onExpand === void 0 ? void 0 : onExpand(newExpandedKeys, node, !isExpanded);
     }, [expandedKeys, expandable, onExpand]);
-    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, 'tree-container', className), role: "tree", "aria-multiselectable": checkable, ...htmlProps, children: data.map((node) => (jsx(InternalTreeNode, { node: node, level: 0, expanded: expandedKeysSet.has(node.id), selected: selectedKeysSet.has(node.id), isIndeterminate: indeterminateKeysSet.has(node.id), selectable: selectable, checkable: checkable, hierarchicalSelection: enableHierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: handleNodeSelect, onToggleExpand: handleNodeToggleExpand, theme: theme, shouldReduceMotion: shouldReduceMotion }, node.id))) }));
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, 'tree-container', className), role: "tree", "aria-multiselectable": checkable, ...htmlProps, children: data.map((node) => (jsx(InternalTreeNode, { node: node, level: 0, expanded: expandedKeysSet.has(node.id), selected: selectedKeysSet.has(node.id), isIndeterminate: indeterminateKeysSet.has(node.id), selectable: selectable, checkable: checkable, hierarchicalSelection: enableHierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: handleNodeSelect, onToggleExpand: handleNodeToggleExpand, onKeyboardNavigate: handleKeyboardNavigate, nodeRefs: nodeRefs, focusedNodeId: focusedNodeId, onFocusNode: handleFocusNode, theme: theme, shouldReduceMotion: shouldReduceMotion }, node.id))) }));
 });
 TreeRoot.displayName = 'Tree';
 // Simplified compound component

package/dist/components/data-display/GanttChart/GanttSplitter.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useCallback } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useGanttContext } from './GanttChart.js';
 
@@ -10,6 +10,18 @@ const GanttSplitter = () => {
     const { theme, tablePanelWidth, setTablePanelWidth } = useGanttContext();
     const startX = useRef(0);
     const startWidth = useRef(0);
+    // Track active pointer listeners so they can be cleaned up on unmount during a drag
+    const activeListenersRef = useRef({ move: null, up: null });
+    // Cleanup on unmount — removes any lingering listeners if component unmounts during a drag
+    useEffect(() => {
+        return () => {
+            const { move, up } = activeListenersRef.current;
+            if (move)
+                document.removeEventListener("pointermove", move);
+            if (up)
+                document.removeEventListener("pointerup", up);
+        };
+    }, []);
     const onPointerDown = useCallback((e) => {
         e.preventDefault();
         startX.current = e.clientX;
@@ -20,9 +32,11 @@ const GanttSplitter = () => {
             setTablePanelWidth(next);
         };
         const onPointerUp = () => {
+            activeListenersRef.current = { move: null, up: null };
             document.removeEventListener("pointermove", onPointerMove);
             document.removeEventListener("pointerup", onPointerUp);
         };
+        activeListenersRef.current = { move: onPointerMove, up: onPointerUp };
         document.addEventListener("pointermove", onPointerMove);
         document.addEventListener("pointerup", onPointerUp);
     }, [tablePanelWidth, setTablePanelWidth]);

package/dist/components/data-display/Table/Table.js

@@ -38,7 +38,7 @@ const TableContext = createContext({
  */
 function TableComponent(props) {
     var _a;
-    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, } = props;
+    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, caption, } = props;
     // Column management hook
     const { visibleColumns, columnOrder, visibleColumnsList, handleToggleColumn, handleColumnReorder, handleResetToDefault, } = useTableColumns({
         columns,
@@ -148,7 +148,7 @@ function TableComponent(props) {
         selectedRows,
         onSelectionChange,
     ]);
-    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsx("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] })) }) })] }) }));
+    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsxs("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: [caption && (jsx("caption", { className: "sr-only", children: caption })), isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] }))] }) })] }) }));
 }
 TableComponent.displayName = "Table";
 const Table = TableComponent;

package/dist/components/data-display/Table/Table.types.d.ts

@@ -193,6 +193,8 @@ export interface TableProps<T = unknown> {
         totalItems: number;
     };
     children?: ReactNode;
+    /** Optional accessible caption for the table, rendered as a visually-hidden <caption> element */
+    caption?: string;
 }
 export interface TableHeaderProps {
     children?: ReactNode;

package/dist/components/data-display/Table/TableFilter.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
-import { inferFilterType, getDefaultOperator, isUnaryOperator, getOperatorsForFilterType, isBetweenOperator } from './Table.filterUtils.js';
+import { useRef, useState, useCallback } from 'react';
+import { inferFilterType, getDefaultOperator, isUnaryOperator, isBetweenOperator, getOperatorsForFilterType } from './Table.filterUtils.js';
 import { Button } from '../../core/Button/Button.js';
 import { Input } from '../../forms/Input/Input.js';
 import '../../forms/Input/Input.theme.js';
@@ -57,6 +57,7 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
 }
 function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: controlledLogic, onFilterLogicChange, data, className, }) {
     const filterableColumns = columns.filter((col) => col.filterable);
+    const filterIdRef = useRef(0);
     // Internal filter logic state
     const [internalLogic, setInternalLogic] = useState("and");
     const filterLogic = controlledLogic !== null && controlledLogic !== void 0 ? controlledLogic : internalLogic;
@@ -87,7 +88,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
         const resolvedType = inferFilterType(defaultColumn, data);
         return [
             {
-                id: `filter-${Date.now()}`,
+                id: `filter-${++filterIdRef.current}`,
                 columnId: defaultColumn.id,
                 operator: getDefaultOperator(resolvedType),
                 value: "",
@@ -107,7 +108,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             return "text";
         return inferFilterType(column, data);
     };
-    const syncFilters = (filters) => {
+    const syncFilters = useCallback((filters) => {
         const newFilterConfig = filters
             .filter((f) => {
             if (!f.columnId)
@@ -131,8 +132,8 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             operator: f.operator,
         }));
         onFilterChange(newFilterConfig);
-    };
-    const handleAddFilter = () => {
+    }, [onFilterChange]);
+    const handleAddFilter = useCallback(() => {
         const defaultColumn = filterableColumns[0];
         if (!defaultColumn)
             return;
@@ -141,21 +142,22 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
         setActiveFilters((prev) => [
             ...prev,
             {
-                id: `filter-${Date.now()}`,
+                id: `filter-${++filterIdRef.current}`,
                 columnId: defaultColumn.id,
                 operator: defaultOp,
                 value: "",
             },
         ]);
-    };
-    const handleRemoveFilter = (filterId) => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterableColumns, onFilterChange]);
+    const handleRemoveFilter = useCallback((filterId) => {
         setActiveFilters((prev) => {
             const updated = prev.filter((f) => f.id !== filterId);
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleFilterColumnChange = (filterId, columnId) => {
+    }, [syncFilters]);
+    const handleFilterColumnChange = useCallback((filterId, columnId) => {
         setActiveFilters((prev) => {
             const updated = prev.map((f) => {
                 if (f.id !== filterId)
@@ -168,8 +170,9 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleFilterOperatorChange = (filterId, operator) => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterableColumns, data, syncFilters]);
+    const handleFilterOperatorChange = useCallback((filterId, operator) => {
         setActiveFilters((prev) => {
             const updated = prev.map((f) => {
                 if (f.id !== filterId)
@@ -188,18 +191,18 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleFilterValueChange = (filterId, value) => {
+    }, [syncFilters]);
+    const handleFilterValueChange = useCallback((filterId, value) => {
         setActiveFilters((prev) => {
             const updated = prev.map((f) => f.id === filterId ? { ...f, value } : f);
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleClearAll = () => {
+    }, [syncFilters]);
+    const handleClearAll = useCallback(() => {
         setActiveFilters([]);
         onFilterChange([]);
-    };
+    }, [onFilterChange]);
     const appliedFilterCount = activeFilters.filter((f) => {
         if (!f.columnId)
             return false;

package/dist/components/data-display/Timeline/Timeline.animations.d.ts

@@ -4,13 +4,6 @@ import { Variants } from "motion/react";
  * Provides a fade + slide effect when items enter the viewport
  */
 export declare const timelineItemVariants: Variants;
-/**
- * Get directional slide variants based on alignment side
- * Items slide in from the opposite direction of their placement
- *
- * @param side - 'left' slides from left, 'right' slides from right
- */
-export declare const getDirectionalVariants: (side: "left" | "right") => Variants;
 /**
  * Horizontal layout item entry animation
  * Items fade in from below

package/dist/components/data-display/Timeline/Timeline.animations.js

@@ -20,32 +20,6 @@ const timelineItemVariants = {
         },
     },
 };
-/**
- * Get directional slide variants based on alignment side
- * Items slide in from the opposite direction of their placement
- *
- * @param side - 'left' slides from left, 'right' slides from right
- */
-const getDirectionalVariants = (side) => ({
-    hidden: {
-        opacity: 0,
-        x: side === "left" ? -30 : 30,
-        y: 10,
-        transition: {
-            duration: 0.3,
-            ease: "easeOut",
-        },
-    },
-    visible: {
-        opacity: 1,
-        x: 0,
-        y: 0,
-        transition: {
-            duration: 0.5,
-            ease: [0.04, 0.62, 0.23, 0.98],
-        },
-    },
-});
 /**
  * Horizontal layout item entry animation
  * Items fade in from below
@@ -89,4 +63,4 @@ const timelineMarkerVariants = {
     },
 };
 
-export { getDirectionalVariants, timelineHorizontalItemVariants, timelineItemVariants, timelineMarkerVariants };
+export { timelineHorizontalItemVariants, timelineItemVariants, timelineMarkerVariants };

package/dist/components/data-display/Timeline/Timeline.js

@@ -14,7 +14,7 @@ const useTimelineContext = () => {
         throw new Error("Timeline compound components must be used within <Timeline>");
     return ctx;
 };
-const TimelineRoot = React__default.forwardRef(({ children, className, layout = "vertical", align = "left", theme: themeOverrides, ...props }, ref) => {
+const TimelineRoot = React__default.forwardRef(({ children, className, layout = "vertical", theme: themeOverrides, ...props }, ref) => {
     // Merge theme with any overrides
     const theme = useMemo(() => ({
         ...timelineTheme,
@@ -29,12 +29,11 @@ const TimelineRoot = React__default.forwardRef(({ children, className, layout =
     // Context value to be provided to children
     const contextValue = useMemo(() => ({
         layout,
-        align,
         theme,
         totalItems,
-    }), [layout, align, theme, totalItems]);
+    }), [layout, theme, totalItems]);
     const isHorizontal = layout === "horizontal";
-    return (jsx(TimelineContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(isHorizontal ? theme.baseStyleHorizontal : theme.baseStyle, className), "data-layout": layout, "data-align": align, role: "list", "aria-label": "Timeline", ...props, children: children }) }));
+    return (jsx(TimelineContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(isHorizontal ? theme.baseStyleHorizontal : theme.baseStyle, className), "data-layout": layout, role: "list", "aria-label": "Timeline", ...props, children: children }) }));
 });
 TimelineRoot.displayName = "Timeline";
 // Attach compound subcomponents

package/dist/components/data-display/Timeline/Timeline.types.d.ts

@@ -3,13 +3,6 @@ import React from "react";
  * Layout orientation for the Timeline
  */
 export type TimelineLayout = "vertical" | "horizontal";
-/**
- * Alignment mode for vertical timeline items
- * - left: all items on the left side of the line
- * - right: all items on the right side of the line
- * - alternate: items alternate between left and right
- */
-export type TimelineAlign = "left" | "right" | "alternate";
 /**
  * Status of an individual timeline item
  * - completed: item is finished (success color)
@@ -41,11 +34,6 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default 'vertical'
      */
     layout?: TimelineLayout;
-    /**
-     * Alignment of items relative to the timeline line (vertical only)
-     * @default 'left'
-     */
-    align?: TimelineAlign;
     /**
      * Theme overrides for customizing styles
      */
@@ -60,7 +48,6 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export interface TimelineContextValue {
     layout: TimelineLayout;
-    align: TimelineAlign;
     theme: TimelineThemeOverrides & {
         baseStyle: string;
         baseStyleHorizontal: string;

package/dist/components/data-display/Timeline/TimelineContent.js

@@ -5,16 +5,12 @@ import { useTimelineContext } from './Timeline.js';
 import { useTimelineItemContext } from './TimelineItem.js';
 
 const TimelineContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    const { theme, layout, align } = useTimelineContext();
-    const { isLast, index } = useTimelineItemContext();
+    const { theme, layout } = useTimelineContext();
+    const { isLast } = useTimelineItemContext();
     const isHorizontal = layout === "horizontal";
-    // For alternate layout, determine text alignment
-    const isAlternateRight = align === "alternate" && index % 2 !== 0;
     return (jsx("div", { ref: ref, className: cn(isHorizontal ? theme.contentStyleHorizontal : theme.contentStyle, 
         // Remove bottom padding on last item
-        !isHorizontal && isLast && "pb-0", 
-        // Align text based on side in alternate mode
-        !isHorizontal && isAlternateRight && "text-right", !isHorizontal && align === "right" && "text-right", className), ...props, children: children }));
+        !isHorizontal && isLast && "pb-0", className), ...props, children: children }));
 });
 TimelineContent.displayName = "TimelineContent";
 

package/dist/components/data-display/Timeline/TimelineItem.js

@@ -3,7 +3,7 @@ import React__default, { createContext, useRef, useState, useEffect, useContext
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTimelineContext } from './Timeline.js';
-import { timelineHorizontalItemVariants, getDirectionalVariants, timelineItemVariants } from './Timeline.animations.js';
+import { timelineHorizontalItemVariants, timelineItemVariants } from './Timeline.animations.js';
 
 // Create context for TimelineItem
 const TimelineItemContext = createContext(undefined);
@@ -15,7 +15,7 @@ const useTimelineItemContext = () => {
     return ctx;
 };
 const TimelineItem = React__default.forwardRef(({ children, className, status = "pending", ...props }, ref) => {
-    const { layout, align, theme, totalItems } = useTimelineContext();
+    const { layout, theme, totalItems } = useTimelineContext();
     const shouldReduceMotion = useReducedMotion();
     const itemRef = useRef(null);
     const [isVisible, setIsVisible] = useState(false);
@@ -48,21 +48,12 @@ const TimelineItem = React__default.forwardRef(({ children, className, status =
     const isFirst = index === 0;
     const isLast = index === totalItems - 1;
     const isHorizontal = layout === "horizontal";
-    // Determine which side this item is on for alternate layout
-    const itemSide = align === "alternate"
-        ? index % 2 === 0
-            ? "left"
-            : "right"
-        : align;
-    // Select animation variants based on layout and alignment
+    // Select animation variants based on layout
     const getVariants = () => {
         if (shouldReduceMotion)
             return undefined;
         if (isHorizontal)
             return timelineHorizontalItemVariants;
-        if (align === "alternate") {
-            return getDirectionalVariants(itemSide);
-        }
         return timelineItemVariants;
     };
     // Context value for Marker and Content
@@ -72,14 +63,10 @@ const TimelineItem = React__default.forwardRef(({ children, className, status =
         isFirst,
         isLast,
     };
-    // Build className based on layout
-    const isAlternateRight = align === "alternate" && index % 2 !== 0;
     // Filter out conflicting motion props from rest
     const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, ...safeProps } = props;
     const variants = getVariants();
-    return (jsx(TimelineItemContext.Provider, { value: contextValue, children: jsx(motion.div, { ref: ref || itemRef, className: cn(isHorizontal ? theme.itemStyleHorizontal : theme.itemStyle, 
-            // For right-aligned or alternate-right, reverse the flex direction
-            !isHorizontal && align === "right" && "flex-row-reverse", !isHorizontal && isAlternateRight && "flex-row-reverse", className), "data-status": status, "data-side": itemSide, "data-layout": layout, role: "listitem", initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));
+    return (jsx(TimelineItemContext.Provider, { value: contextValue, children: jsx(motion.div, { ref: ref || itemRef, className: cn(isHorizontal ? theme.itemStyleHorizontal : theme.itemStyle, className), "data-status": status, "data-layout": layout, role: "listitem", initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));
 });
 TimelineItem.displayName = "TimelineItem";