@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/PanelHeader/PanelHeader.css

@@ -1,271 +0,0 @@
-.PanelHeader {
-  position: relative;
-}
-
-.PanelHeader--vis.PanelHeader--fixed::before {
-  display: block;
-  content: "";
-}
-
-.PanelHeader:not(.PanelHeader--vis):not(.PanelHeader--fixed) {
-  height: 0;
-}
-
-.PanelHeader__fixed {
-  z-index: 10;
-}
-
-.PanelHeader__in {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  white-space: nowrap;
-  position: relative;
-  background: var(--header_background);
-}
-
-.PanelHeader--trnsp .PanelHeader__in {
-  background: transparent;
-}
-
-.PanelHeader--shadow .PanelHeader__in {
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
-}
-
-.PanelHeader__left {
-  box-sizing: border-box;
-  color: var(--header_tint);
-  display: flex;
-  flex-shrink: 0;
-}
-
-.PanelHeader__content {
-  overflow: hidden;
-}
-
-.PanelHeader__content > * {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.PanelHeader__content-in {
-  color: var(--header_text);
-  font-weight: 500;
-  font-family: var(--font-display);
-}
-
-.PanelHeader__right {
-  display: flex;
-  justify-content: flex-end;
-  box-sizing: border-box;
-  color: var(--header_tint);
-}
-
-.PanelHeader--vkapps .PanelHeader__right {
-  min-width: 90px;
-}
-
-.PanelHeader--sizeX-compact .PanelHeader__separator {
-  padding-top: 4px;
-}
-
-/**
- * iOS
- */
-
-.PanelHeader--ios ~ .FixedLayout--top,
-.PanelHeader--ios ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
-  top: calc(var(--panelheader_height_ios) + var(--safe-area-inset-top));
-}
-
-.PanelHeader--ios::before,
-.PanelHeader--ios .PanelHeader__in {
-  height: var(--panelheader_height_ios);
-  padding-top: var(--safe-area-inset-top);
-}
-
-.PanelHeader--ios .PanelHeader__left {
-  flex-basis: 0;
-  flex-shrink: 0;
-  flex-grow: 1;
-  opacity: 1;
-  transition: opacity 0.3s var(--ios-easing);
-  padding: 4px 0 4px 4px;
-}
-
-.PanelHeader--ios
-  .PanelHeader__left
-  .PanelHeaderButton
-  + .PanelHeaderButton--primitive {
-  margin-left: -6px;
-  padding-left: 0;
-}
-
-.PanelHeader--ios .PanelHeader__content {
-  text-align: center;
-  opacity: 1;
-  transition: opacity 0.3s var(--ios-easing);
-}
-
-.PanelHeader--ios .PanelHeader__content-in {
-  font-size: 21px;
-  line-height: var(--panelheader_height_ios);
-}
-
-.PanelHeader--ios .PanelHeader__content > * {
-  padding: 0 4px;
-}
-
-.PanelHeader--ios.PanelHeader--no-left .PanelHeader__content > * {
-  padding-left: 0;
-}
-
-.PanelHeader--ios.PanelHeader--no-left .PanelHeader__content {
-  padding-left: 8px;
-}
-
-.PanelHeader--ios.PanelHeader--no-right .PanelHeader__content > * {
-  padding-right: 0;
-}
-
-.PanelHeader--ios.PanelHeader--no-right .PanelHeader__content {
-  padding-right: 8px;
-}
-
-.PanelHeader--ios .PanelHeader__right {
-  flex-basis: 0;
-  flex-shrink: 0;
-  flex-grow: 1;
-  opacity: 1;
-  transition: opacity 0.3s var(--ios-easing);
-  padding: 4px 4px 4px 0;
-}
-
-.View--ios .View__panel--prev .PanelHeader__left,
-.View--ios .View__panel--prev .PanelHeader__right,
-.View--ios .View__panel--prev .PanelHeader__content {
-  opacity: 0;
-}
-
-/**
- * Android
- */
-
-@supports not (padding-top: env(safe-area-inset-top)) {
-  .PanelHeader--android,
-  .PanelHeader--vkcom {
-    --safe-area-inset-top: 0px;
-  }
-}
-
-.PanelHeader--android ~ .FixedLayout--top,
-.PanelHeader--android ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
-  top: calc(var(--panelheader_height_android) + var(--safe-area-inset-top));
-}
-
-.PanelHeader--android::before,
-.PanelHeader--android .PanelHeader__in {
-  height: var(--panelheader_height_android);
-  padding-top: var(--safe-area-inset-top);
-}
-
-.PanelHeader--android .PanelHeader__left:not(:empty) {
-  padding: 4px 0 4px 4px;
-}
-
-.PanelHeader--android .PanelHeader__content {
-  align-items: center;
-  flex-grow: 1;
-  max-width: 100%;
-}
-
-.PanelHeader--android .PanelHeader__content-in {
-  font-size: 23px;
-}
-
-.PanelHeader--android .PanelHeader__content > * {
-  padding: 0 12px;
-}
-
-.PanelHeader--android .Search,
-.PanelHeader--vkcom .Search {
-  padding: 0 4px;
-}
-
-.PanelHeader--android.PanelHeader--no-left .PanelHeader__content > *,
-.PanelHeader--vkcom.PanelHeader--no-left .PanelHeader__content > * {
-  padding-left: 0;
-}
-
-.PanelHeader--android.PanelHeader--no-left .PanelHeader__content {
-  padding-left: 16px;
-}
-
-.SplitCol--spaced
-  .PanelHeader--android.PanelHeader--no-left:not(.ModalPageHeader__in)
-  .PanelHeader__content {
-  padding-left: 0;
-}
-
-.PanelHeader--android.PanelHeader--no-right .PanelHeader__content > *,
-.PanelHeader--vkcom.PanelHeader--no-right .PanelHeader__content > * {
-  padding-right: 0;
-}
-
-.PanelHeader--android.PanelHeader--no-right .PanelHeader__content {
-  padding-right: 16px;
-}
-
-.SplitCol--spaced
-  .PanelHeader--android.PanelHeader--no-right:not(.ModalPageHeader__in)
-  .PanelHeader__content {
-  padding-right: 0;
-}
-
-.PanelHeader--android .PanelHeader__right:not(:empty),
-.PanelHeader--vkcom .PanelHeader__right:not(:empty) {
-  padding: 4px 4px 4px 0;
-}
-
-/**
- * VKCOM
- */
-
-.PanelHeader--vkcom {
-  position: relative;
-  z-index: 10;
-}
-
-.PanelHeader--vkcom ~ .FixedLayout--top,
-.PanelHeader--vkcom ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
-  top: calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top));
-}
-
-.PanelHeader--vkcom.PanelHeader--sep .PanelHeader__in {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  box-shadow: 0 0 0 var(--thin-border) var(--input_border) inset;
-  border-bottom: none;
-}
-
-.PanelHeader--vkcom .PanelHeader__content {
-  text-align: center;
-}
-
-.PanelHeader--vkcom::before,
-.PanelHeader--vkcom .PanelHeader__in {
-  height: var(--panelheader_height_vkcom);
-  padding-top: var(--safe-area-inset-top);
-}
-
-.PanelHeader--vkcom .PanelHeader__left:not(:empty) {
-  padding: 0 0 0 4px;
-}
-
-.PanelHeader--vkcom .PanelHeader__left,
-.PanelHeader--vkcom .PanelHeader__right {
-  flex-basis: 0;
-  flex-shrink: 0;
-  flex-grow: 1;
-}

package/src/components/PanelHeader/PanelHeader.tsx

@@ -1,142 +0,0 @@
-import * as React from "react";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import FixedLayout from "../FixedLayout/FixedLayout";
-import Separator from "../Separator/Separator";
-import { Platform, VKCOM } from "../../lib/platform";
-import { HasRef, HasRootRef } from "../../types";
-import {
-  ConfigProviderContext,
-  WebviewType,
-} from "../ConfigProvider/ConfigProviderContext";
-import {
-  AdaptivityProps,
-  SizeType,
-  withAdaptivity,
-} from "../../hoc/withAdaptivity";
-import Text from "../Typography/Text/Text";
-import { TooltipContainer } from "../Tooltip/TooltipContainer";
-import ModalRootContext from "../ModalRoot/ModalRootContext";
-import "./PanelHeader.css";
-
-export interface PanelHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    HasRef<HTMLDivElement>,
-    HasRootRef<HTMLDivElement>,
-    AdaptivityProps {
-  left?: React.ReactNode;
-  right?: React.ReactNode;
-  separator?: boolean;
-  transparent?: boolean;
-  shadow?: boolean;
-  /**
-   * Если `false`, то шапка будет нулевой высоты и контент панели "залезет" под неё
-   */
-  visor?: boolean;
-  /**
-   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.
-   */
-  fixed?: boolean;
-}
-
-const PanelHeaderIn: React.FC<PanelHeaderProps> = ({
-  children,
-  left,
-  right,
-}) => {
-  const { webviewType } = React.useContext(ConfigProviderContext);
-  const { isInsideModal } = React.useContext(ModalRootContext);
-  const platform = usePlatform();
-
-  return (
-    <TooltipContainer fixed vkuiClass="PanelHeader__in">
-      <div vkuiClass="PanelHeader__left">{left}</div>
-      <div vkuiClass="PanelHeader__content">
-        {platform === VKCOM ? (
-          <Text weight="medium">{children}</Text>
-        ) : (
-          <span vkuiClass="PanelHeader__content-in">{children}</span>
-        )}
-      </div>
-      <div vkuiClass="PanelHeader__right">
-        {(webviewType === WebviewType.INTERNAL || isInsideModal) && right}
-      </div>
-    </TooltipContainer>
-  );
-};
-
-const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
-  const {
-    left,
-    children,
-    right,
-    separator,
-    visor,
-    transparent,
-    shadow,
-    getRef,
-    getRootRef,
-    sizeX,
-    sizeY,
-    fixed,
-    ...restProps
-  } = props;
-  const platform = usePlatform();
-  const { webviewType } = React.useContext(ConfigProviderContext);
-  const { isInsideModal } = React.useContext(ModalRootContext);
-  const needShadow = shadow && sizeX === SizeType.REGULAR;
-  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
-
-  return (
-    <div
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("PanelHeader", platform),
-        {
-          "PanelHeader--trnsp": transparent,
-          "PanelHeader--shadow": needShadow,
-          "PanelHeader--vis": visor,
-          "PanelHeader--sep": separator && visor,
-          "PanelHeader--vkapps":
-            webviewType === WebviewType.VKAPPS && !isInsideModal,
-          "PanelHeader--no-left": !left,
-          "PanelHeader--no-right": !right,
-          "PanelHeader--fixed": isFixed,
-        },
-        `PanelHeader--sizeX-${sizeX}`
-      )}
-      ref={isFixed ? getRootRef : getRef}
-    >
-      {isFixed ? (
-        <FixedLayout
-          vkuiClass="PanelHeader__fixed"
-          vertical="top"
-          getRootRef={getRef}
-        >
-          <PanelHeaderIn {...props} />
-        </FixedLayout>
-      ) : (
-        <PanelHeaderIn {...props} />
-      )}
-      {separator && visor && platform !== VKCOM && (
-        <Separator
-          vkuiClass="PanelHeader__separator"
-          expanded={sizeX === SizeType.REGULAR}
-        />
-      )}
-    </div>
-  );
-};
-
-PanelHeader.defaultProps = {
-  separator: true,
-  transparent: false,
-  visor: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(PanelHeader, {
-  sizeX: true,
-  sizeY: true,
-});

package/src/components/PanelHeader/Readme.md

@@ -1,244 +0,0 @@
-Практически всегда содержимое панели должно начинаться с [`Separator`](#!/Separator),
-поэтому он рисуется в `PanelHeader` по-умолчанию.
-
-Исключения, в которых разделитель в начале панели не нужен:
-
-- В `PanelHeader` рисуется [`Search`](#!/Search).
-- После `PanelHeader` рисуется [`Search`](#!/Search).
-- В `PanelHeader` рисуются [`Tabs`](#!/Tabs).
-
-В таких случаях передавайте в `PanelHeader` свойство `separator={false}`.
-
-> **Важно**
->
-> Правая часть шапки будет скрыта, если в [`ConfigProvider`](#/ConfigProvider) передан `webviewType={WebviewType.VKAPPS}`.
-
-```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      mainPanel: "panel1",
-      modalPanel: "modal-panel1",
-      activeView: "main",
-    };
-  }
-
-  render() {
-    const { sizeX, platform } = this.props;
-    return (
-      <Root activeView={this.state.activeView}>
-        <View id="main" activePanel={this.state.mainPanel}>
-          <Panel id="panel1">
-            <PanelHeader
-              left={<PanelHeaderClose />}
-              right={<Avatar size={36} />}
-            >
-              Стартовый экран
-            </PanelHeader>
-            <Group>
-              <CellButton
-                onClick={() => this.setState({ mainPanel: "panel2" })}
-              >
-                Вторая панель
-              </CellButton>
-            </Group>
-          </Panel>
-          <Panel id="panel2">
-            <PanelHeader
-              left={
-                <PanelHeaderBack
-                  onClick={() => this.setState({ mainPanel: "panel1" })}
-                  label={platform === VKCOM ? "Назад" : undefined}
-                />
-              }
-              right={
-                <PanelHeaderButton
-                  aria-label="Изображения"
-                  label={
-                    <Counter
-                      size="s"
-                      mode="prominent"
-                      aria-label="Обновлений: "
-                    >
-                      21
-                    </Counter>
-                  }
-                >
-                  <Icon28PictureOutline />
-                </PanelHeaderButton>
-              }
-            >
-              Вторая панель
-            </PanelHeader>
-            <Group>
-              <CellButton
-                onClick={() => this.setState({ mainPanel: "panel3" })}
-              >
-                Несколько иконок
-              </CellButton>
-            </Group>
-          </Panel>
-          <Panel id="panel3">
-            <PanelHeader
-              left={
-                <PanelHeaderBack
-                  onClick={() => this.setState({ mainPanel: "panel2" })}
-                />
-              }
-              right={
-                <React.Fragment>
-                  <PanelHeaderButton
-                    aria-label="Настройки"
-                    label={
-                      <Counter
-                        size="s"
-                        mode="prominent"
-                        aria-label="Новые настройки: "
-                      >
-                        3
-                      </Counter>
-                    }
-                  >
-                    <Icon28SettingsOutline />
-                  </PanelHeaderButton>
-                  <PanelHeaderButton
-                    aria-label="Уведомления"
-                    label={
-                      <Counter
-                        size="s"
-                        mode="prominent"
-                        aria-label="Уведомлений: "
-                      >
-                        2
-                      </Counter>
-                    }
-                  >
-                    <Icon28Notifications />
-                  </PanelHeaderButton>
-                </React.Fragment>
-              }
-            >
-              Две иконки
-            </PanelHeader>
-            <Group>
-              <CellButton
-                onClick={() => this.setState({ activeView: "modal" })}
-              >
-                Модальное окно
-              </CellButton>
-            </Group>
-          </Panel>
-        </View>
-        <View id="modal" activePanel={this.state.modalPanel}>
-          <Panel id="modal-panel1">
-            <PanelHeader
-              left={
-                <PanelHeaderButton
-                  onClick={() => this.setState({ activeView: "main" })}
-                >
-                  Отмена
-                </PanelHeaderButton>
-              }
-              right={
-                <PanelHeaderButton
-                  disabled
-                  primary
-                  onClick={() => this.setState({ activeView: "main" })}
-                >
-                  Готово
-                </PanelHeaderButton>
-              }
-            >
-              Модальное окно
-            </PanelHeader>
-            <Group>
-              <CellButton
-                onClick={() => this.setState({ modalPanel: "modal-panel2" })}
-              >
-                Сложный контент
-              </CellButton>
-            </Group>
-          </Panel>
-          <Panel id="modal-panel2">
-            <PanelHeader
-              left={
-                <PanelHeaderBack
-                  onClick={() => this.setState({ modalPanel: "modal-panel1" })}
-                  label={platform === VKCOM ? "Назад" : undefined}
-                />
-              }
-            >
-              <PanelHeaderContent
-                before={<Avatar size={36} />}
-                status="Был в сети вчера"
-              >
-                Влад Анесов
-              </PanelHeaderContent>
-            </PanelHeader>
-            <Group>
-              <CellButton
-                onClick={() => this.setState({ modalPanel: "modal-panel3" })}
-              >
-                Поиск
-              </CellButton>
-            </Group>
-          </Panel>
-          <Panel id="modal-panel3">
-            <PanelHeader
-              separator={platform === VKCOM || sizeX === SizeType.REGULAR}
-              left={
-                platform !== VKCOM && (
-                  <PanelHeaderBack
-                    onClick={() =>
-                      this.setState({ modalPanel: "modal-panel2" })
-                    }
-                  />
-                )
-              }
-            >
-              <Search />
-            </PanelHeader>
-            <Group>
-              <CellButton
-                onClick={() => this.setState({ modalPanel: "modal-panel4" })}
-              >
-                Табы
-              </CellButton>
-              {platform === VKCOM && (
-                <CellButton
-                  onClick={() => this.setState({ modalPanel: "modal-panel2" })}
-                >
-                  Сложный контент
-                </CellButton>
-              )}
-            </Group>
-          </Panel>
-          <Panel id="modal-panel4">
-            <PanelHeader
-              separator={platform === VKCOM || sizeX === SizeType.REGULAR}
-              left={
-                <PanelHeaderBack
-                  onClick={() => this.setState({ modalPanel: "modal-panel3" })}
-                />
-              }
-            >
-              <Tabs>
-                <TabsItem selected>Новости</TabsItem>
-                <TabsItem>Интересное</TabsItem>
-              </Tabs>
-            </PanelHeader>
-          </Panel>
-        </View>
-      </Root>
-    );
-  }
-}
-
-const ExampleWithPlatform = withAdaptivity(withPlatform(Example), {
-  sizeX: true,
-});
-
-<ExampleWithPlatform />;
-```

package/src/components/PanelHeaderBack/PanelHeaderBack.css

@@ -1,7 +0,0 @@
-.PanelHeaderBack--vkcom.PanelHeaderBack--has-label {
-  padding-right: 11px;
-}
-
-.PanelHeaderBack--ios.PanelHeaderBack--has-label {
-  padding-right: 8px;
-}