@vkontakte/vkui 5.4.3 → 5.5.1

package/dist/components/Alert/Alert.js

@@ -1,7 +1,7 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries";

package/dist/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly, HasChildren } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id=\"vkui--alert--desc\">{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","Button","FocusTrap","ModalDismissButton","PopoutWrapper","Tappable","Caption","Footnote","Text","Title","AlertHeader","props","platform","IOS","className","weight","level","AlertText","VKCOM","Component","AlertAction","action","onItemClick","restProps","handleItemClick","useCallback","title","actionProp","autoClose","mode","restActionProps","href","onClick","size","target","Alert","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","isDesktop","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","getRootRef","role","aria-modal","aria-labelledby","aria-describedby","div","id","map","i","key","aria-label"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly, HasChildren } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id=\"vkui--alert--desc\">{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","Button","FocusTrap","ModalDismissButton","PopoutWrapper","Tappable","Caption","Footnote","Text","Title","AlertHeader","props","platform","IOS","className","weight","level","AlertText","VKCOM","Component","AlertAction","action","onItemClick","restProps","handleItemClick","useCallback","title","actionProp","autoClose","mode","restActionProps","href","onClick","size","target","Alert","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","isDesktop","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","getRootRef","role","aria-modal","aria-labelledby","aria-describedby","div","id","map","i","key","aria-label"],"mappings":"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"}

package/dist/components/AppRoot/AppRoot.d.ts

@@ -14,4 +14,4 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */
-export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, className, ...props }: AppRootProps) => JSX.Element;
+export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, className, ...props }: AppRootProps) => React.JSX.Element;

package/dist/components/AppRoot/AppRoot.js

@@ -1,8 +1,8 @@
-import _define_property from "@swc/helpers/src/_define_property.mjs";
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
-import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import * as React from "react";
 import { IconSettingsProvider } from "@vkontakte/icons";
 import { classNames, noop } from "@vkontakte/vkjs";

package/dist/components/AppRoot/AppRoot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      portal?.parentElement?.removeChild(portal);\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof Insets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof Insets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","IconSettingsProvider","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","AppRootContext","ElementScrollController","GlobalScrollController","vkuiSizeXClassNames","none","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRootProp","portalRoot","disablePortal","className","props","isKeyboardInputActive","rootRef","useRef","useState","setPortalRoot","document","insets","appearance","hasPointer","sizeX","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","classPrefix","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      portal?.parentElement?.removeChild(portal);\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof Insets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof Insets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","IconSettingsProvider","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","AppRootContext","ElementScrollController","GlobalScrollController","vkuiSizeXClassNames","none","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRootProp","portalRoot","disablePortal","className","props","isKeyboardInputActive","rootRef","useRef","useState","setPortalRoot","document","insets","appearance","hasPointer","sizeX","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","classPrefix","div","ref"],"mappings":"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"}

package/dist/components/AppRoot/AppRootContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAW/B,OAAO,IAAMC,iBAAiBD,MAAME,aAAa,CAA0B;IACzEC,YAAY,IAAI;AAClB,GAAG"}
+{"version":3,"sources":["../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAW/B,OAAO,IAAMC,iBAAiBD,MAAME,cAAuC;IACzEC,YAAY;AACd,GAAG"}

package/dist/components/AppRoot/AppRootPortal.d.ts

@@ -1,7 +1,13 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HasChildren } from '../../types';
 export interface AppRootPortalProps extends HasChildren {
     className?: string;
     forcePortal?: boolean;
+    /**
+     * Кастомный root-элемент портала.
+     * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`
+     * из контекста `AppRoot`.
+     */
+    portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
 }
-export declare const AppRootPortal: ({ children, className, forcePortal: forcePortalProp, }: AppRootPortalProps) => JSX.Element | null;
+export declare const AppRootPortal: ({ children, className, forcePortal: forcePortalProp, portalRoot: portalRootProp, }: AppRootPortalProps) => React.JSX.Element | null;

package/dist/components/AppRoot/AppRootPortal.js

@@ -2,10 +2,11 @@ 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 { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
 import { AppRootContext } from "./AppRootContext";
 export var AppRootPortal = function(param) {
-    var children = param.children, className = param.className, forcePortalProp = param.forcePortal;
+    var children = param.children, className = param.className, forcePortalProp = param.forcePortal, tmp = param.portalRoot, portalRootProp = tmp === void 0 ? null : tmp;
     var _React_useContext = React.useContext(AppRootContext), portalRoot = _React_useContext.portalRoot, mode = _React_useContext.mode, disablePortal = _React_useContext.disablePortal;
     var appearance = useAppearance();
     var isClient = useIsClient();
@@ -13,11 +14,25 @@ export var AppRootPortal = function(param) {
         return null;
     }
     var forcePortal = forcePortalProp !== null && forcePortalProp !== void 0 ? forcePortalProp : mode !== "full";
-    return !disablePortal && portalRoot && forcePortal ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(AppearanceProvider, {
+    var portalContainer = getPortalContainer(portalRootProp, portalRoot);
+    var ignoreDisablePortalFlagFromContext = portalRootProp && forcePortal;
+    var shouldUsePortal = ignoreDisablePortalFlagFromContext ? true : !disablePortal && portalContainer && forcePortal;
+    return shouldUsePortal && portalContainer ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(AppearanceProvider, {
         appearance: appearance
     }, /*#__PURE__*/ React.createElement("div", {
         className: className
-    }, children)), portalRoot) : /*#__PURE__*/ React.createElement(React.Fragment, null, children);
+    }, children)), portalContainer) : /*#__PURE__*/ React.createElement(React.Fragment, null, children);
 };
+/**
+ * Получает из кастомного пропа `partialRootProp` и `partialRoot` контекста
+ * контейнер-элемент для портала.
+ * `partialRootProp` может быть ref элементом.
+ *
+ */ function getPortalContainer(portalRootProp, portalRoot) {
+    if (!portalRootProp) {
+        return portalRoot;
+    }
+    return isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp;
+}
 
 //# sourceMappingURL=AppRootPortal.js.map

package/dist/components/AppRoot/AppRootPortal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { HasChildren } from '../../types';\nimport { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';\nimport { AppRootContext } from './AppRootContext';\n\nexport interface AppRootPortalProps extends HasChildren {\n  className?: string;\n  forcePortal?: boolean;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n}: AppRootPortalProps) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  const isClient = useIsClient();\n  if (!isClient) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== 'full';\n\n  return !disablePortal && portalRoot && forcePortal ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalRoot,\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n"],"names":["React","createPortal","useAppearance","useIsClient","AppearanceProvider","AppRootContext","AppRootPortal","children","className","forcePortal","forcePortalProp","useContext","portalRoot","mode","disablePortal","appearance","isClient","div","Fragment"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,cAAc,QAAQ,mBAAmB;AAOlD,OAAO,IAAMC,gBAAgB,gBAIH;QAHxBC,iBAAAA,UACAC,kBAAAA,WACAC,AAAaC,wBAAbD;IAEA,IAA4CT,oBAAAA,MAAMW,UAAU,CAACN,iBAArDO,aAAoCZ,kBAApCY,YAAYC,OAAwBb,kBAAxBa,MAAMC,gBAAkBd,kBAAlBc;IAC1B,IAAMC,aAAab;IAEnB,IAAMc,WAAWb;IACjB,IAAI,CAACa,UAAU;QACb,OAAO,IAAI;IACb,CAAC;IAED,IAAMP,cAAcC,4BAAAA,6BAAAA,kBAAmBG,SAAS,MAAM;IAEtD,OAAO,CAACC,iBAAiBF,cAAcH,4BACrCR,2BACE,oBAACG;QAAmBW,YAAYA;qBAC9B,oBAACE;QAAIT,WAAWA;OAAYD,YAE9BK,4BAGF,oBAACZ,MAAMkB,QAAQ,QAAEX,SAClB;AACH,EAAE"}
+{"version":3,"sources":["../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { HasChildren } from '../../types';\nimport { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';\nimport { AppRootContext } from './AppRootContext';\n\nexport interface AppRootPortalProps extends HasChildren {\n  className?: string;\n  forcePortal?: boolean;\n  /**\n   * Кастомный root-элемент портала.\n   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`\n   * из контекста `AppRoot`.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n  portalRoot: portalRootProp = null,\n}: AppRootPortalProps) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  const isClient = useIsClient();\n  if (!isClient) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== 'full';\n\n  const portalContainer = getPortalContainer(portalRootProp, portalRoot);\n\n  const ignoreDisablePortalFlagFromContext = portalRootProp && forcePortal;\n  const shouldUsePortal = ignoreDisablePortalFlagFromContext\n    ? true\n    : !disablePortal && portalContainer && forcePortal;\n\n  return shouldUsePortal && portalContainer ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalContainer,\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n\n/**\n * Получает из кастомного пропа `partialRootProp` и `partialRoot` контекста\n * контейнер-элемент для портала.\n * `partialRootProp` может быть ref элементом.\n *\n */\nfunction getPortalContainer(\n  portalRootProp?: HTMLElement | React.RefObject<HTMLElement> | null,\n  portalRoot?: HTMLElement | null,\n) {\n  if (!portalRootProp) {\n    return portalRoot;\n  }\n\n  return isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp;\n}\n"],"names":["React","createPortal","useAppearance","useIsClient","isRefObject","AppearanceProvider","AppRootContext","AppRootPortal","children","className","forcePortal","forcePortalProp","portalRootProp","portalRoot","useContext","mode","disablePortal","appearance","isClient","portalContainer","getPortalContainer","ignoreDisablePortalFlagFromContext","shouldUsePortal","div","Fragment","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,wBAAwB;AAEpD,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,cAAc,QAAQ,mBAAmB;AAalD,OAAO,IAAMC,gBAAgB;QAC3BC,iBAAAA,UACAC,kBAAAA,WACAC,AAAaC,wBAAbD,aACYE,YAAZC,YAAYD,iBAAAA,iBAAiB,OAAjBA;IAEZ,IAA4CZ,oBAAAA,MAAMc,WAAWR,iBAArDO,aAAoCb,kBAApCa,YAAYE,OAAwBf,kBAAxBe,MAAMC,gBAAkBhB,kBAAlBgB;IAC1B,IAAMC,aAAaf;IAEnB,IAAMgB,WAAWf;IACjB,IAAI,CAACe,UAAU;QACb,OAAO;IACT;IAEA,IAAMR,cAAcC,4BAAAA,6BAAAA,kBAAmBI,SAAS;IAEhD,IAAMI,kBAAkBC,mBAAmBR,gBAAgBC;IAE3D,IAAMQ,qCAAqCT,kBAAkBF;IAC7D,IAAMY,kBAAkBD,qCACpB,OACA,CAACL,iBAAiBG,mBAAmBT;IAEzC,OAAOY,mBAAmBH,gCACxBlB,2BACE,oBAACI;QAAmBY,YAAYA;qBAC9B,oBAACM;QAAId,WAAWA;OAAYD,YAE9BW,iCAGF,oBAACnB,MAAMwB,gBAAUhB;AAErB,EAAE;AAEF;;;;;CAKC,GACD,SAASY,mBACPR,cAAkE,EAClEC,UAA+B;IAE/B,IAAI,CAACD,gBAAgB;QACnB,OAAOC;IACT;IAEA,OAAOT,YAAYQ,kBAAkBA,eAAea,UAAUb;AAChE"}

package/dist/components/AppRoot/ScrollContext.d.ts

@@ -16,8 +16,8 @@ export declare const useScroll: () => ScrollContextInterface;
 export interface ScrollControllerProps extends HasChildren {
     elRef: React.RefObject<HTMLElement>;
 }
-export declare const GlobalScrollController: ({ children }: ScrollControllerProps) => JSX.Element;
-export declare const ElementScrollController: ({ elRef, children }: ScrollControllerProps) => JSX.Element;
+export declare const GlobalScrollController: ({ children }: ScrollControllerProps) => React.JSX.Element;
+export declare const ElementScrollController: ({ elRef, children }: ScrollControllerProps) => React.JSX.Element;
 /**
  * Вызывает функцию effect, до блокировки прокрутки
  * @param effect функция, которая может возвращать функцию очистки

package/dist/components/AppRoot/ScrollContext.js

@@ -1,4 +1,4 @@
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { noop } from "@vkontakte/vkjs";
 import { clamp } from "../../helpers/math";

package/dist/components/AppRoot/ScrollContext.js.map

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

package/dist/components/AppearanceProvider/AppearanceProvider.d.ts

@@ -7,4 +7,4 @@ export interface AppearanceProviderProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
  */
-export declare const AppearanceProvider: ({ appearance, children }: AppearanceProviderProps) => JSX.Element;
+export declare const AppearanceProvider: ({ appearance, children }: AppearanceProviderProps) => React.JSX.Element;

package/dist/components/AppearanceProvider/AppearanceProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppearanceType } from '@vkontakte/vk-bridge';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["React","usePlatform","TokensClassProvider","ConfigProviderOverride","AppearanceProvider","appearance","children","platform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAOlF;;CAEC,GACD,OAAO,IAAMC,qBAAqB,gBAAuD;QAApDC,mBAAAA,YAAYC,iBAAAA;IAC/C,IAAMC,WAAWN;IAEjB,qBACE,oBAACE;QAAuBE,YAAYA;qBAClC,oBAACH;QAAoBK,UAAUA;QAAUF,YAAYA;OAClDC;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppearanceType } from '@vkontakte/vk-bridge';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["React","usePlatform","TokensClassProvider","ConfigProviderOverride","AppearanceProvider","appearance","children","platform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAOlF;;CAEC,GACD,OAAO,IAAMC,qBAAqB;QAAGC,mBAAAA,YAAYC,iBAAAA;IAC/C,IAAMC,WAAWN;IAEjB,qBACE,oBAACE;QAAuBE,YAAYA;qBAClC,oBAACH;QAAoBK,UAAUA;QAAUF,YAAYA;OAClDC;AAIT,EAAE"}

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+    className?: string;
+    /**
+     * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.
+     */
+    mode?: 'stretch' | 'none';
+    children: React.ReactNode;
+    /**
+     * Например 16 / 9, 4 / 3, 1920 / 1080
+     */
+    ratio: number;
+}
+/**
+ * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
+ * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
+ 
+ * @since 5.5.0
+ * @see https://vkcom.github.io/VKUI/#/AspectRatio
+ */
+export declare function AspectRatio({ ratio, children, mode, className, getRootRef, style: styleProp, ...props }: AspectRatioProps): JSX.Element;

package/dist/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,29 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+/**
+ * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
+ * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
+ 
+ * @since 5.5.0
+ * @see https://vkcom.github.io/VKUI/#/AspectRatio
+ */ export function AspectRatio(_param) {
+    var ratio = _param.ratio, children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "stretch" : _param_mode, className = _param.className, getRootRef = _param.getRootRef, styleProp = _param.style, props = _object_without_properties(_param, [
+        "ratio",
+        "children",
+        "mode",
+        "className",
+        "getRootRef",
+        "style"
+    ]);
+    var style = _define_property({}, "--vkui_internal--aspect_ratio", String(ratio));
+    return /*#__PURE__*/ React.createElement("div", _object_spread({
+        className: classNames("vkuiAspectRatio", mode === "stretch" && "vkuiAspectRatio--mode-stretch", className),
+        style: _object_spread({}, styleProp, style),
+        ref: getRootRef
+    }, props), children);
+}
+
+//# sourceMappingURL=AspectRatio.js.map

package/dist/components/AspectRatio/AspectRatio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HasRootRef } from '../../types';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  children: React.ReactNode;\n  /**\n   * Например 16 / 9, 4 / 3, 1920 / 1080\n   */\n  ratio: number;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n \n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({\n  ratio,\n  children,\n  mode = 'stretch',\n  className,\n  getRootRef,\n  style: styleProp,\n  ...props\n}: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    ['--vkui_internal--aspect_ratio']: String(ratio),\n  };\n\n  return (\n    <div\n      className={classNames(\n        styles.AspectRatio,\n        mode === 'stretch' && styles['AspectRatio--mode-stretch'],\n        className,\n      )}\n      style={{ ...styleProp, ...style }}\n      ref={getRootRef}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["React","classNames","AspectRatio","ratio","children","mode","className","getRootRef","style","styleProp","props","String","div","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAmB7C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY;QAC1BC,QAD0B,OAC1BA,OACAC,WAF0B,OAE1BA,wBAF0B,OAG1BC,MAAAA,gCAAO,yBACPC,YAJ0B,OAI1BA,WACAC,aAL0B,OAK1BA,YACAC,AAAOC,YANmB,OAM1BD,OACGE,mCAPuB;QAC1BP;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMA,QACJ,qBAAC,iCAAkCG,OAAOR;IAG5C,qBACE,oBAACS;QACCN,WAAWL,8BAETI,SAAS,8CACTC;QAEFE,OAAO,mBAAKC,WAAcD;QAC1BK,KAAKN;OACDG,QAEHN;AAGP"}

package/dist/components/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';
 import { type AvatarBadgeWithPresetProps } from './AvatarBadge/AvatarBadgeWithPreset';
@@ -48,8 +48,8 @@ export interface AvatarProps extends ImageBaseProps {
  * @see https://vkcom.github.io/VKUI/#/Avatar
  */
 export declare const Avatar: {
-    ({ size, className, gradientColor, initials, fallbackIcon, children, ...restProps }: AvatarProps): JSX.Element;
-    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => JSX.Element;
-    BadgeWithPreset: ({ preset, className, ...restProps }: AvatarBadgeWithPresetProps) => JSX.Element;
-    Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => JSX.Element;
+    ({ size, className, gradientColor, initials, fallbackIcon, children, ...restProps }: AvatarProps): React.JSX.Element;
+    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => React.JSX.Element;
+    BadgeWithPreset: ({ preset, className, ...restProps }: AvatarBadgeWithPresetProps) => React.JSX.Element;
+    Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => React.JSX.Element;
 };

package/dist/components/Avatar/Avatar.js

@@ -1,6 +1,6 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { ImageBase } from "../ImageBase/ImageBase";

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles['Avatar--gradient-red'],\n  'orange': styles['Avatar--gradient-orange'],\n  'yellow': styles['Avatar--gradient-yellow'],\n  'green': styles['Avatar--gradient-green'],\n  'blue': styles['Avatar--gradient-blue'],\n  'l-blue': styles['Avatar--gradient-l-blue'],\n  'violet': styles['Avatar--gradient-violet'],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNames(\n        styles['Avatar'],\n        gradientName && styles['Avatar--has-gradient'],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {initials && (\n        <div\n          className={styles['Avatar__initials']}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"names":["React","classNames","ImageBase","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","div","style","fontSize","Badge","BadgeWithPreset","Overlay"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,WAAW,QAA+B,4BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,sCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,YAAY;AAShD,OAAO,IAAMC,sBAAsB,GAAG;AAEtC,IAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,IAAMC,iBAAiB;IACrB,KAAK;IACL,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,MAAM;IACN,QAAQ;IACR,QAAQ;AACV;AA6BA;;CAEC,GACD,OAAO,IAAMC,SAAS,iBAQH;6BAPjBC,MAAAA,gCAAOJ,mCACPK,mBAAAA,WACAC,uBAAAA,eACAC,kBAAAA,UACAC,sBAAAA,cACAC,kBAAAA,UACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,eACJ,OAAOL,kBAAkB,WAAWL,yBAAyB,CAACK,cAAc,GAAGA,aAAa;IAC9F,IAAMM,sBAAsBD,gBAAgBA,iBAAiB;IAC7D,IAAME,wBAAwBN,WAAWO,YAAYN,YAAY;IAEjE,qBACE,oBAACZ,mDACKc;QACJN,MAAMA;QACNI,cAAcK;QACdR,WAAWV,yBAETgB,4CACAC,uBAAuBV,cAAc,CAACS,aAAa,EACnDN;QAGDE,0BACC,oBAACQ;QACCV,SAAS;QACTW,OAAO;YACLC,UAAUlB,oBAAoBK;QAChC;OAECG,WAGJE;AAGP,EAAE;AAEFN,OAAOe,KAAK,GAAGrB;AAEfM,OAAOgB,eAAe,GAAGrB;AAEzBK,OAAOiB,OAAO,GAAGxB,UAAUwB,OAAO"}
+{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles['Avatar--gradient-red'],\n  'orange': styles['Avatar--gradient-orange'],\n  'yellow': styles['Avatar--gradient-yellow'],\n  'green': styles['Avatar--gradient-green'],\n  'blue': styles['Avatar--gradient-blue'],\n  'l-blue': styles['Avatar--gradient-l-blue'],\n  'violet': styles['Avatar--gradient-violet'],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNames(\n        styles['Avatar'],\n        gradientName && styles['Avatar--has-gradient'],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {initials && (\n        <div\n          className={styles['Avatar__initials']}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"names":["React","classNames","ImageBase","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","div","style","fontSize","Badge","BadgeWithPreset","Overlay"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,WAAW,QAA+B,4BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,sCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,YAAY;AAShD,OAAO,IAAMC,sBAAsB,GAAG;AAEtC,IAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,IAAMC,iBAAiB;IACrB,KAAK;IACL,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,MAAM;IACN,QAAQ;IACR,QAAQ;AACV;AA6BA;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAOJ,mCACPK,mBAAAA,WACAC,uBAAAA,eACAC,kBAAAA,UACAC,sBAAAA,cACAC,kBAAAA,UACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,eACJ,OAAOL,kBAAkB,WAAWL,yBAAyB,CAACK,cAAc,GAAGA;IACjF,IAAMM,sBAAsBD,gBAAgBA,iBAAiB;IAC7D,IAAME,wBAAwBN,WAAWO,YAAYN;IAErD,qBACE,oBAACZ,mDACKc;QACJN,MAAMA;QACNI,cAAcK;QACdR,WAAWV,yBAETgB,4CACAC,uBAAuBV,cAAc,CAACS,aAAa,EACnDN;QAGDE,0BACC,oBAACQ;QACCV,SAAS;QACTW,OAAO;YACLC,UAAUlB,oBAAoBK;QAChC;OAECG,WAGJE;AAGP,EAAE;AAEFN,OAAOe,QAAQrB;AAEfM,OAAOgB,kBAAkBrB;AAEzBK,OAAOiB,UAAUxB,UAAUwB"}

package/dist/components/Avatar/AvatarBadge/AvatarBadge.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export type AvatarBadgeProps = ImageBaseBadgeProps;
-export declare const AvatarBadge: ({ className, ...restProps }: AvatarBadgeProps) => JSX.Element;
+export declare const AvatarBadge: ({ className, ...restProps }: AvatarBadgeProps) => React.JSX.Element;

package/dist/components/Avatar/AvatarBadge/AvatarBadge.js

@@ -1,6 +1,6 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { ImageBase, ImageBaseContext } from "../../ImageBase/ImageBase";

package/dist/components/Avatar/AvatarBadge/AvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './AvatarBadge.module.css';\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['AvatarBadge'],\n        size < 96 && styles['AvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","AvatarBadge","className","restProps","size","useContext","Badge"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAKlG,OAAO,IAAMC,cAAc,iBAAmD;QAAhDC,mBAAAA,WAAcC;QAAdD;;IAC5B,IAAM,AAAEE,OAASP,MAAMQ,UAAU,CAACL,kBAA1BI;IACR,qBACE,oBAACL,UAAUO,KAAK,0CACVH;QACJD,WAAWJ,8BAETM,OAAO,kCACPF;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './AvatarBadge.module.css';\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['AvatarBadge'],\n        size < 96 && styles['AvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","AvatarBadge","className","restProps","size","useContext","Badge"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAKlG,OAAO,IAAMC,cAAc;QAAGC,mBAAAA,WAAcC;QAAdD;;IAC5B,IAAM,AAAEE,OAASP,MAAMQ,WAAWL,kBAA1BI;IACR,qBACE,oBAACL,UAAUO,+CACLH;QACJD,WAAWJ,8BAETM,OAAO,kCACPF;;AAIR,EAAE"}

package/dist/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export interface AvatarBadgeWithPresetProps extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {
     /**
@@ -8,4 +8,4 @@ export interface AvatarBadgeWithPresetProps extends Omit<ImageBaseBadgeProps, 'b
      */
     preset?: 'online' | 'online-mobile';
 }
-export declare const AvatarBadgeWithPreset: ({ preset, className, ...restProps }: AvatarBadgeWithPresetProps) => JSX.Element;
+export declare const AvatarBadgeWithPreset: ({ preset, className, ...restProps }: AvatarBadgeWithPresetProps) => React.JSX.Element;

package/dist/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js

@@ -1,5 +1,5 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { getBadgeIconSizeByImageBaseSize, ImageBase, ImageBaseContext } from "../../ImageBase/ImageBase";

package/dist/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  ImageBase,\n  type ImageBaseBadgeProps,\n  ImageBaseContext,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset\n    ? styles['AvatarBadge--preset-online']\n    : styles['AvatarBadge--preset-onlineMobile'];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles['AvatarBadge'], presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"names":["React","classNames","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","AvatarBadgeWithPreset","preset","className","restProps","size","useContext","badgeSize","isOnlinePreset","presetClassName","Icon","Badge","background","width","height"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,UAAU;AAa3D,OAAO,IAAMC,wBAAwB,iBAIH;+BAHhCC,QAAAA,oCAAS,0BACTC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,IAAM,AAAEE,OAASX,MAAMY,UAAU,CAACR,kBAA1BO;IACR,IAAME,YAAYX,gCAAgCS;IAClD,IAAMG,iBAAiBN,WAAW;IAClC,IAAMO,kBAAkBD,0FAEsB;IAC9C,IAAME,OAAOF,iBAAiBT,eAAeC,kBAAkB;IAE/D,qBACE,oBAACH,UAAUc,KAAK;QACdC,YAAW;QACXT,WAAWR,8BAAkCc,iBAAiBN;OAC1DC,0BAEJ,oBAACM;QAAKG,OAAON;QAAWO,QAAQP;;AAGtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  ImageBase,\n  type ImageBaseBadgeProps,\n  ImageBaseContext,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset\n    ? styles['AvatarBadge--preset-online']\n    : styles['AvatarBadge--preset-onlineMobile'];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles['AvatarBadge'], presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"names":["React","classNames","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","AvatarBadgeWithPreset","preset","className","restProps","size","useContext","badgeSize","isOnlinePreset","presetClassName","Icon","Badge","background","width","height"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,UAAU;AAa3D,OAAO,IAAMC,wBAAwB;+BACnCC,QAAAA,oCAAS,0BACTC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,IAAM,AAAEE,OAASX,MAAMY,WAAWR,kBAA1BO;IACR,IAAME,YAAYX,gCAAgCS;IAClD,IAAMG,iBAAiBN,WAAW;IAClC,IAAMO,kBAAkBD;IAGxB,IAAME,OAAOF,iBAAiBT,eAAeC;IAE7C,qBACE,oBAACH,UAAUc;QACTC,YAAW;QACXT,WAAWR,8BAAkCc,iBAAiBN;OAC1DC,0BAEJ,oBAACM;QAAKG,OAAON;QAAWO,QAAQP;;AAGtC,EAAE"}

package/dist/components/Avatar/AvatarBadge/icons.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Icon12Circle as Icon12CircleLib, Icon12OnlineMobile as Icon12OnlineMobileLib } from '@vkontakte/icons';
-export declare const Icon12Circle: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12CircleLib>) => JSX.Element;
-export declare const Icon12OnlineMobile: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12OnlineMobileLib>) => JSX.Element;
+export declare const Icon12Circle: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12CircleLib>) => React.JSX.Element;
+export declare const Icon12OnlineMobile: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12OnlineMobileLib>) => React.JSX.Element;

package/dist/components/Avatar/AvatarBadge/icons.js

@@ -1,6 +1,6 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { Icon12Circle as Icon12CircleLib, Icon12OnlineMobile as Icon12OnlineMobileLib } from "@vkontakte/icons";
 export var Icon12Circle = function(_param) {