@vkontakte/vkui 4.27.1 → 4.28.1

package/src/components/ContentCard/ContentCard.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Card, CardProps } from "../Card/Card";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Title from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
@@ -121,12 +121,7 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
         )}
         <div vkuiClass="ContentCard__body">
           {hasReactNode(subtitle) && (
-            <Caption
-              caps
-              vkuiClass="ContentCard__text"
-              weight="semibold"
-              level="3"
-            >
+            <Caption caps vkuiClass="ContentCard__text" weight="1" level="3">
               {subtitle}
             </Caption>
           )}
@@ -141,9 +136,7 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
             </Text>
           )}
           {hasReactNode(caption) && (
-            <Caption vkuiClass="ContentCard__text" weight="regular" level="1">
-              {caption}
-            </Caption>
+            <Caption vkuiClass="ContentCard__text">{caption}</Caption>
           )}
         </div>
       </Tappable>

package/src/components/Counter/Counter.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Text from "../Typography/Text/Text";
 import { VKCOM } from "../../lib/platform";
 import { hasReactNode } from "../../lib/utils";
@@ -29,7 +29,7 @@ const CounterTypography: React.FC<CounterTypographyProps> = ({
   return size === "s" ? (
     <Caption
       level="2"
-      weight={platform === VKCOM ? "medium" : "regular"}
+      weight={platform === VKCOM ? "1" : undefined}
       {...restProps}
     />
   ) : (

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -5,7 +5,7 @@ import "./CustomScrollView.css";
 
 interface Props extends DOMProps {
   windowResize?: boolean;
-  boxRef: React.Ref<HTMLDivElement>;
+  boxRef?: React.Ref<HTMLDivElement>;
   className?: HTMLDivElement["className"];
 }
 

package/src/components/CustomSelect/CustomSelect.css

@@ -22,18 +22,3 @@
   text-align: center;
   color: var(--text_secondary);
 }
-
-.CustomSelect__open.Select--mimicry:focus .FormField__border {
-  border-color: var(--field_border);
-}
-
-.CustomSelect__open:not(.CustomSelect__open--popupDirectionTop)
-  .FormField__border {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.CustomSelect__open.CustomSelect__open--popupDirectionTop .FormField__border {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}

package/src/components/CustomSelect/CustomSelect.tsx

@@ -13,7 +13,7 @@ import { FormFieldProps } from "../FormField/FormField";
 import { HasPlatform } from "../../types";
 import Input from "../Input/Input";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { warnOnce } from "../../lib/warnOnce";
 import { defaultFilterFn } from "../../lib/select";
 import { is } from "../../lib/is";
@@ -62,6 +62,11 @@ const checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {
 
 type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>["value"];
 
+export enum SelectType {
+  Default = "default",
+  Plain = "plain",
+}
+
 export interface CustomSelectOptionInterface {
   value: SelectValue;
   label: string;
@@ -135,6 +140,11 @@ export interface CustomSelectProps
   fetching?: boolean;
   onClose?: VoidFunction;
   onOpen?: VoidFunction;
+  icon?: React.ReactNode;
+  dropdownOffsetDistance?: number;
+  fixDropdownWidth?: boolean;
+  forceDropdownPortal?: boolean;
+  selectType?: SelectType;
 }
 
 type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
@@ -151,6 +161,10 @@ class CustomSelect extends React.Component<
     options: [],
     emptyText: "Ничего не найдено",
     filterFn: defaultFilterFn,
+    icon: <DropdownIcon />,
+    dropdownOffsetDistance: 0,
+    fixDropdownWidth: true,
+    selectType: SelectType.Default,
   };
 
   public constructor(props: CustomSelectProps) {
@@ -345,9 +359,14 @@ class CustomSelect extends React.Component<
 
     scrollTo && this.scrollToElement(index);
 
-    this.setState(() => ({
-      focusedOptionIndex: index,
-    }));
+    this.setState((prevState) =>
+      // Это оптимизация, прежде всего, под `onMouseOver`
+      prevState.focusedOptionIndex !== index
+        ? {
+            focusedOptionIndex: index,
+          }
+        : null
+    );
   };
 
   focusOption = (type: "next" | "prev") => {
@@ -586,7 +605,15 @@ class CustomSelect extends React.Component<
           disabled: option.disabled,
           onClick: this.handleOptionClick,
           onMouseDown: this.handleOptionDown,
-          onMouseEnter: this.handleOptionHover,
+          // Используем `onMouseOver` вместо `onMouseEnter`.
+          // При параметре `searchable`, обновляется "ребёнок", из-за чего `onMouseEnter` не срабатывает в следующих кейсах:
+          //  1. До загрузки выпадающего списка, курсор мышки находится над произвольным элементом этого списка.
+          //     > Лечение: только увод курсора мыши и возвращении его обратно вызывает событие `onMouseEnter` на этот элемент.
+          //  2. Если это тач-устройство.
+          //     > Лечение: нужно нажать на какой-нибудь произвольный элемент списка, после чего `onMouseEnter` будет работать на соседние элементы,
+          //     но не на тот, на который нажали в первый раз.
+          // Более подробно по ссылке https://github.com/facebook/react/issues/13956#issuecomment-1082055744
+          onMouseOver: this.handleOptionHover,
         })}
       </React.Fragment>
     );
@@ -631,6 +658,10 @@ class CustomSelect extends React.Component<
       onOpen,
       onClose,
       fetching,
+      icon,
+      dropdownOffsetDistance,
+      fixDropdownWidth,
+      forceDropdownPortal,
       ...restProps
     } = this.props;
     const selected = this.getSelectedItem();
@@ -640,7 +671,7 @@ class CustomSelect extends React.Component<
       stateOptions !== undefined && stateOptions.length > 0 ? (
         stateOptions.map(this.renderOption)
       ) : (
-        <Caption level="1" weight="regular" vkuiClass="CustomSelect__empty">
+        <Caption vkuiClass="CustomSelect__empty">
           {this.props.emptyText}
         </Caption>
       );
@@ -671,6 +702,8 @@ class CustomSelect extends React.Component<
             vkuiClass={classNames({
               CustomSelect__open: opened,
               "CustomSelect__open--popupDirectionTop": isPopperDirectionTop,
+              "CustomSelect__open--not-adjacent":
+                (dropdownOffsetDistance as number) > 0,
             })}
             value={this.state.inputValue}
             onKeyDown={this.onInputKeyDown}
@@ -679,7 +712,7 @@ class CustomSelect extends React.Component<
             // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.
             // @ts-ignore
             onClick={onClick}
-            after={<DropdownIcon />}
+            after={icon}
             placeholder={restProps.placeholder}
           />
         ) : (
@@ -694,7 +727,10 @@ class CustomSelect extends React.Component<
             vkuiClass={classNames({
               CustomSelect__open: opened,
               "CustomSelect__open--popupDirectionTop": isPopperDirectionTop,
+              "CustomSelect__open--not-adjacent":
+                (dropdownOffsetDistance as number) > 0,
             })}
+            after={icon}
           >
             {label}
           </SelectMimicry>
@@ -722,6 +758,9 @@ class CustomSelect extends React.Component<
             onPlacementChange={this.onPlacementChange}
             onMouseLeave={this.resetFocusedOption}
             fetching={fetching}
+            offsetDistance={dropdownOffsetDistance}
+            sameWidth={fixDropdownWidth}
+            forcePortal={forceDropdownPortal}
           >
             {resolvedContent}
           </CustomSelectDropdown>

package/src/components/CustomSelectDropdown/CustomSelectDropdown.css

@@ -1,5 +1,4 @@
 .CustomSelectDropdown__options {
-  width: 100%;
   overflow: hidden;
   background-color: var(--modal_card_background);
   box-sizing: border-box;
@@ -9,6 +8,14 @@
   border-radius: 0 0 8px 8px;
 }
 
+.CustomSelectDropdown__options--same-width {
+  width: 100%;
+}
+
+:not(.CustomSelectDropdown__options--same-width) .CustomScrollView__box {
+  padding-right: 8px;
+}
+
 .CustomSelectDropdown__options--popupDirectionTop {
   bottom: 100%;
   border-radius: 8px 8px 0 0;
@@ -17,6 +24,11 @@
   box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.03);
 }
 
+.CustomSelectDropdown__options--not-adjacent {
+  border-radius: 8px;
+  border: solid 1px var(--field_border);
+}
+
 .CustomSelectDropdown__CustomScrollView {
   max-height: 160px;
 }

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -11,8 +11,11 @@ export interface CustomSelectDropdownProps
     HasRef<HTMLDivElement> {
   targetRef: React.RefObject<HTMLElement>;
   placement?: Placement;
-  scrollBoxRef: React.Ref<HTMLDivElement>;
+  scrollBoxRef?: React.Ref<HTMLDivElement>;
   fetching?: boolean;
+  offsetDistance?: number;
+  sameWidth?: boolean;
+  forcePortal?: boolean;
   onPlacementChange?: (placement?: Placement) => void;
 }
 
@@ -25,6 +28,9 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
   placement,
   fetching,
   onPlacementChange: parentOnPlacementChange,
+  offsetDistance = 0,
+  sameWidth = true,
+  forcePortal = true,
   ...restProps
 }) => {
   const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));
@@ -40,13 +46,16 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
   return (
     <Popper
       targetRef={targetRef}
-      offsetDistance={0}
-      sameWidth
+      offsetDistance={offsetDistance}
+      sameWidth={sameWidth}
       onPlacementChange={onPlacementChange}
       placement={placement}
       vkuiClass={classNames("CustomSelectDropdown__options", {
         "CustomSelectDropdown__options--popupDirectionTop": isTop,
+        "CustomSelectDropdown__options--not-adjacent": offsetDistance > 0,
+        "CustomSelectDropdown__options--same-width": sameWidth,
       })}
+      forcePortal={forcePortal}
       {...restProps}
     >
       <CustomScrollView

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -3,7 +3,7 @@ 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 { Caption } from "../Typography/Caption/Caption";
 import { HasRootRef } from "../../types";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { warnOnce } from "../../lib/warnOnce";
@@ -67,18 +67,14 @@ 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" />

package/src/components/CustomSelectOption/Readme.md

@@ -1,4 +1,4 @@
-Унивирсальный компонент для отрисовки option в кастомных селектах.
+Универсальный компонент для отрисовки option в кастомных селектах.
 Используется внутри [CustomSelect](#!/CustomSelect), [ChipsSelect](#!/ChipsSelect).
 
 ```jsx { "props": { "layout": false, "iframe": false } }

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;
+}
+
+.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 "date-fns";
+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.yyyy'T'HH: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>
+  );
+};