@vkontakte/vkui 4.32.0 → 4.33.2

package/src/components/Slider/Readme.md

@@ -1,83 +1,75 @@
 ```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      value1: 24.4234,
-      value2: 0.2,
-      value3: 20,
-      value4: 15,
-    };
+const options = () => {
+  let options = [];
+  for (let i = 0; i <= 10; i += 2) {
+    options.push({ value: `${i / 10}`, label: `${i / 10}` });
   }
+  return options;
+};
 
-  options() {
-    let options = [];
-    for (let i = 0; i <= 10; i += 2) {
-      options.push({ value: `${i / 10}`, label: `${i / 10}` });
-    }
-    return options;
-  }
+const Example = () => {
+  const [value1, setValue1] = useState(24.4234);
+  const [value2, setValue2] = useState(0.2);
+  const [value3, setValue3] = useState(20);
+  const [value4, setValue4] = useState(15);
 
-  render() {
-    return (
-      <View activePanel="slider">
-        <Panel id="slider">
-          <PanelHeader>Slider</PanelHeader>
-          <Group>
-            <FormItem top="Simple [10, 30]">
-              <Slider
-                min={10}
-                max={30}
-                value={Number(this.state.value1)}
-                onChange={(value1) => this.setState({ value1 })}
-              />
-            </FormItem>
-            <FormItem>
-              <Input
-                value={String(this.state.value1)}
-                onChange={(e) => this.setState({ value1: e.target.value })}
-                type="number"
-              />
-            </FormItem>
-            <FormItem top="Step [0, 1]">
-              <Slider
-                step={0.2}
-                min={0}
-                max={1}
-                value={Number(this.state.value2)}
-                onChange={(value2) => this.setState({ value2 })}
-              />
-            </FormItem>
-            <FormItem>
-              <Select
-                onChange={(e) => this.setState({ value2: e.target.value })}
-                value={String(this.state.value2)}
-                options={this.options()}
-              />
-            </FormItem>
-            <FormItem top="Uncontrolled">
-              <Slider
-                onChange={(value3) => this.setState({ value3 })}
-                defaultValue={this.state.value3}
-                bottom={`${this.state.value3}`}
-              />
-            </FormItem>
-            <FormItem top="Disabled">
-              <Slider
-                min={10}
-                max={30}
-                defaultValue={this.state.value4}
-                onChange={(value4) => this.setState({ value4 })}
-                disabled
-              />
-            </FormItem>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
+  return (
+    <View activePanel="slider">
+      <Panel id="slider">
+        <PanelHeader>Slider</PanelHeader>
+        <Group>
+          <FormItem top="Simple [10, 30]">
+            <Slider
+              min={10}
+              max={30}
+              value={Number(value1)}
+              onChange={setValue1}
+            />
+          </FormItem>
+          <FormItem>
+            <Input
+              value={String(value1)}
+              onChange={(e) => setValue1(e.target.value)}
+              type="number"
+            />
+          </FormItem>
+          <FormItem top="Step [0, 1]">
+            <Slider
+              step={0.2}
+              min={0}
+              max={1}
+              value={Number(value2)}
+              onChange={setValue2}
+            />
+          </FormItem>
+          <FormItem>
+            <Select
+              onChange={(e) => setValue2(e.target.value)}
+              value={String(value2)}
+              options={options()}
+            />
+          </FormItem>
+          <FormItem top="Uncontrolled">
+            <Slider
+              onChange={setValue3}
+              defaultValue={value3}
+              bottom={String(value3)}
+            />
+          </FormItem>
+          <FormItem top="Disabled">
+            <Slider
+              min={10}
+              max={30}
+              defaultValue={value4}
+              onChange={setValue4}
+              disabled
+            />
+          </FormItem>
+        </Group>
+      </Panel>
+    </View>
+  );
+};
 
 <Example />;
 ```

package/src/components/Slider/Slider.css

@@ -9,7 +9,10 @@
   position: absolute;
   left: 0;
   width: 100%;
-  background-color: var(--placeholder_icon_background);
+  background-color: var(
+    --placeholder_icon_background,
+    var(--vkui--color_track_background)
+  );
   content: "";
   z-index: -1;
   top: 13px;
@@ -34,7 +37,7 @@
   position: absolute;
   top: 0;
   width: calc(100% + 28px);
-  background: var(--accent);
+  background: var(--accent, var(--vkui--color_background_accent));
   content: "";
   left: -14px;
   height: 2px;
@@ -48,8 +51,9 @@
   height: 28px;
   transition: transform 0.1s ease;
   border-radius: 14px;
-  background: var(--white);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+  background: var(--vkui--color_background_contrast);
+  box-shadow: var(--vkui--elevation3);
+  border: 0.5px solid var(--vkui--color_separator_primary_alpha);
 }
 
 .Slider__thumb--start {
@@ -61,7 +65,7 @@
 }
 
 .Slider--disabled {
-  opacity: 0.4;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 /**
@@ -99,47 +103,3 @@
 .Slider--sizeY-compact .Slider__thumb--end {
   right: -12px;
 }
-
-/**
- * VKCOM
- */
-.Slider--vkcom {
-  height: 20px;
-  padding: 0 10px;
-}
-
-.Slider--vkcom::before {
-  top: 8px;
-  height: 4px;
-  border-radius: 2px;
-}
-
-.Slider--vkcom .Slider__dragger {
-  top: 8px;
-}
-
-.Slider--vkcom .Slider__dragger::before {
-  width: calc(100% + 20px);
-  background: var(--accent);
-  left: -10px;
-  height: 4px;
-  border-radius: 2px;
-}
-
-.Slider--vkcom .Slider__thumb {
-  top: -8px;
-  width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  border: 1px solid var(--input_border);
-  box-shadow: 0 0 2px var(--separator_common), 0 2px 4px var(--separator_common);
-  box-sizing: border-box;
-}
-
-.Slider--vkcom .Slider__thumb--start {
-  left: -10px;
-}
-
-.Slider--vkcom .Slider__thumb--end {
-  right: -10px;
-}

package/src/components/Slider/Slider.tsx

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

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { HasRootRef } from "../../types";

package/src/components/Snackbar/Snackbar.css

@@ -65,7 +65,9 @@
 }
 
 .Snackbar--l-horizontal .Snackbar__action {
-  margin-right: -16px;
+  margin-right: calc(
+    -1 * var(--vkui--size_button_tertiary_small_padding_horizontal--regular)
+  );
   position: relative;
   top: 2px;
 }
@@ -73,7 +75,9 @@
 .Snackbar--l-vertical .Snackbar__action {
   margin-top: 2px;
   margin-bottom: -6px;
-  margin-left: -16px;
+  margin-left: calc(
+    -1 * var(--vkui--size_button_tertiary_small_padding_horizontal--regular)
+  );
 }
 
 .ModalRoot .Snackbar {

package/src/components/Spacing/Spacing.css

@@ -1,5 +1,5 @@
 .Spacing {
-  color: var(--separator_common);
+  color: var(--separator_common, var(--vkui--color_separator_primary));
   position: relative;
   box-sizing: border-box;
   display: flex;

package/src/components/Spacing/Spacing.tsx

@@ -17,12 +17,13 @@ export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
    * - separator='bottom'
    */
   separator?: boolean | "top" | "bottom" | "center";
+  children?: React.ReactNode;
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export const Spacing: React.FC<SpacingProps> = ({
+export const Spacing = ({
   size = 8,
   separator,
   style,

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -3,7 +3,7 @@ import { HasComponent } from "../../types";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { getTitleFromChildren, hasReactNode } from "../../lib/utils";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { Icon16Dropdown } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Caption } from "../Typography/Caption/Caption";

package/src/components/Tabbar/Tabbar.tsx

@@ -15,8 +15,12 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
  */
-const Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {
-  const { children, shadow, itemsLayout, ...restProps } = props;
+export const Tabbar: React.FunctionComponent<TabbarProps> = ({
+  children,
+  shadow = true,
+  itemsLayout,
+  ...restProps
+}: TabbarProps) => {
   const platform = usePlatform();
 
   const getItemsLayout = () => {
@@ -45,10 +49,3 @@ const Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {
     </div>
   );
 };
-
-Tabbar.defaultProps = {
-  shadow: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Tabbar;

package/src/components/TabbarItem/TabbarItem.tsx

@@ -4,7 +4,7 @@ import { Counter } from "../Counter/Counter";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { Platform } from "../../lib/platform";
 import { HasComponent, HasRootRef } from "../../types";
 import { warnOnce } from "../../lib/warnOnce";
@@ -34,7 +34,7 @@ const warn = warnOnce("TabbarItem");
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */
-const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
+export const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
   children,
   selected,
   label,
@@ -94,6 +94,3 @@ const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default TabbarItem;

package/src/components/Tabs/Tabs.tsx

@@ -17,12 +17,9 @@ export interface TabsProps
 export const TabsModeContext =
   React.createContext<TabsProps["mode"]>("default");
 
-/**
- * @see https://vkcom.github.io/VKUI/#/Tabs
- */
-const Tabs: React.FunctionComponent<TabsProps> = ({
+const TabsComponent: React.FunctionComponent<TabsProps> = ({
   children,
-  mode,
+  mode = "default",
   getRootRef,
   sizeX,
   ...restProps
@@ -52,9 +49,9 @@ const Tabs: React.FunctionComponent<TabsProps> = ({
   );
 };
 
-Tabs.defaultProps = {
-  mode: "default",
-};
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tabs
+ */
+export const Tabs = withAdaptivity(TabsComponent, { sizeX: true });
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Tabs, { sizeX: true });
+Tabs.displayName = "Tabs";

package/src/components/TabsItem/TabsItem.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { VKCOM } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -19,9 +19,9 @@ export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
-const TabsItem: React.FC<TabsItemProps> = ({
+export const TabsItem: React.FC<TabsItemProps> = ({
   children,
-  selected,
+  selected = false,
   after,
   ...restProps
 }: TabsItemProps) => {
@@ -53,10 +53,3 @@ const TabsItem: React.FC<TabsItemProps> = ({
     </Tappable>
   );
 };
-
-TabsItem.defaultProps = {
-  selected: false,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default TabsItem;

package/src/components/Tappable/Readme.md

@@ -0,0 +1,53 @@
+Компонент реализует базовое поведение при наведениях и нажатиях, а именно задаёт:
+
+- вид курсора
+- цвет фона в зависимости от состояния
+- ripple-эффект при нажатии, если это платформа `ANDROID`
+
+Используется внутри всех контролов. Например, [Button](#/Button), [Cell](#/Cell), [ActionSheetItem](#/ActionSheetItem) и т.п.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+const Example = () => {
+  return (
+    <div style={gaps}>
+      <Tappable
+      // поиграйся с моими параметрами :) доступный список параметров см. в конце страницы
+      >
+        <Text style={gaps}>Наведи и нажми на меня</Text>
+      </Tappable>
+    </div>
+  );
+};
+
+const gaps = {
+  padding: 16,
+};
+
+<Example />;
+```
+
+## Ripple-эффект
+
+В данном примере зашиты все условия для его включения (см. редактируемый код)
+
+```jsx { "props": { "layout": false, "iframe": false } }
+const Example = () => {
+  return (
+    <div style={gaps}>
+      <ConfigProvider platform="android">
+        <AdaptivityProvider hasMouse={false}>
+          <Tappable activeMode="background" hasActive>
+            <Text style={gaps}>Нажми на меня</Text>
+          </Tappable>
+        </AdaptivityProvider>
+      </ConfigProvider>
+    </div>
+  );
+};
+
+const gaps = {
+  padding: 16,
+};
+
+<Example />;
+```

package/src/components/Tappable/Tappable.css

@@ -1,6 +1,8 @@
 .Tappable {
   position: relative;
   cursor: default;
+  border-radius: var(--vkui--size_border_radius--regular);
+  transition: background-color 0.15s ease-out;
 }
 
 .Tappable--hasHover,
@@ -22,7 +24,10 @@
  * increased specificity to override CellButton styles
  */
 .Tappable--active-background.Tappable--active-background.Tappable--active-background {
-  background: var(--background_highlighted);
+  background-color: var(
+    --background_highlighted,
+    var(--vkui--color_transparent--active)
+  );
 }
 
 .Tappable--active-opacity.Tappable--active-opacity.Tappable--active-opacity {
@@ -44,7 +49,10 @@
 }
 
 .Tappable--hover-background > .Tappable__hoverShadow {
-  background: var(--background_hover);
+  background-color: var(
+    --background_hover,
+    var(--vkui--color_transparent--hover)
+  );
 }
 
 .Tappable--hover-opacity {
@@ -65,26 +73,11 @@
 /**
  * iOS tappable
  */
-.Tappable--ios {
-  position: relative;
-  border-radius: 10px;
-  transition: background-color 0.15s ease-out;
-}
-
 .Tappable--ios.Tappable--active-background {
   transition: none;
 }
 
-/**
- * Android tappable
- */
-.Tappable--android {
-  position: relative;
-  transition: background-color 0.15s ease-out;
-  border-radius: 8px;
-}
-
-.Tappable--android .Tappable__waves {
+.Tappable .Tappable__waves {
   position: absolute;
   top: 0;
   right: 0;
@@ -97,7 +90,7 @@
   will-change: transform;
 }
 
-.Tappable--android .Tappable__wave {
+.Tappable .Tappable__wave {
   position: absolute;
   top: 0;
   left: 0;
@@ -111,14 +104,6 @@
   animation: vkui-animation-wave 0.3s var(--android-easing);
 }
 
-/**
- * VKCOM tappable
- */
-.Tappable--vkcom {
-  transition: background-color 0.15s ease-out;
-  border-radius: 8px;
-}
-
 /**
  * overrides
  */

package/src/components/Tappable/Tappable.tsx

@@ -4,8 +4,7 @@ import { noop } from "@vkontakte/vkjs";
 import { Touch, TouchEvent, TouchProps } from "../Touch/Touch";
 import TouchRootContext from "../Touch/TouchContext";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { ANDROID } from "../../lib/platform";
+import { IOS, ANDROID } from "../../lib/platform";
 import { getOffsetRect } from "../../lib/offset";
 import { coordX, coordY } from "../../lib/touch";
 import { HasComponent, HasRootRef } from "../../types";
@@ -64,8 +63,9 @@ export interface TappableProps
    * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
    */
   focusVisibleMode?: FocusVisibleMode | string;
-  onEnter?: (outputEvent: MouseEvent) => void;
-  onLeave?: (outputEvent: MouseEvent) => void;
+  children?: React.ReactNode;
+  onEnter?(outputEvent: MouseEvent): void;
+  onLeave?(outputEvent: MouseEvent): void;
 }
 
 interface Wave {
@@ -147,7 +147,7 @@ function useActivity(hasActive: boolean, stopDelay: number) {
   return [activity, { delayStart, start, stop }] as const;
 }
 
-const Tappable: React.FC<TappableProps> = ({
+const TappableComponent = ({
   children,
   Component,
   onClick,
@@ -286,7 +286,8 @@ const Tappable: React.FC<TappableProps> = ({
 
   // eslint-disable-next-line vkui/no-object-expression-in-arguments
   const classes = classNames(
-    getClassName("Tappable", platform),
+    "Tappable",
+    platform === IOS && "Tappable--ios",
     `Tappable--sizeX-${sizeX}`,
     hasHover && `Tappable--hasHover`,
     hasActive && `Tappable--hasActive`,
@@ -356,9 +357,13 @@ const Tappable: React.FC<TappableProps> = ({
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Tappable, {
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tappable
+ */
+export const Tappable = withAdaptivity(TappableComponent, {
   sizeX: true,
   hasMouse: true,
   deviceHasHover: true,
 });
+
+Tappable.displayName = "Tappable";

package/src/components/Textarea/Readme.md

@@ -10,9 +10,8 @@
       </FormItem>
       <FormItem top="Увлечения">
         <Textarea
-          cols={4}
           placeholder="Музыка, спорт"
-          defaultValue="Музыка\nСпорт\nФотография\nПлавание\nПрограммирование"
+          defaultValue="Музыка\nСпорт\nФотография\nПлавание\nПрограммирование\nПутешествия\nКниги\nСериалы\nФильмы\nНастольные игры"
         />
       </FormItem>
       <FormItem top="Прикидываемся Input">