@vuu-ui/vuu-table 2.1.18 → 2.1.19-beta.2

package/cjs/useCellEditing.js

@@ -1,77 +0,0 @@
-'use strict';
-
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var react = require('react');
-var tableDomUtils = require('./table-dom-utils.js');
-
-const useCellEditing = ({ navigate }) => {
-  const commitHandler = react.useCallback(() => {
-    navigate();
-  }, [navigate]);
-  const editInput = react.useCallback(
-    (evt) => {
-      const cellEl = evt.target;
-      const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
-      if (input) {
-        input.focus();
-      }
-    },
-    []
-  );
-  const focusInput = react.useCallback(
-    (evt) => {
-      const cellEl = evt.target;
-      const input = cellEl.querySelector("input");
-      if (input) {
-        input.focus();
-      }
-    },
-    []
-  );
-  const handleKeyDown = react.useCallback(
-    (e) => {
-      const el = e.target;
-      if (tableDomUtils.cellIsTextInput(el)) {
-        if (vuuUtils.isCharacterKey(e.key)) {
-          editInput(e);
-        } else if (e.key === "Enter") {
-          focusInput(e);
-        }
-      }
-    },
-    [editInput, focusInput]
-  );
-  const handleDoubleClick = react.useCallback(
-    (e) => {
-      const el = e.target;
-      if (el.matches("input") || el.querySelector("input")) {
-        editInput(e);
-        e.stopPropagation();
-      }
-    },
-    [editInput]
-  );
-  const handleBlur = react.useCallback(
-    (e) => {
-      const el = e.target;
-      el.removeEventListener("vuu-commit", commitHandler, true);
-    },
-    [commitHandler]
-  );
-  const handleFocus = react.useCallback(
-    (e) => {
-      const el = e.target;
-      el.addEventListener("vuu-commit", commitHandler, true);
-    },
-    [commitHandler]
-  );
-  return {
-    onBlur: handleBlur,
-    onDoubleClick: handleDoubleClick,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown
-  };
-};
-
-exports.useCellEditing = useCellEditing;
-//# sourceMappingURL=useCellEditing.js.map

package/cjs/useCellEditing.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCellEditing.js","sources":["../../../packages/vuu-table/src/useCellEditing.ts"],"sourcesContent":["import { isCharacterKey } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  useCallback,\n} from \"react\";\nimport { cellIsTextInput } from \"./table-dom-utils\";\n\nexport interface CellEditingHookProps {\n  navigate: () => void;\n}\n\nexport const useCellEditing = ({ navigate }: CellEditingHookProps) => {\n  const commitHandler = useCallback(() => {\n    navigate();\n  }, [navigate]);\n\n  const editInput = useCallback(\n    (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n      const cellEl = evt.target as HTMLDivElement;\n      const input = cellEl.matches(\"input\")\n        ? (cellEl as HTMLInputElement)\n        : cellEl.querySelector(\"input\");\n\n      if (input) {\n        input.focus();\n      }\n    },\n    [],\n  );\n\n  const focusInput = useCallback(\n    (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n      const cellEl = evt.target as HTMLDivElement;\n      const input = cellEl.querySelector(\"input\");\n      if (input) {\n        input.focus();\n      }\n    },\n    [],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLElement>) => {\n      const el = e.target as HTMLElement;\n      if (cellIsTextInput(el)) {\n        if (isCharacterKey(e.key)) {\n          editInput(e);\n        } else if (e.key === \"Enter\") {\n          focusInput(e);\n        }\n      }\n    },\n    [editInput, focusInput],\n  );\n\n  const handleDoubleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const el = e.target as HTMLElement;\n      if (el.matches(\"input\") || el.querySelector(\"input\")) {\n        editInput(e);\n        e.stopPropagation();\n      }\n    },\n    [editInput],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.removeEventListener(\"vuu-commit\", commitHandler, true);\n    },\n    [commitHandler],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.addEventListener(\"vuu-commit\", commitHandler, true);\n    },\n    [commitHandler],\n  );\n\n  return {\n    onBlur: handleBlur,\n    onDoubleClick: handleDoubleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":["useCallback","cellIsTextInput","isCharacterKey"],"mappings":";;;;;;AAaO,MAAM,cAAiB,GAAA,CAAC,EAAE,QAAA,EAAqC,KAAA;AACpE,EAAM,MAAA,aAAA,GAAgBA,kBAAY,MAAM;AACtC,IAAS,QAAA,EAAA;AAAA,GACX,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,SAAY,GAAAA,iBAAA;AAAA,IAChB,CAAC,GAAmE,KAAA;AAClE,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,KAAA,GAAQ,OAAO,OAAQ,CAAA,OAAO,IAC/B,MACD,GAAA,MAAA,CAAO,cAAc,OAAO,CAAA;AAEhC,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,KAAA,CAAM,KAAM,EAAA;AAAA;AACd,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,GAAmE,KAAA;AAClE,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,aAAA,CAAc,OAAO,CAAA;AAC1C,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,KAAA,CAAM,KAAM,EAAA;AAAA;AACd,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,CAAuC,KAAA;AACtC,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAI,IAAAC,6BAAA,CAAgB,EAAE,CAAG,EAAA;AACvB,QAAI,IAAAC,uBAAA,CAAe,CAAE,CAAA,GAAG,CAAG,EAAA;AACzB,UAAA,SAAA,CAAU,CAAC,CAAA;AAAA,SACb,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,OAAS,EAAA;AAC5B,UAAA,UAAA,CAAW,CAAC,CAAA;AAAA;AACd;AACF,KACF;AAAA,IACA,CAAC,WAAW,UAAU;AAAA,GACxB;AAEA,EAAA,MAAM,iBAAoB,GAAAF,iBAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAA,IAAI,GAAG,OAAQ,CAAA,OAAO,KAAK,EAAG,CAAA,aAAA,CAAc,OAAO,CAAG,EAAA;AACpD,QAAA,SAAA,CAAU,CAAC,CAAA;AACX,QAAA,CAAA,CAAE,eAAgB,EAAA;AAAA;AACpB,KACF;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAG,EAAA,CAAA,mBAAA,CAAoB,YAAc,EAAA,aAAA,EAAe,IAAI,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,WAAc,GAAAA,iBAAA;AAAA,IAClB,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAG,EAAA,CAAA,gBAAA,CAAiB,YAAc,EAAA,aAAA,EAAe,IAAI,CAAA;AAAA,KACvD;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAO,OAAA;AAAA,IACL,MAAQ,EAAA,UAAA;AAAA,IACR,aAAe,EAAA,iBAAA;AAAA,IACf,OAAS,EAAA,WAAA;AAAA,IACT,SAAW,EAAA;AAAA,GACb;AACF;;;;"}

package/cjs/useCellFocus.js

@@ -1,119 +0,0 @@
-'use strict';
-
-var react = require('react');
-var tableDomUtils = require('./table-dom-utils.js');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-
-const getCellPosition = (el) => {
-  const top = parseInt(el.parentElement?.style.top ?? "-1");
-  return { top };
-};
-const isDifferentCellPosition = (currentPos, newPos) => {
-  if (currentPos === void 0) {
-    return true;
-  }
-  return currentPos[0] !== newPos[0] || currentPos[1] !== newPos[1];
-};
-const useCellFocus = ({
-  cellFocusStateRef,
-  containerRef,
-  disableFocus = false,
-  requestScroll
-}) => {
-  const focusCellPlaceholderRef = react.useCallback(
-    (el) => {
-      cellFocusStateRef.current.placeholderEl = el;
-    },
-    [cellFocusStateRef]
-  );
-  const focusCell = react.useCallback(
-    (cellPos) => {
-      if (containerRef.current) {
-        const { current: state } = cellFocusStateRef;
-        if (isDifferentCellPosition(state.cellPos, cellPos)) {
-          const activeCell = tableDomUtils.getTableCell(containerRef, cellPos);
-          if (activeCell) {
-            if (activeCell !== state.el) {
-              state.el?.removeAttribute("tabindex");
-              activeCell.setAttribute("tabindex", "0");
-              state.el = activeCell;
-              state.pos = getCellPosition(activeCell);
-              state.outsideViewport = false;
-              if (state.placeholderEl) {
-                state.placeholderEl.style.top = `${state.pos.top}px`;
-              }
-            }
-            state.cellPos = cellPos;
-            requestScroll?.({ type: "scroll-row", rowIndex: cellPos[0] });
-            activeCell.focus({ preventScroll: true });
-          }
-        }
-      }
-    },
-    [cellFocusStateRef, containerRef, requestScroll]
-  );
-  const setTableBodyRef = react.useCallback(
-    (el) => {
-      if (el) {
-        const { current: state } = cellFocusStateRef;
-        const table = vuuUtils.queryClosest(el, ".vuuTable");
-        if (table) {
-          if (state.el === null && !disableFocus) {
-            const headerCell = table.querySelector(
-              tableDomUtils.headerCellQuery(1)
-            );
-            if (headerCell) {
-              headerCell.setAttribute("tabindex", "0");
-              state.cellPos = [1, 1];
-              state.el = headerCell;
-              state.pos = { top: -20 };
-              if (state.placeholderEl) {
-                state.placeholderEl.style.top = `-20px`;
-              }
-            } else {
-              const cell = table.querySelector(
-                tableDomUtils.dataCellQuery(0, 0)
-              );
-              if (cell) {
-                cell.setAttribute("tabindex", "0");
-                state.cellPos = [1, 1];
-                state.el = cell;
-                state.pos = { top: 0 };
-                if (state.placeholderEl) {
-                  state.placeholderEl.style.top = `0px`;
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    [cellFocusStateRef, disableFocus]
-  );
-  const focusCellPlaceholderKeyDown = react.useCallback(
-    (evt) => {
-      const { outsideViewport, pos } = cellFocusStateRef.current;
-      if (pos && vuuUtils.isArrowKey(evt.key)) {
-        if (outsideViewport === "above") {
-          requestScroll?.({ type: "scroll-top", scrollPos: pos.top });
-        } else if (outsideViewport === "below") {
-          requestScroll?.({ type: "scroll-bottom", scrollPos: pos.top });
-        } else {
-          throw Error(
-            `cellFocusPlaceholder should not have focus if inside viewport`
-          );
-        }
-      }
-    },
-    [cellFocusStateRef, requestScroll]
-  );
-  return {
-    focusCell,
-    focusCellPlaceholderKeyDown,
-    focusCellPlaceholderRef,
-    setTableBodyRef
-  };
-};
-
-exports.useCellFocus = useCellFocus;
-//# sourceMappingURL=useCellFocus.js.map

package/cjs/useCellFocus.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCellFocus.js","sources":["../../../packages/vuu-table/src/useCellFocus.ts"],"sourcesContent":["import {\n  KeyboardEventHandler,\n  RefCallback,\n  RefObject,\n  useCallback,\n} from \"react\";\nimport {\n  dataCellQuery,\n  getTableCell,\n  headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { CellPos } from \"@vuu-ui/vuu-table-types\";\nimport type { ICellFocusState } from \"./CellFocusState\";\n\nexport interface CellFocusHookProps {\n  cellFocusStateRef: RefObject<ICellFocusState>;\n  containerRef: RefObject<HTMLElement | null>;\n  disableFocus?: boolean;\n  requestScroll?: ScrollRequestHandler;\n}\n\nconst getCellPosition = (el: HTMLElement) => {\n  const top = parseInt(el.parentElement?.style.top ?? \"-1\");\n  return { top };\n};\n\nconst isDifferentCellPosition = (\n  currentPos: CellPos | undefined,\n  newPos: CellPos,\n) => {\n  if (currentPos === undefined) {\n    return true;\n  }\n  return currentPos[0] !== newPos[0] || currentPos[1] !== newPos[1];\n};\n\nexport type FocusCell = (cellPos: CellPos, fromKeyboard?: boolean) => void;\n\nexport const useCellFocus = ({\n  cellFocusStateRef,\n  containerRef,\n  disableFocus = false,\n  requestScroll,\n}: CellFocusHookProps) => {\n  const focusCellPlaceholderRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      cellFocusStateRef.current.placeholderEl = el;\n    },\n    [cellFocusStateRef],\n  );\n\n  const focusCell = useCallback<FocusCell>(\n    (cellPos) => {\n      if (containerRef.current) {\n        const { current: state } = cellFocusStateRef;\n        if (isDifferentCellPosition(state.cellPos, cellPos)) {\n          const activeCell = getTableCell(containerRef, cellPos);\n          if (activeCell) {\n            if (activeCell !== state.el) {\n              state.el?.removeAttribute(\"tabindex\");\n              activeCell.setAttribute(\"tabindex\", \"0\");\n\n              // TODO no need to measure if we're navigating horizontally\n              // state.cellPos = cellPos;\n              state.el = activeCell;\n              state.pos = getCellPosition(activeCell);\n              state.outsideViewport = false;\n\n              if (state.placeholderEl) {\n                state.placeholderEl.style.top = `${state.pos.top}px`;\n              }\n            }\n            state.cellPos = cellPos;\n\n            requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n            // if (activeCell.classList.contains(\"vuuTableCell-editable\")) {\n            //   const input = activeCell.querySelector(\"input\");\n            //   if (input) {\n            //     input.focus({ preventScroll: true });\n            //   } else {\n            //     activeCell.focus({ preventScroll: true });\n            //   }\n            // } else {\n            activeCell.focus({ preventScroll: true });\n            // }\n          }\n        }\n      }\n    },\n    [cellFocusStateRef, containerRef, requestScroll],\n  );\n\n  const setTableBodyRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        const { current: state } = cellFocusStateRef;\n        const table = queryClosest<HTMLDivElement>(el, \".vuuTable\");\n        if (table) {\n          if (state.el === null && !disableFocus) {\n            const headerCell = table.querySelector<HTMLDivElement>(\n              headerCellQuery(1),\n            );\n            if (headerCell) {\n              headerCell.setAttribute(\"tabindex\", \"0\");\n              state.cellPos = [1, 1];\n              state.el = headerCell;\n              state.pos = { top: -20 };\n              if (state.placeholderEl) {\n                state.placeholderEl.style.top = `-20px`;\n              }\n            } else {\n              const cell = table.querySelector<HTMLDivElement>(\n                dataCellQuery(0, 0),\n              );\n              if (cell) {\n                cell.setAttribute(\"tabindex\", \"0\");\n                state.cellPos = [1, 1];\n                state.el = cell;\n                state.pos = { top: 0 };\n                if (state.placeholderEl) {\n                  state.placeholderEl.style.top = `0px`;\n                }\n              }\n            }\n          }\n        }\n      }\n    },\n    [cellFocusStateRef, disableFocus],\n  );\n\n  const focusCellPlaceholderKeyDown = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      const { outsideViewport, pos } = cellFocusStateRef.current;\n      if (pos && isArrowKey(evt.key)) {\n        // TODO depends on whether we're scrolling up or down\n        if (outsideViewport === \"above\") {\n          requestScroll?.({ type: \"scroll-top\", scrollPos: pos.top });\n        } else if (outsideViewport === \"below\") {\n          requestScroll?.({ type: \"scroll-bottom\", scrollPos: pos.top });\n        } else {\n          throw Error(\n            `cellFocusPlaceholder should not have focus if inside viewport`,\n          );\n        }\n      }\n    },\n    [cellFocusStateRef, requestScroll],\n  );\n\n  return {\n    focusCell,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    setTableBodyRef,\n  };\n};\n"],"names":["useCallback","getTableCell","queryClosest","headerCellQuery","dataCellQuery","isArrowKey"],"mappings":"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"}

package/cjs/useControlledTableNavigation.js

@@ -1,46 +0,0 @@
-'use strict';
-
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var react = require('react');
-
-const isRowSelectionKey = (key) => key === "Enter" || key === " ";
-const useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = react.useRef(null);
-  const [highlightedIndexRef, setHighlightedIndex] = vuuUtils.useStateRef(initialValue);
-  const handleKeyDown = react.useCallback(
-    (e) => {
-      if (e.key === "ArrowDown") {
-        setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));
-      } else if (e.key === "ArrowUp") {
-        setHighlightedIndex((index = -1) => Math.max(0, index - 1));
-      } else if (isRowSelectionKey(e.key)) {
-        const { current: rowIdx } = highlightedIndexRef;
-        if (typeof rowIdx === "number") {
-          const rowEl = tableRef.current?.querySelector(
-            `[aria-rowindex="${rowIdx + 1}"]`
-          );
-          if (rowEl) {
-            vuuUtils.dispatchMouseEvent(rowEl, "click");
-          }
-        }
-      }
-    },
-    [highlightedIndexRef, rowCount, setHighlightedIndex]
-  );
-  const handleHighlight = react.useCallback(
-    (idx) => {
-      setHighlightedIndex(idx);
-    },
-    [setHighlightedIndex]
-  );
-  return {
-    highlightedIndexRef,
-    onHighlight: handleHighlight,
-    onKeyDown: handleKeyDown,
-    tableRef
-  };
-};
-
-exports.isRowSelectionKey = isRowSelectionKey;
-exports.useControlledTableNavigation = useControlledTableNavigation;
-//# sourceMappingURL=useControlledTableNavigation.js.map

package/cjs/useControlledTableNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useControlledTableNavigation.js","sources":["../../../packages/vuu-table/src/useControlledTableNavigation.ts"],"sourcesContent":["import { dispatchMouseEvent, useStateRef } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const isRowSelectionKey = (key: string) =>\n  key === \"Enter\" || key === \" \";\n\nexport const useControlledTableNavigation = (\n  initialValue: number,\n  rowCount: number,\n) => {\n  const tableRef = useRef<HTMLDivElement>(null);\n\n  const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n    number | undefined\n  >(initialValue);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"ArrowDown\") {\n        setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n      } else if (e.key === \"ArrowUp\") {\n        setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n      } else if (isRowSelectionKey(e.key)) {\n        const { current: rowIdx } = highlightedIndexRef;\n        // induce an onSelect event by 'clicking' the row\n        if (typeof rowIdx === \"number\") {\n          const rowEl = tableRef.current?.querySelector(\n            `[aria-rowindex=\"${rowIdx + 1}\"]`,\n          ) as HTMLElement;\n          if (rowEl) {\n            dispatchMouseEvent(rowEl, \"click\");\n          }\n        }\n      }\n    },\n    [highlightedIndexRef, rowCount, setHighlightedIndex],\n  );\n\n  const handleHighlight = useCallback(\n    (idx: number) => {\n      setHighlightedIndex(idx);\n    },\n    [setHighlightedIndex],\n  );\n\n  return {\n    highlightedIndexRef,\n    onHighlight: handleHighlight,\n    onKeyDown: handleKeyDown,\n    tableRef,\n  };\n};\n"],"names":["useRef","useStateRef","useCallback","dispatchMouseEvent"],"mappings":";;;;;AAGO,MAAM,iBAAoB,GAAA,CAAC,GAChC,KAAA,GAAA,KAAQ,WAAW,GAAQ,KAAA;AAEhB,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAWA,aAAuB,IAAI,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAIC,qBAEjD,YAAY,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA;AAAA,OACjD,MAAA,IAAA,iBAAA,CAAkB,CAAE,CAAA,GAAG,CAAG,EAAA;AACnC,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA;AAE5B,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,YAC9B,CAAA,gBAAA,EAAmB,SAAS,CAAC,CAAA,EAAA;AAAA,WAC/B;AACA,UAAA,IAAI,KAAO,EAAA;AACT,YAAAC,2BAAA,CAAmB,OAAO,OAAO,CAAA;AAAA;AACnC;AACF;AACF,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB;AAAA,GACrD;AAEA,EAAA,MAAM,eAAkB,GAAAD,iBAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB;AAAA,GACtB;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX;AAAA,GACF;AACF;;;;;"}

package/cjs/useEditableCell.js

@@ -1,27 +0,0 @@
-'use strict';
-
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var react = require('react');
-
-const useEditableCell = () => {
-  return react.useCallback((evt) => {
-    if (evt.key === "Enter") {
-      const el = evt.target;
-      const inputElement = el.querySelector("input");
-      if (inputElement !== document.activeElement) {
-        inputElement?.focus();
-      }
-    } else if (evt.key === "Escape") {
-      const input = vuuUtils.queryClosest(evt.target, "input");
-      const cell = vuuUtils.queryClosest(input, ".vuuTableCell");
-      if (cell) {
-        cell.tabIndex = 0;
-        cell.focus();
-        evt.stopPropagation();
-      }
-    }
-  }, []);
-};
-
-exports.useEditableCell = useEditableCell;
-//# sourceMappingURL=useEditableCell.js.map

package/cjs/useEditableCell.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEditableCell.js","sources":["../../../packages/vuu-table/src/useEditableCell.ts"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback } from \"react\";\n\nexport const useEditableCell = () => {\n  return useCallback<KeyboardEventHandler<HTMLDivElement>>((evt) => {\n    if (evt.key === \"Enter\") {\n      const el = evt.target as HTMLElement;\n      const inputElement = el.querySelector(\"input\");\n      if (inputElement !== document.activeElement) {\n        inputElement?.focus();\n      }\n    } else if (evt.key === \"Escape\") {\n      const input = queryClosest<HTMLInputElement>(evt.target, \"input\");\n      const cell = queryClosest(input, \".vuuTableCell\");\n      if (cell) {\n        cell.tabIndex = 0;\n        cell.focus();\n        evt.stopPropagation();\n      }\n    }\n  }, []);\n};\n"],"names":["useCallback","queryClosest"],"mappings":";;;;;AAGO,MAAM,kBAAkB,MAAM;AACnC,EAAO,OAAAA,iBAAA,CAAkD,CAAC,GAAQ,KAAA;AAChE,IAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,MAAA,MAAM,KAAK,GAAI,CAAA,MAAA;AACf,MAAM,MAAA,YAAA,GAAe,EAAG,CAAA,aAAA,CAAc,OAAO,CAAA;AAC7C,MAAI,IAAA,YAAA,KAAiB,SAAS,aAAe,EAAA;AAC3C,QAAA,YAAA,EAAc,KAAM,EAAA;AAAA;AACtB,KACF,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC/B,MAAA,MAAM,KAAQ,GAAAC,qBAAA,CAA+B,GAAI,CAAA,MAAA,EAAQ,OAAO,CAAA;AAChE,MAAM,MAAA,IAAA,GAAOA,qBAAa,CAAA,KAAA,EAAO,eAAe,CAAA;AAChD,MAAA,IAAI,IAAM,EAAA;AACR,QAAA,IAAA,CAAK,QAAW,GAAA,CAAA;AAChB,QAAA,IAAA,CAAK,KAAM,EAAA;AACX,QAAA,GAAA,CAAI,eAAgB,EAAA;AAAA;AACtB;AACF,GACF,EAAG,EAAE,CAAA;AACP;;;;"}

package/cjs/useKeyboardNavigation.js

@@ -1,323 +0,0 @@
-'use strict';
-
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var core = require('@salt-ds/core');
-var react = require('react');
-var tableDomUtils = require('./table-dom-utils.js');
-
-const rowNavigationKeys = /* @__PURE__ */ new Set([
-  "Home",
-  "End",
-  "PageUp",
-  "PageDown",
-  "ArrowDown",
-  "ArrowUp"
-]);
-const CellLocator = ".vuuTableCell,.vuuTableHeaderCell,.vuuTableGroupHeaderCell";
-const CellControlLocator = ".vuuColumnMenu,.vuuColumnHeaderPill";
-const cellNavigationKeys = new Set(rowNavigationKeys);
-cellNavigationKeys.add("ArrowLeft");
-cellNavigationKeys.add("ArrowRight");
-const isNavigationKey = (key, navigationStyle) => {
-  switch (navigationStyle) {
-    case "cell":
-    case "tree":
-      return cellNavigationKeys.has(key);
-    case "row":
-      return rowNavigationKeys.has(key);
-    default:
-      return false;
-  }
-};
-const focusControlWithinCell = (e, el) => {
-  if (e.shiftKey && e.key.match(/Arrow(Left|Right)/)) {
-    if (el?.classList.contains("vuuTableHeaderCell")) {
-      const menuButton = el?.querySelector(".vuuColumnMenu");
-      if (menuButton) {
-        menuButton.focus();
-        return true;
-      }
-    } else if (el?.classList.contains("vuuTableGroupHeaderCell")) {
-      const headerPill = el?.querySelector(
-        ".vuuColumnHeaderPill"
-      );
-      if (headerPill) {
-        headerPill.focus();
-        return true;
-      }
-    } else if (el?.classList.contains("vuuColumnHeaderPill")) {
-      const nextPill = el.parentElement?.nextElementSibling?.firstChild;
-      if (nextPill?.classList.contains("vuuColumnHeaderPill")) {
-        nextPill.focus();
-        return true;
-      } else {
-        const removeButton = vuuUtils.queryClosest(
-          el,
-          ".vuuTableGroupHeaderCell",
-          true
-        ).querySelector(".vuuTableGroupHeaderCell-removeAll");
-        if (removeButton) {
-          removeButton.focus();
-          return true;
-        }
-      }
-    }
-  }
-  return false;
-};
-const PageKeys = ["Home", "End", "PageUp", "PageDown"];
-const isPagingKey = (key) => PageKeys.includes(key);
-const useKeyboardNavigation = ({
-  cellFocusStateRef,
-  columnCount = 0,
-  containerRef,
-  defaultHighlightedIndex,
-  disableHighlightOnFocus,
-  editSessionInProgress,
-  focusCell,
-  headerCount,
-  highlightedIndex: highlightedIndexProp,
-  navigationStyle,
-  requestScroll,
-  onHighlight,
-  onToggleGroup,
-  rowCount = 0,
-  viewportRowCount
-}) => {
-  const highlightedIndexRef = react.useRef(void 0);
-  const [highlightedIndex, setHighlightedIdx] = core.useControlled({
-    controlled: highlightedIndexProp,
-    default: defaultHighlightedIndex,
-    name: "UseKeyboardNavigation"
-  });
-  highlightedIndexRef.current = highlightedIndex;
-  const maxRowIndex = rowCount + headerCount;
-  const setHighlightedIndex = react.useCallback(
-    (idx) => {
-      onHighlight?.(idx);
-      setHighlightedIdx(idx);
-      highlightedIndexRef.current = idx;
-    },
-    [onHighlight, setHighlightedIdx]
-  );
-  const setActiveCell = react.useCallback(
-    (rowIdx, colIdx) => {
-      const pos = [rowIdx, colIdx];
-      if (navigationStyle === "row") {
-        setHighlightedIdx(rowIdx);
-      } else {
-        focusCell(pos);
-      }
-    },
-    [focusCell, navigationStyle, setHighlightedIdx]
-  );
-  const nextPageItemIdx = react.useCallback(
-    (key, [rowIdx, colIdx]) => new Promise((resolve) => {
-      let newRowIdx = rowIdx;
-      switch (key) {
-        case "PageDown": {
-          newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
-          if (newRowIdx !== rowIdx) {
-            requestScroll?.({ type: "scroll-page", direction: "down" });
-          }
-          break;
-        }
-        case "PageUp": {
-          newRowIdx = Math.max(0, rowIdx - viewportRowCount);
-          if (newRowIdx !== rowIdx) {
-            requestScroll?.({ type: "scroll-page", direction: "up" });
-          }
-          break;
-        }
-        case "Home": {
-          newRowIdx = headerCount + 1;
-          if (newRowIdx !== rowIdx) {
-            requestScroll?.({ type: "scroll-end", direction: "home" });
-          }
-          break;
-        }
-        case "End": {
-          newRowIdx = rowCount + headerCount;
-          if (newRowIdx !== rowIdx) {
-            requestScroll?.({ type: "scroll-end", direction: "end" });
-          }
-          break;
-        }
-      }
-      setTimeout(() => {
-        resolve([newRowIdx, colIdx]);
-      }, 35);
-    }),
-    [headerCount, requestScroll, rowCount, viewportRowCount]
-  );
-  const handleFocus = react.useCallback(() => {
-    if (disableHighlightOnFocus !== true) {
-      if (containerRef.current?.contains(document.activeElement)) {
-        const focusedCell = tableDomUtils.getFocusedCell(document.activeElement);
-        if (focusedCell) {
-          cellFocusStateRef.current.cell = focusedCell;
-          if (navigationStyle === "row") {
-            setHighlightedIdx(cellFocusStateRef.current.cellPos?.[0]);
-          }
-        }
-      }
-    }
-  }, [
-    disableHighlightOnFocus,
-    containerRef,
-    cellFocusStateRef,
-    navigationStyle,
-    setHighlightedIdx
-  ]);
-  const navigateChildItems = react.useCallback(
-    async (navigationStyle2 = "cell", key, shiftKey = false) => {
-      const { cellPos } = cellFocusStateRef.current;
-      if (cellPos === void 0) {
-        throw Error("navigateChildItems called before cellPos is set");
-      }
-      const [rowIdx, colIdx] = cellPos;
-      let nextRowIdx = -1, nextColIdx = -1;
-      if (isPagingKey(key)) {
-        [nextRowIdx, nextColIdx] = await nextPageItemIdx(key, cellPos);
-      } else {
-        const treeNodeOperation = tableDomUtils.getTreeNodeOperation(
-          containerRef,
-          navigationStyle2,
-          cellPos,
-          key,
-          shiftKey
-        );
-        if (treeNodeOperation === "expand" || treeNodeOperation === "collapse") {
-          onToggleGroup(treeNodeOperation, rowIdx - headerCount - 1);
-        } else if (treeNodeOperation === "level-up") {
-          [nextRowIdx, nextColIdx] = tableDomUtils.getLevelUp(containerRef, cellPos);
-        } else if (editSessionInProgress) {
-          [nextRowIdx, nextColIdx] = tableDomUtils.getNextEditableCellPos(
-            containerRef,
-            key,
-            cellPos,
-            columnCount,
-            maxRowIndex
-          );
-        } else {
-          [nextRowIdx, nextColIdx] = tableDomUtils.getNextCellPos(
-            key,
-            cellPos,
-            columnCount,
-            maxRowIndex
-          );
-        }
-      }
-      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
-        setActiveCell(nextRowIdx, nextColIdx);
-        setHighlightedIndex(nextRowIdx);
-      }
-    },
-    [
-      cellFocusStateRef,
-      nextPageItemIdx,
-      containerRef,
-      editSessionInProgress,
-      onToggleGroup,
-      headerCount,
-      columnCount,
-      maxRowIndex,
-      setActiveCell,
-      setHighlightedIndex
-    ]
-  );
-  const scrollRowIntoViewIfNecessary = react.useCallback(
-    (rowIndex) => {
-      requestScroll?.({ type: "scroll-row", rowIndex });
-    },
-    [requestScroll]
-  );
-  const moveHighlightedRow = react.useCallback(
-    async (key) => {
-      const { current: highlighted } = highlightedIndexRef;
-      const [nextRowIdx] = isPagingKey(key) ? await nextPageItemIdx(key, [highlighted ?? -1, 0]) : tableDomUtils.getNextCellPos(key, [highlighted ?? -1, 0], columnCount, maxRowIndex);
-      if (nextRowIdx !== highlighted) {
-        setHighlightedIndex(nextRowIdx);
-        scrollRowIntoViewIfNecessary(nextRowIdx);
-      }
-    },
-    [
-      columnCount,
-      maxRowIndex,
-      nextPageItemIdx,
-      scrollRowIntoViewIfNecessary,
-      setHighlightedIndex
-    ]
-  );
-  react.useEffect(() => {
-    if (highlightedIndexProp !== void 0 && highlightedIndexProp !== -1) {
-      requestAnimationFrame(() => {
-        scrollRowIntoViewIfNecessary(highlightedIndexProp);
-      });
-    }
-  }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
-  const handleKeyDown = react.useCallback(
-    (e) => {
-      const cell = vuuUtils.queryClosest(
-        e.target,
-        `${CellLocator},${CellControlLocator}`
-      );
-      if (tableDomUtils.cellDropdownShowing(cell)) {
-        return;
-      }
-      if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (navigationStyle === "row") {
-          moveHighlightedRow(e.key);
-        } else if (navigationStyle !== "none") {
-          if (!focusControlWithinCell(e, cell)) {
-            navigateChildItems(navigationStyle, e.key, e.shiftKey);
-          }
-        }
-      }
-    },
-    [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]
-  );
-  const handleClick = react.useCallback(
-    // Might not be a cell e.g the Settings button
-    (evt) => {
-      const target = vuuUtils.queryClosest(evt.target, CellLocator);
-      const focusedCell = tableDomUtils.getFocusedCell(target);
-      if (focusedCell) {
-        const [rowIdx, colIdx] = tableDomUtils.getAriaCellPos(focusedCell);
-        setActiveCell(rowIdx, colIdx);
-      }
-    },
-    [setActiveCell]
-  );
-  const handleMouseLeave = react.useCallback(() => {
-    setHighlightedIndex(-1);
-  }, [setHighlightedIndex]);
-  const handleMouseMove = react.useCallback(
-    (evt) => {
-      const rowIdx = tableDomUtils.closestRowIndex(evt.target);
-      if (rowIdx !== -1 && rowIdx !== highlightedIndexRef.current) {
-        setHighlightedIndex(rowIdx);
-      }
-    },
-    [setHighlightedIndex]
-  );
-  const navigateCell = react.useCallback(() => {
-    navigateChildItems("cell", "ArrowDown");
-  }, [navigateChildItems]);
-  return {
-    highlightedIndexRef,
-    navigateCell,
-    onClick: handleClick,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    onMouseLeave: navigationStyle === "row" ? handleMouseLeave : void 0,
-    onMouseMove: navigationStyle === "row" ? handleMouseMove : void 0
-  };
-};
-
-exports.isNavigationKey = isNavigationKey;
-exports.isPagingKey = isPagingKey;
-exports.useKeyboardNavigation = useKeyboardNavigation;
-//# sourceMappingURL=useKeyboardNavigation.js.map