@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/SubnavigationButton/Readme.md

@@ -1,128 +0,0 @@
-Компонент, используемый в качестве кнопок в [SubnavigationBar](#/SubnavigationBar).
-
-Этот компонент может использоваться:
-
-- В качестве ссылки для создания быстрой и заметной точки входа в важный подраздел.
-- В качестве кнопки, для управления контентом на странице. Например, показать модальную страницу с фильтрами или сразу активировать какой-то фильтр.
-
-```jsx
-const SubnavigationButtonExample = () => {
-  return (
-    <View activePanel="example">
-      <Panel id="example">
-        <PanelHeader>SubnavigationButton</PanelHeader>
-        <Group>
-          <SubnavigationBar>
-            <SubnavigationButton before={<Icon24Filter />} expandable>
-              Фильтры
-            </SubnavigationButton>
-
-            <SubnavigationButton
-              before={<Icon24Filter />}
-              selected
-              expandable
-              after={
-                <Counter mode="primary" size="s">
-                  3
-                </Counter>
-              }
-            >
-              Фильтры
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline />}
-              size="l"
-            >
-              Сканировать QR
-            </SubnavigationButton>
-
-            <SubnavigationButton before={<Icon24UserAddOutline />} size="l">
-              Добавить друга
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton>Мой размер</SubnavigationButton>
-
-            <SubnavigationButton selected>Мой размер</SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              after={
-                <Counter mode="prominent" size="s">
-                  3
-                </Counter>
-              }
-            >
-              Новинки
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24Filter />}
-              selected
-              expandable
-              after={
-                <Counter mode="primary" size="s">
-                  3
-                </Counter>
-              }
-            >
-              Фильтры
-            </SubnavigationButton>
-
-            <SubnavigationButton selected>Мой размер</SubnavigationButton>
-
-            <SubnavigationButton>В наличии</SubnavigationButton>
-
-            <SubnavigationButton before={<Icon24FavoriteOutline />}>
-              Избранное
-            </SubnavigationButton>
-          </SubnavigationBar>
-        </Group>
-
-        <Group>
-          <Header>Уменьшение шрифта</Header>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline />}
-              size="l"
-              textLevel={1}
-            >
-              Сканировать QR
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline />}
-              size="l"
-              textLevel={2}
-            >
-              Сканировать QR
-            </SubnavigationButton>
-          </SubnavigationBar>
-
-          <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline />}
-              size="l"
-              textLevel={3}
-            >
-              Сканировать QR
-            </SubnavigationButton>
-          </SubnavigationBar>
-        </Group>
-      </Panel>
-    </View>
-  );
-};
-
-<SubnavigationButtonExample />;
-```

package/src/components/SubnavigationButton/SubnavigationButton.css

@@ -1,103 +0,0 @@
-.SubnavigationButton {
-  display: inline-block;
-  background-color: var(--modal_card_background);
-  color: var(--text_primary);
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 2px 24px rgba(0, 0, 0, 0.08);
-  user-select: none;
-}
-
-.SubnavigationButton__in {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.SubnavigationButton__before {
-  margin-right: 8px;
-  color: var(--accent);
-}
-
-.SubnavigationButton__before .Icon--24 {
-  margin-left: -4px;
-}
-
-.SubnavigationButton__label {
-  flex-grow: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.SubnavigationButton__after {
-  margin-left: 8px;
-}
-
-.SubnavigationButton__expandableIcon {
-  margin-left: 8px;
-  margin-top: 1px; /* Смещает иконку относительно текста */
-  color: var(--icon_secondary);
-}
-
-/**
- * selected
- */
-
-.SubnavigationButton--selected {
-  background-color: var(--button_primary_background);
-  color: var(--button_primary_foreground);
-}
-
-.SubnavigationButton--selected .SubnavigationButton__before {
-  color: inherit;
-}
-
-.SubnavigationButton--selected .Counter {
-  background-color: var(--button_primary_foreground);
-  color: var(--button_primary_background);
-}
-
-.SubnavigationButton--selected .SubnavigationButton__expandableIcon {
-  color: inherit;
-}
-
-/**
- * size m
- */
-
-.SubnavigationButton--m .SubnavigationButton__in {
-  height: 36px;
-  padding: 0 14px;
-}
-
-/**
- * size l
- */
-
-.SubnavigationButton--l .SubnavigationButton__in {
-  height: 44px;
-  padding: 0 14px;
-}
-
-/**
- * iOS
- */
-
-.SubnavigationButton--ios {
-  border-radius: 10px;
-}
-
-/**
- * Android
- */
-
-.SubnavigationButton--android {
-  border-radius: 8px;
-}
-
-/**
- * VKCOM
- */
-
-.SubnavigationButton--vkcom {
-  border-radius: 4px;
-}

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -1,105 +0,0 @@
-import * as React from "react";
-import { HasComponent } from "../../types";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { getTitleFromChildren, hasReactNode } from "../../lib/utils";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
-import { Icon16Dropdown } from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
-import Caption from "../Typography/Caption/Caption";
-import Subhead from "../Typography/Subhead/Subhead";
-import "./SubnavigationButton.css";
-
-export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
-  size?: "m" | "l";
-  selected?: boolean;
-  /**
-   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode="fixed" />`
-   */
-  textLevel?: 1 | 2 | 3;
-  /**
-   * Рекомендуется использовать только иконки с размером 24
-   */
-  before?: React.ReactNode;
-  /**
-   * Рекомендуется использовать только `<Counter size="s" />` или `<Badge />`
-   */
-  after?: React.ReactNode;
-  expandable?: boolean;
-}
-
-type SubnavButtonTypographyProps = Pick<SubnavigationButtonProps, "textLevel"> &
-  HasComponent;
-
-const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({
-  textLevel,
-  ...restProps
-}: SubnavButtonTypographyProps) => {
-  if (textLevel === 1) {
-    return <Subhead {...restProps} />;
-  }
-
-  return (
-    <Caption
-      level={textLevel === 2 ? "1" : "2"}
-      weight="regular"
-      {...restProps}
-    />
-  );
-};
-
-export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (
-  props: SubnavigationButtonProps
-) => {
-  const platform = usePlatform();
-  const {
-    size,
-    selected,
-    textLevel,
-    before,
-    after,
-    expandable,
-    children,
-    ...restProps
-  } = props;
-
-  return (
-    <Tappable
-      {...restProps}
-      hasActive={false}
-      focusVisibleMode="outside"
-      vkuiClass={classNames(
-        getClassName("SubnavigationButton", platform),
-        `SubnavigationButton--${size}`,
-        {
-          "SubnavigationButton--selected": selected,
-        }
-      )}
-      aria-label={getTitleFromChildren(children)}
-    >
-      <span vkuiClass="SubnavigationButton__in">
-        {hasReactNode(before) && (
-          <span vkuiClass="SubnavigationButton__before">{before}</span>
-        )}
-        <SubnavigationButtonTypography
-          textLevel={textLevel}
-          vkuiClass="SubnavigationButton__label"
-          Component="span"
-        >
-          {children}
-        </SubnavigationButtonTypography>
-        {hasReactNode(after) && (
-          <span vkuiClass="SubnavigationButton__after">{after}</span>
-        )}
-        {expandable && (
-          <Icon16Dropdown vkuiClass="SubnavigationButton__expandableIcon" />
-        )}
-      </span>
-    </Tappable>
-  );
-};
-
-SubnavigationButton.defaultProps = {
-  size: "m",
-  textLevel: 1,
-};

package/src/components/Switch/Readme.md

@@ -1,57 +0,0 @@
-Надстройка над `<input type="checkbox" />`. Компонент принимает все валидные для этого элемента свойства.
-
-```jsx
-<View activePanel="switch">
-  <Panel id="switch">
-    <PanelHeader>Switch</PanelHeader>
-    <Group>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch aria-label="Комментарии к записям" />}
-      >
-        Комментарии к записям
-      </Cell>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch defaultChecked aria-label="Ссылки" />}
-      >
-        Ссылки
-      </Cell>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch disabled aria-label="Фотоальбомы" />}
-      >
-        Фотоальбомы
-      </Cell>
-    </Group>
-    <Group header={<Header mode="secondary">Компактный вид</Header>}>
-      <AdaptivityProvider sizeY="compact">
-        <Cell
-          role={null}
-          disabled
-          after={<Switch aria-label="Комментарии к записям" />}
-        >
-          Комментарии к записям
-        </Cell>
-        <Cell
-          role={null}
-          disabled
-          after={<Switch defaultChecked aria-label="Ссылки" />}
-        >
-          Ссылки
-        </Cell>
-        <Cell
-          role={null}
-          disabled
-          after={<Switch disabled aria-label="Фотоальбомы" />}
-        >
-          Фотоальбомы
-        </Cell>
-      </AdaptivityProvider>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/Switch/Switch.css

@@ -1,198 +0,0 @@
-.Switch {
-  position: relative;
-  display: block;
-  cursor: pointer;
-}
-
-.Switch--disabled {
-  cursor: default;
-}
-
-.Switch__pseudo {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.Switch__pseudo::before {
-  position: absolute;
-  content: "";
-  top: -3px;
-  left: -3px;
-  border-radius: 50%;
-  box-sizing: border-box;
-}
-
-.Switch__self:checked + .Switch__pseudo::before {
-  transform: translateX(20px);
-}
-
-.Switch__self[disabled] + .Switch__pseudo {
-  opacity: 0.4;
-}
-
-/**
- * iOS
- */
-.Switch--ios .Switch__pseudo {
-  width: 51px;
-  height: 31px;
-  border: 2px solid transparent;
-  background: var(--placeholder_icon_background);
-  border-radius: 15px;
-}
-
-.Switch--ios.Switch--sizeY-compact .Switch__pseudo {
-  width: 47px;
-  height: 27px;
-  border-radius: 13px;
-}
-
-.Switch--ios .Switch__self:checked + .Switch__pseudo {
-  background: var(--accent);
-}
-
-.Switch--ios .Switch__pseudo::before {
-  top: 0;
-  left: 0;
-  width: 27px;
-  height: 27px;
-  background: var(--white);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06),
-    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
-}
-
-.Switch--ios.Switch--sizeY-compact .Switch__pseudo::before {
-  width: 23px;
-  height: 23px;
-}
-
-/**
- * Android & VKCOM
- */
-.Switch--android,
-.Switch--vkcom {
-  padding: 3px;
-}
-
-.Switch--android .Switch__pseudo::after,
-.Switch--vkcom .Switch__pseudo::after {
-  content: "";
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.Switch--android .Switch__self:checked + .Switch__pseudo::after,
-.Switch--vkcom .Switch__self:checked + .Switch__pseudo::after {
-  background: var(--accent);
-  opacity: 0.48;
-}
-
-/**
- * Android
- */
-.Switch--android .Switch__pseudo {
-  width: 34px;
-  height: 14px;
-}
-
-.Switch--android .Switch__pseudo::after {
-  background: #c6c5c5; /* todo: 1077 replace w/ a variable */
-  border-radius: 7px;
-}
-
-.Switch--android.Switch--sizeY-compact .Switch__pseudo {
-  width: 32px;
-  height: 12px;
-}
-
-.Switch--android.Switch--sizeY-compact .Switch__pseudo::after {
-  border-radius: 6px;
-}
-
-.Switch--android .Switch__pseudo::before {
-  width: 20px;
-  height: 20px;
-  background: #f1f1f1; /* todo: 1077 replace w/ a proper variable */
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
-}
-
-.Switch--android.Switch--sizeY-compact .Switch__pseudo::before {
-  width: 18px;
-  height: 18px;
-}
-
-.Switch--android .Switch__self:checked + .Switch__pseudo::before {
-  background: var(--accent);
-}
-
-.Switch--android.Switch--sizeY-compact
-  .Switch__self:checked
-  + .Switch__pseudo::before {
-  transform: translateX(19px);
-}
-
-/**
- * VKCOM
- */
-.Switch--vkcom .Switch__pseudo {
-  width: 28px;
-  height: 10px;
-}
-
-.Switch--vkcom .Switch__pseudo::after {
-  border-radius: 45px;
-  background: var(--icon_tertiary);
-  opacity: 0.48;
-}
-
-.Switch--vkcom .Switch__pseudo::before {
-  left: -2px;
-  width: 16px;
-  height: 16px;
-  background: var(--background_light);
-  border: 1px solid var(--icon_tertiary);
-  z-index: 1;
-}
-
-.Switch--vkcom .Switch__self:checked + .Switch__pseudo::before {
-  background: var(--accent);
-  border: none;
-  transform: translateX(16px);
-}
-
-/**
- * [a11y]
- * add animation for browsers that support prefers-reduced-motion
- * so that users with vestibular motion disorders have no problem
- * navigating accessible vkui apps via keyboard
- */
-@media (prefers-reduced-motion: no-preference) {
-  .Switch__pseudo::before {
-    transition: transform 0.1s ease;
-  }
-
-  .Switch--ios .Switch__pseudo {
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-  }
-
-  .Switch--ios .Switch__pseudo::before {
-    transition: transform 0.2s cubic-bezier(0.36, -0.24, 0.26, 1.32);
-  }
-
-  .Switch--android .Switch__pseudo::after,
-  .Switch--vkcom .Switch__pseudo::after {
-    transition: background-color 0.1s ease;
-  }
-}
-
-/**
- * CMP:
- * SimpleCell
- */
-.SimpleCell .Switch {
-  margin-left: 10px;
-}

package/src/components/Switch/Switch.tsx

@@ -1,56 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import { callMultiple } from "../../lib/callMultiple";
-import { usePlatform } from "../../hooks/usePlatform";
-import { HasRootRef } from "../../types";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import {
-  VisuallyHiddenInput,
-  VisuallyHiddenInputProps,
-} from "../VisuallyHiddenInput/VisuallyHiddenInput";
-import { useFocusVisible } from "../../hooks/useFocusVisible";
-import { FocusVisible } from "../FocusVisible/FocusVisible";
-import "./Switch.css";
-
-export interface SwitchProps
-  extends VisuallyHiddenInputProps,
-    HasRootRef<HTMLLabelElement> {}
-
-export const Switch: React.FC<SwitchProps> = ({
-  style,
-  className,
-  getRootRef,
-  ...restProps
-}: SwitchProps) => {
-  const platform = usePlatform();
-  const { sizeY } = useAdaptivity();
-  const { focusVisible, onBlur, onFocus } = useFocusVisible();
-
-  return (
-    <label
-      vkuiClass={classNames(
-        getClassName("Switch", platform),
-        `Switch--sizeY-${sizeY}`,
-        {
-          "Switch--disabled": restProps.disabled,
-          "Switch--focus-visible": focusVisible,
-        }
-      )}
-      className={className}
-      style={style}
-      ref={getRootRef}
-      role="presentation"
-    >
-      <VisuallyHiddenInput
-        {...restProps}
-        type="checkbox"
-        vkuiClass="Switch__self"
-        onBlur={callMultiple(onBlur, restProps.onBlur)}
-        onFocus={callMultiple(onFocus, restProps.onFocus)}
-      />
-      <span role="presentation" vkuiClass="Switch__pseudo" />
-      <FocusVisible mode="outside" />
-    </label>
-  );
-};

package/src/components/Tabbar/Readme.md

@@ -1,7 +0,0 @@
-Компонент для навигации внутри [Epic](#!/Epic).
-
-> **Важно**
->
-> `Tabbar` располагается фиксированно. Если внутри панели вы используете `FixedLayout`, например
-> располагаете внизу панели `Tabs`, то у `Tabbar` нужно указать `shadow={false}`, чтобы его тень не наeзжала на
-> "прижатый" книзу контент панели.

package/src/components/Tabbar/Tabbar.css

@@ -1,53 +0,0 @@
-.Tabbar {
-  position: fixed;
-  z-index: 2;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: var(--tabbar_height);
-  padding-bottom: var(--safe-area-inset-bottom);
-  box-sizing: content-box;
-  background: var(--header_alternate_background);
-}
-
-.Tabbar__in {
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-}
-
-/**
- * iOS
- */
-
-.Tabbar--ios.Tabbar--shadow::before {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background: var(--separator_common);
-  transform-origin: center bottom;
-  content: "";
-}
-
-@media (min-resolution: 2dppx) {
-  .Tabbar--ios::before {
-    transform: scaleY(0.5);
-  }
-}
-
-@media (min-resolution: 3dppx) {
-  .Tabbar--ios::before {
-    transform: scaleY(0.33);
-  }
-}
-
-/**
- * Android & VKCOM
- */
-
-.Tabbar--android.Tabbar--shadow,
-.Tabbar--vkcom.Tabbar--shadow {
-  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-}