@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/DatePicker/Readme.md

@@ -0,0 +1,40 @@
+Компонент выбора даты. Для десктопа - это три [CustomSelect-a](#!/CustomSelect). Для мобильного вида - input c `type="date"`
+
+Принимает значения `min` (минимальная доступная дата), `max` (максимальная), `defaultValue` в формате {day: 1, month: 1, year: 1901},
+
+`onDateChange` - используется для получения значения Datepicker-а.
+
+Для десктопного вида можно передать массив с названиями месяцев,
+иначе будут использоваться дефолтные русские в родительном падеже
+
+```jsx
+<View activePanel="datePicker">
+  <Panel id="datePicker">
+    <PanelHeader>DatePicker</PanelHeader>
+    <Group>
+      <FormItem top="Дата рождения">
+        <DatePicker
+          min={{ day: 1, month: 1, year: 1901 }}
+          max={{ day: 1, month: 1, year: 2006 }}
+          onDateChange={(value) => {
+            console.log(value);
+          }}
+          dayPlaceholder="ДД"
+          monthPlaceholder="ММММ"
+          yearPlaceholder="ГГГГ"
+        />
+      </FormItem>
+      <FormItem top="Дата рождения">
+        <DatePicker
+          min={{ day: 1, month: 1, year: 1901 }}
+          max={{ day: 1, month: 1, year: 2006 }}
+          defaultValue={{ day: 2, month: 4, year: 1994 }}
+          onDateChange={(value) => {
+            console.log(value);
+          }}
+        />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/DateRangeInput/DateRangeInput.css

@@ -0,0 +1,16 @@
+.DateRangeInput__input {
+  flex-grow: 1;
+  margin-left: 10px;
+  margin-right: 14px;
+  font-size: 16px;
+  z-index: 2;
+  cursor: text;
+  white-space: nowrap;
+  user-select: text;
+  font-variant-numeric: tabular-nums;
+}
+
+.DateRangeInput--sizeY-compact .DateRangeInput__input {
+  font-size: 15px;
+  margin-right: 22px;
+}

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -0,0 +1,350 @@
+import * as React from "react";
+import { format, isMatch, parse, isAfter } from "date-fns";
+import { Icon16Clear, Icon20CalendarOutline } from "@vkontakte/icons";
+import {
+  CalendarRange,
+  CalendarRangeProps,
+} from "../CalendarRange/CalendarRange";
+import { Popper, Placement } from "../Popper/Popper";
+import IconButton from "../IconButton/IconButton";
+import { HasRootRef } from "../../types";
+import { useDateInput } from "../../hooks/useDateInput";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { classNames } from "../../lib/classNames";
+import { multiRef } from "../../lib/utils";
+import { FormField } from "../FormField/FormField";
+import { InputLike } from "../InputLike/InputLike";
+import { InputLikeDivider } from "../InputLike/InputLikeDivider";
+import { callMultiple } from "../../lib/callMultiple";
+import "./DateRangeInput.css";
+
+export interface DateRangeInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, "value" | "onChange">,
+    Pick<
+      CalendarRangeProps,
+      | "disablePast"
+      | "disableFuture"
+      | "shouldDisableDate"
+      | "onChange"
+      | "value"
+      | "weekStartsOn"
+      | "disablePickers"
+      | "prevMonthAriaLabel"
+      | "nextMonthAriaLabel"
+      | "changeMonthAriaLabel"
+      | "changeYearAriaLabel"
+      | "changeDayAriaLabel"
+    >,
+    HasRootRef<HTMLDivElement> {
+  calendarPlacement?: Placement;
+  closeOnChange?: boolean;
+  clearFieldAriaLabel?: string;
+  showCalendarAriaLabel?: string;
+  changeStartDayAriaLabel?: string;
+  changeStartMonthAriaLabel?: string;
+  changeStartYearAriaLabel?: string;
+  changeEndDayAriaLabel?: string;
+  changeEndMonthAriaLabel?: string;
+  changeEndYearAriaLabel?: string;
+}
+
+const elementsConfig = (index: number) => {
+  let length = 2;
+  let min = 1;
+  let max = 0;
+
+  switch (index) {
+    case 0:
+    case 3:
+      max = 31;
+      break;
+    case 1:
+    case 4:
+      max = 12;
+      break;
+    case 2:
+    case 5:
+      max = 2100;
+      min = 1900;
+      length = 4;
+      break;
+  }
+
+  return { length, min, max };
+};
+
+const getInternalValue = (value: CalendarRangeProps["value"]) => {
+  const newValue = ["", "", "", "", "", ""];
+  if (value?.[0]) {
+    newValue[0] = String(value[0].getDate()).padStart(2, "0");
+    newValue[1] = String(value[0].getMonth() + 1).padStart(2, "0");
+    newValue[2] = String(value[0].getFullYear()).padStart(4, "0");
+  }
+  if (value?.[1]) {
+    newValue[3] = String(value[1].getDate()).padStart(2, "0");
+    newValue[4] = String(value[1].getMonth() + 1).padStart(2, "0");
+    newValue[5] = String(value[1].getFullYear()).padStart(4, "0");
+  }
+  return newValue;
+};
+
+export const DateRangeInput: React.FC<DateRangeInputProps> = ({
+  shouldDisableDate,
+  disableFuture,
+  disablePast,
+  value,
+  onChange,
+  calendarPlacement = "bottom-start",
+  style,
+  className,
+  closeOnChange = true,
+  disablePickers,
+  getRootRef,
+  name,
+  autoFocus,
+  disabled,
+  onClick,
+  onFocus,
+  prevMonthAriaLabel,
+  nextMonthAriaLabel,
+  changeDayAriaLabel,
+  changeMonthAriaLabel,
+  changeYearAriaLabel,
+  changeStartDayAriaLabel = "Изменить день начала",
+  changeStartMonthAriaLabel = "Изменить месяц начала",
+  changeStartYearAriaLabel = "Изменить год начала",
+  changeEndDayAriaLabel = "Изменить день окончания",
+  changeEndMonthAriaLabel = "Изменить месяц окончания",
+  changeEndYearAriaLabel = "Изменить год окончания",
+  clearFieldAriaLabel = "Очистить поле",
+  showCalendarAriaLabel = "Показать календарь",
+  ...props
+}) => {
+  const daysStartRef = React.useRef<HTMLSpanElement>(null);
+  const monthsStartRef = React.useRef<HTMLSpanElement>(null);
+  const yearsStartRef = React.useRef<HTMLSpanElement>(null);
+  const daysEndRef = React.useRef<HTMLSpanElement>(null);
+  const monthsEndRef = React.useRef<HTMLSpanElement>(null);
+  const yearsEndRef = React.useRef<HTMLSpanElement>(null);
+
+  const onInternalValueChange = React.useCallback(
+    (internalValue: string[]) => {
+      let isStartValid = true;
+      let isEndValid = true;
+      for (let i = 0; i <= 2; i += 1) {
+        if (internalValue[i].length < elementsConfig(i).length) {
+          isStartValid = false;
+        }
+      }
+      for (let i = 3; i <= 5; i += 1) {
+        if (internalValue[i].length < elementsConfig(i).length) {
+          isEndValid = false;
+        }
+      }
+      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;
+      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;
+      const mask = "dd.MM.yyyy";
+
+      if (!isMatch(formattedStartValue, mask)) {
+        isStartValid = false;
+      }
+      if (!isMatch(formattedEndValue, mask)) {
+        isEndValid = false;
+      }
+
+      if (!isStartValid && !isEndValid) {
+        return;
+      }
+
+      const valueExists = Array.isArray(value);
+      const now = new Date();
+      const start = isStartValid
+        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)
+        : null;
+      const end = isEndValid
+        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)
+        : null;
+      if (start && end && isAfter(end, start)) {
+        onChange?.([start, end]);
+      }
+    },
+    [onChange, value]
+  );
+
+  const refs = React.useMemo(
+    () => [
+      daysStartRef,
+      monthsStartRef,
+      yearsStartRef,
+      daysEndRef,
+      monthsEndRef,
+      yearsEndRef,
+    ],
+    [
+      daysStartRef,
+      monthsStartRef,
+      yearsStartRef,
+      daysEndRef,
+      monthsEndRef,
+      yearsEndRef,
+    ]
+  );
+
+  const {
+    rootRef,
+    calendarRef,
+    open,
+    openCalendar,
+    closeCalendar,
+    internalValue,
+    handleKeyDown,
+    setFocusedElement,
+    handleFieldEnter,
+    clear,
+    removeFocusFromField,
+  } = useDateInput({
+    maxElement: 5,
+    refs,
+    autoFocus,
+    disabled,
+    elementsConfig,
+    onChange,
+    onInternalValueChange,
+    getInternalValue,
+    value,
+  });
+
+  const { sizeY } = useAdaptivity();
+
+  const onCalendarChange = React.useCallback(
+    (newValue?: Array<Date | null> | undefined) => {
+      onChange?.(newValue);
+      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {
+        removeFocusFromField();
+      }
+    },
+    [onChange, closeOnChange, value, removeFocusFromField]
+  );
+
+  return (
+    <FormField
+      vkuiClass={classNames("DateRangeInput", `DateRangeInput--sizeY-${sizeY}`)}
+      style={style}
+      className={className}
+      getRootRef={multiRef(rootRef, getRootRef)}
+      after={
+        value ? (
+          <IconButton
+            hoverMode="opacity"
+            aria-label={clearFieldAriaLabel}
+            onClick={clear}
+          >
+            <Icon16Clear />
+          </IconButton>
+        ) : (
+          <IconButton
+            hoverMode="opacity"
+            aria-label={showCalendarAriaLabel}
+            onClick={openCalendar}
+          >
+            <Icon20CalendarOutline />
+          </IconButton>
+        )
+      }
+      disabled={disabled}
+      onClick={callMultiple(handleFieldEnter, onClick)}
+      onFocus={callMultiple(handleFieldEnter, onFocus)}
+      {...props}
+    >
+      <input
+        type="hidden"
+        name={name}
+        value={
+          value
+            ? `${value[0] ? format(value[0], "dd.MM.yyyy") : ""} - ${
+                value[1] ? format(value[1], "dd.MM.yyyy") : ""
+              }`
+            : ""
+        }
+      />
+      <span vkuiClass="DateInput__input" onKeyDown={handleKeyDown}>
+        <InputLike
+          length={2}
+          getRootRef={daysStartRef}
+          index={0}
+          onElementSelect={setFocusedElement}
+          value={internalValue[0]}
+          aria-label={changeStartDayAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={2}
+          getRootRef={monthsStartRef}
+          index={1}
+          onElementSelect={setFocusedElement}
+          value={internalValue[1]}
+          aria-label={changeStartMonthAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={4}
+          getRootRef={yearsStartRef}
+          index={2}
+          onElementSelect={setFocusedElement}
+          value={internalValue[2]}
+          aria-label={changeStartYearAriaLabel}
+        />
+        <InputLikeDivider>{" — "}</InputLikeDivider>
+        <InputLike
+          length={2}
+          getRootRef={daysEndRef}
+          index={3}
+          onElementSelect={setFocusedElement}
+          value={internalValue[3]}
+          aria-label={changeEndDayAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={2}
+          getRootRef={monthsEndRef}
+          index={4}
+          onElementSelect={setFocusedElement}
+          value={internalValue[4]}
+          aria-label={changeEndMonthAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={4}
+          getRootRef={yearsEndRef}
+          index={5}
+          onElementSelect={setFocusedElement}
+          value={internalValue[5]}
+          aria-label={changeEndYearAriaLabel}
+        />
+      </span>
+      {open && (
+        <Popper
+          targetRef={rootRef}
+          offsetDistance={8}
+          placement={calendarPlacement}
+        >
+          <CalendarRange
+            value={value}
+            onChange={onCalendarChange}
+            disablePast={disablePast}
+            disableFuture={disableFuture}
+            shouldDisableDate={shouldDisableDate}
+            onClose={closeCalendar}
+            getRootRef={calendarRef}
+            disablePickers={disablePickers}
+            prevMonthAriaLabel={prevMonthAriaLabel}
+            nextMonthAriaLabel={nextMonthAriaLabel}
+            changeMonthAriaLabel={changeMonthAriaLabel}
+            changeYearAriaLabel={changeYearAriaLabel}
+            changeDayAriaLabel={changeDayAriaLabel}
+          />
+        </Popper>
+      )}
+    </FormField>
+  );
+};

package/src/components/DateRangeInput/Readme.md

@@ -0,0 +1,96 @@
+Компонент выбора даты.
+
+> ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
+
+```jsx { "props": { "layout": false, "iframe": false } }
+import { format, addDays } 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 [closeOnChange, setCloseOnChange] = useState(true);
+  const [locale, setLocale] = useState("ru");
+
+  return (
+    <FormLayout>
+      <FormLayoutGroup mode="vertical">
+        <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={closeOnChange}
+            onChange={(e) => setCloseOnChange(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>
+          <div style={{ display: "flex" }}>
+            <LocaleProviderContext.Provider value={locale}>
+              <DateRangeInput
+                value={value}
+                onChange={setValue}
+                disablePast={disablePast}
+                disableFuture={disableFuture}
+                closeOnChange={closeOnChange}
+                disablePickers={disablePickers}
+              />
+            </LocaleProviderContext.Provider>
+          </div>
+        </FormItem>
+      </FormLayoutGroup>
+    </FormLayout>
+  );
+};
+
+<Example />;
+```

package/src/components/Div/Div.css

@@ -0,0 +1,7 @@
+.Div {
+  padding: 12px 16px;
+}
+
+.Div--ios {
+  padding: 12px;
+}

package/src/components/Div/Div.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { HasRootRef } from "../../types";
+import "./Div.css";
+
+export interface DivProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {}
+
+export const Div: React.FC<DivProps> = ({
+  children,
+  getRootRef,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+  return (
+    <div
+      {...restProps}
+      ref={getRootRef}
+      vkuiClass={getClassName("Div", platform)}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Div/Readme.md

@@ -0,0 +1,17 @@
+Компонент с установленными паддингами, которые отличаются в зависимости от платформы. Необходим, когда есть какой-то
+кастомный блок, у которого должны быть стандартные отступы.
+
+```jsx
+<View activePanel="div">
+  <Panel id="div">
+    <PanelHeader>Div</PanelHeader>
+    <Group>
+      <Div>
+        <Button stretched mode="secondary" size="m">
+          Edit Info
+        </Button>
+      </Div>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/Dropdown/Dropdown.css

@@ -0,0 +1,19 @@
+.Dropdown {
+  animation: vkui-popper-fadein 0.2s ease;
+  background: var(--background_content);
+}
+
+.Dropdown--ios {
+  box-shadow: 0 0 96px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
+  border-radius: 14px;
+}
+
+.Dropdown--android {
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
+  border-radius: 12px;
+}
+
+.Dropdown--vkcom {
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+}

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
+import { ClickPopper, ClickPopperProps } from "../ClickPopper/ClickPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Dropdown.css";
+
+export interface DropdownProps
+  extends Omit<ClickPopperProps, "arrow" | "arrowClassName">,
+    Omit<HoverPopperProps, "arrow" | "arrowClassName"> {
+  action?: "click" | "hover";
+}
+
+export const Dropdown: React.FC<DropdownProps> = ({
+  action = "click",
+  hideDelay,
+  showDelay,
+  ...popperProps
+}: DropdownProps) => {
+  const platform = usePlatform();
+
+  let Component;
+  let actionSpecificProps: Partial<DropdownProps> = {};
+
+  switch (action) {
+    case "click":
+      Component = ClickPopper;
+      break;
+    case "hover":
+      actionSpecificProps = { hideDelay, showDelay };
+      Component = HoverPopper;
+      break;
+  }
+
+  return (
+    <Component
+      vkuiClass={getClassName("Dropdown", platform)}
+      {...actionSpecificProps}
+      {...popperProps}
+    />
+  );
+};

package/src/components/Dropdown/Readme.md

@@ -0,0 +1,49 @@
+> **Важно**
+>
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
+Может открываться при клике или наведении мыши на `children`. Ограничений по содержимому нет. Предназначен для
+отрисовки части интерфейса в выпадающем окне.
+
+```jsx { "props": { "layout": false, "iframe": true } }
+const [shown, setShown] = React.useState(true);
+
+return (
+  <React.Fragment>
+    <Dropdown
+      action="hover"
+      placement="right"
+      content={
+        <Div>
+          <Text>Привет</Text>
+        </Div>
+      }
+    >
+      <Button style={{ margin: 20 }}>Наведи</Button>
+    </Dropdown>
+
+    <Dropdown
+      shown={shown}
+      onShownChange={setShown}
+      content={
+        <FormLayout>
+          <FormItem top="Имя">
+            <Input />
+          </FormItem>
+          <FormItem top="Фамилия">
+            <Input />
+          </FormItem>
+          <FormItem top="Соглашение">
+            <Checkbox name="agreement">Согласен</Checkbox>
+          </FormItem>
+          <FormItem>
+            <Button onClick={() => setShown(false)}>Отправить</Button>
+          </FormItem>
+        </FormLayout>
+      }
+    >
+      <Button style={{ margin: "20px 0 0 0" }}>Кликни</Button>
+    </Dropdown>
+  </React.Fragment>
+);
+```

package/src/components/DropdownIcon/DropdownIcon.css

@@ -0,0 +1,3 @@
+.DropdownIcon {
+  cursor: pointer;
+}

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Icon20Dropdown, Icon24ChevronDown } from "@vkontakte/icons";
+import { SizeType } from "../AdaptivityProvider/AdaptivityContext";
+import { getClassName } from "../../helpers/getClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./DropdownIcon.css";
+
+export const DropdownIcon: React.FC<React.HTMLAttributes<HTMLElement>> = (
+  props
+) => {
+  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
+  const Icon = sizeY === SizeType.COMPACT ? Icon20Dropdown : Icon24ChevronDown;
+
+  return <Icon vkuiClass={getClassName("DropdownIcon", platform)} {...props} />;
+};