@salutejs/plasma-new-hope 0.326.1-canary.2043.15852251108.0 → 0.327.0-canary.1741.15743877104.0

package/cjs/components/TextField/TextField.js

@@ -20,7 +20,6 @@ var TextField_styles = require('./TextField.styles.js');
 var TextField_tokens = require('./TextField.tokens.js');
 var Hint = require('./ui/Hint/Hint.js');
 var getInputWidth = require('./getInputWidth.js');
-var react = require('../../utils/react.js');
 var useOutsideClick = require('../../hooks/useOutsideClick.js');
 var useKeyNavigation = require('./hooks/useKeyNavigation.js');
 var TextFieldChip = require('./ui/TextFieldChip/TextFieldChip.js');
@@ -29,426 +28,391 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "keepPlaceholder", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "hasRequiredIndicator", "titleCaption", "chipView", "chipValidator", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintTargetPlacement", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "chipType", "onChange", "onChangeChips", "onSearch", "onKeyDown", "onFocus", "onBlur", "_onEnterDisabled", "_forceChipManipulationWithReadonly"];
-var optionalText = 'optional';
-var base = "bpunezx";
-var HINT_DEFAULT_OFFSET = [0, 0];
-var textFieldRoot = function textFieldRoot(Root) {
-  return /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var _inputRef$current, _inputRef$current4;
-    var id = _ref.id,
-      className = _ref.className,
-      style = _ref.style,
-      contentLeft = _ref.contentLeft,
-      contentRight = _ref.contentRight,
-      label = _ref.label,
-      labelPlacement = _ref.labelPlacement,
-      keepPlaceholder = _ref.keepPlaceholder,
-      textBefore = _ref.textBefore,
-      textAfter = _ref.textAfter,
-      placeholder = _ref.placeholder,
-      leftHelper = _ref.leftHelper,
-      _ref$enumerationType = _ref.enumerationType,
-      enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
-      _ref$requiredPlacemen = _ref.requiredPlacement,
-      requiredPlacement = _ref$requiredPlacemen === void 0 ? 'right' : _ref$requiredPlacemen,
-      _ref$hasRequiredIndic = _ref.hasRequiredIndicator,
-      hasRequiredIndicator = _ref$hasRequiredIndic === void 0 ? true : _ref$hasRequiredIndic,
-      titleCaption = _ref.titleCaption,
-      _ref$chipView = _ref.chipView,
-      chipView = _ref$chipView === void 0 ? 'default' : _ref$chipView,
-      chipValidator = _ref.chipValidator,
-      _ref$hintTrigger = _ref.hintTrigger,
-      hintTrigger = _ref$hintTrigger === void 0 ? 'hover' : _ref$hintTrigger,
-      hintText = _ref.hintText,
-      _ref$hintView = _ref.hintView,
-      hintView = _ref$hintView === void 0 ? 'default' : _ref$hintView,
-      _ref$hintSize = _ref.hintSize,
-      hintSize = _ref$hintSize === void 0 ? 'm' : _ref$hintSize,
-      hintTargetIcon = _ref.hintTargetIcon,
-      _ref$hintTargetPlacem = _ref.hintTargetPlacement,
-      hintTargetPlacement = _ref$hintTargetPlacem === void 0 ? 'outer' : _ref$hintTargetPlacem,
-      _ref$hintPlacement = _ref.hintPlacement,
-      hintPlacement = _ref$hintPlacement === void 0 ? 'auto' : _ref$hintPlacement,
-      hintHasArrow = _ref.hintHasArrow,
-      _ref$hintOffset = _ref.hintOffset,
-      hintOffset = _ref$hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _ref$hintOffset,
-      hintWidth = _ref.hintWidth,
-      hintContentLeft = _ref.hintContentLeft,
-      view = _ref.view,
-      size = _ref.size,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      _ref$clear = _ref.clear,
-      clear = _ref$clear === void 0 ? false : _ref$clear,
-      optional = _ref.optional,
-      hasDivider = _ref.hasDivider,
-      outerValue = _ref.value,
-      values = _ref.chips,
-      _ref$chipType = _ref.chipType,
-      chipType = _ref$chipType === void 0 ? 'default' : _ref$chipType,
-      onChange = _ref.onChange,
-      onChangeChips = _ref.onChangeChips,
-      onSearch = _ref.onSearch,
-      onKeyDown = _ref.onKeyDown,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      _onEnterDisabled = _ref._onEnterDisabled,
-      _forceChipManipulationWithReadonly = _ref._forceChipManipulationWithReadonly,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-    var contentRef = React.useRef(null);
-    var inputContainerRef = React.useRef(null);
-    var inputRef = React.useRef(null);
-    var inputForkRef = plasmaCore.useForkRef(inputRef, ref);
-    var chipsRefs = React.useRef([]);
-    var controlledRefs = {
-      contentRef: contentRef,
-      inputRef: inputRef,
-      chipsRefs: chipsRefs
-    };
-    var _useState = React.useState(Boolean(outerValue) || Boolean(inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || Boolean(rest === null || rest === void 0 ? void 0 : rest.defaultValue)),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      hasValue = _useState2[0],
-      setHasValue = _useState2[1];
-    var _useState3 = React.useState(false),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      hasFocus = _useState4[0],
-      setHasFocus = _useState4[1];
-    var _useState5 = React.useState([]),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      chips = _useState6[0],
-      setChips = _useState6[1];
-    var _useState7 = React.useState(false),
-      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      isHintVisible = _useState8[0],
-      setIsHintVisible = _useState8[1];
-    var uniqId = react.safeUseId();
-    var innerId = id || uniqId;
-    var labelId = react.safeUseId();
-    var helperTextId = react.safeUseId();
-    var isDefaultView = view === 'default' || readOnly || disabled;
-    var isChipEnumeration = enumerationType === 'chip';
-    var isChipsVisible = isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length);
-    var withHasChips = isChipsVisible ? TextField_tokens.classes.hasChips : undefined;
-    var hasLabelValue = Boolean(label);
-    var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
-    var hasOuterLabel = labelPlacement === 'outer' && hasLabelValue;
-    var innerKeepPlaceholder = keepPlaceholder && labelPlacement === 'inner';
-    var hasPlaceholder = Boolean(placeholder) && (innerKeepPlaceholder || !hasInnerLabel);
-    var hasTextAfter = Boolean(textAfter);
-    var hasTextBefore = textBefore && !isChipEnumeration;
-    if (labelPlacement === 'inner') {
-      if (!hasValue && !hasPlaceholder && !hasFocus) {
-        hasTextAfter = false;
-        hasTextBefore = false;
-      }
+const optionalText = 'optional';
+const base = "bpunezx";
+const HINT_DEFAULT_OFFSET = [0, 0];
+const textFieldRoot = Root => /*#__PURE__*/React.forwardRef(({
+  id,
+  className,
+  style,
+  // layout
+  contentLeft,
+  contentRight,
+  label,
+  labelPlacement,
+  keepPlaceholder,
+  textBefore,
+  textAfter,
+  placeholder,
+  leftHelper,
+  enumerationType = 'plain',
+  requiredPlacement = 'right',
+  hasRequiredIndicator = true,
+  titleCaption,
+  chipView = 'default',
+  chipValidator,
+  // hint
+  hintTrigger = 'hover',
+  hintText,
+  hintView = 'default',
+  hintSize = 'm',
+  hintTargetIcon,
+  hintTargetPlacement = 'outer',
+  hintPlacement = 'auto',
+  hintHasArrow,
+  hintOffset = HINT_DEFAULT_OFFSET,
+  hintWidth,
+  hintContentLeft,
+  // variations
+  view,
+  size,
+  readOnly = false,
+  disabled = false,
+  required = false,
+  clear = false,
+  optional,
+  hasDivider,
+  // controlled
+  value: outerValue,
+  chips: values,
+  chipType = 'default',
+  // events
+  onChange,
+  onChangeChips,
+  onSearch,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  // Пропсы для внутреннего использования, не отдается наружу.
+  // @ts-ignore
+  _onEnterDisabled,
+  // @ts-ignore
+  _forceChipManipulationWithReadonly,
+  ...rest
+}, ref) => {
+  const contentRef = React.useRef(null);
+  const inputContainerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const inputForkRef = plasmaCore.useForkRef(inputRef, ref);
+  const chipsRefs = React.useRef([]);
+  const controlledRefs = {
+    contentRef,
+    inputRef,
+    chipsRefs
+  };
+  const [hasValue, setHasValue] = React.useState(Boolean(outerValue) || Boolean(inputRef?.current?.value) || Boolean(rest?.defaultValue));
+  const [hasFocus, setHasFocus] = React.useState(false);
+  const [chips, setChips] = React.useState([]);
+  const [isHintVisible, setIsHintVisible] = React.useState(false);
+  const uniqId = plasmaCore.safeUseId();
+  const innerId = id || uniqId;
+  const labelId = plasmaCore.safeUseId();
+  const helperTextId = plasmaCore.safeUseId();
+  const isDefaultView = view === 'default' || readOnly || disabled;
+  const isChipEnumeration = enumerationType === 'chip';
+  const isChipsVisible = isChipEnumeration && Boolean(chips?.length);
+  const withHasChips = isChipsVisible ? TextField_tokens.classes.hasChips : undefined;
+  const hasLabelValue = Boolean(label);
+  const hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
+  const hasOuterLabel = labelPlacement === 'outer' && hasLabelValue;
+  const innerKeepPlaceholder = keepPlaceholder && labelPlacement === 'inner';
+  const hasPlaceholder = Boolean(placeholder) && (innerKeepPlaceholder || !hasInnerLabel);
+  let hasTextAfter = Boolean(textAfter);
+  let hasTextBefore = textBefore && !isChipEnumeration;
+  if (labelPlacement === 'inner') {
+    if (!hasValue && !hasPlaceholder && !hasFocus) {
+      hasTextAfter = false;
+      hasTextBefore = false;
     }
-    var hasPlaceholderPadding = hasInnerLabel && keepPlaceholder && size !== 'xs';
-    var innerLabelValue = hasInnerLabel || hasOuterLabel ? label : undefined;
-    var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
-    var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
-    var placeholderShown = Boolean(innerPlaceholderValue) && !hasValue;
-    var clearClass = clear ? TextField_tokens.classes.clear : undefined;
-    var hasDividerClass = hasDivider ? TextField_tokens.classes.hasDivider : undefined;
-    var hasInnerHintClass = hintText && hintTargetPlacement === 'outer' ? TextField_tokens.classes.hasHint : undefined;
-    var hasHintClass = hintText ? TextField_tokens.classes.hasHint : undefined;
-    var requiredPlacementClass = requiredPlacement === 'right' ? TextField_tokens.classes.requiredAlignRight : undefined;
-    var labelPlacementClass = innerLabelPlacementValue ? TextField_tokens.classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
-    var hasValueClass = hasValue ? TextField_tokens.classes.hasValue : undefined;
-    var keepPlaceholderClass = hasPlaceholder && placeholderShown && TextField_tokens.classes.keepPlaceholder;
-    var wrapperWithoutLeftContent = !contentLeft && isChipsVisible && chipType === 'default' ? TextField_tokens.classes.hasEmptyContentLeft : undefined;
-    var wrapperWithoutRightContent = !contentRight && isChipsVisible && chipType === 'default' ? TextField_tokens.classes.hasEmptyContentRight : undefined;
-    var contentRightCompensationMargin = !hasOuterLabel && hintText && hintTargetPlacement === 'inner' ? TextField_tokens.classes.contentRightCompensationMargin : undefined;
-    var hintRef = useOutsideClick.useOutsideClick(function () {
-      setIsHintVisible(false);
+  }
+  const hasPlaceholderPadding = hasInnerLabel && keepPlaceholder && size !== 'xs';
+  const innerLabelValue = hasInnerLabel || hasOuterLabel ? label : undefined;
+  const innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
+  const innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
+  const placeholderShown = Boolean(innerPlaceholderValue) && !hasValue;
+  const clearClass = clear ? TextField_tokens.classes.clear : undefined;
+  const hasDividerClass = hasDivider ? TextField_tokens.classes.hasDivider : undefined;
+  const hasInnerHintClass = hintText && hintTargetPlacement === 'outer' ? TextField_tokens.classes.hasHint : undefined;
+  const hasHintClass = hintText ? TextField_tokens.classes.hasHint : undefined;
+  const requiredPlacementClass = requiredPlacement === 'right' ? TextField_tokens.classes.requiredAlignRight : undefined;
+  const labelPlacementClass = innerLabelPlacementValue ? TextField_tokens.classes[`${innerLabelPlacementValue}LabelPlacement`] : undefined;
+  const hasValueClass = hasValue ? TextField_tokens.classes.hasValue : undefined;
+  const keepPlaceholderClass = hasPlaceholder && placeholderShown && TextField_tokens.classes.keepPlaceholder;
+  const wrapperWithoutLeftContent = !contentLeft && isChipsVisible && chipType === 'default' ? TextField_tokens.classes.hasEmptyContentLeft : undefined;
+  const wrapperWithoutRightContent = !contentRight && isChipsVisible && chipType === 'default' ? TextField_tokens.classes.hasEmptyContentRight : undefined;
+  const contentRightCompensationMargin = !hasOuterLabel && hintText && hintTargetPlacement === 'inner' ? TextField_tokens.classes.contentRightCompensationMargin : undefined;
+  const hintRef = useOutsideClick.useOutsideClick(() => {
+    setIsHintVisible(false);
+  });
+  const hintInnerRef = React.useRef(null);
+  const hintForkRef = plasmaCore.useForkRef(hintRef, hintInnerRef);
+  const handleInput = event => {
+    const {
+      value
+    } = event.target;
+    setHasValue(Boolean(value));
+  };
+  React.useEffect(() => {
+    if (hasTextAfter && inputRef.current) {
+      const textWidth = getInputWidth.getInputWidth(inputRef.current, inputContainerRef.current);
+      inputRef.current.style.width = `${textWidth}px`;
+    } else {
+      inputRef.current?.style.removeProperty('width');
+    }
+  }, [hasTextAfter]);
+  const handleFocus = event => {
+    setHasFocus(true);
+    onFocus?.(event);
+  };
+  const handleBlur = event => {
+    setHasFocus(false);
+    onBlur?.(event);
+  };
+  const handleHintShow = () => setIsHintVisible(true);
+  const handleHintHide = () => setIsHintVisible(false);
+  const handleHintClick = event => {
+    if (!hintText || hintTrigger !== 'click') {
+      return;
+    }
+    event.stopPropagation();
+    const targetIsPopover = event.target === hintInnerRef.current;
+    const rootHasTarget = hintInnerRef.current?.contains(event.target);
+    if (!targetIsPopover && !rootHasTarget) {
+      setIsHintVisible(true);
+    }
+  };
+  const handleChange = event => {
+    if (disabled || readOnly) {
+      return;
+    }
+    const {
+      maxLength,
+      value
+    } = event.target;
+    if (maxLength !== -1 && value.length > maxLength) {
+      return;
+    }
+    onChange?.(event);
+    if (hasTextAfter) {
+      const textWidth = getInputWidth.getInputWidth(event.currentTarget, inputContainerRef.current);
+      event.currentTarget.style.width = `${textWidth}px`;
+    }
+  };
+  const updateChips = (newChips, newValues) => {
+    setChips(newChips);
+    onChangeChips?.(newValues);
+  };
+  const {
+    handleInputKeydown,
+    handleChipKeyDown,
+    onChipClear,
+    handleContentKeyDown
+  } = useKeyNavigation.useKeyNavigation({
+    controlledRefs,
+    disabled,
+    readOnly,
+    chips,
+    enumerationType,
+    updateChips,
+    onSearch,
+    onChange,
+    onEnterDisabled: _onEnterDisabled
+  });
+  const onChipClick = event => event.stopPropagation();
+  const handleInputFocus = () => {
+    if (readOnly || disabled || !inputRef?.current) {
+      return;
+    }
+    inputRef.current.scrollTo({
+      top: 0,
+      left: inputRef.current.offsetLeft,
+      behavior: 'smooth'
     });
-    var hintInnerRef = React.useRef(null);
-    var hintForkRef = plasmaCore.useForkRef(hintRef, hintInnerRef);
-    var handleInput = function handleInput(event) {
-      var _ref2 = event.target,
-        value = _ref2.value;
-      setHasValue(Boolean(value));
-    };
-    React.useEffect(function () {
-      if (hasTextAfter && inputRef.current) {
-        var textWidth = getInputWidth.getInputWidth(inputRef.current, inputContainerRef.current);
-        inputRef.current.style.width = "".concat(textWidth, "px");
-      } else {
-        var _inputRef$current2;
-        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.style.removeProperty('width');
-      }
-    }, [hasTextAfter]);
-    var handleFocus = function handleFocus(event) {
-      setHasFocus(true);
-      onFocus === null || onFocus === void 0 || onFocus(event);
-    };
-    var handleBlur = function handleBlur(event) {
-      setHasFocus(false);
-      onBlur === null || onBlur === void 0 || onBlur(event);
-    };
-    var handleHintShow = function handleHintShow() {
-      return setIsHintVisible(true);
-    };
-    var handleHintHide = function handleHintHide() {
-      return setIsHintVisible(false);
-    };
-    var handleHintClick = function handleHintClick(event) {
-      var _hintInnerRef$current;
-      if (!hintText || hintTrigger !== 'click') {
-        return;
-      }
-      event.stopPropagation();
-      var targetIsPopover = event.target === hintInnerRef.current;
-      var rootHasTarget = (_hintInnerRef$current = hintInnerRef.current) === null || _hintInnerRef$current === void 0 ? void 0 : _hintInnerRef$current.contains(event.target);
-      if (!targetIsPopover && !rootHasTarget) {
-        setIsHintVisible(true);
-      }
-    };
-    var handleChange = function handleChange(event) {
-      if (disabled || readOnly) {
-        return;
-      }
-      var _event$target = event.target,
-        maxLength = _event$target.maxLength,
-        value = _event$target.value;
-      if (maxLength !== -1 && value.length > maxLength) {
-        return;
-      }
-      onChange === null || onChange === void 0 || onChange(event);
-      if (hasTextAfter) {
-        var textWidth = getInputWidth.getInputWidth(event.currentTarget, inputContainerRef.current);
-        event.currentTarget.style.width = "".concat(textWidth, "px");
-      }
-    };
-    var updateChips = function updateChips(newChips, newValues) {
-      setChips(newChips);
-      onChangeChips === null || onChangeChips === void 0 || onChangeChips(newValues);
-    };
-    var _useKeyNavigation = useKeyNavigation.useKeyNavigation({
-        controlledRefs: controlledRefs,
-        disabled: disabled,
-        readOnly: readOnly,
-        chips: chips,
-        enumerationType: enumerationType,
-        updateChips: updateChips,
-        onSearch: onSearch,
-        onChange: onChange,
-        onEnterDisabled: _onEnterDisabled
-      }),
-      handleInputKeydown = _useKeyNavigation.handleInputKeydown,
-      handleChipKeyDown = _useKeyNavigation.handleChipKeyDown,
-      onChipClear = _useKeyNavigation.onChipClear,
-      handleContentKeyDown = _useKeyNavigation.handleContentKeyDown;
-    var onChipClick = function onChipClick(event) {
-      return event.stopPropagation();
-    };
-    var handleInputFocus = function handleInputFocus() {
-      if (readOnly || disabled || !(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
-        return;
-      }
-      inputRef.current.scrollTo({
-        top: 0,
-        left: inputRef.current.offsetLeft,
-        behavior: 'smooth'
-      });
-      inputRef.current.focus();
-    };
-    var getRef = function getRef(element, index) {
-      if (element && chipsRefs !== null && chipsRefs !== void 0 && chipsRefs.current) {
-        chipsRefs.current[index] = element;
-      }
-    };
-    var handleOnKeyDown = function handleOnKeyDown(event) {
-      handleInputKeydown(event);
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
-    };
-    React.useEffect(function () {
-      if (!isChipEnumeration && !(values !== null && values !== void 0 && values.length)) {
-        return;
-      }
-      var newChips = (values === null || values === void 0 ? void 0 : values.map(function (value, index) {
-        return {
-          id: "".concat(index, "_").concat(value),
-          text: value
-        };
-      })) || [];
-      setChips(newChips);
-    }, [isChipEnumeration, values]);
-    React.useEffect(function () {
-      setHasValue(Boolean(rest === null || rest === void 0 ? void 0 : rest.defaultValue));
-    }, [rest.defaultValue]);
-    React.useEffect(function () {
-      var _inputRef$current3;
-      setHasValue(Boolean(outerValue) || Boolean(inputRef === null || inputRef === void 0 || (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value));
-    }, [outerValue, inputRef === null || inputRef === void 0 || (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.value]);
-    var innerOptional = Boolean(required ? false : optional);
-    var hasPlaceholderOptional = innerOptional && !innerLabelValue && !hasOuterLabel;
-    var optionalTextNode = innerOptional ? /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledOptionalText, null, Boolean(hasPlaceholderOptional ? innerPlaceholderValue : innerLabelValue) && '\xa0', optionalText) : null;
-    var classTextEllipsis =
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    // eslint-disable-next-line no-underscore-dangle
-    !rest._textEllipsisDisable && !textAfter ? TextField_tokens.classes.inputTextEllipsis : undefined;
-    return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
-      view: view,
-      size: size,
+    inputRef.current.focus();
+  };
+  const getRef = (element, index) => {
+    if (element && chipsRefs?.current) {
+      chipsRefs.current[index] = element;
+    }
+  };
+  const handleOnKeyDown = event => {
+    handleInputKeydown(event);
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+  React.useEffect(() => {
+    if (!isChipEnumeration && !values?.length) {
+      return;
+    }
+    const newChips = values?.map((value, index) => ({
+      id: `${index}_${value}`,
+      text: value
+    })) || [];
+    setChips(newChips);
+  }, [isChipEnumeration, values]);
+  React.useEffect(() => {
+    setHasValue(Boolean(rest?.defaultValue));
+  }, [rest.defaultValue]);
+  React.useEffect(() => {
+    setHasValue(Boolean(outerValue) || Boolean(inputRef?.current?.value));
+  }, [outerValue, inputRef?.current?.value]);
+  const innerOptional = Boolean(required ? false : optional);
+  const hasPlaceholderOptional = innerOptional && !innerLabelValue && !hasOuterLabel;
+  const optionalTextNode = innerOptional ? /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledOptionalText, null, Boolean(hasPlaceholderOptional ? innerPlaceholderValue : innerLabelValue) && '\xa0', optionalText) : null;
+  const classTextEllipsis =
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  // eslint-disable-next-line no-underscore-dangle
+  !rest._textEllipsisDisable && !textAfter ? TextField_tokens.classes.inputTextEllipsis : undefined;
+  return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
+    view: view,
+    size: size,
+    disabled: disabled,
+    readOnly: !disabled && readOnly,
+    labelPlacement: innerLabelPlacementValue,
+    onClick: handleInputFocus,
+    className: index.cx(labelPlacementClass, clearClass, hasDividerClass, hasInnerHintClass, TextField_tokens.classes.textFieldGroupItem, className),
+    style: style
+  }, hintText && {
+    hintView,
+    hintSize
+  }), (hasOuterLabel || titleCaption) && /*#__PURE__*/React__default.default.createElement(TextField_styles.OuterLabelWrapper, {
+    isInnerLabel: labelPlacement === 'inner'
+  }, hasOuterLabel && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledIndicatorWrapper, null, /*#__PURE__*/React__default.default.createElement(TextField_styles.Label, {
+    id: labelId,
+    htmlFor: id
+  }, innerLabelValue), hintText && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledHintWrapper, null, /*#__PURE__*/React__default.default.createElement(Hint.HintComponent, {
+    ref: hintForkRef,
+    hintText: hintText,
+    hintTrigger: hintTrigger,
+    isHintVisible: isHintVisible,
+    hintTargetIcon: hintTargetIcon,
+    hintPlacement: hintPlacement,
+    hintHasArrow: hintHasArrow,
+    hintOffset: hintOffset,
+    hintWidth: hintWidth,
+    hintContentLeft: hintContentLeft,
+    handleHintShow: handleHintShow,
+    handleHintHide: handleHintHide,
+    handleHintClick: handleHintClick
+  })), required && hasRequiredIndicator && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledIndicator, {
+    className: index.cx(TextField_tokens.classes.outerLabelPlacement, requiredPlacementClass, hasHintClass)
+  }), optionalTextNode), titleCaption && /*#__PURE__*/React__default.default.createElement(TextField_styles.TitleCaption, null, titleCaption)), /*#__PURE__*/React__default.default.createElement(TextField_styles.InputWrapper
+  // Ref для внутреннего использования. Не отдается наружу.
+  , {
+    ref: rest.inputWrapperRef
+    // TODO: #1544, и после убрать classes.inputWrapper
+    ,
+    className: index.cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent, TextField_tokens.classes.inputWrapper)
+  }, !hasOuterLabel && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, required && hasRequiredIndicator && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledIndicator, {
+    className: index.cx(TextField_tokens.classes.innerLabelPlacement, requiredPlacementClass)
+  }), hintText && hintTargetPlacement === 'outer' && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledHintWrapper, {
+    className: TextField_tokens.classes.innerLabelPlacement
+  }, /*#__PURE__*/React__default.default.createElement(Hint.HintComponent, {
+    ref: hintForkRef,
+    hintText: hintText,
+    hintTrigger: hintTrigger,
+    isHintVisible: isHintVisible,
+    hintTargetIcon: hintTargetIcon,
+    hintPlacement: hintPlacement,
+    hintHasArrow: hintHasArrow,
+    hintOffset: hintOffset,
+    hintWidth: hintWidth,
+    hintContentLeft: hintContentLeft,
+    size: size,
+    handleHintShow: handleHintShow,
+    handleHintHide: handleHintHide,
+    handleHintClick: handleHintClick,
+    isInnerLabel: true
+  }))), contentLeft && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledContentLeft, {
+    isClear: clear,
+    isDefaultView: isDefaultView
+  }, contentLeft), /*#__PURE__*/React__default.default.createElement(TextField_styles.InputLabelWrapper, {
+    tabIndex: -1,
+    ref: contentRef,
+    onKeyDown: handleContentKeyDown,
+    className: withHasChips
+  }, Boolean(textBefore && isChipEnumeration) && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledTextBefore, null, textBefore), isChipEnumeration && Boolean(chips?.length) && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledChips, {
+    className: TextField_tokens.classes.chipsWrapper
+  }, chips?.map(({
+    id: chipId,
+    text
+  }, index) => {
+    const validationView = chipValidator?.(String(text));
+    const resView = validationView?.view || chipView;
+    return /*#__PURE__*/React__default.default.createElement(TextFieldChip.TextFieldChip, {
+      id: chipId,
+      ref: element => getRef(element, index),
+      key: `${chipId}_${index}`,
       disabled: disabled,
-      readOnly: !disabled && readOnly,
-      labelPlacement: innerLabelPlacementValue,
-      onClick: handleInputFocus,
-      className: index.cx(labelPlacementClass, clearClass, hasDividerClass, hasInnerHintClass, TextField_tokens.classes.textFieldGroupItem, className),
-      style: style
-    }, hintText && {
-      hintView: hintView,
-      hintSize: hintSize
-    }), (hasOuterLabel || titleCaption) && /*#__PURE__*/React__default.default.createElement(TextField_styles.OuterLabelWrapper, {
-      isInnerLabel: labelPlacement === 'inner'
-    }, hasOuterLabel && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledIndicatorWrapper, null, /*#__PURE__*/React__default.default.createElement(TextField_styles.Label, {
-      id: labelId,
-      htmlFor: id
-    }, innerLabelValue), hintText && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledHintWrapper, null, /*#__PURE__*/React__default.default.createElement(Hint.HintComponent, {
-      ref: hintForkRef,
-      hintText: hintText,
-      hintTrigger: hintTrigger,
-      isHintVisible: isHintVisible,
-      hintTargetIcon: hintTargetIcon,
-      hintPlacement: hintPlacement,
-      hintHasArrow: hintHasArrow,
-      hintOffset: hintOffset,
-      hintWidth: hintWidth,
-      hintContentLeft: hintContentLeft,
-      handleHintShow: handleHintShow,
-      handleHintHide: handleHintHide,
-      handleHintClick: handleHintClick
-    })), required && hasRequiredIndicator && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledIndicator, {
-      className: index.cx(TextField_tokens.classes.outerLabelPlacement, requiredPlacementClass, hasHintClass)
-    }), optionalTextNode), titleCaption && /*#__PURE__*/React__default.default.createElement(TextField_styles.TitleCaption, null, titleCaption)), /*#__PURE__*/React__default.default.createElement(TextField_styles.InputWrapper
-    // Ref для внутреннего использования. Не отдается наружу.
-    , {
-      ref: rest.inputWrapperRef
-      // TODO: #1544, и после убрать classes.inputWrapper
+      readOnly: readOnly,
+      value: text,
+      text: text,
+      onKeyDown: event => handleChipKeyDown(event, chipId, index),
+      onClear: () => onChipClear(chipId, index),
+      onClick: onChipClick,
+      chipType: chipType,
+      view: resView,
+      rootWrapper: Root
+      // TODO: #1547
+      // @ts-ignore
       ,
-      className: index.cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent, TextField_tokens.classes.inputWrapper)
-    }, !hasOuterLabel && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, required && hasRequiredIndicator && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledIndicator, {
-      className: index.cx(TextField_tokens.classes.innerLabelPlacement, requiredPlacementClass)
-    }), hintText && hintTargetPlacement === 'outer' && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledHintWrapper, {
-      className: TextField_tokens.classes.innerLabelPlacement
-    }, /*#__PURE__*/React__default.default.createElement(Hint.HintComponent, {
-      ref: hintForkRef,
-      hintText: hintText,
-      hintTrigger: hintTrigger,
-      isHintVisible: isHintVisible,
-      hintTargetIcon: hintTargetIcon,
-      hintPlacement: hintPlacement,
-      hintHasArrow: hintHasArrow,
-      hintOffset: hintOffset,
-      hintWidth: hintWidth,
-      hintContentLeft: hintContentLeft,
-      size: size,
-      handleHintShow: handleHintShow,
-      handleHintHide: handleHintHide,
-      handleHintClick: handleHintClick,
-      isInnerLabel: true
-    }))), contentLeft && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledContentLeft, {
-      isClear: clear,
-      isDefaultView: isDefaultView
-    }, contentLeft), /*#__PURE__*/React__default.default.createElement(TextField_styles.InputLabelWrapper, {
-      tabIndex: -1,
-      ref: contentRef,
-      onKeyDown: handleContentKeyDown,
-      className: withHasChips
-    }, Boolean(textBefore && isChipEnumeration) && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledTextBefore, null, textBefore), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledChips, {
-      className: TextField_tokens.classes.chipsWrapper
-    }, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref3, index) {
-      var chipId = _ref3.id,
-        text = _ref3.text;
-      var validationView = chipValidator === null || chipValidator === void 0 ? void 0 : chipValidator(String(text));
-      var resView = (validationView === null || validationView === void 0 ? void 0 : validationView.view) || chipView;
-      return /*#__PURE__*/React__default.default.createElement(TextFieldChip.TextFieldChip, {
-        id: chipId,
-        ref: function ref(element) {
-          return getRef(element, index);
-        },
-        key: "".concat(chipId, "_").concat(index),
-        disabled: disabled,
-        readOnly: readOnly,
-        value: text,
-        text: text,
-        onKeyDown: function onKeyDown(event) {
-          return handleChipKeyDown(event, chipId, index);
-        },
-        onClear: function onClear() {
-          return onChipClear(chipId, index);
-        },
-        onClick: onChipClick,
-        chipType: chipType,
-        view: resView,
-        rootWrapper: Root
-        // TODO: #1547
-        // @ts-ignore
-        ,
-        _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
-      });
-    })), /*#__PURE__*/React__default.default.createElement(TextField_styles.InputContainer, {
-      ref: inputContainerRef,
-      hasDynamicWidth: hasTextAfter
-    }, hasTextBefore && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledTextBefore, null, textBefore), /*#__PURE__*/React__default.default.createElement(TextField_styles.Input, _rollupPluginBabelHelpers.extends({
-      ref: inputForkRef,
-      id: innerId,
-      value: outerValue,
-      required: enumerationType === 'chip' ? chips.length === 0 && required : required,
-      "aria-labelledby": labelId,
-      "aria-describedby": helperTextId,
-      placeholder: innerPlaceholderValue,
-      className: index.cx(hasValueClass, keepPlaceholderClass, classTextEllipsis, readOnly && TextField_tokens.classes.readOnlyInput),
-      disabled: disabled,
-      readOnly: !disabled && readOnly,
-      onInput: handleInput,
-      onChange: handleChange,
-      onKeyDown: handleOnKeyDown,
-      onFocus: handleFocus,
-      onBlur: handleBlur
-    }, rest)), hasInnerLabel && /*#__PURE__*/React__default.default.createElement(TextField_styles.Label, {
-      id: labelId,
-      htmlFor: innerId
-    }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/React__default.default.createElement(TextField_styles.InputPlaceholder, {
-      hasPadding: hasPlaceholderPadding
-    }, hasTextBefore && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledTextBefore, {
-      isHidden: true
-    }, textBefore), innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode), hasTextAfter && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledTextAfter, null, textAfter))), /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledContentRightWrapper, {
-      className: index.cx(contentRightCompensationMargin)
-    }, contentRight && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledContentRight, null, contentRight), !hasOuterLabel && hintText && hintTargetPlacement === 'inner' && /*#__PURE__*/React__default.default.createElement(Hint.HintComponent, {
-      ref: hintForkRef,
-      hintText: hintText,
-      hintTrigger: hintTrigger,
-      isHintVisible: isHintVisible,
-      hintTargetIcon: hintTargetIcon,
-      hintPlacement: hintPlacement,
-      hintHasArrow: hintHasArrow,
-      hintOffset: hintOffset,
-      hintWidth: hintWidth,
-      hintContentLeft: hintContentLeft,
-      size: size,
-      handleHintShow: handleHintShow,
-      handleHintHide: handleHintHide,
-      handleHintClick: handleHintClick,
-      isInnerLabel: true
-    }))), leftHelper && /*#__PURE__*/React__default.default.createElement(TextField_styles.LeftHelper, {
-      id: helperTextId
-    }, leftHelper));
-  });
-};
-var textFieldConfig = {
+      _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
+    });
+  })), /*#__PURE__*/React__default.default.createElement(TextField_styles.InputContainer, {
+    ref: inputContainerRef,
+    hasDynamicWidth: hasTextAfter
+  }, hasTextBefore && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledTextBefore, null, textBefore), /*#__PURE__*/React__default.default.createElement(TextField_styles.Input, _rollupPluginBabelHelpers.extends({
+    ref: inputForkRef,
+    id: innerId,
+    value: outerValue,
+    required: enumerationType === 'chip' ? chips.length === 0 && required : required,
+    "aria-labelledby": labelId,
+    "aria-describedby": helperTextId,
+    placeholder: innerPlaceholderValue,
+    className: index.cx(hasValueClass, keepPlaceholderClass, classTextEllipsis, readOnly && TextField_tokens.classes.readOnlyInput),
+    disabled: disabled,
+    readOnly: !disabled && readOnly,
+    onInput: handleInput,
+    onChange: handleChange,
+    onKeyDown: handleOnKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }, rest)), hasInnerLabel && /*#__PURE__*/React__default.default.createElement(TextField_styles.Label, {
+    id: labelId,
+    htmlFor: innerId
+  }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/React__default.default.createElement(TextField_styles.InputPlaceholder, {
+    hasPadding: hasPlaceholderPadding
+  }, hasTextBefore && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledTextBefore, {
+    isHidden: true
+  }, textBefore), innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode), hasTextAfter && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledTextAfter, null, textAfter))), /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledContentRightWrapper, {
+    className: index.cx(contentRightCompensationMargin)
+  }, contentRight && /*#__PURE__*/React__default.default.createElement(TextField_styles.StyledContentRight, null, contentRight), !hasOuterLabel && hintText && hintTargetPlacement === 'inner' && /*#__PURE__*/React__default.default.createElement(Hint.HintComponent, {
+    ref: hintForkRef,
+    hintText: hintText,
+    hintTrigger: hintTrigger,
+    isHintVisible: isHintVisible,
+    hintTargetIcon: hintTargetIcon,
+    hintPlacement: hintPlacement,
+    hintHasArrow: hintHasArrow,
+    hintOffset: hintOffset,
+    hintWidth: hintWidth,
+    hintContentLeft: hintContentLeft,
+    size: size,
+    handleHintShow: handleHintShow,
+    handleHintHide: handleHintHide,
+    handleHintClick: handleHintClick,
+    isInnerLabel: true
+  }))), leftHelper && /*#__PURE__*/React__default.default.createElement(TextField_styles.LeftHelper, {
+    id: helperTextId
+  }, leftHelper));
+});
+const textFieldConfig = {
   name: 'TextField',
   tag: 'div',
   layout: textFieldRoot,
-  base: base,
+  base,
   variations: {
     view: {
       css: base$1.base