@vkontakte/vkui 5.4.2 → 5.5.0

package/dist/cjs/components/Counter/Counter.js

@@ -8,14 +8,14 @@ Object.defineProperty(exports, "Counter", {
         return Counter;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _caption = require("../Typography/Caption/Caption");
-var _headline = require("../Typography/Headline/Headline");
+var _Caption = require("../Typography/Caption/Caption");
+var _Headline = require("../Typography/Headline/Headline");
 var modeClassNames = {
     secondary: "vkuiCounter--mode-secondary",
     primary: "vkuiCounter--mode-primary",
@@ -28,7 +28,7 @@ var sizeClassNames = {
     m: "vkuiCounter--size-m"
 };
 var Counter = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "inherit" : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, children = _param.children, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "inherit" : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, children = _param.children, className = _param.className, restProps = _object_without_properties._(_param, [
         "mode",
         "size",
         "children",
@@ -37,9 +37,9 @@ var Counter = function(_param) {
     if (_react.Children.count(children) === 0) {
         return null;
     }
-    var CounterTypography = size === "s" ? _caption.Caption : _headline.Headline;
+    var CounterTypography = size === "s" ? _Caption.Caption : _Headline.Headline;
     var counterLevel = size === "s" ? "1" : "2";
-    return /*#__PURE__*/ _react.createElement(CounterTypography, _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement(CounterTypography, _object_spread_props._(_object_spread._({}, restProps), {
         Component: "span",
         className: (0, _vkjs.classNames)("vkuiInternalCounter", "vkuiCounter", modeClassNames[mode], sizeClassNames[size], className),
         level: counterLevel

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n  secondary: styles['Counter--mode-secondary'],\n  primary: styles['Counter--mode-primary'],\n  prominent: styles['Counter--mode-prominent'],\n  contrast: styles['Counter--mode-contrast'],\n  inherit: styles['Counter--mode-inherit'],\n};\n\nconst sizeClassNames = {\n  s: styles['Counter--size-s'],\n  m: styles['Counter--size-m'],\n};\n\nexport interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то\n   * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется\n   * режим `secondary`\n   */\n  mode?: 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit';\n  size?: 's' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n  mode = 'inherit',\n  size = 'm',\n  children,\n  className,\n  ...restProps\n}: CounterProps) => {\n  if (React.Children.count(children) === 0) {\n    return null;\n  }\n\n  const CounterTypography = size === 's' ? Caption : Headline;\n  const counterLevel = size === 's' ? '1' : '2';\n\n  return (\n    <CounterTypography\n      {...restProps}\n      Component=\"span\"\n      className={classNames(\n        'vkuiInternalCounter',\n        styles['Counter'],\n        modeClassNames[mode],\n        sizeClassNames[size],\n        className,\n      )}\n      level={counterLevel}\n    >\n      {children}\n    </CounterTypography>\n  );\n};\n"],"names":["Counter","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","mode","size","children","className","restProps","React","Children","count","CounterTypography","Caption","Headline","counterLevel","Component","classNames","level"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;;2DAhCU;oBACI;uBACH;wBACC;AAGzB,IAAMC,iBAAiB;IACrBC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,IAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAeO,IAAMT,UAAU,iBAMH;6BALlBU,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,OAAMC,QAAQ,CAACC,KAAK,CAACL,cAAc,GAAG;QACxC,OAAO,IAAI;IACb,CAAC;IAED,IAAMM,oBAAoBP,SAAS,MAAMQ,gBAAO,GAAGC,kBAAQ;IAC3D,IAAMC,eAAeV,SAAS,MAAM,MAAM,GAAG;IAE7C,qBACE,qBAACO,wDACKJ;QACJQ,WAAU;QACVT,WAAWU,IAAAA,gBAAU,EACnB,sCAEAtB,cAAc,CAACS,KAAK,EACpBH,cAAc,CAACI,KAAK,EACpBE;QAEFW,OAAOH;QAENT;AAGP"}
+{"version":3,"sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n  secondary: styles['Counter--mode-secondary'],\n  primary: styles['Counter--mode-primary'],\n  prominent: styles['Counter--mode-prominent'],\n  contrast: styles['Counter--mode-contrast'],\n  inherit: styles['Counter--mode-inherit'],\n};\n\nconst sizeClassNames = {\n  s: styles['Counter--size-s'],\n  m: styles['Counter--size-m'],\n};\n\nexport interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то\n   * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется\n   * режим `secondary`\n   */\n  mode?: 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit';\n  size?: 's' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n  mode = 'inherit',\n  size = 'm',\n  children,\n  className,\n  ...restProps\n}: CounterProps) => {\n  if (React.Children.count(children) === 0) {\n    return null;\n  }\n\n  const CounterTypography = size === 's' ? Caption : Headline;\n  const counterLevel = size === 's' ? '1' : '2';\n\n  return (\n    <CounterTypography\n      {...restProps}\n      Component=\"span\"\n      className={classNames(\n        'vkuiInternalCounter',\n        styles['Counter'],\n        modeClassNames[mode],\n        sizeClassNames[size],\n        className,\n      )}\n      level={counterLevel}\n    >\n      {children}\n    </CounterTypography>\n  );\n};\n"],"names":["Counter","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","mode","size","children","className","restProps","React","Children","count","CounterTypography","Caption","Headline","counterLevel","Component","classNames","level"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;;+DAhCU;oBACI;uBACH;wBACC;AAGzB,IAAMC,iBAAiB;IACrBC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,IAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAeO,IAAMT,UAAU;6BACrBU,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,OAAMC,SAASC,MAAML,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,IAAMM,oBAAoBP,SAAS,MAAMQ,mBAAUC;IACnD,IAAMC,eAAeV,SAAS,MAAM,MAAM;IAE1C,qBACE,qBAACO,+DACKJ;QACJQ,WAAU;QACVT,WAAWU,IAAAA,kBACT,sCAEAtB,cAAc,CAACS,KAAK,EACpBH,cAAc,CAACI,KAAK,EACpBE;QAEFW,OAAOH;QAENT;AAGP"}

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

@@ -5,6 +5,7 @@ export interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {
     windowResize?: boolean;
     boxRef?: React.Ref<HTMLDivElement>;
     className?: HTMLDivElement['className'];
+    onScroll?(event: React.UIEvent<HTMLDivElement>): void;
     children: React.ReactNode;
 }
-export declare const CustomScrollView: ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar, autoHideScrollbarDelay, }: CustomScrollViewProps) => JSX.Element;
+export declare const CustomScrollView: ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar, autoHideScrollbarDelay, onScroll, }: CustomScrollViewProps) => React.JSX.Element;

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

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "CustomScrollView", {
         return CustomScrollView;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useEventListener = require("../../hooks/useEventListener");
 var _useExternRef = require("../../hooks/useExternRef");
@@ -18,7 +18,7 @@ var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _utils = require("../../lib/utils");
 var _useTrackerVisibility = require("./useTrackerVisibility");
 var CustomScrollView = function(param) {
-    var className = param.className, children = param.children, externalBoxRef = param.boxRef, windowResize = param.windowResize, _param_autoHideScrollbar = param.autoHideScrollbar, autoHideScrollbar = _param_autoHideScrollbar === void 0 ? false : _param_autoHideScrollbar, autoHideScrollbarDelay = param.autoHideScrollbarDelay;
+    var className = param.className, children = param.children, externalBoxRef = param.boxRef, windowResize = param.windowResize, _param_autoHideScrollbar = param.autoHideScrollbar, autoHideScrollbar = _param_autoHideScrollbar === void 0 ? false : _param_autoHideScrollbar, autoHideScrollbarDelay = param.autoHideScrollbarDelay, onScroll = param.onScroll;
     var subscribe = function subscribe(el) {
         if (el) {
             listeners.forEach(function(l) {
@@ -116,7 +116,7 @@ var CustomScrollView = function(param) {
         }
         unsubscribe();
     };
-    var scroll = function() {
+    var scroll = function(event) {
         if (ratio.current >= 1 || !boxRef.current) {
             return;
         }
@@ -124,6 +124,7 @@ var CustomScrollView = function(param) {
             onTargetScroll();
         }
         setTrackerPositionFromScroll(boxRef.current.scrollTop);
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
     };
     var listeners = [
         (0, _useEventListener.useEventListener)("mousemove", onMove),

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 { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nexport interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement['className'];\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\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 = () => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\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 className={classNames(styles['CustomScrollView'], className)}>\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","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","subscribe","el","listeners","forEach","l","add","unsubscribe","remove","useDOM","document","window","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","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","useTrackerVisibility","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","scroll","onDragStart","div","classNames","tabIndex","ref","onScroll","onClick","stopPropagation","onMouseEnter","onMouseLeave","onMouseDown"],"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 { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nexport interface CustomScrollViewProps extends DOMProps, 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}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\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 className={classNames(styles['CustomScrollView'], className)}>\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","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","subscribe","el","listeners","forEach","l","add","unsubscribe","remove","useDOM","document","window","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","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","useTrackerVisibility","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","scroll","event","onDragStart","div","classNames","tabIndex","ref","onClick","stopPropagation","onMouseEnter","onMouseLeave","onMouseDown"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;+DAlBU;oBACI;gCACM;4BACJ;mBACI;yCACS;qBACV;oCAC0B;AAWnD,IAAMA,mBAAmB;QAC9BC,kBAAAA,WACAC,iBAAAA,UACAC,AAAQC,uBAARD,QACAE,qBAAAA,+CACAC,mBAAAA,0DAAoB,kCACpBC,+BAAAA,wBACAC,iBAAAA;QAgISC,YAAT,SAASA,UAAUC,EAAwB;QACzC,IAAIA,IAAI;YACNC,UAAUC,QAAQ,SAACC;uBAAMA,EAAEC,IAAIJ;;QACjC;IACF;QAESK,cAAT,SAASA;QACPJ,UAAUC,QAAQ,SAACC;mBAAMA,EAAEG;;IAC7B;IAtIA,IAA6BC,UAAAA,IAAAA,gBAArBC,WAAqBD,QAArBC,UAAUC,SAAWF,QAAXE;IAElB,IAAMC,QAAQC,OAAMC,OAAOC;IAC3B,IAAMC,iBAAiBH,OAAMC,OAAO;IACpC,IAAMG,eAAeJ,OAAMC,OAAO;IAClC,IAAMI,gBAAgBL,OAAMC,OAAO;IACnC,IAAMK,eAAeN,OAAMC,OAAO;IAClC,IAAMM,gBAAgBP,OAAMC,OAAO;IACnC,IAAMO,SAASR,OAAMC,OAAO;IAC5B,IAAMQ,aAAaT,OAAMC,OAAO;IAEhC,IAAMnB,SAAS4B,IAAAA,4BAAa3B;IAE5B,IAAM4B,OAAOX,OAAMC,OAAuB;IAC1C,IAAMW,WAAWZ,OAAMC,OAAuB;IAE9C,IAAMY,qBAAqB,SAACC;QAC1BX,eAAeY,UAAUD;QACzB,IAAIF,SAASG,YAAY,MAAM;YAC5BH,SAASG,QAAQC,KAAa,CAACT,cAAcQ,QAAQ,GAAG,AAAC,gBAAyB,OAAVD,WAAU;QACrF;IACF;IAEA,IAAMG,+BAA+B,SAACH;QACpC,IAAMI,WAAWJ,YAAaR,CAAAA,aAAaS,UAAUX,aAAaW,OAAM;QACxEF,mBAAmB,AAACT,CAAAA,aAAaW,UAAUV,cAAcU,OAAM,IAAKG;IACtE;IAEA,IAAMC,SAAS;QACb,IAAI,CAACrC,OAAOiC,WAAW,CAACJ,KAAKI,WAAW,CAACH,SAASG,SAAS;YACzD;QACF;QACA,IAAMK,oBAAoBtC,OAAOiC,QAAQX;QACzC,IAAMiB,oBAAoBvC,OAAOiC,QAAQT;QACzC,IAAMgB,aAAaF,oBAAoBC;QACvC,IAAME,qBAAqBC,KAAKC,IAAIL,oBAAoBE,YAAY;QAEpEvB,MAAMgB,UAAUO;QAChBlB,aAAaW,UAAUK;QACvBd,aAAaS,UAAUM;QACvBhB,cAAcU,UAAUQ;QAExB,IAAID,cAAc,GAAG;YACnBX,KAAKI,QAAQC,MAAMU,UAAU;QAC/B,OAAO;YACLf,KAAKI,QAAQC,MAAMU,UAAU;YAC7Bd,SAASG,QAAQC,MAAMW,SAAS,AAAC,GAAqB,OAAnBJ,oBAAmB;YACtDN,6BAA6BnC,OAAOiC,QAAQD;QAC9C;IACF;IAEA,IAAMc,gBAAgBC,IAAAA,oCAAiB,UAAUV;IAEjDW,IAAAA,sDAA0B;QACxB,IAAI9C,gBAAgBc,QAAQ;YAC1B8B,cAAcnC,IAAIK;QACpB;IACF,GAAG;QAACd;QAAcc;KAAO;IAEzBgC,IAAAA,sDAA0B;YACZlB;QAAZ,IAAII,QAAQJ,CAAAA,oBAAAA,SAASG,qBAATH,+BAAAA,KAAAA,IAAAA,kBAAkBI;QAC9B,IAAIe,OAAO;QACX,IAAIf,UAAUgB,WAAW;YACvB,IAAI,eAAehB,OAAO;gBACxBe,OAAO;YACT,OAAO,IAAI,qBAAqBf,OAAO;gBACrCe,OAAO;YACT;QACF;QACAxB,cAAcQ,UAAUgB;IAC1B,GAAG,EAAE;IAELD,IAAAA,sDAA0BX;IAE1B,IAAMc,+BAA+B,SAACxB;QACpC,IAAMS,WAAWT,aAAcL,CAAAA,aAAaW,UAAUV,cAAcU,OAAM;QAC1E,IAAIjC,OAAOiC,YAAY,MAAM;YAC3BjC,OAAOiC,QAAQD,YAAY,AAACR,CAAAA,aAAaS,UAAUX,aAAaW,OAAM,IAAKG;QAC7E;IACF;IAEA,IAAMgB,SAAS,SAACC;QACdA,EAAEC;QACF,IAAMC,OAAOF,EAAEG,UAAU9B,OAAOO;QAChC,IAAMwB,WAAWf,KAAKgB,IACpBhB,KAAKC,IAAIhB,WAAWM,UAAUsB,MAAM,IACpCjC,aAAaW,UAAUV,cAAcU;QAGvCkB,6BAA6BM;IAC/B;IAEA,IAOIE,yBAAAA,IAAAA,4CAAqBxD,mBAAmBC,yBAN1CwD,iBAMED,uBANFC,gBACAC,iBAKEF,uBALFE,gBACAC,qBAIEH,uBAJFG,oBACAC,oBAGEJ,uBAHFI,mBACAC,sBAEEL,uBAFFK,qBACAC,sBACEN,uBADFM;IAGF,IAAMC,OAAO,SAACb;QACZA,EAAEC;QAEF,IAAInD,mBAAmB;YACrB4D;QACF;QAEAnD;IACF;IAEA,IAAMuD,SAAS,SAACC;QACd,IAAInD,MAAMgB,WAAW,KAAK,CAACjC,OAAOiC,SAAS;YACzC;QACF;QAEA,IAAI9B,mBAAmB;YACrB0D;QACF;QAEA1B,6BAA6BnC,OAAOiC,QAAQD;QAC5C3B,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAW+D;IACb;IAEA,IAAM5D,YAAY;QAACuC,IAAAA,oCAAiB,aAAaK;QAASL,IAAAA,oCAAiB,WAAWmB;KAAM;IAY5F,IAAMG,cAAc,SAAChB;QACnBA,EAAEC;QACF5B,OAAOO,UAAUoB,EAAEG;QACnB7B,WAAWM,UAAUZ,eAAeY;QAEpC,IAAI9B,mBAAmB;YACrB2D;QACF;QAEAxD,UAAUS;IACZ;IAEA,qBACE,qBAACuD;QAAIxE,WAAWyE,IAAAA,0CAAuCzE;qBACrD,qBAACwE;QAAIxE,SAAS;QAAmC0E,UAAU,CAAC;QAAGC,KAAKzE;QAAQK,UAAU8D;OACnFpE,yBAGH,qBAACuE;QAAIxE,SAAS;QAAoC2E,KAAK5C;QAAM6C,SAASC;qBACpE,qBAACL;QACCxE,WAAWyE,IAAAA,oDAET,CAACX;QAEHgB,cAAczE,oBAAoB6D,sBAAsBd;QACxD2B,cAAc1E,oBAAoB8D,sBAAsBf;QACxDuB,KAAK3C;QACLgD,aAAaT;;AAKvB"}

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

@@ -8,13 +8,13 @@ Object.defineProperty(exports, "useTrackerVisibility", {
         return useTrackerVisibility;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _useTimeout = require("../../hooks/useTimeout");
 var useTrackerVisibility = function() {
     var autoHideScrollbar = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false, autoHideScrollbarDelay = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 500;
-    var _React_useState = _slicedToArray(_react.useState(!autoHideScrollbar), 2), trackerVisible = _React_useState[0], setTrackerVisible = _React_useState[1];
+    var _React_useState = _sliced_to_array._(_react.useState(!autoHideScrollbar), 2), trackerVisible = _React_useState[0], setTrackerVisible = _React_useState[1];
     var isMouseOver = _react.useRef(false);
     var isTrackerDragging = _react.useRef(false);
     var _useTimeout1 = (0, _useTimeout.useTimeout)(function() {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomScrollView/useTrackerVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout } from '../../hooks/useTimeout';\n\n/**\n * Хук, который позволяет управлять видимостью ползунка скроллбара.\n * @param autoHideScrollbar - скрывать ли ползунок скроллбара\n * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается\n * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка\n */\nexport const useTrackerVisibility = (\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay = 500,\n): TrackerVisibilityProps => {\n  const [trackerVisible, setTrackerVisible] = React.useState(!autoHideScrollbar);\n  const isMouseOver = React.useRef(false);\n  const isTrackerDragging = React.useRef(false);\n\n  const { set: setVisibilityTimeout, clear: clearVisibilityTimeout } = useTimeout(\n    () => setTrackerVisible(false),\n    autoHideScrollbarDelay,\n  );\n\n  const onTrackerDragStart = React.useCallback(() => {\n    clearVisibilityTimeout();\n    setTrackerVisible(true);\n    isTrackerDragging.current = true;\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerDragStop = React.useCallback(() => {\n    isTrackerDragging.current = false;\n    if (!isMouseOver.current) {\n      setVisibilityTimeout();\n    }\n  }, [setVisibilityTimeout, isMouseOver]);\n\n  /**\n   * Позволяет \"запланировать\" скрытие ползунка через delay миллисекунд. Если тайм-аут не успевает сработать, то каждый\n   * последующий вызов функции откладывает скрытие ползунка на delay миллисекунд\n   */\n  const queueTrackerVisibility = React.useCallback(() => {\n    if (isTrackerDragging.current) {\n      return;\n    }\n    setTrackerVisible(true);\n    setVisibilityTimeout();\n  }, [setVisibilityTimeout]);\n\n  const onTrackerMouseEnter = React.useCallback(() => {\n    clearVisibilityTimeout();\n    isMouseOver.current = true;\n    setTrackerVisible(true);\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerMouseLeave = React.useCallback(() => {\n    queueTrackerVisibility();\n    isMouseOver.current = false;\n  }, [queueTrackerVisibility]);\n\n  const onTargetScroll = React.useCallback(() => {\n    queueTrackerVisibility();\n  }, [queueTrackerVisibility]);\n\n  return {\n    trackerVisible,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n    onTargetScroll,\n  };\n};\n\nexport interface TrackerOptionsProps {\n  /**\n   * Скрывать ли ползунок скроллбара\n   */\n  autoHideScrollbar?: boolean;\n  /**\n   * Через какое кол-во миллисекунд ползунок скроллбара скрывается\n   */\n  autoHideScrollbarDelay?: number;\n}\n\nexport interface TrackerVisibilityProps {\n  /**\n   * Отвечает за видимость ползунка\n   */\n  trackerVisible: boolean;\n  /**\n   * Функция для обработки события у блока со скроллом\n   */\n  onTargetScroll(this: void): void;\n  /**\n   * Функция для обработки начала drag event ползунка\n   */\n  onTrackerDragStart(this: void): void;\n  /**\n   * Функция для обработки окончания drag event ползунка\n   */\n  onTrackerDragStop(this: void): void;\n  /**\n   * Функция для обработки mouseLeave event ползунка\n   */\n  onTrackerMouseEnter(this: void): void;\n  /**\n   * Функция для обработки mouseEnter event ползунка\n   */\n  onTrackerMouseLeave(this: void): void;\n}\n"],"names":["useTrackerVisibility","autoHideScrollbar","autoHideScrollbarDelay","React","useState","trackerVisible","setTrackerVisible","isMouseOver","useRef","isTrackerDragging","useTimeout","set","setVisibilityTimeout","clear","clearVisibilityTimeout","onTrackerDragStart","useCallback","current","onTrackerDragStop","queueTrackerVisibility","onTrackerMouseEnter","onTrackerMouseLeave","onTargetScroll"],"mappings":";;;;+BASaA;;;eAAAA;;;;;2DATU;0BACI;AAQpB,IAAMA,uBAAuB,WAGP;QAF3BC,qFAAoB,KAAK,EACzBC,0FAAyB;IAEzB,IAA4CC,iCAAAA,OAAMC,QAAQ,CAAC,CAACH,wBAArDI,iBAAqCF,oBAArBG,oBAAqBH;IAC5C,IAAMI,cAAcJ,OAAMK,MAAM,CAAC,KAAK;IACtC,IAAMC,oBAAoBN,OAAMK,MAAM,CAAC,KAAK;IAE5C,IAAqEE,eAAAA,IAAAA,sBAAU,EAC7E;eAAMJ,kBAAkB,KAAK;OAC7BJ,yBAFMS,AAAKC,uBAAwDF,aAA7DC,KAA2BE,AAAOC,yBAA2BJ,aAAlCG;IAKnC,IAAME,qBAAqBZ,OAAMa,WAAW,CAAC,WAAM;QACjDF;QACAR,kBAAkB,IAAI;QACtBG,kBAAkBQ,OAAO,GAAG,IAAI;IAClC,GAAG;QAACH;KAAuB;IAE3B,IAAMI,oBAAoBf,OAAMa,WAAW,CAAC,WAAM;QAChDP,kBAAkBQ,OAAO,GAAG,KAAK;QACjC,IAAI,CAACV,YAAYU,OAAO,EAAE;YACxBL;QACF,CAAC;IACH,GAAG;QAACA;QAAsBL;KAAY;IAEtC;;;GAGC,GACD,IAAMY,yBAAyBhB,OAAMa,WAAW,CAAC,WAAM;QACrD,IAAIP,kBAAkBQ,OAAO,EAAE;YAC7B;QACF,CAAC;QACDX,kBAAkB,IAAI;QACtBM;IACF,GAAG;QAACA;KAAqB;IAEzB,IAAMQ,sBAAsBjB,OAAMa,WAAW,CAAC,WAAM;QAClDF;QACAP,YAAYU,OAAO,GAAG,IAAI;QAC1BX,kBAAkB,IAAI;IACxB,GAAG;QAACQ;KAAuB;IAE3B,IAAMO,sBAAsBlB,OAAMa,WAAW,CAAC,WAAM;QAClDG;QACAZ,YAAYU,OAAO,GAAG,KAAK;IAC7B,GAAG;QAACE;KAAuB;IAE3B,IAAMG,iBAAiBnB,OAAMa,WAAW,CAAC,WAAM;QAC7CG;IACF,GAAG;QAACA;KAAuB;IAE3B,OAAO;QACLd,gBAAAA;QACAU,oBAAAA;QACAG,mBAAAA;QACAE,qBAAAA;QACAC,qBAAAA;QACAC,gBAAAA;IACF;AACF"}
+{"version":3,"sources":["../../../../src/components/CustomScrollView/useTrackerVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout } from '../../hooks/useTimeout';\n\n/**\n * Хук, который позволяет управлять видимостью ползунка скроллбара.\n * @param autoHideScrollbar - скрывать ли ползунок скроллбара\n * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается\n * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка\n */\nexport const useTrackerVisibility = (\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay = 500,\n): TrackerVisibilityProps => {\n  const [trackerVisible, setTrackerVisible] = React.useState(!autoHideScrollbar);\n  const isMouseOver = React.useRef(false);\n  const isTrackerDragging = React.useRef(false);\n\n  const { set: setVisibilityTimeout, clear: clearVisibilityTimeout } = useTimeout(\n    () => setTrackerVisible(false),\n    autoHideScrollbarDelay,\n  );\n\n  const onTrackerDragStart = React.useCallback(() => {\n    clearVisibilityTimeout();\n    setTrackerVisible(true);\n    isTrackerDragging.current = true;\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerDragStop = React.useCallback(() => {\n    isTrackerDragging.current = false;\n    if (!isMouseOver.current) {\n      setVisibilityTimeout();\n    }\n  }, [setVisibilityTimeout, isMouseOver]);\n\n  /**\n   * Позволяет \"запланировать\" скрытие ползунка через delay миллисекунд. Если тайм-аут не успевает сработать, то каждый\n   * последующий вызов функции откладывает скрытие ползунка на delay миллисекунд\n   */\n  const queueTrackerVisibility = React.useCallback(() => {\n    if (isTrackerDragging.current) {\n      return;\n    }\n    setTrackerVisible(true);\n    setVisibilityTimeout();\n  }, [setVisibilityTimeout]);\n\n  const onTrackerMouseEnter = React.useCallback(() => {\n    clearVisibilityTimeout();\n    isMouseOver.current = true;\n    setTrackerVisible(true);\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerMouseLeave = React.useCallback(() => {\n    queueTrackerVisibility();\n    isMouseOver.current = false;\n  }, [queueTrackerVisibility]);\n\n  const onTargetScroll = React.useCallback(() => {\n    queueTrackerVisibility();\n  }, [queueTrackerVisibility]);\n\n  return {\n    trackerVisible,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n    onTargetScroll,\n  };\n};\n\nexport interface TrackerOptionsProps {\n  /**\n   * Скрывать ли ползунок скроллбара\n   */\n  autoHideScrollbar?: boolean;\n  /**\n   * Через какое кол-во миллисекунд ползунок скроллбара скрывается\n   */\n  autoHideScrollbarDelay?: number;\n}\n\nexport interface TrackerVisibilityProps {\n  /**\n   * Отвечает за видимость ползунка\n   */\n  trackerVisible: boolean;\n  /**\n   * Функция для обработки события у блока со скроллом\n   */\n  onTargetScroll(this: void): void;\n  /**\n   * Функция для обработки начала drag event ползунка\n   */\n  onTrackerDragStart(this: void): void;\n  /**\n   * Функция для обработки окончания drag event ползунка\n   */\n  onTrackerDragStop(this: void): void;\n  /**\n   * Функция для обработки mouseLeave event ползунка\n   */\n  onTrackerMouseEnter(this: void): void;\n  /**\n   * Функция для обработки mouseEnter event ползунка\n   */\n  onTrackerMouseLeave(this: void): void;\n}\n"],"names":["useTrackerVisibility","autoHideScrollbar","autoHideScrollbarDelay","React","useState","trackerVisible","setTrackerVisible","isMouseOver","useRef","isTrackerDragging","useTimeout","set","setVisibilityTimeout","clear","clearVisibilityTimeout","onTrackerDragStart","useCallback","current","onTrackerDragStop","queueTrackerVisibility","onTrackerMouseEnter","onTrackerMouseLeave","onTargetScroll"],"mappings":";;;;+BASaA;;;eAAAA;;;;;+DATU;0BACI;AAQpB,IAAMA,uBAAuB;QAClCC,qFAAoB,OACpBC,0FAAyB;IAEzB,IAA4CC,qCAAAA,OAAMC,SAAS,CAACH,wBAArDI,iBAAqCF,oBAArBG,oBAAqBH;IAC5C,IAAMI,cAAcJ,OAAMK,OAAO;IACjC,IAAMC,oBAAoBN,OAAMK,OAAO;IAEvC,IAAqEE,eAAAA,IAAAA,wBACnE;eAAMJ,kBAAkB;OACxBJ,yBAFMS,AAAKC,uBAAwDF,aAA7DC,KAA2BE,AAAOC,yBAA2BJ,aAAlCG;IAKnC,IAAME,qBAAqBZ,OAAMa,YAAY;QAC3CF;QACAR,kBAAkB;QAClBG,kBAAkBQ,UAAU;IAC9B,GAAG;QAACH;KAAuB;IAE3B,IAAMI,oBAAoBf,OAAMa,YAAY;QAC1CP,kBAAkBQ,UAAU;QAC5B,IAAI,CAACV,YAAYU,SAAS;YACxBL;QACF;IACF,GAAG;QAACA;QAAsBL;KAAY;IAEtC;;;GAGC,GACD,IAAMY,yBAAyBhB,OAAMa,YAAY;QAC/C,IAAIP,kBAAkBQ,SAAS;YAC7B;QACF;QACAX,kBAAkB;QAClBM;IACF,GAAG;QAACA;KAAqB;IAEzB,IAAMQ,sBAAsBjB,OAAMa,YAAY;QAC5CF;QACAP,YAAYU,UAAU;QACtBX,kBAAkB;IACpB,GAAG;QAACQ;KAAuB;IAE3B,IAAMO,sBAAsBlB,OAAMa,YAAY;QAC5CG;QACAZ,YAAYU,UAAU;IACxB,GAAG;QAACE;KAAuB;IAE3B,IAAMG,iBAAiBnB,OAAMa,YAAY;QACvCG;IACF,GAAG;QAACA;KAAuB;IAE3B,OAAO;QACLd,gBAAAA;QACAU,oBAAAA;QACAG,mBAAAA;QACAE,qBAAAA;QACAC,qBAAAA;QACAC,gBAAAA;IACF;AACF"}

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

@@ -36,6 +36,10 @@ export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerO
     /**
      * Рендер-проп для кастомного рендера опции.
      * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)
+     *
+     * > ⚠️  Важно: cвойство опции `disabled` должно выставляться только через проп `options`.
+     * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии
+     * опции.
      */
     renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
     /**
@@ -73,5 +77,5 @@ export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerO
 /**
  * @see https://vkcom.github.io/VKUI/#/CustomSelect
  */
-export declare function CustomSelect(props: SelectProps): JSX.Element;
+export declare function CustomSelect(props: SelectProps): React.JSX.Element;
 export {};

package/dist/cjs/components/CustomSelect/CustomSelect.js

@@ -8,14 +8,14 @@ Object.defineProperty(exports, "CustomSelect", {
         return CustomSelect;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _typeOf = require("@swc/helpers/lib/_type_of.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _type_of = require("@swc/helpers/_/_type_of");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useExternRef = require("../../hooks/useExternRef");
@@ -24,14 +24,14 @@ var _select = require("../../lib/select");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _utils = require("../../lib/utils");
 var _warnOnce = require("../../lib/warnOnce");
-var _customSelectDropdown = require("../CustomSelectDropdown/CustomSelectDropdown");
-var _customSelectOption = require("../CustomSelectOption/CustomSelectOption");
-var _dropdownIcon = require("../DropdownIcon/DropdownIcon");
-var _input = require("../Input/Input");
-var _selectMimicry = require("../SelectMimicry/SelectMimicry");
-var _footnote = require("../Typography/Footnote/Footnote");
-var _customSelectClearButton = require("./CustomSelectClearButton");
-var sizeYClassNames = _defineProperty({
+var _CustomSelectDropdown = require("../CustomSelectDropdown/CustomSelectDropdown");
+var _CustomSelectOption = require("../CustomSelectOption/CustomSelectOption");
+var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
+var _Input = require("../Input/Input");
+var _SelectMimicry = require("../SelectMimicry/SelectMimicry");
+var _Footnote = require("../Typography/Footnote/Footnote");
+var _CustomSelectClearButton = require("./CustomSelectClearButton");
+var sizeYClassNames = _define_property._({
     none: "vkuiCustomSelect--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiCustomSelect--sizeY-compact");
 var findIndexAfter = function() {
@@ -61,16 +61,16 @@ var findIndexBefore = function() {
 var warn = (0, _warnOnce.warnOnce)("CustomSelect");
 var checkOptionsValueType = function(options) {
     if (new Set(options.map(function(item) {
-        return _typeOf(item.value);
+        return _type_of._(item.value);
     })).size > 1) {
         warn("Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.", "error");
     }
 };
 function defaultRenderOptionFn(_param) {
-    var option = _param.option, props = _objectWithoutProperties(_param, [
+    var option = _param.option, props = _object_without_properties._(_param, [
         "option"
     ]);
-    return /*#__PURE__*/ _react.createElement(_customSelectOption.CustomSelectOption, props);
+    return /*#__PURE__*/ _react.createElement(_CustomSelectOption.CustomSelectOption, props);
 }
 var handleOptionDown = function(e) {
     e.preventDefault();
@@ -92,8 +92,8 @@ var filter = function(options, inputValue, filterFn) {
 };
 var defaultOptions = [];
 function CustomSelect(props) {
-    var _React_useState = _slicedToArray(_react.useState(false), 2), opened = _React_useState[0], setOpened = _React_useState[1];
-    var before = props.before, name = props.name, className = props.className, getRef = props.getRef, getRootRef = props.getRootRef, popupDirection = props.popupDirection, style = props.style, onChange = props.onChange, children = props.children, onInputChangeProp = props.onInputChange, renderDropdown = props.renderDropdown, onOpen = props.onOpen, onClose = props.onClose, fetching = props.fetching, forceDropdownPortal = props.forceDropdownPortal, _props_selectType = props.selectType, selectType = _props_selectType === void 0 ? "default" : _props_selectType, autoHideScrollbar = props.autoHideScrollbar, autoHideScrollbarDelay = props.autoHideScrollbarDelay, _props_searchable = props.searchable, searchable = _props_searchable === void 0 ? false : _props_searchable, tmp = props.renderOption, renderOptionProp = tmp === void 0 ? defaultRenderOptionFn : tmp, tmp1 = props.options, optionsProp = tmp1 === void 0 ? defaultOptions : tmp1, _props_emptyText = props.emptyText, emptyText = _props_emptyText === void 0 ? "Ничего не найдено" : _props_emptyText, _props_filterFn = props.filterFn, filterFn = _props_filterFn === void 0 ? _select.defaultFilterFn : _props_filterFn, iconProp = props.icon, _props_ClearButton = props.ClearButton, ClearButton = _props_ClearButton === void 0 ? _customSelectClearButton.CustomSelectClearButton : _props_ClearButton, _props_allowClearButton = props.allowClearButton, allowClearButton = _props_allowClearButton === void 0 ? false : _props_allowClearButton, _props_dropdownOffsetDistance = props.dropdownOffsetDistance, dropdownOffsetDistance = _props_dropdownOffsetDistance === void 0 ? 0 : _props_dropdownOffsetDistance, _props_fixDropdownWidth = props.fixDropdownWidth, fixDropdownWidth = _props_fixDropdownWidth === void 0 ? true : _props_fixDropdownWidth, restProps = _objectWithoutProperties(props, [
+    var _React_useState = _sliced_to_array._(_react.useState(false), 2), opened = _React_useState[0], setOpened = _React_useState[1];
+    var before = props.before, name = props.name, className = props.className, getRef = props.getRef, getRootRef = props.getRootRef, popupDirection = props.popupDirection, style = props.style, onChange = props.onChange, children = props.children, onInputChangeProp = props.onInputChange, renderDropdown = props.renderDropdown, onOpen = props.onOpen, onClose = props.onClose, fetching = props.fetching, forceDropdownPortal = props.forceDropdownPortal, _props_selectType = props.selectType, selectType = _props_selectType === void 0 ? "default" : _props_selectType, autoHideScrollbar = props.autoHideScrollbar, autoHideScrollbarDelay = props.autoHideScrollbarDelay, _props_searchable = props.searchable, searchable = _props_searchable === void 0 ? false : _props_searchable, tmp = props.renderOption, renderOptionProp = tmp === void 0 ? defaultRenderOptionFn : tmp, tmp1 = props.options, optionsProp = tmp1 === void 0 ? defaultOptions : tmp1, _props_emptyText = props.emptyText, emptyText = _props_emptyText === void 0 ? "Ничего не найдено" : _props_emptyText, _props_filterFn = props.filterFn, filterFn = _props_filterFn === void 0 ? _select.defaultFilterFn : _props_filterFn, iconProp = props.icon, _props_ClearButton = props.ClearButton, ClearButton = _props_ClearButton === void 0 ? _CustomSelectClearButton.CustomSelectClearButton : _props_ClearButton, _props_allowClearButton = props.allowClearButton, allowClearButton = _props_allowClearButton === void 0 ? false : _props_allowClearButton, _props_dropdownOffsetDistance = props.dropdownOffsetDistance, dropdownOffsetDistance = _props_dropdownOffsetDistance === void 0 ? 0 : _props_dropdownOffsetDistance, _props_fixDropdownWidth = props.fixDropdownWidth, fixDropdownWidth = _props_fixDropdownWidth === void 0 ? true : _props_fixDropdownWidth, restProps = _object_without_properties._(props, [
         "before",
         "name",
         "className",
@@ -131,18 +131,18 @@ function CustomSelect(props) {
     var handleRootRef = (0, _useExternRef.useExternRef)(containerRef, getRootRef);
     var scrollBoxRef = _react.useRef(null);
     var selectElRef = (0, _useExternRef.useExternRef)(getRef);
-    var _React_useState1 = _slicedToArray(_react.useState(-1), 2), focusedOptionIndex = _React_useState1[0], setFocusedOptionIndex = _React_useState1[1];
-    var _React_useState2 = _slicedToArray(_react.useState(props.value !== undefined), 2), isControlledOutside = _React_useState2[0], setIsControlledOutside = _React_useState2[1];
-    var _React_useState3 = _slicedToArray(_react.useState(""), 2), inputValue = _React_useState3[0], setInputValue = _React_useState3[1];
+    var _React_useState1 = _sliced_to_array._(_react.useState(-1), 2), focusedOptionIndex = _React_useState1[0], setFocusedOptionIndex = _React_useState1[1];
+    var _React_useState2 = _sliced_to_array._(_react.useState(props.value !== undefined), 2), isControlledOutside = _React_useState2[0], setIsControlledOutside = _React_useState2[1];
+    var _React_useState3 = _sliced_to_array._(_react.useState(""), 2), inputValue = _React_useState3[0], setInputValue = _React_useState3[1];
     var _props_value, _ref;
-    var _React_useState4 = _slicedToArray(_react.useState(function() {
+    var _React_useState4 = _sliced_to_array._(_react.useState(function() {
         return (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : props.defaultValue) !== null && _ref !== void 0 ? _ref : allowClearButton ? "" : undefined;
     }), 2), nativeSelectValue = _React_useState4[0], setNativeSelectValue = _React_useState4[1];
-    var _React_useState5 = _slicedToArray(_react.useState(""), 2), keyboardInput = _React_useState5[0], setKeyboardInput = _React_useState5[1];
-    var _React_useState6 = _slicedToArray(_react.useState(undefined), 2), popperPlacement = _React_useState6[0], setPopperPlacement = _React_useState6[1];
-    var _React_useState7 = _slicedToArray(_react.useState(optionsProp), 2), options = _React_useState7[0], setOptions = _React_useState7[1];
+    var _React_useState5 = _sliced_to_array._(_react.useState(""), 2), keyboardInput = _React_useState5[0], setKeyboardInput = _React_useState5[1];
+    var _React_useState6 = _sliced_to_array._(_react.useState(undefined), 2), popperPlacement = _React_useState6[0], setPopperPlacement = _React_useState6[1];
+    var _React_useState7 = _sliced_to_array._(_react.useState(optionsProp), 2), options = _React_useState7[0], setOptions = _React_useState7[1];
     var _props_value1;
-    var _React_useState8 = _slicedToArray(_react.useState(findSelectedIndex(optionsProp, (_props_value1 = props.value) !== null && _props_value1 !== void 0 ? _props_value1 : props.defaultValue, allowClearButton)), 2), selectedOptionIndex = _React_useState8[0], setSelectedOptionIndex = _React_useState8[1];
+    var _React_useState8 = _sliced_to_array._(_react.useState(findSelectedIndex(optionsProp, (_props_value1 = props.value) !== null && _props_value1 !== void 0 ? _props_value1 : props.defaultValue, allowClearButton)), 2), selectedOptionIndex = _React_useState8[0], setSelectedOptionIndex = _React_useState8[1];
     _react.useEffect(function() {
         setIsControlledOutside(props.value !== undefined);
         var _props_value;
@@ -278,12 +278,24 @@ function CustomSelect(props) {
             var item = options[focusedOptionIndex];
             setNativeSelectValue(item === null || item === void 0 ? void 0 : item.value);
             close();
+            var shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync = isControlledOutside && props.value !== nativeSelectValue && nativeSelectValue === (item === null || item === void 0 ? void 0 : item.value);
+            if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {
+                var _selectElRef_current;
+                var event = new Event("change", {
+                    bubbles: true
+                });
+                (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
+            }
         }
     }, [
         close,
         focusedOptionIndex,
         isValidIndex,
-        options
+        options,
+        selectElRef,
+        isControlledOutside,
+        props.value,
+        nativeSelectValue
     ]);
     var open = _react.useCallback(function() {
         setOpened(true);
@@ -526,7 +538,7 @@ function CustomSelect(props) {
         selectedOptionIndex
     ]);
     var resolvedContent = _react.useMemo(function() {
-        var defaultDropdownContent = (options === null || options === void 0 ? void 0 : options.length) > 0 ? options.map(renderOption) : /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
+        var defaultDropdownContent = (options === null || options === void 0 ? void 0 : options.length) > 0 ? options.map(renderOption) : /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
             className: "vkuiCustomSelect__empty"
         }, emptyText);
         if (typeof renderDropdown === "function") {
@@ -542,7 +554,9 @@ function CustomSelect(props) {
         renderDropdown,
         renderOption
     ]);
-    var clearButtonShown = allowClearButton && !opened && nativeSelectValue !== "";
+    var controlledValueSet = isControlledOutside && props.value !== "";
+    var uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== "";
+    var clearButtonShown = allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);
     var clearButton = _react.useMemo(function() {
         if (!clearButtonShown) {
             return null;
@@ -562,7 +576,7 @@ function CustomSelect(props) {
         if (iconProp !== undefined) {
             return iconProp;
         }
-        return /*#__PURE__*/ _react.createElement(_dropdownIcon.DropdownIcon, {
+        return /*#__PURE__*/ _react.createElement(_DropdownIcon.DropdownIcon, {
             className: clearButtonShown ? "vkuiCustomSelect__dropdown-icon" : undefined,
             opened: opened
         });
@@ -577,7 +591,7 @@ function CustomSelect(props) {
         style: style,
         ref: handleRootRef,
         onClick: onLabelClick
-    }, opened && searchable ? /*#__PURE__*/ _react.createElement(_input.Input, _objectSpreadProps(_objectSpread({}, restProps), {
+    }, opened && searchable ? /*#__PURE__*/ _react.createElement(_Input.Input, _object_spread_props._(_object_spread._({}, restProps), {
         autoFocus: true,
         onBlur: onBlur,
         className: openedClassNames,
@@ -591,7 +605,7 @@ function CustomSelect(props) {
         before: before,
         after: afterIcons,
         mode: (0, _select.getFormFieldModeFromSelectType)(selectType)
-    })) : /*#__PURE__*/ _react.createElement(_selectMimicry.SelectMimicry, _objectSpreadProps(_objectSpread({}, restProps), {
+    })) : /*#__PURE__*/ _react.createElement(_SelectMimicry.SelectMimicry, _object_spread_props._(_object_spread._({}, restProps), {
         "aria-hidden": true,
         onClick: onClick,
         onKeyDown: handleKeyDownSelect,
@@ -620,7 +634,7 @@ function CustomSelect(props) {
             key: "".concat(item.value),
             value: item.value
         });
-    })), opened && /*#__PURE__*/ _react.createElement(_customSelectDropdown.CustomSelectDropdown, {
+    })), opened && /*#__PURE__*/ _react.createElement(_CustomSelectDropdown.CustomSelectDropdown, {
         targetRef: containerRef,
         placement: popupDirection,
         scrollBoxRef: setScrollBoxRef,