@vkontakte/vkui 6.1.1 → 6.1.2

package/dist/cjs/components/Clickable/useState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/useState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,eAAO,MAAM,YAAY,KAAK,CAAC;AAsE/B,eAAO,MAAM,yBAAyB,qBAAwC,OAAO,KAAK,IAAI,cAE7F,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,uEAO3B;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,UAAU;;;EAwBzE"}
+{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/useState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AASD,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,eAAO,MAAM,YAAY,KAAK,CAAC;AAwE/B,eAAO,MAAM,yBAAyB,qBAAwC,OAAO,KAAK,IAAI,cAE7F,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,uEAO3B;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,UAAU;;;EAyBzE"}

package/dist/cjs/components/Clickable/useState.js

@@ -37,9 +37,9 @@ const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
 const ACTIVE_DELAY = 70;
 /**
  * Управляет наведением на компонент, игнорирует тач события
- */ function useHover({ hovered, hoverClassName, hasHover = true }) {
+ */ function useHover({ hovered, hoverClassName, hasHover = true, lockState }) {
     const [hoveredState, setHover] = _react.useState(false);
-    const hover = hasHover && (hovered || hoveredState) ? hoverClassName : undefined;
+    const hover = hasHover && !lockState && (hovered || hoveredState) ? hoverClassName : undefined;
     const onPointerEnter = (e)=>{
         if (e.pointerType === 'touch') {
             return;
@@ -57,11 +57,11 @@ const ACTIVE_DELAY = 70;
 }
 /**
  * Управляет активацией компонента
- */ function useActive({ activated, activeClassName, activeEffectDelay, hasActive = true }) {
+ */ function useActive({ activated, activeClassName, activeEffectDelay, hasActive = true, lockState }) {
     const [activatedState, setActivated] = (0, _useStateWithDelay.useStateWithDelay)(false);
     // Список нажатий которые не требуется отменять
     const pointersUp = _react.useMemo(()=>new Set(), []);
-    const active = hasActive && (activated || activatedState) ? activeClassName : undefined;
+    const active = hasActive && !lockState && (activated || activatedState) ? activeClassName : undefined;
     const onPointerDown = ()=>setActivated(true, ACTIVE_DELAY);
     const onPointerCancel = (e)=>{
         if (pointersUp.has(e.pointerId)) {
@@ -101,8 +101,9 @@ function useState(_param) {
     ]);
     const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();
     const props = _object_spread._({
-        hasHover: hasHover && !lockState,
-        hasActive: hasActive && !lockState
+        hasHover,
+        hasActive,
+        lockState
     }, restProps);
     const _useHover = useHover(_object_spread._({}, props)), { hover } = _useHover, hoverEvent = _object_without_properties._(_useHover, [
         "hover"

package/dist/cjs/components/Clickable/useState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/useState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Позволяет управлять activated-состоянием извне\n   */\n  activated?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n\n  /**\n   * Длительность показа `activated`-состояния\n   */\n  activeEffectDelay?: number;\n\n  /**\n   * Стиль подсветки active-состояния\n   */\n  activeClassName?: string;\n\n  /**\n   * Стиль подсветки hover-состояния\n   */\n  hoverClassName?: string;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nexport const ACTIVE_DELAY = 70;\n\n/**\n * Управляет наведением на компонент, игнорирует тач события\n */\nfunction useHover({ hovered, hoverClassName, hasHover = true }: StateProps) {\n  const [hoveredState, setHover] = React.useState(false);\n\n  const hover = hasHover && (hovered || hoveredState) ? hoverClassName : undefined;\n\n  const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n    if (e.pointerType === 'touch') {\n      return;\n    }\n\n    setHover(true);\n  };\n\n  const onPointerLeave = () => {\n    setHover(false);\n  };\n\n  return {\n    hover,\n    onPointerEnter: hasHover ? onPointerEnter : noop,\n    onPointerLeave: hasHover ? onPointerLeave : noop,\n  };\n}\n\n/**\n * Управляет активацией компонента\n */\nfunction useActive({\n  activated,\n  activeClassName,\n  activeEffectDelay,\n  hasActive = true,\n}: StateProps) {\n  const [activatedState, setActivated] = useStateWithDelay(false);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n  const active = hasActive && (activated || activatedState) ? activeClassName : undefined;\n\n  const onPointerDown = () => setActivated(true, ACTIVE_DELAY);\n  const onPointerCancel: React.PointerEventHandler = (e) => {\n    if (pointersUp.has(e.pointerId)) {\n      pointersUp.delete(e.pointerId);\n      return;\n    }\n\n    setActivated(false);\n  };\n\n  const onPointerUp: React.PointerEventHandler = (e) => {\n    pointersUp.add(e.pointerId);\n    setActivated(true);\n    setActivated(false, activeEffectDelay);\n  };\n\n  return {\n    active,\n    onPointerLeave: hasActive ? onPointerCancel : noop,\n    onPointerDown: hasActive ? onPointerDown : noop,\n    onPointerCancel: hasActive ? onPointerCancel : noop,\n    onPointerUp: hasActive ? onPointerUp : noop,\n  };\n}\n\nexport const ClickableLockStateContext = React.createContext<undefined | ((v: boolean) => void)>(\n  undefined,\n);\n\n/**\n * Блокирует стейт на всплытие\n */\nexport function useLockState() {\n  const setLockBubbling = React.useContext(ClickableLockStateContext) || noop;\n  const [lockState, setLockState] = React.useState(false);\n\n  const setLockBubblingImmediate = callMultiple(setLockState, setLockBubbling);\n\n  return [lockState, setLockBubbling, setLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента\n */\nexport function useState({ hasHover, hasActive, ...restProps }: StateProps) {\n  const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();\n\n  const props = {\n    hasHover: hasHover && !lockState,\n    hasActive: hasActive && !lockState,\n    ...restProps,\n  };\n\n  const { hover, ...hoverEvent } = useHover({ ...props });\n  const { active, ...activeEvent } = useActive(props);\n\n  const stateClassName = classNames(hover, active);\n  const handlers = mergeCalls(hoverEvent, activeEvent);\n\n  React.useEffect(() => {\n    setLockBubbling(!!stateClassName);\n  }, [setLockBubbling, stateClassName]);\n\n  return {\n    stateClassName,\n    setLockBubblingImmediate,\n    ...handlers,\n  };\n}\n"],"names":["ACTIVE_DELAY","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useLockState","useState","useHover","hovered","hoverClassName","hasHover","hoveredState","setHover","React","hover","undefined","onPointerEnter","e","pointerType","onPointerLeave","noop","useActive","activated","activeClassName","activeEffectDelay","hasActive","activatedState","setActivated","useStateWithDelay","pointersUp","useMemo","Set","active","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","createContext","setLockBubbling","useContext","lockState","setLockState","setLockBubblingImmediate","callMultiple","restProps","props","hoverEvent","activeEvent","stateClassName","classNames","handlers","mergeCalls","useEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Clickable/useState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Позволяет управлять activated-состоянием извне\n   */\n  activated?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n\n  /**\n   * Длительность показа `activated`-состояния\n   */\n  activeEffectDelay?: number;\n\n  /**\n   * Стиль подсветки active-состояния\n   */\n  activeClassName?: string;\n\n  /**\n   * Стиль подсветки hover-состояния\n   */\n  hoverClassName?: string;\n}\n\ninterface StateHookProps extends StateProps {\n  /**\n   * Блокирование активации состояний\n   */\n  lockState: boolean;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nexport const ACTIVE_DELAY = 70;\n\n/**\n * Управляет наведением на компонент, игнорирует тач события\n */\nfunction useHover({ hovered, hoverClassName, hasHover = true, lockState }: StateHookProps) {\n  const [hoveredState, setHover] = React.useState(false);\n\n  const hover = hasHover && !lockState && (hovered || hoveredState) ? hoverClassName : undefined;\n\n  const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n    if (e.pointerType === 'touch') {\n      return;\n    }\n\n    setHover(true);\n  };\n\n  const onPointerLeave = () => {\n    setHover(false);\n  };\n\n  return {\n    hover,\n    onPointerEnter: hasHover ? onPointerEnter : noop,\n    onPointerLeave: hasHover ? onPointerLeave : noop,\n  };\n}\n\n/**\n * Управляет активацией компонента\n */\nfunction useActive({\n  activated,\n  activeClassName,\n  activeEffectDelay,\n  hasActive = true,\n  lockState,\n}: StateHookProps) {\n  const [activatedState, setActivated] = useStateWithDelay(false);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n  const active =\n    hasActive && !lockState && (activated || activatedState) ? activeClassName : undefined;\n\n  const onPointerDown = () => setActivated(true, ACTIVE_DELAY);\n  const onPointerCancel: React.PointerEventHandler = (e) => {\n    if (pointersUp.has(e.pointerId)) {\n      pointersUp.delete(e.pointerId);\n      return;\n    }\n\n    setActivated(false);\n  };\n\n  const onPointerUp: React.PointerEventHandler = (e) => {\n    pointersUp.add(e.pointerId);\n    setActivated(true);\n    setActivated(false, activeEffectDelay);\n  };\n\n  return {\n    active,\n    onPointerLeave: hasActive ? onPointerCancel : noop,\n    onPointerDown: hasActive ? onPointerDown : noop,\n    onPointerCancel: hasActive ? onPointerCancel : noop,\n    onPointerUp: hasActive ? onPointerUp : noop,\n  };\n}\n\nexport const ClickableLockStateContext = React.createContext<undefined | ((v: boolean) => void)>(\n  undefined,\n);\n\n/**\n * Блокирует стейт на всплытие\n */\nexport function useLockState() {\n  const setLockBubbling = React.useContext(ClickableLockStateContext) || noop;\n  const [lockState, setLockState] = React.useState(false);\n\n  const setLockBubblingImmediate = callMultiple(setLockState, setLockBubbling);\n\n  return [lockState, setLockBubbling, setLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента\n */\nexport function useState({ hasHover, hasActive, ...restProps }: StateProps) {\n  const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();\n\n  const props = {\n    hasHover,\n    hasActive,\n    lockState,\n    ...restProps,\n  };\n\n  const { hover, ...hoverEvent } = useHover({ ...props });\n  const { active, ...activeEvent } = useActive(props);\n\n  const stateClassName = classNames(hover, active);\n  const handlers = mergeCalls(hoverEvent, activeEvent);\n\n  React.useEffect(() => {\n    setLockBubbling(!!stateClassName);\n  }, [setLockBubbling, stateClassName]);\n\n  return {\n    stateClassName,\n    setLockBubblingImmediate,\n    ...handlers,\n  };\n}\n"],"names":["ACTIVE_DELAY","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useLockState","useState","useHover","hovered","hoverClassName","hasHover","lockState","hoveredState","setHover","React","hover","undefined","onPointerEnter","e","pointerType","onPointerLeave","noop","useActive","activated","activeClassName","activeEffectDelay","hasActive","activatedState","setActivated","useStateWithDelay","pointersUp","useMemo","Set","active","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","createContext","setLockBubbling","useContext","setLockState","setLockBubblingImmediate","callMultiple","restProps","props","hoverEvent","activeEvent","stateClassName","classNames","handlers","mergeCalls","useEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/cjs/components/CustomScrollView/CustomScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAwB,MAAM,wBAAwB,CAAC;AAenF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC,EAC1B,mBAAmB;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,iJAU1B,qBAAqB,4CA8KvB,CAAC"}
+{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAwB,MAAM,wBAAwB,CAAC;AAenF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC,EAC1B,mBAAmB;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,iJAU1B,qBAAqB,4CAmLvB,CAAC"}

package/dist/cjs/components/CustomScrollView/CustomScrollView.js

@@ -18,6 +18,7 @@ const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _useEventListener = require("../../hooks/useEventListener");
 const _useExternRef = require("../../hooks/useExternRef");
+const _useResizeObserver = require("../../hooks/useResizeObserver");
 const _dom = require("../../lib/dom");
 const _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 const _utils = require("../../lib/utils");
@@ -55,6 +56,7 @@ const CustomScrollView = (_param)=>{
     const startY = _react.useRef(0);
     const trackerTop = _react.useRef(0);
     const boxRef = (0, _useExternRef.useExternRef)(externalBoxRef);
+    const boxContentRef = _react.useRef(null);
     const barY = _react.useRef(null);
     const trackerY = _react.useRef(null);
     const setTrackerPosition = (scrollTop)=>{
@@ -96,6 +98,7 @@ const CustomScrollView = (_param)=>{
         windowResize,
         window
     ]);
+    (0, _useResizeObserver.useResizeObserver)(boxContentRef, resize);
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
         var _trackerY_current;
         let style = (_trackerY_current = trackerY.current) === null || _trackerY_current === void 0 ? void 0 : _trackerY_current.style;
@@ -171,7 +174,11 @@ const CustomScrollView = (_param)=>{
                 tabIndex: -1,
                 ref: boxRef,
                 onScroll: scroll,
-                children: children
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    ref: boxContentRef,
+                    className: "vkuiCustomScrollView__box-content",
+                    children: children
+                })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: "vkuiCustomScrollView__barY",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport type { HasRootRef } from '../../types';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case true:\n      return styles['CustomScrollView--hasPointer-true'];\n    case false:\n      return styles['CustomScrollView--hasPointer-false'];\n    case undefined:\n    default:\n      return styles['CustomScrollView--hasPointer-none'];\n  }\n}\n\nexport interface CustomScrollViewProps\n  extends React.AllHTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement['className'];\n  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n  onScroll,\n  getRootRef,\n  ...restProps\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\n  const { hasPointer } = useAdaptivity();\n\n  const ratio = React.useRef(NaN);\n  const lastTrackerTop = React.useRef(0);\n  const clientHeight = React.useRef(0);\n  const trackerHeight = React.useRef(0);\n  const scrollHeight = React.useRef(0);\n  const transformProp = React.useRef('');\n  const startY = React.useRef(0);\n  const trackerTop = React.useRef(0);\n\n  const boxRef = useExternRef(externalBoxRef);\n\n  const barY = React.useRef<HTMLDivElement>(null);\n  const trackerY = React.useRef<HTMLDivElement>(null);\n\n  const setTrackerPosition = (scrollTop: number) => {\n    lastTrackerTop.current = scrollTop;\n    if (trackerY.current !== null) {\n      (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n  };\n\n  const resize = () => {\n    if (!boxRef.current || !barY.current || !trackerY.current) {\n      return;\n    }\n    const localClientHeight = boxRef.current.clientHeight;\n    const localScrollHeight = boxRef.current.scrollHeight;\n    const localRatio = localClientHeight / localScrollHeight;\n    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n    ratio.current = localRatio;\n    clientHeight.current = localClientHeight;\n    scrollHeight.current = localScrollHeight;\n    trackerHeight.current = localTrackerHeight;\n\n    if (localRatio >= 1) {\n      barY.current.style.display = 'none';\n    } else {\n      barY.current.style.display = '';\n      trackerY.current.style.height = `${localTrackerHeight}px`;\n      setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    }\n  };\n\n  const resizeHandler = useEventListener('resize', resize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (windowResize && window) {\n      resizeHandler.add(window);\n    }\n  }, [windowResize, window]);\n\n  useIsomorphicLayoutEffect(() => {\n    let style = trackerY.current?.style;\n    let prop = '';\n    if (style !== undefined) {\n      if ('transform' in style) {\n        prop = 'transform';\n      } else if ('webkitTransform' in style) {\n        prop = 'webkitTransform';\n      }\n    }\n    transformProp.current = prop;\n  }, []);\n\n  useIsomorphicLayoutEffect(resize);\n\n  const setScrollPositionFromTracker = (trackerTop: number) => {\n    const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n    }\n  };\n\n  const onMove = (e: MouseEvent) => {\n    e.preventDefault();\n    const diff = e.clientY - startY.current;\n    const position = Math.min(\n      Math.max(trackerTop.current + diff, 0),\n      clientHeight.current - trackerHeight.current,\n    );\n\n    setScrollPositionFromTracker(position);\n  };\n\n  const {\n    trackerVisible,\n    onTargetScroll,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n  const onUp = (e: MouseEvent) => {\n    e.preventDefault();\n\n    if (autoHideScrollbar) {\n      onTrackerDragStop();\n    }\n\n    unsubscribe();\n  };\n\n  const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    onScroll?.(event);\n  };\n\n  const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n  function subscribe(el: Document | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  const onDragStart = (e: React.MouseEvent) => {\n    e.preventDefault();\n    startY.current = e.clientY;\n    trackerTop.current = lastTrackerTop.current;\n\n    if (autoHideScrollbar) {\n      onTrackerDragStart();\n    }\n\n    subscribe(document);\n  };\n\n  return (\n    <div\n      className={classNames(className, styles['CustomScrollView'], hasPointerClassName(hasPointer))}\n      ref={getRootRef}\n      {...restProps}\n    >\n      <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n        {children}\n      </div>\n\n      <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n        <div\n          className={classNames(\n            styles['CustomScrollView__trackerY'],\n            !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomScrollView","hasPointerClassName","hasPointer","undefined","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","getRootRef","restProps","document","window","useDOM","useAdaptivity","ratio","React","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","useExternRef","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","useEventListener","useIsomorphicLayoutEffect","add","prop","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","useTrackerVisibility","onUp","unsubscribe","scroll","event","listeners","subscribe","el","forEach","l","remove","onDragStart","div","classNames","ref","tabIndex","onClick","stopPropagation","onMouseEnter","onMouseLeave","onMouseDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport type { HasRootRef } from '../../types';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case true:\n      return styles['CustomScrollView--hasPointer-true'];\n    case false:\n      return styles['CustomScrollView--hasPointer-false'];\n    case undefined:\n    default:\n      return styles['CustomScrollView--hasPointer-none'];\n  }\n}\n\nexport interface CustomScrollViewProps\n  extends React.AllHTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement['className'];\n  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n  onScroll,\n  getRootRef,\n  ...restProps\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\n  const { hasPointer } = useAdaptivity();\n\n  const ratio = React.useRef(NaN);\n  const lastTrackerTop = React.useRef(0);\n  const clientHeight = React.useRef(0);\n  const trackerHeight = React.useRef(0);\n  const scrollHeight = React.useRef(0);\n  const transformProp = React.useRef('');\n  const startY = React.useRef(0);\n  const trackerTop = React.useRef(0);\n\n  const boxRef = useExternRef(externalBoxRef);\n  const boxContentRef = React.useRef<HTMLDivElement>(null);\n\n  const barY = React.useRef<HTMLDivElement>(null);\n  const trackerY = React.useRef<HTMLDivElement>(null);\n\n  const setTrackerPosition = (scrollTop: number) => {\n    lastTrackerTop.current = scrollTop;\n    if (trackerY.current !== null) {\n      (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n  };\n\n  const resize = () => {\n    if (!boxRef.current || !barY.current || !trackerY.current) {\n      return;\n    }\n    const localClientHeight = boxRef.current.clientHeight;\n    const localScrollHeight = boxRef.current.scrollHeight;\n    const localRatio = localClientHeight / localScrollHeight;\n    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n    ratio.current = localRatio;\n    clientHeight.current = localClientHeight;\n    scrollHeight.current = localScrollHeight;\n    trackerHeight.current = localTrackerHeight;\n\n    if (localRatio >= 1) {\n      barY.current.style.display = 'none';\n    } else {\n      barY.current.style.display = '';\n      trackerY.current.style.height = `${localTrackerHeight}px`;\n      setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    }\n  };\n\n  const resizeHandler = useEventListener('resize', resize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (windowResize && window) {\n      resizeHandler.add(window);\n    }\n  }, [windowResize, window]);\n\n  useResizeObserver(boxContentRef, resize);\n\n  useIsomorphicLayoutEffect(() => {\n    let style = trackerY.current?.style;\n    let prop = '';\n    if (style !== undefined) {\n      if ('transform' in style) {\n        prop = 'transform';\n      } else if ('webkitTransform' in style) {\n        prop = 'webkitTransform';\n      }\n    }\n    transformProp.current = prop;\n  }, []);\n\n  useIsomorphicLayoutEffect(resize);\n\n  const setScrollPositionFromTracker = (trackerTop: number) => {\n    const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n    }\n  };\n\n  const onMove = (e: MouseEvent) => {\n    e.preventDefault();\n    const diff = e.clientY - startY.current;\n    const position = Math.min(\n      Math.max(trackerTop.current + diff, 0),\n      clientHeight.current - trackerHeight.current,\n    );\n\n    setScrollPositionFromTracker(position);\n  };\n\n  const {\n    trackerVisible,\n    onTargetScroll,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n  const onUp = (e: MouseEvent) => {\n    e.preventDefault();\n\n    if (autoHideScrollbar) {\n      onTrackerDragStop();\n    }\n\n    unsubscribe();\n  };\n\n  const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    onScroll?.(event);\n  };\n\n  const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n  function subscribe(el: Document | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  const onDragStart = (e: React.MouseEvent) => {\n    e.preventDefault();\n    startY.current = e.clientY;\n    trackerTop.current = lastTrackerTop.current;\n\n    if (autoHideScrollbar) {\n      onTrackerDragStart();\n    }\n\n    subscribe(document);\n  };\n\n  return (\n    <div\n      className={classNames(className, styles['CustomScrollView'], hasPointerClassName(hasPointer))}\n      ref={getRootRef}\n      {...restProps}\n    >\n      <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n        <div ref={boxContentRef} className={styles['CustomScrollView__box-content']}>\n          {children}\n        </div>\n      </div>\n\n      <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n        <div\n          className={classNames(\n            styles['CustomScrollView__trackerY'],\n            !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomScrollView","hasPointerClassName","hasPointer","undefined","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","getRootRef","restProps","document","window","useDOM","useAdaptivity","ratio","React","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","useExternRef","boxContentRef","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","useEventListener","useIsomorphicLayoutEffect","add","useResizeObserver","prop","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","useTrackerVisibility","onUp","unsubscribe","scroll","event","listeners","subscribe","el","forEach","l","remove","onDragStart","div","classNames","ref","tabIndex","onClick","stopPropagation","onMouseEnter","onMouseLeave","onMouseDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { AllHTMLAttributes } from 'react';
 import { HasComponent, HasRootRef } from '../../types';
-export interface FocusTrapProps<T extends HTMLElement = HTMLElement> extends React.AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
+export interface FocusTrapProps<T extends HTMLElement = HTMLElement> extends AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
     autoFocus?: boolean;
     restoreFocus?: boolean | (() => boolean);
     timeout?: number;

package/dist/cjs/components/FocusTrap/FocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,sIASnB,eAAe,CAAC,CAAC,4CA0InB,CAAC"}
+{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAW9D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC1B,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,sIASnB,eAAe,CAAC,CAAC,4CA2KnB,CAAC"}

package/dist/cjs/components/FocusTrap/FocusTrap.js

@@ -8,12 +8,11 @@ Object.defineProperty(exports, "FocusTrap", {
         return FocusTrap;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react = require("react");
 const _useExternRef = require("../../hooks/useExternRef");
 const _accessibility = require("../../lib/accessibility");
 const _dom = require("../../lib/dom");
@@ -31,15 +30,20 @@ const FocusTrap = (_param)=>{
         "children"
     ]);
     const ref = (0, _useExternRef.useExternRef)(getRootRef);
-    const { keyboardInput } = _react.useContext(_AppRootContext.AppRootContext);
-    const focusableNodesRef = _react.useRef([]);
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function collectFocusableNodesRef() {
-        if (!ref.current) {
-            return;
+    const { document } = (0, _dom.useDOM)();
+    const { keyboardInput } = (0, _react.useContext)(_AppRootContext.AppRootContext);
+    const focusableNodesRef = (0, _react.useRef)([]);
+    const focusNodeByIndex = (nodeIndex)=>{
+        const element = focusableNodesRef.current[nodeIndex];
+        if (element) {
+            element.focus();
         }
-        const nodes = [];
+    };
+    const recalculateFocusableNodesRef = (parentNode)=>{
         // eslint-disable-next-line no-restricted-properties
-        ref.current.querySelectorAll(FOCUSABLE_ELEMENTS).forEach((focusableEl)=>{
+        const newFocusableElements = parentNode.querySelectorAll(FOCUSABLE_ELEMENTS);
+        const nodes = [];
+        newFocusableElements.forEach((focusableEl)=>{
             const { display, visibility } = getComputedStyle(focusableEl);
             if (display !== 'none' && visibility !== 'hidden') {
                 nodes.push(focusableEl);
@@ -47,11 +51,32 @@ const FocusTrap = (_param)=>{
         });
         if (nodes.length === 0) {
             // Чтобы фокус был хотя бы на родителе
-            nodes.push(ref.current);
+            nodes.push(parentNode);
         }
         focusableNodesRef.current = nodes;
+    };
+    const onMutateParentHandler = (parentNode)=>{
+        recalculateFocusableNodesRef(parentNode);
+        if (document) {
+            const activeElement = document.activeElement;
+            const currentElementIndex = Math.max(document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1, 0);
+            focusNodeByIndex(currentElementIndex);
+        }
+    };
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function collectFocusableNodesRef() {
+        if (!ref.current) {
+            return;
+        }
+        const parentNode = ref.current;
+        const observer = new MutationObserver(()=>onMutateParentHandler(parentNode));
+        observer.observe(ref.current, {
+            subtree: true,
+            childList: true
+        });
+        recalculateFocusableNodesRef(parentNode);
+        return ()=>observer.disconnect();
     }, [
-        children
+        ref
     ]);
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function tryToAutoFocusToFirstNode() {
         if (!ref.current || !autoFocus || !keyboardInput) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  timeout?: number;\n  onClose?: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusableNodesRef = React.useRef<HTMLElement[]>([]);\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n\n      const nodes: HTMLElement[] = [];\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS).forEach((focusableEl) => {\n        const { display, visibility } = getComputedStyle(focusableEl);\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl);\n        }\n      });\n\n      if (nodes.length === 0) {\n        // Чтобы фокус был хотя бы на родителе\n        nodes.push(ref.current);\n      }\n\n      focusableNodesRef.current = nodes;\n    },\n    [children],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || !keyboardInput) {\n        return;\n      }\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, keyboardInput],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      if (!ref.current || !restoreFocus) {\n        return;\n      }\n\n      const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n      return () => {\n        const shouldRestoreFocus =\n          typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n        if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n          return;\n        }\n\n        setTimeout(() => {\n          if (restoreFocusTo) {\n            restoreFocusTo.focus();\n          }\n        }, timeout);\n      };\n    },\n    [restoreFocus, timeout],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","keyboardInput","React","useContext","AppRootContext","focusableNodesRef","useRef","useIsomorphicLayoutEffect","collectFocusableNodesRef","current","nodes","querySelectorAll","forEach","focusableEl","display","visibility","getComputedStyle","push","length","tryToAutoFocusToFirstNode","autoFocusToFirstNode","activeElement","getActiveElementByAnotherElement","contains","focus","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","isHTMLElement","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","document","addEventListener","capture","removeEventListener","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useContext, useRef } from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n  useDOM,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  timeout?: number;\n  onClose?: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n  const { document } = useDOM();\n\n  const { keyboardInput } = useContext(AppRootContext);\n  const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n  const focusNodeByIndex = (nodeIndex: number) => {\n    const element = focusableNodesRef.current[nodeIndex];\n\n    if (element) {\n      element.focus();\n    }\n  };\n\n  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n    // eslint-disable-next-line no-restricted-properties\n    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n    const nodes: HTMLElement[] = [];\n    newFocusableElements.forEach((focusableEl) => {\n      const { display, visibility } = getComputedStyle(focusableEl);\n      if (display !== 'none' && visibility !== 'hidden') {\n        nodes.push(focusableEl);\n      }\n    });\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(parentNode);\n    }\n    focusableNodesRef.current = nodes;\n  };\n\n  const onMutateParentHandler = (parentNode: HTMLElement) => {\n    recalculateFocusableNodesRef(parentNode);\n\n    if (document) {\n      const activeElement = document.activeElement as HTMLElement;\n      const currentElementIndex = Math.max(\n        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n        0,\n      );\n      focusNodeByIndex(currentElementIndex);\n    }\n  };\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n      const parentNode = ref.current;\n      const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n      });\n      recalculateFocusableNodesRef(parentNode);\n      return () => observer.disconnect();\n    },\n    [ref],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || !keyboardInput) {\n        return;\n      }\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, keyboardInput],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      if (!ref.current || !restoreFocus) {\n        return;\n      }\n\n      const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n      return () => {\n        const shouldRestoreFocus =\n          typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n        if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n          return;\n        }\n\n        setTimeout(() => {\n          if (restoreFocusTo) {\n            restoreFocusTo.focus();\n          }\n        }, timeout);\n      };\n    },\n    [restoreFocus, timeout],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","document","useDOM","keyboardInput","useContext","AppRootContext","focusableNodesRef","useRef","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","useIsomorphicLayoutEffect","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","getActiveElementByAnotherElement","contains","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","isHTMLElement","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","addEventListener","capture","removeEventListener","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;uBA5ByC;8BACzB;+BAC6B;qBAOnD;2CACmC;gCAEX;AAE/B,MAAMC,qBAA6BC,sCAAuB,CAACC,IAAI;AAcxD,MAAMH,YAAY;QAAsC,EAC7DI,YAAY,KAAK,EACjBC,OAAO,EACPC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,UAAU,CAAC,EACXC,UAAU,EACVC,QAAQ,EAEU,WADfC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,MAAMC,IAAAA,0BAAY,EAAIJ;IAC5B,MAAM,EAAEK,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAE3B,MAAM,EAAEC,aAAa,EAAE,GAAGC,IAAAA,iBAAU,EAACC,8BAAc;IACnD,MAAMC,oBAAoBC,IAAAA,aAAM,EAAgB,EAAE;IAElD,MAAMC,mBAAmB,CAACC;QACxB,MAAMC,UAAUJ,kBAAkBK,OAAO,CAACF,UAAU;QAEpD,IAAIC,SAAS;YACXA,QAAQE,KAAK;QACf;IACF;IAEA,MAAMC,+BAA+B,CAACC;QACpC,oDAAoD;QACpD,MAAMC,uBAAuBD,WAAWE,gBAAgB,CAAc5B;QAEtE,MAAM6B,QAAuB,EAAE;QAC/BF,qBAAqBG,OAAO,CAAC,CAACC;YAC5B,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,iBAAiBH;YACjD,IAAIC,YAAY,UAAUC,eAAe,UAAU;gBACjDJ,MAAMM,IAAI,CAACJ;YACb;QACF;QAEA,IAAIF,MAAMO,MAAM,KAAK,GAAG;YACtB,sCAAsC;YACtCP,MAAMM,IAAI,CAACT;QACb;QACAR,kBAAkBK,OAAO,GAAGM;IAC9B;IAEA,MAAMQ,wBAAwB,CAACX;QAC7BD,6BAA6BC;QAE7B,IAAIb,UAAU;YACZ,MAAMyB,gBAAgBzB,SAASyB,aAAa;YAC5C,MAAMC,sBAAsBC,KAAKC,GAAG,CAClC5B,SAASyB,aAAa,GAAGpB,kBAAkBK,OAAO,CAACmB,OAAO,CAACJ,iBAAiB,CAAC,GAC7E;YAEFlB,iBAAiBmB;QACnB;IACF;IAEAI,IAAAA,oDAAyB,EACvB,SAASC;QACP,IAAI,CAACjC,IAAIY,OAAO,EAAE;YAChB;QACF;QACA,MAAMG,aAAaf,IAAIY,OAAO;QAC9B,MAAMsB,WAAW,IAAIC,iBAAiB,IAAMT,sBAAsBX;QAClEmB,SAASE,OAAO,CAACpC,IAAIY,OAAO,EAAE;YAC5ByB,SAAS;YACTC,WAAW;QACb;QACAxB,6BAA6BC;QAC7B,OAAO,IAAMmB,SAASK,UAAU;IAClC,GACA;QAACvC;KAAI;IAGPgC,IAAAA,oDAAyB,EACvB,SAASQ;QACP,IAAI,CAACxC,IAAIY,OAAO,IAAI,CAAClB,aAAa,CAACU,eAAe;YAChD;QACF;QACA,MAAMqC,uBAAuB;YAC3B,IAAI,CAACzC,IAAIY,OAAO,IAAI,CAACL,kBAAkBK,OAAO,CAACa,MAAM,EAAE;gBACrD;YACF;YACA,MAAME,gBAAgBe,IAAAA,qCAAgC,EAAC1C,IAAIY,OAAO;YAClE,IAAI,CAAC+B,IAAAA,aAAQ,EAAC3C,IAAIY,OAAO,EAAEe,gBAAgB;gBACzCpB,kBAAkBK,OAAO,CAAC,EAAE,CAACC,KAAK;YACpC;QACF;QACA,MAAM+B,YAAYC,WAAWJ,sBAAsB7C;QACnD,OAAO;YACLkD,aAAaF;QACf;IACF,GACA;QAAClD;QAAWE;QAASQ;KAAc;IAGrC4B,IAAAA,oDAAyB,EACvB,SAASe;QACP,IAAI,CAAC/C,IAAIY,OAAO,IAAI,CAACjB,cAAc;YACjC;QACF;QAEA,MAAMqD,iBAAiBN,IAAAA,qCAAgC,EAAC1C,IAAIY,OAAO;QAEnE,OAAO;YACL,MAAMqC,qBACJ,OAAOtD,iBAAiB,aAAaA,iBAAiBA;YAExD,IAAI,CAACsD,sBAAsB,CAACC,IAAAA,kBAAa,EAACF,iBAAiB;gBACzD;YACF;YAEAH,WAAW;gBACT,IAAIG,gBAAgB;oBAClBA,eAAenC,KAAK;gBACtB;YACF,GAAGjB;QACL;IACF,GACA;QAACD;QAAcC;KAAQ;IAGzBoC,IAAAA,oDAAyB,EAAC;QACxB,IAAI,CAAChC,IAAIY,OAAO,EAAE;YAChB;QACF;QAEA,MAAMuC,oBAAoB,CAACC;YACzB,MAAMC,mBAAmBC,IAAAA,yBAAU,EAACF;YAEpC,OAAQC;gBACN,KAAKE,mBAAI,CAACC,GAAG;oBAAE;wBACb,IAAI,CAACjD,kBAAkBK,OAAO,CAACa,MAAM,EAAE;4BACrC,OAAO;wBACT;wBAEA,MAAMgC,UAAUlD,kBAAkBK,OAAO,CAACa,MAAM,GAAG;wBACnD,MAAMiC,YAAYnD,kBAAkBK,OAAO,CAAC+C,SAAS,CAAC,CAACC,OAASA,SAASR,MAAMS,MAAM;wBAErF,MAAMC,uBACJJ,cAAc,CAAC,KAAMA,cAAcD,WAAW,CAACL,MAAMW,QAAQ;wBAE/D,IAAID,wBAAyBJ,cAAc,KAAKN,MAAMW,QAAQ,EAAG;4BAC/DX,MAAMY,cAAc;4BAEpB,MAAMJ,OAAOrD,kBAAkBK,OAAO,CAACkD,uBAAuB,IAAIL,QAAQ;4BAE1E,IAAIG,SAASlB,IAAAA,qCAAgC,EAACkB,OAAO;gCACnDA,KAAK/C,KAAK;4BACZ;4BAEA,OAAO;wBACT;wBAEA;oBACF;gBACA,KAAK0C,mBAAI,CAACU,MAAM;oBAAE;wBAChB,IAAIxE,SAAS;4BACX2D,MAAMY,cAAc;4BACpBvE;wBACF;oBACF;YACF;YAEA,OAAO;QACT;QAEA,MAAMyE,MAAMC,IAAAA,cAAS,EAACnE,IAAIY,OAAO,EAAEV,QAAQ;QAC3CgE,IAAIE,gBAAgB,CAAC,WAAWjB,mBAAmB;YACjDkB,SAAS;QACX;QACA,OAAO;YACLH,IAAII,mBAAmB,CAAC,WAAWnB,mBAAmB;QACxD;IACF,GAAG;QAAC1D;QAASO;KAAI;IAEjB,qBACE,qBAACR;QAAU+E,UAAU,CAAC;QAAGvE,KAAKA;OAASD;kBACpCD;;AAGP"}

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

@@ -3,5 +3,5 @@ export type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-export declare const Select: <OptionT extends CustomSelectOptionInterface>({ children, ...props }: SelectProps<OptionT>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <OptionT extends CustomSelectOptionInterface>({ children, className, ...props }: SelectProps<OptionT>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,wEAGhB,YAAY,OAAO,CAAC,4CAgDtB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,mFAIhB,YAAY,OAAO,CAAC,4CAqDtB,CAAC"}

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

@@ -14,12 +14,14 @@ const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
+const _vkjs = require("@vkontakte/vkjs");
+const _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditionalRender");
 const _CustomSelect = require("../CustomSelect/CustomSelect");
 const _NativeSelect = require("../NativeSelect/NativeSelect");
 const Select = (_param)=>{
-    var { children } = _param, props = _object_without_properties._(_param, [
-        "children"
+    var { children, className } = _param, props = _object_without_properties._(_param, [
+        "children",
+        "className"
     ]);
     const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode } = props, restProps = _object_without_properties._(props, [
         "options",
@@ -48,12 +50,16 @@ const Select = (_param)=>{
         "after",
         "mode"
     ]);
-    const hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
+    const { deviceType } = (0, _useAdaptivityConditionalRender.useAdaptivityConditionalRender)();
     const nativeProps = restProps;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
         children: [
-            (hasPointer === undefined || hasPointer) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, _object_spread._({}, props)),
-            (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_NativeSelect.NativeSelect, _object_spread_props._(_object_spread._({}, nativeProps), {
+            deviceType.desktop && /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, _object_spread._({
+                className: (0, _vkjs.classNames)(className, deviceType.desktop.className)
+            }, props)),
+            deviceType.mobile && /*#__PURE__*/ (0, _jsxruntime.jsx)(_NativeSelect.NativeSelect, _object_spread_props._(_object_spread._({
+                className: (0, _vkjs.classNames)(className, deviceType.mobile.className)
+            }, nativeProps), {
                 children: options.map(({ label, value })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
                         value: value,
                         children: label

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  ...props\n}: SelectProps<OptionT>) => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    ...restProps\n  } = props;\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...nativeProps}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","hasPointer","useAdaptivityHasPointer","nativeProps","React","Fragment","undefined","CustomSelect","NativeSelect","map","label","value","option"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;;;;;iEAdU;yCACiB;8BAMjC;8BAC8C;AAM9C,MAAMA,SAAS;QAA8C,EAClEC,QAAQ,EAEa,WADlBC;QADHD;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,yCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAME,aAAaC,IAAAA,gDAAuB;IAE1C,MAAMC,cAAyEH;IAE/E,qBACE,sBAACI,OAAMC,QAAQ;;YACXJ,CAAAA,eAAeK,aAAaL,UAAS,mBAAM,qBAACM,0BAAY,uBAAKjC;YAC7D2B,CAAAA,eAAeK,aAAa,CAACL,UAAS,mBACtC,qBAACO,0BAAY,8CAAKL;0BACf5B,QAAQkC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,qBAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>) => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          {...nativeProps}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","deviceType","useAdaptivityConditionalRender","nativeProps","React","Fragment","desktop","CustomSelect","classNames","mobile","NativeSelect","map","label","value","option"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;;;;;iEAfU;sBACI;gDACoB;8BAMxC;8BAC8C;AAM9C,MAAMA,SAAS;QAA8C,EAClEC,QAAQ,EACRC,SAAS,EAEY,WADlBC;QAFHF;QACAC;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,yCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAM,EAAEE,UAAU,EAAE,GAAGC,IAAAA,8DAA8B;IAErD,MAAMC,cAAyEH;IAE/E,qBACE,sBAACI,OAAMC,QAAQ;;YACZJ,WAAWK,OAAO,kBACjB,qBAACC,0BAAY;gBAAClC,WAAWmC,IAAAA,gBAAU,EAACnC,WAAW4B,WAAWK,OAAO,CAACjC,SAAS;eAAOC;YAEnF2B,WAAWQ,MAAM,kBAChB,qBAACC,0BAAY;gBACXrC,WAAWmC,IAAAA,gBAAU,EAACnC,WAAW4B,WAAWQ,MAAM,CAACpC,SAAS;eACxD8B;0BAEH5B,QAAQoC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,qBAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD"}

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

@@ -1,15 +1,26 @@
 import { HTMLAttributesWithRootRef } from '../../types';
-export declare const ALLOWED_SIZES: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"];
-type Size = (typeof ALLOWED_SIZES)[number];
+export declare const CUSTOM_CSS_TOKEN_FOR_USER_GAP = "--vkui_internal--Spacing_gap";
+export declare const sizesClassNames: {
+    '3xs': string;
+    '2xs': string;
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+};
+export type SpacingSize = keyof typeof sizesClassNames;
 export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Высота спэйсинга
      */
-    size?: number | Size;
+    size?: number | SpacingSize;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export declare const Spacing: ({ size, style: styleProp, ...restProps }: SpacingProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Spacing: ({ size, style, className, ...restProps }: SpacingProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Spacing.d.ts.map

package/dist/cjs/components/Spacing/Spacing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,eAAO,MAAM,aAAa,yEAWhB,CAAC;AACX,KAAK,IAAI,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3C,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,6CAAoD,YAAY,4CAOnF,CAAC"}
+{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,eAAO,MAAM,6BAA6B,iCAAiC,CAAC;AAE5E,eAAO,MAAM,eAAe;;;;;;;;;;;CAW3B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,eAAe,CAAC;AAEvD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC7B;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,6CAAoD,YAAY,4CAqBnF,CAAC"}

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

@@ -9,52 +9,59 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    ALLOWED_SIZES: function() {
-        return ALLOWED_SIZES;
+    CUSTOM_CSS_TOKEN_FOR_USER_GAP: function() {
+        return CUSTOM_CSS_TOKEN_FOR_USER_GAP;
     },
     Spacing: function() {
         return Spacing;
+    },
+    sizesClassNames: function() {
+        return sizesClassNames;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _vkjs = require("@vkontakte/vkjs");
 const _RootComponent = require("../RootComponent/RootComponent");
-const ALLOWED_SIZES = [
-    '3xs',
-    '2xs',
-    'xs',
-    's',
-    'm',
-    'l',
-    'xl',
-    '2xl',
-    '3xl',
-    '4xl'
-];
+const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';
+const sizesClassNames = {
+    '3xs': "vkuiSpacing--3xs",
+    '2xs': "vkuiSpacing--2xs",
+    'xs': "vkuiSpacing--xs",
+    's': "vkuiSpacing--s",
+    'm': "vkuiSpacing--m",
+    'l': "vkuiSpacing--l",
+    'xl': "vkuiSpacing--xl",
+    '2xl': "vkuiSpacing--2xl",
+    '3xl': "vkuiSpacing--3xl",
+    '4xl': "vkuiSpacing--4xl"
+};
 const Spacing = (_param)=>{
-    var { size = 'm', style: styleProp } = _param, restProps = _object_without_properties._(_param, [
+    var { size = 'm', style, className } = _param, restProps = _object_without_properties._(_param, [
         "size",
-        "style"
+        "style",
+        "className"
     ]);
-    const style = _object_spread._({}, getSizeStyle(size), styleProp);
+    if (typeof size === 'string') {
+        className = className ? (0, _vkjs.classNames)(sizesClassNames[size], className) : sizesClassNames[size];
+    } else {
+        if (style) {
+            // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties
+            style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;
+        } else {
+            // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties
+            style = {
+                [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size
+            };
+        }
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        baseClassName: "vkuiSpacing",
-        style: style
+        style: style,
+        className: className,
+        baseClassName: "vkuiSpacing"
     }));
 };
-function getSizeStyle(size) {
-    const sizeValue = getSizeValue(size);
-    return {
-        height: sizeValue,
-        padding: `calc(${sizeValue} / 2px) 0`
-    };
-}
-function getSizeValue(size) {
-    return typeof size === 'string' ? `var(--vkui--spacing_size_${size})` : size;
-}
 
 //# sourceMappingURL=Spacing.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const ALLOWED_SIZES = [\n  '3xs',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n] as const;\ntype Size = (typeof ALLOWED_SIZES)[number];\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | Size;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style: styleProp, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    ...getSizeStyle(size),\n    ...styleProp,\n  };\n\n  return <RootComponent {...restProps} baseClassName={styles['Spacing']} style={style} />;\n};\n\nfunction getSizeStyle(size: number | Size): React.CSSProperties {\n  const sizeValue = getSizeValue(size);\n\n  return {\n    height: sizeValue,\n    padding: `calc(${sizeValue} / 2px) 0`,\n  };\n}\n\nfunction getSizeValue(size: number | Size): `var(--vkui--spacing_size_${Size})` | number {\n  return typeof size === 'string' ? `var(--vkui--spacing_size_${size})` : size;\n}\n"],"names":["ALLOWED_SIZES","Spacing","size","style","styleProp","restProps","getSizeStyle","RootComponent","baseClassName","sizeValue","getSizeValue","height","padding"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,aAAa;eAAbA;;IAuBAC,OAAO;eAAPA;;;;;;;;iEA5BU;+BAEO;AAGvB,MAAMD,gBAAgB;IAC3B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAYM,MAAMC,UAAU;QAAC,EAAEC,OAAO,GAAG,EAAEC,OAAOC,SAAS,EAA8B,WAAzBC;QAAjCH;QAAYC;;IACpC,MAAMA,QAA6B,qBAC9BG,aAAaJ,OACbE;IAGL,qBAAO,qBAACG,4BAAa,8CAAKF;QAAWG,aAAa;QAAqBL,OAAOA;;AAChF;AAEA,SAASG,aAAaJ,IAAmB;IACvC,MAAMO,YAAYC,aAAaR;IAE/B,OAAO;QACLS,QAAQF;QACRG,SAAS,CAAC,KAAK,EAAEH,UAAU,SAAS,CAAC;IACvC;AACF;AAEA,SAASC,aAAaR,IAAmB;IACvC,OAAO,OAAOA,SAAS,WAAW,CAAC,yBAAyB,EAAEA,KAAK,CAAC,CAAC,GAAGA;AAC1E"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';\n\nexport const sizesClassNames = {\n  '3xs': styles['Spacing--3xs'],\n  '2xs': styles['Spacing--2xs'],\n  'xs': styles['Spacing--xs'],\n  's': styles['Spacing--s'],\n  'm': styles['Spacing--m'],\n  'l': styles['Spacing--l'],\n  'xl': styles['Spacing--xl'],\n  '2xl': styles['Spacing--2xl'],\n  '3xl': styles['Spacing--3xl'],\n  '4xl': styles['Spacing--4xl'],\n};\n\nexport type SpacingSize = keyof typeof sizesClassNames;\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | SpacingSize;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style, className, ...restProps }: SpacingProps) => {\n  if (typeof size === 'string') {\n    className = className ? classNames(sizesClassNames[size], className) : sizesClassNames[size];\n  } else {\n    if (style) {\n      // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties\n      style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;\n    } else {\n      // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties\n      style = { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size };\n    }\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={style}\n      className={className}\n      baseClassName={styles['Spacing']}\n    />\n  );\n};\n"],"names":["CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","sizesClassNames","size","style","className","restProps","classNames","RootComponent","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,6BAA6B;eAA7BA;;IA0BAC,OAAO;eAAPA;;IAxBAC,eAAe;eAAfA;;;;;;;sBAPc;+BAEG;AAGvB,MAAMF,gCAAgC;AAEtC,MAAME,kBAAkB;IAC7B,KAAK;IACL,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAaO,MAAMD,UAAU;QAAC,EAAEE,OAAO,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAA8B,WAAzBC;QAAjCH;QAAYC;QAAOC;;IAC3C,IAAI,OAAOF,SAAS,UAAU;QAC5BE,YAAYA,YAAYE,IAAAA,gBAAU,EAACL,eAAe,CAACC,KAAK,EAAEE,aAAaH,eAAe,CAACC,KAAK;IAC9F,OAAO;QACL,IAAIC,OAAO;YACT,kFAAkF;YAClFA,KAAK,CAACJ,8BAA8B,GAAGG;QACzC,OAAO;YACL,kFAAkF;YAClFC,QAAQ;gBAAE,CAACJ,8BAA8B,EAAEG;YAAK;QAClD;IACF;IAEA,qBACE,qBAACK,4BAAa,8CACRF;QACJF,OAAOA;QACPC,WAAWA;QACXI,aAAa;;AAGnB"}

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

@@ -4,6 +4,11 @@ export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProp
     mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';
     appearance?: 'accent' | 'neutral';
     direction?: 'row' | 'column';
+    /**
+     * Задаёт `50%` закругления для контейнера.
+     *
+     * > Note: игнорируется при передаче `children`.
+     */
     rounded?: boolean;
 }
 /**

package/dist/cjs/components/ToolButton/ToolButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyB/D,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,mHAWpB,eAAe,4CA0BjB,CAAC"}
+{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyB/D,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,mHAWpB,eAAe,4CA0BjB,CAAC"}