@trail-ui/react/dist/chunk-SSX6C2M6.mjs

import {
  useTableContext
} from "./chunk-LRSSE262.mjs";

// src/editable-table/focus-handler/focus-handler-provider.tsx
import React, {
  createContext,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState
} from "react";
import { jsx } from "react/jsx-runtime";
var FocusHandlerContext = createContext({
  tableRef: React.createRef(),
  focusedCell: { columnIndex: 0, rowIndex: 0, isHeader: true },
  setFocusedCell: () => {
  }
});
function FocusHandlerContextProvider(props) {
  const [focusedCell, setFocusedCell] = useState({
    columnIndex: 0,
    rowIndex: 0,
    isHeader: true
  });
  const tableRef = useRef(null);
  const child = props.children;
  const cloned = useMemo(() => React.cloneElement(child, { ref: tableRef }), [child]);
  function updateData(data) {
    setFocusedCell(data);
  }
  useEffect(() => {
    const handleKeyDown = (e) => {
      var _a, _b;
      if (!tableRef.current || !tableRef.current.contains(e.target)) {
        return;
      }
      const activeElement = document.activeElement;
      const isInsideCustomSelect = (el) => {
        return el && (el.closest('[role="listbox"]') || el.closest('[role="combobox"]'));
      };
      if ((activeElement == null ? void 0 : activeElement.tagName) === "SELECT" || (activeElement == null ? void 0 : activeElement.tagName) === "INPUT" || isInsideCustomSelect(activeElement)) {
        return;
      }
      const { rowIndex, columnIndex, isHeader } = focusedCell;
      const rows = props.table.getRowModel().rows;
      const tableHeaders = ((_a = props.table.getHeaderGroups()[0]) == null ? void 0 : _a.headers) || [];
      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
        e.preventDefault();
        let newRowIndex = rowIndex;
        let newColumnIndex = columnIndex;
        let newIsHeader = isHeader;
        switch (e.key) {
          case "ArrowUp":
            if (isHeader) {
              return;
            }
            if (rowIndex === 0) {
              newIsHeader = true;
            } else {
              newRowIndex = rowIndex - 1;
            }
            break;
          case "ArrowDown":
            if (isHeader) {
              newIsHeader = false;
              newRowIndex = 0;
            } else {
              newRowIndex = Math.min(rows.length - 1, newRowIndex + 1);
            }
            break;
          case "ArrowLeft": {
            newColumnIndex = Math.max(0, newColumnIndex - 1);
            break;
          }
          case "ArrowRight": {
            newColumnIndex = Math.min(tableHeaders.length - 1, newColumnIndex + 1);
            break;
          }
        }
        setFocusedCell({
          rowIndex: newRowIndex,
          columnIndex: newColumnIndex,
          isHeader: newIsHeader
        });
        const cellSelector = newIsHeader ? `.th-content[data-row="header"][data-col="${newColumnIndex}"]` : `.td-content[data-row="${newRowIndex}"][data-col="${newColumnIndex}"]`;
        const cellToFocus = tableRef.current.querySelector(cellSelector);
        if (cellToFocus) {
          cellToFocus.focus();
        }
      }
      if (e.key === "Enter" && isHeader) {
        const header = (_b = tableHeaders[columnIndex]) == null ? void 0 : _b.column;
        if (header == null ? void 0 : header.getCanSort()) {
          header.toggleSorting();
        }
      }
    };
    const table = tableRef.current;
    table == null ? void 0 : table.addEventListener("keydown", handleKeyDown);
    return () => table == null ? void 0 : table.removeEventListener("keydown", handleKeyDown);
  }, [focusedCell, props.table]);
  return /* @__PURE__ */ jsx(FocusHandlerContext.Provider, { value: { focusedCell, setFocusedCell: updateData, tableRef }, children: cloned });
}
function useFocusHandler(cell, isHeader) {
  var _a, _b;
  const { focusedCell, setFocusedCell, tableRef } = useContext(FocusHandlerContext);
  const { table } = useTableContext(cell);
  const pageIndex = (_a = table == null ? void 0 : table.getState().pagination.pageIndex) != null ? _a : 0;
  const pageSize = (_b = table == null ? void 0 : table.getState().pagination.pageSize) != null ? _b : 10;
  const localRowIndex = cell ? cell.row.index - pageIndex * pageSize : 0;
  const isCurrentCellFocused = focusedCell.isHeader === isHeader && focusedCell.rowIndex === localRowIndex && focusedCell.columnIndex === (cell == null ? void 0 : cell.column.getIndex());
  function focusCurrentCell() {
    if (!cell)
      return;
    setFocusedCell({
      columnIndex: cell.column.getIndex(),
      rowIndex: localRowIndex,
      // 👈 Should be page-local
      isHeader: isHeader != null ? isHeader : false
    });
  }
  return { focusedCell, setFocusedCell, tableRef, isCurrentCellFocused, focusCurrentCell };
}

export {
  FocusHandlerContext,
  FocusHandlerContextProvider,
  useFocusHandler
};