@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -6,7 +6,7 @@ import {
   CalendarRangeProps,
 } from "../CalendarRange/CalendarRange";
 import { Popper, Placement } from "../Popper/Popper";
-import IconButton from "../IconButton/IconButton";
+import { IconButton } from "../IconButton/IconButton";
 import { HasRootRef } from "../../types";
 import { useDateInput } from "../../hooks/useDateInput";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
@@ -34,6 +34,8 @@ export interface DateRangeInputProps
       | "changeMonthAriaLabel"
       | "changeYearAriaLabel"
       | "changeDayAriaLabel"
+      | "prevMonthIcon"
+      | "nextMonthIcon"
     >,
     HasRootRef<HTMLDivElement> {
   calendarPlacement?: Placement;
@@ -88,6 +90,9 @@ const getInternalValue = (value: CalendarRangeProps["value"]) => {
   return newValue;
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/DateRangeInput
+ */
 export const DateRangeInput: React.FC<DateRangeInputProps> = ({
   shouldDisableDate,
   disableFuture,
@@ -118,6 +123,8 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
   changeEndYearAriaLabel = "Изменить год окончания",
   clearFieldAriaLabel = "Очистить поле",
   showCalendarAriaLabel = "Показать календарь",
+  prevMonthIcon,
+  nextMonthIcon,
   ...props
 }) => {
   const daysStartRef = React.useRef<HTMLSpanElement>(null);
@@ -342,6 +349,8 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
             changeMonthAriaLabel={changeMonthAriaLabel}
             changeYearAriaLabel={changeYearAriaLabel}
             changeDayAriaLabel={changeDayAriaLabel}
+            prevMonthIcon={prevMonthIcon}
+            nextMonthIcon={nextMonthIcon}
           />
         </Popper>
       )}

package/src/components/Div/Div.css

@@ -1,7 +1,4 @@
 .Div {
-  padding: 12px 16px;
-}
-
-.Div--ios {
-  padding: 12px;
+  padding: var(--vkui--size_base_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
 }

package/src/components/Div/Div.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { HasRootRef } from "../../types";
 import "./Div.css";
 
@@ -8,18 +6,16 @@ export interface DivProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {}
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Div
+ */
 export const Div: React.FC<DivProps> = ({
   children,
   getRootRef,
   ...restProps
 }) => {
-  const platform = usePlatform();
   return (
-    <div
-      {...restProps}
-      ref={getRootRef}
-      vkuiClass={getClassName("Div", platform)}
-    >
+    <div {...restProps} ref={getRootRef} vkuiClass="Div">
       {children}
     </div>
   );

package/src/components/Dropdown/Dropdown.tsx

@@ -11,6 +11,9 @@ export interface DropdownProps
   action?: "click" | "hover";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Dropdown
+ */
 export const Dropdown: React.FC<DropdownProps> = ({
   action = "click",
   hideDelay,

package/src/components/Epic/Epic.tsx

@@ -20,7 +20,7 @@ export interface EpicProps
 
 const warn = warnOnce("Epic");
 
-export const Epic: React.FC<EpicProps & AdaptivityContextInterface> = (
+const EpicComponent: React.FC<EpicProps & AdaptivityContextInterface> = (
   props
 ) => {
   const platform = usePlatform();
@@ -57,7 +57,11 @@ export const Epic: React.FC<EpicProps & AdaptivityContextInterface> = (
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Epic, {
+/**
+ * @see https://vkcom.github.io/VKUI/#/Epic
+ */
+export const Epic = withAdaptivity(EpicComponent, {
   viewWidth: true,
 });
+
+Epic.displayName = "Epic";

package/src/components/Epic/Readme.md

@@ -182,7 +182,7 @@ const Example = withAdaptivity(
           >
             <View id="feed" activePanel="feed">
               <Panel id="feed">
-                <PanelHeader left={<PanelHeaderBack />}>Новости</PanelHeader>
+                <PanelHeader before={<PanelHeaderBack />}>Новости</PanelHeader>
                 <Group style={{ height: "1000px" }}>
                   <Placeholder
                     icon={<Icon56NewsfeedOutline width={56} height={56} />}
@@ -192,7 +192,7 @@ const Example = withAdaptivity(
             </View>
             <View id="services" activePanel="services">
               <Panel id="services">
-                <PanelHeader left={<PanelHeaderBack />}>Сервисы</PanelHeader>
+                <PanelHeader before={<PanelHeaderBack />}>Сервисы</PanelHeader>
                 <Group style={{ height: "1000px" }}>
                   <Placeholder
                     icon={<Icon28ServicesOutline width={56} height={56} />}
@@ -202,7 +202,9 @@ const Example = withAdaptivity(
             </View>
             <View id="messages" activePanel="messages">
               <Panel id="messages">
-                <PanelHeader left={<PanelHeaderBack />}>Сообщения</PanelHeader>
+                <PanelHeader before={<PanelHeaderBack />}>
+                  Сообщения
+                </PanelHeader>
                 <Group style={{ height: "1000px" }}>
                   <Placeholder
                     icon={<Icon28MessageOutline width={56} height={56} />}
@@ -212,7 +214,7 @@ const Example = withAdaptivity(
             </View>
             <View id="clips" activePanel="clips">
               <Panel id="clips">
-                <PanelHeader left={<PanelHeaderBack />}>Клипы</PanelHeader>
+                <PanelHeader before={<PanelHeaderBack />}>Клипы</PanelHeader>
                 <Group style={{ height: "1000px" }}>
                   <Placeholder
                     icon={<Icon28ClipOutline width={56} height={56} />}
@@ -222,7 +224,7 @@ const Example = withAdaptivity(
             </View>
             <View id="profile" activePanel="profile">
               <Panel id="profile">
-                <PanelHeader left={<PanelHeaderBack />}>Профиль</PanelHeader>
+                <PanelHeader before={<PanelHeaderBack />}>Профиль</PanelHeader>
                 <Group style={{ height: "1000px" }}>
                   <Placeholder
                     icon={<Icon28UserCircleOutline width={56} height={56} />}

package/src/components/Epic/ScrollSaver.tsx

@@ -7,6 +7,9 @@ export interface ScrollSaverProps {
   saveScroll: (scroll: number) => any;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ScrollSaver
+ */
 export const ScrollSaver: React.FC<ScrollSaverProps> = ({
   children,
   initialScroll,

package/src/components/File/File.tsx

@@ -3,72 +3,63 @@ import { getClassName } from "../../helpers/getClassName";
 import { Button, VKUIButtonProps } from "../Button/Button";
 import { HasRef, HasRootRef } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
-import { useExternRef } from "../../hooks/useExternRef";
-import "./File.css";
+import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
 
 export interface FileProps
-  extends Omit<VKUIButtonProps, "size" | "type">,
-    Omit<React.InputHTMLAttributes<HTMLInputElement>, "onClick" | "type">,
-    Pick<React.HTMLAttributes<HTMLElement>, "onClick">,
+  extends Omit<VKUIButtonProps, "type">,
+    Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">,
     HasRef<HTMLInputElement>,
     HasRootRef<HTMLElement> {
+  /**
+   * @deprecated Будет удалено в 5.0.0. Используйте size
+   */
   controlSize?: VKUIButtonProps["size"];
 }
 
-const File: React.FunctionComponent<FileProps> = (props: FileProps) => {
-  const {
-    children,
-    align,
-    controlSize,
-    mode,
-    stretched,
-    before,
-    className,
-    style,
-    getRef,
-    getRootRef,
-    onClick,
-    appearance,
-    ...restProps
-  } = props;
-
+/**
+ * @see https://vkcom.github.io/VKUI/#/File
+ */
+export const File: React.FC<FileProps> = ({
+  children = "Выберите файл",
+  align = "left",
+  // TODO: v5.0.0 удалить controlSize
+  controlSize,
+  size,
+  mode,
+  stretched,
+  before,
+  className,
+  style,
+  getRef,
+  getRootRef,
+  appearance,
+  ...restProps
+}) => {
   const platform = usePlatform();
-  const inputRef = useExternRef(getRef);
 
   return (
     <Button
+      Component="label"
       align={align}
       vkuiClass={getClassName("File", platform)}
       className={className}
       stretched={stretched}
       mode={mode}
       appearance={appearance}
-      size={controlSize}
+      // TODO: v5.0.0 удалить controlSize
+      size={size ?? controlSize}
       before={before}
       style={style}
       getRootRef={getRootRef}
       disabled={restProps.disabled}
-      type="button"
-      onClick={(e) => {
-        inputRef.current?.click();
-        onClick && onClick(e);
-      }}
     >
-      <input
+      <VisuallyHiddenInput
         {...restProps}
         vkuiClass="File__input"
         type="file"
-        ref={inputRef}
+        getRef={getRef}
       />
       {children}
     </Button>
   );
 };
-
-File.defaultProps = {
-  children: "Выберите файл",
-  align: "left",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default File;

package/src/components/File/Readme.md

@@ -1,5 +1,4 @@
-Надстройка над `<input type="file" />`. Компонент принимает все валидные для этого элемента свойства.
-`File` под капотом использует `Button`. То есть все свойства, применимые к `Button`, применимы и к `File`.
+Надстройка над `<input type="file" />`. Под капотом использует `Button` для визуализации. Принимает все валидные для `<input type="file" />` и `Button` свойства.
 
 ```jsx
 <View activePanel="panel">
@@ -7,12 +6,16 @@
     <PanelHeader>File</PanelHeader>
     <Group>
       <FormItem top="Загрузите ваше фото">
-        <File before={<Icon24Camera />} controlSize="m">
+        <File before={<Icon24Camera role="presentation" />} size="m">
           Открыть галерею
         </File>
       </FormItem>
       <FormItem top="Загрузите документы">
-        <File before={<Icon24Document />} controlSize="l" mode="secondary" />
+        <File
+          before={<Icon24Document role="presentation" />}
+          size="l"
+          mode="secondary"
+        />
       </FormItem>
     </Group>
   </Panel>

package/src/components/FixedLayout/FixedLayout.css

@@ -1,6 +1,16 @@
 .FixedLayout {
   position: fixed;
   box-sizing: border-box;
+  /**
+   * ⚠️ WARNING ⚠️
+   * `left: auto` решает следующие задачи:
+   * 1. При фиксированной ширине компонента позиционирует компонент по центру.
+   * 2. При использовании `SplitLayout` позиционирует компонент с права от `<SplitCol fixed />`.
+   *
+   * Подробности можно почитать здесь https://github.com/VKCOM/VKUI/pull/2472
+   *
+   * Единственное, есть проблема при срабатывании insets в landscape ориентации экрана (https://github.com/VKCOM/VKUI/issues/2422).
+   */
   left: auto;
   z-index: 3;
   padding-left: var(--safe-area-inset-left);
@@ -8,22 +18,33 @@
 }
 
 .FixedLayout--filled {
-  background: var(--background_content);
+  background: var(--background_content, var(--vkui--color_background_content));
 }
 
 .FixedLayout--top {
   width: 100%;
   top: 0;
-  left: 0;
 }
 
 .FixedLayout--bottom {
   width: 100%;
-  left: 0;
   bottom: 0;
   padding-bottom: var(--safe-area-inset-bottom);
 }
 
+/**
+ * CMP:
+ * Epic
+ */
 .Epic .FixedLayout--bottom {
   padding-bottom: calc(var(--tabbar_height) + var(--safe-area-inset-bottom));
 }
+
+/**
+ * CMP:
+ * PanelHeader
+ */
+.PanelHeader ~ .FixedLayout--top,
+.PanelHeader ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
+  top: calc(var(--panelheader_height) + var(--safe-area-inset-top));
+}

package/src/components/FixedLayout/FixedLayout.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
+import { IOS } from "../../lib/platform";
 import { classNames } from "../../lib/classNames";
 import { HasRef, HasRootRef } from "../../types";
 import { SplitColContext } from "../SplitCol/SplitCol";
@@ -28,7 +28,10 @@ export interface FixedLayoutState {
   width: string;
 }
 
-const FixedLayout: React.FC<FixedLayoutProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/FixedLayout
+ */
+export const FixedLayout: React.FC<FixedLayoutProps> = ({
   children,
   style,
   vertical,
@@ -51,12 +54,10 @@ const FixedLayout: React.FC<FixedLayoutProps> = ({
       {...restProps}
       fixed
       ref={getRootRef}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("FixedLayout", platform),
-        {
-          "FixedLayout--filled": filled,
-        },
+        "FixedLayout",
+        platform === IOS && "FixedLayout--ios",
+        filled && "FixedLayout--filled",
         `FixedLayout--${vertical}`
       )}
       style={{ ...style, width }}
@@ -67,6 +68,3 @@ const FixedLayout: React.FC<FixedLayoutProps> = ({
     </TooltipContainer>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default FixedLayout;

package/src/components/FocusTrap/FocusTrap.tsx

@@ -24,6 +24,9 @@ export interface FocusTrapProps
   timeout?: number;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/FocusTrap
+ */
 export const FocusTrap: React.FC<FocusTrapProps> = ({
   Component = "div",
   onClose = noop,

package/src/components/FocusVisible/FocusVisible.css

@@ -5,7 +5,7 @@
   right: 2px;
   bottom: 2px;
   border-radius: inherit;
-  box-shadow: 0 0 0 2px var(--accent);
+  box-shadow: 0 0 0 2px var(--accent, var(--vkui--color_stroke_accent));
   user-select: none;
   pointer-events: none;
   overflow: hidden;

package/src/components/FocusVisible/FocusVisible.tsx

@@ -1,16 +1,16 @@
-import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import "./FocusVisible.css";
 
 export type FocusVisibleMode = "inside" | "outside";
 
-interface FocusVisibleProps {
+export interface FocusVisibleProps {
   mode: FocusVisibleMode;
 }
 
-export const FocusVisible: React.FC<FocusVisibleProps> = ({
-  mode,
-}: FocusVisibleProps) => (
+/**
+ * @see https://vkcom.github.io/VKUI/#/FocusVisible
+ */
+export const FocusVisible = ({ mode }: FocusVisibleProps) => (
   <span
     aria-hidden="true"
     vkuiClass={classNames("FocusVisible", `FocusVisible--${mode}`)}

package/src/components/Footer/Footer.css

@@ -4,5 +4,5 @@
   padding-top: 0;
   padding-bottom: 0;
   text-align: center;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }

package/src/components/Footer/Footer.tsx

@@ -5,6 +5,9 @@ import "./Footer.css";
 
 export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Footer
+ */
 export const Footer: React.FC<FooterProps> = ({
   children,
   ...restProps

package/src/components/FormField/FormField.css

@@ -34,27 +34,29 @@
   color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }
 
-.ChipsInput .FormField__after {
-  z-index: 3;
-}
-
 .FormField__border {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  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;
   transform-origin: left top;
+  border: var(--thin-border) solid transparent;
+}
+
+.FormField--default .FormField__border {
+  border-color: var(--field_border, var(--vkui--color_field_border_alpha));
+  background-color: var(
+    --field_background,
+    var(--vkui--color_field_background)
+  );
 }
 
 .FormItem--error .FormField__border {
-  background: var(
+  background-color: var(
     --field_error_background,
     var(--vkui--color_background_negative_tint)
   );
@@ -71,7 +73,14 @@
   pointer-events: none;
 }
 
-.FormField:not(.FormField--disabled) .FormField__border--hover {
+.FormField--hover .FormField__border {
+  background-color: var(
+    --field_background,
+    var(--vkui--color_field_background)
+  );
+}
+
+.FormField--default.FormField--hover .FormField__border {
   border-color: var(
     --icon_tertiary_alpha,
     var(--vkui--color_field_border_alpha--hover)
@@ -82,11 +91,11 @@
 .FormField *:focus ~ .FormField__border,
 .ChipsInput--focused .FormField__border {
   border-color: var(--accent, var(--vkui--color_stroke_accent));
-  background: var(--field_background, var(--vkui--color_field_background));
 }
 
 /**
  * sizeY COMPACT
+ * TODO v5.0.0 поправить под новую адаптивность
  */
 .FormField--sizeY-compact .FormField__before,
 .FormField--sizeY-compact .FormField__after {
@@ -95,43 +104,41 @@
 }
 
 /**
+ * CMP:
  * ModalCardBase
  */
-
 .ModalCardBase__header + .FormField,
 .ModalCardBase__subheader + .FormField {
   margin-top: 16px;
 }
 
 /**
+ * CMP:
  * Select
  */
-
-.Select--mimicry-plain .FormField__after,
-.Select--mimicry-plain .FormField--sizeY-compact .FormField__after {
-  justify-content: flex-start;
-  min-width: 0;
-  height: auto;
-}
-
-.CustomSelect__open.Select--mimicry:focus .FormField__border {
-  border-color: var(--field_border, var(--vkui--color_field_border_alpha));
-}
-
-.CustomSelect__open:not(.CustomSelect__open--popupDirectionTop):not(.CustomSelect__open--not-adjacent)
-  .FormField__border {
+.Select--pop-down .FormField__border {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.CustomSelect__open.CustomSelect__open--popupDirectionTop:not(.CustomSelect__open--not-adjacent)
-  .FormField__border {
+.Select--pop-up .FormField__border {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-.CustomSelect__open.Select--mimicry-plain.Select--mimicry:focus
-  .FormField__border,
-.FormField:not(.FormField--disabled) .FormField__border--hover {
-  background-color: var(--background_page, var(--vkui--color_field_background));
+/**
+ * CMP:
+ * CalendarHeader
+ */
+.CalendarHeader__picker .FormField__after {
+  min-width: 12px;
+  padding-right: 8px;
+}
+
+/**
+ * CMP:
+ * ChipsInput
+ */
+.ChipsInput .FormField__after {
+  z-index: 3;
 }

package/src/components/FormField/FormField.tsx

@@ -7,6 +7,11 @@ import { hasReactNode } from "../../lib/utils";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./FormField.css";
 
+export const FormFieldMode = {
+  default: "default",
+  plain: "plain",
+} as const;
+
 export interface FormFieldProps {
   /**
    * Добавляет иконку слева.
@@ -26,6 +31,7 @@ export interface FormFieldProps {
    * - Используйте [IconButton](#/IconButton), если вам нужна кликабельная иконка.
    */
   after?: React.ReactNode;
+  mode?: keyof typeof FormFieldMode;
 }
 
 interface FormFieldOwnProps
@@ -36,6 +42,9 @@ interface FormFieldOwnProps
   disabled?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/FormField
+ */
 export const FormField: React.FC<FormFieldOwnProps> = ({
   Component = "div",
   children,
@@ -43,6 +52,7 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
   before,
   after,
   disabled,
+  mode = FormFieldMode.default,
   ...restProps
 }: FormFieldOwnProps) => {
   const platform = usePlatform();
@@ -68,8 +78,10 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
       onMouseLeave={handleMouseLeave}
       vkuiClass={classNames(
         getClassName("FormField", platform),
+        `FormField--${mode}`,
         `FormField--sizeY-${sizeY}`,
-        disabled && "FormField--disabled"
+        disabled && "FormField--disabled",
+        !disabled && hover && "FormField--hover"
       )}
     >
       {hasReactNode(before) && (
@@ -83,13 +95,7 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
           {after}
         </div>
       )}
-      <div
-        role="presentation"
-        vkuiClass={classNames(
-          "FormField__border",
-          !disabled && hover && "FormField__border--hover"
-        )}
-      />
+      <div role="presentation" vkuiClass="FormField__border" />
     </Component>
   );
 };