import {
  __objRest,
  __spreadValues
} from "./chunk-2NMEKWO5.js";

// src/atoms/auto-sizing-input.tsx
import {
  forwardRef,
  useCallback,
  useEffect,
  useRef,
  useState
} from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var AutoSizingInput = forwardRef(
  (_a, ref) => {
    var _b = _a, { value: _value, onChangeValue, onChange } = _b, rest = __objRest(_b, ["value", "onChangeValue", "onChange"]);
    const [value, setValue] = useState(_value);
    const [width, setWidth] = useState(0);
    const span = useRef(null);
    const defaultRef = useRef(null);
    const inputRef = ref || defaultRef;
    useEffect(() => {
      span.current && setWidth(span.current.offsetWidth);
    }, [value]);
    const changeHandler = useCallback(
      (evt) => {
        onChange == null ? void 0 : onChange(evt);
        setValue(evt.target.value);
      },
      [onChange]
    );
    useEffect(() => {
      setValue(_value || "");
    }, [_value]);
    useEffect(() => {
      onChangeValue == null ? void 0 : onChangeValue(value || "");
    }, [value, onChangeValue]);
    const onClick = useCallback(() => {
      var _a2;
      if ("current" in inputRef) {
        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
      }
    }, [inputRef]);
    const onKeyDown = useCallback(
      (evt) => {
        if (evt.key === "Enter") {
          onClick();
        }
      },
      [onClick]
    );
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: "auto-sizing-input wrapper",
        onClick,
        onKeyDown,
        role: "button",
        style: { width: `${width + 24}px` },
        tabIndex: 0,
        children: [
          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ref: span, style: rest.style, children: value || rest.placeholder || "" }),
          /* @__PURE__ */ jsx(
            "input",
            __spreadValues({
              onChange: changeHandler,
              ref: inputRef,
              value
            }, rest)
          )
        ]
      }
    );
  }
);
AutoSizingInput.displayName = "AutoSizingInput";

export {
  AutoSizingInput
};
//# sourceMappingURL=chunk-XTHDFSN3.js.map