@vkontakte/vkui 4.27.1 → 4.28.1

package/src/components/CalendarRange/CalendarRange.tsx

@@ -0,0 +1,278 @@
+import * as React from "react";
+import {
+  addMonths,
+  isSameMonth,
+  isSameDay,
+  isBefore,
+  isAfter,
+  startOfDay,
+  endOfDay,
+  isWithinInterval,
+} from "date-fns";
+import {
+  CalendarHeader,
+  CalendarHeaderProps,
+} from "../CalendarHeader/CalendarHeader";
+import { CalendarDays } from "../CalendarDays/CalendarDays";
+import {
+  navigateDate,
+  setTimeEqual,
+  isLastDay,
+  isFirstDay,
+} from "../../lib/calendar";
+import { useCalendar } from "../../hooks/useCalendar";
+import { HasRootRef } from "../../types";
+import "./CalendarRange.css";
+
+export interface CalendarRangeProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+    Pick<
+      CalendarHeaderProps,
+      | "prevMonthAriaLabel"
+      | "nextMonthAriaLabel"
+      | "changeMonthAriaLabel"
+      | "changeYearAriaLabel"
+    >,
+    HasRootRef<HTMLDivElement> {
+  value?: Array<Date | null>;
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  disablePickers?: boolean;
+  changeDayAriaLabel?: string;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  onChange?(value?: Array<Date | null>): void;
+  shouldDisableDate?(value: Date): boolean;
+  onClose?(): void;
+}
+
+const getIsDaySelected = (day: Date, value?: Array<Date | null>) => {
+  if (!value?.[0] || !value[1]) {
+    return false;
+  }
+
+  return Boolean(
+    isWithinInterval(day, {
+      start: startOfDay(value[0]),
+      end: endOfDay(value[1]),
+    })
+  );
+};
+
+export const CalendarRange: React.FC<CalendarRangeProps> = ({
+  value,
+  onChange,
+  disablePast,
+  disableFuture,
+  shouldDisableDate,
+  onClose,
+  weekStartsOn = 1,
+  getRootRef,
+  disablePickers,
+  prevMonthAriaLabel,
+  nextMonthAriaLabel,
+  changeMonthAriaLabel,
+  changeYearAriaLabel,
+  changeDayAriaLabel = "Изменить день",
+  ...props
+}) => {
+  const {
+    viewDate,
+    setViewDate,
+    setPrevMonth,
+    setNextMonth,
+    focusedDay,
+    setFocusedDay,
+    isDayFocused,
+    isDayDisabled,
+    resetSelectedDay,
+  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });
+  const [hintedDate, setHintedDate] = React.useState<Array<Date | null>>();
+  const secondViewDate = addMonths(viewDate, 1);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (
+        ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)
+      ) {
+        event.preventDefault();
+      }
+
+      const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);
+
+      if (
+        newFocusedDay &&
+        !isSameMonth(newFocusedDay, viewDate) &&
+        !isSameMonth(newFocusedDay, addMonths(viewDate, 1))
+      ) {
+        setViewDate(newFocusedDay);
+      }
+      setFocusedDay(newFocusedDay);
+    },
+    [focusedDay, setFocusedDay, setViewDate, value, viewDate]
+  );
+
+  const getNewValue = React.useCallback(
+    (date: Date) => {
+      if (!value) {
+        return [date, null];
+      }
+
+      const start = value[0];
+      const end = value[1];
+      if ((start && isSameDay(date, start)) || (end && isSameDay(date, end))) {
+        return [setTimeEqual(date, start), setTimeEqual(date, end)];
+      } else if (start && isBefore(date, start)) {
+        return [setTimeEqual(date, start), end];
+      } else if (start && isAfter(date, start)) {
+        return [start, setTimeEqual(date, end)];
+      }
+
+      return value;
+    },
+    [value]
+  );
+
+  const onDayChange = React.useCallback(
+    (date: Date) => {
+      onChange?.(getNewValue(date));
+      setHintedDate(undefined);
+    },
+    [onChange, getNewValue]
+  );
+
+  const isDaySelected = React.useCallback(
+    (day: Date) => getIsDaySelected(day, value),
+    [value]
+  );
+
+  const isDayActive = React.useCallback(
+    (day: Date) =>
+      Boolean(
+        (value?.[0] && isSameDay(day, value[0])) ||
+          (value?.[1] && isSameDay(day, value[1]))
+      ),
+    [value]
+  );
+
+  const isDaySelectionEnd = React.useCallback(
+    (day: Date, dayOfWeek: number) =>
+      Boolean(
+        isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))
+      ),
+    [value]
+  );
+
+  const isHintedDaySelectionEnd = React.useCallback(
+    (day: Date, dayOfWeek: number) =>
+      Boolean(
+        isLastDay(day, dayOfWeek) ||
+          (hintedDate?.[1] && isSameDay(day, hintedDate[1]))
+      ),
+    [hintedDate]
+  );
+
+  const isDaySelectionStart = React.useCallback(
+    (day: Date, dayOfWeek: number) =>
+      Boolean(
+        isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))
+      ),
+    [value]
+  );
+
+  const isHintedDaySelectionStart = React.useCallback(
+    (day: Date, dayOfWeek: number) =>
+      Boolean(
+        isFirstDay(day, dayOfWeek) ||
+          (hintedDate?.[0] && isSameDay(day, hintedDate[0]))
+      ),
+    [hintedDate]
+  );
+
+  const onDayEnter = React.useCallback(
+    (date: Date) => setHintedDate(getNewValue(date)),
+    [setHintedDate, getNewValue]
+  );
+
+  const onDayLeave = React.useCallback(
+    () => setHintedDate(undefined),
+    [setHintedDate]
+  );
+
+  const isDayHinted = React.useCallback(
+    (day: Date) => getIsDaySelected(day, hintedDate),
+    [hintedDate]
+  );
+
+  return (
+    <div {...props} ref={getRootRef} vkuiClass="CalendarRange">
+      <div vkuiClass="CalendarRange__inner">
+        <CalendarHeader
+          viewDate={viewDate}
+          onChange={setViewDate}
+          nextMonth={false}
+          onPrevMonth={setPrevMonth}
+          disablePickers={disablePickers}
+          vkuiClass="CalendarRange__header"
+          prevMonthAriaLabel={prevMonthAriaLabel}
+          nextMonthAriaLabel={nextMonthAriaLabel}
+          changeMonthAriaLabel={changeMonthAriaLabel}
+          changeYearAriaLabel={changeYearAriaLabel}
+        />
+        <CalendarDays
+          viewDate={viewDate}
+          value={value}
+          weekStartsOn={weekStartsOn}
+          onKeyDown={handleKeyDown}
+          isDayFocused={isDayFocused}
+          onDayChange={onDayChange}
+          isDaySelected={isDaySelected}
+          isDayActive={isDayActive}
+          isDaySelectionEnd={isDaySelectionEnd}
+          isDaySelectionStart={isDaySelectionStart}
+          isDayHinted={isDayHinted}
+          onDayEnter={onDayEnter}
+          onDayLeave={onDayLeave}
+          isHintedDaySelectionEnd={isHintedDaySelectionEnd}
+          isHintedDaySelectionStart={isHintedDaySelectionStart}
+          isDayDisabled={isDayDisabled}
+          aria-label={changeDayAriaLabel}
+        />
+      </div>
+      <div vkuiClass="CalendarRange__inner">
+        <CalendarHeader
+          viewDate={secondViewDate}
+          onChange={setViewDate}
+          prevMonth={false}
+          onNextMonth={setNextMonth}
+          disablePickers={disablePickers}
+          vkuiClass="CalendarRange__header"
+          prevMonthAriaLabel={prevMonthAriaLabel}
+          nextMonthAriaLabel={nextMonthAriaLabel}
+          changeMonthAriaLabel={changeMonthAriaLabel}
+          changeYearAriaLabel={changeYearAriaLabel}
+        />
+        <CalendarDays
+          viewDate={secondViewDate}
+          value={value}
+          weekStartsOn={weekStartsOn}
+          aria-label={changeDayAriaLabel}
+          onKeyDown={handleKeyDown}
+          isDayFocused={isDayFocused}
+          onDayChange={onDayChange}
+          isDaySelected={isDaySelected}
+          isDayActive={isDayActive}
+          isDaySelectionEnd={isDaySelectionEnd}
+          isDaySelectionStart={isDaySelectionStart}
+          isDayHinted={isDayHinted}
+          onDayEnter={onDayEnter}
+          onDayLeave={onDayLeave}
+          isHintedDaySelectionEnd={isHintedDaySelectionEnd}
+          isHintedDaySelectionStart={isHintedDaySelectionStart}
+          isDayDisabled={isDayDisabled}
+          tabIndex={0}
+          onBlur={resetSelectedDay}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/CalendarRange/Readme.md

@@ -0,0 +1,85 @@
+Компонент выбора диапазона дат.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+import { addDays, format } from "date-fns";
+
+const Example = () => {
+  const [value, setValue] = useState([new Date(), addDays(new Date(), 10)]);
+  const [disablePast, setDisablePast] = useState(false);
+  const [disableFuture, setDisableFuture] = useState(false);
+  const [disablePickers, setDisablePickers] = useState(false);
+  const [locale, setLocale] = useState("ru");
+
+  return (
+    <FormLayout>
+      <FormLayoutGroup mode="vertical">
+        <FormItem top="Выбранная дата">
+          {format(value[0], "yyyy-MM-dd")} - {format(value[1], "yyyy-MM-dd")}
+        </FormItem>
+        <FormItem top="Запрет выбора прошлых дат">
+          <Checkbox
+            checked={disablePast}
+            onChange={(e) => setDisablePast(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Запрет выбора будущих дат">
+          <Checkbox
+            checked={disableFuture}
+            onChange={(e) => setDisableFuture(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Отключить селекты выбора месяца/года">
+          <Checkbox
+            checked={disablePickers}
+            onChange={(e) => setDisablePickers(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Локаль">
+          <Select
+            style={{ width: 100 }}
+            value={locale}
+            onChange={(e) => setLocale(e.target.value)}
+            options={[
+              {
+                label: "ru",
+                value: "ru",
+              },
+              {
+                label: "en",
+                value: "en",
+              },
+              {
+                label: "ar",
+                value: "ar",
+              },
+              {
+                label: "fr",
+                value: "fr",
+              },
+            ]}
+          />
+        </FormItem>
+        <FormItem>
+          <LocaleProviderContext.Provider value={locale}>
+            <CalendarRange
+              value={value}
+              onChange={setValue}
+              disablePast={disablePast}
+              disableFuture={disableFuture}
+              disablePickers={disablePickers}
+            />
+          </LocaleProviderContext.Provider>
+        </FormItem>
+      </FormLayoutGroup>
+    </FormLayout>
+  );
+};
+
+<Example />;
+```

package/src/components/CalendarTime/CalendarTime.css

@@ -0,0 +1,18 @@
+.CalendarTime {
+  display: flex;
+  align-items: center;
+}
+
+.CalendarTime__picker {
+  width: 77px;
+}
+
+.CalendarTime__divider {
+  margin-left: 6px;
+  margin-right: 6px;
+  color: var(--vkui--color_text_primary);
+}
+
+.CalendarTime__button {
+  margin-left: auto;
+}

package/src/components/CalendarTime/CalendarTime.tsx

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { setHours, setMinutes } from "date-fns";
+import CustomSelect from "../CustomSelect/CustomSelect";
+import Button from "../Button/Button";
+import { SizeType } from "../../hoc/withAdaptivity";
+import "./CalendarTime.css";
+
+export interface CalendarTimeProps {
+  value: Date;
+  doneButtonText?: string;
+  changeHoursAriaLabel?: string;
+  changeMinutesAriaLabel?: string;
+  onChange?(value: Date): void;
+  onClose?(): void;
+}
+
+const hours: Array<{
+  value: number;
+  label: string;
+}> = [];
+for (let i = 0; i < 24; i += 1) {
+  hours.push({ value: i, label: String(i).padStart(2, "0") });
+}
+
+const minutes: Array<{
+  value: number;
+  label: string;
+}> = [];
+for (let i = 0; i < 60; i += 1) {
+  minutes.push({ value: i, label: String(i).padStart(2, "0") });
+}
+
+export const CalendarTime: React.FC<CalendarTimeProps> = ({
+  value,
+  doneButtonText = "Готово",
+  onChange,
+  onClose,
+  changeHoursAriaLabel = "Изменить час",
+  changeMinutesAriaLabel = "Изменить минуту",
+}) => {
+  const onHoursChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) =>
+      onChange?.(setHours(value, Number(event.target.value))),
+    [onChange, value]
+  );
+  const onMinutesChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) =>
+      onChange?.(setMinutes(value, Number(event.target.value))),
+    [onChange, value]
+  );
+
+  return (
+    <div vkuiClass="CalendarTime">
+      <div vkuiClass="CalendarTime__picker">
+        <CustomSelect
+          value={value.getHours()}
+          options={hours}
+          onChange={onHoursChange}
+          forceDropdownPortal={false}
+          sizeY={SizeType.COMPACT}
+          aria-label={changeHoursAriaLabel}
+        />
+      </div>
+      <div vkuiClass="CalendarTime__divider">:</div>
+      <div vkuiClass="CalendarTime__picker">
+        <CustomSelect
+          value={value.getMinutes()}
+          options={minutes}
+          onChange={onMinutesChange}
+          forceDropdownPortal={false}
+          sizeY={SizeType.COMPACT}
+          aria-label={changeMinutesAriaLabel}
+        />
+      </div>
+      <div vkuiClass="CalendarTime__button">
+        <Button
+          sizeY={SizeType.COMPACT}
+          mode="secondary"
+          onClick={onClose}
+          size="l"
+          aria-label={doneButtonText}
+        >
+          {doneButtonText}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -21,7 +21,7 @@ import {
 import Text from "../Typography/Text/Text";
 import Headline from "../Typography/Headline/Headline";
 import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import "./Checkbox.css";
 
 export interface CheckboxProps
@@ -88,14 +88,7 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
         >
           <div vkuiClass="Checkbox__children">{children}</div>
           {hasReactNode(description) && (
-            <Caption
-              level="1"
-              Component="span"
-              weight="regular"
-              vkuiClass="Checkbox__description"
-            >
-              {description}
-            </Caption>
+            <Caption vkuiClass="Checkbox__description">{description}</Caption>
           )}
         </ContentComponent>
       </div>

package/src/components/Chip/Chip.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Icon16Cancel } from "@vkontakte/icons";
 import { getTitleFromChildren, hasReactNode, noop } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Tappable from "../Tappable/Tappable";
 import "./Chip.css";
 
@@ -46,13 +46,7 @@ export const Chip: React.FC<ChipProps> = ({
     >
       <div vkuiClass="Chip__in" role="presentation">
         {hasReactNode(before) && <div vkuiClass="Chip__before">{before}</div>}
-        <Caption
-          level="1"
-          weight="regular"
-          vkuiClass="Chip__content"
-          title={title}
-          aria-hidden="true"
-        >
+        <Caption vkuiClass="Chip__content" title={title} aria-hidden="true">
           {children}
         </Caption>
         {hasReactNode(after) && <div vkuiClass="Chip__after">{after}</div>}

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -15,7 +15,7 @@ import { useChipsSelect } from "./useChipsSelect";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { noop } from "../../lib/utils";
 import { useDOM } from "../../lib/dom";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { prefixClass } from "../../lib/prefixClass";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
@@ -94,7 +94,7 @@ const chipsSelectDefaultProps: ChipsSelectProps<any> = {
   },
 };
 
-const ChipsSelect = <Option extends ChipsInputOption>(
+const ChipsSelectComponent = <Option extends ChipsInputOption>(
   props: ChipsSelectProps<Option>
 ) => {
   const propsWithDefault = { ...chipsSelectDefaultProps, ...props };
@@ -396,9 +396,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(
             </CustomSelectOption>
           )}
           {!filteredOptions?.length && !showCreatable && emptyText ? (
-            <Caption level="1" weight="regular" vkuiClass="ChipsSelect__empty">
-              {emptyText}
-            </Caption>
+            <Caption vkuiClass="ChipsSelect__empty">{emptyText}</Caption>
           ) : (
             filteredOptions.map((option: Option, index: number) => {
               const label = getOptionLabel!(option);
@@ -449,5 +447,6 @@ const ChipsSelect = <Option extends ChipsInputOption>(
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(ChipsSelect, { sizeY: true });
+export const ChipsSelect = withAdaptivity(ChipsSelectComponent, {
+  sizeY: true,
+});

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { AppearanceType } from "@vkontakte/vk-bridge";
+import vkBridge, { AppearanceType } from "@vkontakte/vk-bridge";
 import { canUseDOM, useDOM } from "../../lib/dom";
 import {
   ConfigProviderContext,
   ConfigProviderContextInterface,
-  defaultConfigProviderProps,
+  WebviewType,
 } from "./ConfigProviderContext";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
@@ -19,6 +19,8 @@ import {
   AppearanceProvider,
   generateVKUITokensClassName,
 } from "../AppearanceProvider/AppearanceProvider";
+import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
+import { platform as resolvePlatform } from "../../lib/platform";
 
 export interface ConfigProviderProps
   extends Partial<ConfigProviderContextInterface> {
@@ -27,6 +29,10 @@ export interface ConfigProviderProps
    * Цветовая схема приложения
    */
   scheme?: AppearanceScheme;
+  /**
+    Локаль ([список](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry))
+   */
+  locale?: string;
 }
 
 const warn = warnOnce("ConfigProvider");
@@ -64,20 +70,25 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
 
 const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
-  ...props
+  webviewType = WebviewType.VKAPPS,
+  isWebView = vkBridge.isWebView(),
+  transitionMotionEnabled = true,
+  platform = resolvePlatform(),
+  hasNewTokens = false,
+  appearance,
+  scheme,
+  locale = "ru",
 }) => {
-  const config = { ...defaultConfigProviderProps, ...props };
-  const { platform, appearance } = config;
-  const scheme = normalizeScheme({
-    scheme: config.scheme,
-    platform: platform,
-    appearance: appearance,
+  const normalizedScheme = normalizeScheme({
+    scheme,
+    platform,
+    appearance,
   });
   const { document } = useDOM();
   const target = document?.body;
 
   useIsomorphicLayoutEffect(() => {
-    if (scheme === "inherit") {
+    if (normalizedScheme === "inherit") {
       return noop;
     }
     if (
@@ -88,11 +99,11 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
         '<body scheme> was set before VKUI mount - did you forget scheme="inherit"?'
       );
     }
-    target?.setAttribute("scheme", scheme);
+    target?.setAttribute("scheme", normalizedScheme);
     return () => target?.removeAttribute("scheme");
-  }, [scheme]);
+  }, [normalizedScheme]);
 
-  const realScheme = useSchemeDetector(target, scheme);
+  const realScheme = useSchemeDetector(target, normalizedScheme);
   const derivedAppearance = deriveAppearance(realScheme);
 
   useIsomorphicLayoutEffect(() => {
@@ -109,15 +120,22 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
   }, [platform, derivedAppearance]);
 
   const configContext = useObjectMemo({
-    appearance: derivedAppearance,
-    ...config,
+    webviewType,
+    isWebView,
+    transitionMotionEnabled,
+    hasNewTokens,
+    platform,
+    scheme,
+    appearance: appearance || derivedAppearance,
   });
 
   return (
     <ConfigProviderContext.Provider value={configContext}>
-      <AppearanceProvider appearance={configContext.appearance}>
-        {children}
-      </AppearanceProvider>
+      <LocaleProviderContext.Provider value={locale}>
+        <AppearanceProvider appearance={configContext.appearance}>
+          {children}
+        </AppearanceProvider>
+      </LocaleProviderContext.Provider>
     </ConfigProviderContext.Provider>
   );
 };

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -36,17 +36,13 @@ export interface ConfigProviderContextInterface {
   hasNewTokens: boolean;
 }
 
-export const defaultConfigProviderProps = {
-  webviewType: WebviewType.VKAPPS,
-  isWebView: vkBridge.isWebView(),
-  transitionMotionEnabled: true,
-  platform: platform(),
-  hasNewTokens: false,
-  // appearance is auto-detected by default
-  // appearance: Appearance.LIGHT,
-};
-
 export const ConfigProviderContext =
-  React.createContext<ConfigProviderContextInterface>(
-    defaultConfigProviderProps
-  );
+  React.createContext<ConfigProviderContextInterface>({
+    webviewType: WebviewType.VKAPPS,
+    isWebView: vkBridge.isWebView(),
+    transitionMotionEnabled: true,
+    platform: platform(),
+    hasNewTokens: false,
+    // appearance is auto-detected by default
+    // appearance: Appearance.LIGHT,
+  });