@vkontakte/vkui 8.0.1 → 8.1.0

package/src/lib/animation/useReducedMotion.ts

@@ -1,7 +1,4 @@
-/* eslint-disable no-restricted-properties */
-import * as React from 'react';
-import { useDOM } from '../dom';
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { useMediaQueryMatches } from '../../hooks/useMediaQueryMatch';
 
 export const REDUCE_MOTION_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
 
@@ -12,25 +9,5 @@ export const REDUCE_MOTION_MEDIA_QUERY = 'screen and (prefers-reduced-motion: re
  * `false` - если нет, и `undefined` во время серверного рендеринга или во время первого рендеринга на клиенте.
  */
 export const useReducedMotion = (): boolean | undefined => {
-  const { window } = useDOM();
-
-  const [reducedMotion, setReducedMotion] = React.useState<boolean | undefined>(undefined);
-
-  useIsomorphicLayoutEffect(() => {
-    /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */
-    if (!window) {
-      return;
-    }
-    const match = window.matchMedia(REDUCE_MOTION_MEDIA_QUERY);
-    setReducedMotion(match.matches);
-    /* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно  */
-    const handleMediaQueryChange = (event: MediaQueryListEvent) => {
-      /* istanbul ignore next */
-      setReducedMotion(event.matches);
-    };
-    match.addEventListener('change', handleMediaQueryChange);
-    return () => match.removeEventListener('change', handleMediaQueryChange);
-  }, [window]);
-
-  return reducedMotion;
+  return useMediaQueryMatches(REDUCE_MOTION_MEDIA_QUERY);
 };

package/src/lib/calendar.ts

@@ -183,7 +183,10 @@ export const isLastDay = (day: Date, dayOfWeek: number): boolean =>
 /**
  * Возвращает дату, ограниченную `min` и/или `max` значениями
  */
-export function clamp(day: Date, options: { min?: Date; max?: Date } = {}): Date {
+export function clamp(
+  day: Date,
+  options: { min?: Date | undefined; max?: Date | undefined } = {},
+): Date {
   const { min, max } = options;
   if (min && day < min) {
     return min;
@@ -199,7 +202,7 @@ export function clamp(day: Date, options: { min?: Date; max?: Date } = {}): Date
  */
 export function isDayMinMaxRestricted(
   day: Date,
-  options: { min?: Date; max?: Date; withTime?: boolean } = {},
+  options: { min?: Date | undefined; max?: Date | undefined; withTime?: boolean | undefined } = {},
 ): boolean {
   const { min, max, withTime = false } = options;
   if (!withTime && ((min && isSameDate(day, min)) || (max && isSameDate(day, max)))) {

package/src/lib/date.ts

@@ -114,8 +114,8 @@ export function parse(input: string, format: string, referenceDate: Date = new D
 }
 
 export const convertDateToTimeZone = (
-  date?: Date | null,
-  timezone?: string,
+  date?: Date | null | undefined,
+  timezone?: string | undefined,
 ): Date | undefined | null => {
   if (!timezone) {
     return date;
@@ -141,13 +141,13 @@ export const convertDateFromTimeZone = (date: Date | null, timezone?: string): D
 };
 
 export type CreateDateInTimeZoneOverrides = {
-  year?: number;
-  month?: number;
-  date?: number;
-  hours?: number;
-  minutes?: number;
-  seconds?: number;
-  milliseconds?: number;
+  year?: number | undefined;
+  month?: number | undefined;
+  date?: number | undefined;
+  hours?: number | undefined;
+  minutes?: number | undefined;
+  seconds?: number | undefined;
+  milliseconds?: number | undefined;
 };
 
 export function createDateInTimeZone(
@@ -216,7 +216,7 @@ export function endOfMonth(date: Date): Date {
   return result;
 }
 
-type WeekOptions = { weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 };
+type WeekOptions = { weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined };
 
 export const MONDAY = 1;
 
@@ -285,7 +285,7 @@ export function startOfMinute(date: Date): Date {
 export function eachDayOfInterval(
   startDate: Date,
   endDate: Date,
-  { step = 1 }: { step?: number } = {},
+  { step = 1 }: { step?: number | undefined } = {},
 ): Date[] {
   let reversed = +startDate > +endDate;
   const endTime = reversed ? +startDate : +endDate;

package/src/lib/dom.tsx

@@ -25,11 +25,11 @@ export interface DOMContextInterface {
   /**
    * @ignore
    */
-  window?: Window;
+  window?: Window | undefined;
   /**
    * @ignore
    */
-  document?: Document;
+  document?: Document | undefined;
 }
 
 export type DOMProps = DOMContextInterface;

package/src/lib/floating/functions.ts

@@ -20,8 +20,8 @@ export type ConvertFloatingDataArgs = {
   strategy: FloatingPositionStrategy;
   x: UseFloatingData['x'];
   y: UseFloatingData['y'];
-  initialWidth?: React.CSSProperties['width'] | null;
-  middlewareData?: UseFloatingData['middlewareData'];
+  initialWidth?: React.CSSProperties['width'] | null | undefined;
+  middlewareData?: UseFloatingData['middlewareData'] | undefined;
 };
 
 /**

package/src/lib/floating/types/component.ts

@@ -29,7 +29,7 @@ export interface FloatingComponentProps
    * в аргументе функции можно получить метод `onClose`, с помощью которого можно программно закрывать
    * всплывающее окно.
    */
-  content?: React.ReactNode | FloatingContentRenderProp;
+  content?: React.ReactNode | FloatingContentRenderProp | undefined;
   /**
    * Целевой элемент. Всплывающее окно появится возле него.
    *
@@ -37,36 +37,36 @@ export interface FloatingComponentProps
    * > 1. предоставлять параметры либо `getRootRef`, либо `ref` (cм. `React.forwardRef()`) для получения ссылки на DOM-узел;
    * > 2. принимать DOM атрибуты и события.
    */
-  children?: React.ReactElement;
+  children?: React.ReactElement | undefined;
   /**
    * Нужно ли при навигации с клавиатуры авто-фокусироваться на всплывающий элемент.
    */
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   /**
    * Нужно ли после закрытия всплывающего элемента возвращать фокус на предыдущий активный элемент.
    */
-  restoreFocus?: RestoreFocusType;
+  restoreFocus?: RestoreFocusType | undefined;
   /**
    * Перебивает zIndex заданный по умолчанию.
    */
-  zIndex?: number | string;
+  zIndex?: number | string | undefined;
   /**
    * По умолчанию используется document.body.
    */
-  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement>;
+  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | undefined;
   /**
    * В зависимости от области видимости, позиция может смениться на более оптимальную,
    * чтобы всплывающий элемент вместился в эту область видимости.
    */
-  onPlacementChange?: OnPlacementChange;
+  onPlacementChange?: OnPlacementChange | undefined;
   /**
    * Событие скрытия / раскрытия компонента при использовании свойства `hideWhenReferenceHidden`.
    *
    * > Стоит иметь ввиду, что событие также будет вызвано и при новом рендере компонента
    */
-  onReferenceHiddenChange?: (hidden: boolean) => void;
+  onReferenceHiddenChange?: ((hidden: boolean) => void) | undefined;
   /**
    * Позволяет отключить захват фокуса.
    */
-  disableFocusTrap?: boolean;
+  disableFocusTrap?: boolean | undefined;
 }

package/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts

@@ -22,58 +22,60 @@ export interface UseFloatingMiddlewaresBootstrapOptions {
   /**
    * По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства.
    */
-  placement?: PlacementWithAuto;
+  placement?: PlacementWithAuto | undefined;
   /**
    * Указанное значение `placement` форсируется, даже если для выпадающего элемента недостаточно места.
    * Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`
    */
-  disableFlipMiddleware?: boolean;
+  disableFlipMiddleware?: boolean | undefined;
   /**
    * Позволяет отключить смещение по главной оси,
    * которое не даёт всплывающему элементу выходить за границы видимой области.
    */
-  disableShiftMiddleware?: boolean;
+  disableShiftMiddleware?: boolean | undefined;
   /**
    * Задаёт резервный вариант размещения по перпендикулярной оси.
    */
-  flipMiddlewareFallbackAxisSideDirection?: FlipMiddlewareOptions['fallbackAxisSideDirection'];
+  flipMiddlewareFallbackAxisSideDirection?:
+    | FlipMiddlewareOptions['fallbackAxisSideDirection']
+    | undefined;
   /**
    * Отступ по главной оси.
    */
-  offsetByMainAxis?: number;
+  offsetByMainAxis?: number | undefined;
   /**
    * Отступ по вспомогательной оси.
    */
-  offsetByCrossAxis?: number;
+  offsetByCrossAxis?: number | undefined;
   /**
    * Отступ для смещения.
    */
-  overflowPadding?: ShiftMiddlewareOptions['padding'];
-  arrowRef?: ArrowOptions['element'];
+  overflowPadding?: ShiftMiddlewareOptions['padding'] | undefined;
+  arrowRef?: ArrowOptions['element'] | undefined;
   /**
    * Отображать ли стрелку, указывающую на якорный элемент.
    */
-  arrow?: boolean;
+  arrow?: boolean | undefined;
   /**
    * Высота стрелки. Складывается с `mainAxis`, чтобы стрелка не залезала на якорный элемент.
    */
-  arrowHeight?: number;
+  arrowHeight?: number | undefined;
   /**
    * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.
    */
-  arrowPadding?: number;
+  arrowPadding?: number | undefined;
   /**
    * Выставлять ширину равной target элементу.
    */
-  sameWidth?: boolean;
+  sameWidth?: boolean | undefined;
   /**
    * Позволяет задать или переопределить модификаторы библиотеки **Floating UI** (подробнее в документации про [middleware](https://floating-ui.com/docs/middleware)).
    */
-  customMiddlewares?: UseFloatingMiddleware[];
+  customMiddlewares?: UseFloatingMiddleware[] | undefined;
   /**
    * Принудительно скрывает компонент если целевой элемент вышел за область видимости.
    */
-  hideWhenReferenceHidden?: boolean;
+  hideWhenReferenceHidden?: boolean | undefined;
 }
 
 export const useFloatingMiddlewaresBootstrap = ({
@@ -104,7 +106,11 @@ export const useFloatingMiddlewaresBootstrap = ({
       }),
     ];
 
-    const shift = disableShiftMiddleware ? null : shiftMiddleware({ padding: overflowPadding });
+    const shift = disableShiftMiddleware
+      ? null
+      : overflowPadding !== undefined
+        ? shiftMiddleware({ padding: overflowPadding })
+        : shiftMiddleware();
 
     // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#conflict-with-autoplacementjs
     if (isAutoPlacement) {
@@ -153,10 +159,11 @@ export const useFloatingMiddlewaresBootstrap = ({
     // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/arrow.mdx#order
     if (arrow) {
       middlewares.push(
-        arrowMiddleware({
-          element: arrowRef,
-          padding: arrowPadding,
-        }),
+        arrowMiddleware(
+          arrowPadding !== undefined
+            ? { element: arrowRef ?? null, padding: arrowPadding }
+            : { element: arrowRef ?? null },
+        ),
       );
     }
 

package/src/lib/floating/useFloatingWithInteractions/types.ts

@@ -25,7 +25,7 @@ export type ShownChangeReason =
 export type OnShownChange = (shown: boolean, reason?: ShownChangeReason) => void;
 
 export interface UseFloatingWithInteractionsProps {
-  placement?: Placement;
+  placement?: Placement | undefined;
   /**
    * Стратегия позиционирования всплывающего элемента.
    *
@@ -34,8 +34,8 @@ export interface UseFloatingWithInteractionsProps {
    *
    * > `strategy="absolute"` Рекомендуется использовать с `usePortal={false}`. И нужно не забыть обернуть в элемент с `position: relative`
    */
-  strategy?: FloatingPositionStrategy;
-  middlewares?: UseFloatingMiddleware[];
+  strategy?: FloatingPositionStrategy | undefined;
+  middlewares?: UseFloatingMiddleware[] | undefined;
   /**
    * Механика вызова всплывающего элемента.
    *
@@ -52,7 +52,7 @@ export interface UseFloatingWithInteractionsProps {
    *
    * **Избегайте использования `trigger="hover"` как единственного механизма активации, так как пользователи клавиатуры или скринридеров не смогут использовать компонент**
    */
-  trigger?: TriggerType;
+  trigger?: TriggerType | undefined;
   /**
    * Количество миллисекунд, после которых произойдёт показ/скрытие всплывающего элемента
    * при наведении.
@@ -61,43 +61,43 @@ export interface UseFloatingWithInteractionsProps {
    *
    * > Используется только для `trigger="hover"`.
    */
-  hoverDelay?: number | [number, number];
+  hoverDelay?: number | [number, number] | undefined;
   /**
    * При `trigger="hover"` закрывает всплывающий элемент при нажатии на целевой элемент.
    */
-  closeAfterClick?: boolean;
+  closeAfterClick?: boolean | undefined;
   /**
    * Блокирует изменение состояния.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Отключает взаимодействие со всплывающим элементом.
    */
-  disableInteractive?: boolean;
+  disableInteractive?: boolean | undefined;
   /**
    * Отключает закрытие нажатием на область вне целевого и всплывающего элемента.
    */
-  disableCloseOnClickOutside?: boolean;
+  disableCloseOnClickOutside?: boolean | undefined;
   /**
    * Отключает закрытие нажатием на кнопку ESC.
    */
-  disableCloseOnEscKey?: boolean;
+  disableCloseOnEscKey?: boolean | undefined;
   /**
    * Начальное состояние всплывающего элемента.
    */
-  defaultShown?: boolean;
+  defaultShown?: boolean | undefined;
   /**
    * Если передан, то всплывающий элемент будет показано/скрыто в зависимости от значения свойства.
    */
-  shown?: boolean;
+  shown?: boolean | undefined;
   /**
    * Вызывается при каждом изменении видимости всплывающего элемента.
    */
-  onShownChange?: OnShownChange;
+  onShownChange?: OnShownChange | undefined;
   /**
    * Вызывается при каждом изменении видимости всплывающего элемента, но после завершении анимации.
    */
-  onShownChanged?: OnShownChange;
+  onShownChanged?: OnShownChange | undefined;
 }
 
 export type ReferenceProps<T = HTMLElement> = Omit<
@@ -123,6 +123,6 @@ export interface UseFloatingWithInteractionsReturn<T extends HTMLElement = HTMLE
   floatingProps: FloatingProps<T>;
   middlewareData: UseFloatingData['middlewareData'];
   onClose: (this: void) => void;
-  onEscapeKeyDown?: (this: void) => void;
+  onEscapeKeyDown?: ((this: void) => void) | undefined;
   onRestoreFocus: (restoreFocus?: RestoreFocusType) => boolean | HTMLElement;
 }

package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts

@@ -90,8 +90,8 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
   const { placement, x, y, strategy, refs, middlewareData } = useFloating<T>({
     strategy: strategyProp,
     placement: placementProp,
-    middleware: middlewares,
-    whileElementsMounted: isLock ? undefined : whileElementsMounted,
+    ...(middlewares !== undefined ? { middleware: middlewares } : {}),
+    ...(!isLock && { whileElementsMounted }),
   });
 
   const commitShownLocalState = React.useCallback(

package/src/lib/getNavId.ts

@@ -2,8 +2,8 @@ import type { WarnOnceHandler } from './warnOnce';
 
 export interface NavIdProps {
   /** Уникальный идентификатор навигационного элемента (вместо id) */
-  nav?: string;
-  id?: string;
+  nav?: string | undefined;
+  id?: string | undefined;
 }
 
 export function getNavId(props: NavIdProps, warn?: WarnOnceHandler): string | undefined {

package/src/lib/layouts/resolveLayoutProps.ts

@@ -5,8 +5,8 @@ import { LAYOUT_PROPS, type LayoutPropKeys } from './layoutProps';
 import type { LayoutProps } from './types';
 
 export type ComponentProps = Partial<LayoutProps> & {
-  className?: string;
-  style?: React.CSSProperties;
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
 } & {
   [key: string]: unknown;
 };
@@ -17,7 +17,7 @@ export type ComponentProps = Partial<LayoutProps> & {
  * @returns измененные свойства
  */
 export function resolveLayoutProps<T extends ComponentProps>(
-  props: T & { className?: string; style?: React.CSSProperties },
+  props: T & { className?: string | undefined; style?: React.CSSProperties | undefined },
 ) {
   const outProps = { ...props };
   let resolvedClassName: string | undefined;

package/src/lib/layouts/types.ts

@@ -42,117 +42,117 @@ export interface LayoutProps {
   /**
    * Внутренние отступы со всех сторон.
    */
-  padding?: PaddingProp;
+  padding?: PaddingProp | undefined;
   /**
    * Внутренние отступы по строчной оси.
    */
-  paddingInline?: PaddingProp;
+  paddingInline?: PaddingProp | undefined;
   /**
    * Внутренние отступы по блочной оси.
    */
-  paddingBlock?: PaddingProp;
+  paddingBlock?: PaddingProp | undefined;
   /**
    * Внутренний начальный отступ по строчной оси.
    */
-  paddingInlineStart?: PaddingProp;
+  paddingInlineStart?: PaddingProp | undefined;
   /**
    * Внутренний конечный отступ по строчной оси.
    */
-  paddingInlineEnd?: PaddingProp;
+  paddingInlineEnd?: PaddingProp | undefined;
   /**
    * Внутренний начальный отступ по блочной оси.
    */
-  paddingBlockStart?: PaddingProp;
+  paddingBlockStart?: PaddingProp | undefined;
   /**
    * Внутренний конечный отступ по блочной оси.
    */
-  paddingBlockEnd?: PaddingProp;
+  paddingBlockEnd?: PaddingProp | undefined;
   /**
    * Размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента).
    */
-  inlineSize?: SizeProp;
+  inlineSize?: SizeProp | undefined;
   /**
    * Минимальный размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента).
    */
-  minInlineSize?: Exclude<SizeProp, 'auto'>;
+  minInlineSize?: Exclude<SizeProp, 'auto'> | undefined;
   /**
    * Максимальный размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента).
    */
-  maxInlineSize?: Exclude<SizeProp, 'auto'>;
+  maxInlineSize?: Exclude<SizeProp, 'auto'> | undefined;
   /**
    * Размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента).
    */
-  blockSize?: SizeProp;
+  blockSize?: SizeProp | undefined;
   /**
    * Минимальный размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента).
    */
-  minBlockSize?: SizeProp;
+  minBlockSize?: SizeProp | undefined;
   /**
    * Максимальный размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента).
    */
-  maxBlockSize?: SizeProp;
+  maxBlockSize?: SizeProp | undefined;
   /**
    * Смещение элемента по `top`, `right`, `bottom` и `left` одновременно.
    */
-  inset?: InsetProp;
+  inset?: InsetProp | undefined;
   /**
    * Боковое смещение по строчной оси (при горизонтальном направлении письма - свойства `left`/`right`).
    */
-  insetInline?: InsetProp;
+  insetInline?: InsetProp | undefined;
   /**
    * Боковое смещение по блочной оси (при горизонтальном направлении письма - свойства `top`/`bottom`).
    */
-  insetBlock?: InsetProp;
+  insetBlock?: InsetProp | undefined;
   /**
    * Смещение начального отступа по строчной оси (при горизонтальном направлении письма - свойство `left`).
    */
-  insetInlineStart?: InsetProp;
+  insetInlineStart?: InsetProp | undefined;
   /**
    * Смещение конечного отступа по строчной оси (при горизонтальном направлении письма - свойство `right`).
    */
-  insetInlineEnd?: InsetProp;
+  insetInlineEnd?: InsetProp | undefined;
   /**
    * Смещение начального отступа по блочной оси (при горизонтальном направлении письма - свойство `top`).
    */
-  insetBlockStart?: InsetProp;
+  insetBlockStart?: InsetProp | undefined;
   /**
    * Смещение конечного отступа по блочной оси (при горизонтальном направлении письма - свойство `bottom`).
    */
-  insetBlockEnd?: InsetProp;
+  insetBlockEnd?: InsetProp | undefined;
   /**
    * Позиционирование элемента.
    */
-  position?: PositionValue;
+  position?: PositionValue | undefined;
   /**
    * Управление переполнением содержимого.
    */
-  overflow?: OverflowValue;
+  overflow?: OverflowValue | undefined;
   /**
    * Управление переполнением содержимого по блочной оси (при горизонтальном направлении письма - свойство `overflow-y`).
    */
-  overflowBlock?: OverflowValue;
+  overflowBlock?: OverflowValue | undefined;
   /**
    * Управление переполнением содержимого по строчной оси (при горизонтальном направлении письма - свойство `overflow-x`).
    */
-  overflowInline?: OverflowValue;
+  overflowInline?: OverflowValue | undefined;
   /**
    * Определяет, насколько элемент будет расти относительно остальных flex-элементов.
    */
-  flexGrow?: FlexGrowProp;
+  flexGrow?: FlexGrowProp | undefined;
   /**
    * Определяет, насколько элемент будет сжиматься относительно остальных flex-элементов.
    */
-  flexShrink?: FlexShrinkProp;
+  flexShrink?: FlexShrinkProp | undefined;
   /**
    * Определяет начальный размер flex-элемента.
    */
-  flexBasis?: FlexBasisProp;
+  flexBasis?: FlexBasisProp | undefined;
   /**
    * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`.
    */
-  alignSelf?: AlignSelfProp;
+  alignSelf?: AlignSelfProp | undefined;
   /**
    * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `justify-self`.
    */
-  justifySelf?: JustifySelfProp;
+  justifySelf?: JustifySelfProp | undefined;
 }

package/src/lib/select.ts

@@ -3,8 +3,8 @@ import type { SelectType } from '../components/Select/Select';
 import { getTextFromChildren } from './children';
 
 export type Option = {
-  value?: unknown;
-  label?: React.ReactNode;
+  value?: unknown | undefined;
+  label?: React.ReactNode | undefined;
   [index: string]: any;
 };
 

package/src/lib/sheet/useBottomSheet.ts

@@ -23,9 +23,9 @@ export type UseBottomSheetOptions = {
   sheetCSSProperty: string;
   backdropCSSProperty: string;
   snapPoint: SnapPoint;
-  blocked?: boolean;
-  onSnapPointChange?: SnapPointChange;
-  onDismiss?: VoidFunction;
+  blocked?: boolean | undefined;
+  onSnapPointChange?: SnapPointChange | undefined;
+  onDismiss?: VoidFunction | undefined;
 };
 
 export type UseBottomSheetHandlers = {
@@ -41,7 +41,7 @@ export type UseBottomSheetHandlers = {
 
 export type UseBottomSheetResult = [
   {
-    initialStyle?: CSSProperties;
+    initialStyle?: CSSProperties | undefined;
     setSheetEl: Dispatch<SetStateAction<HTMLElement | null>>;
     setSheetScrollEl: Dispatch<SetStateAction<HTMLElement | null>>;
     setBackdropEl: Dispatch<SetStateAction<HTMLElement | null>>;

package/src/lib/tokens/TokensClassProvider.tsx

@@ -4,7 +4,7 @@ import { useTokensClassName } from './useTokenClassName';
 import styles from './TokensClassProvider.module.css';
 
 type ProvidedChildProps = {
-  className?: string;
+  className?: string | undefined;
 };
 
 type InjectTokenClassNameToChildProps = {

package/src/lib/tokens/types.ts

@@ -12,8 +12,8 @@ import type { PlatformType } from '../platform';
  * ```
  */
 export type TokensClassNamesByAppearances = {
-  light?: string;
-  dark?: string;
+  light?: string | undefined;
+  dark?: string | undefined;
 };
 
 /**

package/src/lib/utils.ts

@@ -114,11 +114,16 @@ export function isForwardRefElement<
  */
 export function getFetchPriorityProp(value: React.ImgHTMLAttributes<HTMLElement>['fetchPriority']):
   | {
-      fetchPriority: 'high' | 'low' | 'auto' | undefined;
+      fetchPriority: 'high' | 'low' | 'auto';
     }
   | {
-      fetchpriority: 'high' | 'low' | 'auto' | undefined;
-    } {
+      fetchpriority: 'high' | 'low' | 'auto';
+    }
+  | object {
+  if (value === undefined) {
+    return {};
+  }
+
   if (React.version.startsWith('19')) {
     return { fetchPriority: value };
   }