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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-fields-predefined",
-  "version": "2.0.16-preview-d90ac2be.0",
+  "version": "2.0.16",
   "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-adaptive": "1.0.1",
-    "@cloud-ru/ds-attachment": "1.1.9-preview-d90ac2be.0",
-    "@cloud-ru/ds-button": "1.0.2",
-    "@cloud-ru/ds-drawer": "1.2.2-preview-d90ac2be.0",
-    "@cloud-ru/ds-dropzone": "1.0.1",
-    "@cloud-ru/ds-icons": "1.2.0",
-    "@cloud-ru/ds-field-decorator": "1.0.7-preview-d90ac2be.0",
-    "@cloud-ru/ds-fields": "2.2.7-preview-d90ac2be.0",
-    "@cloud-ru/ds-input-private": "1.0.5",
-    "@cloud-ru/ds-list": "2.2.1-preview-d90ac2be.0",
-    "@cloud-ru/ds-locale": "1.0.0",
-    "@cloud-ru/ds-modal": "1.1.3-preview-d90ac2be.0",
-    "@cloud-ru/ds-tooltip": "1.0.5",
-    "@cloud-ru/ds-utils": "1.1.0",
-    "@cloud-ru/ds-scroll": "1.0.3-preview-d90ac2be.0"
+    "@cloud-ru/ds-attachment": "^1.1.9",
+    "@cloud-ru/ds-drawer": "^1.2.2",
+    "@cloud-ru/ds-adaptive": "^1.0.1",
+    "@cloud-ru/ds-dropzone": "^1.0.2",
+    "@cloud-ru/ds-field-decorator": "^1.0.7",
+    "@cloud-ru/ds-fields": "^2.3.0",
+    "@cloud-ru/ds-input-private": "^1.0.6",
+    "@cloud-ru/ds-icons": "^1.2.1",
+    "@cloud-ru/ds-list": "^2.2.1",
+    "@cloud-ru/ds-modal": "^1.1.3",
+    "@cloud-ru/ds-locale": "^1.0.0",
+    "@cloud-ru/ds-scroll": "^1.0.3",
+    "@cloud-ru/ds-tooltip": "^1.0.6",
+    "@cloud-ru/ds-utils": "^1.1.0",
+    "@cloud-ru/ds-button": "^1.0.3"
   },
   "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} data-layout-type={layoutType}>
+    <div className={styles.fieldChat}>
       {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;
-  padding: base.$sn-primitive-dimension-1 0;
+  box-sizing: border-box;
 
   // Превью сохраняют свой размер и уезжают в горизонтальный скролл,
   // а не сжимаются под ширину контейнера.

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

@@ -6,8 +6,9 @@
   align-items: center;
   justify-content: space-between;
 
+  box-sizing: border-box;
   width: 100%;
-  padding-bottom: base.$sn-primitive-dimension-8;
+  padding: base.$sn-primitive-dimension-8;
 }
 
 .actionsLeft {
@@ -15,6 +16,8 @@
   flex-direction: row;
   gap: base.$sn-primitive-dimension-8;
   align-items: center;
+
+  box-sizing: border-box;
 }
 
 .actionsRight {
@@ -24,6 +27,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,16 +3,14 @@
 .fieldChat {
   display: flex;
   flex-direction: column;
-  gap: base.$sn-primitive-dimension-12;
+  gap: base.$sn-primitive-dimension-8;
+
+  box-sizing: border-box;
   // Заполняем контейнер и не даём полю растягиваться под контент (ряд вложений):
   // без этого `.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,12 +103,7 @@ export const FieldCode = forwardRef<FieldCodeRef, FieldCodeProps>(function Field
         size={size}
         error={resolvedError}
       >
-        <div
-          ref={codeContainerRef}
-          className={styles.codeContainer}
-          data-size={size}
-          data-stretch-cells={stretchCells || undefined}
-        >
+        <div ref={codeContainerRef} className={styles.codeContainer} data-stretch-cells={stretchCells || undefined}>
           {code.map((char, index) => (
             <Cell
               ref={inputRef => {

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

@@ -1,17 +1,13 @@
 @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;
@@ -29,23 +25,15 @@ $container-gaps: (
 
 .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 {
-  @each $size, $margin-right in $container-gaps {
-    &[data-size='#{$size}'] {
-      margin-right: $margin-right;
-    }
-  }
+  margin-right: base.$sn-primitive-dimension-4;
 }

package/src/components/FieldPhone/FieldPhone.tsx

@@ -4,11 +4,21 @@ 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, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ClipboardEventHandler,
+  cloneElement,
+  CSSProperties,
+  forwardRef,
+  isValidElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useIMask } from 'react-imask';
 
 import { TEST_IDS } from '../../constants';
-import { PLACEHOLDER_CHAR, REFOCUS_AFTER_COUNTRY_DELAY_MS } from './constants';
+import { PLACEHOLDER_CHAR, REFOCUS_AFTER_COUNTRY_DELAY_MS, SELECTOR_FLAG_STYLE } from './constants';
 import { useCountries } from './hooks';
 import styles from './styles.module.scss';
 import { CountrySettings, FieldPhoneOptionsProps, MaskOptions } from './types';
@@ -223,6 +233,9 @@ 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
@@ -242,7 +255,7 @@ export const FieldPhone = forwardRef<HTMLInputElement, FieldPhoneProps>(function
         isOnlyOneCountryAvailable
           ? undefined
           : {
-              action: country?.beforeContent,
+              action: selectorFlag,
               'data-test-id': TEST_IDS.fieldPhoneCountrySelect,
               droplist: {
                 items,

package/src/components/FieldPhone/constants.ts

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

package/src/components/FieldSelectCreate/FieldSelectCreate.tsx

@@ -103,10 +103,11 @@ 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} />
+              <SelectFooter onClick={onOpen} createButtonLabel={createButtonLabel} canCreate={canCreate} size={size} />
             )
           }
         />,

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

@@ -1,4 +1,4 @@
-import { APPEARANCE, Button, ICON_POSITION, VIEW } from '@cloud-ru/ds-button';
+import { APPEARANCE, Button, ICON_POSITION, Size, VIEW } from '@cloud-ru/ds-button';
 import { PlusSVG } from '@cloud-ru/ds-icons/interface/system';
 import { Tooltip } from '@cloud-ru/ds-tooltip';
 
@@ -10,10 +10,11 @@ type SelectFooterProps = {
   onClick(): void;
   createButtonLabel: string;
   canCreate: boolean;
+  size: Size;
 };
 
 /** Персистентный футер дроплиста с кнопкой «Создать» (недоступна и с tooltip при нехватке прав). */
-export function SelectFooter({ onClick, createButtonLabel, canCreate }: SelectFooterProps) {
+export function SelectFooter({ onClick, createButtonLabel, canCreate, size }: SelectFooterProps) {
   const { t } = fieldsPredefinedLocale.useTranslations();
 
   const button = (
@@ -24,6 +25,7 @@ export function SelectFooter({ onClick, createButtonLabel, canCreate }: SelectFo
       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,8 +1,6 @@
-@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
-
+// Разделитель и отступы футера задаёт дроплист (`footerDivider`).
 .footerWrapper {
   display: flex;
   align-items: center;
-  padding-top: base.$sn-primitive-dimension-4;
-  border-top: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-available-borderColor;
+  box-sizing: border-box;
 }

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

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