npm - @vkontakte/vkui - Versions diffs - 5.1.2 → 5.2.1 - Mend

@vkontakte/vkui 5.1.2 → 5.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1245) hide show

package/dist/cjs/components/Snackbar/Snackbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Snackbar.js","names":["Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","viewWidth","isDesktop","ViewWidth","SMALL_TABLET","useWaitTransitionFinish","waitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","classNames","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Button } from '../Button/Button';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n /*\n Название кнопки действия в уведомлении\n * Не может использоваться одновременно с `subtitle`\n /\n action?: React.ReactNode;\n\n /\n Будет вызвано при клике на кнопку действия\n /\n onActionClick?: (e: React.MouseEvent) => void;\n\n /\n Цветная иконка 24x24 пикселя\n /\n before?: React.ReactNode;\n /\n Контент в правой части, может быть `<Avatar size={32} />`\n /\n after?: React.ReactNode;\n /\n Варианты расположения кнопки действия\n * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n /\n layout?: 'vertical' \| 'horizontal';\n /\n Время в миллисекундах, через которое плашка скроется\n /\n duration?: number;\n /\n Обработчик закрытия уведомления\n /\n onClose: () => void;\n /\n Задает стиль снекбара\n /\n mode?: 'default' \| 'dark';\n /\n Дополнительная строка текста под `children`.\n * Не может использоваться одновременно с `action`\n /\n subtitle?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Snackbar\n /\nexport const Snackbar = ({\n children,\n layout: layoutProps = 'horizontal',\n action,\n before,\n after,\n duration = 4000,\n onActionClick,\n onClose,\n mode = 'default',\n className,\n subtitle,\n ...restProps\n}: SnackbarProps) => {\n const platform = usePlatform();\n const { viewWidth } = useAdaptivityWithJSMediaQueries();\n const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n const [touched, setTouched] = React.useState(false);\n\n const shiftXPercentRef = React.useRef<number>(0);\n const shiftXCurrentRef = React.useRef<number>(0);\n\n const bodyElRef = React.useRef<HTMLDivElement \| null>(null);\n const innerElRef = React.useRef<HTMLDivElement \| null>(null);\n\n const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> \| null>(null);\n\n const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n const close = () => {\n setClosing(true);\n waitTransitionFinish(\n innerElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n };\n\n const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n close();\n\n if (action && typeof onActionClick === 'function') {\n onActionClick(e);\n }\n };\n\n const closeTimeout = useTimeout(close, duration);\n\n const setBodyTransform = (percent: number) => {\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (bodyElRef.current) {\n bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n }\n });\n };\n\n const onTouchStart = closeTimeout.clear;\n\n const onTouchMoveX = (event: TouchEvent) => {\n const { shiftX, originalEvent } = event;\n originalEvent.preventDefault();\n\n if (!touched) {\n setTouched(true);\n }\n\n shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) 100;\n shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n setBodyTransform(shiftXCurrentRef.current);\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n let callback: VoidFunction \| undefined;\n\n if (touched) {\n let shiftXCurrent = shiftXCurrentRef.current;\n const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n if (isDesktop && shiftXCurrent <= -50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n setBodyTransform(-120);\n } else if (!isDesktop && shiftXCurrent >= 50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n setBodyTransform(120);\n } else {\n callback = () => {\n closeTimeout.set();\n setBodyTransform(0);\n };\n }\n } else {\n closeTimeout.set();\n }\n\n setTouched(false);\n callback && requestAnimationFrame(callback);\n };\n\n React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n const layout = after \|\| isDesktop \|\| subtitle ? 'vertical' : layoutProps;\n\n return (\n <AppRootPortal>\n <div\n {...restProps}\n className={classNames(\n styles['Snackbar'],\n platform === Platform.IOS && styles['Snackbar--ios'],\n styles[`Snackbar--layout-${layout}`],\n styles[`Snackbar--mode-${mode}`],\n closing && styles['Snackbar--closing'],\n touched && styles['Snackbar--touched'],\n isDesktop && styles['Snackbar--desktop'],\n className,\n )}\n >\n <Touch\n className={styles['Snackbar__in']}\n getRootRef={innerElRef}\n onStart={onTouchStart}\n onMoveX={onTouchMoveX}\n onEnd={onTouchEnd}\n >\n <div className={styles['Snackbar__body']} ref={bodyElRef}>\n {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n <div className={styles['Snackbar__content']}>\n <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n {subtitle && !action && (\n <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n )}\n\n {action && !subtitle && (\n <Button\n align=\"left\"\n mode=\"link\"\n appearance={mode === 'dark' ? 'overlay' : 'accent'}\n size=\"s\"\n className={styles['Snackbar__action']}\n onClick={handleActionClick}\n >\n {action}\n </Button>\n )}\n </div>\n\n {after && <div className={styles['Snackbar__after']}>{after}</div>}\n </div>\n </Touch>\n </div>\n </AppRootPortal>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Snackbar.js","names":["Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","viewWidth","isDesktop","ViewWidth","SMALL_TABLET","useWaitTransitionFinish","waitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","classNames","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n /*\n Название кнопки действия в уведомлении\n * Не может использоваться одновременно с `subtitle`\n /\n action?: React.ReactNode;\n\n /\n Будет вызвано при клике на кнопку действия\n /\n onActionClick?: (e: React.MouseEvent) => void;\n\n /\n Цветная иконка 24x24 пикселя\n /\n before?: React.ReactNode;\n /\n Контент в правой части, может быть `<Avatar size={32} />`\n /\n after?: React.ReactNode;\n /\n Варианты расположения кнопки действия\n * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n /\n layout?: 'vertical' \| 'horizontal';\n /\n Время в миллисекундах, через которое плашка скроется\n /\n duration?: number;\n /\n Обработчик закрытия уведомления\n /\n onClose: () => void;\n /\n Задает стиль снекбара\n /\n mode?: 'default' \| 'dark';\n /\n Дополнительная строка текста под `children`.\n * Не может использоваться одновременно с `action`\n /\n subtitle?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Snackbar\n /\nexport const Snackbar = ({\n children,\n layout: layoutProps = 'horizontal',\n action,\n before,\n after,\n duration = 4000,\n onActionClick,\n onClose,\n mode = 'default',\n className,\n subtitle,\n ...restProps\n}: SnackbarProps) => {\n const platform = usePlatform();\n const { viewWidth } = useAdaptivityWithJSMediaQueries();\n const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n const [touched, setTouched] = React.useState(false);\n\n const shiftXPercentRef = React.useRef<number>(0);\n const shiftXCurrentRef = React.useRef<number>(0);\n\n const bodyElRef = React.useRef<HTMLDivElement \| null>(null);\n const innerElRef = React.useRef<HTMLDivElement \| null>(null);\n\n const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> \| null>(null);\n\n const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n const close = () => {\n setClosing(true);\n waitTransitionFinish(\n innerElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n };\n\n const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n close();\n\n if (action && typeof onActionClick === 'function') {\n onActionClick(e);\n }\n };\n\n const closeTimeout = useTimeout(close, duration);\n\n const setBodyTransform = (percent: number) => {\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (bodyElRef.current) {\n bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n }\n });\n };\n\n const onTouchStart = closeTimeout.clear;\n\n const onTouchMoveX = (event: TouchEvent) => {\n const { shiftX, originalEvent } = event;\n originalEvent.preventDefault();\n\n if (!touched) {\n setTouched(true);\n }\n\n shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) 100;\n shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n setBodyTransform(shiftXCurrentRef.current);\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n let callback: VoidFunction \| undefined;\n\n if (touched) {\n let shiftXCurrent = shiftXCurrentRef.current;\n const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n if (isDesktop && shiftXCurrent <= -50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n setBodyTransform(-120);\n } else if (!isDesktop && shiftXCurrent >= 50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n setBodyTransform(120);\n } else {\n callback = () => {\n closeTimeout.set();\n setBodyTransform(0);\n };\n }\n } else {\n closeTimeout.set();\n }\n\n setTouched(false);\n callback && requestAnimationFrame(callback);\n };\n\n React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n const layout = after \|\| isDesktop \|\| subtitle ? 'vertical' : layoutProps;\n\n return (\n <AppRootPortal>\n <div\n {...restProps}\n className={classNames(\n styles['Snackbar'],\n platform === Platform.IOS && styles['Snackbar--ios'],\n styles[`Snackbar--layout-${layout}`],\n styles[`Snackbar--mode-${mode}`],\n closing && styles['Snackbar--closing'],\n touched && styles['Snackbar--touched'],\n isDesktop && styles['Snackbar--desktop'],\n className,\n )}\n >\n <Touch\n className={styles['Snackbar__in']}\n getRootRef={innerElRef}\n onStart={onTouchStart}\n onMoveX={onTouchMoveX}\n onEnd={onTouchEnd}\n >\n <div className={styles['Snackbar__body']} ref={bodyElRef}>\n {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n <div className={styles['Snackbar__content']}>\n <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n {subtitle && !action && (\n <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n )}\n\n {action && !subtitle && (\n <Button\n align=\"left\"\n mode=\"link\"\n appearance={mode === 'dark' ? 'overlay' : 'accent'}\n size=\"s\"\n className={styles['Snackbar__action']}\n onClick={handleActionClick}\n >\n {action}\n </Button>\n )}\n </div>\n\n {after && <div className={styles['Snackbar__after']}>{after}</div>}\n </div>\n </Touch>\n </div>\n </AppRootPortal>\n );\n};\n"],"mappings":"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"}

package/dist/cjs/components/Spinner/Spinner.js CHANGED Viewed

@@ -9,8 +9,8 @@ exports.Spinner = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
 var _icons = require("@vkontakte/icons");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["size", "aria-label", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner

package/dist/cjs/components/Spinner/Spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.js","names":["Spinner","React","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","classNames","displayName"],"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~classNames~~ } from '@vkontakte/~~vkjs~~';\nimport { ~~Icon24Spinner,~~ ~~Icon32Spinner, Icon44Spinner, Icon16Spinner~~ } from '@vkontakte/~~icons~~';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n size?: 'small' \| 'regular' \| 'medium' \| 'large';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n ({\n size = 'regular',\n 'aria-label': ariaLabel = 'Загружается...',\n className,\n ...restProps\n }: SpinnerProps) => {\n const SpinnerIcon = {\n small: Icon16Spinner,\n regular: Icon24Spinner,\n medium: Icon32Spinner,\n large: Icon44Spinner,\n }[size];\n\n return (\n <span\n role=\"status\"\n aria-label={ariaLabel}\n {...restProps}\n className={classNames(styles['Spinner'], className)}\n >\n <SpinnerIcon className={styles['Spinner__self']} />\n </span>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;~~AAA8F~~;~~AAO9F~~;AACA;AACA;AACO,IAAMA,OAAO,gBAAGC,KAAK,CAACC,IAAI,CAC/B,gBAKoB;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,sBAChB,YAAY;IAAEC,SAAS,+BAAG,gBAAgB;IAC1CC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG;IAClBC,KAAK,EAAEC,oBAAa;IACpBC,OAAO,EAAEC,oBAAa;IACtBC,MAAM,EAAEC,oBAAa;IACrBC,KAAK,EAAEC;EACT,CAAC,CAACZ,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAE,IAAAU,gBAAU,iBAAoBX,SAAS;EAAE,iBAEpD,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAAC;AAEFL,OAAO,CAACiB,WAAW,GAAG,SAAS"}
1	+ {"version":3,"file":"Spinner.js","names":["Spinner","React","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","classNames","displayName"],"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n size?: 'small' \| 'regular' \| 'medium' \| 'large';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n ({\n size = 'regular',\n 'aria-label': ariaLabel = 'Загружается...',\n className,\n ...restProps\n }: SpinnerProps) => {\n const SpinnerIcon = {\n small: Icon16Spinner,\n regular: Icon24Spinner,\n medium: Icon32Spinner,\n large: Icon44Spinner,\n }[size];\n\n return (\n <span\n role=\"status\"\n aria-label={ariaLabel}\n {...restProps}\n className={classNames(styles['Spinner'], className)}\n >\n <SpinnerIcon className={styles['Spinner__self']} />\n </span>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA6C;AAO7C;AACA;AACA;AACO,IAAMA,OAAO,gBAAGC,KAAK,CAACC,IAAI,CAC/B,gBAKoB;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,sBAChB,YAAY;IAAEC,SAAS,+BAAG,gBAAgB;IAC1CC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG;IAClBC,KAAK,EAAEC,oBAAa;IACpBC,OAAO,EAAEC,oBAAa;IACtBC,MAAM,EAAEC,oBAAa;IACrBC,KAAK,EAAEC;EACT,CAAC,CAACZ,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAE,IAAAU,gBAAU,iBAAoBX,SAAS;EAAE,iBAEpD,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAAC;AAEFL,OAAO,CAACiB,WAAW,GAAG,SAAS"}

package/dist/cjs/components/SplitCol/SplitCol.d.ts CHANGED Viewed

@@ -1,10 +1,4 @@
 import * as React from 'react';
-export interface SplitColContextProps {
-    colRef: React.RefObject<HTMLDivElement> | null;
-    animate: boolean;
-}
-export declare const SplitColContext: React.Context<SplitColContextProps>;
-export declare const useSplitCol: () => SplitColContextProps;
 export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
     width?: number | string;
     maxWidth?: number | string;

package/dist/cjs/components/SplitCol/SplitCol.js CHANGED Viewed

@@ -5,21 +5,25 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSplitCol = exports.SplitColContext = exports.SplitCol = void 0;
+exports.SplitCol = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
-var _getViewWidthClassName = require("../../helpers/getViewWidthClassName");
 var _useAdaptivity3 = require("../../hooks/useAdaptivity");
-var _adaptivity = require("../../lib/adaptivity");
-var _useObjectMemo = require("../../hooks/useObjectMemo");
 var _useMediaQueries = require("../../hooks/useMediaQueries");
+var _useObjectMemo = require("../../hooks/useObjectMemo");
+var _adaptivity = require("../../lib/adaptivity");
 var _matchMedia = require("../../lib/matchMedia");
+var _SplitColContext = require("./SplitColContext");
 var _excluded = ["children", "width", "maxWidth", "minWidth", "spaced", "animate", "fixed", "style", "autoSpaced", "stretchedOnMobile", "className"];
+var breakpointClassNames = {
+  none: "vkuiSplitCol--viewWidth-none",
+  tabletMinus: "vkuiSplitCol--viewWidth-tabletMinus",
+  smallTabletPlus: "vkuiSplitCol--viewWidth-smallTabletPlus"
+};
 function useTransitionAnimate(animateProp) {
   var _useAdaptivity = (0, _useAdaptivity3.useAdaptivity)(),
     viewWidth = _useAdaptivity.viewWidth;
@@ -50,15 +54,6 @@ function useTransitionAnimate(animateProp) {
   }, [animateProp, viewWidth, mediaQueries]);
   return animate;
 }
-var SplitColContext = /*#__PURE__*/React.createContext({
-  colRef: null,
-  animate: true
-});
-exports.SplitColContext = SplitColContext;
-var useSplitCol = function useSplitCol() {
-  return React.useContext(SplitColContext);
-};
-exports.useSplitCol = useSplitCol;
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */
@@ -77,8 +72,7 @@ var SplitCol = function SplitCol(props) {
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var baseRef = React.useRef(null);
   var _useAdaptivity2 = (0, _useAdaptivity3.useAdaptivity)(),
-    viewWidth = _useAdaptivity2.viewWidth,
-    sizeX = _useAdaptivity2.sizeX;
+    viewWidth = _useAdaptivity2.viewWidth;
   var animate = useTransitionAnimate(animateProp);
   var contextValue = (0, _useObjectMemo.useObjectMemo)({
     colRef: baseRef,
@@ -91,8 +85,8 @@ var SplitCol = function SplitCol(props) {
       minWidth: minWidth
     }),
     ref: baseRef,
-    className: (0, _vkjs.classNames)("vkuiSplitCol", (0, _getSizeXClassName.getSizeXClassName)("vkuiSplitCol", sizeX), (0, _getViewWidthClassName.getViewWidthClassName)("vkuiSplitCol", viewWidth), spaced && "vkuiSplitCol--spaced", spaced === undefined && "vkuiSplitCol--spaced-none", autoSpaced && "vkuiSplitCol--spaced-auto", fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
-  }), /*#__PURE__*/React.createElement(SplitColContext.Provider, {
+    className: (0, _vkjs.classNames)("vkuiSplitCol", (0, _adaptivity.viewWidthToClassName)(breakpointClassNames, viewWidth), spaced && "vkuiSplitCol--spaced", spaced === undefined && "vkuiSplitCol--spaced-none", autoSpaced && "vkuiSplitCol--spaced-auto", fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
+  }), /*#__PURE__*/React.createElement(_SplitColContext.SplitColContext.Provider, {
     value: contextValue
   }, fixed ? /*#__PURE__*/React.createElement("div", {
     className: "vkuiSplitCol__fixedInner"

package/dist/cjs/components/SplitCol/SplitCol.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitCol.js","names":["useTransitionAnimate","animateProp","useAdaptivity","viewWidth","React","useState","Boolean","animate","setAnimate","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","~~smallTabletPlus","~~matches","matchMediaListAddListener","matchMediaListRemoveListener","~~SplitColContext","createContext","colRef","useSplitCol","useContext","~~SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","~~sizeX","~~contextValue","useObjectMemo","~~classNames~~","~~getSizeXClassName~~","~~getViewWidthClassName~~"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~getSizeXClassName~~ } from '../../~~helpers~~/~~getSizeXClassName~~';\nimport { ~~getViewWidthClassName~~ } from '../../~~helpers~~/~~getViewWidthClassName~~';\nimport { ~~useAdaptivity~~ } from '../../hooks/~~useAdaptivity~~';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { ~~useObjectMemo~~ } ~~from '../../hooks/useObjectMemo';\nimport { useMediaQueries~~ } from '../../~~hooks~~/~~useMediaQueries~~';\nimport { ~~matchMediaListAddListener,~~ ~~matchMediaListRemoveListener~~ } from '~~../../lib/matchMedia~~';\nimport styles from './SplitCol.module.css';\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n const { viewWidth } = useAdaptivity();\n const [animate, setAnimate] = React.useState(Boolean(animateProp));\n const mediaQueries = useMediaQueries();\n\n React.useEffect(() => {\n if (animateProp !== undefined) {\n setAnimate(animateProp);\n return;\n }\n\n if (viewWidth !== undefined) {\n setAnimate(viewWidth < ViewWidth.TABLET);\n return;\n }\n\n // eslint-disable-next-line no-restricted-properties\n const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n listener();\n\n matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n return () => {\n matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n };\n }, [animateProp, viewWidth, mediaQueries]);\n\n return animate;\n}\n\nexport interface SplitColContextProps {\n colRef: React.RefObject<HTMLDivElement> \| null;\n animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n colRef: null,\n animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n width?: number \| string;\n maxWidth?: number \| string;\n minWidth?: number \| string;\n /*\n Если false, то переходы между Panel происходят без анимации\n /\n animate?: boolean;\n /\n Если true, то добавляются боковые отступы фиксированной величины\n /\n spaced?: boolean;\n /\n Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n /\n autoSpaced?: boolean;\n fixed?: boolean;\n /\n Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n /\n stretchedOnMobile?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n const {\n children,\n width,\n maxWidth,\n minWidth,\n spaced,\n animate: animateProp,\n fixed,\n style,\n autoSpaced,\n stretchedOnMobile,\n className,\n ...restProps\n } = props;\n const baseRef = React.useRef<HTMLDivElement>(null);\n const { viewWidth, ~~sizeX~~ } = useAdaptivity();\n const animate = useTransitionAnimate(animateProp);\n\n const contextValue = useObjectMemo({\n colRef: baseRef,\n animate,\n });\n\n return (\n <div\n {...restProps}\n style={{\n ...style,\n width: width,\n maxWidth: maxWidth,\n minWidth: minWidth,\n }}\n ref={baseRef}\n className={classNames(\n styles['SplitCol'],\n ~~getSizeXClassName~~(~~styles['SplitCol']~~, ~~sizeX),\n getViewWidthClassName(styles['SplitCol'],~~ viewWidth),\n spaced && styles['SplitCol--spaced'],\n spaced === undefined && styles['SplitCol--spaced-none'],\n autoSpaced && styles['SplitCol--spaced-auto'],\n fixed && styles['SplitCol--fixed'],\n stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n className,\n )}\n >\n <SplitColContext.Provider value={contextValue}>\n {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n </SplitColContext.Provider>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AACA~~;~~AAA+F~~;~~AAG/F~~,~~SAASA~~,oBAAoB,CAACC,WAAqB,EAAE;EACnD,qBAAsB,IAAAC,6BAAa,GAAE;IAA7BC,SAAS,kBAATA,SAAS;EACjB,sBAA8BC,KAAK,CAACC,QAAQ,CAACC,OAAO,CAACL,WAAW,CAAC,CAAC;IAAA;IAA3DM,OAAO;IAAEC,UAAU;EAC1B,IAAMC,YAAY,GAAG,IAAAC,gCAAe,GAAE;EAEtCN,KAAK,CAACO,SAAS,CAAC,YAAM;IACpB,IAAIV,WAAW,KAAKW,SAAS,EAAE;MAC7BJ,UAAU,CAACP,WAAW,CAAC;MACvB;IACF;IAEA,IAAIE,SAAS,KAAKS,SAAS,EAAE;MAC3BJ,UAAU,CAACL,SAAS,GAAGU,qBAAS,CAACC,MAAM,CAAC;MACxC;IACF;;IAEA;IACA,IAAMC,QAAQ,GAAG,SAAXA,QAAQ;MAAA,OAASP,UAAU,CAAC,CAACC,YAAY,~~CAACO~~,eAAe,~~CAACC~~,OAAO,CAAC;IAAA;~~IACxEF~~,QAAQ,EAAE;IAEV,~~IAAAG~~,qCAAyB,~~EAACT~~,YAAY,~~CAACO~~,eAAe,~~EAAED~~,QAAQ,CAAC;IACjE,OAAO,YAAM;MACX,~~IAAAI~~,wCAA4B,~~EAACV~~,YAAY,~~CAACO~~,eAAe,~~EAAED~~,QAAQ,CAAC;IACtE,CAAC;EACH,CAAC,EAAE,CAACd,WAAW,EAAEE,SAAS,EAAEM,YAAY,CAAC,CAAC;EAE1C,OAAOF,OAAO;AAChB;~~AAOO,IAAMa,eAAe,gBAAGhB,KAAK,CAACiB,aAAa,CAAuB~~;~~EACvEC,MAAM,EAAE,IAAI;EACZf,OAAO,EAAE;AACX,CAAC,CAAC;AAAC;AAEI,IAAMgB,WAAW,GAAG,SAAdA,WAAW;EAAA,OAASnB,KAAK,CAACoB,UAAU,CAACJ,eAAe,CAAC;AAAA;AAAC;AAyBnE;~~AACA;AACA;AACO,~~IAAMK~~,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAoB,EAAK;EAChD,IACEC,QAAQ,GAYND,KAAK,CAZPC,QAAQ;IACRC,KAAK,GAWHF,KAAK,CAXPE,KAAK;IACLC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,QAAQ,GASNJ,KAAK,CATPI,QAAQ;IACRC,MAAM,GAQJL,KAAK,CARPK,MAAM;~~IACG9B~~,WAAW,~~GAOlByB~~,KAAK,~~CAPPnB~~,OAAO;~~IACPyB~~,KAAK,GAMHN,KAAK,CANPM,KAAK;IACLC,KAAK,GAKHP,KAAK,CALPO,KAAK;IACLC,UAAU,GAIRR,KAAK,CAJPQ,UAAU;IACVC,iBAAiB,GAGfT,KAAK,CAHPS,iBAAiB;IACjBC,SAAS,GAEPV,KAAK,CAFPU,SAAS;IACNC,SAAS,0CACVX,KAAK;EACT,IAAMY,OAAO,~~GAAGlC~~,KAAK,~~CAACmC~~,MAAM,CAAiB,IAAI,CAAC;EAClD,~~sBAA6B~~,~~IAAArC~~,6BAAa,GAAE;~~IAApCC~~,SAAS,mBAATA,SAAS;~~IAAEqC~~,~~KAAK~~,~~mBAALA,KAAK;EACxB,IAAMjC,~~OAAO,GAAGP,oBAAoB,CAACC,WAAW,CAAC;EAEjD,~~IAAMwC~~,YAAY,GAAG,IAAAC,4BAAa,EAAC;~~IACjCpB~~,MAAM,~~EAAEgB~~,OAAO;~~IACf/B~~,OAAO,EAAPA;EACF,CAAC,CAAC;EAEF,oBACE,~~sDACM8B~~,SAAS;IACb,KAAK,8DACAJ,KAAK;MACRL,KAAK,EAAEA,KAAK;MACZC,QAAQ,EAAEA,QAAQ;MAClBC,QAAQ,EAAEA;IAAQ,EAClB;IACF,GAAG,EAAEQ,OAAQ;IACb,SAAS,EAAE,IAAAK,gBAAU,kBAEnB,IAAAC,~~oCAAiB~~,~~kBAAqBJ~~,~~KAAK~~,~~CAAC~~,~~EAC5C,IAAAK,4CAAqB,kBAAqB1C,~~SAAS,CAAC,~~EACpD4B~~,MAAM,0BAA8B,EACpCA,MAAM,~~KAAKnB~~,SAAS,+BAAmC,~~EACvDsB~~,UAAU,+BAAmC,EAC7CF,KAAK,yBAA6B,EAClCG,iBAAiB,uCAA2C,EAC5DC,SAAS;EACT,iBAEF,oBAAC,~~eAAe~~,CAAC,QAAQ;IAAC,KAAK,~~EAAEK~~;EAAa,~~GAC3CT~~,KAAK,gBAAG;IAAK,SAAS;EAAiC,GAAEL,QAAQ,CAAO,GAAGA,QAAQ,CAC3D,CACvB;AAEV,CAAC;AAAC"}
1	+ {"version":3,"file":"SplitCol.js","names":["breakpointClassNames","none","tabletMinus","smallTabletPlus","useTransitionAnimate","animateProp","useAdaptivity","viewWidth","React","useState","Boolean","animate","setAnimate","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","matches","matchMediaListAddListener","matchMediaListRemoveListener","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","useObjectMemo","colRef","classNames","viewWidthToClassName"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n none: styles['SplitCol--viewWidth-none'],\n tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n const { viewWidth } = useAdaptivity();\n const [animate, setAnimate] = React.useState(Boolean(animateProp));\n const mediaQueries = useMediaQueries();\n\n React.useEffect(() => {\n if (animateProp !== undefined) {\n setAnimate(animateProp);\n return;\n }\n\n if (viewWidth !== undefined) {\n setAnimate(viewWidth < ViewWidth.TABLET);\n return;\n }\n\n // eslint-disable-next-line no-restricted-properties\n const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n listener();\n\n matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n return () => {\n matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n };\n }, [animateProp, viewWidth, mediaQueries]);\n\n return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n width?: number \| string;\n maxWidth?: number \| string;\n minWidth?: number \| string;\n /*\n Если false, то переходы между Panel происходят без анимации\n /\n animate?: boolean;\n /\n Если true, то добавляются боковые отступы фиксированной величины\n /\n spaced?: boolean;\n /\n Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n /\n autoSpaced?: boolean;\n fixed?: boolean;\n /\n Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n /\n stretchedOnMobile?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n const {\n children,\n width,\n maxWidth,\n minWidth,\n spaced,\n animate: animateProp,\n fixed,\n style,\n autoSpaced,\n stretchedOnMobile,\n className,\n ...restProps\n } = props;\n const baseRef = React.useRef<HTMLDivElement>(null);\n const { viewWidth } = useAdaptivity();\n const animate = useTransitionAnimate(animateProp);\n\n const contextValue = useObjectMemo({\n colRef: baseRef,\n animate,\n });\n\n return (\n <div\n {...restProps}\n style={{\n ...style,\n width: width,\n maxWidth: maxWidth,\n minWidth: minWidth,\n }}\n ref={baseRef}\n className={classNames(\n styles['SplitCol'],\n viewWidthToClassName(breakpointClassNames, viewWidth),\n spaced && styles['SplitCol--spaced'],\n spaced === undefined && styles['SplitCol--spaced-none'],\n autoSpaced && styles['SplitCol--spaced-auto'],\n fixed && styles['SplitCol--fixed'],\n stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n className,\n )}\n >\n <SplitColContext.Provider value={contextValue}>\n {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n </SplitColContext.Provider>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/cjs/components/SplitCol/SplitColContext.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface SplitColContextProps {
+    colRef: React.RefObject<HTMLDivElement> | null;
+    animate: boolean;
+}
+export declare const SplitColContext: React.Context<SplitColContextProps>;
+export declare const useSplitCol: () => SplitColContextProps;

package/dist/cjs/components/SplitCol/SplitColContext.js ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSplitCol = exports.SplitColContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var SplitColContext = /*#__PURE__*/React.createContext({
+  colRef: null,
+  animate: true
+});
+exports.SplitColContext = SplitColContext;
+var useSplitCol = function useSplitCol() {
+  return React.useContext(SplitColContext);
+};
+exports.useSplitCol = useSplitCol;
+//# sourceMappingURL=SplitColContext.js.map

package/dist/cjs/components/SplitCol/SplitColContext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SplitColContext.js","names":["SplitColContext","React","createContext","colRef","animate","useSplitCol","useContext"],"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n colRef: React.RefObject<HTMLDivElement> | null;\n animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n colRef: null,\n animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"mappings":";;;;;;;AAAA;AAOO,IAAMA,eAAe,gBAAGC,KAAK,CAACC,aAAa,CAAuB;EACvEC,MAAM,EAAE,IAAI;EACZC,OAAO,EAAE;AACX,CAAC,CAAC;AAAC;AAEI,IAAMC,WAAW,GAAG,SAAdA,WAAW;EAAA,OAASJ,KAAK,CAACK,UAAU,CAACN,eAAe,CAAC;AAAA;AAAC"}

package/dist/cjs/components/SplitLayout/SplitLayout.js CHANGED Viewed

@@ -10,9 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
 var _PopoutRoot = require("../PopoutRoot/PopoutRoot");
-var _usePlatform = require("../../hooks/usePlatform");
 var _excluded = ["popout", "modal", "header", "children", "getRootRef", "getRef", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout

package/dist/cjs/components/SplitLayout/SplitLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitLayout.js","names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","usePlatform","classNames","Platform","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport ~~{ usePlatform } from '../../hooks/usePlatform';\nimport~~ styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /*\n Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n /\n popout?: React.ReactNode;\n /\n Свойство для отрисовки `ModalRoot`.\n /\n modal?: React.ReactNode;\n header?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n popout,\n modal,\n header,\n children,\n getRootRef,\n getRef,\n className,\n ...restProps\n}: SplitLayoutProps) => {\n const platform = usePlatform();\n\n return (\n <PopoutRoot\n className={classNames(\n styles['SplitLayout'],\n platform === Platform.IOS && styles['SplitLayout--ios'],\n )}\n popout={popout}\n modal={modal}\n getRootRef={getRootRef}\n >\n {header}\n <div\n {...restProps}\n ref={getRef}\n className={classNames(\n styles['SplitLayout__inner'],\n !!header && styles['SplitLayout__inner--header'],\n className,\n )}\n >\n {children}\n </div>\n </PopoutRoot>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;~~AACA;~~AAAsD;AAkBtD;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,sBAAU;IACT,SAAS,EAAE,IAAAC,gBAAU,qBAEnBF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,0BAA8B,CACvD;IACF,MAAM,EAAEZ,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,UAAU,EAAEG;EAAW,GAEtBF,MAAM,eACP,sDACMK,SAAS;IACb,GAAG,EAAEF,MAAO;IACZ,SAAS,EAAE,IAAAK,gBAAU,4BAEnB,CAAC,CAACR,MAAM,oCAAwC,EAChDI,SAAS;EACT,IAEDH,QAAQ,CACL,CACK;AAEjB,CAAC;AAAC"}
1	+ {"version":3,"file":"SplitLayout.js","names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","usePlatform","classNames","Platform","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /*\n Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n /\n popout?: React.ReactNode;\n /\n Свойство для отрисовки `ModalRoot`.\n /\n modal?: React.ReactNode;\n header?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n popout,\n modal,\n header,\n children,\n getRootRef,\n getRef,\n className,\n ...restProps\n}: SplitLayoutProps) => {\n const platform = usePlatform();\n\n return (\n <PopoutRoot\n className={classNames(\n styles['SplitLayout'],\n platform === Platform.IOS && styles['SplitLayout--ios'],\n )}\n popout={popout}\n modal={modal}\n getRootRef={getRootRef}\n >\n {header}\n <div\n {...restProps}\n ref={getRef}\n className={classNames(\n styles['SplitLayout__inner'],\n !!header && styles['SplitLayout__inner--header'],\n className,\n )}\n >\n {children}\n </div>\n </PopoutRoot>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AAAsD;AAkBtD;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,sBAAU;IACT,SAAS,EAAE,IAAAC,gBAAU,qBAEnBF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,0BAA8B,CACvD;IACF,MAAM,EAAEZ,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,UAAU,EAAEG;EAAW,GAEtBF,MAAM,eACP,sDACMK,SAAS;IACb,GAAG,EAAEF,MAAO;IACZ,SAAS,EAAE,IAAAK,gBAAU,4BAEnB,CAAC,CAACR,MAAM,oCAAwC,EAChDI,SAAS;EACT,IAEDH,QAAQ,CACL,CACK;AAEjB,CAAC;AAAC"}

package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js CHANGED Viewed

@@ -8,17 +8,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.SubnavigationButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
+var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
-var _utils = require("../../lib/utils");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _adaptivity = require("../../lib/adaptivity");
+var _utils = require("../../lib/utils");
 var _Tappable = require("../Tappable/Tappable");
-var _icons = require("@vkontakte/icons");
 var _Caption = require("../Typography/Caption/Caption");
 var _Subhead = require("../Typography/Subhead/Subhead");
 var _excluded = ["textLevel"],
   _excluded2 = ["mode", "size", "selected", "textLevel", "before", "after", "expandable", "children", "className"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiSubnavigationButton--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiSubnavigationButton--sizeY-compact");
 var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref) {
   var textLevel = _ref.textLevel,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -48,11 +52,12 @@ var SubnavigationButton = function SubnavigationButton(_ref2) {
     className = _ref2.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
     hasActive: false,
     focusVisibleMode: "outside",
-    className: (0, _vkjs.classNames)("vkuiSubnavigationButton", styles["SubnavigationButton--size-".concat(size)], styles["SubnavigationButton--mode-".concat(mode)], selected && "vkuiSubnavigationButton--selected", (0, _getSizeYClassName.getSizeYClassName)("vkuiSubnavigationButton", sizeY), className),
+    className: (0, _vkjs.classNames)("vkuiSubnavigationButton", styles["SubnavigationButton--size-".concat(size)], styles["SubnavigationButton--mode-".concat(mode)], selected && "vkuiSubnavigationButton--selected", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], className),
     "aria-label": (0, _utils.getTitleFromChildren)(children)
   }), /*#__PURE__*/React.createElement("span", {
     className: "vkuiSubnavigationButton__in"

package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubnavigationButton.js","names":["SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","useAdaptivity","sizeY","classNames","styles","~~getSizeYClassName~~","getTitleFromChildren"],"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~getSizeYClassName~~ } from '~~../../helpers~~/~~getSizeYClassName~~';\nimport { ~~HasComponent,~~ ~~HasChildren~~ } from '~~../../types~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~getTitleFromChildren~~ } from '../../lib/~~utils~~';\nimport { ~~useAdaptivity~~ } from '../../~~hooks~~/~~useAdaptivity~~';\nimport { ~~TappableProps~~, ~~Tappable~~ } from '~~../Tappable/Tappable~~';\nimport { ~~Icon16Dropdown~~ } from '~~@vkontakte~~/~~icons~~';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n mode?: 'primary' \| 'outline' \| 'tertiary';\n size?: 's' \| 'm' \| 'l';\n selected?: boolean;\n /*\n Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n /\n textLevel?: '1' \| '2' \| '3';\n /\n Рекомендуется использовать только иконки с размером 24\n /\n before?: React.ReactNode;\n /\n Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n /\n after?: React.ReactNode;\n expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n SubnavigationButtonProps,\n 'textLevel' \| 'className'\n> &\n HasComponent &\n HasChildren;\n\nconst SubnavigationButtonTypography = ({\n textLevel,\n ...restProps\n}: SubnavigationButtonTypographyProps) => {\n if (textLevel === '1') {\n return <Subhead {...restProps} />;\n }\n\n return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n mode = 'primary',\n size = 'm',\n selected,\n textLevel = '1',\n before,\n after,\n expandable,\n children,\n className,\n ...restProps\n}: SubnavigationButtonProps) => {\n const { sizeY } = useAdaptivity();\n\n return (\n <Tappable\n {...restProps}\n hasActive={false}\n focusVisibleMode=\"outside\"\n className={classNames(\n styles['SubnavigationButton'],\n styles[`SubnavigationButton--size-${size}`],\n styles[`SubnavigationButton--mode-${mode}`],\n selected && styles['SubnavigationButton--selected'],\n ~~getSizeYClassName(styles~~[~~'SubnavigationButton'~~]~~, sizeY)~~,\n className,\n )}\n aria-label={getTitleFromChildren(children)}\n >\n <span className={styles['SubnavigationButton__in']}>\n {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n <SubnavigationButtonTypography\n textLevel={textLevel}\n className={styles['SubnavigationButton__label']}\n Component=\"span\"\n >\n {children}\n </SubnavigationButtonTypography>\n {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n </span>\n </Tappable>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAAA;AACA;~~AAEA;~~AACA;AACA;AACA;AACA;AACA;AACA;AAAwD;EAAA;~~AA6BxD~~,IAAMA,6BAA6B,GAAG,SAAhCA,6BAA6B,OAGO;EAAA,IAFxCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAID,SAAS,KAAK,GAAG,EAAE;IACrB,oBAAO,oBAAC,gBAAO,EAAKC,SAAS,CAAI;EACnC;EAEA,oBAAO,oBAAC,gBAAO;IAAC,KAAK,EAAED,SAAS,KAAK,GAAG,GAAG,GAAG,GAAG;EAAI,GAAKC,SAAS,EAAI;AACzE,CAAC;;AAED;AACA;AACA;AACO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,QAWA;EAAA,uBAV9BC,IAAI;IAAJA,IAAI,2BAAG,SAAS;IAAA,mBAChBC,IAAI;IAAJA,IAAI,2BAAG,GAAG;IACVC,QAAQ,SAARA,QAAQ;IAAA,wBACRL,SAAS;IAATA,SAAS,gCAAG,GAAG;IACfM,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,UAAU,SAAVA,UAAU;IACVC,QAAQ,SAARA,QAAQ;IACRC,SAAS,SAATA,SAAS;IACNT,SAAS;EAEZ,~~qBAAkB~~,IAAAU,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EAEb~~,oBACE,oBAAC,kBAAQ,6BACHX,SAAS;IACb,SAAS,EAAE,KAAM;IACjB,gBAAgB,EAAC,SAAS;IAC1B,SAAS,EAAE,IAAAY,gBAAU,6BAEnBC,MAAM,qCAA8BV,IAAI,EAAG,EAC3CU,MAAM,qCAA8BX,IAAI,EAAG,EAC3CE,QAAQ,uCAA2C,~~EACnD~~,~~IAAAU~~,~~oCAAiB~~,~~6BAAgCH~~,KAAK,CAAC,~~EACvDF~~,SAAS,CACT;IACF,cAAY,IAAAM,2BAAoB,EAACP,QAAQ;EAAE,iBAE3C;IAAM,SAAS;EAAoC,GAChDH,MAAM,iBAAI;IAAM,SAAS;EAAwC,GAAEA,MAAM,CAAQ,eAClF,oBAAC,6BAA6B;IAC5B,SAAS,EAAEN,SAAU;IACrB,SAAS,kCAAuC;IAChD,SAAS,EAAC;EAAM,GAEfS,QAAQ,CACqB,EAC/BF,KAAK,iBAAI;IAAM,SAAS;EAAuC,GAAEA,KAAK,CAAQ,EAC9EC,UAAU,iBAAI,oBAAC,qBAAc;IAAC,SAAS;EAAgD,EAAG,CACtF,CACE;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"SubnavigationButton.js","names":["sizeYClassNames","none","SizeType","COMPACT","SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","useAdaptivity","sizeY","classNames","styles","REGULAR","getTitleFromChildren"],"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n none: styles['SubnavigationButton--sizeY-none'],\n [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n mode?: 'primary' \| 'outline' \| 'tertiary';\n size?: 's' \| 'm' \| 'l';\n selected?: boolean;\n /*\n Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n /\n textLevel?: '1' \| '2' \| '3';\n /\n Рекомендуется использовать только иконки с размером 24\n /\n before?: React.ReactNode;\n /\n Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n /\n after?: React.ReactNode;\n expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n SubnavigationButtonProps,\n 'textLevel' \| 'className'\n> &\n HasComponent &\n HasChildren;\n\nconst SubnavigationButtonTypography = ({\n textLevel,\n ...restProps\n}: SubnavigationButtonTypographyProps) => {\n if (textLevel === '1') {\n return <Subhead {...restProps} />;\n }\n\n return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n mode = 'primary',\n size = 'm',\n selected,\n textLevel = '1',\n before,\n after,\n expandable,\n children,\n className,\n ...restProps\n}: SubnavigationButtonProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n {...restProps}\n hasActive={false}\n focusVisibleMode=\"outside\"\n className={classNames(\n styles['SubnavigationButton'],\n styles[`SubnavigationButton--size-${size}`],\n styles[`SubnavigationButton--mode-${mode}`],\n selected && styles['SubnavigationButton--selected'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n aria-label={getTitleFromChildren(children)}\n >\n <span className={styles['SubnavigationButton__in']}>\n {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n <SubnavigationButtonTypography\n textLevel={textLevel}\n className={styles['SubnavigationButton__label']}\n Component=\"span\"\n >\n {children}\n </SubnavigationButtonTypography>\n {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n </span>\n </Tappable>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAwD;EAAA;AAGxD,IAAMA,eAAe;EACnBC,IAAI;AAA2C,GAC9CC,oBAAQ,CAACC,OAAO,2CAClB;AA4BD,IAAMC,6BAA6B,GAAG,SAAhCA,6BAA6B,OAGO;EAAA,IAFxCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAID,SAAS,KAAK,GAAG,EAAE;IACrB,oBAAO,oBAAC,gBAAO,EAAKC,SAAS,CAAI;EACnC;EAEA,oBAAO,oBAAC,gBAAO;IAAC,KAAK,EAAED,SAAS,KAAK,GAAG,GAAG,GAAG,GAAG;EAAI,GAAKC,SAAS,EAAI;AACzE,CAAC;;AAED;AACA;AACA;AACO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,QAWA;EAAA,uBAV9BC,IAAI;IAAJA,IAAI,2BAAG,SAAS;IAAA,mBAChBC,IAAI;IAAJA,IAAI,2BAAG,GAAG;IACVC,QAAQ,SAARA,QAAQ;IAAA,wBACRL,SAAS;IAATA,SAAS,gCAAG,GAAG;IACfM,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,UAAU,SAAVA,UAAU;IACVC,QAAQ,SAARA,QAAQ;IACRC,SAAS,SAATA,SAAS;IACNT,SAAS;EAEZ,qBAA2B,IAAAU,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,kBAAQ,6BACHX,SAAS;IACb,SAAS,EAAE,KAAM;IACjB,gBAAgB,EAAC,SAAS;IAC1B,SAAS,EAAE,IAAAY,gBAAU,6BAEnBC,MAAM,qCAA8BV,IAAI,EAAG,EAC3CU,MAAM,qCAA8BX,IAAI,EAAG,EAC3CE,QAAQ,uCAA2C,EACnDO,KAAK,KAAKf,oBAAQ,CAACkB,OAAO,IAAIpB,eAAe,CAACiB,KAAK,CAAC,EACpDF,SAAS,CACT;IACF,cAAY,IAAAM,2BAAoB,EAACP,QAAQ;EAAE,iBAE3C;IAAM,SAAS;EAAoC,GAChDH,MAAM,iBAAI;IAAM,SAAS;EAAwC,GAAEA,MAAM,CAAQ,eAClF,oBAAC,6BAA6B;IAC5B,SAAS,EAAEN,SAAU;IACrB,SAAS,kCAAuC;IAChD,SAAS,EAAC;EAAM,GAEfS,QAAQ,CACqB,EAC/BF,KAAK,iBAAI;IAAM,SAAS;EAAuC,GAAEA,KAAK,CAAQ,EAC9EC,UAAU,iBAAI,oBAAC,qBAAc;IAAC,SAAS;EAAgD,EAAG,CACtF,CACE;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/Switch/Switch.js CHANGED Viewed

@@ -8,17 +8,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.Switch = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
-var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _vkjs = require("@vkontakte/vkjs");
-var _callMultiple = require("../../lib/callMultiple");
-var _usePlatform = require("../../hooks/usePlatform");
+var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _VisuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
 var _useFocusVisible2 = require("../../hooks/useFocusVisible");
+var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
+var _callMultiple = require("../../lib/callMultiple");
 var _FocusVisible = require("../FocusVisible/FocusVisible");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
+var _VisuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
 var _excluded = ["style", "className", "getRootRef"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiSwitch--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiSwitch--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */
@@ -29,13 +33,14 @@ var Switch = function Switch(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var _useFocusVisible = (0, _useFocusVisible2.useFocusVisible)(),
     focusVisible = _useFocusVisible.focusVisible,
     onBlur = _useFocusVisible.onBlur,
     onFocus = _useFocusVisible.onFocus;
   return /*#__PURE__*/React.createElement("label", {
-    className: (0, _vkjs.classNames)("vkuiSwitch", (0, _getPlatformClassName.getPlatformClassName)("vkuiSwitch", platform), (0, _getSizeYClassName.getSizeYClassName)("vkuiSwitch", sizeY), restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
+    className: (0, _vkjs.classNames)("vkuiSwitch", (0, _getPlatformClassName.getPlatformClassName)("vkuiSwitch", platform), sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
     style: style,
     ref: getRootRef
   }, /*#__PURE__*/React.createElement(_VisuallyHiddenInput.VisuallyHiddenInput, (0, _extends2.default)({}, restProps, {

package/dist/cjs/components/Switch/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","names":["Switch","style","className","getRootRef","restProps","platform","usePlatform","useAdaptivity","sizeY","useFocusVisible","focusVisible","onBlur","onFocus","classNames","getPlatformClassName","~~getSizeYClassName~~","disabled","callMultiple"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~getPlatformClassName~~ } from '~~../../helpers~~/~~getPlatformClassName~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~callMultiple~~ } from '../../~~lib~~/~~callMultiple~~';\nimport { ~~usePlatform~~ } from '../../hooks/~~usePlatform~~';\nimport { ~~HasRootRef~~ } from '../../~~types~~';\nimport { ~~useAdaptivity~~ } from '../../~~hooks~~/~~useAdaptivity~~';\nimport {~~\n VisuallyHiddenInput,\n VisuallyHiddenInputProps,\n~~} from '~~../VisuallyHiddenInput~~/~~VisuallyHiddenInput~~';\nimport { ~~useFocusVisible~~ } from '../../~~hooks/useFocusVisible~~';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { ~~getSizeYClassName~~ } from '~~../../helpers~~/~~getSizeYClassName~~';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...restProps }: SwitchProps) => {\n const platform = usePlatform();\n const { sizeY } = useAdaptivity();\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n return (\n <label\n className={classNames(\n styles['Switch'],\n getPlatformClassName(styles['Switch'], platform),\n ~~getSizeYClassName(styles~~[~~'Switch'~~]~~, sizeY)~~,\n restProps.disabled && styles['Switch--disabled'],\n focusVisible && styles['Switch--focus-visible'],\n className,\n )}\n style={style}\n ref={getRootRef}\n >\n <VisuallyHiddenInput\n {...restProps}\n type=\"checkbox\"\n className={styles['Switch__self']}\n onBlur={callMultiple(onBlur, restProps.onBlur)}\n onFocus={callMultiple(onFocus, restProps.onFocus)}\n />\n <span aria-hidden className={styles['Switch__pseudo']} />\n <FocusVisible mode=\"outside\" />\n </label>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAAA;AACA;AACA;AACA;AACA;~~AAEA~~;AACA;~~AAIA;~~AACA;AACA;~~AAAoE~~;~~AAKpE~~;AACA;AACA;AACO,~~IAAMA~~,MAAM,GAAG,SAATA,MAAM,OAAoE;EAAA,IAA9DC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,UAAU,QAAVA,UAAU;IAAKC,SAAS;EACjE,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,~~qBAAkB~~,IAAAC,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EACb~~,uBAA0C,IAAAC,iCAAe,GAAE;IAAnDC,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,gBAEnB,IAAAC,0CAAoB,gBAAmBT,QAAQ,CAAC,~~EAChD~~,~~IAAAU~~,~~oCAAiB~~,~~gBAAmBP~~,KAAK,CAAC,~~EAC1CJ~~,SAAS,CAACY,QAAQ,0BAA8B,EAChDN,YAAY,+BAAmC,EAC/CR,SAAS,CACT;IACF,KAAK,EAAED,KAAM;IACb,GAAG,EAAEE;EAAW,gBAEhB,oBAAC,wCAAmB,6BACdC,SAAS;IACb,IAAI,EAAC,UAAU;IACf,SAAS,oBAAyB;IAClC,MAAM,EAAE,IAAAa,0BAAY,EAACN,MAAM,EAAEP,SAAS,CAACO,MAAM,CAAE;IAC/C,OAAO,EAAE,IAAAM,0BAAY,EAACL,OAAO,EAAER,SAAS,CAACQ,OAAO;EAAE,GAClD,eACF;IAAM,mBAAW;IAAC,SAAS;EAA2B,EAAG,eACzD,oBAAC,0BAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC;AAAC"}
1	+ {"version":3,"file":"Switch.js","names":["sizeYClassNames","none","SizeType","COMPACT","Switch","style","className","getRootRef","restProps","platform","usePlatform","useAdaptivity","sizeY","useFocusVisible","focusVisible","onBlur","onFocus","classNames","getPlatformClassName","REGULAR","disabled","callMultiple"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport {\n VisuallyHiddenInput,\n VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n none: styles['Switch--sizeY-none'],\n [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...restProps }: SwitchProps) => {\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n return (\n <label\n className={classNames(\n styles['Switch'],\n getPlatformClassName(styles['Switch'], platform),\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n restProps.disabled && styles['Switch--disabled'],\n focusVisible && styles['Switch--focus-visible'],\n className,\n )}\n style={style}\n ref={getRootRef}\n >\n <VisuallyHiddenInput\n {...restProps}\n type=\"checkbox\"\n className={styles['Switch__self']}\n onBlur={callMultiple(onBlur, restProps.onBlur)}\n onFocus={callMultiple(onFocus, restProps.onFocus)}\n />\n <span aria-hidden className={styles['Switch__pseudo']} />\n <FocusVisible mode=\"outside\" />\n </label>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAGoD;AAGpD,IAAMA,eAAe;EACnBC,IAAI;AAA8B,GACjCC,oBAAQ,CAACC,OAAO,8BAClB;AAID;AACA;AACA;AACO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAAoE;EAAA,IAA9DC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,UAAU,QAAVA,UAAU;IAAKC,SAAS;EACjE,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,uBAA0C,IAAAC,iCAAe,GAAE;IAAnDC,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,gBAEnB,IAAAC,0CAAoB,gBAAmBT,QAAQ,CAAC,EAChDG,KAAK,KAAKV,oBAAQ,CAACiB,OAAO,IAAInB,eAAe,CAACY,KAAK,CAAC,EACpDJ,SAAS,CAACY,QAAQ,0BAA8B,EAChDN,YAAY,+BAAmC,EAC/CR,SAAS,CACT;IACF,KAAK,EAAED,KAAM;IACb,GAAG,EAAEE;EAAW,gBAEhB,oBAAC,wCAAmB,6BACdC,SAAS;IACb,IAAI,EAAC,UAAU;IACf,SAAS,oBAAyB;IAClC,MAAM,EAAE,IAAAa,0BAAY,EAACN,MAAM,EAAEP,SAAS,CAACO,MAAM,CAAE;IAC/C,OAAO,EAAE,IAAAM,0BAAY,EAACL,OAAO,EAAER,SAAS,CAACQ,OAAO;EAAE,GAClD,eACF;IAAM,mBAAW;IAAC,SAAS;EAA2B,EAAG,eACzD,oBAAC,0BAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC;AAAC"}

package/dist/cjs/components/TabbarItem/TabbarItem.js CHANGED Viewed

@@ -11,10 +11,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
+var _platform = require("../../lib/platform");
+var _warnOnce = require("../../lib/warnOnce");
 var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
-var _platform = require("../../lib/platform");
 var _excluded = ["children", "selected", "indicator", "text", "href", "Component", "disabled", "className"];
+var warn = (0, _warnOnce.warnOnce)('TabbarItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */
@@ -30,6 +33,12 @@ var TabbarItem = function TabbarItem(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
+  if (process.env.NODE_ENV === 'development') {
+    var isAccessible = !text && (!restProps['aria-label'] || !restProps['aria-labelledby']);
+    if (!isAccessible) {
+      warn(_warnOnce.COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');
+    }
+  }
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, restProps, {
     disabled: disabled,
     href: href,

package/dist/cjs/components/TabbarItem/TabbarItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabbarItem.js","names":["TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","usePlatform","classNames","Platform","IOS","ANDROID","hasReactNode"],"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ~~Tappable~~ } from '~~../Tappable~~/~~Tappable~~';\nimport { ~~Footnote~~ } from '~~../Typography~~/~~Footnote/Footnote~~';\nimport { ~~Platform~~ } from '../../~~lib~~/~~platform~~';\nimport { ~~HasComponent,~~ ~~HasRootRef~~ } from '~~../../types~~';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent {\n selected?: boolean;\n /*\n Текст рядом с иконкой\n /\n text?: React.ReactNode;\n /\n Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n /\n indicator?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n children,\n selected,\n indicator,\n text,\n href,\n Component = href ? 'a' : 'button',\n disabled,\n className,\n ...restProps\n}: TabbarItemProps) => {\n const platform = usePlatform();\n\n return (\n <Component\n {...restProps}\n disabled={disabled}\n href={href}\n className={classNames(\n styles['TabbarItem'],\n platform === Platform.IOS && styles['TabbarItem--ios'],\n platform === Platform.ANDROID && styles['TabbarItem--android'],\n selected && styles['TabbarItem--selected'],\n !!text && styles['TabbarItem--text'],\n className,\n )}\n >\n <Tappable\n role=\"presentation\"\n Component=\"div\"\n disabled={disabled}\n activeMode={\n platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n }\n activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n hasHover={false}\n className={styles['TabbarItem__tappable']}\n />\n <div className={styles['TabbarItem__in']}>\n <div className={styles['TabbarItem__icon']}>\n {children}\n <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n </div>\n {text && (\n <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n {text}\n </Footnote>\n )}\n </div>\n </Component>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;~~AAA8C~~;~~AAmB9C~~;AACA;AACA;AACO,~~IAAMA~~,UAAU,GAAG,SAAbA,UAAU,OAUA;EAAA,IATrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAGD,IAAI,GAAG,GAAG,GAAG,QAAQ;IACjCE,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,SAAS,~~6BACJF~~,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAE,~~IAAAO~~,gBAAU,~~oBAEnBF~~,QAAQ,~~KAAKG~~,kBAAQ,CAACC,GAAG,yBAA6B,~~EACtDJ~~,QAAQ,~~KAAKG~~,kBAAQ,CAACE,OAAO,6BAAiC,~~EAC9Db~~,QAAQ,8BAAkC,EAC1C,CAAC,CAACE,IAAI,0BAA8B,EACpCI,SAAS;EACT,iBAEF,oBAAC,kBAAQ;IACP,IAAI,EAAC,cAAc;IACnB,SAAS,EAAC,KAAK;IACf,QAAQ,EAAED,QAAS;IACnB,UAAU,EACRG,QAAQ,~~KAAKG~~,kBAAQ,CAACC,GAAG,wCAA4C,YACtE;IACD,iBAAiB,~~EAAEJ~~,QAAQ,~~KAAKG~~,kBAAQ,CAACC,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,~~GACxCb~~,QAAQ,eACT;IAAK,SAAS;EAA8B,GAAE,~~IAAAe~~,kBAAY,~~EAACb~~,SAAS,CAAC,IAAIA,SAAS,CAAO,CACrF,EACLC,IAAI,iBACH,oBAAC,kBAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS,wBAA6B;IAAC,MAAM,EAAC;EAAG,GACxEA,IAAI,CAER,CACG,CACI;AAEhB,CAAC;AAAC"}
1	+ {"version":3,"file":"TabbarItem.js","names":["warn","warnOnce","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","usePlatform","process","env","NODE_ENV","isAccessible","COMMON_WARNINGS","a11y","classNames","Platform","IOS","ANDROID","hasReactNode"],"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent {\n selected?: boolean;\n /*\n Текст рядом с иконкой\n /\n text?: React.ReactNode;\n /\n Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n /\n indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/\n @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n children,\n selected,\n indicator,\n text,\n href,\n Component = href ? 'a' : 'button',\n disabled,\n className,\n ...restProps\n}: TabbarItemProps) => {\n const platform = usePlatform();\n\n if (process.env.NODE_ENV === 'development') {\n const isAccessible = !text && (!restProps['aria-label'] \|\| !restProps['aria-labelledby']);\n\n if (!isAccessible) {\n warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n }\n }\n\n return (\n <Component\n {...restProps}\n disabled={disabled}\n href={href}\n className={classNames(\n styles['TabbarItem'],\n platform === Platform.IOS && styles['TabbarItem--ios'],\n platform === Platform.ANDROID && styles['TabbarItem--android'],\n selected && styles['TabbarItem--selected'],\n !!text && styles['TabbarItem--text'],\n className,\n )}\n >\n <Tappable\n role=\"presentation\"\n Component=\"div\"\n disabled={disabled}\n activeMode={\n platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n }\n activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n hasHover={false}\n className={styles['TabbarItem__tappable']}\n />\n <div className={styles['TabbarItem__in']}>\n <div className={styles['TabbarItem__icon']}>\n {children}\n <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n </div>\n {text && (\n <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n {text}\n </Footnote>\n )}\n </div>\n </Component>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAA2D;AAkB3D,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAUA;EAAA,IATrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAGD,IAAI,GAAG,GAAG,GAAG,QAAQ;IACjCE,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAG,CAACX,IAAI,KAAK,CAACK,SAAS,CAAC,YAAY,CAAC,IAAI,CAACA,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAEzF,IAAI,CAACM,YAAY,EAAE;MACjBjB,IAAI,CAACkB,yBAAe,CAACC,IAAI,CAACX,SAAS,KAAK,GAAG,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACtF;EACF;EAEA,oBACE,oBAAC,SAAS,6BACJG,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAE,IAAAa,gBAAU,oBAEnBR,QAAQ,KAAKS,kBAAQ,CAACC,GAAG,yBAA6B,EACtDV,QAAQ,KAAKS,kBAAQ,CAACE,OAAO,6BAAiC,EAC9DnB,QAAQ,8BAAkC,EAC1C,CAAC,CAACE,IAAI,0BAA8B,EACpCI,SAAS;EACT,iBAEF,oBAAC,kBAAQ;IACP,IAAI,EAAC,cAAc;IACnB,SAAS,EAAC,KAAK;IACf,QAAQ,EAAED,QAAS;IACnB,UAAU,EACRG,QAAQ,KAAKS,kBAAQ,CAACC,GAAG,wCAA4C,YACtE;IACD,iBAAiB,EAAEV,QAAQ,KAAKS,kBAAQ,CAACC,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,GACxCnB,QAAQ,eACT;IAAK,SAAS;EAA8B,GAAE,IAAAqB,kBAAY,EAACnB,SAAS,CAAC,IAAIA,SAAS,CAAO,CACrF,EACLC,IAAI,iBACH,oBAAC,kBAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS,wBAA6B;IAAC,MAAM,EAAC;EAAG,GACxEA,IAAI,CAER,CACG,CACI;AAEhB,CAAC;AAAC"}

package/dist/cjs/components/Tabs/Tabs.js CHANGED Viewed

@@ -10,11 +10,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _usePlatform = require("../../hooks/usePlatform");
-var _platform = require("../../lib/platform");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
-var _dom = require("../../lib/dom");
+var _usePlatform = require("../../hooks/usePlatform");
 var _accessibility = require("../../lib/accessibility");
+var _dom = require("../../lib/dom");
+var _platform = require("../../lib/platform");
 var _excluded = ["children", "mode", "getRootRef", "className", "role"];
 var modeClassNames = {
   default: "vkuiTabs--mode-default",

package/dist/cjs/components/Tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","names":["modeClassNames","default","accent","secondary","TabsModeContext","React","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","usePlatform","useDOM","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","classNames","Platform","VKCOM"],"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~HasRootRef~~ } from '../../~~types~~';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ~~Platform~~ } from '../../lib/~~platform~~';\nimport { ~~useGlobalEventListener~~ } from '../../~~hooks~~/~~useGlobalEventListener~~';\nimport { ~~useDOM~~ } from '../../lib/~~dom~~';\nimport { ~~pressedKey~~ } from '../../~~lib/accessibility~~';\nimport styles from './Tabs.module.css';\n\nconst modeClassNames = {\n default: styles['Tabs--mode-default'],\n accent: styles['Tabs--mode-accent'],\n secondary: styles['Tabs--mode-secondary'],\n};\n\nexport interface TabsProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n mode?: 'default' \| 'accent' \| 'secondary';\n}\n\nexport interface TabsContextProps {\n mode: TabsProps['mode'];\n withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n mode: 'default',\n withGaps: false,\n});\n\n/*\n @see https://vkcom.github.io/VKUI/#/Tabs\n /\nexport const Tabs = ({\n children,\n mode = 'default',\n getRootRef,\n className,\n role = 'tablist',\n ...restProps\n}: TabsProps) => {\n const platform = usePlatform();\n const { document } = useDOM();\n\n const isTabFlow = role === 'tablist';\n\n const tabsRef = React.useRef<HTMLDivElement>(null);\n\n const withGaps = mode === 'accent' \|\| mode === 'secondary';\n\n const getTabEls = () => {\n if (!tabsRef.current) {\n return [];\n }\n\n return Array.from(\n // eslint-disable-next-line no-restricted-properties\n tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n );\n };\n\n const handleDocumentKeydown = (event: KeyboardEvent) => {\n if (!document \|\| !tabsRef.current \|\| !isTabFlow) {\n return;\n }\n\n const key = pressedKey(event);\n\n switch (key) {\n case 'ArrowLeft':\n case 'ArrowRight':\n case 'End':\n case 'Home': {\n const tabEls = getTabEls();\n const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n if (currentFocusedElIndex === -1) {\n return;\n }\n\n let nextIndex = 0;\n if (key === 'Home') {\n nextIndex = 0;\n } else if (key === 'End') {\n nextIndex = tabEls.length - 1;\n } else {\n const offset = key === 'ArrowRight' ? 1 : -1;\n nextIndex = currentFocusedElIndex + offset;\n }\n\n const nextTabEl = tabEls[nextIndex];\n\n if (nextTabEl) {\n event.preventDefault();\n nextTabEl.focus();\n }\n\n break;\n }\n /\n В JAWS и NVDA стрелка вниз активирует контент.\n Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n https://inclusive-components.design/tabbed-interfaces/\n */\n case 'ArrowDown': {\n const tabEls = getTabEls();\n const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n if (!currentFocusedEl \|\| currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n return;\n }\n\n const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n if (!relatedContentElId) {\n return;\n }\n\n // eslint-disable-next-line no-restricted-properties\n const relatedContentEl = document.getElementById(relatedContentElId);\n if (!relatedContentEl) {\n return;\n }\n\n event.preventDefault();\n relatedContentEl.focus();\n\n break;\n }\n case 'Space':\n case 'Enter': {\n const tabEls = getTabEls();\n const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n if (currentFocusedEl) {\n currentFocusedEl.click();\n }\n }\n }\n };\n\n useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n capture: true,\n });\n\n return (\n <div\n {...restProps}\n ref={getRootRef}\n className={classNames(\n styles['Tabs'],\n platform === Platform.VKCOM && styles['Tabs--vkcom'],\n withGaps && styles['Tabs--withGaps'],\n modeClassNames[mode],\n className,\n )}\n role={role}\n >\n <div className={styles['Tabs__in']} ref={tabsRef}>\n <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;~~AAEA~~;AACA;AACA;AACA;AACA;~~AAAqD~~;~~AAGrD~~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"}
1	+ {"version":3,"file":"Tabs.js","names":["modeClassNames","default","accent","secondary","TabsModeContext","React","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","usePlatform","useDOM","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","classNames","Platform","VKCOM"],"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport styles from './Tabs.module.css';\n\nconst modeClassNames = {\n default: styles['Tabs--mode-default'],\n accent: styles['Tabs--mode-accent'],\n secondary: styles['Tabs--mode-secondary'],\n};\n\nexport interface TabsProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n mode?: 'default' \| 'accent' \| 'secondary';\n}\n\nexport interface TabsContextProps {\n mode: TabsProps['mode'];\n withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n mode: 'default',\n withGaps: false,\n});\n\n/*\n @see https://vkcom.github.io/VKUI/#/Tabs\n /\nexport const Tabs = ({\n children,\n mode = 'default',\n getRootRef,\n className,\n role = 'tablist',\n ...restProps\n}: TabsProps) => {\n const platform = usePlatform();\n const { document } = useDOM();\n\n const isTabFlow = role === 'tablist';\n\n const tabsRef = React.useRef<HTMLDivElement>(null);\n\n const withGaps = mode === 'accent' \|\| mode === 'secondary';\n\n const getTabEls = () => {\n if (!tabsRef.current) {\n return [];\n }\n\n return Array.from(\n // eslint-disable-next-line no-restricted-properties\n tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n );\n };\n\n const handleDocumentKeydown = (event: KeyboardEvent) => {\n if (!document \|\| !tabsRef.current \|\| !isTabFlow) {\n return;\n }\n\n const key = pressedKey(event);\n\n switch (key) {\n case 'ArrowLeft':\n case 'ArrowRight':\n case 'End':\n case 'Home': {\n const tabEls = getTabEls();\n const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n if (currentFocusedElIndex === -1) {\n return;\n }\n\n let nextIndex = 0;\n if (key === 'Home') {\n nextIndex = 0;\n } else if (key === 'End') {\n nextIndex = tabEls.length - 1;\n } else {\n const offset = key === 'ArrowRight' ? 1 : -1;\n nextIndex = currentFocusedElIndex + offset;\n }\n\n const nextTabEl = tabEls[nextIndex];\n\n if (nextTabEl) {\n event.preventDefault();\n nextTabEl.focus();\n }\n\n break;\n }\n /\n В JAWS и NVDA стрелка вниз активирует контент.\n Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n https://inclusive-components.design/tabbed-interfaces/\n */\n case 'ArrowDown': {\n const tabEls = getTabEls();\n const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n if (!currentFocusedEl \|\| currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n return;\n }\n\n const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n if (!relatedContentElId) {\n return;\n }\n\n // eslint-disable-next-line no-restricted-properties\n const relatedContentEl = document.getElementById(relatedContentElId);\n if (!relatedContentEl) {\n return;\n }\n\n event.preventDefault();\n relatedContentEl.focus();\n\n break;\n }\n case 'Space':\n case 'Enter': {\n const tabEls = getTabEls();\n const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n if (currentFocusedEl) {\n currentFocusedEl.click();\n }\n }\n }\n };\n\n useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n capture: true,\n });\n\n return (\n <div\n {...restProps}\n ref={getRootRef}\n className={classNames(\n styles['Tabs'],\n platform === Platform.VKCOM && styles['Tabs--vkcom'],\n withGaps && styles['Tabs--withGaps'],\n modeClassNames[mode],\n className,\n )}\n role={role}\n >\n <div className={styles['Tabs__in']} ref={tabsRef}>\n <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/cjs/components/TabsItem/TabsItem.js CHANGED Viewed

@@ -8,16 +8,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.TabsItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
-var _Tappable = require("../Tappable/Tappable");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _adaptivity = require("../../lib/adaptivity");
+var _warnOnce = require("../../lib/warnOnce");
 var _Tabs = require("../Tabs/Tabs");
+var _Tappable = require("../Tappable/Tappable");
 var _Headline = require("../Typography/Headline/Headline");
 var _Subhead = require("../Typography/Subhead/Subhead");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-var _warnOnce = require("../../lib/warnOnce");
 var _excluded = ["before", "children", "status", "after", "selected", "className", "role", "tabIndex"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiTabsItem--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiTabsItem--sizeY-compact");
 var warn = (0, _warnOnce.warnOnce)('TabsItem');
 /**
@@ -36,7 +40,8 @@ var TabsItem = function TabsItem(_ref) {
     tabIndexProp = _ref.tabIndex,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var _React$useContext = React.useContext(_Tabs.TabsModeContext),
     mode = _React$useContext.mode,
     withGaps = _React$useContext.withGaps;
@@ -63,7 +68,7 @@ var TabsItem = function TabsItem(_ref) {
     tabIndex = selected ? 0 : -1;
   }
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", (0, _getSizeYClassName.getSizeYClassName)("vkuiTabsItem", sizeY), withGaps && "vkuiTabsItem--withGaps", className),
+    className: (0, _vkjs.classNames)("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem--withGaps", className),
     hoverMode: "vkuiTabsItem--hover",
     activeMode: "vkuiTabsItem--active",
     focusVisibleMode: "inside",