@vkontakte/vkui 5.1.0 → 5.1.2

package/dist/cjs/components/Popover/Popover.js

@@ -96,7 +96,10 @@ var Popover = function Popover(_ref) {
       setShown(false);
     }
   };
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', handleOutsideClick);
+  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', handleOutsideClick, {
+    capture: true,
+    passive: true
+  });
   var targetEnterListener = (0, _useEventListener.useEventListener)('mouseenter', handleTargetEnter);
   var targetClickEvent = (0, _useEventListener.useEventListener)('click', handleTargetClick);
   var targetLeaveListener = (0, _useEventListener.useEventListener)('mouseleave', handleTargetLeave);

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","useDOM","document","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","classNames","wrapperClassName","undefined"],"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames } from '@vkontakte/vkjs';\nimport { PopperCommonProps, Popper } from '../Popper/Popper';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick);\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Popover.js","names":["Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","useDOM","document","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","classNames","wrapperClassName","undefined"],"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames } from '@vkontakte/vkjs';\nimport { PopperCommonProps, Popper } from '../Popper/Popper';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":"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"}

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/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/Switch/Switch.js

@@ -37,15 +37,14 @@ var Switch = function Switch(_ref) {
   return /*#__PURE__*/React.createElement("label", {
     className: (0, _vkjs.classNames)("vkuiSwitch", (0, _getPlatformClassName.getPlatformClassName)("vkuiSwitch", platform), (0, _getSizeYClassName.getSizeYClassName)("vkuiSwitch", sizeY), restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
     style: style,
-    ref: getRootRef,
-    role: "presentation"
+    ref: getRootRef
   }, /*#__PURE__*/React.createElement(_VisuallyHiddenInput.VisuallyHiddenInput, (0, _extends2.default)({}, restProps, {
     type: "checkbox",
     className: "vkuiSwitch__self",
     onBlur: (0, _callMultiple.callMultiple)(onBlur, restProps.onBlur),
     onFocus: (0, _callMultiple.callMultiple)(onFocus, restProps.onFocus)
   })), /*#__PURE__*/React.createElement("span", {
-    role: "presentation",
+    "aria-hidden": true,
     className: "vkuiSwitch__pseudo"
   }), /*#__PURE__*/React.createElement(_FocusVisible.FocusVisible, {
     mode: "outside"

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

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

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

@@ -15,9 +15,12 @@ var _platform = require("../../lib/platform");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _dom = require("../../lib/dom");
 var _accessibility = require("../../lib/accessibility");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
 var _excluded = ["children", "mode", "getRootRef", "className", "role"];
+var modeClassNames = {
+  default: "vkuiTabs--mode-default",
+  accent: "vkuiTabs--mode-accent",
+  secondary: "vkuiTabs--mode-secondary"
+};
 var TabsModeContext = /*#__PURE__*/React.createContext({
   mode: 'default',
   withGaps: false
@@ -37,8 +40,6 @@ var Tabs = function Tabs(_ref) {
     role = _ref$role === void 0 ? 'tablist' : _ref$role,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeX = _useAdaptivity.sizeX;
   var _useDOM = (0, _dom.useDOM)(),
     document = _useDOM.document;
   var isTabFlow = role === 'tablist';
@@ -132,7 +133,7 @@ var Tabs = function Tabs(_ref) {
   });
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     ref: getRootRef,
-    className: (0, _vkjs.classNames)("vkuiTabs", platform === _platform.Platform.VKCOM && styles["Tabs--".concat(platform)], (0, _getSizeXClassName.getSizeXClassName)("vkuiTabs", sizeX), withGaps && "vkuiTabs--withGaps", styles["Tabs--mode-".concat(mode)], className),
+    className: (0, _vkjs.classNames)("vkuiTabs", platform === _platform.Platform.VKCOM && "vkuiTabs--vkcom", withGaps && "vkuiTabs--withGaps", modeClassNames[mode], className),
     role: role
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabs__in",
@@ -145,14 +146,4 @@ var Tabs = function Tabs(_ref) {
   }, children)));
 };
 exports.Tabs = Tabs;
-var styles = {
-  "Tabs--withGaps": "vkuiTabs--withGaps",
-  "Tabs--mode-default": "vkuiTabs--mode-default",
-  "Tabs--buttons": "vkuiTabs--buttons",
-  "Tabs--sizeX-compact": "vkuiTabs--sizeX-compact",
-  "Tabs--sizeX-none": "vkuiTabs--sizeX-none",
-  "Tabs--mode-accent": "vkuiTabs--mode-accent",
-  "Tabs--mode-secondary": "vkuiTabs--mode-secondary",
-  "Tabs--vkcom": "vkuiTabs--vkcom"
-};
 //# sourceMappingURL=Tabs.js.map

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

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

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -199,6 +199,7 @@ var Tooltip = function Tooltip(_ref3) {
   var _useDOM = (0, _dom.useDOM)(),
     document = _useDOM.document;
   (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', isShown && onClose, {
+    capture: true,
     passive: true
   });
   // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()