@salutejs/plasma-new-hope 0.156.0-canary.1421.11071529144.0 → 0.156.0-canary.1449.11066382859.0

package/styled-components/cjs/components/Slider/components/Double/Double.js

@@ -11,9 +11,8 @@ var _ui = /*#__PURE__*/require("../../ui");
 var _utils = /*#__PURE__*/require("../../utils");
 var _utils2 = /*#__PURE__*/require("../../../../utils");
 var _Slider = /*#__PURE__*/require("../../Slider.tokens");
-var _inputHidden = /*#__PURE__*/require("../../../../utils/inputHidden");
 var _Double = /*#__PURE__*/require("./Double.styles");
-var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
+var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -54,7 +53,6 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
     ariaLabel = _ref.ariaLabel,
     _ref$multipleStepSize = _ref.multipleStepSize,
     multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
-    name = _ref.name,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)({
       stepSize: 0,
@@ -90,20 +88,10 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
   var secondHandleRef = (0, _react.useRef)(null);
   var firstHandleValue = (0, _react.useRef)(value[0]);
   var secondHandleValue = (0, _react.useRef)(value[1]);
-  var innerRefFirst = (0, _react.useRef)(null);
-  var innerRefSecond = (0, _react.useRef)(null);
   var stepSize = state.stepSize;
   var hasLabelContent = label || labelContentLeft;
   var firstInputActiveClass = firstInputActive && !disabled ? _Slider.classes.textFieldActive : undefined;
   var secondInputActiveClass = secondInputActive && !disabled ? _Slider.classes.textFieldActive : undefined;
-  var setValue = function setValue(e) {
-    var firstElement = innerRefFirst.current;
-    var firstValueInit = Number(firstElement.getAttribute('defaultValue'));
-    var secondValueInit = (0, _utils.setInitValue)(e);
-    onChangeCommitted && onChangeCommitted([firstValueInit, secondValueInit]);
-    setFirstValue(firstValueInit);
-    setSecondValue(secondValueInit);
-  };
   (0, _react.useEffect)(function () {
     var firstLocalValue = Math.min(Math.max(value[0], min), max) - min;
     var secondLocalValue = Math.min(Math.max(value[1], min), max) - min;
@@ -118,16 +106,6 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
       });
     });
   }, [value, stepSize, min, max, setFirstValue, setSecondValue]);
-  (0, _react.useEffect)(function () {
-    if (innerRefSecond.current && onChangeCommitted) {
-      innerRefSecond.current.addEventListener('setInitValue', setValue);
-    }
-    return function () {
-      if (innerRefSecond.current && onChangeCommitted) {
-        innerRefSecond.current.removeEventListener('setInitValue', setValue);
-      }
-    };
-  }, [innerRefSecond]);
   var setStepSize = (0, _react.useCallback)(function (newStepSize) {
     setState(function (prevState) {
       return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -336,21 +314,5 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
     onChange: onSecondTextfieldChange,
     onBlur: onSecondTextfieldBlur,
     onKeyDown: onTextfieldKeyDown
-  }))), /*#__PURE__*/_react["default"].createElement(_inputHidden.InputHidden, {
-    name: name,
-    type: "number",
-    datatype: "slider-double",
-    "data-slidertype": "min",
-    value: firstValue,
-    ref: innerRefFirst,
-    onChange: function onChange() {}
-  }), /*#__PURE__*/_react["default"].createElement(_inputHidden.InputHidden, {
-    name: name,
-    type: "number",
-    datatype: "slider-double",
-    "data-slidertype": "max",
-    value: secondValue,
-    ref: innerRefSecond,
-    onChange: function onChange() {}
-  }));
+  }))));
 };

package/styled-components/cjs/components/Slider/components/Single/Single.js

@@ -11,9 +11,8 @@ var _ui = /*#__PURE__*/require("../../ui");
 var _utils = /*#__PURE__*/require("../../utils");
 var _utils2 = /*#__PURE__*/require("../../../../utils");
 var _Slider = /*#__PURE__*/require("../../Slider.tokens");
-var _inputHidden = /*#__PURE__*/require("../../../../utils/inputHidden");
 var _Single = /*#__PURE__*/require("./Single.styles");
-var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "multipleStepSize", "defaultValue", "size", "name"];
+var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "multipleStepSize", "size"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -31,7 +30,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
-  var _ref2;
   var min = _ref.min,
     max = _ref.max,
     value = _ref.value,
@@ -51,10 +49,8 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
     rangeValuesPlacement = _ref$rangeValuesPlace === void 0 ? 'outer' : _ref$rangeValuesPlace,
     _ref$multipleStepSize = _ref.multipleStepSize,
     multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
-    defaultValue = _ref.defaultValue,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
-    name = _ref.name,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)({
       xHandle: 0,
@@ -64,7 +60,6 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-  var innerRef = (0, _react.useRef)(null);
   var _useState3 = (0, _react.useState)(0),
     _useState4 = _slicedToArray(_useState3, 2),
     startOffset = _useState4[0],
@@ -73,7 +68,7 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     endOffset = _useState6[0],
     setEndOffset = _useState6[1];
-  var _useState7 = (0, _react.useState)((_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : min),
+  var _useState7 = (0, _react.useState)(value),
     _useState8 = _slicedToArray(_useState7, 2),
     dragValue = _useState8[0],
     setDragValue = _useState8[1];
@@ -81,14 +76,14 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
   var hasLabelContent = label || labelContentLeft;
   var labelPlacementClass = labelPlacement === 'outer' ? _Slider.classes.labelPlacementOuter : _Slider.classes.labelPlacementInner;
   var rangeValuesPlacementClass = rangeValuesPlacement === 'outer' ? _Slider.classes.rangeValuesPlacementOuter : _Slider.classes.rangeValuesPlacementInner;
-  var hideMinValueDiffClass = hideMinValueDiff && dragValue - min <= hideMinValueDiff ? _Slider.classes.hideMinValue : '';
-  var hideMaxValueDiffClass = hideMaxValueDiff && max - dragValue <= hideMaxValueDiff ? _Slider.classes.hideMaxValue : '';
+  var hideMinValueDiffClass = hideMinValueDiff && value - min <= hideMinValueDiff ? _Slider.classes.hideMinValue : '';
+  var hideMaxValueDiffClass = hideMaxValueDiff && max - value <= hideMaxValueDiff ? _Slider.classes.hideMaxValue : '';
   var startLabelRef = (0, _react.useRef)(null);
   var endLabelRef = (0, _react.useRef)(null);
   var activeFirstValue = dragValue === min ? _Slider.classes.activeRangeValue : undefined;
   var activeSecondValue = dragValue === max ? _Slider.classes.activeRangeValue : undefined;
   (0, _react.useEffect)(function () {
-    var localValue = Math.min(Math.max(dragValue, min), max) - min;
+    var localValue = Math.min(Math.max(value, min), max) - min;
     if (rangeValuesPlacement === 'outer') {
       var _startLabelRef$curren, _endLabelRef$current;
       var startWidth = (_startLabelRef$curren = startLabelRef.current) === null || _startLabelRef$curren === void 0 ? void 0 : _startLabelRef$curren.offsetWidth;
@@ -109,21 +104,7 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
         railFillWidth: stepSize * localValue
       });
     });
-  }, [dragValue, labelPlacement, stepSize, rangeValuesPlacement, min, max, setStartOffset, setEndOffset]);
-  (0, _react.useEffect)(function () {
-    if (innerRef.current) {
-      innerRef.current.addEventListener('setInitValue', function (e) {
-        return setDragValue((0, _utils.setInitValue)(e));
-      });
-    }
-    return function () {
-      if (innerRef.current) {
-        innerRef.current.removeEventListener('setInitValue', function (e) {
-          return setDragValue((0, _utils.setInitValue)(e));
-        });
-      }
-    };
-  }, [innerRef]);
+  }, [value, labelPlacement, stepSize, rangeValuesPlacement, min, max, setStartOffset, setEndOffset]);
   var setStepSize = (0, _react.useCallback)(function (newStepSize) {
     setState(function (prevState) {
       return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -140,17 +121,7 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
       });
     });
     if (onChange) {
-      if (value !== undefined) {
-        onChange(newValue);
-      }
-      if (name && !value) {
-        onChange({
-          target: {
-            value: newValue,
-            name: name
-          }
-        });
-      }
+      onChange(newValue);
     }
     setDragValue(newValue);
   };
@@ -201,12 +172,5 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
   })), showRangeValues && /*#__PURE__*/_react["default"].createElement(_Single.StyledRangeValue, {
     ref: endLabelRef,
     className: (0, _utils2.cx)(_Slider.classes.maxRangeValue, hideMaxValueDiffClass, activeSecondValue)
-  }, max)), /*#__PURE__*/_react["default"].createElement(_inputHidden.InputHidden, {
-    name: name,
-    type: "number",
-    datatype: "slider-single",
-    value: dragValue,
-    ref: innerRef,
-    onChange: function onChange() {}
-  }));
+  }, max)));
 };

package/styled-components/cjs/components/Slider/components/index.js

@@ -24,15 +24,4 @@ Object.keys(_Double).forEach(function (key) {
       return _Double[key];
     }
   });
-});
-var _DoubleUncontrolled = /*#__PURE__*/require("./DoubleUncontrolled/DoubleUncontrolled");
-Object.keys(_DoubleUncontrolled).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _DoubleUncontrolled[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _DoubleUncontrolled[key];
-    }
-  });
 });

package/styled-components/cjs/components/Slider/utils/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getOffsets = getOffsets;
 exports.getSliderThumbValue = getSliderThumbValue;
-exports.sizeData = exports.setInitValue = void 0;
+exports.sizeData = void 0;
 /**
  * Расчитать значение слайдера с учетом его координат и шага изменений.
  * @param {number} handleCenterXRelative
@@ -52,9 +52,4 @@ var sizeData = exports.sizeData = {
     indent: 0.75,
     fontSizeMultiplier: 16
   }
-};
-var setInitValue = exports.setInitValue = function setInitValue(e) {
-  var item = e.target;
-  var defaultValue = Number(item.getAttribute('defaultValue'));
-  return defaultValue;
 };

package/styled-components/cjs/components/TextArea/TextArea.js

@@ -126,7 +126,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       uncontrolledValue = _useState6[0],
       setUncontrolledValue = _useState6[1];
-    var outerRef = /*#__PURE__*/(0, _react.createRef)();
+    var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/(0, _react.createRef)();
     var innerOptional = required ? false : optional;
     var hasHelper = Boolean(leftHelper || rightHelper || helperText);
     var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
@@ -198,7 +198,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       hasContentRight: Boolean(contentRight),
       hasHelper: hasHelper,
       applyCustomWidth: applyCustomWidth,
-      ref: (0, _utils.mergeRefs)(outerRef, innerRef),
+      ref: outerRef,
       disabled: disabled,
       height: autoResize ? minAuto : height,
       width: width,

package/styled-components/cjs/components/TextField/TextField.js

@@ -11,14 +11,15 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _utils = /*#__PURE__*/require("../../utils");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
-var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
-var _base4 = /*#__PURE__*/require("./variations/_read-only/base");
-var _base5 = /*#__PURE__*/require("./variations/_label-placement/base");
+var _base3 = /*#__PURE__*/require("./variations/_clear/base");
+var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
+var _base5 = /*#__PURE__*/require("./variations/_read-only/base");
+var _base6 = /*#__PURE__*/require("./variations/_label-placement/base");
 var _TextField = /*#__PURE__*/require("./TextField.styles");
 var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
 var _ui = /*#__PURE__*/require("./ui");
 var _hooks = /*#__PURE__*/require("./hooks");
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -58,7 +59,10 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       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,
       onChange = _ref.onChange,
@@ -87,6 +91,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
     var innerId = id || uniqId;
     var labelId = (0, _plasmaCore.safeUseId)();
     var helperTextId = (0, _plasmaCore.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 ? _TextField2.classes.hasChips : undefined;
@@ -98,6 +103,8 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
     var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
     var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
     var placeholderShown = Boolean(innerPlaceholderValue) && !hasValue;
+    var clearClass = clear ? _TextField2.classes.clear : undefined;
+    var hasDividerClass = hasDivider ? _TextField2.classes.hasDivider : undefined;
     var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
     var labelPlacementClass = innerLabelPlacementValue ? _TextField2.classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
     var hasValueClass = hasValue ? _TextField2.classes.hasValue : undefined;
@@ -189,9 +196,10 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       size: size,
       disabled: disabled,
       readOnly: !disabled && readOnly,
+      clear: clear,
       labelPlacement: innerLabelPlacementValue,
       onClick: handleInputFocus,
-      className: (0, _utils.cx)(labelPlacementClass, _TextField2.classes.textFieldGroupItem, className),
+      className: (0, _utils.cx)(labelPlacementClass, clearClass, hasDividerClass, _TextField2.classes.textFieldGroupItem, className),
       style: style
     }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
       id: labelId,
@@ -205,7 +213,10 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       className: (0, _utils.cx)(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
     }, !hasOuterLabel && required && /*#__PURE__*/_react["default"].createElement(_TextField.StyledIndicator, {
       className: (0, _utils.cx)(_TextField2.classes.innerLabelPlacement, requiredPlacementClass)
-    }), contentLeft && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_TextField.InputLabelWrapper, {
+    }), contentLeft && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentLeft, {
+      isClear: clear,
+      isDefaultView: isDefaultView
+    }, contentLeft), /*#__PURE__*/_react["default"].createElement(_TextField.InputLabelWrapper, {
       tabIndex: -1,
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
@@ -264,16 +275,20 @@ var textFieldConfig = exports.textFieldConfig = {
     size: {
       css: _base.base
     },
-    disabled: {
+    clear: {
       css: _base3.base,
       attrs: true
     },
-    readOnly: {
+    disabled: {
       css: _base4.base,
       attrs: true
     },
+    readOnly: {
+      css: _base5.base,
+      attrs: true
+    },
     labelPlacement: {
-      css: _base5.base
+      css: _base6.base
     }
   },
   defaults: {

package/styled-components/cjs/components/TextField/TextField.styles.js

@@ -30,13 +30,17 @@ var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.with
 })(["position:relative;display:inline-flex;"]);
 var StyledContentSlot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-7"
-})(["color:var(", ");line-height:0;"], _TextField.tokens.contentSlotColor);
+})(["color:", ";line-height:0;"], function (_ref) {
+  var isDefaultView = _ref.isDefaultView,
+    isClear = _ref.isClear;
+  return !isDefaultView && isClear ? "var(".concat(_TextField.tokens.clearColor, ")") : "var(".concat(_TextField.tokens.contentSlotColor, ")");
+});
 var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/(0, _styledComponents["default"])(StyledContentSlot).withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-8"
 })(["margin:var(", ");"], _TextField.tokens.leftContentMargin);
-var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/(0, _styledComponents["default"])(StyledContentSlot).withConfig({
+var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-9"
-})(["margin:var(", ");color:var(", ",var(", "));&:hover{color:var(", ");color:var(", ",var(", "));cursor:pointer;}&:active{color:var(", ",var(", "));}"], _TextField.tokens.rightContentMargin, _TextField.tokens.contentSlotRightColor, _TextField.tokens.contentSlotColor, _TextField.tokens.contentSlotColorHover, _TextField.tokens.contentSlotRightColorHover, _TextField.tokens.contentSlotColorHover, _TextField.tokens.contentSlotRightColorActive, _TextField.tokens.contentSlotColorActive);
+})(["line-height:0;margin:var(", ");color:var(", ",var(", "));&:hover{color:var(", ");color:var(", ",var(", "));cursor:pointer;}&:active{color:var(", ",var(", "));}"], _TextField.tokens.rightContentMargin, _TextField.tokens.contentSlotRightColor, _TextField.tokens.contentSlotColor, _TextField.tokens.contentSlotColorHover, _TextField.tokens.contentSlotRightColorHover, _TextField.tokens.contentSlotColorHover, _TextField.tokens.contentSlotRightColorActive, _TextField.tokens.contentSlotColorActive);
 var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-10"
 })([""]);

package/styled-components/cjs/components/TextField/TextField.template-doc.mdx

@@ -62,7 +62,9 @@ export function App() {
 ```
 
 ### Статус поля
-Статус поля задается с помощью свойства `status`. Возможные значения свойства: `success`, `warning` и `error`:
+Статус поля задается с помощью свойства `status`. 
+Возможные значения свойства: `success`, `warning` и `error`.
+На отображение TextField так же влияют свойства `clear` и `hasDivider`:
 
 ```tsx live
 import React from 'react';
@@ -70,22 +72,53 @@ import { TextField } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <div>
-            <TextField
-                placeholder="Статус"
-                status="success"
-                defaultValue="Успех"
-            />
-            <TextField
-                placeholder="Статус"
-                status="warning"
-                defaultValue="Успех"
-            />
-            <TextField
-                placeholder="Статус"
-                status="error"
-                defaultValue="Ошибка"
-            />
+        <div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <div style=\{{ display: "flex", gap: "0.5rem" }}>
+                <TextField
+                    placeholder="Статус"
+                    status="success"
+                    size="m"
+                    defaultValue="Успех"
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="warning"
+                    size="m"
+                    defaultValue="Предупреждение"
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="error"
+                    size="m"
+                    defaultValue="Ошибка"
+                />
+            </div>
+            <div style=\{{ display: "flex", gap: "0.5rem" }}>
+                <TextField
+                    placeholder="Статус"
+                    status="success"
+                    size="m"
+                    defaultValue="Успех"
+                    clear
+                    hasDivider
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="warning"
+                    size="m"
+                    defaultValue="Предупреждение"
+                    clear
+                    hasDivider
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="error"
+                    size="m"
+                    defaultValue="Ошибка"
+                    clear
+                    hasDivider
+                />
+            </div>
         </div>
     );
 }

package/styled-components/cjs/components/TextField/TextField.tokens.js

@@ -12,24 +12,32 @@ var classes = exports.classes = {
   innerLabelPlacement: 'label-placement-inner',
   outerLabelPlacement: 'label-placement-outer',
   hideLabel: 'hide-label',
+  clear: 'textfield-clear',
+  hasDivider: 'hasDivider',
   textFieldGroupItem: 'text-field-group-item'
 };
 var tokens = exports.tokens = {
   color: '--plasma-textfield-color',
+  clearColor: '--plasma-textfield-clear-color',
   backgroundColor: '--plasma-textfield-bg-color',
   backgroundColorHover: '--plasma-textfield-bg-color-hover',
   backgroundColorFocus: '--plasma-textfield-bg-color-focus',
   borderColor: '--plasma-textfield-border-color',
   borderColorHover: '--plasma-textfield-border-color-hover',
   borderColorFocus: '--plasma-textfield-border-color-focus',
+  dividerColor: '--plasma-textfield-divider-color',
+  dividerColorHover: '--plasma-textfield-divider-color-hover',
+  dividerColorFocus: '--plasma-textfield-divider-color-focus',
   /** Цвета для read-only состояния */
   colorReadOnly: '--plasma-textfield-color-readonly',
   backgroundColorReadOnly: '--plasma-textfield-bg-color-readonly',
   borderColorReadOnly: '--plasma-textfield-border-color-readonly',
   placeholderColorReadOnly: '--plasma-textfield__placeholder-color-readonly',
+  dividerColorReadOnly: '--plasma-textfield-divider-color-readonly',
   /** Цвет каретки */
   caretColor: '--plasma-textfield__caret-color',
   placeholderColor: '--plasma-textfield__placeholder-color',
+  clearPlaceholderColor: '--plasma-textfield__clear-placeholder-color',
   optionalColor: '--plasma-textfield__optional-color',
   height: '--plasma-textfield-height',
   borderWidth: '--plasma-textfield-border-width',
@@ -57,6 +65,7 @@ var tokens = exports.tokens = {
   labelColor: '--plasma-textfield__label-color',
   labelColorReadOnly: '--plasma-textfield__label-color-readonly',
   labelOffset: '--plasma-textfield__label-offset',
+  clearLabelOffset: '--plasma-textfield__clear-label-offset',
   labelFontFamily: '--plasma-textfield__label-font-family',
   labelFontStyle: '--plasma-textfield__label-font-style',
   labelFontSize: '--plasma-textfield__label-font-size',
@@ -129,5 +138,7 @@ var tokens = exports.tokens = {
   indicatorLabelPlacementInner: '--plasma-textfield__indicator-placement-inner',
   indicatorLabelPlacementOuter: '--plasma-textfield__indicator-placement-outer',
   indicatorLabelPlacementInnerRight: '--plasma-textfield__indicator-placement-inner-right',
-  indicatorLabelPlacementOuterRight: '--plasma-textfield__indicator-placement-outer-right'
+  indicatorLabelPlacementOuterRight: '--plasma-textfield__indicator-placement-outer-right',
+  clearIndicatorLabelPlacementInner: '--plasma-textfield__clear-indicator-placement-inner',
+  clearIndicatorLabelPlacementInnerRight: '--plasma-textfield__clear-indicator-placement-inner-right'
 };

package/styled-components/cjs/components/TextField/variations/_clear/base.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _TextField = /*#__PURE__*/require("../../TextField.tokens");
+var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{&[readonly] ", ",", "{background-color:unset;box-shadow:none;border-radius:0;padding-left:0;padding-right:0;&:hover{background-color:unset;}}", "{margin-left:0;}", "{margin-right:0;}", "{color:var(", ");}&.", "{", "{margin-bottom:var(", ");}}", "{color:var(", ");}", "{&.", "{inset:var(", ");&.align-right{inset:var(", ");}}}&.", "{", "{--plasma_private-textfield-divider-color:var(", ");&:before{content:'';position:absolute;height:0.063rem;width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ", ":hover{--plasma_private-textfield-divider-color:var( ", ",var(", ") );}&:not([readonly]) ", ":focus-within{--plasma_private-textfield-divider-color:var( ", ",var(", ") );}}}"], _TextField.classes.clear, _TextField2.InputWrapper, _TextField2.InputWrapper, _TextField2.StyledContentLeft, _TextField2.StyledContentRight, _TextField2.InputPlaceholder, _TextField.tokens.clearPlaceholderColor, _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.clearLabelOffset, _TextField2.Input, _TextField.tokens.clearColor, _TextField2.StyledIndicator, _TextField.classes.innerLabelPlacement, _TextField.tokens.clearIndicatorLabelPlacementInner, _TextField.tokens.clearIndicatorLabelPlacementInnerRight, _TextField.classes.hasDivider, _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.dividerColor), _TextField2.InputWrapper, _TextField.tokens.dividerColorHover, /*#__PURE__*/String(_TextField.tokens.dividerColor), _TextField2.InputWrapper, _TextField.tokens.dividerColorFocus, /*#__PURE__*/String(_TextField.tokens.dividerColor));

package/styled-components/cjs/components/TextField/variations/_clear/tokens.json

@@ -0,0 +1,10 @@
+{
+    "type": "boolean",
+    "tokens": [
+        "--plasma-textfield__clear-label-offset",
+        "--plasma-textfield-divider-color",
+        "--plasma-textfield-divider-color-hover",
+        "--plasma-textfield-divider-color-focus",
+        "--plasma-textfield-clear-color"
+    ]
+}

package/styled-components/cjs/components/TextField/variations/_disabled/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[disabled]{opacity:var(", ");cursor:not-allowed;", "{cursor:not-allowed;min-width:unset;}}"], _TextField.tokens.disabledOpacity, _TextField2.Input);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[disabled]{pointer-events:none;opacity:var(", ");cursor:not-allowed;", "{cursor:not-allowed;min-width:unset;}}"], _TextField.tokens.disabledOpacity, _TextField2.Input);

package/styled-components/cjs/components/TextField/variations/_label-placement/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{position:relative;display:inline-block;margin-bottom:var(", ");color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", "{align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}}"], _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelOffset, _TextField.tokens.labelColor, _TextField.classes.innerLabelPlacement, _TextField2.InputContainer, _TextField.tokens.contentLabelInnerPadding, _TextField2.StyledTextAfter, _TextField2.StyledTextBefore, _TextField.tokens.contentLabelInnerPadding, _TextField2.Input, _TextField2.Label, _TextField2.Input, _TextField.classes.hasValue, _TextField2.Label, _TextField.tokens.labelInnerPadding, _TextField.tokens.labelInnerFontFamily, _TextField.tokens.labelInnerFontSize, _TextField.tokens.labelInnerFontStyle, _TextField.tokens.labelInnerFontWeight, _TextField.tokens.labelInnerLetterSpacing, _TextField.tokens.labelInnerLineHeight, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.height, _TextField.tokens.height, _TextField.tokens.labelLineHeight, _TextField.tokens.height, _TextField.tokens.labelLineHeight);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{position:relative;display:inline-block;margin-bottom:var(", ");color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", "{color:var(", ");align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}&.", " ", "{color:var(", ");}}"], _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelOffset, _TextField.tokens.labelColor, _TextField.classes.innerLabelPlacement, _TextField2.InputContainer, _TextField.tokens.contentLabelInnerPadding, _TextField2.StyledTextAfter, _TextField2.StyledTextBefore, _TextField.tokens.contentLabelInnerPadding, _TextField2.Input, _TextField2.Label, _TextField2.Input, _TextField.classes.hasValue, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.labelInnerPadding, _TextField.tokens.labelInnerFontFamily, _TextField.tokens.labelInnerFontSize, _TextField.tokens.labelInnerFontStyle, _TextField.tokens.labelInnerFontWeight, _TextField.tokens.labelInnerLetterSpacing, _TextField.tokens.labelInnerLineHeight, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.height, _TextField.tokens.height, _TextField.tokens.labelLineHeight, _TextField.tokens.height, _TextField.tokens.labelLineHeight, _TextField.classes.clear, _TextField2.Label, _TextField.tokens.clearPlaceholderColor);

package/styled-components/cjs/components/TextField/variations/_read-only/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", ":hover{background-color:var(", ");}", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}}"], _TextField2.InputWrapper, _TextField.tokens.colorReadOnly, /*#__PURE__*/String(_TextField.tokens.backgroundColorReadOnly), /*#__PURE__*/String(_TextField.tokens.borderWidth), /*#__PURE__*/String(_TextField.tokens.borderColorReadOnly), _TextField2.InputWrapper, _TextField.tokens.backgroundColorReadOnly, _TextField2.InputPlaceholder, _TextField.tokens.placeholderColorReadOnly, _TextField2.Input, _TextField.tokens.colorReadOnly, _TextField2.LeftHelper, _TextField.tokens.leftHelperColorReadOnly, _TextField2.Label, _TextField.tokens.labelColorReadOnly);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", " ", "{&:before{background-color:var(", ");}}", ":hover{background-color:var(", ");}", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}&.", " ", "{color:var(", ");}}"], _TextField2.InputWrapper, _TextField.tokens.colorReadOnly, /*#__PURE__*/String(_TextField.tokens.backgroundColorReadOnly), /*#__PURE__*/String(_TextField.tokens.borderWidth), /*#__PURE__*/String(_TextField.tokens.borderColorReadOnly), _TextField.classes.hasDivider, _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.dividerColorReadOnly), _TextField2.InputWrapper, _TextField.tokens.backgroundColorReadOnly, _TextField2.InputPlaceholder, _TextField.tokens.placeholderColorReadOnly, _TextField2.Input, _TextField.tokens.colorReadOnly, _TextField2.LeftHelper, _TextField.tokens.leftHelperColorReadOnly, _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelColorReadOnly);