@vkontakte/vkui 7.0.0 → 7.1.0

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx

@@ -1,15 +1,19 @@
+'use client';
+
 import * as React from 'react';
 import { hasReactNode } from '@vkontakte/vkjs';
-import type { HasRef, HasRootRef } from '../../../types';
+import type { HasChildren, HasRef, HasRootRef } from '../../../types';
 import { Clickable } from '../../Clickable/Clickable';
 import { Headline } from '../../Typography/Headline/Headline';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import styles from './SegmentedControlOption.module.css';
 
 export interface SegmentedControlOptionProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
-    HasRootRef<HTMLLabelElement>,
-    HasRef<HTMLInputElement> {
+  extends HasRootRef<HTMLLabelElement>,
+    HasRef<HTMLInputElement>,
+    HasChildren {
+  rootProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
   before?: React.ReactNode;
 }
 
@@ -18,23 +22,23 @@ export interface SegmentedControlOptionProps
  */
 export const SegmentedControlOption = ({
   getRef,
-  className,
-  style,
   children,
   getRootRef,
   before,
-  ...restProps
+  rootProps,
+  inputProps,
 }: SegmentedControlOptionProps): React.ReactNode => (
   <Clickable
     Component="label"
     baseClassName={styles.host}
     hoverClassName={styles.hover}
     activeClassName={styles.hover}
-    className={className}
     getRootRef={getRootRef}
-    style={style}
+    {...rootProps}
   >
-    <VisuallyHidden {...restProps} Component="input" getRootRef={getRef} type="radio" />
+    {inputProps && (
+      <VisuallyHidden {...inputProps} Component="input" getRootRef={getRef} type="radio" />
+    )}
     {hasReactNode(before) && <div className={styles.before}>{before}</div>}
     <Headline level="2" weight="2">
       {children}

package/src/components/Select/Select.tsx

@@ -52,6 +52,7 @@ export const Select = <OptionT extends CustomSelectOptionInterface>({
     overscrollBehavior,
     beforeAlign,
     afterAlign,
+    onInputKeyDown,
     ...restProps
   } = props;
 

package/src/components/Skeleton/Skeleton.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { millisecondsInSecond } from 'date-fns/constants';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useStateWithPrev } from '../../hooks/useStateWithPrev';
 import { useDOM } from '../../lib/dom';
 import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
@@ -62,7 +62,7 @@ function useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {
 /**
  * Вычисляет позицию скелетона
  */
-function useSkeletonPosition(rootRef: React.MutableRefObject<HTMLElement | null>) {
+function useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {
   const { document, window } = useDOM();
   const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =
     useStateWithPrev('0');
@@ -81,7 +81,7 @@ function useSkeletonPosition(rootRef: React.MutableRefObject<HTMLElement | null>
   }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);
 
   React.useEffect(updatePosition, [updatePosition]);
-  useGlobalEventListener(window, 'resize', updatePosition);
+  useResizeObserver(window, updatePosition);
 
   return skeletonGradientLeft;
 }

package/src/components/Slider/Slider.tsx

@@ -57,6 +57,14 @@ export interface SliderBaseProps
    * Размер ползунка.
    */
   size?: 's' | 'm' | 'l';
+  /**
+   * Передает атрибут `data-testid` для первого ползунка
+   */
+  startThumbTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для второго ползунка когда `multiple=true`
+   */
+  endThumbTestId?: string;
 }
 
 export interface SliderProps extends SliderBaseProps {
@@ -88,6 +96,8 @@ export const Slider = ({
   getRootRef,
   getAriaLabel,
   getAriaValueText,
+  startThumbTestId,
+  endThumbTestId,
   onChange,
   withTooltip,
   size = 'l',
@@ -257,6 +267,7 @@ export const Slider = ({
           withTooltip={withTooltip}
           inputProps={{
             'data-type': 'start',
+            'data-testid': startThumbTestId,
             'ref': thumbStartInputRef,
             'step': step,
             'min': min,
@@ -278,6 +289,7 @@ export const Slider = ({
             withTooltip={withTooltip}
             inputProps={{
               'data-type': 'end',
+              'data-testid': endThumbTestId,
               'ref': thumbEndInputRef,
               'step': step,
               'min': startValue,

package/src/components/Snackbar/Snackbar.tsx

@@ -112,7 +112,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
   const shiftDataRef = React.useRef<ShiftData | null>(null);
 
   const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);
-  const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const mediaQueries = useMediaQueries();
   const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
     open ? 'enter' : 'exit',

package/src/components/Snackbar/subcomponents/Basic/Basic.module.css

@@ -1,9 +1,11 @@
 .body {
   --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
-    -1 * (
+    -1 *
+      (
         var(--vkui--size_button_small_height--compact) -
           var(--vkui--font_subhead--line_height--compact)
-      ) / 2
+      ) /
+      2
   );
 
   box-sizing: border-box;
@@ -18,20 +20,24 @@
 
 .sizeYRegular {
   --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
-    -1 * (
+    -1 *
+      (
         var(--vkui--size_button_small_height--regular) -
           var(--vkui--font_subhead--line_height--regular)
-      ) / 2
+      ) /
+      2
   );
 }
 
 @media (--sizeY-regular) {
   .sizeYNone {
     --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
-      -1 * (
+      -1 *
+        (
           var(--vkui--size_button_small_height--regular) -
             var(--vkui--font_subhead--line_height--regular)
-        ) / 2
+        ) /
+        2
     );
   }
 }

package/src/components/SplitCol/SplitColContext.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface SplitColContextProps {
-  colRef: React.RefObject<HTMLDivElement> | null;
+  colRef: React.RefObject<HTMLDivElement | null> | null;
   animate: boolean;
 }
 

package/src/components/Tabs/Tabs.tsx

@@ -2,10 +2,8 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
-import { pressedKey } from '../../lib/accessibility';
-import { useDOM } from '../../lib/dom';
+import { useTabsNavigation } from '../../hooks/useTabsNavigation';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Tabs.module.css';
@@ -63,105 +61,10 @@ export const Tabs = ({
   ...restProps
 }: TabsProps): React.ReactNode => {
   const platform = usePlatform();
-  const { document } = useDOM();
-
   const isTabFlow = role === 'tablist';
-
-  const tabsRef = React.useRef<HTMLDivElement>(null);
-
   const withGaps = mode === 'accent' || mode === 'secondary';
 
-  const getTabEls = () => {
-    if (!tabsRef.current) {
-      return [];
-    }
-
-    return Array.from(
-      // eslint-disable-next-line no-restricted-properties
-      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),
-    );
-  };
-
-  const handleDocumentKeydown = (event: KeyboardEvent) => {
-    if (!document || !tabsRef.current || !isTabFlow) {
-      return;
-    }
-
-    const key = pressedKey(event);
-
-    switch (key) {
-      case 'ArrowLeft':
-      case 'ArrowRight':
-      case 'End':
-      case 'Home': {
-        const tabEls = getTabEls();
-        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);
-        if (currentFocusedElIndex === -1) {
-          return;
-        }
-
-        let nextIndex = 0;
-        if (key === 'Home') {
-          nextIndex = 0;
-        } else if (key === 'End') {
-          nextIndex = tabEls.length - 1;
-        } else {
-          const offset = key === 'ArrowRight' ? 1 : -1;
-          nextIndex = currentFocusedElIndex + offset;
-        }
-
-        const nextTabEl = tabEls[nextIndex];
-
-        if (nextTabEl) {
-          event.preventDefault();
-          nextTabEl.focus();
-        }
-
-        break;
-      }
-      /*
-       В JAWS и NVDA стрелка вниз активирует контент.
-       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.
-       https://inclusive-components.design/tabbed-interfaces/
-      */
-      case 'ArrowDown': {
-        const tabEls = getTabEls();
-        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);
-
-        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {
-          return;
-        }
-
-        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');
-        if (!relatedContentElId) {
-          return;
-        }
-
-        // eslint-disable-next-line no-restricted-properties
-        const relatedContentEl = document.getElementById(relatedContentElId);
-        if (!relatedContentEl) {
-          return;
-        }
-
-        event.preventDefault();
-        relatedContentEl.focus();
-
-        break;
-      }
-      case 'Space':
-      case 'Enter': {
-        const tabEls = getTabEls();
-        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);
-        if (currentFocusedEl) {
-          currentFocusedEl.click();
-        }
-      }
-    }
-  };
-
-  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {
-    capture: true,
-  });
+  const { tabsRef } = useTabsNavigation(isTabFlow);
 
   return (
     <RootComponent

package/src/components/Textarea/Textarea.tsx

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { callMultiple } from '../../lib/callMultiple';
 import { useDOM } from '../../lib/dom';
 import type { HasAlign, HasRef, HasRootRef } from '../../types';
@@ -61,7 +61,7 @@ export const Textarea = ({
   const elementRef = useExternRef(getRef, refResizeTextarea);
 
   React.useEffect(resize, [resize, sizeY, platform, value]);
-  useGlobalEventListener(window, 'resize', resize);
+  useResizeObserver(window, resize);
 
   return (
     <FormField

package/src/components/Textarea/useResizeTextarea.ts

@@ -3,9 +3,9 @@ import * as React from 'react';
 export function useResizeTextarea(
   onResize: ((el: HTMLTextAreaElement) => void) | undefined,
   grow: boolean,
-): readonly [React.RefObject<HTMLTextAreaElement>, () => void] {
-  const elementRef = React.useRef<HTMLTextAreaElement>(null);
-  const currentScrollHeight = React.useRef<number>();
+): readonly [React.RefObject<HTMLTextAreaElement | null>, () => void] {
+  const elementRef = React.useRef<HTMLTextAreaElement | null>(null);
+  const currentScrollHeight = React.useRef<number>(undefined);
 
   const resizeElement = React.useCallback(
     (el: HTMLTextAreaElement) => {

package/src/components/Tooltip/Tooltip.tsx

@@ -34,6 +34,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'usePortal'
   | 'onPlacementChange'
   | 'disableFlipMiddleware'
+  | 'strategy'
 >;
 
 type AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps' | 'onCloseIconClick'>;
@@ -56,7 +57,7 @@ export type TooltipOnShownChange = OnShownChange;
 export interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {
   /**
    * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте
-   * совместно с `onShawnChange`.
+   * совместно с `onShownChange`.
    *
    * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.
    */
@@ -104,6 +105,7 @@ export const Tooltip = ({
   shown: shownProp,
   onShownChange,
   hoverDelay = 150,
+  strategy,
 
   // инверсированные св-ва для useFloatingWithInteractions
   enableInteractive = false,
@@ -165,6 +167,7 @@ export const Tooltip = ({
     closeAfterClick: !disableCloseAfterClick,
     disableInteractive: !enableInteractive,
     middlewares,
+    strategy,
   });
   const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);
 

package/src/components/TooltipBase/TooltipBase.module.css

@@ -25,6 +25,11 @@
   background: none;
 }
 
+.title,
+.description {
+  word-break: break-word;
+}
+
 .arrow {
   color: var(--vkui--color_background_contrast_themed);
 }

package/src/components/TooltipBase/TooltipBase.tsx

@@ -110,8 +110,14 @@ export const TooltipBase = ({
       )}
       <div className={styles.content} style={maxWidth !== null ? { maxWidth } : undefined}>
         <div>
-          {hasReactNode(title) && <Subhead weight="2">{title}</Subhead>}
-          {hasReactNode(description) && <Subhead>{description}</Subhead>}
+          {hasReactNode(title) && (
+            <Subhead className={styles.title} weight="2">
+              {title}
+            </Subhead>
+          )}
+          {hasReactNode(description) && (
+            <Subhead className={styles.description}>{description}</Subhead>
+          )}
         </div>
         {typeof onCloseIconClick === 'function' && (
           <Tappable

package/src/components/UsersStack/UsersStack.module.css

@@ -2,6 +2,20 @@
   display: flex;
   align-items: center;
   color: var(--vkui--color_text_secondary);
+
+  --vkui_internal--UsersStack_item_size: 16px;
+}
+
+.sizeS {
+  --vkui_internal--UsersStack_item_size: 16px;
+}
+
+.sizeM {
+  --vkui_internal--UsersStack_item_size: 24px;
+}
+
+.sizeL {
+  --vkui_internal--UsersStack_item_size: 32px;
 }
 
 .avatarsPositionInlineEnd {
@@ -21,28 +35,24 @@
   fill: var(--vkui--color_image_placeholder_alpha);
 }
 
-.photoOthers {
+.item {
+  block-size: var(--vkui_internal--UsersStack_item_size);
+  min-inline-size: var(--vkui_internal--UsersStack_item_size);
+}
+
+.photo {
+  max-inline-size: var(--vkui_internal--UsersStack_item_size);
+}
+
+.counter {
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--vkui--spacing_size_xs);
   color: var(--vkui--color_text_contrast_themed);
   background: var(--vkui--color_icon_secondary);
-  border-radius: 50%;
-}
-
-.sizeS .photo {
-  inline-size: 16px;
-  block-size: 16px;
-}
-
-.sizeM .photo {
-  inline-size: 24px;
-  block-size: 24px;
-}
-
-.sizeL .photo {
-  inline-size: 32px;
-  block-size: 32px;
+  border-radius: calc(var(--vkui_internal--UsersStack_item_size) / 2);
 }
 
 .photoWrapper {

package/src/components/UsersStack/UsersStack.tsx

@@ -1,5 +1,9 @@
+'use client';
+
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { useDirection } from '../../hooks/useDirection';
+import { useExternRef } from '../../hooks/useExternRef';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Caption } from '../Typography/Caption/Caption';
@@ -71,6 +75,13 @@ function PathElement({ photoSize, direction, ...props }: PathElementProps) {
 
     case 'right':
       switch (photoSize) {
+        case 16:
+          return (
+            <path
+              d="M14,13.285A8 8 0 0 1 8 16A8 8 0 0 1 8 0A8 8 0 0 1 14 2.715A8 8 0 0 0 14,13.285"
+              {...props}
+            />
+          );
         case 24:
           return (
             <path
@@ -132,15 +143,19 @@ export const UsersStack = ({
   size = 'm',
   children,
   avatarsPosition = 'inline-start',
+  getRootRef,
   ...restProps
 }: UsersStackProps): React.ReactNode => {
   const cmpId = React.useId();
+  const [directionRef, textDirection = 'ltr'] = useDirection();
+  const rootRef = useExternRef(getRootRef, directionRef);
 
   const canShowOthers = count > 0 && count < 100 && size !== 's';
   const CounterTypography = size === 'l' ? Footnote : Caption;
 
   const photoSize = photoSizes[size];
-  const directionClip = canShowOthers ? 'right' : 'left';
+  const directionClip =
+    textDirection === 'ltr' ? (canShowOthers ? 'right' : 'left') : canShowOthers ? 'left' : 'right';
 
   const photosElements = photos.slice(0, visibleCount).map((photo, i) => {
     const direction = i === 0 && !canShowOthers ? 'circle' : directionClip;
@@ -153,7 +168,12 @@ export const UsersStack = ({
     const photoSrc = isPhotoType ? photo.src : photo;
 
     let photoElement = (
-      <svg xmlns="http://www.w3.org/2000/svg" className={styles.photo} aria-hidden display="block">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={classNames(styles.photo, styles.item)}
+        aria-hidden
+        display="block"
+      >
         <defs>
           <PathElement id={id} direction={direction} photoSize={photoSize} />
         </defs>
@@ -183,7 +203,7 @@ export const UsersStack = ({
 
   const othersElement = canShowOthers ? (
     <div className={styles.photoWrapper}>
-      <CounterTypography caps weight="1" className={classNames(styles.photo, styles.photoOthers)}>
+      <CounterTypography caps weight="1" className={classNames(styles.item, styles.counter)}>
         +{count}
       </CounterTypography>
     </div>
@@ -192,6 +212,7 @@ export const UsersStack = ({
   return (
     <RootComponent
       {...restProps}
+      getRootRef={rootRef}
       baseClassName={classNames(
         styles.host,
         stylesSize[size],

package/src/components/View/View.tsx

@@ -116,8 +116,8 @@ export const View = ({
   const prevSwipeBackPrevPanel = usePrevious(swipeBackPrevPanel);
   const prevOnTransition = usePrevious(onTransition);
 
-  const panels = (React.Children.toArray(children) as React.ReactElement[]).filter(
-    (panel: React.ReactElement) => {
+  const panels = (React.Children.toArray(children) as Array<React.ReactElement<NavIdProps>>).filter(
+    (panel) => {
       const panelId = getNavId(panel.props, warn);
 
       return (
@@ -325,7 +325,9 @@ export const View = ({
       !prevSwipingBack &&
       !prevBrowserSwipe
     ) {
-      const firstLayerId = (React.Children.toArray(children) as React.ReactElement[])
+      const firstLayerId = (
+        React.Children.toArray(children) as Array<React.ReactElement<NavIdProps>>
+      )
         .map((panel) => getNavId(panel.props, warn))
         .find((id) => id === prevActivePanel || id === activePanelProp);
 
@@ -459,7 +461,7 @@ export const View = ({
         onEnd={iOSSwipeBackSimulationEnabled ? handleTouchEndForIOSSwipeBackSimulation : undefined}
       >
         <div className={styles.panels}>
-          {panels.map((panel: React.ReactElement) => {
+          {panels.map((panel) => {
             const panelId = getNavId(panel.props, warn);
 
             const isPanelActive = panelId === activePanel;
@@ -496,7 +498,9 @@ export const View = ({
                 )}
                 onTransitionEnd={isSwipeBackTarget ? handleSwipeBackTargetTransitionEnd : undefined}
                 onAnimationEnd={isAnimatedTarget ? handleAnimatedTargetAnimationEnd : undefined}
-                ref={(el) => panelId !== undefined && (panelNodes.current[panelId] = el)}
+                ref={(el) => {
+                  panelId !== undefined && (panelNodes.current[panelId] = el);
+                }}
                 style={calcPanelSwipeStyles(isSwipeBackPrev, isSwipeBackNext)}
                 key={panelId}
               >

package/src/components/View/ViewInfinite.tsx

@@ -139,7 +139,7 @@ class ViewInfiniteComponent extends React.Component<
   }
 
   get panels() {
-    return React.Children.toArray(this.props.children) as React.ReactElement[];
+    return React.Children.toArray(this.props.children) as Array<React.ReactElement<NavIdProps>>;
   }
 
   panelNodes: { [id: string]: HTMLDivElement | null } = {};
@@ -624,7 +624,7 @@ class ViewInfiniteComponent extends React.Component<
           }
         >
           <div className={styles.panels}>
-            {panels.map((panel: React.ReactElement) => {
+            {panels.map((panel) => {
               const panelId = getNavId(panel.props, warn);
               const isPrev = panelId === prevPanel || panelId === swipeBackPrevPanel;
               const compensateScroll =
@@ -646,7 +646,9 @@ class ViewInfiniteComponent extends React.Component<
                     swipeBackResult === 'fail' && styles.panelSwipeBackFailed,
                   )}
                   onAnimationEnd={isTransitionTarget ? this.transitionEndHandler : undefined}
-                  ref={(el) => panelId !== undefined && (this.panelNodes[panelId] = el)}
+                  ref={(el) => {
+                    panelId !== undefined && (this.panelNodes[panelId] = el);
+                  }}
                   style={this.calcPanelSwipeStyles(panelId)}
                   key={panelId}
                 >

package/src/context/CalendarDirectionContext.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+import { type Direction } from '../hooks/useDirection';
+
+export interface CalendarDirectionContextProps {
+  direction: Direction;
+}
+
+export const CalendarDirectionContext = createContext<CalendarDirectionContextProps>({
+  direction: 'ltr',
+});
+
+export const useCalendarDirectionContext = () => useContext(CalendarDirectionContext);

package/src/helpers/getMergedSameEventsByProps.ts

@@ -16,7 +16,7 @@ const isFunctionExistInProps = <Props extends Record<PropertyKey, any>>(
  * @private
  */
 export const getMergedSameEventsByProps = <
-  T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
+  T extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>,
   MainProps extends React.ComponentProps<T>,
   OnlyFnPropsByMain extends PickOnlyFunctionProps<MainProps>,
 >(

package/src/hooks/useDateInput.ts

@@ -6,7 +6,7 @@ import { useGlobalEventListener } from './useGlobalEventListener';
 
 export interface UseDateInputDependencies<T, D> {
   maxElement: number;
-  refs: Array<React.RefObject<T>>;
+  refs: Array<React.RefObject<T | null>>;
   autoFocus?: boolean;
   disabled?: boolean;
   value?: D;
@@ -33,8 +33,8 @@ export function useDateInput<T extends HTMLElement, D>({
   value,
   onCalendarOpenChanged,
 }: UseDateInputDependencies<T, D>): {
-  rootRef: React.RefObject<HTMLDivElement>;
-  calendarRef: React.RefObject<HTMLDivElement>;
+  rootRef: React.RefObject<HTMLDivElement | null>;
+  calendarRef: React.RefObject<HTMLDivElement | null>;
   open: boolean;
   openCalendar: () => void;
   closeCalendar: () => void;
@@ -48,8 +48,8 @@ export function useDateInput<T extends HTMLElement, D>({
 } {
   const { document } = useDOM();
   const { value: open, setTrue: openCalendar, setFalse: closeCalendar } = useBooleanState(false);
-  const rootRef = React.useRef<HTMLDivElement>(null);
-  const calendarRef = React.useRef<HTMLDivElement>(null);
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const calendarRef = React.useRef<HTMLDivElement | null>(null);
   const [internalValue, setInternalValue] = React.useState<string[]>([]);
   const [focusedElement, setFocusedElement] = React.useState<number | null>(null);
   const { window } = useDOM();