@vkontakte/vkui 4.26.0 → 4.27.2

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> = ({
@@ -101,11 +105,7 @@ const SimpleCell: React.FC<SimpleCellProps> = ({
           )}
         </div>
         {description && (
-          <Subhead
-            Component="span"
-            weight="regular"
-            vkuiClass="SimpleCell__description"
-          >
+          <Subhead Component="span" vkuiClass="SimpleCell__description">
             {description}
           </Subhead>
         )}

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/SubnavigationButton/SubnavigationButton.tsx

@@ -36,7 +36,7 @@ const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({
   ...restProps
 }: SubnavButtonTypographyProps) => {
   if (textLevel === 1) {
-    return <Subhead weight="regular" {...restProps} />;
+    return <Subhead {...restProps} />;
   }
 
   return (

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

package/src/components/TextTooltip/TextTooltip.tsx

@@ -37,18 +37,14 @@ export const TextTooltip: React.FC<TextTooltipProps> = ({
           {hasReactNode(header) && (
             <Subhead
               Component="span"
-              weight="medium"
+              weight="2"
               vkuiClass="TextTooltip__header"
             >
               {header}
             </Subhead>
           )}
           {hasReactNode(text) && (
-            <Subhead
-              Component="span"
-              weight="regular"
-              vkuiClass="TextTooltip__text"
-            >
+            <Subhead Component="span" vkuiClass="TextTooltip__text">
               {text}
             </Subhead>
           )}

package/src/components/Tooltip/Tooltip.tsx

@@ -58,15 +58,11 @@ const SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(
           />
           <div vkuiClass="Tooltip__content">
             {header && (
-              <Subhead weight="semibold" vkuiClass="Tooltip__title">
+              <Subhead weight="1" vkuiClass="Tooltip__title">
                 {header}
               </Subhead>
             )}
-            {text && (
-              <Subhead weight="regular" vkuiClass="Tooltip__text">
-                {text}
-              </Subhead>
-            )}
+            {text && <Subhead vkuiClass="Tooltip__text">{text}</Subhead>}
           </div>
         </div>
       </div>

package/src/components/Typography/Subhead/Readme.md

@@ -1,27 +1,21 @@
-Упрощения в Android-версии (происходят автоматически):
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Subhead>Subhead</Subhead>
+</div>
+```
+
+## Кастомизация
 
-- `semibold` превращается в `medium`
+Есть возможность переопределить жирность.
 
-```jsx
-<View activePanel="test">
-  <Panel id="test">
-    <PanelHeader>Subhead</PanelHeader>
-    <Group>
-      <Div>
-        <Subhead weight="regular" style={{ marginBottom: 16 }}>
-          Subhead regular
-        </Subhead>
-        <Subhead weight="medium" style={{ marginBottom: 16 }}>
-          Subhead medium
-        </Subhead>
-        <Subhead weight="semibold" style={{ marginBottom: 16 }}>
-          Subhead semibold
-        </Subhead>
-        <Subhead weight="bold" style={{ marginBottom: 16 }}>
-          Subhead bold
-        </Subhead>
-      </Div>
-    </Group>
-  </Panel>
-</View>
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Subhead weight="1" style={{ marginBottom: 16 }}>
+    Subhead weight 1
+  </Subhead>
+  <Subhead weight="2" style={{ marginBottom: 16 }}>
+    Subhead weight 2
+  </Subhead>
+  <Subhead weight="3">Subhead weight 3</Subhead>
+</div>
 ```

package/src/components/Typography/Subhead/Subhead.css

@@ -1,28 +1,43 @@
 .Subhead {
   margin: 0;
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--vkui--font_subhead--font_size--regular);
+  line-height: var(--vkui--font_subhead--line_height--regular);
+  font-weight: var(--vkui--font_subhead--font_weight--regular);
 }
 
+.Subhead--sizeY-compact {
+  font-size: var(--vkui--font_subhead--font_size--compact);
+  line-height: var(--vkui--font_subhead--line_height--compact);
+}
+
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-regular {
   font-weight: 400;
 }
 
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-medium {
   font-weight: 500;
 }
 
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-semibold {
   font-weight: 600;
 }
 
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-bold {
   font-weight: 700;
 }
 
-/**
- * ANDROID
- */
-.Subhead--android.Subhead--w-semibold {
-  font-weight: 500;
+.Subhead--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Subhead--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Subhead--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
 }