@vkontakte/vkui 5.1.0 → 5.2.0

package/dist/cjs/components/PopperArrow/PopperArrow.js

@@ -1,29 +1,56 @@
 "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.PopperArrow = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+exports.PopperArrow = exports.ARROW_WIDTH = exports.ARROW_PADDING = exports.ARROW_HEIGHT = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _excluded = ["className"];
+var ARROW_PADDING = 10;
+exports.ARROW_PADDING = ARROW_PADDING;
+var ARROW_WIDTH = 20;
+exports.ARROW_WIDTH = ARROW_WIDTH;
+var ARROW_HEIGHT = 8;
+exports.ARROW_HEIGHT = ARROW_HEIGHT;
+function getPositionsStylesByCoords(placement) {
+  var coords = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    x: 0,
+    y: 0
+  };
+  if (placement.startsWith('top')) {
+    return {
+      top: '100%',
+      left: coords.x
+    };
+  } else if (placement.startsWith('right')) {
+    return {
+      top: coords.y,
+      right: 'calc(100% - 6px)'
+    };
+  } else if (placement.startsWith('bottom')) {
+    return {
+      bottom: '100%',
+      left: coords.x
+    };
+  } else {
+    return {
+      top: coords.y,
+      left: 'calc(100% - 6px)'
+    };
+  }
+}
 var PopperArrow = function PopperArrow(_ref) {
-  var style = _ref.style,
-    attributes = _ref.attributes,
-    arrowClassName = _ref.arrowClassName;
-  var _ref2 = attributes !== null && attributes !== void 0 ? attributes : {},
-    arrowWrapperClassName = _ref2.className,
-    restAttributes = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    style: style
-  }, restAttributes, {
-    className: (0, _vkjs.classNames)("vkuiPopperArrow", arrowWrapperClassName),
-    "data-popper-arrow": true
-  }), /*#__PURE__*/React.createElement("svg", {
+  var coords = _ref.coords,
+    arrowClassName = _ref.arrowClassName,
+    placement = _ref.placement,
+    getRootRef = _ref.getRootRef;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: getRootRef,
+    style: getPositionsStylesByCoords(placement, coords),
+    className: "vkuiPopperArrow",
+    "data-placement": placement
+  }, /*#__PURE__*/React.createElement("svg", {
     className: (0, _vkjs.classNames)("vkuiPopperArrow__in", arrowClassName),
     width: "20",
     height: "8",

package/dist/cjs/components/PopperArrow/PopperArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopperArrow.js","names":["PopperArrow","style","attributes","arrowClassName","arrowWrapperClassName","className","restAttributes","classNames"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PopperArrow.module.css';\n\nexport interface PopperArrowProps {\n  style?: React.CSSProperties;\n  attributes?: React.HTMLAttributes<HTMLDivElement> | null;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({ style, attributes, arrowClassName }: PopperArrowProps) => {\n  const { className: arrowWrapperClassName, ...restAttributes } = attributes ?? {};\n  return (\n    <div\n      style={style}\n      {...restAttributes}\n      className={classNames(styles['PopperArrow'], arrowWrapperClassName)}\n      data-popper-arrow={true}\n    >\n      <svg\n        className={classNames(styles['PopperArrow__in'], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAStC,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAAgE;EAAA,IAA1DC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,cAAc,QAAdA,cAAc;EAC7D,YAAgED,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,CAAC;IAA7DE,qBAAqB,SAAhCC,SAAS;IAA4BC,cAAc;EAC3D,oBACE;IACE,KAAK,EAAEL;EAAM,GACTK,cAAc;IAClB,SAAS,EAAE,IAAAC,gBAAU,qBAAwBH,qBAAqB,CAAE;IACpE,qBAAmB;EAAK,iBAExB;IACE,SAAS,EAAE,IAAAG,gBAAU,yBAA4BJ,cAAc,CAAE;IACjE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC;AAAC"}
+{"version":3,"file":"PopperArrow.js","names":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","getPositionsStylesByCoords","placement","coords","x","y","startsWith","top","left","right","bottom","PopperArrow","arrowClassName","getRootRef","classNames"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport type { Placement } from '../../lib/floating';\nimport styles from './PopperArrow.module.css';\n\nexport const ARROW_PADDING = 10;\nexport const ARROW_WIDTH = 20;\nexport const ARROW_HEIGHT = 8;\n\ntype Coords = {\n  x?: number;\n  y?: number;\n};\n\nfunction getPositionsStylesByCoords(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): React.CSSProperties {\n  if (placement.startsWith('top')) {\n    return {\n      top: '100%',\n      left: coords.x,\n    };\n  } else if (placement.startsWith('right')) {\n    return {\n      top: coords.y,\n      right: 'calc(100% - 6px)',\n    };\n  } else if (placement.startsWith('bottom')) {\n    return {\n      bottom: '100%',\n      left: coords.x,\n    };\n  } else {\n    return {\n      top: coords.y,\n      left: 'calc(100% - 6px)',\n    };\n  }\n}\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n}: PopperArrowProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={getPositionsStylesByCoords(placement, coords)}\n      className={styles['PopperArrow']}\n      data-placement={placement}\n    >\n      <svg\n        className={classNames(styles['PopperArrow__in'], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAKO,IAAMA,aAAa,GAAG,EAAE;AAAC;AACzB,IAAMC,WAAW,GAAG,EAAE;AAAC;AACvB,IAAMC,YAAY,GAAG,CAAC;AAAC;AAO9B,SAASC,0BAA0B,CACjCC,SAAoB,EAEC;EAAA,IADrBC,MAAc,uEAAG;IAAEC,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC;EAE/B,IAAIH,SAAS,CAACI,UAAU,CAAC,KAAK,CAAC,EAAE;IAC/B,OAAO;MACLC,GAAG,EAAE,MAAM;MACXC,IAAI,EAAEL,MAAM,CAACC;IACf,CAAC;EACH,CAAC,MAAM,IAAIF,SAAS,CAACI,UAAU,CAAC,OAAO,CAAC,EAAE;IACxC,OAAO;MACLC,GAAG,EAAEJ,MAAM,CAACE,CAAC;MACbI,KAAK,EAAE;IACT,CAAC;EACH,CAAC,MAAM,IAAIP,SAAS,CAACI,UAAU,CAAC,QAAQ,CAAC,EAAE;IACzC,OAAO;MACLI,MAAM,EAAE,MAAM;MACdF,IAAI,EAAEL,MAAM,CAACC;IACf,CAAC;EACH,CAAC,MAAM;IACL,OAAO;MACLG,GAAG,EAAEJ,MAAM,CAACE,CAAC;MACbG,IAAI,EAAE;IACR,CAAC;EACH;AACF;AAQO,IAAMG,WAAW,GAAG,SAAdA,WAAW,OAKA;EAAA,IAJtBR,MAAM,QAANA,MAAM;IACNS,cAAc,QAAdA,cAAc;IACdV,SAAS,QAATA,SAAS;IACTW,UAAU,QAAVA,UAAU;EAEV,oBACE;IACE,GAAG,EAAEA,UAAW;IAChB,KAAK,EAAEZ,0BAA0B,CAACC,SAAS,EAAEC,MAAM,CAAE;IACrD,SAAS,mBAAwB;IACjC,kBAAgBD;EAAU,gBAE1B;IACE,SAAS,EAAE,IAAAY,gBAAU,yBAA4BF,cAAc,CAAE;IACjE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC;AAAC"}

package/dist/cjs/components/Progress/Progress.js

@@ -25,8 +25,10 @@ var Progress = function Progress(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var progress = (0, _math.clamp)(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
+  var title = "".concat(progress, " / ").concat(PROGRESS_MAX_VALUE);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    "aria-valuenow": value
+    "aria-valuenow": value,
+    title: title
   }, restProps, {
     role: "progressbar",
     "aria-valuemin": PROGRESS_MIN_VALUE,

package/dist/cjs/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","names":["PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","clamp","classNames","width"],"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({ value = 0, getRootRef, className, ...restProps }: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n\n  return (\n    <div\n      aria-valuenow={value}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(styles['Progress'], className)}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA6C;AAU7C,IAAMA,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAA0E;EAAA,sBAApEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACvE,IAAMC,QAAQ,GAAG,IAAAC,WAAK,EAACL,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EAErE,oBACE;IACE,iBAAeE;EAAM,GACjBG,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAE,IAAAK,gBAAU,kBAAqBJ,SAAS;EAAE,iBAErD;IAAK,SAAS,oBAAyB;IAAC,KAAK,EAAE;MAAEK,KAAK,YAAKH,QAAQ;IAAI;EAAE,EAAG,CACxE;AAEV,CAAC;AAAC"}
+{"version":3,"file":"Progress.js","names":["PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","clamp","title","classNames","width"],"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({ value = 0, getRootRef, className, ...restProps }: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(styles['Progress'], className)}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA6C;AAU7C,IAAMA,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAA0E;EAAA,sBAApEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACvE,IAAMC,QAAQ,GAAG,IAAAC,WAAK,EAACL,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EACrE,IAAMQ,KAAK,aAAMF,QAAQ,gBAAMN,kBAAkB,CAAE;EAEnD,oBACE;IACE,iBAAeE,KAAM;IACrB,KAAK,EAAEM;EAAM,GACTH,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAE,IAAAM,gBAAU,kBAAqBL,SAAS;EAAE,iBAErD;IAAK,SAAS,oBAAyB;IAAC,KAAK,EAAE;MAAEM,KAAK,YAAKJ,QAAQ;IAAI;EAAE,EAAG,CACxE;AAEV,CAAC;AAAC"}

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

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../lib/platform");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
-var _SplitCol = require("../SplitCol/SplitCol");
+var _SplitColContext = require("../SplitCol/SplitColContext");
 var _ScrollContext = require("../AppRoot/ScrollContext");
 var _NavTransitionContext = require("../NavTransitionContext/NavTransitionContext");
 var _getNavId = require("../../lib/getNavId");
@@ -44,7 +44,7 @@ var Root = function Root(_ref) {
   var _useConfigProvider = (0, _ConfigProviderContext.useConfigProvider)(),
     _useConfigProvider$tr = _useConfigProvider.transitionMotionEnabled,
     transitionMotionEnabled = _useConfigProvider$tr === void 0 ? true : _useConfigProvider$tr;
-  var _React$useContext = React.useContext(_SplitCol.SplitColContext),
+  var _React$useContext = React.useContext(_SplitColContext.SplitColContext),
     animate = _React$useContext.animate;
   var disableAnimation = !transitionMotionEnabled || !animate;
   var views = React.Children.toArray(children);

package/dist/cjs/components/Root/Root.js.map

@@ -1 +1 @@
-{"version":3,"file":"Root.js","names":["warn","warnOnce","Root","children","_activeView","activeView","onTransition","nav","className","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","useDOM","document","scrolls","useRef","current","viewNodes","useConfigProvider","transitionMotionEnabled","SplitColContext","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","Platform","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","classNames","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { SplitColContext } from '../SplitCol/SplitCol';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        'vkui-root-android-animation-hide-back',\n        'vkui-root-android-animation-show-forward',\n        'vkui-root-ios-animation-hide-back',\n        'vkui-root-ios-animation-show-forward',\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Root.js","names":["warn","warnOnce","Root","children","_activeView","activeView","onTransition","nav","className","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","useDOM","document","scrolls","useRef","current","viewNodes","useConfigProvider","transitionMotionEnabled","SplitColContext","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","Platform","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","classNames","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        'vkui-root-android-animation-hide-back',\n        'vkui-root-android-animation-show-forward',\n        'vkui-root-ios-animation-hide-back',\n        'vkui-root-ios-animation-show-forward',\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/Select/Select.d.ts

@@ -1,10 +1,6 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { SelectProps } from '../CustomSelect/CustomSelect';
 export declare type SelectType = 'default' | 'plain' | 'accent';
-/**
- * @see https://vkcom.github.io/VKUI/#/SelectTypography
- */
-export declare const SelectTypography: ({ selectType, children, className, ...restProps }: React.PropsWithChildren<Pick<SelectProps, 'selectType' | 'className'>>) => JSX.Element;
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */

package/dist/cjs/components/Select/Select.js

@@ -5,49 +5,26 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectTypography = exports.Select = void 0;
+exports.Select = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _NativeSelect = require("../NativeSelect/NativeSelect");
 var _CustomSelect = require("../CustomSelect/CustomSelect");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
-var _usePlatform = require("../../hooks/usePlatform");
 var _vkjs = require("@vkontakte/vkjs");
-var _getPlatformClassName = require("../../helpers/getPlatformClassName");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-var _excluded = ["selectType", "children", "className"],
-  _excluded2 = ["children", "options", "popupDirection", "renderOption", "className"];
-/**
- * @see https://vkcom.github.io/VKUI/#/SelectTypography
- */
-var SelectTypography = function SelectTypography(_ref) {
-  var _ref$selectType = _ref.selectType,
-    selectType = _ref$selectType === void 0 ? 'default' : _ref$selectType,
-    children = _ref.children,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
-  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
-    className: (0, _vkjs.classNames)("vkuiSelectTypography", (0, _getPlatformClassName.getPlatformClassName)("vkuiSelectTypography", platform), (0, _getSizeYClassName.getSizeYClassName)("vkuiSelectTypography", sizeY), styles["SelectTypography--selectType-".concat(selectType)], className)
-  }, restProps), children);
-};
-
+var _excluded = ["children", "options", "popupDirection", "renderOption", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-exports.SelectTypography = SelectTypography;
-var Select = function Select(_ref2) {
-  var children = _ref2.children,
-    _ref2$options = _ref2.options,
-    options = _ref2$options === void 0 ? [] : _ref2$options,
-    popupDirection = _ref2.popupDirection,
-    renderOption = _ref2.renderOption,
-    className = _ref2.className,
-    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+var Select = function Select(_ref) {
+  var children = _ref.children,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    popupDirection = _ref.popupDirection,
+    renderOption = _ref.renderOption,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
   return /*#__PURE__*/React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/React.createElement(_CustomSelect.CustomSelect, (0, _extends2.default)({
     className: (0, _vkjs.classNames)("vkuiSelect__custom", className),
@@ -56,9 +33,9 @@ var Select = function Select(_ref2) {
     renderOption: renderOption
   }, props)), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/React.createElement(_NativeSelect.NativeSelect, (0, _extends2.default)({
     className: (0, _vkjs.classNames)("vkuiSelect__native", className)
-  }, props), options.map(function (_ref3) {
-    var label = _ref3.label,
-      value = _ref3.value;
+  }, props), options.map(function (_ref2) {
+    var label = _ref2.label,
+      value = _ref2.value;
     return /*#__PURE__*/React.createElement("option", {
       value: value,
       key: "".concat(value)
@@ -66,9 +43,4 @@ var Select = function Select(_ref2) {
   })));
 };
 exports.Select = Select;
-var styles = {
-  "SelectTypography--selectType-accent": "vkuiSelectTypography--selectType-accent",
-  "SelectTypography--selectType-default": "vkuiSelectTypography--selectType-default",
-  "SelectTypography--selectType-plain": "vkuiSelectTypography--selectType-plain"
-};
 //# sourceMappingURL=Select.js.map

package/dist/cjs/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["SelectTypography","selectType","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","classNames","getPlatformClassName","getSizeYClassName","styles","Select","options","popupDirection","renderOption","props","hasPointer","useAdaptivityHasPointer","undefined","map","label","value"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Select.module.css';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectTypography\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: React.PropsWithChildren<Pick<SelectProps, 'selectType' | 'className'>>) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        getPlatformClassName(styles['SelectTypography'], platform),\n        getSizeYClassName(styles['SelectTypography'], sizeY),\n        styles[`SelectTypography--selectType-${selectType}`],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  className,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          className={classNames(styles['Select__custom'], className)}\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect className={classNames(styles['Select__native'], className)} {...props}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;EAAA;AAKpE;AACA;AACA;AACO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKiD;EAAA,2BAJ5EC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,0BAEnB,IAAAC,0CAAoB,0BAA6BL,QAAQ,CAAC,EAC1D,IAAAM,oCAAiB,0BAA6BH,KAAK,CAAC,EACpDI,MAAM,wCAAiCX,UAAU,EAAG,EACpDE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC;;AAED;AACA;AACA;AAFA;AAGO,IAAMW,MAAM,GAAG,SAATA,MAAM,QAOA;EAAA,IANjBX,QAAQ,SAARA,QAAQ;IAAA,sBACRY,OAAO;IAAPA,OAAO,8BAAG,EAAE;IACZC,cAAc,SAAdA,cAAc;IACdC,YAAY,SAAZA,YAAY;IACZb,SAAS,SAATA,SAAS;IACNc,KAAK;EAER,IAAMC,UAAU,GAAG,IAAAC,gDAAuB,GAAE;EAE5C,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZ,CAACD,UAAU,KAAKE,SAAS,IAAIF,UAAU,kBACtC,oBAAC,0BAAY;IACX,SAAS,EAAE,IAAAT,gBAAU,wBAA2BN,SAAS,CAAE;IAC3D,OAAO,EAAEW,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,YAAY,EAAEC;EAAa,GACvBC,KAAK,EAEZ,EACA,CAACC,UAAU,KAAKE,SAAS,IAAI,CAACF,UAAU,kBACvC,oBAAC,0BAAY;IAAC,SAAS,EAAE,IAAAT,gBAAU,wBAA2BN,SAAS;EAAE,GAAKc,KAAK,GAChFH,OAAO,CAACO,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;IAAA,oBAC1B;MAAQ,KAAK,EAAEA,KAAM;MAAC,GAAG,YAAKA,KAAK;IAAG,GACnCD,KAAK,CACC;EAAA,CACV,CAAC,CAEL,CACc;AAErB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Select.js","names":["Select","children","options","popupDirection","renderOption","className","props","hasPointer","useAdaptivityHasPointer","undefined","classNames","map","label","value"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Select.module.css';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  className,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          className={classNames(styles['Select__custom'], className)}\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect className={classNames(styles['Select__native'], className)} {...props}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA6C;AAK7C;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAOA;EAAA,IANjBC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IACZC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,UAAU,GAAG,IAAAC,gDAAuB,GAAE;EAE5C,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZ,CAACD,UAAU,KAAKE,SAAS,IAAIF,UAAU,kBACtC,oBAAC,0BAAY;IACX,SAAS,EAAE,IAAAG,gBAAU,wBAA2BL,SAAS,CAAE;IAC3D,OAAO,EAAEH,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,YAAY,EAAEC;EAAa,GACvBE,KAAK,EAEZ,EACA,CAACC,UAAU,KAAKE,SAAS,IAAI,CAACF,UAAU,kBACvC,oBAAC,0BAAY;IAAC,SAAS,EAAE,IAAAG,gBAAU,wBAA2BL,SAAS;EAAE,GAAKC,KAAK,GAChFJ,OAAO,CAACS,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;IAAA,oBAC1B;MAAQ,KAAK,EAAEA,KAAM;MAAC,GAAG,YAAKA,KAAK;IAAG,GACnCD,KAAK,CACC;EAAA,CACV,CAAC,CAEL,CACc;AAErB,CAAC;AAAC"}

package/dist/cjs/components/SelectMimicry/SelectMimicry.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FormFieldProps } from '../FormField/FormField';
 import { HasAlign, HasRootRef } from '../../types';
-import { SelectType } from '../Select/Select';
+import type { SelectType } from '../Select/Select';
 export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
     multiline?: boolean;
     disabled?: boolean;

package/dist/cjs/components/SelectMimicry/SelectMimicry.js

@@ -15,7 +15,7 @@ var _FormField = require("../FormField/FormField");
 var _usePlatform = require("../../hooks/usePlatform");
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _select = require("../../lib/select");
-var _Select = require("../Select/Select");
+var _SelectTypography = require("../SelectTypography/SelectTypography");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _getSizeXClassName = require("../../helpers/getSizeXClassName");
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
@@ -58,7 +58,7 @@ var SelectMimicry = function SelectMimicry(_ref) {
     status: status
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiSelect__container"
-  }, /*#__PURE__*/React.createElement(_Select.SelectTypography, {
+  }, /*#__PURE__*/React.createElement(_SelectTypography.SelectTypography, {
     selectType: selectType,
     className: "vkuiSelect__title"
   }, title)));

package/dist/cjs/components/SelectMimicry/SelectMimicry.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMimicry.js","names":["SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","usePlatform","useAdaptivity","sizeX","sizeY","title","undefined","classNames","getPlatformClassName","getSizeXClassName","getSizeYClassName","styles","getFormFieldModeFromSelectType"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { SelectType, SelectTypography } from '../Select/Select';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from '../Select/Select.module.css';\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n  const { sizeX, sizeY } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        getPlatformClassName(styles['Select'], platform),\n        getSizeXClassName(styles['Select'], sizeX),\n        getSizeYClassName(styles['Select'], sizeY),\n        multiline && styles['Select--multiline'],\n        align && styles[`Select--align-${align}`],\n        before && styles['Select--hasBefore'],\n        after && styles['Select--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AAapE;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAeA;EAAA,yBAdxBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,wCAAG,oBAAC,0BAAY,OAAG;IAAA,uBACxBC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAyB,IAAAC,6BAAa,GAAE;IAAhCC,KAAK,kBAALA,KAAK;IAAEC,KAAK,kBAALA,KAAK;EACpB,IAAMC,KAAK,GAAGjB,QAAQ,IAAID,WAAW;EAErC,oBACE,oBAAC,oBAAS,6BACJY,SAAS;IACb,QAAQ,EAAEP,QAAQ,GAAGc,SAAS,GAAGpB,QAAS;IAC1C,SAAS,EAAE,IAAAqB,gBAAU,gBAEnB,IAAAC,0CAAoB,gBAAmBR,QAAQ,CAAC,EAChD,IAAAS,oCAAiB,gBAAmBN,KAAK,CAAC,EAC1C,IAAAO,oCAAiB,gBAAmBN,KAAK,CAAC,EAC1Cb,SAAS,2BAA+B,EACxCF,KAAK,IAAIsB,MAAM,yBAAkBtB,KAAK,EAAG,EACzCK,MAAM,2BAA+B,EACrCC,KAAK,0BAA8B,EACnCG,SAAS,CACT;IACF,UAAU,EAAER,UAAW;IACvB,OAAO,EAAEE,QAAQ,GAAGc,SAAS,GAAGb,OAAQ;IACxC,QAAQ,EAAED,QAAS;IACnB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAE,IAAAiB,sCAA8B,EAAChB,UAAU,CAAE;IACjD,MAAM,EAAEC;EAAO,iBAEf;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,wBAAgB;IAAC,UAAU,EAAED,UAAW;IAAC,SAAS;EAA0B,GAC1ES,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"SelectMimicry.js","names":["SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","usePlatform","useAdaptivity","sizeX","sizeY","title","undefined","classNames","getPlatformClassName","getSizeXClassName","getSizeYClassName","styles","getFormFieldModeFromSelectType"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from '../Select/Select.module.css';\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n  const { sizeX, sizeY } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        getPlatformClassName(styles['Select'], platform),\n        getSizeXClassName(styles['Select'], sizeX),\n        getSizeYClassName(styles['Select'], sizeY),\n        multiline && styles['Select--multiline'],\n        align && styles[`Select--align-${align}`],\n        before && styles['Select--hasBefore'],\n        after && styles['Select--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAoE;AAapE;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAeA;EAAA,yBAdxBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,wCAAG,oBAAC,0BAAY,OAAG;IAAA,uBACxBC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAyB,IAAAC,6BAAa,GAAE;IAAhCC,KAAK,kBAALA,KAAK;IAAEC,KAAK,kBAALA,KAAK;EACpB,IAAMC,KAAK,GAAGjB,QAAQ,IAAID,WAAW;EAErC,oBACE,oBAAC,oBAAS,6BACJY,SAAS;IACb,QAAQ,EAAEP,QAAQ,GAAGc,SAAS,GAAGpB,QAAS;IAC1C,SAAS,EAAE,IAAAqB,gBAAU,gBAEnB,IAAAC,0CAAoB,gBAAmBR,QAAQ,CAAC,EAChD,IAAAS,oCAAiB,gBAAmBN,KAAK,CAAC,EAC1C,IAAAO,oCAAiB,gBAAmBN,KAAK,CAAC,EAC1Cb,SAAS,2BAA+B,EACxCF,KAAK,IAAIsB,MAAM,yBAAkBtB,KAAK,EAAG,EACzCK,MAAM,2BAA+B,EACrCC,KAAK,0BAA8B,EACnCG,SAAS,CACT;IACF,UAAU,EAAER,UAAW;IACvB,OAAO,EAAEE,QAAQ,GAAGc,SAAS,GAAGb,OAAQ;IACxC,QAAQ,EAAED,QAAS;IACnB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAE,IAAAiB,sCAA8B,EAAChB,UAAU,CAAE;IACjD,MAAM,EAAEC;EAAO,iBAEf;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,kCAAgB;IAAC,UAAU,EAAED,UAAW;IAAC,SAAS;EAA0B,GAC1ES,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/SelectTypography/SelectTypography.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { SelectType } from '../Select/Select';
+export interface SelectTypographyProps {
+    selectType?: SelectType;
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * @private
+ */
+export declare const SelectTypography: ({ selectType, children, className, ...restProps }: SelectTypographyProps) => JSX.Element;

package/dist/cjs/components/SelectTypography/SelectTypography.js

@@ -0,0 +1,48 @@
+"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.SelectTypography = 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 _usePlatform = require("../../hooks/usePlatform");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _excluded = ["selectType", "children", "className"];
+var sizeYClassNames = {
+  none: "vkuiSelectTypography--sizeY-none",
+  compact: "vkuiSelectTypography--sizeY-compact",
+  regular: ''
+};
+var platformClassNames = {
+  vkcom: "vkuiSelectTypography--vkcom",
+  android: "vkuiSelectTypography--android"
+};
+var selectTypeClassNames = {
+  default: "vkuiSelectTypography--selectType-default",
+  plain: "vkuiSelectTypography--selectType-plain",
+  accent: "vkuiSelectTypography--selectType-accent"
+};
+/**
+ * @private
+ */
+var SelectTypography = function SelectTypography(_ref) {
+  var _ref$selectType = _ref.selectType,
+    selectType = _ref$selectType === void 0 ? 'default' : _ref$selectType,
+    children = _ref.children,
+    className = _ref.className,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var platform = (0, _usePlatform.usePlatform)();
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
+    className: (0, _vkjs.classNames)("vkuiSelectTypography", platformClassNames[platform], sizeYClassNames[sizeY], selectTypeClassNames[selectType], className)
+  }, restProps), children);
+};
+exports.SelectTypography = SelectTypography;
+//# sourceMappingURL=SelectTypography.js.map

package/dist/cjs/components/SelectTypography/SelectTypography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTypography.js","names":["sizeYClassNames","none","compact","regular","platformClassNames","vkcom","android","selectTypeClassNames","default","plain","accent","SelectTypography","selectType","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","classNames"],"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { SelectType } from '../Select/Select';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n  regular: '',\n};\n\nconst platformClassNames: Record<string, string> = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nconst selectTypeClassNames = {\n  default: styles['SelectTypography--selectType-default'],\n  plain: styles['SelectTypography--selectType-plain'],\n  accent: styles['SelectTypography--selectType-accent'],\n};\n\nexport interface SelectTypographyProps {\n  selectType?: SelectType;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames[platform],\n        sizeYClassNames[sizeY],\n        selectTypeClassNames[selectType],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AAA0D;AAG1D,IAAMA,eAAe,GAAG;EACtBC,IAAI,oCAAwC;EAC5CC,OAAO,uCAA2C;EAClDC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,kBAA0C,GAAG;EACjDC,KAAK,+BAAmC;EACxCC,OAAO;AACT,CAAC;AAED,IAAMC,oBAAoB,GAAG;EAC3BC,OAAO,4CAAgD;EACvDC,KAAK,0CAA8C;EACnDC,MAAM;AACR,CAAC;AAQD;AACA;AACA;AACO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKA;EAAA,2BAJ3BC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,0BAEnBhB,kBAAkB,CAACY,QAAQ,CAAC,EAC5BhB,eAAe,CAACmB,KAAK,CAAC,EACtBZ,oBAAoB,CAACK,UAAU,CAAC,EAChCE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC;AAAC"}

package/dist/cjs/components/Slider/Slider.d.ts

@@ -4,4 +4,4 @@ export declare type SliderProps = UniversalSliderProps<number>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */
-export declare const Slider: ({ onChange, min, max, defaultValue, ...props }: SliderProps) => JSX.Element;
+export declare const Slider: ({ onChange, min, max, defaultValue, value, ...props }: SliderProps) => JSX.Element;

package/dist/cjs/components/Slider/Slider.js

@@ -12,7 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var React = _interopRequireWildcard(require("react"));
 var _math = require("../../helpers/math");
 var _UniversalSlider = require("../RangeSlider/UniversalSlider");
-var _excluded = ["onChange", "min", "max", "defaultValue"];
+var _excluded = ["onChange", "min", "max", "defaultValue", "value"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */
@@ -24,13 +24,14 @@ var Slider = function Slider(_ref) {
     max = _ref$max === void 0 ? 100 : _ref$max,
     _ref$defaultValue = _ref.defaultValue,
     defaultValue = _ref$defaultValue === void 0 ? min : _ref$defaultValue,
+    value = _ref.value,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var isControlled = props.value !== undefined;
+  var isControlled = value !== undefined;
   var _React$useState = React.useState(defaultValue),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     localValue = _React$useState2[0],
     setValue = _React$useState2[1];
-  var _value = (0, _math.clamp)(props.value || localValue, min, max);
+  var _value = (0, _math.clamp)(isControlled ? value : localValue, min, max);
   var handleChange = React.useCallback(function (nextValue, event) {
     if (props.disabled || _value === nextValue[1]) {
       return;

package/dist/cjs/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["Slider","onChange","min","max","defaultValue","props","isControlled","value","undefined","React","useState","localValue","setValue","_value","clamp","handleChange","useCallback","nextValue","event","disabled","rangeValue","useMemo"],"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport {\n  UniversalSlider,\n  UniversalSliderProps,\n  UniversalValue,\n} from '../RangeSlider/UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type SliderProps = UniversalSliderProps<number>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = min,\n  ...props\n}: SliderProps) => {\n  const isControlled = props.value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const _value = clamp(props.value || localValue, min, max);\n\n  const handleChange: UniversalSliderProps<UniversalValue>['onChange'] = React.useCallback(\n    (nextValue: UniversalValue, event: TouchEvent) => {\n      if (props.disabled || _value === nextValue[1]) {\n        return;\n      }\n      !isControlled && setValue(nextValue[1]);\n      onChange && onChange(nextValue[1], event);\n    },\n    [props.disabled, _value, isControlled, onChange],\n  );\n\n  const rangeValue: [null, number] = React.useMemo(() => [null, _value], [_value]);\n  return (\n    <UniversalSlider {...props} value={rangeValue} onChange={handleChange} min={min} max={max} />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAIwC;AAKxC;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAMA;EAAA,IALjBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAGF,GAAG;IACfG,KAAK;EAER,IAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,KAAKC,SAAS;EAE9C,sBAA+BC,KAAK,CAACC,QAAQ,CAACN,YAAY,CAAC;IAAA;IAApDO,UAAU;IAAEC,QAAQ;EAC3B,IAAMC,MAAM,GAAG,IAAAC,WAAK,EAACT,KAAK,CAACE,KAAK,IAAII,UAAU,EAAET,GAAG,EAAEC,GAAG,CAAC;EAEzD,IAAMY,YAA8D,GAAGN,KAAK,CAACO,WAAW,CACtF,UAACC,SAAyB,EAAEC,KAAiB,EAAK;IAChD,IAAIb,KAAK,CAACc,QAAQ,IAAIN,MAAM,KAAKI,SAAS,CAAC,CAAC,CAAC,EAAE;MAC7C;IACF;IACA,CAACX,YAAY,IAAIM,QAAQ,CAACK,SAAS,CAAC,CAAC,CAAC,CAAC;IACvChB,QAAQ,IAAIA,QAAQ,CAACgB,SAAS,CAAC,CAAC,CAAC,EAAEC,KAAK,CAAC;EAC3C,CAAC,EACD,CAACb,KAAK,CAACc,QAAQ,EAAEN,MAAM,EAAEP,YAAY,EAAEL,QAAQ,CAAC,CACjD;EAED,IAAMmB,UAA0B,GAAGX,KAAK,CAACY,OAAO,CAAC;IAAA,OAAM,CAAC,IAAI,EAAER,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAChF,oBACE,oBAAC,gCAAe,6BAAKR,KAAK;IAAE,KAAK,EAAEe,UAAW;IAAC,QAAQ,EAAEL,YAAa;IAAC,GAAG,EAAEb,GAAI;IAAC,GAAG,EAAEC;EAAI,GAAG;AAEjG,CAAC;AAAC"}
+{"version":3,"file":"Slider.js","names":["Slider","onChange","min","max","defaultValue","value","props","isControlled","undefined","React","useState","localValue","setValue","_value","clamp","handleChange","useCallback","nextValue","event","disabled","rangeValue","useMemo"],"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport {\n  UniversalSlider,\n  UniversalSliderProps,\n  UniversalValue,\n} from '../RangeSlider/UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type SliderProps = UniversalSliderProps<number>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = min,\n  value,\n  ...props\n}: SliderProps) => {\n  const isControlled = value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const _value = clamp(isControlled ? value : localValue, min, max);\n\n  const handleChange: UniversalSliderProps<UniversalValue>['onChange'] = React.useCallback(\n    (nextValue: UniversalValue, event: TouchEvent) => {\n      if (props.disabled || _value === nextValue[1]) {\n        return;\n      }\n      !isControlled && setValue(nextValue[1]);\n      onChange && onChange(nextValue[1], event);\n    },\n    [props.disabled, _value, isControlled, onChange],\n  );\n\n  const rangeValue: [null, number] = React.useMemo(() => [null, _value], [_value]);\n  return (\n    <UniversalSlider {...props} value={rangeValue} onChange={handleChange} min={min} max={max} />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAIwC;AAKxC;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAOA;EAAA,IANjBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAGF,GAAG;IAClBG,KAAK,QAALA,KAAK;IACFC,KAAK;EAER,IAAMC,YAAY,GAAGF,KAAK,KAAKG,SAAS;EAExC,sBAA+BC,KAAK,CAACC,QAAQ,CAACN,YAAY,CAAC;IAAA;IAApDO,UAAU;IAAEC,QAAQ;EAC3B,IAAMC,MAAM,GAAG,IAAAC,WAAK,EAACP,YAAY,GAAGF,KAAK,GAAGM,UAAU,EAAET,GAAG,EAAEC,GAAG,CAAC;EAEjE,IAAMY,YAA8D,GAAGN,KAAK,CAACO,WAAW,CACtF,UAACC,SAAyB,EAAEC,KAAiB,EAAK;IAChD,IAAIZ,KAAK,CAACa,QAAQ,IAAIN,MAAM,KAAKI,SAAS,CAAC,CAAC,CAAC,EAAE;MAC7C;IACF;IACA,CAACV,YAAY,IAAIK,QAAQ,CAACK,SAAS,CAAC,CAAC,CAAC,CAAC;IACvChB,QAAQ,IAAIA,QAAQ,CAACgB,SAAS,CAAC,CAAC,CAAC,EAAEC,KAAK,CAAC;EAC3C,CAAC,EACD,CAACZ,KAAK,CAACa,QAAQ,EAAEN,MAAM,EAAEN,YAAY,EAAEN,QAAQ,CAAC,CACjD;EAED,IAAMmB,UAA0B,GAAGX,KAAK,CAACY,OAAO,CAAC;IAAA,OAAM,CAAC,IAAI,EAAER,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAChF,oBACE,oBAAC,gCAAe,6BAAKP,KAAK;IAAE,KAAK,EAAEc,UAAW;IAAC,QAAQ,EAAEL,YAAa;IAAC,GAAG,EAAEb,GAAI;IAAC,GAAG,EAAEC;EAAI,GAAG;AAEjG,CAAC;AAAC"}

package/dist/cjs/components/Spacing/Spacing.js

@@ -22,7 +22,8 @@ var Spacing = function Spacing(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var style = (0, _objectSpread2.default)({
-    height: size
+    height: size,
+    padding: "".concat(size / 2, "px 0")
   }, styleProp);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     "aria-hidden": true,

package/dist/cjs/components/Spacing/Spacing.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacing.js","names":["Spacing","size","styleProp","style","className","restProps","height","classNames"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style = {\n    height: size,\n    ...styleProp,\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-hidden\n      className={classNames(className, styles['Spacing'])}\n      style={style}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAA6C;AAW7C;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAA8E;EAAA,qBAAxEC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAASC,SAAS,QAAhBC,KAAK;IAAaC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC3E,IAAMF,KAAK;IACTG,MAAM,EAAEL;EAAI,GACTC,SAAS,CACb;EAED,oBACE,sDACMG,SAAS;IACb,mBAAW;IACX,SAAS,EAAE,IAAAE,gBAAU,EAACH,SAAS,gBAAqB;IACpD,KAAK,EAAED;EAAM,GACb;AAEN,CAAC;AAAC"}
+{"version":3,"file":"Spacing.js","names":["Spacing","size","styleProp","style","className","restProps","height","padding","classNames"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-hidden\n      className={classNames(className, styles['Spacing'])}\n      style={style}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAA6C;AAW7C;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAA8E;EAAA,qBAAxEC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAASC,SAAS,QAAhBC,KAAK;IAAaC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC3E,IAAMF,KAA0B;IAC9BG,MAAM,EAAEL,IAAI;IACZM,OAAO,YAAKN,IAAI,GAAG,CAAC;EAAM,GACvBC,SAAS,CACb;EAED,oBACE,sDACMG,SAAS;IACb,mBAAW;IACX,SAAS,EAAE,IAAAG,gBAAU,EAACJ,SAAS,gBAAqB;IACpD,KAAK,EAAED;EAAM,GACb;AAEN,CAAC;AAAC"}

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

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

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

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