@vkontakte/vkui 4.28.1 → 4.30.0

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";
@@ -40,6 +40,10 @@ export interface DateInputProps
       | "changeDayAriaLabel"
       | "showNeighboringMonth"
       | "size"
+      | "viewDate"
+      | "onHeaderChange"
+      | "onNextMonth"
+      | "onPrevMonth"
     >,
     HasRootRef<HTMLDivElement> {
   calendarPlacement?: Placement;
@@ -118,6 +122,10 @@ export const DateInput: React.FC<DateInputProps> = ({
   changeMinutesAriaLabel = "Изменить минуту",
   clearFieldAriaLabel = "Очистить поле",
   showCalendarAriaLabel = "Показать календарь",
+  viewDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
   ...props
 }) => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -137,7 +145,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 +234,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")
             : ""
         }
       />
@@ -309,6 +317,10 @@ export const DateInput: React.FC<DateInputProps> = ({
             changeDayAriaLabel={changeDayAriaLabel}
             showNeighboringMonth={showNeighboringMonth}
             size={size}
+            viewDate={viewDate}
+            onHeaderChange={onCalendarChange}
+            onNextMonth={onNextMonth}
+            onPrevMonth={onPrevMonth}
           />
         </Popper>
       )}

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/Epic.tsx

@@ -32,7 +32,9 @@ export const Epic: React.FC<EpicProps & AdaptivityContextInterface> = (
     !tabbar &&
     viewWidth < ViewWidth.SMALL_TABLET
   ) {
-    warn("Using Epic without tabbar is not recommended on mobile");
+    warn(
+      `Не рекомендуется использовать Epic без Tabbar при ширине окна меньше ${ViewWidth.SMALL_TABLET}px`
+    );
   }
   const story =
     (React.Children.toArray(children).find(

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.css

@@ -14,10 +14,12 @@
 .FixedLayout--top {
   width: 100%;
   top: 0;
+  left: 0;
 }
 
 .FixedLayout--bottom {
   width: 100%;
+  left: 0;
   bottom: 0;
   padding-bottom: var(--safe-area-inset-bottom);
 }

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,13 +4,14 @@
   align-items: center;
   padding: 1px;
   box-sizing: border-box;
-  border-radius: 8px;
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .FormField > * {
   border-radius: inherit;
 }
 
+.FormField__before,
 .FormField__after {
   flex-shrink: 0;
   position: relative;
@@ -21,10 +22,18 @@
   min-width: 44px;
   height: 44px;
   margin: -1px;
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
   z-index: 2;
 }
 
+.FormField__before {
+  color: var(--vkui--color_icon_accent);
+}
+
+.FormField__after {
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
+}
+
 .ChipsInput .FormField__after {
   z-index: 3;
 }
@@ -35,8 +44,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,71 +54,46 @@
 }
 
 .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));
 }
 
 /**
  * sizeY COMPACT
  */
+.FormField--sizeY-compact .FormField__before,
 .FormField--sizeY-compact .FormField__after {
   min-width: 36px;
   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 +115,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 +133,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));
 }

package/src/components/FormField/FormField.tsx

@@ -9,7 +9,21 @@ import "./FormField.css";
 
 export interface FormFieldProps {
   /**
-   * Иконка 12|16|20|24|28 или `IconButton`.
+   * Добавляет иконку слева.
+   *
+   * Рекомендации:
+   *
+   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
+   * - Используйте [IconButton](#/IconButton), если вам нужна кликабельная иконка.
+   */
+  before?: React.ReactNode;
+  /**
+   * Добавляет иконку справа.
+   *
+   * Рекомендации:
+   *
+   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
+   * - Используйте [IconButton](#/IconButton), если вам нужна кликабельная иконка.
    */
   after?: React.ReactNode;
 }
@@ -26,6 +40,7 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
   Component = "div",
   children,
   getRootRef,
+  before,
   after,
   disabled,
   ...restProps
@@ -54,11 +69,14 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
       vkuiClass={classNames(
         getClassName("FormField", platform),
         `FormField--sizeY-${sizeY}`,
-        {
-          "FormField--disabled": disabled,
-        }
+        disabled && "FormField--disabled"
       )}
     >
+      {hasReactNode(before) && (
+        <div role="presentation" vkuiClass="FormField__before">
+          {before}
+        </div>
+      )}
       {children}
       {hasReactNode(after) && (
         <div role="presentation" vkuiClass="FormField__after">
@@ -67,9 +85,10 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
       )}
       <div
         role="presentation"
-        vkuiClass={classNames("FormField__border", {
-          "FormField__border--hover": !disabled && hover,
-        })}
+        vkuiClass={classNames(
+          "FormField__border",
+          !disabled && hover && "FormField__border--hover"
+        )}
       />
     </Component>
   );

package/src/components/FormField/Readme.md

@@ -1,6 +1,90 @@
 Компонент-оболочка для элементов форм ([Input](#/Input), [Select](#/Select), [Textarea](#/Textarea) и другие).
 
-```jsx
+```jsx { "props": { "layout": false, "iframe": false } }
+const Example = () => {
+  const [sizeY, setSizeY] = useState("regular");
+  const [before, setBefore] = useState(<Icon24WalletOutline />);
+  const [after, setAfter] = useState(<Icon24ChevronUp />);
+  const [disabled, setDisabled] = useState(false);
+
+  return (
+    <div style={rootContainerStyles}>
+      <div style={demoContainerStyles}>
+        <AdaptivityProvider sizeY={sizeY}>
+          <FormLayout>
+            <FormItem>
+              <FormField before={before} after={after} disabled={disabled}>
+                <CustomInput />
+              </FormField>
+            </FormItem>
+          </FormLayout>
+        </AdaptivityProvider>
+      </div>
+      <div style={propsContainerStyles}>
+        <FormItem top="sizeY">
+          <Select
+            value={sizeY}
+            onChange={(e) => setSizeY(e.target.value)}
+            options={[
+              { label: "compact", value: "compact" },
+              { label: "regular", value: "regular" },
+            ]}
+          />
+        </FormItem>
+        <FormItem top="prop[before]">
+          <Checkbox
+            description="Icon24WalletOutline for example"
+            checked={!!before}
+            onChange={(e) =>
+              e.target.checked
+                ? setBefore(<Icon24WalletOutline />)
+                : setBefore(undefined)
+            }
+          >
+            before
+          </Checkbox>
+        </FormItem>
+        <FormItem top="prop[after]">
+          <Checkbox
+            description="Icon24ChevronUp for example"
+            checked={!!after}
+            onChange={(e) =>
+              e.target.checked
+                ? setAfter(<Icon24ChevronUp />)
+                : setAfter(undefined)
+            }
+          >
+            after
+          </Checkbox>
+        </FormItem>
+        <FormItem top="prop[disabled]">
+          <Checkbox
+            checked={disabled}
+            onChange={(e) => setDisabled(e.target.checked)}
+          >
+            disabled
+          </Checkbox>
+        </FormItem>
+      </div>
+    </div>
+  );
+};
+
+const rootContainerStyles = {
+  display: "flex",
+  flexDirection: "row-reverse",
+  flexWrap: "wrap",
+  justifyContent: "center",
+};
+
+const demoContainerStyles = {
+  flexGrow: 2,
+  paddingTop: 24,
+  paddingBottom: 24,
+};
+
+const propsContainerStyles = { minWidth: 200 };
+
 const CustomInput = () => {
   const style = {
     position: "relative",
@@ -20,23 +104,5 @@ const CustomInput = () => {
   return <input type="text" style={style} placeholder="Кастомный инпут" />;
 };
 
-const Example = () => (
-  <View activePanel="custom-field">
-    <Panel id="custom-field">
-      <PanelHeader>FormField</PanelHeader>
-
-      <Group>
-        <FormLayout>
-          <FormItem>
-            <FormField>
-              <CustomInput />
-            </FormField>
-          </FormItem>
-        </FormLayout>
-      </Group>
-    </Panel>
-  </View>
-);
-
 <Example />;
 ```

package/src/components/FormItem/FormItem.tsx

@@ -5,7 +5,7 @@ import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { hasReactNode, noop } from "../../lib/utils";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { Caption } from "../Typography/Caption/Caption";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { Removable, RemovableProps } from "../Removable/Removable";
@@ -55,6 +55,7 @@ export const FormItem: React.FC<FormItemProps> = ({
     <Component
       {...restProps}
       ref={rootEl}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("FormItem", platform),
         `FormItem--${status}`,

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -37,6 +37,7 @@ const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
   return (
     <div
       ref={rootEl}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("FormLayoutGroup", platform),
         `FormLayoutGroup--sizeY-${sizeY}`,

package/src/components/Gallery/Gallery.tsx

@@ -27,6 +27,14 @@ export interface BaseGalleryProps
   onDragEnd?: TouchEventHandler;
   onChange?(current: number): void;
   onEnd?({ targetIndex }: { targetIndex: number }): void;
+  /**
+   * Будет вызвано при клике на кнопку-стрелку влево
+   */
+  onPrevClick?(): void;
+  /**
+   * Будет вызвано при клике на кнопку-стрелку вправо
+   */
+  onNextClick?(): void;
   bullets?: "dark" | "light" | false;
   isDraggable?: boolean;
   showArrows?: boolean;
@@ -322,20 +330,22 @@ class BaseGallery extends React.Component<
   }
 
   slideLeft = () => {
-    const { slideIndex = 0, onChange } = this.props;
+    const { slideIndex = 0, onChange, onPrevClick } = this.props;
     if (this.canSlideLeft) {
       this.setState({ deltaX: 0, animation: true }, () =>
         onChange?.(slideIndex - 1)
       );
+      onPrevClick?.();
     }
   };
 
   slideRight = () => {
-    const { slideIndex = 0, onChange } = this.props;
+    const { slideIndex = 0, onChange, onNextClick } = this.props;
     if (this.canSlideRight) {
       this.setState({ deltaX: 0, animation: true }, () =>
         onChange?.(slideIndex + 1)
       );
+      onNextClick?.();
     }
   };
 
@@ -427,6 +437,7 @@ class BaseGallery extends React.Component<
     return (
       <div
         {...restProps}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames(
           getClassName("Gallery", platform),
           `Gallery--${align}`,
@@ -474,6 +485,7 @@ class BaseGallery extends React.Component<
               children,
               (_item: React.ReactNode, index: number) => (
                 <div
+                  // eslint-disable-next-line vkui/no-object-expression-in-arguments
                   vkuiClass={classNames("Gallery__bullet", {
                     "Gallery__bullet--active": index === slideIndex,
                   })}