@vkontakte/vkui 4.26.0 → 4.27.0

package/src/components/ModalRoot/Readme.md

@@ -189,7 +189,7 @@ const App = withPlatform(
                 <Title
                   style={{ marginBottom: 8, marginTop: 20 }}
                   level="2"
-                  weight="medium"
+                  weight="2"
                 >
                   {this.randomUser.first_name + " " + this.randomUser.last_name}
                 </Title>

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -27,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>
     );

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/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/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 };

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -14,7 +14,10 @@ export interface ButtonProps
   hovered?: boolean;
 }
 
-const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
+/**
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0.
+ */
+export const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
   props: ButtonProps
 ) => {
   const { active, hovered, children, getRootRef, ...restProps } = props;
@@ -48,6 +51,3 @@ const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
     </Tappable>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default SliderSwitchButton;

package/src/components/Switch/Switch.css

@@ -8,18 +8,6 @@
   cursor: default;
 }
 
-.Switch__self {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  opacity: 0;
-}
-
 .Switch__pseudo {
   position: relative;
   display: block;

package/src/components/Switch/Switch.tsx

@@ -3,22 +3,23 @@ import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { callMultiple } from "../../lib/callMultiple";
 import { usePlatform } from "../../hooks/usePlatform";
-import { HasRef, HasRootRef } from "../../types";
+import { HasRootRef } from "../../types";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { useExternRef } from "../../hooks/useExternRef";
+import {
+  VisuallyHiddenInput,
+  VisuallyHiddenInputProps,
+} from "../VisuallyHiddenInput/VisuallyHiddenInput";
 import { useFocusVisible } from "../../hooks/useFocusVisible";
 import { FocusVisible } from "../FocusVisible/FocusVisible";
 import "./Switch.css";
 
 export interface SwitchProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
-    HasRootRef<HTMLLabelElement>,
-    HasRef<HTMLInputElement> {}
+  extends VisuallyHiddenInputProps,
+    HasRootRef<HTMLLabelElement> {}
 
 export const Switch: React.FC<SwitchProps> = ({
   style,
   className,
-  getRef,
   getRootRef,
   ...restProps
 }: SwitchProps) => {
@@ -26,8 +27,6 @@ export const Switch: React.FC<SwitchProps> = ({
   const { sizeY } = useAdaptivity();
   const { focusVisible, onBlur, onFocus } = useFocusVisible();
 
-  const inputRef = useExternRef(getRef);
-
   return (
     <label
       vkuiClass={classNames(
@@ -43,11 +42,10 @@ export const Switch: React.FC<SwitchProps> = ({
       ref={getRootRef}
       role="presentation"
     >
-      <input
+      <VisuallyHiddenInput
         {...restProps}
         type="checkbox"
         vkuiClass="Switch__self"
-        ref={inputRef}
         onBlur={callMultiple(onBlur, restProps.onBlur)}
         onFocus={callMultiple(onFocus, restProps.onFocus)}
       />