@vkontakte/vkui 5.2.0 → 5.2.2

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["React","useDOM","classNames","Popper","FocusTrap","useTimeout","useExternRef","useEventListener","useGlobalEventListener","usePatchChildrenRef","Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","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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"}
+{"version":3,"file":"Popover.js","names":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","wrapperClassName","undefined"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\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/components/Popper/Popper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { HasRef } from '../../types';
 import { type Placement, type PlacementWithAuto, type UseFloatingMiddleware } from '../../lib/floating';
+import type { HasRef } from '../../types';
 export interface PopperRenderContentProps {
     className: string;
 }

package/dist/components/Popper/Popper.js

@@ -4,11 +4,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "autoUpdateOnTargetResize", "style", "customMiddlewares", "renderContent", "className"];
 import * as React from 'react';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { ARROW_PADDING, ARROW_HEIGHT, PopperArrow } from '../PopperArrow/PopperArrow';
-import { useExternRef } from '../../hooks/useExternRef';
-import { checkIsNotAutoPlacement, getAutoPlacementAlign, convertFloatingDataToReactCSSProperties, useFloating, autoUpdateFloatingElement, offsetMiddleware, flipMiddleware, shiftMiddleware, autoPlacementMiddleware, arrowMiddleware, sizeMiddleware } from '../../lib/floating';
 import { classNames } from '@vkontakte/vkjs';
+import { useExternRef } from '../../hooks/useExternRef';
+import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, offsetMiddleware, shiftMiddleware, sizeMiddleware, useFloating } from '../../lib/floating';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { ARROW_HEIGHT, ARROW_PADDING, PopperArrow } from '../PopperArrow/PopperArrow';
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */

package/dist/components/Popper/Popper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.js","names":["React","AppRootPortal","ARROW_PADDING","ARROW_HEIGHT","PopperArrow","useExternRef","checkIsNotAutoPlacement","getAutoPlacementAlign","convertFloatingDataToReactCSSProperties","useFloating","autoUpdateFloatingElement","offsetMiddleware","flipMiddleware","shiftMiddleware","autoPlacementMiddleware","arrowMiddleware","sizeMiddleware","classNames","Popper","targetRef","children","getRef","placement","placementProp","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","autoUpdateOnTargetResize","styleProp","style","customMiddlewares","renderContent","className","restProps","arrowRef","useRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","floatingDataX","x","floatingDataY","y","floatingPositionStrategy","strategy","resolvedPlacement","refs","arrowCoords","middlewareData","handleRootRef","setFloating","useEffect","setReference","current","dropdown"],"sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { ARROW_PADDING, ARROW_HEIGHT, PopperArrow } from '../PopperArrow/PopperArrow';\nimport type { HasRef } from '../../types';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  type Placement,\n  type PlacementWithAuto,\n  checkIsNotAutoPlacement,\n  getAutoPlacementAlign,\n  convertFloatingDataToReactCSSProperties,\n  useFloating,\n  autoUpdateFloatingElement,\n  type UseFloatingMiddleware,\n  offsetMiddleware,\n  flipMiddleware,\n  shiftMiddleware,\n  autoPlacementMiddleware,\n  arrowMiddleware,\n  sizeMiddleware,\n} from '../../lib/floating';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const arrowRef = React.useRef<HTMLDivElement>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: ARROW_PADDING,\n        }),\n      );\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    sameWidth,\n    offsetSkidding,\n    offsetDistance,\n    customMiddlewares,\n    placementProp,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      className={classNames(styles['Popper'], className)}\n      ref={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={arrowRef}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,aAAa,EAAEC,YAAY,EAAEC,WAAW,QAAQ,4BAA4B;AAErF,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAGEC,uBAAuB,EACvBC,qBAAqB,EACrBC,uCAAuC,EACvCC,WAAW,EACXC,yBAAyB,EAEzBC,gBAAgB,EAChBC,cAAc,EACdC,eAAe,EACfC,uBAAuB,EACvBC,eAAe,EACfC,cAAc,QACT,oBAAoB;AAC3B,SAASC,UAAU,QAAQ,iBAAiB;AA0D5C;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAkBA;EAAA,IAjBjBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IAAA,sBACNC,SAAS;IAAEC,aAAa,+BAAG,cAAc;IACzCC,iBAAiB,QAAjBA,iBAAiB;IACjBC,KAAK,QAALA,KAAK;IACLC,cAAc,QAAdA,cAAc;IACdC,SAAS,QAATA,SAAS;IAAA,2BACTC,cAAc;IAAdA,cAAc,oCAAG,CAAC;IAAA,2BAClBC,cAAc;IAAdA,cAAc,oCAAG,CAAC;IAAA,wBAClBC,WAAW;IAAXA,WAAW,iCAAG,IAAI;IAAA,6BAClBC,wBAAwB;IAAxBA,wBAAwB,sCAAG,KAAK;IACzBC,SAAS,QAAhBC,KAAK;IACLC,iBAAiB,QAAjBA,iBAAiB;IACjBC,aAAa,QAAbA,aAAa;IACbC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGtC,KAAK,CAACuC,MAAM,CAAiB,IAAI,CAAC;EAEnD,IAAMC,kBAAkB,GAAGlC,uBAAuB,CAACiB,aAAa,CAAC;EAEjE,IAAMkB,mBAAmB,GAAGzC,KAAK,CAAC0C,OAAO,CAAC,YAAM;IAC9C,IAAMC,WAAoC,GAAG,CAC3ChC,gBAAgB,CAAC;MACfiC,SAAS,EAAEf,cAAc;MACzBgB,QAAQ,EAAEpB,KAAK,GAAGG,cAAc,GAAGzB,YAAY,GAAGyB;IACpD,CAAC,CAAC,CACH;;IAED;IACA,IAAIY,kBAAkB,EAAE;MACtBG,WAAW,CAACG,IAAI,CAAClC,cAAc,EAAE,CAAC;IACpC,CAAC,MAAM;MACL+B,WAAW,CAACG,IAAI,CACdhC,uBAAuB,CAAC;QAAEiC,SAAS,EAAExC,qBAAqB,CAACgB,aAAa;MAAE,CAAC,CAAC,CAC7E;IACH;IAEAoB,WAAW,CAACG,IAAI,CAACjC,eAAe,EAAE,CAAC;IAEnC,IAAIc,SAAS,EAAE;MACbgB,WAAW,CAACG,IAAI,CACd9B,cAAc,CAAC;QACbgC,KAAK,wBAAsB;UAAA,IAAnBC,KAAK,SAALA,KAAK;YAAEC,QAAQ,SAARA,QAAQ;UACrBC,MAAM,CAACC,MAAM,CAACF,QAAQ,CAACG,QAAQ,CAACpB,KAAK,EAAE;YACrCqB,KAAK,YAAKL,KAAK,CAACM,SAAS,CAACD,KAAK;UACjC,CAAC,CAAC;QACJ;MACF,CAAC,CAAC,CACH;IACH;IAEA,IAAIpB,iBAAiB,EAAE;MACrBS,WAAW,CAACG,IAAI,OAAhBH,WAAW,qBAAST,iBAAiB,EAAC;IACxC;;IAEA;IACA,IAAIT,KAAK,EAAE;MACTkB,WAAW,CAACG,IAAI,CACd/B,eAAe,CAAC;QACdyC,OAAO,EAAElB,QAAQ;QACjBmB,OAAO,EAAEvD;MACX,CAAC,CAAC,CACH;IACH;IAEA,OAAOyC,WAAW;EACpB,CAAC,EAAE,CACDlB,KAAK,EACLE,SAAS,EACTE,cAAc,EACdD,cAAc,EACdM,iBAAiB,EACjBX,aAAa,EACbiB,kBAAkB,CACnB,CAAC;EAEF,mBAOI/B,WAAW,CAAC;MACda,SAAS,EAAEkB,kBAAkB,GAAGjB,aAAa,GAAGmC,SAAS;MACzDC,UAAU,EAAElB,mBAAmB;MAC/BmB,oBAAoB,kCAAU;QAAA,kCAANC,IAAI;UAAJA,IAAI;QAAA;QAC1B,OAAOnD,yBAAyB,eAAImD,IAAI,SAAE;UACxCC,aAAa,EAAE/B;QACjB,CAAC,GAAC;MACJ;IACF,CAAC,CAAC;IAdGgC,aAAa,gBAAhBC,CAAC;IACEC,aAAa,gBAAhBC,CAAC;IACSC,wBAAwB,gBAAlCC,QAAQ;IACGC,iBAAiB,gBAA5B/C,SAAS;IACTgD,IAAI,gBAAJA,IAAI;IACqBC,WAAW,gBAApCC,cAAc,CAAI/C,KAAK;EAWzB,IAAMgD,aAAa,GAAGpE,YAAY,CAAiBiE,IAAI,CAACI,WAAW,EAAErD,MAAM,CAAC;EAE5ErB,KAAK,CAAC2E,SAAS,CAAC,YAAM;IACpBL,IAAI,CAACM,YAAY,CAACzD,SAAS,CAAC0D,OAAO,CAAC;EACtC,CAAC,EAAE,CAACP,IAAI,EAAEnD,SAAS,CAAC,CAAC;EAErBnB,KAAK,CAAC2E,SAAS,CAAC,YAAM;IACpB,IAAIN,iBAAiB,IAAI7C,iBAAiB,EAAE;MAC1CA,iBAAiB,CAAC;QAAEF,SAAS,EAAE+C;MAAkB,CAAC,CAAC;IACrD;EACF,CAAC,EAAE,CAAC7C,iBAAiB,EAAE6C,iBAAiB,CAAC,CAAC;EAE1C,IAAMS,QAAQ,gBACZ,wCACMzC,SAAS;IACb,SAAS,EAAEpB,UAAU,eAAmBmB,SAAS,CAAE;IACnD,GAAG,EAAEqC,aAAc;IACnB,KAAK,kCACAzC,SAAS,GACTxB,uCAAuC,CACxC2D,wBAAwB,EACxBJ,aAAa,EACbE,aAAa,EACbtC,SAAS,GAAG,IAAI,GAAG+B,SAAS,CAC7B;EACD,IAEDjC,KAAK,iBACJ,oBAAC,WAAW;IACV,MAAM,EAAE8C,WAAY;IACpB,SAAS,EAAEF,iBAAkB;IAC7B,cAAc,EAAE3C,cAAe;IAC/B,UAAU,EAAEY;EAAS,EAExB,EACAH,aAAa,GACZA,aAAa,CAAC;IAAEC,SAAS;EAA4B,CAAC,CAAC,gBAEvD;IAAK,SAAS;EAA4B,GAAEhB,QAAQ,CACrD,CAEJ;EAED,oBACE,oBAAC,aAAa;IAAC,WAAW,EAAEU,WAAY;IAAC,SAAS;EAAyB,GACxEgD,QAAQ,CACK;AAEpB,CAAC"}
+{"version":3,"file":"Popper.js","names":["React","classNames","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","ARROW_HEIGHT","ARROW_PADDING","PopperArrow","Popper","targetRef","children","getRef","placement","placementProp","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","autoUpdateOnTargetResize","styleProp","style","customMiddlewares","renderContent","className","restProps","arrowRef","useRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","floatingDataX","x","floatingDataY","y","floatingPositionStrategy","strategy","resolvedPlacement","refs","arrowCoords","middlewareData","handleRootRef","setFloating","useEffect","setReference","current","dropdown"],"sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport type { HasRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { ARROW_HEIGHT, ARROW_PADDING, PopperArrow } from '../PopperArrow/PopperArrow';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const arrowRef = React.useRef<HTMLDivElement>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: ARROW_PADDING,\n        }),\n      );\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    sameWidth,\n    offsetSkidding,\n    offsetDistance,\n    customMiddlewares,\n    placementProp,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      className={classNames(styles['Popper'], className)}\n      ref={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={arrowRef}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}

package/dist/components/PopperArrow/PopperArrow.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { HasRootRef } from '../../types';
 import type { Placement } from '../../lib/floating';
+import type { HasRootRef } from '../../types';
 export declare const ARROW_PADDING = 10;
 export declare const ARROW_WIDTH = 20;
 export declare const ARROW_HEIGHT = 8;

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

@@ -1 +1 @@
-{"version":3,"file":"PopperArrow.js","names":["React","classNames","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","getPositionsStylesByCoords","placement","coords","x","y","startsWith","top","left","right","bottom","PopperArrow","arrowClassName","getRootRef"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAK5C,OAAO,IAAMC,aAAa,GAAG,EAAE;AAC/B,OAAO,IAAMC,WAAW,GAAG,EAAE;AAC7B,OAAO,IAAMC,YAAY,GAAG,CAAC;AAO7B,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;AAQA,OAAO,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,EAAEL,UAAU,wBAA4Be,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"}
+{"version":3,"file":"PopperArrow.js","names":["React","classNames","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","getPositionsStylesByCoords","placement","coords","x","y","startsWith","top","left","right","bottom","PopperArrow","arrowClassName","getRootRef"],"sources":["../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAK5C,OAAO,IAAMC,aAAa,GAAG,EAAE;AAC/B,OAAO,IAAMC,WAAW,GAAG,EAAE;AAC7B,OAAO,IAAMC,YAAY,GAAG,CAAC;AAO7B,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;AAQA,OAAO,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,EAAEL,UAAU,wBAA4Be,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"}

package/dist/components/Progress/Progress.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "getRootRef", "className"];
 import * as React from 'react';
-import { clamp } from '../../helpers/math';
 import { classNames } from '@vkontakte/vkjs';
+import { clamp } from '../../helpers/math';
 var PROGRESS_MIN_VALUE = 0;
 var PROGRESS_MAX_VALUE = 100;
 

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","names":["React","clamp","classNames","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","title","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,UAAU,QAAQ,iBAAiB;AAU5C,IAAMC,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACA,OAAO,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,GAAGT,KAAK,CAACK,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EACrE,IAAMO,KAAK,aAAMD,QAAQ,gBAAMN,kBAAkB,CAAE;EAEnD,oBACE;IACE,iBAAeE,KAAM;IACrB,KAAK,EAAEK;EAAM,GACTF,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAEL,UAAU,iBAAqBM,SAAS;EAAE,iBAErD;IAAK,SAAS,oBAAyB;IAAC,KAAK,EAAE;MAAEI,KAAK,YAAKF,QAAQ;IAAI;EAAE,EAAG,CACxE;AAEV,CAAC"}
+{"version":3,"file":"Progress.js","names":["React","classNames","clamp","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","title","width"],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,KAAK,QAAQ,oBAAoB;AAU1C,IAAMC,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACA,OAAO,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,GAAGR,KAAK,CAACI,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EACrE,IAAMO,KAAK,aAAMD,QAAQ,gBAAMN,kBAAkB,CAAE;EAEnD,oBACE;IACE,iBAAeE,KAAM;IACrB,KAAK,EAAEK;EAAM,GACTF,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAEN,UAAU,iBAAqBO,SAAS;EAAE,iBAErD;IAAK,SAAS,oBAAyB;IAAC,KAAK,EAAE;MAAEI,KAAK,YAAKF,QAAQ;IAAI;EAAE,EAAG,CACxE;AAEV,CAAC"}

package/dist/components/PromoBanner/PromoBanner.js

@@ -5,11 +5,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["bannerData", "onClose", "isCloseButtonHidden", "className"];
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
 import { Icon24Dismiss } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
 import { Button } from '../Button/Button';
-import { SimpleCell } from '../SimpleCell/SimpleCell';
 import { Image } from '../Image/Image';
+import { SimpleCell } from '../SimpleCell/SimpleCell';
 import { Footnote } from '../Typography/Footnote/Footnote';
 /**
  * @see https://vkcom.github.io/VKUI/#/PromoBanner

package/dist/components/PromoBanner/PromoBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoBanner.js","names":["React","classNames","Icon24Dismiss","Button","SimpleCell","Image","Footnote","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","advertisingLabel","ageRestrictions","trackingLink","iconLink","title","process","env","NODE_ENV","undefined","ctaText","domain","length"],"sources":["../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { Button } from '../Button/Button';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Image } from '../Image/Image';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote className={styles['PromoBanner__label']}>\n          {bannerData.advertisingLabel || 'Advertisement'}\n        </Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PromoBanner.js","names":["React","Icon24Dismiss","classNames","Button","Image","SimpleCell","Footnote","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","advertisingLabel","ageRestrictions","trackingLink","iconLink","title","process","env","NODE_ENV","undefined","ctaText","domain","length"],"sources":["../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote className={styles['PromoBanner__label']}>\n          {bannerData.advertisingLabel || 'Advertisement'}\n        </Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/PullToRefresh/PullToRefresh.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AnyFunction } from '../../types';
 import { DOMProps } from '../../lib/dom';
+import { AnyFunction } from '../../types';
 import { ScrollContextInterface } from '../AppRoot/ScrollContext';
 import { TouchProps } from '../Touch/Touch';
 export interface PullToRefreshProps extends DOMProps, TouchProps {

package/dist/components/PullToRefresh/PullToRefresh.js

@@ -3,21 +3,21 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "isFetching", "onRefresh", "className"];
 import * as React from 'react';
-import { useDOM } from '../../lib/dom';
 import { classNames } from '@vkontakte/vkjs';
+import { clamp } from '../../helpers/math';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { usePlatform } from '../../hooks/usePlatform';
+import { usePrevious } from '../../hooks/usePrevious';
+import { useTimeout } from '../../hooks/useTimeout';
+import { useDOM } from '../../lib/dom';
 import { Platform } from '../../lib/platform';
 import { runTapticImpactOccurred } from '../../lib/taptic';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { useScroll } from '../AppRoot/ScrollContext';
-import { Touch } from '../Touch/Touch';
 import { FixedLayout } from '../FixedLayout/FixedLayout';
-import { PullToRefreshSpinner } from './PullToRefreshSpinner';
+import { Touch } from '../Touch/Touch';
 import TouchRootContext from '../Touch/TouchContext';
-import { usePrevious } from '../../hooks/usePrevious';
-import { useTimeout } from '../../hooks/useTimeout';
-import { clamp } from '../../helpers/math';
+import { PullToRefreshSpinner } from './PullToRefreshSpinner';
 function cancelEvent(event) {
   if (!event) {
     return false;

package/dist/components/PullToRefresh/PullToRefresh.js.map

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

package/dist/components/Radio/Radio.js

@@ -1,15 +1,19 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "description", "style", "className", "getRootRef"];
 import * as React from 'react';
-import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { Platform } from '../../lib/platform';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
-import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
+import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+var sizeYClassNames = _defineProperty({
+  none: "vkuiRadio--sizeY-none"
+}, SizeType.COMPACT, "vkuiRadio--sizeY-compact");
 var RadioIcon = function RadioIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -42,11 +46,12 @@ export var Radio = function Radio(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   return /*#__PURE__*/React.createElement(Tappable, {
     Component: "label",
     style: style,
-    className: classNames("vkuiRadio", getSizeYClassName("vkuiRadio", sizeY), className),
+    className: classNames("vkuiRadio", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
     activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
     disabled: restProps.disabled,
     getRootRef: getRootRef

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["React","ACTIVE_EFFECT_DELAY","Tappable","classNames","hasReactNode","Platform","usePlatform","VisuallyHiddenInput","Footnote","getSizeYClassName","useAdaptivity","RadioIcon","props","Radio","children","description","style","className","getRootRef","restProps","platform","sizeY","IOS","disabled"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './Radio.module.css';\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(styles['Radio'], getSizeYClassName(styles['Radio'], sizeY), className)}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput {...restProps} className={styles['Radio__input']} type=\"radio\" />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__children']}>{children}</div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,sBAAsB;AACpE,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,mBAAmB,QAAQ,4CAA4C;AAChF,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAGzD,IAAMC,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAAoC,EAAK;EAC1D,oBACE;IAAK,KAAK,EAAC,4BAA4B;IAAC,OAAO,EAAC,WAAW;IAAC;EAAW,GAAKA,KAAK,gBAC/E;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,MAAM,EAAC,cAAc;IAAC,WAAW,EAAC,GAAG;IAAC,IAAI,EAAC;EAAM,EAAG,eACnF;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,KAAK;IAAC,SAAS,kBAAuB;IAAC,IAAI,EAAC;EAAc,EAAG,CACnF;AAEV,CAAC;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAGd,WAAW,EAAE;EAC9B,qBAAkBI,aAAa,EAAE;IAAzBW,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEL,KAAM;IACb,SAAS,EAAEb,UAAU,cAAkBM,iBAAiB,cAAkBY,KAAK,CAAC,EAAEJ,SAAS,CAAE;IAC7F,iBAAiB,EAAEG,QAAQ,KAAKf,QAAQ,CAACiB,GAAG,GAAG,GAAG,GAAGrB,mBAAoB;IACzE,QAAQ,EAAEkB,SAAS,CAACI,QAAS;IAC7B,UAAU,EAAEL;EAAW,gBAEvB,oBAAC,mBAAmB,eAAKC,SAAS;IAAE,SAAS,oBAAyB;IAAC,IAAI,EAAC;EAAO,GAAG,eACtF;IAAK,SAAS;EAA6B,gBACzC,oBAAC,SAAS;IAAC,SAAS;EAAwB,EAAG,eAC/C;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA4B,GAAEL,QAAQ,CAAO,EAC1DV,YAAY,CAACW,WAAW,CAAC,iBACxB,oBAAC,QAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,CACF,CACG;AAEf,CAAC"}
+{"version":3,"file":"Radio.js","names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHiddenInput","sizeYClassNames","none","COMPACT","RadioIcon","props","Radio","children","description","style","className","getRootRef","restProps","platform","sizeY","REGULAR","IOS","disabled"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput {...restProps} className={styles['Radio__input']} type=\"radio\" />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__children']}>{children}</div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,sBAAsB;AACpE,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,mBAAmB,QAAQ,4CAA4C;AAGhF,IAAMC,eAAe;EACnBC,IAAI;AAA6B,GAChCP,QAAQ,CAACQ,OAAO,6BAClB;AAED,IAAMC,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAAoC,EAAK;EAC1D,oBACE;IAAK,KAAK,EAAC,4BAA4B;IAAC,OAAO,EAAC,WAAW;IAAC;EAAW,GAAKA,KAAK,gBAC/E;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,MAAM,EAAC,cAAc;IAAC,WAAW,EAAC,GAAG;IAAC,IAAI,EAAC;EAAM,EAAG,eACnF;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,KAAK;IAAC,SAAS,kBAAuB;IAAC,IAAI,EAAC;EAAc,EAAG,CACnF;AAEV,CAAC;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAGnB,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCqB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEL,KAAM;IACb,SAAS,EAAElB,UAAU,cAEnBuB,KAAK,KAAKnB,QAAQ,CAACoB,OAAO,IAAId,eAAe,CAACa,KAAK,CAAC,EACpDJ,SAAS,CACT;IACF,iBAAiB,EAAEG,QAAQ,KAAKjB,QAAQ,CAACoB,GAAG,GAAG,GAAG,GAAGnB,mBAAoB;IACzE,QAAQ,EAAEe,SAAS,CAACK,QAAS;IAC7B,UAAU,EAAEN;EAAW,gBAEvB,oBAAC,mBAAmB,eAAKC,SAAS;IAAE,SAAS,oBAAyB;IAAC,IAAI,EAAC;EAAO,GAAG,eACtF;IAAK,SAAS;EAA6B,gBACzC,oBAAC,SAAS;IAAC,SAAS;EAAwB,EAAG,eAC/C;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA4B,GAAEL,QAAQ,CAAO,EAC1Df,YAAY,CAACgB,WAAW,CAAC,iBACxB,oBAAC,QAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,CACF,CACG;AAEf,CAAC"}

package/dist/components/RangeSlider/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","names":["React","clamp","UniversalSlider","RangeSlider","onChange","min","max","defaultValue","step","props","isControlled","value","undefined","useState","localValue","setValue","start","end","useMemo","handleChange","useCallback","nextValue","event","disabled"],"sources":["../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { UniversalSlider, UniversalSliderProps } from './UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = [min, max],\n  step = 0,\n  ...props\n}: RangeSliderProps) => {\n  const isControlled = props.value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const [start, end] = props.value || localValue;\n  const value = React.useMemo(\n    () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n    [end, max, min, start],\n  );\n\n  const handleChange: RangeSliderProps['onChange'] = React.useCallback(\n    (nextValue: Value, event: TouchEvent) => {\n      if (props.disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n        return;\n      }\n      !isControlled && setValue(nextValue);\n      onChange && onChange(nextValue, event);\n    },\n    [props.disabled, value, isControlled, onChange],\n  );\n\n  return (\n    <UniversalSlider\n      {...props}\n      value={value}\n      onChange={handleChange}\n      min={min}\n      max={max}\n      step={step}\n    />\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,eAAe,QAA8B,mBAAmB;AAMzE;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAG,CAACF,GAAG,EAAEC,GAAG,CAAC;IAAA,iBACzBE,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACLC,KAAK;EAER,IAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,KAAKC,SAAS;EAE9C,sBAA+BZ,KAAK,CAACa,QAAQ,CAACN,YAAY,CAAC;IAAA;IAApDO,UAAU;IAAEC,QAAQ;EAC3B,YAAqBN,KAAK,CAACE,KAAK,IAAIG,UAAU;IAAA;IAAvCE,KAAK;IAAEC,GAAG;EACjB,IAAMN,KAAK,GAAGX,KAAK,CAACkB,OAAO,CACzB;IAAA,OAAM,CAACjB,KAAK,CAACe,KAAK,EAAEX,GAAG,EAAEC,GAAG,CAAC,EAAEL,KAAK,CAACgB,GAAG,EAAEZ,GAAG,EAAEC,GAAG,CAAC,CAAC;EAAA,CAAS,EAC7D,CAACW,GAAG,EAAEX,GAAG,EAAED,GAAG,EAAEW,KAAK,CAAC,CACvB;EAED,IAAMG,YAA0C,GAAGnB,KAAK,CAACoB,WAAW,CAClE,UAACC,SAAgB,EAAEC,KAAiB,EAAK;IACvC,IAAIb,KAAK,CAACc,QAAQ,IAAKZ,KAAK,CAAC,CAAC,CAAC,KAAKU,SAAS,CAAC,CAAC,CAAC,IAAIV,KAAK,CAAC,CAAC,CAAC,KAAKU,SAAS,CAAC,CAAC,CAAE,EAAE;MAC9E;IACF;IACA,CAACX,YAAY,IAAIK,QAAQ,CAACM,SAAS,CAAC;IACpCjB,QAAQ,IAAIA,QAAQ,CAACiB,SAAS,EAAEC,KAAK,CAAC;EACxC,CAAC,EACD,CAACb,KAAK,CAACc,QAAQ,EAAEZ,KAAK,EAAED,YAAY,EAAEN,QAAQ,CAAC,CAChD;EAED,oBACE,oBAAC,eAAe,eACVK,KAAK;IACT,KAAK,EAAEE,KAAM;IACb,QAAQ,EAAEQ,YAAa;IACvB,GAAG,EAAEd,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAEE;EAAK,GACX;AAEN,CAAC"}
+{"version":3,"file":"RangeSlider.js","names":["React","clamp","UniversalSlider","RangeSlider","onChange","min","max","defaultValue","step","props","isControlled","value","undefined","useState","localValue","setValue","start","end","useMemo","handleChange","useCallback","nextValue","event","disabled"],"sources":["../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { TouchEvent } from '../Touch/Touch';\nimport { UniversalSlider, UniversalSliderProps } from './UniversalSlider';\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = [min, max],\n  step = 0,\n  ...props\n}: RangeSliderProps) => {\n  const isControlled = props.value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const [start, end] = props.value || localValue;\n  const value = React.useMemo(\n    () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n    [end, max, min, start],\n  );\n\n  const handleChange: RangeSliderProps['onChange'] = React.useCallback(\n    (nextValue: Value, event: TouchEvent) => {\n      if (props.disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n        return;\n      }\n      !isControlled && setValue(nextValue);\n      onChange && onChange(nextValue, event);\n    },\n    [props.disabled, value, isControlled, onChange],\n  );\n\n  return (\n    <UniversalSlider\n      {...props}\n      value={value}\n      onChange={handleChange}\n      min={min}\n      max={max}\n      step={step}\n    />\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,SAASC,eAAe,QAA8B,mBAAmB;AAKzE;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAG,CAACF,GAAG,EAAEC,GAAG,CAAC;IAAA,iBACzBE,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACLC,KAAK;EAER,IAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,KAAKC,SAAS;EAE9C,sBAA+BZ,KAAK,CAACa,QAAQ,CAACN,YAAY,CAAC;IAAA;IAApDO,UAAU;IAAEC,QAAQ;EAC3B,YAAqBN,KAAK,CAACE,KAAK,IAAIG,UAAU;IAAA;IAAvCE,KAAK;IAAEC,GAAG;EACjB,IAAMN,KAAK,GAAGX,KAAK,CAACkB,OAAO,CACzB;IAAA,OAAM,CAACjB,KAAK,CAACe,KAAK,EAAEX,GAAG,EAAEC,GAAG,CAAC,EAAEL,KAAK,CAACgB,GAAG,EAAEZ,GAAG,EAAEC,GAAG,CAAC,CAAC;EAAA,CAAS,EAC7D,CAACW,GAAG,EAAEX,GAAG,EAAED,GAAG,EAAEW,KAAK,CAAC,CACvB;EAED,IAAMG,YAA0C,GAAGnB,KAAK,CAACoB,WAAW,CAClE,UAACC,SAAgB,EAAEC,KAAiB,EAAK;IACvC,IAAIb,KAAK,CAACc,QAAQ,IAAKZ,KAAK,CAAC,CAAC,CAAC,KAAKU,SAAS,CAAC,CAAC,CAAC,IAAIV,KAAK,CAAC,CAAC,CAAC,KAAKU,SAAS,CAAC,CAAC,CAAE,EAAE;MAC9E;IACF;IACA,CAACX,YAAY,IAAIK,QAAQ,CAACM,SAAS,CAAC;IACpCjB,QAAQ,IAAIA,QAAQ,CAACiB,SAAS,EAAEC,KAAK,CAAC;EACxC,CAAC,EACD,CAACb,KAAK,CAACc,QAAQ,EAAEZ,KAAK,EAAED,YAAY,EAAEN,QAAQ,CAAC,CAChD;EAED,oBACE,oBAAC,eAAe,eACVK,KAAK;IACT,KAAK,EAAEE,KAAM;IACb,QAAQ,EAAEQ,YAAa;IACvB,GAAG,EAAEd,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAEE;EAAK,GACX;AAEN,CAAC"}

package/dist/components/RangeSlider/UniversalSlider.d.ts

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

package/dist/components/RangeSlider/UniversalSlider.js

@@ -1,14 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["min", "max", "step", "value", "defaultValue", "onChange", "getRootRef", "disabled", "className"];
 import * as React from 'react';
-import { Touch } from '../Touch/Touch';
 import { classNames } from '@vkontakte/vkjs';
 import { rescale } from '../../helpers/math';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { useExternRef } from '../../hooks/useExternRef';
+import { SizeType } from '../../lib/adaptivity';
+import { Touch } from '../Touch/Touch';
+var sizeYClassNames = _defineProperty({
+  none: "vkuiSlider--sizeY-none"
+}, SizeType.COMPACT, "vkuiSlider--sizeY-compact");
 export var UniversalSlider = function UniversalSlider(_ref) {
   var _ref$min = _ref.min,
     min = _ref$min === void 0 ? 0 : _ref$min,
@@ -36,7 +40,8 @@ export var UniversalSlider = function UniversalSlider(_ref) {
   var thumbStart = React.useRef(null);
   var thumbEnd = React.useRef(null);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var offsetToValue = function offsetToValue(absolute) {
     return rescale(absolute, [0, gesture.containerWidth], [min, max], {
       step: step
@@ -110,7 +115,7 @@ export var UniversalSlider = function UniversalSlider(_ref) {
     onMove: onMove,
     onEnd: onEnd
   }, {
-    className: classNames("vkuiSlider", getSizeYClassName("vkuiSlider", sizeY), disabled && "vkuiSlider--disabled", className)
+    className: classNames("vkuiSlider", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && "vkuiSlider--disabled", className)
   }), /*#__PURE__*/React.createElement("div", {
     ref: container,
     className: "vkuiSlider__in"