@cloud-ru/uikit-product-fields-predefined 0.15.3 → 0.17.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-fields-predefined",
   "title": "Fields Predefined",
-  "version": "0.15.3",
+  "version": "0.17.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -61,5 +61,5 @@
     "react-hook-form": ">=7.51.0",
     "yup": ">=0.32.0"
   },
-  "gitHead": "629fe2bd96a28ea24b60a04c913fbbe453d104b7"
+  "gitHead": "649ac65d527094cc472552ec150ef7ba66dfcb78"
 }

package/src/components/FieldAi/FieldAi.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames';
 import { forwardRef, KeyboardEventHandler, useEffect, useMemo, useRef, useState } from 'react';
 
-import { EyeClosedSVG, EyeSVG } from '@cloud-ru/uikit-product-icons';
+import { EyeClosedSVG, EyeSVG, PasswordLockSVG } from '@cloud-ru/uikit-product-icons';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import {
   AdaptiveFieldTextArea,
@@ -10,12 +10,15 @@ import {
 } from '@cloud-ru/uikit-product-mobile-fields';
 import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { ButtonFunction, ButtonOutline } from '@snack-uikit/button';
+import { themeVars } from '@snack-uikit/figma-tokens';
 import { Tooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
 
 import { FieldSubmitButton } from '../../helperComponents/FieldSubmitButton';
 import { TextAreaActionsFooter } from '../../helperComponents/TextAreaActionsFooter';
 import { isTouchDevice as isTouchDeviceHelper } from '../../helpers';
 import { AIDisclaimer } from '../AIDisclaimer/AIDisclaimer';
+import { AlertButton } from './components/AlertButton';
 import { MobileFieldAi } from './components/MobileFieldAi';
 import { WithPasswordValidation } from './components/WithPasswordValidation';
 import styles from './styles.module.scss';
@@ -29,11 +32,25 @@ export type FieldAiProps = WithLayoutType<
     onSubmit(value: string): void;
     /** Действие при клике по кнопке сброса контекста */
     onResetContextClick?(): void;
+    /** Действие для отмены секьюрности поля */
+    onCancelSecure?(): void;
   }
 >;
 
 export const FieldAi = forwardRef<HTMLTextAreaElement, FieldAiProps>(
-  ({ secure = false, onSubmit: handleSubmitProp, value, onResetContextClick, disabled, className, ...props }, ref) => {
+  (
+    {
+      secure = false,
+      onSubmit: handleSubmitProp,
+      value,
+      onResetContextClick,
+      onCancelSecure,
+      disabled,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
     const { layoutType, validationState } = props;
     const { t } = useLocale('FieldsPredefined');
     const isTouchDevice = isTouchDeviceHelper(layoutType);
@@ -48,6 +65,7 @@ export const FieldAi = forwardRef<HTMLTextAreaElement, FieldAiProps>(
     const passwordValidation = useMemo(() => getValidationPassword(value), [value]);
     const isPasswordValid = isPasswordMode ? Object.values(passwordValidation).every(Boolean) : true;
     const showPasswordError = !isPasswordValid && secure && value;
+    const showPasswordAlert = Boolean(onCancelSecure) && secure === 'password';
 
     useEffect(
       () => () => {
@@ -113,7 +131,14 @@ export const FieldAi = forwardRef<HTMLTextAreaElement, FieldAiProps>(
     }
 
     return (
-      <div className={cn(styles.wrapper, className)}>
+      <div className={cn(styles.wrapper, isPasswordMode && styles.passwordWrapper, className)}>
+        {showPasswordAlert && (
+          <div className={styles.alert}>
+            <PasswordLockSVG size={16} color={themeVars.sys.neutral.textSupport} />
+            <Typography.SansBodyS className={styles.alertText}>{t('FieldAi.secret.alert.text')}</Typography.SansBodyS>
+            <AlertButton label={t('FieldAi.secret.alert.button')} onClick={onCancelSecure} />
+          </div>
+        )}
         <WithPasswordValidation
           showValidation={isPasswordMode}
           passwordValidation={passwordValidation}

package/src/components/FieldAi/components/AlertButton/AlertButton.tsx

@@ -0,0 +1,16 @@
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+
+export type AlertButtonProps = {
+  label: string;
+  onClick?(): void;
+};
+
+export function AlertButton({ label, onClick }: AlertButtonProps) {
+  return (
+    <button onClick={onClick} className={styles.button}>
+      <Typography.SansLabelM className={styles.label}>{label}</Typography.SansLabelM>
+    </button>
+  );
+}

package/src/components/FieldAi/components/AlertButton/index.ts

@@ -0,0 +1 @@
+export * from './AlertButton';

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

@@ -0,0 +1,20 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.button {
+  outline: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.label {
+  color: stv.$sys-blue-text-support;
+
+  &:hover {
+    color: stv.$sys-neutral-text-main;
+  }
+}

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

@@ -1,9 +1,38 @@
+/* stylelint-disable color-no-hex */
 @use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields' as ste;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
 
 .wrapper {
   display: flex;
   flex-direction: column;
   gap: ste.$dimension-050m;
+  position: relative;
+}
+
+.passwordWrapper {
+  gap: 0;
+}
+
+.alert {
+  display: flex;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 8px 8px 0 0;
+  border: 1px solid stv.$sys-blue-decor-activated;
+  background-color: stv.$sys-blue-decor-default;
+  box-sizing: border-box;
+  height: 38px;
+  position: absolute;
+  left: 0;
+  top: -26px;
+  width: 100%;
+  color: stv.$sys-neutral-text-main;
+}
+
+.alertText {
+  flex: 1;
+  min-width: 0;
+  color: stv.$sys-neutral-text-main;
 }
 
 .secured {
@@ -34,18 +63,28 @@
 
 .submitButton {
   &:not([data-disabled]) {
-    /* stylelint-disable-next-line color-no-hex */
-    background: radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7CB5F2 15%, #5FD7C2 45%, #26D07C 65%);
+    background: radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 15%, #5fd7c2 45%, #26d07c 65%);
   }
 }
 
 .textarea {
-  &> :first-child {
-    &[data-validation=default]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]) {
+  & > :first-child {
+    &[data-validation='default']:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]) {
       border-color: transparent;
-      /* stylelint-disable-next-line color-no-hex */
-      background: linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7CB5F2 8%, #78B9EC 17%, #70C6DD 28%, #64D8C7 38%, #5FD7C2 44%, #54D5B3 51%, #40D39C 58%, #26D07C 66%) border-box;
+      background:
+        linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box,
+        radial-gradient(
+            92.53% 92.53% at 65.87% 21.69%,
+            #7cb5f2 8%,
+            #78b9ec 17%,
+            #70c6dd 28%,
+            #64d8c7 38%,
+            #5fd7c2 44%,
+            #54d5b3 51%,
+            #40d39c 58%,
+            #26d07c 66%
+          )
+          border-box;
     }
   }
 }
- 

package/src/components/FieldPhone/FieldPhone.tsx

@@ -12,7 +12,7 @@ import { PLACEHOLDER_CHAR } from './constants';
 import { useCountries } from './hooks';
 import styles from './styles.module.scss';
 import { CountrySettings, FieldPhoneOptionsProps, MaskOptions } from './types';
-import { detectCountryByPhone } from './utils';
+import { detectCountryByPhone, handleAutoInsert } from './utils';
 
 export type FieldPhoneProps = WithLayoutType<
   Omit<
@@ -63,6 +63,9 @@ export const FieldPhone = forwardRef<HTMLInputElement, FieldPhoneProps>(
     const options = useCountries(optionsProp);
     const isOnlyOneCountryAvailable = options.length === 1;
 
+    const rawInsertRef = useRef('');
+    const insertSwitchRef = useRef(false);
+
     const [country, setCountry] = useValueControl<FieldPhoneOptionsProps>({
       defaultValue: options[0],
       onChange: onChangeCountry,
@@ -90,10 +93,23 @@ export const FieldPhone = forwardRef<HTMLInputElement, FieldPhoneProps>(
         definitions: {
           X: /[0-9]/,
         },
+        prepare: (str: string) => {
+          if (str.replace(/\D/g, '').length > 1) {
+            rawInsertRef.current = str;
+          }
+          return str;
+        },
       }),
       [country?.mask],
     );
 
+    const clearRaw = () => {
+      rawInsertRef.current = '';
+    };
+    const markSwitchRef = () => {
+      insertSwitchRef.current = true;
+    };
+
     const {
       ref: iMaskRef,
       value: iMaskValue,
@@ -110,6 +126,24 @@ export const FieldPhone = forwardRef<HTMLInputElement, FieldPhoneProps>(
         if (value !== valueProp) {
           onChangeProp?.(value);
         }
+
+        if (insertSwitchRef.current) {
+          insertSwitchRef.current = false;
+          return;
+        }
+        handleAutoInsert({
+          raw: rawInsertRef.current,
+          onValueChange: value => {
+            setTimeout(() => setValue(value), 0);
+          },
+          onCountryChange: country => {
+            markSwitchRef();
+            clearRaw();
+            setCountry(country);
+          },
+          country,
+          options,
+        });
       },
     });
 

package/src/components/FieldPhone/__tests__/constants.ts

@@ -24,3 +24,178 @@ export const phoneFormatCases = [
   { country: 'Tajikistan', input: '+992123456789', expected: '+992 12 345-6789' },
   { country: 'Moldova', input: '+37312345678', expected: '+373 1234 5678' },
 ];
+
+export const handleAutoInsertCases = [
+  {
+    name: 'Kyrgyzstan switches + exact national',
+    raw: '+996 201 666666',
+    currentId: 'russia',
+    expectedCountryId: 'kyrgyzstan',
+    expectedValue: '201666666',
+  },
+  {
+    name: 'Kyrgyzstan same => exact national',
+    raw: '+996201666666',
+    currentId: 'kyrgyzstan',
+    expectedValue: '201666666',
+  },
+  {
+    name: 'Russia incomplete => no calls',
+    raw: '+7 987',
+    currentId: 'russia',
+  },
+  {
+    name: 'Albania (+355) XXX XXX-XXX',
+    raw: '+355 675 123 456',
+    currentId: 'russia',
+    expectedCountryId: 'albania',
+    expectedLengthFromCountryId: 'albania',
+  },
+  {
+    name: 'Algeria (+213) XX XXX-XXXX',
+    raw: '+213 12 345 6789',
+    currentId: 'russia',
+    expectedCountryId: 'algeria',
+    expectedLengthFromCountryId: 'algeria',
+  },
+  {
+    name: 'Armenia (+374) XX XXX-XXX',
+    raw: '+374 10 123 456',
+    currentId: 'russia',
+    expectedCountryId: 'armenia',
+    expectedLengthFromCountryId: 'armenia',
+  },
+  {
+    name: 'Austria (+43) XXX XXX-XXXX',
+    raw: '+43 664 123 4567',
+    currentId: 'russia',
+    expectedCountryId: 'austria',
+    expectedLengthFromCountryId: 'austria',
+  },
+  {
+    name: 'Australia (+61) X XXXX-XXXX',
+    raw: '+61 4 1234 5678',
+    currentId: 'russia',
+    expectedCountryId: 'australia',
+    expectedLengthFromCountryId: 'australia',
+  },
+  {
+    name: 'Belarus (+375) XX XXX-XX-XX',
+    raw: '+375 29 123 45 67',
+    currentId: 'russia',
+    expectedCountryId: 'belarus',
+    expectedLengthFromCountryId: 'belarus',
+  },
+  {
+    name: 'Bangladesh (+880) X XXX-XXXX',
+    raw: '+880 1 234 5678',
+    currentId: 'russia',
+    expectedCountryId: 'bangladesh',
+    expectedLengthFromCountryId: 'bangladesh',
+  },
+  {
+    name: 'Bahrain (+973) XX XXX-XXX',
+    raw: '+973 33 123 456',
+    currentId: 'russia',
+    expectedCountryId: 'bahrain',
+    expectedLengthFromCountryId: 'bahrain',
+  },
+  {
+    name: 'Cyprus (+357) XX XXXXXX',
+    raw: '+357 99 123456',
+    currentId: 'russia',
+    expectedCountryId: 'cyprus',
+    expectedLengthFromCountryId: 'cyprus',
+  },
+  {
+    name: 'Georgia (+995) XXX XX-XX-XX',
+    raw: '+995 555 12 34 56',
+    currentId: 'russia',
+    expectedCountryId: 'georgia',
+    expectedLengthFromCountryId: 'georgia',
+  },
+  {
+    name: 'India (+91) XXXXX-XXXXX',
+    raw: '+91 98765 43210',
+    currentId: 'russia',
+    expectedCountryId: 'india',
+    expectedLengthFromCountryId: 'india',
+  },
+  {
+    name: 'Iran (+98) XXX XXX-XXXX',
+    raw: '+98 912 345 6789',
+    currentId: 'russia',
+    expectedCountryId: 'iran',
+    expectedLengthFromCountryId: 'iran',
+  },
+  {
+    name: 'Netherlands (+31) XX XXX-XXXX',
+    raw: '+31 20 123 4567',
+    currentId: 'russia',
+    expectedCountryId: 'netherlands',
+    expectedLengthFromCountryId: 'netherlands',
+  },
+  {
+    name: 'Romania (+40) XX XXX-XXXX',
+    raw: '+40 21 123 4567',
+    currentId: 'russia',
+    expectedCountryId: 'romania',
+    expectedLengthFromCountryId: 'romania',
+  },
+  {
+    name: 'Serbia (+381) XX XXX-XXXX',
+    raw: '+381 11 123 4567',
+    currentId: 'russia',
+    expectedCountryId: 'serbia',
+    expectedLengthFromCountryId: 'serbia',
+  },
+  {
+    name: 'Uzbekistan (+998) XX XXX-XX-XX',
+    raw: '+998 90 123 45 67',
+    currentId: 'russia',
+    expectedCountryId: 'uzbekistan',
+    expectedLengthFromCountryId: 'uzbekistan',
+  },
+  {
+    name: 'Tajikistan (+992) XX XXX-XXXX',
+    raw: '+992 93 123 4567',
+    currentId: 'russia',
+    expectedCountryId: 'tajikistan',
+    expectedLengthFromCountryId: 'tajikistan',
+  },
+  {
+    name: 'Moldova (+373) XXXX XXXX',
+    raw: '+373 1234 5678',
+    currentId: 'russia',
+    expectedCountryId: 'moldova',
+    expectedLengthFromCountryId: 'moldova',
+  },
+  {
+    name: 'Netherlands (+31) switches from Moldova',
+    raw: '+31 20 123 4567',
+    currentId: 'moldova',
+    expectedCountryId: 'netherlands',
+    expectedLengthFromCountryId: 'netherlands',
+  },
+  {
+    name: 'Uzbekistan (+998) switches from Tajikistan',
+    raw: '+998 90 123 45 67',
+    currentId: 'tajikistan',
+    expectedCountryId: 'uzbekistan',
+    expectedLengthFromCountryId: 'uzbekistan',
+  },
+  {
+    name: 'Tajikistan (+992) switches from Albania',
+    raw: '+992 93 123 4567',
+    currentId: 'albania',
+    expectedCountryId: 'tajikistan',
+    expectedLengthFromCountryId: 'tajikistan',
+  },
+  {
+    name: 'Moldova (+373) switches from Egypt',
+    raw: '+373 1234 5678',
+    currentId: 'egypt',
+    expectedCountryId: 'moldova',
+    expectedLengthFromCountryId: 'moldova',
+  },
+];

package/src/components/FieldPhone/__tests__/handleAutoInsert.spec.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { ALL_COUNTRY_CODES } from '../countries';
+import { handleAutoInsert } from '../utils';
+import { handleAutoInsertCases } from './constants';
+
+const OPTIONS = ALL_COUNTRY_CODES.map(c => ({
+  id: c.value,
+  iso2: c.iso2,
+  mask: c.mask,
+  content: {
+    caption: c.caption,
+    option: c.value,
+  },
+  beforeContent: null,
+}));
+
+const byId = (id: string) => {
+  const found = OPTIONS.find(c => c.id === id);
+  if (!found) throw new Error(`Country not found in OPTIONS: ${id}`);
+  return found;
+};
+
+type BaseCase = {
+  name: string;
+  raw: string;
+  currentId: string;
+};
+
+type NoCallsCase = BaseCase;
+
+type ExactCase = BaseCase & {
+  expectedValue: string;
+  expectedCountryId?: string;
+};
+
+const casesNoCalls: NoCallsCase[] = handleAutoInsertCases.filter(
+  (c): c is NoCallsCase => !('expectedValue' in c) && !('expectedLengthFromCountryId' in c),
+);
+
+const casesExact: ExactCase[] = handleAutoInsertCases.filter((c): c is ExactCase => 'expectedValue' in c);
+
+describe('handleAutoInsert — no calls', () => {
+  casesNoCalls.forEach(tc => {
+    it(`${tc.name}`, () => {
+      const onValueChange = vi.fn();
+      const onCountryChange = vi.fn();
+
+      handleAutoInsert({
+        raw: tc.raw,
+        onValueChange,
+        onCountryChange,
+        country: byId(tc.currentId),
+        options: OPTIONS,
+      });
+
+      expect(onCountryChange).not.toHaveBeenCalled();
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+  });
+});
+
+describe('handleAutoInsert — exact value', () => {
+  casesExact.forEach(tc => {
+    it(`${tc.name}`, () => {
+      const onValueChange = vi.fn();
+      const onCountryChange = vi.fn();
+
+      handleAutoInsert({
+        raw: tc.raw,
+        onValueChange,
+        onCountryChange,
+        country: byId(tc.currentId),
+        options: OPTIONS,
+      });
+
+      expect(onValueChange).toHaveBeenCalledTimes(1);
+      expect(onValueChange).toHaveBeenCalledWith(tc.expectedValue);
+
+      const expectedCountryCalls = tc.expectedCountryId ? 1 : 0;
+      expect(onCountryChange).toHaveBeenCalledTimes(expectedCountryCalls);
+
+      const actualCountryId = onCountryChange.mock.calls[0]?.[0]?.id;
+      expect(actualCountryId).toBe(tc.expectedCountryId);
+    });
+  });
+});

package/src/components/FieldPhone/utils.ts

@@ -69,3 +69,44 @@ export function detectCountryByPhone(text: string, options: FieldPhoneOptionsPro
 
   return options.find(opt => opt.iso2 === regionCode);
 }
+
+export const handleAutoInsert = ({
+  raw,
+  onValueChange,
+  onCountryChange,
+  country,
+  options,
+}: {
+  raw: string;
+  onValueChange: (str: string) => void;
+  onCountryChange: (country: FieldPhoneOptionsProps) => void;
+  country?: FieldPhoneOptionsProps;
+  options: FieldPhoneOptionsProps[];
+}) => {
+  if (!raw) return;
+
+  const parsed = parsePhoneNumber(raw);
+  const ok = parsed.valid || parsed.possible;
+  if (!ok) return;
+
+  const detected = detectCountryByPhone(raw, options);
+  if (!detected) return;
+
+  let national = parsed.number?.significant.replace(/\D/g, '');
+  if (!national) return;
+
+  const nextNationalLength = (detected.mask?.match(/X/g) ?? []).length;
+  if (nextNationalLength && national.length > nextNationalLength) {
+    national = national.slice(-nextNationalLength);
+  }
+
+  const fullDigits = (parsed.number?.e164 ?? raw).replace(/\D/g, '');
+  const countryCodeDigits = String(parsed.countryCode ?? '');
+  const expected = countryCodeDigits.length + nextNationalLength;
+  if (fullDigits.length < expected) return;
+
+  if (detected.id !== country?.id) {
+    onCountryChange(detected);
+  }
+  onValueChange(national);
+};