@vkontakte/vkui 4.33.2 → 4.34.0

package/src/components/Dropdown/Readme.md

@@ -1,6 +1,6 @@
 > **Важно**
 >
-> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](https://vkcom.github.io/VKUI/#/Unstable).
 
 Может открываться при клике или наведении мыши на `children`. Ограничений по содержимому нет. Предназначен для
 отрисовки части интерфейса в выпадающем окне.

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -6,9 +6,7 @@ import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
 import "./DropdownIcon.css";
 
-export const DropdownIcon: React.FC<React.HTMLAttributes<HTMLElement>> = (
-  props
-) => {
+export const DropdownIcon = (props: React.HTMLAttributes<HTMLDivElement>) => {
   const platform = usePlatform();
   const { sizeY } = useAdaptivity();
 

package/src/components/Epic/Epic.tsx

@@ -9,6 +9,7 @@ import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
+import { SMALL_TABLET_SIZE } from "../AdaptivityProvider/AdaptivityProvider";
 import "./Epic.css";
 
 export interface EpicProps
@@ -20,12 +21,15 @@ export interface EpicProps
 
 const warn = warnOnce("Epic");
 
-const EpicComponent: React.FC<EpicProps & AdaptivityContextInterface> = (
-  props
-) => {
+const EpicComponent = ({
+  activeStory,
+  tabbar,
+  children,
+  viewWidth,
+  ...restProps
+}: EpicProps & AdaptivityContextInterface) => {
   const platform = usePlatform();
   const scroll = React.useRef<{ [key: string]: number }>({}).current;
-  const { activeStory, tabbar, children, viewWidth, ...restProps } = props;
 
   if (
     process.env.NODE_ENV === "development" &&
@@ -33,7 +37,7 @@ const EpicComponent: React.FC<EpicProps & AdaptivityContextInterface> = (
     viewWidth < ViewWidth.SMALL_TABLET
   ) {
     warn(
-      `Не рекомендуется использовать Epic без Tabbar при ширине окна меньше ${ViewWidth.SMALL_TABLET}px`
+      `Не рекомендуется использовать Epic без Tabbar при ширине окна меньше ${SMALL_TABLET_SIZE}px`
     );
   }
   const story =

package/src/components/Epic/ScrollSaver.tsx

@@ -5,16 +5,17 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 export interface ScrollSaverProps {
   initialScroll?: number;
   saveScroll: (scroll: number) => any;
+  children?: React.ReactNode;
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ScrollSaver
  */
-export const ScrollSaver: React.FC<ScrollSaverProps> = ({
+export const ScrollSaver = ({
   children,
   initialScroll,
   saveScroll,
-}) => {
+}: ScrollSaverProps) => {
   const { getScroll, scrollTo } = React.useContext(ScrollContext);
   useIsomorphicLayoutEffect(() => {
     if (typeof initialScroll === "number") {

package/src/components/File/File.tsx

@@ -19,7 +19,7 @@ export interface FileProps
 /**
  * @see https://vkcom.github.io/VKUI/#/File
  */
-export const File: React.FC<FileProps> = ({
+export const File = ({
   children = "Выберите файл",
   align = "left",
   // TODO: v5.0.0 удалить controlSize
@@ -28,13 +28,15 @@ export const File: React.FC<FileProps> = ({
   mode,
   stretched,
   before,
+  after,
+  loading,
   className,
   style,
   getRef,
   getRootRef,
   appearance,
   ...restProps
-}) => {
+}: FileProps) => {
   const platform = usePlatform();
 
   return (
@@ -49,6 +51,8 @@ export const File: React.FC<FileProps> = ({
       // TODO: v5.0.0 удалить controlSize
       size={size ?? controlSize}
       before={before}
+      after={after}
+      loading={loading}
       style={style}
       getRootRef={getRootRef}
       disabled={restProps.disabled}

package/src/components/FixedLayout/FixedLayout.css

@@ -48,3 +48,13 @@
 .PanelHeader ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
   top: calc(var(--panelheader_height) + var(--safe-area-inset-top));
 }
+
+.PanelHeader--ios ~ .FixedLayout--top,
+.PanelHeader--ios ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
+  top: calc(var(--panelheader_height_ios) + var(--safe-area-inset-top));
+}
+
+.PanelHeader--vkcom ~ .FixedLayout--top,
+.PanelHeader--vkcom ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
+  top: calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top));
+}

package/src/components/FixedLayout/FixedLayout.tsx

@@ -31,7 +31,7 @@ export interface FixedLayoutState {
 /**
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */
-export const FixedLayout: React.FC<FixedLayoutProps> = ({
+export const FixedLayout = ({
   children,
   style,
   vertical,

package/src/components/FocusTrap/FocusTrap.tsx

@@ -27,7 +27,7 @@ export interface FocusTrapProps
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
  */
-export const FocusTrap: React.FC<FocusTrapProps> = ({
+export const FocusTrap = ({
   Component = "div",
   onClose = noop,
   restoreFocus = true,
@@ -35,7 +35,7 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
   getRootRef,
   children,
   ...restProps
-}) => {
+}: FocusTrapProps) => {
   const ref = useExternRef<HTMLElement>(getRootRef);
 
   const { document, window } = useDOM();

package/src/components/Footer/Footer.tsx

@@ -8,10 +8,7 @@ export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
  */
-export const Footer: React.FC<FooterProps> = ({
-  children,
-  ...restProps
-}: FooterProps) => {
+export const Footer = ({ children, ...restProps }: FooterProps) => {
   return (
     <Caption Component="footer" {...restProps} vkuiClass="Footer">
       {children}

package/src/components/FormField/FormField.tsx

@@ -19,7 +19,7 @@ export interface FormFieldProps {
    * Рекомендации:
    *
    * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
-   * - Используйте [IconButton](#/IconButton), если вам нужна кликабельная иконка.
+   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
    */
   before?: React.ReactNode;
   /**
@@ -28,7 +28,7 @@ export interface FormFieldProps {
    * Рекомендации:
    *
    * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
-   * - Используйте [IconButton](#/IconButton), если вам нужна кликабельная иконка.
+   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
    */
   after?: React.ReactNode;
   mode?: keyof typeof FormFieldMode;
@@ -45,7 +45,7 @@ interface FormFieldOwnProps
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */
-export const FormField: React.FC<FormFieldOwnProps> = ({
+export const FormField = ({
   Component = "div",
   children,
   getRootRef,

package/src/components/FormField/Readme.md

@@ -1,4 +1,4 @@
-Компонент-оболочка для элементов форм ([Input](#/Input), [Select](#/Select), [Textarea](#/Textarea) и другие).
+Компонент-оболочка для элементов форм ([Input](https://vkcom.github.io/VKUI/#/Input), [Select](https://vkcom.github.io/VKUI/#/Select), [Textarea](https://vkcom.github.io/VKUI/#/Textarea) и другие).
 
 ```jsx { "props": { "layout": false, "iframe": false } }
 const Example = () => {

package/src/components/FormItem/FormItem.tsx

@@ -28,7 +28,7 @@ export interface FormItemProps
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
-export const FormItem: React.FC<FormItemProps> = ({
+export const FormItem = ({
   children,
   top,
   bottom,

package/src/components/FormLayout/FormLayout.tsx

@@ -13,17 +13,13 @@ export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayout
  */
-export const FormLayout: React.FC<FormLayoutProps> = (
-  props: FormLayoutProps
-) => {
-  const {
-    children,
-    Component = "form",
-    getRef,
-    onSubmit = preventDefault,
-    ...restProps
-  } = props;
-
+export const FormLayout = ({
+  children,
+  Component = "form",
+  getRef,
+  onSubmit = preventDefault,
+  ...restProps
+}: FormLayoutProps) => {
   const platform = usePlatform();
   return (
     <Component

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -23,7 +23,7 @@ export interface FormLayoutGroupProps
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
  */
-export const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
+export const FormLayoutGroup = ({
   children,
   mode = "vertical",
   removable,

package/src/components/FormStatus/FormStatus.tsx

@@ -15,7 +15,7 @@ export interface FormStatusProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/FormStatus
  */
-export const FormStatus: React.FunctionComponent<FormStatusProps> = ({
+export const FormStatus = ({
   mode,
   header,
   children,

package/src/components/Gallery/Gallery.tsx

@@ -31,7 +31,7 @@ export const Gallery = ({
   const childCount = slides.length;
 
   const handleChange: GalleryProps["onChange"] = React.useCallback(
-    (current) => {
+    (current: number) => {
       if (current === slideIndex) {
         return;
       }

package/src/components/Gradient/Gradient.css

@@ -1,85 +1,23 @@
 .Gradient--md-tint.Gradient--to-top {
-  background: linear-gradient(
-    to top,
-    #f5f5f5,
-    rgba(245, 245, 245, 0.98),
-    rgba(245, 245, 245, 0.94),
-    rgba(245, 245, 245, 0.88),
-    rgba(245, 245, 245, 0.8),
-    rgba(245, 245, 245, 0.71),
-    rgba(245, 245, 245, 0.61),
-    rgba(245, 245, 245, 0.5),
-    rgba(245, 245, 245, 0.39),
-    rgba(245, 245, 245, 0.29),
-    rgba(245, 245, 245, 0.2),
-    rgba(245, 245, 245, 0.12),
-    rgba(245, 245, 245, 0.06),
-    rgba(245, 245, 245, 0.02),
-    rgba(245, 245, 245, 0)
-  );
+  background: linear-gradient(to bottom, var(--vkui--gradient_tint));
 }
 
 .Gradient--md-tint.Gradient--to-bottom {
-  background: linear-gradient(
-    to bottom,
-    #f5f5f5,
-    rgba(245, 245, 245, 0.98),
-    rgba(245, 245, 245, 0.94),
-    rgba(245, 245, 245, 0.88),
-    rgba(245, 245, 245, 0.8),
-    rgba(245, 245, 245, 0.71),
-    rgba(245, 245, 245, 0.61),
-    rgba(245, 245, 245, 0.5),
-    rgba(245, 245, 245, 0.39),
-    rgba(245, 245, 245, 0.29),
-    rgba(245, 245, 245, 0.2),
-    rgba(245, 245, 245, 0.12),
-    rgba(245, 245, 245, 0.06),
-    rgba(245, 245, 245, 0.02),
-    rgba(245, 245, 245, 0)
-  );
+  background: linear-gradient(to top, var(--vkui--gradient_tint));
 }
 
-body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-top,
-body[scheme="vkcom_dark"] .Gradient--md-tint.Gradient--to-top {
-  background: linear-gradient(
-    to top,
-    #232324,
-    rgba(35, 35, 36, 0.98),
-    rgba(35, 35, 36, 0.94),
-    rgba(35, 35, 36, 0.88),
-    rgba(35, 35, 36, 0.8),
-    rgba(35, 35, 36, 0.71),
-    rgba(35, 35, 36, 0.61),
-    rgba(35, 35, 36, 0.5),
-    rgba(35, 35, 36, 0.39),
-    rgba(35, 35, 36, 0.29),
-    rgba(35, 35, 36, 0.2),
-    rgba(35, 35, 36, 0.12),
-    rgba(35, 35, 36, 0.06),
-    rgba(35, 35, 36, 0.02),
-    rgba(35, 35, 36, 0)
-  );
+.Gradient--md-white.Gradient--to-top {
+  background: linear-gradient(to bottom, var(--vkui--gradient_white));
 }
 
-body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-bottom,
-body[scheme="vkcom_dark"] .Gradient--md-tint.Gradient--to-bottom {
-  background: linear-gradient(
-    to bottom,
-    #232324,
-    rgba(35, 35, 36, 0.98),
-    rgba(35, 35, 36, 0.94),
-    rgba(35, 35, 36, 0.88),
-    rgba(35, 35, 36, 0.8),
-    rgba(35, 35, 36, 0.71),
-    rgba(35, 35, 36, 0.61),
-    rgba(35, 35, 36, 0.5),
-    rgba(35, 35, 36, 0.39),
-    rgba(35, 35, 36, 0.29),
-    rgba(35, 35, 36, 0.2),
-    rgba(35, 35, 36, 0.12),
-    rgba(35, 35, 36, 0.06),
-    rgba(35, 35, 36, 0.02),
-    rgba(35, 35, 36, 0)
-  );
+.Gradient--md-white.Gradient--to-bottom {
+  background: linear-gradient(to top, var(--vkui--gradient_white));
+}
+
+.Gradient--md-black.Gradient--to-top {
+  background: linear-gradient(to bottom, var(--vkui--gradient_black));
+}
+
+.Gradient--md-black.Gradient--to-bottom {
+  background: linear-gradient(to top, var(--vkui--gradient_black));
 }

package/src/components/Gradient/Gradient.tsx

@@ -3,19 +3,25 @@ import { classNames } from "../../lib/classNames";
 import "./Gradient.css";
 
 export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Тип градиента
+   */
   mode?: "tint" | "white" | "black";
+  /**
+   * Направление градиента
+   */
   to?: "top" | "bottom";
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Gradient
  */
-export const Gradient: React.FC<GradientProps> = ({
+export const Gradient = ({
   mode = "tint",
   children,
   to = "top",
   ...restProps
-}) => {
+}: GradientProps) => {
   return (
     <div
       role="presentation"

package/src/components/Gradient/Readme.md

@@ -1,21 +1,30 @@
 ```jsx
-const Example = ({ sizeX }) => {
+import { Icon16Done, Icon16Down, Icon16Up } from "@vkontakte/icons";
+
+const ExampleWithAdaptivity = () => {
+  const { sizeX } = useAdaptivity();
+  const [direction, setDirection] = React.useState("top");
+
+  const styles = {
+    margin: sizeX === SizeType.REGULAR ? "-7px -7px 0 -7px" : 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    padding: 32,
+  };
+
+  if (direction === "bottom") {
+    styles.borderRadius = "inherit";
+  }
+
   return (
     <View activePanel="gradient">
       <Panel id="gradient">
         <PanelHeader>Gradient</PanelHeader>
         <Group>
-          <Gradient
-            style={{
-              margin: sizeX === SizeType.REGULAR ? "-7px -7px 0 -7px" : 0,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              textAlign: "center",
-              padding: 32,
-            }}
-          >
+          <Gradient mode="tint" to={direction} style={styles}>
             <Avatar size={96} />
             <Title
               style={{ marginBottom: 8, marginTop: 20 }}
@@ -24,7 +33,12 @@ const Example = ({ sizeX }) => {
             >
               Алексей Мазелюк
             </Title>
-            <Text style={{ marginBottom: 24, color: "var(--text_secondary)" }}>
+            <Text
+              style={{
+                marginBottom: 24,
+                color: "var(--vkui--color_text_secondary)",
+              }}
+            >
               Учащийся
             </Text>
             <Button size="m" mode="secondary">
@@ -44,12 +58,36 @@ const Example = ({ sizeX }) => {
             </CellButton>
           </Group>
         </Group>
+        <Group>
+          <Group
+            mode="plain"
+            header={<Header mode="secondary">Направление to="bottom"</Header>}
+          >
+            <Gradient to="bottom">
+              <div style={{ height: 150 }} />
+            </Gradient>
+          </Group>
+          <Group
+            mode="plain"
+            header={<Header mode="secondary">Тип градиента white</Header>}
+          >
+            <Gradient mode="white">
+              <div style={{ height: 150 }} />
+            </Gradient>
+          </Group>
+          <Group
+            mode="plain"
+            header={<Header mode="secondary">Тип градиента black</Header>}
+          >
+            <Gradient mode="black">
+              <div style={{ height: 150 }} />
+            </Gradient>
+          </Group>
+        </Group>
       </Panel>
     </View>
   );
 };
 
-const ExampleWithAdaptivity = withAdaptivity(Example, { sizeX: true });
-
 <ExampleWithAdaptivity />;
 ```

package/src/components/Group/Group.css

@@ -1,5 +1,5 @@
 .Group {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .Group__inner {
@@ -7,13 +7,14 @@
   padding-bottom: 8px;
 }
 
+/* TODO v5.0.0 Новая адаптивность */
 .Group--sizeX-regular > .Group__inner {
   padding: 8px;
 }
 
 .Group--card > .Group__inner {
-  background: var(--background_content);
-  border-radius: 8px;
+  background: var(--background_content, var(--vkui--color_background_content));
+  border-radius: var(--vkui--size_border_radius--regular);
   position: relative;
 }
 
@@ -29,19 +30,12 @@
   box-shadow: inset 0 0 0 var(--thin-border) var(--input_border);
 }
 
-.Group--plain .Group__inner > .Tabs--default:first-child {
-  margin-top: -8px;
-}
-
-.Group--card > .Group__inner > .Tabs--default:first-child {
-  margin-top: -4px;
-}
-
 .Group--plain > .Group__separator {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
+/* TODO v5.0.0 Новая адаптивность */
 .Group--sizeX-regular.Group--plain > .Group__separator {
   padding: 8px;
 }
@@ -51,6 +45,7 @@
 }
 
 .Group:last-of-type > .Group__separator--force,
+/* TODO v5.0.0 Новая адаптивность */
 .Group--sizeX-regular.Group--card:last-of-type > .Group__separator {
   display: block;
 }
@@ -58,7 +53,7 @@
 .Group__description {
   display: block;
   padding: 4px 16px 16px;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 .Group .Group > .Group__inner,
@@ -82,8 +77,9 @@
   padding: 4px 12px 16px;
 }
 
-/**
- * VKCOM
+/*
+ * CMP:
+ * PanelHeader
  */
 .PanelHeader--vkcom ~ .Group--card:first-of-type,
 .PanelHeader--vkcom + * .Group--card:first-of-type {

package/src/components/Group/Group.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
+import { IOS } from "../../lib/platform";
 import { classNames } from "../../lib/classNames";
 import { HasRootRef } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
+import { Spacing } from "../Spacing/Spacing";
 import { Separator } from "../Separator/Separator";
 import { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
@@ -33,19 +34,19 @@ export interface GroupProps
    * по умолчанию 'plain'.
    */
   mode?: "plain" | "card";
+  children?: React.ReactNode;
 }
 
-const GroupComponent: React.FC<GroupProps> = (props: GroupProps) => {
-  const {
-    header,
-    description,
-    children,
-    separator = "auto",
-    getRootRef,
-    mode,
-    sizeX,
-    ...restProps
-  } = props;
+const GroupComponent = ({
+  header,
+  description,
+  children,
+  separator = "auto",
+  getRootRef,
+  mode,
+  sizeX,
+  ...restProps
+}: GroupProps) => {
   const { isInsideModal } = React.useContext(ModalRootContext);
   const platform = usePlatform();
 
@@ -56,12 +57,29 @@ const GroupComponent: React.FC<GroupProps> = (props: GroupProps) => {
       sizeX === SizeType.COMPACT || isInsideModal ? "plain" : "card";
   }
 
+  let separatorElement = null;
+
+  if (separator !== "hide") {
+    const separatorClassName = classNames(
+      "Group__separator",
+      separator === "show" && "Group__separator--force"
+    );
+    separatorElement =
+      computedMode === "card" ? (
+        <Spacing vkuiClass={separatorClassName} size={16} />
+      ) : (
+        <Separator vkuiClass={separatorClassName} />
+      );
+  }
+
   return (
     <section
       {...restProps}
       ref={getRootRef}
       vkuiClass={classNames(
-        getClassName("Group", platform),
+        "Group",
+        platform === IOS && "Group--ios",
+        // TODO v5.0.0 Новая адаптивность
         `Group--sizeX-${sizeX}`,
         `Group--${computedMode}`
       )}
@@ -73,16 +91,7 @@ const GroupComponent: React.FC<GroupProps> = (props: GroupProps) => {
           <Caption vkuiClass="Group__description">{description}</Caption>
         )}
       </div>
-
-      {separator !== "hide" && (
-        <Separator
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames("Group__separator", {
-            "Group__separator--force": separator === "show",
-          })}
-          expanded={computedMode === "card"}
-        />
-      )}
+      {separatorElement}
     </section>
   );
 };