@vkontakte/vkui 4.25.0 → 4.27.0

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -2,8 +2,9 @@ import * as React from "react";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
 import { usePlatform } from "../../hooks/usePlatform";
-import { isPrimitiveReactNode } from "../../lib/utils";
+import { getTitleFromChildren, isPrimitiveReactNode } from "../../lib/utils";
 import { IOS, VKCOM, ANDROID } from "../../lib/platform";
 import Text from "../Typography/Text/Text";
 import Title from "../Typography/Title/Title";
@@ -26,11 +27,7 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = ({
 
   if (platform === IOS) {
     return (
-      <Title
-        Component="span"
-        level="3"
-        weight={primary ? "semibold" : "regular"}
-      >
+      <Title Component="span" level="3" weight={primary ? "1" : "3"}>
         {children}
       </Title>
     );
@@ -41,9 +38,10 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = ({
   );
 };
 
+const warn = warnOnce("PanelHeaderButton");
 export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
   children,
-  primary,
+  primary = false,
   label,
   ...restProps
 }: PanelHeaderButtonProps) => {
@@ -68,6 +66,21 @@ export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
       activeMode = "PanelHeaderButton--active";
   }
 
+  if (process.env.NODE_ENV === "development") {
+    const hasAccessibleName = Boolean(
+      getTitleFromChildren(children) ||
+        getTitleFromChildren(label) ||
+        restProps["aria-label"] ||
+        restProps["aria-labelledby"]
+    );
+
+    if (!hasAccessibleName) {
+      warn(
+        "a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label."
+      );
+    }
+  }
+
   return (
     <Tappable
       {...restProps}
@@ -94,8 +107,3 @@ export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
     </Tappable>
   );
 };
-
-PanelHeaderButton.defaultProps = {
-  primary: false,
-  "aria-label": "Закрыть",
-};

package/src/components/Placeholder/Placeholder.tsx

@@ -49,7 +49,7 @@ const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
       <div vkuiClass="Placeholder__in">
         {hasReactNode(icon) && <div vkuiClass="Placeholder__icon">{icon}</div>}
         {hasReactNode(header) && (
-          <Title level="2" weight="medium" vkuiClass="Placeholder__header">
+          <Title level="2" weight="2" vkuiClass="Placeholder__header">
             {header}
           </Title>
         )}

package/src/components/PopoutRoot/PopoutRoot.tsx

@@ -7,20 +7,23 @@ import {
 } from "../../hoc/withAdaptivity";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { blurActiveElement, useDOM } from "../../lib/dom";
-import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import "./PopoutRoot.css";
 
 export interface PopoutRootProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityContextInterface,
+    AdaptivityProps,
     HasRootRef<HTMLDivElement> {
   popout?: React.ReactNode;
   modal?: React.ReactNode;
 }
 
-export const PopoutRootComponent: React.FC<PopoutRootProps> = (
-  props: PopoutRootProps
-) => {
+export const PopoutRootComponent: React.FC<
+  PopoutRootProps & AdaptivityContextInterface
+> = (props) => {
   const {
     popout,
     modal,

package/src/components/PromoBanner/PromoBanner.tsx

@@ -6,6 +6,7 @@ import Avatar from "../Avatar/Avatar";
 import Caption from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
+import { warnOnce } from "../../lib/warnOnce";
 import "./PromoBanner.css";
 
 type StatsType =
@@ -46,6 +47,7 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
   onClose: () => void;
 }
 
+const warn = warnOnce("PromoBanner");
 const PromoBanner = (props: PromoBannerProps) => {
   const platform = usePlatform();
   const { bannerData = {}, onClose, ...restProps } = props;
@@ -55,6 +57,12 @@ const PromoBanner = (props: PromoBannerProps) => {
       ? parseInt(bannerData.ageRestrictions)
       : bannerData.ageRestriction;
 
+  if (bannerData.ageRestriction && process.env.NODE_ENV === "development") {
+    warn(
+      "Свойство bannerData.ageRestriction устарело и будет удалено в 5.0.0. Используйте bannerData.ageRestrictions"
+    );
+  }
+
   const [currentPixel, setCurrentPixel] = React.useState("");
 
   const statsPixels = React.useMemo(

package/src/components/Root/Root.tsx

@@ -15,8 +15,6 @@ import { useTimeout } from "../../hooks/useTimeout";
 import { usePlatform } from "../../hooks/usePlatform";
 import "./Root.css";
 
-const warn = warnOnce("Root");
-
 export interface RootProps
   extends React.HTMLAttributes<HTMLDivElement>,
     NavIdProps {
@@ -43,6 +41,7 @@ export interface RootState {
   prevView?: string;
 }
 
+const warn = warnOnce("Root");
 const Root: React.FC<RootProps> = ({
   popout = null,
   modal,
@@ -135,6 +134,17 @@ const Root: React.FC<RootProps> = ({
     }
   };
 
+  if (process.env.NODE_ENV === "development") {
+    popout &&
+      warn(
+        "Свойство popout устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
+      );
+    modal &&
+      warn(
+        "Свойство modal устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
+      );
+  }
+
   return (
     <div
       {...restProps}

package/src/components/Search/Search.tsx

@@ -7,13 +7,14 @@ import {
   Icon16Clear,
   Icon24Cancel,
 } from "@vkontakte/icons";
-import { IOS, VKCOM } from "../../lib/platform";
+import { IOS, VKCOM, ANDROID } from "../../lib/platform";
 import { HasPlatform, HasRef } from "../../types";
 import { Touch, TouchEvent } from "../Touch/Touch";
 import { VKUITouchEvent } from "../../lib/touch";
 import { noop } from "../../lib/utils";
 import Text from "../Typography/Text/Text";
 import Title from "../Typography/Title/Title";
+import Headline from "../Typography/Headline/Headline";
 import Separator from "../Separator/Separator";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
@@ -21,6 +22,36 @@ import "./Search.css";
 
 export type InputRef = (element: HTMLInputElement) => void;
 
+interface SearchPlaceholderTypographyProps
+  extends HasPlatform,
+    React.HTMLAttributes<HTMLElement> {}
+
+const SearchPlaceholderTypography: React.FC<
+  SearchPlaceholderTypographyProps
+> = ({ platform, children, ...restProps }) => {
+  switch (platform) {
+    case IOS:
+      return (
+        <Title {...restProps} level="3" weight="3">
+          {children}
+        </Title>
+      );
+    case VKCOM:
+      return (
+        <Text {...restProps} weight="regular">
+          {children}
+        </Text>
+      );
+    case ANDROID:
+    default:
+      return (
+        <Headline {...restProps} weight="regular">
+          {children}
+        </Headline>
+      );
+  }
+};
+
 export interface SearchProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
     HasRef<HTMLInputElement>,
@@ -118,19 +149,12 @@ const Search: React.FC<SearchProps> = ({
           <div vkuiClass="Search__placeholder">
             <div vkuiClass="Search__placeholder-in">
               {before}
-              {platform === VKCOM ? (
-                <Text vkuiClass="Search__placeholder-text" weight="regular">
-                  {placeholder}
-                </Text>
-              ) : (
-                <Title
-                  vkuiClass="Search__placeholder-text"
-                  level="3"
-                  weight="regular"
-                >
-                  {placeholder}
-                </Title>
-              )}
+              <SearchPlaceholderTypography
+                vkuiClass="Search__placeholder-text"
+                platform={platform}
+              >
+                {placeholder}
+              </SearchPlaceholderTypography>
             </div>
             {isFocused && platform === IOS && after && (
               <div vkuiClass="Search__after-width">{after}</div>

package/src/components/SegmentedControl/Readme.md

@@ -0,0 +1,94 @@
+Горизонтальный контрол, который позволяет выбрать одну опцию-сегмент из представленного списка.
+
+Для чего может быть нужен:
+
+- для навигации — как аналог `<Tabs/>`;
+- в формах — как аналог `<RadioGroup/>`.
+
+Сегменты, как кнопки, могут содержать текст и/или иконки.
+
+Сегментов не должно быть много: чем они больше — тем проще между ними переключаться. [Apple ограничивает количество сегментов на iPhone пятью](https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/).
+
+```jsx
+const [reportType, changeReportType] = React.useState("idea");
+const [selectedSex, changeSelectedSex] = React.useState();
+
+<View activePanel="progress">
+  <Panel id="progress">
+    <PanelHeader>SegmentedControl</PanelHeader>
+    <Group header={<Header subtitle="Режим просмотра">Навигация</Header>}>
+      <Div>
+        <SegmentedControl
+          options={[
+            {
+              label: <Icon24List aria-hidden="true" />,
+              value: "list",
+              "aria-label": "Список",
+            },
+            {
+              label: <Icon16GridOfFour aria-hidden="true" />,
+              value: "grid",
+              "aria-label": "Плитки",
+            },
+          ]}
+        />
+      </Div>
+    </Group>
+    <Group header={<Header>Форма</Header>}>
+      <FormItem
+        top="Тип репорта"
+        bottom={`Controlled; name="report-type", size="m"`}
+      >
+        <SegmentedControl
+          size="m"
+          name="report-type"
+          value={reportType}
+          onChange={(value) => changeReportType(value)}
+          options={[
+            {
+              label: "Баг",
+              value: "bug",
+            },
+            {
+              label: "Идея",
+              value: "idea",
+            },
+            {
+              label: "Другое",
+              value: "other",
+            },
+          ]}
+        />
+      </FormItem>
+      <FormItem
+        top={
+          <React.Fragment>
+            Пол{selectedSex && <span>: {selectedSex}</span>}
+          </React.Fragment>
+        }
+        bottom={`Uncontrolled; name="sex", defaultValue="none", size="l"`}
+      >
+        <SegmentedControl
+          name="sex"
+          defaultValue="none"
+          onChange={(value) => changeSelectedSex(value)}
+          options={[
+            {
+              label: "Женский",
+              value: "female",
+            },
+            {
+              label: "Мужской",
+              value: "male",
+            },
+            {
+              label: "Любой",
+              value: "none",
+            },
+          ]}
+        />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>;
+```

package/src/components/SegmentedControl/SegmentedControl.css

@@ -0,0 +1,42 @@
+.SegmentedControl {
+  height: 36px;
+  padding: 2px;
+  border-radius: var(--vkui--size_border_radius--regular);
+  background-color: var(--vkui--color_background_secondary);
+  box-sizing: border-box;
+}
+
+.SegmentedControl--l {
+  height: 44px;
+}
+
+.SegmentedControl__in {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  transition: all 100ms ease-out;
+  border-radius: inherit;
+}
+
+.SegmentedControl__slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: var(--vkui--color_background_modal);
+  transition: transform 150ms;
+  transform-origin: 0 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 0.5px var(--vkui--color_image_border_alpha),
+    0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
+}
+
+.SegmentedControl__option {
+  position: relative;
+  flex: 1;
+  display: block;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+}

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { generateRandomId, noop } from "../../lib/utils";
+import { warnOnce } from "../../lib/warnOnce";
+import { SegmentedControlOption } from "./SegmentedControlOption/SegmentedControlOption";
+import { HasRootRef } from "../../types";
+import "./SegmentedControl.css";
+
+export type SegmentedControlValue = string | number | undefined;
+
+export interface SegmentedControlOptionInterface
+  extends Omit<React.HTMLAttributes<HTMLElement>, "label"> {
+  label: React.ReactChild;
+  value: SegmentedControlValue;
+}
+
+export interface SegmentedControlProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+    HasRootRef<HTMLDivElement> {
+  options: SegmentedControlOptionInterface[];
+  size?: "m" | "l";
+  name?: string;
+  onChange?: (value: SegmentedControlValue) => void;
+  value?: SegmentedControlValue;
+  defaultValue?: SegmentedControlValue;
+}
+
+const warn = warnOnce("SegmentedControl");
+export const SegmentedControl: React.FC<SegmentedControlProps> = ({
+  size = "l",
+  name,
+  options,
+  getRootRef,
+  onChange = noop,
+  value,
+  defaultValue,
+  children,
+  ...restProps
+}) => {
+  let initialValue = defaultValue ?? value;
+
+  if (!initialValue) {
+    initialValue = options[0]?.value;
+  }
+
+  const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);
+  const [activeValue, updateActiveValue] =
+    React.useState<SegmentedControlValue>(initialValue);
+
+  const nameRef = React.useRef<string>(name ?? generateRandomId());
+
+  useIsomorphicLayoutEffect(() => {
+    const _activeOptionIdx = options.findIndex(
+      (option) => option.value === activeValue
+    );
+
+    if (_activeOptionIdx === -1 && process.env.NODE_ENV === "development") {
+      warn("defaultValue: такого значения нет среди опций!");
+    }
+
+    updateActiveOptionIdx(_activeOptionIdx);
+  }, [activeValue, options]);
+
+  const translateX = `translateX(${100 * activeOptionIdx}%)`;
+
+  const handleOnChange = (value: SegmentedControlValue) => {
+    updateActiveValue(value);
+    onChange(value);
+  };
+
+  return (
+    <div
+      {...restProps}
+      vkuiClass={classNames("SegmentedControl", `SegmentedControl--${size}`)}
+      ref={getRootRef}
+    >
+      <div role="radiogroup" vkuiClass="SegmentedControl__in">
+        {activeOptionIdx > -1 && (
+          <div
+            aria-hidden="true"
+            vkuiClass="SegmentedControl__slider"
+            style={{
+              width: `${100 / options.length}%`,
+              transform: translateX,
+              WebkitTransform: translateX,
+            }}
+          />
+        )}
+        {options.map(({ label, ...optionProps }) => (
+          <SegmentedControlOption
+            key={`${optionProps.value}`}
+            {...optionProps}
+            vkuiClass="SegmentedControl__option"
+            name={nameRef.current}
+            checked={activeValue === optionProps.value}
+            onChange={() => handleOnChange(optionProps.value)}
+          >
+            {label}
+          </SegmentedControlOption>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css

@@ -0,0 +1,30 @@
+.SegmentedControlOption {
+  height: 100%;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: var(--vkui--color_text_primary);
+  transition: color 100ms ease-out;
+  user-select: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  appearance: none;
+}
+
+.SegmentedControlOption .Icon {
+  color: var(--vkui--color_icon_secondary);
+}
+
+.SegmentedControlOption:hover {
+  opacity: 0.5;
+}
+
+.SegmentedControlOption__content {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+}

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { useFocusVisible } from "../../../hooks/useFocusVisible";
+import { callMultiple } from "../../../lib/callMultiple";
+import { classNames } from "../../../lib/classNames";
+import { FocusVisible } from "../../FocusVisible/FocusVisible";
+import Text from "../../Typography/Text/Text";
+import {
+  VisuallyHiddenInput,
+  VisuallyHiddenInputProps,
+} from "../../VisuallyHiddenInput/VisuallyHiddenInput";
+import "./SegmentedControlOption.css";
+
+export const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({
+  className,
+  style,
+  children,
+  ...restProps
+}) => {
+  const { focusVisible, onBlur, onFocus } = useFocusVisible();
+
+  return (
+    <label
+      className={className}
+      style={style}
+      vkuiClass={classNames("SegmentedControlOption", {
+        "SegmentedControlOption--checked": restProps.checked,
+        "SegmentedControlOption--focus-visible": focusVisible,
+      })}
+    >
+      <VisuallyHiddenInput
+        {...restProps}
+        type="radio"
+        onBlur={callMultiple(onBlur, restProps.onBlur)}
+        onFocus={callMultiple(onFocus, restProps.onFocus)}
+      />
+      <Text vkuiClass="SegmentedControlOption__content" weight="medium">
+        {children}
+      </Text>
+      <FocusVisible mode="inside" />
+    </label>
+  );
+};

package/src/components/Select/Select.tsx

@@ -2,13 +2,14 @@ import * as React from "react";
 import NativeSelect from "../NativeSelect/NativeSelect";
 import CustomSelect, { CustomSelectProps } from "../CustomSelect/CustomSelect";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
-import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 
-export interface SelectProps
-  extends CustomSelectProps,
-    AdaptivityContextInterface {}
+export interface SelectProps extends CustomSelectProps, AdaptivityProps {}
 
-const Select: React.FunctionComponent<SelectProps> = ({
+const Select: React.FC<SelectProps & AdaptivityContextInterface> = ({
   hasMouse,
   ...props
 }: SelectProps) => {

package/src/components/SimpleCell/SimpleCell.tsx

@@ -4,7 +4,7 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { Icon24Chevron } from "@vkontakte/icons";
-import { IOS } from "../../lib/platform";
+import { ANDROID, IOS } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
@@ -12,6 +12,7 @@ import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
 import Title from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
 import Subhead from "../Typography/Subhead/Subhead";
+import Headline from "../Typography/Headline/Headline";
 import "./SimpleCell.css";
 
 export interface SimpleCellOwnProps extends HasComponent {
@@ -55,12 +56,15 @@ const SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (
   props: SimpleCellTypographyProps
 ) => {
   const { sizeY } = useAdaptivity();
+  const platform = usePlatform();
 
-  return sizeY === SizeType.COMPACT ? (
-    <Text Component="span" weight="regular" {...props} />
-  ) : (
-    <Title Component="span" level="3" weight="regular" {...props} />
-  );
+  if (sizeY === SizeType.COMPACT) {
+    return <Text Component="span" weight="regular" {...props} />;
+  } else if (platform === ANDROID) {
+    return <Headline Component="span" weight="regular" {...props} />;
+  } else {
+    return <Title Component="span" level="3" weight="3" {...props} />;
+  }
 };
 
 const SimpleCell: React.FC<SimpleCellProps> = ({

package/src/components/SliderSwitch/Readme.md

@@ -1,3 +1,7 @@
+> **Deprecated:** этот компонент устарел и будет удален в 5.0.0.
+>
+> Используйте [`SegmentedControl`](#/SegmentedControl).
+
 ```jsx
 <View activePanel="progress">
   <Panel id="progress">

package/src/components/SliderSwitch/SliderSwitch.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
-import SliderSwitchButton from "./SliderSwitchButton";
+import { SliderSwitchButton } from "./SliderSwitchButton";
 import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
 import { HasPlatform } from "../../types";
 import "./SliderSwitch.css";
 
@@ -26,8 +27,11 @@ interface SliderSwitchState {
   hoveredOptionId: number;
 }
 
-// eslint-disable-next-line import/no-default-export
-export default class SliderSwitch extends React.Component<
+const warn = warnOnce("SliderSwitch");
+/**
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`SegmentedControl`](#/SegmentedControl).
+ */
+class SliderSwitch extends React.Component<
   SliderSwitchProps,
   SliderSwitchState
 > {
@@ -139,6 +143,14 @@ export default class SliderSwitch extends React.Component<
     return null;
   }
 
+  componentDidMount(): void {
+    if (process.env.NODE_ENV === "development") {
+      warn(
+        "Этот компонент устарел и будет удален в 5.0.0. Используйте SegmentedControl."
+      );
+    }
+  }
+
   public render() {
     const {
       name,
@@ -193,3 +205,5 @@ export default class SliderSwitch extends React.Component<
     );
   }
 }
+
+export { SliderSwitch };