@vkontakte/vkui 7.1.3 → 7.2.1

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 { 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 countRef = React.useRef(0);\n\n  const updateScrollLock = React.useCallback(() => {\n    if (countRef.current > 0) {\n      enableScrollLock();\n    } else {\n      disableScrollLock();\n    }\n  }, [enableScrollLock, disableScrollLock]);\n\n  const incrementScrollLockCounter = React.useCallback(() => {\n    countRef.current += 1;\n    updateScrollLock();\n  }, [updateScrollLock]);\n\n  const decrementScrollLockCounter = React.useCallback(() => {\n    countRef.current -= 1;\n    updateScrollLock();\n  }, [updateScrollLock]);\n\n  return [incrementScrollLockCounter, decrementScrollLockCounter];\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","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","countRef","useRef","updateScrollLock","useCallback","current","GlobalScrollController","children","beforeScrollLockFnSetRef","Set","options","compensateKeyboardHeight","pageXOffset","body","scrollWidth","innerWidth","scrollHeight","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","Provider","value","ElementScrollController","elRef","scrollLeft","scrollTop","el","useScrollLock","enabled","useEffect"],"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 { 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, scrollTop: number) => {\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 scrollTop - 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 countRef = React.useRef(0);\n\n  const updateScrollLock = React.useCallback(() => {\n    if (countRef.current > 0) {\n      enableScrollLock();\n    } else {\n      disableScrollLock();\n    }\n  }, [enableScrollLock, disableScrollLock]);\n\n  const incrementScrollLockCounter = React.useCallback(() => {\n    countRef.current += 1;\n    updateScrollLock();\n  }, [updateScrollLock]);\n\n  const decrementScrollLockCounter = React.useCallback(() => {\n    countRef.current -= 1;\n    updateScrollLock();\n  }, [updateScrollLock]);\n\n  return [incrementScrollLockCounter, decrementScrollLockCounter];\n}\n\nexport function useManualScroll(): Pick<ScrollContextInterface, 'scrollTo' | 'getScroll'> {\n  const { scrollTo, getScroll } = React.useContext(ScrollContext);\n  return React.useMemo(\n    () => ({\n      scrollTo,\n      getScroll,\n    }),\n    [getScroll, scrollTo],\n  );\n}\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement | null>;\n}\n\nconst _scrollTo = ({\n  x,\n  y,\n  scrollWidth,\n  clientWidth,\n  scrollHeight,\n  clientHeight,\n  scrollLockEnabled,\n  lockedElement,\n  elementToScroll,\n}: {\n  x: number;\n  y: number;\n  scrollWidth: number;\n  clientWidth: number;\n  scrollHeight: number;\n  clientHeight: number;\n  scrollLockEnabled: boolean;\n  lockedElement: HTMLElement;\n  elementToScroll: Window | HTMLElement;\n}) => {\n  // Some iOS versions do not normalize scroll — do it manually.\n  const left = x ? clamp(x, 0, scrollWidth - clientWidth) : 0;\n  const top = y ? clamp(y, 0, scrollHeight - clientHeight) : 0;\n\n  if (scrollLockEnabled) {\n    Object.assign(lockedElement.style, {\n      left: `-${left}px`,\n      top: `-${top}px`,\n    });\n  } else {\n    elementToScroll.scrollTo({\n      left,\n      top,\n    });\n  }\n};\n\nconst _getScroll = ({\n  xOffset,\n  yOffset,\n  element,\n  scrollLockEnabled,\n  customCalcY = (v) => v,\n}: {\n  xOffset: number;\n  yOffset: number;\n  element: HTMLElement;\n  scrollLockEnabled: boolean;\n  customCalcY?: (scrollTop: number) => number;\n}) => {\n  const elementStyles = element.style;\n  const [scrollLeft, scrollTop] = scrollLockEnabled\n    ? [-parseFloat(elementStyles.left || '0'), -parseFloat(elementStyles.top || '0')]\n    : [xOffset, yOffset];\n  return {\n    x: scrollLeft,\n    y: customCalcY(scrollTop),\n  };\n};\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps): React.ReactNode => {\n  const { window, document } = useDOM();\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n  const scrollLockEnabledRef = React.useRef(false);\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    (options = { compensateKeyboardHeight: true }) => {\n      if (!window || !document) {\n        return { x: 0, y: 0 };\n      }\n      return _getScroll({\n        xOffset: window.pageXOffset,\n        yOffset: window.pageYOffset,\n        element: document.documentElement,\n        scrollLockEnabled: scrollLockEnabledRef.current,\n        customCalcY: (scrollTop) =>\n          options.compensateKeyboardHeight\n            ? getPageYOffsetWithoutKeyboardHeight(window, scrollTop)\n            : scrollTop,\n      });\n    },\n    [document, window],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      if (!window || !document) {\n        return;\n      }\n      _scrollTo({\n        x,\n        y,\n\n        scrollWidth: document.body.scrollWidth,\n        clientWidth: window.innerWidth,\n\n        scrollHeight: document.body.scrollHeight,\n        clientHeight: window.innerHeight,\n\n        scrollLockEnabled: scrollLockEnabledRef.current,\n        lockedElement: document.documentElement,\n        elementToScroll: window,\n      });\n    },\n    [document, window],\n  );\n\n  const enableScrollLock = React.useCallback(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n    const { x: scrollX, y: scrollY } = getScroll({ compensateKeyboardHeight: false });\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, {\n      position: 'fixed',\n      right: '0',\n      overscrollBehavior: 'none',\n      overflowY,\n      overflowX,\n    });\n\n    scrollLockEnabledRef.current = true;\n\n    scrollTo(scrollX, scrollY);\n  }, [document, getScroll, scrollTo, window]);\n\n  const disableScrollLock = React.useCallback(() => {\n    const scrollData = getScroll({ compensateKeyboardHeight: false });\n    clearDisableScrollStyle(document!.documentElement);\n    scrollLockEnabledRef.current = false;\n\n    scrollTo(scrollData.x, scrollData.y);\n  }, [document, getScroll, scrollTo]);\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  const scrollLockEnabledRef = React.useRef(false);\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(() => {\n    const element = elRef.current;\n    if (!element) {\n      return { x: 0, y: 0 };\n    }\n    return _getScroll({\n      xOffset: element.scrollLeft,\n      yOffset: element.scrollTop,\n      element: element,\n      scrollLockEnabled: scrollLockEnabledRef.current,\n    });\n  }, [elRef]);\n\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      if (!el) {\n        return;\n      }\n      _scrollTo({\n        x,\n        y,\n\n        scrollWidth: el.scrollWidth,\n        clientWidth: el.clientWidth,\n\n        scrollHeight: el.scrollHeight,\n        clientHeight: el.clientHeight,\n\n        scrollLockEnabled: scrollLockEnabledRef.current,\n        lockedElement: el,\n        elementToScroll: el,\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 { x: scrollX, y: scrollY } = getScroll();\n\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      right: '0',\n      overflowY,\n      overflowX,\n    });\n    scrollLockEnabledRef.current = true;\n\n    scrollTo(scrollX, scrollY);\n  }, [elRef, getScroll, scrollTo]);\n\n  const disableScrollLock = React.useCallback(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollData = getScroll();\n    clearDisableScrollStyle(el);\n    scrollLockEnabledRef.current = false;\n\n    scrollTo(scrollData.x, scrollData.y);\n  }, [elRef, getScroll, scrollTo]);\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","useDOM","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overscrollBehavior","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","scrollTop","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","ScrollContext","createContext","getScroll","x","y","scrollTo","incrementScrollLockCounter","decrementScrollLockCounter","useScroll","useContext","useScrollLockController","enableScrollLock","disableScrollLock","countRef","useRef","updateScrollLock","useCallback","current","useManualScroll","useMemo","_scrollTo","scrollWidth","clientWidth","scrollHeight","scrollLockEnabled","lockedElement","elementToScroll","_getScroll","xOffset","yOffset","element","customCalcY","v","elementStyles","scrollLeft","parseFloat","GlobalScrollController","children","beforeScrollLockFnSetRef","Set","scrollLockEnabledRef","options","compensateKeyboardHeight","pageXOffset","pageYOffset","body","innerWidth","forEach","fn","scrollX","scrollY","scrollData","scrollController","Provider","value","ElementScrollController","elRef","el","useScrollLock","enabled","useEffect"],"mappings":"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"}

package/dist/cssm/components/AspectRatio/AspectRatio.module.css

@@ -6,11 +6,11 @@
 }
 
 .host::before {
-  content: '';
-  block-size: 0;
   display: block;
+  block-size: 0;
   -webkit-padding-after: calc((1 / var(--vkui_internal--aspect_ratio, 1)) * 100%);
           padding-block-end: calc((1 / var(--vkui_internal--aspect_ratio, 1)) * 100%);
+  content: '';
 }
 
 /* stylelint-disable-next-line selector-max-universal */

package/dist/cssm/components/Avatar/Avatar.module.css

@@ -50,6 +50,6 @@
   font-family: var(--vkui--font_family_accent);
   font-weight: 600;
   line-height: 1;
-  text-transform: uppercase;
   text-align: center;
+  text-transform: uppercase;
 }

package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadge.module.css

@@ -1,21 +1,26 @@
 .host {
-  inset-inline-end: 0;
   inset-block-end: 0;
+  inset-inline-end: 0;
 }
 
 .shifted {
-  inset-inline-end: -2px;
   inset-block-end: -2px;
+  inset-inline-end: -2px;
 }
 
 .presetOnline,
 .presetOnlineMobile {
-  inset-inline-end: 14%;
   inset-block-end: 14%;
+  inset-inline-end: 14%;
   color: var(--vkui--color_accent_green);
   transform: translate(50%, 50%);
 }
 
+.rtl.presetOnline,
+.rtl.presetOnlineMobile {
+  transform: translate(-50%, 50%);
+}
+
 /**
  * Перебиваем свойства `ImageBaseBadge` для этих кейсов
  */

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

@@ -2,10 +2,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useConfigDirection } from "../../../hooks/useConfigDirection.js";
 import { getBadgeIconSizeByImageBaseSize, ImageBase, ImageBaseContext } from "../../ImageBase/ImageBase.js";
 import { Icon12Circle, Icon12OnlineMobile } from "./icons.js";
 import styles from "./AvatarBadge.module.css";
 export const AvatarBadgeWithPreset = ({ preset = 'online', className, ...restProps })=>{
+    const direction = useConfigDirection();
+    const isRtl = direction === 'rtl';
     const { size } = React.useContext(ImageBaseContext);
     const badgeSize = getBadgeIconSizeByImageBaseSize(size);
     const isOnlinePreset = preset === 'online';
@@ -13,7 +16,7 @@ export const AvatarBadgeWithPreset = ({ preset = 'online', className, ...restPro
     const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;
     return /*#__PURE__*/ _jsx(ImageBase.Badge, {
         background: "stroke",
-        className: classNames(styles.host, presetClassName, className),
+        className: classNames(styles.host, isRtl && styles.rtl, presetClassName, className),
         ...restProps,
         children: /*#__PURE__*/ _jsx(Icon, {
             width: badgeSize,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  ImageBase,\n  type ImageBaseBadgeProps,\n  ImageBaseContext,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset: React.FC<AvatarBadgeWithPresetProps> = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset ? styles.presetOnline : styles.presetOnlineMobile;\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles.host, presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n\nAvatarBadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';\n"],"names":["React","classNames","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","styles","AvatarBadgeWithPreset","preset","className","restProps","size","useContext","badgeSize","isOnlinePreset","presetClassName","presetOnline","presetOnlineMobile","Icon","Badge","background","host","width","height","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,+BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,aAAU;AAC3D,OAAOC,YAAY,2BAA2B;AAY9C,OAAO,MAAMC,wBAA8D,CAAC,EAC1EC,SAAS,QAAQ,EACjBC,SAAS,EACT,GAAGC,WACwB;IAC3B,MAAM,EAAEC,IAAI,EAAE,GAAGZ,MAAMa,UAAU,CAACT;IAClC,MAAMU,YAAYZ,gCAAgCU;IAClD,MAAMG,iBAAiBN,WAAW;IAClC,MAAMO,kBAAkBD,iBAAiBR,OAAOU,YAAY,GAAGV,OAAOW,kBAAkB;IACxF,MAAMC,OAAOJ,iBAAiBV,eAAeC;IAE7C,qBACE,KAACH,UAAUiB,KAAK;QACdC,YAAW;QACXX,WAAWT,WAAWM,OAAOe,IAAI,EAAEN,iBAAiBN;QACnD,GAAGC,SAAS;kBAEb,cAAA,KAACQ;YAAKI,OAAOT;YAAWU,QAAQV;;;AAGtC,EAAE;AAEFN,sBAAsBiB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../../hooks/useConfigDirection';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  ImageBase,\n  type ImageBaseBadgeProps,\n  ImageBaseContext,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset: React.FC<AvatarBadgeWithPresetProps> = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset ? styles.presetOnline : styles.presetOnlineMobile;\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles.host, isRtl && styles.rtl, presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n\nAvatarBadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';\n"],"names":["React","classNames","useConfigDirection","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","styles","AvatarBadgeWithPreset","preset","className","restProps","direction","isRtl","size","useContext","badgeSize","isOnlinePreset","presetClassName","presetOnline","presetOnlineMobile","Icon","Badge","background","host","rtl","width","height","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,uCAAoC;AACvE,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,+BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,aAAU;AAC3D,OAAOC,YAAY,2BAA2B;AAY9C,OAAO,MAAMC,wBAA8D,CAAC,EAC1EC,SAAS,QAAQ,EACjBC,SAAS,EACT,GAAGC,WACwB;IAC3B,MAAMC,YAAYX;IAClB,MAAMY,QAAQD,cAAc;IAC5B,MAAM,EAAEE,IAAI,EAAE,GAAGf,MAAMgB,UAAU,CAACX;IAClC,MAAMY,YAAYd,gCAAgCY;IAClD,MAAMG,iBAAiBR,WAAW;IAClC,MAAMS,kBAAkBD,iBAAiBV,OAAOY,YAAY,GAAGZ,OAAOa,kBAAkB;IACxF,MAAMC,OAAOJ,iBAAiBZ,eAAeC;IAE7C,qBACE,KAACH,UAAUmB,KAAK;QACdC,YAAW;QACXb,WAAWV,WAAWO,OAAOiB,IAAI,EAAEX,SAASN,OAAOkB,GAAG,EAAEP,iBAAiBR;QACxE,GAAGC,SAAS;kBAEb,cAAA,KAACU;YAAKK,OAAOV;YAAWW,QAAQX;;;AAGtC,EAAE;AAEFR,sBAAsBoB,WAAW,GAAG"}

package/dist/cssm/components/Banner/Banner.module.css

@@ -1,48 +1,48 @@
 .host {
-  isolation: isolate;
-  color: var(--vkui--color_text_primary);
   position: relative;
   display: flex;
   flex-flow: row nowrap;
   align-items: stretch;
   padding: var(--vkui_internal--banner-padding);
+  overflow: hidden;
+  color: var(--vkui--color_text_primary);
   background-color: var(--vkui--color_background_secondary);
   border-radius: var(--vkui--size_border_radius--regular);
-  overflow: hidden;
+  isolation: isolate;
 
   --vkui_internal--banner-padding: 12px;
 }
 
 .host::before {
-  content: '';
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_banner_content);
+  box-sizing: border-box;
   display: block;
   inline-size: 100%;
   block-size: 100%;
+  pointer-events: none;
+  content: '';
   border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
   border-radius: inherit;
-  pointer-events: none;
-  box-sizing: border-box;
-  z-index: var(--vkui_internal--z_index_banner_content);
 }
 
 .before {
   position: relative;
+  z-index: var(--vkui_internal--z_index_banner_content);
   -webkit-margin-end: 12px;
           margin-inline-end: 12px;
-  z-index: var(--vkui_internal--z_index_banner_content);
 }
 
 .content {
   position: relative;
-  flex: 1;
+  z-index: var(--vkui_internal--z_index_banner_content);
   display: flex;
-  justify-content: center;
+  flex: 1;
   flex-direction: column;
+  justify-content: center;
   min-inline-size: 0;
-  z-index: var(--vkui_internal--z_index_banner_content);
 }
 
 .subtitle,
@@ -52,8 +52,8 @@
 
 .bg {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--vkui_internal--z_index_banner_background);
 }
 
@@ -78,18 +78,18 @@
 }
 
 .dismiss {
-  -webkit-margin-before: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
-          margin-block-start: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
-  -webkit-margin-end: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
-          margin-inline-end: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
-  align-self: flex-start;
+  z-index: var(--vkui_internal--z_index_banner_hover);
   display: flex;
   flex-flow: row nowrap;
   align-content: center;
   align-items: center;
+  align-self: flex-start;
   justify-content: center;
+  -webkit-margin-before: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
+          margin-block-start: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
+  -webkit-margin-end: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
+          margin-inline-end: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
   color: var(--vkui--color_icon_secondary);
-  z-index: var(--vkui_internal--z_index_banner_hover);
 }
 
 .actions {

package/dist/cssm/components/Button/Button.module.css

@@ -1,14 +1,14 @@
 .host {
   position: relative;
-  display: inline-block;
   box-sizing: border-box;
-  border: 0;
+  display: inline-block;
+  min-inline-size: var(--vkui--size_button_minimum_width--regular);
+  max-inline-size: 100%;
   min-block-size: var(--vkui--size_button_small_height--compact);
-  margin: 0;
   padding: 0;
+  margin: 0;
+  border: 0;
   border-radius: var(--vkui--size_border_radius--regular);
-  max-inline-size: 100%;
-  min-inline-size: var(--vkui--size_button_minimum_width--regular);
   transition:
     background-color 0.15s ease-out,
     color 0.15s ease-out;
@@ -40,19 +40,19 @@
 
 .stretched {
   display: block;
-  inline-size: 100%;
   flex-grow: 1;
   flex-basis: 0;
+  inline-size: 100%;
 }
 
 .in {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   inline-size: 100%;
   min-block-size: inherit;
   text-align: center;
-  box-sizing: border-box;
 }
 
 .alignLeft .in {
@@ -77,10 +77,10 @@
 }
 
 .content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-weight: var(--vkui--font_weight_accent2);
+  white-space: nowrap;
 }
 
 .sizeS .content:first-child {
@@ -183,13 +183,13 @@
 .singleIcon .before,
 .modeTertiary.singleIcon .after,
 .modeTertiary.singleIcon .before {
-  margin-inline: auto;
   padding-inline: 0;
+  margin-inline: auto;
 }
 
 .modeLink {
-  background: none;
   min-inline-size: initial;
+  background: none;
 }
 
 .modeLink .after,

package/dist/cssm/components/ButtonGroup/ButtonGroup.js

@@ -25,5 +25,6 @@ const stylesAlign = {
         ...restProps
     });
 };
+ButtonGroup.displayName = 'ButtonGroup';
 
 //# sourceMappingURL=ButtonGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ButtonGroup.module.css';\n\nconst stylesMode = {\n  vertical: styles.modeVertical,\n  horizontal: styles.modeHorizontal,\n};\n\nconst stylesGap = {\n  space: styles.gapSpace,\n  s: styles.gapS,\n  m: styles.gapM,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  center: styles.alignCenter,\n  right: styles.alignRight,\n};\n\nexport interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы.\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  ...restProps\n}: ButtonGroupProps): React.ReactNode => {\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        stylesMode[mode],\n        gap !== 'none' && stylesGap[gap],\n        stretched && styles.stretched,\n        stylesAlign[align],\n      )}\n      role=\"group\"\n      {...restProps}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","stylesMode","vertical","modeVertical","horizontal","modeHorizontal","stylesGap","space","gapSpace","s","gapS","m","gapM","stylesAlign","left","alignLeft","center","alignCenter","right","alignRight","ButtonGroup","mode","gap","stretched","align","restProps","baseClassName","host","role"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,UAAUF,OAAOG,YAAY;IAC7BC,YAAYJ,OAAOK,cAAc;AACnC;AAEA,MAAMC,YAAY;IAChBC,OAAOP,OAAOQ,QAAQ;IACtBC,GAAGT,OAAOU,IAAI;IACdC,GAAGX,OAAOY,IAAI;AAChB;AAEA,MAAMC,cAAc;IAClBC,MAAMd,OAAOe,SAAS;IACtBC,QAAQhB,OAAOiB,WAAW;IAC1BC,OAAOlB,OAAOmB,UAAU;AAC1B;AAuBA;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAO,YAAY,EACnBC,MAAM,GAAG,EACTC,YAAY,KAAK,EACjBC,QAAQ,OAAO,4EAA4E,GAA7E,EACd,GAAGC,WACc;IACjB,qBACE,KAAC1B;QACC2B,eAAe5B,WACbE,OAAO2B,IAAI,EACX1B,UAAU,CAACoB,KAAK,EAChBC,QAAQ,UAAUhB,SAAS,CAACgB,IAAI,EAChCC,aAAavB,OAAOuB,SAAS,EAC7BV,WAAW,CAACW,MAAM;QAEpBI,MAAK;QACJ,GAAGH,SAAS;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ButtonGroup.module.css';\n\nconst stylesMode = {\n  vertical: styles.modeVertical,\n  horizontal: styles.modeHorizontal,\n};\n\nconst stylesGap = {\n  space: styles.gapSpace,\n  s: styles.gapS,\n  m: styles.gapM,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  center: styles.alignCenter,\n  right: styles.alignRight,\n};\n\nexport interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы.\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  ...restProps\n}: ButtonGroupProps): React.ReactNode => {\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        stylesMode[mode],\n        gap !== 'none' && stylesGap[gap],\n        stretched && styles.stretched,\n        stylesAlign[align],\n      )}\n      role=\"group\"\n      {...restProps}\n    />\n  );\n};\n\nButtonGroup.displayName = 'ButtonGroup';\n"],"names":["classNames","RootComponent","styles","stylesMode","vertical","modeVertical","horizontal","modeHorizontal","stylesGap","space","gapSpace","s","gapS","m","gapM","stylesAlign","left","alignLeft","center","alignCenter","right","alignRight","ButtonGroup","mode","gap","stretched","align","restProps","baseClassName","host","role","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,UAAUF,OAAOG,YAAY;IAC7BC,YAAYJ,OAAOK,cAAc;AACnC;AAEA,MAAMC,YAAY;IAChBC,OAAOP,OAAOQ,QAAQ;IACtBC,GAAGT,OAAOU,IAAI;IACdC,GAAGX,OAAOY,IAAI;AAChB;AAEA,MAAMC,cAAc;IAClBC,MAAMd,OAAOe,SAAS;IACtBC,QAAQhB,OAAOiB,WAAW;IAC1BC,OAAOlB,OAAOmB,UAAU;AAC1B;AAuBA;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAO,YAAY,EACnBC,MAAM,GAAG,EACTC,YAAY,KAAK,EACjBC,QAAQ,OAAO,4EAA4E,GAA7E,EACd,GAAGC,WACc;IACjB,qBACE,KAAC1B;QACC2B,eAAe5B,WACbE,OAAO2B,IAAI,EACX1B,UAAU,CAACoB,KAAK,EAChBC,QAAQ,UAAUhB,SAAS,CAACgB,IAAI,EAChCC,aAAavB,OAAOuB,SAAS,EAC7BV,WAAW,CAACW,MAAM;QAEpBI,MAAK;QACJ,GAAGH,SAAS;;AAGnB,EAAE;AAEFL,YAAYS,WAAW,GAAG"}

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

@@ -3,11 +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 { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from "../../lib/calendar.js";
+import { convertDateFromTimeZone, convertDateToTimeZone } from "../../lib/date.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { CalendarDays } from "../CalendarDays/CalendarDays.js";
@@ -18,9 +17,24 @@ import styles from "./Calendar.module.css";
 const warn = warnOnce('Calendar');
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
- */ 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 })=>{
+ */ export const Calendar = ({ getRootRef, value: valueProp, defaultValue, 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, timezone, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId, ...props })=>{
+    const _onChange = React.useCallback((date)=>{
+        onChange?.(convertDateFromTimeZone(date, timezone) || undefined);
+    }, [
+        onChange,
+        timezone
+    ]);
+    const [value, updateValue] = useCustomEnsuredControl({
+        value: valueProp,
+        defaultValue,
+        onChange: _onChange
+    });
+    const timeZonedValue = React.useMemo(()=>convertDateToTimeZone(value, timezone), [
+        timezone,
+        value
+    ]);
     const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay, isMonthDisabled, isYearDisabled } = useCalendar({
-        value,
+        value: timeZonedValue,
         disableFuture,
         disablePast,
         shouldDisableDate,
@@ -30,14 +44,12 @@ const warn = warnOnce('Calendar');
         minDateTime,
         maxDateTime
     });
-    const [directionRef, textDirection = 'ltr'] = useDirection();
-    const rootRef = useExternRef(directionRef, getRootRef);
     useIsomorphicLayoutEffect(()=>{
-        if (value) {
-            setViewDate(value);
+        if (timeZonedValue) {
+            setViewDate(timeZonedValue);
         }
     }, [
-        value
+        timeZonedValue
     ]);
     if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {
         warn("Нельзя включить селекты выбора месяца/года, если размер календаря 's'", 'error');
@@ -54,7 +66,7 @@ const warn = warnOnce('Calendar');
         ].includes(event.key)) {
             event.preventDefault();
         }
-        const newFocusedDay = navigateDate(focusedDay ?? value, event.key);
+        const newFocusedDay = navigateDate(focusedDay ?? timeZonedValue, event.key);
         if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {
             setViewDate(newFocusedDay);
         }
@@ -63,102 +75,94 @@ const warn = warnOnce('Calendar');
         focusedDay,
         setFocusedDay,
         setViewDate,
-        value,
+        timeZonedValue,
         viewDate
     ]);
     const onDayChange = React.useCallback((date)=>{
-        let actualDate = setTimeEqual(date, value);
+        let actualDate = setTimeEqual(date, timeZonedValue);
         if (minDateTime || maxDateTime) {
             actualDate = clamp(actualDate, {
                 min: minDateTime,
                 max: maxDateTime
             });
         }
-        onChange?.(actualDate);
+        updateValue(actualDate);
     }, [
-        value,
-        onChange,
+        timeZonedValue,
+        updateValue,
         maxDateTime,
         minDateTime
     ]);
-    const isDayActive = React.useCallback((day)=>Boolean(value && isSameDay(day, value)), [
-        value
-    ]);
-    const directionContextValue = React.useMemo(()=>({
-            direction: textDirection
-        }), [
-        textDirection
+    const isDayActive = React.useCallback((day)=>Boolean(timeZonedValue && isSameDay(day, timeZonedValue)), [
+        timeZonedValue
     ]);
-    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,
-                    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
-                    })
+    return /*#__PURE__*/ _jsxs(RootComponent, {
+        ...props,
+        baseClassName: classNames(styles.host, size === 's' && styles.sizeS),
+        getRootRef: getRootRef,
+        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: timeZonedValue,
+                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 && timeZonedValue && size !== 's' && /*#__PURE__*/ _jsx("div", {
+                className: styles.time,
+                children: /*#__PURE__*/ _jsx(CalendarTime, {
+                    value: timeZonedValue,
+                    onChange: updateValue,
+                    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
                 })
-            ]
-        })
+            })
+        ]
     });
 };