npm - @vkontakte/vkui - Versions diffs - 5.2.0 → 5.2.2 - Mend

@vkontakte/vkui 5.2.0 → 5.2.2

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 (1184) hide show

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

@@ -10,21 +10,21 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _dom = require("../../lib/dom");
 var _vkjs = require("@vkontakte/vkjs");
+var _math = require("../../helpers/math");
+var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
+var _usePlatform = require("../../hooks/usePlatform");
+var _usePrevious = require("../../hooks/usePrevious");
+var _useTimeout2 = require("../../hooks/useTimeout");
+var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
 var _taptic = require("../../lib/taptic");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _usePlatform = require("../../hooks/usePlatform");
-var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _ScrollContext = require("../AppRoot/ScrollContext");
-var _Touch = require("../Touch/Touch");
 var _FixedLayout = require("../FixedLayout/FixedLayout");
-var _PullToRefreshSpinner = require("./PullToRefreshSpinner");
+var _Touch = require("../Touch/Touch");
 var _TouchContext = _interopRequireDefault(require("../Touch/TouchContext"));
-var _usePrevious = require("../../hooks/usePrevious");
-var _useTimeout2 = require("../../hooks/useTimeout");
-var _math = require("../../helpers/math");
+var _PullToRefreshSpinner = require("./PullToRefreshSpinner");
 var _excluded = ["children", "isFetching", "onRefresh", "className"];
 function cancelEvent(event) {
   if (!event) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PullToRefresh.js","names":["cancelEvent","event","originalEvent","preventDefault","cancelable","stopPropagation","TOUCH_MOVE_EVENT_PARAMS","passive","PullToRefresh","children","isFetching","onRefresh","className","restProps","platform","usePlatform","scroll","useScroll","useDOM","document","prevIsFetching","usePrevious","initParams","React","useMemo","start","Platform","IOS","max","maxY","refreshing","positionMultiplier","useState","spinnerY","setSpinnerY","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","onWindowTouchMove","useGlobalEventListener","resetRefreshingState","useCallback","onRefreshingFinish","useTimeout","setWaitFetchingTimeout","set","clearWaitFetchingTimeout","clear","useIsomorphicLayoutEffect","undefined","runRefreshing","prevSpinnerY","runTapticImpactOccurred","onTouchStart","e","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","current","currentY","clamp","progress","abs","onTouchEnd","spinnerTransform","contentTransform","classNames","transform","WebkitTransform","opacity"],"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AnyFunction } from '../../types';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { runTapticImpactOccurred } from '../../lib/taptic';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { clamp } from '../../helpers/math';\nimport styles from './PullToRefresh.module.css';\n\nfunction cancelEvent(event: any) {\n if (!event) {\n return false;\n }\n while (event.originalEvent) {\n event = event.originalEvent;\n }\n if (event.preventDefault && event.cancelable) {\n event.preventDefault();\n }\n if (event.stopPropagation) {\n event.stopPropagation();\n }\n return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps {\n /*\n Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n /\n onRefresh: AnyFunction;\n /\n Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n /\n isFetching?: boolean;\n /* @ignore /\n scroll?: ScrollContextInterface;\n children?: React.ReactNode;\n}\n\nconst TOUCH_MOVE_EVENT_PARAMS = {\n cancelable: true,\n passive: false,\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/PullToRefresh\n /\nexport const PullToRefresh = ({\n children,\n isFetching,\n onRefresh,\n className,\n ...restProps\n}: PullToRefreshProps) => {\n const platform = usePlatform();\n const scroll = useScroll();\n const { document } = useDOM();\n const prevIsFetching = usePrevious(isFetching);\n\n const initParams = React.useMemo(\n () => ({\n start: platform === Platform.IOS ? -10 : -45,\n max: platform === Platform.IOS ? 50 : 80,\n maxY: platform === Platform.IOS ? 400 : 80,\n refreshing: platform === Platform.IOS ? 36 : 50,\n positionMultiplier: platform === Platform.IOS ? 0.21 : 1,\n }),\n [platform],\n );\n\n const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n const [watching, setWatching] = React.useState(false);\n const [refreshing, setRefreshing] = React.useState(false);\n const [canRefresh, setCanRefresh] = React.useState(false);\n const [touchDown, setTouchDown] = React.useState(false);\n const prevTouchDown = usePrevious(touchDown);\n\n const touchY = React.useRef(0);\n const [contentShift, setContentShift] = React.useState(0);\n const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n const onWindowTouchMove = (event: Event) => {\n if (refreshing) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);\n\n const resetRefreshingState = React.useCallback(() => {\n setWatching(false);\n setCanRefresh(false);\n setRefreshing(false);\n setSpinnerY(initParams.start);\n setSpinnerProgress(0);\n setContentShift(0);\n }, [initParams]);\n\n const onRefreshingFinish = React.useCallback(() => {\n if (!touchDown) {\n resetRefreshingState();\n }\n }, [touchDown, resetRefreshingState]);\n\n const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(\n onRefreshingFinish,\n 1000,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n onRefreshingFinish();\n }\n }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n useIsomorphicLayoutEffect(() => {\n if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n clearWaitFetchingTimeout();\n }\n }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);\n\n const runRefreshing = React.useCallback(() => {\n if (!refreshing && onRefresh) {\n // cleanup if the consumer does not start fetching in 1s\n setWaitFetchingTimeout();\n\n setRefreshing(true);\n setSpinnerY((prevSpinnerY) =>\n platform === Platform.IOS ? prevSpinnerY : initParams.refreshing,\n );\n\n onRefresh();\n runTapticImpactOccurred('light');\n }\n }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);\n\n useIsomorphicLayoutEffect(() => {\n if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n if (!refreshing && canRefresh) {\n runRefreshing();\n } else if (refreshing && !isFetching) {\n // only iOS can start refresh before gesture end\n resetRefreshingState();\n } else {\n // refreshing && isFetching: refresh in progress\n // OR !refreshing && !canRefresh: pull was not strong enough\n setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n setSpinnerProgress(0);\n setContentShift(0);\n }\n }\n }, [\n initParams,\n prevIsFetching,\n isFetching,\n onRefreshingFinish,\n prevTouchDown,\n touchDown,\n refreshing,\n canRefresh,\n runRefreshing,\n ]);\n\n const onTouchStart = (e: TouchEvent) => {\n if (refreshing) {\n cancelEvent(e);\n }\n setTouchDown(true);\n };\n\n const onTouchMove = (e: TouchEvent) => {\n const { isY, shiftY } = e;\n const { start, max } = initParams;\n const pageYOffset = scroll?.getScroll().y;\n\n if (watching && touchDown) {\n cancelEvent(e);\n\n const { positionMultiplier, maxY } = initParams;\n\n const shift = Math.max(0, shiftY - touchY.current);\n\n const currentY = clamp(start + shift positionMultiplier, start, maxY);\n const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n setSpinnerY(currentY);\n setSpinnerProgress(clamp(progress, 0, 80));\n setCanRefresh(progress > 80);\n setContentShift((currentY + 10) * 2.3);\n\n if (progress > 85 && !refreshing && platform === Platform.IOS) {\n runRefreshing();\n }\n } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n cancelEvent(e);\n\n touchY.current = shiftY;\n setWatching(true);\n setSpinnerY(start);\n setSpinnerProgress(0);\n }\n };\n\n const onTouchEnd = () => {\n setWatching(false);\n setTouchDown(false);\n };\n\n const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n let contentTransform = '';\n\n if (platform === Platform.IOS && refreshing && !touchDown) {\n contentTransform = 'translate3d(0, 100px, 0)';\n } else if (platform === Platform.IOS && (contentShift \|\| refreshing)) {\n contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n }\n\n return (\n <TouchRootContext.Provider value={true}>\n <Touch\n {...restProps}\n onStart={onTouchStart}\n onMove={onTouchMove}\n onEnd={onTouchEnd}\n className={classNames(\n styles['PullToRefresh'],\n platform === Platform.IOS && styles['PullToRefresh--ios'],\n watching && styles['PullToRefresh--watching'],\n refreshing && styles['PullToRefresh--refreshing'],\n className,\n )}\n >\n <FixedLayout className={styles['PullToRefresh__controls']}>\n <PullToRefreshSpinner\n style={{\n transform: spinnerTransform,\n WebkitTransform: spinnerTransform,\n opacity: watching \|\| refreshing \|\| canRefresh ? 1 : 0,\n }}\n on={refreshing}\n progress={refreshing ? undefined : spinnerProgress}\n />\n </FixedLayout>\n\n <div\n className={styles['PullToRefresh__content']}\n style={{\n transform: contentTransform,\n WebkitTransform: contentTransform,\n }}\n >\n {children}\n </div>\n </Touch>\n </TouchRootContext.Provider>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"PullToRefresh.js","names":["cancelEvent","event","originalEvent","preventDefault","cancelable","stopPropagation","TOUCH_MOVE_EVENT_PARAMS","passive","PullToRefresh","children","isFetching","onRefresh","className","restProps","platform","usePlatform","scroll","useScroll","useDOM","document","prevIsFetching","usePrevious","initParams","React","useMemo","start","Platform","IOS","max","maxY","refreshing","positionMultiplier","useState","spinnerY","setSpinnerY","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","onWindowTouchMove","useGlobalEventListener","resetRefreshingState","useCallback","onRefreshingFinish","useTimeout","setWaitFetchingTimeout","set","clearWaitFetchingTimeout","clear","useIsomorphicLayoutEffect","undefined","runRefreshing","prevSpinnerY","runTapticImpactOccurred","onTouchStart","e","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","current","currentY","clamp","progress","abs","onTouchEnd","spinnerTransform","contentTransform","classNames","transform","WebkitTransform","opacity"],"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { runTapticImpactOccurred } from '../../lib/taptic';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nfunction cancelEvent(event: any) {\n if (!event) {\n return false;\n }\n while (event.originalEvent) {\n event = event.originalEvent;\n }\n if (event.preventDefault && event.cancelable) {\n event.preventDefault();\n }\n if (event.stopPropagation) {\n event.stopPropagation();\n }\n return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps {\n /*\n Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n /\n onRefresh: AnyFunction;\n /\n Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n /\n isFetching?: boolean;\n /* @ignore /\n scroll?: ScrollContextInterface;\n children?: React.ReactNode;\n}\n\nconst TOUCH_MOVE_EVENT_PARAMS = {\n cancelable: true,\n passive: false,\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/PullToRefresh\n /\nexport const PullToRefresh = ({\n children,\n isFetching,\n onRefresh,\n className,\n ...restProps\n}: PullToRefreshProps) => {\n const platform = usePlatform();\n const scroll = useScroll();\n const { document } = useDOM();\n const prevIsFetching = usePrevious(isFetching);\n\n const initParams = React.useMemo(\n () => ({\n start: platform === Platform.IOS ? -10 : -45,\n max: platform === Platform.IOS ? 50 : 80,\n maxY: platform === Platform.IOS ? 400 : 80,\n refreshing: platform === Platform.IOS ? 36 : 50,\n positionMultiplier: platform === Platform.IOS ? 0.21 : 1,\n }),\n [platform],\n );\n\n const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n const [watching, setWatching] = React.useState(false);\n const [refreshing, setRefreshing] = React.useState(false);\n const [canRefresh, setCanRefresh] = React.useState(false);\n const [touchDown, setTouchDown] = React.useState(false);\n const prevTouchDown = usePrevious(touchDown);\n\n const touchY = React.useRef(0);\n const [contentShift, setContentShift] = React.useState(0);\n const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n const onWindowTouchMove = (event: Event) => {\n if (refreshing) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);\n\n const resetRefreshingState = React.useCallback(() => {\n setWatching(false);\n setCanRefresh(false);\n setRefreshing(false);\n setSpinnerY(initParams.start);\n setSpinnerProgress(0);\n setContentShift(0);\n }, [initParams]);\n\n const onRefreshingFinish = React.useCallback(() => {\n if (!touchDown) {\n resetRefreshingState();\n }\n }, [touchDown, resetRefreshingState]);\n\n const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(\n onRefreshingFinish,\n 1000,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n onRefreshingFinish();\n }\n }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n useIsomorphicLayoutEffect(() => {\n if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n clearWaitFetchingTimeout();\n }\n }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);\n\n const runRefreshing = React.useCallback(() => {\n if (!refreshing && onRefresh) {\n // cleanup if the consumer does not start fetching in 1s\n setWaitFetchingTimeout();\n\n setRefreshing(true);\n setSpinnerY((prevSpinnerY) =>\n platform === Platform.IOS ? prevSpinnerY : initParams.refreshing,\n );\n\n onRefresh();\n runTapticImpactOccurred('light');\n }\n }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);\n\n useIsomorphicLayoutEffect(() => {\n if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n if (!refreshing && canRefresh) {\n runRefreshing();\n } else if (refreshing && !isFetching) {\n // only iOS can start refresh before gesture end\n resetRefreshingState();\n } else {\n // refreshing && isFetching: refresh in progress\n // OR !refreshing && !canRefresh: pull was not strong enough\n setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n setSpinnerProgress(0);\n setContentShift(0);\n }\n }\n }, [\n initParams,\n prevIsFetching,\n isFetching,\n onRefreshingFinish,\n prevTouchDown,\n touchDown,\n refreshing,\n canRefresh,\n runRefreshing,\n ]);\n\n const onTouchStart = (e: TouchEvent) => {\n if (refreshing) {\n cancelEvent(e);\n }\n setTouchDown(true);\n };\n\n const onTouchMove = (e: TouchEvent) => {\n const { isY, shiftY } = e;\n const { start, max } = initParams;\n const pageYOffset = scroll?.getScroll().y;\n\n if (watching && touchDown) {\n cancelEvent(e);\n\n const { positionMultiplier, maxY } = initParams;\n\n const shift = Math.max(0, shiftY - touchY.current);\n\n const currentY = clamp(start + shift positionMultiplier, start, maxY);\n const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n setSpinnerY(currentY);\n setSpinnerProgress(clamp(progress, 0, 80));\n setCanRefresh(progress > 80);\n setContentShift((currentY + 10) * 2.3);\n\n if (progress > 85 && !refreshing && platform === Platform.IOS) {\n runRefreshing();\n }\n } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n cancelEvent(e);\n\n touchY.current = shiftY;\n setWatching(true);\n setSpinnerY(start);\n setSpinnerProgress(0);\n }\n };\n\n const onTouchEnd = () => {\n setWatching(false);\n setTouchDown(false);\n };\n\n const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n let contentTransform = '';\n\n if (platform === Platform.IOS && refreshing && !touchDown) {\n contentTransform = 'translate3d(0, 100px, 0)';\n } else if (platform === Platform.IOS && (contentShift \|\| refreshing)) {\n contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n }\n\n return (\n <TouchRootContext.Provider value={true}>\n <Touch\n {...restProps}\n onStart={onTouchStart}\n onMove={onTouchMove}\n onEnd={onTouchEnd}\n className={classNames(\n styles['PullToRefresh'],\n platform === Platform.IOS && styles['PullToRefresh--ios'],\n watching && styles['PullToRefresh--watching'],\n refreshing && styles['PullToRefresh--refreshing'],\n className,\n )}\n >\n <FixedLayout className={styles['PullToRefresh__controls']}>\n <PullToRefreshSpinner\n style={{\n transform: spinnerTransform,\n WebkitTransform: spinnerTransform,\n opacity: watching \|\| refreshing \|\| canRefresh ? 1 : 0,\n }}\n on={refreshing}\n progress={refreshing ? undefined : spinnerProgress}\n />\n </FixedLayout>\n\n <div\n className={styles['PullToRefresh__content']}\n style={{\n transform: contentTransform,\n WebkitTransform: contentTransform,\n }}\n >\n {children}\n </div>\n </Touch>\n </TouchRootContext.Provider>\n );\n};\n"],"mappings":"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"}

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

@@ -8,16 +8,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.Radio = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
-var _Tappable = require("../Tappable/Tappable");
 var _vkjs = require("@vkontakte/vkjs");
-var _platform = require("../../lib/platform");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _usePlatform = require("../../hooks/usePlatform");
-var _VisuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
+var _adaptivity = require("../../lib/adaptivity");
+var _platform = require("../../lib/platform");
+var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _VisuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
 var _excluded = ["children", "description", "style", "className", "getRootRef"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiRadio--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiRadio--sizeY-compact");
 var RadioIcon = function RadioIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2.default)({
     xmlns: "http://www.w3.org/2000/svg",
@@ -50,11 +54,12 @@ var Radio = function Radio(_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;
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, {
     Component: "label",
     style: style,
-    className: (0, _vkjs.classNames)("vkuiRadio", (0, _getSizeYClassName.getSizeYClassName)("vkuiRadio", sizeY), className),
+    className: (0, _vkjs.classNames)("vkuiRadio", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], className),
     activeEffectDelay: platform === _platform.Platform.IOS ? 100 : _Tappable.ACTIVE_EFFECT_DELAY,
     disabled: restProps.disabled,
     getRootRef: getRootRef

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","names":["RadioIcon","props","Radio","children","description","style","className","getRootRef","restProps","platform","usePlatform","useAdaptivity","sizeY","classNames","~~getSizeYClassName~~","Platform","IOS","ACTIVE_EFFECT_DELAY","disabled","hasReactNode"],"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~ACTIVE_EFFECT_DELAY~~, ~~Tappable~~ } from '~~../Tappable~~/~~Tappable~~';\nimport { ~~classNames,~~ ~~hasReactNode~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~Platform~~ } from '../../~~lib~~/~~platform~~';\nimport { ~~HasRef,~~ ~~HasRootRef~~ } from '../../~~types~~';\nimport { ~~usePlatform~~ } from '../../~~hooks~~/~~usePlatform~~';\nimport { ~~VisuallyHiddenInput~~ } from '~~../VisuallyHiddenInput/VisuallyHiddenInput~~';\nimport { ~~Footnote~~ } from '../~~Typography~~/~~Footnote/Footnote~~';\nimport { ~~getSizeYClassName~~ } from '~~../../helpers~~/~~getSizeYClassName~~';\nimport { ~~useAdaptivity~~ } from '~~../../hooks~~/~~useAdaptivity~~';\nimport styles from './Radio.module.css';\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n </svg>\n );\n};\n\nexport interface RadioProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLLabelElement> {\n description?: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n children,\n description,\n style,\n className,\n getRootRef,\n ...restProps\n}: RadioProps) => {\n const platform = usePlatform();\n const { sizeY } = useAdaptivity();\n\n return (\n <Tappable\n Component=\"label\"\n style={style}\n className={classNames(styles['Radio'], ~~getSizeYClassName(styles~~[~~'Radio'~~]~~, sizeY),~~ className)}\n activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n disabled={restProps.disabled}\n getRootRef={getRootRef}\n >\n <VisuallyHiddenInput {...restProps} className={styles['Radio__input']} type=\"radio\" />\n <div className={styles['Radio__container']}>\n <RadioIcon className={styles['Radio__icon']} />\n <div className={styles['Radio__content']}>\n <div className={styles['Radio__children']}>{children}</div>\n {hasReactNode(description) && (\n <Footnote className={styles['Radio__description']}>{description}</Footnote>\n )}\n </div>\n </div>\n </Tappable>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAAA;AACA;AACA;AACA;~~AAEA;~~AACA;AACA;AACA;AACA;~~AAA0D~~;~~AAG1D~~,IAAMA,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAAoC,EAAK;EAC1D,oBACE;IAAK,KAAK,EAAC,4BAA4B;IAAC,OAAO,EAAC,WAAW;IAAC;EAAW,GAAKA,KAAK,gBAC/E;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,MAAM,EAAC,cAAc;IAAC,WAAW,EAAC,GAAG;IAAC,IAAI,EAAC;EAAM,EAAG,eACnF;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,KAAK;IAAC,SAAS,kBAAuB;IAAC,IAAI,EAAC;EAAc,EAAG,CACnF;AAEV,CAAC;AASD;AACA;AACA;AACO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,~~qBAAkB~~,IAAAC,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EAEb~~,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEP,KAAM;IACb,SAAS,EAAE,IAAAQ,gBAAU,~~eAAkB~~,~~IAAAC~~,~~oCAAiB~~,~~eAAkBF~~,KAAK,CAAC,~~EAAEN~~,SAAS,~~CAAE~~;~~IAC7F~~,iBAAiB,EAAEG,QAAQ,KAAKM,kBAAQ,CAACC,GAAG,GAAG,GAAG,GAAGC,6BAAoB;IACzE,QAAQ,EAAET,SAAS,CAACU,QAAS;IAC7B,UAAU,EAAEX;EAAW,gBAEvB,oBAAC,wCAAmB,6BAAKC,SAAS;IAAE,SAAS,oBAAyB;IAAC,IAAI,EAAC;EAAO,GAAG,eACtF;IAAK,SAAS;EAA6B,gBACzC,oBAAC,SAAS;IAAC,SAAS;EAAwB,EAAG,eAC/C;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA4B,GAAEL,QAAQ,CAAO,EAC1D,IAAAgB,kBAAY,EAACf,WAAW,CAAC,iBACxB,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,CACF,CACG;AAEf,CAAC;AAAC"}
1	+ {"version":3,"file":"Radio.js","names":["sizeYClassNames","none","SizeType","COMPACT","RadioIcon","props","Radio","children","description","style","className","getRootRef","restProps","platform","usePlatform","useAdaptivity","sizeY","classNames","REGULAR","Platform","IOS","ACTIVE_EFFECT_DELAY","disabled","hasReactNode"],"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n none: styles['Radio--sizeY-none'],\n [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n </svg>\n );\n};\n\nexport interface RadioProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLLabelElement> {\n description?: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n children,\n description,\n style,\n className,\n getRootRef,\n ...restProps\n}: RadioProps) => {\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n Component=\"label\"\n style={style}\n className={classNames(\n styles['Radio'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n disabled={restProps.disabled}\n getRootRef={getRootRef}\n >\n <VisuallyHiddenInput {...restProps} className={styles['Radio__input']} type=\"radio\" />\n <div className={styles['Radio__container']}>\n <RadioIcon className={styles['Radio__icon']} />\n <div className={styles['Radio__content']}>\n <div className={styles['Radio__children']}>{children}</div>\n {hasReactNode(description) && (\n <Footnote className={styles['Radio__description']}>{description}</Footnote>\n )}\n </div>\n </div>\n </Tappable>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAiF;AAGjF,IAAMA,eAAe;EACnBC,IAAI;AAA6B,GAChCC,oBAAQ,CAACC,OAAO,6BAClB;AAED,IAAMC,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAAoC,EAAK;EAC1D,oBACE;IAAK,KAAK,EAAC,4BAA4B;IAAC,OAAO,EAAC,WAAW;IAAC;EAAW,GAAKA,KAAK,gBAC/E;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,MAAM,EAAC,cAAc;IAAC,WAAW,EAAC,GAAG;IAAC,IAAI,EAAC;EAAM,EAAG,eACnF;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,KAAK;IAAC,SAAS,kBAAuB;IAAC,IAAI,EAAC;EAAc,EAAG,CACnF;AAEV,CAAC;AASD;AACA;AACA;AACO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEP,KAAM;IACb,SAAS,EAAE,IAAAQ,gBAAU,eAEnBD,KAAK,KAAKd,oBAAQ,CAACgB,OAAO,IAAIlB,eAAe,CAACgB,KAAK,CAAC,EACpDN,SAAS,CACT;IACF,iBAAiB,EAAEG,QAAQ,KAAKM,kBAAQ,CAACC,GAAG,GAAG,GAAG,GAAGC,6BAAoB;IACzE,QAAQ,EAAET,SAAS,CAACU,QAAS;IAC7B,UAAU,EAAEX;EAAW,gBAEvB,oBAAC,wCAAmB,6BAAKC,SAAS;IAAE,SAAS,oBAAyB;IAAC,IAAI,EAAC;EAAO,GAAG,eACtF;IAAK,SAAS;EAA6B,gBACzC,oBAAC,SAAS;IAAC,SAAS;EAAwB,EAAG,eAC/C;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA4B,GAAEL,QAAQ,CAAO,EAC1D,IAAAgB,kBAAY,EAACf,WAAW,CAAC,iBACxB,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,CACF,CACG;AAEf,CAAC;AAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RangeSlider.js","names":["RangeSlider","onChange","min","max","defaultValue","step","props","isControlled","value","undefined","React","useState","localValue","setValue","start","end","useMemo","clamp","handleChange","useCallback","nextValue","event","disabled"],"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { ~~UniversalSlider,~~ ~~UniversalSliderProps~~ } from '~~./UniversalSlider~~';\nimport { ~~TouchEvent~~ } from '~~../Touch/Touch~~';\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n onChange,\n min = 0,\n max = 100,\n defaultValue = [min, max],\n step = 0,\n ...props\n}: RangeSliderProps) => {\n const isControlled = props.value !== undefined;\n\n const [localValue, setValue] = React.useState(defaultValue);\n const [start, end] = props.value \|\| localValue;\n const value = React.useMemo(\n () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n [end, max, min, start],\n );\n\n const handleChange: RangeSliderProps['onChange'] = React.useCallback(\n (nextValue: Value, event: TouchEvent) => {\n if (props.disabled \|\| (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n return;\n }\n !isControlled && setValue(nextValue);\n onChange && onChange(nextValue, event);\n },\n [props.disabled, value, isControlled, onChange],\n );\n\n return (\n <UniversalSlider\n {...props}\n value={value}\n onChange={handleChange}\n min={min}\n max={max}\n step={step}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;~~AACA~~;AAA0E;~~AAM1E~~;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAG,CAACF,GAAG,EAAEC,GAAG,CAAC;IAAA,iBACzBE,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACLC,KAAK;EAER,IAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,KAAKC,SAAS;EAE9C,sBAA+BC,KAAK,CAACC,QAAQ,CAACP,YAAY,CAAC;IAAA;IAApDQ,UAAU;IAAEC,QAAQ;EAC3B,YAAqBP,KAAK,CAACE,KAAK,IAAII,UAAU;IAAA;IAAvCE,KAAK;IAAEC,GAAG;EACjB,IAAMP,KAAK,GAAGE,KAAK,CAACM,OAAO,CACzB;IAAA,OAAM,CAAC,IAAAC,WAAK,EAACH,KAAK,EAAEZ,GAAG,EAAEC,GAAG,CAAC,EAAE,IAAAc,WAAK,EAACF,GAAG,EAAEb,GAAG,EAAEC,GAAG,CAAC,CAAC;EAAA,CAAS,EAC7D,CAACY,GAAG,EAAEZ,GAAG,EAAED,GAAG,EAAEY,KAAK,CAAC,CACvB;EAED,IAAMI,YAA0C,GAAGR,KAAK,CAACS,WAAW,CAClE,UAACC,SAAgB,EAAEC,KAAiB,EAAK;IACvC,IAAIf,KAAK,CAACgB,QAAQ,IAAKd,KAAK,CAAC,CAAC,CAAC,KAAKY,SAAS,CAAC,CAAC,CAAC,IAAIZ,KAAK,CAAC,CAAC,CAAC,KAAKY,SAAS,CAAC,CAAC,CAAE,EAAE;MAC9E;IACF;IACA,CAACb,YAAY,IAAIM,QAAQ,CAACO,SAAS,CAAC;IACpCnB,QAAQ,IAAIA,QAAQ,CAACmB,SAAS,EAAEC,KAAK,CAAC;EACxC,CAAC,EACD,CAACf,KAAK,CAACgB,QAAQ,EAAEd,KAAK,EAAED,YAAY,EAAEN,QAAQ,CAAC,CAChD;EAED,oBACE,oBAAC,gCAAe,6BACVK,KAAK;IACT,KAAK,EAAEE,KAAM;IACb,QAAQ,EAAEU,YAAa;IACvB,GAAG,EAAEhB,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAEE;EAAK,GACX;AAEN,CAAC;AAAC"}
1	+ {"version":3,"file":"RangeSlider.js","names":["RangeSlider","onChange","min","max","defaultValue","step","props","isControlled","value","undefined","React","useState","localValue","setValue","start","end","useMemo","clamp","handleChange","useCallback","nextValue","event","disabled"],"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { TouchEvent } from '../Touch/Touch';\nimport { UniversalSlider, UniversalSliderProps } from './UniversalSlider';\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n onChange,\n min = 0,\n max = 100,\n defaultValue = [min, max],\n step = 0,\n ...props\n}: RangeSliderProps) => {\n const isControlled = props.value !== undefined;\n\n const [localValue, setValue] = React.useState(defaultValue);\n const [start, end] = props.value \|\| localValue;\n const value = React.useMemo(\n () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n [end, max, min, start],\n );\n\n const handleChange: RangeSliderProps['onChange'] = React.useCallback(\n (nextValue: Value, event: TouchEvent) => {\n if (props.disabled \|\| (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n return;\n }\n !isControlled && setValue(nextValue);\n onChange && onChange(nextValue, event);\n },\n [props.disabled, value, isControlled, onChange],\n );\n\n return (\n <UniversalSlider\n {...props}\n value={value}\n onChange={handleChange}\n min={min}\n max={max}\n step={step}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AAA0E;AAK1E;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAG,CAACF,GAAG,EAAEC,GAAG,CAAC;IAAA,iBACzBE,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACLC,KAAK;EAER,IAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,KAAKC,SAAS;EAE9C,sBAA+BC,KAAK,CAACC,QAAQ,CAACP,YAAY,CAAC;IAAA;IAApDQ,UAAU;IAAEC,QAAQ;EAC3B,YAAqBP,KAAK,CAACE,KAAK,IAAII,UAAU;IAAA;IAAvCE,KAAK;IAAEC,GAAG;EACjB,IAAMP,KAAK,GAAGE,KAAK,CAACM,OAAO,CACzB;IAAA,OAAM,CAAC,IAAAC,WAAK,EAACH,KAAK,EAAEZ,GAAG,EAAEC,GAAG,CAAC,EAAE,IAAAc,WAAK,EAACF,GAAG,EAAEb,GAAG,EAAEC,GAAG,CAAC,CAAC;EAAA,CAAS,EAC7D,CAACY,GAAG,EAAEZ,GAAG,EAAED,GAAG,EAAEY,KAAK,CAAC,CACvB;EAED,IAAMI,YAA0C,GAAGR,KAAK,CAACS,WAAW,CAClE,UAACC,SAAgB,EAAEC,KAAiB,EAAK;IACvC,IAAIf,KAAK,CAACgB,QAAQ,IAAKd,KAAK,CAAC,CAAC,CAAC,KAAKY,SAAS,CAAC,CAAC,CAAC,IAAIZ,KAAK,CAAC,CAAC,CAAC,KAAKY,SAAS,CAAC,CAAC,CAAE,EAAE;MAC9E;IACF;IACA,CAACb,YAAY,IAAIM,QAAQ,CAACO,SAAS,CAAC;IACpCnB,QAAQ,IAAIA,QAAQ,CAACmB,SAAS,EAAEC,KAAK,CAAC;EACxC,CAAC,EACD,CAACf,KAAK,CAACgB,QAAQ,EAAEd,KAAK,EAAED,YAAY,EAAEN,QAAQ,CAAC,CAChD;EAED,oBACE,oBAAC,gCAAe,6BACVK,KAAK;IACT,KAAK,EAAEE,KAAM;IACb,QAAQ,EAAEU,YAAa;IACvB,GAAG,EAAEhB,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAEE;EAAK,GACX;AAEN,CAAC;AAAC"}

package/dist/cjs/components/RangeSlider/UniversalSlider.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TouchEvent } from '../Touch/Touch';
 import { HasRootRef } from '../../types';
+import { TouchEvent } from '../Touch/Touch';
 export declare type UniversalValue = [number | null, number];
 export interface UniversalSliderProps<Value> extends HasRootRef<HTMLDivElement>, Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
     min?: number;

package/dist/cjs/components/RangeSlider/UniversalSlider.js CHANGED Viewed

@@ -9,14 +9,18 @@ exports.UniversalSlider = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
-var _Touch = require("../Touch/Touch");
 var _vkjs = require("@vkontakte/vkjs");
 var _math = require("../../helpers/math");
-var _useExternRef = require("../../hooks/useExternRef");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
+var _useExternRef = require("../../hooks/useExternRef");
+var _adaptivity = require("../../lib/adaptivity");
+var _Touch = require("../Touch/Touch");
 var _excluded = ["min", "max", "step", "value", "defaultValue", "onChange", "getRootRef", "disabled", "className"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiSlider--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiSlider--sizeY-compact");
 var UniversalSlider = function UniversalSlider(_ref) {
   var _ref$min = _ref.min,
     min = _ref$min === void 0 ? 0 : _ref$min,
@@ -44,7 +48,8 @@ var UniversalSlider = function UniversalSlider(_ref) {
   var thumbStart = React.useRef(null);
   var thumbEnd = React.useRef(null);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var offsetToValue = function offsetToValue(absolute) {
     return (0, _math.rescale)(absolute, [0, gesture.containerWidth], [min, max], {
       step: step
@@ -118,7 +123,7 @@ var UniversalSlider = function UniversalSlider(_ref) {
     onMove: onMove,
     onEnd: onEnd
   }, {
-    className: (0, _vkjs.classNames)("vkuiSlider", (0, _getSizeYClassName.getSizeYClassName)("vkuiSlider", sizeY), disabled && "vkuiSlider--disabled", className)
+    className: (0, _vkjs.classNames)("vkuiSlider", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], disabled && "vkuiSlider--disabled", className)
   }), /*#__PURE__*/React.createElement("div", {
     ref: container,
     className: "vkuiSlider__in"

package/dist/cjs/components/RangeSlider/UniversalSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UniversalSlider.js","names":["UniversalSlider","min","max","step","value","defaultValue","onChange","getRootRef","disabled","className","restProps","start","end","isRange","gesture","React","useRef","dragging","startX","containerWidth","current","container","useExternRef","thumbStart","thumbEnd","useAdaptivity","sizeY","offsetToValue","absolute","rescale","updateRange","nextValue","snapDirection","pos","target","Math","abs","onStart","e","boundingRect","getBoundingClientRect","width","absolutePosition","left","originalEvent","stopPropagation","onMove","shiftX","preventDefault","onEnd","toPercent","v","draggerStyle","join","classNames","~~getSizeYClassName~~"],"sources":["../../../../src/components/RangeSlider/UniversalSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~Touch,~~ ~~TouchEvent, TouchEventHandler~~ } from '~~../Touch~~/~~Touch~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~HasRootRef~~ } from '../../~~types~~';\nimport { ~~rescale~~ } from '../../~~helpers~~/~~math~~';\nimport { ~~useExternRef~~ } from '../../~~hooks~~/~~useExternRef~~';\nimport { ~~useAdaptivity~~ } from '../../~~hooks/useAdaptivity~~';\nimport { ~~getSizeYClassName~~ } from '~~../../helpers~~/~~getSizeYClassName~~';\nimport styles from '../Slider/Slider.module.css';\n\nexport type UniversalValue = [number \| null, number];\n\nexport interface UniversalSliderProps<Value>\n extends HasRootRef<HTMLDivElement>,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'value' \| 'defaultValue' \| 'onChange'> {\n min?: number;\n max?: number;\n step?: number;\n value?: Value;\n defaultValue?: Value;\n disabled?: boolean;\n onChange?(value: Value, e: TouchEvent): void;\n}\n\nexport const UniversalSlider = ({\n min = 0,\n max = 100,\n step,\n value = [0, 0],\n defaultValue,\n onChange,\n getRootRef,\n disabled,\n className,\n ...restProps\n}: UniversalSliderProps<UniversalValue>) => {\n const [start, end] = value;\n const isRange = start != null;\n const gesture = React.useRef({\n dragging: false as false \| 'start' \| 'end',\n startX: 0,\n containerWidth: 0,\n }).current;\n const container = useExternRef(getRootRef);\n const thumbStart = React.useRef<HTMLDivElement>(null);\n const thumbEnd = React.useRef<HTMLDivElement>(null);\n const { sizeY } = useAdaptivity();\n\n const offsetToValue = (absolute: number) => {\n return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });\n };\n\n const updateRange = (nextValue: number): UniversalValue => {\n if (start == null) {\n return [null, nextValue];\n }\n\n const { dragging } = gesture;\n if (dragging === 'start') {\n if (nextValue > end) {\n // \"перехватиться\", если перетянули за конец\n gesture.dragging = 'end';\n return [end, nextValue];\n }\n return [nextValue, end];\n }\n if (dragging === 'end') {\n if (nextValue < start) {\n // \"перехватиться\", если перетянули за начало\n gesture.dragging = 'start';\n return [nextValue, start];\n }\n return [start, nextValue];\n }\n\n return value;\n };\n\n const snapDirection = (pos: number, target: EventTarget \| null) => {\n if (target === thumbStart.current) {\n return 'start';\n }\n if (target === thumbEnd.current) {\n return 'end';\n }\n return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';\n };\n\n const onStart: TouchEventHandler = (e: TouchEvent) => {\n const boundingRect = container.current?.getBoundingClientRect();\n gesture.containerWidth = boundingRect?.width ?? 0;\n\n const absolutePosition = e.startX - (boundingRect?.left ?? 0);\n const pos = offsetToValue(absolutePosition);\n gesture.dragging = snapDirection(pos, e.originalEvent.target);\n gesture.startX = absolutePosition;\n\n onChange?.(updateRange(pos), e);\n e.originalEvent.stopPropagation();\n };\n\n const onMove: TouchEventHandler = (e: TouchEvent) => {\n onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX \|\| 0))), e);\n\n e.originalEvent.stopPropagation();\n e.originalEvent.preventDefault();\n };\n\n const onEnd: TouchEventHandler = (e) => {\n gesture.dragging = false;\n e.originalEvent.stopPropagation();\n };\n\n const toPercent = (v: number) => ((v - min) / (max - min)) * 100;\n const draggerStyle = isRange\n ? {\n width: `${toPercent(end) - toPercent(start ?? 0)}%`,\n left: `${toPercent(start ?? 0)}%`,\n }\n : {\n width: `${toPercent(end)}%`,\n };\n\n return (\n <Touch\n data-value={isRange ? value.join(',') : value}\n {...restProps}\n {...(disabled ? {} : { onStart, onMove, onEnd })}\n className={classNames(\n styles['Slider'],\n ~~getSizeYClassName(styles~~[~~'Slider'~~]~~, sizeY)~~,\n disabled && styles['Slider--disabled'],\n className,\n )}\n >\n <div ref={container} className={styles['Slider__in']}>\n <div className={styles['Slider__dragger']} style={draggerStyle}>\n {isRange && (\n <span\n className={classNames(styles['Slider__thumb'], styles['Slider__thumb--start'])}\n ref={thumbStart}\n />\n )}\n <span\n className={classNames(styles['Slider__thumb'], styles['Slider__thumb--end'])}\n ref={thumbEnd}\n />\n </div>\n </div>\n </Touch>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;~~AAAA;AACA;AACA;~~AAEA;~~AACA;AACA;AACA;~~AAAoE~~;~~AAiB7D~~,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAWgB;EAAA,oBAV1CC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IACTC,IAAI,QAAJA,IAAI;IAAA,kBACJC,KAAK;IAALA,KAAK,2BAAG,CAAC,CAAC,EAAE,CAAC,CAAC;IACdC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,0CAAqBN,KAAK;IAAnBO,KAAK;IAAEC,GAAG;EACjB,IAAMC,OAAO,GAAGF,KAAK,IAAI,IAAI;EAC7B,IAAMG,OAAO,GAAGC,KAAK,CAACC,MAAM,CAAC;IAC3BC,QAAQ,EAAE,KAAgC;IAC1CC,MAAM,EAAE,CAAC;IACTC,cAAc,EAAE;EAClB,CAAC,CAAC,CAACC,OAAO;EACV,IAAMC,SAAS,GAAG,IAAAC,0BAAY,EAACf,UAAU,CAAC;EAC1C,IAAMgB,UAAU,GAAGR,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EACrD,IAAMQ,QAAQ,GAAGT,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EACnD,~~qBAAkB~~,IAAAS,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EAEb~~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~~gBAEnB~~,~~IAAAC~~,~~oCAAiB~~,~~gBAAmB7B~~,KAAK,CAAC,~~EAC1ClB~~,QAAQ,0BAA8B,EACtCC,SAAS;EACT,iBAEF;IAAK,GAAG,EAAEY,SAAU;IAAC,SAAS;EAAuB,gBACnD;IAAK,SAAS,uBAA4B;IAAC,KAAK,EAAE+B;EAAa,GAC5DvC,OAAO,iBACN;IACE,SAAS,EAAE,IAAAyC,gBAAU,kDAA0D;IAC/E,GAAG,EAAE/B;EAAW,EAEnB,eACD;IACE,SAAS,EAAE,IAAA+B,gBAAU,gDAAwD;IAC7E,GAAG,EAAE9B;EAAS,EACd,CACE,CACF,CACA;AAEZ,CAAC;AAAC"}
1	+ {"version":3,"file":"UniversalSlider.js","names":["sizeYClassNames","none","SizeType","COMPACT","UniversalSlider","min","max","step","value","defaultValue","onChange","getRootRef","disabled","className","restProps","start","end","isRange","gesture","React","useRef","dragging","startX","containerWidth","current","container","useExternRef","thumbStart","thumbEnd","useAdaptivity","sizeY","offsetToValue","absolute","rescale","updateRange","nextValue","snapDirection","pos","target","Math","abs","onStart","e","boundingRect","getBoundingClientRect","width","absolutePosition","left","originalEvent","stopPropagation","onMove","shiftX","preventDefault","onEnd","toPercent","v","draggerStyle","join","classNames","REGULAR"],"sources":["../../../../src/components/RangeSlider/UniversalSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { rescale } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Touch, TouchEvent, TouchEventHandler } from '../Touch/Touch';\nimport styles from '../Slider/Slider.module.css';\n\nconst sizeYClassNames = {\n none: styles['Slider--sizeY-none'],\n [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport type UniversalValue = [number \| null, number];\n\nexport interface UniversalSliderProps<Value>\n extends HasRootRef<HTMLDivElement>,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'value' \| 'defaultValue' \| 'onChange'> {\n min?: number;\n max?: number;\n step?: number;\n value?: Value;\n defaultValue?: Value;\n disabled?: boolean;\n onChange?(value: Value, e: TouchEvent): void;\n}\n\nexport const UniversalSlider = ({\n min = 0,\n max = 100,\n step,\n value = [0, 0],\n defaultValue,\n onChange,\n getRootRef,\n disabled,\n className,\n ...restProps\n}: UniversalSliderProps<UniversalValue>) => {\n const [start, end] = value;\n const isRange = start != null;\n const gesture = React.useRef({\n dragging: false as false \| 'start' \| 'end',\n startX: 0,\n containerWidth: 0,\n }).current;\n const container = useExternRef(getRootRef);\n const thumbStart = React.useRef<HTMLDivElement>(null);\n const thumbEnd = React.useRef<HTMLDivElement>(null);\n const { sizeY = 'none' } = useAdaptivity();\n\n const offsetToValue = (absolute: number) => {\n return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });\n };\n\n const updateRange = (nextValue: number): UniversalValue => {\n if (start == null) {\n return [null, nextValue];\n }\n\n const { dragging } = gesture;\n if (dragging === 'start') {\n if (nextValue > end) {\n // \"перехватиться\", если перетянули за конец\n gesture.dragging = 'end';\n return [end, nextValue];\n }\n return [nextValue, end];\n }\n if (dragging === 'end') {\n if (nextValue < start) {\n // \"перехватиться\", если перетянули за начало\n gesture.dragging = 'start';\n return [nextValue, start];\n }\n return [start, nextValue];\n }\n\n return value;\n };\n\n const snapDirection = (pos: number, target: EventTarget \| null) => {\n if (target === thumbStart.current) {\n return 'start';\n }\n if (target === thumbEnd.current) {\n return 'end';\n }\n return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';\n };\n\n const onStart: TouchEventHandler = (e: TouchEvent) => {\n const boundingRect = container.current?.getBoundingClientRect();\n gesture.containerWidth = boundingRect?.width ?? 0;\n\n const absolutePosition = e.startX - (boundingRect?.left ?? 0);\n const pos = offsetToValue(absolutePosition);\n gesture.dragging = snapDirection(pos, e.originalEvent.target);\n gesture.startX = absolutePosition;\n\n onChange?.(updateRange(pos), e);\n e.originalEvent.stopPropagation();\n };\n\n const onMove: TouchEventHandler = (e: TouchEvent) => {\n onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX \|\| 0))), e);\n\n e.originalEvent.stopPropagation();\n e.originalEvent.preventDefault();\n };\n\n const onEnd: TouchEventHandler = (e) => {\n gesture.dragging = false;\n e.originalEvent.stopPropagation();\n };\n\n const toPercent = (v: number) => ((v - min) / (max - min)) * 100;\n const draggerStyle = isRange\n ? {\n width: `${toPercent(end) - toPercent(start ?? 0)}%`,\n left: `${toPercent(start ?? 0)}%`,\n }\n : {\n width: `${toPercent(end)}%`,\n };\n\n return (\n <Touch\n data-value={isRange ? value.join(',') : value}\n {...restProps}\n {...(disabled ? {} : { onStart, onMove, onEnd })}\n className={classNames(\n styles['Slider'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n disabled && styles['Slider--disabled'],\n className,\n )}\n >\n <div ref={container} className={styles['Slider__in']}>\n <div className={styles['Slider__dragger']} style={draggerStyle}>\n {isRange && (\n <span\n className={classNames(styles['Slider__thumb'], styles['Slider__thumb--start'])}\n ref={thumbStart}\n />\n )}\n <span\n className={classNames(styles['Slider__thumb'], styles['Slider__thumb--end'])}\n ref={thumbEnd}\n />\n </div>\n </div>\n </Touch>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsE;AAGtE,IAAMA,eAAe;EACnBC,IAAI;AAA8B,GACjCC,oBAAQ,CAACC,OAAO,8BAClB;AAgBM,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAWgB;EAAA,oBAV1CC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IACTC,IAAI,QAAJA,IAAI;IAAA,kBACJC,KAAK;IAALA,KAAK,2BAAG,CAAC,CAAC,EAAE,CAAC,CAAC;IACdC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,0CAAqBN,KAAK;IAAnBO,KAAK;IAAEC,GAAG;EACjB,IAAMC,OAAO,GAAGF,KAAK,IAAI,IAAI;EAC7B,IAAMG,OAAO,GAAGC,KAAK,CAACC,MAAM,CAAC;IAC3BC,QAAQ,EAAE,KAAgC;IAC1CC,MAAM,EAAE,CAAC;IACTC,cAAc,EAAE;EAClB,CAAC,CAAC,CAACC,OAAO;EACV,IAAMC,SAAS,GAAG,IAAAC,0BAAY,EAACf,UAAU,CAAC;EAC1C,IAAMgB,UAAU,GAAGR,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EACrD,IAAMQ,QAAQ,GAAGT,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EACnD,qBAA2B,IAAAS,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,QAAgB,EAAK;IAC1C,OAAO,IAAAC,aAAO,EAACD,QAAQ,EAAE,CAAC,CAAC,EAAEd,OAAO,CAACK,cAAc,CAAC,EAAE,CAAClB,GAAG,EAAEC,GAAG,CAAC,EAAE;MAAEC,IAAI,EAAJA;IAAK,CAAC,CAAC;EAC7E,CAAC;EAED,IAAM2B,WAAW,GAAG,SAAdA,WAAW,CAAIC,SAAiB,EAAqB;IACzD,IAAIpB,KAAK,IAAI,IAAI,EAAE;MACjB,OAAO,CAAC,IAAI,EAAEoB,SAAS,CAAC;IAC1B;IAEA,IAAQd,QAAQ,GAAKH,OAAO,CAApBG,QAAQ;IAChB,IAAIA,QAAQ,KAAK,OAAO,EAAE;MACxB,IAAIc,SAAS,GAAGnB,GAAG,EAAE;QACnB;QACAE,OAAO,CAACG,QAAQ,GAAG,KAAK;QACxB,OAAO,CAACL,GAAG,EAAEmB,SAAS,CAAC;MACzB;MACA,OAAO,CAACA,SAAS,EAAEnB,GAAG,CAAC;IACzB;IACA,IAAIK,QAAQ,KAAK,KAAK,EAAE;MACtB,IAAIc,SAAS,GAAGpB,KAAK,EAAE;QACrB;QACAG,OAAO,CAACG,QAAQ,GAAG,OAAO;QAC1B,OAAO,CAACc,SAAS,EAAEpB,KAAK,CAAC;MAC3B;MACA,OAAO,CAACA,KAAK,EAAEoB,SAAS,CAAC;IAC3B;IAEA,OAAO3B,KAAK;EACd,CAAC;EAED,IAAM4B,aAAa,GAAG,SAAhBA,aAAa,CAAIC,GAAW,EAAEC,MAA0B,EAAK;IACjE,IAAIA,MAAM,KAAKX,UAAU,CAACH,OAAO,EAAE;MACjC,OAAO,OAAO;IAChB;IACA,IAAIc,MAAM,KAAKV,QAAQ,CAACJ,OAAO,EAAE;MAC/B,OAAO,KAAK;IACd;IACA,OAAOe,IAAI,CAACC,GAAG,CAAC,CAACzB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,IAAIsB,GAAG,CAAC,IAAIE,IAAI,CAACC,GAAG,CAACxB,GAAG,GAAGqB,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK;EAC9E,CAAC;EAED,IAAMI,OAA0B,GAAG,SAA7BA,OAA0B,CAAIC,CAAa,EAAK;IAAA;IACpD,IAAMC,YAAY,yBAAGlB,SAAS,CAACD,OAAO,uDAAjB,mBAAmBoB,qBAAqB,EAAE;IAC/D1B,OAAO,CAACK,cAAc,0BAAGoB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEE,KAAK,qEAAI,CAAC;IAEjD,IAAMC,gBAAgB,GAAGJ,CAAC,CAACpB,MAAM,0BAAIqB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEI,IAAI,mEAAI,CAAC,CAAC;IAC7D,IAAMV,GAAG,GAAGN,aAAa,CAACe,gBAAgB,CAAC;IAC3C5B,OAAO,CAACG,QAAQ,GAAGe,aAAa,CAACC,GAAG,EAAEK,CAAC,CAACM,aAAa,CAACV,MAAM,CAAC;IAC7DpB,OAAO,CAACI,MAAM,GAAGwB,gBAAgB;IAEjCpC,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGwB,WAAW,CAACG,GAAG,CAAC,EAAEK,CAAC,CAAC;IAC/BA,CAAC,CAACM,aAAa,CAACC,eAAe,EAAE;EACnC,CAAC;EAED,IAAMC,MAAyB,GAAG,SAA5BA,MAAyB,CAAIR,CAAa,EAAK;IACnDhC,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGwB,WAAW,CAACH,aAAa,CAACb,OAAO,CAACI,MAAM,IAAIoB,CAAC,CAACS,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,EAAET,CAAC,CAAC;IAE3EA,CAAC,CAACM,aAAa,CAACC,eAAe,EAAE;IACjCP,CAAC,CAACM,aAAa,CAACI,cAAc,EAAE;EAClC,CAAC;EAED,IAAMC,KAAwB,GAAG,SAA3BA,KAAwB,CAAIX,CAAC,EAAK;IACtCxB,OAAO,CAACG,QAAQ,GAAG,KAAK;IACxBqB,CAAC,CAACM,aAAa,CAACC,eAAe,EAAE;EACnC,CAAC;EAED,IAAMK,SAAS,GAAG,SAAZA,SAAS,CAAIC,CAAS;IAAA,OAAM,CAACA,CAAC,GAAGlD,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG;EAAA;EAChE,IAAMmD,YAAY,GAAGvC,OAAO,GACxB;IACE4B,KAAK,YAAKS,SAAS,CAACtC,GAAG,CAAC,GAAGsC,SAAS,CAACvC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,MAAG;IACnDgC,IAAI,YAAKO,SAAS,CAACvC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC;EAChC,CAAC,GACD;IACE8B,KAAK,YAAKS,SAAS,CAACtC,GAAG,CAAC;EAC1B,CAAC;EAEL,oBACE,oBAAC,YAAK;IACJ,cAAYC,OAAO,GAAGT,KAAK,CAACiD,IAAI,CAAC,GAAG,CAAC,GAAGjD;EAAM,GAC1CM,SAAS,EACRF,QAAQ,GAAG,CAAC,CAAC,GAAG;IAAE6B,OAAO,EAAPA,OAAO;IAAES,MAAM,EAANA,MAAM;IAAEG,KAAK,EAALA;EAAM,CAAC;IAC/C,SAAS,EAAE,IAAAK,gBAAU,gBAEnB5B,KAAK,KAAK5B,oBAAQ,CAACyD,OAAO,IAAI3D,eAAe,CAAC8B,KAAK,CAAC,EACpDlB,QAAQ,0BAA8B,EACtCC,SAAS;EACT,iBAEF;IAAK,GAAG,EAAEY,SAAU;IAAC,SAAS;EAAuB,gBACnD;IAAK,SAAS,uBAA4B;IAAC,KAAK,EAAE+B;EAAa,GAC5DvC,OAAO,iBACN;IACE,SAAS,EAAE,IAAAyC,gBAAU,kDAA0D;IAC/E,GAAG,EAAE/B;EAAW,EAEnB,eACD;IACE,SAAS,EAAE,IAAA+B,gBAAU,gDAAwD;IAC7E,GAAG,EAAE9B;EAAS,EACd,CACE,CACF,CACA;AAEZ,CAAC;AAAC"}

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

@@ -10,18 +10,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
+var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
-var _utils = require("../../lib/utils");
 var _useExternRef = require("../../hooks/useExternRef");
+var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _usePlatform = require("../../hooks/usePlatform");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
-var _icons = require("@vkontakte/icons");
+var _utils = require("../../lib/utils");
 var _IconButton = require("../IconButton/IconButton");
-var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _Tappable = require("../Tappable/Tappable");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
@@ -109,8 +107,6 @@ var Removable = function Removable(_ref2) {
     className = _ref2.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
   var ref = (0, _useExternRef.useExternRef)(getRootRef);
   var onRemoveClick = function onRemoveClick(e) {
     e.preventDefault();
@@ -119,7 +115,7 @@ var Removable = function Removable(_ref2) {
   var removePlaceholderString = (0, _utils.getTitleFromChildren)(removePlaceholder);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     ref: ref,
-    className: (0, _vkjs.classNames)("vkuiRemovable", platform === _platform.Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], (0, _getSizeYClassName.getSizeYClassName)("vkuiRemovable", sizeY), className)
+    className: (0, _vkjs.classNames)("vkuiRemovable", platform === _platform.Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], className)
   }), platform !== _platform.Platform.IOS && /*#__PURE__*/React.createElement("div", {
     className: "vkuiRemovable__content"
   }, children, /*#__PURE__*/React.createElement(_IconButton.IconButton, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Removable.js","names":["RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","useDOM","window","removeButtonRef","React","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","classNames","Removable","getRootRef","noop","align","className","restProps","platform","usePlatform","~~useAdaptivity","sizeY","~~ref","useExternRef","onRemoveClick","preventDefault","getTitleFromChildren","Platform","IOS","styles"~~,"getSizeYClassName"~~],"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~HasRootRef~~ } from '~~../../types~~';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { ~~getTitleFromChildren~~ } from '../../~~lib~~/~~utils~~';\nimport { ~~useExternRef~~ } from '../../hooks/~~useExternRef~~';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ~~useAdaptivity~~ } from '../../~~hooks~~/~~useAdaptivity~~';\nimport { ~~useDOM~~ } from '../../lib/~~dom~~';\nimport { ~~Platform~~ } from '../../lib/~~platform~~';\nimport { ~~Icon24Cancel~~ } from '~~@vkontakte/icons~~';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ~~useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport {~~ Tappable } from '../Tappable/Tappable';\nimport ~~{ getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport~~ styles from './Removable.module.css';\n\nexport interface RemovableProps {\n /*\n iOS only. Текст в выезжающей кнопке для удаления ячейки.\n /\n removePlaceholder?: React.ReactNode;\n /\n Коллбэк срабатывает при клике на контрол удаления.\n /\n onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement \| null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n removePlaceholderString?: string;\n children?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RemovableIos\n /\nconst RemovableIos = ({\n onRemove,\n removePlaceholder,\n removePlaceholderString,\n children,\n}: RemovableIosOwnProps) => {\n const { window } = useDOM();\n\n const removeButtonRef = React.useRef<HTMLElement>(null);\n const disabledRef = React.useRef(true);\n const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n useGlobalEventListener(\n window,\n 'click',\n () => {\n if (removeOffset > 0) {\n updateRemoveOffset(0);\n }\n },\n { capture: true },\n );\n\n const onRemoveTransitionEnd = () => {\n if (removeOffset > 0) {\n removeButtonRef?.current?.focus();\n } else {\n disabledRef.current = true;\n }\n };\n\n const onRemoveActivateClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!removeButtonRef.current) {\n return;\n }\n const { offsetWidth } = removeButtonRef.current;\n disabledRef.current = false;\n updateRemoveOffset(offsetWidth);\n };\n\n return (\n <div\n className={styles['Removable__content']}\n style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n onTransitionEnd={onRemoveTransitionEnd}\n >\n <IconButton\n hasActive={false}\n hasHover={false}\n aria-label={removePlaceholderString}\n className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n onClick={onRemoveActivateClick}\n disabled={removeOffset > 0}\n >\n <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n </IconButton>\n {children}\n\n <span className={styles['Removable__offset']} aria-hidden />\n\n <Tappable\n Component=\"button\"\n hasActive={false}\n hasHover={false}\n disabled={disabledRef.current}\n getRootRef={removeButtonRef}\n className={styles['Removable__remove']}\n onClick={onRemove}\n >\n <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n </Tappable>\n </div>\n );\n};\n\ninterface RemovableOwnProps\n extends React.AllHTMLAttributes<HTMLElement>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n /\n Расположение кнопки удаления.\n /\n align?: 'start' \| 'center';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n getRootRef,\n children,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n align = 'center',\n className,\n ...restProps\n}: RemovableOwnProps) => {\n const platform = usePlatform();\n ~~const { sizeY } = useAdaptivity();\n~~\n const ref = useExternRef(getRootRef);\n\n const onRemoveClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onRemove(e);\n };\n\n const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n return (\n <div\n {...restProps}\n ref={ref}\n className={classNames(\n styles['Removable'],\n platform === Platform.IOS && styles['Removable--ios'],\n styles[`Removable--align-${align}`],\n ~~getSizeYClassName(styles['Removable'], sizeY),\n~~ className,\n )}\n >\n {platform !== Platform.IOS && (\n <div className={styles['Removable__content']}>\n {children}\n\n <IconButton\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n className={styles['Removable__action']}\n onClick={onRemoveClick}\n aria-label={removePlaceholderString}\n >\n <Icon24Cancel role=\"presentation\" />\n </IconButton>\n\n <span className={styles['Removable__offset']} aria-hidden />\n </div>\n )}\n\n {platform === Platform.IOS && (\n <RemovableIos\n onRemove={onRemoveClick}\n removePlaceholder={removePlaceholder}\n removePlaceholderString={removePlaceholderString}\n >\n {children}\n </RemovableIos>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;~~AAEA;~~AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AACA~~;AACA;~~AACA~~;~~AAAoE~~;~~AAmBpE;~~AACA;AACA;AACA,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAKU;EAAA,IAJ1BC,QAAQ,QAARA,QAAQ;IACRC,iBAAiB,QAAjBA,iBAAiB;IACjBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,QAAQ,QAARA,QAAQ;EAER,cAAmB,IAAAC,WAAM,GAAE;IAAnBC,MAAM,WAANA,MAAM;EAEd,IAAMC,eAAe,GAAGC,KAAK,CAACC,MAAM,CAAc,IAAI,CAAC;EACvD,IAAMC,WAAW,GAAGF,KAAK,CAACC,MAAM,CAAC,IAAI,CAAC;EACtC,sBAA2CD,KAAK,CAACG,QAAQ,CAAC,CAAC,CAAC;IAAA;IAArDC,YAAY;IAAEC,kBAAkB;EAEvC,IAAAC,8CAAsB,EACpBR,MAAM,EACN,OAAO,EACP,YAAM;IACJ,IAAIM,YAAY,GAAG,CAAC,EAAE;MACpBC,kBAAkB,CAAC,CAAC,CAAC;IACvB;EACF,CAAC,EACD;IAAEE,OAAO,EAAE;EAAK,CAAC,CAClB;EAED,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,GAAS;IAClC,IAAIJ,YAAY,GAAG,CAAC,EAAE;MAAA;MACpBL,eAAe,aAAfA,eAAe,gDAAfA,eAAe,CAAEU,OAAO,0DAAxB,sBAA0BC,KAAK,EAAE;IACnC,CAAC,MAAM;MACLR,WAAW,CAACO,OAAO,GAAG,IAAI;IAC5B;EACF,CAAC;EAED,IAAME,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIC,CAAmB,EAAK;IACrDA,CAAC,CAACC,eAAe,EAAE;IACnB,IAAI,CAACd,eAAe,CAACU,OAAO,EAAE;MAC5B;IACF;IACA,IAAQK,WAAW,GAAKf,eAAe,CAACU,OAAO,CAAvCK,WAAW;IACnBZ,WAAW,CAACO,OAAO,GAAG,KAAK;IAC3BJ,kBAAkB,CAACS,WAAW,CAAC;EACjC,CAAC;EAED,oBACE;IACE,SAAS,0BAA+B;IACxC,KAAK,EAAE;MAAEC,SAAS,wBAAiBX,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,CAAC;IAAM,CAAE;IAC5D,eAAe,EAAEI;EAAsB,gBAEvC,oBAAC,sBAAU;IACT,SAAS,EAAE,KAAM;IACjB,QAAQ,EAAE,KAAM;IAChB,cAAYb,uBAAwB;IACpC,SAAS,EAAE,IAAAqB,gBAAU,mDAA2D;IAChF,OAAO,EAAEL,qBAAsB;IAC/B,QAAQ,EAAEP,YAAY,GAAG;EAAE,gBAE3B;IAAG,SAAS,4BAAiC;IAAC,IAAI,EAAC;EAAc,EAAG,CACzD,EACZR,QAAQ,eAET;IAAM,SAAS,yBAA8B;IAAC;EAAW,EAAG,eAE5D,oBAAC,kBAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAE,KAAM;IACjB,QAAQ,EAAE,KAAM;IAChB,QAAQ,EAAEM,WAAW,CAACO,OAAQ;IAC9B,UAAU,EAAEV,eAAgB;IAC5B,SAAS,yBAA8B;IACvC,OAAO,EAAEN;EAAS,gBAElB;IAAM,SAAS;EAAiC,GAAEC,iBAAiB,CAAQ,CAClE,CACP;AAEV,CAAC;AAYD;AACA;AACA;AACO,IAAMuB,SAAS,GAAG,SAAZA,SAAS,QAQG;EAAA,IAPvBC,UAAU,SAAVA,UAAU;IACVtB,QAAQ,SAARA,QAAQ;IAAA,uBACRH,QAAQ;IAARA,QAAQ,+BAAG0B,UAAI;IAAA,8BACfzB,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAAA,oBAC7B0B,KAAK;IAALA,KAAK,4BAAG,QAAQ;IAChBC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;~~EAC9B~~,~~qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,~~IAAMC,GAAG,GAAG,IAAAC,0BAAY,~~EAACV~~,UAAU,CAAC;EAEpC,~~IAAMW~~,aAAa,GAAG,SAAhBA,aAAa,~~CAAIjB~~,CAAmB,EAAK;IAC7CA,CAAC,~~CAACkB~~,cAAc,EAAE;~~IAClBrC~~,QAAQ,CAACmB,CAAC,CAAC;EACb,CAAC;EAED,IAAMjB,uBAA+B,GAAG,~~IAAAoC~~,2BAAoB,~~EAACrC~~,iBAAiB,CAAC;EAE/E,oBACE,sDACM4B,SAAS;IACb,GAAG,~~EAAEK~~,GAAI;IACT,SAAS,EAAE,~~IAAAX~~,gBAAU,mBAEnBO,QAAQ,~~KAAKS~~,kBAAQ,CAACC,GAAG,wBAA4B,EACrDC,MAAM,~~4BAAqBd~~,KAAK,EAAG,~~EACnC~~,~~IAAAe,oCAAiB,mBAAsBT,KAAK,CAAC,EAC7CL,~~SAAS;EACT,IAEDE,QAAQ,~~KAAKS~~,kBAAQ,CAACC,GAAG,iBACxB;IAAK,SAAS;EAA+B,~~GAC1CrC~~,QAAQ,eAET,oBAAC,sBAAU;IACT,UAAU,EAAC,SAAS;IACpB,SAAS,EAAC,SAAS;IACnB,SAAS,yBAA8B;IACvC,OAAO,~~EAAEiC~~,aAAc;IACvB,~~cAAYlC~~;EAAwB,gBAEpC,oBAAC,mBAAY;IAAC,IAAI,EAAC;EAAc,EAAG,CACzB,eAEb;IAAM,SAAS,yBAA8B;IAAC;EAAW,EAAG,CAE/D,EAEA4B,QAAQ,~~KAAKS~~,kBAAQ,CAACC,GAAG,iBACxB,oBAAC,YAAY;IACX,QAAQ,EAAEJ,aAAc;IACxB,iBAAiB,~~EAAEnC~~,iBAAkB;IACrC,uBAAuB,EAAEC;EAAwB,GAEhDC,QAAQ,CAEZ,CACG;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"Removable.js","names":["RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","useDOM","window","removeButtonRef","React","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","classNames","Removable","getRootRef","noop","align","className","restProps","platform","usePlatform","ref","useExternRef","onRemoveClick","preventDefault","getTitleFromChildren","Platform","IOS","styles"],"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n /*\n iOS only. Текст в выезжающей кнопке для удаления ячейки.\n /\n removePlaceholder?: React.ReactNode;\n /\n Коллбэк срабатывает при клике на контрол удаления.\n /\n onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement \| null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n removePlaceholderString?: string;\n children?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RemovableIos\n /\nconst RemovableIos = ({\n onRemove,\n removePlaceholder,\n removePlaceholderString,\n children,\n}: RemovableIosOwnProps) => {\n const { window } = useDOM();\n\n const removeButtonRef = React.useRef<HTMLElement>(null);\n const disabledRef = React.useRef(true);\n const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n useGlobalEventListener(\n window,\n 'click',\n () => {\n if (removeOffset > 0) {\n updateRemoveOffset(0);\n }\n },\n { capture: true },\n );\n\n const onRemoveTransitionEnd = () => {\n if (removeOffset > 0) {\n removeButtonRef?.current?.focus();\n } else {\n disabledRef.current = true;\n }\n };\n\n const onRemoveActivateClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!removeButtonRef.current) {\n return;\n }\n const { offsetWidth } = removeButtonRef.current;\n disabledRef.current = false;\n updateRemoveOffset(offsetWidth);\n };\n\n return (\n <div\n className={styles['Removable__content']}\n style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n onTransitionEnd={onRemoveTransitionEnd}\n >\n <IconButton\n hasActive={false}\n hasHover={false}\n aria-label={removePlaceholderString}\n className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n onClick={onRemoveActivateClick}\n disabled={removeOffset > 0}\n >\n <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n </IconButton>\n {children}\n\n <span className={styles['Removable__offset']} aria-hidden />\n\n <Tappable\n Component=\"button\"\n hasActive={false}\n hasHover={false}\n disabled={disabledRef.current}\n getRootRef={removeButtonRef}\n className={styles['Removable__remove']}\n onClick={onRemove}\n >\n <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n </Tappable>\n </div>\n );\n};\n\ninterface RemovableOwnProps\n extends React.AllHTMLAttributes<HTMLElement>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n /\n Расположение кнопки удаления.\n /\n align?: 'start' \| 'center';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n getRootRef,\n children,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n align = 'center',\n className,\n ...restProps\n}: RemovableOwnProps) => {\n const platform = usePlatform();\n\n const ref = useExternRef(getRootRef);\n\n const onRemoveClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onRemove(e);\n };\n\n const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n return (\n <div\n {...restProps}\n ref={ref}\n className={classNames(\n styles['Removable'],\n platform === Platform.IOS && styles['Removable--ios'],\n styles[`Removable--align-${align}`],\n className,\n )}\n >\n {platform !== Platform.IOS && (\n <div className={styles['Removable__content']}>\n {children}\n\n <IconButton\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n className={styles['Removable__action']}\n onClick={onRemoveClick}\n aria-label={removePlaceholderString}\n >\n <Icon24Cancel role=\"presentation\" />\n </IconButton>\n\n <span className={styles['Removable__offset']} aria-hidden />\n </div>\n )}\n\n {platform === Platform.IOS && (\n <RemovableIos\n onRemove={onRemoveClick}\n removePlaceholder={removePlaceholder}\n removePlaceholderString={removePlaceholderString}\n >\n {children}\n </RemovableIos>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAgD;AAmBhD;AACA;AACA;AACA,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAKU;EAAA,IAJ1BC,QAAQ,QAARA,QAAQ;IACRC,iBAAiB,QAAjBA,iBAAiB;IACjBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,QAAQ,QAARA,QAAQ;EAER,cAAmB,IAAAC,WAAM,GAAE;IAAnBC,MAAM,WAANA,MAAM;EAEd,IAAMC,eAAe,GAAGC,KAAK,CAACC,MAAM,CAAc,IAAI,CAAC;EACvD,IAAMC,WAAW,GAAGF,KAAK,CAACC,MAAM,CAAC,IAAI,CAAC;EACtC,sBAA2CD,KAAK,CAACG,QAAQ,CAAC,CAAC,CAAC;IAAA;IAArDC,YAAY;IAAEC,kBAAkB;EAEvC,IAAAC,8CAAsB,EACpBR,MAAM,EACN,OAAO,EACP,YAAM;IACJ,IAAIM,YAAY,GAAG,CAAC,EAAE;MACpBC,kBAAkB,CAAC,CAAC,CAAC;IACvB;EACF,CAAC,EACD;IAAEE,OAAO,EAAE;EAAK,CAAC,CAClB;EAED,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,GAAS;IAClC,IAAIJ,YAAY,GAAG,CAAC,EAAE;MAAA;MACpBL,eAAe,aAAfA,eAAe,gDAAfA,eAAe,CAAEU,OAAO,0DAAxB,sBAA0BC,KAAK,EAAE;IACnC,CAAC,MAAM;MACLR,WAAW,CAACO,OAAO,GAAG,IAAI;IAC5B;EACF,CAAC;EAED,IAAME,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIC,CAAmB,EAAK;IACrDA,CAAC,CAACC,eAAe,EAAE;IACnB,IAAI,CAACd,eAAe,CAACU,OAAO,EAAE;MAC5B;IACF;IACA,IAAQK,WAAW,GAAKf,eAAe,CAACU,OAAO,CAAvCK,WAAW;IACnBZ,WAAW,CAACO,OAAO,GAAG,KAAK;IAC3BJ,kBAAkB,CAACS,WAAW,CAAC;EACjC,CAAC;EAED,oBACE;IACE,SAAS,0BAA+B;IACxC,KAAK,EAAE;MAAEC,SAAS,wBAAiBX,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,CAAC;IAAM,CAAE;IAC5D,eAAe,EAAEI;EAAsB,gBAEvC,oBAAC,sBAAU;IACT,SAAS,EAAE,KAAM;IACjB,QAAQ,EAAE,KAAM;IAChB,cAAYb,uBAAwB;IACpC,SAAS,EAAE,IAAAqB,gBAAU,mDAA2D;IAChF,OAAO,EAAEL,qBAAsB;IAC/B,QAAQ,EAAEP,YAAY,GAAG;EAAE,gBAE3B;IAAG,SAAS,4BAAiC;IAAC,IAAI,EAAC;EAAc,EAAG,CACzD,EACZR,QAAQ,eAET;IAAM,SAAS,yBAA8B;IAAC;EAAW,EAAG,eAE5D,oBAAC,kBAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAE,KAAM;IACjB,QAAQ,EAAE,KAAM;IAChB,QAAQ,EAAEM,WAAW,CAACO,OAAQ;IAC9B,UAAU,EAAEV,eAAgB;IAC5B,SAAS,yBAA8B;IACvC,OAAO,EAAEN;EAAS,gBAElB;IAAM,SAAS;EAAiC,GAAEC,iBAAiB,CAAQ,CAClE,CACP;AAEV,CAAC;AAYD;AACA;AACA;AACO,IAAMuB,SAAS,GAAG,SAAZA,SAAS,QAQG;EAAA,IAPvBC,UAAU,SAAVA,UAAU;IACVtB,QAAQ,SAARA,QAAQ;IAAA,uBACRH,QAAQ;IAARA,QAAQ,+BAAG0B,UAAI;IAAA,8BACfzB,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAAA,oBAC7B0B,KAAK;IAALA,KAAK,4BAAG,QAAQ;IAChBC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,GAAG,GAAG,IAAAC,0BAAY,EAACR,UAAU,CAAC;EAEpC,IAAMS,aAAa,GAAG,SAAhBA,aAAa,CAAIf,CAAmB,EAAK;IAC7CA,CAAC,CAACgB,cAAc,EAAE;IAClBnC,QAAQ,CAACmB,CAAC,CAAC;EACb,CAAC;EAED,IAAMjB,uBAA+B,GAAG,IAAAkC,2BAAoB,EAACnC,iBAAiB,CAAC;EAE/E,oBACE,sDACM4B,SAAS;IACb,GAAG,EAAEG,GAAI;IACT,SAAS,EAAE,IAAAT,gBAAU,mBAEnBO,QAAQ,KAAKO,kBAAQ,CAACC,GAAG,wBAA4B,EACrDC,MAAM,4BAAqBZ,KAAK,EAAG,EACnCC,SAAS;EACT,IAEDE,QAAQ,KAAKO,kBAAQ,CAACC,GAAG,iBACxB;IAAK,SAAS;EAA+B,GAC1CnC,QAAQ,eAET,oBAAC,sBAAU;IACT,UAAU,EAAC,SAAS;IACpB,SAAS,EAAC,SAAS;IACnB,SAAS,yBAA8B;IACvC,OAAO,EAAE+B,aAAc;IACvB,cAAYhC;EAAwB,gBAEpC,oBAAC,mBAAY;IAAC,IAAI,EAAC;EAAc,EAAG,CACzB,eAEb;IAAM,SAAS,yBAA8B;IAAC;EAAW,EAAG,CAE/D,EAEA4B,QAAQ,KAAKO,kBAAQ,CAACC,GAAG,iBACxB,oBAAC,YAAY;IACX,QAAQ,EAAEJ,aAAc;IACxB,iBAAiB,EAAEjC,iBAAkB;IACrC,uBAAuB,EAAEC;EAAwB,GAEhDC,QAAQ,CAEZ,CACG;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}

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

@@ -33,7 +33,7 @@ export interface RichCellProps extends TappableProps {
      */
     before?: React.ReactNode;
     /**
-     * Иконка 24 или текст.
+     * Иконка 28 или текст.
      */
     after?: React.ReactNode;
     /**
@@ -52,4 +52,7 @@ export interface RichCellProps extends TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
  */
-export declare const RichCell: ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps) => JSX.Element;
+export declare const RichCell: {
+    ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps): JSX.Element;
+    Icon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+};

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

@@ -8,13 +8,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.RichCell = 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 _vkjs = require("@vkontakte/vkjs");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _adaptivity = require("../../lib/adaptivity");
 var _Tappable = require("../Tappable/Tappable");
 var _Subhead = require("../Typography/Subhead/Subhead");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _RichCellIcon = require("./RichCellIcon/RichCellIcon");
 var _excluded = ["subhead", "children", "text", "caption", "before", "after", "afterCaption", "bottom", "actions", "multiline", "className"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiRichCell--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiRichCell--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
  */
@@ -32,9 +37,10 @@ var RichCell = function RichCell(_ref) {
     className = _ref.className,
     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;
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", (0, _getSizeYClassName.getSizeYClassName)("vkuiRichCell", sizeY), className)
+    className: (0, _vkjs.classNames)("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], className)
   }), before && /*#__PURE__*/React.createElement("div", {
     className: "vkuiRichCell__before"
   }, before), /*#__PURE__*/React.createElement("div", {
@@ -66,4 +72,5 @@ var RichCell = function RichCell(_ref) {
   }, actions)));
 };
 exports.RichCell = RichCell;
+RichCell.Icon = _RichCellIcon.RichCellIcon;
 //# sourceMappingURL=RichCell.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichCell.js","names":["RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","useAdaptivity","sizeY","classNames","~~getSizeYClassName~~"],"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~TappableProps,~~ ~~Tappable~~ } from '~~../Tappable~~/~~Tappable~~';\nimport { ~~Subhead~~ } from '../~~Typography~~/~~Subhead/Subhead~~';\nimport { ~~getSizeYClassName~~ } from '~~../../helpers~~/~~getSizeYClassName~~';\nimport { ~~useAdaptivity~~ } from '~~../../hooks~~/~~useAdaptivity~~';\nimport styles from './RichCell.module.css';\n\nexport interface RichCellProps extends TappableProps {\n /*\n Контейнер для текста над `children`.\n /\n subhead?: React.ReactNode;\n /\n Контейнер для текста под `children`.\n /\n text?: React.ReactNode;\n /\n Контейнер для текста под `text`.\n /\n caption?: React.ReactNode;\n /\n Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n /\n bottom?: React.ReactNode;\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n \n - `mode=\"primary\" size=\"s\"`\n * - `mode=\"secondary\" size=\"s\"`\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `mode=\"horizontal\" gap=\"s\" stretched`\n /\n actions?: React.ReactNode;\n /\n `<Avatar size={40\|48\|72} />`.\n /\n before?: React.ReactNode;\n /\n Иконка 24 или текст.\n /\n after?: React.ReactNode;\n /\n Текст под `after`.\n /\n afterCaption?: React.ReactNode;\n /\n Убирает анимацию нажатия.\n /\n disabled?: boolean;\n /\n Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n /\n multiline?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n subhead,\n children,\n text,\n caption,\n before,\n after,\n afterCaption,\n bottom,\n actions,\n multiline,\n className,\n ...restProps\n}: RichCellProps) => {\n const { sizeY } = useAdaptivity();\n\n return (\n <Tappable\n {...restProps}\n className={classNames(\n styles['RichCell'],\n !multiline && styles['RichCell--text-ellipsis'],\n ~~getSizeYClassName(styles~~[~~'RichCell'~~]~~, sizeY)~~,\n className,\n )}\n >\n {before && <div className={styles['RichCell__before']}>{before}</div>}\n <div className={styles['RichCell__in']}>\n <div className={styles['RichCell__content']}>\n <div className={styles['RichCell__content-before']}>\n {subhead && (\n <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n {subhead}\n </Subhead>\n )}\n <div className={styles['RichCell__children']}>{children}</div>\n {text && <div className={styles['RichCell__text']}>{text}</div>}\n {caption && (\n <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n {caption}\n </Subhead>\n )}\n </div>\n {(after \|\| afterCaption) && (\n <div className={styles['RichCell__content-after']}>\n {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n {afterCaption && (\n <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n )}\n </div>\n )}\n </div>\n {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n </div>\n </Tappable>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAAA;AACA;AACA;AACA;AACA;AACA;~~AAA0D~~;~~AAqD1D~~;AACA;AACA;AACO,~~IAAMA~~,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,~~qBAAkB~~,IAAAC,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EAEb~~,oBACE,oBAAC,kBAAQ,6BACHF,SAAS;IACb,SAAS,EAAE,IAAAG,gBAAU,kBAEnB,CAACL,SAAS,iCAAqC,EAC/C,~~IAAAM~~,~~oCAAiB~~,~~kBAAqBF~~,KAAK,CAAC,~~EAC5CH~~,SAAS;EACT,IAEDN,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAAqC,GAChDJ,OAAO,iBACN,oBAAC,gBAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,eACD;IAAK,SAAS;EAA+B,GAAEC,QAAQ,CAAO,EAC7DC,IAAI,iBAAI;IAAK,SAAS;EAA2B,GAAEA,IAAI,CAAO,EAC9DC,OAAO,iBACN,oBAAC,gBAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,CACG,EACL,CAACE,KAAK,IAAIC,YAAY,kBACrB;IAAK,SAAS;EAAoC,GAC/CD,KAAK,iBAAI;IAAK,SAAS;EAAqC,GAAEA,KAAK,CAAO,EAC1EC,YAAY,iBACX;IAAK,SAAS;EAAoC,GAAEA,YAAY,CACjE,CAEJ,CACG,EACLC,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,EACpEC,OAAO,iBAAI;IAAK,SAAS;EAA8B,GAAEA,OAAO,CAAO,CACpE,CACG;AAEf,CAAC;AAAC"}
1	+ {"version":3,"file":"RichCell.js","names":["sizeYClassNames","none","SizeType","COMPACT","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","useAdaptivity","sizeY","classNames","REGULAR","Icon","RichCellIcon"],"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n none: styles['RichCell--sizeY-none'],\n [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n /*\n Контейнер для текста над `children`.\n /\n subhead?: React.ReactNode;\n /\n Контейнер для текста под `children`.\n /\n text?: React.ReactNode;\n /\n Контейнер для текста под `text`.\n /\n caption?: React.ReactNode;\n /\n Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n /\n bottom?: React.ReactNode;\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n \n - `mode=\"primary\" size=\"s\"`\n * - `mode=\"secondary\" size=\"s\"`\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `mode=\"horizontal\" gap=\"s\" stretched`\n /\n actions?: React.ReactNode;\n /\n `<Avatar size={40\|48\|72} />`.\n /\n before?: React.ReactNode;\n /\n Иконка 28 или текст.\n /\n after?: React.ReactNode;\n /\n Текст под `after`.\n /\n afterCaption?: React.ReactNode;\n /\n Убирает анимацию нажатия.\n /\n disabled?: boolean;\n /\n Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n /\n multiline?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n subhead,\n children,\n text,\n caption,\n before,\n after,\n afterCaption,\n bottom,\n actions,\n multiline,\n className,\n ...restProps\n}: RichCellProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n {...restProps}\n className={classNames(\n styles['RichCell'],\n !multiline && styles['RichCell--text-ellipsis'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n >\n {before && <div className={styles['RichCell__before']}>{before}</div>}\n <div className={styles['RichCell__in']}>\n <div className={styles['RichCell__content']}>\n <div className={styles['RichCell__content-before']}>\n {subhead && (\n <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n {subhead}\n </Subhead>\n )}\n <div className={styles['RichCell__children']}>{children}</div>\n {text && <div className={styles['RichCell__text']}>{text}</div>}\n {caption && (\n <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n {caption}\n </Subhead>\n )}\n </div>\n {(after \|\| afterCaption) && (\n <div className={styles['RichCell__content-after']}>\n {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n {afterCaption && (\n <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n )}\n </div>\n )}\n </div>\n {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n </div>\n </Tappable>\n );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA2D;AAG3D,IAAMA,eAAe;EACnBC,IAAI;AAAgC,GACnCC,oBAAQ,CAACC,OAAO,gCAClB;AAoDD;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,kBAAQ,6BACHF,SAAS;IACb,SAAS,EAAE,IAAAG,gBAAU,kBAEnB,CAACL,SAAS,iCAAqC,EAC/CI,KAAK,KAAKhB,oBAAQ,CAACkB,OAAO,IAAIpB,eAAe,CAACkB,KAAK,CAAC,EACpDH,SAAS;EACT,IAEDN,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAAqC,GAChDJ,OAAO,iBACN,oBAAC,gBAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,eACD;IAAK,SAAS;EAA+B,GAAEC,QAAQ,CAAO,EAC7DC,IAAI,iBAAI;IAAK,SAAS;EAA2B,GAAEA,IAAI,CAAO,EAC9DC,OAAO,iBACN,oBAAC,gBAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,CACG,EACL,CAACE,KAAK,IAAIC,YAAY,kBACrB;IAAK,SAAS;EAAoC,GAC/CD,KAAK,iBAAI;IAAK,SAAS;EAAqC,GAAEA,KAAK,CAAO,EAC1EC,YAAY,iBACX;IAAK,SAAS;EAAoC,GAAEA,YAAY,CACjE,CAEJ,CACG,EACLC,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,EACpEC,OAAO,iBAAI;IAAK,SAAS;EAA8B,GAAEA,OAAO,CAAO,CACpE,CACG;AAEf,CAAC;AAAC;AAEFT,QAAQ,CAACiB,IAAI,GAAGC,0BAAY"}

package/dist/cjs/components/RichCell/RichCellIcon/RichCellIcon.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import * as React from 'react';
2	+ export declare const RichCellIcon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/dist/cjs/components/RichCell/RichCellIcon/RichCellIcon.js ADDED Viewed

@@ -0,0 +1,23 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichCellIcon = 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 _excluded = ["children", "className"];
+var RichCellIcon = function RichCellIcon(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
+    className: (0, _vkjs.classNames)("vkuiRichCellIcon", className)
+  }), children);
+};
+exports.RichCellIcon = RichCellIcon;
+//# sourceMappingURL=RichCellIcon.js.map

package/dist/cjs/components/RichCell/RichCellIcon/RichCellIcon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RichCellIcon.js","names":["RichCellIcon","children","className","restProps","classNames"],"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n children,\n className,\n ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAGtC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAImB;EAAA,IAH1CC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,sDAASA,SAAS;IAAE,SAAS,EAAE,IAAAC,gBAAU,sBAAyBF,SAAS;EAAE,IAC1ED,QAAQ,CACL;AAEV,CAAC;AAAC"}

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

@@ -9,8 +9,8 @@ exports.RichTooltip = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _HoverPopper = require("../HoverPopper/HoverPopper");
 var _vkjs = require("@vkontakte/vkjs");
+var _HoverPopper = require("../HoverPopper/HoverPopper");
 var _excluded = ["children", "arrow", "appearance", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTooltip.js","names":["RichTooltip","children","arrow","appearance","className","popperProps","classNames","styles"],"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~HoverPopper,~~ ~~HoverPopperProps~~ } from '~~../HoverPopper~~/~~HoverPopper~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n /*\n Стиль отображения подсказки\n /\n appearance?: 'accent' \| 'neutral' \| 'white' \| 'black' \| 'inversion';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n children,\n arrow = true,\n appearance = 'neutral',\n className,\n ...popperProps\n}: RichTooltipProps) => {\n return (\n <HoverPopper\n className={classNames(\n styles['RichTooltip'],\n styles[`RichTooltip--appearance-${appearance}`],\n className,\n )}\n arrow={arrow}\n arrowClassName={styles['RichTooltip__arrow']}\n {...popperProps}\n >\n {children}\n </HoverPopper>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;~~AAA6C~~;~~AAU7C~~;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,IAAI;IAAA,uBACZC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,wBAAW;IACV,SAAS,EAAE,IAAAC,gBAAU,qBAEnBC,MAAM,mCAA4BJ,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,cAAc;EAA+B,GACzCG,WAAW,GAEdJ,QAAQ,CACG;AAElB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"RichTooltip.js","names":["RichTooltip","children","arrow","appearance","className","popperProps","classNames","styles"],"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n /*\n Стиль отображения подсказки\n /\n appearance?: 'accent' \| 'neutral' \| 'white' \| 'black' \| 'inversion';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n children,\n arrow = true,\n appearance = 'neutral',\n className,\n ...popperProps\n}: RichTooltipProps) => {\n return (\n <HoverPopper\n className={classNames(\n styles['RichTooltip'],\n styles[`RichTooltip--appearance-${appearance}`],\n className,\n )}\n arrow={arrow}\n arrowClassName={styles['RichTooltip__arrow']}\n {...popperProps}\n >\n {children}\n </HoverPopper>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA2E;AAU3E;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,IAAI;IAAA,uBACZC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,wBAAW;IACV,SAAS,EAAE,IAAAC,gBAAU,qBAEnBC,MAAM,mCAA4BJ,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,cAAc;EAA+B,GACzCG,WAAW,GAEdJ,QAAQ,CACG;AAElB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -11,17 +11,17 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _usePlatform = require("../../hooks/usePlatform");
+var _useTimeout = require("../../hooks/useTimeout");
+var _dom = require("../../lib/dom");
+var _getNavId = require("../../lib/getNavId");
 var _platform = require("../../lib/platform");
-var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
-var _SplitColContext = require("../SplitCol/SplitColContext");
+var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+var _warnOnce = require("../../lib/warnOnce");
 var _ScrollContext = require("../AppRoot/ScrollContext");
+var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 var _NavTransitionContext = require("../NavTransitionContext/NavTransitionContext");
-var _getNavId = require("../../lib/getNavId");
-var _warnOnce = require("../../lib/warnOnce");
-var _dom = require("../../lib/dom");
-var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _useTimeout = require("../../hooks/useTimeout");
-var _usePlatform = require("../../hooks/usePlatform");
+var _SplitColContext = require("../SplitCol/SplitColContext");
 var _excluded = ["children", "activeView", "onTransition", "nav", "className"];
 var warn = (0, _warnOnce.warnOnce)('Root');