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

import {
  EditableNumberInput
} from "./chunk-KDVKUGLD.mjs";
import {
  EditableSelect
} from "./chunk-37SVFYN7.mjs";
import {
  EditableSwitch
} from "./chunk-RULODFCW.mjs";
import {
  EditableTextInput
} from "./chunk-KK7NE26K.mjs";
import {
  EditableCheckBox
} from "./chunk-QQRAUFUU.mjs";
import {
  EditableLink
} from "./chunk-LWHFPHYA.mjs";
import {
  EditableMultiSelect
} from "./chunk-HCCISASY.mjs";
import {
  useFocusHandler
} from "./chunk-SSX6C2M6.mjs";

// src/editable-table/editable-table-cell.tsx
import { useEffect, useRef, useState } from "react";
import { PencilIcon } from "@trail-ui/icons";
import { flexRender } from "@tanstack/react-table";
import { jsx, jsxs } from "react/jsx-runtime";
function EditableTableCell({
  cell,
  rowHeaderId,
  checkBoxSelectedName,
  isCellDisabled = () => false
}) {
  const {
    isCurrentCellFocused: isFocused,
    focusCurrentCell,
    tableRef
  } = useFocusHandler(cell, false);
  const columnMeta = cell.column.columnDef.meta;
  const [isEditing, setIsEditing] = useState(false);
  const cellRef = useRef(null);
  const isEditable = columnMeta && ["link", "multiselect", "text", "date", "number", "select", "switch"].includes(
    columnMeta.type
  ) && !isCellDisabled(cell.row.original, cell.column.columnDef.id);
  const onKeyDown = (e) => {
    if (e.key === "Enter" && isEditable) {
      setIsEditing(true);
      e.preventDefault();
    }
  };
  useEffect(() => {
    var _a, _b;
    if (isFocused && ((_a = tableRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
      (_b = cellRef.current) == null ? void 0 : _b.focus();
    }
  }, [isFocused]);
  const onCancel = () => {
    setTimeout(() => {
      var _a;
      (_a = cellRef.current) == null ? void 0 : _a.focus();
    }, 10);
    setIsEditing(false);
  };
  function defaultView() {
    return (
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
      /* @__PURE__ */ jsxs(
        "div",
        {
          ref: cellRef,
          id: checkBoxSelectedName === cell.column.id ? rowHeaderId : "",
          className: `td-content ${isEditable ? "editable group flex cursor-pointer items-center justify-between gap-2" : "non-editable"} hover:bg-muted relative rounded outline-purple-600 focus:outline focus:outline-1`,
          onClick: () => {
            if (isEditable)
              setIsEditing(true);
            focusCurrentCell();
          },
          onKeyDown,
          onFocus: focusCurrentCell,
          tabIndex: isFocused ? 0 : -1,
          children: [
            flexRender(cell.column.columnDef.cell, cell.getContext()),
            isEditable && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " Editable" }),
            isEditable && /* @__PURE__ */ jsx(PencilIcon, { className: "text-muted-foreground h-4 w-4 flex-shrink-0 opacity-0 transition-opacity group-hover:opacity-100 group-focus:opacity-100" })
          ]
        }
      )
    );
  }
  switch (columnMeta == null ? void 0 : columnMeta.type) {
    case "link":
      return /* @__PURE__ */ jsx(
        EditableLink,
        {
          cell,
          rowHeaderId,
          checkBoxSelectedName
        }
      );
    case "switch":
      return /* @__PURE__ */ jsx(
        EditableSwitch,
        {
          cell,
          headerId: rowHeaderId || "",
          isCellDisabled
        }
      );
    case "checkbox":
      return /* @__PURE__ */ jsx(EditableCheckBox, { cell });
    default: {
      if (isEditing) {
        switch (columnMeta == null ? void 0 : columnMeta.type) {
          case "date":
          case "text":
            return /* @__PURE__ */ jsx(EditableTextInput, { cell, onCancel });
          case "number":
            return /* @__PURE__ */ jsx(EditableNumberInput, { cell, onCancel });
          case "select":
            return /* @__PURE__ */ jsx(EditableSelect, { cell, onCancel });
          case "multiselect":
            return /* @__PURE__ */ jsx(EditableMultiSelect, { cell, onCancel });
        }
      } else {
        return defaultView();
      }
    }
  }
}

export {
  EditableTableCell
};