@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/SelectMimicry/Readme.md

@@ -0,0 +1,87 @@
+Визуальная имитация компонента [NativeSelect](#!/NativeSelect). У него нет свойства `value`, а `children`
+вместо массива `options` принимает любой `ReactNode`, отображая его без изменений. Используется внутри
+[CustomSelect](#!/CustomSelect)
+
+```jsx
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      country: "",
+      activeView: "profile",
+    };
+  }
+
+  render() {
+    return (
+      <Root activeView={this.state.activeView}>
+        <View activePanel="profile" id="profile">
+          <Panel id="profile">
+            <PanelHeader>Профиль</PanelHeader>
+            <Group>
+              <FormItem top="Выберите страну">
+                <SelectMimicry
+                  placeholder="Не выбрана"
+                  onClick={() => this.setState({ activeView: "countries" })}
+                >
+                  {this.state.country}
+                </SelectMimicry>
+              </FormItem>
+              <FormItem top="Выберите город">
+                <SelectMimicry placeholder="Не выбран" disabled />
+              </FormItem>
+            </Group>
+          </Panel>
+        </View>
+        <View activePanel="countries" id="countries">
+          <Panel id="countries">
+            <PanelHeader>Выбор страны</PanelHeader>
+            <Group>
+              <List>
+                <Cell
+                  onClick={() =>
+                    this.setState({ country: "Россия", activeView: "profile" })
+                  }
+                  after={
+                    this.state.country === "Россия" ? (
+                      <Icon24Done fill="var(--accent)" />
+                    ) : null
+                  }
+                >
+                  Россия
+                </Cell>
+                <Cell
+                  onClick={() =>
+                    this.setState({ country: "Италия", activeView: "profile" })
+                  }
+                  after={
+                    this.state.country === "Италия" ? (
+                      <Icon24Done fill="var(--accent)" />
+                    ) : null
+                  }
+                >
+                  Италия
+                </Cell>
+                <Cell
+                  onClick={() =>
+                    this.setState({ country: "Англия", activeView: "profile" })
+                  }
+                  after={
+                    this.state.country === "Англия" ? (
+                      <Icon24Done fill="var(--accent)" />
+                    ) : null
+                  }
+                >
+                  Англия
+                </Cell>
+              </List>
+            </Group>
+          </Panel>
+        </View>
+      </Root>
+    );
+  }
+}
+
+<Example />;
+```

package/src/components/SelectMimicry/SelectMimicry.css

@@ -0,0 +1,10 @@
+.Select--mimicry-plain {
+  padding: 8px 8px 8px 0;
+  text-transform: capitalize;
+  border-radius: 8px;
+}
+
+.Select--mimicry-plain .FormField__border {
+  background-color: transparent;
+  border: none;
+}

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
+import { FormField } from "../FormField/FormField";
+import { HasAlign, HasRootRef } from "../../types";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  SizeType,
+} from "../../hoc/withAdaptivity";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import Headline from "../Typography/Headline/Headline";
+import Text from "../Typography/Text/Text";
+import { VKCOM } from "../../lib/platform";
+import { SelectType } from "../CustomSelect/CustomSelect";
+import "../Select/Select.css";
+import "./SelectMimicry.css";
+
+export interface SelectMimicryProps
+  extends React.HTMLAttributes<HTMLElement>,
+    HasAlign,
+    HasRootRef<HTMLElement>,
+    AdaptivityProps {
+  multiline?: boolean;
+  disabled?: boolean;
+  after?: React.ReactNode;
+  selectType?: SelectType;
+}
+
+const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
+  tabIndex,
+  placeholder,
+  children,
+  align,
+  getRootRef,
+  multiline,
+  disabled,
+  onClick,
+  sizeX,
+  sizeY,
+  after = <DropdownIcon />,
+  selectType = SelectType.Default,
+  ...restProps
+}: SelectMimicryProps) => {
+  const platform = usePlatform();
+
+  const TypographyComponent =
+    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
+
+  return (
+    <FormField
+      {...restProps}
+      tabIndex={disabled ? undefined : tabIndex}
+      vkuiClass={classNames(
+        getClassName("Select", platform),
+        "Select--mimicry",
+        `Select--mimicry-${selectType}`,
+        {
+          "Select--not-selected": !children,
+          "Select--multiline": multiline,
+          [`Select--align-${align}`]: !!align,
+          [`Select--sizeX--${sizeX}`]: !!sizeX,
+          [`Select--sizeY--${sizeY}`]: !!sizeY,
+        }
+      )}
+      getRootRef={getRootRef}
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      after={after}
+    >
+      <TypographyComponent
+        Component="div"
+        weight={selectType === SelectType.Plain ? "semibold" : "regular"}
+        vkuiClass={classNames(
+          "Select__container",
+          `Select__container--${selectType}`
+        )}
+      >
+        <span vkuiClass="Select__title">{children || placeholder}</span>
+      </TypographyComponent>
+    </FormField>
+  );
+};
+
+SelectMimicry.defaultProps = {
+  tabIndex: 0,
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(SelectMimicry, {
+  sizeX: true,
+  sizeY: true,
+});

package/src/components/Separator/Readme.md

@@ -0,0 +1,23 @@
+> **Важно**
+>
+> Компонент устарел. Предпочтительнее использовать компонент [Spacing](#!/Spacing)
+
+Используется для разделения какого-либо контента. Отступы справа и слева контролируются свойством `wide`.
+
+```jsx
+<View activePanel="separator">
+  <Panel id="separator">
+    <PanelHeader>Separator</PanelHeader>
+
+    <Group header={<Header mode="secondary">Сепаратор</Header>}>
+      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
+      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+
+      <Separator style={{ margin: "12px 0" }} />
+
+      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
+      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/Separator/Separator.css

@@ -0,0 +1,48 @@
+.Separator {
+  color: var(--separator_common);
+}
+
+.Separator__in:not(.Separator__in--expanded) {
+  height: 1px;
+  background: currentColor;
+  transform-origin: center top;
+}
+
+@media (min-resolution: 2dppx) {
+  .Separator__in:not(.Separator__in--expanded) {
+    transform: scaleY(0.5);
+  }
+}
+
+@media (min-resolution: 3dppx) {
+  .Separator__in:not(.Separator__in--expanded) {
+    transform: scaleY(0.32);
+  }
+}
+
+.Separator__in--expanded {
+  height: 16px;
+  background: transparent;
+}
+
+.Separator:not(.Separator--wide) .Separator__in {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+/**
+ * iOS
+ */
+.Separator:not(.Separator--wide).Separator--ios .Separator__in {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+/*
+ * CMP:
+ * ModalPage
+ */
+.ModalPage--sizeX-regular .Separator:not(.Separator--wide) {
+  padding-left: 8px;
+  padding-right: 8px;
+}

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Separator.css";
+
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * С этим свойством компонент не будет иметь отступы слева и справа
+   */
+  wide?: boolean;
+  expanded?: boolean;
+}
+
+const Separator: React.FC<SeparatorProps> = ({
+  wide,
+  expanded,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+
+  return (
+    <div
+      {...restProps}
+      aria-hidden="true"
+      vkuiClass={classNames(getClassName("Separator", platform), {
+        "Separator--wide": wide,
+      })}
+    >
+      <div
+        vkuiClass={classNames("Separator__in", {
+          "Separator__in--expanded": expanded,
+        })}
+      />
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default React.memo(Separator);

package/src/components/SimpleCell/Readme.md

@@ -0,0 +1,136 @@
+```jsx
+class Example extends React.Component {
+  constructor() {
+    this.state = {
+      activePanel: "list",
+    };
+  }
+
+  render() {
+    return (
+      <View activePanel={this.state.activePanel}>
+        <Panel id="list">
+          <PanelHeader>SimpleCell</PanelHeader>
+          <Group>
+            <Header mode="secondary">Меню</Header>
+            <SimpleCell
+              onClick={() => this.setState({ activePanel: "nothing" })}
+              expandable
+              before={<Icon28UserOutline />}
+            >
+              Аккаунт
+            </SimpleCell>
+            <SimpleCell
+              onClick={() => this.setState({ activePanel: "nothing" })}
+              expandable
+              before={<Icon28PaletteOutline />}
+            >
+              Внешний вид
+            </SimpleCell>
+            <SimpleCell
+              onClick={() => this.setState({ activePanel: "nothing" })}
+              expandable
+              before={<Icon28SettingsOutline />}
+            >
+              Основные
+            </SimpleCell>
+          </Group>
+          <Group>
+            <Header mode="secondary">Настройки</Header>
+            <SimpleCell disabled after={<Switch defaultChecked />}>
+              Сжимать фотографии
+            </SimpleCell>
+            <SimpleCell disabled after={<Switch />}>
+              Сжимать видео
+            </SimpleCell>
+          </Group>
+          <Group>
+            <Header mode="secondary">Настройки системы</Header>
+            <SimpleCell
+              onClick={() => this.setState({ activePanel: "nothing" })}
+              expandable
+              indicator="Русский"
+            >
+              Язык
+            </SimpleCell>
+            <SimpleCell
+              onClick={() => this.setState({ activePanel: "nothing" })}
+              expandable
+              indicator="При использовании"
+            >
+              Геолокация
+            </SimpleCell>
+          </Group>
+          <Group>
+            <Header mode="secondary">Список диалогов</Header>
+            <SimpleCell
+              before={<Avatar size={40} src={getAvatarUrl("user_xyz")} />}
+              after={
+                <IconButton>
+                  <Icon28MessageOutline />
+                </IconButton>
+              }
+            >
+              Игорь Фёдоров
+            </SimpleCell>
+            <SimpleCell
+              before={
+                <Avatar size={40} src={getAvatarUrl("user_arthurstam")} />
+              }
+              after={
+                <IconButton>
+                  <Icon28MessageOutline />
+                </IconButton>
+              }
+            >
+              Artur Stambultsian
+            </SimpleCell>
+          </Group>
+          <Group>
+            <Header mode="secondary">Список друзей</Header>
+            <SimpleCell
+              before={<Avatar size={48} src={getAvatarUrl("user_xyz")} />}
+              badge={<Icon12Verified />}
+              after={
+                <IconButton>
+                  <Icon28MessageOutline />
+                </IconButton>
+              }
+              description="Команда ВКонтакте"
+            >
+              Игорь Фёдоров
+            </SimpleCell>
+            <SimpleCell
+              before={
+                <Avatar size={48} src={getAvatarUrl("user_arthurstam")} />
+              }
+              after={
+                <IconButton>
+                  <Icon28MessageOutline />
+                </IconButton>
+              }
+              description="Бот"
+            >
+              Artur Stambultsian
+            </SimpleCell>
+          </Group>
+        </Panel>
+        <Panel id="nothing">
+          <PanelHeader
+            left={
+              <PanelHeaderBack
+                onClick={() => this.setState({ activePanel: "list" })}
+              />
+            }
+          >
+            Ничего
+          </PanelHeader>
+          <Placeholder>Тут ничего нет</Placeholder>
+        </Panel>
+      </View>
+    );
+  }
+}
+
+<Example />;
+```

package/src/components/SimpleCell/SimpleCell.css

@@ -0,0 +1,258 @@
+.SimpleCell {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  white-space: nowrap;
+  text-decoration: none;
+  color: var(--text_primary);
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.SimpleCell--mult {
+  white-space: normal;
+}
+
+.SimpleCell--mult .SimpleCell__description,
+.SimpleCell--mult .SimpleCell__children {
+  text-overflow: initial;
+}
+
+.SimpleCell__main {
+  max-width: 100%;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.SimpleCell > .Icon {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 12px;
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
+.SimpleCell > .Icon--28 {
+  padding-right: 16px;
+}
+
+.SimpleCell__description {
+  color: var(--text_secondary);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-top: 3px;
+  display: block;
+}
+
+.SimpleCell > .Avatar--sz-32 ~ .SimpleCell__main .SimpleCell__description,
+.SimpleCell > .Avatar--sz-28 ~ .SimpleCell__main .SimpleCell__description {
+  margin-top: 2px;
+}
+
+.SimpleCell:not(.SimpleCell--mult) .SimpleCell__content {
+  display: flex;
+  align-content: flex-start;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 100%;
+}
+
+.SimpleCell__children {
+  color: inherit;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+}
+
+.SimpleCell__badge {
+  display: inline-block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-left: 4px;
+  color: var(--blue_200);
+}
+
+.SimpleCell__badge .Badge {
+  margin-top: 2px;
+  margin-left: 3px;
+}
+
+.SimpleCell--mult .SimpleCell__badge {
+  vertical-align: top;
+}
+
+.SimpleCell--mult .SimpleCell__badge .Icon {
+  transform: translateY(2px);
+}
+
+.SimpleCell--mult .SimpleCell__badge .Badge {
+  margin-top: 8px;
+}
+
+.SimpleCell__indicator {
+  color: var(--text_secondary);
+  min-width: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-left: 4px;
+}
+
+.SimpleCell__after {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--accent);
+}
+
+.SimpleCell__after > .Icon {
+  padding-left: 8px;
+}
+
+.SimpleCell__after > .Icon:last-child {
+  padding-right: 2px;
+}
+
+.SimpleCell__after .IconButton .Icon--28,
+.SimpleCell__after .IconButton .Icon--28 ~ * {
+  margin-right: -8px;
+}
+
+.SimpleCell__after .IconButton .Icon--24,
+.SimpleCell__after .IconButton .Icon--24 ~ * {
+  margin-right: -10px;
+}
+
+.SimpleCell__after .IconButton .Icon--16,
+.SimpleCell__after .IconButton .Icon--16 ~ * {
+  margin-right: -14px;
+}
+
+.SimpleCell__after .IconButton .Icon--w-8,
+.SimpleCell__after .IconButton .Icon--w-8 ~ * {
+  margin-right: -12px;
+}
+
+/**
+ * iOS
+ */
+
+.SimpleCell--ios {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.SimpleCell--ios .SimpleCell__main,
+.SimpleCell--ios .SimpleCell__indicator {
+  padding-top: 9px;
+  padding-bottom: 11px;
+}
+
+.SimpleCell--ios > .Icon--28 {
+  padding-left: 4px;
+}
+
+.SimpleCell--ios .SimpleCell__after .Icon--chevron_24 {
+  color: var(--icon_tertiary);
+  padding-right: 4px;
+  padding-left: 12px;
+}
+
+.SimpleCell--ios .SimpleCell__after .IconButton .Icon--16,
+.SimpleCell--ios .SimpleCell__after .IconButton .Icon--16 ~ * {
+  margin-right: -12px;
+}
+
+.SimpleCell--ios.SimpleCell--sizeY-compact
+  .SimpleCell__after
+  .IconButton
+  .Icon--16,
+.SimpleCell--ios.SimpleCell--sizeY-compact
+  .SimpleCell__after
+  .IconButton
+  .Icon--16
+  ~ * {
+  margin-right: -14px;
+}
+
+.SimpleCell--ios.SimpleCell--sizeY-regular
+  > .Avatar:not(.Avatar--sz-32)
+  ~ .SimpleCell__main
+  .SimpleCell__children,
+.SimpleCell--ios.SimpleCell--sizeY-regular
+  > .Avatar:not(.Avatar--sz-32)
+  ~ .SimpleCell__indicator {
+  font-size: 16px;
+  line-height: 20px;
+}
+
+/**
+ * Android & VKCOM
+ */
+
+.SimpleCell--android .SimpleCell__main,
+.SimpleCell--android .SimpleCell__indicator,
+.SimpleCell--vkcom .SimpleCell__main,
+.SimpleCell--vkcom .SimpleCell__indicator {
+  padding-top: 11px;
+  padding-bottom: 10px;
+}
+
+/**
+ * sizeY === 'compact'
+ */
+
+.SimpleCell--sizeY-compact {
+  min-height: 44px;
+}
+
+.SimpleCell--sizeY-compact .SimpleCell__main,
+.SimpleCell--sizeY-compact .SimpleCell__indicator {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.SimpleCell--sizeY-compact .SimpleCell__description,
+.SimpleCell--sizeY-compact
+  > .Avatar--sz-32
+  ~ .SimpleCell__main
+  .SimpleCell__description,
+.SimpleCell--sizeY-compact
+  > .Avatar--sz-28
+  ~ .SimpleCell__main
+  .SimpleCell__description {
+  margin-top: 1px;
+}
+
+.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--28,
+.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--28 ~ * {
+  margin-right: -6px;
+}
+
+.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--24,
+.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--24 ~ * {
+  margin-right: -8px;
+}
+
+.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--16,
+.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--16 ~ * {
+  margin-right: -12px;
+}
+
+.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--w-8,
+.SimpleCell--sizeY-compact .SimpleCell__after .IconButton .Icon--w-8 ~ * {
+  margin-right: -10px;
+}
+
+.SimpleCell--sizeY-compact .SimpleCell__badge .Badge {
+  transform: translateY(0.5px);
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+.FormItem > .SimpleCell {
+  margin: 0 calc(-1 * var(--formitem_padding));
+}