@vkontakte/vkui 7.0.0-dev-efd91c.4 → 7.0.0

package/src/components/Header/Header.module.css

@@ -174,16 +174,17 @@
  *
  * TODO: Переделать отрицательные отступы https://github.com/VKCOM/VKUI/issues/3508
  */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalGroup--mode-plain):not(:first-of-type) > .host:first-child,
 :global(.vkuiInternalGroup--mode-plain):not(:first-of-type)
   > :global(.vkuiInternalTappable):first-child
   > .host {
   margin-block-start: -16px;
 }
+/* stylelint-enable selector-pseudo-class-disallowed-list */
 
 @media (--sizeX-compact) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none):not(:first-of-type)
     > .host:first-child,
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none):not(:first-of-type)
@@ -191,18 +192,20 @@
     > .host {
     margin-block-start: -16px;
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalGroup--mode-card) > .host:not(.sizeM):first-child,
 :global(.vkuiInternalGroup--mode-card)
   > :global(.vkuiInternalTappable):first-child
   > .host:not(.sizeM) {
   margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
 }
+/* stylelint-enable selector-pseudo-class-disallowed-list */
 
 @media (--sizeX-regular) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
     > .host:not(.sizeM):first-child,
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
@@ -210,6 +213,7 @@
     > .host:not(.sizeM) {
     margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 
 /**

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -60,7 +60,10 @@ export interface HorizontalCellProps
    * Актуально для использования в многострочных списках
    */
   noPadding?: boolean;
-  /* Позволяет поменять тег, используемый для `title` */
+  /**
+   * Позволяет передать типографический компонент, используемый для `title`.
+   * По умолчанию `Caption` для `size=s`, иначе `Subhead`.
+   */
   TitleComponent?: React.ElementType;
 }
 

package/src/components/HorizontalScroll/HorizontalScroll.module.css

@@ -66,6 +66,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalTabs--withGaps) .inWrapper::after,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalTabs--withGaps) .inWrapper::before {
   display: block;
   inline-size: var(--vkui--size_base_padding_horizontal--regular);

package/src/components/IconButton/IconButton.module.css

@@ -43,6 +43,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .sizeYCompact :global(.vkuiIcon--16),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .sizeYCompact :global(.vkuiIcon--16.vkuiIcon--w-8) {
   padding: 14px;
 }
@@ -74,6 +75,7 @@
 
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   .sizeYNone :global(.vkuiIcon--16),
+  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   .sizeYNone :global(.vkuiIcon--16.vkuiIcon--w-8) {
     padding: 14px;
   }
@@ -97,7 +99,9 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem--removable) :global(.vkuiInternalRemovable__content) > .host,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--removable) :global(.vkuiInternalRemovable__content) > .host,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormField__after) .host {
   display: flex;
   align-items: center;
@@ -108,12 +112,13 @@
   border-radius: var(--vkui--size_border_radius--regular);
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormField__after)
   .host
   :global(.vkuiIcon):global(.vkuiIcon):global(.vkuiIcon) {
   padding: 0;
 }
+/* stylelint-enable selector-pseudo-class-disallowed-list */
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormField__after) .sizeYCompact {
@@ -121,13 +126,14 @@
   block-size: var(--vkui--size_field_height--compact);
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem--removable) :global(.vkuiInternalRemovable__content) > .sizeYCompact,
 :global(.vkuiInternalFormLayoutGroup--removable)
   :global(.vkuiInternalRemovable__content)
   > .sizeYCompact {
   block-size: var(--vkui--size_field_height--compact);
 }
+/* stylelint-enable selector-pseudo-class-disallowed-list */
 
 @media (--sizeY-compact) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -136,13 +142,14 @@
     block-size: var(--vkui--size_field_height--compact);
   }
 
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalFormItem--removable) :global(.vkuiInternalRemovable__content) > .sizeYNone,
   :global(.vkuiInternalFormLayoutGroup--removable)
     :global(.vkuiInternalRemovable__content)
     > .sizeYNone {
     block-size: var(--vkui--size_field_height--compact);
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 
 /**

package/src/components/MiniInfoCell/MiniInfoCell.module.css

@@ -75,6 +75,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .modeAdd .middle :global(.vkuiIcon),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .modeMore .middle :global(.vkuiIcon) {
   color: var(--vkui--color_icon_accent_themed);
 }

package/src/components/ModalCard/ModalCardInternal.tsx

@@ -97,7 +97,7 @@ export const ModalCardInternal = ({
     bottomSheetEnabled,
     {
       blocked: keyboardOpened,
-      initialSnapPoint: 'auto',
+      snapPoint: 'auto',
       sheetCSSProperty: '--vkui_internal_ModalCard--translateY',
       backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',
       onDismiss() {

package/src/components/ModalPage/ModalPage.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { useId } from 'react';
+import { useId, 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';
@@ -10,6 +12,8 @@ import type { ModalPageProps } from './types';
 
 const warn = warnOnce('ModalPage');
 
+const snapPointCache = new Map<string, Exclude<SnapPoint, 'auto'>>();
+
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
  */
@@ -25,13 +29,14 @@ export const ModalPage = ({
   onClosed,
   size = 's',
   settlingHeight = 50,
+  dynamicContentHeight,
   keepMounted = false,
   ...restProps
 }: ModalPageProps) => {
   const generatingId = useId();
   const id = getNavId({ nav, id: idProp }, warn) || generatingId;
 
-  const { mounted, ...resolvedProps } = useModalManager({
+  const { mounted, shouldPreserveSnapPoint, ...resolvedProps } = useModalManager({
     id,
     open,
     keepMounted,
@@ -43,6 +48,29 @@ export const ModalPage = ({
     onClosed,
   });
 
+  const snapPoint = useMemo((): SnapPoint => {
+    if (dynamicContentHeight) {
+      return 'auto';
+    }
+
+    if (shouldPreserveSnapPoint) {
+      const snapPointCached = snapPointCache.get(id);
+
+      if (snapPointCached) {
+        return snapPointCached;
+      }
+
+      const nextSnapPoint = transformSettlingHeightToSnapPoint(settlingHeight);
+      snapPointCache.set(id, nextSnapPoint);
+
+      return nextSnapPoint;
+    } else {
+      snapPointCache.delete(id);
+    }
+
+    return transformSettlingHeightToSnapPoint(settlingHeight);
+  }, [id, shouldPreserveSnapPoint, dynamicContentHeight, settlingHeight]);
+
   if (!mounted) {
     return null;
   }
@@ -53,10 +81,36 @@ export const ModalPage = ({
         id={id}
         size={size}
         aria-labelledby={`${id}-label`}
-        settlingHeight={settlingHeight}
+        snapPoint={snapPoint}
+        onSnapPointChange={
+          snapPoint !== 'auto' && shouldPreserveSnapPoint
+            ? (snapPoint) => {
+                const snapPointCached = snapPointCache.get(id);
+
+                if (snapPointCached) {
+                  snapPointCached.initial = snapPoint;
+                  snapPointCache.set(id, snapPointCached);
+                }
+              }
+            : undefined
+        }
         {...resolvedProps}
         {...restProps}
       />
     </ModalContext.Provider>
   );
 };
+
+function transformSettlingHeightToSnapPoint(settlingHeight: number): Exclude<SnapPoint, 'auto'> {
+  const currentSnapPoint = Math.min(
+    Math.max(settlingHeight, SNAP_POINT_SAFE_RANGE.LOWER),
+    SNAP_POINT_DETENTS.LARGE,
+  );
+
+  return {
+    initial: currentSnapPoint,
+    detents: inRange(currentSnapPoint, SNAP_POINT_SAFE_RANGE.LOWER, SNAP_POINT_SAFE_RANGE.HIGHEST)
+      ? [SNAP_POINT_DETENTS.MIN, currentSnapPoint, SNAP_POINT_DETENTS.LARGE]
+      : [SNAP_POINT_DETENTS.MIN, currentSnapPoint],
+  };
+}

package/src/components/ModalPage/ModalPageInternal.tsx

@@ -7,7 +7,12 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';
 import { Keys, pressedKey } from '../../lib/accessibility';
 import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';
-import { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE, useBottomSheet } from '../../lib/sheet';
+import {
+  BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE,
+  type SnapPoint,
+  type SnapPointChange,
+  useBottomSheet,
+} from '../../lib/sheet';
 import type { CSSCustomProperties } from '../../types';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
@@ -33,8 +38,11 @@ const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>>
   exited: styles['documentStateExited'],
 };
 
-export interface ModalPageInternalProps extends Omit<ModalPageProps, 'nav' | 'keepMounted'> {
+export interface ModalPageInternalProps
+  extends Omit<ModalPageProps, 'nav' | 'keepMounted' | 'settlingHeight' | 'dynamicContentHeight'> {
+  snapPoint: SnapPoint;
   ModalOverlay?: ComponentType<ModalOverlayProps>;
+  onSnapPointChange?: SnapPointChange;
 }
 
 /**
@@ -51,8 +59,8 @@ export const ModalPageInternal = ({
   children,
   className,
   style,
-  dynamicContentHeight,
-  settlingHeight,
+  snapPoint,
+  onSnapPointChange,
   getModalContentRef,
   ModalOverlay = ModalOverlayDefault,
   modalOverlayTestId,
@@ -92,9 +100,10 @@ export const ModalPageInternal = ({
   const [{ initialStyle, setSheetEl, setSheetScrollEl, setBackdropEl }, bottomSheetEventHandlers] =
     useBottomSheet(bottomSheetEnabled, {
       blocked: keyboardOpened,
-      initialSnapPoint: dynamicContentHeight ? 'auto' : settlingHeight,
+      snapPoint,
       sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',
       backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',
+      onSnapPointChange,
       onDismiss() {
         onClose('swipe-down');
       },

package/src/components/ModalPageHeader/ModalPageHeader.module.css

@@ -18,6 +18,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .host :global(.vkuiIcon--dismiss_24), /* Note: <Icon24Dismiss /> по документации используется только для iOS  */
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .host :global(.vkuiIcon--cancel_24) {
   color: var(--vkui--color_icon_secondary);
 }

package/src/components/ModalRoot/ModalRoot.tsx

@@ -9,7 +9,6 @@ import { ModalRootContext, ModalRootOverlayContext } from './ModalRootContext';
 import type { ModalRootProps } from './types';
 
 const warn = warnOnce('ModalRoot');
-
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalRoot
  */

package/src/components/ModalRoot/types.ts

@@ -100,7 +100,6 @@ type ModalRootBaseProps = {
   noFocusToDialog?: boolean;
 
   usePortal?: AppRootPortalProps['usePortal'];
-
   /**
    * Будет вызвано при начале открытия активной модалки с её id
    */

package/src/components/ModalRoot/useModalManager.tsx

@@ -30,8 +30,8 @@ export interface UseModalManagerResolvedProps {
 }
 
 export type UseModalManagerResult =
-  | { mounted: false }
-  | ({ mounted: true } & UseModalManagerResolvedProps);
+  | { mounted: false; shouldPreserveSnapPoint: boolean }
+  | ({ mounted: true; shouldPreserveSnapPoint: boolean } & UseModalManagerResolvedProps);
 
 export const useModalManager = ({
   id,
@@ -46,6 +46,7 @@ export const useModalManager = ({
 }: UseModalManager): UseModalManagerResult => {
   const context = useContext(ModalRootContext);
   const opened = context.isInsideModal ? context.activeModal === id : open;
+  const shouldPreserveSnapPoint = context.isInsideModal ? context.activeModal !== null : false;
 
   const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);
 
@@ -59,12 +60,13 @@ export const useModalManager = ({
   );
 
   if (unmounted) {
-    return { mounted: false };
+    return { mounted: false, shouldPreserveSnapPoint };
   }
 
   return {
     mounted: true,
     open: opened,
+    shouldPreserveSnapPoint,
     noFocusToDialog: noFocusToDialog || context.noFocusToDialog,
     modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,
     ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,

package/src/components/PanelHeader/PanelHeader.module.css

@@ -182,20 +182,22 @@
  * CMP:
  * SplitCol
  */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(.vkuiInternalSplitCol--spaced-auto)
   .android.noBefore:not(:global(.vkuiInternalModalPageHeader__in))
   .content {
   padding-inline-start: 0;
 }
+/* stylelint-enable selector-pseudo-class-disallowed-list */
 
 @media (--viewWidth-smallTabletPlus) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalSplitCol--viewWidth-none):global(.vkuiInternalSplitCol--spaced-auto)
     .android.noBefore:not(:global(.vkuiInternalModalPageHeader__in))
     .content {
     padding-inline-start: 0;
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 
 /* stylelint-disable selector-max-universal */
@@ -213,20 +215,22 @@
   padding-inline-start: 16px;
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(.vkuiInternalSplitCol--spaced-auto)
   .android.noAfter:not(:global(.vkuiInternalModalPageHeader__in))
   .content {
   padding-inline-end: 0;
 }
+/* stylelint-enable selector-pseudo-class-disallowed-list */
 
 @media (--viewWidth-smallTabletPlus) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalSplitCol--viewWidth-none):global(.vkuiInternalSplitCol--spaced-auto)
     .android.noAfter:not(:global(.vkuiInternalModalPageHeader__in))
     .content {
     padding-inline-end: 0;
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 
 .android .after:not(:empty),

package/src/components/PanelHeaderButton/PanelHeaderButton.module.css

@@ -62,6 +62,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .android :global(.vkuiIcon--24),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .android :global(.vkuiIcon--28) {
   padding: 10px;
 }
@@ -86,6 +87,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .vkcom.hover > :not(:global(.vkuiInternalCounter)):not(:global(.vkuiInternalBadge)),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .vkcom.active > :not(:global(.vkuiInternalCounter)):not(:global(.vkuiInternalBadge)) {
   opacity: 1;
 }
@@ -135,6 +137,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .host :global(.vkuiIcon--24) ~ :global(.vkuiInternalCounter),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .ios :global(.vkuiInternalCounter) {
   inset-block-start: 2px;
   inset-inline-end: 2px;
@@ -154,6 +157,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .host :global(.vkuiIcon--24) ~ :global(.vkuiInternalBadge),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .ios :global(.vkuiInternalBadge) {
   inset-block-start: 6px;
   inset-inline-end: 6px;

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -18,7 +18,7 @@ const platformClassNames = {
 
 export interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {
   primary?: boolean;
-  // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы
+  // TODO [>=8]: добавить св-во `indicator`, чтобы разграничить кейсы
   label?: React.ReactNode;
 }
 

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -72,10 +72,7 @@ export const PopoutWrapper = ({
         fixed && styles.fixed,
         !noBackground && styles.masked,
       )}
-      style={{
-        zIndex,
-        ...restProps.style,
-      }}
+      baseStyle={{ zIndex }}
     >
       <div className={styles.container}>
         <div className={styles.overlay} onClick={onClick} />

package/src/components/Removable/Removable.module.css

@@ -105,6 +105,7 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem--removable) .content,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--removable) .content {
   flex-wrap: wrap;
   align-items: flex-start;
@@ -116,6 +117,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem--withTop) :global(.vkuiInternalFormItem__removable) ~ .offset,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--removable) :global(.vkuiInternalFormItem--withTop) ~ .offset {
   order: -1;
   display: block;
@@ -123,7 +125,7 @@
   block-size: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem--sizeY-compact):global(.vkuiInternalFormItem--withTop)
   :global(.vkuiInternalFormItem__removable)
   ~ .offset,
@@ -132,9 +134,10 @@
   ~ .offset {
   block-size: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
 }
+/* stylelint-enable selector-pseudo-class-disallowed-list */
 
 @media (--sizeY-compact) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalFormItem--sizeY-none):global(.vkuiInternalFormItem--withTop)
     :global(.vkuiInternalFormItem__removable)
     ~ .offset,
@@ -143,4 +146,5 @@
     ~ .offset {
     block-size: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }

package/src/components/Spinner/Spinner.tsx

@@ -1,14 +1,19 @@
-'use client';
-
 import * as React from 'react';
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { useReducedMotion } from '../../lib/animation';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
+import { SpinnerAnimation } from './SpinnerAnimation';
 import styles from './Spinner.module.css';
 
+const spinnerIconMap = {
+  s: Icon16Spinner,
+  m: Icon24Spinner,
+  l: Icon32Spinner,
+  xl: Icon44Spinner,
+};
+
 export interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
   size?: 's' | 'm' | 'l' | 'xl';
   disableAnimation?: boolean;
@@ -29,50 +34,7 @@ export const Spinner: React.FC<SpinnerProps> = React.memo(
     noColor = false,
     ...restProps
   }: SpinnerProps) => {
-    const isReducedMotion = useReducedMotion();
-    const SpinnerIcon = {
-      s: Icon16Spinner,
-      m: Icon24Spinner,
-      l: Icon32Spinner,
-      xl: Icon44Spinner,
-    }[size];
-    let svgAnimateElement: React.ReactNode = null;
-
-    const [isReadyForSetSVGAnimateElement, setIsReadyForSetSVGAnimateElement] = React.useState(
-      disableAnimation ? true : false,
-    );
-
-    React.useEffect(function waitReactHydrationBeforeSetSVGAnimateElement() {
-      setIsReadyForSetSVGAnimateElement(true);
-    }, []);
-
-    if (isReadyForSetSVGAnimateElement && !disableAnimation) {
-      if (isReducedMotion) {
-        svgAnimateElement = (
-          <animate
-            attributeName="opacity"
-            keyTimes="0; 0.5; 1"
-            values="1; 0.1; 1"
-            begin="0s"
-            dur="2s"
-            repeatCount="indefinite"
-          />
-        );
-      } else {
-        const center = { s: 8, m: 12, l: 16, xl: 22 }[size];
-        svgAnimateElement = (
-          <animateTransform
-            attributeType="XML"
-            attributeName="transform"
-            type="rotate"
-            from={`0 ${center} ${center}`}
-            to={`360 ${center} ${center}`}
-            dur="0.7s"
-            repeatCount="indefinite"
-          />
-        );
-      }
-    }
+    const SpinnerIcon = spinnerIconMap[size];
 
     return (
       <RootComponent
@@ -81,7 +43,7 @@ export const Spinner: React.FC<SpinnerProps> = React.memo(
         {...restProps}
         baseClassName={classNames(styles.host, noColor && styles.noColor)}
       >
-        <SpinnerIcon>{svgAnimateElement}</SpinnerIcon>
+        <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>
         {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}
       </RootComponent>
     );

package/src/components/Spinner/SpinnerAnimation.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useReducedMotion } from '../../lib/animation';
+import { type SpinnerProps } from './Spinner';
+
+interface SpinnerAnimationProps {
+  size: SpinnerProps['size'];
+}
+
+export function SpinnerAnimation({ size = 'm' }: SpinnerAnimationProps) {
+  const isReducedMotion = useReducedMotion();
+
+  if (isReducedMotion === undefined) {
+    return null;
+  }
+
+  if (isReducedMotion) {
+    return (
+      <animate
+        attributeName="opacity"
+        keyTimes="0; 0.5; 1"
+        values="1; 0.1; 1"
+        begin="0s"
+        dur="2s"
+        repeatCount="indefinite"
+      />
+    );
+  }
+
+  const center = { s: 8, m: 12, l: 16, xl: 22 }[size];
+  return (
+    <animateTransform
+      attributeType="XML"
+      attributeName="transform"
+      type="rotate"
+      from={`0 ${center} ${center}`}
+      to={`360 ${center} ${center}`}
+      dur="0.7s"
+      repeatCount="indefinite"
+    />
+  );
+}