@vkontakte/vkui 7.2.0 → 7.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/Calendar/Calendar.tsx

@@ -52,8 +52,8 @@ export interface CalendarProps
     Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>,
     CalendarDoneButtonProps,
     CalendarTestsProps {
-  value?: Date;
-  defaultValue?: Date;
+  value?: Date | null;
+  defaultValue?: Date | null;
   /**
    * Запрещает выбор даты в прошлом.
    * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.
@@ -70,7 +70,7 @@ export interface CalendarProps
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;
   size?: 's' | 'm';
-  onChange?: (value?: Date) => void;
+  onChange?: (value?: Date) => void; // TODO [>=8]: поменять тип на `(value?: Date | null) => void`
   /**
    * Позволяет запретить выбор даты.
    */
@@ -155,20 +155,20 @@ export const Calendar = ({
   ...props
 }: CalendarProps): React.ReactNode => {
   const _onChange = React.useCallback(
-    (date: Date | undefined) => {
+    (date: Date | null | undefined) => {
       onChange?.(convertDateFromTimeZone(date, timezone) || undefined);
     },
     [onChange, timezone],
   );
 
-  const [value, updateValue] = useCustomEnsuredControl<Date | undefined>({
+  const [value, updateValue] = useCustomEnsuredControl<Date | null | undefined>({
     value: valueProp,
     defaultValue,
     onChange: _onChange,
   });
 
-  const timeZonedValue: Date | undefined = React.useMemo(
-    () => convertDateToTimeZone(value, timezone) || undefined,
+  const timeZonedValue: Date | null | undefined = React.useMemo(
+    () => convertDateToTimeZone(value, timezone),
     [timezone, value],
   );
 

package/src/components/CalendarDays/CalendarDays.tsx

@@ -29,7 +29,7 @@ export interface CalendarDaysProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,
     Pick<CalendarDayProps, 'renderDayContent'>,
     CalendarDaysTestsProps {
-  value?: Date | Array<Date | null>;
+  value?: Date | Array<Date | null> | null;
   viewDate: Date;
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;

package/src/components/CalendarRange/CalendarRange.tsx

@@ -55,19 +55,19 @@ export interface CalendarRangeProps
     >,
     Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'>,
     CalendarRangeTestsProps {
-  value?: DateRangeType;
-  defaultValue?: DateRangeType;
+  value?: DateRangeType | null;
+  defaultValue?: DateRangeType | null;
   disablePast?: boolean;
   disableFuture?: boolean;
   disablePickers?: boolean;
   changeDayLabel?: string;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  onChange?: (value: DateRangeType | undefined) => void;
+  onChange?: (value: DateRangeType | undefined) => void; // TODO [>=8]: поменять тип на `(value?: DateRangeType | null) => void`
   shouldDisableDate?: (value: Date) => boolean;
   onClose?: () => void;
 }
 
-const getIsDaySelected = (day: Date, value?: DateRangeType) => {
+const getIsDaySelected = (day: Date, value?: DateRangeType | null) => {
   if (!value?.[0] || !value[1]) {
     return false;
   }
@@ -103,10 +103,15 @@ export const CalendarRange = ({
   getRootRef,
   ...props
 }: CalendarRangeProps): React.ReactNode => {
-  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | undefined>({
+  const _onChange = React.useCallback(
+    (newValue: DateRangeType | null | undefined) => onChange?.(newValue || undefined),
+    [onChange],
+  );
+
+  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null | undefined>({
     value: valueProp,
     defaultValue,
-    onChange,
+    onChange: _onChange,
   });
 
   const {

package/src/components/CalendarTime/CalendarTime.tsx

@@ -137,16 +137,24 @@ export const CalendarTime = ({
 
   const onPickerKeyDown = (e: React.KeyboardEvent) => {
     const key = pressedKey(e);
-    if (key === Keys.ENTER || key === Keys.TAB) {
-      const steps = [hoursInputRef, minutesInputRef, doneButtonRef];
-      const currentStepIndex = steps.findIndex((step) => step.current === e.target);
-      const diff = e.key === 'Tab' && e.shiftKey ? -1 : 1;
-      const nextStepIndex = currentStepIndex + diff;
-      if (nextStepIndex < 0 || nextStepIndex >= steps.length) {
-        return;
-      }
+    /* Мы хотим иметь возможность быстро, по Enter перемещаться между
+     * селектами с часами и минутами, также как мы это делаем по нажатию на Tab */
+    if (key !== Keys.ENTER) {
+      return;
+    }
+
+    const steps = [hoursInputRef, minutesInputRef, doneButtonRef].filter((ref) =>
+      Boolean(ref.current),
+    );
+    const currentStepIndex = steps.findIndex((step) => step.current === e.target);
+    const nextStepIndex = currentStepIndex + 1;
+    if (nextStepIndex >= steps.length) {
+      return;
+    }
+    const nextStep = steps[nextStepIndex];
+
+    if (nextStep.current) {
       e.preventDefault();
-      const nextStep = steps[nextStepIndex];
       nextStep.current?.focus();
     }
   };

package/src/components/ChipsInputBase/ChipsInputBase.tsx

@@ -260,6 +260,7 @@ export const ChipsInputBase = <O extends ChipOption>({
                 // чтобы можно было легче найти этот чип в DOM
                 'data-index': index,
                 'data-value': option.value,
+                'data-value-type': typeof option.value,
                 // для a11y
                 'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,
                 'role': 'option',

package/src/components/ChipsInputBase/helpers.ts

@@ -35,8 +35,12 @@ export const getChipOptionIndexByHTMLElement = (el: HTMLElement | null): number
 /**
  * @private
  */
-export const getChipOptionValueByHTMLElement = (el: HTMLElement | null): string | -1 => {
+export const getChipOptionValueByHTMLElement = (el: HTMLElement | null): ChipOptionValue | -1 => {
   const value = el && el.dataset.value;
+  const valueType = el && el.dataset.valueType;
+  if (valueType === 'number') {
+    return Number(value);
+  }
   return typeof value === 'string' ? value : -1;
 };
 

package/src/components/ChipsInputBase/types.ts

@@ -102,7 +102,7 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
    *
    * @default Используется [Chip](#/Chip)
    */
-  renderChip?: RenderChip;
+  renderChip?: RenderChip<O>;
   /**
    * Показывать ли кнопку для очистки значения
    */

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -244,6 +244,7 @@ export const ChipsSelect = <Option extends ChipOption>({
   // Связано с ChipsInputProps
   const rootRef = useExternRef(getRootRef);
   const inputRef = useExternRef(getRef, inputRefHook);
+  const forbidCloseByOutsideClick = React.useRef(false);
 
   // Связано с CustomSelectDropdownProps
   const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<
@@ -419,7 +420,10 @@ export const ChipsSelect = <Option extends ChipOption>({
   }, [setFocusedOptionIndex]);
 
   const handleClickOutside = React.useCallback(() => {
-    setOpened(false);
+    if (!forbidCloseByOutsideClick.current) {
+      setOpened(false);
+    }
+    forbidCloseByOutsideClick.current = false;
   }, [setOpened]);
 
   useGlobalOnClickOutside(
@@ -492,6 +496,7 @@ export const ChipsSelect = <Option extends ChipOption>({
                 if (!event.defaultPrevented) {
                   closeAfterSelect && setOpened(false);
                   addOption(option);
+                  forbidCloseByOutsideClick.current = true;
                   clearInput();
                 }
               },

package/src/components/CustomSelect/CustomSelect.tsx

@@ -761,6 +761,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
             // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.
             onMouseMove: (e) => focusOptionOnMouseMove(e, index),
             id: `${popupAriaId}-${option.value}`,
+            ...option,
           })}
         </React.Fragment>
       );
@@ -961,6 +962,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         {selected?.label}
       </CustomSelectInput>
       <select
+        tabIndex={-1}
         ref={selectElRef}
         name={name}
         onChange={onNativeSelectChange}

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -65,6 +65,7 @@ export const CustomSelectDropdown = ({
         getRootRef={scrollBoxRef}
         className={noMaxHeight ? undefined : styles.inWithMaxHeight}
         overscrollBehavior={overscrollBehavior}
+        tabIndex={-1}
       >
         {fetching ? (
           <div className={styles.fetching}>

package/src/components/DateInput/DateInput.tsx

@@ -50,6 +50,14 @@ export type DateInputPropsTestsProps = {
    * Передает атрибут `data-testid` для поля ввода минут
    */
   minuteFieldTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки показа календаря.
+   */
+  showCalendarButtonTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки очистки даты.
+   */
+  clearButtonTestId?: string;
 };
 
 export interface DateInputProps
@@ -209,6 +217,8 @@ export const DateInput = ({
   yearFieldTestId,
   hourFieldTestId,
   minuteFieldTestId,
+  showCalendarButtonTestId,
+  clearButtonTestId,
   id,
   onApply,
   renderCustomValue,
@@ -221,12 +231,13 @@ export const DateInput = ({
   const hoursRef = React.useRef<HTMLSpanElement>(null);
   const minutesRef = React.useRef<HTMLSpanElement>(null);
 
-  const { value, updateValue, setInternalValue, getLastUpdatedValue } = useDateInputValue({
-    value: valueProp,
-    defaultValue,
-    onChange,
-    timezone,
-  });
+  const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =
+    useDateInputValue({
+      value: valueProp,
+      defaultValue,
+      onChange,
+      timezone,
+    });
 
   const maxElement = enableTime ? 4 : 2;
 
@@ -277,7 +288,7 @@ export const DateInput = ({
     autoFocus,
     disabled,
     elementsConfig,
-    onChange: updateValue,
+    onClear: clearValue,
     onInternalValueChange,
     getInternalValue,
     value,
@@ -299,6 +310,9 @@ export const DateInput = ({
 
   const onCalendarChange = React.useCallback(
     (value?: Date | undefined) => {
+      if (!value) {
+        return;
+      }
       if (enableTime) {
         setInternalValue(value);
         return;
@@ -312,13 +326,16 @@ export const DateInput = ({
   );
 
   const onDoneButtonClick = React.useCallback(() => {
+    if (!value) {
+      return;
+    }
     const newValue = updateValue(value);
     onApply?.(newValue);
     removeFocusFromField();
   }, [onApply, removeFocusFromField, updateValue, value]);
 
   const customValue = React.useMemo(
-    () => !open && renderCustomValue?.(value),
+    () => !open && renderCustomValue?.(value || undefined),
     [open, renderCustomValue, value],
   );
 
@@ -336,11 +353,21 @@ export const DateInput = ({
       getRootRef={handleRootRef}
       after={
         value ? (
-          <IconButton hoverMode="opacity" label={clearFieldLabel} onClick={clear}>
+          <IconButton
+            hoverMode="opacity"
+            label={clearFieldLabel}
+            onClick={clear}
+            data-testid={clearButtonTestId}
+          >
             <Icon16Clear />
           </IconButton>
         ) : (
-          <IconButton hoverMode="opacity" label={showCalendarLabel} onClick={openCalendar}>
+          <IconButton
+            hoverMode="opacity"
+            label={showCalendarLabel}
+            onClick={openCalendar}
+            data-testid={showCalendarButtonTestId}
+          >
             <Icon20CalendarOutline />
           </IconButton>
         )

package/src/components/DateInput/hooks.ts

@@ -2,33 +2,34 @@ import * as React from 'react';
 import { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';
 
 interface UseDateInputValueOptions {
-  value?: Date;
-  defaultValue?: Date;
+  value?: Date | null;
+  defaultValue?: Date | null;
   onChange?: (value?: Date) => void;
   timezone?: string;
 }
 
 export interface UseDateInputValueReturn {
-  value?: Date;
-  updateValue: (v?: Date) => Date | undefined;
-  setInternalValue: (v?: Date) => void;
-  getLastUpdatedValue: () => Date | undefined;
+  value?: Date | null;
+  updateValue: (v: Date) => Date;
+  setInternalValue: (v?: Date | null) => void;
+  getLastUpdatedValue: () => Date | null | undefined;
+  clearValue: () => void;
 }
 
-const _convertDateToTimeZone = (date?: Date, timezone?: string): Date | undefined => {
-  return convertDateToTimeZone(date, timezone) || undefined;
+const _convertDateToTimeZone = (date: Date | null, timezone?: string): Date | null => {
+  return convertDateToTimeZone(date, timezone) || null;
 };
 
-const _convertDateFromTimeZone = (date?: Date, timezone?: string): Date | undefined => {
-  return convertDateFromTimeZone(date, timezone) || undefined;
+const _convertDateFromTimeZone = (date: Date, timezone?: string): Date => {
+  return convertDateFromTimeZone(date, timezone) as Date;
 };
 
 const getStateValue = (
-  defaultStateValue?: Date,
-  value?: Date,
-  defaultValue?: Date,
+  defaultStateValue: Date | null,
+  value?: Date | null,
+  defaultValue?: Date | null,
   timezone?: string,
-): Date | undefined => {
+): Date | null => {
   if (value !== undefined) {
     return _convertDateToTimeZone(value, timezone);
   }
@@ -44,26 +45,27 @@ export const useDateInputValue = ({
   onChange,
   timezone,
 }: UseDateInputValueOptions): UseDateInputValueReturn => {
-  const isControlled = value !== undefined;
-
-  const [internalValue, setInternalValue] = React.useState<Date | undefined>(
-    getStateValue(undefined, value, defaultValue, timezone),
+  const [internalValue, setInternalValue] = React.useState<Date | null | undefined>(
+    getStateValue(null, value, defaultValue, timezone),
   );
-  const lastUpdatedValueRef = React.useRef<Date | undefined>(
-    getStateValue(undefined, value, defaultValue, timezone),
+  const lastUpdatedValueRef = React.useRef<Date | null | undefined>(
+    getStateValue(null, value, defaultValue, timezone),
   );
 
+  const isControlled = value !== undefined;
+
   React.useEffect(() => {
     if (isControlled) {
-      setInternalValue(_convertDateToTimeZone(value, timezone));
-      lastUpdatedValueRef.current = _convertDateToTimeZone(value, timezone);
+      const newInternalValue = _convertDateToTimeZone(value, timezone);
+      setInternalValue(newInternalValue);
+      lastUpdatedValueRef.current = newInternalValue;
     }
   }, [isControlled, timezone, value]);
 
   const getLastUpdatedValue = React.useCallback(() => lastUpdatedValueRef.current, []);
 
   const updateValue = React.useCallback(
-    (newValue?: Date) => {
+    (newValue: Date) => {
       if (!isControlled) {
         setInternalValue(newValue);
         lastUpdatedValueRef.current = newValue;
@@ -75,10 +77,17 @@ export const useDateInputValue = ({
     [isControlled, onChange, timezone],
   );
 
+  const clearValue = () => {
+    setInternalValue(null);
+    lastUpdatedValueRef.current = null;
+    onChange?.(undefined);
+  };
+
   return {
     value: internalValue,
     updateValue,
     setInternalValue,
     getLastUpdatedValue,
+    clearValue,
   };
 };

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -57,6 +57,14 @@ export type DateRangeInputTestsProps = {
    * Передает атрибуты `data-testid` для полей ввода конечной даты
    */
   endDateTestsProps?: DateTestsProps;
+  /**
+   * Передает атрибут `data-testid` для кнопки показа календаря.
+   */
+  showCalendarButtonTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки очистки даты.
+   */
+  clearButtonTestId?: string;
 };
 
 export interface DateRangeInputProps
@@ -183,6 +191,8 @@ export const DateRangeInput = ({
   calendarTestsProps,
   startDateTestsProps,
   endDateTestsProps,
+  clearButtonTestId,
+  showCalendarButtonTestId,
   id,
   ...props
 }: DateRangeInputProps): React.ReactNode => {
@@ -193,10 +203,15 @@ export const DateRangeInput = ({
   const monthsEndRef = React.useRef<HTMLSpanElement>(null);
   const yearsEndRef = React.useRef<HTMLSpanElement>(null);
 
-  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | undefined>({
+  const _onChange = React.useCallback(
+    (newValue: DateRangeType | null | undefined) => onChange?.(newValue || undefined),
+    [onChange],
+  );
+
+  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null | undefined>({
     value: valueProp,
     defaultValue,
-    onChange,
+    onChange: _onChange,
   });
 
   const onInternalValueChange = React.useCallback(
@@ -248,6 +263,8 @@ export const DateRangeInput = ({
     [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],
   );
 
+  const onClear = React.useCallback(() => updateValue(undefined), [updateValue]);
+
   const {
     rootRef,
     calendarRef,
@@ -266,7 +283,7 @@ export const DateRangeInput = ({
     autoFocus,
     disabled,
     elementsConfig,
-    onChange: updateValue,
+    onClear,
     onInternalValueChange,
     getInternalValue,
     value,
@@ -301,12 +318,16 @@ export const DateRangeInput = ({
       getRootRef={handleRootRef}
       after={
         value ? (
-          <IconButton hoverMode="opacity" onClick={clear}>
+          <IconButton hoverMode="opacity" onClick={clear} data-testid={clearButtonTestId}>
             <VisuallyHidden>{clearFieldLabel}</VisuallyHidden>
             <Icon16Clear />
           </IconButton>
         ) : (
-          <IconButton hoverMode="opacity" onClick={openCalendar}>
+          <IconButton
+            hoverMode="opacity"
+            onClick={openCalendar}
+            data-testid={showCalendarButtonTestId}
+          >
             <VisuallyHidden>{showCalendarLabel}</VisuallyHidden>
             <Icon20CalendarOutline />
           </IconButton>

package/src/components/FormItem/FormItem.module.css

@@ -49,6 +49,7 @@
 }
 
 .labelMultiline {
+  text-overflow: unset;
   white-space: normal;
 }
 

package/src/components/ModalCard/ModalCard.tsx

@@ -1,15 +1,10 @@
 'use client';
 
-import { useId } from 'react';
 import { ModalContext } from '../../context/ModalContext';
-import { getNavId } from '../../lib/getNavId';
-import { warnOnce } from '../../lib/warnOnce';
 import { useModalManager } from '../ModalRoot/useModalManager';
 import { ModalCardInternal } from './ModalCardInternal';
 import type { ModalCardProps } from './types';
 
-const warn = warnOnce('ModalCard');
-
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */
@@ -26,15 +21,13 @@ export const ModalCard = ({
   keepMounted = false,
   ...restProps
 }: ModalCardProps): React.ReactNode => {
-  const generatingId = useId();
-  const id = getNavId({ nav, id: idProp }, warn) || generatingId;
-
   const {
     mounted,
     shouldPreserveSnapPoint: excludedProp,
+    id,
     ...resolvedProps
   } = useModalManager({
-    id,
+    id: nav || idProp,
     open,
     keepMounted,
     modalOverlayTestId,

package/src/components/ModalPage/ModalPage.tsx

@@ -1,17 +1,13 @@
 'use client';
 
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
 import { ModalContext } from '../../context/ModalContext';
 import { inRange } from '../../helpers/range';
-import { getNavId } from '../../lib/getNavId';
 import { SNAP_POINT_DETENTS, SNAP_POINT_SAFE_RANGE, type SnapPoint } from '../../lib/sheet';
-import { warnOnce } from '../../lib/warnOnce';
 import { useModalManager } from '../ModalRoot/useModalManager';
 import { ModalPageInternal } from './ModalPageInternal';
 import type { ModalPageProps } from './types';
 
-const warn = warnOnce('ModalPage');
-
 const snapPointCache = new Map<string, Exclude<SnapPoint, 'auto'>>();
 
 /**
@@ -33,11 +29,8 @@ export const ModalPage = ({
   keepMounted = false,
   ...restProps
 }: ModalPageProps) => {
-  const generatingId = useId();
-  const id = getNavId({ nav, id: idProp }, warn) || generatingId;
-
-  const { mounted, shouldPreserveSnapPoint, ...resolvedProps } = useModalManager({
-    id,
+  const { mounted, shouldPreserveSnapPoint, id, ...resolvedProps } = useModalManager({
+    id: nav || idProp,
     open,
     keepMounted,
     modalOverlayTestId,

package/src/components/ModalRoot/types.ts

@@ -151,5 +151,6 @@ export interface ModalRootContextInterface
     ModalRootBaseProps {}
 
 export interface UseModalRootContext extends ModalRootContextBaseInterface {
+  activeModal?: string | null;
   onClose?: VoidFunction;
 }

package/src/components/ModalRoot/useModalManager.tsx

@@ -1,13 +1,16 @@
-import { useContext, useState } from 'react';
+import { useContext, useId, useState } from 'react';
+import { getNavId } from '../../lib/getNavId';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { warnOnce } from '../../lib/warnOnce';
 import type { AnyFunction } from '../../types';
 import { ModalOverlay, type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';
 import { ModalRootContext } from './ModalRootContext';
 import { VisuallyHiddenModalOverlay } from './VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay';
 import type { ModalRootCallbackFunction } from './types';
 
+const warn = warnOnce('useModalManager');
 export interface UseModalManager {
-  id: string;
+  id?: string;
   open: boolean;
   keepMounted: boolean;
   modalOverlayTestId?: string;
@@ -19,6 +22,7 @@ export interface UseModalManager {
 }
 
 export interface UseModalManagerResolvedProps {
+  id: string;
   open: boolean;
   noFocusToDialog?: boolean;
   modalOverlayTestId?: string;
@@ -30,11 +34,11 @@ export interface UseModalManagerResolvedProps {
 }
 
 export type UseModalManagerResult =
-  | { mounted: false; shouldPreserveSnapPoint: boolean }
+  | { mounted: false; shouldPreserveSnapPoint: boolean; id: UseModalManagerResolvedProps['id'] }
   | ({ mounted: true; shouldPreserveSnapPoint: boolean } & UseModalManagerResolvedProps);
 
 export const useModalManager = ({
-  id,
+  id: idProp,
   open,
   keepMounted,
   modalOverlayTestId,
@@ -45,6 +49,8 @@ export const useModalManager = ({
   onClosed,
 }: UseModalManager): UseModalManagerResult => {
   const context = useContext(ModalRootContext);
+  const generatingId = useId();
+  const id = getNavId({ nav: idProp }, context.isInsideModal ? warn : undefined) || generatingId;
   const opened = context.isInsideModal ? context.activeModal === id : open;
   const shouldPreserveSnapPoint = context.isInsideModal ? context.activeModal !== null : false;
 
@@ -60,10 +66,11 @@ export const useModalManager = ({
   );
 
   if (unmounted) {
-    return { mounted: false, shouldPreserveSnapPoint };
+    return { mounted: false, shouldPreserveSnapPoint, id };
   }
 
   return {
+    id,
     mounted: true,
     open: opened,
     shouldPreserveSnapPoint,

package/src/components/ModalRoot/useModalRootContext.ts

@@ -17,5 +17,5 @@ export const useModalRootContext = (): UseModalRootContext => {
     }
   }, [activeModal, onCloseContext]);
 
-  return { isInsideModal, onClose, updateModalHeight, registerModal };
+  return { activeModal, isInsideModal, onClose, updateModalHeight, registerModal };
 };