@vkontakte/vkui 4.32.0 → 4.33.2

package/src/components/PullToRefresh/PullToRefresh.css

@@ -39,7 +39,7 @@
 }
 
 .PullToRefresh--ios .PullToRefresh__spinner {
-  border-radius: none;
+  border-radius: 0;
   box-shadow: none;
   background: none;
   color: var(--icon_outline_secondary, var(--vkui--color_icon_medium));

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -9,7 +9,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { ScrollContextInterface, useScroll } from "../AppRoot/ScrollContext";
 import { Touch, TouchEvent, TouchProps } from "../Touch/Touch";
-import FixedLayout from "../FixedLayout/FixedLayout";
+import { FixedLayout } from "../FixedLayout/FixedLayout";
 import { PullToRefreshSpinner } from "./PullToRefreshSpinner";
 import TouchRootContext from "../Touch/TouchContext";
 import { usePrevious } from "../../hooks/usePrevious";

package/src/components/Radio/Radio.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Tappable, { ACTIVE_EFFECT_DELAY } from "../Tappable/Tappable";
+import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { IOS, VKCOM } from "../../lib/platform";
 import { HasRef, HasRootRef } from "../../types";

package/src/components/RangeSlider/RangeSlider.tsx

@@ -8,7 +8,7 @@ export type RangeSliderProps = UniversalSliderProps<Value>;
 /**
  * @see https://vkcom.github.io/VKUI/#/RangeSlider
  */
-const RangeSlider: React.FC<RangeSliderProps> = ({
+export const RangeSlider: React.FC<RangeSliderProps> = ({
   onChange,
   defaultValue,
   min = 0,
@@ -52,6 +52,3 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
     />
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default RangeSlider;

package/src/components/RangeSlider/Readme.md

@@ -2,31 +2,23 @@
 Они должны переданы в виде массива `[startValue, endValue]`. `onChange` так же возвращает подобный массив.
 
 ```jsx
-class Example extends React.Component {
-  render() {
-    return (
-      <View activePanel="slider">
-        <Panel id="slider">
-          <PanelHeader>RangerSlider</PanelHeader>
-          <Group>
-            <FormItem top="Uncontrolled">
-              <RangeSlider min={10} max={20} step={1} defaultValue={[12, 16]} />
-            </FormItem>
-            <FormItem top="Disabled">
-              <RangeSlider
-                min={10}
-                max={20}
-                step={1}
-                defaultValue={[12, 16]}
-                disabled
-              />
-            </FormItem>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-<Example />;
+<View activePanel="slider">
+  <Panel id="slider">
+    <PanelHeader>RangerSlider</PanelHeader>
+    <Group>
+      <FormItem top="Uncontrolled">
+        <RangeSlider min={10} max={20} step={1} defaultValue={[12, 16]} />
+      </FormItem>
+      <FormItem top="Disabled">
+        <RangeSlider
+          min={10}
+          max={20}
+          step={1}
+          defaultValue={[12, 16]}
+          disabled
+        />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>
 ```

package/src/components/RangeSlider/UniversalSlider.tsx

@@ -1,12 +1,10 @@
 import * as React from "react";
 import { Touch, TouchEvent, TouchEventHandler } from "../Touch/Touch";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { HasRootRef } from "../../types";
 import { rescale } from "../../helpers/math";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
 import "../Slider/Slider.css";
 
 export type UniversalValue = [number | null, number];
@@ -39,7 +37,6 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
   disabled,
   ...restProps
 }) => {
-  const platform = usePlatform();
   const [start, end] = value;
   const isRange = start != null;
   const gesture = React.useRef({
@@ -134,7 +131,7 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
       {...restProps}
       {...(disabled ? {} : { onStart, onMove, onEnd })}
       vkuiClass={classNames(
-        getClassName("Slider", platform),
+        "Slider",
         `Slider--sizeY-${sizeY}`,
         disabled && "Slider--disabled"
       )}

package/src/components/Removable/Removable.css

@@ -12,21 +12,13 @@
   border: none;
 }
 
-.Removable--start .Removable__action {
-  align-self: flex-start;
+/* Увеличиваем вес селектора */
+.Removable__action.Removable__action {
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }
 
-.FormItem--removable.FormItem--withTop .Removable__action,
-.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
-  top: 28px;
-}
-
-.FormItem--sizeY-compact.FormItem--removable.FormItem--withTop
-  .Removable__action,
-.FormLayoutGroup--sizeY-compact.FormLayoutGroup--removable
-  .FormItem--withTop
-  ~ .Removable__action {
-  top: 26px;
+.Removable--start .Removable__action {
+  align-self: flex-start;
 }
 
 /**
@@ -105,21 +97,25 @@
   padding-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
+.FormItem--removable .Removable__content,
 .FormLayoutGroup--removable .Removable__content {
   flex-wrap: wrap;
+  align-items: flex-start;
 }
 
-.FormLayoutGroup--removable
-  .FormItem--ios.FormItem--withTop
-  ~ .Removable__offset {
+.FormItem--withTop .FormItem__removable ~ .Removable__offset,
+.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__offset {
   order: -1;
   display: block;
   width: 100%;
-  height: 28px;
+  height: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
 }
 
+.FormItem--withTop.FormItem--sizeY-compact
+  .FormItem__removable
+  ~ .Removable__offset,
 .FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact
-  .FormItem--ios.FormItem--withTop
+  .FormItem--withTop
   ~ .Removable__offset {
-  height: 26px;
+  height: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
 }

package/src/components/Removable/Removable.tsx

@@ -9,9 +9,9 @@ import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useDOM } from "../../lib/dom";
 import { ANDROID, IOS, VKCOM } from "../../lib/platform";
 import { Icon24Cancel } from "@vkontakte/icons";
-import IconButton from "../IconButton/IconButton";
+import { IconButton } from "../IconButton/IconButton";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import "./Removable.css";
 
 export interface RemovableProps {
@@ -91,7 +91,7 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
       </IconButton>
       {children}
 
-      <span vkuiClass="Removable__offset" aria-hidden="true"></span>
+      <span vkuiClass="Removable__offset" aria-hidden />
 
       <Tappable
         Component="button"
@@ -165,6 +165,8 @@ export const Removable: React.FC<RemovableOwnProps> = ({
           >
             <Icon24Cancel role="presentation" />
           </IconButton>
+
+          <span vkuiClass="Removable__offset" aria-hidden />
         </div>
       )}
 

package/src/components/RichCell/RichCell.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { Subhead } from "../Typography/Subhead/Subhead";
@@ -50,10 +50,7 @@ export interface RichCellProps extends TappableProps {
   multiline?: boolean;
 }
 
-/**
- * @see https://vkcom.github.io/VKUI/#/RichCell
- */
-const RichCell: React.FC<RichCellProps> = ({
+const RichCellComponent: React.FC<RichCellProps> = ({
   children,
   text,
   caption,
@@ -108,5 +105,9 @@ const RichCell: React.FC<RichCellProps> = ({
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(RichCell, { sizeY: true });
+/**
+ * @see https://vkcom.github.io/VKUI/#/RichCell
+ */
+export const RichCell = withAdaptivity(RichCellComponent, { sizeY: true });
+
+RichCell.displayName = "RichCell";

package/src/components/Root/Root.css

@@ -36,6 +36,15 @@
   z-index: 2;
 }
 
+.Root__view--show-forward {
+  animation: vkui-root-android-animation-show-forward 0.3s var(--android-easing);
+}
+
+.Root__view--hide-back {
+  animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing)
+    forwards;
+}
+
 .Root__popout {
   position: fixed;
   left: 0;
@@ -138,20 +147,6 @@
  * Android
  */
 
-.Root--android {
-}
-
-.Root--android .Root__view--show-forward,
-.Root--vkcom .Root__view--show-forward {
-  animation: vkui-root-android-animation-show-forward 0.3s var(--android-easing);
-}
-
-.Root--android .Root__view--hide-back,
-.Root--vkcom .Root__view--hide-back {
-  animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing)
-    forwards;
-}
-
 @keyframes vkui-root-android-animation-hide-back {
   from {
     transform: scale(1);

package/src/components/Root/Root.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
 import { IOS } from "../../lib/platform";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import { SplitColContext } from "../SplitCol/SplitCol";
@@ -46,7 +45,7 @@ const warn = warnOnce("Root");
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
  */
-const Root: React.FC<RootProps> = ({
+export const Root: React.FC<RootProps> = ({
   popout = null,
   modal,
   children,
@@ -152,10 +151,11 @@ const Root: React.FC<RootProps> = ({
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("Root", platform), {
-        "Root--transition": transition,
-      })}
+      vkuiClass={classNames(
+        "Root",
+        platform === IOS && "Root--ios",
+        transition && "Root--transition"
+      )}
     >
       {views.map((view) => {
         const viewId = getNavId(view.props, warn);
@@ -172,18 +172,26 @@ const Root: React.FC<RootProps> = ({
             key={viewId}
             ref={(e) => viewId && (viewNodes[viewId] = e)}
             onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
-            // eslint-disable-next-line vkui/no-object-expression-in-arguments
-            vkuiClass={classNames("Root__view", {
-              "Root__view--hide-back":
-                transition && viewId === prevView && isBack,
-              "Root__view--hide-forward":
-                transition && viewId === prevView && !isBack,
-              "Root__view--show-back":
-                transition && viewId === activeView && isBack,
-              "Root__view--show-forward":
-                transition && viewId === activeView && !isBack,
-              "Root__view--active": !transition && viewId === activeView,
-            })}
+            vkuiClass={classNames(
+              "Root__view",
+              transition &&
+                viewId === prevView &&
+                isBack &&
+                "Root__view--hide-back",
+              transition &&
+                viewId === prevView &&
+                !isBack &&
+                "Root__view--hide-forward",
+              transition &&
+                viewId === activeView &&
+                isBack &&
+                "Root__view--show-back",
+              transition &&
+                viewId === activeView &&
+                !isBack &&
+                "Root__view--show-forward",
+              !transition && viewId === activeView && "Root__view--active"
+            )}
           >
             <NavTransitionProvider
               entering={transition && viewId === activeView}
@@ -209,6 +217,3 @@ const Root: React.FC<RootProps> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Root;

package/src/components/ScreenSpinner/ScreenSpinner.tsx

@@ -12,10 +12,13 @@ export type ScreenSpinnerProps = React.HTMLAttributes<HTMLDivElement> &
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */
-const ScreenSpinner: React.FC<ScreenSpinnerProps> = (
-  props: ScreenSpinnerProps
-) => {
-  const { style, className, ...restProps } = props;
+export const ScreenSpinner: React.FC<ScreenSpinnerProps> = ({
+  style,
+  className,
+  size = "large",
+  "aria-label": ariaLabel = "Пожалуйста, подождите...",
+  ...restProps
+}: ScreenSpinnerProps) => {
   const platform = usePlatform();
 
   useScrollLock();
@@ -28,16 +31,13 @@ const ScreenSpinner: React.FC<ScreenSpinnerProps> = (
       style={style}
     >
       <div vkuiClass="ScreenSpinner__container">
-        <Spinner vkuiClass="ScreenSpinner__spinner" {...restProps} />
+        <Spinner
+          vkuiClass="ScreenSpinner__spinner"
+          size={size}
+          aria-label={ariaLabel}
+          {...restProps}
+        />
       </div>
     </PopoutWrapper>
   );
 };
-
-ScreenSpinner.defaultProps = {
-  size: "large",
-  "aria-label": "Пожалуйста, подождите...",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ScreenSpinner;

package/src/components/Search/Search.tsx

@@ -65,17 +65,18 @@ export interface SearchProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-const Search: React.FC<SearchProps> = ({
-  before,
+const SearchComponent: React.FC<SearchProps> = ({
+  before = <Icon16SearchOutline aria-hidden />,
   className,
-  defaultValue,
-  placeholder,
-  after,
+  defaultValue = "",
+  placeholder = "Поиск",
+  after = "Отмена",
   getRef,
   platform,
   icon,
   onIconClick = noop,
   style,
+  autoComplete = "off",
   ...inputProps
 }) => {
   const inputRef = useExternRef(getRef);
@@ -136,6 +137,7 @@ const Search: React.FC<SearchProps> = ({
           <input
             type="search"
             {...inputProps}
+            autoComplete={autoComplete}
             ref={inputRef}
             vkuiClass="Search__input"
             onFocus={onFocus}
@@ -184,13 +186,6 @@ const Search: React.FC<SearchProps> = ({
   );
 };
 
-Search.defaultProps = {
-  autoComplete: "off",
-  defaultValue: "",
-  placeholder: "Поиск",
-  after: "Отмена",
-  before: <Icon16SearchOutline />,
-};
+export const Search = withPlatform(SearchComponent);
 
-// eslint-disable-next-line import/no-default-export
-export default withPlatform(Search);
+Search.displayName = "Search";

package/src/components/SimpleCell/SimpleCell.css

@@ -114,23 +114,7 @@
   padding-right: 2px;
 }
 
-.SimpleCell__after .IconButton .Icon--28,
-.SimpleCell__after .IconButton .Icon--28 ~ * {
-  margin-right: -8px;
-}
-
-.SimpleCell__after .IconButton .Icon--24,
-.SimpleCell__after .IconButton .Icon--24 ~ * {
-  margin-right: -10px;
-}
-
-.SimpleCell__after .IconButton .Icon--16,
-.SimpleCell__after .IconButton .Icon--16 ~ * {
-  margin-right: -14px;
-}
-
-.SimpleCell__after .IconButton .Icon--w-8,
-.SimpleCell__after .IconButton .Icon--w-8 ~ * {
+.SimpleCell__after .IconButton {
   margin-right: -12px;
 }
 
@@ -159,21 +143,8 @@
   padding-left: 12px;
 }
 
-.SimpleCell--ios .SimpleCell__after .IconButton .Icon--16,
-.SimpleCell--ios .SimpleCell__after .IconButton .Icon--16 ~ * {
-  margin-right: -12px;
-}
-
-.SimpleCell--ios.SimpleCell--sizeY-compact
-  .SimpleCell__after
-  .IconButton
-  .Icon--16,
-.SimpleCell--ios.SimpleCell--sizeY-compact
-  .SimpleCell__after
-  .IconButton
-  .Icon--16
-  ~ * {
-  margin-right: -14px;
+.SimpleCell--ios .SimpleCell__after .IconButton {
+  margin-right: -9px;
 }
 
 .SimpleCell--ios.SimpleCell--sizeY-regular
@@ -225,26 +196,6 @@
   margin-top: 1px;
 }
 
-.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--28,
-.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--28 ~ * {
-  margin-right: -6px;
-}
-
-.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--24,
-.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--24 ~ * {
-  margin-right: -8px;
-}
-
-.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--16,
-.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--16 ~ * {
-  margin-right: -12px;
-}
-
-.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--w-8,
-.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--w-8 ~ * {
-  margin-right: -10px;
-}
-
 .SimpleCell--sizeY-compact .SimpleCell__badge .Badge {
   transform: translateY(0.5px);
 }

package/src/components/SimpleCell/SimpleCell.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { HasComponent } from "../../types";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { Icon24Chevron } from "@vkontakte/icons";
 import { ANDROID, IOS } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -67,10 +67,7 @@ const SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (
   }
 };
 
-/**
- * @see https://vkcom.github.io/VKUI/#/SimpleCell
- */
-const SimpleCell: React.FC<SimpleCellProps> = ({
+const SimpleCellComponent: React.FC<SimpleCellProps> = ({
   badge,
   before,
   indicator,
@@ -132,5 +129,7 @@ const SimpleCell: React.FC<SimpleCellProps> = ({
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(SimpleCell, { sizeY: true });
+/**
+ * @see https://vkcom.github.io/VKUI/#/SimpleCell
+ */
+export const SimpleCell = withAdaptivity(SimpleCellComponent, { sizeY: true });

package/src/components/SimpleCheckbox/Readme.md

@@ -1,3 +1,7 @@
+> **Deprecated:** этот компонент устарел и будет удален в 5.0.0.
+>
+> Используйте [`Checkbox`](#/Checkbox).
+
 Надстройка над `<input type="checkbox" />`. Компонент принимает все валидные для этого элемента свойства.
 
 Компонент является упрощенной версией обычного чекбокса `Checkbox` и предназначен для использования внутри других блоков таких как таблицы

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Tappable, { ACTIVE_EFFECT_DELAY } from "../Tappable/Tappable";
+import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { IOS, VKCOM } from "../../lib/platform";
@@ -33,6 +33,7 @@ export interface SimpleCheckboxProps
 }
 
 /**
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`Checkbox`](#/Checkbox).
  * @see https://vkcom.github.io/VKUI/#/SimpleCheckbox
  */
 export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (