@kopexa/extension-table 17.0.45 → 17.1.0

package/dist/hooks/use-table-move-row-column.d.ts

@@ -0,0 +1,101 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _kopexa_icons from '@kopexa/icons';
+import { Editor } from '@tiptap/react';
+import { Orientation } from '../lib/table-utils.js';
+import '@tiptap/pm/model';
+import '@tiptap/pm/state';
+import '@tiptap/pm/tables';
+
+type MoveDirection = "up" | "down" | "left" | "right";
+interface UseTableMoveRowColumnConfig {
+    /**
+     * The Tiptap editor instance. If omitted, the hook will use
+     * the context/editor from `useTiptapEditor`.
+     */
+    editor?: Editor | null;
+    /**
+     * The index of the row or column to move.
+     * If omitted, will use the current selection.
+     */
+    index?: number;
+    /**
+     * Whether you're moving a row or a column.
+     * If omitted, will use the current selection.
+     */
+    orientation?: Orientation;
+    /**
+     * The position of the table in the document.
+     */
+    tablePos?: number;
+    /**
+     * The direction to move (up/down for rows, left/right for columns).
+     */
+    direction: MoveDirection;
+    /**
+     * Hide the button when moving isn't currently possible.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful move.
+     */
+    onMoved?: () => void;
+}
+declare const tableMoveRowColumnIcons: {
+    up: ({ size, ...props }: _kopexa_icons.IconSvgProps) => react_jsx_runtime.JSX.Element;
+    down: ({ size, ...props }: _kopexa_icons.IconSvgProps) => react_jsx_runtime.JSX.Element;
+    left: ({ size, ...props }: _kopexa_icons.IconSvgProps) => react_jsx_runtime.JSX.Element;
+    right: ({ size, ...props }: _kopexa_icons.IconSvgProps) => react_jsx_runtime.JSX.Element;
+};
+/**
+ * Custom hook that provides **table row/column moving**
+ * functionality for the Tiptap editor.
+ *
+ * @example
+ * ```tsx
+ * // Move row up
+ * function MoveRowUpButton({ rowIndex }: { rowIndex: number }) {
+ *   const { isVisible, handleMove, canMoveRowColumn, label, Icon } = useTableMoveRowColumn({
+ *     index: rowIndex,
+ *     orientation: "row",
+ *     direction: "up",
+ *     hideWhenUnavailable: true,
+ *     onMoved: () => console.log("Row moved up!"),
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleMove}
+ *       disabled={!canMoveRowColumn}
+ *       aria-label={label}
+ *     >
+ *       <Icon /> {label}
+ *     </button>
+ *   )
+ * }
+ *
+ * // Move column based on current selection
+ * function MoveColumnButton({ direction }: { direction: "left" | "right" }) {
+ *   const { isVisible, handleMove, label } = useTableMoveRowColumn({
+ *     orientation: "column",
+ *     direction,
+ *     hideWhenUnavailable: true,
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleMove}>{label}</button>
+ * }
+ * ```
+ */
+declare function useTableMoveRowColumn(config: UseTableMoveRowColumnConfig): {
+    isVisible: boolean;
+    canMoveRowColumn: boolean;
+    handleMove: () => boolean;
+    label: string;
+    Icon: (({ size, ...props }: _kopexa_icons.IconSvgProps) => react_jsx_runtime.JSX.Element) | (({ size, ...props }: _kopexa_icons.IconSvgProps) => react_jsx_runtime.JSX.Element) | (({ size, ...props }: _kopexa_icons.IconSvgProps) => react_jsx_runtime.JSX.Element) | (({ size, ...props }: _kopexa_icons.IconSvgProps) => react_jsx_runtime.JSX.Element);
+};
+
+export { type MoveDirection, type UseTableMoveRowColumnConfig, tableMoveRowColumnIcons, useTableMoveRowColumn };