@vkontakte/vkui 4.28.1 → 4.29.0

package/src/components/CustomSelect/CustomSelect.tsx

@@ -5,13 +5,14 @@ import { classNames } from "../../lib/classNames";
 import { NativeSelectProps } from "../NativeSelect/NativeSelect";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { withPlatform } from "../../hoc/withPlatform";
-import CustomSelectOption, {
+import {
+  CustomSelectOption,
   CustomSelectOptionProps,
 } from "../CustomSelectOption/CustomSelectOption";
 import { getClassName } from "../../helpers/getClassName";
 import { FormFieldProps } from "../FormField/FormField";
 import { HasPlatform } from "../../types";
-import Input from "../Input/Input";
+import { Input } from "../Input/Input";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { Caption } from "../Typography/Caption/Caption";
 import { warnOnce } from "../../lib/warnOnce";
@@ -55,7 +56,8 @@ const warn = warnOnce("CustomSelect");
 const checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {
   if (new Set(options.map((item) => typeof item.value)).size > 1) {
     warn(
-      "Some values of your options have different types. CustomSelect onChange always returns a string type."
+      "Some values of your options have different types. CustomSelect onChange always returns a string type.",
+      "error"
     );
   }
 };
@@ -149,7 +151,7 @@ export interface CustomSelectProps
 
 type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
 
-class CustomSelect extends React.Component<
+class CustomSelectComponent extends React.Component<
   CustomSelectProps,
   CustomSelectState
 > {
@@ -662,6 +664,7 @@ class CustomSelect extends React.Component<
       dropdownOffsetDistance,
       fixDropdownWidth,
       forceDropdownPortal,
+      selectType,
       ...restProps
     } = this.props;
     const selected = this.getSelectedItem();
@@ -699,16 +702,16 @@ class CustomSelect extends React.Component<
             {...restProps}
             autoFocus
             onBlur={this.onBlur}
-            vkuiClass={classNames({
-              CustomSelect__open: opened,
-              "CustomSelect__open--popupDirectionTop": isPopperDirectionTop,
-              "CustomSelect__open--not-adjacent":
-                (dropdownOffsetDistance as number) > 0,
-            })}
+            vkuiClass={classNames(
+              opened && "CustomSelect__open",
+              isPopperDirectionTop && "CustomSelect__open--popupDirectionTop",
+              (dropdownOffsetDistance as number) > 0 &&
+                "CustomSelect__open--not-adjacent"
+            )}
             value={this.state.inputValue}
             onKeyDown={this.onInputKeyDown}
             onChange={this.onInputChange}
-            // TODO Ожидается, что клик поймает нативный select, но его перехвает Input. К сожалению, это приводит конфликтам типизации.
+            // TODO Ожидается, что клик поймает нативный select, но его перехватывает Input. К сожалению, это приводит к конфликтам типизации.
             // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.
             // @ts-ignore
             onClick={onClick}
@@ -724,13 +727,14 @@ class CustomSelect extends React.Component<
             onKeyUp={this.handleKeyUp}
             onFocus={this.onFocus}
             onBlur={this.onBlur}
-            vkuiClass={classNames({
-              CustomSelect__open: opened,
-              "CustomSelect__open--popupDirectionTop": isPopperDirectionTop,
-              "CustomSelect__open--not-adjacent":
-                (dropdownOffsetDistance as number) > 0,
-            })}
+            vkuiClass={classNames(
+              opened && "CustomSelect__open",
+              isPopperDirectionTop && "CustomSelect__open--popupDirectionTop",
+              (dropdownOffsetDistance as number) > 0 &&
+                "CustomSelect__open--not-adjacent"
+            )}
             after={icon}
+            selectType={selectType}
           >
             {label}
           </SelectMimicry>
@@ -770,9 +774,8 @@ class CustomSelect extends React.Component<
   }
 }
 
-// eslint-disable-next-line import/no-default-export
-export default withPlatform(
-  withAdaptivity(CustomSelect, {
+export const CustomSelect = withPlatform(
+  withAdaptivity(CustomSelectComponent, {
     sizeY: true,
   })
 );

package/src/components/CustomSelectDropdown/CustomSelectDropdown.css

@@ -1,10 +1,14 @@
 .CustomSelectDropdown__options {
   overflow: hidden;
-  background-color: var(--modal_card_background);
+  background-color: var(
+    --modal_card_background,
+    var(--vkui--color_background_content)
+  );
   box-sizing: border-box;
-  border: solid 1px var(--field_border);
+  border: var(--thin-border) solid
+    var(--field_border, var(--vkui--color_separator_primary_alpha));
   border-top: 0;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.03);
+  box-shadow: var(--vkui--elevation1);
   border-radius: 0 0 8px 8px;
 }
 
@@ -21,12 +25,13 @@
   border-radius: 8px 8px 0 0;
   border-top: unset;
   border-bottom: 0;
-  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.03);
+  box-shadow: var(--vkui--elevation1_invert_y);
 }
 
 .CustomSelectDropdown__options--not-adjacent {
   border-radius: 8px;
-  border: solid 1px var(--field_border);
+  border: var(--thin-border) solid
+    var(--field_border, var(--vkui--color_separator_primary_alpha));
 }
 
 .CustomSelectDropdown__CustomScrollView {

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -50,11 +50,12 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
       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,
-      })}
+      vkuiClass={classNames(
+        "CustomSelectDropdown__options",
+        isTop && "CustomSelectDropdown__options--popupDirectionTop",
+        offsetDistance > 0 && "CustomSelectDropdown__options--not-adjacent",
+        sameWidth && "CustomSelectDropdown__options--same-width"
+      )}
       forcePortal={forcePortal}
       {...restProps}
     >

package/src/components/CustomSelectOption/CustomSelectOption.css

@@ -8,7 +8,16 @@
   white-space: nowrap;
   user-select: none;
   cursor: pointer;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
+}
+
+.CustomSelectOption--hierarchy {
+  --custom-select-option-hierarchy-level: 0;
+
+  padding-left: calc(
+    var(--custom-select-option-hierarchy-level) *
+      var(--vkui--size_option_hierarchy--regular)
+  );
 }
 
 .CustomSelectOption--sizeY-regular {
@@ -17,11 +26,14 @@
 
 .CustomSelectOption--disabled {
   cursor: default;
-  opacity: 0.4;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .CustomSelectOption--hover {
-  background-color: var(--button_muted_background);
+  background-color: var(
+    --button_muted_background,
+    var(--vkui--color_transparent--hover)
+  );
 }
 
 .CustomSelectOption__before {
@@ -49,13 +61,13 @@
 }
 
 .CustomSelectOption__description {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 .CustomSelectOption__selectedIcon {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .CustomSelectOption__selectedIcon:not(:first-child) {

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -2,7 +2,7 @@ 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 { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { Caption } from "../Typography/Caption/Caption";
 import { HasRootRef } from "../../types";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
@@ -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>
@@ -80,9 +121,6 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
           <Icon16Done vkuiClass="CustomSelectOption__selectedIcon" />
         )}
       </div>
-    </Text>
+    </Paragraph>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default CustomSelectOption;

package/src/components/CustomSelectOption/Readme.md

@@ -2,32 +2,51 @@
 Используется внутри [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

@@ -11,7 +11,7 @@
 }
 
 .DateInput__input-time-divider {
-  letter-spacing: 6px;
+  letter-spacing: 6px !important;
 }
 
 .DateInput--sizeY-compact .DateInput__input {

package/src/components/DateInput/DateInput.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { format, isMatch, parse } from "date-fns";
+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";
@@ -137,7 +137,7 @@ export const DateInput: React.FC<DateInputProps> = ({
       }
 
       let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;
-      let mask = "dd.MM.yyyy";
+      let mask = "DD.MM.YYYY";
       if (enableTime) {
         formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;
         mask += " HH:mm";
@@ -226,7 +226,7 @@ export const DateInput: React.FC<DateInputProps> = ({
         name={name}
         value={
           value
-            ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : "dd.MM.yyyy")
+            ? format(value, enableTime ? "DD.MM.YYYYTHH:mm" : "DD.MM.YYYY")
             : ""
         }
       />

package/src/components/DateInput/Readme.md

@@ -3,7 +3,7 @@
 > ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-import { format } from "date-fns";
+import { format } from "../../lib/date";
 
 const Example = () => {
   const [value, setValue] = useState(new Date());

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[] = [

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { format, isMatch, parse, isAfter } from "date-fns";
+import { format, isMatch, parse, isAfter } from "../../lib/date";
 import { Icon16Clear, Icon20CalendarOutline } from "@vkontakte/icons";
 import {
   CalendarRange,
@@ -261,8 +261,8 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
         name={name}
         value={
           value
-            ? `${value[0] ? format(value[0], "dd.MM.yyyy") : ""} - ${
-                value[1] ? format(value[1], "dd.MM.yyyy") : ""
+            ? `${value[0] ? format(value[0], "DD.MM.YYYY") : ""} - ${
+                value[1] ? format(value[1], "DD.MM.YYYY") : ""
               }`
             : ""
         }

package/src/components/DateRangeInput/Readme.md

@@ -3,7 +3,7 @@
 > ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-import { format, addDays } from "date-fns";
+import { format, addDays } from "../../lib/date";
 
 const Example = () => {
   const [value, setValue] = useState([new Date(), addDays(new Date(), 10)]);

package/src/components/Epic/Readme.md

@@ -150,7 +150,11 @@ const Example = withAdaptivity(
                     onClick={onStoryChange}
                     selected={activeStory === "messages"}
                     data-story="messages"
-                    label="12"
+                    indicator={
+                      <Counter size="s" mode="prominent">
+                        12
+                      </Counter>
+                    }
                     text="Сообщения"
                   >
                     <Icon28MessageOutline />

package/src/components/File/File.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
-import Button, { VKUIButtonProps } from "../Button/Button";
+import { Button, VKUIButtonProps } from "../Button/Button";
 import { HasRef, HasRootRef } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useExternRef } from "../../hooks/useExternRef";

package/src/components/FixedLayout/FixedLayout.tsx

@@ -51,6 +51,7 @@ const FixedLayout: React.FC<FixedLayoutProps> = ({
       {...restProps}
       fixed
       ref={getRootRef}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("FixedLayout", platform),
         {

package/src/components/FormField/FormField.css

@@ -4,7 +4,7 @@
   align-items: center;
   padding: 1px;
   box-sizing: border-box;
-  border-radius: 8px;
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .FormField > * {
@@ -21,7 +21,7 @@
   min-width: 44px;
   height: 44px;
   margin: -1px;
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
   z-index: 2;
 }
 
@@ -35,8 +35,9 @@
   top: 0;
   width: 100%;
   height: 100%;
-  border: 1px solid var(--field_border);
-  background: var(--field_background);
+  border: var(--thin-border) solid
+    var(--field_border, var(--vkui--color_field_border_alpha));
+  background: var(--field_background, var(--vkui--color_field_background));
   content: "";
   box-sizing: border-box;
   z-index: 1;
@@ -44,29 +45,35 @@
 }
 
 .FormItem--error .FormField__border {
-  background: var(--field_error_background);
-  border-color: var(--field_error_border);
+  background: var(
+    --field_error_background,
+    var(--vkui--color_background_negative_tint)
+  );
+  border-color: var(--field_error_border, var(--vkui--color_stroke_negative));
 }
 
 .FormItem--valid .FormField__border {
-  border-color: var(--field_valid_border);
+  border-color: var(--field_valid_border, var(--vkui--color_stroke_positive));
 }
 
 .FormField--disabled {
-  opacity: 0.64;
+  opacity: var(--vkui--opacity_disable_accessibility);
   cursor: default;
   pointer-events: none;
 }
 
 .FormField:not(.FormField--disabled) .FormField__border--hover {
-  border-color: var(--icon_tertiary_alpha);
+  border-color: var(
+    --icon_tertiary_alpha,
+    var(--vkui--color_field_border_alpha--hover)
+  );
 }
 
 .FormField:focus-within .FormField__border,
 .FormField *:focus ~ .FormField__border,
 .ChipsInput--focused .FormField__border {
-  border-color: var(--accent);
-  background: var(--field_background);
+  border-color: var(--accent, var(--vkui--color_stroke_accent));
+  background: var(--field_background, var(--vkui--color_field_background));
 }
 
 /**
@@ -77,38 +84,6 @@
   height: 36px;
 }
 
-/**
- * iOS
- */
-.FormField--ios {
-  border-radius: 10px;
-}
-
-@media (min-resolution: 2dppx) {
-  .FormField--ios .FormField__border {
-    border-radius: 20px;
-    transform: scale(0.5);
-    width: 200%;
-    height: 200%;
-  }
-}
-
-@media (min-resolution: 3dppx) {
-  .FormField--ios .FormField__border {
-    border-radius: 31.25px;
-    transform: scale(0.32);
-    width: 312.5%;
-    height: 312.5%;
-  }
-}
-
-/**
- * VKCOM
- */
-.FormField--vkcom {
-  border-radius: 6px;
-}
-
 /**
  * ModalCardBase
  */
@@ -130,7 +105,7 @@
 }
 
 .CustomSelect__open.Select--mimicry:focus .FormField__border {
-  border-color: var(--field_border);
+  border-color: var(--field_border, var(--vkui--color_field_border_alpha));
 }
 
 .CustomSelect__open:not(.CustomSelect__open--popupDirectionTop):not(.CustomSelect__open--not-adjacent)
@@ -148,5 +123,5 @@
 .CustomSelect__open.Select--mimicry-plain.Select--mimicry:focus
   .FormField__border,
 .FormField:not(.FormField--disabled) .FormField__border--hover {
-  background-color: var(--vkui--color_background);
+  background-color: var(--background_page, var(--vkui--color_field_background));
 }