@vkontakte/vkui 4.28.1 → 4.30.0

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -76,7 +76,8 @@ export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
 
   if (IS_DEV && !restProps["aria-label"] && !ariaLabel) {
     warn(
-      "[WriteBarIcon/a11y] У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей."
+      "a11y: У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей.",
+      "error"
     );
   }
 
@@ -87,6 +88,7 @@ export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
       Component="button"
       hasHover={false}
       activeMode="WriteBarIcon__active"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("WriteBarIcon", platform), {
         [`WriteBarIcon--${mode}`]: !!mode,
       })}

package/src/helpers/scheme.ts

@@ -61,7 +61,7 @@ export function normalizeScheme({
   if (scheme === Scheme.VKCOM) {
     process.env.NODE_ENV === "development" &&
       warn(
-        `Схема "${Scheme.VKCOM}" устарела и будет удалена 5.0.0. Вместо неё используйте "${Scheme.VKCOM_LIGHT}"`
+        `Схема "${Scheme.VKCOM}" устарела и будет удалена в v5.0.0. Вместо неё используйте "${Scheme.VKCOM_LIGHT}"`
       );
     return Scheme.VKCOM_LIGHT;
   }
@@ -71,7 +71,8 @@ export function normalizeScheme({
   ) {
     process.env.NODE_ENV === "development" &&
       warn(
-        `Платформа "vkcom" и схема "${scheme}" несовместимы. С этой платформой можно использовать схемы "${Scheme.VKCOM_LIGHT}" или "${Scheme.VKCOM_DARK}"`
+        `Платформа "vkcom" и схема "${scheme}" несовместимы. С этой платформой можно использовать схемы "${Scheme.VKCOM_LIGHT}" или "${Scheme.VKCOM_DARK}"`,
+        "error"
       );
     return Scheme.VKCOM_LIGHT;
   }

package/src/hooks/useBridgeAdaptivity.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import vkBridge from "@vkontakte/vk-bridge";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
+
+export interface BridgeAdaptivity {
+  type: "" | "force_mobile" | "force_mobile_compact" | "adaptive";
+  viewportWidth: number;
+  viewportHeight: number;
+}
+
+interface BridgeEvent {
+  detail: {
+    type: string;
+    data: {
+      [index: string]: any;
+    };
+  };
+}
+
+let initialState: BridgeAdaptivity = {
+  type: "",
+  viewportWidth: 0,
+  viewportHeight: 0,
+};
+
+function resolveAdaptivity(e: BridgeEvent): BridgeAdaptivity | null {
+  const { type, data } = e.detail;
+
+  if (type !== "VKWebAppUpdateConfig" || !data) {
+    return null;
+  }
+
+  const {
+    adaptivity,
+    viewport_width: viewportWidth,
+    viewport_height: viewportHeight,
+  } = data;
+
+  const bridgeAdaptivity: BridgeAdaptivity = {
+    type: "",
+    viewportWidth: isFinite(viewportWidth) ? +viewportWidth : 0,
+    viewportHeight: isFinite(viewportHeight) ? +viewportHeight : 0,
+  };
+
+  switch (adaptivity) {
+    case "force_mobile":
+    case "force_mobile_compact":
+    case "adaptive":
+      bridgeAdaptivity.type = adaptivity;
+  }
+
+  return bridgeAdaptivity;
+}
+
+vkBridge.subscribe((e: BridgeEvent) => {
+  const bridgeAdaptivity = resolveAdaptivity(e);
+
+  if (bridgeAdaptivity) {
+    initialState = bridgeAdaptivity;
+  }
+});
+
+export function useBridgeAdaptivity(): BridgeAdaptivity {
+  const [bridgeAdaptivity, setBridgeAdaptivity] =
+    React.useState<BridgeAdaptivity>(initialState);
+
+  useIsomorphicLayoutEffect(() => {
+    function bridgeListener(e: BridgeEvent) {
+      const newBridgeAdaptivity = resolveAdaptivity(e);
+
+      if (newBridgeAdaptivity) {
+        setBridgeAdaptivity(newBridgeAdaptivity);
+      }
+    }
+
+    vkBridge.subscribe(bridgeListener);
+    return () => {
+      vkBridge.unsubscribe(bridgeListener);
+    };
+  }, []);
+
+  return bridgeAdaptivity;
+}

package/src/hooks/useCalendar.ts

@@ -7,9 +7,14 @@ import {
   endOfDay,
   isAfter,
   startOfDay,
-} from "date-fns";
+} from "../lib/date";
+import { CalendarProps } from "../components/Calendar/Calendar";
 
-export interface UseCalendarDependencies {
+export interface UseCalendarDependencies
+  extends Pick<
+    CalendarProps,
+    "onHeaderChange" | "onNextMonth" | "onPrevMonth"
+  > {
   value?: Array<Date | null> | Date;
   disablePast?: boolean;
   disableFuture?: boolean;
@@ -21,19 +26,30 @@ export function useCalendar({
   disablePast,
   disableFuture,
   shouldDisableDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
 }: UseCalendarDependencies) {
   const [viewDate, setViewDate] = React.useState(
     (Array.isArray(value) ? value[0] : value) ?? new Date()
   );
   const [focusedDay, setFocusedDay] = React.useState<Date>();
 
-  const setPrevMonth = React.useCallback(
-    () => setViewDate(subMonths(viewDate, 1)),
-    [viewDate]
-  );
-  const setNextMonth = React.useCallback(
-    () => setViewDate(addMonths(viewDate, 1)),
-    [viewDate]
+  const setPrevMonth = React.useCallback(() => {
+    onPrevMonth?.();
+    setViewDate(subMonths(viewDate, 1));
+  }, [viewDate, onPrevMonth]);
+  const setNextMonth = React.useCallback(() => {
+    onNextMonth?.();
+    setViewDate(addMonths(viewDate, 1));
+  }, [viewDate, onNextMonth]);
+
+  const handleSetViewDate = React.useCallback(
+    (value: Date) => {
+      onHeaderChange?.(value);
+      setViewDate(value);
+    },
+    [onHeaderChange]
   );
 
   const isDayFocused = React.useCallback(
@@ -66,7 +82,7 @@ export function useCalendar({
 
   return {
     viewDate,
-    setViewDate,
+    setViewDate: handleSetViewDate,
     setPrevMonth,
     setNextMonth,
     focusedDay,

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/usePagination.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-interface UsePagintaionProps {
+interface UsePaginationProps {
   /**
    * Текущая страница.
    */
@@ -24,7 +24,7 @@ export type PaginationPageType = "start-ellipsis" | "end-ellipsis" | number;
 export type UsePaginationResult = PaginationPageType[];
 
 /**
- * Хук взаимствован у @mui с некоторыми изменениями.
+ * Хук позаимствован у @mui с некоторыми изменениями.
  *  [usePagination.js](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js).
  *
  * Примеры вывода:
@@ -40,7 +40,7 @@ export const usePagination = ({
   siblingCount = 1,
   boundaryCount = 1,
   totalPages: endPage = 1,
-}: UsePagintaionProps = {}): UsePaginationResult =>
+}: UsePaginationProps = {}): UsePaginationResult =>
   React.useMemo(() => {
     const range = (from: number, to: number, step = 1) => {
       const range = [];
@@ -67,10 +67,10 @@ export const usePagination = ({
       boundaryCount + 2
     );
 
-    const upperBounadryWhenCurrentPageLow =
+    const upperBoundaryWhenCurrentPageLow =
       boundaryCount + 2 + 2 * siblingCount;
     const siblingsEnd = Math.min(
-      Math.max(currentPage + siblingCount, upperBounadryWhenCurrentPageLow),
+      Math.max(currentPage + siblingCount, upperBoundaryWhenCurrentPageLow),
       endPages.length > 0 ? endPages[0] - 2 : endPage - 1
     );
 

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";
@@ -78,7 +78,7 @@ 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 { 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";
@@ -178,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";
@@ -196,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 { 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 {
@@ -226,9 +226,13 @@ export type {
   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
@@ -243,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";
@@ -253,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";
@@ -261,6 +267,7 @@ 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";
 
@@ -273,7 +280,7 @@ 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";
@@ -281,8 +288,10 @@ export { default as Text } from "./components/Typography/Text/Text";
 export type { TextProps } from "./components/Typography/Text/Text";
 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
@@ -307,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,
@@ -324,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

package/src/lib/calendar.ts

@@ -11,7 +11,7 @@ import {
   isBefore,
   isFirstDayOfMonth,
   isLastDayOfMonth,
-} from "date-fns";
+} from "./date";
 
 export const getYears = (currentYear: number, range: number) => {
   const years: Array<{
@@ -53,10 +53,10 @@ export const getDaysNames = (
   const formatter = new Intl.DateTimeFormat(locale, {
     weekday: "short",
   });
-  return eachDayOfInterval({
-    start: startOfWeek(now, { weekStartsOn }),
-    end: endOfWeek(now, { weekStartsOn }),
-  }).map((day) => formatter.format(day));
+  return eachDayOfInterval(
+    startOfWeek(now, weekStartsOn),
+    endOfWeek(now, weekStartsOn)
+  ).map((day) => formatter.format(day));
 };
 
 export const navigateDate = (date?: Date | null, key?: string) => {
@@ -84,8 +84,8 @@ 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 });
+  const start = startOfWeek(startOfMonth(viewDate), weekStartsOn);
+  const end = endOfWeek(endOfMonth(viewDate), weekStartsOn);
 
   let count = 0;
   let current = start;