@vkontakte/vkui 4.33.4 → 4.34.2

package/src/components/Cell/CellCheckbox/CellCheckbox.tsx

@@ -15,11 +15,11 @@ import "./CellCheckbox.css";
 export type CellCheckboxProps = Pick<CellProps, "defaultChecked" | "checked"> &
   React.InputHTMLAttributes<HTMLInputElement>;
 
-export const CellCheckbox: React.FC<CellCheckboxProps> = ({
+export const CellCheckbox = ({
   className,
   style,
   ...restProps
-}) => {
+}: CellCheckboxProps) => {
   const platform = usePlatform();
 
   const IconOff =

package/src/components/Cell/CellDragger/CellDragger.tsx

@@ -10,12 +10,12 @@ import "./CellDragger.css";
 
 type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
 
-export const CellDragger: React.FC<CellDraggerProps> = ({
+export const CellDragger = ({
   onDragStart,
   onDragMove,
   onDragEnd,
   ...restProps
-}) => {
+}: CellDraggerProps) => {
   const platform = usePlatform();
 
   const onClick = React.useCallback((e: React.MouseEvent) => {

package/src/components/CellButton/CellButton.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { SimpleCell, SimpleCellProps } from "../SimpleCell/SimpleCell";
 import "./CellButton.css";
@@ -11,7 +10,7 @@ export interface CellButtonProps extends SimpleCellProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/CellButton
  */
-export const CellButton: React.FC<CellButtonProps> = ({
+export const CellButton = ({
   centered = false,
   mode = "primary",
   ...restProps

package/src/components/Checkbox/Checkbox.tsx

@@ -41,7 +41,7 @@ const warn = warnOnce("Checkbox");
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
-export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
+export const Checkbox = ({
   children,
   className,
   style,
@@ -67,7 +67,7 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
   }, [defaultIndeterminate, indeterminate, inputRef]);
 
   const handleChange: CheckboxProps["onChange"] = React.useCallback(
-    (event) => {
+    (event: React.ChangeEvent<HTMLInputElement>) => {
       if (
         defaultIndeterminate !== undefined &&
         indeterminate === undefined &&

package/src/components/Chip/Chip.tsx

@@ -22,7 +22,7 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */
-export const Chip: React.FC<ChipProps> = ({
+export const Chip = ({
   value = "",
   option,
   removable = true,

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -75,10 +75,10 @@ export interface ChipsSelectProps<Option extends ChipsInputOption>
   closeAfterSelect?: boolean;
 }
 
-type focusActionType = "next" | "prev";
+type FocusActionType = "next" | "prev";
 
-const FOCUS_ACTION_NEXT: focusActionType = "next";
-const FOCUS_ACTION_PREV: focusActionType = "prev";
+const FOCUS_ACTION_NEXT: FocusActionType = "next";
+const FOCUS_ACTION_PREV: FocusActionType = "prev";
 
 const chipsSelectDefaultProps: ChipsSelectProps<any> = {
   ...chipsInputDefaultProps,
@@ -217,7 +217,7 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
     setFocusedOptionIndex(index);
   };
 
-  const focusOption = (nextIndex: number | null, type: focusActionType) => {
+  const focusOption = (nextIndex: number | null, type: FocusActionType) => {
     let index = typeof nextIndex !== "number" ? -1 : nextIndex;
 
     if (type === FOCUS_ACTION_NEXT) {
@@ -350,6 +350,11 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
     setFocusedOptionIndex(null);
   }, [setFocusedOptionIndex]);
 
+  const observableRefs = React.useMemo(
+    () => [scrollBoxRef, rootRef],
+    [rootRef, scrollBoxRef]
+  );
+
   return (
     <div
       vkuiClass={classNames("ChipsSelect", `ChipsSelect--sizeY-${sizeY}`)}
@@ -384,6 +389,7 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
           targetRef={rootRef}
           placement={popupDirection}
           scrollBoxRef={scrollBoxRef}
+          observableRefs={observableRefs}
           onPlacementChange={onPlacementChange}
           onMouseLeave={onDropdownMouseLeave}
           fetching={fetching}
@@ -456,3 +462,5 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
 export const ChipsSelect = withAdaptivity(ChipsSelectComponent, {
   sizeY: true,
 });
+
+ChipsSelect.displayName = "ChipsSelect";

package/src/components/ChipsSelect/Readme.md

@@ -6,7 +6,7 @@
 
 > **Важно**
 >
-> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](https://vkcom.github.io/VKUI/#/Unstable).
 
 ```jsx { "props": { "layout": false, "iframe": false } }
 const colors = [

package/src/components/ClickPopper/ClickPopper.tsx

@@ -25,7 +25,7 @@ export interface ClickPopperProps extends PopperCommonProps {
   children?: React.ReactElement;
 }
 
-export const ClickPopper: React.FC<ClickPopperProps> = ({
+export const ClickPopper = ({
   getRef,
   content,
   children,

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
-import vkBridge, { AppearanceType } from "@vkontakte/vk-bridge";
+import { AppearanceType } from "@vkontakte/vk-bridge";
 import { canUseDOM, useDOM } from "../../lib/dom";
 import {
   ConfigProviderContext,
   ConfigProviderContextInterface,
-  WebviewType,
 } from "./ConfigProviderContext";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
@@ -20,7 +19,6 @@ import {
   generateVKUITokensClassName,
 } from "../AppearanceProvider/AppearanceProvider";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
-import { platform as resolvePlatform } from "../../lib/platform";
 
 export interface ConfigProviderProps
   extends Partial<ConfigProviderContextInterface> {
@@ -33,6 +31,7 @@ export interface ConfigProviderProps
     Локаль ([список](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry))
    */
   locale?: string;
+  children?: React.ReactNode;
 }
 
 const warn = warnOnce("ConfigProvider");
@@ -71,17 +70,22 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
 /**
  * @see https://vkcom.github.io/VKUI/#/ConfigProvider
  */
-export const ConfigProvider: React.FC<ConfigProviderProps> = ({
-  children,
-  webviewType = WebviewType.VKAPPS,
-  isWebView = vkBridge.isWebView(),
-  transitionMotionEnabled = true,
-  platform = resolvePlatform(),
-  hasNewTokens = false,
-  appearance,
-  scheme,
-  locale = "ru",
-}) => {
+export const ConfigProvider = (props: ConfigProviderProps) => {
+  const parentLocale = React.useContext(LocaleProviderContext);
+  const parentConfig = React.useContext(ConfigProviderContext);
+
+  const {
+    children,
+    webviewType = parentConfig.webviewType,
+    isWebView = parentConfig.isWebView,
+    transitionMotionEnabled = parentConfig.transitionMotionEnabled,
+    platform = parentConfig.platform,
+    hasNewTokens = parentConfig.hasNewTokens,
+    appearance = parentConfig.appearance,
+    scheme,
+    locale = parentLocale ?? "ru",
+  } = props;
+
   const normalizedScheme = normalizeScheme({
     scheme,
     platform,
@@ -96,7 +100,8 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = ({
     }
     if (
       process.env.NODE_ENV === "development" &&
-      target?.hasAttribute("scheme")
+      target?.hasAttribute("scheme") &&
+      parentConfig.appearance === undefined // appearance не была вычислена в родительском конфиге, @deprecated будет удалено в 5.0.0
     ) {
       warn(
         '<body scheme> был установлен перед монтированием VKUI - вы не забыли scheme="inherit"?'
@@ -115,9 +120,11 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = ({
       derivedAppearance
     );
 
+    // eslint-disable-next-line no-restricted-properties
     target?.classList.add(VKUITokensClassName);
 
     return () => {
+      // eslint-disable-next-line no-restricted-properties
       target?.classList.remove(VKUITokensClassName);
     };
   }, [platform, derivedAppearance]);

package/src/components/ConfigProvider/Readme.md

@@ -1 +1 @@
-Компонент для прокидывания конфига приложению. Помимо прочего, отвечает за установку [темы и платформы](#/PlatformsAndThemes).
+Компонент для прокидывания конфига приложению. Помимо прочего, отвечает за установку [темы и платформы](https://vkcom.github.io/VKUI/#/PlatformsAndThemes).

package/src/components/CustomScrollView/CustomScrollView.css

@@ -44,6 +44,11 @@
   user-select: none;
 }
 
+.CustomScrollView__trackerY--hidden {
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
 .CustomScrollView__trackerY::before {
   content: "";
   opacity: 0.28;

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -1,11 +1,16 @@
-import { DOMProps, useDOM } from "../../lib/dom";
 import * as React from "react";
-import { useExternRef } from "../../hooks/useExternRef";
+import { DOMProps, 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 {
+  TrackerOptionsProps,
+  useTrackerVisibility,
+} from "./useTrackerVisibility";
 import "./CustomScrollView.css";
 
-export interface CustomScrollViewProps extends DOMProps {
+export interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {
   windowResize?: boolean;
   boxRef?: React.Ref<HTMLDivElement>;
   className?: HTMLDivElement["className"];
@@ -17,6 +22,8 @@ export const CustomScrollView = ({
   children,
   boxRef: externalBoxRef,
   windowResize,
+  autoHideScrollbar = false,
+  autoHideScrollbarDelay,
 }: CustomScrollViewProps) => {
   const { document, window } = useDOM();
 
@@ -116,8 +123,22 @@ export const CustomScrollView = ({
     setScrollPositionFromTracker(position);
   };
 
+  const {
+    trackerVisible,
+    onTargetScroll,
+    onTrackerDragStart,
+    onTrackerDragStop,
+    onTrackerMouseEnter,
+    onTrackerMouseLeave,
+  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);
+
   const onUp = (e: MouseEvent) => {
     e.preventDefault();
+
+    if (autoHideScrollbar) {
+      onTrackerDragStop();
+    }
+
     unsubscribe();
   };
 
@@ -126,6 +147,10 @@ export const CustomScrollView = ({
       return;
     }
 
+    if (autoHideScrollbar) {
+      onTargetScroll();
+    }
+
     setTrackerPositionFromScroll(boxRef.current.scrollTop);
   };
 
@@ -149,6 +174,10 @@ export const CustomScrollView = ({
     startY.current = e.clientY;
     trackerTop.current = lastTrackerTop.current;
 
+    if (autoHideScrollbar) {
+      onTrackerDragStart();
+    }
+
     subscribe(document);
   };
 
@@ -156,7 +185,12 @@ export const CustomScrollView = ({
     <div vkuiClass="CustomScrollView" className={className}>
       <div vkuiClass="CustomScrollView__barY" ref={barY}>
         <div
-          vkuiClass="CustomScrollView__trackerY"
+          vkuiClass={classNames(
+            "CustomScrollView__trackerY",
+            !trackerVisible && `CustomScrollView__trackerY--hidden`
+          )}
+          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}
+          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}
           ref={trackerY}
           onMouseDown={onDragStart}
         />

package/src/components/CustomScrollView/useTrackerVisibility.ts

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { useTimeout } from "../../hooks/useTimeout";
+
+/**
+ * Хук, который позволяет управлять видимостью ползунка скроллбара.
+ * @param autoHideScrollbar - скрывать ли ползунок скроллбара
+ * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается
+ * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка
+ */
+export const useTrackerVisibility = (
+  autoHideScrollbar = false,
+  autoHideScrollbarDelay = 500
+): TrackerVisibilityProps => {
+  const [trackerVisible, setTrackerVisible] = React.useState(
+    !autoHideScrollbar
+  );
+  const isMouseOver = React.useRef(false);
+  const isTrackerDragging = React.useRef(false);
+
+  const { set: setVisibilityTimeout, clear: clearVisibilityTimeout } =
+    useTimeout(() => setTrackerVisible(false), autoHideScrollbarDelay);
+
+  const onTrackerDragStart = React.useCallback(() => {
+    clearVisibilityTimeout();
+    setTrackerVisible(true);
+    isTrackerDragging.current = true;
+  }, [clearVisibilityTimeout]);
+
+  const onTrackerDragStop = React.useCallback(() => {
+    isTrackerDragging.current = false;
+    if (!isMouseOver.current) {
+      setVisibilityTimeout();
+    }
+  }, [setVisibilityTimeout, isMouseOver]);
+
+  /**
+   * Позволяет "запланировать" скрытие ползунка через delay миллисекунд. Если тайм-аут не успевает сработать, то каждый
+   * последующий вызов функции откладывает скрытие ползунка на delay миллисекунд
+   */
+  const queueTrackerVisibility = React.useCallback(() => {
+    if (isTrackerDragging.current) {
+      return;
+    }
+    setTrackerVisible(true);
+    setVisibilityTimeout();
+  }, [setVisibilityTimeout]);
+
+  const onTrackerMouseEnter = React.useCallback(() => {
+    clearVisibilityTimeout();
+    isMouseOver.current = true;
+    setTrackerVisible(true);
+  }, [clearVisibilityTimeout]);
+
+  const onTrackerMouseLeave = React.useCallback(() => {
+    queueTrackerVisibility();
+    isMouseOver.current = false;
+  }, [queueTrackerVisibility]);
+
+  const onTargetScroll = React.useCallback(() => {
+    queueTrackerVisibility();
+  }, [queueTrackerVisibility]);
+
+  return {
+    trackerVisible,
+    onTrackerDragStart,
+    onTrackerDragStop,
+    onTrackerMouseEnter,
+    onTrackerMouseLeave,
+    onTargetScroll,
+  };
+};
+
+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/src/components/CustomSelect/CustomSelect.tsx

@@ -28,6 +28,7 @@ import {
 import { is } from "../../lib/is";
 import { Placement } from "../Popper/Popper";
 import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown";
+import { TrackerOptionsProps } from "../CustomScrollView/useTrackerVisibility";
 import { SelectType } from "../Select/Select";
 import "./CustomSelect.css";
 
@@ -46,7 +47,7 @@ const findIndexBefore = (
   endIndex: number = options.length
 ) => {
   let result = -1;
-  if (options === undefined || endIndex <= 0) {
+  if (endIndex <= 0) {
     return result;
   }
   for (let i = endIndex - 1; i >= 0; i--) {
@@ -93,7 +94,8 @@ interface CustomSelectState {
 export interface CustomSelectProps
   extends NativeSelectProps,
     HasPlatform,
-    FormFieldProps {
+    FormFieldProps,
+    TrackerOptionsProps {
   /**
    * Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
    * производится по `option.label`.
@@ -123,7 +125,7 @@ export interface CustomSelectProps
   popupDirection?: "top" | "bottom";
   /**
    * Рендер-проп для кастомного рендера опции.
-   * В объекте аргумента приходят [свойства опции](#/CustomSelectOption?id=props)
+   * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)
    */
   renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
   /**
@@ -667,6 +669,8 @@ class CustomSelectComponent extends React.Component<
       fixDropdownWidth,
       forceDropdownPortal,
       selectType = SelectType.default,
+      autoHideScrollbar,
+      autoHideScrollbarDelay,
       ...restProps
     } = this.props;
     const selected = this.getSelectedItem();
@@ -766,6 +770,9 @@ class CustomSelectComponent extends React.Component<
             offsetDistance={dropdownOffsetDistance}
             sameWidth={fixDropdownWidth}
             forcePortal={forceDropdownPortal}
+            autoHideScrollbar={autoHideScrollbar}
+            autoHideScrollbarDelay={autoHideScrollbarDelay}
+            observableRefs={this.scrollBoxRef}
           >
             {resolvedContent}
           </CustomSelectDropdown>