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

package/dist/esm/components/FieldAi/components/CheckItem/CheckItem.js

@@ -4,7 +4,7 @@ import { CheckSVG } from '@cloud-ru/uikit-product-icons';
 import { Typography } from '@snack-uikit/typography';
 import styles from './styles.module.css';
 const CHECKED_ITEM_DISAPPEAR_TIMEOUT = 500;
-export function CheckItem({ label, checked, layoutType, shouldHide = false }) {
+export function CheckItem({ label, checked, layoutType, shouldHide = false, animated = false }) {
     const [visible, setVisible] = useState(checked);
     useEffect(() => {
         if (checked) {
@@ -18,5 +18,5 @@ export function CheckItem({ label, checked, layoutType, shouldHide = false }) {
     if (shouldHide && !visible) {
         return null;
     }
-    return (_jsxs("div", { className: styles.checkItem, "data-layout-type": layoutType, children: [_jsx(CheckSVG, { size: 20, className: styles.icon, "data-checked": checked }), _jsx(Typography.SansBodyM, { className: styles.label, "data-checked": checked, children: label })] }));
+    return (_jsxs("div", { className: styles.checkItem, "data-layout-type": layoutType, "data-animated": animated, children: [_jsx(CheckSVG, { size: 20, className: styles.icon, "data-checked": checked }), _jsx(Typography.SansBodyM, { className: styles.label, "data-checked": checked, children: label })] }));
 }

package/dist/esm/components/FieldAi/components/CheckItem/styles.module.css

@@ -1,3 +1,14 @@
+@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;
@@ -5,6 +16,9 @@
 .checkItem[data-layout-type=mobile], .checkItem[data-layout-type=tablet]{
   gap:8px;
 }
+.checkItem[data-animated=true]{
+  animation:shake 0.5s ease-in-out;
+}
 
 .icon{
   flex-shrink:0;

package/dist/esm/components/FieldAi/components/PasswordValidation/PasswordValidation.d.ts

@@ -1,6 +1,7 @@
 import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
-import { ValidationPassword } from '../../utils';
+import { ValidationPassword, ValidationPasswordKey } from '../../utils';
 export type WithPasswordTooltipProps = WithLayoutType<{
     passwordValidation: ValidationPassword;
+    animatedKey?: ValidationPasswordKey | null;
 }>;
-export declare function PasswordValidation({ passwordValidation, layoutType }: WithPasswordTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasswordValidation({ passwordValidation, layoutType, animatedKey }: WithPasswordTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/FieldAi/components/PasswordValidation/PasswordValidation.js

@@ -4,7 +4,7 @@ import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { isTouchDevice as isTouchDeviceHelper } from '../../../../helpers';
 import { CheckItem } from '../CheckItem';
 import styles from './styles.module.css';
-export function PasswordValidation({ passwordValidation, layoutType }) {
+export function PasswordValidation({ passwordValidation, layoutType, animatedKey }) {
     const { t } = useLocale('FieldsPredefined');
     const allCriteriaMet = useMemo(() => Object.values(passwordValidation).every(item => item), [passwordValidation]);
     const isTouchDevice = isTouchDeviceHelper(layoutType);
@@ -13,5 +13,5 @@ export function PasswordValidation({ passwordValidation, layoutType }) {
             return (_jsx("div", { className: styles.validationItemsContainer, "data-layout-type": layoutType, children: _jsx(CheckItem, { checked: true, label: t('FieldAi.secret.passwordTooltip.titleSuccess'), layoutType: layoutType, shouldHide: false }) }));
         }
     }
-    return (_jsx("div", { className: styles.validationItemsContainer, "data-layout-type": layoutType, children: _jsxs("div", { className: styles.validationList, children: [_jsx(CheckItem, { checked: passwordValidation.minLength, label: t('FieldAi.secret.passwordTooltip.minLength'), layoutType: layoutType, shouldHide: isTouchDevice }), _jsx(CheckItem, { checked: passwordValidation.onlyLatin, label: t('FieldAi.secret.passwordTooltip.onlyLatin'), layoutType: layoutType, shouldHide: isTouchDevice }), _jsx(CheckItem, { checked: passwordValidation.hasLetterCases, label: t('FieldAi.secret.passwordTooltip.hasLetterCases'), layoutType: layoutType, shouldHide: isTouchDevice }), _jsx(CheckItem, { checked: passwordValidation.hasNumber, label: t('FieldAi.secret.passwordTooltip.hasNumber'), layoutType: layoutType, shouldHide: isTouchDevice }), _jsx(CheckItem, { checked: passwordValidation.hasSymbol, label: t('FieldAi.secret.passwordTooltip.hasSymbol'), layoutType: layoutType, shouldHide: isTouchDevice }), _jsx(CheckItem, { checked: passwordValidation.noSpaces, label: t('FieldAi.secret.passwordTooltip.noSpaces'), layoutType: layoutType, shouldHide: isTouchDevice })] }) }));
+    return (_jsx("div", { className: styles.validationItemsContainer, "data-layout-type": layoutType, children: _jsxs("div", { className: styles.validationList, children: [_jsx(CheckItem, { checked: passwordValidation.minLength, label: t('FieldAi.secret.passwordTooltip.minLength'), layoutType: layoutType, shouldHide: isTouchDevice, animated: animatedKey === 'minLength' }), _jsx(CheckItem, { checked: passwordValidation.onlyLatin, label: t('FieldAi.secret.passwordTooltip.onlyLatin'), layoutType: layoutType, shouldHide: isTouchDevice, animated: animatedKey === 'onlyLatin' }), _jsx(CheckItem, { checked: passwordValidation.hasLetterCases, label: t('FieldAi.secret.passwordTooltip.hasLetterCases'), layoutType: layoutType, shouldHide: isTouchDevice, animated: animatedKey === 'hasLetterCases' }), _jsx(CheckItem, { checked: passwordValidation.hasNumber, label: t('FieldAi.secret.passwordTooltip.hasNumber'), layoutType: layoutType, shouldHide: isTouchDevice, animated: animatedKey === 'hasNumber' }), _jsx(CheckItem, { checked: passwordValidation.hasSymbol, label: t('FieldAi.secret.passwordTooltip.hasSymbol'), layoutType: layoutType, shouldHide: isTouchDevice, animated: animatedKey === 'hasSymbol' }), _jsx(CheckItem, { checked: passwordValidation.noSpaces, label: t('FieldAi.secret.passwordTooltip.noSpaces'), layoutType: layoutType, shouldHide: isTouchDevice, animated: animatedKey === 'noSpaces' })] }) }));
 }

package/dist/esm/components/FieldAi/components/WithPasswordValidation/WithPasswordValidation.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
-import { ValidationPassword } from '../../utils';
+import { ValidationPassword, ValidationPasswordKey } from '../../utils';
 export type WithPasswordTooltipProps = WithLayoutType<{
     showValidation?: boolean;
     children: ReactNode;
     passwordValidation: ValidationPassword;
+    animatedKey?: ValidationPasswordKey | null;
 }>;
-export declare function WithPasswordValidation({ showValidation, passwordValidation, layoutType, children, }: WithPasswordTooltipProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+export declare function WithPasswordValidation({ showValidation, passwordValidation, layoutType, children, animatedKey, }: WithPasswordTooltipProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;

package/dist/esm/components/FieldAi/components/WithPasswordValidation/WithPasswordValidation.js

@@ -3,15 +3,15 @@ import { AdaptiveTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
 import { isTouchDevice } from '../../../../helpers';
 import { PasswordValidation } from '../PasswordValidation';
 import styles from './styles.module.css';
-export function WithPasswordValidation({ showValidation, passwordValidation, layoutType, children, }) {
+export function WithPasswordValidation({ showValidation, passwordValidation, layoutType, children, animatedKey, }) {
     if (isTouchDevice(layoutType)) {
         if (showValidation) {
-            return (_jsxs("div", { className: styles.validationContainer, children: [_jsx(PasswordValidation, { passwordValidation: passwordValidation, layoutType: layoutType }), children] }));
+            return (_jsxs("div", { className: styles.validationContainer, children: [_jsx(PasswordValidation, { passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedKey }), children] }));
         }
         return children;
     }
     if (showValidation) {
-        return (_jsx(AdaptiveTooltip, { placement: 'left-end', layoutType: layoutType, tip: _jsx(PasswordValidation, { passwordValidation: passwordValidation, layoutType: layoutType }), offset: 8, children: children }));
+        return (_jsx(AdaptiveTooltip, { placement: 'left-end', layoutType: layoutType, tip: _jsx(PasswordValidation, { passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedKey }), offset: 8, children: children }));
     }
     return children;
 }

package/dist/esm/components/FieldAi/utils.d.ts

@@ -6,4 +6,5 @@ export type ValidationPassword = {
     hasSymbol: boolean;
     noSpaces: boolean;
 };
+export type ValidationPasswordKey = keyof ValidationPassword;
 export declare const getValidationPassword: (password?: string) => ValidationPassword;