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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-fields-predefined",
   "title": "Fields Predefined",
-  "version": "3.0.3-preview-7cd1981e.0",
+  "version": "3.0.3-preview-30fdf48b.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -62,5 +62,5 @@
     "react-hook-form": ">=7.51.0",
     "yup": ">=0.32.0"
   },
-  "gitHead": "d449ad65a8304ef339fdf8679b1a1efc5a58d3f4"
+  "gitHead": "e099ff0e265dbde19b4985b2766c327517fd9836"
 }

package/src/components/FieldCode/FieldCode.tsx

@@ -1,10 +1,11 @@
 import cn from 'classnames';
 import { forwardRef, useImperativeHandle } from 'react';
 
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { FieldDecorator, FieldDecoratorProps } from '@snack-uikit/fields';
 
 import { Cell, ResendCode, type ResendCodeProps } from './components';
-import { useCodeInput, UseCodeInputParams, useFieldHelpers, useFocusCell } from './hooks';
+import { useCodeInput, UseCodeInputParams, useFieldCodeOverflow, useFieldHelpers, useFocusCell } from './hooks';
 import styles from './styles.module.scss';
 import { getCellValidationState } from './utils';
 
@@ -18,7 +19,7 @@ export type FieldCodeRef = {
 };
 
 /** Собственные пропсы `FieldCode` */
-export type FieldCodeOwnProps = {
+export type FieldCodeOwnProps = WithLayoutType<{
   /** CSS-класс компонента */
   className?: string;
   /** CSS-класс ячейки кода */
@@ -29,13 +30,11 @@ export type FieldCodeOwnProps = {
   showEmptyChars?: boolean;
   /** Компонент отправки нового кода */
   resendCode?: ResendCodeProps;
-  /** Отключить автофокус (при монтировании, сбросе и при ошибке валидации) */
-  isMobile: boolean;
   /** Сообщение при неверном коде, если не передан свой `error` */
   invalidCode?: string;
   /** Растягивать ячейки на всю доступную ширину; иначе фиксированная ширина по `size` */
   stretchCells?: boolean;
-};
+}>;
 
 export type FieldCodeProps = FieldCodeOwnProps &
   Omit<UseCodeInputParams, 'moveFocus'> &
@@ -57,11 +56,13 @@ export const FieldCode = forwardRef<FieldCodeRef, FieldCodeProps>(function Field
     invalidCode,
     showEmptyChars,
     resendCode,
-    isMobile,
+    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({
@@ -73,6 +74,8 @@ export const FieldCode = forwardRef<FieldCodeRef, FieldCodeProps>(function Field
     codeLength,
   });
 
+  const { rootRef, codeContainerRef, hasOverflow } = useFieldCodeOverflow();
+
   useImperativeHandle(
     ref,
     () => ({
@@ -94,12 +97,18 @@ export const FieldCode = forwardRef<FieldCodeRef, FieldCodeProps>(function Field
 
   return (
     <div
-      className={cn(styles.fieldCode, className)}
+      ref={rootRef}
+      className={cn(styles.fieldCode, hasOverflow && styles.fieldCodeScrollable, className)}
       data-stretch-cells={stretchCells || undefined}
       {...(dataTestId ? { 'data-test-id': dataTestId } : undefined)}
     >
-      <FieldDecorator className={styles.fieldDecorator} {...resolvedDecoratorProps}>
-        <div className={styles.codeContainer} data-size={size} data-stretch-cells={stretchCells || undefined}>
+      <FieldDecorator className={cn(!hasOverflow && styles.fieldDecorator)} {...resolvedDecoratorProps}>
+        <div
+          ref={codeContainerRef}
+          className={styles.codeContainer}
+          data-size={size}
+          data-stretch-cells={stretchCells || undefined}
+        >
           {code.map((char, index) => (
             <Cell
               ref={inputRef => {

package/src/components/FieldCode/hooks/index.ts

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

package/src/components/FieldCode/hooks/useFieldCodeOverflow.ts

@@ -0,0 +1,54 @@
+import { useCallback, useRef, useState } from 'react';
+
+import { useLayoutEffect } from '@snack-uikit/utils';
+
+function hasCodeOverflow(root: HTMLElement, codeContainer: HTMLElement): boolean {
+  return codeContainer.scrollWidth > root.clientWidth;
+}
+
+/** Fallback на крайний случай: включает горизонтальный скролл, если ряд ячеек шире контейнера. */
+export function useFieldCodeOverflow() {
+  const [hasOverflow, setHasOverflow] = useState(false);
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const codeContainerRef = useRef<HTMLDivElement>(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/src/components/FieldCode/styles.module.scss

@@ -18,13 +18,17 @@ $container-gaps: (
   }
 }
 
+.fieldCodeScrollable {
+  overflow-x: auto;
+}
+
 .fieldDecorator {
   width: unset;
 }
 
 .codeContainer {
   display: flex;
-  justify-content: center;
+  justify-content: safe center;
 
   @each $size, $gap in $container-gaps {
     &[data-size='#{$size}'] {