@vkontakte/vkui 5.3.1 → 5.4.0

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

@@ -1 +1,287 @@
-.vkuiAlert{animation:vkui-animation-android-alert-intro .2s cubic-bezier(.4,0,.2,1);animation:vkui-animation-android-alert-intro .2s var(--vkui--animation_easing_platform);border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);color:#000;color:var(--vkui--color_text_primary);margin:auto 24px;max-width:416px;min-width:280px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiAlert--desktop{width:100%}.vkuiAlert--closing{opacity:0;transform:scale(.95);transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);transition:transform .2s var(--vkui--animation_easing_platform),opacity .2s var(--vkui--animation_easing_platform)}.vkuiAlert:before{background-color:#fff;background-color:var(--vkui--color_background_modal);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.vkuiAlert__content{padding:24px 24px 20px;position:relative}.vkuiAlert__action{background:transparent;white-space:nowrap}.vkuiAlert__actions{display:flex;max-width:100%;padding:0 16px 16px;position:relative}.vkuiAlert__header{margin-bottom:8px}.vkuiAlert__text{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiAlert--h .vkuiAlert__actions{justify-content:flex-end}.vkuiAlert--h .vkuiAlert__button{margin-left:8px}.vkuiAlert--v .vkuiAlert__actions{align-items:flex-end;flex-direction:column}.vkuiAlert--v .vkuiAlert__button{margin-bottom:4px;margin-top:4px}.vkuiAlert--v .vkuiAlert__button:first-child{margin-top:0}.vkuiAlert--v .vkuiAlert__button:last-child{margin-bottom:0}.vkuiAlert--ios{animation:vkui-animation-ios-alert-intro .3s cubic-bezier(.4,0,.2,1);animation:vkui-animation-ios-alert-intro .3s var(--vkui--animation_easing_platform);box-shadow:none;min-width:270px;overflow:hidden;width:270px}.vkuiAlert--ios.vkuiAlert--closing{opacity:0;transform:none;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiAlert--ios .vkuiAlert__content{padding:19px 16px 20px;text-align:center}.vkuiAlert--ios .vkuiAlert__header:not(:last-child){margin-bottom:7px}.vkuiAlert--ios .vkuiAlert__text{color:inherit}.vkuiAlert--ios .vkuiAlert__content:after{background:rgba(0,0,0,.12);background:var(--vkui--color_separator_primary_alpha);bottom:0;content:"";height:1px;left:0;position:absolute;right:0;transform-origin:center bottom}.vkuiAlert--ios .vkuiAlert__actions{padding:initial}.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__actions{align-items:normal;flex-direction:column}.vkuiAlert--ios .vkuiAlert__action{border:0;border-radius:0;color:#2688eb;color:var(--vkui--color_text_accent);display:block;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-size:17px;height:44px;line-height:44px;margin:0;overflow:hidden;padding:0 6px;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis}.vkuiAlert--ios .vkuiAlert__action:after{background:rgba(0,0,0,.12);background:var(--vkui--color_separator_primary_alpha);content:"";position:absolute}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:after{height:100%;right:0;top:0;transform-origin:right center;width:1px}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:last-child:after{content:none}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action{flex-basis:0;flex-grow:1;flex-shrink:1}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:first-child{border-bottom-left-radius:12px;border-bottom-left-radius:var(--vkui--size_border_radius_paper--regular)}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:last-child{border-bottom-right-radius:12px;border-bottom-right-radius:var(--vkui--size_border_radius_paper--regular)}.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:after{bottom:0;height:1px;left:0;transform-origin:center bottom;width:100%}.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:last-child:after{content:none}.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:last-child{border-radius:0 0 12px 12px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiAlert--ios .vkuiAlert__content:after,.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:after{transform:scaleY(.5)}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:after{transform:scaleX(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiAlert--ios .vkuiAlert__content:after,.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:after{transform:scaleY(.33)}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:after{transform:scaleX(.33)}}.vkuiAlert--ios .vkuiAlert__action--mode-cancel{font-weight:600}.vkuiAlert--ios .vkuiAlert__action--mode-destructive{color:#e64646;color:var(--vkui--color_text_negative)}.vkuiAlert--vkcom{box-shadow:0 0 2px rgba(0,0,0,.12),0 0 96px rgba(0,0,0,.16);width:400px}.vkuiAlert--vkcom .vkuiAlert__content{padding:24px}.vkuiAlert--vkcom .vkuiAlert__actions{padding:0 24px 16px}.vkuiAlert--vkcom .vkuiAlert__button{order:2}.vkuiAlert--vkcom .vkuiAlert__button--mode-cancel{order:1}@keyframes vkui-animation-ios-alert-intro{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes vkui-animation-android-alert-intro{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
+.Alert {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  color: var(--vkui--color_text_primary);
+  position: relative;
+  min-width: 280px;
+  max-width: 416px;
+  margin: auto 24px;
+  box-shadow: var(--vkui--elevation4);
+  border-radius: var(--vkui--size_border_radius_paper--regular);
+  animation: vkui-animation-android-alert-intro 0.2s var(--vkui--animation_easing_platform);
+}
+
+.Alert--desktop {
+  width: 100%;
+}
+
+.Alert--closing {
+  transform: scale(0.95);
+  opacity: 0;
+  transition: transform 0.2s var(--vkui--animation_easing_platform),
+    opacity 0.2s var(--vkui--animation_easing_platform);
+}
+
+.Alert::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--vkui--color_background_modal);
+  content: '';
+  border-radius: inherit;
+}
+
+.Alert__content {
+  position: relative;
+  padding: 24px 24px 20px;
+}
+
+.Alert__action {
+  white-space: nowrap;
+  background: transparent;
+}
+
+.Alert__actions {
+  display: flex;
+  max-width: 100%;
+  position: relative;
+  padding: 0 16px 16px;
+}
+
+.Alert__header {
+  margin-bottom: 8px;
+}
+
+.Alert__text {
+  color: var(--vkui--color_text_secondary);
+}
+
+.Alert--h .Alert__actions {
+  justify-content: flex-end;
+}
+
+.Alert--h .Alert__button {
+  margin-left: 8px;
+}
+
+.Alert--v .Alert__actions {
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.Alert--v .Alert__button {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.Alert--v .Alert__button:first-child {
+  margin-top: 0;
+}
+
+.Alert--v .Alert__button:last-child {
+  margin-bottom: 0;
+}
+
+/**
+ * iOS version
+ */
+
+.Alert--ios {
+  width: 270px;
+  min-width: 270px;
+  overflow: hidden;
+  animation: vkui-animation-ios-alert-intro 0.3s var(--vkui--animation_easing_platform);
+  box-shadow: none;
+}
+
+.Alert--ios.Alert--closing {
+  transform: none;
+  opacity: 0;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+}
+
+.Alert--ios .Alert__content {
+  padding: 19px 16px 20px;
+  text-align: center;
+}
+
+.Alert--ios .Alert__header:not(:last-child) {
+  margin-bottom: 7px;
+}
+
+.Alert--ios .Alert__text {
+  color: inherit;
+}
+
+.Alert--ios .Alert__content::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  height: 1px;
+  right: 0;
+  left: 0;
+  background: var(--vkui--color_separator_primary_alpha);
+  transform-origin: center bottom;
+}
+
+.Alert--ios .Alert__actions {
+  padding: initial;
+}
+
+.Alert--ios.Alert--v .Alert__actions {
+  flex-direction: column;
+  align-items: initial;
+}
+
+.Alert--ios .Alert__action {
+  font-family: var(--vkui--font_family_base);
+  position: relative;
+  font-size: 17px;
+  line-height: 44px;
+  color: var(--vkui--color_text_accent);
+  border: 0;
+  padding: 0 6px;
+  margin: 0;
+  height: 44px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 0;
+}
+
+.Alert--ios .Alert__action::after {
+  content: '';
+  position: absolute;
+  background: var(--vkui--color_separator_primary_alpha);
+}
+
+.Alert--ios.Alert--h .Alert__action::after {
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  transform-origin: right center;
+}
+
+.Alert--ios.Alert--h .Alert__action:last-child::after {
+  content: none;
+}
+
+.Alert--ios.Alert--h .Alert__action {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
+}
+
+.Alert--ios.Alert--h .Alert__action:first-child {
+  border-bottom-left-radius: var(--vkui--size_border_radius_paper--regular);
+}
+
+.Alert--ios.Alert--h .Alert__action:last-child {
+  border-bottom-right-radius: var(--vkui--size_border_radius_paper--regular);
+}
+
+.Alert--ios.Alert--v .Alert__action::after {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  transform-origin: center bottom;
+}
+
+.Alert--ios.Alert--v .Alert__action:last-child::after {
+  content: none;
+}
+
+.Alert--ios.Alert--v .Alert__action:last-child {
+  border-radius: 0 0 12px 12px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  .Alert--ios .Alert__content::after,
+  .Alert--ios.Alert--v .Alert__action::after {
+    transform: scaleY(0.5);
+  }
+
+  .Alert--ios.Alert--h .Alert__action::after {
+    transform: scaleX(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
+  .Alert--ios .Alert__content::after,
+  .Alert--ios.Alert--v .Alert__action::after {
+    transform: scaleY(0.33);
+  }
+
+  .Alert--ios.Alert--h .Alert__action::after {
+    transform: scaleX(0.33);
+  }
+}
+
+.Alert--ios .Alert__action--mode-cancel {
+  font-weight: 600;
+}
+
+.Alert--ios .Alert__action--mode-destructive {
+  color: var(--vkui--color_text_negative);
+}
+
+/**
+ * VKCOM
+ */
+
+.Alert--vkcom {
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 96px rgba(0, 0, 0, 0.16);
+  width: 400px;
+}
+
+.Alert--vkcom .Alert__content {
+  padding: 24px;
+}
+
+.Alert--vkcom .Alert__actions {
+  padding: 0 24px 16px;
+}
+
+.Alert--vkcom .Alert__button {
+  order: 2;
+}
+
+.Alert--vkcom .Alert__button--mode-cancel {
+  order: 1;
+}
+
+/**
+ * Animations
+ */
+
+@keyframes vkui-animation-ios-alert-intro {
+  from {
+    opacity: 0;
+    transform: scale(1.05);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes vkui-animation-android-alert-intro {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

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

@@ -1 +1,23 @@
-.vkuiAppRoot{height:100%}.vkuiAppRoot--pointer-has-not{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (pointer:coarse),(pointer:none){.vkuiAppRoot--pointer-none{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}.vkui__root--embedded .vkuiAppRoot{overflow:auto}
+.AppRoot {
+  height: 100%;
+}
+
+.AppRoot--pointer-has-not {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+@media (pointer: coarse),(pointer: none) {
+  .AppRoot--pointer-none {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+  }
+}
+
+:global(.vkui__root--embedded) .AppRoot {
+  overflow: auto;
+}

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
-export interface AppRootPortalProps {
+/// <reference types="react" />
+import { HasChildren } from '../../types';
+export interface AppRootPortalProps extends HasChildren {
     className?: string;
     forcePortal?: boolean;
-    children?: React.ReactNode;
 }
 export declare const AppRootPortal: ({ children, className, forcePortal: forcePortalProp, }: AppRootPortalProps) => JSX.Element | null;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';\nimport { AppRootContext } from './AppRootContext';\n\nexport interface AppRootPortalProps {\n  className?: string;\n  forcePortal?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n}: AppRootPortalProps) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  const isClient = useIsClient();\n  if (!isClient) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== 'full';\n\n  return !disablePortal && portalRoot && forcePortal ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalRoot,\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n"],"names":["React","createPortal","useAppearance","useIsClient","AppearanceProvider","AppRootContext","AppRootPortal","children","className","forcePortal","forcePortalProp","portalRoot","mode","disablePortal","useContext","appearance","isClient","div","Fragment"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,cAAc,QAAQ,mBAAmB;AAQlD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAQ,EACRC,UAAS,EACTC,aAAaC,gBAAe,EACT,GAAK;IACxB,MAAM,EAAEC,WAAU,EAAEC,KAAI,EAAEC,cAAa,EAAE,GAAGb,MAAMc,UAAU,CAACT;IAC7D,MAAMU,aAAab;IAEnB,MAAMc,WAAWb;IACjB,IAAI,CAACa,UAAU;QACb,OAAO,IAAI;IACb,CAAC;IAED,MAAMP,cAAcC,mBAAmBE,SAAS;IAEhD,OAAO,CAACC,iBAAiBF,cAAcF,4BACrCR,2BACE,oBAACG;QAAmBW,YAAYA;qBAC9B,oBAACE;QAAIT,WAAWA;OAAYD,YAE9BI,4BAGF,oBAACX,MAAMkB,QAAQ,QAAEX,SAClB;AACH,EAAE"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { HasChildren } from '../../types';\nimport { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';\nimport { AppRootContext } from './AppRootContext';\n\nexport interface AppRootPortalProps extends HasChildren {\n  className?: string;\n  forcePortal?: boolean;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n}: AppRootPortalProps) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  const isClient = useIsClient();\n  if (!isClient) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== 'full';\n\n  return !disablePortal && portalRoot && forcePortal ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalRoot,\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n"],"names":["React","createPortal","useAppearance","useIsClient","AppearanceProvider","AppRootContext","AppRootPortal","children","className","forcePortal","forcePortalProp","portalRoot","mode","disablePortal","useContext","appearance","isClient","div","Fragment"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,cAAc,QAAQ,mBAAmB;AAOlD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAQ,EACRC,UAAS,EACTC,aAAaC,gBAAe,EACT,GAAK;IACxB,MAAM,EAAEC,WAAU,EAAEC,KAAI,EAAEC,cAAa,EAAE,GAAGb,MAAMc,UAAU,CAACT;IAC7D,MAAMU,aAAab;IAEnB,MAAMc,WAAWb;IACjB,IAAI,CAACa,UAAU;QACb,OAAO,IAAI;IACb,CAAC;IAED,MAAMP,cAAcC,mBAAmBE,SAAS;IAEhD,OAAO,CAACC,iBAAiBF,cAAcF,4BACrCR,2BACE,oBAACG;QAAmBW,YAAYA;qBAC9B,oBAACE;QAAIT,WAAWA;OAAYD,YAE9BI,4BAGF,oBAACX,MAAMkB,QAAQ,QAAEX,SAClB;AACH,EAAE"}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HasChildren } from '../../types';
 export interface ScrollContextInterface {
     getScroll(this: void): {
         x: number;
@@ -12,9 +13,8 @@ export interface ScrollContextInterface {
 }
 export declare const ScrollContext: React.Context<ScrollContextInterface>;
 export declare const useScroll: () => ScrollContextInterface;
-export interface ScrollControllerProps {
+export interface ScrollControllerProps extends HasChildren {
     elRef: React.RefObject<HTMLElement>;
-    children?: React.ReactNode;
 }
 export declare const GlobalScrollController: ({ children }: ScrollControllerProps) => JSX.Element;
 export declare const ElementScrollController: ({ elRef, children }: ScrollControllerProps) => JSX.Element;

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

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

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

@@ -1 +1,55 @@
-.vkuiAvatar{border-radius:50%}.vkuiAvatar--has-gradient{color:#fff;color:var(--vkui--color_text_contrast)}.vkuiAvatar--gradient-red{background-color:#e52e40;background-image:linear-gradient(135deg,#ff7583,#e52e40)}.vkuiAvatar--gradient-pink{background-color:#e62e6b;background-image:linear-gradient(135deg,#ff8880,#e62e6b)}.vkuiAvatar--gradient-orange{background-color:#e66b2e;background-image:linear-gradient(135deg,#ffbf80,#e66b2e)}.vkuiAvatar--gradient-yellow{background-color:#e7a902;background-image:linear-gradient(135deg,#ffd54f,#e7a902)}.vkuiAvatar--gradient-green{background-color:#6cd97e;background-image:linear-gradient(135deg,#6cd97e,#12b212)}.vkuiAvatar--gradient-l-blue{background-color:#2bb4d6;background-image:linear-gradient(135deg,#7df1fa,#2bb4d6)}.vkuiAvatar--gradient-blue{background-color:#3f8ae0;background-image:linear-gradient(135deg,#6cf,#3f8ae0)}.vkuiAvatar--gradient-violet{background-color:#8f3fe0;background-image:linear-gradient(135deg,#d3a6ff,#8f3fe0)}.vkuiAvatar__initials{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:600;line-height:1;text-align:center;text-transform:uppercase}
+.Avatar {
+  border-radius: 50%;
+}
+
+.Avatar--has-gradient {
+  color: var(--vkui--color_text_contrast);
+}
+
+.Avatar--gradient-red {
+  background-color: #e52e40;
+  background-image: linear-gradient(135deg, #ff7583, #e52e40);
+}
+
+.Avatar--gradient-pink {
+  background-color: #e62e6b;
+  background-image: linear-gradient(135deg, #ff8880, #e62e6b);
+}
+
+.Avatar--gradient-orange {
+  background-color: #e66b2e;
+  background-image: linear-gradient(135deg, #ffbf80, #e66b2e);
+}
+
+.Avatar--gradient-yellow {
+  background-color: #e7a902;
+  background-image: linear-gradient(135deg, #ffd54f, #e7a902);
+}
+
+.Avatar--gradient-green {
+  background-color: #6cd97e;
+  background-image: linear-gradient(135deg, #6cd97e, #12b212);
+}
+
+.Avatar--gradient-l-blue {
+  background-color: #2bb4d6;
+  background-image: linear-gradient(135deg, #7df1fa, #2bb4d6);
+}
+
+.Avatar--gradient-blue {
+  background-color: #3f8ae0;
+  background-image: linear-gradient(135deg, #6cf, #3f8ae0);
+}
+
+.Avatar--gradient-violet {
+  background-color: #8f3fe0;
+  background-image: linear-gradient(135deg, #d3a6ff, #8f3fe0);
+}
+
+.Avatar__initials {
+  font-family: var(--vkui--font_family_accent);
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  text-align: center;
+}

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

@@ -1 +1,29 @@
-.vkuiAvatarBadge{bottom:0;right:0}.vkuiAvatarBadge--shifted{bottom:-2px;right:-2px}.vkuiAvatarBadge--preset-online,.vkuiAvatarBadge--preset-onlineMobile{bottom:14%;color:#4bb34b;color:var(--vkui--color_accent_green);right:14%;transform:translate(50%,50%)}.vkuiAvatarBadge--preset-online{padding:0}.vkuiAvatarBadge--preset-onlineMobile{border-radius:3px}
+.AvatarBadge {
+  right: 0;
+  bottom: 0;
+}
+
+.AvatarBadge--shifted {
+  right: -2px;
+  bottom: -2px;
+}
+
+.AvatarBadge--preset-online,
+.AvatarBadge--preset-onlineMobile {
+  right: 14%;
+  bottom: 14%;
+  color: var(--vkui--color_accent_green);
+  transform: translate(50%, 50%);
+}
+
+/**
+ * Перебиваем свойства `ImageBaseBadge` для этих кейсов
+ */
+
+.AvatarBadge--preset-online {
+  padding: 0;
+}
+
+.AvatarBadge--preset-onlineMobile {
+  border-radius: 3px;
+}

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

@@ -1 +1,27 @@
-.vkuiBadge{border-radius:50%;display:block;flex-grow:0;flex-shrink:0;height:6px;width:6px}.vkuiBadge--mode-new{background-color:#2688eb;background-color:var(--vkui--color_icon_accent)}.vkuiBadge--mode-prominent{background-color:#ff3347;background-color:var(--vkui--color_accent_red)}
+.Badge {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.Badge--mode-new {
+  background-color: var(--vkui--color_icon_accent);
+}
+
+.Badge--mode-prominent {
+  background-color: var(--vkui--color_accent_red);
+}
+
+/**
+ * CMP:
+ * TabbarItem
+ */
+
+:global(.vkuiInternalTabbarItem__label) .Badge {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+}