@vkontakte/vkui 4.33.3 → 4.34.1

package/dist/cssm/components/CustomScrollView/CustomScrollView.js

@@ -1,15 +1,20 @@
 import { createScopedElement } from "../../lib/jsxRuntime";
-import { useDOM } from "../../lib/dom";
 import * as React from "react";
-import { useExternRef } from "../../hooks/useExternRef";
+import { useDOM } from "../../lib/dom";
+import { classNames } from "../../lib/classNames";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { useExternRef } from "../../hooks/useExternRef";
 import { useEventListener } from "../../hooks/useEventListener";
+import { useTrackerVisibility } from "./useTrackerVisibility";
 import "./CustomScrollView.css";
 export var CustomScrollView = function CustomScrollView(_ref) {
   var className = _ref.className,
       children = _ref.children,
       externalBoxRef = _ref.boxRef,
-      windowResize = _ref.windowResize;
+      windowResize = _ref.windowResize,
+      _ref$autoHideScrollba = _ref.autoHideScrollbar,
+      autoHideScrollbar = _ref$autoHideScrollba === void 0 ? false : _ref$autoHideScrollba,
+      autoHideScrollbarDelay = _ref.autoHideScrollbarDelay;
 
   var _useDOM = useDOM(),
       document = _useDOM.document,
@@ -102,8 +107,21 @@ export var CustomScrollView = function CustomScrollView(_ref) {
     setScrollPositionFromTracker(position);
   };
 
+  var _useTrackerVisibility = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay),
+      trackerVisible = _useTrackerVisibility.trackerVisible,
+      onTargetScroll = _useTrackerVisibility.onTargetScroll,
+      onTrackerDragStart = _useTrackerVisibility.onTrackerDragStart,
+      onTrackerDragStop = _useTrackerVisibility.onTrackerDragStop,
+      onTrackerMouseEnter = _useTrackerVisibility.onTrackerMouseEnter,
+      onTrackerMouseLeave = _useTrackerVisibility.onTrackerMouseLeave;
+
   var onUp = function onUp(e) {
     e.preventDefault();
+
+    if (autoHideScrollbar) {
+      onTrackerDragStop();
+    }
+
     unsubscribe();
   };
 
@@ -112,6 +130,10 @@ export var CustomScrollView = function CustomScrollView(_ref) {
       return;
     }
 
+    if (autoHideScrollbar) {
+      onTargetScroll();
+    }
+
     setTrackerPositionFromScroll(boxRef.current.scrollTop);
   };
 
@@ -135,6 +157,11 @@ export var CustomScrollView = function CustomScrollView(_ref) {
     e.preventDefault();
     startY.current = e.clientY;
     trackerTop.current = lastTrackerTop.current;
+
+    if (autoHideScrollbar) {
+      onTrackerDragStart();
+    }
+
     subscribe(document);
   };
 
@@ -145,7 +172,9 @@ export var CustomScrollView = function CustomScrollView(_ref) {
     vkuiClass: "CustomScrollView__barY",
     ref: barY
   }, createScopedElement("div", {
-    vkuiClass: "CustomScrollView__trackerY",
+    vkuiClass: classNames("CustomScrollView__trackerY", !trackerVisible && "CustomScrollView__trackerY--hidden"),
+    onMouseEnter: autoHideScrollbar ? onTrackerMouseEnter : undefined,
+    onMouseLeave: autoHideScrollbar ? onTrackerMouseLeave : undefined,
     ref: trackerY,
     onMouseDown: onDragStart
   })), createScopedElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":["useDOM","React","useExternRef","useIsomorphicLayoutEffect","useEventListener","CustomScrollView","className","children","externalBoxRef","boxRef","windowResize","document","window","ratio","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","add","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","onUp","unsubscribe","scroll","listeners","subscribe","el","forEach","l","remove","onDragStart"],"mappings":"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","sourcesContent":["import { DOMProps, useDOM } from \"../../lib/dom\";\nimport * as React from \"react\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport \"./CustomScrollView.css\";\n\nexport interface CustomScrollViewProps extends DOMProps {\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}: 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)[\n        transformProp.current\n      ] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition(\n      (clientHeight.current - trackerHeight.current) * progress\n    );\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 =\n      trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop =\n        (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 onUp = (e: MouseEvent) => {\n    e.preventDefault();\n    unsubscribe();\n  };\n\n  const scroll = () => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n  };\n\n  const listeners = [\n    useEventListener(\"mousemove\", onMove),\n    useEventListener(\"mouseup\", onUp),\n  ];\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    subscribe(document);\n  };\n\n  return (\n    <div vkuiClass=\"CustomScrollView\" className={className}>\n      <div vkuiClass=\"CustomScrollView__barY\" ref={barY}>\n        <div\n          vkuiClass=\"CustomScrollView__trackerY\"\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n\n      <div\n        vkuiClass=\"CustomScrollView__box\"\n        tabIndex={-1}\n        ref={boxRef}\n        onScroll={scroll}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"file":"CustomScrollView.js"}
+{"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":["React","useDOM","classNames","useIsomorphicLayoutEffect","useExternRef","useEventListener","useTrackerVisibility","CustomScrollView","className","children","externalBoxRef","boxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","document","window","ratio","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","add","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","unsubscribe","scroll","listeners","subscribe","el","forEach","l","remove","onDragStart"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { DOMProps, useDOM } from \"../../lib/dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport {\n  TrackerOptionsProps,\n  useTrackerVisibility,\n} from \"./useTrackerVisibility\";\nimport \"./CustomScrollView.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)[\n        transformProp.current\n      ] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition(\n      (clientHeight.current - trackerHeight.current) * progress\n    );\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 =\n      trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop =\n        (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 = [\n    useEventListener(\"mousemove\", onMove),\n    useEventListener(\"mouseup\", onUp),\n  ];\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 vkuiClass=\"CustomScrollView\" className={className}>\n      <div vkuiClass=\"CustomScrollView__barY\" ref={barY}>\n        <div\n          vkuiClass={classNames(\n            \"CustomScrollView__trackerY\",\n            !trackerVisible && `CustomScrollView__trackerY--hidden`\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n\n      <div\n        vkuiClass=\"CustomScrollView__box\"\n        tabIndex={-1}\n        ref={boxRef}\n        onScroll={scroll}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"file":"CustomScrollView.js"}

package/dist/cssm/components/CustomScrollView/useTrackerVisibility.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Хук, который позволяет управлять видимостью ползунка скроллбара.
+ * @param autoHideScrollbar - скрывать ли ползунок скроллбара
+ * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается
+ * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка
+ */
+export declare const useTrackerVisibility: (autoHideScrollbar?: boolean, autoHideScrollbarDelay?: number) => TrackerVisibilityProps;
+export interface TrackerOptionsProps {
+    /**
+     * Скрывать ли ползунок скроллбара
+     */
+    autoHideScrollbar?: boolean;
+    /**
+     * Через какое кол-во миллисекунд ползунок скроллбара скрывается
+     */
+    autoHideScrollbarDelay?: number;
+}
+export interface TrackerVisibilityProps {
+    /**
+     * Отвечает за видимость ползунка
+     */
+    trackerVisible: boolean;
+    /**
+     * Функция для обработки события у блока со скроллом
+     */
+    onTargetScroll(this: void): void;
+    /**
+     * Функция для обработки начала drag event ползунка
+     */
+    onTrackerDragStart(this: void): void;
+    /**
+     * Функция для обработки окончания drag event ползунка
+     */
+    onTrackerDragStop(this: void): void;
+    /**
+     * Функция для обработки mouseLeave event ползунка
+     */
+    onTrackerMouseEnter(this: void): void;
+    /**
+     * Функция для обработки mouseEnter event ползунка
+     */
+    onTrackerMouseLeave(this: void): void;
+}

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

@@ -0,0 +1,75 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from "react";
+import { useTimeout } from "../../hooks/useTimeout";
+/**
+ * Хук, который позволяет управлять видимостью ползунка скроллбара.
+ * @param autoHideScrollbar - скрывать ли ползунок скроллбара
+ * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается
+ * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка
+ */
+
+export var useTrackerVisibility = function useTrackerVisibility() {
+  var autoHideScrollbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var autoHideScrollbarDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
+
+  var _React$useState = React.useState(!autoHideScrollbar),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      trackerVisible = _React$useState2[0],
+      setTrackerVisible = _React$useState2[1];
+
+  var isMouseOver = React.useRef(false);
+  var isTrackerDragging = React.useRef(false);
+
+  var _useTimeout = useTimeout(function () {
+    return setTrackerVisible(false);
+  }, autoHideScrollbarDelay),
+      setVisibilityTimeout = _useTimeout.set,
+      clearVisibilityTimeout = _useTimeout.clear;
+
+  var onTrackerDragStart = React.useCallback(function () {
+    clearVisibilityTimeout();
+    setTrackerVisible(true);
+    isTrackerDragging.current = true;
+  }, [clearVisibilityTimeout]);
+  var onTrackerDragStop = React.useCallback(function () {
+    isTrackerDragging.current = false;
+
+    if (!isMouseOver.current) {
+      setVisibilityTimeout();
+    }
+  }, [setVisibilityTimeout, isMouseOver]);
+  /**
+   * Позволяет "запланировать" скрытие ползунка через delay миллисекунд. Если тайм-аут не успевает сработать, то каждый
+   * последующий вызов функции откладывает скрытие ползунка на delay миллисекунд
+   */
+
+  var queueTrackerVisibility = React.useCallback(function () {
+    if (isTrackerDragging.current) {
+      return;
+    }
+
+    setTrackerVisible(true);
+    setVisibilityTimeout();
+  }, [setVisibilityTimeout]);
+  var onTrackerMouseEnter = React.useCallback(function () {
+    clearVisibilityTimeout();
+    isMouseOver.current = true;
+    setTrackerVisible(true);
+  }, [clearVisibilityTimeout]);
+  var onTrackerMouseLeave = React.useCallback(function () {
+    queueTrackerVisibility();
+    isMouseOver.current = false;
+  }, [queueTrackerVisibility]);
+  var onTargetScroll = React.useCallback(function () {
+    queueTrackerVisibility();
+  }, [queueTrackerVisibility]);
+  return {
+    trackerVisible: trackerVisible,
+    onTrackerDragStart: onTrackerDragStart,
+    onTrackerDragStop: onTrackerDragStop,
+    onTrackerMouseEnter: onTrackerMouseEnter,
+    onTrackerMouseLeave: onTrackerMouseLeave,
+    onTargetScroll: onTargetScroll
+  };
+};
+//# sourceMappingURL=useTrackerVisibility.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CustomScrollView/useTrackerVisibility.ts"],"names":["React","useTimeout","useTrackerVisibility","autoHideScrollbar","autoHideScrollbarDelay","useState","trackerVisible","setTrackerVisible","isMouseOver","useRef","isTrackerDragging","setVisibilityTimeout","set","clearVisibilityTimeout","clear","onTrackerDragStart","useCallback","current","onTrackerDragStop","queueTrackerVisibility","onTrackerMouseEnter","onTrackerMouseLeave","onTargetScroll"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,GAGP;AAAA,MAF3BC,iBAE2B,uEAFP,KAEO;AAAA,MAD3BC,sBAC2B,uEADF,GACE;;AAC3B,wBAA4CJ,KAAK,CAACK,QAAN,CAC1C,CAACF,iBADyC,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AAGA,MAAMC,WAAW,GAAGR,KAAK,CAACS,MAAN,CAAa,KAAb,CAApB;AACA,MAAMC,iBAAiB,GAAGV,KAAK,CAACS,MAAN,CAAa,KAAb,CAA1B;;AAEA,oBACER,UAAU,CAAC;AAAA,WAAMM,iBAAiB,CAAC,KAAD,CAAvB;AAAA,GAAD,EAAiCH,sBAAjC,CADZ;AAAA,MAAaO,oBAAb,eAAQC,GAAR;AAAA,MAA0CC,sBAA1C,eAAmCC,KAAnC;;AAGA,MAAMC,kBAAkB,GAAGf,KAAK,CAACgB,WAAN,CAAkB,YAAM;AACjDH,IAAAA,sBAAsB;AACtBN,IAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACAG,IAAAA,iBAAiB,CAACO,OAAlB,GAA4B,IAA5B;AACD,GAJ0B,EAIxB,CAACJ,sBAAD,CAJwB,CAA3B;AAMA,MAAMK,iBAAiB,GAAGlB,KAAK,CAACgB,WAAN,CAAkB,YAAM;AAChDN,IAAAA,iBAAiB,CAACO,OAAlB,GAA4B,KAA5B;;AACA,QAAI,CAACT,WAAW,CAACS,OAAjB,EAA0B;AACxBN,MAAAA,oBAAoB;AACrB;AACF,GALyB,EAKvB,CAACA,oBAAD,EAAuBH,WAAvB,CALuB,CAA1B;AAOA;AACF;AACA;AACA;;AACE,MAAMW,sBAAsB,GAAGnB,KAAK,CAACgB,WAAN,CAAkB,YAAM;AACrD,QAAIN,iBAAiB,CAACO,OAAtB,EAA+B;AAC7B;AACD;;AACDV,IAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACAI,IAAAA,oBAAoB;AACrB,GAN8B,EAM5B,CAACA,oBAAD,CAN4B,CAA/B;AAQA,MAAMS,mBAAmB,GAAGpB,KAAK,CAACgB,WAAN,CAAkB,YAAM;AAClDH,IAAAA,sBAAsB;AACtBL,IAAAA,WAAW,CAACS,OAAZ,GAAsB,IAAtB;AACAV,IAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD,GAJ2B,EAIzB,CAACM,sBAAD,CAJyB,CAA5B;AAMA,MAAMQ,mBAAmB,GAAGrB,KAAK,CAACgB,WAAN,CAAkB,YAAM;AAClDG,IAAAA,sBAAsB;AACtBX,IAAAA,WAAW,CAACS,OAAZ,GAAsB,KAAtB;AACD,GAH2B,EAGzB,CAACE,sBAAD,CAHyB,CAA5B;AAKA,MAAMG,cAAc,GAAGtB,KAAK,CAACgB,WAAN,CAAkB,YAAM;AAC7CG,IAAAA,sBAAsB;AACvB,GAFsB,EAEpB,CAACA,sBAAD,CAFoB,CAAvB;AAIA,SAAO;AACLb,IAAAA,cAAc,EAAdA,cADK;AAELS,IAAAA,kBAAkB,EAAlBA,kBAFK;AAGLG,IAAAA,iBAAiB,EAAjBA,iBAHK;AAILE,IAAAA,mBAAmB,EAAnBA,mBAJK;AAKLC,IAAAA,mBAAmB,EAAnBA,mBALK;AAMLC,IAAAA,cAAc,EAAdA;AANK,GAAP;AAQD,CA7DM","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(\n    !autoHideScrollbar\n  );\n  const isMouseOver = React.useRef(false);\n  const isTrackerDragging = React.useRef(false);\n\n  const { set: setVisibilityTimeout, clear: clearVisibilityTimeout } =\n    useTimeout(() => setTrackerVisible(false), autoHideScrollbarDelay);\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"],"file":"useTrackerVisibility.js"}

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

@@ -3,6 +3,7 @@ import { NativeSelectProps } from "../NativeSelect/NativeSelect";
 import { CustomSelectOptionProps } from "../CustomSelectOption/CustomSelectOption";
 import { FormFieldProps } from "../FormField/FormField";
 import { HasPlatform } from "../../types";
+import { TrackerOptionsProps } from "../CustomScrollView/useTrackerVisibility";
 import { SelectType } from "../Select/Select";
 import "./CustomSelect.css";
 declare type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>["value"];
@@ -12,7 +13,7 @@ export interface CustomSelectOptionInterface {
     disabled?: boolean;
     [index: string]: any;
 }
-export interface CustomSelectProps extends NativeSelectProps, HasPlatform, FormFieldProps {
+export interface CustomSelectProps extends NativeSelectProps, HasPlatform, FormFieldProps, TrackerOptionsProps {
     /**
      * Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
      * производится по `option.label`.
@@ -31,7 +32,7 @@ export interface CustomSelectProps extends NativeSelectProps, HasPlatform, FormF
     popupDirection?: "top" | "bottom";
     /**
      * Рендер-проп для кастомного рендера опции.
-     * В объекте аргумента приходят [свойства опции](#/CustomSelectOption?id=props)
+     * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)
      */
     renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
     /**
@@ -57,5 +58,5 @@ export interface CustomSelectProps extends NativeSelectProps, HasPlatform, FormF
 /**
  * @see https://vkcom.github.io/VKUI/#/CustomSelect
  */
-export declare const CustomSelect: React.FC<Pick<Pick<CustomSelectProps, "platform" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "size" | "icon" | "after" | "multiple" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "align" | "getRootRef" | "getRef" | "onOpen" | "onClose" | "before" | "options" | "popupDirection" | "multiline" | "onInputChange" | "selectType" | "fetching" | "searchable" | "emptyText" | "filterFn" | "renderOption" | "renderDropdown" | "dropdownOffsetDistance" | "fixDropdownWidth" | "forceDropdownPortal"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps, "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "size" | "icon" | "after" | "multiple" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "align" | "getRootRef" | "sizeX" | "sizeY" | "getRef" | "onOpen" | "onClose" | "before" | "options" | "popupDirection" | "multiline" | "onInputChange" | "selectType" | "fetching" | "searchable" | "emptyText" | "filterFn" | "renderOption" | "renderDropdown" | "dropdownOffsetDistance" | "fixDropdownWidth" | "forceDropdownPortal">>;
+export declare const CustomSelect: React.FC<Pick<Pick<CustomSelectProps, "platform" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "size" | "icon" | "after" | "multiple" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "align" | "getRootRef" | "getRef" | "onOpen" | "onClose" | "before" | "options" | "popupDirection" | "multiline" | "onInputChange" | "selectType" | "searchable" | "emptyText" | "filterFn" | "renderOption" | "renderDropdown" | "fetching" | "dropdownOffsetDistance" | "fixDropdownWidth" | "forceDropdownPortal" | "autoHideScrollbar" | "autoHideScrollbarDelay"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps, "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "size" | "icon" | "after" | "multiple" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "align" | "getRootRef" | "sizeX" | "sizeY" | "getRef" | "onOpen" | "onClose" | "before" | "options" | "popupDirection" | "multiline" | "onInputChange" | "selectType" | "searchable" | "emptyText" | "filterFn" | "renderOption" | "renderDropdown" | "fetching" | "dropdownOffsetDistance" | "fixDropdownWidth" | "forceDropdownPortal" | "autoHideScrollbar" | "autoHideScrollbarDelay">>;
 export {};

package/dist/cssm/components/CustomSelect/CustomSelect.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
-var _excluded = ["before", "searchable", "name", "className", "getRef", "getRootRef", "popupDirection", "options", "sizeY", "platform", "style", "onChange", "onBlur", "onFocus", "onClick", "renderOption", "children", "emptyText", "onInputChange", "filterFn", "renderDropdown", "onOpen", "onClose", "fetching", "icon", "dropdownOffsetDistance", "fixDropdownWidth", "forceDropdownPortal", "selectType"],
+var _excluded = ["before", "searchable", "name", "className", "getRef", "getRootRef", "popupDirection", "options", "sizeY", "platform", "style", "onChange", "onBlur", "onFocus", "onClick", "renderOption", "children", "emptyText", "onInputChange", "filterFn", "renderDropdown", "onOpen", "onClose", "fetching", "icon", "dropdownOffsetDistance", "fixDropdownWidth", "forceDropdownPortal", "selectType", "autoHideScrollbar", "autoHideScrollbarDelay"],
     _excluded2 = ["option"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
@@ -46,7 +46,7 @@ var findIndexBefore = function findIndexBefore() {
   var endIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : options.length;
   var result = -1;
 
-  if (options === undefined || endIndex <= 0) {
+  if (endIndex <= 0) {
     return result;
   }
 
@@ -589,6 +589,8 @@ var CustomSelectComponent = /*#__PURE__*/function (_React$Component) {
           forceDropdownPortal = _this$props2.forceDropdownPortal,
           _this$props2$selectTy = _this$props2.selectType,
           selectType = _this$props2$selectTy === void 0 ? SelectType.default : _this$props2$selectTy,
+          autoHideScrollbar = _this$props2.autoHideScrollbar,
+          autoHideScrollbarDelay = _this$props2.autoHideScrollbarDelay,
           restProps = _objectWithoutProperties(_this$props2, _excluded);
 
       var selected = this.getSelectedItem();
@@ -662,7 +664,10 @@ var CustomSelectComponent = /*#__PURE__*/function (_React$Component) {
         fetching: fetching,
         offsetDistance: dropdownOffsetDistance,
         sameWidth: fixDropdownWidth,
-        forcePortal: forceDropdownPortal
+        forcePortal: forceDropdownPortal,
+        autoHideScrollbar: autoHideScrollbar,
+        autoHideScrollbarDelay: autoHideScrollbarDelay,
+        observableRefs: this.scrollBoxRef
       }, resolvedContent));
     }
   }]);