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

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

// src/editable-table/editable-components/select.tsx
import { useEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
function EditableSelect(props) {
  const [initialValue, setInitialValue] = useState("");
  const [newValue, setNewValue] = useState("");
  const selectRef = useRef(null);
  const baseRef = 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 metaData = props.cell.column.columnDef.meta;
  const cancelAndExit = () => {
    setNewValue(props.cell.getValue());
    requestAnimationFrame(() => {
      props.onCancel();
    });
  };
  const saveAndExit = () => {
    const isEmpty = newValue.toString().trim().length === 0;
    if (isEmpty) {
      customToast("Value cannot be empty", "error");
      cancelAndExit();
      return;
    }
    if (newValue !== initialValue) {
      updateData(newValue);
    }
    requestAnimationFrame(() => {
      props.onCancel();
    });
  };
  useEffect(() => {
    var _a;
    (_a = selectRef.current) == null ? void 0 : _a.focus();
    setInitialValue(props.cell.getValue());
    setNewValue(props.cell.getValue());
  }, []);
  useEffect(() => {
    var _a;
    if (selectRef.current && selectRef.current.tagName !== "BUTTON") {
      (_a = selectRef.current) == null ? void 0 : _a.select();
    }
  }, [initialValue]);
  useEffect(() => {
    var _a, _b;
    if (isCurrentCellFocused && ((_a = tableRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
      (_b = selectRef.current) == null ? void 0 : _b.focus();
    }
  }, [isCurrentCellFocused]);
  useEffect(() => {
    function saveData(e) {
      var _a;
      if (!((_a = baseRef.current) == null ? void 0 : _a.contains(e.target))) {
        if (newValue !== initialValue) {
          saveAndExit();
        } else {
          cancelAndExit();
        }
      }
    }
    document.addEventListener("mousedown", saveData);
    return () => document.removeEventListener("mousedown", saveData);
  }, [newValue]);
  return /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx(
    customSelect_default,
    {
      ref: selectRef,
      baseRef,
      ...metaData.label ? { label: metaData.label(props.cell.row.original) } : {
        ariaLabelledBy: `${doesRowHeaderExist ? props.cell.row.id : ""} ${replaceSpacesWithHyphens(tableName)}-${props.cell.column.getIndex()}`
      },
      options: metaData.options,
      value: newValue,
      placeholder: metaData.placeholder,
      onChange: (e) => setNewValue(e),
      classNames: {
        label: "hidden"
      },
      onKeyDown: (e, isOpen) => {
        if (e.key === "Enter" && !isOpen) {
          saveAndExit();
        } else if (e.key === "Escape" && !isOpen) {
          cancelAndExit();
          e.preventDefault();
        }
      },
      renderCustomLabel: metaData.renderCustomLabel
    }
  ) });
}

export {
  EditableSelect
};