@cloud-ru/ds-uikit-product-fields-predefined 2.0.16-preview-d50a3da1.0 → 2.0.16-preview-e30f4f90.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-fields-predefined",
-  "version": "2.0.16-preview-d50a3da1.0",
+  "version": "2.0.16-preview-e30f4f90.0",
   "description": "Набор предопределённых полей формы поверх @ds/fields — телефон, маски, имя, описание, код и другие готовые сценарии ввода.",
   "repository": {
     "type": "git",
@@ -44,21 +44,21 @@
     "imask": "^7.6.1",
     "merge-refs": "^2.0.0",
     "react-imask": "^7.6.1",
+    "@cloud-ru/ds-button": "1.0.2",
     "@cloud-ru/ds-adaptive": "1.0.1",
-    "@cloud-ru/ds-drawer": "1.2.2-preview-d50a3da1.0",
-    "@cloud-ru/ds-attachment": "1.1.9-preview-d50a3da1.0",
-    "@cloud-ru/ds-field-decorator": "1.0.7-preview-d50a3da1.0",
-    "@cloud-ru/ds-button": "1.0.3-preview-d50a3da1.0",
-    "@cloud-ru/ds-icons": "1.2.1-preview-d50a3da1.0",
-    "@cloud-ru/ds-fields": "2.2.7-preview-d50a3da1.0",
-    "@cloud-ru/ds-list": "2.2.1-preview-d50a3da1.0",
+    "@cloud-ru/ds-attachment": "1.1.9-preview-e30f4f90.0",
+    "@cloud-ru/ds-dropzone": "1.0.1",
+    "@cloud-ru/ds-field-decorator": "1.0.7-preview-e30f4f90.0",
+    "@cloud-ru/ds-fields": "2.2.7-preview-e30f4f90.0",
+    "@cloud-ru/ds-input-private": "1.0.5",
+    "@cloud-ru/ds-icons": "1.2.0",
+    "@cloud-ru/ds-drawer": "1.2.2-preview-e30f4f90.0",
+    "@cloud-ru/ds-list": "2.2.1-preview-e30f4f90.0",
     "@cloud-ru/ds-locale": "1.0.0",
-    "@cloud-ru/ds-input-private": "1.0.6-preview-d50a3da1.0",
-    "@cloud-ru/ds-modal": "1.1.3-preview-d50a3da1.0",
-    "@cloud-ru/ds-scroll": "1.0.3-preview-d50a3da1.0",
-    "@cloud-ru/ds-tooltip": "1.0.6-preview-d50a3da1.0",
-    "@cloud-ru/ds-utils": "1.1.0",
-    "@cloud-ru/ds-dropzone": "1.0.2-preview-d50a3da1.0"
+    "@cloud-ru/ds-modal": "1.1.3-preview-e30f4f90.0",
+    "@cloud-ru/ds-tooltip": "1.0.5",
+    "@cloud-ru/ds-scroll": "1.0.3-preview-e30f4f90.0",
+    "@cloud-ru/ds-utils": "1.1.0"
   },
   "peerDependencies": {
     "react-hook-form": "^7.79.0",

package/src/components/FieldChat/FieldChat.tsx

@@ -55,7 +55,7 @@ export function FieldChat({ handleSubmit: handleSubmitProp, value, attachment, a
   };
 
   return (
-    <div className={styles.fieldChat}>
+    <div className={styles.fieldChat} data-layout-type={layoutType}>
       {isMobile && <Attachments files={files} isMobile={isMobile} />}
 
       <FieldTextArea

package/src/components/FieldChat/components/Attachments/styles.module.scss

@@ -9,7 +9,7 @@
 .attachments {
   display: flex;
   gap: base.$sn-primitive-dimension-8;
-  box-sizing: border-box;
+  padding: base.$sn-primitive-dimension-1 0;
 
   // Превью сохраняют свой размер и уезжают в горизонтальный скролл,
   // а не сжимаются под ширину контейнера.

package/src/components/FieldChat/components/TextAreaActionsFooter/styles.module.scss

@@ -6,9 +6,8 @@
   align-items: center;
   justify-content: space-between;
 
-  box-sizing: border-box;
   width: 100%;
-  padding: base.$sn-primitive-dimension-8;
+  padding-bottom: base.$sn-primitive-dimension-8;
 }
 
 .actionsLeft {
@@ -16,8 +15,6 @@
   flex-direction: row;
   gap: base.$sn-primitive-dimension-8;
   align-items: center;
-
-  box-sizing: border-box;
 }
 
 .actionsRight {
@@ -27,6 +24,6 @@
   align-items: center;
   justify-content: flex-end;
 
-  box-sizing: border-box;
   width: 100%;
+  padding-right: base.$sn-primitive-dimension-8;
 }

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

@@ -3,14 +3,16 @@
 .fieldChat {
   display: flex;
   flex-direction: column;
-  gap: base.$sn-primitive-dimension-8;
-
-  box-sizing: border-box;
+  gap: base.$sn-primitive-dimension-12;
   // Заполняем контейнер и не даём полю растягиваться под контент (ряд вложений):
   // без этого `.fieldChat` shrink-wrap'ится по самому широкому ребёнку (скролл превью)
   // и вылезает за родителя, а горизонтальный скролл вложений не включается.
   width: 100%;
   min-width: 0;
+
+  &[data-layout-type='mobile'] {
+    gap: base.$sn-primitive-dimension-8;
+  }
 }
 
 .uploadTooltip {

package/src/components/FieldCode/FieldCode.tsx

@@ -103,7 +103,12 @@ export const FieldCode = forwardRef<FieldCodeRef, FieldCodeProps>(function Field
         size={size}
         error={resolvedError}
       >
-        <div ref={codeContainerRef} className={styles.codeContainer} data-stretch-cells={stretchCells || undefined}>
+        <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/styles.module.scss

@@ -1,13 +1,17 @@
 @use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
 
+$container-gaps: (
+  's': base.$sn-primitive-dimension-8,
+  'm': base.$sn-primitive-dimension-8,
+  'l': base.$sn-primitive-dimension-12,
+);
+
 .fieldCode {
   display: flex;
   flex-direction: column;
   gap: base.$sn-primitive-dimension-8;
   align-items: center;
 
-  box-sizing: border-box;
-
   // align-items: stretch перебивает center — без него дети остаются по ширине контента.
   &[data-stretch-cells] {
     align-items: stretch;
@@ -25,15 +29,23 @@
 
 .codeContainer {
   display: flex;
-  gap: base.$sn-primitive-dimension-8;
   justify-content: safe center;
 
   &[data-stretch-cells] {
     width: 100%;
   }
+
+  @each $size, $gap in $container-gaps {
+    &[data-size='#{$size}'] {
+      gap: $gap;
+    }
+  }
 }
 
-// Разрыв между группами ячеек — 12 по макету: gap 8 + 4.
 .cellSpacing {
-  margin-right: base.$sn-primitive-dimension-4;
+  @each $size, $margin-right in $container-gaps {
+    &[data-size='#{$size}'] {
+      margin-right: $margin-right;
+    }
+  }
 }

package/src/components/FieldPhone/FieldPhone.tsx

@@ -4,21 +4,11 @@ import { Item, ItemId } from '@cloud-ru/ds-list';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import {
-  ClipboardEventHandler,
-  cloneElement,
-  CSSProperties,
-  forwardRef,
-  isValidElement,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { ClipboardEventHandler, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { useIMask } from 'react-imask';
 
 import { TEST_IDS } from '../../constants';
-import { PLACEHOLDER_CHAR, REFOCUS_AFTER_COUNTRY_DELAY_MS, SELECTOR_FLAG_STYLE } from './constants';
+import { PLACEHOLDER_CHAR, REFOCUS_AFTER_COUNTRY_DELAY_MS } from './constants';
 import { useCountries } from './hooks';
 import styles from './styles.module.scss';
 import { CountrySettings, FieldPhoneOptionsProps, MaskOptions } from './types';
@@ -233,9 +223,6 @@ export const FieldPhone = forwardRef<HTMLInputElement, FieldPhoneProps>(function
   };
 
   const showClear = showClearButton && Boolean(unmaskedValue);
-  const selectorFlag = isValidElement<{ style?: CSSProperties }>(country?.beforeContent)
-    ? cloneElement(country.beforeContent, { style: SELECTOR_FLAG_STYLE })
-    : country?.beforeContent;
 
   return (
     <FieldCombo
@@ -255,7 +242,7 @@ export const FieldPhone = forwardRef<HTMLInputElement, FieldPhoneProps>(function
         isOnlyOneCountryAvailable
           ? undefined
           : {
-              action: selectorFlag,
+              action: country?.beforeContent,
               'data-test-id': TEST_IDS.fieldPhoneCountrySelect,
               droplist: {
                 items,

package/src/components/FieldPhone/constants.ts

@@ -1,18 +1,10 @@
-import { CSSProperties } from 'react';
-
 export const PLACEHOLDER_CHAR = '_';
 
 /**
  * Размер иконки флага страны в селекторе и выпадающем списке. У флагов из `@cloud-ru/ds-icons/flags`
  * `size` — высота, ширина следует нативному аспекту 24×18: `18` даёт бокс 24×18.
  */
-export const FLAG_ICON_SIZE = 18;
-
-/**
- * Флаг в кнопке страны — 24×18 на всех размерах (Product-макет fieldPhone). Кнопка-слот FieldCombo
- * клампит иконки до 16 на size s, инлайн-стиль снимает кламп.
- */
-export const SELECTOR_FLAG_STYLE: CSSProperties = { maxWidth: 'none', maxHeight: 'none' };
+export const FLAG_ICON_SIZE = 24;
 
 /** Задержка перед возвратом фокуса в поле после выбора страны — ждём закрытия дроплиста (desktop). */
 export const REFOCUS_AFTER_COUNTRY_DELAY_MS = 500;

package/src/components/FieldSelectCreate/FieldSelectCreate.tsx

@@ -103,11 +103,10 @@ export const FieldSelectCreate = forwardRef<HTMLInputElement, FieldSelectCreateP
           disabled={isNone || selectProps.disabled}
           placeholder={selectProps.placeholder ?? t('FieldSelectCreate.placeholder')}
           {...selectDataStates}
-          footerDivider
           footer={
             // В состоянии ошибки показываем только «Обновить» из errorDataState — без футера «Создать» (по макету).
             selectProps.dataError ? undefined : (
-              <SelectFooter onClick={onOpen} createButtonLabel={createButtonLabel} canCreate={canCreate} size={size} />
+              <SelectFooter onClick={onOpen} createButtonLabel={createButtonLabel} canCreate={canCreate} />
             )
           }
         />,

package/src/components/FieldSelectCreate/helperComponents/SelectFooter/SelectFooter.tsx

@@ -1,4 +1,4 @@
-import { APPEARANCE, Button, ICON_POSITION, Size, VIEW } from '@cloud-ru/ds-button';
+import { APPEARANCE, Button, ICON_POSITION, VIEW } from '@cloud-ru/ds-button';
 import { PlusSVG } from '@cloud-ru/ds-icons/interface/system';
 import { Tooltip } from '@cloud-ru/ds-tooltip';
 
@@ -10,11 +10,10 @@ type SelectFooterProps = {
   onClick(): void;
   createButtonLabel: string;
   canCreate: boolean;
-  size: Size;
 };
 
 /** Персистентный футер дроплиста с кнопкой «Создать» (недоступна и с tooltip при нехватке прав). */
-export function SelectFooter({ onClick, createButtonLabel, canCreate, size }: SelectFooterProps) {
+export function SelectFooter({ onClick, createButtonLabel, canCreate }: SelectFooterProps) {
   const { t } = fieldsPredefinedLocale.useTranslations();
 
   const button = (
@@ -25,7 +24,6 @@ export function SelectFooter({ onClick, createButtonLabel, canCreate, size }: Se
       icon={<PlusSVG />}
       iconPosition={ICON_POSITION.Before}
       onClick={onClick}
-      size={size}
       disabled={!canCreate}
       data-test-id={TEST_IDS.fieldSelectCreateFooterButton}
     />

package/src/components/FieldSelectCreate/helperComponents/SelectFooter/styles.module.scss

@@ -1,6 +1,8 @@
-// Разделитель и отступы футера задаёт дроплист (`footerDivider`).
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
 .footerWrapper {
   display: flex;
   align-items: center;
-  box-sizing: border-box;
+  padding-top: base.$sn-primitive-dimension-4;
+  border-top: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-available-borderColor;
 }

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

@@ -3,8 +3,7 @@
 .fieldSelectCreate {
   display: flex;
   flex-direction: column;
-  gap: base.$sn-primitive-dimension-4;
-  box-sizing: border-box;
+  gap: base.$sn-primitive-dimension-8;
 }
 
 .createButton {