@trail-ui/react/dist/chunk-3UONC4P3.mjs

import {
  customToast
} from "./chunk-W6QAAZ3M.mjs";
import {
  _Input
} from "./chunk-2ARW3G6Z.mjs";
import {
  useFocusHandler
} from "./chunk-F5W73ZFA.mjs";
import {
  useTableContext
} from "./chunk-A4IWBDSQ.mjs";
import {
  replaceSpacesWithHyphens
} from "./chunk-4CU75PXA.mjs";

// src/editable-table/editable-components/text-input.tsx
import { useEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
function EditableTextInput(props) {
  var _a;
  const [value, setValue] = useState("");
  const [initialValue, setinitialValue] = useState("");
  const inputRef = useRef(null);
  const { updateData, tableRef, tableName, doesRowHeaderExist } = useTableContext(
    props.cell
  );
  const { isCurrentCellFocused } = useFocusHandler({
    cellType: "dataCell" /* dataCell */,
    columnIndex: props.cell.column.getIndex(),
    groupId: null,
    rowId: props.cell.row.id,
    rowIndex: props.cell.row.index
  });
  const columnMeta = props.cell.column.columnDef.meta;
  const cancelAndExit = () => {
    setValue(typeof props.cell.getValue() === "string" ? props.cell.getValue() : "");
    requestAnimationFrame(() => {
      props.onCancel();
    });
  };
  const saveAndExit = () => {
    const isEmpty = value !== initialValue && value.trim().length === 0;
    if (isEmpty) {
      customToast("Value cannot be empty", "error");
      cancelAndExit();
      return;
    }
    if (value !== initialValue) {
      updateData(value);
    }
    requestAnimationFrame(() => {
      props.onCancel();
    });
  };
  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;
    }
    if (e.key === "Enter") {
      saveAndExit();
      e.preventDefault();
    } else if (e.key === "Escape") {
      cancelAndExit();
      e.preventDefault();
    }
  };
  useEffect(() => {
    var _a2;
    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
    setinitialValue(props.cell.getValue());
    setValue(props.cell.getValue());
  }, []);
  useEffect(() => {
    var _a2, _b;
    if (isCurrentCellFocused && ((_a2 = tableRef.current) == null ? void 0 : _a2.contains(document.activeElement))) {
      (_b = inputRef.current) == null ? void 0 : _b.focus();
    }
  }, [isCurrentCellFocused]);
  useEffect(() => {
    function saveData(e) {
      var _a2;
      if (!((_a2 = inputRef.current) == null ? void 0 : _a2.contains(e.target))) {
        if (value) {
          saveAndExit();
        } else {
          cancelAndExit();
        }
      }
    }
    document.addEventListener("mousedown", saveData);
    return () => document.removeEventListener("mousedown", saveData);
  }, [value]);
  return /* @__PURE__ */ jsx(
    _Input,
    {
      className: `max-w-[${props.cell.column.columnDef.size}px]`,
      type: columnMeta.type,
      ...columnMeta.label ? { label: columnMeta.label(props.cell.row.original) } : {
        "aria-labelledby": `${doesRowHeaderExist ? props.cell.row.id : ""} ${replaceSpacesWithHyphens(tableName)}-${props.cell.column.getIndex()}`
      },
      ...columnMeta.type === "number" ? { step: (_a = columnMeta == null ? void 0 : columnMeta.step) != null ? _a : 0.25 } : {},
      ref: inputRef,
      value,
      onChange: (e) => setValue(e.target.value),
      onKeyDown
    }
  );
}

export {
  EditableTextInput
};