@vkontakte/vkui 6.1.2 → 6.2.0

package/src/index.ts

@@ -4,6 +4,7 @@ import './styles/dynamicTokens.css';
 import './styles/focusVisible.module.css';
 import './styles/animationFades.module.css';
 import './styles/transformOriginByPlacement.module.css';
+import './styles/gaps.module.css';
 
 export { AppRoot } from './components/AppRoot/AppRoot';
 export type { AppRootProps } from './components/AppRoot/AppRoot';
@@ -13,6 +14,8 @@ export type { SafeAreaInsets } from './components/AppRoot/types';
  * Typography
  */
 export type { TypographyProps } from './components/Typography/Typography';
+export { DisplayTitle } from './components/Typography/DisplayTitle/DisplayTitle';
+export type { DisplayTitleProps } from './components/Typography/DisplayTitle/DisplayTitle';
 export { Title } from './components/Typography/Title/Title';
 export type { TitleProps } from './components/Typography/Title/Title';
 export { Headline } from './components/Typography/Headline/Headline';
@@ -101,6 +104,8 @@ export { HorizontalScroll } from './components/HorizontalScroll/HorizontalScroll
 export type { HorizontalScrollProps } from './components/HorizontalScroll/HorizontalScroll';
 export { AspectRatio } from './components/AspectRatio/AspectRatio';
 export type { AspectRatioProps } from './components/AspectRatio/AspectRatio';
+export { Flex } from './components/Flex/Flex';
+export type { FlexProps } from './components/Flex/Flex';
 
 /**
  * Popouts
@@ -250,6 +255,7 @@ export type { CustomPaginationNavigationButton } from './components/Pagination/P
 export { Accordion } from './components/Accordion/Accordion';
 export type { AccordionProps } from './components/Accordion/Accordion';
 export type { AccordionSummaryProps } from './components/Accordion/AccordionSummary';
+export type { AccordionContentProps } from './components/Accordion/AccordionContent';
 
 /**
  * Forms
@@ -299,6 +305,7 @@ export type {
   SelectProps,
   CustomSelectOptionInterface,
   CustomSelectRenderOption,
+  CustomSelectClearButtonProps,
 } from './components/CustomSelect/CustomSelect';
 export { CustomSelectOption } from './components/CustomSelectOption/CustomSelectOption';
 export type { CustomSelectOptionProps } from './components/CustomSelectOption/CustomSelectOption';

package/src/lib/accessibility.ts

@@ -106,6 +106,7 @@ export const injectAriaExpandedPropByRole = (
   role?: React.AriaRole,
 ) => {
   switch (role) {
+    case 'dialog':
     case 'menu':
     case 'application':
     case 'tab':

package/src/lib/animation/index.ts

@@ -1,4 +1,5 @@
 export { useCSSKeyframesAnimationController } from './useCSSKeyframesAnimationController';
+export { REDUCE_MOTION_MEDIA_QUERY, useReducedMotion } from './useReducedMotion';
 export { rubberbandIfOutOfBounds } from './rubberbandIfOutOfBounds';
 export { animationFadeClassNames } from './fades';
 export { transformOriginClassNames } from './transformOrigin';

package/src/lib/animation/useCSSKeyframesAnimationController.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
-import { useReducedMotion } from './useReducedMotion';
 
 export type UseCSSAnimationControllerCallback = {
   onEnter?: () => void;
@@ -27,8 +26,9 @@ export const useCSSKeyframesAnimationController = (
     onExiting: onExitingProp = noop,
     onExited: onExitedProp = noop,
   }: UseCSSAnimationControllerCallback = {},
+  disableInitAnimation = false,
 ): [AnimationState, AnimationHandlers] => {
-  const isReducedMotion = useReducedMotion();
+  const isFirstInitRef = React.useRef(disableInitAnimation);
   const [state, setState] = React.useState<AnimationState>(stateProp);
   const [willBeEnter, setWillBeEnter] = React.useState(stateProp === 'enter');
   const [willBeExit, setWillBeExit] = React.useState(stateProp === 'exit');
@@ -74,7 +74,7 @@ export const useCSSKeyframesAnimationController = (
     function updateState() {
       switch (stateProp) {
         case 'enter':
-          if (isReducedMotion && state === 'enter') {
+          if (isFirstInitRef.current && state === 'enter') {
             entered();
             break;
           }
@@ -88,7 +88,7 @@ export const useCSSKeyframesAnimationController = (
           onEnter();
           break;
         case 'exit':
-          if (isReducedMotion && state === 'exit') {
+          if (isFirstInitRef.current && state === 'exit') {
             exited();
             break;
           }
@@ -102,8 +102,10 @@ export const useCSSKeyframesAnimationController = (
           onExit();
           break;
       }
+
+      isFirstInitRef.current = false;
     },
-    [state, stateProp, willBeEnter, willBeExit, isReducedMotion, entered, exited, onEnter, onExit],
+    [state, stateProp, willBeEnter, willBeExit, entered, exited, onEnter, onExit],
   );
 
   return [state, { onAnimationStart, onAnimationEnd }];

package/src/lib/dom.tsx

@@ -151,8 +151,8 @@ export const getNearestOverflowAncestor = (childEl: Node): HTMLElement | Window
   return isBody(foundAncestor)
     ? getWindow(foundAncestor)
     : isHTMLElement(childEl)
-    ? foundAncestor
-    : null;
+      ? foundAncestor
+      : null;
 };
 
 export const getScrollHeight = (node: Element | Window) => {

package/src/lib/layouts/gaps.ts

@@ -0,0 +1,48 @@
+import { LiteralUnion } from '../../types';
+import styles from '../../styles/gaps.module.css';
+
+type GapPresets = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';
+
+export const columnGapClassNames = {
+  '2xs': styles['-column-gap--2xs'],
+  'xs': styles['-column-gap--xs'],
+  's': styles['-column-gap--s'],
+  'm': styles['-column-gap--m'],
+  'l': styles['-column-gap--l'],
+  'xl': styles['-column-gap--xl'],
+  '2xl': styles['-column-gap--2xl'],
+  '3xl': styles['-column-gap--3xl'],
+  '4xl': styles['-column-gap--4xl'],
+};
+
+export const rowGapClassNames = {
+  '2xs': styles['-row-gap--2xs'],
+  'xs': styles['-row-gap--xs'],
+  's': styles['-row-gap--s'],
+  'm': styles['-row-gap--m'],
+  'l': styles['-row-gap--l'],
+  'xl': styles['-row-gap--xl'],
+  '2xl': styles['-row-gap--2xl'],
+  '3xl': styles['-row-gap--3xl'],
+  '4xl': styles['-row-gap--4xl'],
+};
+
+export type GapProp = LiteralUnion<GapPresets, number>;
+
+export type GapsProp = GapProp | [GapProp, GapProp];
+
+/**
+ * Возвращает массив отступов [columnGap, rowGap]
+ */
+export function calculateGap(
+  gap: GapsProp | undefined,
+): [GapProp, GapProp] | [undefined, undefined] {
+  if (!gap) {
+    return [undefined, undefined];
+  }
+  if (typeof gap === 'number' || typeof gap === 'string') {
+    return [gap, gap];
+  }
+
+  return gap;
+}

package/src/lib/layouts/index.ts

@@ -0,0 +1,7 @@
+export {
+  calculateGap,
+  type GapsProp,
+  type GapProp,
+  columnGapClassNames,
+  rowGapClassNames,
+} from './gaps';

package/src/styles/animationFades.module.css

@@ -1,17 +1,9 @@
-/**
- * [a11y]
- * add animation for browsers that support prefers-reduced-motion
- * so that users with vestibular motion disorders have no problem
- * navigating accessible vkui apps via keyboard
- */
-@media (prefers-reduced-motion: no-preference) {
-  .-anim-fade-in {
-    animation: anim-fade-in 0.1s ease-in forwards;
-  }
+.-anim-fade-in {
+  animation: anim-fade-in 0.1s ease-in forwards;
+}
 
-  .-anim-fade-out {
-    animation: anim-fade-out 0.1s ease-out forwards;
-  }
+.-anim-fade-out {
+  animation: anim-fade-out 0.1s ease-out forwards;
 }
 
 @keyframes anim-fade-in {

package/src/styles/constants.css

@@ -79,6 +79,10 @@
 
   /* z_index HorizontalScroll isolate */
   --vkui_internal--z_index_horizontal_scroll_arrow: 1;
+
+  /* Layout Gaps */
+  --vkui_internal--row_gap: 0;
+  --vkui_internal--column_gap: 0;
 }
 
 @supports (padding-top: constant(safe-area-inset-top)) {

package/src/styles/customMedias.generated.css

@@ -11,7 +11,7 @@
 /* prettier-ignore */
 @custom-media --sizeY-regular (pointer: coarse) and (min-height: 415px), (pointer: none) and (min-height: 415px), (max-width: 767.9px) and (min-height: 415px);
 /* prettier-ignore */
-@custom-media --hover-has (hover: hover);
+@custom-media --hover-has (hover: hover) and (pointer: fine);
 /* prettier-ignore */
 @custom-media --hover-has-not (hover: none);
 /* prettier-ignore */
@@ -19,6 +19,8 @@
 /* prettier-ignore */
 @custom-media --pointer-has-not (pointer: coarse), (pointer: none);
 /* prettier-ignore */
+@custom-media --reduce-motion screen and (prefers-reduced-motion: reduce);
+/* prettier-ignore */
 @custom-media --desktop (min-width: 768px) and (pointer: fine), (min-width: 768px) and (min-height: 720px);
 /* prettier-ignore */
 @custom-media --mobile (max-width: 767.9px), (pointer: none) and (max-height: 719.9px), (pointer: coarse) and (max-height: 719.9px);

package/src/styles/focusVisible.module.css

@@ -16,51 +16,35 @@
 /* stylelint-enable selector-max-universal */
 
 .-focus-visible.-focus-visible--mode-outside {
-  --vkui_internal--outline_offset: var(--vkui_internal--outline_width);
+  --vkui_internal--outline_offset_from: 0;
+  --vkui_internal--outline_offset_to: var(--vkui_internal--outline_width);
 }
 
 .-focus-visible.-focus-visible--mode-inside {
-  --vkui_internal--outline_offset: calc(-1 * var(--vkui_internal--outline_width));
+  --vkui_internal--outline_offset_from: calc(-2 * var(--vkui_internal--outline_width));
+  --vkui_internal--outline_offset_to: calc(-1 * var(--vkui_internal--outline_width));
 }
 
 .-focus-visible.-focus-visible--focused.-focus-visible--mode-inside,
 .-focus-visible.-focus-visible--focused.-focus-visible--mode-outside {
   outline: var(--vkui_internal--outline);
-  outline-offset: var(--vkui_internal--outline_offset);
+  outline-offset: var(--vkui_internal--outline_offset_to);
+  animation: animation-outline-offset 0.1s ease-in-out 0.01s forwards;
 }
 
-/**
-  * [a11y][progressive enhancement]
-  * @see https://github.com/VKCOM/VKUI/issues/2703
-  *
-  * TODO [a11y]: перенести комментарий в задачу по ссылке выше
-  *
-  * add animation for browsers that support prefers-reduced-motion
-  * without support there are no animations; this way, users with
-  * vestibular motion disorders are not affected
-  *
-  * добавляем анимации для браузеров с поддержкой prefers-reduced-motion
-  * без поддержки анимаций нет вообще; так юзеры с проблемами с
-  * вестибулярным аппаратом могут пользоваться приложениями на vkui с
-  * клавиатуры без спецэффектов
- */
-@media (prefers-reduced-motion: no-preference) {
+@media (--reduce-motion) {
   .-focus-visible.-focus-visible--focused.-focus-visible--mode-inside,
   .-focus-visible.-focus-visible--focused.-focus-visible--mode-outside {
-    outline-offset: 0;
-    animation: animation-outline-offset 0.1s ease-in-out 0.01s forwards;
-  }
-
-  .-focus-visible.-focus-visible--focused.-focus-visible--mode-inside {
-    outline-offset: calc(-2 * var(--vkui_internal--outline_width));
+    animation: none;
   }
 }
 
 @keyframes animation-outline-offset {
   0% {
+    outline-offset: var(--vkui_internal--outline_offset_from);
   }
 
   100% {
-    outline-offset: var(--vkui_internal--outline_offset);
+    outline-offset: var(--vkui_internal--outline_offset_to);
   }
 }

package/src/styles/gaps.module.css

@@ -0,0 +1,75 @@
+/* Row Gap */
+
+.-row-gap--2xs {
+  --vkui_internal--row_gap: var(--vkui--spacing_size_2xs);
+}
+
+.-row-gap--xs {
+  --vkui_internal--row_gap: var(--vkui--spacing_size_xs);
+}
+
+.-row-gap--s {
+  --vkui_internal--row_gap: var(--vkui--spacing_size_s);
+}
+
+.-row-gap--m {
+  --vkui_internal--row_gap: var(--vkui--spacing_size_m);
+}
+
+.-row-gap--l {
+  --vkui_internal--row_gap: var(--vkui--spacing_size_l);
+}
+
+.-row-gap--xl {
+  --vkui_internal--row_gap: var(--vkui--spacing_size_xl);
+}
+
+.-row-gap--2xl {
+  --vkui_internal--row_gap: var(--vkui--spacing_size_2xl);
+}
+
+.-row-gap--3xl {
+  --vkui_internal--row_gap: var(--vkui--spacing_size_3xl);
+}
+
+.-row-gap--4xl {
+  --vkui_internal--row_gap: var(--vkui--spacing_size_4xl);
+}
+
+/* Column Gap */
+
+.-column-gap--2xs {
+  --vkui_internal--column_gap: var(--vkui--spacing_size_2xs);
+}
+
+.-column-gap--xs {
+  --vkui_internal--column_gap: var(--vkui--spacing_size_xs);
+}
+
+.-column-gap--s {
+  --vkui_internal--column_gap: var(--vkui--spacing_size_s);
+}
+
+.-column-gap--m {
+  --vkui_internal--column_gap: var(--vkui--spacing_size_m);
+}
+
+.-column-gap--l {
+  --vkui_internal--column_gap: var(--vkui--spacing_size_l);
+}
+
+.-column-gap--xl {
+  --vkui_internal--column_gap: var(--vkui--spacing_size_xl);
+}
+
+.-column-gap--2xl {
+  --vkui_internal--column_gap: var(--vkui--spacing_size_2xl);
+}
+
+.-column-gap--3xl {
+  --vkui_internal--column_gap: var(--vkui--spacing_size_3xl);
+}
+
+.-column-gap--4xl {
+  --vkui_internal--column_gap: var(--vkui--spacing_size_4xl);
+}

package/src/types.ts

@@ -126,3 +126,5 @@ export type PickOnlyFunctionProps<T> = Pick<T, GetPropsWithFunctionKeys<T>>;
 export type HasOnlyExpectedProps<Props, ExpectedProps> = {
   [K in keyof Props]: K extends keyof ExpectedProps ? ExpectedProps[K] : never;
 };
+
+export type TimeoutId = ReturnType<typeof setTimeout> | null;

package/dist/cjs/hooks/useTimeout.d.ts

@@ -1,5 +0,0 @@
-export declare function useTimeout(cb: () => any, duration: number): {
-    set: (duration?: number) => void;
-    clear: () => void;
-};
-//# sourceMappingURL=useTimeout.d.ts.map

package/dist/cjs/hooks/useTimeout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTimeout.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTimeout.ts"],"names":[],"mappings":"AAIA,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,EAAE,QAAQ,EAAE,MAAM;;;EA4BzD"}

package/dist/cjs/hooks/useTimeout.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useTimeout", {
-    enumerable: true,
-    get: function() {
-        return useTimeout;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _dom = require("../lib/dom");
-const _useIsomorphicLayoutEffect = require("../lib/useIsomorphicLayoutEffect");
-function useTimeout(cb, duration) {
-    const options = _react.useRef({
-        cb,
-        duration
-    });
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
-        options.current.cb = cb;
-        options.current.duration = duration;
-    }, [
-        cb,
-        duration
-    ]);
-    const timeout = _react.useRef();
-    const clear = _react.useCallback(()=>{
-        if (_dom.canUseDOM && (timeout === null || timeout === void 0 ? void 0 : timeout.current)) {
-            clearTimeout(timeout.current);
-        }
-    }, []);
-    const set = _react.useCallback((duration = options.current.duration)=>{
-        clear();
-        if (_dom.canUseDOM) {
-            timeout.current = setTimeout(()=>{
-                const { cb } = options.current;
-                typeof cb === 'function' && cb();
-            }, duration);
-        }
-    }, [
-        clear
-    ]);
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>clear, []);
-    return {
-        set,
-        clear
-    };
-}
-
-//# sourceMappingURL=useTimeout.js.map

package/dist/cjs/hooks/useTimeout.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/hooks/useTimeout.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport function useTimeout(cb: () => any, duration: number) {\n  const options = React.useRef({ cb, duration });\n  useIsomorphicLayoutEffect(() => {\n    options.current.cb = cb;\n    options.current.duration = duration;\n  }, [cb, duration]);\n\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\n  const clear = React.useCallback(() => {\n    if (canUseDOM && timeout?.current) {\n      clearTimeout(timeout.current);\n    }\n  }, []);\n  const set = React.useCallback(\n    (duration = options.current.duration) => {\n      clear();\n      if (canUseDOM) {\n        timeout.current = setTimeout(() => {\n          const { cb } = options.current;\n          typeof cb === 'function' && cb();\n        }, duration);\n      }\n    },\n    [clear],\n  );\n  useIsomorphicLayoutEffect(() => clear, []);\n\n  return { set, clear };\n}\n"],"names":["useTimeout","cb","duration","options","React","useRef","useIsomorphicLayoutEffect","current","timeout","clear","useCallback","canUseDOM","clearTimeout","set","setTimeout"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;qBACG;2CACgB;AAEnC,SAASA,WAAWC,EAAa,EAAEC,QAAgB;IACxD,MAAMC,UAAUC,OAAMC,MAAM,CAAC;QAAEJ;QAAIC;IAAS;IAC5CI,IAAAA,oDAAyB,EAAC;QACxBH,QAAQI,OAAO,CAACN,EAAE,GAAGA;QACrBE,QAAQI,OAAO,CAACL,QAAQ,GAAGA;IAC7B,GAAG;QAACD;QAAIC;KAAS;IAEjB,MAAMM,UAAUJ,OAAMC,MAAM;IAC5B,MAAMI,QAAQL,OAAMM,WAAW,CAAC;QAC9B,IAAIC,cAAS,KAAIH,oBAAAA,8BAAAA,QAASD,OAAO,GAAE;YACjCK,aAAaJ,QAAQD,OAAO;QAC9B;IACF,GAAG,EAAE;IACL,MAAMM,MAAMT,OAAMM,WAAW,CAC3B,CAACR,WAAWC,QAAQI,OAAO,CAACL,QAAQ;QAClCO;QACA,IAAIE,cAAS,EAAE;YACbH,QAAQD,OAAO,GAAGO,WAAW;gBAC3B,MAAM,EAAEb,EAAE,EAAE,GAAGE,QAAQI,OAAO;gBAC9B,OAAON,OAAO,cAAcA;YAC9B,GAAGC;QACL;IACF,GACA;QAACO;KAAM;IAETH,IAAAA,oDAAyB,EAAC,IAAMG,OAAO,EAAE;IAEzC,OAAO;QAAEI;QAAKJ;IAAM;AACtB"}

package/dist/cjs/lib/supportEvents.d.ts

@@ -1,10 +0,0 @@
-export type VKUISupportEvents = {
-    supported: boolean;
-    name?: string | null;
-};
-declare const animationEvent: {
-    supported: boolean;
-};
-declare const transitionEvent: VKUISupportEvents;
-export { animationEvent, transitionEvent };
-//# sourceMappingURL=supportEvents.d.ts.map

package/dist/cjs/lib/supportEvents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"supportEvents.d.ts","sourceRoot":"","sources":["../../../src/lib/supportEvents.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAMF,QAAA,MAAM,cAAc;;CAEnB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,iBAGtB,CAAC;AAkBF,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/cjs/lib/supportEvents.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    animationEvent: function() {
-        return animationEvent;
-    },
-    transitionEvent: function() {
-        return transitionEvent;
-    }
-});
-const _dom = require("./dom");
-const _testing = require("./testing");
-const animationEvent = {
-    supported: false
-};
-const transitionEvent = {
-    supported: false,
-    name: null
-};
-if (_dom.canUseDOM && !_testing.isTesting) {
-    if (typeof AnimationEvent !== 'undefined') {
-        animationEvent.supported = true;
-    } else if (typeof WebKitAnimationEvent !== 'undefined') {
-        animationEvent.supported = true;
-    }
-    if (typeof TransitionEvent !== 'undefined') {
-        transitionEvent.supported = true;
-        transitionEvent.name = 'transitionend';
-    } else if (typeof WebKitTransitionEvent !== 'undefined') {
-        transitionEvent.supported = true;
-        transitionEvent.name = 'webkitTransitionEnd';
-    }
-}
-
-//# sourceMappingURL=supportEvents.js.map

package/dist/cjs/lib/supportEvents.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/lib/supportEvents.ts"],"sourcesContent":["import { canUseDOM } from './dom';\nimport { isTesting } from './testing';\n\nexport type VKUISupportEvents = {\n  supported: boolean;\n  name?: string | null;\n};\n\n// WebKitAnimationEvent и WebKitTransitionEvent не существуют в глобальном контексте\ndeclare const WebKitAnimationEvent: AnimationEvent;\ndeclare const WebKitTransitionEvent: TransitionEvent;\n\nconst animationEvent = {\n  supported: false,\n};\n\nconst transitionEvent: VKUISupportEvents = {\n  supported: false,\n  name: null,\n};\n\nif (canUseDOM && !isTesting) {\n  if (typeof AnimationEvent !== 'undefined') {\n    animationEvent.supported = true;\n  } else if (typeof WebKitAnimationEvent !== 'undefined') {\n    animationEvent.supported = true;\n  }\n\n  if (typeof TransitionEvent !== 'undefined') {\n    transitionEvent.supported = true;\n    transitionEvent.name = 'transitionend';\n  } else if (typeof WebKitTransitionEvent !== 'undefined') {\n    transitionEvent.supported = true;\n    transitionEvent.name = 'webkitTransitionEnd';\n  }\n}\n\nexport { animationEvent, transitionEvent };\n"],"names":["animationEvent","transitionEvent","supported","name","canUseDOM","isTesting","AnimationEvent","WebKitAnimationEvent","TransitionEvent","WebKitTransitionEvent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAqCSA,cAAc;eAAdA;;IAAgBC,eAAe;eAAfA;;;qBArCC;yBACA;AAW1B,MAAMD,iBAAiB;IACrBE,WAAW;AACb;AAEA,MAAMD,kBAAqC;IACzCC,WAAW;IACXC,MAAM;AACR;AAEA,IAAIC,cAAS,IAAI,CAACC,kBAAS,EAAE;IAC3B,IAAI,OAAOC,mBAAmB,aAAa;QACzCN,eAAeE,SAAS,GAAG;IAC7B,OAAO,IAAI,OAAOK,yBAAyB,aAAa;QACtDP,eAAeE,SAAS,GAAG;IAC7B;IAEA,IAAI,OAAOM,oBAAoB,aAAa;QAC1CP,gBAAgBC,SAAS,GAAG;QAC5BD,gBAAgBE,IAAI,GAAG;IACzB,OAAO,IAAI,OAAOM,0BAA0B,aAAa;QACvDR,gBAAgBC,SAAS,GAAG;QAC5BD,gBAAgBE,IAAI,GAAG;IACzB;AACF"}

package/dist/cjs/shared/breakpoints.d.ts

@@ -1,74 +0,0 @@
-/**
- * Храним брейкпоинты в JS файле для синхронизации значений между TS и CSS.
- *
- * @type {{
- *  DESKTOP: 1280,
- *  TABLET: 1024,
- *  SMALL_TABLET: 768,
- *  MOBILE: 320,
- *  MOBILE_LANDSCAPE_HEIGHT: 415,
- *  MEDIUM_HEIGHT: 720
- * }}
- */
-export const BREAKPOINTS: {
-    DESKTOP: 1280;
-    TABLET: 1024;
-    SMALL_TABLET: 768;
-    MOBILE: 320;
-    MOBILE_LANDSCAPE_HEIGHT: 415;
-    MEDIUM_HEIGHT: 720;
-};
-export namespace MEDIA_QUERIES {
-    let DESKTOP_PLUS: string;
-    let TABLET: string;
-    let SMALL_TABLET_PLUS: string;
-    let SMALL_TABLET: string;
-    let MOBILE: string;
-    let MEDIUM_HEIGHT: string;
-    let MOBILE_LANDSCAPE_HEIGHT: string;
-}
-/**
- * Полуинтервал [a;b)
- *
- * @param {number} a
- * @param {number} b
- * @returns {string}
- */
-export function widthHalfInterval(a: number, b: number): string;
-/**
- * Луч [a;+∞)
- *
- * @param {number} a
- * @returns {string}
- */
-export function widthPlus(a: number): string;
-/**
- * Открытый луч (-∞;b)
- *
- * @param {number} b
- * @returns {string}
- */
-export function widthMinus(b: number): string;
-/**
- * Полуинтервал [a;b)
- *
- * @param {number} a
- * @param {number} b
- * @returns {string}
- */
-export function heightHalfInterval(a: number, b: number): string;
-/**
- * Луч [a;+∞)
- *
- * @param {number} a
- * @returns {string}
- */
-export function heightPlus(a: number): string;
-/**
- * Открытый луч (-∞;b)
- *
- * @param {number} b
- * @returns {string}
- */
-export function heightMinus(b: number): string;
-//# sourceMappingURL=breakpoints.d.ts.map

package/dist/cjs/shared/breakpoints.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/shared/breakpoints.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,0BATU;IACT,OAAU,EAAE,IAAI,CAAC;IACjB,MAAS,EAAE,IAAI,CAAC;IAChB,YAAe,EAAE,GAAG,CAAC;IACrB,MAAS,EAAE,GAAG,CAAC;IACf,uBAA0B,EAAE,GAAG,CAAC;IAChC,aAAgB,EAAE,GAAG,CAAA;CAClB,CASF;;;;;;;;;;AAwBF;;;;;;GAMG;AACH,qCAJW,MAAM,KACN,MAAM,GACJ,MAAM,CAIlB;AA/BD;;;;;GAKG;AACH,6BAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;GAKG;AACH,8BAHW,MAAM,GACJ,MAAM,CAMlB;AAmCD;;;;;;GAMG;AACH,sCAJW,MAAM,KACN,MAAM,GACJ,MAAM,CAIlB;AA/BD;;;;;GAKG;AACH,8BAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;GAKG;AACH,+BAHW,MAAM,GACJ,MAAM,CAMlB"}

package/dist/cssm/hooks/useTimeout.d.ts

@@ -1,5 +0,0 @@
-export declare function useTimeout(cb: () => any, duration: number): {
-    set: (duration?: number) => void;
-    clear: () => void;
-};
-//# sourceMappingURL=useTimeout.d.ts.map

package/dist/cssm/hooks/useTimeout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTimeout.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTimeout.ts"],"names":[],"mappings":"AAIA,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,EAAE,QAAQ,EAAE,MAAM;;;EA4BzD"}

package/dist/cssm/hooks/useTimeout.js

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { canUseDOM } from '../lib/dom';
-import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
-export function useTimeout(cb, duration) {
-    const options = React.useRef({
-        cb,
-        duration
-    });
-    useIsomorphicLayoutEffect(()=>{
-        options.current.cb = cb;
-        options.current.duration = duration;
-    }, [
-        cb,
-        duration
-    ]);
-    const timeout = React.useRef();
-    const clear = React.useCallback(()=>{
-        if (canUseDOM && timeout?.current) {
-            clearTimeout(timeout.current);
-        }
-    }, []);
-    const set = React.useCallback((duration = options.current.duration)=>{
-        clear();
-        if (canUseDOM) {
-            timeout.current = setTimeout(()=>{
-                const { cb } = options.current;
-                typeof cb === 'function' && cb();
-            }, duration);
-        }
-    }, [
-        clear
-    ]);
-    useIsomorphicLayoutEffect(()=>clear, []);
-    return {
-        set,
-        clear
-    };
-}
-
-//# sourceMappingURL=useTimeout.js.map

package/dist/cssm/hooks/useTimeout.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/hooks/useTimeout.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport function useTimeout(cb: () => any, duration: number) {\n  const options = React.useRef({ cb, duration });\n  useIsomorphicLayoutEffect(() => {\n    options.current.cb = cb;\n    options.current.duration = duration;\n  }, [cb, duration]);\n\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\n  const clear = React.useCallback(() => {\n    if (canUseDOM && timeout?.current) {\n      clearTimeout(timeout.current);\n    }\n  }, []);\n  const set = React.useCallback(\n    (duration = options.current.duration) => {\n      clear();\n      if (canUseDOM) {\n        timeout.current = setTimeout(() => {\n          const { cb } = options.current;\n          typeof cb === 'function' && cb();\n        }, duration);\n      }\n    },\n    [clear],\n  );\n  useIsomorphicLayoutEffect(() => clear, []);\n\n  return { set, clear };\n}\n"],"names":["React","canUseDOM","useIsomorphicLayoutEffect","useTimeout","cb","duration","options","useRef","current","timeout","clear","useCallback","clearTimeout","set","setTimeout"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,yBAAyB,QAAQ,mCAAmC;AAE7E,OAAO,SAASC,WAAWC,EAAa,EAAEC,QAAgB;IACxD,MAAMC,UAAUN,MAAMO,MAAM,CAAC;QAAEH;QAAIC;IAAS;IAC5CH,0BAA0B;QACxBI,QAAQE,OAAO,CAACJ,EAAE,GAAGA;QACrBE,QAAQE,OAAO,CAACH,QAAQ,GAAGA;IAC7B,GAAG;QAACD;QAAIC;KAAS;IAEjB,MAAMI,UAAUT,MAAMO,MAAM;IAC5B,MAAMG,QAAQV,MAAMW,WAAW,CAAC;QAC9B,IAAIV,aAAaQ,SAASD,SAAS;YACjCI,aAAaH,QAAQD,OAAO;QAC9B;IACF,GAAG,EAAE;IACL,MAAMK,MAAMb,MAAMW,WAAW,CAC3B,CAACN,WAAWC,QAAQE,OAAO,CAACH,QAAQ;QAClCK;QACA,IAAIT,WAAW;YACbQ,QAAQD,OAAO,GAAGM,WAAW;gBAC3B,MAAM,EAAEV,EAAE,EAAE,GAAGE,QAAQE,OAAO;gBAC9B,OAAOJ,OAAO,cAAcA;YAC9B,GAAGC;QACL;IACF,GACA;QAACK;KAAM;IAETR,0BAA0B,IAAMQ,OAAO,EAAE;IAEzC,OAAO;QAAEG;QAAKH;IAAM;AACtB"}

package/dist/cssm/lib/supportEvents.d.ts

@@ -1,10 +0,0 @@
-export type VKUISupportEvents = {
-    supported: boolean;
-    name?: string | null;
-};
-declare const animationEvent: {
-    supported: boolean;
-};
-declare const transitionEvent: VKUISupportEvents;
-export { animationEvent, transitionEvent };
-//# sourceMappingURL=supportEvents.d.ts.map

package/dist/cssm/lib/supportEvents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"supportEvents.d.ts","sourceRoot":"","sources":["../../../src/lib/supportEvents.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAMF,QAAA,MAAM,cAAc;;CAEnB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,iBAGtB,CAAC;AAkBF,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}