@salutejs/plasma-new-hope 0.194.0-canary.1562.11857238836.0 → 0.194.0-canary.1565.11870784206.0

package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js

@@ -357,6 +357,7 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
+        valueToItemMap: valueToItemMap,
         treeId: treeId
       }
     }, /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {

package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js

@@ -40,6 +40,7 @@ var Item = exports.Item = function Item(_ref) {
     handleItemClick = _useContext.handleItemClick,
     variant = _useContext.variant,
     renderItem = _useContext.renderItem,
+    valueToItemMap = _useContext.valueToItemMap,
     treeId = _useContext.treeId;
   var disabledClassName = disabled ? _Combobox.classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? _Combobox.classes.dropdownItemIsFocused : undefined;
@@ -93,7 +94,7 @@ var Item = exports.Item = function Item(_ref) {
   }))), !multiple && checked.get(item.value) === 'done' && /*#__PURE__*/_react["default"].createElement(_Icon.IconDone, {
     size: (0, _utils.sizeToIconSize)(size, variant),
     color: "inherit"
-  })), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(item)) : /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell, {
+  })), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(valueToItemMap.get(value))) : /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell, {
     view: "default",
     size: "l",
     contentLeft: contentLeft,

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

@@ -20,7 +20,7 @@ var _Dropdown2 = /*#__PURE__*/require("./Dropdown.tokens");
 var _useKeyboardNavigation = /*#__PURE__*/require("./hooks/useKeyboardNavigation");
 var _useHashMaps3 = /*#__PURE__*/require("./hooks/useHashMaps");
 var _FloatingPopover = /*#__PURE__*/require("./FloatingPopover");
-var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal", "renderItem"];
+var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal"];
 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); }
@@ -69,7 +69,6 @@ var dropdownRoot = exports.dropdownRoot = function dropdownRoot(Root) {
       _ref$alwaysOpened = _ref.alwaysOpened,
       alwaysOpened = _ref$alwaysOpened === void 0 ? false : _ref$alwaysOpened,
       portal = _ref.portal,
-      renderItem = _ref.renderItem,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useReducer = (0, _react.useReducer)(_pathReducer.pathReducer, []),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -145,8 +144,7 @@ var dropdownRoot = exports.dropdownRoot = function dropdownRoot(Root) {
         onItemClick: onItemClick,
         onItemSelect: onItemSelect,
         hasArrow: hasArrow,
-        treeId: treeId,
-        renderItem: renderItem
+        treeId: treeId
       }
     }, /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
       ref: floatingPopoverRef,

package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js

@@ -43,8 +43,7 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
     onItemSelect = _useContext.onItemSelect,
     onItemClick = _useContext.onItemClick,
     hasArrow = _useContext.hasArrow,
-    treeId = _useContext.treeId,
-    renderItem = _useContext.renderItem;
+    treeId = _useContext.treeId;
   var hasDescendants = Boolean(item.items);
   var disclosureIconSize = size === 'xs' ? 'xs' : 's';
   var isDisabledClassName = disabled || isDisabled ? _Dropdown.classes.dropdownItemIsDisabled : undefined;
@@ -95,7 +94,7 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
     "aria-expanded": ariaExpanded,
     "aria-level": ariaLevel,
     "aria-label": ariaLabel
-  }, renderItem ? /*#__PURE__*/_react["default"].createElement(_DropdownItem.RenderItemWrapper, null, renderItem(item)) : /*#__PURE__*/_react["default"].createElement(_DropdownItem.CellWrapper, null, /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledCell, {
+  }, /*#__PURE__*/_react["default"].createElement(_DropdownItem.CellWrapper, null, /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledCell, {
     contentLeft: contentLeft,
     contentRight: contentRight,
     alignContentLeft: "center",

package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.StyledCell = exports.RenderItemWrapper = exports.Divider = exports.DisclosureIconWrapper = exports.CellWrapper = void 0;
+exports.Wrapper = exports.StyledCell = exports.Divider = exports.DisclosureIconWrapper = exports.CellWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _Dropdown = /*#__PURE__*/require("../../Dropdown.tokens");
 var _mixins = /*#__PURE__*/require("../../../../mixins");
@@ -42,7 +42,4 @@ var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.wit
   outlineRadius: /*#__PURE__*/"var(".concat(_Dropdown.tokens.itemBorderRadius, ")"),
   hasTransition: false,
   customFocusRules: /*#__PURE__*/"\n            &.".concat(_Dropdown.classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(_Dropdown.constants.focusColor, ");\n            }\n        ")
-}));
-var RenderItemWrapper = exports.RenderItemWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-5"
-})(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
+}));

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

@@ -281,6 +281,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
+        valueToItemMap: valueToItemMap,
         treeId: treeId
       }
     }, /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {

package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.js

@@ -41,6 +41,7 @@ var Item = exports.Item = function Item(_ref) {
     handleItemClick = _useContext.handleItemClick,
     variant = _useContext.variant,
     renderItem = _useContext.renderItem,
+    valueToItemMap = _useContext.valueToItemMap,
     treeId = _useContext.treeId;
   var itemDisabled = Boolean(disabled || isDisabled);
   var disabledClassName = itemDisabled ? _Select.classes.dropdownItemIsDisabled : undefined;
@@ -95,7 +96,7 @@ var Item = exports.Item = function Item(_ref) {
   }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/_react["default"].createElement(_Icon.IconDone, {
     size: (0, _utils.sizeToIconSize)(size, variant),
     color: "inherit"
-  })), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(item)) : /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell, {
+  })), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(valueToItemMap.get(value))) : /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell, {
     contentLeft: contentLeft,
     contentRight: contentRight
     // TODO: #1548

package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -12,12 +12,6 @@ var _Textfield = /*#__PURE__*/require("./Textfield.styles");
 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); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var Textfield = exports.Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _valueToItemMap$get;
   var inputWrapperRef = _ref.inputWrapperRef,
@@ -62,24 +56,9 @@ var Textfield = exports.Textfield = /*#__PURE__*/(0, _react.forwardRef)(function
 
   // Обработчик чипов
   var handleChipsChange = function handleChipsChange(chipLabels) {
-    if (!Array.isArray(value)) return;
-
-    // TODO: #1564
-    // Из лейблов чипов получаем value у item и далее прокидываем его в onChange.
-    if (renderValue && !isTargetAmount) {
-      var resultValues = _toConsumableArray(value);
-      value.forEach(function (_, index) {
-        var labelAfterRenderValue = renderValue(labelToItemMap.get(valueToItemMap.get(value[index]).label));
-        if (!chipLabels.includes(labelAfterRenderValue)) {
-          resultValues.splice(index, 1);
-        }
-      });
-      onChange(resultValues);
-    } else {
-      onChange(chipLabels.map(function (chipLabel) {
-        return labelToItemMap.get(chipLabel).value;
-      }));
-    }
+    onChange(chipLabels.map(function (chipLabel) {
+      return labelToItemMap.get(chipLabel).value;
+    }));
   };
   return /*#__PURE__*/_react["default"].createElement(_Textfield.StyledTextField, _extends({
     ref: ref,

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

@@ -23,7 +23,7 @@ var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
 var _ui = /*#__PURE__*/require("./ui");
 var _hooks2 = /*#__PURE__*/require("./hooks");
 var _Hint = /*#__PURE__*/require("./ui/Hint/Hint");
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "validationType", "options", "passwordHidden", "onValidate", "onChange", "onBlur", "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); }
@@ -86,7 +86,12 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       hasDivider = _ref.hasDivider,
       outerValue = _ref.value,
       values = _ref.chips,
+      validationType = _ref.validationType,
+      options = _ref.options,
+      passwordHidden = _ref.passwordHidden,
+      onValidate = _ref.onValidate,
       onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
       onChangeChips = _ref.onChangeChips,
       onSearch = _ref.onSearch,
       onKeyDown = _ref.onKeyDown,
@@ -136,6 +141,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
     var hasValueClass = hasValue ? _TextField2.classes.hasValue : undefined;
     var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? _TextField2.classes.hasEmptyContentLeft : undefined;
     var wrapperWithoutRightContent = !contentRight && isChipsVisible ? _TextField2.classes.hasEmptyContentRight : undefined;
+    var isPasswordHidden = validationType === 'password' && passwordHidden;
     var hintRef = (0, _hooks.useOutsideClick)(function () {
       setIsHintVisible(false);
     });
@@ -178,6 +184,13 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       setChips(newChips);
       onChangeChips === null || onChangeChips === void 0 || onChangeChips(newValues);
     };
+    var _useValidation = (0, _hooks2.useValidation)({
+        validationType: validationType,
+        options: options,
+        onValidate: onValidate
+      }),
+      handleValidationBlur = _useValidation.handleValidationBlur,
+      handleValidationKeyDown = _useValidation.handleValidationKeyDown;
     var _useKeyNavigation = (0, _hooks2.useKeyNavigation)({
         controlledRefs: controlledRefs,
         disabled: disabled,
@@ -207,6 +220,12 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       });
       inputRef.current.focus();
     };
+    var handleInputBlur = function handleInputBlur(event) {
+      if (onBlur) {
+        onBlur(event);
+      }
+      handleValidationBlur(event);
+    };
     var getRef = function getRef(element, index) {
       if (element && chipsRefs !== null && chipsRefs !== void 0 && chipsRefs.current) {
         chipsRefs.current[index] = element;
@@ -214,6 +233,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
     };
     var handleOnKeyDown = function handleOnKeyDown(event) {
       handleInputKeydown(event);
+      handleValidationKeyDown(event);
       if (onKeyDown) {
         onKeyDown(event);
       }
@@ -347,8 +367,11 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       readOnly: !disabled && readOnly,
       onInput: handleInput,
       onChange: handleChange,
-      onKeyDown: handleOnKeyDown
-    }, rest)), hasInnerLabel && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
+      onKeyDown: handleOnKeyDown,
+      onBlur: handleInputBlur
+    }, rest, isPasswordHidden && {
+      type: 'password'
+    })), hasInnerLabel && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
       id: labelId,
       htmlFor: innerId
     }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/_react["default"].createElement(_TextField.InputPlaceholder, null, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {

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

@@ -5,6 +5,9 @@ title: TextField
 
 import { PropsTable, Description } from '@site/src/components';
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # TextField
 <Description name="TextField" />
 <PropsTable name="TextField" exclude={['$isFocused']} />
@@ -198,3 +201,330 @@ export function App() {
     );
 }
 ```
+
+### Валидация
+Поддерживается валидация почты и пароля:
+
+<Tabs>
+    <TabItem value="email" label="Email" default>
+        Свойства доступные при валидации почты:
+        ```tsx
+        type ValidationProps = {
+            /*
+            * Тип валидации
+            */
+            validationType: 'email';
+            /*
+            * Опции валидации
+            */
+            options?: EmailValidationOptions;
+            /*
+            * Функция, вызываемая при валидации значения.
+            * Вызывается при событии onBlur и по нажатию Enter, когда фокус на поле ввода
+            */
+            onValidate?: (args: OnValidateArgs) => void;
+        }
+        ```
+        Свойство `options` имеет следующий вид:
+        ```tsx
+        type EmailValidationOptions = {
+            /*
+            * Пользовательское регулярное выражение, для проверки почты на валидность
+            */
+            customEmailRegex?: {
+                value?: RegExp;
+                errorMessage?: string;
+            };
+            /*
+            * Минимальная длина почты
+            */
+            minLength?: {
+                value?: number;
+                errorMessage?: string;
+            };
+            /*
+            * Максимальная длина почты
+            */
+            maxLength?: {
+                value?: number;
+                errorMessage?: string;
+            };
+            /*
+            * Минимальная длина хоста (часть почты до `@`)
+            */
+            minHostLength?: {
+                value?: number;
+                errorMessage?: string;
+            };
+            /*
+            * Максимальная длина хоста (часть почты до `@`)
+            */
+            maxHostLength?: {
+                value?: number;
+                errorMessage?: string;
+            };
+            /*
+            * Минимальная длина домена (часть почты от `@` до `.` перед доменной зоной)
+            */
+            minDomainLength?: {
+                value?: number;
+                errorMessage?: string;
+            };
+            /*
+            * Максимальная длина домена (часть почты от `@` до `.` перед доменной зоной)
+            */
+            maxDomainLength?: {
+                value?: number;
+                errorMessage?: string;
+            };
+            /*
+            * Минимальная длина доменной зоны (часть почты от `.`; например `ru`, `com`...)
+            */
+            minZoneLength?: {
+                value?: number;
+                errorMessage?: string;
+            };
+            /*
+            * Максимальная длина доменной зоны (часть почты от `.`; например `ru`, `com`...)
+            */
+            maxZoneLength?: {
+                value?: number;
+                errorMessage?: string;
+            };
+            /*
+            * Список разрешенных доменов (например `['mail.ru', 'yahoo.ru', 'gmail.com']`)
+            */
+            whitelistDomains?: {
+                value?: string[];
+                errorMessage?: string;
+            };
+            /*
+            * Список запрещенных доменов (например `['org.biz', 'expressmail.com']`)
+            */
+            blacklistDomains?: {
+                value?: string[];
+                errorMessage?: string;
+            };
+        };
+        ```
+
+        ```tsx live
+        import React, { useState } from 'react';
+        import { TextField } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const options = {
+                minLength: {
+                    value: 7,
+                    errorMessage: 'Почта слишком короткая',
+                },
+                maxLength: {
+                    value: 30,
+                    errorMessage: 'Почта слишком длинная',
+                },
+                minHostLength: {
+                    value: 2,
+                    errorMessage: 'Хост слишком короткий',
+                },
+                maxHostLength: {
+                    value: 12,
+                    errorMessage: 'Хост слишком длинный',
+                },
+                minDomainLength: {
+                    value: 3,
+                    errorMessage: 'Домен слишком короткий',
+                },
+                maxDomainLength: {
+                    value: 6,
+                    errorMessage: 'Домен слишком длинный',
+                },
+                minZoneLength: {
+                    value: 2,
+                    errorMessage: 'Доменная зона слишком короткая',
+                },
+                maxZoneLength: {
+                    value: 5,
+                    errorMessage: 'Доменная зона слишком длинная',
+                },
+                whitelistDomains: {
+                    value: ['plasma.ru', 'gmail.com', 'mail.ru'],
+                    errorMessage: 'Домен не разрешен',
+                },
+                blacklistDomains: {
+                    value: ['hah.ah', 'heh.eh'],
+                    errorMessage: 'Домен запрещен',
+                },
+            };
+
+            const [error, setError] = useState('');
+
+            const handleOnChange = () => {
+                setError('');
+            };
+
+            const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
+                setError(errorMessage || '');
+            };
+
+            return (
+                <div>
+                    <TextField
+                        label="Валидация почты"
+                        placeholder="Заполните поле"
+                        validationType="email"
+                        options={options}
+                        view={error ? 'negative' : 'default}
+                        helperText={error || 'Валидация почты'}
+                        onChange={handleOnChange}
+                        onValidate={handleOnValidate}
+                    />
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="password" label="Password" default>
+        Свойства доступные при валидации пароля:
+        ```tsx
+        type ValidationProps = {
+            /*
+            * Тип валидации
+            */
+            validationType: 'password';
+            /*
+            * Опции валидации
+            */
+            options?: PasswordValidationOptions;
+            /*
+            * Состояние сокрытия оригинального пароля
+            */
+            passwordHidden?: boolean;
+            /*
+            * Функция, вызываемая при валидации значения.
+            * Вызывается при событии onBlur и по нажатию Enter, когда фокус на поле ввода
+            */
+            onValidate?: (args: OnValidateArgs) => void;
+        }
+        ```
+        Свойство `options` имеет следующий вид:
+        ```tsx
+        type PasswordValidationOptions = {
+            /*
+            * Минимальная длина пароля
+            */
+            minLength?: {
+                value?: number;
+                errorMessage?: string;
+            };
+            /*
+            * Максимальная длина пароля
+            */
+            maxLength?: {
+                value?: number;
+                errorMessage?: string;
+            };
+            /*
+            * Должны ли быть буквы верхнего регистра в пароле
+            */
+            includeUppercase?: {
+                value?: boolean;
+                errorMessage?: string;
+            };
+            /*
+            * Должны ли быть буквы нижнего регистра в пароле
+            */
+            includeLowercase?: {
+                value?: boolean;
+                errorMessage?: string;
+            };
+            /*
+            * Должны ли быть цифры в пароле
+            */
+            includeDigits?: {
+                value?: boolean;
+                errorMessage?: string;
+            };
+            /*
+            * Должны ли быть специальные символы в пароле
+            */
+            includeSpecialSymbols?: {
+                value?: boolean;
+                errorMessage?: string;
+            };
+        };
+        ```
+
+        ```tsx live
+        import React, { useState } from 'react';
+        import { TextField, IconButton } from '@salutejs/{{ package }}';
+        import { IconEyeFill, IconEyeClosedFill } from '@salutejs/plasma-icons';
+
+        export function App() {
+            const options = {
+                minLength: {
+                    value: 5,
+                    errorMessage: 'Пароль слишком короткий',
+                },
+                maxLength: {
+                    value: 20,
+                    errorMessage: 'Пароль слишком длинный',
+                },
+                includeUppercase: {
+                    value: true,
+                    errorMessage: 'Пароль должен содержать хотя бы одну заглавную букву',
+                },
+                includeLowercase: {
+                    value: true,
+                    errorMessage: 'Пароль должен содержать хотя бы одну строчную букву',
+                },
+                includeDigits: {
+                    value: true,
+                    errorMessage: 'Пароль должен содержать хотя бы одну цифру',
+                },
+                includeSpecialSymbols: {
+                    value: true,
+                    errorMessage: 'Пароль должен содержать хотя бы один специальный символ',
+                },
+            };
+
+            const [error, setError] = useState('');
+            const [hidden, setHidden] = useState(false);
+
+            const handleOnChange = () => {
+                setError('');
+            };
+
+            const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
+                setError(errorMessage || '');
+            };
+
+            const toggleShowPassword = () => setHidden(!hidden);
+
+            const HideButton = () => (
+                <IconButton size="s" view="clear" onClick={toggleShowPassword}>
+                    {hidden ? <IconEyeClosedFill size="xs" color="inherit" /> : <IconEyeFill size="xs" color="inherit" />}
+                </IconButton>
+            )
+
+            return (
+                <div>
+                    <TextField
+                        label="Валидация пароля"
+                        placeholder="Заполните поле"
+                        validationType="password"
+                        options={options}
+                        view={error ? 'negative' : 'default'}
+                        leftHelper={error || 'Валидация пароля'}
+                        onChange={handleOnChange}
+                        onValidate={handleOnValidate}
+                        passwordHidden={hidden}
+                        contentLeft={<HideButton />}
+                    />
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+</Tabs>
+

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

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "useKeyNavigation", {
     return _useKeyNavigation.useKeyNavigation;
   }
 });
-var _useKeyNavigation = /*#__PURE__*/require("./useKeyNavigation");
+Object.defineProperty(exports, "useValidation", {
+  enumerable: true,
+  get: function get() {
+    return _useValidation.useValidation;
+  }
+});
+var _useKeyNavigation = /*#__PURE__*/require("./useKeyNavigation");
+var _useValidation = /*#__PURE__*/require("./useValidation");