@vkontakte/vkui 7.2.1 → 7.3.0

package/src/components/DateInput/DateInput.tsx

@@ -7,12 +7,14 @@ import { startOfDay, startOfMinute } from 'date-fns';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useDateInput } from '../../hooks/useDateInput';
 import { useExternRef } from '../../hooks/useExternRef';
-import { callMultiple } from '../../lib/callMultiple';
+import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
 import { format, isMatch, parse } from '../../lib/date';
 import type { PlacementWithAuto } from '../../lib/floating';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasRootRef } from '../../types';
 import { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';
+import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { FormField, type FormFieldProps } from '../FormField/FormField';
 import { IconButton } from '../IconButton/IconButton';
 import { InputLike } from '../InputLike/InputLike';
@@ -31,23 +33,23 @@ const sizeYClassNames = {
 
 export type DateInputPropsTestsProps = {
   /**
-   * Передает атрибут `data-testid` для поля ввода дня
+   * Передает атрибут `data-testid` для поля ввода дня.
    */
   dayFieldTestId?: string;
   /**
-   * Передает атрибут `data-testid` для поля ввода месяца
+   * Передает атрибут `data-testid` для поля ввода месяца.
    */
   monthFieldTestId?: string;
   /**
-   * Передает атрибут `data-testid` для поля ввода года
+   * Передает атрибут `data-testid` для поля ввода года.
    */
   yearFieldTestId?: string;
   /**
-   * Передает атрибут `data-testid` для поля ввода часа
+   * Передает атрибут `data-testid` для поля ввода часа.
    */
   hourFieldTestId?: string;
   /**
-   * Передает атрибут `data-testid` для поля ввода минут
+   * Передает атрибут `data-testid` для поля ввода минут.
    */
   minuteFieldTestId?: string;
   /**
@@ -84,7 +86,6 @@ export interface DateInputProps
       | 'nextMonthLabel'
       | 'changeMonthLabel'
       | 'changeYearLabel'
-      | 'changeDayLabel'
       | 'showNeighboringMonth'
       | 'size'
       | 'viewDate'
@@ -97,21 +98,48 @@ export interface DateInputProps
       | 'maxDateTime'
       | 'renderDayContent'
     >,
+    Pick<UseFocusTrapProps, 'restoreFocus'>,
     HasRootRef<HTMLDivElement>,
     Omit<FormFieldProps, 'maxHeight'>,
     DateInputPropsTestsProps {
   /**
-   * Передает атрибуты `data-testid` для интерактивных элементов в календаре
+   * Передает атрибуты `data-testid` для интерактивных элементов в календаре.
    */
   calendarTestsProps?: CalendarTestsProps;
+  /**
+   * Расположение календаря относительно поля ввода.
+   */
   calendarPlacement?: PlacementWithAuto;
+  /**
+   * Автоматически закрывать календарь при изменениях.
+   */
   closeOnChange?: boolean;
+  /**
+   * `aria-label` для календаря.
+   */
+  calendarLabel?: string;
+  /**
+   * Label для кнопки очистки. Делает доступным для ассистивных технологий.
+   */
   clearFieldLabel?: string;
+  /**
+   * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.
+   */
   showCalendarLabel?: string;
+  /**
+   * Отключение открытия календаря.
+   */
   disableCalendar?: boolean;
+  /**
+   * Обработчик изменения состояния открытия календаря.
+   */
   onCalendarOpenChanged?: (opened: boolean) => void;
   /**
-   * Колбэк срабатывающий при нажатии на кнопку "Done". Используется совместно с флагом `enableTime`.
+   * `aria-label` для поля изменения дня.
+   */
+  changeDayLabel?: string;
+  /**
+   * Обработчик нажатия на кнопку `"Done"`. Используется совместно с флагом `enableTime`.
    */
   onApply?: (value?: Date) => void;
   /**
@@ -120,9 +148,26 @@ export interface DateInputProps
    */
   renderCustomValue?: (date: Date | undefined) => React.ReactNode;
   /**
-   * Свойство для отображения времени в нужной таймзоне
+   * Часовой пояс для отображения даты.
    */
   timezone?: string;
+  /**
+   * Включает режим в котором DateInput доступен
+   * для ассистивных технологий.
+   * В этом режиме:
+   * - календарь больше не открывает при фокусе на DateInput;
+   * - иконка календаря видна всегда, чтобы пользователи
+   * ассистивных технологий могли открыть календарь по клику на иконку;
+   * - календарь при открытии получает фокус, клавиатурный
+   * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт;
+   *
+   * TODO [>=8]: включить по умолчанию.
+   */
+  accessible?: boolean;
+  /**
+   * Позволяет отключить захват фокуса при появлении календаря.
+   */
+  disableFocusTrap?: UseFocusTrapProps['disabled'];
 }
 
 const elementsConfig = (index: number) => {
@@ -175,10 +220,10 @@ export const DateInput = ({
   disablePast,
   minDateTime,
   maxDateTime,
-  value: valueProp,
+  'value': valueProp,
   defaultValue,
   onChange,
-  calendarPlacement: calendarPlacementProp = 'bottom-start',
+  'calendarPlacement': calendarPlacementProp = 'bottom-start',
   style,
   className,
   doneButtonText,
@@ -191,17 +236,19 @@ export const DateInput = ({
   disabled,
   onClick,
   onFocus,
+  accessible,
+  calendarLabel = 'Календарь',
   prevMonthLabel = 'Предыдущий месяц',
   nextMonthLabel = 'Следующий месяц',
-  showNeighboringMonth,
-  size,
-  changeMonthLabel = 'Изменить месяц',
-  changeYearLabel = 'Изменить год',
-  changeDayLabel = 'Изменить день',
-  changeHoursLabel = 'Изменить час',
-  changeMinutesLabel = 'Изменить минуту',
+  changeDayLabel = 'День',
+  changeMonthLabel = 'Месяц',
+  changeYearLabel = 'Год',
+  changeHoursLabel = 'Час',
+  changeMinutesLabel = 'Минута',
   clearFieldLabel = 'Очистить поле',
   showCalendarLabel = 'Показать календарь',
+  showNeighboringMonth,
+  size,
   viewDate,
   onHeaderChange,
   onNextMonth,
@@ -223,6 +270,9 @@ export const DateInput = ({
   onApply,
   renderCustomValue,
   timezone,
+  restoreFocus,
+  disableFocusTrap,
+  'aria-label': ariaLabel = '',
   ...props
 }: DateInputProps): React.ReactNode => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -275,13 +325,15 @@ export const DateInput = ({
     rootRef,
     calendarRef,
     open,
-    openCalendar,
     internalValue,
     handleKeyDown,
     setFocusedElement,
     handleFieldEnter,
     clear,
     removeFocusFromField,
+    closeCalendar,
+    toggleCalendar,
+    openCalendar,
   } = useDateInput({
     maxElement,
     refs,
@@ -293,6 +345,7 @@ export const DateInput = ({
     getInternalValue,
     value,
     onCalendarOpenChanged,
+    accessible,
   });
 
   const { sizeY = 'none' } = useAdaptivity();
@@ -346,60 +399,97 @@ export const DateInput = ({
   const [calendarPlacement, setCalendarPlacement] =
     React.useState<PlacementWithAuto>(calendarPlacementProp);
 
+  const { locale } = useConfigProvider();
+  const currentDateLabel = value
+    ? new Intl.DateTimeFormat(locale, {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      }).format(value)
+    : null;
+  const currentDateLabelId = React.useId();
+  const ariaLabelId = React.useId();
+
+  const showCalendarOnInputAreaClick = React.useCallback(() => {
+    handleFieldEnter();
+    if (accessible) {
+      openCalendar();
+    }
+  }, [handleFieldEnter, openCalendar, accessible]);
+
   return (
     <FormField
       style={style}
       className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}
       getRootRef={handleRootRef}
+      role="group"
+      aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}
       after={
-        value ? (
-          <IconButton
-            hoverMode="opacity"
-            label={clearFieldLabel}
-            onClick={clear}
-            data-testid={clearButtonTestId}
-          >
-            <Icon16Clear />
-          </IconButton>
-        ) : (
-          <IconButton
-            hoverMode="opacity"
-            label={showCalendarLabel}
-            onClick={openCalendar}
-            data-testid={showCalendarButtonTestId}
-          >
-            <Icon20CalendarOutline />
-          </IconButton>
-        )
+        <React.Fragment>
+          {!disableCalendar && (accessible || (!accessible && !value)) ? (
+            <IconButton
+              hoverMode="opacity"
+              label={showCalendarLabel}
+              onClick={toggleCalendar}
+              data-testid={showCalendarButtonTestId}
+            >
+              <Icon20CalendarOutline />
+            </IconButton>
+          ) : null}
+          {value ? (
+            <IconButton
+              hoverMode="opacity"
+              label={clearFieldLabel}
+              onClick={clear}
+              data-testid={clearButtonTestId}
+            >
+              <Icon16Clear />
+            </IconButton>
+          ) : null}
+        </React.Fragment>
       }
       disabled={disabled}
-      onClick={callMultiple(handleFieldEnter, onClick)}
-      onFocus={callMultiple(handleFieldEnter, onFocus)}
+      onClick={onClick}
       {...props}
     >
       <div className={styles.wrapper}>
+        {ariaLabel && <VisuallyHidden id={ariaLabelId}>{ariaLabel}</VisuallyHidden>}
+        {currentDateLabel && (
+          <VisuallyHidden id={currentDateLabelId}>{currentDateLabel}</VisuallyHidden>
+        )}
         <VisuallyHidden
           id={id}
           Component="input"
+          readOnly
+          aria-hidden
+          tabIndex={-1}
           name={name}
           value={value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : ''}
+          onFocus={handleFieldEnter}
         />
         <Text
           className={classNames(styles.input, customValue && styles.hidden)}
-          onKeyDown={handleKeyDown}
           // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей
           // из-за чего `.Typography--normalize` перебивает стили.
           normalize={false}
           Component="span" // для <span> нормализация не нужна
+          onClick={showCalendarOnInputAreaClick}
         >
           <InputLike
             length={2}
             getRootRef={daysRef}
             index={0}
+            onKeyDown={handleKeyDown}
             onElementSelect={setFocusedElement}
             value={internalValue[0]}
             label={changeDayLabel}
             data-testid={dayFieldTestId}
+            role="spinbutton"
+            aria-valuemin={1}
+            aria-valuemax={31}
+            aria-valuetext={internalValue[0]}
+            aria-label={changeDayLabel}
           />
           <InputLikeDivider>.</InputLikeDivider>
           <InputLike
@@ -407,9 +497,15 @@ export const DateInput = ({
             getRootRef={monthsRef}
             index={1}
             onElementSelect={setFocusedElement}
+            onKeyDown={handleKeyDown}
             value={internalValue[1]}
             label={changeMonthLabel}
             data-testid={monthFieldTestId}
+            role="spinbutton"
+            aria-valuemin={1}
+            aria-valuemax={12}
+            aria-valuetext={internalValue[1]}
+            aria-label={changeMonthLabel}
           />
           <InputLikeDivider>.</InputLikeDivider>
           <InputLike
@@ -419,7 +515,13 @@ export const DateInput = ({
             onElementSelect={setFocusedElement}
             value={internalValue[2]}
             label={changeYearLabel}
+            onKeyDown={handleKeyDown}
             data-testid={yearFieldTestId}
+            role="spinbutton"
+            aria-valuemin={1}
+            aria-valuemax={275750}
+            aria-valuetext={internalValue[2]}
+            aria-label={changeYearLabel}
           />
           {enableTime && (
             <React.Fragment>
@@ -431,7 +533,13 @@ export const DateInput = ({
                 onElementSelect={setFocusedElement}
                 value={internalValue[3]}
                 label={changeHoursLabel}
+                onKeyDown={handleKeyDown}
                 data-testid={hourFieldTestId}
+                role="spinbutton"
+                aria-valuemin={1}
+                aria-valuemax={24}
+                aria-valuetext={internalValue[3]}
+                aria-label={changeHoursLabel}
               />
               <InputLikeDivider>:</InputLikeDivider>
               <InputLike
@@ -441,7 +549,13 @@ export const DateInput = ({
                 onElementSelect={setFocusedElement}
                 value={internalValue[4]}
                 label={changeMinutesLabel}
+                onKeyDown={handleKeyDown}
                 data-testid={minuteFieldTestId}
+                role="spinbutton"
+                aria-valuemin={1}
+                aria-valuemax={59}
+                aria-valuetext={internalValue[4]}
+                aria-label={changeMinutesLabel}
               />
             </React.Fragment>
           )}
@@ -460,38 +574,46 @@ export const DateInput = ({
           onPlacementChange={setCalendarPlacement}
           autoUpdateOnTargetResize
         >
-          <Calendar
-            value={value}
-            onChange={onCalendarChange}
-            enableTime={enableTime}
-            disablePast={disablePast}
-            disableFuture={disableFuture}
-            shouldDisableDate={shouldDisableDate}
-            onDoneButtonClick={onDoneButtonClick}
-            getRootRef={calendarRef}
-            doneButtonText={doneButtonText}
-            DoneButton={DoneButton}
-            disablePickers={disablePickers}
-            changeHoursLabel={changeHoursLabel}
-            changeMinutesLabel={changeMinutesLabel}
-            prevMonthLabel={prevMonthLabel}
-            nextMonthLabel={nextMonthLabel}
-            changeMonthLabel={changeMonthLabel}
-            changeYearLabel={changeYearLabel}
-            changeDayLabel={changeDayLabel}
-            showNeighboringMonth={showNeighboringMonth}
-            renderDayContent={renderDayContent}
-            size={size}
-            viewDate={viewDate}
-            onHeaderChange={onHeaderChange}
-            onNextMonth={onNextMonth}
-            onPrevMonth={onPrevMonth}
-            prevMonthIcon={prevMonthIcon}
-            nextMonthIcon={nextMonthIcon}
-            minDateTime={minDateTime}
-            maxDateTime={maxDateTime}
-            {...calendarTestsProps}
-          />
+          <FocusTrap
+            onClose={closeCalendar}
+            disabled={disableFocusTrap ?? !accessible}
+            restoreFocus={restoreFocus ?? Boolean(accessible)}
+            captureEscapeKeyboardEvent={false}
+          >
+            <Calendar
+              aria-label={calendarLabel}
+              role="dialog"
+              value={value}
+              onChange={onCalendarChange}
+              enableTime={enableTime}
+              disablePast={disablePast}
+              disableFuture={disableFuture}
+              shouldDisableDate={shouldDisableDate}
+              onDoneButtonClick={onDoneButtonClick}
+              getRootRef={calendarRef}
+              doneButtonText={doneButtonText}
+              DoneButton={DoneButton}
+              disablePickers={disablePickers}
+              changeHoursLabel={changeHoursLabel}
+              changeMinutesLabel={changeMinutesLabel}
+              prevMonthLabel={prevMonthLabel}
+              nextMonthLabel={nextMonthLabel}
+              changeMonthLabel={changeMonthLabel}
+              changeYearLabel={changeYearLabel}
+              showNeighboringMonth={showNeighboringMonth}
+              renderDayContent={renderDayContent}
+              size={size}
+              viewDate={viewDate}
+              onHeaderChange={onHeaderChange}
+              onNextMonth={onNextMonth}
+              onPrevMonth={onPrevMonth}
+              prevMonthIcon={prevMonthIcon}
+              nextMonthIcon={nextMonthIcon}
+              minDateTime={minDateTime}
+              maxDateTime={maxDateTime}
+              {...calendarTestsProps}
+            />
+          </FocusTrap>
         </Popper>
       )}
     </FormField>

package/src/components/DateInput/hooks.ts

@@ -1,3 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
 import * as React from 'react';
 import { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';
 

package/src/components/DateRangeInput/DateRangeInput.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./DateRangeInput.module.css"],"names":["input","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,O,WAAA;AAAA,E,aAWAC,c,WAXA;AAAA,E,aAWcD,O,WAXd;AAAA,E,aAgBEE,W,WAhBF;AAAA,E,aAgBaF,O,WAhBb;AAAA;AAAA","file":"DateRangeInput.module.css.d.ts","sourceRoot":""}

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -35,26 +35,26 @@ const sizeYClassNames = {
 
 type DateTestsProps = {
   /**
-   * Передает атрибут `data-testid` для поля ввода дня
+   * Передает атрибут `data-testid` для поля ввода дня.
    */
   day?: string;
   /**
-   * Передает атрибут `data-testid` для поля ввода месяца
+   * Передает атрибут `data-testid` для поля ввода месяца.
    */
   month?: string;
   /**
-   * Передает атрибут `data-testid` для поля ввода года
+   * Передает атрибут `data-testid` для поля ввода года.
    */
   year?: string;
 };
 
 export type DateRangeInputTestsProps = {
   /**
-   * Передает атрибуты `data-testid` для полей ввода начальной даты
+   * Передает атрибуты `data-testid` для полей ввода начальной даты.
    */
   startDateTestsProps?: DateTestsProps;
   /**
-   * Передает атрибуты `data-testid` для полей ввода конечной даты
+   * Передает атрибуты `data-testid` для полей ввода конечной даты.
    */
   endDateTestsProps?: DateTestsProps;
   /**
@@ -92,20 +92,56 @@ export interface DateRangeInputProps
     Omit<FormFieldProps, 'maxHeight'>,
     DateRangeInputTestsProps {
   /**
-   * Передает атрибуты `data-testid` для интерактивных элементов в календаре
+   * Передает атрибуты `data-testid` для интерактивных элементов в календаре.
    */
   calendarTestsProps?: CalendarRangeTestsProps;
+  /**
+   * Расположение календаря относительно поля ввода.
+   */
   calendarPlacement?: PlacementWithAuto;
+  /**
+   * Автоматически закрывать календарь при изменениях.
+   */
   closeOnChange?: boolean;
+  /**
+   * Обработчик изменения состояния открытия календаря.
+   */
   onCalendarOpenChanged?: (opened: boolean) => void;
+  /**
+   * Label для кнопки очистки. Делает доступным для ассистивных технологий.
+   */
   clearFieldLabel?: string;
+  /**
+   * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.
+   */
   showCalendarLabel?: string;
+  /**
+   * Label для ввода дня начальной даты. Делает доступным для ассистивных технологий.
+   */
   changeStartDayLabel?: string;
+  /**
+   * Label для ввода месяца начальной даты. Делает доступным для ассистивных технологий.
+   */
   changeStartMonthLabel?: string;
+  /**
+   * Label для ввода года начальной даты. Делает доступным для ассистивных технологий.
+   */
   changeStartYearLabel?: string;
+  /**
+   * Label для ввода дня конечной даты. Делает доступным для ассистивных технологий.
+   */
   changeEndDayLabel?: string;
+  /**
+   * Label для ввода месяца конечной даты. Делает доступным для ассистивных технологий.
+   */
   changeEndMonthLabel?: string;
+  /**
+   * Label для ввода года конечной даты. Делает доступным для ассистивных технологий.
+   */
   changeEndYearLabel?: string;
+  /**
+   * Отключение открытия календаря.
+   */
   disableCalendar?: boolean;
 }
 

package/src/components/DirectionProvider/DirectionProvider.tsx

@@ -3,12 +3,18 @@ import { type ConfigProviderContextInterface } from '../ConfigProvider/ConfigPro
 import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 
 export interface DirectionProviderProps {
+  /**
+   * Направление контента.
+   */
   value: ConfigProviderContextInterface['direction'];
+  /**
+   * Содержимое.
+   */
   children: React.ReactNode;
 }
 
 /**
- * Компонент, прокидывающий направление контента
+ * Компонент, прокидывающий направление контента.
  * @see https://vkcom.github.io/VKUI/#/DirectionProvider
  * @since 7.2.0
  */

package/src/components/Div/Div.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Div.module.css"],"names":["host"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA;AAAA","file":"Div.module.css.d.ts","sourceRoot":""}

package/src/components/DropZone/DropZone.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./DropZone.module.css"],"names":["host","active"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAA,M,WAJA;AAAA,E,aAYAC,Q,WAZA;AAAA;AAAA","file":"DropZone.module.css.d.ts","sourceRoot":""}

package/src/components/DropZone/DropZone.tsx

@@ -3,16 +3,23 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { callMultiple } from '../../lib/callMultiple';
+import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { DropZoneGrid } from './components/DropZoneGrid';
 import styles from './DropZone.module.css';
 
 interface DropZonePropsChildrenProps {
+  /**
+   * Флаг активного состояния компонента.
+   */
   active: boolean;
 }
 
 export interface DropZoneProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'> {
+  /**
+   * Содержимое компонента. Можно прокинуть функцию для отрисовки содержимого.
+   */
   children?: React.ReactNode | ((renderProps: DropZonePropsChildrenProps) => React.ReactNode);
 }
 
@@ -53,7 +60,8 @@ export const DropZone: React.FC<DropZoneProps> & {
   );
 };
 
-DropZone.displayName = 'DropZone';
-
 DropZone.Grid = DropZoneGrid;
-DropZone.Grid.displayName = 'DropZone.Grid';
+
+if (process.env.NODE_ENV !== 'production') {
+  defineComponentDisplayNames(DropZone.Grid, 'DropZone.Grid');
+}

package/src/components/DropZone/components/DropZoneGrid.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./DropZoneGrid.module.css"],"names":["host","column","row"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAOAC,Q,WAPA;AAAA,E,aAWAC,K,WAXA;AAAA,E,aAiBAF,M,WAjBA;AAAA,E,aAqBAC,Q,WArBA;AAAA,E,aAyBAA,Q,WAzBA;AAAA,E,aA6BAC,K,WA7BA;AAAA,E,aAiCAA,K,WAjCA;AAAA,E,aAsCAA,K,WAtCA;AAAA;AAAA","file":"DropZoneGrid.module.css.d.ts","sourceRoot":""}

package/src/components/DropZone/components/DropZoneGrid.tsx

@@ -9,14 +9,12 @@ const directionStyle = {
 };
 
 export interface DropZoneGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Направление дочерних компонентов.
+   */
   direction?: 'row' | 'column';
 }
 
-export const DropZoneGrid: React.FC<DropZoneGridProps> = ({
-  direction = 'column',
-  ...props
-}: DropZoneGridProps) => (
+export const DropZoneGrid = ({ direction = 'column', ...props }: DropZoneGridProps) => (
   <RootComponent baseClassName={classNames(styles.host, directionStyle[direction])} {...props} />
 );
-
-DropZoneGrid.displayName = 'DropZoneGrid';

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -1,4 +1,5 @@
 'use client';
+/* eslint-disable jsdoc/require-jsdoc */
 
 import * as React from 'react';
 import {

package/src/components/Epic/Epic.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Epic.module.css"],"names":["host"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMqCA,M,WANrC;AAAA;AAAA","file":"Epic.module.css.d.ts","sourceRoot":""}