@cloud-ru/ds-fields 1.0.0

package/src/components/shared/helperComponents/FieldElementButton/styles.module.scss

@@ -0,0 +1,137 @@
+@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-materials' as m;
+
+$sizes: 's', 'm', 'l';
+
+.chevron {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.elementWrapper {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.backgroundStateLayer {
+  pointer-events: none;
+
+  position: absolute;
+  inset: 0;
+
+  border-radius: inherit;
+
+  visibility: initial;
+}
+
+// Фокус-рамка кнопки-сегмента (Figma focusedFrame/*/inside у buttonField): толщина
+// focusLine-control, inset внутрь кнопки, чтобы не вылезать за границу поля/разделитель.
+// У самого поля рамка другая — focusLine-field снаружи (см. shared/styles.module.scss).
+.focusLayer {
+  pointer-events: none;
+
+  position: absolute;
+  inset: 0;
+
+  display: none;
+
+  border-radius: inherit;
+
+  // Непрозрачность не гасится: мягкое свечение (`focusedFrame-opacity`) в макете несёт только
+  // внешняя рамка поля, у внутренних кнопок рамка сплошная — как у кнопки очистки из @cloud-ru/ds-button.
+  outline: base.$sn-brand-anatomy-focusLine-control-strokeWeight solid base.$sn-theme-color-primary-accent;
+  outline-offset: calc(0px - base.$sn-brand-anatomy-focusLine-control-strokeWeight);
+}
+
+.buttonContainer {
+  cursor: pointer;
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: center;
+
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  background: none;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(field.$field, 'anatomy', 'size', $size, 'buttonField', 'container');
+
+      $borderTopLeftRadius: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'border-top-left-radius');
+      $borderTopRightRadius: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'border-top-right-radius');
+      $borderBottomRightRadius: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'border-bottom-right-radius');
+      $borderBottomLeftRadius: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'border-bottom-left-radius');
+
+      &[data-variant='before'] {
+        border-radius: $borderTopLeftRadius 0 0 $borderBottomLeftRadius;
+      }
+
+      &[data-variant='after'] {
+        border-radius: 0 $borderTopRightRadius $borderBottomRightRadius 0;
+      }
+
+      .elementWrapper {
+        @include base.composite-var(field.$field, 'anatomy', 'size', $size, 'buttonField', 'elementWrapper');
+      }
+
+      // Иконки кнопки-слота (action — глаз/иконка; шеврон раскрытия) масштабируются по размеру:
+      // s → icon-xs (16), m/l → icon-s (24). max-* (как в @cloud-ru/ds-button): @cloud-ru/ds-icons задают инлайн
+      // `style="width:24"`, который перебивает width, но не max-width — поэтому клампится без JS-пропа.
+      .elementWrapper svg {
+        $iconSize: base.$sn-density-size-icon-s;
+
+        @if $size == 's' {
+          $iconSize: base.$sn-density-size-icon-xs;
+        }
+
+        max-width: $iconSize;
+        max-height: $iconSize;
+      }
+    }
+  }
+
+  &:not([data-loading="true"], [data-disabled="true"]) {
+    @include m.has-state-layer-as-child(#{backgroundStateLayer});
+  }
+
+  &[data-disabled='true'] {
+    .elementWrapper {
+      opacity: base.$sn-theme-effect-opacity-disabled;
+    }
+  }
+
+  &[data-loading="true"],
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+
+    .backgroundStateLayer {
+      visibility: hidden;
+    }
+  }
+
+  &:not([data-disabled='true'])[data-loading="true"] {
+    background: base.$sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled;
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    .focusLayer {
+      display: block;
+    }
+  }
+}

package/src/components/shared/helperComponents/FieldElementButton/types.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+import { BUTTON_SIZE, VARIANT } from './constants';
+
+export type ButtonSize = ValueOf<typeof BUTTON_SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;

package/src/components/shared/helperComponents/FieldShell/FieldShell.tsx

@@ -0,0 +1,100 @@
+import { SIZE, Size, VALIDATION_STATE, ValidationState } from '@cloud-ru/ds-field-decorator';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { CSSProperties, ReactNode } from 'react';
+
+import fieldStyles from '../../styles.module.scss';
+import { getAcrylicProps } from '../../utils';
+import styles from './styles.module.scss';
+
+export type FieldShellProps = WithSupportProps<{
+  /** Контент поля (input / scroll / редактор). Рендерится в fieldContainer между header и footer. */
+  children: ReactNode;
+  /** Размер поля */
+  size?: Size;
+  /** Состояние валидации — тонирует acrylic-фон */
+  validationState?: ValidationState;
+  /** Поле выключено */
+  disabled?: boolean;
+  /** Только для чтения */
+  readonly?: boolean;
+  /**
+   * Acrylic-фон поля
+   * @default true
+   */
+  background?: boolean;
+  /** Виден ли клавиатурный фокус (управляется потребителем по `:focus-visible` контента) */
+  focusVisible?: boolean;
+  /** Hover поля (управляется потребителем) */
+  hover?: boolean;
+  /** Ряд элементов над контентом (тулбар, чипы) */
+  header?: ReactNode;
+  /** Ряд элементов под контентом (действия, счётчик) */
+  footer?: ReactNode;
+  /** CSS-класс оболочки (fieldWrapper) */
+  className?: string;
+  /** Inline-стиль оболочки (например, CSS-переменные высоты) */
+  style?: CSSProperties;
+  /** Колбек входа курсора в поле */
+  onMouseEnter?(): void;
+  /** Колбек выхода курсора из поля */
+  onMouseLeave?(): void;
+}>;
+
+/**
+ * Визуальная оболочка поля: слои material/border/focus + контейнер со слотами
+ * header / content / footer. Единый source-of-truth shell'а для `FieldTextArea` и
+ * потребителей с кастомным контентом (например, WYSIWYG-редактор), которым нужен
+ * тот же внешний вид, но не подходит нативный `<textarea>`.
+ */
+export function FieldShell({
+  children,
+  size = SIZE.M,
+  validationState = VALIDATION_STATE.Default,
+  disabled,
+  readonly: readOnly,
+  background = true,
+  focusVisible,
+  hover,
+  header,
+  footer,
+  className,
+  style,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}: FieldShellProps) {
+  return (
+    <div
+      {...extractSupportProps(rest)}
+      className={cn(fieldStyles.fieldWrapper, className)}
+      data-size={size}
+      data-validation-state={validationState}
+      data-disabled={disabled || undefined}
+      data-readonly={readOnly || undefined}
+      data-withbackground={background || undefined}
+      data-focusvisible={focusVisible || undefined}
+      data-hover={!readOnly && hover ? true : undefined}
+      style={style}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <div className={fieldStyles.backgroundWrapper}>
+        <div
+          className={fieldStyles.materialLayer}
+          {...getAcrylicProps({ validationState, disabled, readonly: readOnly, hover, focusVisible })}
+        >
+          <div className={fieldStyles.acrylicBg} aria-hidden />
+        </div>
+        <div className={fieldStyles.borderStateLayer} data-state='borderOnBackground' />
+        <div className={fieldStyles.focusLayer} />
+      </div>
+
+      {header && <div className={styles.header}>{header}</div>}
+
+      <div className={fieldStyles.fieldContainer}>{children}</div>
+
+      {footer && <div className={styles.footer}>{footer}</div>}
+    </div>
+  );
+}

package/src/components/shared/helperComponents/FieldShell/index.ts

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

package/src/components/shared/helperComponents/FieldShell/styles.module.scss

@@ -0,0 +1,13 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.header {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}

package/src/components/shared/hooks/useCopyButton.tsx

@@ -0,0 +1,103 @@
+import { Button } from '@cloud-ru/ds-button';
+import { CheckSVG, CopySVG } from '@cloud-ru/ds-icons/interface/system';
+import { BUTTON_SIZE_MAP, ButtonProps, Size as InputPrivateSize } from '@cloud-ru/ds-input-private';
+import { useEventHandler } from '@cloud-ru/ds-utils';
+import { MouseEvent, MouseEventHandler, Ref, RefObject, useEffect, useMemo, useRef, useState } from 'react';
+
+import { TEST_IDS } from '../../../constants';
+
+// Длительность визуальной обратной связи «скопировано» (галочка вместо иконки копирования).
+const COPIED_FEEDBACK_MS = 2000;
+
+type UseCopyButtonProps = {
+  copyButtonRef: RefObject<HTMLButtonElement | null>;
+  showCopyButton: boolean;
+  /**
+   * Колбек копирования. Возвращает `true`, если значение скопировано (для асинхронного
+   * источника — `Promise<boolean>`). Галочка показывается только при успехе.
+   */
+  onCopy(event: MouseEvent<HTMLButtonElement>): boolean | Promise<boolean>;
+  size: InputPrivateSize;
+  disabled?: boolean;
+  /** data-test-id кнопки. Переопределяется полем, когда у него свой публичный id слота. */
+  dataTestId?: string;
+};
+
+/**
+ * Кнопка «Копировать» для postfix (аналогично useClearButton в input-private).
+ */
+export function useCopyButton({
+  copyButtonRef,
+  showCopyButton,
+  onCopy,
+  size,
+  disabled,
+  dataTestId = TEST_IDS.fieldTextCopyButton,
+}: UseCopyButtonProps): ButtonProps {
+  const copyEventHandler = useEventHandler(onCopy);
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(
+    () => () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    },
+    [],
+  );
+
+  return useMemo(
+    () => ({
+      id: 'copy',
+      active: true,
+      ref: copyButtonRef,
+      show: showCopyButton,
+      render: ({ key, tabIndex, ref, onKeyDown, ...props }) => {
+        const markCopied = () => {
+          setCopied(true);
+          if (timerRef.current) {
+            clearTimeout(timerRef.current);
+          }
+          timerRef.current = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+        };
+
+        const handleCopy: MouseEventHandler<HTMLButtonElement> = event => {
+          event.stopPropagation();
+          props.onClick(event);
+          // Галочку показываем только при успешном копировании (паритет с легаси ButtonCopyValue).
+          const result = copyEventHandler(event);
+          if (typeof result === 'boolean') {
+            if (result) {
+              markCopied();
+            }
+            return;
+          }
+          result.then(success => {
+            if (success) {
+              markCopied();
+            }
+          });
+        };
+
+        return (
+          <Button
+            key={key}
+            innerRef={ref as Ref<HTMLButtonElement>}
+            type='button'
+            view='function'
+            appearance='neutral'
+            disabled={disabled}
+            size={BUTTON_SIZE_MAP[size]}
+            icon={copied ? <CheckSVG /> : <CopySVG />}
+            onClick={handleCopy}
+            tabIndex={tabIndex}
+            onKeyDown={onKeyDown}
+            data-test-id={dataTestId}
+          />
+        );
+      },
+    }),
+    [copied, copyButtonRef, copyEventHandler, dataTestId, disabled, showCopyButton, size],
+  );
+}

package/src/components/shared/index.ts

@@ -0,0 +1,4 @@
+export * from './helperComponents/FieldElementButton';
+export * from './helperComponents/FieldShell';
+export * from './hooks/useCopyButton';
+export * from './utils';