@vkontakte/vkui 5.8.2 → 5.9.0

package/src/components/AppRoot/AppRoot.tsx

@@ -0,0 +1,265 @@
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useAppearance } from '../../hooks/useAppearance';
+import { useInsets } from '../../hooks/useInsets';
+import { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';
+import { SizeType } from '../../lib/adaptivity';
+import { useDOM } from '../../lib/dom';
+import { isRefObject } from '../../lib/isRefObject';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { warnOnce } from '../../lib/warnOnce';
+import { AppRootContext } from './AppRootContext';
+import { ElementScrollController, GlobalScrollController } from './ScrollContext';
+import styles from './AppRoot.module.css';
+
+const warn = warnOnce('AppRoot');
+
+export type SafeAreaInsets = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};
+
+const vkuiSizeXClassNames = {
+  none: 'vkui--sizeX-none',
+  [SizeType.REGULAR]: 'vkui--sizeX-regular',
+};
+
+const vkuiLayoutClassNames = {
+  card: 'vkui--layout-card',
+  plain: 'vkui--layout-plain',
+};
+
+function containerClassNames(layout: AppRootProps['layout'], sizeX: SizeType | 'none'): string[] {
+  const classNames: string[] = [];
+
+  if (layout) {
+    classNames.push(vkuiLayoutClassNames[layout]);
+  }
+
+  if (sizeX !== SizeType.COMPACT) {
+    classNames.push(vkuiSizeXClassNames[sizeX]);
+  }
+
+  return classNames;
+}
+
+const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
+
+// Используйте classList, но будьте осторожны
+/* eslint-disable no-restricted-properties */
+
+export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Режим встраивания */
+  mode?: 'partial' | 'embedded' | 'full';
+  window?: Window;
+  scroll?: 'global' | 'contain';
+  safeAreaInsets?: SafeAreaInsets;
+  /**
+   * Кастомный root-элемент портала
+   */
+  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
+  /**
+   * Отключает рендер всплывающих компонентов в отдельном контейнере
+   */
+  disablePortal?: boolean;
+  /**
+   * По умолчанию, mode="embedded" переносит систему координат элементов с `position: fixed` на
+   * свой контейнер через `transform: translate3d(0, 0, 0)`.
+   *
+   * Это поведение можно отключить с помощью этого параметра.
+   */
+  disableParentTransformForPositionFixedElements?: boolean;
+  layout?: 'card' | 'plain';
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/AppRoot
+ */
+export const AppRoot = ({
+  children,
+  mode = 'full',
+  scroll = 'global',
+  portalRoot: portalRootProp = null,
+  disablePortal,
+  disableParentTransformForPositionFixedElements,
+  className,
+  safeAreaInsets,
+  layout,
+  ...props
+}: AppRootProps) => {
+  const isKeyboardInputActive = useKeyboardInputTracker();
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);
+  const { document } = useDOM();
+  const deprecatedInsets = useInsets(!safeAreaInsets);
+  const insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;
+  const appearance = useAppearance();
+
+  const { hasPointer, sizeX = 'none' } = useAdaptivity();
+
+  if (process.env.NODE_ENV === 'development') {
+    if (!safeAreaInsets) {
+      // TODO [>=6]: удалить warn
+      warn("[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)"); // prettier-ignore
+    }
+  }
+
+  // setup portal
+  useIsomorphicLayoutEffect(() => {
+    let portal: HTMLElement | null = null;
+    if (portalRootProp) {
+      if (isRefObject(portalRootProp)) {
+        portal = portalRootProp.current;
+      } else {
+        portal = portalRootProp;
+      }
+    }
+    if (!portal) {
+      portal = document!.createElement('div');
+      document!.body.appendChild(portal);
+    }
+    setPortalRoot(portal);
+    return () => {
+      if (!portalRootProp) {
+        portal?.parentElement?.removeChild(portal);
+      }
+    };
+  }, [portalRootProp]);
+
+  // setup root classes
+  useIsomorphicLayoutEffect(() => {
+    if (mode === 'partial') {
+      return noop;
+    }
+
+    const parent = rootRef.current?.parentElement;
+    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);
+    if (parent) {
+      if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {
+        parent.style.transform = 'translate3d(0, 0, 0)';
+      }
+      parent.classList.add(...classes);
+    }
+
+    return () => {
+      if (parent) {
+        if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {
+          parent.style.transform = '';
+        }
+        parent.classList.remove(...classes);
+      }
+    };
+  }, [disableParentTransformForPositionFixedElements]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (mode === 'full') {
+      document!.documentElement.classList.add('vkui');
+
+      return () => {
+        document!.documentElement.classList.remove('vkui');
+      };
+    }
+
+    return undefined;
+  }, [document, mode]);
+
+  // setup insets
+  useIsomorphicLayoutEffect(() => {
+    if (mode === 'partial' || !rootRef.current?.parentElement) {
+      return noop;
+    }
+
+    const parent = rootRef.current.parentElement;
+
+    let key: keyof SafeAreaInsets;
+    for (key in insets) {
+      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {
+        const inset = insets[key];
+        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);
+        portalRoot &&
+          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);
+      }
+    }
+
+    return () => {
+      let key: keyof SafeAreaInsets;
+      for (key in insets) {
+        if (insets.hasOwnProperty(key)) {
+          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);
+          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);
+        }
+      }
+    };
+  }, [insets, portalRoot]);
+
+  // adaptivity handler
+  useIsomorphicLayoutEffect(() => {
+    if (mode === 'partial') {
+      return noop;
+    }
+
+    const classNames = containerClassNames(layout, sizeX);
+
+    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;
+
+    if (!classNames.length || !container) {
+      return noop;
+    }
+
+    container.classList.add(...classNames);
+    return () => {
+      container.classList.remove(...classNames);
+    };
+  }, [sizeX, layout]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (mode !== 'full' || appearance === undefined) {
+      return noop;
+    }
+    document!.documentElement.style.setProperty('color-scheme', appearance);
+
+    return () => document!.documentElement.style.removeProperty('color-scheme');
+  }, [appearance]);
+
+  const ScrollController = React.useMemo(
+    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),
+    [scroll],
+  );
+
+  const content = (
+    <AppRootContext.Provider
+      value={{
+        appRoot: rootRef,
+        portalRoot,
+        embedded: mode === 'embedded',
+        keyboardInput: isKeyboardInputActive,
+        mode,
+        disablePortal,
+        layout,
+      }}
+    >
+      <ScrollController elRef={rootRef}>{children}</ScrollController>
+    </AppRootContext.Provider>
+  );
+
+  return mode === 'partial' ? (
+    content
+  ) : (
+    <div
+      ref={rootRef}
+      className={classNames(
+        styles['AppRoot'],
+        hasPointer === undefined
+          ? styles['AppRoot--pointer-none']
+          : !hasPointer && styles['AppRoot--pointer-has-not'],
+        className,
+      )}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+};

package/src/components/AppRoot/AppRootContext.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export interface AppRootContextInterface {
+  appRoot?: React.RefObject<HTMLDivElement>;
+  portalRoot?: HTMLElement | null;
+  embedded?: boolean;
+  mode?: 'partial' | 'embedded' | 'full';
+  keyboardInput?: boolean;
+  disablePortal?: boolean;
+  layout?: 'card' | 'plain';
+}
+
+export const AppRootContext = React.createContext<AppRootContextInterface>({
+  portalRoot: null,
+});

package/src/components/AppRoot/AppRootPortal.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { useAppearance } from '../../hooks/useAppearance';
+import { useIsClient } from '../../hooks/useIsClient';
+import { isRefObject } from '../../lib/isRefObject';
+import { HasChildren } from '../../types';
+import { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';
+import { AppRootContext } from './AppRootContext';
+
+export interface AppRootPortalProps extends HasChildren {
+  className?: string;
+  forcePortal?: boolean;
+  /**
+   * Кастомный root-элемент портала.
+   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`
+   * из контекста `AppRoot`.
+   */
+  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
+}
+
+export const AppRootPortal = ({
+  children,
+  className,
+  forcePortal: forcePortalProp,
+  portalRoot: portalRootProp = null,
+}: AppRootPortalProps) => {
+  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);
+  const appearance = useAppearance();
+
+  const isClient = useIsClient();
+  if (!isClient) {
+    return null;
+  }
+
+  const forcePortal = forcePortalProp ?? mode !== 'full';
+
+  const portalContainer = getPortalContainer(portalRootProp, portalRoot);
+
+  const ignoreDisablePortalFlagFromContext = portalRootProp && forcePortal;
+  const shouldUsePortal = ignoreDisablePortalFlagFromContext
+    ? true
+    : !disablePortal && portalContainer && forcePortal;
+
+  return shouldUsePortal && portalContainer ? (
+    createPortal(
+      <AppearanceProvider appearance={appearance}>
+        <div className={className}>{children}</div>
+      </AppearanceProvider>,
+      portalContainer,
+    )
+  ) : (
+    <React.Fragment>{children}</React.Fragment>
+  );
+};
+
+/**
+ * Получает из кастомного пропа `partialRootProp` и `partialRoot` контекста
+ * контейнер-элемент для портала.
+ * `partialRootProp` может быть ref элементом.
+ *
+ */
+function getPortalContainer(
+  portalRootProp?: HTMLElement | React.RefObject<HTMLElement> | null,
+  portalRoot?: HTMLElement | null,
+) {
+  if (!portalRootProp) {
+    return portalRoot;
+  }
+
+  return isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp;
+}

package/src/components/AppRoot/ScrollContext.tsx

@@ -0,0 +1,244 @@
+import * as React from 'react';
+import { noop } from '@vkontakte/vkjs';
+import { clamp } from '../../helpers/math';
+import { useDOM } from '../../lib/dom';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { HasChildren } from '../../types';
+
+const clearDisableScrollStyle = (node: HTMLElement) => {
+  Object.assign(node.style, {
+    position: '',
+    top: '',
+    left: '',
+    right: '',
+    overflowY: '',
+    overflowX: '',
+  });
+};
+
+const getPageYOffsetWithoutKeyboardHeight = (window: Window) => {
+  // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.
+  //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,
+  //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.
+  const diffOfClientHeightAndViewportHeight =
+    window.document.documentElement.clientHeight - window.innerHeight;
+  return window.pageYOffset - diffOfClientHeightAndViewportHeight;
+};
+
+export interface ScrollContextInterface {
+  getScroll(this: void): { x: number; y: number };
+  scrollTo(this: void, x?: number, y?: number): void;
+  isScrollLock: boolean;
+  enableScrollLock(this: void): void;
+  disableScrollLock(this: void): void;
+  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;
+}
+
+export const ScrollContext = React.createContext<ScrollContextInterface>({
+  getScroll: () => ({ x: 0, y: 0 }),
+  scrollTo: noop,
+  isScrollLock: false,
+  enableScrollLock: noop,
+  disableScrollLock: noop,
+});
+
+export const useScroll = () => React.useContext(ScrollContext);
+
+export interface ScrollControllerProps extends HasChildren {
+  elRef: React.RefObject<HTMLElement>;
+}
+
+export const GlobalScrollController = ({ children }: ScrollControllerProps) => {
+  const { window, document } = useDOM();
+  const [isScrollLock, setScrollLock] = React.useState(false);
+  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
+
+  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(
+    () => ({
+      x: window!.pageXOffset,
+      y: getPageYOffsetWithoutKeyboardHeight(window!),
+    }),
+    [window],
+  );
+  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(
+    (x = 0, y = 0) => {
+      // Some iOS versions do not normalize scroll — do it manually.
+      window!.scrollTo(
+        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,
+        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0,
+      );
+    },
+    [document, window],
+  );
+
+  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {
+    beforeScrollLockFnSetRef.current.forEach((fn) => {
+      fn();
+    });
+
+    const scrollY = window!.pageYOffset;
+    const scrollX = window!.pageXOffset;
+    const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';
+    const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';
+
+    Object.assign(document!.body.style, {
+      position: 'fixed',
+      top: `-${scrollY}px`,
+      left: `-${scrollX}px`,
+      right: '0',
+      overflowY,
+      overflowX,
+    });
+    setScrollLock(true);
+  }, [document, window]);
+
+  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {
+    const scrollY = document!.body.style.top;
+    const scrollX = document!.body.style.left;
+
+    clearDisableScrollStyle(document!.body);
+    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
+    setScrollLock(false);
+  }, [document, window]);
+
+  const scrollController = React.useMemo<ScrollContextInterface>(
+    () => ({
+      getScroll,
+      scrollTo,
+      isScrollLock,
+      disableScrollLock,
+      enableScrollLock,
+
+      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,
+    }),
+    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],
+  );
+
+  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;
+};
+
+export const ElementScrollController = ({ elRef, children }: ScrollControllerProps) => {
+  const [isScrollLock, setScrollLock] = React.useState(false);
+  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
+
+  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(
+    () => ({
+      x: elRef.current?.scrollLeft ?? 0,
+      y: elRef.current?.scrollTop ?? 0,
+    }),
+    [elRef],
+  );
+  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(
+    (x = 0, y = 0) => {
+      const el = elRef.current;
+      // Some iOS versions do not normalize scroll — do it manually.
+      el?.scrollTo(
+        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,
+        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0,
+      );
+    },
+    [elRef],
+  );
+
+  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {
+    const el = elRef.current;
+    if (!el) {
+      return;
+    }
+    beforeScrollLockFnSetRef.current.forEach((fn) => {
+      fn();
+    });
+
+    const scrollY = el.scrollTop;
+    const scrollX = el.scrollLeft;
+    const overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';
+    const overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';
+
+    Object.assign(el.style, {
+      position: 'absolute',
+      top: `-${scrollY}px`,
+      left: `-${scrollX}px`,
+      right: '0',
+      overflowY,
+      overflowX,
+    });
+    setScrollLock(true);
+  }, [elRef]);
+
+  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {
+    const el = elRef.current;
+    if (!el) {
+      return;
+    }
+
+    const scrollY = el.style.top;
+    const scrollX = el.style.left;
+
+    clearDisableScrollStyle(el);
+    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
+    setScrollLock(false);
+  }, [elRef]);
+
+  const scrollController = React.useMemo<ScrollContextInterface>(
+    () => ({
+      getScroll,
+      scrollTo,
+      isScrollLock,
+      disableScrollLock,
+      enableScrollLock,
+      beforeScrollLockFnSetRef,
+    }),
+    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],
+  );
+
+  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;
+};
+
+/**
+ * Вызывает функцию effect, до блокировки прокрутки
+ * @param effect функция, которая может возвращать функцию очистки
+ * @param deps effect обновится только при изменении значений в списке.
+ */
+export const useScrollLockEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {
+  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);
+  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();
+
+  // Изменяем effectCallback только при изменении deps
+  const effectCallback = React.useCallback(() => {
+    destructorRef.current = effect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  // Добавляем effectCallback в список функций, которые необходимо вызвать
+  // до блокировки
+  React.useEffect(() => {
+    const beforeSet = beforeScrollLockFnSetRef?.current;
+    if (!beforeSet) {
+      return noop;
+    }
+
+    beforeSet.add(effectCallback);
+
+    return () => {
+      beforeSet.delete(effectCallback);
+    };
+  }, [beforeScrollLockFnSetRef, effectCallback]);
+
+  // Вызываем сбрасывающую функцию, после отключения блокировки
+  React.useEffect(() => {
+    if (!isScrollLock && destructorRef.current) {
+      destructorRef.current();
+    }
+  }, [isScrollLock]);
+};
+
+export const useScrollLock = (enabled = true) => {
+  const { enableScrollLock, disableScrollLock } = useScroll();
+  useIsomorphicLayoutEffect(() => {
+    if (enabled) {
+      enableScrollLock();
+      return disableScrollLock;
+    }
+    return noop;
+  }, [enableScrollLock, disableScrollLock, enabled]);
+};

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { usePlatform } from '../../hooks/usePlatform';
+import type { AppearanceType } from '../../lib/appearance';
+import { TokensClassProvider } from '../../lib/tokensClassProvider';
+import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
+
+export interface AppearanceProviderProps {
+  appearance: AppearanceType;
+  children: React.ReactNode;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
+ */
+export const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {
+  const platform = usePlatform();
+
+  return (
+    <ConfigProviderOverride appearance={appearance}>
+      <TokensClassProvider platform={platform} appearance={appearance}>
+        {children}
+      </TokensClassProvider>
+    </ConfigProviderOverride>
+  );
+};

package/src/components/AspectRatio/AspectRatio.module.css

@@ -0,0 +1,32 @@
+.AspectRatio {
+  --vkui_internal--aspect_ratio: 1;
+
+  position: relative;
+  max-width: 100%;
+}
+
+.AspectRatio::before {
+  content: '';
+  height: 0;
+  display: block;
+  padding-bottom: calc((1 / var(--vkui_internal--aspect_ratio, 1)) * 100%);
+}
+
+/* stylelint-disable-next-line selector-max-universal */
+.AspectRatio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+.AspectRatio--mode-stretch > * {
+  width: 100%;
+  height: 100%;
+}
+
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-type */
+.AspectRatio--mode-stretch > img,
+.AspectRatio--mode-stretch > video {
+  object-fit: cover;
+}

package/src/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './AspectRatio.module.css';
+
+export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  className?: string;
+  /**
+   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.
+   */
+  mode?: 'stretch' | 'none';
+  /**
+   * Например 16 / 9, 4 / 3, 1920 / 1080
+   */
+  ratio: number;
+}
+
+/**
+ * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
+ * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
+
+ * @since 5.5.0
+ * @see https://vkcom.github.io/VKUI/#/AspectRatio
+ */
+export function AspectRatio({
+  ratio,
+  mode = 'stretch',
+  style: styleProp,
+  ...props
+}: AspectRatioProps): JSX.Element {
+  const style: React.CSSProperties & CSSCustomProperties = {
+    ['--vkui_internal--aspect_ratio']: String(ratio),
+  };
+
+  return (
+    <RootComponent
+      baseClassName={classNames(
+        styles.AspectRatio,
+        mode === 'stretch' && styles['AspectRatio--mode-stretch'],
+      )}
+      style={{ ...styleProp, ...style }}
+      {...props}
+    />
+  );
+}