@vkontakte/vkui 8.1.2 → 8.2.0

package/src/components/NavTransitionContext/NavTransitionContext.tsx

@@ -5,22 +5,26 @@ import * as React from 'react';
 
 export interface TransitionContextProps {
   entering: boolean;
+  animating: boolean;
 }
 const TransitionContext = React.createContext<TransitionContextProps>({
   entering: false,
+  animating: false,
 });
 export const useNavTransition = (): TransitionContextProps => React.useContext(TransitionContext);
 
 export const NavTransitionProvider = ({
   children,
   entering,
+  animating,
 }: React.PropsWithChildren<TransitionContextProps>): React.ReactNode => {
   const parentContext = useNavTransition();
   const contextValue = React.useMemo(
     () => ({
       entering: parentContext.entering || entering,
+      animating: parentContext.animating || animating,
     }),
-    [entering, parentContext.entering],
+    [entering, animating, parentContext.entering, parentContext.animating],
   );
 
   return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -15,7 +15,6 @@ import {
   useFloatingMiddlewaresBootstrap,
   usePlacementChangeCallback,
 } from '../../lib/floating';
-import { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';
@@ -118,7 +117,7 @@ export const OnboardingTooltip = ({
 }: OnboardingTooltipProps): React.ReactNode => {
   const generatedId = React.useId();
   const tooltipId = idProp || generatedId;
-  const { entering } = useNavTransition();
+  const { entering, animating } = useNavTransition();
 
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
   const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);
@@ -138,8 +137,6 @@ export const OnboardingTooltip = ({
     overflowPadding,
   });
 
-  const isLock = React.useContext(LockFloatingPositionContext);
-
   const {
     x: floatingDataX,
     y: floatingDataY,
@@ -151,7 +148,7 @@ export const OnboardingTooltip = ({
     strategy: positionStrategy,
     ...(strictPlacement !== undefined && { placement: strictPlacement }),
     middleware: middlewares,
-    ...(!isLock && {
+    ...(!animating && {
       whileElementsMounted: (...args) =>
         autoUpdateFloatingElement(...args, { elementResize: true }),
     }),
@@ -234,7 +231,7 @@ export const OnboardingTooltip = ({
         refs.setReference(referenceEl);
       }
     },
-    [childRef],
+    [childRef, refs],
   );
 
   if (process.env.NODE_ENV === 'development') {

package/src/components/PanelHeader/PanelHeader.tsx

@@ -81,7 +81,7 @@ export interface PanelHeaderProps
    */
   transparent?: boolean | undefined;
   /**
-   * @deprecated Since 7.4.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.4.0. Будет удалено в **VKUI v9**.
    */
   shadow?: boolean | undefined; // TODO [>=9]: удалить неиспользуемое свойство свойство
   /**

package/src/components/Popper/Popper.tsx

@@ -12,7 +12,6 @@ import {
   usePlacementChangeCallback,
   type VirtualElement,
 } from '../../lib/floating';
-import { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';
 import { useReferenceHiddenChangeCallback } from '../../lib/floating/useReferenceHiddenChangeCallback';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HTMLAttributesWithRootRef } from '../../types';
@@ -26,6 +25,7 @@ import {
   FloatingArrow,
   type FloatingArrowProps as FloatingArrowPropsPrivate,
 } from '../FloatingArrow/FloatingArrow';
+import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Popper.module.css';
 
@@ -138,6 +138,7 @@ export const Popper = ({
   style,
   ...restProps
 }: PopperProps): React.ReactNode => {
+  const { entering, animating } = useNavTransition();
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
 
   const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({
@@ -157,8 +158,6 @@ export const Popper = ({
     overflowPadding,
   });
 
-  const isLock = React.useContext(LockFloatingPositionContext);
-
   const {
     x: floatingDataX,
     y: floatingDataY,
@@ -170,7 +169,7 @@ export const Popper = ({
     ...(strictPlacement !== undefined && { placement: strictPlacement }),
     ...(strategyProp !== undefined && { strategy: strategyProp }),
     middleware: middlewares,
-    ...(isLock
+    ...(animating
       ? {}
       : {
           whileElementsMounted: (...args) => {
@@ -193,7 +192,7 @@ export const Popper = ({
 
   useIsomorphicLayoutEffect(() => {
     refs.setReference('current' in targetRef ? targetRef.current : targetRef);
-  }, [refs.setReference, targetRef]);
+  }, [refs, targetRef]);
 
   const dropdownStyle =
     typeof zIndex !== 'undefined'
@@ -229,5 +228,9 @@ export const Popper = ({
     </RootComponent>
   );
 
+  if (entering) {
+    return null;
+  }
+
   return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;
 };

package/src/components/PullToRefresh/PullToRefresh.module.css

@@ -10,7 +10,7 @@
 }
 
 .controls {
-  inline-size: 100%;
+  z-index: var(--vkui_internal--z_index_fixed_layout);
   pointer-events: none;
 }
 

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -9,7 +9,8 @@ import { type DOMProps, initializeBrowserGesturePreventionEffect, useDOM } from
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { AnyFunction, HasChildren } from '../../types';
 import { type ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';
-import { FixedLayout } from '../FixedLayout/FixedLayout';
+import { Box } from '../Box/Box';
+import { ParentWidthWrapper } from '../FixedLayout/ParentWidthWrapper';
 import { type CustomTouchEvent, Touch, type TouchProps } from '../Touch/Touch';
 import TouchRootContext from '../Touch/TouchContext';
 import { PullToRefreshSpinner } from './PullToRefreshSpinner';
@@ -153,6 +154,7 @@ export const PullToRefresh = ({
     refreshing,
     canRefresh,
     runRefreshing,
+    resetRefreshingState,
   ]);
 
   useIsomorphicLayoutEffect(
@@ -244,7 +246,12 @@ export const PullToRefresh = ({
           className,
         )}
       >
-        <FixedLayout className={styles.controls} useParentWidth>
+        <Box
+          Component={ParentWidthWrapper}
+          className={styles.controls}
+          inlineSize="100%"
+          position="fixed"
+        >
           <PullToRefreshSpinner
             style={{
               transform: spinnerTransform,
@@ -253,7 +260,7 @@ export const PullToRefresh = ({
             on={refreshing}
             progress={refreshing ? undefined : spinnerProgress}
           />
-        </FixedLayout>
+        </Box>
 
         <div
           className={styles.content}

package/src/components/Root/Root.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { classNames, noop } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { useDOM } from '../../lib/dom';
-import { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
@@ -49,7 +49,7 @@ const warn = warnOnce('Root');
 export const Root = ({
   children,
   activeView: _activeView,
-  onTransition,
+  onTransition: onTransitionProp,
   nav,
   ...restProps
 }: RootProps): React.ReactNode => {
@@ -59,6 +59,8 @@ export const Root = ({
   const [scrolls] = React.useState(() => new Map<string, number>());
   const [viewNodes] = React.useState(() => new Map<string, HTMLElement | null>());
 
+  const onTransition = useStableCallback(onTransitionProp || noop);
+
   const { transitionMotionEnabled = true } = useConfigProvider();
   const { animate } = React.useContext(SplitColContext);
   const disableAnimation = !transitionMotionEnabled || !animate;
@@ -69,7 +71,7 @@ export const Root = ({
     activeView: _activeView,
     transition: false,
   });
-  const transitionTo = (panel: string) => {
+  const transitionTo = useStableCallback((panel: string) => {
     if (panel !== activeView) {
       const viewIds = views.map((view) => getNavId(view.props, warn));
       const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);
@@ -81,7 +83,7 @@ export const Root = ({
         isBack,
       });
     }
-  };
+  });
   const finishTransition = React.useCallback(
     () => _setState({ activeView, prevView, isBack, transition: false }),
     [activeView, isBack, prevView],
@@ -89,10 +91,10 @@ export const Root = ({
 
   useIsomorphicLayoutEffect(() => {
     (document!.activeElement as HTMLElement).blur();
-  }, [activeView]);
+  }, [document, activeView]);
 
   // Нужен переход
-  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);
+  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [transitionTo, _activeView]);
   useIsomorphicLayoutEffect(() => {
     if (!transition && prevView) {
       // Закончился переход
@@ -104,7 +106,7 @@ export const Root = ({
           to: activeView,
         });
     }
-  }, [transition, prevView]);
+  }, [transition, prevView, activeView, isBack, onTransition, scroll, scrolls]);
 
   React.useEffect(
     function onAnimationEndFallback() {
@@ -124,56 +126,55 @@ export const Root = ({
   };
 
   return (
-    <LockFloatingPositionContext.Provider value={transition}>
-      <RootComponent
-        {...restProps}
-        baseClassName={classNames(
-          styles.host,
-          platform === 'ios' && styles.ios,
-          transition && styles.transition,
-        )}
-      >
-        {views.map((view) => {
-          const viewId = getNavId(view.props, warn);
-          if (viewId !== activeView && !(transition && viewId === prevView)) {
-            return null;
-          }
-          const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
-          const compensateScroll =
-            transition && (viewId === prevView || (isBack && viewId === activeView));
-          return (
-            <div
-              key={viewId}
-              ref={(e) => {
-                viewId && viewNodes.set(viewId, e);
-              }}
-              onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
-              className={classNames(
-                styles.view,
-                transition && viewId === prevView && isBack && styles.viewHideBack,
-                transition && viewId === prevView && !isBack && styles.viewHideForward,
-                transition && viewId === activeView && isBack && styles.viewShowBack,
-                transition && viewId === activeView && !isBack && styles.viewShowForward,
-              )}
-            >
-              <NavTransitionDirectionProvider isBack={isBack}>
-                <NavTransitionProvider entering={transition && viewId === activeView}>
-                  <div
-                    className={styles.scrollCompensation}
-                    style={{
-                      marginTop: compensateScroll
-                        ? viewId && -(scrolls.get(viewId) ?? 0)
-                        : undefined,
-                    }}
-                  >
-                    {view}
-                  </div>
-                </NavTransitionProvider>
-              </NavTransitionDirectionProvider>
-            </div>
-          );
-        })}
-      </RootComponent>
-    </LockFloatingPositionContext.Provider>
+    <RootComponent
+      {...restProps}
+      baseClassName={classNames(
+        styles.host,
+        platform === 'ios' && styles.ios,
+        transition && styles.transition,
+      )}
+    >
+      {views.map((view) => {
+        const viewId = getNavId(view.props, warn);
+        if (viewId !== activeView && !(transition && viewId === prevView)) {
+          return null;
+        }
+        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
+        const compensateScroll =
+          transition && (viewId === prevView || (isBack && viewId === activeView));
+        return (
+          <div
+            key={viewId}
+            ref={(e) => {
+              viewId && viewNodes.set(viewId, e);
+            }}
+            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
+            className={classNames(
+              styles.view,
+              transition && viewId === prevView && isBack && styles.viewHideBack,
+              transition && viewId === prevView && !isBack && styles.viewHideForward,
+              transition && viewId === activeView && isBack && styles.viewShowBack,
+              transition && viewId === activeView && !isBack && styles.viewShowForward,
+            )}
+          >
+            <NavTransitionDirectionProvider isBack={isBack}>
+              <NavTransitionProvider
+                entering={transition && viewId === activeView}
+                animating={transition}
+              >
+                <div
+                  className={styles.scrollCompensation}
+                  style={{
+                    marginTop: compensateScroll ? viewId && -(scrolls.get(viewId) ?? 0) : undefined,
+                  }}
+                >
+                  {view}
+                </div>
+              </NavTransitionProvider>
+            </NavTransitionDirectionProvider>
+          </div>
+        );
+      })}
+    </RootComponent>
   );
 };

package/src/components/SimpleGrid/SimpleGrid.tsx

@@ -6,18 +6,27 @@ import {
   resolveLayoutProps,
   rowGapClassNames,
 } from '../../lib/layouts';
-import type { LayoutProps } from '../../lib/layouts/types';
+import type { LayoutProps, MarginProp } from '../../lib/layouts/types';
 import type { CSSCustomProperties } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import type { RootComponentProps } from '../RootComponent/RootComponent';
 import styles from './SimpleGrid.module.css';
 
-const marginClassNames = {
+type SpecificMargin = 'auto' | 'auto-inline' | 'auto-block' | 'none';
+
+const marginClassNames: Record<SpecificMargin, string | undefined> = {
+  'none': undefined,
   'auto': styles.marginAuto,
   'auto-inline': styles.marginAutoInline,
   'auto-block': styles.marginAutoBlock,
 };
 
+function isSpecialMargin(margin: SimpleGridProps['margin']): margin is SpecificMargin {
+  return (
+    margin === 'auto' || margin === 'auto-inline' || margin === 'auto-block' || margin === 'none'
+  );
+}
+
 const alignClassNames = {
   start: styles.alignStart,
   end: styles.alignEnd,
@@ -31,7 +40,9 @@ const displayClassNames = {
   'inline-grid': styles.displayInlineGrid,
 };
 
-export interface SimpleGridProps extends RootComponentProps<HTMLElement>, LayoutProps {
+export interface SimpleGridProps
+  extends RootComponentProps<HTMLElement>,
+    Omit<LayoutProps, 'margin'> {
   /**
    * Количество колонок.
    */
@@ -43,13 +54,14 @@ export interface SimpleGridProps extends RootComponentProps<HTMLElement>, Layout
    */
   gap?: GapsProp | undefined;
   /**
-   * Управляет отступами вокруг контейнера
-   * Значение `none` позволяет отключить отступы
-   * Значение `auto` позволяет задать платформенные отступы
-   * Значение `auto-inline` позволяет задать платформенные inline-отступы
-   * Значение `auto-block` позволяет задать платформенные block-отступы.
+   * Внешние отступы контейнера.
+   * Дополнительно поддерживаются специальные значения:
+   * `none` — отключает дополнительные отступы;
+   * `auto` — включает платформенные отступы вокруг контейнера;
+   * `auto-inline` — включает платформенные inline-отступы;
+   * `auto-block` — включает платформенные block-отступы.
    */
-  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | undefined;
+  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | MarginProp | undefined;
   /**
    * Вместо задания количества колонок, можно указать минимальную ширину элементов.
    */
@@ -76,7 +88,9 @@ export const SimpleGrid = ({
   display = 'grid',
   ...restProps
 }: SimpleGridProps) => {
-  const resolvedProps = resolveLayoutProps(restProps);
+  const resolvedProps = resolveLayoutProps(
+    isSpecialMargin(margin) ? restProps : { ...restProps, margin },
+  );
   const style: CSSCustomProperties = {};
   const [rowGap, columnGap] = calculateGap(gap);
   if (typeof rowGap === 'number') {
@@ -94,7 +108,7 @@ export const SimpleGrid = ({
     <RootComponent
       baseClassName={classNames(
         styles.host,
-        margin !== 'none' && marginClassNames[margin],
+        isSpecialMargin(margin) && marginClassNames[margin],
         alignClassNames[align],
         minColWidth && styles.withMinWidth,
         typeof columnGap === 'string' && columnGapClassNames[columnGap],

package/src/components/Skeleton/Skeleton.tsx

@@ -68,22 +68,24 @@ function useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {
  * Вычисляет позицию скелетона.
  */
 function useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {
-  const { document, window } = useDOM();
+  const { window } = useDOM();
   const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =
     useStateWithPrev('0');
 
   const updatePosition = React.useCallback(() => {
     const el = rootRef.current;
-    if (!el || !document) {
+    if (!el) {
       return;
     }
 
-    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);
+    const value = -(
+      el.getBoundingClientRect().left - el.ownerDocument.body.getBoundingClientRect().left
+    );
     const gradientValue = value === 0 ? '0' : `${value}px`;
     if (prevSkeletonGradientLeft !== gradientValue) {
       setSkeletonGradientLeft(gradientValue);
     }
-  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);
+  }, [prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);
 
   React.useEffect(updatePosition, [updatePosition]);
   useResizeObserver(window, updatePosition);

package/src/components/Snackbar/Snackbar.tsx

@@ -2,7 +2,7 @@
 
 import { useContext } from 'react';
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { classNames, noop } from '@vkontakte/vkjs';
 import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusWithin } from '../../hooks/useFocusWithin';
@@ -11,6 +11,7 @@ import { useMediaQueries } from '../../hooks/useMediaQueries';
 import { useMergeProps } from '../../hooks/useMergeProps';
 import { usePlatform } from '../../hooks/usePlatform';
 import { SnackbarsContainerContext } from '../../hooks/useSnackbarManager/components/SnackbarsContainerContext';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { callMultiple } from '../../lib/callMultiple';
 import { getRelativeBoundingClientRect } from '../../lib/dom';
@@ -127,7 +128,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
   duration = 4000,
   onActionClick: onActionClickProp,
   onClosed,
-  onClose,
+  onClose: onCloseProp,
   mode = 'default',
   subtitle,
   offsetY,
@@ -153,6 +154,8 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
     slotProps?.action,
   );
 
+  const onClose = useStableCallback(onCloseProp || noop);
+
   const platform = usePlatform();
   const {
     isInsideContainer,
@@ -195,7 +198,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
         setOpen(openProp);
       }
     },
-    [openProp],
+    [openProp, onClose],
   );
 
   const clearRAF = React.useCallback(() => {

package/src/components/Spacing/Spacing.tsx

@@ -15,7 +15,7 @@ export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement>
    */
   size?: SpacingSizeProp | undefined;
   /**
-   * @deprecated 7.0.0.Будет удалeно в **VKUI v9**.
+   * @deprecated 7.0.0.Будет удалено в **VKUI v9**.
    */
   children?: React.ReactNode | undefined; // TODO [>=9]: удалить неиспользуемое свойство
 }

package/src/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.module.css

@@ -0,0 +1,13 @@
+.host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  color: var(--vkui--color_icon_medium);
+  will-change: contents;
+}
+
+.noColor {
+  color: currentColor;
+}

package/src/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.module.css.d.ts.map

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

package/src/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { usePlatform } from '../../../hooks/usePlatform';
+import * as shapes from '../../../lib/material/shapes/shapes';
+import { animationVisibilityDelayStyles } from '../../../styles/animationVisibilityDelay';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
+import { Spinner as SimpleSpinner, type SpinnerProps } from '../Spinner';
+import { IconMaterial } from './icons';
+import styles from './ExpressiveSpinner.module.css';
+import stylesDelay from '../../../styles/animationVisibilityDelay.module.css';
+
+const iconSizeMap = {
+  s: 16,
+  m: 24,
+  l: 32,
+  xl: 44,
+} as const;
+
+const defaultShapesList = [
+  shapes.softBurstParams,
+  shapes.cookie9Params,
+  shapes.pentagonParams,
+  shapes.pillParams,
+  shapes.sunnyParams,
+  shapes.cookie4Params,
+  shapes.ovalParams,
+] as const;
+
+export interface MaterialSpinnerProps extends SpinnerProps {
+  /**
+   * Последовательность форм между которыми будет происходить анимация.
+   */
+  polygons?: readonly [shapes.ShapeParameters, shapes.ShapeParameters, ...shapes.ShapeParameters[]];
+}
+
+function MaterialSpinner({
+  polygons = defaultShapesList,
+  size = 'm',
+  children = 'Загружается...',
+  disableAnimation = false,
+  noColor = false,
+  visibilityDelay,
+  ...restProps
+}: MaterialSpinnerProps) {
+  const iconSize = iconSizeMap[size];
+
+  return (
+    <RootComponent
+      Component="span"
+      role="status"
+      {...restProps}
+      baseClassName={classNames(
+        styles.host,
+        noColor && styles.noColor,
+        visibilityDelay && stylesDelay.visibilityDelay,
+      )}
+      baseStyle={animationVisibilityDelayStyles(visibilityDelay)}
+    >
+      <IconMaterial size={iconSize} polygons={polygons} disableAnimation={disableAnimation} />
+      {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}
+    </RootComponent>
+  );
+}
+
+export function ExpressiveSpinner(props: SpinnerProps) {
+  const platform = usePlatform();
+
+  const Component = platform === 'ios' ? SimpleSpinner : MaterialSpinner;
+
+  return <Component {...props} />;
+}