@vkontakte/vkui 4.22.1 → 4.25.0

package/src/components/Gallery/Readme.md

@@ -7,44 +7,40 @@ const [showArrows, setShowArrows] = useState(true);
   <Panel nav="gallery">
     <PanelHeader>Gallery</PanelHeader>
     <Group header={<Header mode="secondary">Sticks right</Header>}>
-      <Gallery
-        slideWidth="90%"
-        bullets="dark"
-      >
-        <div style={{ backgroundColor: 'var(--destructive)' }} />
-        <img src="https://picsum.photos/1024/640" style={{ display: 'block'}} />
-        <div style={{ backgroundColor: 'var(--accent)' }} />
+      <Gallery slideWidth="90%" bullets="dark">
+        <div style={{ backgroundColor: "var(--destructive)" }} />
+        <img
+          src="https://picsum.photos/1024/640"
+          style={{ display: "block" }}
+        />
+        <div style={{ backgroundColor: "var(--accent)" }} />
       </Gallery>
     </Group>
     <Group header={<Header mode="secondary">Sticks left</Header>}>
-      <Gallery
-        slideWidth="90%"
-        align="right"
-      >
-        <div style={{ height: 150, backgroundColor: 'var(--destructive)' }} />
-        <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
-        <div style={{ backgroundColor: 'var(--accent)' }} />
+      <Gallery slideWidth="90%" align="right">
+        <div style={{ height: 150, backgroundColor: "var(--destructive)" }} />
+        <div style={{ backgroundColor: "var(--button_commerce_background)" }} />
+        <div style={{ backgroundColor: "var(--accent)" }} />
       </Gallery>
     </Group>
     <Group header={<Header mode="secondary">Centered</Header>}>
-      <Gallery
-        slideWidth="90%"
-        align="center"
-      >
-        <div style={{ backgroundColor: 'var(--destructive)' }} />
-        <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
-        <div style={{ backgroundColor: 'var(--accent)' }} />
+      <Gallery slideWidth="90%" align="center">
+        <div style={{ backgroundColor: "var(--destructive)" }} />
+        <div style={{ backgroundColor: "var(--button_commerce_background)" }} />
+        <div style={{ backgroundColor: "var(--accent)" }} />
       </Gallery>
     </Group>
     <Group header={<Header mode="secondary">Custom width</Header>}>
-      <Gallery
-        slideWidth="custom"
-        style={{ height: 150 }}
-      >
-        <div style={{ width: 200, backgroundColor: 'var(--destructive)' }} />
-        <div style={{ width: 120, backgroundColor: 'var(--button_commerce_background)' }} />
-        <div style={{ width: 70, backgroundColor: 'var(--accent)' }} />
-        <div style={{ width: 220, backgroundColor: 'var(--icon_secondary)' }} />
+      <Gallery slideWidth="custom" style={{ height: 150 }}>
+        <div style={{ width: 200, backgroundColor: "var(--destructive)" }} />
+        <div
+          style={{
+            width: 120,
+            backgroundColor: "var(--button_commerce_background)",
+          }}
+        />
+        <div style={{ width: 70, backgroundColor: "var(--accent)" }} />
+        <div style={{ width: 220, backgroundColor: "var(--icon_secondary)" }} />
       </Gallery>
     </Group>
     <Group header={<Header mode="secondary">Arrows</Header>}>
@@ -54,9 +50,9 @@ const [showArrows, setShowArrows] = useState(true);
         bullets="dark"
         showArrows
       >
-        <div style={{ backgroundColor: 'var(--destructive)' }} />
-        <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
-        <div style={{ backgroundColor: 'var(--accent)' }} />
+        <div style={{ backgroundColor: "var(--destructive)" }} />
+        <div style={{ backgroundColor: "var(--button_commerce_background)" }} />
+        <div style={{ backgroundColor: "var(--accent)" }} />
       </Gallery>
     </Group>
     <Group header={<Header mode="secondary">Controled</Header>}>
@@ -69,25 +65,35 @@ const [showArrows, setShowArrows] = useState(true);
         isDraggable={isDraggable}
         showArrows={showArrows}
       >
-        <div style={{ backgroundColor: 'var(--destructive)' }} />
-        <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
-        <div style={{ backgroundColor: 'var(--accent)' }} />
+        <div style={{ backgroundColor: "var(--destructive)" }} />
+        <div style={{ backgroundColor: "var(--button_commerce_background)" }} />
+        <div style={{ backgroundColor: "var(--accent)" }} />
       </Gallery>
 
       <FormItem>
-        <Checkbox checked={isDraggable} onChange={e => setIsDraggable(e.target.checked)}>
+        <Checkbox
+          checked={isDraggable}
+          onChange={(e) => setIsDraggable(e.target.checked)}
+        >
           isDraggable
         </Checkbox>
-        <Checkbox checked={showArrows} onChange={e => setShowArrows(e.target.checked)}>
+        <Checkbox
+          checked={showArrows}
+          onChange={(e) => setShowArrows(e.target.checked)}
+        >
           showArrows
         </Checkbox>
       </FormItem>
       <FormItem>
-        <Button size='l' stretched onClick={() => setSlideIndex((slideIndex + 1) % 3)}>
+        <Button
+          size="l"
+          stretched
+          onClick={() => setSlideIndex((slideIndex + 1) % 3)}
+        >
           Next slide
         </Button>
       </FormItem>
     </Group>
   </Panel>
-</View>
+</View>;
 ```

package/src/components/Gradient/Gradient.css

@@ -1,15 +1,83 @@
 .Gradient--md-tint.Gradient--to-top {
-  background: linear-gradient(to top, #f5f5f5, rgba(245, 245, 245, .98), rgba(245, 245, 245, .94), rgba(245, 245, 245, .88), rgba(245, 245, 245, .8), rgba(245, 245, 245, .71), rgba(245, 245, 245, .61), rgba(245, 245, 245, .5), rgba(245, 245, 245, .39), rgba(245, 245, 245, .29), rgba(245, 245, 245, .2), rgba(245, 245, 245, .12), rgba(245, 245, 245, .06), rgba(245, 245, 245, .02), rgba(245, 245, 245, 0));
+  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)
+  );
 }
 
 .Gradient--md-tint.Gradient--to-bottom {
-  background: linear-gradient(to bottom, #f5f5f5, rgba(245, 245, 245, .98), rgba(245, 245, 245, .94), rgba(245, 245, 245, .88), rgba(245, 245, 245, .8), rgba(245, 245, 245, .71), rgba(245, 245, 245, .61), rgba(245, 245, 245, .5), rgba(245, 245, 245, .39), rgba(245, 245, 245, .29), rgba(245, 245, 245, .2), rgba(245, 245, 245, .12), rgba(245, 245, 245, .06), rgba(245, 245, 245, .02), rgba(245, 245, 245, 0));
+  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)
+  );
 }
 
-body[scheme='space_gray'] .Gradient--md-tint.Gradient--to-top {
-  background: linear-gradient(to top, #232324, rgba(35, 35, 36, .98), rgba(35, 35, 36, .94), rgba(35, 35, 36, .88), rgba(35, 35, 36, .8), rgba(35, 35, 36, .71), rgba(35, 35, 36, .61), rgba(35, 35, 36, .5), rgba(35, 35, 36, .39), rgba(35, 35, 36, .29), rgba(35, 35, 36, .2), rgba(35, 35, 36, .12), rgba(35, 35, 36, .06), rgba(35, 35, 36, .02), rgba(35, 35, 36, 0));
+body[scheme="space_gray"] .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)
+  );
 }
 
-body[scheme='space_gray'] .Gradient--md-tint.Gradient--to-bottom {
-  background: linear-gradient(to bottom, #232324, rgba(35, 35, 36, .98), rgba(35, 35, 36, .94), rgba(35, 35, 36, .88), rgba(35, 35, 36, .8), rgba(35, 35, 36, .71), rgba(35, 35, 36, .61), rgba(35, 35, 36, .5), rgba(35, 35, 36, .39), rgba(35, 35, 36, .29), rgba(35, 35, 36, .2), rgba(35, 35, 36, .12), rgba(35, 35, 36, .06), rgba(35, 35, 36, .02), rgba(35, 35, 36, 0));
+body[scheme="space_gray"] .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)
+  );
 }

package/src/components/Gradient/Gradient.tsx

@@ -1,18 +1,27 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import './Gradient.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import "./Gradient.css";
 
 export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
-  mode?: 'tint' | 'white' | 'black';
-  to?: 'top' | 'bottom';
+  mode?: "tint" | "white" | "black";
+  to?: "top" | "bottom";
 }
 
-const Gradient: React.FunctionComponent<GradientProps> = ({ mode, children, to, ...restProps }: GradientProps) => {
+const Gradient: React.FunctionComponent<GradientProps> = ({
+  mode,
+  children,
+  to,
+  ...restProps
+}: GradientProps) => {
   return (
     <div
       role="presentation"
       {...restProps}
-      vkuiClass={classNames('Gradient', `Gradient--md-${mode}`, `Gradient--to-${to}`)}
+      vkuiClass={classNames(
+        "Gradient",
+        `Gradient--md-${mode}`,
+        `Gradient--to-${to}`
+      )}
     >
       {children}
     </div>
@@ -20,8 +29,9 @@ const Gradient: React.FunctionComponent<GradientProps> = ({ mode, children, to,
 };
 
 Gradient.defaultProps = {
-  mode: 'tint',
-  to: 'top',
+  mode: "tint",
+  to: "top",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Gradient;

package/src/components/Gradient/Readme.md

@@ -5,32 +5,51 @@ const Example = ({ sizeX }) => {
       <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
+            style={{
+              margin: sizeX === SizeType.REGULAR ? "-7px -7px 0 -7px" : 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              textAlign: "center",
+              padding: 32,
+            }}
+          >
             <Avatar size={96} />
-            <Title style={{ marginBottom: 8, marginTop: 20 }} level="2" weight="medium">Алексей Мазелюк</Title>
-            <Text style={{ marginBottom: 24, color: 'var(--text_secondary)' }}>Учащийся</Text>
-            <Button size="m" mode="secondary">Редактировать</Button>
+            <Title
+              style={{ marginBottom: 8, marginTop: 20 }}
+              level="2"
+              weight="medium"
+            >
+              Алексей Мазелюк
+            </Title>
+            <Text style={{ marginBottom: 24, color: "var(--text_secondary)" }}>
+              Учащийся
+            </Text>
+            <Button size="m" mode="secondary">
+              Редактировать
+            </Button>
           </Gradient>
           <Group mode="plain">
             <Header>Учебные заведения и классы</Header>
-            <SimpleCell before={<Icon28SchoolOutline />} description="Екатеринбург">Школа №180</SimpleCell>
-            <CellButton before={<Icon28AddOutline />}>Добавить учебное заведение</CellButton>
+            <SimpleCell
+              before={<Icon28SchoolOutline />}
+              description="Екатеринбург"
+            >
+              Школа №180
+            </SimpleCell>
+            <CellButton before={<Icon28AddOutline />}>
+              Добавить учебное заведение
+            </CellButton>
           </Group>
         </Group>
       </Panel>
     </View>
-  )
-}
+  );
+};
 
 const ExampleWithAdaptivity = withAdaptivity(Example, { sizeX: true });
 
-<ExampleWithAdaptivity />
+<ExampleWithAdaptivity />;
 ```

package/src/components/GridAvatar/GridAvatar.tsx

@@ -1,42 +1,41 @@
-import * as React from 'react';
-import Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from '../Avatar/Avatar';
-import { classNames } from '../../lib/classNames';
-import { warnOnce } from '../../lib/warnOnce';
-import { HasRootRef } from '../../types';
-import './GridAvatar.css';
+import * as React from "react";
+import Avatar, { AvatarProps } from "../Avatar/Avatar";
+import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
+import { HasRootRef } from "../../types";
+import "./GridAvatar.css";
 
-export interface GridAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+export interface GridAvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement>,
+    Pick<AvatarProps, "size" | "shadow" | "badge"> {
   src?: string[];
-  size?: number;
-  shadow?: boolean;
 }
 
 const MIN_GRID_LENGTH = 1;
 const MAX_GRID_LENGTH = 4;
 
-const warn = warnOnce('GridAvatar');
+const warn = warnOnce("GridAvatar");
 
 export const GridAvatar: React.FC<GridAvatarProps> = ({
   src = [],
-  size = AVATAR_DEFAULT_SIZE,
-  shadow = AVATAR_DEFAULT_SHADOW,
   ...restProps
 }: GridAvatarProps) => {
-  if (process.env.NODE_ENV === 'development' && src.length > MAX_GRID_LENGTH) {
-    warn(`Размер пропа src (${src.length}) больше максимального (${MAX_GRID_LENGTH})`);
+  if (process.env.NODE_ENV === "development" && src.length > MAX_GRID_LENGTH) {
+    warn(
+      `Размер пропа src (${src.length}) больше максимального (${MAX_GRID_LENGTH})`
+    );
   }
 
-  const count = Math.max(MIN_GRID_LENGTH, Math.min(MAX_GRID_LENGTH, src.length));
+  const count = Math.max(
+    MIN_GRID_LENGTH,
+    Math.min(MAX_GRID_LENGTH, src.length)
+  );
 
   return (
     <Avatar
       {...restProps}
-      vkuiClass={classNames(
-        'GridAvatar',
-        `GridAvatar--images-${count}`,
-      )}
-      shadow={shadow}
-      size={size}
+      vkuiClass={classNames("GridAvatar", `GridAvatar--images-${count}`)}
     >
       <div vkuiClass="GridAvatar__in">
         {src.slice(0, MAX_GRID_LENGTH).map((src, i) => {
@@ -45,8 +44,7 @@ export const GridAvatar: React.FC<GridAvatarProps> = ({
               key={i}
               vkuiClass="GridAvatar__item"
               style={{ backgroundImage: `url(${src})` }}
-            >
-            </div>
+            ></div>
           );
         })}
       </div>

package/src/components/GridAvatar/Readme.md

@@ -1,12 +1,24 @@
 Отображение нескольких аватаров в сетке от 1 до 4 элементов.
 
-
 ```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ display: 'flex', padding: 12, gap: 8, flexFlow: 'row wrap' }}>
+<div style={{ display: "flex", padding: 12, gap: 8, flexFlow: "row wrap" }}>
   <GridAvatar />
-  <GridAvatar src={[getAvatarUrl('user_ji')]} />
-  <GridAvatar src={[getAvatarUrl('user_wayshev'), getAvatarUrl('user_mm')]} />
-  <GridAvatar src={[getAvatarUrl('user_arthurstam'), getAvatarUrl('user_xyz'), getAvatarUrl('user_ox')]} />
-  <GridAvatar src={[getAvatarUrl('user_ilyagrshn'), getAvatarUrl('user_tc'), getAvatarUrl('user_lihachyov'), getAvatarUrl('user_va')]} />
+  <GridAvatar src={[getAvatarUrl("user_ji")]} />
+  <GridAvatar src={[getAvatarUrl("user_wayshev"), getAvatarUrl("user_mm")]} />
+  <GridAvatar
+    src={[
+      getAvatarUrl("user_arthurstam"),
+      getAvatarUrl("user_xyz"),
+      getAvatarUrl("user_ox"),
+    ]}
+  />
+  <GridAvatar
+    src={[
+      getAvatarUrl("user_ilyagrshn"),
+      getAvatarUrl("user_tc"),
+      getAvatarUrl("user_lihachyov"),
+      getAvatarUrl("user_va"),
+    ]}
+  />
 </div>
 ```

package/src/components/Group/Group.tsx

@@ -1,16 +1,23 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { HasRootRef } from '../../types';
-import { usePlatform } from '../../hooks/usePlatform';
-import Separator from '../Separator/Separator';
-import { hasReactNode } from '../../lib/utils';
-import Caption from '../Typography/Caption/Caption';
-import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
-import ModalRootContext from '../ModalRoot/ModalRootContext';
-import './Group.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import Separator from "../Separator/Separator";
+import { hasReactNode } from "../../lib/utils";
+import Caption from "../Typography/Caption/Caption";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  SizeType,
+} from "../../hoc/withAdaptivity";
+import ModalRootContext from "../ModalRoot/ModalRootContext";
+import "./Group.css";
 
-export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement>, AdaptivityProps {
+export interface GroupProps
+  extends HasRootRef<HTMLElement>,
+    React.HTMLAttributes<HTMLElement>,
+    AdaptivityProps {
   header?: React.ReactNode;
   description?: React.ReactNode;
   /**
@@ -18,25 +25,35 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
     hide – разделитель всегда спрятан,
     auto – разделитель рисуется автоматически между соседними группами.
    */
-  separator?: 'show' | 'hide' | 'auto';
+  separator?: "show" | "hide" | "auto";
   /**
    * Режим отображения. Если установлен 'card', выглядит как карточка c
    * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.
    * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах
    * по умолчанию 'plain'.
    */
-  mode?: 'plain' | 'card';
+  mode?: "plain" | "card";
 }
 
 const Group: React.FC<GroupProps> = (props: GroupProps) => {
-  const { header, description, children, separator, getRootRef, mode, sizeX, ...restProps } = props;
+  const {
+    header,
+    description,
+    children,
+    separator,
+    getRootRef,
+    mode,
+    sizeX,
+    ...restProps
+  } = props;
   const { isInsideModal } = React.useContext(ModalRootContext);
   const platform = usePlatform();
 
-  let computedMode: GroupProps['mode'] = mode;
+  let computedMode: GroupProps["mode"] = mode;
 
   if (!mode) {
-    computedMode = sizeX === SizeType.COMPACT || isInsideModal ? 'plain' : 'card';
+    computedMode =
+      sizeX === SizeType.COMPACT || isInsideModal ? "plain" : "card";
   }
 
   return (
@@ -44,23 +61,27 @@ const Group: React.FC<GroupProps> = (props: GroupProps) => {
       {...restProps}
       ref={getRootRef}
       vkuiClass={classNames(
-        getClassName('Group', platform),
+        getClassName("Group", platform),
         `Group--sizeX-${sizeX}`,
-        `Group--${computedMode}`,
+        `Group--${computedMode}`
       )}
     >
       <div vkuiClass="Group__inner">
         {header}
         {children}
-        {hasReactNode(description) && <Caption vkuiClass="Group__description" weight="regular" level="1">{description}</Caption>}
+        {hasReactNode(description) && (
+          <Caption vkuiClass="Group__description" weight="regular" level="1">
+            {description}
+          </Caption>
+        )}
       </div>
 
-      {separator !== 'hide' && (
+      {separator !== "hide" && (
         <Separator
-          vkuiClass={classNames('Group__separator', {
-            'Group__separator--force': separator === 'show',
+          vkuiClass={classNames("Group__separator", {
+            "Group__separator--force": separator === "show",
           })}
-          expanded={computedMode === 'card'}
+          expanded={computedMode === "card"}
         />
       )}
     </section>
@@ -68,7 +89,8 @@ const Group: React.FC<GroupProps> = (props: GroupProps) => {
 };
 
 Group.defaultProps = {
-  separator: 'auto',
+  separator: "auto",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Group, { sizeX: true });