@cloud-ru/uikit-product-fields-predefined 3.0.3-preview-7cd1981e.0 → 3.0.3-preview-30fdf48b.0

package/README.md

@@ -325,7 +325,7 @@
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | codeLength* | `number` | - | Количество цифр в коде (ожидается целое ≥ 1) |
-| isMobile* | `boolean` | - | Отключить автофокус (при монтировании, сбросе и при ошибке валидации) |
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | className | `string` | - | CSS-класс компонента |
 | cellClassName | `string` | - | CSS-класс ячейки кода |
 | spacing | `number[]` | - | Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) |

package/dist/cjs/components/FieldCode/FieldCode.d.ts

@@ -1,3 +1,4 @@
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { FieldDecoratorProps } from '@snack-uikit/fields';
 import { type ResendCodeProps } from './components';
 import { UseCodeInputParams } from './hooks';
@@ -10,7 +11,7 @@ export type FieldCodeRef = {
     resetCode: () => void;
 };
 /** Собственные пропсы `FieldCode` */
-export type FieldCodeOwnProps = {
+export type FieldCodeOwnProps = WithLayoutType<{
     /** CSS-класс компонента */
     className?: string;
     /** CSS-класс ячейки кода */
@@ -21,12 +22,27 @@ export type FieldCodeOwnProps = {
     showEmptyChars?: boolean;
     /** Компонент отправки нового кода */
     resendCode?: ResendCodeProps;
-    /** Отключить автофокус (при монтировании, сбросе и при ошибке валидации) */
-    isMobile: boolean;
     /** Сообщение при неверном коде, если не передан свой `error` */
     invalidCode?: string;
     /** Растягивать ячейки на всю доступную ширину; иначе фиксированная ширина по `size` */
     stretchCells?: boolean;
-};
+}>;
 export type FieldCodeProps = FieldCodeOwnProps & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
-export declare const FieldCode: import("react").ForwardRefExoticComponent<FieldCodeOwnProps & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<{
+    /** CSS-класс компонента */
+    className?: string;
+    /** CSS-класс ячейки кода */
+    cellClassName?: string;
+    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
+    spacing?: number[];
+    /** Подсветить пустые символы кода */
+    showEmptyChars?: boolean;
+    /** Компонент отправки нового кода */
+    resendCode?: ResendCodeProps;
+    /** Сообщение при неверном коде, если не передан свой `error` */
+    invalidCode?: string;
+    /** Растягивать ячейки на всю доступную ширину; иначе фиксированная ширина по `size` */
+    stretchCells?: boolean;
+} & {
+    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
+} & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;

package/dist/cjs/components/FieldCode/FieldCode.js

@@ -14,7 +14,8 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(props, ref) {
     var _a;
-    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, invalidCode, showEmptyChars, resendCode, isMobile, stretchCells = false, 'data-test-id': dataTestId, } = props;
+    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, invalidCode, showEmptyChars, resendCode, layoutType, stretchCells = false, 'data-test-id': dataTestId, } = props;
+    const isMobile = layoutType === 'mobile';
     const { inputsRef, moveFocus, blurFields } = (0, hooks_1.useFocusCell)(codeLength);
     const { code, cellHandlers, onChangeCode } = (0, hooks_1.useCodeInput)({ value, onChange, codeLength, moveFocus, onComplete });
     const { resetCode } = (0, hooks_1.useFieldHelpers)({
@@ -25,6 +26,7 @@ exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(props, ref) {
         code,
         codeLength,
     });
+    const { rootRef, codeContainerRef, hasOverflow } = (0, hooks_1.useFieldCodeOverflow)();
     (0, react_1.useImperativeHandle)(ref, () => ({
         moveFocus,
         blurFields,
@@ -37,7 +39,7 @@ exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(props, ref) {
         size,
         error: resolvedError,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.fieldCode, className), "data-stretch-cells": stretchCells || undefined }, (dataTestId ? { 'data-test-id': dataTestId } : undefined), { children: [(0, jsx_runtime_1.jsx)(fields_1.FieldDecorator, Object.assign({ className: styles_module_scss_1.default.fieldDecorator }, resolvedDecoratorProps, { children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.codeContainer, "data-size": size, "data-stretch-cells": stretchCells || undefined, children: code.map((char, index) => ((0, jsx_runtime_1.jsx)(components_1.Cell, { ref: inputRef => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: rootRef, className: (0, classnames_1.default)(styles_module_scss_1.default.fieldCode, hasOverflow && styles_module_scss_1.default.fieldCodeScrollable, className), "data-stretch-cells": stretchCells || undefined }, (dataTestId ? { 'data-test-id': dataTestId } : undefined), { children: [(0, jsx_runtime_1.jsx)(fields_1.FieldDecorator, Object.assign({ className: (0, classnames_1.default)(!hasOverflow && styles_module_scss_1.default.fieldDecorator) }, resolvedDecoratorProps, { children: (0, jsx_runtime_1.jsx)("div", { ref: codeContainerRef, className: styles_module_scss_1.default.codeContainer, "data-size": size, "data-stretch-cells": stretchCells || undefined, children: code.map((char, index) => ((0, jsx_runtime_1.jsx)(components_1.Cell, { ref: inputRef => {
                             if (inputRef) {
                                 inputsRef.current[index] = inputRef;
                             }

package/dist/cjs/components/FieldCode/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useCodeInput';
+export * from './useFieldCodeOverflow';
 export * from './useFieldCodeValidate';
 export * from './useFocusCell';
 export * from './useFieldHelpers';

package/dist/cjs/components/FieldCode/hooks/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useCodeInput"), exports);
+__exportStar(require("./useFieldCodeOverflow"), exports);
 __exportStar(require("./useFieldCodeValidate"), exports);
 __exportStar(require("./useFocusCell"), exports);
 __exportStar(require("./useFieldHelpers"), exports);

package/dist/cjs/components/FieldCode/hooks/useFieldCodeOverflow.d.ts

@@ -0,0 +1,6 @@
+/** Fallback на крайний случай: включает горизонтальный скролл, если ряд ячеек шире контейнера. */
+export declare function useFieldCodeOverflow(): {
+    rootRef: import("react").RefObject<HTMLDivElement>;
+    codeContainerRef: import("react").RefObject<HTMLDivElement>;
+    hasOverflow: boolean;
+};

package/dist/cjs/components/FieldCode/hooks/useFieldCodeOverflow.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldCodeOverflow = useFieldCodeOverflow;
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+function hasCodeOverflow(root, codeContainer) {
+    return codeContainer.scrollWidth > root.clientWidth;
+}
+/** Fallback на крайний случай: включает горизонтальный скролл, если ряд ячеек шире контейнера. */
+function useFieldCodeOverflow() {
+    const [hasOverflow, setHasOverflow] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const codeContainerRef = (0, react_1.useRef)(null);
+    const measure = (0, react_1.useCallback)(() => {
+        const root = rootRef.current;
+        const codeContainer = codeContainerRef.current;
+        if (!root || !codeContainer) {
+            return;
+        }
+        setHasOverflow(prev => {
+            const next = hasCodeOverflow(root, codeContainer);
+            return prev === next ? prev : next;
+        });
+    }, []);
+    (0, utils_1.useLayoutEffect)(() => {
+        const root = rootRef.current;
+        const codeContainer = codeContainerRef.current;
+        if (!root || !codeContainer) {
+            return;
+        }
+        measure();
+        const resizeObserver = new ResizeObserver(measure);
+        resizeObserver.observe(root);
+        resizeObserver.observe(codeContainer);
+        const mutationObserver = new MutationObserver(measure);
+        mutationObserver.observe(codeContainer, { childList: true });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [measure]);
+    return { rootRef, codeContainerRef, hasOverflow };
+}

package/dist/cjs/components/FieldCode/styles.module.css

@@ -8,13 +8,17 @@
   width:100%;
 }
 
+.fieldCodeScrollable{
+  overflow-x:auto;
+}
+
 .fieldDecorator{
   width:unset;
 }
 
 .codeContainer{
   display:flex;
-  justify-content:center;
+  justify-content:safe center;
 }
 .codeContainer[data-size=s]{
   gap:8px;

package/dist/esm/components/FieldCode/FieldCode.d.ts

@@ -1,3 +1,4 @@
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { FieldDecoratorProps } from '@snack-uikit/fields';
 import { type ResendCodeProps } from './components';
 import { UseCodeInputParams } from './hooks';
@@ -10,7 +11,7 @@ export type FieldCodeRef = {
     resetCode: () => void;
 };
 /** Собственные пропсы `FieldCode` */
-export type FieldCodeOwnProps = {
+export type FieldCodeOwnProps = WithLayoutType<{
     /** CSS-класс компонента */
     className?: string;
     /** CSS-класс ячейки кода */
@@ -21,12 +22,27 @@ export type FieldCodeOwnProps = {
     showEmptyChars?: boolean;
     /** Компонент отправки нового кода */
     resendCode?: ResendCodeProps;
-    /** Отключить автофокус (при монтировании, сбросе и при ошибке валидации) */
-    isMobile: boolean;
     /** Сообщение при неверном коде, если не передан свой `error` */
     invalidCode?: string;
     /** Растягивать ячейки на всю доступную ширину; иначе фиксированная ширина по `size` */
     stretchCells?: boolean;
-};
+}>;
 export type FieldCodeProps = FieldCodeOwnProps & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
-export declare const FieldCode: import("react").ForwardRefExoticComponent<FieldCodeOwnProps & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<{
+    /** CSS-класс компонента */
+    className?: string;
+    /** CSS-класс ячейки кода */
+    cellClassName?: string;
+    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
+    spacing?: number[];
+    /** Подсветить пустые символы кода */
+    showEmptyChars?: boolean;
+    /** Компонент отправки нового кода */
+    resendCode?: ResendCodeProps;
+    /** Сообщение при неверном коде, если не передан свой `error` */
+    invalidCode?: string;
+    /** Растягивать ячейки на всю доступную ширину; иначе фиксированная ширина по `size` */
+    stretchCells?: boolean;
+} & {
+    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
+} & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;

package/dist/esm/components/FieldCode/FieldCode.js

@@ -3,12 +3,13 @@ import cn from 'classnames';
 import { forwardRef, useImperativeHandle } from 'react';
 import { FieldDecorator } from '@snack-uikit/fields';
 import { Cell, ResendCode } from './components';
-import { useCodeInput, useFieldHelpers, useFocusCell } from './hooks';
+import { useCodeInput, useFieldCodeOverflow, useFieldHelpers, useFocusCell } from './hooks';
 import styles from './styles.module.css';
 import { getCellValidationState } from './utils';
 export const FieldCode = forwardRef(function FieldCode(props, ref) {
     var _a;
-    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, invalidCode, showEmptyChars, resendCode, isMobile, stretchCells = false, 'data-test-id': dataTestId, } = props;
+    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, invalidCode, showEmptyChars, resendCode, layoutType, stretchCells = false, 'data-test-id': dataTestId, } = props;
+    const isMobile = layoutType === 'mobile';
     const { inputsRef, moveFocus, blurFields } = useFocusCell(codeLength);
     const { code, cellHandlers, onChangeCode } = useCodeInput({ value, onChange, codeLength, moveFocus, onComplete });
     const { resetCode } = useFieldHelpers({
@@ -19,6 +20,7 @@ export const FieldCode = forwardRef(function FieldCode(props, ref) {
         code,
         codeLength,
     });
+    const { rootRef, codeContainerRef, hasOverflow } = useFieldCodeOverflow();
     useImperativeHandle(ref, () => ({
         moveFocus,
         blurFields,
@@ -31,7 +33,7 @@ export const FieldCode = forwardRef(function FieldCode(props, ref) {
         size,
         error: resolvedError,
     };
-    return (_jsxs("div", Object.assign({ className: cn(styles.fieldCode, className), "data-stretch-cells": stretchCells || undefined }, (dataTestId ? { 'data-test-id': dataTestId } : undefined), { children: [_jsx(FieldDecorator, Object.assign({ className: styles.fieldDecorator }, resolvedDecoratorProps, { children: _jsx("div", { className: styles.codeContainer, "data-size": size, "data-stretch-cells": stretchCells || undefined, children: code.map((char, index) => (_jsx(Cell, { ref: inputRef => {
+    return (_jsxs("div", Object.assign({ ref: rootRef, className: cn(styles.fieldCode, hasOverflow && styles.fieldCodeScrollable, className), "data-stretch-cells": stretchCells || undefined }, (dataTestId ? { 'data-test-id': dataTestId } : undefined), { children: [_jsx(FieldDecorator, Object.assign({ className: cn(!hasOverflow && styles.fieldDecorator) }, resolvedDecoratorProps, { children: _jsx("div", { ref: codeContainerRef, className: styles.codeContainer, "data-size": size, "data-stretch-cells": stretchCells || undefined, children: code.map((char, index) => (_jsx(Cell, { ref: inputRef => {
                             if (inputRef) {
                                 inputsRef.current[index] = inputRef;
                             }

package/dist/esm/components/FieldCode/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useCodeInput';
+export * from './useFieldCodeOverflow';
 export * from './useFieldCodeValidate';
 export * from './useFocusCell';
 export * from './useFieldHelpers';

package/dist/esm/components/FieldCode/hooks/index.js

@@ -1,4 +1,5 @@
 export * from './useCodeInput';
+export * from './useFieldCodeOverflow';
 export * from './useFieldCodeValidate';
 export * from './useFocusCell';
 export * from './useFieldHelpers';

package/dist/esm/components/FieldCode/hooks/useFieldCodeOverflow.d.ts

@@ -0,0 +1,6 @@
+/** Fallback на крайний случай: включает горизонтальный скролл, если ряд ячеек шире контейнера. */
+export declare function useFieldCodeOverflow(): {
+    rootRef: import("react").RefObject<HTMLDivElement>;
+    codeContainerRef: import("react").RefObject<HTMLDivElement>;
+    hasOverflow: boolean;
+};

package/dist/esm/components/FieldCode/hooks/useFieldCodeOverflow.js

@@ -0,0 +1,40 @@
+import { useCallback, useRef, useState } from 'react';
+import { useLayoutEffect } from '@snack-uikit/utils';
+function hasCodeOverflow(root, codeContainer) {
+    return codeContainer.scrollWidth > root.clientWidth;
+}
+/** Fallback на крайний случай: включает горизонтальный скролл, если ряд ячеек шире контейнера. */
+export function useFieldCodeOverflow() {
+    const [hasOverflow, setHasOverflow] = useState(false);
+    const rootRef = useRef(null);
+    const codeContainerRef = useRef(null);
+    const measure = useCallback(() => {
+        const root = rootRef.current;
+        const codeContainer = codeContainerRef.current;
+        if (!root || !codeContainer) {
+            return;
+        }
+        setHasOverflow(prev => {
+            const next = hasCodeOverflow(root, codeContainer);
+            return prev === next ? prev : next;
+        });
+    }, []);
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        const codeContainer = codeContainerRef.current;
+        if (!root || !codeContainer) {
+            return;
+        }
+        measure();
+        const resizeObserver = new ResizeObserver(measure);
+        resizeObserver.observe(root);
+        resizeObserver.observe(codeContainer);
+        const mutationObserver = new MutationObserver(measure);
+        mutationObserver.observe(codeContainer, { childList: true });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [measure]);
+    return { rootRef, codeContainerRef, hasOverflow };
+}

package/dist/esm/components/FieldCode/styles.module.css

@@ -8,13 +8,17 @@
   width:100%;
 }
 
+.fieldCodeScrollable{
+  overflow-x:auto;
+}
+
 .fieldDecorator{
   width:unset;
 }
 
 .codeContainer{
   display:flex;
-  justify-content:center;
+  justify-content:safe center;
 }
 .codeContainer[data-size=s]{
   gap:8px;