@cloud-ru/uikit-product-fields-predefined 0.14.0 → 0.15.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-fields-predefined",
   "title": "Fields Predefined",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,12 +32,12 @@
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-icons": "16.0.0",
-    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.28",
-    "@cloud-ru/uikit-product-mobile-fields": "0.12.0",
-    "@cloud-ru/uikit-product-mobile-modal": "0.9.25",
-    "@cloud-ru/uikit-product-mobile-tooltip": "0.5.1",
-    "@cloud-ru/uikit-product-utils": "8.0.1",
+    "@cloud-ru/uikit-product-icons": "16.0.1",
+    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.29",
+    "@cloud-ru/uikit-product-mobile-fields": "0.12.1",
+    "@cloud-ru/uikit-product-mobile-modal": "0.9.26",
+    "@cloud-ru/uikit-product-mobile-tooltip": "0.5.2",
+    "@cloud-ru/uikit-product-utils": "8.0.2",
     "@snack-uikit/attachment": "0.4.10",
     "@snack-uikit/button": "0.19.16",
     "@snack-uikit/drop-zone": "0.9.6",
@@ -61,5 +61,5 @@
     "react-hook-form": ">=7.51.0",
     "yup": ">=0.32.0"
   },
-  "gitHead": "6366d4a4912c09f95af6ba794df7b5a246893762"
+  "gitHead": "a8efe861f537e7d5b0bb7dbadff99c57fd612720"
 }

package/src/components/FieldAi/FieldAi.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { forwardRef, KeyboardEventHandler, useMemo, useState } from 'react';
+import { forwardRef, KeyboardEventHandler, useEffect, useMemo, useRef, useState } from 'react';
 
 import { EyeClosedSVG, EyeSVG } from '@cloud-ru/uikit-product-icons';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
@@ -19,7 +19,7 @@ import { AIDisclaimer } from '../AIDisclaimer/AIDisclaimer';
 import { MobileFieldAi } from './components/MobileFieldAi';
 import { WithPasswordValidation } from './components/WithPasswordValidation';
 import styles from './styles.module.scss';
-import { getValidationPassword } from './utils';
+import { getValidationPassword, ValidationPasswordKey } from './utils';
 
 export type FieldAiProps = WithLayoutType<
   Omit<FieldTextAreaProps, 'placeholder' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'> & {
@@ -39,6 +39,8 @@ export const FieldAi = forwardRef<HTMLTextAreaElement, FieldAiProps>(
     const isTouchDevice = isTouchDeviceHelper(layoutType);
 
     const [isValueHidden, setIsValueHidden] = useState<boolean>(true);
+    const [animatedValidationKey, setAnimatedValidationKey] = useState<ValidationPasswordKey | null>(null);
+    const timerRef = useRef<NodeJS.Timeout | null>(null);
 
     const isValueValid = typeof value === 'string' && value.trim().length > 0;
     const isPasswordMode = secure === 'password';
@@ -47,19 +49,47 @@ export const FieldAi = forwardRef<HTMLTextAreaElement, FieldAiProps>(
     const isPasswordValid = isPasswordMode ? Object.values(passwordValidation).every(Boolean) : true;
     const showPasswordError = !isPasswordValid && secure && value;
 
+    useEffect(
+      () => () => {
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+      },
+      [],
+    );
+
     const handleSubmit = () => {
       if (isValueValid && isPasswordValid) {
         handleSubmitProp(value);
       }
     };
 
-    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = e => {
+    const triggerValidationHighlight = (key: ValidationPasswordKey) => {
+      setAnimatedValidationKey(key);
+
+      timerRef.current = setTimeout(() => {
+        setAnimatedValidationKey(null);
+      }, 1000);
+    };
+
+    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = event => {
       if (isTouchDevice) {
         return;
       }
 
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
+      if (isPasswordMode && event.key.length === 1) {
+        const isLetter = /\p{L}/u.test(event.key);
+        const isLatinLetter = /^[a-zA-Z]$/.test(event.key);
+
+        if (isLetter && !isLatinLetter) {
+          event.preventDefault();
+          triggerValidationHighlight('onlyLatin');
+          return;
+        }
+      }
+
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
 
         if (!disabled) {
           handleSubmit();
@@ -88,6 +118,7 @@ export const FieldAi = forwardRef<HTMLTextAreaElement, FieldAiProps>(
           showValidation={isPasswordMode}
           passwordValidation={passwordValidation}
           layoutType={layoutType}
+          animatedKey={animatedValidationKey}
         >
           <AdaptiveFieldTextArea
             {...props}

package/src/components/FieldAi/components/CheckItem/CheckItem.tsx

@@ -10,11 +10,12 @@ type CheckItemProps = WithLayoutType<{
   label: string;
   checked: boolean;
   shouldHide?: boolean;
+  animated?: boolean;
 }>;
 
 const CHECKED_ITEM_DISAPPEAR_TIMEOUT = 500;
 
-export function CheckItem({ label, checked, layoutType, shouldHide = false }: CheckItemProps) {
+export function CheckItem({ label, checked, layoutType, shouldHide = false, animated = false }: CheckItemProps) {
   const [visible, setVisible] = useState(checked);
 
   useEffect(() => {
@@ -34,7 +35,7 @@ export function CheckItem({ label, checked, layoutType, shouldHide = false }: Ch
   }
 
   return (
-    <div className={styles.checkItem} data-layout-type={layoutType}>
+    <div className={styles.checkItem} data-layout-type={layoutType} data-animated={animated}>
       <CheckSVG size={20} className={styles.icon} data-checked={checked} />
       <Typography.SansBodyM className={styles.label} data-checked={checked}>
         {label}

package/src/components/FieldAi/components/CheckItem/styles.module.scss

@@ -1,5 +1,17 @@
 @use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
 
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+}
+
 .checkItem {
   display: inline-flex;
   gap: 10px;
@@ -8,6 +20,10 @@
   &[data-layout-type='tablet'] {
     gap: 8px;
   }
+
+  &[data-animated='true'] {
+    animation: shake 0.5s ease-in-out;
+  }
 }
 
 .icon {

package/src/components/FieldAi/components/PasswordValidation/PasswordValidation.tsx

@@ -4,15 +4,16 @@ import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 
 import { isTouchDevice as isTouchDeviceHelper } from '../../../../helpers';
-import { ValidationPassword } from '../../utils';
+import { ValidationPassword, ValidationPasswordKey } from '../../utils';
 import { CheckItem } from '../CheckItem';
 import styles from './styles.module.scss';
 
 export type WithPasswordTooltipProps = WithLayoutType<{
   passwordValidation: ValidationPassword;
+  animatedKey?: ValidationPasswordKey | null;
 }>;
 
-export function PasswordValidation({ passwordValidation, layoutType }: WithPasswordTooltipProps) {
+export function PasswordValidation({ passwordValidation, layoutType, animatedKey }: WithPasswordTooltipProps) {
   const { t } = useLocale('FieldsPredefined');
 
   const allCriteriaMet = useMemo(() => Object.values(passwordValidation).every(item => item), [passwordValidation]);
@@ -41,36 +42,42 @@ export function PasswordValidation({ passwordValidation, layoutType }: WithPassw
           label={t('FieldAi.secret.passwordTooltip.minLength')}
           layoutType={layoutType}
           shouldHide={isTouchDevice}
+          animated={animatedKey === 'minLength'}
         />
         <CheckItem
           checked={passwordValidation.onlyLatin}
           label={t('FieldAi.secret.passwordTooltip.onlyLatin')}
           layoutType={layoutType}
           shouldHide={isTouchDevice}
+          animated={animatedKey === 'onlyLatin'}
         />
         <CheckItem
           checked={passwordValidation.hasLetterCases}
           label={t('FieldAi.secret.passwordTooltip.hasLetterCases')}
           layoutType={layoutType}
           shouldHide={isTouchDevice}
+          animated={animatedKey === 'hasLetterCases'}
         />
         <CheckItem
           checked={passwordValidation.hasNumber}
           label={t('FieldAi.secret.passwordTooltip.hasNumber')}
           layoutType={layoutType}
           shouldHide={isTouchDevice}
+          animated={animatedKey === 'hasNumber'}
         />
         <CheckItem
           checked={passwordValidation.hasSymbol}
           label={t('FieldAi.secret.passwordTooltip.hasSymbol')}
           layoutType={layoutType}
           shouldHide={isTouchDevice}
+          animated={animatedKey === 'hasSymbol'}
         />
         <CheckItem
           checked={passwordValidation.noSpaces}
           label={t('FieldAi.secret.passwordTooltip.noSpaces')}
           layoutType={layoutType}
           shouldHide={isTouchDevice}
+          animated={animatedKey === 'noSpaces'}
         />
       </div>
     </div>

package/src/components/FieldAi/components/WithPasswordValidation/WithPasswordValidation.tsx

@@ -4,7 +4,7 @@ import { AdaptiveTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
 import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 
 import { isTouchDevice } from '../../../../helpers';
-import { ValidationPassword } from '../../utils';
+import { ValidationPassword, ValidationPasswordKey } from '../../utils';
 import { PasswordValidation } from '../PasswordValidation';
 import styles from './styles.module.scss';
 
@@ -12,6 +12,7 @@ export type WithPasswordTooltipProps = WithLayoutType<{
   showValidation?: boolean;
   children: ReactNode;
   passwordValidation: ValidationPassword;
+  animatedKey?: ValidationPasswordKey | null;
 }>;
 
 export function WithPasswordValidation({
@@ -19,12 +20,17 @@ export function WithPasswordValidation({
   passwordValidation,
   layoutType,
   children,
+  animatedKey,
 }: WithPasswordTooltipProps) {
   if (isTouchDevice(layoutType)) {
     if (showValidation) {
       return (
         <div className={styles.validationContainer}>
-          <PasswordValidation passwordValidation={passwordValidation} layoutType={layoutType} />
+          <PasswordValidation
+            passwordValidation={passwordValidation}
+            layoutType={layoutType}
+            animatedKey={animatedKey}
+          />
 
           {children}
         </div>
@@ -39,7 +45,13 @@ export function WithPasswordValidation({
       <AdaptiveTooltip
         placement={'left-end'}
         layoutType={layoutType}
-        tip={<PasswordValidation passwordValidation={passwordValidation} layoutType={layoutType} />}
+        tip={
+          <PasswordValidation
+            passwordValidation={passwordValidation}
+            layoutType={layoutType}
+            animatedKey={animatedKey}
+          />
+        }
         offset={8}
       >
         {children}

package/src/components/FieldAi/utils.ts

@@ -7,6 +7,8 @@ export type ValidationPassword = {
   noSpaces: boolean;
 };
 
+export type ValidationPasswordKey = keyof ValidationPassword;
+
 const MIN_PASSWORD_LENGTH = 8;
 const NUMBER_REGEX = /[0-9]/;
 const CAPITAL_REGEX = /\p{Lu}/u;