@vkontakte/vkui 4.27.2 → 4.29.0

package/src/hooks/useDateInput.ts

@@ -0,0 +1,213 @@
+import * as React from "react";
+import { useBooleanState } from "./useBooleanState";
+import { useGlobalEventListener } from "./useGlobalEventListener";
+import { useDOM } from "../lib/dom";
+
+export interface UseDateInputDependencies<T, D> {
+  maxElement: number;
+  refs: Array<React.RefObject<T>>;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  value?: D;
+  elementsConfig(index: number): {
+    length: number;
+    min: number;
+    max: number;
+  };
+  onInternalValueChange(value: string[]): void;
+  getInternalValue(value?: D | undefined): string[];
+  onChange?(value?: D | undefined): void;
+}
+
+export function useDateInput<T extends HTMLElement, D>({
+  maxElement,
+  refs,
+  autoFocus,
+  disabled,
+  elementsConfig,
+  onChange,
+  onInternalValueChange,
+  getInternalValue,
+  value,
+}: UseDateInputDependencies<T, D>) {
+  const { document } = useDOM();
+  const {
+    value: open,
+    setTrue: openCalendar,
+    setFalse: closeCalendar,
+  } = useBooleanState(false);
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const calendarRef = React.useRef<HTMLDivElement>(null);
+  const [internalValue, setInternalValue] = React.useState<string[]>([]);
+  const [focusedElement, setFocusedElement] = React.useState<number | null>(
+    null
+  );
+  const { window } = useDOM();
+
+  const removeFocusFromField = React.useCallback(() => {
+    if (open) {
+      setFocusedElement(null);
+      closeCalendar();
+      window!.getSelection()?.removeAllRanges();
+      setInternalValue(getInternalValue(value));
+    }
+  }, [closeCalendar, getInternalValue, open, value, window]);
+
+  const handleClickOutside = React.useCallback(
+    (e: MouseEvent) => {
+      if (
+        !rootRef.current?.contains(e.target as Node | null) &&
+        !calendarRef.current?.contains(e.target as Node | null)
+      ) {
+        removeFocusFromField();
+      }
+    },
+    [removeFocusFromField]
+  );
+
+  const selectFirst = React.useCallback(() => {
+    setFocusedElement(0);
+  }, []);
+
+  useGlobalEventListener(document, "click", handleClickOutside, {
+    capture: true,
+  });
+
+  React.useEffect(() => {
+    setInternalValue(getInternalValue(value));
+  }, [getInternalValue, value]);
+
+  React.useEffect(() => {
+    if (autoFocus) {
+      selectFirst();
+    }
+  }, [autoFocus, selectFirst]);
+
+  React.useEffect(() => {
+    if (disabled || focusedElement === null) {
+      return;
+    }
+
+    const range = window!.document.createRange();
+
+    let element = refs[focusedElement].current;
+
+    if (element) {
+      element.focus();
+      openCalendar();
+      range.selectNodeContents(element as Node);
+
+      const selection = window!.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    }
+  }, [disabled, focusedElement, openCalendar, refs, window]);
+
+  const clear = React.useCallback(() => {
+    onChange?.(undefined);
+    selectFirst();
+  }, [onChange, selectFirst]);
+
+  const handleFieldEnter = React.useCallback(() => {
+    if (!open) {
+      selectFirst();
+    }
+  }, [open, selectFirst]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (focusedElement === null) {
+        return;
+      }
+
+      const _value = [...internalValue];
+      const config = elementsConfig(focusedElement);
+
+      if (/^\d+$/.test(e.key)) {
+        if (_value[focusedElement].length >= config.length) {
+          _value[focusedElement] = e.key;
+        } else {
+          _value[focusedElement] += e.key;
+          if (
+            _value[focusedElement].length >= config.length &&
+            focusedElement < maxElement
+          ) {
+            setFocusedElement(focusedElement + 1);
+          }
+        }
+      } else if (e.key === "Backspace") {
+        if (!_value[focusedElement]) {
+          setFocusedElement(
+            focusedElement <= 0 ? maxElement : focusedElement - 1
+          );
+        } else {
+          _value[focusedElement] = _value[focusedElement].slice(0, -1);
+        }
+      } else if (e.key === "ArrowDown" || e.key === "Down") {
+        let currentValue = Number(_value[focusedElement]);
+        _value[focusedElement] = String(
+          currentValue <= config.min ? config.max : currentValue - 1
+        ).padStart(config.length, "0");
+      } else if (e.key === "ArrowUp" || e.key === "Up") {
+        let currentValue = Number(_value[focusedElement]);
+        _value[focusedElement] = String(
+          currentValue >= config.max ? config.min : currentValue + 1
+        ).padStart(config.length, "0");
+      } else if (
+        e.key === "Enter" ||
+        (e.key === "Tab" && focusedElement === maxElement) ||
+        (e.key === "Tab" && e.shiftKey && focusedElement === 0)
+      ) {
+        removeFocusFromField();
+        return;
+      } else if (
+        e.key === "ArrowLeft" ||
+        e.key === "Left" ||
+        (e.key === "Tab" && e.shiftKey)
+      ) {
+        setFocusedElement(
+          focusedElement <= 0 ? maxElement : focusedElement - 1
+        );
+      } else if (
+        e.key === "ArrowRight" ||
+        e.key === "Right" ||
+        e.key === "Tab"
+      ) {
+        setFocusedElement(
+          focusedElement >= maxElement ? 0 : focusedElement + 1
+        );
+      } else if (e.key === "Delete" || e.key === "Del") {
+        _value[focusedElement] = "";
+      } else {
+        return;
+      }
+
+      e.preventDefault();
+      setInternalValue(_value);
+      onInternalValueChange(_value);
+    },
+    [
+      elementsConfig,
+      focusedElement,
+      internalValue,
+      maxElement,
+      onInternalValueChange,
+      removeFocusFromField,
+    ]
+  );
+
+  return {
+    rootRef,
+    calendarRef,
+    open,
+    openCalendar,
+    closeCalendar,
+    internalValue,
+    focusedElement,
+    setFocusedElement,
+    handleKeyDown,
+    clear,
+    handleFieldEnter,
+    removeFocusFromField,
+  };
+}

package/src/hooks/useKeyboard.ts

@@ -8,7 +8,7 @@ interface SoftwareKeyboardState {
 }
 
 /**
- Проверяет, закрыла ли клавиатура часть экрана, 24% подошло к большиству устройств
+ Проверяет, закрыла ли клавиатура часть экрана, 24% подошло к большинству устройств
  Работает на iOS и Android, где софт-клавиатура ресайзит viewport в браузерах
  */
 export function getPreciseKeyboardState(window: any): boolean {

package/src/hooks/useKeyboardInputTracker.ts

@@ -3,18 +3,28 @@ import { Keys, pressedKey } from "../lib/accessibility";
 import { useDOM } from "../lib/dom";
 import { useGlobalEventListener } from "./useGlobalEventListener";
 
+export const ENABLE_KEYBOARD_INPUT_EVENT_NAME = "enableKeyboardInput";
+export const DISABLE_KEYBOARD_INPUT_EVENT_NAME = "disableKeyboardInput";
+
 export function useKeyboardInputTracker(): boolean {
   const { document } = useDOM();
 
   const [isKeyboardInputActive, toggleKeyboardInput] =
     React.useState<boolean>(false);
 
-  const enableKeyboardInput = React.useCallback((e: KeyboardEvent) => {
-    if (pressedKey(e) === Keys.TAB) {
-      toggleKeyboardInput(true);
-    }
+  const enableKeyboardInput = React.useCallback(() => {
+    toggleKeyboardInput(true);
   }, []);
 
+  const handleKeydown = React.useCallback(
+    (e: KeyboardEvent) => {
+      if (pressedKey(e) === Keys.TAB) {
+        enableKeyboardInput();
+      }
+    },
+    [enableKeyboardInput]
+  );
+
   const disableKeyboardInput = React.useCallback(() => {
     toggleKeyboardInput(false);
   }, []);
@@ -24,21 +34,28 @@ export function useKeyboardInputTracker(): boolean {
     capture: true,
   };
 
+  useGlobalEventListener(document, "keydown", handleKeydown, eventOptions);
   useGlobalEventListener(
     document,
-    "keydown",
-    enableKeyboardInput,
+    "mousedown",
+    disableKeyboardInput,
     eventOptions
   );
   useGlobalEventListener(
     document,
-    "mousedown",
+    "touchstart",
     disableKeyboardInput,
     eventOptions
   );
   useGlobalEventListener(
     document,
-    "touchstart",
+    ENABLE_KEYBOARD_INPUT_EVENT_NAME,
+    enableKeyboardInput,
+    eventOptions
+  );
+  useGlobalEventListener(
+    document,
+    DISABLE_KEYBOARD_INPUT_EVENT_NAME,
     disableKeyboardInput,
     eventOptions
   );

package/src/hooks/useOrientationChange.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { useDOM } from "../lib/dom";
+import { useGlobalEventListener } from "./useGlobalEventListener";
+
+type Orientation = "portrait" | "landscape";
+
+/**
+ * Возвращает текущую ориентация экрана на человеческом языке.
+ * Учитывает особенности API на разных платформах.
+ */
+function getOrientation(window: Window | undefined): Orientation {
+  if (!window) {
+    return "portrait";
+  }
+
+  const angle = Math.abs(
+    window.screen?.orientation?.angle ?? Number(window.orientation)
+  );
+
+  return angle === 90 ? "landscape" : "portrait";
+}
+
+/**
+ * Возвращает текущую ориентация экрана на человеческом языке.
+ * Обновляется при изменении ориентации.
+ */
+export function useOrientationChange(): Orientation {
+  const { window } = useDOM();
+
+  const [orientation, setOrientation] = React.useState(() =>
+    getOrientation(window)
+  );
+
+  useGlobalEventListener(window, "orientationchange", () =>
+    setOrientation(getOrientation(window))
+  );
+
+  return orientation;
+}

package/src/hooks/usePagination.ts

@@ -0,0 +1,96 @@
+import * as React from "react";
+
+interface UsePaginationProps {
+  /**
+   * Текущая страница.
+   */
+  currentPage?: number;
+  /**
+   * Кол-во всегда видимых страниц по краям текущей страницы.
+   */
+  siblingCount?: number;
+  /**
+   * Кол-во всегда видимых страниц в начале и в конце.
+   */
+  boundaryCount?: number;
+  /**
+   * Общее кол-во страниц.
+   */
+  totalPages?: number;
+}
+
+export type PaginationPageType = "start-ellipsis" | "end-ellipsis" | number;
+
+export type UsePaginationResult = PaginationPageType[];
+
+/**
+ * Хук позаимствован у @mui с некоторыми изменениями.
+ *  [usePagination.js](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js).
+ *
+ * Примеры вывода:
+ *           v
+ * [1, 2, 3, 4, 5, 'end-ellipsis', 10]
+ *                          v
+ * [1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10]
+ *                          v
+ * [1, 'start-ellipsis', 6, 7, 8, 9, 10]
+ */
+export const usePagination = ({
+  currentPage = 1,
+  siblingCount = 1,
+  boundaryCount = 1,
+  totalPages: endPage = 1,
+}: UsePaginationProps = {}): UsePaginationResult =>
+  React.useMemo(() => {
+    const range = (from: number, to: number, step = 1) => {
+      const range = [];
+      let i = from;
+
+      while (i <= to) {
+        range.push(i);
+        i += step;
+      }
+
+      return range;
+    };
+
+    const startPages = range(1, Math.min(boundaryCount, endPage));
+    const endPages = range(
+      Math.max(endPage - boundaryCount + 1, boundaryCount + 1),
+      endPage
+    );
+
+    const lowerBoundaryWhenCurrentPageHigh =
+      endPage - boundaryCount - 1 - 2 * siblingCount;
+    const siblingsStart = Math.max(
+      Math.min(currentPage - siblingCount, lowerBoundaryWhenCurrentPageHigh),
+      boundaryCount + 2
+    );
+
+    const upperBoundaryWhenCurrentPageLow =
+      boundaryCount + 2 + 2 * siblingCount;
+    const siblingsEnd = Math.min(
+      Math.max(currentPage + siblingCount, upperBoundaryWhenCurrentPageLow),
+      endPages.length > 0 ? endPages[0] - 2 : endPage - 1
+    );
+
+    const pages: UsePaginationResult = startPages;
+
+    if (siblingsStart > boundaryCount + 2) {
+      pages.push("start-ellipsis");
+    } else if (boundaryCount + 1 < endPage - boundaryCount) {
+      pages.push(boundaryCount + 1);
+    }
+
+    pages.push(...range(siblingsStart, siblingsEnd));
+
+    if (siblingsEnd < endPage - boundaryCount - 1) {
+      pages.push("end-ellipsis");
+    } else if (endPage - boundaryCount > boundaryCount) {
+      pages.push(endPage - boundaryCount);
+    }
+
+    pages.push(...endPages);
+
+    return pages;
+  }, [currentPage, endPage, siblingCount, boundaryCount]);

package/src/hooks/usePatchChildrenRef.ts

@@ -23,8 +23,8 @@ export const usePatchChildrenRef = <T = HTMLElement>(
   React.useEffect(() => {
     if (!patchedRef.current && process.env.NODE_ENV === "development") {
       warn(
-        "Кажется, в `children` передан компонент, который не поддерживает свойство `getRootRef`. Мы не можем" +
-          "получить ссылку на корневой dom-элемент этого компонента"
+        "Кажется, в children передан компонент, который не поддерживает свойство getRootRef. Мы не можем получить ссылку на корневой dom-элемент этого компонента",
+        "error"
       );
     }
   }, [children?.type, patchedRef]);

package/src/hooks/useWaitTransitionFinish.ts

@@ -1,8 +1,10 @@
 import * as React from "react";
+import { useDOM } from "../lib/dom";
 import { transitionEvent } from "../lib/supportEvents";
 
 export const useWaitTransitionFinish = () => {
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { document } = useDOM();
 
   const waitTransitionFinish = (
     element: HTMLElement | null,
@@ -10,7 +12,11 @@ export const useWaitTransitionFinish = () => {
     durationFallback: number
   ) => {
     if (element) {
-      if (transitionEvent.supported && transitionEvent.name) {
+      if (
+        !document?.hidden &&
+        transitionEvent.supported &&
+        transitionEvent.name
+      ) {
         element.removeEventListener(transitionEvent.name, eventHandler);
         element.addEventListener(transitionEvent.name, eventHandler);
       } else {

package/src/index.ts

@@ -31,7 +31,7 @@ export { default as Tabbar } from "./components/Tabbar/Tabbar";
 export type { TabbarProps } from "./components/Tabbar/Tabbar";
 export { default as TabbarItem } from "./components/TabbarItem/TabbarItem";
 export type { TabbarItemProps } from "./components/TabbarItem/TabbarItem";
-export { default as HorizontalScroll } from "./components/HorizontalScroll/HorizontalScroll";
+export { HorizontalScroll } from "./components/HorizontalScroll/HorizontalScroll";
 export type { HorizontalScrollProps } from "./components/HorizontalScroll/HorizontalScroll";
 export { default as FixedLayout } from "./components/FixedLayout/FixedLayout";
 export type { FixedLayoutProps } from "./components/FixedLayout/FixedLayout";
@@ -76,7 +76,9 @@ export type { ModalDismissButtonProps } from "./components/ModalDismissButton/Mo
  */
 export { Badge } from "./components/Badge/Badge";
 export type { BadgeProps } from "./components/Badge/Badge";
-export { default as Button } from "./components/Button/Button";
+export { ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
+export type { ButtonGroupProps } from "./components/ButtonGroup/ButtonGroup";
+export { Button } from "./components/Button/Button";
 export type { ButtonProps } from "./components/Button/Button";
 export { default as IconButton } from "./components/IconButton/IconButton";
 export type { IconButtonProps } from "./components/IconButton/IconButton";
@@ -156,6 +158,8 @@ export { SubnavigationBar } from "./components/SubnavigationBar/SubnavigationBar
 export type { SubnavigationBarProps } from "./components/SubnavigationBar/SubnavigationBar";
 export { SubnavigationButton } from "./components/SubnavigationButton/SubnavigationButton";
 export type { SubnavigationButtonProps } from "./components/SubnavigationButton/SubnavigationButton";
+export { Pagination } from "./components/Pagination/Pagination";
+export type { PaginationProps } from "./components/Pagination/Pagination";
 
 /**
  * Forms
@@ -174,11 +178,11 @@ export { Switch } from "./components/Switch/Switch";
 export type { SwitchProps } from "./components/Switch/Switch";
 export { default as File } from "./components/File/File";
 export type { FileProps } from "./components/File/File";
-export { default as Input } from "./components/Input/Input";
+export { Input } from "./components/Input/Input";
 export type { InputProps } from "./components/Input/Input";
 export { Chip } from "./components/Chip/Chip";
 export type { ChipProps } from "./components/Chip/Chip";
-export { default as ChipsInput } from "./components/ChipsInput/ChipsInput";
+export { ChipsInput } from "./components/ChipsInput/ChipsInput";
 export type { ChipsInputProps } from "./components/ChipsInput/ChipsInput";
 export { default as Slider } from "./components/Slider/Slider";
 export type { SliderProps } from "./components/Slider/Slider";
@@ -192,18 +196,18 @@ export { RadioGroup } from "./components/RadioGroup/RadioGroup";
 export type { RadioGroupProps } from "./components/RadioGroup/RadioGroup";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export type { CheckboxProps } from "./components/Checkbox/Checkbox";
-export { default as Select } from "./components/Select/Select";
+export { Select } from "./components/Select/Select";
 export type { SelectProps } from "./components/Select/Select";
 export { default as SelectMimicry } from "./components/SelectMimicry/SelectMimicry";
 export type { SelectMimicryProps } from "./components/SelectMimicry/SelectMimicry";
 export { default as NativeSelect } from "./components/NativeSelect/NativeSelect";
 export type { NativeSelectProps } from "./components/NativeSelect/NativeSelect";
-export { default as CustomSelect } from "./components/CustomSelect/CustomSelect";
+export { CustomSelect } from "./components/CustomSelect/CustomSelect";
 export type {
   CustomSelectProps,
   CustomSelectOptionInterface,
 } from "./components/CustomSelect/CustomSelect";
-export { default as CustomSelectOption } from "./components/CustomSelectOption/CustomSelectOption";
+export { CustomSelectOption } from "./components/CustomSelectOption/CustomSelectOption";
 export type { CustomSelectOptionProps } from "./components/CustomSelectOption/CustomSelectOption";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export type {
@@ -221,11 +225,19 @@ export type {
   SegmentedControlOptionInterface,
   SegmentedControlValue,
 } from "./components/SegmentedControl/SegmentedControl";
+export { Calendar } from "./components/Calendar/Calendar";
+export type { CalendarProps } from "./components/Calendar/Calendar";
+export { CalendarRange } from "./components/CalendarRange/CalendarRange";
+export type { CalendarRangeProps } from "./components/CalendarRange/CalendarRange";
+export { DateInput } from "./components/DateInput/DateInput";
+export type { DateInputProps } from "./components/DateInput/DateInput";
+export { DateRangeInput } from "./components/DateRangeInput/DateRangeInput";
+export type { DateRangeInputProps } from "./components/DateRangeInput/DateRangeInput";
 
 /**
  * Helpers
  */
-export { default as Div } from "./components/Div/Div";
+export { Div } from "./components/Div/Div";
 export type { DivProps } from "./components/Div/Div";
 export { default as Tappable } from "./components/Tappable/Tappable";
 export type { TappableProps } from "./components/Tappable/Tappable";
@@ -235,6 +247,7 @@ export { default as PanelSpinner } from "./components/PanelSpinner/PanelSpinner"
 export type { PanelSpinnerProps } from "./components/PanelSpinner/PanelSpinner";
 export { default as PanelHeaderClose } from "./components/PanelHeaderClose/PanelHeaderClose";
 export { default as PanelHeaderBack } from "./components/PanelHeaderBack/PanelHeaderBack";
+export type { PanelHeaderBackProps } from "./components/PanelHeaderBack/PanelHeaderBack";
 export { default as PanelHeaderSubmit } from "./components/PanelHeaderSubmit/PanelHeaderSubmit";
 export { default as PanelHeaderEdit } from "./components/PanelHeaderEdit/PanelHeaderEdit";
 export type { PanelHeaderEditProps } from "./components/PanelHeaderEdit/PanelHeaderEdit";
@@ -245,6 +258,7 @@ export type { ModalCardBaseProps } from "./components/ModalCardBase/ModalCardBas
  * Wrappers
  */
 export { AppRoot } from "./components/AppRoot/AppRoot";
+export type { AppRootProps } from "./components/AppRoot/AppRoot";
 export { AdaptivityProvider } from "./components/AdaptivityProvider/AdaptivityProvider";
 export { default as ConfigProvider } from "./components/ConfigProvider/ConfigProvider";
 export type { ConfigProviderProps } from "./components/ConfigProvider/ConfigProvider";
@@ -253,7 +267,9 @@ export {
   WebviewType,
 } from "./components/ConfigProvider/ConfigProviderContext";
 export { AppearanceProvider } from "./components/AppearanceProvider/AppearanceProvider";
+export type { AppearanceProviderProps } from "./components/AppearanceProvider/AppearanceProvider";
 export { Scheme, Appearance } from "./helpers/scheme";
+export { LocaleProviderContext } from "./components/LocaleProviderContext/LocaleProviderContext";
 
 /**
  * Advertisement
@@ -264,16 +280,18 @@ export type { PromoBannerProps } from "./components/PromoBanner/PromoBanner";
 /**
  * Typography
  */
-export { default as Title } from "./components/Typography/Title/Title";
+export { Title } from "./components/Typography/Title/Title";
 export type { TitleProps } from "./components/Typography/Title/Title";
 export { default as Headline } from "./components/Typography/Headline/Headline";
 export type { HeadlineProps } from "./components/Typography/Headline/Headline";
 export { default as Text } from "./components/Typography/Text/Text";
 export type { TextProps } from "./components/Typography/Text/Text";
-export { default as Caption } from "./components/Typography/Caption/Caption";
+export { Caption } from "./components/Typography/Caption/Caption";
 export type { CaptionProps } from "./components/Typography/Caption/Caption";
-export { default as Subhead } from "./components/Typography/Subhead/Subhead";
+export { Subhead } from "./components/Typography/Subhead/Subhead";
 export type { SubheadProps } from "./components/Typography/Subhead/Subhead";
+export { Paragraph } from "./components/Typography/Paragraph/Paragraph";
+export type { ParagraphProps } from "./components/Typography/Paragraph/Paragraph";
 
 /**
  * HOCs
@@ -289,6 +307,7 @@ export { useInsets } from "./hooks/useInsets";
 export { usePlatform } from "./hooks/usePlatform";
 export { useAdaptivity } from "./hooks/useAdaptivity";
 export { useAppearance } from "./hooks/useAppearance";
+export { usePagination } from "./hooks/usePagination";
 
 /**
  * Utils
@@ -297,6 +316,7 @@ export { classNamesString as classNames } from "./lib/classNames";
 export { default as animate } from "./lib/animate";
 export { removeObjectKeys } from "./lib/removeObjectKeys";
 export { SSRWrapper } from "./lib/SSR";
+export type { SSRWrapperProps } from "./lib/SSR";
 export {
   platform,
   ANDROID,
@@ -314,6 +334,7 @@ export {
 } from "./components/AdaptivityProvider/AdaptivityContext";
 export { calcInitialsAvatarColor } from "./helpers/avatar";
 export { Popper } from "./components/Popper/Popper";
+export type { PopperProps } from "./components/Popper/Popper";
 
 /**
  * Types