@hitachivantara/uikit-react-core/dist/cjs/InlineEditor/InlineEditor.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const useControlled = require("../hooks/useControlled.cjs");
const useEnhancedEffect = require("../hooks/useEnhancedEffect.cjs");
const icons = require("../icons.cjs");
const generic = require("../types/generic.cjs");
const keyboardUtils = require("../utils/keyboardUtils.cjs");
const InlineEditor_styles = require("./InlineEditor.styles.cjs");
const Button = require("../Button/Button.cjs");
const Input = require("../Input/Input.cjs");
const Tooltip = require("../Tooltip/Tooltip.cjs");
const Typography = require("../Typography/Typography.cjs");
const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, ref) {
  const {
    className,
    classes: classesProp,
    value: valueProp,
    defaultValue = "",
    showIcon,
    component: InputComponent = Input.HvInput,
    variant = "body",
    placeholder = "Enter text",
    onBlur,
    onChange,
    onKeyDown,
    buttonProps,
    typographyProps,
    disabled,
    ...others
  } = uikitReactUtils.useDefaultProps("HvInlineEditor", props);
  const { classes, cx } = InlineEditor_styles.useClasses(classesProp);
  const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
  const [editMode, setEditMode] = React.useState(false);
  const [cachedValue, setCachedValue] = React.useState(value);
  const inputRef = React.useRef(void 0);
  const { activeTheme } = uikitReactUtils.useTheme();
  const [isOverflowing, setIsOverflowing] = React.useState(false);
  const typographyStyles = activeTheme?.typography[variant] || {};
  const { lineHeight } = typographyStyles;
  const checkOverflow = (el) => {
    if (!el) return;
    setIsOverflowing(el.scrollWidth > el.clientWidth);
  };
  useEnhancedEffect.useEnhancedEffect(() => {
    const input = inputRef.current;
    if (editMode && input) {
      input.focus();
      input.select();
    }
  }, [editMode]);
  const handleClick = () => {
    setEditMode(true);
    setCachedValue(value);
  };
  const handleBlur = (event) => {
    setEditMode(false);
    const newValue = value || cachedValue;
    setValue(newValue);
    onBlur?.(event, newValue);
  };
  const handleKeyDown = (event) => {
    let newValue = value;
    if (keyboardUtils.isKey(event, "Esc")) {
      newValue = cachedValue;
      setEditMode(false);
      setValue(newValue);
    }
    onKeyDown?.(event, newValue);
  };
  const handleChange = (event, val) => {
    setValue(val);
    onChange?.(event, val);
  };
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
    InputComponent,
    {
      ref,
      inputRef,
      classes: {
        inputRoot: classes.inputRoot,
        input: classes.input
      },
      inputProps: {
        style: {
          ...typographyStyles,
          height: InputComponent === Input.HvInput ? lineHeight : void 0
        }
      },
      value,
      onBlur: handleBlur,
      onChange: handleChange,
      onKeyDown: handleKeyDown,
      ...others
    }
  ) : /* @__PURE__ */ jsxRuntime.jsx(
    Button.HvButton,
    {
      variant: "secondaryGhost",
      endIcon: /* @__PURE__ */ jsxRuntime.jsx(
        icons.HvIcon,
        {
          compact: true,
          name: "Edit",
          color: "textDisabled",
          className: cx(classes.icon, {
            [classes.iconVisible]: showIcon
          })
        }
      ),
      className: cx(classes.button, {
        [classes.largeText]: parseInt(lineHeight, 10) >= 28
      }),
      onClick: handleClick,
      disabled,
      ...buttonProps,
      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: isOverflowing && value, children: /* @__PURE__ */ jsxRuntime.jsx(
        Typography.HvTypography,
        {
          component: "div",
          ref: checkOverflow,
          variant,
          noWrap: true,
          className: cx(classes.text, { [classes.textEmpty]: !value }),
          ...typographyProps,
          children: value || placeholder
        }
      ) })
    }
  ) });
});
exports.inlineEditorClasses = InlineEditor_styles.staticClasses;
exports.HvInlineEditor = HvInlineEditor;