@grafana/ui/dist/cjs/components/Input/AutoSizeInput.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var measureText = require('../../utils/measureText.cjs');
var AutoSizeInputContext = require('./AutoSizeInputContext.cjs');
var Input = require('./Input.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
const AutoSizeInput = React__namespace.forwardRef((props, ref) => {
  const {
    defaultValue = "",
    minWidth = 10,
    maxWidth,
    onCommitChange,
    onChange,
    onKeyDown,
    onBlur,
    value: controlledValue,
    placeholder,
    ...restProps
  } = props;
  const [inputState, setInputValue] = useControlledState(controlledValue, onChange);
  const inputValue = inputState != null ? inputState : defaultValue;
  const inputWidth = React.useMemo(() => {
    const displayValue = inputValue || placeholder || "";
    const valueString = typeof displayValue === "string" ? displayValue : displayValue.toString();
    return getWidthFor(valueString, minWidth, maxWidth);
  }, [placeholder, inputValue, minWidth, maxWidth]);
  return /* @__PURE__ */ jsxRuntime.jsx(AutoSizeInputContext.AutoSizeInputContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
    Input.Input,
    {
      "data-testid": "autosize-input",
      ...restProps,
      placeholder,
      ref,
      value: inputValue.toString(),
      onChange: (event) => {
        if (onChange) {
          onChange(event);
        }
        setInputValue(event.currentTarget.value);
      },
      width: inputWidth,
      onBlur: (event) => {
        if (onBlur) {
          onBlur(event);
        } else if (onCommitChange) {
          onCommitChange(event);
        }
      },
      onKeyDown: (event) => {
        if (onKeyDown) {
          onKeyDown(event);
        } else if (event.key === "Enter" && onCommitChange) {
          onCommitChange(event);
        }
      }
    }
  ) });
});
function getWidthFor(value, minWidth, maxWidth) {
  if (!value) {
    return minWidth;
  }
  const extraSpace = 3;
  const realWidth = measureText.measureText(value.toString(), 14).width / 8 + extraSpace;
  if (minWidth && realWidth < minWidth) {
    return minWidth;
  }
  if (maxWidth && realWidth > maxWidth) {
    return maxWidth;
  }
  return realWidth;
}
AutoSizeInput.displayName = "AutoSizeInput";
function useControlledState(controlledValue, onChange) {
  const isControlledNow = controlledValue !== void 0 && onChange !== void 0;
  const isControlledRef = React.useRef(isControlledNow);
  const hasLoggedControlledWarning = React.useRef(false);
  if (isControlledNow !== isControlledRef.current && !hasLoggedControlledWarning.current) {
    console.warn(
      "An AutoSizeInput is changing from an uncontrolled to a controlled input. If you want to control the input, the empty value should be an empty string."
    );
    hasLoggedControlledWarning.current = true;
  }
  const [internalValue, setInternalValue] = React__namespace.useState(controlledValue);
  React.useEffect(() => {
    if (!isControlledRef.current) {
      setInternalValue(controlledValue);
    }
  }, [controlledValue]);
  const handleChange = React.useCallback((newValue) => {
    if (!isControlledRef.current) {
      setInternalValue(newValue);
    }
  }, []);
  const value = isControlledRef.current ? controlledValue : internalValue;
  return [value, handleChange];
}

exports.AutoSizeInput = AutoSizeInput;
//# sourceMappingURL=AutoSizeInput.cjs.map