@quadrats/react 0.7.8 → 1.1.0

package/table/hooks/useTableActionsContext.d.ts

@@ -0,0 +1 @@
+export declare function useTableActionsContext(): import("../contexts/TableActionsContext").TableActionsContextType;

package/table/hooks/useTableActionsContext.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { TableActionsContext } from '../contexts/TableActionsContext.js';
+
+function useTableActionsContext() {
+    const context = useContext(TableActionsContext);
+    if (!context) {
+        throw new Error('useTableActionsContext must be used within a TableActionsContext.Provider');
+    }
+    return context;
+}
+
+export { useTableActionsContext };

package/table/hooks/useTableCell.d.ts

@@ -0,0 +1,16 @@
+import { TableElement } from '@quadrats/common/table';
+import { QuadratsReactEditor } from '@quadrats/react';
+import { AlignValue } from '@quadrats/common/align';
+/** 檢查 table cell 是否在 focused 狀態 */
+export declare function useTableCellFocused(element: TableElement, editor: QuadratsReactEditor): boolean;
+/** 取得 table cell 在 table 裡的 columnIndex 及 rowIndex */
+export declare function useTableCellPosition(element: TableElement, _editor: QuadratsReactEditor): {
+    columnIndex: number;
+    rowIndex: number;
+};
+/** 轉換 paragraph, order list, un-order list */
+export declare function useTableCellTransformContent(element: TableElement, editor: QuadratsReactEditor): (elementType: string) => void;
+/** 設定 column 或 table 的 align */
+export declare function useTableCellAlign(tableElement: TableElement, editor: QuadratsReactEditor): (alignValue: AlignValue, scope: "table" | "column", columnIndex?: number) => void;
+/** 獲取 column 或 table 的 align 狀態 */
+export declare function useTableCellAlignStatus(tableElement: TableElement, editor: QuadratsReactEditor): (scope: "table" | "column", columnIndex?: number) => AlignValue;

package/table/hooks/useTableCell.js

@@ -0,0 +1,166 @@
+import { usePreviousValue } from '@quadrats/react/utils';
+import { Editor, Range, Node, Element, Transforms, PARAGRAPH_TYPE } from '@quadrats/core';
+import { useCallback, useMemo, useEffect } from 'react';
+import { ReactEditor, useFocused } from 'slate-react';
+import { useTableStateContext } from './useTableStateContext.js';
+import { useTableMetadata } from './useTableMetadata.js';
+import { createList, LIST_TYPES } from '@quadrats/common/list';
+import { getTableStructure, collectCells, setAlignForCells, getAlignFromCells } from '../utils/helper.js';
+
+/** 檢查 table cell 是否在 focused 狀態 */
+function useTableCellFocused(element, editor) {
+    const { tableSelectedOn, setTableHoveredOn, setTableSelectedOn } = useTableStateContext();
+    const cellPath = ReactEditor.findPath(editor, element);
+    const focused = useFocused();
+    const isCellFocused = useMemo(() => {
+        if (!focused || !editor.selection || (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region))
+            return false;
+        const isSelectionCollapsed = Range.isCollapsed(editor.selection);
+        if (!isSelectionCollapsed)
+            return false;
+        const selectionPath = editor.selection.anchor.path;
+        return selectionPath.slice(0, cellPath.length).every((segment, index) => segment === cellPath[index]);
+    }, [focused, editor.selection, cellPath, tableSelectedOn]);
+    const isPreviousCellFocused = usePreviousValue(isCellFocused);
+    useEffect(() => {
+        if (isCellFocused) {
+            setTableHoveredOn(undefined);
+        }
+        if (isCellFocused && !isPreviousCellFocused) {
+            setTableSelectedOn(undefined);
+        }
+    }, [isCellFocused, isPreviousCellFocused, setTableSelectedOn, setTableHoveredOn]);
+    return isCellFocused;
+}
+/** 取得 table cell 在 table 裡的 columnIndex 及 rowIndex */
+function useTableCellPosition(element, _editor) {
+    const { cellPositions } = useTableMetadata();
+    const cellPosition = useMemo(() => {
+        const position = cellPositions.get(element);
+        if (position) {
+            return position;
+        }
+        return { columnIndex: -1, rowIndex: -1 };
+    }, [cellPositions, element]);
+    return cellPosition;
+}
+/** 轉換 paragraph, order list, un-order list */
+function useTableCellTransformContent(element, editor) {
+    const splitContentByNewlines = useCallback((cellPath) => {
+        try {
+            const cellNode = Node.get(editor, cellPath);
+            if (!Element.isElement(cellNode))
+                return false;
+            let hasChanges = false;
+            const nodesToProcess = [...cellNode.children];
+            // Process each content node in reverse order to maintain indices
+            for (let contentIndex = nodesToProcess.length - 1; contentIndex >= 0; contentIndex--) {
+                const contentNode = nodesToProcess[contentIndex];
+                if (Element.isElement(contentNode)) {
+                    const textContent = Node.string(contentNode);
+                    if (textContent.includes('\n')) {
+                        const contentPath = [...cellPath, contentIndex];
+                        // Verify the path is still valid
+                        try {
+                            const currentNode = Node.get(editor, contentPath);
+                            if (!currentNode)
+                                continue;
+                        }
+                        catch (_a) {
+                            continue;
+                        }
+                        // Split by newlines and filter out empty strings
+                        const lines = textContent.split('\n').filter((line) => line.trim() !== '');
+                        if (lines.length > 1) {
+                            hasChanges = true;
+                            // Use Editor.withoutNormalizing to batch operations
+                            Editor.withoutNormalizing(editor, () => {
+                                Transforms.removeNodes(editor, { at: contentPath });
+                                lines.forEach((line, lineIndex) => {
+                                    const newParagraph = {
+                                        type: PARAGRAPH_TYPE,
+                                        children: [{ text: line.trim() }],
+                                    };
+                                    Transforms.insertNodes(editor, newParagraph, {
+                                        at: [...cellPath, contentIndex + lineIndex],
+                                    });
+                                });
+                            });
+                        }
+                    }
+                }
+            }
+            return hasChanges;
+        }
+        catch (error) {
+            console.warn('Failed to split content by newlines:', error);
+            return false;
+        }
+    }, [editor]);
+    const transformCellContent = useCallback((elementType) => {
+        try {
+            const cellPath = ReactEditor.findPath(editor, element);
+            const listHelper = createList();
+            if (elementType === LIST_TYPES.ol || elementType === LIST_TYPES.ul) {
+                /** 將 paragraph 的換行符號轉換成 list item */
+                const wasSplit = splitContentByNewlines(cellPath);
+                if (wasSplit) {
+                    Editor.normalize(editor, { force: true });
+                }
+            }
+            // 選擇整個儲存格內容
+            const cellStartPoint = Editor.start(editor, cellPath);
+            const cellEndPoint = Editor.end(editor, cellPath);
+            Transforms.select(editor, { anchor: cellStartPoint, focus: cellEndPoint });
+            if (elementType === LIST_TYPES.ol || elementType === LIST_TYPES.ul) {
+                listHelper.toggleList(editor, elementType, PARAGRAPH_TYPE);
+            }
+            else if (elementType === PARAGRAPH_TYPE) {
+                const cellNode = Node.get(editor, cellPath);
+                if (Element.isElement(cellNode)) {
+                    const currentListElement = cellNode.children.find((child) => Element.isElement(child) && [LIST_TYPES.ol, LIST_TYPES.ul].includes(child.type));
+                    if (currentListElement && Element.isElement(currentListElement)) {
+                        listHelper.toggleList(editor, currentListElement.type, PARAGRAPH_TYPE);
+                    }
+                }
+            }
+            // 因為底層結構改變了，取消選取以避免錯誤
+            Transforms.deselect(editor);
+        }
+        catch (error) {
+            console.warn('Failed to transform cell content:', error);
+        }
+    }, [editor, element, splitContentByNewlines]);
+    return transformCellContent;
+}
+/** 設定 column 或 table 的 align */
+function useTableCellAlign(tableElement, editor) {
+    const setAlign = useCallback((alignValue, scope, columnIndex) => {
+        const tableStructure = getTableStructure(editor, tableElement);
+        if (!tableStructure) {
+            console.warn('Failed to get table structure');
+            return;
+        }
+        // 使用 helper 函數收集 cells
+        const cells = collectCells(tableStructure, scope, columnIndex);
+        // 使用 helper 函數設定 align
+        Editor.withoutNormalizing(editor, () => {
+            setAlignForCells(editor, cells, alignValue);
+        });
+    }, [editor, tableElement]);
+    return setAlign;
+}
+/** 獲取 column 或 table 的 align 狀態 */
+function useTableCellAlignStatus(tableElement, editor) {
+    const getAlign = useCallback((scope, columnIndex) => {
+        const tableStructure = getTableStructure(editor, tableElement);
+        if (!tableStructure) {
+            return 'left';
+        }
+        const cells = collectCells(tableStructure, scope, columnIndex);
+        return getAlignFromCells(cells);
+    }, [editor, tableElement]);
+    return getAlign;
+}
+
+export { useTableCellAlign, useTableCellAlignStatus, useTableCellFocused, useTableCellPosition, useTableCellTransformContent };

package/table/hooks/useTableCellToolbarActions.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TableElement } from '@quadrats/common/table';
+interface Position {
+    columnIndex: number;
+    rowIndex: number;
+}
+interface UseTableCellToolbarActionsParams {
+    element: TableElement;
+    cellPosition: Position;
+    isHeader: boolean;
+    transformCellContent: (type: string) => void;
+}
+/**
+ * 將所有與 toolbar icons 相關的邏輯集中管理
+ */
+export declare function useTableCellToolbarActions({ element, cellPosition, isHeader, transformCellContent, }: UseTableCellToolbarActionsParams): {
+    focusToolbarIconGroups: ({
+        icons: React.JSX.Element[];
+    } | {
+        icons: {
+            icon: import("@quadrats/icons").IconDefinition;
+            onClick: () => void;
+        }[];
+    })[];
+    inlineToolbarIconGroups: ({
+        icons: {
+            icon: import("@quadrats/icons").IconDefinition;
+            onClick: () => void;
+        }[];
+    } | {
+        icons: React.JSX.Element[];
+    })[];
+};
+export {};

package/table/hooks/useTableCellToolbarActions.js

@@ -0,0 +1,404 @@
+import React, { useMemo } from 'react';
+import { UnorderedList, OrderedList, Paragraph, AddRowAtBottom, AddRowAtTop, AddColumnAtLeft, AddColumnAtRight, Unpinned, Pinned, TableRemoveTitle, TableSetColumnTitle, TableSetRowTitle, AlignLeft, AlignCenter, AlignRight, Trash } from '@quadrats/icons';
+import { Element, PARAGRAPH_TYPE } from '@quadrats/core';
+import { LIST_TYPES } from '@quadrats/common/list';
+import { useTableActionsContext } from './useTableActionsContext.js';
+import { useTableMetadata } from './useTableMetadata.js';
+import { useTableStateContext } from './useTableStateContext.js';
+import { ToolbarGroupIcon, ToolbarIcon } from '@quadrats/react/toolbar';
+import { useTableCellAlign, useTableCellAlignStatus } from './useTableCell.js';
+import { useSlateStatic } from 'slate-react';
+
+/**
+ * 將所有與 toolbar icons 相關的邏輯集中管理
+ */
+function useTableCellToolbarActions({ element, cellPosition, isHeader, transformCellContent, }) {
+    const editor = useSlateStatic();
+    const { tableSelectedOn, setTableSelectedOn } = useTableStateContext();
+    const { tableElement, isReachMaximumColumns, isReachMinimumNormalColumns, isReachMinimumBodyRows, isColumnPinned, isRowPinned, } = useTableMetadata();
+    const setAlign = useTableCellAlign(tableElement, editor);
+    const getAlign = useTableCellAlignStatus(tableElement, editor);
+    const { deleteRow, deleteColumn, addRow, addColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, unpinColumn, pinRow, unpinRow, } = useTableActionsContext();
+    // 獲取當前 cell 內容的類型（用於顯示對應的 icon）
+    const getCurrentContentType = useMemo(() => {
+        // 檢查 cell 的第一個 child 的類型
+        if (element.children && element.children.length > 0) {
+            const firstChild = element.children[0];
+            if (Element.isElement(firstChild)) {
+                const childType = firstChild.type;
+                // 檢查是否為 list 類型
+                if (childType === LIST_TYPES.ul) {
+                    return LIST_TYPES.ul;
+                }
+                if (childType === LIST_TYPES.ol) {
+                    return LIST_TYPES.ol;
+                }
+                // 檢查是否為 paragraph（預設）
+                if (childType === PARAGRAPH_TYPE) {
+                    return PARAGRAPH_TYPE;
+                }
+            }
+        }
+        // 預設返回 paragraph
+        return PARAGRAPH_TYPE;
+    }, [element.children]);
+    // 根據當前內容類型選擇對應的 icon
+    const getCurrentIcon = useMemo(() => {
+        if (getCurrentContentType === LIST_TYPES.ul) {
+            return UnorderedList;
+        }
+        if (getCurrentContentType === LIST_TYPES.ol) {
+            return OrderedList;
+        }
+        return Paragraph;
+    }, [getCurrentContentType]);
+    // Focus toolbar - 當 cell 被 focus 時顯示的工具列
+    const focusToolbarIconGroups = useMemo(() => {
+        return [
+            {
+                icons: [
+                    React.createElement(ToolbarGroupIcon, { key: "typography-change", icon: getCurrentIcon },
+                        React.createElement(ToolbarIcon, { icon: Paragraph, onClick: () => {
+                                transformCellContent(PARAGRAPH_TYPE);
+                            } }),
+                        React.createElement(ToolbarIcon, { icon: UnorderedList, onClick: () => {
+                                transformCellContent(LIST_TYPES.ul);
+                            } }),
+                        React.createElement(ToolbarIcon, { icon: OrderedList, onClick: () => {
+                                transformCellContent(LIST_TYPES.ol);
+                            } })),
+                ],
+            },
+            {
+                icons: [
+                    {
+                        icon: AddRowAtBottom,
+                        onClick: () => {
+                            addRow({ position: 'bottom', rowIndex: cellPosition.rowIndex });
+                        },
+                    },
+                    {
+                        icon: AddRowAtTop,
+                        onClick: () => {
+                            addRow({ position: 'top', rowIndex: cellPosition.rowIndex });
+                        },
+                    },
+                    isReachMaximumColumns
+                        ? undefined
+                        : {
+                            icon: AddColumnAtLeft,
+                            onClick: () => {
+                                addColumn({
+                                    position: 'left',
+                                    columnIndex: cellPosition.columnIndex,
+                                });
+                            },
+                        },
+                    isReachMaximumColumns
+                        ? undefined
+                        : {
+                            icon: AddColumnAtRight,
+                            onClick: () => {
+                                addColumn({
+                                    position: 'right',
+                                    columnIndex: cellPosition.columnIndex,
+                                });
+                            },
+                        },
+                ].filter((i) => i !== undefined),
+            },
+        ];
+    }, [transformCellContent, addRow, addColumn, cellPosition, isReachMaximumColumns, getCurrentIcon]);
+    // Row actions
+    const rowActions = useMemo(() => {
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'row' || typeof tableSelectedOn.index !== 'number') {
+            return null;
+        }
+        const removeTitleAction = {
+            icon: TableRemoveTitle,
+            onClick: () => {
+                if (typeof tableSelectedOn.index === 'number') {
+                    moveRowToBody(tableSelectedOn.index);
+                    setTableSelectedOn(undefined);
+                }
+            },
+        };
+        const setColumnTitleAction = isReachMinimumBodyRows
+            ? undefined
+            : {
+                icon: TableSetColumnTitle,
+                onClick: () => {
+                    if (typeof tableSelectedOn.index === 'number') {
+                        moveRowToHeader(tableSelectedOn.index);
+                        setTableSelectedOn(undefined);
+                    }
+                },
+            };
+        const unpinnedAction = {
+            icon: Unpinned,
+            onClick: () => {
+                if (typeof tableSelectedOn.index === 'number') {
+                    unpinRow();
+                    setTableSelectedOn(undefined);
+                }
+            },
+        };
+        const pinnedAction = isReachMinimumBodyRows && !isHeader
+            ? undefined
+            : {
+                icon: Pinned,
+                onClick: () => {
+                    if (typeof tableSelectedOn.index === 'number') {
+                        pinRow(tableSelectedOn.index);
+                        setTableSelectedOn(undefined);
+                    }
+                },
+            };
+        const actions = [];
+        const rowIsPinned = isRowPinned(tableSelectedOn.index);
+        if (rowIsPinned) {
+            actions.push(unpinnedAction);
+        }
+        else {
+            if (pinnedAction)
+                actions.push(pinnedAction);
+        }
+        if (isHeader) {
+            actions.push(removeTitleAction);
+        }
+        else {
+            if (setColumnTitleAction)
+                actions.push(setColumnTitleAction);
+        }
+        return actions;
+    }, [
+        tableSelectedOn,
+        moveRowToBody,
+        moveRowToHeader,
+        unpinRow,
+        pinRow,
+        setTableSelectedOn,
+        isReachMinimumBodyRows,
+        isHeader,
+        isRowPinned,
+    ]);
+    // Column actions
+    const columnActions = useMemo(() => {
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
+            return null;
+        }
+        const removeTitleAction = {
+            icon: TableRemoveTitle,
+            onClick: () => {
+                if (typeof tableSelectedOn.index === 'number') {
+                    unsetColumnAsTitle(tableSelectedOn.index);
+                    setTableSelectedOn(undefined);
+                }
+            },
+        };
+        const setRowTitleAction = isReachMinimumNormalColumns
+            ? undefined
+            : {
+                icon: TableSetRowTitle,
+                onClick: () => {
+                    if (typeof tableSelectedOn.index === 'number') {
+                        setColumnAsTitle(tableSelectedOn.index);
+                        setTableSelectedOn(undefined);
+                    }
+                },
+            };
+        const unpinnedAction = {
+            icon: Unpinned,
+            onClick: () => {
+                if (typeof tableSelectedOn.index === 'number') {
+                    unpinColumn();
+                    setTableSelectedOn(undefined);
+                }
+            },
+        };
+        const pinnedAction = isReachMinimumNormalColumns && !element.treatAsTitle
+            ? undefined
+            : {
+                icon: Pinned,
+                onClick: () => {
+                    if (typeof tableSelectedOn.index === 'number') {
+                        pinColumn(tableSelectedOn.index);
+                        setTableSelectedOn(undefined);
+                    }
+                },
+            };
+        const actions = [];
+        const columnIsPinned = isColumnPinned(tableSelectedOn.index);
+        if (columnIsPinned) {
+            actions.push(unpinnedAction);
+        }
+        else {
+            if (pinnedAction)
+                actions.push(pinnedAction);
+        }
+        if (element.treatAsTitle) {
+            actions.push(removeTitleAction);
+        }
+        else {
+            if (setRowTitleAction)
+                actions.push(setRowTitleAction);
+        }
+        return actions;
+    }, [
+        tableSelectedOn,
+        unsetColumnAsTitle,
+        setColumnAsTitle,
+        unpinColumn,
+        pinColumn,
+        setTableSelectedOn,
+        isReachMinimumNormalColumns,
+        element.treatAsTitle,
+        isColumnPinned,
+    ]);
+    // Column align actions
+    const columnAlignActions = useMemo(() => {
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
+            return null;
+        }
+        // 獲取當前 column 的 align 狀態
+        const currentAlign = getAlign('column', tableSelectedOn.index);
+        // 根據當前 align 狀態選擇對應的 icon
+        const getCurrentAlignIcon = () => {
+            switch (currentAlign) {
+                case 'left':
+                    return AlignLeft;
+                case 'center':
+                    return AlignCenter;
+                case 'right':
+                    return AlignRight;
+                default:
+                    return AlignLeft;
+            }
+        };
+        return [
+            React.createElement(ToolbarGroupIcon, { key: "align-change", icon: getCurrentAlignIcon() },
+                React.createElement(ToolbarIcon, { icon: AlignLeft, onClick: () => {
+                        if (typeof tableSelectedOn.index === 'number') {
+                            setAlign('left', 'column', tableSelectedOn.index);
+                            setTableSelectedOn(undefined);
+                        }
+                    } }),
+                React.createElement(ToolbarIcon, { icon: AlignCenter, onClick: () => {
+                        if (typeof tableSelectedOn.index === 'number') {
+                            setAlign('center', 'column', tableSelectedOn.index);
+                            setTableSelectedOn(undefined);
+                        }
+                    } }),
+                React.createElement(ToolbarIcon, { icon: AlignRight, onClick: () => {
+                        if (typeof tableSelectedOn.index === 'number') {
+                            setAlign('right', 'column', tableSelectedOn.index);
+                            setTableSelectedOn(undefined);
+                        }
+                    } })),
+        ];
+    }, [tableSelectedOn, setAlign, setTableSelectedOn, getAlign]);
+    // Row add actions
+    const rowAddActions = useMemo(() => {
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'row' || typeof tableSelectedOn.index !== 'number') {
+            return null;
+        }
+        return [
+            {
+                icon: AddRowAtBottom,
+                onClick: () => {
+                    if (typeof tableSelectedOn.index === 'number') {
+                        addRow({ position: 'bottom', rowIndex: tableSelectedOn.index });
+                        setTableSelectedOn(undefined);
+                    }
+                },
+            },
+            {
+                icon: AddRowAtTop,
+                onClick: () => {
+                    if (typeof tableSelectedOn.index === 'number') {
+                        addRow({ position: 'top', rowIndex: tableSelectedOn.index });
+                        setTableSelectedOn(undefined);
+                    }
+                },
+            },
+        ];
+    }, [tableSelectedOn, addRow, setTableSelectedOn]);
+    // Column add actions
+    const columnAddActions = useMemo(() => {
+        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
+            return null;
+        }
+        return [
+            isReachMaximumColumns
+                ? undefined
+                : {
+                    icon: AddColumnAtLeft,
+                    onClick: () => {
+                        if (typeof tableSelectedOn.index === 'number') {
+                            addColumn({
+                                position: 'left',
+                                columnIndex: tableSelectedOn.index,
+                            });
+                            setTableSelectedOn(undefined);
+                        }
+                    },
+                },
+            isReachMaximumColumns
+                ? undefined
+                : {
+                    icon: AddColumnAtRight,
+                    onClick: () => {
+                        if (typeof tableSelectedOn.index === 'number') {
+                            addColumn({
+                                position: 'right',
+                                columnIndex: tableSelectedOn.index,
+                            });
+                            setTableSelectedOn(undefined);
+                        }
+                    },
+                },
+        ].filter((i) => i !== undefined);
+    }, [tableSelectedOn, addColumn, setTableSelectedOn, isReachMaximumColumns]);
+    // Delete actions
+    const deleteActions = useMemo(() => {
+        return [
+            {
+                icon: Trash,
+                className: 'qdr-table__delete',
+                onClick: () => {
+                    if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && typeof tableSelectedOn.index === 'number') {
+                        deleteRow(tableSelectedOn.index);
+                        setTableSelectedOn(undefined);
+                    }
+                    else if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && typeof tableSelectedOn.index === 'number') {
+                        deleteColumn(tableSelectedOn.index);
+                        setTableSelectedOn(undefined);
+                    }
+                },
+            },
+        ];
+    }, [tableSelectedOn, deleteRow, deleteColumn, setTableSelectedOn]);
+    // Inline toolbar icon groups - 當選中行/列時顯示的完整工具列
+    const inlineToolbarIconGroups = useMemo(() => {
+        return [
+            {
+                icons: rowActions || columnActions || [],
+            },
+            {
+                icons: columnAlignActions || [],
+            },
+            {
+                icons: rowAddActions || columnAddActions || [],
+            },
+            {
+                icons: deleteActions,
+            },
+        ];
+    }, [rowActions, columnActions, columnAlignActions, rowAddActions, columnAddActions, deleteActions]);
+    return {
+        focusToolbarIconGroups,
+        inlineToolbarIconGroups,
+    };
+}
+
+export { useTableCellToolbarActions };

package/table/hooks/useTableMetadata.d.ts

@@ -0,0 +1 @@
+export declare function useTableMetadata(): import("../contexts/TableMetadataContext").TableMetadataContextType;

package/table/hooks/useTableMetadata.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { TableMetadataContext } from '../contexts/TableMetadataContext.js';
+
+function useTableMetadata() {
+    const context = useContext(TableMetadataContext);
+    if (!context) {
+        throw new Error('useTableMetadata must be used within a TableMetadataContext.Provider');
+    }
+    return context;
+}
+
+export { useTableMetadata };

package/table/hooks/useTableStateContext.d.ts

@@ -0,0 +1 @@
+export declare function useTableStateContext(): import("../contexts/TableStateContext").TableStateContextType;

package/table/hooks/useTableStateContext.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { TableStateContext } from '../contexts/TableStateContext.js';
+
+function useTableStateContext() {
+    const context = useContext(TableStateContext);
+    if (!context) {
+        throw new Error('useTableState must be used within a TableStateContext.Provider');
+    }
+    return context;
+}
+
+export { useTableStateContext };