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

import {
  EditableSelect
} from "./chunk-QTCZKGT5.mjs";
import {
  EditableSwitch
} from "./chunk-DFUVC6JZ.mjs";
import {
  EditableTextInput
} from "./chunk-3UONC4P3.mjs";
import {
  EditableCheckBox
} from "./chunk-HXVQQY3E.mjs";
import {
  EditableLink
} from "./chunk-YGWBI4J5.mjs";
import {
  EditableMultiSelect
} from "./chunk-DJZB45OW.mjs";
import {
  useFocusHandler
} from "./chunk-F5W73ZFA.mjs";
import {
  useTableContext
} from "./chunk-A4IWBDSQ.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,
  isCellDisabled = () => false
}) {
  var _a;
  const { isCurrentCellFocused: isFocused, focusCurrentCell } = useFocusHandler({
    cellType: "dataCell" /* dataCell */,
    columnIndex: cell.column.getIndex(),
    groupId: null,
    rowId: cell.row.id,
    rowIndex: cell.row.index
  });
  const { tableRef, doesRowHeaderExist } = useTableContext();
  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 _a2, _b;
    if (isFocused && ((_a2 = tableRef.current) == null ? void 0 : _a2.contains(document.activeElement))) {
      (_b = cellRef.current) == null ? void 0 : _b.focus();
    }
  }, [isFocused]);
  const onCancel = () => {
    setTimeout(() => {
      var _a2;
      (_a2 = cellRef.current) == null ? void 0 : _a2.focus();
    }, 10);
    setIsEditing(false);
  };
  function defaultView() {
    return (
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
      /* @__PURE__ */ jsxs(
        "div",
        {
          ref: cellRef,
          className: `td-content ${isEditable ? "editable group flex cursor-pointer items-center justify-between gap-2" : "non-editable"} hover:bg-muted relative rounded p-0.5 outline-purple-600 focus:outline focus:outline-2`,
          onClick: () => {
            if (isEditable) {
              setIsEditing(true);
            }
            focusCurrentCell();
          },
          onKeyDown,
          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" })
          ]
        }
      )
    );
  }
  function getEditableComponent() {
    switch (columnMeta == null ? void 0 : columnMeta.type) {
      case "link":
        return /* @__PURE__ */ jsx(EditableLink, { cell });
      case "switch":
        return /* @__PURE__ */ jsx(EditableSwitch, { cell, isCellDisabled });
      case "checkbox":
        return /* @__PURE__ */ jsx(EditableCheckBox, { cell });
      default: {
        if (isEditing) {
          switch (columnMeta == null ? void 0 : columnMeta.type) {
            case "date":
            case "text":
            case "number":
              return /* @__PURE__ */ jsx(EditableTextInput, { cell, onCancel });
            case "select":
              return /* @__PURE__ */ jsx(EditableSelect, { cell, onCancel });
            case "multiselect":
              return /* @__PURE__ */ jsx(EditableMultiSelect, { cell, onCancel });
          }
        }
        return defaultView();
      }
    }
  }
  const Element = cell.column.columnDef.columnType === "th" ? "th" : "td";
  return /* @__PURE__ */ jsx(
    Element,
    {
      style: {
        minWidth: cell.column.columnDef.size === 100 ? "auto" : cell.column.columnDef.size,
        maxWidth: cell.column.columnDef.size === 100 ? "auto" : cell.column.columnDef.size,
        width: cell.column.columnDef.size === 100 ? "auto" : cell.column.columnDef.size
      },
      headers: [
        ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.type) !== "checkbox" && cell.column.id,
        cell.row.original.editableTableGroupId,
        Element !== "th" && doesRowHeaderExist && cell.row.id
      ].filter(Boolean).join(" "),
      ...Element === "th" ? { scope: "row", id: cell.row.id } : {},
      className: `${cell.row.getIsSelected() ? "bg-purple-50" : "bg-neutral-50"} border-b border-r border-neutral-200 px-2 py-2 text-left text-sm font-normal text-neutral-900 last:border-r-0`,
      children: getEditableComponent()
    }
  );
}

export {
  EditableTableCell
};