@vkontakte/vkui 7.0.1 → 7.1.0

package/dist/context/CalendarDirectionContext.d.ts

@@ -0,0 +1,7 @@
+import { type Direction } from '../hooks/useDirection';
+export interface CalendarDirectionContextProps {
+    direction: Direction;
+}
+export declare const CalendarDirectionContext: import("react").Context<CalendarDirectionContextProps>;
+export declare const useCalendarDirectionContext: () => CalendarDirectionContextProps;
+//# sourceMappingURL=CalendarDirectionContext.d.ts.map

package/dist/context/CalendarDirectionContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDirectionContext.d.ts","sourceRoot":"","sources":["../../src/context/CalendarDirectionContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,WAAW,6BAA6B;IAC5C,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,wBAAwB,wDAEnC,CAAC;AAEH,eAAO,MAAM,2BAA2B,qCAA6C,CAAC"}

package/dist/context/CalendarDirectionContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+export const CalendarDirectionContext = createContext({
+    direction: 'ltr'
+});
+export const useCalendarDirectionContext = ()=>useContext(CalendarDirectionContext);
+
+//# sourceMappingURL=CalendarDirectionContext.js.map

package/dist/context/CalendarDirectionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/CalendarDirectionContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { type Direction } from '../hooks/useDirection';\n\nexport interface CalendarDirectionContextProps {\n  direction: Direction;\n}\n\nexport const CalendarDirectionContext = createContext<CalendarDirectionContextProps>({\n  direction: 'ltr',\n});\n\nexport const useCalendarDirectionContext = () => useContext(CalendarDirectionContext);\n"],"names":["createContext","useContext","CalendarDirectionContext","direction","useCalendarDirectionContext"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAOlD,OAAO,MAAMC,2BAA2BF,cAA6C;IACnFG,WAAW;AACb,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAMH,WAAWC,0BAA0B"}

package/dist/cssm/components/ActionSheet/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PlacementWithAuto } from '../../lib/floating/types/common';\nimport { type FocusTrapProps } from '../FocusTrap/FocusTrap';\n\nexport type ToggleRef = Element | null | undefined | React.RefObject<Element>;\n\nexport interface SharedDropdownProps extends FocusTrapProps {\n  closing: boolean;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   */\n  toggleRef: ToggleRef;\n  /**\n   * Позиционирование всплывающего окна для десктопа.\n   * Компонент выберет наилучшее расположение сам, но можно задать приоритетное направление с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ, где заданное кол-во единиц равняется пикселям\n   * */\n  popupOffsetDistance?: number;\n}\n"],"names":[],"mappings":"AAMA,WAgBC"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PlacementWithAuto } from '../../lib/floating/types/common';\nimport { type FocusTrapProps } from '../FocusTrap/FocusTrap';\n\nexport type ToggleRef = Element | null | undefined | React.RefObject<Element | null>;\n\nexport interface SharedDropdownProps extends FocusTrapProps {\n  closing: boolean;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   */\n  toggleRef: ToggleRef;\n  /**\n   * Позиционирование всплывающего окна для десктопа.\n   * Компонент выберет наилучшее расположение сам, но можно задать приоритетное направление с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ, где заданное кол-во единиц равняется пикселям\n   * */\n  popupOffsetDistance?: number;\n}\n"],"names":[],"mappings":"AAMA,WAgBC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { stopPropagation } from '../../lib/utils';\nimport type {\n  AlignType,\n  AnchorHTMLAttributesOnly,\n  HasDataAttribute,\n  HasRootRef,\n} from '../../types';\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport type { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport type { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertDescription, AlertTitle } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' | 'destructive' | 'default';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly,\n    HasDataAttribute {\n  title: string;\n  /**\n   * Обработчик клика на опцию. Если свойство `autoCloseDisabled` включено,\n   * то в аргументы `action` передаётся объект с функцией close,\n   * вызвав которую можно закрыть `action` вручную.\n   */\n  action?: (args?: { close?: VoidFunction }) => void;\n  /**\n   * По умолчанию клик на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство\n   * позволяет отключить такое поведение\n   */\n  autoCloseDisabled?: boolean;\n  mode: AlertActionMode;\n}\n\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    HasRootRef<HTMLDivElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actionsAlign?: AlignType;\n  actions?: AlertActionInterface[];\n  renderAction?: (props: AlertActionProps) => React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  onClose: VoidFunction;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Расположение кнопки закрытия (внутри и вне `popout'a`)\n   * Доступно только в `compact`-режиме, не отображается на `iOS`\n   */\n  dismissButtonMode?: 'inside' | 'outside';\n  /**\n   * `data-testid` для кнопки закрытия\n   */\n  dismissButtonTestId?: string;\n  usePortal?: AppRootPortalProps['usePortal'];\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  title,\n  description,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  renderAction,\n  actionsAlign,\n  dismissButtonMode = 'outside',\n  dismissButtonTestId,\n  getRootRef,\n  usePortal,\n  ...restProps\n}: AlertProps): React.ReactNode => {\n  const generatedId = React.useId();\n\n  const titleId = `vkui-alert-${generatedId}-title`;\n  const descriptionId = `vkui-alert-${generatedId}-description`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  const [closing, setClosing] = React.useState(false);\n  const itemActionCallbackRef = React.useRef(noop);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closing ? 'exit' : 'enter',\n    {\n      onExited() {\n        itemActionCallbackRef.current();\n        itemActionCallbackRef.current = noop;\n        onClose();\n      },\n    },\n  );\n  const isDismissButtonVisible = isDesktop && platform !== 'ios';\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n  }, []);\n\n  const onItemClick = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action: itemAction, autoCloseDisabled = false } = item;\n\n      if (autoCloseDisabled) {\n        itemAction && itemAction({ close });\n      } else {\n        if (itemAction) {\n          itemActionCallbackRef.current = itemAction;\n        }\n        setClosing(true);\n      }\n    },\n    [close],\n  );\n\n  useScrollLock();\n\n  return (\n    <AppRootPortal usePortal={usePortal}>\n      <PopoutWrapper\n        className={className}\n        closing={closing}\n        style={style}\n        onClick={close}\n        getRootRef={getRootRef}\n      >\n        <FocusTrap\n          {...restProps}\n          {...animationHandlers}\n          getRootRef={elementRef}\n          onClick={stopPropagation}\n          onClose={close}\n          autoFocus={animationState === 'entered'}\n          className={classNames(\n            styles.host,\n            platform === 'ios' && styles.ios,\n            platform === 'vkcom' && styles.vkcom,\n            closing ? styles.closing : styles.opening,\n            isDesktop && styles.desktop,\n          )}\n          role=\"alertdialog\"\n          aria-modal\n          aria-labelledby={titleId}\n          aria-describedby={descriptionId}\n        >\n          <div\n            className={classNames(\n              styles.content,\n              dismissButtonMode === 'inside' && styles.contentWithButton,\n            )}\n          >\n            {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}\n            {hasReactNode(description) && (\n              <AlertDescription id={descriptionId}>{description}</AlertDescription>\n            )}\n            {children}\n            {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n              <IconButton\n                label={dismissLabel}\n                className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}\n                onClick={close}\n                hoverMode=\"opacity\"\n                activeMode=\"opacity\"\n                data-testid={dismissButtonTestId}\n              >\n                <Icon20Cancel />\n              </IconButton>\n            )}\n          </div>\n          <AlertActions\n            actions={actions}\n            actionsAlign={actionsAlign}\n            actionsLayout={actionsLayout}\n            renderAction={renderAction}\n            onItemClick={onItemClick}\n          />\n          {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n            <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>\n              {dismissLabel}\n            </ModalDismissButton>\n          )}\n        </FocusTrap>\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","stopPropagation","AppRootPortal","useScrollLock","FocusTrap","IconButton","ModalDismissButton","PopoutWrapper","AlertActions","AlertDescription","AlertTitle","styles","Alert","actions","actionsLayout","children","className","style","title","description","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","dismissButtonTestId","getRootRef","usePortal","restProps","generatedId","useId","titleId","descriptionId","platform","isDesktop","closing","setClosing","useState","itemActionCallbackRef","useRef","animationState","animationHandlers","onExited","current","isDismissButtonVisible","elementRef","close","useCallback","onItemClick","item","action","itemAction","autoCloseDisabled","onClick","autoFocus","host","ios","vkcom","opening","desktop","role","aria-modal","aria-labelledby","aria-describedby","div","content","contentWithButton","id","label","dismiss","hoverMode","activeMode","data-testid"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { stopPropagation } from '../../lib/utils';\nimport type {\n  AlignType,\n  AnchorHTMLAttributesOnly,\n  HasDataAttribute,\n  HasRootRef,\n} from '../../types';\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport type { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport type { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertDescription, AlertTitle } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' | 'destructive' | 'default';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly,\n    HasDataAttribute {\n  title: string;\n  /**\n   * Обработчик клика на опцию. Если свойство `autoCloseDisabled` включено,\n   * то в аргументы `action` передаётся объект с функцией close,\n   * вызвав которую можно закрыть `action` вручную.\n   */\n  action?: (args?: { close?: VoidFunction }) => void;\n  /**\n   * По умолчанию клик на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство\n   * позволяет отключить такое поведение\n   */\n  autoCloseDisabled?: boolean;\n  mode: AlertActionMode;\n}\n\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    HasRootRef<HTMLDivElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actionsAlign?: AlignType;\n  actions?: AlertActionInterface[];\n  renderAction?: (props: AlertActionProps) => React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  onClose: VoidFunction;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Расположение кнопки закрытия (внутри и вне `popout'a`)\n   * Доступно только в `compact`-режиме, не отображается на `iOS`\n   */\n  dismissButtonMode?: 'inside' | 'outside';\n  /**\n   * Передает атрибут `data-testid` для кнопки закрытия\n   */\n  dismissButtonTestId?: string;\n  usePortal?: AppRootPortalProps['usePortal'];\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  title,\n  description,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  renderAction,\n  actionsAlign,\n  dismissButtonMode = 'outside',\n  dismissButtonTestId,\n  getRootRef,\n  usePortal,\n  ...restProps\n}: AlertProps): React.ReactNode => {\n  const generatedId = React.useId();\n\n  const titleId = `vkui-alert-${generatedId}-title`;\n  const descriptionId = `vkui-alert-${generatedId}-description`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  const [closing, setClosing] = React.useState(false);\n  const itemActionCallbackRef = React.useRef(noop);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closing ? 'exit' : 'enter',\n    {\n      onExited() {\n        itemActionCallbackRef.current();\n        itemActionCallbackRef.current = noop;\n        onClose();\n      },\n    },\n  );\n  const isDismissButtonVisible = isDesktop && platform !== 'ios';\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n  }, []);\n\n  const onItemClick = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action: itemAction, autoCloseDisabled = false } = item;\n\n      if (autoCloseDisabled) {\n        itemAction && itemAction({ close });\n      } else {\n        if (itemAction) {\n          itemActionCallbackRef.current = itemAction;\n        }\n        setClosing(true);\n      }\n    },\n    [close],\n  );\n\n  useScrollLock();\n\n  return (\n    <AppRootPortal usePortal={usePortal}>\n      <PopoutWrapper\n        className={className}\n        closing={closing}\n        style={style}\n        onClick={close}\n        getRootRef={getRootRef}\n      >\n        <FocusTrap\n          {...restProps}\n          {...animationHandlers}\n          getRootRef={elementRef}\n          onClick={stopPropagation}\n          onClose={close}\n          autoFocus={animationState === 'entered'}\n          className={classNames(\n            styles.host,\n            platform === 'ios' && styles.ios,\n            platform === 'vkcom' && styles.vkcom,\n            closing ? styles.closing : styles.opening,\n            isDesktop && styles.desktop,\n          )}\n          role=\"alertdialog\"\n          aria-modal\n          aria-labelledby={titleId}\n          aria-describedby={descriptionId}\n        >\n          <div\n            className={classNames(\n              styles.content,\n              dismissButtonMode === 'inside' && styles.contentWithButton,\n            )}\n          >\n            {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}\n            {hasReactNode(description) && (\n              <AlertDescription id={descriptionId}>{description}</AlertDescription>\n            )}\n            {children}\n            {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n              <IconButton\n                label={dismissLabel}\n                className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}\n                onClick={close}\n                hoverMode=\"opacity\"\n                activeMode=\"opacity\"\n                data-testid={dismissButtonTestId}\n              >\n                <Icon20Cancel />\n              </IconButton>\n            )}\n          </div>\n          <AlertActions\n            actions={actions}\n            actionsAlign={actionsAlign}\n            actionsLayout={actionsLayout}\n            renderAction={renderAction}\n            onItemClick={onItemClick}\n          />\n          {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n            <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>\n              {dismissLabel}\n            </ModalDismissButton>\n          )}\n        </FocusTrap>\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","stopPropagation","AppRootPortal","useScrollLock","FocusTrap","IconButton","ModalDismissButton","PopoutWrapper","AlertActions","AlertDescription","AlertTitle","styles","Alert","actions","actionsLayout","children","className","style","title","description","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","dismissButtonTestId","getRootRef","usePortal","restProps","generatedId","useId","titleId","descriptionId","platform","isDesktop","closing","setClosing","useState","itemActionCallbackRef","useRef","animationState","animationHandlers","onExited","current","isDismissButtonVisible","elementRef","close","useCallback","onItemClick","item","action","itemAction","autoCloseDisabled","onClick","autoFocus","host","ios","vkcom","opening","desktop","role","aria-modal","aria-labelledby","aria-describedby","div","content","contentWithButton","id","label","dismiss","hoverMode","activeMode","data-testid"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';\nimport { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';\nimport { AppRootContext } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer/AppRootStyleContainer';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport { useSafeAreaInsetsMemo } from './helpers';\nimport type {\n  AppRootLayout,\n  AppRootMode,\n  AppRootScroll,\n  AppRootUserSelectMode,\n  SafeAreaInsets,\n} from './types';\nimport styles from './AppRoot.module.css';\n\nconst layoutClassNames = {\n  card: styles.layoutCard,\n  plain: styles.layoutPlain,\n};\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: AppRootMode;\n  /**\n   * - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.\n   * - `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).\n   *\n   * Полезно при использовании `mode=\"embedded\"`.\n   */\n  scroll?: AppRootScroll;\n  /**\n   * см. документацию [mdn web docs | env#values](https://developer.mozilla.org/en-US/docs/Web/CSS/env#values).\n   */\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  /**\n   * Глобально задаёт тип оформления макета для компонентов\n   * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).\n   */\n  layout?: AppRootLayout;\n  /**\n   * Задаёт режим выбора текста (выделения текста) для всего приложения.\n   * По умолчанию, если режим не задан, запрещает выбор текста в приложениях,\n   * запущенных в webview (по значению свойства `isWebView` из [ConfigProvider](https://vkcom.github.io/VKUI/#/ConfigProvider)).\n   *\n   * - `enabled-with-pointer` – разрешает выбор текста, если устройство ввода типа `pointer` (например, `мышь`), в остальных случаях запрещает;\n   * - `disabled` – запрещает выбор текста;\n   * - `enabled` – разрешает выбор текста.\n   *\n   * @since 6.2.0\n   */\n  userSelectMode?: AppRootUserSelectMode;\n  /*\n   * По умолчанию в режиме `mode=\"full\"` VKUI в рантайме выставляет:\n   * - класс .vkui на html элемент\n   * - класс .vkui__root на элемент-контейнер, в который монтируется VKUI\n   * С помощью этой опции такое поведение можно отключить.\n   *\n   * Для корректной работы SSR рекоммендуется выставлять эти классы самостоятельно\n   * и отключить это поведение.\n   */\n  disableSettingVKUIClassesInRuntime?: 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,\n  disablePortal = false,\n  disableParentTransformForPositionFixedElements,\n  safeAreaInsets: safeAreaInsetsProp,\n  layout,\n  userSelectMode,\n  disableSettingVKUIClassesInRuntime,\n  className,\n  ...props\n}: AppRootProps): React.ReactNode => {\n  const appRootRef = React.useRef<HTMLDivElement | null>(null);\n\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const safeAreaInsets = useSafeAreaInsetsMemo(safeAreaInsetsProp);\n\n  const contextValue = React.useMemo(\n    () => ({\n      appRoot: appRootRef,\n      portalRoot,\n      safeAreaInsets,\n      embedded: mode === 'embedded',\n      mode,\n      disablePortal,\n      layout,\n      get keyboardInput() {\n        return isKeyboardInputActiveRef.current;\n      },\n      userSelectMode,\n    }),\n    [\n      portalRoot,\n      disablePortal,\n      isKeyboardInputActiveRef,\n      layout,\n      mode,\n      safeAreaInsets,\n      userSelectMode,\n    ],\n  );\n\n  /*\n   * Вешаем класс токенов на html в режиме full.\n   * Это необходимо, чтобы цвета html элемента и скроллбара соответствовали текущей цветовой схеме:\n   * - фон html элемента виден, если пользователь оверскролит. Тогда возникает анимация bounce-эффекта и виден фон html элемента. Без токенов в черной теме будет выглядывать белый фон.\n   * - цвет системного сколлбара зависит от color-sheme свойства, значение которого задётся токенами и должно быть выставлено именно на html элементе.\n   * В режме SSR пользователи сами могу задать этот класс на html-элементе. главное, чтобы он соответствовал переданным platform и appearence свойствам.\n   */\n  useSyncHTMLWithTokens({ appRootRef, enable: mode === 'full' });\n  /*\n   * По умолчанию VKUI будет выставлять .vkui на html и .vkui__root на контейнере в режиме full.\n   * В режиме embedded будет выставлять только .vkui__root и .vkui__root--embedded на контейнере.\n   * В режиме partial мы классы не выставляем.\n   */\n  useSyncHTMLWithBaseVKUIClasses({\n    appRootRef,\n    mode,\n    layout,\n    enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime,\n  });\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  return mode === 'partial' ? (\n    <AppRootContext.Provider value={contextValue}>\n      <ScrollController elRef={appRootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  ) : (\n    <AppRootContext.Provider value={contextValue}>\n      <AppRootStyleContainer\n        getRootRef={appRootRef}\n        className={classNames(\n          className,\n          styles.host,\n          layout && layoutClassNames[layout],\n          mode === 'embedded' && !disableParentTransformForPositionFixedElements\n            ? styles.transformForPositionFixedElements\n            : undefined,\n        )}\n        {...props}\n      >\n        <ScrollController elRef={appRootRef}>{children}</ScrollController>\n      </AppRootStyleContainer>\n    </AppRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","useKeyboardInputTracker","useSyncHTMLWithBaseVKUIClasses","useSyncHTMLWithTokens","AppRootContext","AppRootStyleContainer","ElementScrollController","GlobalScrollController","useSafeAreaInsetsMemo","styles","layoutClassNames","card","layoutCard","plain","layoutPlain","AppRoot","children","mode","scroll","portalRoot","disablePortal","disableParentTransformForPositionFixedElements","safeAreaInsets","safeAreaInsetsProp","layout","userSelectMode","disableSettingVKUIClassesInRuntime","className","props","appRootRef","useRef","isKeyboardInputActiveRef","contextValue","useMemo","appRoot","embedded","keyboardInput","current","enable","ScrollController","Provider","value","elRef","getRootRef","host","transformForPositionFixedElements","undefined"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,8BAA8B,QAAQ,gDAA6C;AAC5F,SAASC,qBAAqB,QAAQ,uCAAoC;AAC1E,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,qBAAqB,QAAQ,mDAAgD;AACtF,SAASC,uBAAuB,EAAEC,sBAAsB,QAAQ,qBAAkB;AAClF,SAASC,qBAAqB,QAAQ,eAAY;AAQlD,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,mBAAmB;IACvBC,MAAMF,OAAOG,UAAU;IACvBC,OAAOJ,OAAOK,WAAW;AAC3B;AA4DA;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,QAAQ,EACRC,OAAO,MAAM,EACbC,SAAS,QAAQ,EACjBC,UAAU,EACVC,gBAAgB,KAAK,EACrBC,8CAA8C,EAC9CC,gBAAgBC,kBAAkB,EAClCC,MAAM,EACNC,cAAc,EACdC,kCAAkC,EAClCC,SAAS,EACT,GAAGC,OACU;IACb,MAAMC,aAAa9B,MAAM+B,MAAM,CAAwB;IAEvD,MAAMC,2BAA2B9B;IACjC,MAAMqB,iBAAiBd,sBAAsBe;IAE7C,MAAMS,eAAejC,MAAMkC,OAAO,CAChC,IAAO,CAAA;YACLC,SAASL;YACTV;YACAG;YACAa,UAAUlB,SAAS;YACnBA;YACAG;YACAI;YACA,IAAIY,iBAAgB;gBAClB,OAAOL,yBAAyBM,OAAO;YACzC;YACAZ;QACF,CAAA,GACA;QACEN;QACAC;QACAW;QACAP;QACAP;QACAK;QACAG;KACD;IAGH;;;;;;GAMC,GACDtB,sBAAsB;QAAE0B;QAAYS,QAAQrB,SAAS;IAAO;IAC5D;;;;GAIC,GACDf,+BAA+B;QAC7B2B;QACAZ;QACAO;QACAc,QAAQrB,SAAS,aAAa,CAACS;IACjC;IAEA,MAAMa,mBAAmBxC,MAAMkC,OAAO,CACpC,IAAOf,WAAW,YAAYZ,0BAA0BC,wBACxD;QAACW;KAAO;IAGV,OAAOD,SAAS,0BACd,KAACb,eAAeoC,QAAQ;QAACC,OAAOT;kBAC9B,cAAA,KAACO;YAAiBG,OAAOb;sBAAab;;uBAGxC,KAACZ,eAAeoC,QAAQ;QAACC,OAAOT;kBAC9B,cAAA,KAAC3B;YACCsC,YAAYd;YACZF,WAAW3B,WACT2B,WACAlB,OAAOmC,IAAI,EACXpB,UAAUd,gBAAgB,CAACc,OAAO,EAClCP,SAAS,cAAc,CAACI,iDACpBZ,OAAOoC,iCAAiC,GACxCC;YAEL,GAAGlB,KAAK;sBAET,cAAA,KAACW;gBAAiBG,OAAOb;0BAAab;;;;AAI9C,EAAE"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';\nimport { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';\nimport { AppRootContext } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer/AppRootStyleContainer';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport { useSafeAreaInsetsMemo } from './helpers';\nimport type {\n  AppRootLayout,\n  AppRootMode,\n  AppRootScroll,\n  AppRootUserSelectMode,\n  SafeAreaInsets,\n} from './types';\nimport styles from './AppRoot.module.css';\n\nconst layoutClassNames = {\n  card: styles.layoutCard,\n  plain: styles.layoutPlain,\n};\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: AppRootMode;\n  /**\n   * - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.\n   * - `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).\n   *\n   * Полезно при использовании `mode=\"embedded\"`.\n   */\n  scroll?: AppRootScroll;\n  /**\n   * см. документацию [mdn web docs | env#values](https://developer.mozilla.org/en-US/docs/Web/CSS/env#values).\n   */\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement | null> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  /**\n   * Глобально задаёт тип оформления макета для компонентов\n   * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).\n   */\n  layout?: AppRootLayout;\n  /**\n   * Задаёт режим выбора текста (выделения текста) для всего приложения.\n   * По умолчанию, если режим не задан, запрещает выбор текста в приложениях,\n   * запущенных в webview (по значению свойства `isWebView` из [ConfigProvider](https://vkcom.github.io/VKUI/#/ConfigProvider)).\n   *\n   * - `enabled-with-pointer` – разрешает выбор текста, если устройство ввода типа `pointer` (например, `мышь`), в остальных случаях запрещает;\n   * - `disabled` – запрещает выбор текста;\n   * - `enabled` – разрешает выбор текста.\n   *\n   * @since 6.2.0\n   */\n  userSelectMode?: AppRootUserSelectMode;\n  /*\n   * По умолчанию в режиме `mode=\"full\"` VKUI в рантайме выставляет:\n   * - класс .vkui на html элемент\n   * - класс .vkui__root на элемент-контейнер, в который монтируется VKUI\n   * С помощью этой опции такое поведение можно отключить.\n   *\n   * Для корректной работы SSR рекоммендуется выставлять эти классы самостоятельно\n   * и отключить это поведение.\n   */\n  disableSettingVKUIClassesInRuntime?: 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,\n  disablePortal = false,\n  disableParentTransformForPositionFixedElements,\n  safeAreaInsets: safeAreaInsetsProp,\n  layout,\n  userSelectMode,\n  disableSettingVKUIClassesInRuntime,\n  className,\n  ...props\n}: AppRootProps): React.ReactNode => {\n  const appRootRef = React.useRef<HTMLDivElement | null>(null);\n\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const safeAreaInsets = useSafeAreaInsetsMemo(safeAreaInsetsProp);\n\n  const contextValue = React.useMemo(\n    () => ({\n      appRoot: appRootRef,\n      portalRoot,\n      safeAreaInsets,\n      embedded: mode === 'embedded',\n      mode,\n      disablePortal,\n      layout,\n      get keyboardInput() {\n        return isKeyboardInputActiveRef.current;\n      },\n      userSelectMode,\n    }),\n    [\n      portalRoot,\n      disablePortal,\n      isKeyboardInputActiveRef,\n      layout,\n      mode,\n      safeAreaInsets,\n      userSelectMode,\n    ],\n  );\n\n  /*\n   * Вешаем класс токенов на html в режиме full.\n   * Это необходимо, чтобы цвета html элемента и скроллбара соответствовали текущей цветовой схеме:\n   * - фон html элемента виден, если пользователь оверскролит. Тогда возникает анимация bounce-эффекта и виден фон html элемента. Без токенов в черной теме будет выглядывать белый фон.\n   * - цвет системного сколлбара зависит от color-sheme свойства, значение которого задётся токенами и должно быть выставлено именно на html элементе.\n   * В режме SSR пользователи сами могу задать этот класс на html-элементе. главное, чтобы он соответствовал переданным platform и appearence свойствам.\n   */\n  useSyncHTMLWithTokens({ appRootRef, enable: mode === 'full' });\n  /*\n   * По умолчанию VKUI будет выставлять .vkui на html и .vkui__root на контейнере в режиме full.\n   * В режиме embedded будет выставлять только .vkui__root и .vkui__root--embedded на контейнере.\n   * В режиме partial мы классы не выставляем.\n   */\n  useSyncHTMLWithBaseVKUIClasses({\n    appRootRef,\n    mode,\n    layout,\n    enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime,\n  });\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  return mode === 'partial' ? (\n    <AppRootContext.Provider value={contextValue}>\n      <ScrollController elRef={appRootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  ) : (\n    <AppRootContext.Provider value={contextValue}>\n      <AppRootStyleContainer\n        getRootRef={appRootRef}\n        className={classNames(\n          className,\n          styles.host,\n          layout && layoutClassNames[layout],\n          mode === 'embedded' && !disableParentTransformForPositionFixedElements\n            ? styles.transformForPositionFixedElements\n            : undefined,\n        )}\n        {...props}\n      >\n        <ScrollController elRef={appRootRef}>{children}</ScrollController>\n      </AppRootStyleContainer>\n    </AppRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","useKeyboardInputTracker","useSyncHTMLWithBaseVKUIClasses","useSyncHTMLWithTokens","AppRootContext","AppRootStyleContainer","ElementScrollController","GlobalScrollController","useSafeAreaInsetsMemo","styles","layoutClassNames","card","layoutCard","plain","layoutPlain","AppRoot","children","mode","scroll","portalRoot","disablePortal","disableParentTransformForPositionFixedElements","safeAreaInsets","safeAreaInsetsProp","layout","userSelectMode","disableSettingVKUIClassesInRuntime","className","props","appRootRef","useRef","isKeyboardInputActiveRef","contextValue","useMemo","appRoot","embedded","keyboardInput","current","enable","ScrollController","Provider","value","elRef","getRootRef","host","transformForPositionFixedElements","undefined"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,8BAA8B,QAAQ,gDAA6C;AAC5F,SAASC,qBAAqB,QAAQ,uCAAoC;AAC1E,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,qBAAqB,QAAQ,mDAAgD;AACtF,SAASC,uBAAuB,EAAEC,sBAAsB,QAAQ,qBAAkB;AAClF,SAASC,qBAAqB,QAAQ,eAAY;AAQlD,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,mBAAmB;IACvBC,MAAMF,OAAOG,UAAU;IACvBC,OAAOJ,OAAOK,WAAW;AAC3B;AA4DA;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,QAAQ,EACRC,OAAO,MAAM,EACbC,SAAS,QAAQ,EACjBC,UAAU,EACVC,gBAAgB,KAAK,EACrBC,8CAA8C,EAC9CC,gBAAgBC,kBAAkB,EAClCC,MAAM,EACNC,cAAc,EACdC,kCAAkC,EAClCC,SAAS,EACT,GAAGC,OACU;IACb,MAAMC,aAAa9B,MAAM+B,MAAM,CAAwB;IAEvD,MAAMC,2BAA2B9B;IACjC,MAAMqB,iBAAiBd,sBAAsBe;IAE7C,MAAMS,eAAejC,MAAMkC,OAAO,CAChC,IAAO,CAAA;YACLC,SAASL;YACTV;YACAG;YACAa,UAAUlB,SAAS;YACnBA;YACAG;YACAI;YACA,IAAIY,iBAAgB;gBAClB,OAAOL,yBAAyBM,OAAO;YACzC;YACAZ;QACF,CAAA,GACA;QACEN;QACAC;QACAW;QACAP;QACAP;QACAK;QACAG;KACD;IAGH;;;;;;GAMC,GACDtB,sBAAsB;QAAE0B;QAAYS,QAAQrB,SAAS;IAAO;IAC5D;;;;GAIC,GACDf,+BAA+B;QAC7B2B;QACAZ;QACAO;QACAc,QAAQrB,SAAS,aAAa,CAACS;IACjC;IAEA,MAAMa,mBAAmBxC,MAAMkC,OAAO,CACpC,IAAOf,WAAW,YAAYZ,0BAA0BC,wBACxD;QAACW;KAAO;IAGV,OAAOD,SAAS,0BACd,KAACb,eAAeoC,QAAQ;QAACC,OAAOT;kBAC9B,cAAA,KAACO;YAAiBG,OAAOb;sBAAab;;uBAGxC,KAACZ,eAAeoC,QAAQ;QAACC,OAAOT;kBAC9B,cAAA,KAAC3B;YACCsC,YAAYd;YACZF,WAAW3B,WACT2B,WACAlB,OAAOmC,IAAI,EACXpB,UAAUd,gBAAgB,CAACc,OAAO,EAClCP,SAAS,cAAc,CAACI,iDACpBZ,OAAOoC,iCAAiC,GACxCC;YAEL,GAAGlB,KAAK;sBAET,cAAA,KAACW;gBAAiBG,OAAOb;0BAAab;;;;AAI9C,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { type AppRootUserSelectMode, type SafeAreaInsets } from './types';\n\nexport interface AppRootContextInterface {\n  appRoot: React.RefObject<HTMLElement>;\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  safeAreaInsets?: SafeAreaInsets;\n  embedded: boolean;\n  mode: 'partial' | 'embedded' | 'full';\n  keyboardInput: boolean;\n  disablePortal: boolean;\n  layout?: 'card' | 'plain';\n  userSelectMode?: AppRootUserSelectMode;\n}\n\n/**\n * Вынесен в константу, чтобы можно было в тестах создавать свой контекст и сливать перед этим значения по-умолчанию\n *\n * > Note: не смог убрать из покрытия через 'istanbul ignore next'.\n */\nexport const DEFAULT_APP_ROOT_CONTEXT_VALUE: AppRootContextInterface = {\n  appRoot: React.createRef(),\n  mode: 'full',\n  portalRoot: null,\n  safeAreaInsets: undefined,\n  embedded: false,\n  keyboardInput: false,\n  disablePortal: false,\n};\n\nexport const AppRootContext: React.Context<AppRootContextInterface> =\n  React.createContext<AppRootContextInterface>(DEFAULT_APP_ROOT_CONTEXT_VALUE);\n"],"names":["React","DEFAULT_APP_ROOT_CONTEXT_VALUE","appRoot","createRef","mode","portalRoot","safeAreaInsets","undefined","embedded","keyboardInput","disablePortal","AppRootContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAe/B;;;;CAIC,GACD,OAAO,MAAMC,iCAA0D;IACrEC,SAASF,MAAMG,SAAS;IACxBC,MAAM;IACNC,YAAY;IACZC,gBAAgBC;IAChBC,UAAU;IACVC,eAAe;IACfC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,iBACXX,MAAMY,aAAa,CAA0BX,gCAAgC"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { type AppRootUserSelectMode, type SafeAreaInsets } from './types';\n\nexport interface AppRootContextInterface {\n  appRoot: React.RefObject<HTMLElement | null>;\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement | null> | null;\n  safeAreaInsets?: SafeAreaInsets;\n  embedded: boolean;\n  mode: 'partial' | 'embedded' | 'full';\n  keyboardInput: boolean;\n  disablePortal: boolean;\n  layout?: 'card' | 'plain';\n  userSelectMode?: AppRootUserSelectMode;\n}\n\n/**\n * Вынесен в константу, чтобы можно было в тестах создавать свой контекст и сливать перед этим значения по-умолчанию\n *\n * > Note: не смог убрать из покрытия через 'istanbul ignore next'.\n */\nexport const DEFAULT_APP_ROOT_CONTEXT_VALUE: AppRootContextInterface = {\n  appRoot: React.createRef(),\n  mode: 'full',\n  portalRoot: null,\n  safeAreaInsets: undefined,\n  embedded: false,\n  keyboardInput: false,\n  disablePortal: false,\n};\n\nexport const AppRootContext: React.Context<AppRootContextInterface> =\n  React.createContext<AppRootContextInterface>(DEFAULT_APP_ROOT_CONTEXT_VALUE);\n"],"names":["React","DEFAULT_APP_ROOT_CONTEXT_VALUE","appRoot","createRef","mode","portalRoot","safeAreaInsets","undefined","embedded","keyboardInput","disablePortal","AppRootContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAe/B;;;;CAIC,GACD,OAAO,MAAMC,iCAA0D;IACrEC,SAASF,MAAMG,SAAS;IACxBC,MAAM;IACNC,YAAY;IACZC,gBAAgBC;IAChBC,UAAU;IACVC,eAAe;IACfC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,iBACXX,MAAMY,aAAa,CAA0BX,gCAAgC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme';\nimport { createPortal } from '../../lib/createPortal';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer/AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` в качестве портала будет использован `portalRoot`\n   * из контекста `AppRoot` если он передан в `AppRoot`, иначе `document.body`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   *\n   * По умолчанию в качестве портала будет использован `document.body`\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } =\n    React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n\n  const portalContainer = usePortalContainer(usePortal);\n\n  if (canUsePortal && portalContainer) {\n    return createPortal(\n      <ColorSchemeProvider value={colorScheme}>\n        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>\n      </ColorSchemeProvider>,\n      portalContainer,\n    );\n  }\n\n  return children;\n};\n\nfunction shouldUsePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disableCreatePortalInGlobalPortalRoot: boolean,\n) {\n  if (usePortal === undefined) {\n    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';\n  }\n\n  if (typeof usePortal !== 'boolean') {\n    return true;\n  }\n\n  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;\n}\n\nfunction usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {\n  const { portalRoot: portalRootFromContext } = React.useContext(AppRootContext);\n\n  const { document } = useDOM();\n\n  if (usePortal && typeof usePortal !== 'boolean') {\n    return isRefObject(usePortal) ? usePortal.current : usePortal;\n  }\n\n  const resolvedPortalFromContext = isRefObject(portalRootFromContext)\n    ? portalRootFromContext.current\n    : portalRootFromContext;\n  // если portalRoot не передали через AppRoot, то мы используем body\n  // мы можем использовать body как портал,\n  // так как все стили передаются вместе с AppRootStyleContainer\n  const portalRoot = resolvedPortalFromContext || document?.body || null;\n  return portalRoot;\n}\n"],"names":["React","useColorScheme","createPortal","useDOM","isRefObject","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","value","undefined","portalRoot","portalRootFromContext","document","current","resolvedPortalFromContext","body"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,mDAAgD;AActF,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EAAEC,IAAI,EAAEC,eAAeC,qCAAqC,EAAE,GAClEd,MAAMe,UAAU,CAACT;IACnB,MAAMU,cAAcf;IAEpB,MAAMgB,eAAeC,gBACnBR,WACAE,MACAO,QAAQL;IAGV,MAAMM,kBAAkBC,mBAAmBX;IAE3C,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOlB,2BACL,KAACG;YAAoBiB,OAAON;sBAC1B,cAAA,KAACT;gBAAsBI,WAAWA;0BAAYF;;YAEhDW;IAEJ;IAEA,OAAOX;AACT,EAAE;AAEF,SAASS,gBACPR,SAA0C,EAC1CE,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIJ,cAAca,WAAW;QAC3B,OAAOT,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOF,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOI,0CAA0C,SAASJ,cAAc;AAC1E;AAEA,SAASW,mBAAmBX,SAA0C;IACpE,MAAM,EAAEc,YAAYC,qBAAqB,EAAE,GAAGzB,MAAMe,UAAU,CAACT;IAE/D,MAAM,EAAEoB,QAAQ,EAAE,GAAGvB;IAErB,IAAIO,aAAa,OAAOA,cAAc,WAAW;QAC/C,OAAON,YAAYM,aAAaA,UAAUiB,OAAO,GAAGjB;IACtD;IAEA,MAAMkB,4BAA4BxB,YAAYqB,yBAC1CA,sBAAsBE,OAAO,GAC7BF;IACJ,mEAAmE;IACnE,yCAAyC;IACzC,8DAA8D;IAC9D,MAAMD,aAAaI,6BAA6BF,UAAUG,QAAQ;IAClE,OAAOL;AACT"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme';\nimport { createPortal } from '../../lib/createPortal';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer/AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` в качестве портала будет использован `portalRoot`\n   * из контекста `AppRoot` если он передан в `AppRoot`, иначе `document.body`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   *\n   * По умолчанию в качестве портала будет использован `document.body`\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement | null> | null;\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } =\n    React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n\n  const portalContainer = usePortalContainer(usePortal);\n\n  if (canUsePortal && portalContainer) {\n    return createPortal(\n      <ColorSchemeProvider value={colorScheme}>\n        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>\n      </ColorSchemeProvider>,\n      portalContainer,\n    );\n  }\n\n  return children;\n};\n\nfunction shouldUsePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disableCreatePortalInGlobalPortalRoot: boolean,\n) {\n  if (usePortal === undefined) {\n    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';\n  }\n\n  if (typeof usePortal !== 'boolean') {\n    return true;\n  }\n\n  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;\n}\n\nfunction usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {\n  const { portalRoot: portalRootFromContext } = React.useContext(AppRootContext);\n\n  const { document } = useDOM();\n\n  if (usePortal && typeof usePortal !== 'boolean') {\n    return isRefObject(usePortal) ? usePortal.current : usePortal;\n  }\n\n  const resolvedPortalFromContext = isRefObject(portalRootFromContext)\n    ? portalRootFromContext.current\n    : portalRootFromContext;\n  // если portalRoot не передали через AppRoot, то мы используем body\n  // мы можем использовать body как портал,\n  // так как все стили передаются вместе с AppRootStyleContainer\n  const portalRoot = resolvedPortalFromContext || document?.body || null;\n  return portalRoot;\n}\n"],"names":["React","useColorScheme","createPortal","useDOM","isRefObject","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","value","undefined","portalRoot","portalRootFromContext","document","current","resolvedPortalFromContext","body"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,mDAAgD;AActF,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EAAEC,IAAI,EAAEC,eAAeC,qCAAqC,EAAE,GAClEd,MAAMe,UAAU,CAACT;IACnB,MAAMU,cAAcf;IAEpB,MAAMgB,eAAeC,gBACnBR,WACAE,MACAO,QAAQL;IAGV,MAAMM,kBAAkBC,mBAAmBX;IAE3C,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOlB,2BACL,KAACG;YAAoBiB,OAAON;sBAC1B,cAAA,KAACT;gBAAsBI,WAAWA;0BAAYF;;YAEhDW;IAEJ;IAEA,OAAOX;AACT,EAAE;AAEF,SAASS,gBACPR,SAA0C,EAC1CE,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIJ,cAAca,WAAW;QAC3B,OAAOT,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOF,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOI,0CAA0C,SAASJ,cAAc;AAC1E;AAEA,SAASW,mBAAmBX,SAA0C;IACpE,MAAM,EAAEc,YAAYC,qBAAqB,EAAE,GAAGzB,MAAMe,UAAU,CAACT;IAE/D,MAAM,EAAEoB,QAAQ,EAAE,GAAGvB;IAErB,IAAIO,aAAa,OAAOA,cAAc,WAAW;QAC/C,OAAON,YAAYM,aAAaA,UAAUiB,OAAO,GAAGjB;IACtD;IAEA,MAAMkB,4BAA4BxB,YAAYqB,yBAC1CA,sBAAsBE,OAAO,GAC7BF;IACJ,mEAAmE;IACnE,yCAAyC;IACzC,8DAA8D;IAC9D,MAAMD,aAAaI,6BAA6BF,UAAUG,QAAQ;IAClE,OAAOL;AACT"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useCounter } from '../../hooks/useCounter';\nimport { useDOM } from '../../lib/dom';\nimport type { HasChildren } from '../../types';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overscrollBehavior: '',\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 type GetScrollOptions = {\n  compensateKeyboardHeight?: boolean;\n};\n\nexport interface ScrollContextInterface {\n  getScroll: (this: void, options?: GetScrollOptions) => { x: number; y: number };\n  scrollTo: (this: void, x?: number, y?: number) => void;\n  /**\n   * Увеличивает счетчик блокировки прокрутки\n   */\n  incrementScrollLockCounter: (this: void) => void;\n  /**\n   * Уменьшает счетчик блокировки прокрутки\n   */\n  decrementScrollLockCounter: (this: void) => void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext: React.Context<ScrollContextInterface> =\n  React.createContext<ScrollContextInterface>({\n    getScroll: () => ({ x: 0, y: 0 }),\n    scrollTo: noop,\n    incrementScrollLockCounter: noop,\n    decrementScrollLockCounter: noop,\n  });\n\nexport const useScroll = (): ScrollContextInterface => React.useContext(ScrollContext);\n\n/**\n * Управляет блокировкой окна в зависимости от внутреннего счетчика.\n * Если счетчик больше нуля, требуется заблокировать прокрутку\n */\nfunction useScrollLockController(enableScrollLock: () => void, disableScrollLock: () => void) {\n  const [count, { increment: incrementScrollLockCounter, decrement: decrementScrollLockCounter }] =\n    useCounter(0);\n\n  const needLockScroll = count > 0;\n\n  React.useEffect(() => {\n    if (needLockScroll) {\n      enableScrollLock();\n    } else {\n      disableScrollLock();\n    }\n  }, [needLockScroll, enableScrollLock, disableScrollLock]);\n\n  return {\n    incrementScrollLockCounter,\n    decrementScrollLockCounter,\n  };\n}\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement>;\n}\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps): React.ReactNode => {\n  const { window, document } = useDOM();\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    (options = { compensateKeyboardHeight: true }) => ({\n      x: window!.pageXOffset,\n      y: options.compensateKeyboardHeight\n        ? getPageYOffsetWithoutKeyboardHeight(window!)\n        : window!.pageYOffset,\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(() => {\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!.documentElement.style, { overscrollBehavior: 'none' });\n    Object.assign(document!.body.style, {\n      position: 'fixed',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overscrollBehavior: 'none',\n      overflowY,\n      overflowX,\n    });\n  }, [document, window]);\n\n  const disableScrollLock = React.useCallback(() => {\n    const scrollY = document!.body.style.top;\n    const scrollX = document!.body.style.left;\n\n    Object.assign(document!.documentElement.style, { overscrollBehavior: '' });\n    clearDisableScrollStyle(document!.body);\n    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n  }, [document, window]);\n\n  const { incrementScrollLockCounter, decrementScrollLockCounter } = useScrollLockController(\n    enableScrollLock,\n    disableScrollLock,\n  );\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      incrementScrollLockCounter,\n      decrementScrollLockCounter,\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, incrementScrollLockCounter, decrementScrollLockCounter],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({\n  elRef,\n  children,\n}: ScrollControllerProps): React.ReactNode => {\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(() => {\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  }, [elRef]);\n\n  const disableScrollLock = React.useCallback(() => {\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  }, [elRef]);\n\n  const { incrementScrollLockCounter, decrementScrollLockCounter } = useScrollLockController(\n    enableScrollLock,\n    disableScrollLock,\n  );\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      incrementScrollLockCounter,\n      decrementScrollLockCounter,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, incrementScrollLockCounter, decrementScrollLockCounter],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Блокирует прокрутку окна\n *\n * @param enabled - если false то не будет блокировать\n */\nexport const useScrollLock = (enabled = true): void => {\n  const { incrementScrollLockCounter, decrementScrollLockCounter } = useScroll();\n\n  React.useEffect(() => {\n    if (enabled) {\n      incrementScrollLockCounter();\n      return decrementScrollLockCounter;\n    }\n\n    return noop;\n  }, [enabled, incrementScrollLockCounter, decrementScrollLockCounter]);\n};\n"],"names":["React","noop","clamp","useCounter","useDOM","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overscrollBehavior","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","ScrollContext","createContext","getScroll","x","y","scrollTo","incrementScrollLockCounter","decrementScrollLockCounter","useScroll","useContext","useScrollLockController","enableScrollLock","disableScrollLock","count","increment","decrement","needLockScroll","useEffect","GlobalScrollController","children","beforeScrollLockFnSetRef","useRef","Set","useCallback","options","compensateKeyboardHeight","pageXOffset","body","scrollWidth","innerWidth","scrollHeight","current","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","Provider","value","ElementScrollController","elRef","scrollLeft","scrollTop","el","useScrollLock","enabled"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useCounter } from '../../hooks/useCounter';\nimport { useDOM } from '../../lib/dom';\nimport type { HasChildren } from '../../types';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overscrollBehavior: '',\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 type GetScrollOptions = {\n  compensateKeyboardHeight?: boolean;\n};\n\nexport interface ScrollContextInterface {\n  getScroll: (this: void, options?: GetScrollOptions) => { x: number; y: number };\n  scrollTo: (this: void, x?: number, y?: number) => void;\n  /**\n   * Увеличивает счетчик блокировки прокрутки\n   */\n  incrementScrollLockCounter: (this: void) => void;\n  /**\n   * Уменьшает счетчик блокировки прокрутки\n   */\n  decrementScrollLockCounter: (this: void) => void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext: React.Context<ScrollContextInterface> =\n  React.createContext<ScrollContextInterface>({\n    getScroll: () => ({ x: 0, y: 0 }),\n    scrollTo: noop,\n    incrementScrollLockCounter: noop,\n    decrementScrollLockCounter: noop,\n  });\n\nexport const useScroll = (): ScrollContextInterface => React.useContext(ScrollContext);\n\n/**\n * Управляет блокировкой окна в зависимости от внутреннего счетчика.\n * Если счетчик больше нуля, требуется заблокировать прокрутку\n */\nfunction useScrollLockController(enableScrollLock: () => void, disableScrollLock: () => void) {\n  const [count, { increment: incrementScrollLockCounter, decrement: decrementScrollLockCounter }] =\n    useCounter(0);\n\n  const needLockScroll = count > 0;\n\n  React.useEffect(() => {\n    if (needLockScroll) {\n      enableScrollLock();\n    } else {\n      disableScrollLock();\n    }\n  }, [needLockScroll, enableScrollLock, disableScrollLock]);\n\n  return {\n    incrementScrollLockCounter,\n    decrementScrollLockCounter,\n  };\n}\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement | null>;\n}\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps): React.ReactNode => {\n  const { window, document } = useDOM();\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    (options = { compensateKeyboardHeight: true }) => ({\n      x: window!.pageXOffset,\n      y: options.compensateKeyboardHeight\n        ? getPageYOffsetWithoutKeyboardHeight(window!)\n        : window!.pageYOffset,\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(() => {\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!.documentElement.style, { overscrollBehavior: 'none' });\n    Object.assign(document!.body.style, {\n      position: 'fixed',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overscrollBehavior: 'none',\n      overflowY,\n      overflowX,\n    });\n  }, [document, window]);\n\n  const disableScrollLock = React.useCallback(() => {\n    const scrollY = document!.body.style.top;\n    const scrollX = document!.body.style.left;\n\n    Object.assign(document!.documentElement.style, { overscrollBehavior: '' });\n    clearDisableScrollStyle(document!.body);\n    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n  }, [document, window]);\n\n  const { incrementScrollLockCounter, decrementScrollLockCounter } = useScrollLockController(\n    enableScrollLock,\n    disableScrollLock,\n  );\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      incrementScrollLockCounter,\n      decrementScrollLockCounter,\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, incrementScrollLockCounter, decrementScrollLockCounter],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({\n  elRef,\n  children,\n}: ScrollControllerProps): React.ReactNode => {\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(() => {\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  }, [elRef]);\n\n  const disableScrollLock = React.useCallback(() => {\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  }, [elRef]);\n\n  const { incrementScrollLockCounter, decrementScrollLockCounter } = useScrollLockController(\n    enableScrollLock,\n    disableScrollLock,\n  );\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      incrementScrollLockCounter,\n      decrementScrollLockCounter,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, incrementScrollLockCounter, decrementScrollLockCounter],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Блокирует прокрутку окна\n *\n * @param enabled - если false то не будет блокировать\n */\nexport const useScrollLock = (enabled = true): void => {\n  const { incrementScrollLockCounter, decrementScrollLockCounter } = useScroll();\n\n  React.useEffect(() => {\n    if (enabled) {\n      incrementScrollLockCounter();\n      return decrementScrollLockCounter;\n    }\n\n    return noop;\n  }, [enabled, incrementScrollLockCounter, decrementScrollLockCounter]);\n};\n"],"names":["React","noop","clamp","useCounter","useDOM","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overscrollBehavior","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","ScrollContext","createContext","getScroll","x","y","scrollTo","incrementScrollLockCounter","decrementScrollLockCounter","useScroll","useContext","useScrollLockController","enableScrollLock","disableScrollLock","count","increment","decrement","needLockScroll","useEffect","GlobalScrollController","children","beforeScrollLockFnSetRef","useRef","Set","useCallback","options","compensateKeyboardHeight","pageXOffset","body","scrollWidth","innerWidth","scrollHeight","current","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","Provider","value","ElementScrollController","elRef","scrollLeft","scrollTop","el","useScrollLock","enabled"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,KAAK,QAAQ,wBAAqB;AAC3C,SAASC,UAAU,QAAQ,4BAAyB;AACpD,SAASC,MAAM,QAAQ,mBAAgB;AAGvC,MAAMC,0BAA0B,CAACC;IAC/BC,OAAOC,MAAM,CAACF,KAAKG,KAAK,EAAE;QACxBC,UAAU;QACVC,KAAK;QACLC,MAAM;QACNC,OAAO;QACPC,oBAAoB;QACpBC,WAAW;QACXC,WAAW;IACb;AACF;AAEA,MAAMC,sCAAsC,CAACC;IAC3C,2EAA2E;IAC3E,sHAAsH;IACtH,sEAAsE;IACtE,MAAMC,sCACJD,OAAOE,QAAQ,CAACC,eAAe,CAACC,YAAY,GAAGJ,OAAOK,WAAW;IACnE,OAAOL,OAAOM,WAAW,GAAGL;AAC9B;AAoBA,OAAO,MAAMM,8BACXzB,MAAM0B,aAAa,CAAyB;IAC1CC,WAAW,IAAO,CAAA;YAAEC,GAAG;YAAGC,GAAG;QAAE,CAAA;IAC/BC,UAAU7B;IACV8B,4BAA4B9B;IAC5B+B,4BAA4B/B;AAC9B,GAAG;AAEL,OAAO,MAAMgC,YAAY,IAA8BjC,MAAMkC,UAAU,CAACT,eAAe;AAEvF;;;CAGC,GACD,SAASU,wBAAwBC,gBAA4B,EAAEC,iBAA6B;IAC1F,MAAM,CAACC,OAAO,EAAEC,WAAWR,0BAA0B,EAAES,WAAWR,0BAA0B,EAAE,CAAC,GAC7F7B,WAAW;IAEb,MAAMsC,iBAAiBH,QAAQ;IAE/BtC,MAAM0C,SAAS,CAAC;QACd,IAAID,gBAAgB;YAClBL;QACF,OAAO;YACLC;QACF;IACF,GAAG;QAACI;QAAgBL;QAAkBC;KAAkB;IAExD,OAAO;QACLN;QACAC;IACF;AACF;AAMA,OAAO,MAAMW,yBAAyB,CAAC,EAAEC,QAAQ,EAAyB;IACxE,MAAM,EAAE1B,MAAM,EAAEE,QAAQ,EAAE,GAAGhB;IAC7B,MAAMyC,2BAA2B7C,MAAM8C,MAAM,CAAkB,IAAIC;IAEnE,MAAMpB,YAAY3B,MAAMgD,WAAW,CACjC,CAACC,UAAU;QAAEC,0BAA0B;IAAK,CAAC,GAAM,CAAA;YACjDtB,GAAGV,OAAQiC,WAAW;YACtBtB,GAAGoB,QAAQC,wBAAwB,GAC/BjC,oCAAoCC,UACpCA,OAAQM,WAAW;QACzB,CAAA,GACA;QAACN;KAAO;IAEV,MAAMY,WAAW9B,MAAMgD,WAAW,CAChC,CAACpB,IAAI,CAAC,EAAEC,IAAI,CAAC;QACX,8DAA8D;QAC9DX,OAAQY,QAAQ,CACdF,IAAI1B,MAAM0B,GAAG,GAAGR,SAAUgC,IAAI,CAACC,WAAW,GAAGnC,OAAQoC,UAAU,IAAI,GACnEzB,IAAI3B,MAAM2B,GAAG,GAAGT,SAAUgC,IAAI,CAACG,YAAY,GAAGrC,OAAQK,WAAW,IAAI;IAEzE,GACA;QAACH;QAAUF;KAAO;IAGpB,MAAMkB,mBAAmBpC,MAAMgD,WAAW,CAAC;QACzCH,yBAAyBW,OAAO,CAACC,OAAO,CAAC,CAACC;YACxCA;QACF;QAEA,MAAMC,UAAUzC,OAAQM,WAAW;QACnC,MAAMoC,UAAU1C,OAAQiC,WAAW;QACnC,MAAMpC,YAAYG,OAAQoC,UAAU,GAAGlC,SAAUC,eAAe,CAACwC,WAAW,GAAG,WAAW;QAC1F,MAAM7C,YAAYE,OAAQK,WAAW,GAAGH,SAAUC,eAAe,CAACC,YAAY,GAAG,WAAW;QAE5Ff,OAAOC,MAAM,CAACY,SAAUC,eAAe,CAACZ,KAAK,EAAE;YAAEK,oBAAoB;QAAO;QAC5EP,OAAOC,MAAM,CAACY,SAAUgC,IAAI,CAAC3C,KAAK,EAAE;YAClCC,UAAU;YACVC,KAAK,CAAC,CAAC,EAAEgD,QAAQ,EAAE,CAAC;YACpB/C,MAAM,CAAC,CAAC,EAAEgD,QAAQ,EAAE,CAAC;YACrB/C,OAAO;YACPC,oBAAoB;YACpBC;YACAC;QACF;IACF,GAAG;QAACI;QAAUF;KAAO;IAErB,MAAMmB,oBAAoBrC,MAAMgD,WAAW,CAAC;QAC1C,MAAMW,UAAUvC,SAAUgC,IAAI,CAAC3C,KAAK,CAACE,GAAG;QACxC,MAAMiD,UAAUxC,SAAUgC,IAAI,CAAC3C,KAAK,CAACG,IAAI;QAEzCL,OAAOC,MAAM,CAACY,SAAUC,eAAe,CAACZ,KAAK,EAAE;YAAEK,oBAAoB;QAAG;QACxET,wBAAwBe,SAAUgC,IAAI;QACtClC,OAAQY,QAAQ,CAAC,CAACgC,SAASF,WAAW,MAAM,CAACE,SAASH,WAAW;IACnE,GAAG;QAACvC;QAAUF;KAAO;IAErB,MAAM,EAAEa,0BAA0B,EAAEC,0BAA0B,EAAE,GAAGG,wBACjEC,kBACAC;IAGF,MAAM0B,mBAAmB/D,MAAMgE,OAAO,CACpC,IAAO,CAAA;YACLrC;YACAG;YACAC;YACAC;YACAa,0BAA0BA;QAC5B,CAAA,GACA;QAAClB;QAAWG;QAAUC;QAA4BC;KAA2B;IAG/E,qBAAO,KAACP,cAAcwC,QAAQ;QAACC,OAAOH;kBAAmBnB;;AAC3D,EAAE;AAEF,OAAO,MAAMuB,0BAA0B,CAAC,EACtCC,KAAK,EACLxB,QAAQ,EACc;IACtB,MAAMC,2BAA2B7C,MAAM8C,MAAM,CAAkB,IAAIC;IAEnE,MAAMpB,YAAY3B,MAAMgD,WAAW,CACjC,IAAO,CAAA;YACLpB,GAAGwC,MAAMZ,OAAO,EAAEa,cAAc;YAChCxC,GAAGuC,MAAMZ,OAAO,EAAEc,aAAa;QACjC,CAAA,GACA;QAACF;KAAM;IAET,MAAMtC,WAAW9B,MAAMgD,WAAW,CAChC,CAACpB,IAAI,CAAC,EAAEC,IAAI,CAAC;QACX,MAAM0C,KAAKH,MAAMZ,OAAO;QACxB,8DAA8D;QAC9De,IAAIzC,SACFF,IAAI1B,MAAM0B,GAAG,GAAG2C,GAAGlB,WAAW,GAAGkB,GAAGV,WAAW,IAAI,GACnDhC,IAAI3B,MAAM2B,GAAG,GAAG0C,GAAGhB,YAAY,GAAGgB,GAAGjD,YAAY,IAAI;IAEzD,GACA;QAAC8C;KAAM;IAGT,MAAMhC,mBAAmBpC,MAAMgD,WAAW,CAAC;QACzC,MAAMuB,KAAKH,MAAMZ,OAAO;QACxB,IAAI,CAACe,IAAI;YACP;QACF;QACA1B,yBAAyBW,OAAO,CAACC,OAAO,CAAC,CAACC;YACxCA;QACF;QAEA,MAAMC,UAAUY,GAAGD,SAAS;QAC5B,MAAMV,UAAUW,GAAGF,UAAU;QAC7B,MAAMtD,YAAYwD,GAAGlB,WAAW,GAAGkB,GAAGV,WAAW,GAAG,WAAW;QAC/D,MAAM7C,YAAYuD,GAAGhB,YAAY,GAAGgB,GAAGjD,YAAY,GAAG,WAAW;QAEjEf,OAAOC,MAAM,CAAC+D,GAAG9D,KAAK,EAAE;YACtBC,UAAU;YACVC,KAAK,CAAC,CAAC,EAAEgD,QAAQ,EAAE,CAAC;YACpB/C,MAAM,CAAC,CAAC,EAAEgD,QAAQ,EAAE,CAAC;YACrB/C,OAAO;YACPE;YACAC;QACF;IACF,GAAG;QAACoD;KAAM;IAEV,MAAM/B,oBAAoBrC,MAAMgD,WAAW,CAAC;QAC1C,MAAMuB,KAAKH,MAAMZ,OAAO;QACxB,IAAI,CAACe,IAAI;YACP;QACF;QAEA,MAAMZ,UAAUY,GAAG9D,KAAK,CAACE,GAAG;QAC5B,MAAMiD,UAAUW,GAAG9D,KAAK,CAACG,IAAI;QAE7BP,wBAAwBkE;QACxBA,GAAGzC,QAAQ,CAAC,CAACgC,SAASF,WAAW,MAAM,CAACE,SAASH,WAAW;IAC9D,GAAG;QAACS;KAAM;IAEV,MAAM,EAAErC,0BAA0B,EAAEC,0BAA0B,EAAE,GAAGG,wBACjEC,kBACAC;IAGF,MAAM0B,mBAAmB/D,MAAMgE,OAAO,CACpC,IAAO,CAAA;YACLrC;YACAG;YACAC;YACAC;YACAa;QACF,CAAA,GACA;QAAClB;QAAWG;QAAUC;QAA4BC;KAA2B;IAG/E,qBAAO,KAACP,cAAcwC,QAAQ;QAACC,OAAOH;kBAAmBnB;;AAC3D,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAM4B,gBAAgB,CAACC,UAAU,IAAI;IAC1C,MAAM,EAAE1C,0BAA0B,EAAEC,0BAA0B,EAAE,GAAGC;IAEnEjC,MAAM0C,SAAS,CAAC;QACd,IAAI+B,SAAS;YACX1C;YACA,OAAOC;QACT;QAEA,OAAO/B;IACT,GAAG;QAACwE;QAAS1C;QAA4BC;KAA2B;AACtE,EAAE"}

package/dist/cssm/components/AspectRatio/AspectRatio.js

@@ -11,7 +11,7 @@ import styles from "./AspectRatio.module.css";
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */ export function AspectRatio({ ratio, mode = 'stretch', ...props }) {
     const style = {
-        '--vkui_internal--aspect_ratio': String(ratio)
+        '--vkui_internal--aspect_ratio': typeof ratio === 'number' ? String(ratio) : ratio
     };
     return /*#__PURE__*/ _jsx(RootComponent, {
         baseClassName: classNames(styles.host, mode === 'stretch' && styles.modeStretch),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\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({ ratio, mode = 'stretch', ...props }: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    '--vkui_internal--aspect_ratio': String(ratio),\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, mode === 'stretch' && styles.modeStretch)}\n      baseStyle={style}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","styles","AspectRatio","ratio","mode","props","style","String","baseClassName","host","modeStretch","baseStyle"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,OAAOC,YAAY,2BAA2B;AAc9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAAEC,KAAK,EAAEC,OAAO,SAAS,EAAE,GAAGC,OAAyB;IACjF,MAAMC,QAAmD;QACvD,iCAAiCC,OAAOJ;IAC1C;IAEA,qBACE,KAACH;QACCQ,eAAeT,WAAWE,OAAOQ,IAAI,EAAEL,SAAS,aAAaH,OAAOS,WAAW;QAC/EC,WAAWL;QACV,GAAGD,KAAK;;AAGf"}
+{"version":3,"sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  /**\n   * Например:\n   * - в виде числа: 16 / 9, 4 / 3, 1920 / 1080,\n   * - в виде css переменной: `var(--css-aspect-ratio-var)`\n   * - в виде сложного выражения: `calc(<какие-то вычисления>)`\n   */\n  ratio: number | string;\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  mode = 'stretch',\n  ...props\n}: AspectRatioProps): React.JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    '--vkui_internal--aspect_ratio': typeof ratio === 'number' ? String(ratio) : ratio,\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, mode === 'stretch' && styles.modeStretch)}\n      baseStyle={style}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","styles","AspectRatio","ratio","mode","props","style","String","baseClassName","host","modeStretch","baseStyle"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,OAAOC,YAAY,2BAA2B;AAiB9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,OAAO,SAAS,EAChB,GAAGC,OACc;IACjB,MAAMC,QAAmD;QACvD,iCAAiC,OAAOH,UAAU,WAAWI,OAAOJ,SAASA;IAC/E;IAEA,qBACE,KAACH;QACCQ,eAAeT,WAAWE,OAAOQ,IAAI,EAAEL,SAAS,aAAaH,OAAOS,WAAW;QAC/EC,WAAWL;QACV,GAAGD,KAAK;;AAGf"}

package/dist/cssm/components/Calendar/Calendar.js

@@ -3,7 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { isSameDay, isSameMonth } from "date-fns";
+import { CalendarDirectionContext } from "../../context/CalendarDirectionContext.js";
 import { useCalendar } from "../../hooks/useCalendar.js";
+import { useDirection } from "../../hooks/useDirection.js";
+import { useExternRef } from "../../hooks/useExternRef.js";
 import { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from "../../lib/calendar.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { warnOnce } from "../../lib/warnOnce.js";
@@ -15,7 +18,7 @@ import styles from "./Calendar.module.css";
 const warn = warnOnce('Calendar');
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
- */ export const Calendar = ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onDoneButtonClick, enableTime = false, doneButtonText, doneButtonDisabled, doneButtonShow, weekStartsOn = 1, disablePickers, changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', showNeighboringMonth, changeDayLabel = 'Изменить день', size = 'm', viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId, ...props })=>{
+ */ export const Calendar = ({ getRootRef, value, onChange, disablePast, disableFuture, shouldDisableDate, onDoneButtonClick, enableTime = false, doneButtonText, doneButtonDisabled, doneButtonShow, DoneButton, weekStartsOn = 1, disablePickers, changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', showNeighboringMonth, changeDayLabel = 'Изменить день', size = 'm', viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId, ...props })=>{
     const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay, isMonthDisabled, isYearDisabled } = useCalendar({
         value,
         disableFuture,
@@ -27,6 +30,8 @@ const warn = warnOnce('Calendar');
         minDateTime,
         maxDateTime
     });
+    const [directionRef, textDirection = 'ltr'] = useDirection();
+    const rootRef = useExternRef(directionRef, getRootRef);
     useIsomorphicLayoutEffect(()=>{
         if (value) {
             setViewDate(value);
@@ -79,71 +84,81 @@ const warn = warnOnce('Calendar');
     const isDayActive = React.useCallback((day)=>Boolean(value && isSameDay(day, value)), [
         value
     ]);
-    return /*#__PURE__*/ _jsxs(RootComponent, {
-        ...props,
-        baseClassName: classNames(styles.host, size === 's' && styles.sizeS),
-        children: [
-            /*#__PURE__*/ _jsx(CalendarHeader, {
-                viewDate: externalViewDate || viewDate,
-                onChange: setViewDate,
-                onNextMonth: setNextMonth,
-                onPrevMonth: setPrevMonth,
-                disablePickers: disablePickers || size === 's',
-                className: styles.header,
-                prevMonthLabel: prevMonthLabel,
-                nextMonthLabel: nextMonthLabel,
-                changeMonthLabel: changeMonthLabel,
-                changeYearLabel: changeYearLabel,
-                prevMonthIcon: prevMonthIcon,
-                nextMonthIcon: nextMonthIcon,
-                prevMonthProps: prevMonthProps,
-                nextMonthProps: nextMonthProps,
-                isMonthDisabled: isMonthDisabled,
-                isYearDisabled: isYearDisabled,
-                nextMonthButtonTestId: nextMonthButtonTestId,
-                prevMonthButtonTestId: prevMonthButtonTestId,
-                monthDropdownTestId: monthDropdownTestId,
-                yearDropdownTestId: yearDropdownTestId
-            }),
-            /*#__PURE__*/ _jsx(CalendarDays, {
-                viewDate: externalViewDate || viewDate,
-                value: value,
-                weekStartsOn: weekStartsOn,
-                isDayFocused: isDayFocused,
-                tabIndex: 0,
-                "aria-label": changeDayLabel,
-                onKeyDown: handleKeyDown,
-                onDayChange: onDayChange,
-                isDayActive: isDayActive,
-                isDaySelectionStart: isFirstDay,
-                isDaySelectionEnd: isLastDay,
-                isDayDisabled: isDayDisabled,
-                onBlur: resetSelectedDay,
-                showNeighboringMonth: showNeighboringMonth,
-                size: size,
-                dayProps: dayProps,
-                listenDayChangesForUpdate: listenDayChangesForUpdate,
-                renderDayContent: renderDayContent,
-                dayTestId: dayTestId
-            }),
-            enableTime && value && size !== 's' && /*#__PURE__*/ _jsx("div", {
-                className: styles.time,
-                children: /*#__PURE__*/ _jsx(CalendarTime, {
+    const directionContextValue = React.useMemo(()=>({
+            direction: textDirection
+        }), [
+        textDirection
+    ]);
+    return /*#__PURE__*/ _jsx(CalendarDirectionContext.Provider, {
+        value: directionContextValue,
+        children: /*#__PURE__*/ _jsxs(RootComponent, {
+            ...props,
+            baseClassName: classNames(styles.host, size === 's' && styles.sizeS),
+            getRootRef: rootRef,
+            children: [
+                /*#__PURE__*/ _jsx(CalendarHeader, {
+                    viewDate: externalViewDate || viewDate,
+                    onChange: setViewDate,
+                    onNextMonth: setNextMonth,
+                    onPrevMonth: setPrevMonth,
+                    disablePickers: disablePickers || size === 's',
+                    className: styles.header,
+                    prevMonthLabel: prevMonthLabel,
+                    nextMonthLabel: nextMonthLabel,
+                    changeMonthLabel: changeMonthLabel,
+                    changeYearLabel: changeYearLabel,
+                    prevMonthIcon: prevMonthIcon,
+                    nextMonthIcon: nextMonthIcon,
+                    prevMonthProps: prevMonthProps,
+                    nextMonthProps: nextMonthProps,
+                    isMonthDisabled: isMonthDisabled,
+                    isYearDisabled: isYearDisabled,
+                    nextMonthButtonTestId: nextMonthButtonTestId,
+                    prevMonthButtonTestId: prevMonthButtonTestId,
+                    monthDropdownTestId: monthDropdownTestId,
+                    yearDropdownTestId: yearDropdownTestId
+                }),
+                /*#__PURE__*/ _jsx(CalendarDays, {
+                    viewDate: externalViewDate || viewDate,
                     value: value,
-                    onChange: onChange,
-                    onDoneButtonClick: onDoneButtonClick,
-                    doneButtonText: doneButtonText,
-                    doneButtonDisabled: doneButtonDisabled,
-                    doneButtonShow: doneButtonShow,
-                    changeHoursLabel: changeHoursLabel,
-                    changeMinutesLabel: changeMinutesLabel,
-                    isDayDisabled: minDateTime || maxDateTime ? isDayDisabled : undefined,
-                    minutesTestId: minutesTestId,
-                    hoursTestId: hoursTestId,
-                    doneButtonTestId: doneButtonTestId
+                    weekStartsOn: weekStartsOn,
+                    isDayFocused: isDayFocused,
+                    tabIndex: 0,
+                    "aria-label": changeDayLabel,
+                    onKeyDown: handleKeyDown,
+                    onDayChange: onDayChange,
+                    isDayActive: isDayActive,
+                    isDaySelectionStart: isFirstDay,
+                    isDaySelectionEnd: isLastDay,
+                    isDayDisabled: isDayDisabled,
+                    onBlur: resetSelectedDay,
+                    showNeighboringMonth: showNeighboringMonth,
+                    size: size,
+                    dayProps: dayProps,
+                    listenDayChangesForUpdate: listenDayChangesForUpdate,
+                    renderDayContent: renderDayContent,
+                    dayTestId: dayTestId
+                }),
+                enableTime && value && size !== 's' && /*#__PURE__*/ _jsx("div", {
+                    className: styles.time,
+                    children: /*#__PURE__*/ _jsx(CalendarTime, {
+                        value: value,
+                        onChange: onChange,
+                        onDoneButtonClick: onDoneButtonClick,
+                        doneButtonText: doneButtonText,
+                        doneButtonDisabled: doneButtonDisabled,
+                        doneButtonShow: doneButtonShow,
+                        DoneButton: DoneButton,
+                        changeHoursLabel: changeHoursLabel,
+                        changeMinutesLabel: changeMinutesLabel,
+                        isDayDisabled: minDateTime || maxDateTime ? isDayDisabled : undefined,
+                        minutesTestId: minutesTestId,
+                        hoursTestId: hoursTestId,
+                        doneButtonTestId: doneButtonTestId
+                    })
                 })
-            })
-        ]
+            ]
+        })
     });
 };
 

package/dist/cssm/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  CalendarDays,\n  type CalendarDaysProps,\n  type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n  CalendarHeader,\n  type CalendarHeaderProps,\n  type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport {\n  CalendarTime,\n  type CalendarTimeProps,\n  type CalendarTimeTestsProps,\n} from '../CalendarTime/CalendarTime';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Calendar.module.css';\n\nexport type CalendarTestsProps = CalendarDaysTestsProps &\n  CalendarHeaderTestsProps &\n  CalendarTimeTestsProps;\n\nexport interface CalendarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarTimeProps,\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'doneButtonText'\n      | 'doneButtonDisabled'\n      | 'doneButtonShow'\n    >,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarTestsProps {\n  value?: Date;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?: (value?: Date) => void;\n  /**\n   * Позволяет запретить выбор даты.\n   */\n  shouldDisableDate?: (value: Date) => boolean;\n  onDoneButtonClick?: () => void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?: (value: Date) => void;\n  /**\n   * Минимальные дата и время, которые можно выбрать\n   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n   */\n  minDateTime?: Date;\n  /**\n   * Максимальные дата и время, которые можно выбрать.\n   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n   */\n  maxDateTime?: Date;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onDoneButtonClick,\n  enableTime = false,\n  doneButtonText,\n  doneButtonDisabled,\n  doneButtonShow,\n  weekStartsOn = 1,\n  disablePickers,\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  showNeighboringMonth,\n  changeDayLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  minDateTime,\n  maxDateTime,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  dayTestId,\n  ...props\n}: CalendarProps): React.ReactNode => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n    isMonthDisabled,\n    isYearDisabled,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n    minDateTime,\n    maxDateTime,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      let actualDate = setTimeEqual(date, value);\n      if (minDateTime || maxDateTime) {\n        actualDate = clamp(actualDate, { min: minDateTime, max: maxDateTime });\n      }\n      onChange?.(actualDate);\n    },\n    [value, onChange, maxDateTime, minDateTime],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}>\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles.header}\n        prevMonthLabel={prevMonthLabel}\n        nextMonthLabel={nextMonthLabel}\n        changeMonthLabel={changeMonthLabel}\n        changeYearLabel={changeYearLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n        isMonthDisabled={isMonthDisabled}\n        isYearDisabled={isYearDisabled}\n        nextMonthButtonTestId={nextMonthButtonTestId}\n        prevMonthButtonTestId={prevMonthButtonTestId}\n        monthDropdownTestId={monthDropdownTestId}\n        yearDropdownTestId={yearDropdownTestId}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n        renderDayContent={renderDayContent}\n        dayTestId={dayTestId}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles.time}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onDoneButtonClick={onDoneButtonClick}\n            doneButtonText={doneButtonText}\n            doneButtonDisabled={doneButtonDisabled}\n            doneButtonShow={doneButtonShow}\n            changeHoursLabel={changeHoursLabel}\n            changeMinutesLabel={changeMinutesLabel}\n            isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}\n            minutesTestId={minutesTestId}\n            hoursTestId={hoursTestId}\n            doneButtonTestId={doneButtonTestId}\n          />\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","isSameDay","isSameMonth","useCalendar","clamp","isFirstDay","isLastDay","navigateDate","setTimeEqual","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","RootComponent","styles","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onDoneButtonClick","enableTime","doneButtonText","doneButtonDisabled","doneButtonShow","weekStartsOn","disablePickers","changeHoursLabel","changeMinutesLabel","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","showNeighboringMonth","changeDayLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","listenDayChangesForUpdate","renderDayContent","minDateTime","maxDateTime","minutesTestId","hoursTestId","doneButtonTestId","prevMonthButtonTestId","nextMonthButtonTestId","monthDropdownTestId","yearDropdownTestId","dayTestId","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","actualDate","min","max","isDayActive","day","Boolean","baseClassName","host","sizeS","className","header","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur","div","time","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport {\n  CalendarDirectionContext,\n  type CalendarDirectionContextProps,\n} from '../../context/CalendarDirectionContext';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  CalendarDays,\n  type CalendarDaysProps,\n  type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n  CalendarHeader,\n  type CalendarHeaderProps,\n  type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport {\n  type CalendarDoneButtonProps,\n  CalendarTime,\n  type CalendarTimeProps,\n  type CalendarTimeTestsProps,\n} from '../CalendarTime/CalendarTime';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Calendar.module.css';\n\nexport type CalendarTestsProps = CalendarDaysTestsProps &\n  CalendarHeaderTestsProps &\n  CalendarTimeTestsProps;\n\nexport interface CalendarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarDoneButtonProps,\n    CalendarTestsProps {\n  value?: Date;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?: (value?: Date) => void;\n  /**\n   * Позволяет запретить выбор даты.\n   */\n  shouldDisableDate?: (value: Date) => boolean;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?: (value: Date) => void;\n  /**\n   * Минимальные дата и время, которые можно выбрать\n   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n   */\n  minDateTime?: Date;\n  /**\n   * Максимальные дата и время, которые можно выбрать.\n   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n   */\n  maxDateTime?: Date;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  getRootRef,\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onDoneButtonClick,\n  enableTime = false,\n  doneButtonText,\n  doneButtonDisabled,\n  doneButtonShow,\n  DoneButton,\n  weekStartsOn = 1,\n  disablePickers,\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  showNeighboringMonth,\n  changeDayLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  minDateTime,\n  maxDateTime,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  dayTestId,\n  ...props\n}: CalendarProps): React.ReactNode => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n    isMonthDisabled,\n    isYearDisabled,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n    minDateTime,\n    maxDateTime,\n  });\n  const [directionRef, textDirection = 'ltr'] = useDirection();\n  const rootRef = useExternRef(directionRef, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      let actualDate = setTimeEqual(date, value);\n      if (minDateTime || maxDateTime) {\n        actualDate = clamp(actualDate, { min: minDateTime, max: maxDateTime });\n      }\n      onChange?.(actualDate);\n    },\n    [value, onChange, maxDateTime, minDateTime],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  const directionContextValue = React.useMemo<CalendarDirectionContextProps>(\n    () => ({\n      direction: textDirection,\n    }),\n    [textDirection],\n  );\n\n  return (\n    <CalendarDirectionContext.Provider value={directionContextValue}>\n      <RootComponent\n        {...props}\n        baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}\n        getRootRef={rootRef}\n      >\n        <CalendarHeader\n          viewDate={externalViewDate || viewDate}\n          onChange={setViewDate}\n          onNextMonth={setNextMonth}\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers || size === 's'}\n          className={styles.header}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          prevMonthIcon={prevMonthIcon}\n          nextMonthIcon={nextMonthIcon}\n          prevMonthProps={prevMonthProps}\n          nextMonthProps={nextMonthProps}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\n          nextMonthButtonTestId={nextMonthButtonTestId}\n          prevMonthButtonTestId={prevMonthButtonTestId}\n          monthDropdownTestId={monthDropdownTestId}\n          yearDropdownTestId={yearDropdownTestId}\n        />\n        <CalendarDays\n          viewDate={externalViewDate || viewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          isDayFocused={isDayFocused}\n          tabIndex={0}\n          aria-label={changeDayLabel}\n          onKeyDown={handleKeyDown}\n          onDayChange={onDayChange}\n          isDayActive={isDayActive}\n          isDaySelectionStart={isFirstDay}\n          isDaySelectionEnd={isLastDay}\n          isDayDisabled={isDayDisabled}\n          onBlur={resetSelectedDay}\n          showNeighboringMonth={showNeighboringMonth}\n          size={size}\n          dayProps={dayProps}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          renderDayContent={renderDayContent}\n          dayTestId={dayTestId}\n        />\n        {enableTime && value && size !== 's' && (\n          <div className={styles.time}>\n            <CalendarTime\n              value={value}\n              onChange={onChange}\n              onDoneButtonClick={onDoneButtonClick}\n              doneButtonText={doneButtonText}\n              doneButtonDisabled={doneButtonDisabled}\n              doneButtonShow={doneButtonShow}\n              DoneButton={DoneButton}\n              changeHoursLabel={changeHoursLabel}\n              changeMinutesLabel={changeMinutesLabel}\n              isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}\n              minutesTestId={minutesTestId}\n              hoursTestId={hoursTestId}\n              doneButtonTestId={doneButtonTestId}\n            />\n          </div>\n        )}\n      </RootComponent>\n    </CalendarDirectionContext.Provider>\n  );\n};\n"],"names":["React","classNames","isSameDay","isSameMonth","CalendarDirectionContext","useCalendar","useDirection","useExternRef","clamp","isFirstDay","isLastDay","navigateDate","setTimeEqual","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","RootComponent","styles","warn","Calendar","getRootRef","value","onChange","disablePast","disableFuture","shouldDisableDate","onDoneButtonClick","enableTime","doneButtonText","doneButtonDisabled","doneButtonShow","DoneButton","weekStartsOn","disablePickers","changeHoursLabel","changeMinutesLabel","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","showNeighboringMonth","changeDayLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","listenDayChangesForUpdate","renderDayContent","minDateTime","maxDateTime","minutesTestId","hoursTestId","doneButtonTestId","prevMonthButtonTestId","nextMonthButtonTestId","monthDropdownTestId","yearDropdownTestId","dayTestId","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","directionRef","textDirection","rootRef","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","actualDate","min","max","isDayActive","day","Boolean","directionContextValue","useMemo","direction","Provider","baseClassName","host","sizeS","className","header","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur","div","time","undefined"],"mappings":"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"}

package/dist/cssm/components/CalendarDay/CalendarDay.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useCalendarDirectionContext } from "../../context/CalendarDirectionContext.js";
 import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from "../../hooks/useKeyboardInputTracker.js";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { Tappable } from "../Tappable/Tappable.js";
@@ -10,6 +11,7 @@ import styles from "./CalendarDay.module.css";
 export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, children, renderDayContent, testId, ...restProps })=>{
     const { locale } = useConfigProvider();
     const ref = React.useRef(null);
+    const { direction } = useCalendarDirectionContext();
     const onClick = React.useCallback(()=>onChange(day), [
         day,
         onChange
@@ -66,7 +68,7 @@ export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onC
         });
     }
     return /*#__PURE__*/ _jsx(Tappable, {
-        baseClassName: classNames(styles.host, size === 's' && styles.sizeS),
+        baseClassName: classNames(styles.host, size === 's' && styles.sizeS, direction === 'rtl' && styles.rtl),
         hoverMode: styles.hostHovered,
         activeMode: styles.hostActivated,
         hasActive: false,