@vkontakte/vkui 4.33.4 → 4.34.2

package/src/components/Dropdown/Dropdown.tsx

@@ -1,8 +1,5 @@
-import * as React from "react";
 import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
 import { ClickPopper, ClickPopperProps } from "../ClickPopper/ClickPopper";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import "./Dropdown.css";
 
 export interface DropdownProps
@@ -14,14 +11,12 @@ export interface DropdownProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Dropdown
  */
-export const Dropdown: React.FC<DropdownProps> = ({
+export const Dropdown = ({
   action = "click",
   hideDelay,
   showDelay,
   ...popperProps
 }: DropdownProps) => {
-  const platform = usePlatform();
-
   let Component;
   let actionSpecificProps: Partial<DropdownProps> = {};
 
@@ -36,10 +31,6 @@ export const Dropdown: React.FC<DropdownProps> = ({
   }
 
   return (
-    <Component
-      vkuiClass={getClassName("Dropdown", platform)}
-      {...actionSpecificProps}
-      {...popperProps}
-    />
+    <Component vkuiClass="Dropdown" {...actionSpecificProps} {...popperProps} />
   );
 };

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

@@ -21,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" &&

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
@@ -36,7 +36,7 @@ export const File: React.FC<FileProps> = ({
   getRootRef,
   appearance,
   ...restProps
-}) => {
+}: FileProps) => {
   const platform = usePlatform();
 
   return (

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

@@ -2,32 +2,42 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 1px;
   box-sizing: border-box;
-  border-radius: var(--vkui--size_border_radius--regular);
+  min-height: var(--vkui--size_field_height--regular);
 }
 
-.FormField > * {
-  border-radius: inherit;
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.FormField--sizeY-compact {
+  min-height: var(--vkui--size_field_height--compact);
 }
 
 .FormField__before,
 .FormField__after {
-  flex-shrink: 0;
   position: relative;
+  z-index: 2;
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: center;
-  min-width: 44px;
-  height: 44px;
-  margin: -1px;
+  flex-shrink: 0;
+  min-width: var(--vkui--size_field_height--regular);
+  height: 100%;
   color: var(--icon_secondary, var(--vkui--color_icon_secondary));
-  z-index: 2;
+}
+
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.FormField--sizeY-compact .FormField__before,
+.FormField--sizeY-compact .FormField__after {
+  min-width: var(--vkui--size_field_height--compact);
+  height: var(--vkui--size_field_height--compact);
 }
 
 .FormField__before {
-  color: var(--vkui--color_icon_accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .FormField__after {
@@ -36,15 +46,15 @@
 
 .FormField__border {
   position: absolute;
+  z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  content: "";
   box-sizing: border-box;
-  z-index: 1;
   transform-origin: left top;
   border: var(--thin-border) solid transparent;
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .FormField--default .FormField__border {
@@ -55,6 +65,11 @@
   );
 }
 
+/**
+ * [start]
+ * CMP:
+ * FormItem
+ */
 .FormItem--error .FormField__border {
   background-color: var(
     --field_error_background,
@@ -66,6 +81,7 @@
 .FormItem--valid .FormField__border {
   border-color: var(--field_valid_border, var(--vkui--color_stroke_positive));
 }
+/* [end] */
 
 .FormField--disabled {
   opacity: var(--vkui--opacity_disable_accessibility);
@@ -87,22 +103,15 @@
   );
 }
 
+/**
+ * FIXME: необходимо заменить на `useFocusVisible()`
+ */
 .FormField:focus-within .FormField__border,
 .FormField *:focus ~ .FormField__border,
 .ChipsInput--focused .FormField__border {
   border-color: var(--accent, var(--vkui--color_stroke_accent));
 }
 
-/**
- * sizeY COMPACT
- * TODO v5.0.0 поправить под новую адаптивность
- */
-.FormField--sizeY-compact .FormField__before,
-.FormField--sizeY-compact .FormField__after {
-  min-width: 36px;
-  height: 36px;
-}
-
 /**
  * CMP:
  * ModalCardBase

package/src/components/FormField/FormField.tsx

@@ -1,9 +1,6 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
 import { HasComponent, HasRootRef } from "../../types";
-import { hasReactNode } from "../../lib/utils";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./FormField.css";
 
@@ -19,7 +16,7 @@ export interface FormFieldProps {
    * Рекомендации:
    *
    * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
-   * - Используйте [IconButton](#/IconButton), если вам нужна кликабельная иконка.
+   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
    */
   before?: React.ReactNode;
   /**
@@ -28,7 +25,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 +42,7 @@ interface FormFieldOwnProps
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */
-export const FormField: React.FC<FormFieldOwnProps> = ({
+export const FormField = ({
   Component = "div",
   children,
   getRootRef,
@@ -55,7 +52,6 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
   mode = FormFieldMode.default,
   ...restProps
 }: FormFieldOwnProps) => {
-  const platform = usePlatform();
   const { sizeY } = useAdaptivity();
   const [hover, setHover] = React.useState(false);
 
@@ -77,20 +73,20 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       vkuiClass={classNames(
-        getClassName("FormField", platform),
+        "FormField",
         `FormField--${mode}`,
-        `FormField--sizeY-${sizeY}`,
+        `FormField--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность
         disabled && "FormField--disabled",
         !disabled && hover && "FormField--hover"
       )}
     >
-      {hasReactNode(before) && (
+      {before && (
         <div role="presentation" vkuiClass="FormField__before">
           {before}
         </div>
       )}
       {children}
-      {hasReactNode(after) && (
+      {after && (
         <div role="presentation" vkuiClass="FormField__after">
           {after}
         </div>

package/src/components/FormField/Readme.md

@@ -1,99 +1,26 @@
-Компонент-оболочка для элементов форм ([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 } }
+```jsx
 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>
+    <FormItem>
+      <FormField>
+        <CustomInput />
+      </FormField>
+    </FormItem>
   );
 };
 
-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",
     display: "block",
     width: "100%",
     margin: 0,
-    padding: 11,
+    paddingRight: 12,
+    paddingLeft: 12,
     fontSize: 16,
-    lineHeight: "19px",
+    lineHeight: "20px",
     textOverflow: "ellipsis",
     color: "#000",
     border: "none",

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"