@vkontakte/vkui 4.27.1 → 4.28.1

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/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 UsePagintaionProps {
+  /**
+   * Текущая страница.
+   */
+  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,
+}: UsePagintaionProps = {}): 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 upperBounadryWhenCurrentPageLow =
+      boundaryCount + 2 + 2 * siblingCount;
+    const siblingsEnd = Math.min(
+      Math.max(currentPage + siblingCount, upperBounadryWhenCurrentPageLow),
+      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/index.ts

@@ -76,6 +76,8 @@ export type { ModalDismissButtonProps } from "./components/ModalDismissButton/Mo
  */
 export { Badge } from "./components/Badge/Badge";
 export type { BadgeProps } from "./components/Badge/Badge";
+export { ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
+export type { ButtonGroupProps } from "./components/ButtonGroup/ButtonGroup";
 export { default as Button } from "./components/Button/Button";
 export type { ButtonProps } from "./components/Button/Button";
 export { default as IconButton } 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
@@ -221,11 +225,15 @@ export type {
   SegmentedControlOptionInterface,
   SegmentedControlValue,
 } from "./components/SegmentedControl/SegmentedControl";
+export { Calendar } from "./components/Calendar/Calendar";
+export { CalendarRange } from "./components/CalendarRange/CalendarRange";
+export { DateInput } from "./components/DateInput/DateInput";
+export { DateRangeInput } 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";
@@ -254,6 +262,7 @@ export {
 } from "./components/ConfigProvider/ConfigProviderContext";
 export { AppearanceProvider } from "./components/AppearanceProvider/AppearanceProvider";
 export { Scheme, Appearance } from "./helpers/scheme";
+export { LocaleProviderContext } from "./components/LocaleProviderContext/LocaleProviderContext";
 
 /**
  * Advertisement
@@ -270,7 +279,7 @@ 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 type { SubheadProps } from "./components/Typography/Subhead/Subhead";
@@ -289,6 +298,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

package/src/lib/calendar.ts

@@ -0,0 +1,123 @@
+import {
+  eachDayOfInterval,
+  startOfWeek,
+  endOfWeek,
+  addDays,
+  subDays,
+  subWeeks,
+  addWeeks,
+  startOfMonth,
+  endOfMonth,
+  isBefore,
+  isFirstDayOfMonth,
+  isLastDayOfMonth,
+} from "date-fns";
+
+export const getYears = (currentYear: number, range: number) => {
+  const years: Array<{
+    value: number;
+    label: string;
+  }> = [];
+
+  for (let i = currentYear - range; i <= currentYear + range; i++) {
+    years.push({ label: String(i).padStart(4, "0"), value: i });
+  }
+
+  return years;
+};
+
+export const getMonths = (locale?: string) => {
+  const months: Array<{
+    value: number;
+    label: string;
+  }> = [];
+  const formatter = new Intl.DateTimeFormat(locale, {
+    month: "long",
+  });
+
+  for (let i = 0; i < 12; i++) {
+    months.push({
+      label: formatter.format(new Date("1970-01-01").setMonth(i)),
+      value: i,
+    });
+  }
+
+  return months;
+};
+
+export const getDaysNames = (
+  now: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6,
+  locale?: string
+) => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    weekday: "short",
+  });
+  return eachDayOfInterval({
+    start: startOfWeek(now, { weekStartsOn }),
+    end: endOfWeek(now, { weekStartsOn }),
+  }).map((day) => formatter.format(day));
+};
+
+export const navigateDate = (date?: Date | null, key?: string) => {
+  let newDate = date ?? new Date();
+
+  switch (key) {
+    case "ArrowRight":
+      newDate = addDays(newDate, 1);
+      break;
+    case "ArrowLeft":
+      newDate = subDays(newDate, 1);
+      break;
+    case "ArrowUp":
+      newDate = subWeeks(newDate, 1);
+      break;
+    case "ArrowDown":
+      newDate = addWeeks(newDate, 1);
+      break;
+  }
+
+  return newDate;
+};
+
+export const getWeeks = (
+  viewDate: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6
+) => {
+  const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn });
+  const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn });
+
+  let count = 0;
+  let current = start;
+  const nestedWeeks: Date[][] = [];
+  let lastDay = null;
+  while (isBefore(current, end)) {
+    const weekNumber = Math.floor(count / 7);
+    nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+    const day = current.getDay();
+    if (lastDay !== day) {
+      lastDay = day;
+      nestedWeeks[weekNumber].push(current);
+      count += 1;
+    }
+    current = addDays(current, 1);
+  }
+  return nestedWeeks;
+};
+
+export const setTimeEqual = (to: Date, from?: Date | null) => {
+  if (from) {
+    to.setHours(from.getHours());
+    to.setMinutes(from.getMinutes());
+    to.setSeconds(from.getSeconds());
+    to.setMilliseconds(from.getMilliseconds());
+  }
+
+  return to;
+};
+
+export const isFirstDay = (day: Date, dayOfWeek: number) =>
+  dayOfWeek === 0 || isFirstDayOfMonth(day);
+
+export const isLastDay = (day: Date, dayOfWeek: number) =>
+  dayOfWeek === 6 || isLastDayOfMonth(day);

package/src/lib/utils.ts

@@ -49,7 +49,7 @@ export function isPrimitiveReactNode(node: React.ReactNode): boolean {
   return typeof node === "string" || typeof node === "number";
 }
 
-export function setRef<T>(element: T, ref: React.Ref<T>): void {
+export function setRef<T>(element: T, ref?: React.Ref<T>): void {
   if (ref) {
     if (typeof ref === "function") {
       ref(element);
@@ -94,3 +94,6 @@ export const generateRandomId = () => {
     .toString(36)
     .replace(/[^a-z]+/g, "");
 };
+
+export const stopPropagation = <T extends React.SyntheticEvent>(event: T) =>
+  event.stopPropagation();

package/src/styles/components.css

@@ -58,6 +58,7 @@
 @import "../components/ModalPageHeader/ModalPageHeader.css";
 
 /* Blocks */
+@import "../components/ButtonGroup/ButtonGroup.css";
 @import "../components/Badge/Badge.css";
 @import "../components/IconButton/IconButton.css";
 @import "../components/Card/Card.css";
@@ -102,6 +103,7 @@
 @import "../components/WriteBarIcon/WriteBarIcon.css";
 @import "../components/SubnavigationBar/SubnavigationBar.css";
 @import "../components/SubnavigationButton/SubnavigationButton.css";
+@import "../components/Pagination/Pagination.css";
 
 /* Forms */
 @import "../components/FormLayout/FormLayout.css";
@@ -121,6 +123,7 @@
 @import "../components/File/File.css";
 @import "../components/CustomScrollView/CustomScrollView.css";
 @import "../components/CustomSelect/CustomSelect.css";
+@import "../components/SelectMimicry/SelectMimicry.css";
 @import "../components/CustomSelectOption/CustomSelectOption.css";
 @import "../components/DatePicker/DatePicker.css";
 @import "../components/SliderSwitch/SliderSwitch.css";
@@ -130,6 +133,17 @@
 @import "../components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css";
 @import "../components/VisuallyHiddenInput/VisuallyHiddenInput.css";
 
+@import "../components/Calendar/Calendar.css";
+@import "../components/CalendarDay/CalendarDay.css";
+@import "../components/CalendarDays/CalendarDays.css";
+@import "../components/CalendarHeader/CalendarHeader.css";
+@import "../components/CalendarRange/CalendarRange.css";
+@import "../components/CalendarTime/CalendarTime.css";
+@import "../components/InputLike/InputLike.css";
+@import "../components/InputLike/InputLikeDivider.css";
+@import "../components/DateInput/DateInput.css";
+@import "../components/DateRangeInput/DateRangeInput.css";
+
 /* Advertisement */
 @import "../components/PromoBanner/PromoBanner.css";
 

package/src/tokenized/index.ts

@@ -10,9 +10,30 @@ export type { CardScrollProps } from "../components/CardScroll/CardScroll";
 export { default as HorizontalScroll } from "../components/HorizontalScroll/HorizontalScroll";
 export type { HorizontalScrollProps } from "../components/HorizontalScroll/HorizontalScroll";
 
+export { ButtonGroup } from "../components/ButtonGroup/ButtonGroup";
+export type { ButtonGroupProps } from "../components/ButtonGroup/ButtonGroup";
+
 export { SegmentedControl } from "../components/SegmentedControl/SegmentedControl";
 export type {
   SegmentedControlProps,
   SegmentedControlOptionInterface,
   SegmentedControlValue,
 } from "../components/SegmentedControl/SegmentedControl";
+
+export { default as Title } from "../components/Typography/Title/Title";
+export type { TitleProps } from "../components/Typography/Title/Title";
+
+export { default as Subhead } from "../components/Typography/Subhead/Subhead";
+export type { SubheadProps } from "../components/Typography/Subhead/Subhead";
+
+export { Pagination } from "../components/Pagination/Pagination";
+export type { PaginationProps } from "../components/Pagination/Pagination";
+
+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 { Caption } from "../components/Typography/Caption/Caption";
+export type { CaptionProps } from "../components/Typography/Caption/Caption";