@vkontakte/vkui 4.29.1 → 4.32.0

package/src/components/SegmentedControl/SegmentedControl.css

@@ -1,5 +1,5 @@
 .SegmentedControl {
-  height: 36px;
+  height: 30px;
   padding: 2px;
   border-radius: var(--vkui--size_border_radius--regular);
   background-color: var(--vkui--color_background_secondary);
@@ -7,7 +7,7 @@
 }
 
 .SegmentedControl--l {
-  height: 44px;
+  height: 36px;
 }
 
 .SegmentedControl__in {
@@ -40,3 +40,15 @@
   padding: 0;
   z-index: 1;
 }
+
+/**
+ * sizeY REGULAR
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.SegmentedControl--sizeY-regular {
+  height: 36px;
+}
+
+.SegmentedControl--sizeY-regular.SegmentedControl--l {
+  height: 44px;
+}

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -5,6 +5,7 @@ import { generateRandomId, noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { SegmentedControlOption } from "./SegmentedControlOption/SegmentedControlOption";
 import { HasRootRef } from "../../types";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./SegmentedControl.css";
 
 export type SegmentedControlValue = string | number | undefined;
@@ -27,6 +28,10 @@ export interface SegmentedControlProps
 }
 
 const warn = warnOnce("SegmentedControl");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/SegmentedControl
+ */
 export const SegmentedControl: React.FC<SegmentedControlProps> = ({
   size = "l",
   name,
@@ -38,6 +43,7 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = ({
   children,
   ...restProps
 }) => {
+  const { sizeY } = useAdaptivity();
   const initialValue = defaultValue ?? options[0]?.value;
 
   if (process.env.NODE_ENV === "development") {
@@ -82,7 +88,12 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = ({
   return (
     <div
       {...restProps}
-      vkuiClass={classNames("SegmentedControl", `SegmentedControl--${size}`)}
+      vkuiClass={classNames(
+        "SegmentedControl",
+        // TODO v5.0.0 поправить под новую адаптивность
+        `SegmentedControl--sizeY-${sizeY}`,
+        `SegmentedControl--${size}`
+      )}
       ref={getRootRef}
     >
       <div role="radiogroup" vkuiClass="SegmentedControl__in">

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx

@@ -1,15 +1,21 @@
 import * as React from "react";
+import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { useFocusVisible } from "../../../hooks/useFocusVisible";
 import { callMultiple } from "../../../lib/callMultiple";
 import { classNames } from "../../../lib/classNames";
+import { SizeType } from "../../AdaptivityProvider/AdaptivityContext";
 import { FocusVisible } from "../../FocusVisible/FocusVisible";
-import Text from "../../Typography/Text/Text";
+import { Text } from "../../Typography/Text/Text";
+import { Caption } from "../../Typography/Caption/Caption";
 import {
   VisuallyHiddenInput,
   VisuallyHiddenInputProps,
 } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
 import "./SegmentedControlOption.css";
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/SegmentedControl
+ */
 export const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({
   className,
   style,
@@ -17,16 +23,17 @@ export const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({
   ...restProps
 }) => {
   const { focusVisible, onBlur, onFocus } = useFocusVisible();
+  const { sizeY } = useAdaptivity();
 
   return (
     <label
       className={className}
       style={style}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames("SegmentedControlOption", {
-        "SegmentedControlOption--checked": restProps.checked,
-        "SegmentedControlOption--focus-visible": focusVisible,
-      })}
+      vkuiClass={classNames(
+        "SegmentedControlOption",
+        restProps.checked && "SegmentedControlOption--checked",
+        focusVisible && "SegmentedControlOption--focus-visible"
+      )}
     >
       <VisuallyHiddenInput
         {...restProps}
@@ -34,9 +41,20 @@ export const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({
         onBlur={callMultiple(onBlur, restProps.onBlur)}
         onFocus={callMultiple(onFocus, restProps.onFocus)}
       />
-      <Text vkuiClass="SegmentedControlOption__content" weight="medium">
-        {children}
-      </Text>
+      {/* TODO v5.0.0 поправить под новую адаптивность */}
+      {sizeY === SizeType.COMPACT ? (
+        <Caption
+          level="1"
+          vkuiClass="SegmentedControlOption__content"
+          weight="3"
+        >
+          {children}
+        </Caption>
+      ) : (
+        <Text vkuiClass="SegmentedControlOption__content" weight="2">
+          {children}
+        </Text>
+      )}
       <FocusVisible mode="inside" />
     </label>
   );

package/src/components/Select/Select.css

@@ -21,7 +21,7 @@
 .Select__container {
   flex-grow: 1;
   flex-shrink: 1;
-  padding: 11px;
+  padding: 7px 11px;
   color: var(--text_primary, var(--vkui--color_text_primary));
   box-sizing: border-box;
   position: relative;
@@ -39,7 +39,7 @@
   text-overflow: ellipsis;
 }
 
-.Select--not-selected .Select__title {
+.Select--empty .Select__title {
   color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
 }
 
@@ -52,13 +52,17 @@
 }
 
 /**
- * sizeY === 'compact'
+ * sizeY REGULAR
+ * TODO v5.0.0 поправить под новую адаптивность
  */
-.Select--sizeY--compact .Select__container {
-  padding: 7px 11px;
+.Select--sizeY-regular .Select__container {
+  padding: 11px;
 }
 
-.Select--sizeY--compact .Select__container--plain,
-.Select__container--plain {
-  padding: 0 6px 0 8px;
+/**
+ * CMP:
+ * CalendarHeader
+ */
+.CalendarHeader__picker .Select__container {
+  padding-right: 4px;
 }

package/src/components/Select/Select.tsx

@@ -2,10 +2,54 @@ import * as React from "react";
 import { NativeSelect } from "../NativeSelect/NativeSelect";
 import { CustomSelect, CustomSelectProps } from "../CustomSelect/CustomSelect";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { usePlatform } from "../../hooks/usePlatform";
+import { Platform, VKCOM } from "../../lib/platform";
 import {
   AdaptivityContextInterface,
   AdaptivityProps,
+  SizeType,
 } from "../AdaptivityProvider/AdaptivityContext";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
+import { Text } from "../Typography/Text/Text";
+import { Headline } from "../Typography/Headline/Headline";
+
+export const SelectType = {
+  default: "default",
+  plain: "plain",
+  accent: "accent",
+} as const;
+
+// TODO v5.0.0 поправить под новую адаптивность
+/**
+ * @see https://vkcom.github.io/VKUI/#/SelectTypography
+ */
+export const SelectTypography: React.FC<
+  Pick<CustomSelectProps, "selectType">
+> = ({ selectType = SelectType.default, children, ...restProps }) => {
+  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
+  if (selectType === SelectType.accent) {
+    return (
+      <Paragraph
+        weight={platform === Platform.ANDROID ? "2" : "1"}
+        {...restProps}
+      >
+        {children}
+      </Paragraph>
+    );
+  }
+
+  const Component =
+    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
+
+  return (
+    <Component Component="span" {...restProps}>
+      {children}
+    </Component>
+  );
+};
 
 export interface SelectProps extends CustomSelectProps, AdaptivityProps {}
 
@@ -33,6 +77,9 @@ const SelectComponent: React.FC<SelectProps & AdaptivityContextInterface> = ({
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Select
+ */
 export const Select = withAdaptivity(SelectComponent, {
   hasMouse: true,
 });

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

@@ -254,5 +254,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

@@ -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,14 +59,17 @@ 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} />;
   }
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/SimpleCell
+ */
 const SimpleCell: React.FC<SimpleCellProps> = ({
   badge,
   before,

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -32,6 +32,9 @@ export interface SimpleCheckboxProps
   defaultIndeterminate?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/SimpleCheckbox
+ */
 export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
   props: SimpleCheckboxProps
 ) => {

package/src/components/Slider/Slider.tsx

@@ -8,6 +8,9 @@ import {
 
 export type SliderProps = UniversalSliderProps<number>;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Slider
+ */
 const Slider = ({
   onChange,
   defaultValue,

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,

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -4,7 +4,7 @@ import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { HasRootRef } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import "./SliderSwitch.css";
 
 export interface ButtonProps
@@ -48,7 +48,7 @@ export const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
       hasActive={false}
       hoverMode="opacity"
     >
-      <Text weight="medium">{children}</Text>
+      <Text weight="2">{children}</Text>
     </Tappable>
   );
 };

package/src/components/Snackbar/Snackbar.tsx

@@ -6,7 +6,7 @@ import { getClassName } from "../../helpers/getClassName";
 import { ANDROID, VKCOM } from "../../lib/platform";
 import { rubber } from "../../lib/touch";
 import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { Button } from "../Button/Button";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
@@ -217,9 +217,7 @@ const SnackbarComponent: React.FC<
             {before && <div vkuiClass="Snackbar__before">{before}</div>}
 
             <div vkuiClass="Snackbar__content">
-              <Text weight="regular" vkuiClass="Snackbar__content-text">
-                {children}
-              </Text>
+              <Text vkuiClass="Snackbar__content-text">{children}</Text>
 
               {action && (
                 <Button
@@ -250,6 +248,9 @@ SnackbarComponent.defaultProps = {
   layout: "horizontal",
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Snackbar
+ */
 export const Snackbar = withAdaptivity(SnackbarComponent, {
   viewWidth: true,
 });

package/src/components/Spacing/Readme.md

@@ -7,7 +7,10 @@
 
 <Spacing size={16} />  // - пустой отступ высотой 16px
 
-<Spacing separator size={16} /> // - сепаратор с отступами 8px сверху и снизу
+// - сепаратор с отступами 8px сверху и снизу
+<Spacing size={16} >
+  <Separator />
+</Spacing>
 ```
 
 Для более гибкой настройки положения линии и отступов, можно комбинировать два отступа вместе
@@ -15,7 +18,8 @@
 Например - нужен сепаратор с отступом сверху 12px и снизу 20px:
 
 ```jsx static
-<Spacing separator="bottom" size={12} />
+<Spacing size={12} />
+<Separator />
 <Spacing size={20} />
 ```
 
@@ -54,7 +58,9 @@
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
-      <Spacing separator size={16} />
+      <Spacing size={16}>
+        <Separator />
+      </Spacing>
 
       <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
@@ -70,8 +76,9 @@
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
-      <Spacing separator="bottom" />
-      <Spacing />
+      <Spacing>
+        <Separator />
+      </Spacing>
 
       <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
@@ -87,7 +94,8 @@
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
-      <Spacing separator="bottom" size={12} />
+      <Spacing size={12} />
+      <Separator />
       <Spacing size={20} />
 
       <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>