@vkontakte/vkui 4.26.0 → 4.27.2

package/src/components/Typography/Subhead/Subhead.tsx

@@ -1,29 +1,45 @@
 import * as React from "react";
 import { HasComponent } from "../../../types";
-import { usePlatform } from "../../../hooks/usePlatform";
 import { classNames } from "../../../lib/classNames";
-import { getClassName } from "../../../helpers/getClassName";
+import { warnOnce } from "../../../lib/warnOnce";
+import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import "./Subhead.css";
 
 export interface SubheadProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasComponent {
-  weight: "regular" | "medium" | "semibold" | "bold";
+  /**
+   * Начертания "regular", "medium", "semibold" и "bold" устарели и будут удалены в 5.0.0.
+   */
+  weight?: "regular" | "medium" | "semibold" | "bold" | "1" | "2" | "3";
 }
 
+const warn = warnOnce("Subhead");
+
 const Subhead: React.FC<SubheadProps> = ({
   children,
-  weight = "regular",
-  Component = "h4",
+  weight,
+  Component = "h5",
   ...restProps
 }: SubheadProps) => {
-  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
+  if (process.env.NODE_ENV === "development") {
+    if (
+      weight &&
+      ["heavy", "bold", "semibold", "medium", "regular"].includes(weight)
+    )
+      warn(
+        `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
+      );
+  }
 
   return (
     <Component
       {...restProps}
       vkuiClass={classNames(
-        getClassName("Subhead", platform),
+        "Subhead",
+        `Subhead--sizeY-${sizeY}`,
         `Subhead--w-${weight}`
       )}
     >

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

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

package/src/components/Typography/Title/Title.css

@@ -4,47 +4,56 @@
 }
 
 .Title--l-1 {
-  font-size: 24px;
-  line-height: 28px;
+  font-size: var(--vkui--font_title1--font_size--regular);
+  line-height: var(--vkui--font_title1--line_height--regular);
+  font-weight: var(--vkui--font_title1--font_weight--regular);
 }
 
 .Title--l-2 {
-  font-size: 20px;
-  line-height: 24px;
+  font-size: var(--vkui--font_title2--font_size--regular);
+  line-height: var(--vkui--font_title2--line_height--regular);
+  font-weight: var(--vkui--font_title2--font_weight--regular);
 }
 
 .Title--l-3 {
-  font-size: 17px;
-  line-height: 22px;
+  font-size: var(--vkui--font_title3--font_size--regular);
+  line-height: var(--vkui--font_title3--line_height--regular);
+  font-weight: var(--vkui--font_title3--font_weight--regular);
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Title--w-regular {
   font-weight: 400;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Title--w-medium {
   font-weight: 500;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Title--w-semibold {
   font-weight: 600;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Title--w-bold {
   font-weight: 700;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Title--w-heavy {
   font-weight: 800;
 }
 
-/**
- * ANDROID
- */
-.Title--android.Title--w-semibold {
-  font-weight: 500;
+.Title--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
 }
 
-.Title--android.Title--w-heavy {
-  font-weight: 700;
+.Title--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Title--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
 }

package/src/components/Typography/Title/Title.tsx

@@ -1,51 +1,56 @@
 import * as React from "react";
 import { HasComponent } from "../../../types";
-import { usePlatform } from "../../../hooks/usePlatform";
 import { classNames } from "../../../lib/classNames";
-import { getClassName } from "../../../helpers/getClassName";
-import { ANDROID } from "../../../lib/platform";
-import Headline, { HeadlineProps } from "../Headline/Headline";
+import { warnOnce } from "../../../lib/warnOnce";
 import "./Title.css";
 
 export interface TitleProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasComponent {
-  weight: "heavy" | "bold" | "semibold" | "medium" | "regular";
+  /**
+   * Начертания "heavy", "bold", "semibold", "medium" и "regular" устарели и будут удалены в 5.0.0.
+   */
+  weight?:
+    | "heavy"
+    | "bold"
+    | "semibold"
+    | "medium"
+    | "regular"
+    | "1"
+    | "2"
+    | "3";
   level: "1" | "2" | "3";
 }
 
+const warn = warnOnce("Title");
+
 const Title: React.FC<TitleProps> = ({
   children,
-  weight = "regular",
+  weight,
   level = "1",
   Component,
   ...restProps
 }: TitleProps) => {
-  const platform = usePlatform();
-
   if (!Component) {
     Component = ("h" + level) as React.ElementType;
   }
 
-  if (platform === ANDROID && level === "3") {
-    const headlineWeight: HeadlineProps["weight"] =
-      weight === "regular" ? weight : "medium";
-
-    return (
-      <Headline Component={Component} {...restProps} weight={headlineWeight}>
-        {children}
-      </Headline>
-    );
+  if (process.env.NODE_ENV === "development") {
+    if (
+      weight &&
+      ["heavy", "bold", "semibold", "medium", "regular"].includes(weight)
+    )
+      warn(
+        `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
+      );
   }
 
   return (
     <Component
       {...restProps}
-      vkuiClass={classNames(
-        getClassName("Title", platform),
-        `Title--w-${weight}`,
-        `Title--l-${level}`
-      )}
+      vkuiClass={classNames("Title", `Title--l-${level}`, {
+        [`Title--w-${weight}`]: !!weight,
+      })}
     >
       {children}
     </Component>

package/src/components/UsersStack/Readme.md

@@ -82,7 +82,7 @@
               getAvatarUrl("user_va"),
               getAvatarUrl("user_tc"),
             ]}
-            style={{ color: "#fff", padding: "8px 0" }}
+            style={{ color: "#fff", padding: "8px 16px" }}
           >
             Проголосовали 2 176 человек
           </UsersStack>

package/src/components/UsersStack/UsersStack.tsx

@@ -84,7 +84,7 @@ const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
         )}
       </div>
       {hasReactNode(children) && (
-        <Subhead Component="span" weight="regular" vkuiClass="UsersStack__text">
+        <Subhead Component="span" vkuiClass="UsersStack__text">
           {children}
         </Subhead>
       )}

package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.css

@@ -0,0 +1,9 @@
+.VisuallyHiddenInput {
+  position: absolute;
+  height: 1px;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  opacity: 0;
+}

package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useExternRef } from "../../hooks/useExternRef";
+import { HasRef } from "../../types";
+import "./VisuallyHiddenInput.css";
+
+export interface VisuallyHiddenInputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRef<HTMLInputElement> {}
+
+/**
+ * @description
+ * Обертка над обычным `<input/>`; дает
+ * скрыть его визуально и оставить
+ * доступным для ассистивных технологий.
+ */
+export const VisuallyHiddenInput: React.FC<VisuallyHiddenInputProps> = ({
+  getRef,
+  ...restProps
+}) => {
+  const inputRef = useExternRef(getRef);
+
+  return (
+    <input {...restProps} vkuiClass="VisuallyHiddenInput" ref={inputRef} />
+  );
+};

package/src/hooks/useAppearance.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
+import { AppearanceProviderContext } from "../components/AppearanceProvider/AppearanceProviderContext";
 
-export const useAppearance = () =>
-  React.useContext(ConfigProviderContext).appearance;
+export const useAppearance = () => React.useContext(AppearanceProviderContext);

package/src/hooks/usePlatform.ts

@@ -3,7 +3,7 @@ import { PlatformType } from "../lib/platform";
 import { SSRContext } from "../lib/SSR";
 import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
 
-export function usePlatform(): PlatformType | undefined {
+export function usePlatform(): PlatformType {
   const ssrContext = React.useContext(SSRContext);
   const { platform } = React.useContext(ConfigProviderContext);
   return ssrContext.platform || platform;

package/src/index.ts

@@ -80,11 +80,11 @@ export { default as Button } from "./components/Button/Button";
 export type { ButtonProps } from "./components/Button/Button";
 export { default as IconButton } from "./components/IconButton/IconButton";
 export type { IconButtonProps } from "./components/IconButton/IconButton";
-export { default as Card } from "./components/Card/Card";
+export { Card } from "./components/Card/Card";
 export type { CardProps } from "./components/Card/Card";
 export { default as CardGrid } from "./components/CardGrid/CardGrid";
 export type { CardGridProps } from "./components/CardGrid/CardGrid";
-export { default as CardScroll } from "./components/CardScroll/CardScroll";
+export { CardScroll } from "./components/CardScroll/CardScroll";
 export type { CardScrollProps } from "./components/CardScroll/CardScroll";
 export { default as ContentCard } from "./components/ContentCard/ContentCard";
 export type { ContentCardProps } from "./components/ContentCard/ContentCard";
@@ -94,7 +94,7 @@ export { default as Header } from "./components/Header/Header";
 export type { HeaderProps } from "./components/Header/Header";
 export { default as Group } from "./components/Group/Group";
 export type { GroupProps } from "./components/Group/Group";
-export { default as Gradient } from "./components/Gradient/Gradient";
+export { Gradient } from "./components/Gradient/Gradient";
 export type { GradientProps } from "./components/Gradient/Gradient";
 export { default as List } from "./components/List/List";
 export { Cell } from "./components/Cell/Cell";
@@ -176,7 +176,7 @@ export { default as File } from "./components/File/File";
 export type { FileProps } from "./components/File/File";
 export { default as Input } from "./components/Input/Input";
 export type { InputProps } from "./components/Input/Input";
-export { default as Chip } from "./components/Chip/Chip";
+export { Chip } from "./components/Chip/Chip";
 export type { ChipProps } from "./components/Chip/Chip";
 export { default as ChipsInput } from "./components/ChipsInput/ChipsInput";
 export type { ChipsInputProps } from "./components/ChipsInput/ChipsInput";
@@ -210,11 +210,17 @@ export type {
   DatePickerProps,
   DatePickerDateFormat,
 } from "./components/DatePicker/DatePicker";
-export { default as SliderSwitch } from "./components/SliderSwitch/SliderSwitch";
+export { SliderSwitch } from "./components/SliderSwitch/SliderSwitch";
 export type {
   SliderSwitchProps,
   SliderSwitchOptionInterface,
 } from "./components/SliderSwitch/SliderSwitch";
+export { SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
+export type {
+  SegmentedControlProps,
+  SegmentedControlOptionInterface,
+  SegmentedControlValue,
+} from "./components/SegmentedControl/SegmentedControl";
 
 /**
  * Helpers

package/src/lib/utils.ts

@@ -88,3 +88,9 @@ export function getTitleFromChildren(children: React.ReactNode): string {
 
   return label;
 }
+
+export const generateRandomId = () => {
+  return Math.random()
+    .toString(36)
+    .replace(/[^a-z]+/g, "");
+};

package/src/styles/components.css

@@ -126,6 +126,9 @@
 @import "../components/SliderSwitch/SliderSwitch.css";
 @import "../components/Popper/Popper.css";
 @import "../components/CustomSelectDropdown/CustomSelectDropdown.css";
+@import "../components/SegmentedControl/SegmentedControl.css";
+@import "../components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css";
+@import "../components/VisuallyHiddenInput/VisuallyHiddenInput.css";
 
 /* Advertisement */
 @import "../components/PromoBanner/PromoBanner.css";

package/src/tokenized/index.ts

@@ -1,2 +1,24 @@
 export { default as Button } from "../components/Button/Button";
 export type { ButtonProps } from "../components/Button/Button";
+
+export { Card } from "../components/Card/Card";
+export type { CardProps } from "../components/Card/Card";
+
+export { CardScroll } from "../components/CardScroll/CardScroll";
+export type { CardScrollProps } from "../components/CardScroll/CardScroll";
+
+export { default as HorizontalScroll } from "../components/HorizontalScroll/HorizontalScroll";
+export type { HorizontalScrollProps } from "../components/HorizontalScroll/HorizontalScroll";
+
+export { SegmentedControl } from "../components/SegmentedControl/SegmentedControl";
+export type {
+  SegmentedControlProps,
+  SegmentedControlOptionInterface,
+  SegmentedControlValue,
+} from "../components/SegmentedControl/SegmentedControl";
+
+export { default as Title } from "../components/Typography/Title/Title";
+export type { TitleProps } from "../components/Typography/Title/Title";
+
+export { default as Subhead } from "../components/Typography/Subhead/Subhead";
+export type { SubheadProps } from "../components/Typography/Subhead/Subhead";