@vkontakte/vkui 4.27.2 → 4.29.0

package/src/lib/calendar.ts

@@ -0,0 +1,123 @@
+import {
+  eachDayOfInterval,
+  startOfWeek,
+  endOfWeek,
+  addDays,
+  subDays,
+  subWeeks,
+  addWeeks,
+  startOfMonth,
+  endOfMonth,
+  isBefore,
+  isFirstDayOfMonth,
+  isLastDayOfMonth,
+} from "./date";
+
+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(
+    startOfWeek(now, weekStartsOn),
+    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/date.ts

@@ -0,0 +1,274 @@
+import dayjs from "dayjs";
+
+// Using date-fns-like type for migration
+type DirtyDate = Date | number;
+
+export function startOfDay(date: DirtyDate) {
+  return dayjs(date).startOf("day").toDate();
+}
+
+export function endOfDay(date: DirtyDate) {
+  return dayjs(date).endOf("day").toDate();
+}
+
+export function startOfWeek(date: DirtyDate, weekStart = 0) {
+  weekStart = weekStart % 7;
+
+  const day = dayjs(date);
+  const weekDay = day.day();
+  const diff = (weekDay < weekStart ? 7 : 0) + weekDay - weekStart;
+
+  return day.date(day.date() - diff).toDate();
+}
+
+export function endOfWeek(date: DirtyDate, weekStart = 0) {
+  const day = dayjs(startOfWeek(date, weekStart));
+
+  return day.date(day.date() + 6).toDate();
+}
+
+export function startOfMonth(date: DirtyDate) {
+  return dayjs(date).startOf("month").toDate();
+}
+
+export function endOfMonth(date: DirtyDate) {
+  return dayjs(date).endOf("month").toDate();
+}
+
+export function isFirstDayOfMonth(date: DirtyDate) {
+  return dayjs(date).date() === 1;
+}
+
+export function isLastDayOfMonth(date: DirtyDate) {
+  // isSameDay -- shorter, but not exact with date-fns behavior
+  // return isSameDay(date, dayjs(date).endOf("month"));
+  return dayjs(date).endOf("day").isSame(dayjs(date).endOf("month"));
+}
+
+export function format(date: DirtyDate, format: string) {
+  return dayjs(date).format(format);
+}
+
+export function isBefore(date1: DirtyDate, date2: DirtyDate) {
+  // Exactly as date-fns does
+  // dayjs().isBefore() for slightly different approach
+  return dayjs(date1) < dayjs(date2);
+}
+
+export function isAfter(date1: DirtyDate, date2: DirtyDate) {
+  return dayjs(date1) > dayjs(date2);
+}
+
+export function isSameDay(date1: DirtyDate, date2: DirtyDate) {
+  return dayjs(date1).isSame(date2, "day");
+}
+
+export function isSameMonth(date1: DirtyDate, date2: DirtyDate) {
+  return dayjs(date1).isSame(date2, "month");
+}
+
+export function isWithinInterval(
+  date: DirtyDate,
+  start: DirtyDate,
+  end: DirtyDate
+) {
+  const day = dayjs(date);
+  return day >= dayjs(start) && day <= dayjs(end);
+}
+
+export function setMinutes(date: DirtyDate, minute: number) {
+  return dayjs(date).set("minute", minute).toDate();
+}
+
+export function setHours(date: DirtyDate, hour: number) {
+  return dayjs(date).set("hour", hour).toDate();
+}
+
+export function setMonth(date: DirtyDate, month: number) {
+  return dayjs(date).set("month", month).toDate();
+}
+
+export function setYear(date: DirtyDate, year: number) {
+  return dayjs(date).set("year", year).toDate();
+}
+
+export function addDays(date: DirtyDate, day: number) {
+  return dayjs(date).add(day, "day").toDate();
+}
+
+export function subDays(date: DirtyDate, day: number) {
+  return dayjs(date).subtract(day, "day").toDate();
+}
+
+export function addWeeks(date: DirtyDate, week: number) {
+  return dayjs(date).add(week, "week").toDate();
+}
+
+export function subWeeks(date: DirtyDate, week: number) {
+  return dayjs(date).subtract(week, "week").toDate();
+}
+
+export function addMonths(date: DirtyDate, month: number) {
+  return dayjs(date).add(month, "month").toDate();
+}
+
+export function subMonths(date: DirtyDate, month: number) {
+  return dayjs(date).subtract(month, "month").toDate();
+}
+
+// Rip off date-fns
+export function eachDayOfInterval(start: DirtyDate, end: DirtyDate) {
+  const dates: Date[] = [];
+  const startDate = dayjs(start).toDate();
+  const endDate = dayjs(end).toDate();
+
+  const endTime = endDate.getTime();
+  const currentDate = startDate;
+  currentDate.setHours(0, 0, 0, 0);
+
+  while (currentDate.getTime() <= endTime) {
+    dates.push(new Date(currentDate.getTime()));
+    currentDate.setDate(currentDate.getDate() + 1);
+    currentDate.setHours(0, 0, 0, 0);
+  }
+
+  return dates;
+}
+
+export function parse(
+  input: string,
+  format: string,
+  referenceDate: Date = new Date()
+) {
+  const match2 = /^\d\d/; // 00 - 99
+  const match4 = /^\d{4}/; // 0000 - 9999
+
+  const entries: Array<
+    [string, RegExp, (val: string) => [string, number, boolean]]
+  > = [
+    ["YYYY", match4, (val) => ["Y", +val, true]],
+    [
+      "MM",
+      match2,
+      (val) => {
+        const numVal = +val;
+        const okay = numVal > 0 && numVal <= 12;
+
+        return ["M", numVal - 1, okay];
+      },
+    ],
+    ["DD", match2, (val) => ["D", +val, true]],
+    [
+      "HH",
+      match2,
+      (val) => {
+        const numVal = parseInt(val, 10);
+        const okay = numVal >= 0 && numVal < 24;
+
+        return ["h", numVal, okay];
+      },
+    ],
+    [
+      "mm",
+      match2,
+      (val) => {
+        const numVal = parseInt(val, 10);
+        const okay = numVal >= 0 && numVal < 60;
+
+        return ["m", numVal, okay];
+      },
+    ],
+  ];
+
+  const superRegExp = new RegExp(entries.map((item) => item[0]).join("|"), "g");
+
+  const store: {
+    [key: string]: number;
+  } = {
+    Y: referenceDate.getFullYear(),
+    M: referenceDate.getMonth(),
+    D: referenceDate.getDate(),
+    h: referenceDate.getHours(),
+    m: referenceDate.getMinutes(),
+    s: referenceDate.getSeconds(),
+    ms: referenceDate.getMilliseconds(),
+  };
+
+  let prevInputIndex = 0;
+  let lastNonFormatting = "";
+  let lastFormatIndex = 0;
+  let found = false;
+
+  while (true) {
+    const match = superRegExp.exec(format);
+
+    if (!match) {
+      break;
+    }
+
+    const length = match[0].length;
+    const atIndex = superRegExp.lastIndex - length;
+
+    const item = entries.find((item) => item[0] === match[0]);
+
+    if (!item) {
+      return new Date("");
+    }
+
+    lastNonFormatting = format.slice(lastFormatIndex, atIndex);
+    lastFormatIndex = superRegExp.lastIndex;
+
+    if (
+      input.slice(prevInputIndex, prevInputIndex + lastNonFormatting.length) !==
+      lastNonFormatting
+    ) {
+      return new Date("");
+    }
+
+    const value = input
+      .slice(prevInputIndex + lastNonFormatting.length)
+      .match(item[1]);
+
+    if (!value) {
+      return new Date("");
+    }
+
+    prevInputIndex =
+      prevInputIndex + lastNonFormatting.length + value[0].length;
+
+    const [key, newValue, okay] = item[2](value[0]);
+
+    if (!okay) {
+      return new Date("");
+    }
+
+    store[key] = newValue;
+    found = true;
+  }
+
+  if (!found) {
+    return new Date("");
+  }
+
+  const date = new Date(
+    store.Y,
+    store.M,
+    store.D,
+    store.h,
+    store.m,
+    store.s,
+    store.ms
+  );
+
+  // Since days of months are dynamic, they can't be validated in entries,
+  // so we check it here, in the finalized date
+  if (date.getMonth() !== store.M || date.getDate() !== store.D) {
+    return new Date("");
+  }
+
+  return date;
+}
+
+export function isMatch(input: string, format: string) {
+  return !isNaN(+parse(input, format));
+}

package/src/lib/getNavId.ts

@@ -1,13 +1,15 @@
+import { WarnOnceHandler } from "./warnOnce";
+
 export interface NavIdProps {
   /** Уникальный идентификатор навигационного элемента (вместо id) */
   nav?: string;
   id?: string;
 }
 
-export function getNavId(props: NavIdProps, warn?: (text: string) => any) {
+export function getNavId(props: NavIdProps, warn?: WarnOnceHandler) {
   const id = props.nav || props.id;
   if (process.env.NODE_ENV === "development" && !id && warn) {
-    warn('Navigation item should have "nav" or "id" prop');
+    warn('Navigation item should have "nav" or "id" prop', "error");
   }
   return id;
 }

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/lib/warnOnce.ts

@@ -1,8 +1,14 @@
-export function warnOnce(zone: string) {
+export type WarnOnceHandler = (
+  message: string,
+  type?: "warn" | "error"
+) => void;
+
+export function warnOnce(zone: string): WarnOnceHandler {
   const didWarn: { [msg: string]: boolean } = {};
-  return (message: string) => {
+
+  return (message: string, type: "warn" | "error" = "warn") => {
     if (!didWarn[message]) {
-      console.error(`[VKUI/${zone}] ${message}`);
+      console[type](`[VKUI/${zone}] ${message}`);
       didWarn[message] = true;
     }
   };

package/src/styles/components.css

@@ -13,6 +13,7 @@
 @import "../components/Typography/Subhead/Subhead.css";
 @import "../components/Typography/Caption/Caption.css";
 @import "../components/Typography/Text/Text.css";
+@import "../components/Typography/Paragraph/Paragraph.css";
 
 /* Service */
 @import "../components/Tappable/Tappable.css";
@@ -58,6 +59,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 +104,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 +124,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 +134,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/styles/constants.css

@@ -1,6 +1,13 @@
 :root {
   /* fonts */
-  --font-common: -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif;
+  --font-common: var(
+    --palette-vk-font,
+    -apple-system,
+    system-ui,
+    Helvetica Neue,
+    Roboto,
+    sans-serif
+  );
   /* @deprecated
    * --font-tt будет удален в 5.0.0, используйте --font-display
    * В коде библиотеки использовать нельзя. Оставлен для обратной совместимости для пользователей библиотеки.

package/src/testing/utils.tsx

@@ -72,7 +72,7 @@ export function baselineComponent<Props extends BasicProps>(
     : RawComponent;
   mountTest(Component);
   forward &&
-    it("forwards attributes", () => {
+    it("forwards attributes", async () => {
       const cls = "Custom";
       const { rerender } = render(
         <Component
@@ -81,6 +81,7 @@ export function baselineComponent<Props extends BasicProps>(
           style={{ background: "red" }}
         />
       );
+      await waitForPopper();
       // forward DOM attributes
       domAttr && expect(screen.queryByTestId("__cmp__")).toBeTruthy();
 
@@ -190,3 +191,11 @@ Object.defineProperty(HTMLElement.prototype, "offsetParent", {
     return this.parentNode;
   },
 });
+
+// Popper update() - https://github.com/popperjs/react-popper/issues/350
+export async function waitForPopper() {
+  await act(async () => {
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await null;
+  });
+}

package/src/tokenized/index.ts

@@ -1,4 +1,4 @@
-export { default as Button } from "../components/Button/Button";
+export { Button } from "../components/Button/Button";
 export type { ButtonProps } from "../components/Button/Button";
 
 export { Card } from "../components/Card/Card";
@@ -7,9 +7,12 @@ export type { CardProps } from "../components/Card/Card";
 export { CardScroll } from "../components/CardScroll/CardScroll";
 export type { CardScrollProps } from "../components/CardScroll/CardScroll";
 
-export { default as HorizontalScroll } from "../components/HorizontalScroll/HorizontalScroll";
+export { 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,
@@ -17,8 +20,47 @@ export type {
   SegmentedControlValue,
 } from "../components/SegmentedControl/SegmentedControl";
 
-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 Subhead } from "../components/Typography/Subhead/Subhead";
+export { 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";
+
+export { Paragraph } from "../components/Typography/Paragraph/Paragraph";
+export type { ParagraphProps } from "../components/Typography/Paragraph/Paragraph";
+
+export { Input } from "../components/Input/Input";
+export type { InputProps } from "../components/Input/Input";
+
+export { FormField } from "../components/FormField/FormField";
+export type { FormFieldProps } from "../components/FormField/FormField";
+
+export { Select } from "../components/Select/Select";
+export type { SelectProps } from "../components/Select/Select";
+
+export { CustomSelect } from "../components/CustomSelect/CustomSelect";
+export type { CustomSelectProps } from "../components/CustomSelect/CustomSelect";
+
+export { CustomSelectDropdown } from "../components/CustomSelectDropdown/CustomSelectDropdown";
+export type { CustomSelectDropdownProps } from "../components/CustomSelectDropdown/CustomSelectDropdown";
+
+export { CustomSelectOption } from "../components/CustomSelectOption/CustomSelectOption";
+export type { CustomSelectOptionProps } from "../components/CustomSelectOption/CustomSelectOption";
+
+export { ChipsInput } from "../components/ChipsInput/ChipsInput";
+export type { ChipsInputProps } from "../components/ChipsInput/ChipsInput";
+
+export { ChipsSelect } from "../components/ChipsSelect/ChipsSelect";
+export type { ChipsSelectProps } from "../components/ChipsSelect/ChipsSelect";

package/src/unstable/index.ts

@@ -1,8 +1,8 @@
 /**
  * Forms
  */
-export { default as ChipsSelect } from "./../components/ChipsSelect/ChipsSelect";
-export type { ChipsSelectProps } from "./../components/ChipsSelect/ChipsSelect";
+export { ChipsSelect } from "../components/ChipsSelect/ChipsSelect";
+export type { ChipsSelectProps } from "../components/ChipsSelect/ChipsSelect";
 
 export { Dropdown } from "../components/Dropdown/Dropdown";
 export type { DropdownProps } from "../components/Dropdown/Dropdown";
@@ -16,8 +16,8 @@ export type { RichTooltipProps } from "../components/RichTooltip/RichTooltip";
 export { Popper } from "../components/Popper/Popper";
 export type { PopperProps } from "../components/Popper/Popper";
 
-export { default as ViewInfinite } from "./../components/View/ViewInfinite";
-export type { ViewInfiniteProps } from "./../components/View/ViewInfinite";
+export { ViewInfinite } from "../components/View/ViewInfinite";
+export type { ViewInfiniteProps } from "../components/View/ViewInfinite";
 
-export { default as SimpleCheckbox } from "./../components/SimpleCheckbox/SimpleCheckbox";
-export type { SimpleCheckboxProps } from "./../components/SimpleCheckbox/SimpleCheckbox";
+export { SimpleCheckbox } from "../components/SimpleCheckbox/SimpleCheckbox";
+export type { SimpleCheckboxProps } from "../components/SimpleCheckbox/SimpleCheckbox";

package/tsconfig.json

@@ -27,6 +27,8 @@
     "e2e/**/*.js",
     "tasks/**/*.js",
     ".github/**/*.js",
+    "eslint-plugin-vkui/*.js",
+    "postcss-plugin-vk-sans/*.js",
     "*.js"
   ],
   "files": [