@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/DataTable/grid/GridFillHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridFillHandle.js","sources":["../../../../../src/components/UI/DataTable/grid/GridFillHandle.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\n\nimport { useGridCellRegistry, useGridStoreApi } from './GridProvider';\nimport { GRID_CELL_DATA_ATTR, GRID_COLUMN_DATA_ATTR, GRID_ROW_DATA_ATTR } from './gridTypes';\n\n/**\n * The small square at the bottom-right of the selection. It drives the drag with\n * pointer capture, so every move event is delivered to this element and the grid\n * needs no document-level pointer listeners.\n */\nconst GridFillHandle: React.FC = () => {\n  const { t } = useTranslation('ui');\n  const store = useGridStoreApi();\n  const registry = useGridCellRegistry();\n  const [isDragging, setIsDragging] = useState(false);\n\n  useEffect(() => {\n    if (!isDragging || !store) return undefined;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n      store.getState().cancelFill();\n      setIsDragging(false);\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [isDragging, store]);\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    if (!store) return;\n    event.preventDefault();\n    event.stopPropagation();\n    event.currentTarget.setPointerCapture(event.pointerId);\n    store.getState().startFill();\n    setIsDragging(true);\n  };\n\n  const handlePointerMove = (event: React.PointerEvent<HTMLButtonElement>) => {\n    if (!store || !store.getState().fillSourceRect) return;\n\n    const elementUnderPointer = document.elementFromPoint(event.clientX, event.clientY);\n    const cell = elementUnderPointer?.closest(`[${GRID_CELL_DATA_ATTR}]`);\n    const rowId = cell?.getAttribute(GRID_ROW_DATA_ATTR);\n    const columnId = cell?.getAttribute(GRID_COLUMN_DATA_ATTR);\n    if (!rowId || !columnId) return;\n\n    store.getState().updateFillTarget({ rowId, columnId });\n  };\n\n  const handlePointerUp = (event: React.PointerEvent<HTMLButtonElement>) => {\n    setIsDragging(false);\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n    if (!store) return;\n\n    const result = store.getState().endFill();\n    if (result) registry?.commitFill(result);\n  };\n\n  return (\n    <ControlledTooltip content={t('dataTable.fillHandle')}>\n      <ControlledButton\n        defaultHtmlButton\n        // Out of the tab order on purpose: the handle is a pointer affordance, and\n        // the keyboard reaches the same result by editing the cells directly.\n        tabIndex={-1}\n        // The cell below listens to `mousedown` to move the active cell. Preventing\n        // the pointer event does not always suppress that compatibility event, and\n        // letting it through would collapse the range the drag is about to read.\n        onMouseDown={(event) => event.stopPropagation()}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={() => {\n          setIsDragging(false);\n          store?.getState().cancelFill();\n        }}\n        className=\"absolute bottom-0 right-0 z-30 size-2 cursor-crosshair rounded-[0.125rem] bg-brand\"\n      >\n        {null}\n      </ControlledButton>\n    </ControlledTooltip>\n  );\n};\n\nexport default GridFillHandle;\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,iBAA2B,MAAM;AACrC,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,QAAQ,gBAAA;AACd,QAAM,WAAW,oBAAA;AACjB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,YAAU,MAAM;AACd,QAAI,CAAC,cAAc,CAAC,MAAO,QAAO;AAElC,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,SAAU;AAC5B,YAAM,SAAA,EAAW,WAAA;AACjB,oBAAc,KAAK;AAAA,IACrB;AAEA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EAClE,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,oBAAoB,CAAC,UAAiD;AAC1E,QAAI,CAAC,MAAO;AACZ,UAAM,eAAA;AACN,UAAM,gBAAA;AACN,UAAM,cAAc,kBAAkB,MAAM,SAAS;AACrD,UAAM,SAAA,EAAW,UAAA;AACjB,kBAAc,IAAI;AAAA,EACpB;AAEA,QAAM,oBAAoB,CAAC,UAAiD;AAC1E,QAAI,CAAC,SAAS,CAAC,MAAM,SAAA,EAAW,eAAgB;AAEhD,UAAM,sBAAsB,SAAS,iBAAiB,MAAM,SAAS,MAAM,OAAO;AAClF,UAAM,OAAO,qBAAqB,QAAQ,IAAI,mBAAmB,GAAG;AACpE,UAAM,QAAQ,MAAM,aAAa,kBAAkB;AACnD,UAAM,WAAW,MAAM,aAAa,qBAAqB;AACzD,QAAI,CAAC,SAAS,CAAC,SAAU;AAEzB,UAAM,WAAW,iBAAiB,EAAE,OAAO,UAAU;AAAA,EACvD;AAEA,QAAM,kBAAkB,CAAC,UAAiD;AACxE,kBAAc,KAAK;AACnB,QAAI,MAAM,cAAc,kBAAkB,MAAM,SAAS,GAAG;AAC1D,YAAM,cAAc,sBAAsB,MAAM,SAAS;AAAA,IAC3D;AACA,QAAI,CAAC,MAAO;AAEZ,UAAM,SAAS,MAAM,SAAA,EAAW,QAAA;AAChC,QAAI,OAAQ,WAAU,WAAW,MAAM;AAAA,EACzC;AAEA,SACE,oBAAC,mBAAA,EAAkB,SAAS,EAAE,sBAAsB,GAClD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAiB;AAAA,MAGjB,UAAU;AAAA,MAIV,aAAa,CAAC,UAAU,MAAM,gBAAA;AAAA,MAC9B,eAAe;AAAA,MACf,eAAe;AAAA,MACf,aAAa;AAAA,MACb,iBAAiB,MAAM;AACrB,sBAAc,KAAK;AACnB,eAAO,SAAA,EAAW,WAAA;AAAA,MACpB;AAAA,MACA,WAAU;AAAA,MAET,UAAA;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

package/dist/components/UI/DataTable/grid/GridProvider.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { StoreApi } from 'zustand/vanilla';
+import { IGridFillResult, IGridState } from './gridStore';
+import { IGridCellCoord } from './gridTypes';
+export interface IGridCellRegistry {
+    register: (cellKey: string, element: HTMLElement | null) => void;
+    focusCell: (coord: IGridCellCoord) => void;
+    /** Whether a click on this cell opens its editor. */
+    canEditCell: (coord: IGridCellCoord) => boolean;
+    /** Hands a finished fill drag to the host table, which owns the row data. */
+    commitFill: (result: IGridFillResult) => void;
+}
+/** The grid store of the closest spreadsheet-enabled table, or `null` outside one. */
+export declare const useGridStoreApi: () => StoreApi<IGridState> | null;
+export declare const useGridCellRegistry: () => IGridCellRegistry | null;
+/**
+ * Per-cell subscription to the grid state, as a bitmask. Reading a primitive
+ * through `useSyncExternalStore` means moving the active cell re-renders the two
+ * cells that changed, never the table.
+ */
+export declare const useGridCellState: (rowId: string, columnId: string) => number;
+interface IGridProviderProps {
+    store: StoreApi<IGridState>;
+    /** The scroll region that holds the table: a press outside it releases the active cell. */
+    gridAreaRef?: React.RefObject<HTMLElement | null>;
+    canEditCell: (coord: IGridCellCoord) => boolean;
+    onFillCommit?: (result: IGridFillResult) => void;
+    children: React.ReactNode;
+}
+/**
+ * Owns the DOM side of the grid: the cell element registry and the focus/scroll
+ * effect. It subscribes imperatively, so following the active cell costs no
+ * render of its own.
+ */
+declare const GridProvider: React.FC<IGridProviderProps>;
+export default GridProvider;

package/dist/components/UI/DataTable/grid/GridProvider.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useRef, useMemo, useEffect, useContext, useCallback, useSyncExternalStore } from "react";
+import { LAYERED_SURFACE_SELECTOR, isPressOnLayeredSurface } from "../../../../helpers/layeredSurfaces.js";
+import { selectGridCellState } from "./gridStore.js";
+import { buildGridCellKey } from "./gridTypes.js";
+const GridStoreContext = createContext(null);
+const GridCellRegistryContext = createContext(null);
+const useGridStoreApi = () => useContext(GridStoreContext);
+const useGridCellRegistry = () => useContext(GridCellRegistryContext);
+const useGridCellState = (rowId, columnId) => {
+  const store = useGridStoreApi();
+  const subscribe = useCallback(
+    (onStoreChange) => store ? store.subscribe(onStoreChange) : () => void 0,
+    [store]
+  );
+  const getSnapshot = useCallback(
+    () => store ? selectGridCellState(store.getState(), rowId, columnId) : 0,
+    [store, rowId, columnId]
+  );
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
+const EDITOR_FOCUS_SELECTOR = 'input, textarea, select, [contenteditable="true"], button, [tabindex]';
+const isPickerTrigger = (element) => element instanceof HTMLInputElement && element.readOnly;
+const isTextField = (element) => element instanceof HTMLInputElement && !element.readOnly || element instanceof HTMLTextAreaElement;
+const placeCaretAtEnd = (field) => {
+  try {
+    const end = field.value.length;
+    field.setSelectionRange(end, end);
+  } catch {
+  }
+};
+const GridEditingFocus = ({
+  store,
+  elements
+}) => {
+  const editingKey = useSyncExternalStore(
+    useCallback((onStoreChange) => store.subscribe(onStoreChange), [store]),
+    () => {
+      const editing = store.getState().editingCell;
+      return editing ? buildGridCellKey(editing.rowId, editing.columnId) : null;
+    }
+  );
+  useEffect(() => {
+    if (!editingKey) return;
+    const editor = elements.get(editingKey)?.querySelector(EDITOR_FOCUS_SELECTOR);
+    if (!editor) return;
+    editor.focus({ preventScroll: true });
+    const { editingEntry, editingSeed } = store.getState();
+    if (isPickerTrigger(editor)) {
+      if (editingEntry !== "keyboard") editor.click();
+      return;
+    }
+    if (!isTextField(editor)) return;
+    if (editingEntry === "keyboard" && editingSeed == null) editor.select();
+    else placeCaretAtEnd(editor);
+  }, [editingKey, elements, store]);
+  return null;
+};
+const isPressAboveGrid = (target, gridArea) => {
+  const hostSurface = gridArea?.closest(LAYERED_SURFACE_SELECTOR) ?? null;
+  if (hostSurface) return isPressOnLayeredSurface(target, hostSurface);
+  return isPressOnLayeredSurface(target) || Boolean(target.closest(LAYERED_SURFACE_SELECTOR));
+};
+const GridProvider = ({ store, gridAreaRef, canEditCell, onFillCommit, children }) => {
+  const elementsRef = useRef(/* @__PURE__ */ new Map());
+  const onFillCommitRef = useRef(onFillCommit);
+  onFillCommitRef.current = onFillCommit;
+  const canEditCellRef = useRef(canEditCell);
+  canEditCellRef.current = canEditCell;
+  const registry = useMemo(
+    () => ({
+      commitFill: (result) => onFillCommitRef.current?.(result),
+      canEditCell: (coord) => canEditCellRef.current(coord),
+      register: (cellKey, element) => {
+        if (element) elementsRef.current.set(cellKey, element);
+        else elementsRef.current.delete(cellKey);
+      },
+      focusCell: (coord) => {
+        const element = elementsRef.current.get(buildGridCellKey(coord.rowId, coord.columnId));
+        if (!element) return;
+        element.focus({ preventScroll: true });
+        element.scrollIntoView({ block: "nearest", inline: "nearest" });
+      }
+    }),
+    []
+  );
+  useEffect(
+    () => store.subscribe((state, previous) => {
+      const activeChanged = state.activeCell?.rowId !== previous.activeCell?.rowId || state.activeCell?.columnId !== previous.activeCell?.columnId;
+      const editingEnded = !!previous.editingCell && !state.editingCell;
+      if (!activeChanged && !editingEnded) return;
+      if (state.editingCell) return;
+      const coord = state.activeCell;
+      if (!coord) return;
+      const element = elementsRef.current.get(buildGridCellKey(coord.rowId, coord.columnId));
+      if (!element) return;
+      if (editingEnded || !element.contains(document.activeElement)) element.focus({ preventScroll: true });
+      element.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }),
+    [store]
+  );
+  useEffect(() => {
+    const handlePointerDown = (event) => {
+      const { activeCell, editingCell } = store.getState();
+      if (!activeCell && !editingCell) return;
+      const target = event.target instanceof Element ? event.target : null;
+      if (!target) return;
+      const gridArea = gridAreaRef?.current ?? null;
+      if (gridArea?.contains(target) || isPressAboveGrid(target, gridArea)) return;
+      const focused = document.activeElement;
+      if (focused instanceof HTMLElement && gridArea?.contains(focused)) focused.blur();
+      store.getState().releaseActiveCell();
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [store, gridAreaRef]);
+  return /* @__PURE__ */ jsx(GridStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsxs(GridCellRegistryContext.Provider, { value: registry, children: [
+    /* @__PURE__ */ jsx(GridEditingFocus, { store, elements: elementsRef.current }),
+    children
+  ] }) });
+};
+export {
+  GridProvider as default,
+  useGridCellRegistry,
+  useGridCellState,
+  useGridStoreApi
+};
+//# sourceMappingURL=GridProvider.js.map

package/dist/components/UI/DataTable/grid/GridProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridProvider.js","sources":["../../../../../src/components/UI/DataTable/grid/GridProvider.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';\nimport { type StoreApi } from 'zustand/vanilla';\n\nimport { isPressOnLayeredSurface, LAYERED_SURFACE_SELECTOR } from '@/helpers/layeredSurfaces';\n\nimport { type IGridFillResult, type IGridState, selectGridCellState } from './gridStore';\nimport { buildGridCellKey, type IGridCellCoord } from './gridTypes';\n\nexport interface IGridCellRegistry {\n  register: (cellKey: string, element: HTMLElement | null) => void;\n  focusCell: (coord: IGridCellCoord) => void;\n  /** Whether a click on this cell opens its editor. */\n  canEditCell: (coord: IGridCellCoord) => boolean;\n  /** Hands a finished fill drag to the host table, which owns the row data. */\n  commitFill: (result: IGridFillResult) => void;\n}\n\nconst GridStoreContext = createContext<StoreApi<IGridState> | null>(null);\nconst GridCellRegistryContext = createContext<IGridCellRegistry | null>(null);\n\n/** The grid store of the closest spreadsheet-enabled table, or `null` outside one. */\nexport const useGridStoreApi = (): StoreApi<IGridState> | null => useContext(GridStoreContext);\n\nexport const useGridCellRegistry = (): IGridCellRegistry | null => useContext(GridCellRegistryContext);\n\n/**\n * Per-cell subscription to the grid state, as a bitmask. Reading a primitive\n * through `useSyncExternalStore` means moving the active cell re-renders the two\n * cells that changed, never the table.\n */\nexport const useGridCellState = (rowId: string, columnId: string): number => {\n  const store = useGridStoreApi();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => (store ? store.subscribe(onStoreChange) : () => undefined),\n    [store],\n  );\n\n  const getSnapshot = useCallback(\n    () => (store ? selectGridCellState(store.getState(), rowId, columnId) : 0),\n    [store, rowId, columnId],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n\nconst EDITOR_FOCUS_SELECTOR = 'input, textarea, select, [contenteditable=\"true\"], button, [tabindex]';\n\n/** Select and date editors render a read-only input that opens their popup on click. */\nconst isPickerTrigger = (element: HTMLElement): boolean => element instanceof HTMLInputElement && element.readOnly;\n\nconst isTextField = (element: HTMLElement): element is HTMLInputElement | HTMLTextAreaElement =>\n  (element instanceof HTMLInputElement && !element.readOnly) || element instanceof HTMLTextAreaElement;\n\nconst placeCaretAtEnd = (field: HTMLInputElement | HTMLTextAreaElement): void => {\n  // `setSelectionRange` throws on input types without a caret (email, number).\n  try {\n    const end = field.value.length;\n    field.setSelectionRange(end, end);\n  } catch {\n    // The browser already put the caret somewhere usable.\n  }\n};\n\n/**\n * Moves the focus into the editor once React has actually mounted it. The store\n * subscription cannot do this: it runs during the state update, before the cell\n * has swapped its read view for the editor.\n */\nconst GridEditingFocus: React.FC<{ store: StoreApi<IGridState>; elements: Map<string, HTMLElement> }> = ({\n  store,\n  elements,\n}) => {\n  const editingKey = useSyncExternalStore(\n    useCallback((onStoreChange: () => void) => store.subscribe(onStoreChange), [store]),\n    () => {\n      const editing = store.getState().editingCell;\n      return editing ? buildGridCellKey(editing.rowId, editing.columnId) : null;\n    },\n  );\n\n  useEffect(() => {\n    if (!editingKey) return;\n\n    const editor = elements.get(editingKey)?.querySelector<HTMLElement>(EDITOR_FOCUS_SELECTOR);\n    if (!editor) return;\n\n    editor.focus({ preventScroll: true });\n\n    const { editingEntry, editingSeed } = store.getState();\n\n    if (isPickerTrigger(editor)) {\n      if (editingEntry !== 'keyboard') editor.click();\n      return;\n    }\n\n    if (!isTextField(editor)) return;\n\n    if (editingEntry === 'keyboard' && editingSeed == null) editor.select();\n    else placeCaretAtEnd(editor);\n  }, [editingKey, elements, store]);\n\n  return null;\n};\n\n/**\n * Whether a press outside the grid area belongs to something painted above the table (a select\n * listbox, a date picker, a toast), which is work on the open cell rather than leaving it. Inside\n * a drawer or dialog the comparison is directional, otherwise any press on that host surface would\n * count as layered and the grid would never let go.\n */\nconst isPressAboveGrid = (target: Element, gridArea: Element | null): boolean => {\n  const hostSurface = gridArea?.closest(LAYERED_SURFACE_SELECTOR) ?? null;\n  if (hostSurface) return isPressOnLayeredSurface(target, hostSurface);\n  return isPressOnLayeredSurface(target) || Boolean(target.closest(LAYERED_SURFACE_SELECTOR));\n};\n\ninterface IGridProviderProps {\n  store: StoreApi<IGridState>;\n  /** The scroll region that holds the table: a press outside it releases the active cell. */\n  gridAreaRef?: React.RefObject<HTMLElement | null>;\n  canEditCell: (coord: IGridCellCoord) => boolean;\n  onFillCommit?: (result: IGridFillResult) => void;\n  children: React.ReactNode;\n}\n\n/**\n * Owns the DOM side of the grid: the cell element registry and the focus/scroll\n * effect. It subscribes imperatively, so following the active cell costs no\n * render of its own.\n */\nconst GridProvider: React.FC<IGridProviderProps> = ({ store, gridAreaRef, canEditCell, onFillCommit, children }) => {\n  const elementsRef = useRef(new Map<string, HTMLElement>());\n\n  // Read through a ref so the registry identity never changes: it reaches every\n  // cell, and a new object there would re-render the whole body.\n  const onFillCommitRef = useRef(onFillCommit);\n  onFillCommitRef.current = onFillCommit;\n  const canEditCellRef = useRef(canEditCell);\n  canEditCellRef.current = canEditCell;\n\n  const registry = useMemo<IGridCellRegistry>(\n    () => ({\n      commitFill: (result) => onFillCommitRef.current?.(result),\n      canEditCell: (coord) => canEditCellRef.current(coord),\n      register: (cellKey, element) => {\n        if (element) elementsRef.current.set(cellKey, element);\n        else elementsRef.current.delete(cellKey);\n      },\n      focusCell: (coord) => {\n        const element = elementsRef.current.get(buildGridCellKey(coord.rowId, coord.columnId));\n        if (!element) return;\n        element.focus({ preventScroll: true });\n        element.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n      },\n    }),\n    [],\n  );\n\n  useEffect(\n    () =>\n      store.subscribe((state, previous) => {\n        const activeChanged =\n          state.activeCell?.rowId !== previous.activeCell?.rowId ||\n          state.activeCell?.columnId !== previous.activeCell?.columnId;\n        const editingEnded = !!previous.editingCell && !state.editingCell;\n\n        if (!activeChanged && !editingEnded) return;\n        if (state.editingCell) return;\n\n        const coord = state.activeCell;\n        if (!coord) return;\n\n        const element = elementsRef.current.get(buildGridCellKey(coord.rowId, coord.columnId));\n        if (!element) return;\n\n        // Leaving edit mode has to claim the focus BEFORE the editor unmounts,\n        // otherwise the browser drops it on the body and the arrows stop working.\n        if (editingEnded || !element.contains(document.activeElement)) element.focus({ preventScroll: true });\n\n        element.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n      }),\n    [store],\n  );\n\n  // Without this only another cell took the focus away: a press anywhere else on the page left\n  // the editor open and the cell outlined, and a field outside the table lost its focus back to it.\n  useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      const { activeCell, editingCell } = store.getState();\n      if (!activeCell && !editingCell) return;\n\n      const target = event.target instanceof Element ? event.target : null;\n      if (!target) return;\n\n      const gridArea = gridAreaRef?.current ?? null;\n      if (gridArea?.contains(target) || isPressAboveGrid(target, gridArea)) return;\n\n      // Editors that save on blur have to commit before the store unmounts them.\n      const focused = document.activeElement;\n      if (focused instanceof HTMLElement && gridArea?.contains(focused)) focused.blur();\n\n      store.getState().releaseActiveCell();\n    };\n\n    document.addEventListener('pointerdown', handlePointerDown);\n    return () => document.removeEventListener('pointerdown', handlePointerDown);\n  }, [store, gridAreaRef]);\n\n  return (\n    <GridStoreContext.Provider value={store}>\n      <GridCellRegistryContext.Provider value={registry}>\n        <GridEditingFocus store={store} elements={elementsRef.current} />\n        {children}\n      </GridCellRegistryContext.Provider>\n    </GridStoreContext.Provider>\n  );\n};\n\nexport default GridProvider;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/grid/fill/fillStrategies.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A fill strategy reads the dragged source values and produces the value for each
+ * position beyond them. Adding a pattern (weekdays, month steps, text with a
+ * trailing counter) is one entry in `GRID_FILL_STRATEGIES`, and no other file in
+ * the grid changes.
+ */
+export interface IGridFillStrategy {
+    id: string;
+    /** Whether this strategy recognizes the source values as its own pattern. */
+    detect: (values: Array<unknown>) => boolean;
+    /**
+     * Value for the target at `offset` (1 = the first cell after the source, in the
+     * drag direction). `direction` is 1 downwards and -1 upwards.
+     */
+    generate: (values: Array<unknown>, offset: number, direction: 1 | -1) => unknown;
+}
+/** Order matters: the first strategy that recognizes the source wins. */
+export declare const GRID_FILL_STRATEGIES: Array<IGridFillStrategy>;
+export declare const resolveFillStrategy: (values: Array<unknown>, preferredId?: string) => IGridFillStrategy;

package/dist/components/UI/DataTable/grid/fill/fillStrategies.js

@@ -0,0 +1,73 @@
+const toFiniteNumber = (value) => {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value !== "string" || value.trim() === "") return null;
+  const parsed = Number(value.replace(",", "."));
+  return Number.isFinite(parsed) ? parsed : null;
+};
+const toValidDate = (value) => {
+  if (typeof value !== "string" && !(value instanceof Date)) return null;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+const DAY_IN_MS = 24 * 60 * 60 * 1e3;
+const constantStrategy = {
+  id: "constant",
+  detect: () => true,
+  generate: (values, offset) => {
+    if (values.length === 0) return null;
+    if (values.length === 1) return values[0];
+    const index = (offset - 1) % values.length;
+    return values[index];
+  }
+};
+const numericSeriesStrategy = {
+  id: "numericSeries",
+  detect: (values) => {
+    if (values.length < 2) return false;
+    const numbers = values.map(toFiniteNumber);
+    if (numbers.some((entry) => entry == null)) return false;
+    const step = numbers[1] - numbers[0];
+    return numbers.every((entry, index) => index === 0 || entry - numbers[index - 1] === step);
+  },
+  generate: (values, offset, direction) => {
+    const numbers = values.map(toFiniteNumber);
+    const step = numbers[1] - numbers[0];
+    const anchor = direction === 1 ? numbers[numbers.length - 1] : numbers[0];
+    return anchor + step * offset * direction;
+  }
+};
+const dateSeriesStrategy = {
+  id: "dateSeries",
+  detect: (values) => {
+    if (values.length < 2) return false;
+    const dates = values.map(toValidDate);
+    if (dates.some((entry) => entry == null)) return false;
+    const step = dates[1].getTime() - dates[0].getTime();
+    if (step === 0 || step % DAY_IN_MS !== 0) return false;
+    return dates.every(
+      (entry, index) => index === 0 || entry.getTime() - dates[index - 1].getTime() === step
+    );
+  },
+  generate: (values, offset, direction) => {
+    const dates = values.map(toValidDate);
+    const step = dates[1].getTime() - dates[0].getTime();
+    const anchor = direction === 1 ? dates[dates.length - 1] : dates[0];
+    const next = new Date(anchor.getTime() + step * offset * direction);
+    return next.toISOString();
+  }
+};
+const GRID_FILL_STRATEGIES = [
+  dateSeriesStrategy,
+  numericSeriesStrategy,
+  constantStrategy
+];
+const resolveFillStrategy = (values, preferredId) => {
+  const preferred = preferredId ? GRID_FILL_STRATEGIES.find((strategy) => strategy.id === preferredId) : void 0;
+  if (preferred) return preferred;
+  return GRID_FILL_STRATEGIES.find((strategy) => strategy.detect(values)) ?? constantStrategy;
+};
+export {
+  GRID_FILL_STRATEGIES,
+  resolveFillStrategy
+};
+//# sourceMappingURL=fillStrategies.js.map

package/dist/components/UI/DataTable/grid/fill/fillStrategies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fillStrategies.js","sources":["../../../../../../src/components/UI/DataTable/grid/fill/fillStrategies.ts"],"sourcesContent":["/**\n * A fill strategy reads the dragged source values and produces the value for each\n * position beyond them. Adding a pattern (weekdays, month steps, text with a\n * trailing counter) is one entry in `GRID_FILL_STRATEGIES`, and no other file in\n * the grid changes.\n */\nexport interface IGridFillStrategy {\n  id: string;\n  /** Whether this strategy recognizes the source values as its own pattern. */\n  detect: (values: Array<unknown>) => boolean;\n  /**\n   * Value for the target at `offset` (1 = the first cell after the source, in the\n   * drag direction). `direction` is 1 downwards and -1 upwards.\n   */\n  generate: (values: Array<unknown>, offset: number, direction: 1 | -1) => unknown;\n}\n\nconst toFiniteNumber = (value: unknown): number | null => {\n  if (typeof value === 'number') return Number.isFinite(value) ? value : null;\n  if (typeof value !== 'string' || value.trim() === '') return null;\n\n  // pt-BR decimals reach the cell as \"1,5\"; the editors keep the raw string.\n  const parsed = Number(value.replace(',', '.'));\n  return Number.isFinite(parsed) ? parsed : null;\n};\n\nconst toValidDate = (value: unknown): Date | null => {\n  if (typeof value !== 'string' && !(value instanceof Date)) return null;\n\n  const date = value instanceof Date ? value : new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n};\n\nconst DAY_IN_MS = 24 * 60 * 60 * 1000;\n\n/** Repeats the source cyclically. The fallback, and what a single source cell does. */\nconst constantStrategy: IGridFillStrategy = {\n  id: 'constant',\n  detect: () => true,\n  generate: (values, offset) => {\n    if (values.length === 0) return null;\n    if (values.length === 1) return values[0];\n\n    const index = (offset - 1) % values.length;\n    return values[index];\n  },\n};\n\n/** Two or more numbers with a constant step continue the progression. */\nconst numericSeriesStrategy: IGridFillStrategy = {\n  id: 'numericSeries',\n  detect: (values) => {\n    if (values.length < 2) return false;\n\n    const numbers = values.map(toFiniteNumber);\n    if (numbers.some((entry) => entry == null)) return false;\n\n    const step = (numbers[1] as number) - (numbers[0] as number);\n    return numbers.every((entry, index) => index === 0 || (entry as number) - (numbers[index - 1] as number) === step);\n  },\n  generate: (values, offset, direction) => {\n    const numbers = values.map(toFiniteNumber) as Array<number>;\n    const step = numbers[1] - numbers[0];\n    const anchor = direction === 1 ? numbers[numbers.length - 1] : numbers[0];\n\n    return anchor + step * offset * direction;\n  },\n};\n\n/** Two or more dates spaced by whole days continue the sequence. */\nconst dateSeriesStrategy: IGridFillStrategy = {\n  id: 'dateSeries',\n  detect: (values) => {\n    if (values.length < 2) return false;\n\n    const dates = values.map(toValidDate);\n    if (dates.some((entry) => entry == null)) return false;\n\n    const step = (dates[1] as Date).getTime() - (dates[0] as Date).getTime();\n    if (step === 0 || step % DAY_IN_MS !== 0) return false;\n\n    return dates.every(\n      (entry, index) => index === 0 || (entry as Date).getTime() - (dates[index - 1] as Date).getTime() === step,\n    );\n  },\n  generate: (values, offset, direction) => {\n    const dates = values.map(toValidDate) as Array<Date>;\n    const step = dates[1].getTime() - dates[0].getTime();\n    const anchor = direction === 1 ? dates[dates.length - 1] : dates[0];\n    const next = new Date(anchor.getTime() + step * offset * direction);\n\n    return next.toISOString();\n  },\n};\n\n/** Order matters: the first strategy that recognizes the source wins. */\nexport const GRID_FILL_STRATEGIES: Array<IGridFillStrategy> = [\n  dateSeriesStrategy,\n  numericSeriesStrategy,\n  constantStrategy,\n];\n\nexport const resolveFillStrategy = (values: Array<unknown>, preferredId?: string): IGridFillStrategy => {\n  const preferred = preferredId ? GRID_FILL_STRATEGIES.find((strategy) => strategy.id === preferredId) : undefined;\n  if (preferred) return preferred;\n\n  return GRID_FILL_STRATEGIES.find((strategy) => strategy.detect(values)) ?? constantStrategy;\n};\n"],"names":[],"mappings":"AAiBA,MAAM,iBAAiB,CAAC,UAAkC;AACxD,MAAI,OAAO,UAAU,SAAU,QAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;AACvE,MAAI,OAAO,UAAU,YAAY,MAAM,KAAA,MAAW,GAAI,QAAO;AAG7D,QAAM,SAAS,OAAO,MAAM,QAAQ,KAAK,GAAG,CAAC;AAC7C,SAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC5C;AAEA,MAAM,cAAc,CAAC,UAAgC;AACnD,MAAI,OAAO,UAAU,YAAY,EAAE,iBAAiB,MAAO,QAAO;AAElE,QAAM,OAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAK;AAC3D,SAAO,OAAO,MAAM,KAAK,QAAA,CAAS,IAAI,OAAO;AAC/C;AAEA,MAAM,YAAY,KAAK,KAAK,KAAK;AAGjC,MAAM,mBAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,QAAQ,MAAM;AAAA,EACd,UAAU,CAAC,QAAQ,WAAW;AAC5B,QAAI,OAAO,WAAW,EAAG,QAAO;AAChC,QAAI,OAAO,WAAW,EAAG,QAAO,OAAO,CAAC;AAExC,UAAM,SAAS,SAAS,KAAK,OAAO;AACpC,WAAO,OAAO,KAAK;AAAA,EACrB;AACF;AAGA,MAAM,wBAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,QAAQ,CAAC,WAAW;AAClB,QAAI,OAAO,SAAS,EAAG,QAAO;AAE9B,UAAM,UAAU,OAAO,IAAI,cAAc;AACzC,QAAI,QAAQ,KAAK,CAAC,UAAU,SAAS,IAAI,EAAG,QAAO;AAEnD,UAAM,OAAQ,QAAQ,CAAC,IAAgB,QAAQ,CAAC;AAChD,WAAO,QAAQ,MAAM,CAAC,OAAO,UAAU,UAAU,KAAM,QAAoB,QAAQ,QAAQ,CAAC,MAAiB,IAAI;AAAA,EACnH;AAAA,EACA,UAAU,CAAC,QAAQ,QAAQ,cAAc;AACvC,UAAM,UAAU,OAAO,IAAI,cAAc;AACzC,UAAM,OAAO,QAAQ,CAAC,IAAI,QAAQ,CAAC;AACnC,UAAM,SAAS,cAAc,IAAI,QAAQ,QAAQ,SAAS,CAAC,IAAI,QAAQ,CAAC;AAExE,WAAO,SAAS,OAAO,SAAS;AAAA,EAClC;AACF;AAGA,MAAM,qBAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,QAAQ,CAAC,WAAW;AAClB,QAAI,OAAO,SAAS,EAAG,QAAO;AAE9B,UAAM,QAAQ,OAAO,IAAI,WAAW;AACpC,QAAI,MAAM,KAAK,CAAC,UAAU,SAAS,IAAI,EAAG,QAAO;AAEjD,UAAM,OAAQ,MAAM,CAAC,EAAW,YAAa,MAAM,CAAC,EAAW,QAAA;AAC/D,QAAI,SAAS,KAAK,OAAO,cAAc,EAAG,QAAO;AAEjD,WAAO,MAAM;AAAA,MACX,CAAC,OAAO,UAAU,UAAU,KAAM,MAAe,QAAA,IAAa,MAAM,QAAQ,CAAC,EAAW,cAAc;AAAA,IAAA;AAAA,EAE1G;AAAA,EACA,UAAU,CAAC,QAAQ,QAAQ,cAAc;AACvC,UAAM,QAAQ,OAAO,IAAI,WAAW;AACpC,UAAM,OAAO,MAAM,CAAC,EAAE,YAAY,MAAM,CAAC,EAAE,QAAA;AAC3C,UAAM,SAAS,cAAc,IAAI,MAAM,MAAM,SAAS,CAAC,IAAI,MAAM,CAAC;AAClE,UAAM,OAAO,IAAI,KAAK,OAAO,YAAY,OAAO,SAAS,SAAS;AAElE,WAAO,KAAK,YAAA;AAAA,EACd;AACF;AAGO,MAAM,uBAAiD;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,sBAAsB,CAAC,QAAwB,gBAA4C;AACtG,QAAM,YAAY,cAAc,qBAAqB,KAAK,CAAC,aAAa,SAAS,OAAO,WAAW,IAAI;AACvG,MAAI,UAAW,QAAO;AAEtB,SAAO,qBAAqB,KAAK,CAAC,aAAa,SAAS,OAAO,MAAM,CAAC,KAAK;AAC7E;"}

package/dist/components/UI/DataTable/grid/gridStore.d.ts

@@ -0,0 +1,82 @@
+import { StoreApi } from 'zustand/vanilla';
+import { IGridCellCoord, IGridStartEditingOptions, TGridEditingEntry, TGridSelectionMode } from './gridTypes';
+export interface IGridMatrix {
+    rowIds: Array<string>;
+    columnIds: Array<string>;
+    rowIndexById: Map<string, number>;
+    columnIndexById: Map<string, number>;
+}
+export interface IGridSelectionRect {
+    rowStart: number;
+    rowEnd: number;
+    columnStart: number;
+    columnEnd: number;
+}
+export interface IGridMoveOptions {
+    /** Keeps the selection anchor and stretches the rectangle to the new cell. */
+    extend?: boolean;
+    /** Tab-style traversal: past the last column continues on the next row. */
+    wrap?: boolean;
+}
+export type TGridEditingOutcome = 'commit' | 'cancel';
+export interface IGridState {
+    /**
+     * Enquanto falso a tabela é uma tabela comum: nenhuma célula é focável, o
+     * clique na linha segue sendo do host e nada do grid aparece.
+     */
+    isEditMode: boolean;
+    setEditMode: (isEditMode: boolean) => void;
+    selectionMode: TGridSelectionMode;
+    matrix: IGridMatrix;
+    activeCell: IGridCellCoord | null;
+    selectionAnchor: IGridCellCoord | null;
+    selectionRect: IGridSelectionRect | null;
+    editingCell: IGridCellCoord | null;
+    editingEntry: TGridEditingEntry | null;
+    /** Typed text that replaces the value of the cell being opened; `null` keeps the value. */
+    editingSeed: string | null;
+    /** How the last edit ended, so the cell knows whether to restore its value. */
+    editingOutcome: TGridEditingOutcome | null;
+    /** Selection snapshot taken when the fill drag started. */
+    fillSourceRect: IGridSelectionRect | null;
+    /** Cells the running fill drag would write. Null while the pointer is inside the source. */
+    fillTargetRect: IGridSelectionRect | null;
+    /** Per-cell persistence state fed by the host's commit queue. */
+    cellStatuses: ReadonlyMap<string, string>;
+    setCellStatuses: (statuses: ReadonlyMap<string, string>) => void;
+    setSelectionMode: (mode: TGridSelectionMode) => void;
+    setMatrix: (rowIds: Array<string>, columnIds: Array<string>) => void;
+    setActiveCell: (coord: IGridCellCoord, options?: {
+        extend?: boolean;
+    }) => void;
+    /** Returns whether the active cell actually moved, so the host can let Tab leave the grid. */
+    moveActiveCell: (rowDelta: number, columnDelta: number, options?: IGridMoveOptions) => boolean;
+    moveActiveToEdge: (rowDelta: number, columnDelta: number, options?: {
+        extend?: boolean;
+    }) => void;
+    /**
+     * Tab traversal over the cells that accept an editor, opening the one it lands on.
+     * Returns `false` past the first/last editable cell so the focus can leave the grid.
+     */
+    moveToEditableCell: (direction: 1 | -1, canEditCell: (coord: IGridCellCoord) => boolean) => boolean;
+    startEditing: (coord?: IGridCellCoord, options?: IGridStartEditingOptions) => void;
+    stopEditing: (outcome?: TGridEditingOutcome) => void;
+    /**
+     * The grid lets go of the user: the open editor closes keeping its value, as Enter would,
+     * and no cell stays active or selected. Used when a press lands outside the table.
+     */
+    releaseActiveCell: () => void;
+    clearSelection: () => void;
+    startFill: () => void;
+    updateFillTarget: (coord: IGridCellCoord) => void;
+    /** Clears the drag state and hands back what should be written, if anything. */
+    endFill: () => IGridFillResult | null;
+    cancelFill: () => void;
+}
+export interface IGridFillResult {
+    sourceRect: IGridSelectionRect;
+    targetRect: IGridSelectionRect;
+    matrix: IGridMatrix;
+}
+export declare const createGridStore: (selectionMode?: TGridSelectionMode, initialEditMode?: boolean) => StoreApi<IGridState>;
+export declare const selectGridCellState: (state: IGridState, rowId: string, columnId: string) => number;

package/dist/components/UI/DataTable/grid/gridStore.js

@@ -0,0 +1,259 @@
+import { createStore } from "zustand/vanilla";
+import { buildGridCellKey, GRID_CELL_ACTIVE, GRID_CELL_EDITING, GRID_CELL_SELECTED, GRID_CELL_FILL_HANDLE, GRID_CELL_FILL_PREVIEW, GRID_CELL_SAVING, GRID_CELL_SAVE_ERROR, GRID_CELL_TABBABLE } from "./gridTypes.js";
+const EMPTY_MATRIX = {
+  rowIds: [],
+  columnIds: [],
+  rowIndexById: /* @__PURE__ */ new Map(),
+  columnIndexById: /* @__PURE__ */ new Map()
+};
+const sameIds = (current, next) => current.length === next.length && current.every((id, index) => id === next[index]);
+const buildIndex = (ids) => new Map(ids.map((id, index) => [id, index]));
+const buildRect = (matrix, anchor, focus) => {
+  if (!anchor || !focus) return null;
+  const anchorRow = matrix.rowIndexById.get(anchor.rowId);
+  const anchorColumn = matrix.columnIndexById.get(anchor.columnId);
+  const focusRow = matrix.rowIndexById.get(focus.rowId);
+  const focusColumn = matrix.columnIndexById.get(focus.columnId);
+  if (anchorRow == null || anchorColumn == null || focusRow == null || focusColumn == null) return null;
+  return {
+    rowStart: Math.min(anchorRow, focusRow),
+    rowEnd: Math.max(anchorRow, focusRow),
+    columnStart: Math.min(anchorColumn, focusColumn),
+    columnEnd: Math.max(anchorColumn, focusColumn)
+  };
+};
+const coordAt = (matrix, rowIndex, columnIndex) => {
+  const rowId = matrix.rowIds[rowIndex];
+  const columnId = matrix.columnIds[columnIndex];
+  if (rowId == null || columnId == null) return null;
+  return { rowId, columnId };
+};
+const isSameCoord = (left, right) => left?.rowId === right?.rowId && left?.columnId === right?.columnId;
+const createGridStore = (selectionMode = "cell", initialEditMode = true) => createStore((set, get) => {
+  const focusCoord = (coord, extend) => {
+    const { matrix, selectionAnchor, selectionMode: mode, editingCell } = get();
+    const anchor = extend && mode === "range" ? selectionAnchor ?? coord : coord;
+    set({
+      activeCell: coord,
+      selectionAnchor: anchor,
+      selectionRect: buildRect(matrix, anchor, coord),
+      editingCell: null,
+      // Moving away from an open editor keeps what was typed: only Escape discards it.
+      editingOutcome: editingCell ? "commit" : null
+    });
+  };
+  return {
+    isEditMode: initialEditMode,
+    selectionMode,
+    matrix: EMPTY_MATRIX,
+    activeCell: null,
+    selectionAnchor: null,
+    selectionRect: null,
+    editingCell: null,
+    editingEntry: null,
+    editingSeed: null,
+    editingOutcome: null,
+    fillSourceRect: null,
+    fillTargetRect: null,
+    cellStatuses: /* @__PURE__ */ new Map(),
+    setEditMode: (isEditMode) => {
+      if (get().isEditMode === isEditMode) return;
+      set({
+        isEditMode,
+        activeCell: null,
+        selectionAnchor: null,
+        selectionRect: null,
+        editingCell: null,
+        editingOutcome: null,
+        fillSourceRect: null,
+        fillTargetRect: null
+      });
+    },
+    setCellStatuses: (statuses) => {
+      if (get().cellStatuses === statuses) return;
+      set({ cellStatuses: statuses });
+    },
+    setSelectionMode: (mode) => {
+      if (get().selectionMode === mode) return;
+      set({ selectionMode: mode });
+    },
+    setMatrix: (rowIds, columnIds) => {
+      const { matrix, activeCell, selectionAnchor, editingCell } = get();
+      if (sameIds(matrix.rowIds, rowIds) && sameIds(matrix.columnIds, columnIds)) return;
+      const nextMatrix = {
+        rowIds,
+        columnIds,
+        rowIndexById: buildIndex(rowIds),
+        columnIndexById: buildIndex(columnIds)
+      };
+      const stillExists = (coord) => !!coord && nextMatrix.rowIndexById.has(coord.rowId) && nextMatrix.columnIndexById.has(coord.columnId);
+      const nextActive = stillExists(activeCell) ? activeCell : null;
+      const nextAnchor = stillExists(selectionAnchor) ? selectionAnchor : nextActive;
+      set({
+        matrix: nextMatrix,
+        activeCell: nextActive,
+        selectionAnchor: nextAnchor,
+        selectionRect: buildRect(nextMatrix, nextAnchor, nextActive),
+        editingCell: stillExists(editingCell) ? editingCell : null
+      });
+    },
+    setActiveCell: (coord, options) => {
+      const { activeCell, editingCell } = get();
+      const extend = options?.extend ?? false;
+      if (!extend && isSameCoord(editingCell, coord)) return;
+      if (!extend && isSameCoord(activeCell, coord) && !editingCell) return;
+      focusCoord(coord, extend);
+    },
+    moveActiveCell: (rowDelta, columnDelta, options) => {
+      const { matrix, activeCell } = get();
+      if (matrix.rowIds.length === 0 || matrix.columnIds.length === 0) return false;
+      if (!activeCell) {
+        const first = coordAt(matrix, 0, 0);
+        if (first) focusCoord(first, false);
+        return !!first;
+      }
+      const rowIndex = matrix.rowIndexById.get(activeCell.rowId);
+      const columnIndex = matrix.columnIndexById.get(activeCell.columnId);
+      if (rowIndex == null || columnIndex == null) return false;
+      let nextRow = rowIndex + rowDelta;
+      let nextColumn = columnIndex + columnDelta;
+      if (options?.wrap && columnDelta !== 0) {
+        if (nextColumn >= matrix.columnIds.length) {
+          nextColumn = 0;
+          nextRow += 1;
+        } else if (nextColumn < 0) {
+          nextColumn = matrix.columnIds.length - 1;
+          nextRow -= 1;
+        }
+      }
+      if (nextRow < 0 || nextRow >= matrix.rowIds.length) return false;
+      if (nextColumn < 0 || nextColumn >= matrix.columnIds.length) return false;
+      const next = coordAt(matrix, nextRow, nextColumn);
+      if (!next) return false;
+      focusCoord(next, options?.extend ?? false);
+      return true;
+    },
+    moveActiveToEdge: (rowDelta, columnDelta, options) => {
+      const { matrix, activeCell } = get();
+      if (matrix.rowIds.length === 0 || matrix.columnIds.length === 0) return;
+      const rowIndex = activeCell ? matrix.rowIndexById.get(activeCell.rowId) ?? 0 : 0;
+      const columnIndex = activeCell ? matrix.columnIndexById.get(activeCell.columnId) ?? 0 : 0;
+      const nextRow = rowDelta === 0 ? rowIndex : rowDelta > 0 ? matrix.rowIds.length - 1 : 0;
+      const nextColumn = columnDelta === 0 ? columnIndex : columnDelta > 0 ? matrix.columnIds.length - 1 : 0;
+      const next = coordAt(matrix, nextRow, nextColumn);
+      if (next) focusCoord(next, options?.extend ?? false);
+    },
+    moveToEditableCell: (direction, canEditCell) => {
+      const { matrix, activeCell } = get();
+      const columnCount = matrix.columnIds.length;
+      const cellCount = matrix.rowIds.length * columnCount;
+      if (cellCount === 0) return false;
+      const rowIndex = activeCell ? matrix.rowIndexById.get(activeCell.rowId) : void 0;
+      const columnIndex = activeCell ? matrix.columnIndexById.get(activeCell.columnId) : void 0;
+      const currentPosition = rowIndex != null && columnIndex != null ? rowIndex * columnCount + columnIndex : -1;
+      for (let position = currentPosition + direction; position >= 0 && position < cellCount; position += direction) {
+        const candidate = coordAt(matrix, Math.floor(position / columnCount), position % columnCount);
+        if (!candidate || !canEditCell(candidate)) continue;
+        focusCoord(candidate, false);
+        get().startEditing(candidate, { entry: "keyboard" });
+        return true;
+      }
+      return false;
+    },
+    startEditing: (coord, options) => {
+      const { activeCell, editingCell, matrix } = get();
+      const target = coord ?? activeCell;
+      if (!target || isSameCoord(editingCell, target)) return;
+      set({
+        activeCell: target,
+        selectionAnchor: target,
+        selectionRect: buildRect(matrix, target, target),
+        editingCell: target,
+        editingEntry: options?.entry ?? "keyboard",
+        editingSeed: options?.seed ?? null,
+        editingOutcome: null
+      });
+    },
+    stopEditing: (outcome = "commit") => {
+      if (!get().editingCell) return;
+      set({ editingCell: null, editingOutcome: outcome });
+    },
+    releaseActiveCell: () => {
+      const { activeCell, editingCell, fillSourceRect } = get();
+      if (!activeCell && !editingCell && !fillSourceRect) return;
+      set({
+        activeCell: null,
+        selectionAnchor: null,
+        selectionRect: null,
+        editingCell: null,
+        ...editingCell ? { editingOutcome: "commit" } : {},
+        fillSourceRect: null,
+        fillTargetRect: null
+      });
+    },
+    clearSelection: () => {
+      const { activeCell, matrix } = get();
+      set({
+        selectionAnchor: activeCell,
+        selectionRect: buildRect(matrix, activeCell, activeCell)
+      });
+    },
+    startFill: () => {
+      const { selectionRect } = get();
+      if (!selectionRect) return;
+      set({ fillSourceRect: selectionRect, fillTargetRect: null, editingCell: null });
+    },
+    updateFillTarget: (coord) => {
+      const { fillSourceRect, fillTargetRect, matrix } = get();
+      if (!fillSourceRect) return;
+      const rowIndex = matrix.rowIndexById.get(coord.rowId);
+      if (rowIndex == null) return;
+      let nextTarget = null;
+      if (rowIndex > fillSourceRect.rowEnd) {
+        nextTarget = { ...fillSourceRect, rowStart: fillSourceRect.rowEnd + 1, rowEnd: rowIndex };
+      } else if (rowIndex < fillSourceRect.rowStart) {
+        nextTarget = { ...fillSourceRect, rowStart: rowIndex, rowEnd: fillSourceRect.rowStart - 1 };
+      }
+      const isSameTarget = nextTarget?.rowStart === fillTargetRect?.rowStart && nextTarget?.rowEnd === fillTargetRect?.rowEnd;
+      if (isSameTarget) return;
+      set({ fillTargetRect: nextTarget });
+    },
+    endFill: () => {
+      const { fillSourceRect, fillTargetRect, matrix } = get();
+      set({ fillSourceRect: null, fillTargetRect: null });
+      if (!fillSourceRect || !fillTargetRect) return null;
+      return { sourceRect: fillSourceRect, targetRect: fillTargetRect, matrix };
+    },
+    cancelFill: () => {
+      if (!get().fillSourceRect) return;
+      set({ fillSourceRect: null, fillTargetRect: null });
+    }
+  };
+});
+const isInsideRect = (rect, rowIndex, columnIndex) => !!rect && rowIndex != null && columnIndex != null && rowIndex >= rect.rowStart && rowIndex <= rect.rowEnd && columnIndex >= rect.columnStart && columnIndex <= rect.columnEnd;
+const selectGridCellState = (state, rowId, columnId) => {
+  if (!state.isEditMode) return 0;
+  let mask = 0;
+  if (isSameCoord(state.activeCell, { rowId, columnId })) mask |= GRID_CELL_ACTIVE;
+  if (isSameCoord(state.editingCell, { rowId, columnId })) mask |= GRID_CELL_EDITING;
+  const rowIndex = state.matrix.rowIndexById.get(rowId);
+  const columnIndex = state.matrix.columnIndexById.get(columnId);
+  const rect = state.selectionRect;
+  if (isInsideRect(rect, rowIndex, columnIndex)) mask |= GRID_CELL_SELECTED;
+  if (rect && rowIndex === rect.rowEnd && columnIndex === rect.columnEnd) mask |= GRID_CELL_FILL_HANDLE;
+  if (isInsideRect(state.fillTargetRect, rowIndex, columnIndex)) mask |= GRID_CELL_FILL_PREVIEW;
+  if (state.cellStatuses.size > 0) {
+    const status = state.cellStatuses.get(buildGridCellKey(rowId, columnId));
+    if (status === "saving" || status === "pending") mask |= GRID_CELL_SAVING;
+    if (status === "error") mask |= GRID_CELL_SAVE_ERROR;
+  }
+  if (!state.activeCell && state.matrix.rowIds[0] === rowId && state.matrix.columnIds[0] === columnId) {
+    mask |= GRID_CELL_TABBABLE;
+  }
+  return mask;
+};
+export {
+  createGridStore,
+  selectGridCellState
+};
+//# sourceMappingURL=gridStore.js.map