@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/ModalPageHeader/Readme.md

@@ -1,5 +1,5 @@
 Шапка в модальных страницах.
-Имеет очень похожую логику на [`PanelHeader`](#!/PanelHeader): два свойства `left` и `right` для иконок и название модальной страницы, передаваемое как `children`.
+Имеет очень похожую логику на [`PanelHeader`](#!/PanelHeader): два свойства `before` и `after` для иконок и название модальной страницы, передаваемое как `children`.
 
 ### Требования по расположению кнопок
 
@@ -16,7 +16,7 @@ const platform = usePlatform();
 
 return (
   <ModalPageHeader
-    left={
+    before={
       <Fragment>
         {(platform === ANDROID || platform === VKCOM) && (
           <PanelHeaderButton onClick={this.backModal}>
@@ -25,7 +25,7 @@ return (
         )}
       </Fragment>
     }
-    right={
+    after={
       <Fragment>
         {(platform === ANDROID || platform === VKCOM) && (
           <PanelHeaderButton onClick={this.backModal}>

package/src/components/ModalRoot/ModalRoot.css

@@ -41,7 +41,7 @@
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--android
   .ModalRoot__viewport {
-  top: calc(var(--safe-area-inset-top) + var(--panelheader_height_android));
+  top: calc(var(--safe-area-inset-top) + var(--panelheader_height));
 }
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--ios

package/src/components/ModalRoot/ModalRoot.tsx

@@ -10,7 +10,8 @@ import { transitionEvent } from "../../lib/supportEvents";
 import { HasPlatform } from "../../types";
 import { withPlatform } from "../../hoc/withPlatform";
 import { withContext } from "../../hoc/withContext";
-import ModalRootContext, {
+import {
+  ModalRootContext,
   ModalRootContextInterface,
 } from "./ModalRootContext";
 import {

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -1,9 +1,5 @@
 import * as React from "react";
-import {
-  withAdaptivity,
-  ViewHeight,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { ModalRootTouch } from "./ModalRoot";
 import { ModalRootDesktop } from "./ModalRootDesktop";
 import {
@@ -11,6 +7,7 @@ import {
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
 import { useScrollLock } from "../AppRoot/ScrollContext";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 
 export interface ModalRootProps extends AdaptivityProps {
   activeModal?: string | null;
@@ -39,10 +36,7 @@ export interface ModalRootProps extends AdaptivityProps {
 const ModalRootComponent: React.FC<
   ModalRootProps & AdaptivityContextInterface
 > = (props) => {
-  const { viewWidth, viewHeight, hasMouse } = props;
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
 
   useScrollLock(!!props.activeModal);
 
@@ -53,6 +47,9 @@ const ModalRootComponent: React.FC<
 
 ModalRootComponent.displayName = "ModalRoot";
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalRoot
+ */
 export const ModalRoot = withAdaptivity(ModalRootComponent, {
   viewWidth: true,
   viewHeight: true,

package/src/components/ModalRoot/ModalRootContext.tsx

@@ -46,6 +46,3 @@ export function useModalRegistry(id: string | undefined, type: ModalType) {
   }).current;
   return { refs };
 }
-
-// eslint-disable-next-line import/no-default-export
-export default ModalRootContext;

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -4,7 +4,8 @@ import { transitionEvent } from "../../lib/supportEvents";
 import { HasPlatform } from "../../types";
 import { withPlatform } from "../../hoc/withPlatform";
 import { withContext } from "../../hoc/withContext";
-import ModalRootContext, {
+import {
+  ModalRootContext,
   ModalRootContextInterface,
 } from "./ModalRootContext";
 import {

package/src/components/ModalRoot/Readme.md

@@ -39,7 +39,7 @@ class App extends Component {
 либо идентификатор предыдущей модалки, либо `null` для скрытия.
 Каждой конкретной `ModalPage` или `ModalCard` можно передать свой обработчик `onClose`, если нужно переопределить поведение.
 
-```jsx { "props": { "layout": false, "adaptivity": true } }
+```jsx { "props": { "layout": false, "adaptivity": true, "webviewType": true } }
 const MODAL_PAGE_FILTERS = "filters";
 const MODAL_PAGE_COUNTRIES = "countries";
 const MODAL_PAGE_STORY_FEEDBACK = "story-feedback";
@@ -65,7 +65,11 @@ const DynamicModalPage = ({ updateModalHeight, onClose, ...props }) => {
       {...props}
       header={
         <ModalPageHeader
-          right={
+          before={
+            isMobile &&
+            platform === ANDROID && <PanelHeaderClose onClick={onClose} />
+          }
+          after={
             isMobile &&
             platform === IOS && (
               <PanelHeaderButton onClick={onClose}>
@@ -73,10 +77,6 @@ const DynamicModalPage = ({ updateModalHeight, onClose, ...props }) => {
               </PanelHeaderButton>
             )
           }
-          left={
-            isMobile &&
-            platform === ANDROID && <PanelHeaderClose onClick={onClose} />
-          }
         >
           Dynamic modal
         </ModalPageHeader>
@@ -157,19 +157,19 @@ const App = withPlatform(
               settlingHeight={100}
               header={
                 <ModalPageHeader
-                  right={
+                  before={
+                    isMobile &&
+                    platform === ANDROID && (
+                      <PanelHeaderClose onClick={this.modalBack} />
+                    )
+                  }
+                  after={
                     platform === IOS && (
                       <PanelHeaderButton onClick={this.modalBack}>
                         <Icon24Dismiss />
                       </PanelHeaderButton>
                     )
                   }
-                  left={
-                    isMobile &&
-                    platform === ANDROID && (
-                      <PanelHeaderClose onClick={this.modalBack} />
-                    )
-                  }
                 >
                   @{this.randomUser.screen_name}
                 </ModalPageHeader>
@@ -225,10 +225,10 @@ const App = withPlatform(
               onClose={this.modalBack}
               header={
                 <ModalPageHeader
-                  left={
+                  before={
                     isMobile && <PanelHeaderClose onClick={this.modalBack} />
                   }
-                  right={<PanelHeaderSubmit onClick={this.modalBack} />}
+                  after={<PanelHeaderSubmit onClick={this.modalBack} />}
                 >
                   Фильтры
                 </ModalPageHeader>
@@ -309,7 +309,7 @@ const App = withPlatform(
               onClose={this.modalBack}
               header={
                 <ModalPageHeader
-                  left={
+                  before={
                     <PanelHeaderBack label="Назад" onClick={this.modalBack} />
                   }
                 >
@@ -342,7 +342,7 @@ const App = withPlatform(
               onClose={this.modalBack}
               header={
                 <ModalPageHeader
-                  left={
+                  before={
                     <PanelHeaderBack label="Назад" onClick={this.modalBack} />
                   }
                 >
@@ -370,7 +370,7 @@ const App = withPlatform(
               onClose={this.modalBack}
               header={
                 <ModalPageHeader
-                  left={
+                  before={
                     <PanelHeaderBack label="Назад" onClick={this.modalBack} />
                   }
                 >

package/src/components/ModalRoot/withModalRootContext.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import ModalRootContext, {
+import {
+  ModalRootContext,
   ModalRootContextInterface,
 } from "./ModalRootContext";
 

package/src/components/NativeSelect/NativeSelect.tsx

@@ -3,15 +3,13 @@ import { classNames } from "../../lib/classNames";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
 import { HasAlign, HasRef, HasRootRef } from "../../types";
-import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { getClassName } from "../../helpers/getClassName";
-import Headline from "../Typography/Headline/Headline";
-import Text from "../Typography/Text/Text";
-import { VKCOM } from "../../lib/platform";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
+import { SelectType, SelectTypography } from "../Select/Select";
 import {
   AdaptivityContextInterface,
   AdaptivityProps,
@@ -26,6 +24,7 @@ export interface NativeSelectProps
     AdaptivityProps {
   placeholder?: string;
   multiline?: boolean;
+  selectType?: keyof typeof SelectType;
 }
 
 export interface SelectState {
@@ -49,11 +48,12 @@ const NativeSelectComponent: React.FC<
   sizeX,
   sizeY,
   multiline,
+  selectType = SelectType.default,
   ...restProps
 }) => {
   const platform = usePlatform();
   const [title, setTitle] = React.useState("");
-  const [notSelected, setNotSelected] = React.useState(false);
+  const [empty, setEmpty] = React.useState(false);
   const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
   const selectRef = useExternRef(getRef);
   useIsomorphicLayoutEffect(() => {
@@ -61,24 +61,22 @@ const NativeSelectComponent: React.FC<
       selectRef.current?.options[selectRef.current.selectedIndex];
     if (selectedOption) {
       setTitle(selectedOption.text);
-      setNotSelected(selectedOption.value === "" && placeholder != null);
+      setEmpty(selectedOption.value === "" && placeholder != null);
     }
   }, [value, children]);
 
-  const TypographyComponent =
-    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
-
   return (
     <FormField
       Component="label"
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("Select", platform), {
-        ["Select--not-selected"]: notSelected,
-        [`Select--align-${align}`]: !!align,
-        [`Select--sizeX--${sizeX}`]: !!sizeX,
-        [`Select--sizeY--${sizeY}`]: !!sizeY,
-        "Select--multiline": multiline,
-      })}
+      vkuiClass={classNames(
+        getClassName("Select", platform),
+        `Select--${selectType}`,
+        empty && "Select--empty",
+        multiline && "Select--multiline",
+        align && `Select--align-${align}`,
+        `Select--sizeX-${sizeX}`,
+        `Select--sizeY-${sizeY}`
+      )}
       className={className}
       style={style}
       getRootRef={getRootRef}
@@ -96,17 +94,17 @@ const NativeSelectComponent: React.FC<
         {placeholder && <option value="">{placeholder}</option>}
         {children}
       </select>
-      <TypographyComponent
-        Component="div"
-        weight="regular"
-        vkuiClass="Select__container"
-      >
-        <span vkuiClass="Select__title">{title}</span>
-      </TypographyComponent>
+      <div vkuiClass="Select__container">
+        {/* TODO v5.0.0 поправить под новую адаптивность */}
+        <SelectTypography vkuiClass="Select__title">{title}</SelectTypography>
+      </div>
     </FormField>
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/NativeSelect
+ */
 export const NativeSelect = withAdaptivity(NativeSelectComponent, {
   sizeX: true,
   sizeY: true,

package/src/components/NavTransitionContext/NavTransitionContext.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
 
-interface TransitionContextProps {
+export interface TransitionContextProps {
   entering: boolean;
 }
 const TransitionContext = React.createContext<TransitionContextProps>({
   entering: false,
 });
 export const useNavTransition = () => React.useContext(TransitionContext);
+
 export const NavTransitionProvider: React.FC<TransitionContextProps> = ({
   children,
   entering,

package/src/components/Pagination/Pagination.tsx

@@ -11,7 +11,7 @@ import { classNames } from "../../lib/classNames";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { PaginationPageType, usePagination } from "../../hooks/usePagination";
 
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { Button } from "../Button/Button";
 
 import "./Pagination.css";
@@ -61,6 +61,9 @@ export interface PaginationProps
   onChange?(page: number): void;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Pagination
+ */
 export const Pagination: React.FC<PaginationProps> = ({
   currentPage = 1,
   siblingCount = 1,

package/src/components/Panel/Panel.css

@@ -46,7 +46,7 @@
 
 .Panel__centered .PanelHeader--android.PanelHeader--vis + *,
 .Panel__centered .PanelHeader--vkcom.PanelHeader--vis + * {
-  margin-top: var(--panelheader_height_android);
+  margin-top: var(--panelheader_height);
 }
 
 .Panel--sizeX-compact .Panel__centered .PanelHeader--ios.PanelHeader--sep + * {
@@ -57,7 +57,7 @@
   .Panel__centered
   .PanelHeader--android.PanelHeader--sep
   + * {
-  margin-top: calc(var(--panelheader_height_android) + 5px);
+  margin-top: calc(var(--panelheader_height) + 5px);
 }
 
 .Panel--sizeX-compact
@@ -75,7 +75,7 @@
   .Panel__centered
   .PanelHeader--android.PanelHeader--sep
   + * {
-  margin-top: calc(var(--panelheader_height_android) + 16px);
+  margin-top: calc(var(--panelheader_height) + 16px);
 }
 
 .Panel--sizeX-regular

package/src/components/Panel/Panel.tsx

@@ -22,6 +22,9 @@ export interface PanelProps
   centered?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Panel
+ */
 export const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(
   ({ centered = false, children, getRootRef, sizeX, nav, ...restProps }) => {
     const platform = usePlatform();

package/src/components/Panel/Readme.md

@@ -42,7 +42,7 @@ class Example extends React.Component {
         <Panel id="panel2">
           <PanelHeader
             separator={false}
-            left={
+            before={
               <PanelHeaderBack
                 onClick={() => this.setState({ activePanel: "panel1" })}
               />
@@ -77,7 +77,7 @@ class Example extends React.Component {
         </Panel>
         <Panel id="panel3" centered>
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack
                 onClick={() => this.setState({ activePanel: "panel2" })}
               />

package/src/components/PanelHeader/PanelHeader.css

@@ -32,7 +32,7 @@
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
 }
 
-.PanelHeader__left {
+.PanelHeader__before {
   box-sizing: border-box;
   color: var(--header_tint);
   display: flex;
@@ -55,33 +55,31 @@
   font-family: var(--font-display);
 }
 
-.PanelHeader__right {
+.PanelHeader::before,
+.PanelHeader__in {
+  height: var(--panelheader_height);
+  padding-top: var(--safe-area-inset-top);
+}
+
+.PanelHeader__after {
   display: flex;
   justify-content: flex-end;
   box-sizing: border-box;
   color: var(--header_tint);
 }
 
-.PanelHeader--vkapps .PanelHeader__right {
+.PanelHeader--vkapps .PanelHeader__after {
   min-width: 90px;
 }
 
 /**
  * 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 {
+  --panelheader_height: var(--panelheader_height_ios);
 }
 
-.PanelHeader--ios::before,
-.PanelHeader--ios .PanelHeader__in {
-  height: var(--panelheader_height_ios);
-  padding-top: var(--safe-area-inset-top);
-}
-
-.PanelHeader--ios .PanelHeader__left {
+.PanelHeader--ios .PanelHeader__before {
   flex-basis: 0;
   flex-shrink: 0;
   flex-grow: 1;
@@ -91,7 +89,7 @@
 }
 
 .PanelHeader--ios
-  .PanelHeader__left
+  .PanelHeader__before
   .PanelHeaderButton
   + .PanelHeaderButton--primitive {
   margin-left: -6px;
@@ -106,30 +104,29 @@
 
 .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 > * {
+.PanelHeader--ios.PanelHeader--no-before .PanelHeader__content > * {
   padding-left: 0;
 }
 
-.PanelHeader--ios.PanelHeader--no-left .PanelHeader__content {
+.PanelHeader--ios.PanelHeader--no-before .PanelHeader__content {
   padding-left: 8px;
 }
 
-.PanelHeader--ios.PanelHeader--no-right .PanelHeader__content > * {
+.PanelHeader--ios.PanelHeader--no-after .PanelHeader__content > * {
   padding-right: 0;
 }
 
-.PanelHeader--ios.PanelHeader--no-right .PanelHeader__content {
+.PanelHeader--ios.PanelHeader--no-after .PanelHeader__content {
   padding-right: 8px;
 }
 
-.PanelHeader--ios .PanelHeader__right {
+.PanelHeader--ios .PanelHeader__after {
   flex-basis: 0;
   flex-shrink: 0;
   flex-grow: 1;
@@ -138,8 +135,8 @@
   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__before,
+.View--ios .View__panel--prev .PanelHeader__after,
 .View--ios .View__panel--prev .PanelHeader__content {
   opacity: 0;
 }
@@ -147,18 +144,7 @@
 /**
  * Android
  */
-.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) {
+.PanelHeader--android .PanelHeader__before:not(:empty) {
   padding: 4px 0 4px 4px;
 }
 
@@ -181,64 +167,52 @@
   padding: 0 4px;
 }
 
-.PanelHeader--android.PanelHeader--no-left .PanelHeader__content > *,
-.PanelHeader--vkcom.PanelHeader--no-left .PanelHeader__content > * {
+.PanelHeader--android.PanelHeader--no-before .PanelHeader__content > *,
+.PanelHeader--vkcom.PanelHeader--no-before .PanelHeader__content > * {
   padding-left: 0;
 }
 
-.PanelHeader--android.PanelHeader--no-left .PanelHeader__content {
+.PanelHeader--android.PanelHeader--no-before .PanelHeader__content {
   padding-left: 16px;
 }
 
 .SplitCol--spaced
-  .PanelHeader--android.PanelHeader--no-left:not(.ModalPageHeader__in)
+  .PanelHeader--android.PanelHeader--no-before:not(.ModalPageHeader__in)
   .PanelHeader__content {
   padding-left: 0;
 }
 
-.PanelHeader--android.PanelHeader--no-right .PanelHeader__content > *,
-.PanelHeader--vkcom.PanelHeader--no-right .PanelHeader__content > * {
+.PanelHeader--android.PanelHeader--no-after .PanelHeader__content > *,
+.PanelHeader--vkcom.PanelHeader--no-after .PanelHeader__content > * {
   padding-right: 0;
 }
 
-.PanelHeader--android.PanelHeader--no-right .PanelHeader__content {
+.PanelHeader--android.PanelHeader--no-after .PanelHeader__content {
   padding-right: 16px;
 }
 
 .SplitCol--spaced
-  .PanelHeader--android.PanelHeader--no-right:not(.ModalPageHeader__in)
+  .PanelHeader--android.PanelHeader--no-after:not(.ModalPageHeader__in)
   .PanelHeader__content {
   padding-right: 0;
 }
 
-.PanelHeader--android .PanelHeader__right:not(:empty),
-.PanelHeader--vkcom .PanelHeader__right:not(:empty) {
+.PanelHeader--android .PanelHeader__after:not(:empty),
+.PanelHeader--vkcom .PanelHeader__after:not(:empty) {
   padding: 4px 4px 4px 0;
 }
 
 /**
  * VKCOM
  */
-
 .PanelHeader--vkcom {
+  --panelheader_height: var(--panelheader_height_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));
-}
-
 /* TODO: v5.0.0 новая адаптивность */
-.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(.ModalPageHeader__in)
-  .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--sizeX-regular:not(.ModalPageHeader__in)::after {
   position: absolute;
   left: var(--thin-border);
@@ -249,22 +223,25 @@
   content: "";
 }
 
-.PanelHeader--vkcom .PanelHeader__content {
-  text-align: center;
+/* TODO: v5.0.0 новая адаптивность */
+.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(.ModalPageHeader__in)
+  .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::before,
-.PanelHeader--vkcom .PanelHeader__in {
-  height: var(--panelheader_height_vkcom);
-  padding-top: var(--safe-area-inset-top);
+.PanelHeader--vkcom .PanelHeader__content {
+  text-align: center;
 }
 
-.PanelHeader--vkcom .PanelHeader__left:not(:empty) {
+.PanelHeader--vkcom .PanelHeader__before:not(:empty) {
   padding: 0 0 0 4px;
 }
 
-.PanelHeader--vkcom .PanelHeader__left,
-.PanelHeader--vkcom .PanelHeader__right {
+.PanelHeader--vkcom .PanelHeader__before,
+.PanelHeader--vkcom .PanelHeader__after {
   flex-basis: 0;
   flex-shrink: 0;
   flex-grow: 1;