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

package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx

@@ -291,3 +291,255 @@ export const Chips: StoryObj<StoryPropsChips> = {
     },
     render: (args) => <StoryChips {...args} />,
 };
+
+type StoryEmailValidationProps = StoryPropsDefault & {
+    minLengthValue?: number;
+    minLengthErrorMessage?: string;
+    maxLengthValue?: number;
+    maxLengthErrorMessage?: string;
+    minHostLengthValue?: number;
+    minHostLengthErrorMessage?: string;
+    maxHostLengthValue?: number;
+    maxHostLengthErrorMessage?: string;
+    minDomainLengthValue?: number;
+    minDomainLengthErrorMessage?: string;
+    maxDomainLengthValue?: number;
+    maxDomainLengthErrorMessage?: string;
+    minZoneLengthValue?: number;
+    minZoneLengthErrorMessage?: string;
+    maxZoneLengthValue?: number;
+    maxZoneLengthErrorMessage?: string;
+    whitelistDomainsValue?: string;
+    whitelistDomainsErrorMessage?: string;
+    blacklistDomainsValue?: string;
+    blacklistDomainsErrorMessage?: string;
+};
+
+const StoryEmailValidation = ({
+    minLengthValue,
+    minLengthErrorMessage,
+    maxLengthValue,
+    maxLengthErrorMessage,
+    minHostLengthValue,
+    minHostLengthErrorMessage,
+    maxHostLengthValue,
+    maxHostLengthErrorMessage,
+    minDomainLengthValue,
+    minDomainLengthErrorMessage,
+    maxDomainLengthValue,
+    maxDomainLengthErrorMessage,
+    minZoneLengthValue,
+    minZoneLengthErrorMessage,
+    maxZoneLengthValue,
+    maxZoneLengthErrorMessage,
+    whitelistDomainsValue,
+    whitelistDomainsErrorMessage,
+    blacklistDomainsValue,
+    blacklistDomainsErrorMessage,
+    ...rest
+}: StoryEmailValidationProps) => {
+    const [error, setError] = useState('');
+
+    const validationOptions = {
+        minLength: {
+            value: minLengthValue || undefined,
+            errorMessage: minLengthErrorMessage || 'Почта слишком короткая',
+        },
+        maxLength: {
+            value: maxLengthValue || undefined,
+            errorMessage: maxLengthErrorMessage || 'Почта слишком длинная',
+        },
+        minHostLength: {
+            value: minHostLengthValue || undefined,
+            errorMessage: minHostLengthErrorMessage || 'Хост слишком короткий',
+        },
+        maxHostLength: {
+            value: maxHostLengthValue || undefined,
+            errorMessage: maxHostLengthErrorMessage || 'Хост слишком длинный',
+        },
+        minDomainLength: {
+            value: minDomainLengthValue || undefined,
+            errorMessage: minDomainLengthErrorMessage || 'Домен слишком короткий',
+        },
+        maxDomainLength: {
+            value: maxDomainLengthValue || undefined,
+            errorMessage: maxDomainLengthErrorMessage || 'Домен слишком длинный',
+        },
+        minZoneLength: {
+            value: minZoneLengthValue || undefined,
+            errorMessage: minZoneLengthErrorMessage || 'Доменная зона слишком короткая',
+        },
+        maxZoneLength: {
+            value: maxZoneLengthValue || undefined,
+            errorMessage: maxZoneLengthErrorMessage || 'Доменная зона слишком длинная',
+        },
+        whitelistDomains: {
+            value: whitelistDomainsValue?.split(',') || undefined,
+            errorMessage: whitelistDomainsErrorMessage || 'Домен не разрешен',
+        },
+        blacklistDomains: {
+            value: blacklistDomainsValue?.split(',') || undefined,
+            errorMessage: blacklistDomainsErrorMessage || 'Домен запрещен',
+        },
+    };
+
+    const handleOnChange = () => {
+        setError('');
+    };
+
+    const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
+        setError(errorMessage || '');
+    };
+
+    return (
+        <TextField
+            label="Валидация почты"
+            validationType="email"
+            options={validationOptions}
+            size="l"
+            view={error ? 'negative' : 'default'}
+            leftHelper={error || 'Валидация почты'}
+            onChange={handleOnChange}
+            onValidate={handleOnValidate}
+            {...rest}
+        />
+    );
+};
+
+export const EmailValidation: StoryObj<StoryEmailValidationProps> = {
+    argTypes: {
+        ...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
+    },
+    args: {
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        minLengthValue: 5,
+        minLengthErrorMessage: 'Почта слишком короткая',
+        maxLengthValue: 25,
+        maxLengthErrorMessage: 'Почта слишком длинная',
+        minHostLengthValue: 1,
+        minHostLengthErrorMessage: 'Хост слишком короткий',
+        maxHostLengthValue: 12,
+        maxHostLengthErrorMessage: 'Хост слишком длинный',
+        minDomainLengthValue: 1,
+        minDomainLengthErrorMessage: 'Домен слишком короткий',
+        maxDomainLengthValue: 6,
+        maxDomainLengthErrorMessage: 'Домен слишком длинный',
+        minZoneLengthValue: 1,
+        minZoneLengthErrorMessage: 'Доменная зона слишком короткая',
+        maxZoneLengthValue: 5,
+        maxZoneLengthErrorMessage: 'Доменная зона слишком длинная',
+        whitelistDomainsValue: 'gmail.com,yandex.ru,mail.ru,mail.com',
+        whitelistDomainsErrorMessage: 'Домен не разрешен',
+        blacklistDomainsValue: 'heh.org,hah.ha',
+        blacklistDomainsErrorMessage: 'Домен запрещен',
+    },
+    render: (args) => <StoryEmailValidation {...args} />,
+};
+
+type StoryPasswordValidationProps = StoryPropsDefault & {
+    minLengthValue?: number;
+    minLengthErrorMessage?: string;
+    maxLengthValue?: number;
+    maxLengthErrorMessage?: string;
+    includeUppercase?: boolean;
+    includeUppercaseErrorMessage?: string;
+    includeLowercase?: boolean;
+    includeLowercaseErrorMessage?: string;
+    includeDigits?: boolean;
+    includeDigitsErrorMessage?: string;
+    includeSpecialSymbols?: boolean;
+    includeSpecialSymbolsErrorMessage?: string;
+};
+
+const StoryPasswordValidation = ({
+    minLengthValue,
+    minLengthErrorMessage,
+    maxLengthValue,
+    maxLengthErrorMessage,
+    includeUppercase,
+    includeUppercaseErrorMessage,
+    includeLowercase,
+    includeLowercaseErrorMessage,
+    includeDigits,
+    includeDigitsErrorMessage,
+    includeSpecialSymbols,
+    includeSpecialSymbolsErrorMessage,
+    ...rest
+}: StoryPasswordValidationProps) => {
+    const [error, setError] = useState('');
+
+    const validationOptions = {
+        minLength: {
+            value: minLengthValue || undefined,
+            errorMessage: minLengthErrorMessage || 'Пароль слишком короткий',
+        },
+        maxLength: {
+            value: maxLengthValue || undefined,
+            errorMessage: maxLengthErrorMessage || 'Пароль слишком длинный',
+        },
+        includeUppercase: {
+            value: includeUppercase,
+            errorMessage: includeUppercaseErrorMessage || 'Пароль должен содержать хотя бы одну заглавную букву',
+        },
+        includeLowercase: {
+            value: includeLowercase,
+            errorMessage: includeLowercaseErrorMessage || 'Пароль должен содержать хотя бы одну строчную букву',
+        },
+        includeDigits: {
+            value: includeDigits,
+            errorMessage: includeDigitsErrorMessage || 'Пароль должен содержать хотя бы одну цифру',
+        },
+        includeSpecialSymbols: {
+            value: includeSpecialSymbols,
+            errorMessage:
+                includeSpecialSymbolsErrorMessage || 'Пароль должен содержать хотя бы один специальный символ',
+        },
+    };
+
+    const handleOnChange = () => {
+        setError('');
+    };
+
+    const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
+        setError(errorMessage || '');
+    };
+
+    return (
+        <TextField
+            label="Валидация пароля"
+            validationType="password"
+            options={validationOptions}
+            size="l"
+            view={error ? 'negative' : 'default'}
+            leftHelper={error || 'Валидация пароля'}
+            onChange={handleOnChange}
+            onValidate={handleOnValidate}
+            {...rest}
+        />
+    );
+};
+
+export const PasswordValidation: StoryObj<StoryPasswordValidationProps> = {
+    argTypes: {
+        ...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
+    },
+    args: {
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        passwordHidden: false,
+        minLengthValue: 5,
+        minLengthErrorMessage: 'Пароль слишком короткий',
+        maxLengthValue: 25,
+        maxLengthErrorMessage: 'Пароль слишком длинный',
+        includeUppercase: true,
+        includeUppercaseErrorMessage: 'Пароль должен содержать хотя бы одну заглавную букву',
+        includeLowercase: true,
+        includeLowercaseErrorMessage: 'Пароль должен содержать хотя бы одну строчную букву',
+        includeDigits: true,
+        includeDigitsErrorMessage: 'Пароль должен содержать хотя бы одну цифру',
+        includeSpecialSymbols: true,
+        includeSpecialSymbolsErrorMessage: 'Пароль должен содержать хотя бы один специальный символ',
+    },
+    render: (args) => <StoryPasswordValidation {...args} />,
+};

package/styled-components/cjs/utils/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.keyCodes = void 0;
+exports.specialCharacters = exports.keyCodes = exports.emailPattern = void 0;
 var keyCodes = exports.keyCodes = {
   PageUp: 33,
   PageDown: 34,
@@ -16,4 +16,6 @@ var keyCodes = exports.keyCodes = {
   Enter: 13,
   Space: 32,
   Escape: 27
-};
+};
+var emailPattern = exports.emailPattern = /^[^\s@]+@([^\s@.,]+\.)+[^\s@.,]{2,}$/;
+var specialCharacters = exports.specialCharacters = /[!@#$%^&*(),.?":{}|<>]/;

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

@@ -348,6 +348,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
+        valueToItemMap: valueToItemMap,
         treeId: treeId
       }
     }, /*#__PURE__*/React.createElement(FloatingPopover, {

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

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

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

@@ -1,4 +1,4 @@
-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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -60,7 +60,6 @@ export var 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 = useReducer(pathReducer, []),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -136,8 +135,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
         onItemClick: onItemClick,
         onItemSelect: onItemSelect,
         hasArrow: hasArrow,
-        treeId: treeId,
-        renderItem: renderItem
+        treeId: treeId
       }
     }, /*#__PURE__*/React.createElement(FloatingPopover, {
       ref: floatingPopoverRef,

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

@@ -4,7 +4,7 @@ import { cx } from '../../../../utils';
 import { IconDisclosureRight } from '../../../_Icon';
 import { Context } from '../../Dropdown';
 import { getItemId } from '../../utils';
-import { Wrapper, DisclosureIconWrapper, Divider, CellWrapper, StyledCell, RenderItemWrapper } from './DropdownItem.styles';
+import { Wrapper, DisclosureIconWrapper, Divider, CellWrapper, StyledCell } from './DropdownItem.styles';
 export var DropdownItem = function DropdownItem(_ref) {
   var item = _ref.item,
     path = _ref.path,
@@ -34,8 +34,7 @@ export var 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 ? classes.dropdownItemIsDisabled : undefined;
@@ -86,7 +85,7 @@ export var DropdownItem = function DropdownItem(_ref) {
     "aria-expanded": ariaExpanded,
     "aria-level": ariaLevel,
     "aria-label": ariaLabel
-  }, renderItem ? /*#__PURE__*/React.createElement(RenderItemWrapper, null, renderItem(item)) : /*#__PURE__*/React.createElement(CellWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
+  }, /*#__PURE__*/React.createElement(CellWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
     contentLeft: contentLeft,
     contentRight: contentRight,
     alignContentLeft: "center",

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { classes, tokens, constants } from '../../Dropdown.tokens';
-import { addFocus, applyEllipsis } from '../../../../mixins';
+import { addFocus } from '../../../../mixins';
 import { cellConfig, cellTokens } from '../../../Cell';
 import { component, mergeConfig } from '../../../../engines';
 var mergedCellConfig = /*#__PURE__*/mergeConfig(cellConfig);
@@ -35,7 +35,4 @@ export var Wrapper = /*#__PURE__*/styled.li.withConfig({
   outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
   hasTransition: false,
   customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
-}));
-export var RenderItemWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-5"
-})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
+}));

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

@@ -272,6 +272,7 @@ export var selectRoot = function selectRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
+        valueToItemMap: valueToItemMap,
         treeId: treeId
       }
     }, /*#__PURE__*/React.createElement(FloatingPopover, {

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

@@ -32,6 +32,7 @@ export var 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 ? classes.dropdownItemIsDisabled : undefined;
@@ -86,7 +87,7 @@ export var Item = function Item(_ref) {
   }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(IconDone, {
     size: sizeToIconSize(size, variant),
     color: "inherit"
-  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
+  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(valueToItemMap.get(value))) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
     contentLeft: contentLeft,
     contentRight: contentRight
     // TODO: #1548

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

@@ -1,10 +1,4 @@
 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; }
 import React, { forwardRef } from 'react';
 import { sizeToIconSize, getItemId } from '../../../../utils';
 import { classes } from '../../../../Select.tokens';
@@ -53,24 +47,9 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   // Обработчик чипов
   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.createElement(StyledTextField, _extends({
     ref: ref,

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

@@ -1,4 +1,4 @@
-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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -24,7 +24,7 @@ import { base as hintSizeCSS } from './variations/_hint-size/base';
 import { Input, InputContainer, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator, StyledOptionalText, InputPlaceholder, OuterLabelWrapper, TitleCaption, StyledHintWrapper, StyledIndicatorWrapper } from './TextField.styles';
 import { classes } from './TextField.tokens';
 import { TextFieldChip } from './ui';
-import { useKeyNavigation } from './hooks';
+import { useKeyNavigation, useValidation } from './hooks';
 import { HintComponent } from './ui/Hint/Hint';
 var optionalText = 'optional';
 export var base = /*#__PURE__*/css(["display:block;"]);
@@ -77,7 +77,12 @@ export var 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,
@@ -127,6 +132,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var hasValueClass = hasValue ? classes.hasValue : undefined;
     var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
     var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
+    var isPasswordHidden = validationType === 'password' && passwordHidden;
     var hintRef = useOutsideClick(function () {
       setIsHintVisible(false);
     });
@@ -169,6 +175,13 @@ export var textFieldRoot = function textFieldRoot(Root) {
       setChips(newChips);
       onChangeChips === null || onChangeChips === void 0 || onChangeChips(newValues);
     };
+    var _useValidation = useValidation({
+        validationType: validationType,
+        options: options,
+        onValidate: onValidate
+      }),
+      handleValidationBlur = _useValidation.handleValidationBlur,
+      handleValidationKeyDown = _useValidation.handleValidationKeyDown;
     var _useKeyNavigation = useKeyNavigation({
         controlledRefs: controlledRefs,
         disabled: disabled,
@@ -198,6 +211,12 @@ export var 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;
@@ -205,6 +224,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
     };
     var handleOnKeyDown = function handleOnKeyDown(event) {
       handleInputKeydown(event);
+      handleValidationKeyDown(event);
       if (onKeyDown) {
         onKeyDown(event);
       }
@@ -338,8 +358,11 @@ export var textFieldRoot = function textFieldRoot(Root) {
       readOnly: !disabled && readOnly,
       onInput: handleInput,
       onChange: handleChange,
-      onKeyDown: handleOnKeyDown
-    }, rest)), hasInnerLabel && /*#__PURE__*/React.createElement(Label, {
+      onKeyDown: handleOnKeyDown,
+      onBlur: handleInputBlur
+    }, rest, isPasswordHidden && {
+      type: 'password'
+    })), hasInnerLabel && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
       htmlFor: innerId
     }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/React.createElement(InputPlaceholder, null, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {