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

import {
  useFocusHandler
} from "./chunk-F5W73ZFA.mjs";
import {
  useTableContext
} from "./chunk-A4IWBDSQ.mjs";

// src/editable-table/editable-components/checkbox.tsx
import { flexRender } from "@tanstack/react-table";
import { useEffect, useRef } from "react";
import { jsx } from "react/jsx-runtime";
function EditableCheckBox(props) {
  const cellRef = useRef(null);
  const { isCurrentCellFocused, focusCurrentCell } = useFocusHandler({
    cellType: "dataCell" /* dataCell */,
    columnIndex: props.cell.column.getIndex(),
    groupId: null,
    rowId: props.cell.row.id,
    rowIndex: props.cell.row.index
  });
  const { tableRef } = useTableContext();
  const metaData = props.cell.column.columnDef.meta;
  const onKeyDown = (e) => {
    const tableWrapper = tableRef.current;
    const activeElement = document.activeElement;
    if (activeElement && activeElement.tagName === "INPUT" && !(tableWrapper == null ? void 0 : tableWrapper.contains(activeElement)) || e.key === "Tab") {
      return;
    }
  };
  useEffect(() => {
    var _a, _b;
    if (isCurrentCellFocused && ((_a = tableRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
      (_b = cellRef.current) == null ? void 0 : _b.focus();
    }
  }, [isCurrentCellFocused]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...metaData.label ? { "aria-label": metaData.label(props.cell.row.original) } : { "aria-labelledby": props.cell.row.id },
      role: "checkbox",
      "aria-checked": props.cell.row.getIsSelected(),
      ref: cellRef,
      className: "td-content flex h-6 w-6 items-center justify-center outline-purple-600",
      onClick: (e) => {
        var _a;
        if (e.target.tagName.toLowerCase() === "input") {
          focusCurrentCell();
          return;
        }
        const checkbox = (_a = cellRef.current) == null ? void 0 : _a.querySelector('input[type="checkbox"]');
        checkbox == null ? void 0 : checkbox.click();
        focusCurrentCell();
      },
      onKeyDown: (e) => {
        var _a;
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          const checkbox = (_a = cellRef.current) == null ? void 0 : _a.querySelector('input[type="checkbox"]');
          if (checkbox) {
            checkbox.click();
          }
        }
        onKeyDown(e);
      },
      tabIndex: isCurrentCellFocused ? 0 : -1,
      children: flexRender(props.cell.column.columnDef.cell, {
        ...props.cell.getContext(),
        tabIndex: -1
      })
    }
  );
}

export {
  EditableCheckBox
};