@alfalab/core-components-confirmation 15.0.11 → 15.1.0

package/src/types.ts

@@ -145,6 +145,12 @@ export interface ConfirmationProps {
      * @default 1300
      */
     errorVisibleDuration?: number;
+
+    /**
+     * Ограничение навигации фокусом между ячейками
+     * @default false
+     */
+    strictFocus?: boolean;
 }
 
 export type TConfirmationContext = Required<
@@ -164,6 +170,7 @@ export type TConfirmationContext = Required<
         | 'onFatalErrorOkButtonClick'
         | 'tempBlockDuration'
         | 'hideCountdownSection'
+        | 'strictFocus'
     >
 > &
     Pick<

package/types.d.ts

@@ -117,8 +117,13 @@ export interface ConfirmationProps {
      * @default 1300
      */
     errorVisibleDuration?: number;
+    /**
+     * Ограничение навигации фокусом между ячейками
+     * @default false
+     */
+    strictFocus?: boolean;
 }
-export type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'titleTag' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
+export type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'titleTag' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection' | 'strictFocus'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
     timeLeft: number;
 };
 export interface ConfirmationTexts {

package/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["src/types.ts"],"sourcesContent":["import { type ComponentType, type CSSProperties, type ReactNode } from 'react';\n\nexport interface ConfirmationProps {\n    /**\n     * Экран компонента\n     */\n    screen: ConfirmationScreen | string;\n\n    /**\n     * Состояние компонента\n     */\n    state: ConfirmationState | string;\n\n    /**\n     * Мобильная версия компонента для экрана\n     */\n    mobile?: boolean;\n\n    /**\n     * Позиционирование контента\n     */\n    alignContent?: 'left' | 'center';\n\n    /**\n     * HTML тег для заголовка\n     * @default 'h3'\n     */\n    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    /**\n     * Объект с текстами\n     */\n    texts?: ConfirmationTexts;\n\n    /**\n     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка\n     */\n    requiredCharAmount?: number;\n\n    /**\n     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах\n     */\n    countdownDuration?: number;\n\n    /**\n     * Продолжительность блокировки формы (ms)\n     */\n    tempBlockDuration?: number;\n\n    /**\n     * Номер телефона, на который отправлен код\n     */\n    phone?: string;\n\n    /**\n     * Не осталось попыток ввода кода\n     */\n    blockSmsRetry?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Сss класс для стилизации общей обёртки\n     */\n    className?: string;\n\n    /**\n     * Максимальная ширина контейнера компонента.\n     * Для mobile по умолчанию используется 288px, если не передано значение.\n     */\n    maxWidth?: CSSProperties['maxWidth'];\n\n    /**\n     * Флаг - нужно ли очищать код при возникновении ошибки\n     */\n    clearCodeOnError?: boolean;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeState: (state: ConfirmationState | string) => void;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeScreen: (state: ConfirmationScreen | string) => void;\n\n    /**\n     * Обработчик события завершения ввода кода подписания\n     */\n    onInputFinished: (code: string) => void;\n\n    /**\n     * Обработчик события нажатия на кнопку \"Запросить код\"\n     */\n    onSmsRetryClick: () => void;\n\n    /**\n     * Клик по кнопке \"Понятно\" на экране фатальной ошибки\n     */\n    onFatalErrorOkButtonClick?: () => void;\n\n    /**\n     * Временная блокировка формы закончилась\n     */\n    onTempBlockFinished?: () => void;\n\n    /**\n     * Возвращает объект, где ключ - название экрана (screen), значение - компонент для экрана\n     */\n    getScreensMap?: (defaultScreensMap: ScreensMap) => ScreensMap;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Скрыть секцию с повторной отправкой кода\n     * @default false\n     */\n    hideCountdownSection?: boolean;\n\n    /**\n     *  Слот для контента с подсказкой на главном экране\n     */\n    initialScreenHintSlot?: ReactNode;\n\n    /**\n     * Контрольная точка для кнопки, с нее начинается desktop версия\n     * @default 1024\n     */\n    breakpoint?: number;\n\n    /**\n     * Версия, которая будет использоваться при серверном рендеринге\n     */\n    client?: 'desktop' | 'mobile';\n\n    /**\n     * Продолжительность отображения ошибки\n     * @default 1300\n     */\n    errorVisibleDuration?: number;\n}\n\nexport type TConfirmationContext = Required<\n    Pick<\n        ConfirmationProps,\n        | 'alignContent'\n        | 'titleTag'\n        | 'texts'\n        | 'state'\n        | 'screen'\n        | 'requiredCharAmount'\n        | 'onInputFinished'\n        | 'countdownDuration'\n        | 'onChangeState'\n        | 'onSmsRetryClick'\n        | 'onChangeScreen'\n        | 'onFatalErrorOkButtonClick'\n        | 'tempBlockDuration'\n        | 'hideCountdownSection'\n    >\n> &\n    Pick<\n        ConfirmationProps,\n        | 'phone'\n        | 'blockSmsRetry'\n        | 'onTempBlockFinished'\n        | 'clearCodeOnError'\n        | 'initialScreenHintSlot'\n        | 'errorVisibleDuration'\n        | 'breakpoint'\n        | 'client'\n    > & {\n        timeLeft: number;\n    };\n\nexport interface ConfirmationTexts {\n    /**\n     * Экран INITIAL\n     */\n    title?: ReactNode; // заголовок\n    codeError?: string; // ошибка проверки кода\n    codeErrorExpired?: string; // код устарел, запросите новый\n    codeErrorExpiredEnded?: string; // код устарел\n    codeChecking?: string; // код проверяется\n    codeSending?: string; // код отправляется\n    codeSended?: string; // код отправлен\n    buttonRetry?: string; // кнопка повторной отправки кода\n    linkToHint?: string; // ссылка на экран HINT\n    noAttemptsLeft?: string; // не осталось попыток запроса кода\n    countdown?: string; // 'запросить повторно можно через'\n\n    /**\n     * Экран HINT\n     */\n    hintTitle?: string; // заголовок\n    hintDescription?: string; // описание\n    hintNotification?: string; // уведомление\n    hintButton?: string; // кнопка 'Вернуться'\n    domesticPhone?: string; // номер телефона для звонков по России\n    internationalPhone?: string; // номер телефона для звонков из-за границы\n\n    /**\n     * Экран FATAL_ERROR\n     */\n    fatalErrorTitle?: ReactNode; // заголовок\n    fatalErrorDescription?: ReactNode; // описание\n    fatalErrorButton?: string; // кнопка\n\n    /**\n     * Экран TEMP_BLOCK\n     */\n    tempBlockTitle?: ReactNode; // заголовок\n    tempBlockDescription?: ReactNode; // описание\n\n    /**\n     * Экран TEMP_BLOCK_OVER\n     */\n    tempBlockOverTitle?: ReactNode; // заголовок\n    tempBlockOverDescription?: ReactNode; // описание\n    tempBlockOverButton?: string; // кнопка\n}\n\nexport type ConfirmationScreen =\n    | 'INITIAL' // начальный экран\n    | 'HINT' // экран \"Не приходит смс?\"\n    | 'FATAL_ERROR' // экран критической ошибки\n    | 'TEMP_BLOCK' // экран временной блокировки\n    | 'TEMP_BLOCK_OVER'; // экран todo\n\nexport type ConfirmationState =\n    | 'INITIAL' // начальное состояние\n    | 'CODE_CHECKING' // проверка кода\n    | 'CODE_SENDING' // повторная отправка кода\n    | 'CODE_ERROR' // ошибка, когда ввели неверный код\n    | 'CODE_EXPIRED' // ошибка, когда код устарел, но можно запросить новый\n    | 'CODE_EXPIRED_ENDED'; // ошибка, когда код устарел\n\nexport interface ScreensMap {\n    [key: string]: ComponentType;\n}\n\nexport const defaultTexts: ConfirmationTexts = {\n    title: 'Введите код из\\xa0уведомления',\n    codeError: 'Код не подходит, проверьте его',\n    codeErrorExpired: 'Код устарел, запросите новый',\n    codeErrorExpiredEnded: 'Код устарел',\n    codeChecking: '',\n    codeSending: '',\n    buttonRetry: 'Запросить код',\n    hintTitle: 'Не\\xa0приходит код?',\n    hintDescription: 'Если\\xa0сменили номер, позвоните нам или обратитесь в\\xa0любой офис банка.',\n    hintNotification:\n        'Если номер не\\xa0меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.',\n    linkToHint: 'Не\\xa0приходит код?',\n    hintButton: 'Вернуться к\\xa0вводу кода',\n    noAttemptsLeft: 'Не\\xa0осталось попыток запроса кода',\n    fatalErrorTitle: 'Ввести код больше нельзя',\n    fatalErrorDescription:\n        'Мы ограничили следующие попытки ввода, потому\\xa0что код был введён неверно больше 5 раз.',\n    fatalErrorButton: 'Понятно',\n    tempBlockTitle: 'Ввести код пока нельзя',\n    tempBlockDescription: 'Слишком много неверных попыток. Запросите новый позже',\n    tempBlockOverTitle: 'Ввод разблокирован',\n    tempBlockOverDescription: 'Теперь можно запросить новый код',\n    tempBlockOverButton: 'Запросить новый код',\n    codeSended: 'Код отправлен',\n    countdown: 'Запросить новый можно через',\n    domesticPhone: '8 800 200 00 00',\n    internationalPhone: '+7 495 78 888 78',\n};\n"],"names":[],"mappings":";;;;AAwPa,IAAA,YAAY,GAAsB;AAC3C,IAAA,KAAK,EAAE,+BAA+B;AACtC,IAAA,SAAS,EAAE,gCAAgC;AAC3C,IAAA,gBAAgB,EAAE,8BAA8B;AAChD,IAAA,qBAAqB,EAAE,aAAa;AACpC,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,SAAS,EAAE,qBAAqB;AAChC,IAAA,eAAe,EAAE,4EAA4E;AAC7F,IAAA,gBAAgB,EACZ,6GAA6G;AACjH,IAAA,UAAU,EAAE,qBAAqB;AACjC,IAAA,UAAU,EAAE,2BAA2B;AACvC,IAAA,cAAc,EAAE,qCAAqC;AACrD,IAAA,eAAe,EAAE,0BAA0B;AAC3C,IAAA,qBAAqB,EACjB,2FAA2F;AAC/F,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,cAAc,EAAE,wBAAwB;AACxC,IAAA,oBAAoB,EAAE,uDAAuD;AAC7E,IAAA,kBAAkB,EAAE,oBAAoB;AACxC,IAAA,wBAAwB,EAAE,kCAAkC;AAC5D,IAAA,mBAAmB,EAAE,qBAAqB;AAC1C,IAAA,UAAU,EAAE,eAAe;AAC3B,IAAA,SAAS,EAAE,6BAA6B;AACxC,IAAA,aAAa,EAAE,iBAAiB;AAChC,IAAA,kBAAkB,EAAE,kBAAkB;;;;;"}
+{"version":3,"file":"types.js","sources":["src/types.ts"],"sourcesContent":["import { type ComponentType, type CSSProperties, type ReactNode } from 'react';\n\nexport interface ConfirmationProps {\n    /**\n     * Экран компонента\n     */\n    screen: ConfirmationScreen | string;\n\n    /**\n     * Состояние компонента\n     */\n    state: ConfirmationState | string;\n\n    /**\n     * Мобильная версия компонента для экрана\n     */\n    mobile?: boolean;\n\n    /**\n     * Позиционирование контента\n     */\n    alignContent?: 'left' | 'center';\n\n    /**\n     * HTML тег для заголовка\n     * @default 'h3'\n     */\n    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    /**\n     * Объект с текстами\n     */\n    texts?: ConfirmationTexts;\n\n    /**\n     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка\n     */\n    requiredCharAmount?: number;\n\n    /**\n     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах\n     */\n    countdownDuration?: number;\n\n    /**\n     * Продолжительность блокировки формы (ms)\n     */\n    tempBlockDuration?: number;\n\n    /**\n     * Номер телефона, на который отправлен код\n     */\n    phone?: string;\n\n    /**\n     * Не осталось попыток ввода кода\n     */\n    blockSmsRetry?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Сss класс для стилизации общей обёртки\n     */\n    className?: string;\n\n    /**\n     * Максимальная ширина контейнера компонента.\n     * Для mobile по умолчанию используется 288px, если не передано значение.\n     */\n    maxWidth?: CSSProperties['maxWidth'];\n\n    /**\n     * Флаг - нужно ли очищать код при возникновении ошибки\n     */\n    clearCodeOnError?: boolean;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeState: (state: ConfirmationState | string) => void;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeScreen: (state: ConfirmationScreen | string) => void;\n\n    /**\n     * Обработчик события завершения ввода кода подписания\n     */\n    onInputFinished: (code: string) => void;\n\n    /**\n     * Обработчик события нажатия на кнопку \"Запросить код\"\n     */\n    onSmsRetryClick: () => void;\n\n    /**\n     * Клик по кнопке \"Понятно\" на экране фатальной ошибки\n     */\n    onFatalErrorOkButtonClick?: () => void;\n\n    /**\n     * Временная блокировка формы закончилась\n     */\n    onTempBlockFinished?: () => void;\n\n    /**\n     * Возвращает объект, где ключ - название экрана (screen), значение - компонент для экрана\n     */\n    getScreensMap?: (defaultScreensMap: ScreensMap) => ScreensMap;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Скрыть секцию с повторной отправкой кода\n     * @default false\n     */\n    hideCountdownSection?: boolean;\n\n    /**\n     *  Слот для контента с подсказкой на главном экране\n     */\n    initialScreenHintSlot?: ReactNode;\n\n    /**\n     * Контрольная точка для кнопки, с нее начинается desktop версия\n     * @default 1024\n     */\n    breakpoint?: number;\n\n    /**\n     * Версия, которая будет использоваться при серверном рендеринге\n     */\n    client?: 'desktop' | 'mobile';\n\n    /**\n     * Продолжительность отображения ошибки\n     * @default 1300\n     */\n    errorVisibleDuration?: number;\n\n    /**\n     * Ограничение навигации фокусом между ячейками\n     * @default false\n     */\n    strictFocus?: boolean;\n}\n\nexport type TConfirmationContext = Required<\n    Pick<\n        ConfirmationProps,\n        | 'alignContent'\n        | 'titleTag'\n        | 'texts'\n        | 'state'\n        | 'screen'\n        | 'requiredCharAmount'\n        | 'onInputFinished'\n        | 'countdownDuration'\n        | 'onChangeState'\n        | 'onSmsRetryClick'\n        | 'onChangeScreen'\n        | 'onFatalErrorOkButtonClick'\n        | 'tempBlockDuration'\n        | 'hideCountdownSection'\n        | 'strictFocus'\n    >\n> &\n    Pick<\n        ConfirmationProps,\n        | 'phone'\n        | 'blockSmsRetry'\n        | 'onTempBlockFinished'\n        | 'clearCodeOnError'\n        | 'initialScreenHintSlot'\n        | 'errorVisibleDuration'\n        | 'breakpoint'\n        | 'client'\n    > & {\n        timeLeft: number;\n    };\n\nexport interface ConfirmationTexts {\n    /**\n     * Экран INITIAL\n     */\n    title?: ReactNode; // заголовок\n    codeError?: string; // ошибка проверки кода\n    codeErrorExpired?: string; // код устарел, запросите новый\n    codeErrorExpiredEnded?: string; // код устарел\n    codeChecking?: string; // код проверяется\n    codeSending?: string; // код отправляется\n    codeSended?: string; // код отправлен\n    buttonRetry?: string; // кнопка повторной отправки кода\n    linkToHint?: string; // ссылка на экран HINT\n    noAttemptsLeft?: string; // не осталось попыток запроса кода\n    countdown?: string; // 'запросить повторно можно через'\n\n    /**\n     * Экран HINT\n     */\n    hintTitle?: string; // заголовок\n    hintDescription?: string; // описание\n    hintNotification?: string; // уведомление\n    hintButton?: string; // кнопка 'Вернуться'\n    domesticPhone?: string; // номер телефона для звонков по России\n    internationalPhone?: string; // номер телефона для звонков из-за границы\n\n    /**\n     * Экран FATAL_ERROR\n     */\n    fatalErrorTitle?: ReactNode; // заголовок\n    fatalErrorDescription?: ReactNode; // описание\n    fatalErrorButton?: string; // кнопка\n\n    /**\n     * Экран TEMP_BLOCK\n     */\n    tempBlockTitle?: ReactNode; // заголовок\n    tempBlockDescription?: ReactNode; // описание\n\n    /**\n     * Экран TEMP_BLOCK_OVER\n     */\n    tempBlockOverTitle?: ReactNode; // заголовок\n    tempBlockOverDescription?: ReactNode; // описание\n    tempBlockOverButton?: string; // кнопка\n}\n\nexport type ConfirmationScreen =\n    | 'INITIAL' // начальный экран\n    | 'HINT' // экран \"Не приходит смс?\"\n    | 'FATAL_ERROR' // экран критической ошибки\n    | 'TEMP_BLOCK' // экран временной блокировки\n    | 'TEMP_BLOCK_OVER'; // экран todo\n\nexport type ConfirmationState =\n    | 'INITIAL' // начальное состояние\n    | 'CODE_CHECKING' // проверка кода\n    | 'CODE_SENDING' // повторная отправка кода\n    | 'CODE_ERROR' // ошибка, когда ввели неверный код\n    | 'CODE_EXPIRED' // ошибка, когда код устарел, но можно запросить новый\n    | 'CODE_EXPIRED_ENDED'; // ошибка, когда код устарел\n\nexport interface ScreensMap {\n    [key: string]: ComponentType;\n}\n\nexport const defaultTexts: ConfirmationTexts = {\n    title: 'Введите код из\\xa0уведомления',\n    codeError: 'Код не подходит, проверьте его',\n    codeErrorExpired: 'Код устарел, запросите новый',\n    codeErrorExpiredEnded: 'Код устарел',\n    codeChecking: '',\n    codeSending: '',\n    buttonRetry: 'Запросить код',\n    hintTitle: 'Не\\xa0приходит код?',\n    hintDescription: 'Если\\xa0сменили номер, позвоните нам или обратитесь в\\xa0любой офис банка.',\n    hintNotification:\n        'Если номер не\\xa0меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.',\n    linkToHint: 'Не\\xa0приходит код?',\n    hintButton: 'Вернуться к\\xa0вводу кода',\n    noAttemptsLeft: 'Не\\xa0осталось попыток запроса кода',\n    fatalErrorTitle: 'Ввести код больше нельзя',\n    fatalErrorDescription:\n        'Мы ограничили следующие попытки ввода, потому\\xa0что код был введён неверно больше 5 раз.',\n    fatalErrorButton: 'Понятно',\n    tempBlockTitle: 'Ввести код пока нельзя',\n    tempBlockDescription: 'Слишком много неверных попыток. Запросите новый позже',\n    tempBlockOverTitle: 'Ввод разблокирован',\n    tempBlockOverDescription: 'Теперь можно запросить новый код',\n    tempBlockOverButton: 'Запросить новый код',\n    codeSended: 'Код отправлен',\n    countdown: 'Запросить новый можно через',\n    domesticPhone: '8 800 200 00 00',\n    internationalPhone: '+7 495 78 888 78',\n};\n"],"names":[],"mappings":";;;;AA+Pa,IAAA,YAAY,GAAsB;AAC3C,IAAA,KAAK,EAAE,+BAA+B;AACtC,IAAA,SAAS,EAAE,gCAAgC;AAC3C,IAAA,gBAAgB,EAAE,8BAA8B;AAChD,IAAA,qBAAqB,EAAE,aAAa;AACpC,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,SAAS,EAAE,qBAAqB;AAChC,IAAA,eAAe,EAAE,4EAA4E;AAC7F,IAAA,gBAAgB,EACZ,6GAA6G;AACjH,IAAA,UAAU,EAAE,qBAAqB;AACjC,IAAA,UAAU,EAAE,2BAA2B;AACvC,IAAA,cAAc,EAAE,qCAAqC;AACrD,IAAA,eAAe,EAAE,0BAA0B;AAC3C,IAAA,qBAAqB,EACjB,2FAA2F;AAC/F,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,cAAc,EAAE,wBAAwB;AACxC,IAAA,oBAAoB,EAAE,uDAAuD;AAC7E,IAAA,kBAAkB,EAAE,oBAAoB;AACxC,IAAA,wBAAwB,EAAE,kCAAkC;AAC5D,IAAA,mBAAmB,EAAE,qBAAqB;AAC1C,IAAA,UAAU,EAAE,eAAe;AAC3B,IAAA,SAAS,EAAE,6BAA6B;AACxC,IAAA,aAAa,EAAE,iBAAiB;AAChC,IAAA,kBAAkB,EAAE,kBAAkB;;;;;"}