@umodeapporg/ui 0.1.0

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { StoreApi } from 'zustand/vanilla';
+import { IGridState } from './gridStore';
+import { IGridCellCoord } from './gridTypes';
+interface IUseGridKeyboardParams {
+    store: StoreApi<IGridState> | null;
+    /** Whether the cell can open an editor, so Enter/F2 know what to do. */
+    canEditCell?: (coord: IGridCellCoord) => boolean;
+    onSave?: () => void;
+}
+/**
+ * The grid's ONLY keyboard listener: one React handler on the scroll container,
+ * reached by bubbling from the focused cell. No document listeners, no per-cell
+ * handlers, so two tables on the same screen never fight over the same keys.
+ */
+export declare const useGridKeyboard: ({ store, canEditCell, onSave }: IUseGridKeyboardParams) => (event: React.KeyboardEvent<HTMLElement>) => void;
+export {};

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

@@ -0,0 +1,114 @@
+import { useCallback } from "react";
+import { GRID_CELL_DATA_ATTR } from "./gridTypes.js";
+const CELL_CONTENT_FOCUS_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]"
+].map((selector) => `${selector}:not([tabindex="-1"])`).join(", ");
+const resolveCellElement = (target) => target instanceof HTMLElement ? target.closest(`[${GRID_CELL_DATA_ATTR}]`) : null;
+const isTextEntryTarget = (target) => {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  return target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+};
+const useGridKeyboard = ({ store, canEditCell, onSave }) => useCallback(
+  (event) => {
+    if (!store) return;
+    const state = store.getState();
+    const { key } = event;
+    if ((event.metaKey || event.ctrlKey) && (key === "s" || key === "S")) {
+      if (!onSave) return;
+      event.preventDefault();
+      onSave();
+      return;
+    }
+    const isEditing = !!state.editingCell || isTextEntryTarget(event.target);
+    if (isEditing) {
+      if (key === "Escape") {
+        event.stopPropagation();
+        state.stopEditing("cancel");
+        return;
+      }
+      if (key === "Enter") {
+        event.preventDefault();
+        state.stopEditing();
+        state.moveActiveCell(1, 0);
+        return;
+      }
+      if (key === "Tab") {
+        state.stopEditing();
+        if (state.moveActiveCell(0, event.shiftKey ? -1 : 1, { wrap: true })) event.preventDefault();
+      }
+      return;
+    }
+    const cellElement = resolveCellElement(event.target);
+    const isInsideCellContent = !!cellElement && event.target !== cellElement;
+    if (isInsideCellContent) {
+      if (key !== "Escape") return;
+      event.preventDefault();
+      cellElement.focus();
+      return;
+    }
+    const extend = event.shiftKey;
+    switch (key) {
+      case "ArrowUp":
+        event.preventDefault();
+        state.moveActiveCell(-1, 0, { extend });
+        return;
+      case "ArrowDown":
+        event.preventDefault();
+        state.moveActiveCell(1, 0, { extend });
+        return;
+      case "ArrowLeft":
+        event.preventDefault();
+        state.moveActiveCell(0, -1, { extend });
+        return;
+      case "ArrowRight":
+        event.preventDefault();
+        state.moveActiveCell(0, 1, { extend });
+        return;
+      case "Tab":
+        if (state.moveActiveCell(0, event.shiftKey ? -1 : 1, { wrap: true })) event.preventDefault();
+        return;
+      case "Home":
+        event.preventDefault();
+        state.moveActiveToEdge(event.ctrlKey || event.metaKey ? -1 : 0, -1, { extend });
+        return;
+      case "End":
+        event.preventDefault();
+        state.moveActiveToEdge(event.ctrlKey || event.metaKey ? 1 : 0, 1, { extend });
+        return;
+      case "Enter":
+      case "F2": {
+        const active = state.activeCell;
+        if (!active) return;
+        if (canEditCell?.(active)) {
+          event.preventDefault();
+          state.startEditing(active);
+          return;
+        }
+        const focusableInsideCell = cellElement?.querySelector(CELL_CONTENT_FOCUS_SELECTOR);
+        if (focusableInsideCell) {
+          event.preventDefault();
+          focusableInsideCell.focus();
+          return;
+        }
+        if (key !== "Enter") return;
+        event.preventDefault();
+        state.moveActiveCell(1, 0);
+        return;
+      }
+      case "Escape":
+        state.clearSelection();
+        return;
+    }
+  },
+  [store, canEditCell, onSave]
+);
+export {
+  useGridKeyboard
+};
+//# sourceMappingURL=useGridKeyboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGridKeyboard.js","sources":["../../../../../src/components/UI/DataTable/grid/useGridKeyboard.ts"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { type StoreApi } from 'zustand/vanilla';\n\nimport { type IGridState } from './gridStore';\nimport { GRID_CELL_DATA_ATTR, type IGridCellCoord } from './gridTypes';\n\ninterface IUseGridKeyboardParams {\n  store: StoreApi<IGridState> | null;\n  /** Whether the cell can open an editor, so Enter/F2 know what to do. */\n  canEditCell?: (coord: IGridCellCoord) => boolean;\n  onSave?: () => void;\n}\n\nconst CELL_CONTENT_FOCUS_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]',\n]\n  .map((selector) => `${selector}:not([tabindex=\"-1\"])`)\n  .join(', ');\n\n/** The `<td>` the event came from, so the handler never queries the whole document. */\nconst resolveCellElement = (target: EventTarget | null): HTMLElement | null =>\n  target instanceof HTMLElement ? target.closest<HTMLElement>(`[${GRID_CELL_DATA_ATTR}]`) : null;\n\n/**\n * A control that owns the caret (input, textarea, select, contenteditable) keeps\n * every key the grid would otherwise claim: the horizontal arrows walk the text,\n * not the columns.\n */\nconst isTextEntryTarget = (target: EventTarget | null): boolean => {\n  if (!(target instanceof HTMLElement)) return false;\n  if (target.isContentEditable) return true;\n\n  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT';\n};\n\n/**\n * The grid's ONLY keyboard listener: one React handler on the scroll container,\n * reached by bubbling from the focused cell. No document listeners, no per-cell\n * handlers, so two tables on the same screen never fight over the same keys.\n */\nexport const useGridKeyboard = ({ store, canEditCell, onSave }: IUseGridKeyboardParams) =>\n  useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (!store) return;\n\n      const state = store.getState();\n      const { key } = event;\n\n      if ((event.metaKey || event.ctrlKey) && (key === 's' || key === 'S')) {\n        if (!onSave) return;\n        event.preventDefault();\n        onSave();\n        return;\n      }\n\n      const isEditing = !!state.editingCell || isTextEntryTarget(event.target);\n\n      if (isEditing) {\n        if (key === 'Escape') {\n          // The table may live inside a dialog or drawer: leaving the editor must\n          // not also close the surface around it.\n          event.stopPropagation();\n          state.stopEditing('cancel');\n          return;\n        }\n\n        if (key === 'Enter') {\n          event.preventDefault();\n          state.stopEditing();\n          state.moveActiveCell(1, 0);\n          return;\n        }\n\n        if (key === 'Tab') {\n          state.stopEditing();\n          // Past the last cell the grid gives the focus back to the page: trapping\n          // Tab inside a table is a keyboard trap, not a spreadsheet.\n          if (state.moveActiveCell(0, event.shiftKey ? -1 : 1, { wrap: true })) event.preventDefault();\n        }\n\n        return;\n      }\n\n      const cellElement = resolveCellElement(event.target);\n      const isInsideCellContent = !!cellElement && event.target !== cellElement;\n\n      // Focus went into a control inside the cell (an action button, a link).\n      // While it is there the cell content owns the keyboard, and Escape brings\n      // the focus back to the cell.\n      if (isInsideCellContent) {\n        if (key !== 'Escape') return;\n        event.preventDefault();\n        cellElement.focus();\n        return;\n      }\n\n      const extend = event.shiftKey;\n\n      switch (key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          state.moveActiveCell(-1, 0, { extend });\n          return;\n        case 'ArrowDown':\n          event.preventDefault();\n          state.moveActiveCell(1, 0, { extend });\n          return;\n        case 'ArrowLeft':\n          event.preventDefault();\n          state.moveActiveCell(0, -1, { extend });\n          return;\n        case 'ArrowRight':\n          event.preventDefault();\n          state.moveActiveCell(0, 1, { extend });\n          return;\n        case 'Tab':\n          if (state.moveActiveCell(0, event.shiftKey ? -1 : 1, { wrap: true })) event.preventDefault();\n          return;\n        case 'Home':\n          event.preventDefault();\n          state.moveActiveToEdge(event.ctrlKey || event.metaKey ? -1 : 0, -1, { extend });\n          return;\n        case 'End':\n          event.preventDefault();\n          state.moveActiveToEdge(event.ctrlKey || event.metaKey ? 1 : 0, 1, { extend });\n          return;\n        case 'Enter':\n        case 'F2': {\n          const active = state.activeCell;\n          if (!active) return;\n\n          if (canEditCell?.(active)) {\n            event.preventDefault();\n            state.startEditing(active);\n            return;\n          }\n\n          // Read-only cell: Enter steps INTO whatever control it holds, which is\n          // the only way a keyboard user reaches the per-row actions now that Tab\n          // walks the cells.\n          const focusableInsideCell = cellElement?.querySelector<HTMLElement>(CELL_CONTENT_FOCUS_SELECTOR);\n          if (focusableInsideCell) {\n            event.preventDefault();\n            focusableInsideCell.focus();\n            return;\n          }\n\n          if (key !== 'Enter') return;\n          event.preventDefault();\n          state.moveActiveCell(1, 0);\n\n          return;\n        }\n        case 'Escape':\n          state.clearSelection();\n          return;\n        default:\n      }\n    },\n    [store, canEditCell, onSave],\n  );\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/index.d.ts

@@ -0,0 +1,19 @@
+export { applyDataTableFilters, buildDataTableFilterParams, countActiveDataTableFilters, } from './applyDataTableFilters';
+export { default as DataTable } from './DataTable';
+export { default as DataTableBulkEditDialog } from './DataTableBulkEditDialog';
+export type { IDataTableColumnsEntry } from './dataTableColumnsStore';
+export { readColumnsEntry } from './dataTableColumnsStore';
+export { default as DataTableDetailModal } from './DataTableDetailModal';
+export { default as DataTableDetailPanel } from './DataTableDetailPanel';
+export { default as DataTableFilters } from './DataTableFilters';
+export { default as DataTableSaveButton } from './DataTableSaveButton';
+export type { IDataTableActionItem, IDataTableColorValue, IDataTableColumnConfig, IDataTableConfig, IDataTableDetailConfig, IDataTableDetailField, IDataTableDetailTableExpansionConfig, IDataTableEditableConfig, IDataTableEditingConfig, IDataTableEditingRowsConfig, IDataTableExpandedContentContext, IDataTableFillChange, IDataTableFillConfig, IDataTableFilterBinding, IDataTableFilterOption, IDataTableFiltersConfig, IDataTableOriginValue, IDataTablePanelExpansionConfig, IDataTableRow, IDataTableSortState, IDataTableSpreadsheetConfig, IDataTableStatusValue, IDataTableSubRowsExpansionConfig, IDataTableTab, IDataTableTableExpansionConfig, IDataTableTagValue, IDataTableThumbnailValue, TDataTableCellType, TDataTableDataMode, TDataTableEditableType, TDataTableExpansionConfig, TDataTableFilterField, TDataTableFilterValues, TDataTableOriginTone, TDataTableSortDirection, TDataTableStatusTone, TDataTableViewMode, } from './types';
+export { isDataTableDetailTableExpansion, isDataTablePanelExpansion, isDataTableSubRowsExpansion, isDataTableTableExpansion, } from './types';
+export { resolveColumnOrder } from './useColumnOrder';
+export type { IDataTableCommitItem, IDataTableCommitRowResult, TDataTableCommitStatus, } from './useDataTableCommitQueue';
+export { useDataTableCommitQueue } from './useDataTableCommitQueue';
+export type { IDataTableEditBufferItem } from './useDataTableEditBuffer';
+export { useDataTableEditBuffer } from './useDataTableEditBuffer';
+export type { IDataTableClientPaginationState } from './useDataTableInstance';
+export type { IDataTableFetchParams, IDataTableFetchResult, IDataTableSource, TDataTableFetchPage, } from './useDataTableSource';
+export { useDataTableSource } from './useDataTableSource';

package/dist/components/UI/DataTable/index.js

@@ -0,0 +1,34 @@
+import { applyDataTableFilters, buildDataTableFilterParams, countActiveDataTableFilters } from "./applyDataTableFilters.js";
+import { default as default2 } from "./DataTable.js";
+import { default as default3 } from "./DataTableBulkEditDialog.js";
+import { readColumnsEntry } from "./dataTableColumnsStore.js";
+import { default as default4 } from "./DataTableDetailModal.js";
+import { default as default5 } from "./DataTableDetailPanel.js";
+import { default as default6 } from "./DataTableFilters.js";
+import { default as default7 } from "./DataTableSaveButton.js";
+import { isDataTableDetailTableExpansion, isDataTablePanelExpansion, isDataTableSubRowsExpansion, isDataTableTableExpansion } from "./types.js";
+import { resolveColumnOrder } from "./useColumnOrder.js";
+import { useDataTableCommitQueue } from "./useDataTableCommitQueue.js";
+import { useDataTableEditBuffer } from "./useDataTableEditBuffer.js";
+import { useDataTableSource } from "./useDataTableSource.js";
+export {
+  default2 as DataTable,
+  default3 as DataTableBulkEditDialog,
+  default4 as DataTableDetailModal,
+  default5 as DataTableDetailPanel,
+  default6 as DataTableFilters,
+  default7 as DataTableSaveButton,
+  applyDataTableFilters,
+  buildDataTableFilterParams,
+  countActiveDataTableFilters,
+  isDataTableDetailTableExpansion,
+  isDataTablePanelExpansion,
+  isDataTableSubRowsExpansion,
+  isDataTableTableExpansion,
+  readColumnsEntry,
+  resolveColumnOrder,
+  useDataTableCommitQueue,
+  useDataTableEditBuffer,
+  useDataTableSource
+};
+//# sourceMappingURL=index.js.map

package/dist/components/UI/DataTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}