@cloud-ru/ds-fields 1.0.0

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -0,0 +1,374 @@
+import { FieldDecorator, FieldDecoratorProps, SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
+import { useButtonNavigation, useClearButton } from '@cloud-ru/ds-input-private';
+import { BAR_HIDE_STRATEGY, RESIZE, Scroll, SIZE as SCROLL_SIZE } from '@cloud-ru/ds-scroll';
+import { extractSupportProps, useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import {
+  ChangeEvent,
+  CSSProperties,
+  FocusEvent,
+  forwardRef,
+  HTMLAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+
+import { TEST_IDS } from '../../constants';
+import { FieldLayoutPresets, useAdaptiveAutoFocus } from '../../hooks';
+import { copyTextToClipboard, FieldShell, toInputSize, useCopyButton } from '../shared';
+import fieldStyles from '../shared/styles.module.scss';
+import styles from './styles.module.scss';
+
+type FieldTextAreaDecoratorProps = Omit<FieldDecoratorProps, 'children'>;
+
+type FieldTextAreaOwnProps = {
+  /** CSS-класс корня `FieldDecorator` */
+  className?: string;
+  /** CSS-класс оболочки поля */
+  fieldClassName?: string;
+  /** Значение (controlled-режим) */
+  value?: string;
+  /** Начальное значение (uncontrolled-режим) */
+  defaultValue?: string;
+  /** Колбек смены значения */
+  onChange?(value: string, event?: ChangeEvent<HTMLTextAreaElement>): void;
+  /** Плейсхолдер */
+  placeholder?: string;
+  /** HTML id */
+  id?: string;
+  /** HTML name */
+  name?: string;
+  /** Максимальное количество символов */
+  maxLength?: number;
+  /** Поле выключено */
+  disabled?: boolean;
+  /** Только для чтения */
+  readonly?: boolean;
+  /** Автофокус. На mobile выключается адаптивно (см. `layoutPresets`) */
+  autoFocus?: boolean;
+  /**
+   * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+   * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+   */
+  layoutPresets?: FieldLayoutPresets;
+  /** Режим виртуальной клавиатуры (`inputmode` нативного `<textarea>`) */
+  inputMode?: HTMLAttributes<HTMLTextAreaElement>['inputMode'];
+  /** Проверка орфографии */
+  spellCheck?: boolean;
+  /**
+   * Минимальное количество строк
+   * @default 3
+   */
+  minRows?: number;
+  /**
+   * Максимальное количество строк (после — появляется скролл)
+   * @default 1000
+   */
+  maxRows?: number;
+  /**
+   * Разрешить ввод свыше `maxLength` символов (счётчик продолжит расти).
+   * @default true
+   */
+  allowMoreThanMaxLength?: boolean;
+  /**
+   * Нода над textarea — ряд элементов до контента (Figma `elementWrapperBefore` /
+   * `slotBeforeContent`): тулбар с кнопками, чипами и т.п.
+   */
+  header?: ReactNode;
+  /**
+   * Нода под textarea — ряд элементов после контента (Figma `elementWrapperAfter` /
+   * `slotAfterContent`): действия, счётчик-плагин и т.п.
+   */
+  footer?: ReactNode;
+  /**
+   * Можно ли менять высоту мышкой за нижний угол. Игнорируется при `disabled` или `readonly`.
+   * @default false
+   */
+  resizable?: boolean;
+  /**
+   * Фон поля (acrylic)
+   * @default true
+   */
+  background?: boolean;
+  /**
+   * Кнопка очистки (видна при value && !readonly)
+   * @default true
+   */
+  showClearButton?: boolean;
+  /**
+   * Кнопка копирования (видна при value && !disabled, независимо от readonly)
+   * @default true
+   */
+  showCopyButton?: boolean;
+  /** Колбек после копирования */
+  onCopyButtonClick?(): void;
+  /** Колбек фокуса */
+  onFocus?(event: FocusEvent<HTMLTextAreaElement>): void;
+  /** Колбек блюра */
+  onBlur?(event: FocusEvent<HTMLTextAreaElement>): void;
+  /** Колбек нажатия клавиши */
+  onKeyDown?(event: KeyboardEvent<HTMLTextAreaElement>): void;
+};
+
+export type FieldTextAreaProps = FieldTextAreaDecoratorProps & FieldTextAreaOwnProps;
+
+export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>(function FieldTextArea(
+  {
+    label = '',
+    labelTooltip,
+    caption,
+    hint,
+    error,
+    validationState = VALIDATION_STATE.Default,
+    showHintIcon,
+    length,
+    required,
+    size = SIZE.M,
+    className,
+    fieldClassName,
+    background = true,
+    value: valueProp,
+    defaultValue = '',
+    onChange,
+    placeholder,
+    id,
+    name,
+    maxLength,
+    disabled,
+    readonly: readOnly,
+    autoFocus,
+    layoutPresets,
+    inputMode,
+    spellCheck,
+    minRows = 3,
+    maxRows = 1000,
+    resizable = false,
+    allowMoreThanMaxLength = true,
+    header,
+    footer,
+    showClearButton: showClearButtonProp = true,
+    showCopyButton: showCopyButtonProp = true,
+    onCopyButtonClick,
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    onKeyDown: onKeyDownProp,
+    'data-test-id': dataTestId,
+    ...rest
+  },
+  ref,
+) {
+  const localRef = useRef<HTMLTextAreaElement>(null);
+  const clearButtonRef = useRef<HTMLButtonElement>(null);
+  const copyButtonRef = useRef<HTMLButtonElement>(null);
+  const [focusVisible, setFocusVisible] = useState(false);
+  const [hover, setHover] = useState(false);
+
+  const resolvedAutoFocus = useAdaptiveAutoFocus(autoFocus, layoutPresets);
+
+  // controlled/uncontrolled: useValueControl держит внутреннее состояние при отсутствии `value`,
+  // событие в `onChange` пробрасываем сами (useValueControl передаёт только значение).
+  const [value = '', setValue] = useValueControl<string>({ value: valueProp, defaultValue });
+
+  const effectiveValidationState = useMemo(
+    () => (error ? VALIDATION_STATE.Error : validationState),
+    [error, validationState],
+  );
+
+  const stringValue = String(value ?? '');
+  const isResizable = resizable && !disabled && !readOnly;
+  const showClearUi = Boolean(showClearButtonProp && stringValue && !readOnly && !disabled);
+  // Copy не завязан на readonly (паритет с snack-uikit master): виден при любом непустом значении.
+  // В editable-режиме показываются обе кнопки (clear + copy), в readonly — только copy.
+  const showCopyUi = Boolean(showCopyButtonProp && stringValue && !disabled);
+
+  const onClear = useCallback(() => {
+    setValue('');
+    onChange?.('');
+    localRef.current?.focus();
+  }, [onChange, setValue]);
+
+  const onCopy = useCallback(async () => {
+    const copied = await copyTextToClipboard(stringValue);
+    if (copied) {
+      onCopyButtonClick?.();
+    }
+    return copied;
+  }, [onCopyButtonClick, stringValue]);
+
+  const clearButtonSettings = useClearButton({
+    clearButtonRef,
+    showClearButton: showClearUi,
+    size: toInputSize(size),
+    onClear,
+    disabled: Boolean(disabled || readOnly),
+  });
+
+  const copyButtonSettings = useCopyButton({
+    copyButtonRef,
+    showCopyButton: showCopyUi,
+    size: toInputSize(size),
+    onCopy,
+    disabled: Boolean(disabled),
+  });
+
+  const { postfixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation<HTMLTextAreaElement>({
+    inputRef: localRef,
+    postfixButtons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+    readonly: Boolean(readOnly),
+    submitKeys: ['Tab'],
+  });
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      onKeyDownProp?.(event);
+      onInputKeyDown(event);
+    },
+    [onInputKeyDown, onKeyDownProp],
+  );
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+    onChange?.(event.target.value, event);
+  };
+
+  // Клик в «пустую» зону поля (под textarea при minRows-резерве, в правый резерв под кнопки)
+  // фокусит textarea и ставит курсор в конец — паритет со снеком, где попадание в любую область
+  // поля работает как клик по textarea. Намеренно `onClick`, а не `onMouseDown`+preventDefault:
+  // resize-ручка scroll-контейнера тоже работает через mousedown-drag, и preventDefault убивал бы
+  // нативный CSS-resize. Click после resize-drag не возникает, а клики по textarea, кнопкам
+  // clear/copy и DS-скроллбару отсеиваем по target.
+  const handleContentClick = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      const target = event.target as HTMLElement;
+      if (disabled || target === localRef.current || target.closest('button, [class*="os-scrollbar"]')) {
+        return;
+      }
+      const textarea = localRef.current;
+      if (textarea) {
+        textarea.focus();
+        const end = textarea.value.length;
+        textarea.setSelectionRange(end, end);
+      }
+    },
+    [disabled],
+  );
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLTextAreaElement>) => {
+      setFocusVisible(event.target.matches(':focus-visible'));
+      onFocusProp?.(event);
+    },
+    [onFocusProp],
+  );
+
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLTextAreaElement>) => {
+      setFocusVisible(false);
+      onBlurProp?.(event);
+    },
+    [onBlurProp],
+  );
+
+  const handleMouseEnter = useCallback(() => {
+    if (!readOnly) {
+      setHover(true);
+    }
+  }, [readOnly]);
+
+  const handleMouseLeave = useCallback(() => {
+    setHover(false);
+  }, []);
+
+  const shell = (
+    <FieldShell
+      data-test-id={TEST_IDS.fieldTextAreaShell}
+      className={fieldClassName}
+      size={size}
+      validationState={effectiveValidationState}
+      disabled={disabled}
+      readonly={readOnly}
+      background={background}
+      focusVisible={focusVisible}
+      hover={hover}
+      header={header}
+      footer={footer}
+      style={{ '--field-textarea-min-rows': minRows, '--field-textarea-max-rows': maxRows } as CSSProperties}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* onClick лишь форвардит фокус в textarea (реальный фокусируемый/клавиатурный элемент
+          рядом) при клике в пустую зону поля — это не самостоятельный контрол, клавиатурный
+          доступ обеспечивает сама textarea, поэтому role/tabIndex здесь не нужны. */}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div className={cn(fieldStyles.contentWrapper, styles.contentArea)} onClick={handleContentClick}>
+        {/* Скролл при превышении maxRows — кастомный из @cloud-ru/ds-scroll (по Figma), не нативный
+            скроллбар textarea. maxRows задаёт max-height контейнера через CSS-переменные,
+            autosize-textarea растёт внутри, Scroll рисует DS-скроллбар. Resize-handle —
+            на scroll-контейнере (CSS resize), не на самой textarea. */}
+        <Scroll
+          className={cn(styles.scrollContainer, { [styles.scrollContainerResizable]: isResizable })}
+          size={SCROLL_SIZE.S}
+          barHideStrategy={BAR_HIDE_STRATEGY.Never}
+          resize={isResizable ? RESIZE.Vertical : RESIZE.None}
+          overflow={{ x: 'hidden' }}
+          data-test-id={TEST_IDS.fieldTextAreaScrollArea}
+        >
+          <div className={fieldStyles.inputLine}>
+            <TextareaAutosize
+              ref={mergeRefs(ref, localRef)}
+              className={styles.textarea}
+              value={value}
+              onChange={handleChange}
+              placeholder={placeholder}
+              disabled={disabled}
+              readOnly={readOnly}
+              id={id}
+              name={name}
+              maxLength={allowMoreThanMaxLength ? undefined : maxLength}
+              autoFocus={resolvedAutoFocus}
+              inputMode={inputMode}
+              spellCheck={spellCheck}
+              minRows={minRows}
+              tabIndex={inputTabIndex}
+              data-test-id={TEST_IDS.fieldTextAreaInput}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onKeyDown={handleKeyDown}
+              {...extractSupportProps(rest)}
+            />
+          </div>
+        </Scroll>
+        {postfixButtons && <span className={styles.postfixColumn}>{postfixButtons}</span>}
+      </div>
+    </FieldShell>
+  );
+
+  return (
+    <FieldDecorator
+      className={className}
+      label={label}
+      labelTooltip={labelTooltip}
+      caption={caption}
+      hint={hint}
+      error={error}
+      validationState={validationState}
+      showHintIcon={showHintIcon}
+      length={length ?? (maxLength ? { current: stringValue.length, max: maxLength } : undefined)}
+      required={required}
+      labelFor={id}
+      disabled={disabled}
+      readonly={readOnly}
+      size={size}
+      data-test-id={dataTestId}
+    >
+      {shell}
+    </FieldDecorator>
+  );
+});

package/src/components/FieldTextArea/index.ts

@@ -0,0 +1 @@
+export * from './FieldTextArea';

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

@@ -0,0 +1,192 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/field.module' as field;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/scroll.module' as scroll;
+
+$sizes: 's', 'm', 'l';
+
+// Ширина вертикального скроллбара @cloud-ru/ds-scroll (в компоненте он всегда size=s).
+$scrollbar-width: base.simple-var(scroll.$scroll, 'anatomy', 'container', 'size', 's', 'width');
+
+// Контейнер скролла (@cloud-ru/ds-scroll) вокруг textarea: minRows/maxRows клампят его высоту
+// через CSS-переменные (выставляются компонентом на shell), autosize-textarea растёт внутри,
+// скроллбар — кастомный DS, не нативный. Resize-handle (CSS resize) живёт на этом контейнере.
+.scrollContainer {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: calc(var(--field-textarea-min-rows, 3) * var(--field-textarea-row-height));
+  max-height: calc(var(--field-textarea-max-rows, 1000) * var(--field-textarea-row-height));
+
+  // Высота строки = line-height DS-типографики body соответствующего size.
+  @each $size in $sizes {
+    [data-size='#{$size}'] & {
+      --field-textarea-row-height: #{base.simple-var(base.$sn-regular, 'body', $size, 'line-height')};
+    }
+  }
+}
+
+// При resizable стартовая высота фиксируется на minRows — иначе CSS resize
+// не от чего отсчитывать (контейнер с auto-высотой схлопывается обратно).
+.scrollContainerResizable {
+  height: calc(var(--field-textarea-min-rows, 3) * var(--field-textarea-row-height));
+}
+
+.textarea {
+  resize: none;
+
+  // Нативный скроллбар не показывается никогда — скролл рисует обёртка @cloud-ru/ds-scroll.
+  overflow: hidden;
+
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: none;
+
+  color: base.$sn-theme-color-available-version-textMain;
+
+  background: transparent;
+  outline: none;
+
+  &::placeholder {
+    color: base.$sn-theme-color-available-version-textDisabled;
+    opacity: 1;
+  }
+
+  // disabled-поле затемняется opacity 0.4, placeholder уже textDisabled → бледный «призрак».
+  // Прячем целиком, как в @cloud-ru/ds-search (единый паттерн disabled в DS).
+  // TODO: выяснить у дизайнера ожидаемое поведение placeholder в disabled (скрывать / приглушать).
+  &:disabled::placeholder {
+    visibility: hidden;
+  }
+
+  // readonly текст приглушается так же, как .fieldInput в FieldText
+  // (общий shell, но textarea рендерит свой класс, не .fieldInput).
+  &:read-only {
+    color: base.$sn-theme-color-available-version-textTertiary;
+  }
+
+  // DS-типографика + min-height multiLine из field-токенов per-size.
+  // Без этого textarea наследует Nunito Sans 16/24 от Storybook root и не имеет минимальной высоты.
+  @each $size in $sizes {
+    [data-size='#{$size}'] & {
+      // Резерв справа под колонку clear/copy-кнопок (квадрат centeredWrapper) + скроллбар
+      // + горизонтальный паддинг inputLine (отступ слота кнопок от скроллбара по Figma):
+      // кнопки позиционируются абсолютно поверх скролл-области (см. .postfixColumn).
+      $button-slot: base.simple-var(
+        field.$field,
+        'anatomy',
+        'size',
+        $size,
+        'fieldContainer',
+        'centeredWrapper',
+        'max-height'
+      );
+      $input-line-padding: base.simple-var(
+        field.$field,
+        'anatomy',
+        'size',
+        $size,
+        'fieldContainer',
+        'contentWrapper',
+        'inputLine',
+        'padding-right'
+      );
+
+      min-height: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'multiLine', 'min-height');
+      padding-right: calc(#{$button-slot} + #{$scrollbar-width} + #{$input-line-padding});
+
+      @include base.composite-var(base.$sn-regular, 'body', $size);
+    }
+  }
+}
+
+// Якорь для абсолютного позиционирования кнопок: скролл-контейнер занимает всю ширину
+// контента (скроллбар — у правого края поля, по Figma), кнопки накладываются поверх.
+// verticalPadding (Figma contentWrapper py) опускает первую строку текста на свой отступ —
+// без него текст (и центрированная по нему кнопка) прижимается к верхней рамке, и 32px-кнопка
+// выступает за верхний край поля.
+.contentArea {
+  position: relative;
+
+  @each $size in $sizes {
+    [data-size='#{$size}'] & {
+      padding-top: base.simple-var(
+        field.$field,
+        'anatomy',
+        'size',
+        $size,
+        'fieldContainer',
+        'contentWrapper',
+        'padding-top'
+      );
+      padding-bottom: base.simple-var(
+        field.$field,
+        'anatomy',
+        'size',
+        $size,
+        'fieldContainer',
+        'contentWrapper',
+        'padding-bottom'
+      );
+    }
+  }
+}
+
+// Кнопки clear/copy — поверх скролл-области, левее скроллбара (паритет с Figma и легаси:
+// порядок справа налево — край поля, скроллбар, inputLine-паддинг, кнопки). Место под них
+// резервирует padding-right textarea выше. Grid-ячейки клампят слот каждой кнопки до
+// centeredWrapper-квадрата: сама кнопка крупнее слота и симметрично выступает за него
+// (тот же приём, что .postfixButtonsSlot в shared/styles для FieldText), первый слот
+// центрируется по первой строке текста.
+.postfixColumn {
+  position: absolute;
+
+  display: grid;
+
+  // Единственный явный column-track шириной с контейнер: без него implicit-колонка
+  // растягивается (auto) под кнопку, и кнопка перестаёт центрироваться по слоту.
+  grid-template-columns: 100%;
+  row-gap: base.$sn-primitive-dimension-2;
+  place-items: center center;
+
+  @each $size in $sizes {
+    [data-size='#{$size}'] & {
+      $square: base.simple-var(
+        field.$field,
+        'anatomy',
+        'size',
+        $size,
+        'fieldContainer',
+        'centeredWrapper',
+        'max-height'
+      );
+      $input-line-padding: base.simple-var(
+        field.$field,
+        'anatomy',
+        'size',
+        $size,
+        'fieldContainer',
+        'contentWrapper',
+        'inputLine',
+        'padding-right'
+      );
+      $line-height: base.simple-var(base.$sn-regular, 'body', $size, 'line-height');
+      $vertical-padding: base.simple-var(
+        field.$field,
+        'anatomy',
+        'size',
+        $size,
+        'fieldContainer',
+        'contentWrapper',
+        'padding-top'
+      );
+
+      // Кнопка центрируется по первой строке текста: verticalPadding (отступ контента сверху)
+      // + центровка слота в line-height. Так 32px-кнопка верхним краем садится ровно на
+      // внутреннюю границу поля (Figma), а не выступает над ней.
+      top: calc(#{$vertical-padding} + (#{$line-height} - #{$square}) / 2);
+      right: calc(#{$scrollbar-width} + #{$input-line-padding});
+      grid-auto-rows: $square;
+      width: $square;
+    }
+  }
+}