@vkontakte/vkui 4.34.0 → 4.35.0

package/src/components/FocusTrap/FocusTrap.tsx

@@ -9,7 +9,6 @@ import {
 } from "../../lib/accessibility";
 import { useDOM } from "../../lib/dom";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { noop } from "../../lib/utils";
 import { HasComponent, HasRootRef } from "../../types";
 import { AppRootContext } from "../AppRoot/AppRootContext";
 
@@ -19,9 +18,9 @@ export interface FocusTrapProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasRootRef<HTMLElement>,
     HasComponent {
-  onClose?: (props?: any) => void;
   restoreFocus?: boolean;
   timeout?: number;
+  onClose?(): void;
 }
 
 /**
@@ -29,7 +28,7 @@ export interface FocusTrapProps
  */
 export const FocusTrap = ({
   Component = "div",
-  onClose = noop,
+  onClose,
   restoreFocus = true,
   timeout = 0,
   getRootRef,
@@ -66,7 +65,7 @@ export const FocusTrap = ({
 
   useIsomorphicLayoutEffect(() => {
     if (!ref.current) {
-      return noop();
+      return;
     }
 
     const nodes: HTMLElement[] = [];
@@ -82,11 +81,12 @@ export const FocusTrap = ({
       }
     );
 
-    if (nodes?.length) {
-      setFocusableNodes(nodes);
+    if (nodes.length === 0) {
+      // Чтобы фокус был хотя бы на родителе
+      nodes.push(ref.current);
     }
 
-    return noop();
+    setFocusableNodes(nodes);
   }, [children]);
 
   // HANDLE TRAP UNMOUNT
@@ -105,7 +105,7 @@ export const FocusTrap = ({
       };
     }
 
-    return noop();
+    return;
   }, [restoreFocus]);
 
   const onDocumentKeydown = (e: KeyboardEvent) => {
@@ -129,7 +129,7 @@ export const FocusTrap = ({
       }
     }
 
-    if (pressedKey(e) === Keys.ESCAPE) {
+    if (onClose && pressedKey(e) === Keys.ESCAPE) {
       onClose();
     }
 
@@ -140,7 +140,7 @@ export const FocusTrap = ({
   });
 
   return (
-    <Component ref={ref} {...restProps}>
+    <Component tabIndex={-1} ref={ref} {...restProps}>
       {children}
     </Component>
   );

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";
 
@@ -55,7 +52,6 @@ export const FormField = ({
   mode = FormFieldMode.default,
   ...restProps
 }: FormFieldOwnProps) => {
-  const platform = usePlatform();
   const { sizeY } = useAdaptivity();
   const [hover, setHover] = React.useState(false);
 
@@ -77,20 +73,20 @@ export const FormField = ({
       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](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/Group/Group.css

@@ -14,7 +14,7 @@
 
 .Group--card > .Group__inner {
   background: var(--background_content, var(--vkui--color_background_content));
-  border-radius: var(--vkui--size_border_radius--regular);
+  border-radius: var(--vkui--size_border_radius_paper--regular);
   position: relative;
 }
 

package/src/components/Group/Readme.md

@@ -138,7 +138,7 @@ const SharedContent = () => {
 
       <Group
         header={<Header>Адреса</Header>}
-        description="Для использования в мини-приложениях, Delivery Cub, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам."
+        description="Для использования в мини-приложениях, Delivery Club, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам."
       >
         <CellButton>Добавить домашний адрес</CellButton>
         <CellButton>Добавить рабочий адрес</CellButton>

package/src/components/HorizontalCell/HorizontalCell.css

@@ -12,20 +12,32 @@
 }
 
 .HorizontalCell__content {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   word-break: break-all;
   text-overflow: ellipsis;
 }
 
 .HorizontalCell__subtitle {
-  color: var(--text_secondary);
-  line-height: 18px;
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
+}
+
+.HorizontalCell__content .HorizontalCell__subtitle {
+  margin-top: 2px;
 }
 
 .HorizontalCell--s {
   max-width: 80px;
 }
 
+.HorizontalCell__image {
+  padding: 4px 6px;
+}
+
+.HorizontalCell__content {
+  padding: 2px 6px 8px;
+  text-align: left;
+}
+
 .HorizontalCell--s .HorizontalCell__image {
   padding: 4px 8px;
 }
@@ -43,53 +55,23 @@
   width: auto;
 }
 
-.HorizontalCell--m .HorizontalCell__image,
-.HorizontalCell--l .HorizontalCell__image {
-  padding: 4px 6px;
-}
-
-.HorizontalCell--m .HorizontalCell__content,
-.HorizontalCell--l .HorizontalCell__content {
-  padding: 2px 6px 8px;
-  text-align: left;
-}
-
-/* iOS */
-.HorizontalCell--ios:first-child::before,
-.HorizontalCell--ios:last-child::after {
+.HorizontalCell:first-child::before,
+.HorizontalCell:last-child::after {
   content: "";
-  min-width: 4px;
+  min-width: 10px;
 }
 
-.HorizontalCell--ios.HorizontalCell--s:first-child,
-.HorizontalCell--ios.HorizontalCell--s:last-child {
-  max-width: 88px;
-}
-
-.HorizontalCell--ios.HorizontalCell--m:first-child,
-.HorizontalCell--ios.HorizontalCell--m:last-child {
-  width: 106px;
-}
-
-/* Android and vkcom */
-.HorizontalCell--android:first-child::before,
-.HorizontalCell--android:last-child::after,
-.HorizontalCell--vkcom:first-child::before,
-.HorizontalCell--vkcom:last-child::after {
-  content: "";
+.HorizontalCell--s:first-child::before,
+.HorizontalCell--s:last-child::after {
   min-width: 8px;
 }
 
-.HorizontalCell--android.HorizontalCell--s:first-child,
-.HorizontalCell--android.HorizontalCell--s:last-child,
-.HorizontalCell--vkcom.HorizontalCell--s:first-child,
-.HorizontalCell--vkcom.HorizontalCell--s:last-child {
+.HorizontalCell--s:first-child,
+.HorizontalCell--s:last-child {
   max-width: 88px;
 }
 
-.HorizontalCell--android.HorizontalCell--m:first-child,
-.HorizontalCell--android.HorizontalCell--m:last-child,
-.HorizontalCell--vkcom.HorizontalCell--m:first-child,
-.HorizontalCell--vkcom.HorizontalCell--m:last-child {
-  width: 116px;
+.HorizontalCell--m:first-child,
+.HorizontalCell--m:last-child {
+  width: 110px;
 }

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
 import { Tappable } from "../Tappable/Tappable";
 import { Subhead } from "../Typography/Subhead/Subhead";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { Avatar } from "../Avatar/Avatar";
 import { HasComponent, HasRef, HasRootRef } from "../../types";
 import "./HorizontalCell.css";
@@ -53,14 +52,9 @@ export const HorizontalCell = ({
   getRef,
   ...restProps
 }: HorizontalCellProps) => {
-  const platform = usePlatform();
-
   return (
     <div
-      vkuiClass={classNames(
-        getClassName("HorizontalCell", platform),
-        `HorizontalCell--${size}`
-      )}
+      vkuiClass={classNames("HorizontalCell", `HorizontalCell--${size}`)}
       ref={getRootRef}
       style={style}
       className={className}
@@ -80,7 +74,7 @@ export const HorizontalCell = ({
             </CellTypography>
           )}
           {hasReactNode(subtitle) && (
-            <Caption vkuiClass="HorizontalCell__subtitle">{subtitle}</Caption>
+            <Footnote vkuiClass="HorizontalCell__subtitle">{subtitle}</Footnote>
           )}
         </div>
       </Tappable>

package/src/components/HorizontalScroll/HorizontalScroll.css

@@ -38,3 +38,26 @@
   .HorizontalScroll__in-wrapper {
   transform: translateX(-8px);
 }
+
+/**
+ * CMP:
+ * Tabs
+ */
+.Tabs .HorizontalScroll {
+  min-width: 100%;
+}
+
+.Tabs__in .HorizontalScroll__in-wrapper {
+  display: flex;
+  align-items: stretch;
+}
+
+/* TODO v5.0.0 новая адаптивность */
+.Tabs--sizeX-compact.Tabs--withGaps .HorizontalScroll__in-wrapper::after,
+.Tabs--sizeX-compact.Tabs--withGaps .HorizontalScroll__in-wrapper::before {
+  display: block;
+  width: 8px;
+  flex-shrink: 0;
+  height: 1px;
+  content: "";
+}

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -241,3 +241,5 @@ const HorizontalScrollComponent = ({
 export const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
   hasMouse: true,
 });
+
+HorizontalScroll.displayName = "HorizontalScroll";

package/src/components/IconButton/IconButton.css

@@ -17,6 +17,13 @@
   border-radius: 9999px;
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.IconButton--sizeY-compact {
+  height: 44px;
+}
+
 .IconButton[disabled] {
   opacity: var(--vkui--opacity_disable_accessibility);
 }
@@ -33,14 +40,42 @@
   padding: 16px 14px;
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.IconButton--sizeY-compact .Icon--16,
+.IconButton--sizeY-compact .Icon--16.Icon--w-8 {
+  padding: 14px;
+}
+
 .IconButton .Icon--24 {
   padding: 12px;
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.IconButton--sizeY-compact .Icon--24 {
+  padding: 10px;
+}
+
 .IconButton .Icon--28 {
   padding: 10px;
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.IconButton--sizeY-compact .Icon--28 {
+  padding: 8px;
+}
+
+/**
+ * CMP:
+ * - FormItem
+ * - FormLayoutGroup
+ * - FormField
+ */
 .FormItem--removable .Removable__content > .IconButton,
 .FormLayoutGroup--removable .Removable__content > .IconButton,
 .FormField__after .IconButton {
@@ -48,41 +83,27 @@
   align-items: center;
   align-content: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: inherit;
+  width: var(--vkui--size_field_height--regular);
+  height: var(--vkui--size_field_height--regular);
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .FormField__after .IconButton .Icon.Icon.Icon {
   padding: 0;
 }
 
-/*
- * sizeY: COMPACT
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
  */
-.IconButton--sizeY-compact {
-  height: 44px;
-}
-
 .FormField__after .IconButton--sizeY-compact {
-  width: 36px;
-  height: 36px;
+  width: var(--vkui--size_field_height--compact);
+  height: var(--vkui--size_field_height--compact);
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
 .FormItem--removable .Removable__content > .IconButton--sizeY-compact,
 .FormLayoutGroup--removable .Removable__content > .IconButton--sizeY-compact {
-  height: 36px;
-}
-
-.IconButton--sizeY-compact .Icon--16,
-.IconButton--sizeY-compact .Icon--16.Icon--w-8 {
-  padding: 14px;
-}
-
-.IconButton--sizeY-compact .Icon--24 {
-  padding: 10px;
-}
-
-.IconButton--sizeY-compact .Icon--28 {
-  padding: 8px;
+  height: var(--vkui--size_field_height--compact);
 }

package/src/components/Input/Input.css

@@ -21,22 +21,31 @@
   border: none;
   appearance: none;
   text-overflow: ellipsis;
-  height: 42px;
-  line-height: 20px;
-  font-size: 16px;
+  font-weight: var(--vkui--font_text--font_weight--regular);
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
   color: var(--text_primary, var(--vkui--color_text_primary));
-  padding: 11px;
+  padding-right: 12px;
+  padding-left: 12px;
   position: relative;
   z-index: 2;
   background: transparent;
 }
 
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
 .Input--sizeY-compact .Input__el {
-  height: 34px;
-  padding-top: 9px;
-  padding-bottom: 9px;
-  line-height: 20px;
-  font-size: 15px;
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
+}
+
+.Input--hasBefore .Input__el {
+  padding-left: 0;
+}
+
+.Input--hasAfter .Input__el {
+  padding-right: 0;
 }
 
 .Input__el:disabled {
@@ -45,6 +54,8 @@
 
 .Input__el::placeholder {
   color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
+  /* Для Firefox */
+  opacity: 1;
 }
 
 .Input__el:disabled::placeholder {