@vkontakte/vkui 4.27.2 → 4.29.0

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import { Icon16Done } from "@vkontakte/icons";
 import { classNames } from "../../lib/classNames";
 import { hasReactNode } from "../../lib/utils";
-import Text from "../Typography/Text/Text";
-import Caption from "../Typography/Caption/Caption";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
+import { Caption } from "../Typography/Caption/Caption";
 import { HasRootRef } from "../../types";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { warnOnce } from "../../lib/warnOnce";
@@ -12,20 +12,51 @@ import "./CustomSelectOption.css";
 export interface CustomSelectOptionProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {
+  /**
+   * Вставляет основной контент.
+   */
   option?: any;
-  selected?: boolean;
-  focused?: boolean;
-  hovered?: boolean;
+  /**
+   * Добавляет описание под основным блоком.
+   */
+  description?: React.ReactNode;
+  /**
+   * Вставляет элемент в начало блока перед основным контентом.
+   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.
+   */
   before?: React.ReactNode;
+  /**
+   * Вставляет элемент в конец блока после основного контента.
+   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.
+   */
   after?: React.ReactNode;
-  description?: React.ReactNode;
+  /**
+   * Позволяет создавать вложенность.
+   */
+  hierarchy?: number;
+  /**
+   * Включает состояние выбранного элемента списка.
+   */
+  selected?: boolean;
+  /**
+   * Включает состояние наведения.
+   */
+  hovered?: boolean;
+  /**
+   * Включает состояние фокуса.
+   */
+  focused?: boolean;
+  /**
+   * Блокирует весь блок.
+   */
   disabled?: boolean;
 }
 
 const warn = warnOnce("CustomSelectOption");
 
-const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
+export const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   children,
+  hierarchy = 0,
   hovered,
   selected,
   before,
@@ -33,20 +64,30 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   option,
   description,
   disabled,
+  style: styleProp,
   ...restProps
 }: CustomSelectOptionProps) => {
   const title = typeof children === "string" ? children : undefined;
   const { sizeY } = useAdaptivity();
+  const style = React.useMemo(
+    () =>
+      hierarchy > 0
+        ? {
+            "--custom-select-option-hierarchy-level": hierarchy,
+            ...styleProp,
+          }
+        : styleProp,
+    [hierarchy, styleProp]
+  );
 
   if (!!option && process.env.NODE_ENV === "development") {
     warn("Свойство option было добавлено по ошибке и будет удалено в 5.0.0.");
   }
 
   return (
-    <Text
+    <Paragraph
       {...restProps}
       Component="div"
-      weight="regular"
       role="option"
       title={title}
       aria-disabled={disabled}
@@ -54,12 +95,12 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
       vkuiClass={classNames(
         "CustomSelectOption",
         `CustomSelectOption--sizeY-${sizeY}`,
-        {
-          "CustomSelectOption--hover": hovered && !disabled,
-          "CustomSelectOption--selected": selected,
-          "CustomSelectOption--disabled": disabled,
-        }
+        hovered && !disabled && "CustomSelectOption--hover",
+        selected && "CustomSelectOption--selected", // Note: пустой класс
+        disabled && "CustomSelectOption--disabled",
+        hierarchy > 0 && "CustomSelectOption--hierarchy"
       )}
+      style={style}
     >
       {hasReactNode(before) && (
         <div vkuiClass="CustomSelectOption__before">{before}</div>
@@ -67,26 +108,19 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
       <div vkuiClass="CustomSelectOption__main">
         <div vkuiClass="CustomSelectOption__children">{children}</div>
         {hasReactNode(description) && (
-          <Caption
-            level="1"
-            weight="regular"
-            vkuiClass="CustomSelectOption__description"
-          >
+          <Caption vkuiClass="CustomSelectOption__description">
             {description}
           </Caption>
         )}
       </div>
       <div vkuiClass="CustomSelectOption__after">
         {hasReactNode(after) && (
-          <div className="CustomSelectOption__afterIn">{after}</div>
+          <div vkuiClass="CustomSelectOption__afterIn">{after}</div>
         )}
         {selected && (
           <Icon16Done vkuiClass="CustomSelectOption__selectedIcon" />
         )}
       </div>
-    </Text>
+    </Paragraph>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default CustomSelectOption;

package/src/components/CustomSelectOption/Readme.md

@@ -1,33 +1,52 @@
-Унивирсальный компонент для отрисовки option в кастомных селектах.
+Универсальный компонент для отрисовки option в кастомных селектах.
 Используется внутри [CustomSelect](#!/CustomSelect), [ChipsSelect](#!/ChipsSelect).
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ margin: 50, width: 320, background: "var(--background_page)" }}>
-  <CustomSelectOption style={{ background: "var(--background_content)" }}>
-    Дмитрий Безуглый
-  </CustomSelectOption>
-  <Header>description</Header>
-  <CustomSelectOption
-    style={{ background: "var(--background_content)" }}
-    description="Россия, Санкт-Петербург"
-  >
-    Вадим Дорохов
-  </CustomSelectOption>
-  <Header>before</Header>
-  <CustomSelectOption
-    style={{ background: "var(--background_content)" }}
-    before={<Avatar size={20} />}
-  >
-    Иван Барышев
-  </CustomSelectOption>
-  <Header>selected</Header>
-  <CustomSelectOption
-    style={{ background: "var(--background_content)" }}
-    selected
-  >
-    Владимир Клепов
-  </CustomSelectOption>
-  <Header>hovered</Header>
-  <CustomSelectOption hovered>Игорь Федоров</CustomSelectOption>
-</div>
+const frameStyles = { outline: "1px dashed tomato" };
+
+const Example = () => {
+  return (
+    <div style={{ margin: 50, width: 320 }}>
+      <CustomSelectOption style={frameStyles}>
+        Дмитрий Безуглый
+      </CustomSelectOption>
+      <Header>description</Header>
+      <CustomSelectOption
+        style={frameStyles}
+        description="Россия, Санкт-Петербург"
+      >
+        Вадим Дорохов
+      </CustomSelectOption>
+      <Header>before</Header>
+      <CustomSelectOption style={frameStyles} before={<Avatar size={20} />}>
+        Иван Барышев
+      </CustomSelectOption>
+      <Header>after</Header>
+      <CustomSelectOption style={frameStyles} after={<Avatar size={20} />}>
+        Иван Барышев
+      </CustomSelectOption>
+      <Header>selected</Header>
+      <CustomSelectOption style={frameStyles} selected>
+        Владимир Клепов
+      </CustomSelectOption>
+      <Header>hovered</Header>
+      <CustomSelectOption style={frameStyles} hovered>
+        Игорь Федоров
+      </CustomSelectOption>
+      <Header>hierarchy</Header>
+      <CustomSelectOption style={frameStyles}>Диск</CustomSelectOption>
+      <CustomSelectOption hierarchy={1} style={frameStyles}>
+        Папка
+      </CustomSelectOption>
+      <CustomSelectOption hierarchy={2} style={frameStyles}>
+        Файл 1
+      </CustomSelectOption>
+      <CustomSelectOption hierarchy={2} style={frameStyles}>
+        Файл 2
+      </CustomSelectOption>
+    </div>
+  );
+};
+
+<Example />;
 ```

package/src/components/DateInput/DateInput.css

@@ -0,0 +1,20 @@
+.DateInput__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;
+}
+
+.DateInput__input-time-divider {
+  letter-spacing: 6px !important;
+}
+
+.DateInput--sizeY-compact .DateInput__input {
+  font-size: 15px;
+  margin-right: 22px;
+}

package/src/components/DateInput/DateInput.tsx

@@ -0,0 +1,317 @@
+import * as React from "react";
+import { format, isMatch, parse } from "../../lib/date";
+import { Icon16Clear, Icon20CalendarOutline } from "@vkontakte/icons";
+import { Calendar, CalendarProps } from "../Calendar/Calendar";
+import { Popper, Placement } from "../Popper/Popper";
+import { multiRef } from "../../lib/utils";
+import IconButton from "../IconButton/IconButton";
+import { classNames } from "../../lib/classNames";
+import { FormField } from "../FormField/FormField";
+import { HasRootRef } from "../../types";
+import { useDateInput } from "../../hooks/useDateInput";
+import { InputLike } from "../InputLike/InputLike";
+import { InputLikeDivider } from "../InputLike/InputLikeDivider";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { callMultiple } from "../../lib/callMultiple";
+import "./DateInput.css";
+
+export interface DateInputProps
+  extends Omit<
+      React.InputHTMLAttributes<HTMLDivElement>,
+      "value" | "onChange" | "size"
+    >,
+    Pick<
+      CalendarProps,
+      | "disablePast"
+      | "disableFuture"
+      | "enableTime"
+      | "shouldDisableDate"
+      | "onChange"
+      | "value"
+      | "doneButtonText"
+      | "weekStartsOn"
+      | "disablePickers"
+      | "changeHoursAriaLabel"
+      | "changeMinutesAriaLabel"
+      | "prevMonthAriaLabel"
+      | "nextMonthAriaLabel"
+      | "changeMonthAriaLabel"
+      | "changeYearAriaLabel"
+      | "changeDayAriaLabel"
+      | "showNeighboringMonth"
+      | "size"
+    >,
+    HasRootRef<HTMLDivElement> {
+  calendarPlacement?: Placement;
+  closeOnChange?: boolean;
+  clearFieldAriaLabel?: string;
+  showCalendarAriaLabel?: string;
+}
+
+const elementsConfig = (index: number) => {
+  let length = 2;
+  let min = 1;
+  let max = 0;
+
+  switch (index) {
+    case 0:
+      max = 31;
+      break;
+    case 1:
+      max = 12;
+      break;
+    case 2:
+      max = 2100;
+      min = 1900;
+      length = 4;
+      break;
+    case 3:
+      max = 23;
+      break;
+    case 4:
+      max = 59;
+      break;
+  }
+
+  return { length, min, max };
+};
+
+const getInternalValue = (value: CalendarProps["value"]) => {
+  const newValue = ["", "", "", "", ""];
+  if (value) {
+    newValue[0] = String(value.getDate()).padStart(2, "0");
+    newValue[1] = String(value.getMonth() + 1).padStart(2, "0");
+    newValue[2] = String(value.getFullYear()).padStart(4, "0");
+    newValue[3] = String(value.getHours()).padStart(2, "0");
+    newValue[4] = String(value.getMinutes()).padStart(2, "0");
+  }
+  return newValue;
+};
+
+export const DateInput: React.FC<DateInputProps> = ({
+  enableTime,
+  shouldDisableDate,
+  disableFuture,
+  disablePast,
+  value,
+  onChange,
+  calendarPlacement = "bottom-start",
+  style,
+  className,
+  doneButtonText,
+  closeOnChange = true,
+  disablePickers,
+  getRootRef,
+  name,
+  autoFocus,
+  disabled,
+  onClick,
+  onFocus,
+  prevMonthAriaLabel,
+  nextMonthAriaLabel,
+  showNeighboringMonth,
+  size,
+  changeMonthAriaLabel = "Изменить месяц",
+  changeYearAriaLabel = "Изменить год",
+  changeDayAriaLabel = "Изменить день",
+  changeHoursAriaLabel = "Изменить час",
+  changeMinutesAriaLabel = "Изменить минуту",
+  clearFieldAriaLabel = "Очистить поле",
+  showCalendarAriaLabel = "Показать календарь",
+  ...props
+}) => {
+  const daysRef = React.useRef<HTMLSpanElement>(null);
+  const monthsRef = React.useRef<HTMLSpanElement>(null);
+  const yearsRef = React.useRef<HTMLSpanElement>(null);
+  const hoursRef = React.useRef<HTMLSpanElement>(null);
+  const minutesRef = React.useRef<HTMLSpanElement>(null);
+
+  const maxElement = enableTime ? 4 : 2;
+
+  const onInternalValueChange = React.useCallback(
+    (internalValue: string[]) => {
+      for (let i = 0; i <= maxElement; i += 1) {
+        if (internalValue[i].length < elementsConfig(i).length) {
+          return;
+        }
+      }
+
+      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;
+      let mask = "DD.MM.YYYY";
+      if (enableTime) {
+        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;
+        mask += " HH:mm";
+      }
+
+      if (isMatch(formattedValue, mask)) {
+        onChange?.(parse(formattedValue, mask, value ?? new Date()));
+      }
+    },
+    [enableTime, maxElement, onChange, value]
+  );
+
+  const refs = React.useMemo(
+    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],
+    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef]
+  );
+
+  const {
+    rootRef,
+    calendarRef,
+    open,
+    openCalendar,
+    closeCalendar,
+    internalValue,
+    handleKeyDown,
+    setFocusedElement,
+    handleFieldEnter,
+    clear,
+    removeFocusFromField,
+  } = useDateInput({
+    maxElement,
+    refs,
+    autoFocus,
+    disabled,
+    elementsConfig,
+    onChange,
+    onInternalValueChange,
+    getInternalValue,
+    value,
+  });
+
+  const { sizeY } = useAdaptivity();
+
+  const onCalendarChange = React.useCallback(
+    (value?: Date | undefined) => {
+      onChange?.(value);
+      if (closeOnChange && !enableTime) {
+        removeFocusFromField();
+      }
+    },
+    [onChange, removeFocusFromField, closeOnChange, enableTime]
+  );
+
+  return (
+    <FormField
+      vkuiClass={classNames("DateInput", `DateInput--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
+            ? format(value, enableTime ? "DD.MM.YYYYTHH:mm" : "DD.MM.YYYY")
+            : ""
+        }
+      />
+      <span vkuiClass="DateInput__input" onKeyDown={handleKeyDown}>
+        <InputLike
+          tabIndex={1}
+          length={2}
+          getRootRef={daysRef}
+          index={0}
+          onElementSelect={setFocusedElement}
+          value={internalValue[0]}
+          aria-label={changeDayAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={2}
+          getRootRef={monthsRef}
+          index={1}
+          onElementSelect={setFocusedElement}
+          value={internalValue[1]}
+          aria-label={changeMonthAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={4}
+          getRootRef={yearsRef}
+          index={2}
+          onElementSelect={setFocusedElement}
+          value={internalValue[2]}
+          aria-label={changeYearAriaLabel}
+        />
+        {enableTime && (
+          <React.Fragment>
+            <InputLikeDivider vkuiClass="DateInput__input-time-divider">
+              {" "}
+            </InputLikeDivider>
+            <InputLike
+              length={2}
+              getRootRef={hoursRef}
+              index={3}
+              onElementSelect={setFocusedElement}
+              value={internalValue[3]}
+              aria-label={changeHoursAriaLabel}
+            />
+            <InputLikeDivider>:</InputLikeDivider>
+            <InputLike
+              length={2}
+              getRootRef={minutesRef}
+              index={4}
+              onElementSelect={setFocusedElement}
+              value={internalValue[4]}
+              aria-label={changeMinutesAriaLabel}
+            />
+          </React.Fragment>
+        )}
+      </span>
+      {open && (
+        <Popper
+          targetRef={rootRef}
+          offsetDistance={8}
+          placement={calendarPlacement}
+        >
+          <Calendar
+            value={value}
+            onChange={onCalendarChange}
+            enableTime={enableTime}
+            disablePast={disablePast}
+            disableFuture={disableFuture}
+            shouldDisableDate={shouldDisableDate}
+            onClose={closeCalendar}
+            getRootRef={calendarRef}
+            doneButtonText={doneButtonText}
+            disablePickers={disablePickers}
+            changeHoursAriaLabel={changeHoursAriaLabel}
+            changeMinutesAriaLabel={changeMinutesAriaLabel}
+            prevMonthAriaLabel={prevMonthAriaLabel}
+            nextMonthAriaLabel={nextMonthAriaLabel}
+            changeMonthAriaLabel={changeMonthAriaLabel}
+            changeYearAriaLabel={changeYearAriaLabel}
+            changeDayAriaLabel={changeDayAriaLabel}
+            showNeighboringMonth={showNeighboringMonth}
+            size={size}
+          />
+        </Popper>
+      )}
+    </FormField>
+  );
+};

package/src/components/DateInput/Readme.md

@@ -0,0 +1,116 @@
+Компонент выбора даты.
+
+> ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
+
+```jsx { "props": { "layout": false, "iframe": false } }
+import { format } from "../../lib/date";
+
+const Example = () => {
+  const [value, setValue] = useState(new Date());
+  const [enableTime, setEnableTime] = useState(false);
+  const [disablePast, setDisablePast] = useState(false);
+  const [disableFuture, setDisableFuture] = useState(false);
+  const [disablePickers, setDisablePickers] = useState(false);
+  const [closeOnChange, setCloseOnChange] = useState(true);
+  const [showNeighboringMonth, setShowNeighboringMonth] = useState(false);
+  const [locale, setLocale] = useState("ru");
+
+  return (
+    <FormLayout>
+      <FormLayoutGroup mode="vertical">
+        <FormItem top="Выбор времени">
+          <Checkbox
+            checked={enableTime}
+            onChange={(e) => setEnableTime(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </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={closeOnChange}
+            onChange={(e) => setCloseOnChange(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Отключить селекты выбора месяца/года">
+          <Checkbox
+            checked={disablePickers}
+            onChange={(e) => setDisablePickers(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Отображать даты с прошлого и следующего месяца">
+          <Checkbox
+            checked={showNeighboringMonth}
+            onChange={(e) => setShowNeighboringMonth(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}>
+              <DateInput
+                value={value}
+                onChange={setValue}
+                enableTime={enableTime}
+                disablePast={disablePast}
+                disableFuture={disableFuture}
+                closeOnChange={closeOnChange}
+                disablePickers={disablePickers}
+                showNeighboringMonth={showNeighboringMonth}
+              />
+            </LocaleProviderContext.Provider>
+          </div>
+        </FormItem>
+      </FormLayoutGroup>
+    </FormLayout>
+  );
+};
+
+<Example />;
+```

package/src/components/DatePicker/DatePicker.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import Input from "../Input/Input";
+import { Input } from "../Input/Input";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { HasPlatform } from "../../types";
 import { leadingZero } from "../../lib/utils";
-import CustomSelect from "../CustomSelect/CustomSelect";
+import { CustomSelect } from "../CustomSelect/CustomSelect";
 import "./DatePicker.css";
 
 const DefaultMonths: string[] = [