@cloud-ru/ds-dropzone 1.0.0

package/src/components/Dropzone/index.ts

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

package/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,145 @@
+import { extractDataTestProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  cloneElement,
+  InputHTMLAttributes,
+  MouseEvent,
+  MouseEventHandler,
+  MutableRefObject,
+  ReactElement,
+  Ref,
+  useRef,
+} from 'react';
+
+import { TEST_IDS, UPLOAD_MODE } from '../../constants';
+import { UploadMode } from '../../types';
+import { AcceptInput, buildAcceptAttribute, FileRejection, partitionFiles } from '../../utils';
+import styles from './styles.module.scss';
+
+/**
+ * Нативные атрибуты `<input type="file">`, проксируемые на скрытый input:
+ * `name`, `id`, `required`, `capture`, `form`, `onBlur` и т.п. — всё, что нужно
+ * для работы в HTML-форме и интеграции с react-hook-form (`{...register(name)}`).
+ * Управляемые самим компонентом поля исключены.
+ */
+type NativeInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'accept' | 'multiple' | 'disabled' | 'value' | 'defaultValue' | 'onChange' | 'children'
+>;
+
+export type FileUploadProps = WithSupportProps<
+  {
+    /** Триггер открытия диалога выбора файлов (кнопка / лейбл). Клонируется, к нему добавляется `onClick`. */
+    children: ReactElement;
+    /** Колбек с принятыми файлами (прошедшими проверку `maxSize` и `accept`). */
+    onFilesUpload(files: File[]): void;
+    /**
+     * Колбек с отклонёнными файлами и причиной отказа (`maxSize` / `mime`).
+     * Вызывается только когда задан `maxSize` и/или `accept` и есть отклонённые файлы.
+     */
+    onFilesReject?(rejections: FileRejection[]): void;
+    /**
+     * Нативный `onChange` скрытого input. Вызывается до валидации с исходным событием —
+     * точка интеграции с react-hook-form и другими form-библиотеками.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Режим выбора файлов
+     * @default multiple
+     */
+    mode?: UploadMode;
+    /**
+     * Разрешённые типы файлов: MIME-тип (`image/png`), шаблон (`image/*`) или расширение (`.pdf`).
+     * Строка (через запятую, как нативный `accept`) или массив. Задаёт нативный `accept` и валидацию.
+     */
+    accept?: AcceptInput;
+    /** Максимальный размер одного файла в байтах. Превысившие уходят в `onFilesReject`. */
+    maxSize?: number;
+    /** Деактивирует триггер и input. */
+    disabled?: boolean;
+    /** Ссылка на нативный `<input type="file">` — для интеграции с формами (react-hook-form `ref`). */
+    innerRef?: Ref<HTMLInputElement>;
+  } & NativeInputProps
+>;
+
+// eslint-disable-next-line ds/require-inner-ref-support -- innerRef ведёт на скрытый <input type="file">, а не на корень: маркер соврал бы поповеру.
+export function FileUpload({
+  mode = UPLOAD_MODE.Multiple,
+  onFilesUpload,
+  onFilesReject,
+  onChange,
+  accept,
+  maxSize,
+  disabled = false,
+  innerRef,
+  children,
+  ...rest
+}: FileUploadProps) {
+  const hiddenFileInput = useRef<HTMLInputElement | null>(null);
+
+  const setInputRef = (node: HTMLInputElement | null) => {
+    hiddenFileInput.current = node;
+    if (typeof innerRef === 'function') {
+      innerRef(node);
+    } else if (innerRef) {
+      (innerRef as MutableRefObject<HTMLInputElement | null>).current = node;
+    }
+  };
+
+  const handleButtonClick = (cb?: MouseEventHandler<HTMLElement>) => (e: MouseEvent<HTMLElement>) => {
+    if (disabled) return;
+
+    hiddenFileInput.current?.click();
+    cb?.(e);
+  };
+
+  const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e);
+
+    const { files } = e.target;
+    if (!files) return;
+
+    const filesArray = Array.from(files);
+
+    if (typeof maxSize === 'number' || accept) {
+      const { accepted, rejected } = partitionFiles(filesArray, { maxSize, accept });
+      if (rejected.length) {
+        onFilesReject?.(rejected);
+      }
+      onFilesUpload(accepted);
+      return;
+    }
+
+    onFilesUpload(filesArray);
+  };
+
+  const handleClick = (e: MouseEvent<HTMLInputElement>) => {
+    (e.target as HTMLInputElement).value = '';
+  };
+
+  const childProps = children.props as { onClick?: MouseEventHandler<HTMLElement>; disabled?: boolean };
+  const mergedProps = {
+    onClick: handleButtonClick(childProps?.onClick),
+    disabled: childProps?.disabled ?? disabled,
+  };
+
+  return (
+    <>
+      {cloneElement(children, mergedProps)}
+      <input
+        {...rest}
+        onChange={handleFileSelect}
+        multiple={mode === UPLOAD_MODE.Multiple}
+        ref={setInputRef}
+        className={styles.hiddenInput}
+        type='file'
+        accept={buildAcceptAttribute(accept)}
+        disabled={disabled}
+        onClick={handleClick}
+        data-test-id={TEST_IDS.fileUpload.nativeInput}
+        {...extractDataTestProps(rest)}
+      />
+    </>
+  );
+}

package/src/components/FileUpload/index.ts

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

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

@@ -0,0 +1,3 @@
+.hiddenInput {
+  display: none;
+}

package/src/components/HiddenDropZone/HiddenDropZone.tsx

@@ -0,0 +1,39 @@
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { useDrag } from '../../hooks/useDrag';
+import { DropzoneProps } from '../Dropzone';
+import { PrivateDropZone } from '../PrivateDropZone';
+import styles from './styles.module.scss';
+
+export type HiddenDropZoneProps = Omit<DropzoneProps, 'children'> & {
+  /** Контент dropzone при drag (overlay) */
+  content?: ReactNode;
+  /** Дочерний контент, поверх которого отображается dropzone при drag */
+  children: ReactNode;
+};
+
+/** Компонент — скрытая дропзона, накрывающая произвольный контент (формы, карточки) */
+export function HiddenDropZone(props: HiddenDropZoneProps) {
+  const { disabled = false, children, className, content, 'data-test-id': dataTestId, ...rest } = props;
+
+  const { events, isOver } = useDrag(disabled);
+  const showOverlay = isOver && !disabled;
+
+  return (
+    <div
+      className={cn(styles.wrapper, className)}
+      {...extractSupportProps({ ...rest, 'data-test-id': dataTestId })}
+      {...events}
+    >
+      {showOverlay && (
+        <PrivateDropZone className={styles.dropZone} {...events} {...rest} isOver disabled={disabled}>
+          {content}
+        </PrivateDropZone>
+      )}
+
+      <div className={cn(styles.children, showOverlay && styles.hidden)}>{children}</div>
+    </div>
+  );
+}

package/src/components/HiddenDropZone/index.ts

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

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

@@ -0,0 +1,20 @@
+.wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.dropZone {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.hidden * {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.children {
+  width: 100%;
+  height: 100%;
+}

package/src/components/PrivateDropZone/PrivateDropZone.tsx

@@ -0,0 +1,122 @@
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { ChangeEvent, DragEvent, MutableRefObject, useRef } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { buildAcceptAttribute, partitionFiles } from '../../utils';
+import { UPLOAD_MODE } from './constants';
+import styles from './styles.module.scss';
+import { PrivateDropZoneProps } from './types';
+
+// eslint-disable-next-line ds/require-inner-ref-support -- innerRef ведёт на скрытый <input type="file">, а не на корень: маркер соврал бы поповеру.
+export function PrivateDropZone({
+  disabled = false,
+  className,
+  isOver,
+  onDragLeave,
+  onDragOver,
+  onDrop,
+  mode = UPLOAD_MODE.Multiple,
+  children,
+  onFilesUpload,
+  onFilesReject,
+  accept,
+  maxSize,
+  onChange,
+  innerRef,
+  name,
+  id,
+  required,
+  form,
+  capture,
+  size = 'm',
+  ...rest
+}: PrivateDropZoneProps) {
+  const hiddenFileInput = useRef<HTMLInputElement | null>(null);
+
+  const setInputRef = (node: HTMLInputElement | null) => {
+    hiddenFileInput.current = node;
+    if (typeof innerRef === 'function') {
+      innerRef(node);
+    } else if (innerRef) {
+      (innerRef as MutableRefObject<HTMLInputElement | null>).current = node;
+    }
+  };
+
+  const emitFiles = (files: File[]) => {
+    if (typeof maxSize === 'number' || accept) {
+      const { accepted, rejected } = partitionFiles(files, { maxSize, accept });
+      if (rejected.length) {
+        onFilesReject?.(rejected);
+      }
+      onFilesUpload(accepted);
+      return;
+    }
+    onFilesUpload(files);
+  };
+
+  const handleAttachFile = () => {
+    if (disabled) return;
+    hiddenFileInput.current?.click();
+  };
+
+  const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e);
+    const { files } = e.target;
+    if (!files) return;
+
+    emitFiles(Array.from(files));
+  };
+
+  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    e.preventDefault();
+
+    const filesArray = Array.from(e.dataTransfer.files);
+    onDrop?.(e);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    emitFiles(mode === UPLOAD_MODE.Single ? [filesArray[0]!] : filesArray);
+  };
+
+  return (
+    <button
+      className={cn(className, styles.container)}
+      type='button'
+      disabled={disabled}
+      {...extractSupportProps(rest)}
+      data-over={isOver || undefined}
+      data-disabled={disabled || undefined}
+      data-size={size}
+      onClick={handleAttachFile}
+      tabIndex={disabled ? -1 : 0}
+      onDrop={handleDrop}
+      onDragLeave={onDragLeave}
+      onDragOver={onDragOver}
+    >
+      <span className={styles.acrylic} aria-hidden />
+      <span className={styles.borderLayer} data-state-layer aria-hidden data-state='borderOnBackground' />
+      <span className={styles.overLayer} data-state-layer aria-hidden data-state='activatedOnBackground' />
+
+      {children && <div className={styles.content}>{children}</div>}
+
+      <input
+        data-test-id={TEST_IDS.dropzone.nativeInput}
+        className={styles.hidden}
+        onChange={handleFileSelect}
+        multiple={mode === UPLOAD_MODE.Multiple}
+        ref={setInputRef}
+        type='file'
+        accept={buildAcceptAttribute(accept)}
+        disabled={disabled}
+        name={name}
+        id={id}
+        required={required}
+        form={form}
+        capture={capture}
+        onClick={e => {
+          (e.target as HTMLInputElement).value = '';
+        }}
+      />
+    </button>
+  );
+}

package/src/components/PrivateDropZone/constants.ts

@@ -0,0 +1 @@
+export { UPLOAD_MODE } from '../../constants';

package/src/components/PrivateDropZone/index.ts

@@ -0,0 +1,2 @@
+export { PrivateDropZone } from './PrivateDropZone';
+export type { PrivateDropZoneProps } from './types';

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

@@ -0,0 +1,126 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/dropzone.module' as dropzone;
+@use '@cloud-ru/ds-materials' as m;
+
+$sizes: 's', 'm', 'l';
+
+.hidden {
+  display: none;
+}
+
+.content {
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+}
+
+.overLayer {
+  // Заливка drag-over (`data-state='activatedOnBackground'`) — absolute-оверлей поверх
+  // контейнера под контентом (`.content` z-index:1), показывается на `[data-over]`.
+  // Фон и раньше отсутствовал (миксин state-layer применялся только к `.borderLayer`),
+  // поэтому подсветка перетаскивания не работала. Absolute убирает overLayer из потока —
+  // иначе он (в потоке flex-колонки) смещал `.content` с центра.
+  pointer-events: none;
+
+  position: absolute;
+  inset: 0;
+
+  border-radius: inherit;
+
+  visibility: hidden;
+  background-color: base.$sn-theme-color-material-stateLayer-activated-hovered-filled;
+}
+
+.borderLayer {
+  visibility: initial;
+}
+
+.acrylic {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.container {
+  cursor: pointer;
+
+  position: relative;
+  z-index: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  font-family: inherit;
+  text-decoration: none;
+
+  background: transparent;
+  background-color: base.$sn-theme-color-neutral-background1Level;
+  outline: 0;
+  outline-offset: 0;
+
+  @include m.with-material('acrylic', #{acrylic});
+
+  // Типографику компонент не задаёт: в Figma это слот целиком, её приносит содержимое.
+  // Цвет задаёт базовый: ресет `<button>` ставил `color: transparent`, и текст,
+  // переданный в слот строкой, наследовал прозрачный — рендерился невидимым.
+  .content {
+    color: base.$sn-theme-color-available-version-textMain;
+  }
+
+  // Макет: focusedFrame/primary/outside — рамка вплотную к боксу (bbox линии равен боксу
+  // компонента), толщина из focusLine/field, как у остальных полеподобных контролов.
+  // outline-offset выводится явно: без него Chromium подставляет свой отступ в 1px.
+  &:focus-visible {
+    outline: base.$sn-brand-anatomy-focusLine-field-strokeWeight solid base.$sn-theme-color-primary-accent;
+    outline-offset: 0;
+  }
+
+  &[data-over] {
+    .overLayer {
+      visibility: inherit;
+    }
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(dropzone.$dropzone, 'anatomy', 'size', $size);
+
+      .content {
+        @include base.composite-var(dropzone.$dropzone, 'anatomy', 'size', $size, 'contentWrapper');
+      }
+    }
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+
+    // В макете у disabled-варианта своя заливка контейнера, а не только приглушённый контент.
+    background-color: base.$sn-theme-color-neutral-background;
+
+    .content {
+      opacity: base.$sn-theme-effect-opacity-disabled;
+    }
+  }
+
+  @include m.has-state-layer-as-child(#{borderLayer});
+
+  // Пунктир — только бордер-слою: overLayer'у миксин задаёт лишь фон, и `dashed` включил
+  // бы ему рамку с initial-значениями (`medium` + `currentColor`).
+  > [data-state-layer][data-state='borderOnBackground'] {
+    border-style: dashed !important;
+  }
+}

package/src/components/PrivateDropZone/types.ts

@@ -0,0 +1,29 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from 'react';
+
+import { FileFieldProps, Size } from '../../types';
+import { UPLOAD_MODE } from './constants';
+
+export type DragAndDropEventNames = 'onDragLeave' | 'onDragOver' | 'onDrop';
+
+export type PrivateDropZoneProps = WithSupportProps<
+  {
+    isOver: boolean;
+    /** Колбек с принятыми файлами (прошедшими проверку `maxSize` и `accept`). */
+    onFilesUpload(files: File[]): void;
+    /** Контент dropzone */
+    children?: ReactNode;
+    /** Деактивирован ли компонент */
+    disabled?: boolean;
+    /**
+     * Режим
+     * @default multiple
+     */
+    mode?: (typeof UPLOAD_MODE)[keyof typeof UPLOAD_MODE];
+    /** Размер компонента */
+    size?: Size;
+    /** CSS-класс */
+    className?: string;
+  } & FileFieldProps
+> &
+  Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, DragAndDropEventNames>;

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './Dropzone';
+export * from './FileUpload';
+export * from './HiddenDropZone';

package/src/constants.ts

@@ -0,0 +1,19 @@
+export const UPLOAD_MODE = {
+  Single: 'single',
+  Multiple: 'multiple',
+} as const;
+
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
+
+export const TEST_IDS = {
+  dropzone: {
+    nativeInput: 'file-input',
+  },
+  fileUpload: {
+    nativeInput: 'file-upload__native-input',
+  },
+} as const;

package/src/hooks/useDrag.ts

@@ -0,0 +1,49 @@
+import { debounce } from '@cloud-ru/ds-utils';
+import { DragEventHandler, useCallback, useEffect, useMemo, useState } from 'react';
+
+type UseDragResult = {
+  events: Record<'onDragLeave' | 'onDragOver' | 'onDrop', DragEventHandler<HTMLElement>>;
+  isOver: boolean;
+};
+
+export function useDrag(disabled: boolean): UseDragResult {
+  const [isOver, setIsOver] = useState(false);
+
+  const debouncedSetIsOver = useMemo(() => debounce(setIsOver, 5), []);
+
+  const handleDragLeave = useCallback<DragEventHandler<HTMLElement>>(
+    e => {
+      if (!disabled) {
+        e.preventDefault();
+        debouncedSetIsOver(false);
+      }
+    },
+    [debouncedSetIsOver, disabled],
+  );
+
+  const handleDragOver = useCallback<DragEventHandler<HTMLElement>>(
+    e => {
+      if (!disabled) {
+        e.preventDefault();
+        debouncedSetIsOver(true);
+      }
+    },
+    [debouncedSetIsOver, disabled],
+  );
+
+  const handleDrop = useCallback<DragEventHandler<HTMLElement>>(
+    e => {
+      if (!disabled) {
+        e.preventDefault();
+        debouncedSetIsOver(false);
+      }
+    },
+    [debouncedSetIsOver, disabled],
+  );
+
+  useEffect(() => () => debouncedSetIsOver.cancel(), [debouncedSetIsOver]);
+
+  const events = { onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop };
+
+  return { events, isOver };
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './types';
+export * from './utils';

package/src/types.ts

@@ -0,0 +1,36 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { ChangeEventHandler, Ref } from 'react';
+
+import { SIZE, UPLOAD_MODE } from './constants';
+import { AcceptInput, FileRejection } from './utils';
+
+export type UploadMode = ValueOf<typeof UPLOAD_MODE>;
+export type Size = ValueOf<typeof SIZE>;
+
+/**
+ * Пропы, превращающие компонент загрузки в полноценное поле формы: нативные
+ * атрибуты скрытого `<input type="file">`, ссылка на него, валидация файлов.
+ * Общий контракт для FileUpload, Dropzone и HiddenDropZone.
+ */
+export type FileFieldProps = {
+  /** Разрешённые типы: MIME-тип (`image/png`), шаблон (`image/*`) или расширение (`.pdf`). Строка или массив. */
+  accept?: AcceptInput;
+  /** Максимальный размер одного файла в байтах. Превысившие уходят в `onFilesReject`. */
+  maxSize?: number;
+  /** Колбек с отклонёнными файлами и причиной (`maxSize` / `mime`). */
+  onFilesReject?(rejections: FileRejection[]): void;
+  /** Нативный `name` скрытого input — для отправки формы и интеграции с form-библиотеками. */
+  name?: string;
+  /** Нативный `id` скрытого input — для связи с `<label htmlFor>`. */
+  id?: string;
+  /** Нативный `required` скрытого input. */
+  required?: boolean;
+  /** Нативный `form` скрытого input — привязка к форме по `id`. */
+  form?: string;
+  /** Нативный `capture` скрытого input — источник захвата на мобильных (камера/микрофон). */
+  capture?: boolean | 'user' | 'environment';
+  /** Нативный `onChange` скрытого input. Вызывается до валидации с исходным событием. */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /** Ссылка на нативный `<input type="file">` — для интеграции с формами (react-hook-form `ref`). */
+  innerRef?: Ref<HTMLInputElement>;
+};