@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -3,19 +3,12 @@ import { classNames } from "../../lib/classNames";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField, FormFieldProps } from "../FormField/FormField";
 import { HasAlign, HasRootRef } from "../../types";
-import {
-  withAdaptivity,
-  AdaptivityProps,
-  SizeType,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
-import Headline from "../Typography/Headline/Headline";
-import Text from "../Typography/Text/Text";
-import { VKCOM } from "../../lib/platform";
-import { SelectType } from "../CustomSelect/CustomSelect";
+import { getFormFieldModeFromSelectType } from "../../lib/select";
+import { SelectType, SelectTypography } from "../Select/Select";
 import "../Select/Select.css";
-import "./SelectMimicry.css";
 
 export interface SelectMimicryProps
   extends React.HTMLAttributes<HTMLElement>,
@@ -25,11 +18,11 @@ export interface SelectMimicryProps
     Pick<FormFieldProps, "before" | "after"> {
   multiline?: boolean;
   disabled?: boolean;
-  selectType?: SelectType;
+  selectType?: keyof typeof SelectType;
 }
 
-const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
-  tabIndex,
+const SelectMimicryComponent: React.FC<SelectMimicryProps> = ({
+  tabIndex = 0,
   placeholder,
   children,
   align,
@@ -41,57 +34,46 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
   sizeY,
   before,
   after = <DropdownIcon />,
-  selectType = SelectType.Default,
+  selectType = SelectType.default,
   ...restProps
-}: SelectMimicryProps) => {
+}) => {
   const platform = usePlatform();
-
-  const TypographyComponent =
-    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
+  const title = children || placeholder;
 
   return (
     <FormField
       {...restProps}
       tabIndex={disabled ? undefined : tabIndex}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Select", platform),
-        "Select--mimicry",
-        `Select--mimicry-${selectType}`,
-        {
-          "Select--not-selected": !children,
-          "Select--multiline": multiline,
-          [`Select--align-${align}`]: !!align,
-          [`Select--sizeX--${sizeX}`]: !!sizeX,
-          [`Select--sizeY--${sizeY}`]: !!sizeY,
-        }
+        `Select--${selectType}`,
+        !children && "Select--empty",
+        multiline && "Select--multiline",
+        align && `Select--align-${align}`,
+        `Select--sizeX-${sizeX}`,
+        `Select--sizeY-${sizeY}`
       )}
       getRootRef={getRootRef}
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
       before={before}
       after={after}
+      mode={getFormFieldModeFromSelectType(selectType)}
     >
-      <TypographyComponent
-        Component="div"
-        weight={selectType === SelectType.Plain ? "semibold" : "regular"}
-        vkuiClass={classNames(
-          "Select__container",
-          `Select__container--${selectType}`
-        )}
-      >
-        <span vkuiClass="Select__title">{children || placeholder}</span>
-      </TypographyComponent>
+      <div vkuiClass="Select__container">
+        {/* TODO v5.0.0 поправить под новую адаптивность */}
+        <SelectTypography selectType={selectType} vkuiClass="Select__title">
+          {title}
+        </SelectTypography>
+      </div>
     </FormField>
   );
 };
 
-SelectMimicry.defaultProps = {
-  tabIndex: 0,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(SelectMimicry, {
+/**
+ * @see https://vkcom.github.io/VKUI/#/SelectMimicry
+ */
+export const SelectMimicry = withAdaptivity(SelectMimicryComponent, {
   sizeX: true,
   sizeY: true,
 });

package/src/components/Separator/Readme.md

@@ -1,7 +1,3 @@
-> **Важно**
->
-> Компонент устарел. Предпочтительнее использовать компонент [Spacing](#!/Spacing)
-
 Используется для разделения какого-либо контента. Отступы справа и слева контролируются свойством `wide`.
 
 ```jsx
@@ -13,7 +9,9 @@
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
-      <Separator style={{ margin: "12px 0" }} />
+      <Spacing size={24}>
+        <Separator />
+      </Spacing>
 
       <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>

package/src/components/Separator/Separator.css

@@ -25,24 +25,16 @@
   background: transparent;
 }
 
-.Separator:not(.Separator--wide) .Separator__in {
-  margin-left: 16px;
-  margin-right: 16px;
-}
-
-/**
- * iOS
- */
-.Separator:not(.Separator--wide).Separator--ios .Separator__in {
-  margin-left: 12px;
-  margin-right: 12px;
+.Separator--padded .Separator__in {
+  margin-left: var(--vkui--size_base_padding_horizontal--regular);
+  margin-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 /*
  * CMP:
  * ModalPage
  */
-.ModalPage--sizeX-regular .Separator:not(.Separator--wide) {
+.ModalPage--sizeX-regular .Separator--padded {
   padding-left: 8px;
   padding-right: 8px;
 }

package/src/components/Separator/Separator.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
 import "./Separator.css";
 
 export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -9,34 +7,35 @@ export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
    * С этим свойством компонент не будет иметь отступы слева и справа
    */
   wide?: boolean;
+
+  /**
+   * @deprecated Это свойство устарело и будет удалено в 5.0.0. Используйте [`Spacing`](#/Spacing).
+   */
   expanded?: boolean;
 }
 
-const Separator: React.FC<SeparatorProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/Separator
+ */
+export const Separator: React.FC<SeparatorProps> = ({
   wide,
   expanded,
   ...restProps
-}) => {
-  const platform = usePlatform();
-
-  return (
+}) => (
+  <div
+    {...restProps}
+    aria-hidden="true"
+    vkuiClass={classNames(
+      "Separator",
+      wide && "Separator--wide", // TODO: v5 remove
+      !wide && "Separator--padded"
+    )}
+  >
     <div
-      {...restProps}
-      aria-hidden="true"
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("Separator", platform), {
-        "Separator--wide": wide,
-      })}
-    >
-      <div
-        // eslint-disable-next-line vkui/no-object-expression-in-arguments
-        vkuiClass={classNames("Separator__in", {
-          "Separator__in--expanded": expanded,
-        })}
-      />
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(Separator);
+      vkuiClass={classNames(
+        "Separator__in",
+        expanded && "Separator__in--expanded"
+      )}
+    />
+  </div>
+);

package/src/components/SimpleCell/Readme.md

@@ -117,7 +117,7 @@ class Example extends React.Component {
         </Panel>
         <Panel id="nothing">
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack
                 onClick={() => this.setState({ activePanel: "list" })}
               />

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);
 }
@@ -254,5 +205,5 @@
  * FormItem
  */
 .FormItem > .SimpleCell {
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }

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";
@@ -10,9 +10,9 @@ import { hasReactNode } from "../../lib/utils";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
 import { Title } from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import "./SimpleCell.css";
 
 export interface SimpleCellOwnProps extends HasComponent {
@@ -59,15 +59,15 @@ const SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (
   const platform = usePlatform();
 
   if (sizeY === SizeType.COMPACT) {
-    return <Text Component="span" weight="regular" {...props} />;
+    return <Text {...props} />;
   } else if (platform === ANDROID) {
-    return <Headline Component="span" weight="regular" {...props} />;
+    return <Headline Component="span" weight="3" {...props} />;
   } else {
     return <Title Component="span" level="3" weight="3" {...props} />;
   }
 };
 
-const SimpleCell: React.FC<SimpleCellProps> = ({
+const SimpleCellComponent: React.FC<SimpleCellProps> = ({
   badge,
   before,
   indicator,
@@ -129,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";
@@ -32,6 +32,10 @@ export interface SimpleCheckboxProps
   defaultIndeterminate?: boolean;
 }
 
+/**
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`Checkbox`](#/Checkbox).
+ * @see https://vkcom.github.io/VKUI/#/SimpleCheckbox
+ */
 export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
   props: SimpleCheckboxProps
 ) => {

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

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

package/src/components/SliderSwitch/SliderSwitch.tsx

@@ -28,8 +28,10 @@ interface SliderSwitchState {
 }
 
 const warn = warnOnce("SliderSwitch");
+
 /**
  * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`SegmentedControl`](#/SegmentedControl).
+ * @see https://vkcom.github.io/VKUI/#/SliderSwitch
  */
 class SliderSwitch extends React.Component<
   SliderSwitchProps,