@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/Placeholder/Placeholder.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { hasReactNode } from "../../lib/utils";
 import { Title } from "../Typography/Title/Title";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import { HasRootRef } from "../../types";
 import "./Placeholder.css";
 
@@ -27,7 +27,12 @@ export interface PlaceholderProps
   stretched?: boolean;
 }
 
-const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
+/**
+ * @see https://vkcom.github.io/VKUI/#/Placeholder
+ */
+export const Placeholder: React.FC<PlaceholderProps> = (
+  props: PlaceholderProps
+) => {
   const {
     icon,
     header,
@@ -55,7 +60,7 @@ const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
           </Title>
         )}
         {hasReactNode(children) && (
-          <Headline weight="regular" vkuiClass="Placeholder__text">
+          <Headline weight="3" vkuiClass="Placeholder__text">
             {children}
           </Headline>
         )}
@@ -66,6 +71,3 @@ const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Placeholder;

package/src/components/Placeholder/Readme.md

@@ -49,7 +49,7 @@ class PlaceholderExample extends React.Component {
 
         <Panel id="example-2">
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
             }
           >
@@ -74,7 +74,7 @@ class PlaceholderExample extends React.Component {
 
         <Panel id="example-3">
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
             }
           >

package/src/components/PopoutRoot/PopoutRoot.tsx

@@ -1,16 +1,13 @@
 import * as React from "react";
 import { HasRootRef } from "../../types";
-import {
-  withAdaptivity,
-  ViewWidth,
-  ViewHeight,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { blurActiveElement, useDOM } from "../../lib/dom";
 import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import "./PopoutRoot.css";
 
 export interface PopoutRootProps
@@ -36,9 +33,7 @@ export const PopoutRootComponent: React.FC<
   } = props;
   const { document } = useDOM();
 
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
 
   React.useEffect(() => {
     popout && blurActiveElement(document);

package/src/components/PopoutWrapper/PopoutWrapper.css

@@ -26,16 +26,17 @@
   width: 100%;
   height: 100%;
   opacity: 1;
-  animation: vkui-animation-full-fade-in 0.2s ease;
+  animation: vkui-animation-full-fade-in var(--vkui--animation_duration_m) ease;
 }
 
 .PopoutWrapper--closing .PopoutWrapper__overlay {
   opacity: 0;
-  transition: opacity 0.2s var(--android-easing);
+  transition: opacity var(--vkui--animation_duration_m)
+    var(--vkui--animation_easing_default);
 }
 
 .PopoutWrapper--masked .PopoutWrapper__overlay {
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--vkui--color_overlay_primary);
 }
 
 .PopoutWrapper--fixed .PopoutWrapper__overlay {
@@ -86,18 +87,6 @@
   justify-content: flex-end;
 }
 
-/**
- * iOS version
- */
-
-.PopoutWrapper--ios .PopoutWrapper__overlay {
-  animation-duration: 0.3s;
-}
-
-.PopoutWrapper--ios.PopoutWrapper--closing .PopoutWrapper__overlay {
-  transition: opacity 0.3s var(--ios-easing);
-}
-
 @keyframes vkui-animation-full-fade-in {
   from {
     opacity: 0;

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { IOS } from "../../lib/platform";
 import { useTimeout } from "../../hooks/useTimeout";
@@ -17,6 +16,9 @@ export interface PopoutWrapperProps
   closing?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
+ */
 export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
   alignY = "center",
   alignX = "center",
@@ -49,22 +51,17 @@ export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
     passive: false,
   });
 
-  const baseClassNames = getClassName("PopoutWrapper", platform);
-
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        baseClassNames,
+        "PopoutWrapper",
         `PopoutWrapper--v-${alignY}`,
         `PopoutWrapper--h-${alignX}`,
-        {
-          "PopoutWrapper--closing": closing,
-          "PopoutWrapper--opened": opened,
-          "PopoutWrapper--fixed": fixed,
-          "PopoutWrapper--masked": hasMask,
-        }
+        closing && "PopoutWrapper--closing",
+        opened && "PopoutWrapper--opened",
+        fixed && "PopoutWrapper--fixed",
+        hasMask && "PopoutWrapper--masked"
       )}
       onAnimationEnd={opened ? undefined : onFadeInEnd}
       ref={elRef}

package/src/components/Popper/Popper.css

@@ -1,5 +1,17 @@
-.PopperPortal {
-  position: relative;
+/**
+ * ⚠ WARNING️ ⚠
+ *
+ * Если указать `position: relaitve` контейнеру, где позиционируется `Popper`, то при кейсе когда:
+ * 1. Мы передали `sameWidth`.
+ * 2. Мы позциционируем `Popper` через `position: absolute`.
+ * 3. Мы используем `height: 100%` или `height: 100vh`, чтобы растянуть страницу на всю высоту.
+ * 4. НЕТ скроллбара.
+ * будет неправильно высчитан `offsetWidth` у `targetRef` при первом вызове `effect()` модификатора `sameWdith`,
+ *  а именно из `offsetWidth` будет вычтен размер скроллабара, которого на самом деле на странице нет (см. п. 4)
+ *
+ * Второй и последующие вызовы исправляют ситуацию.
+ */
+.Popper {
   z-index: 100;
 }
 

package/src/components/Popper/Popper.tsx

@@ -58,6 +58,9 @@ const ARROW_PADDING = 8;
 const ARROW_WIDTH = 20;
 const ARROW_HEIGHT = 8;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Popper
+ */
 export const Popper: React.FC<PopperProps> = ({
   targetRef,
   children,

package/src/components/Progress/Progress.css

@@ -1,6 +1,6 @@
 .Progress {
   border-radius: 1px;
-  background: var(--loader_track_fill);
+  background: var(--loader_track_fill, var(--vkui--color_track_background));
   height: 2px;
 }
 
@@ -8,5 +8,5 @@
   height: 100%;
   border-radius: inherit;
   transition: width 0.2s ease;
-  background: var(--accent);
+  background: var(--accent, var(--vkui--color_stroke_accent));
 }

package/src/components/Progress/Progress.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { HasRootRef } from "../../types";
-import { usePlatform } from "../../hooks/usePlatform";
 import "./Progress.css";
 
 export interface ProgressProps
@@ -13,13 +11,14 @@ export interface ProgressProps
 const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 
-const Progress: React.FC<ProgressProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/Progress
+ */
+export const Progress: React.FC<ProgressProps> = ({
   value = 0,
   getRootRef,
   ...restProps
 }: ProgressProps) => {
-  const platform = usePlatform();
-
   const progress = Math.max(
     PROGRESS_MIN_VALUE,
     Math.min(value, PROGRESS_MAX_VALUE)
@@ -33,17 +32,13 @@ const Progress: React.FC<ProgressProps> = ({
       aria-valuemin={PROGRESS_MIN_VALUE}
       aria-valuemax={PROGRESS_MAX_VALUE}
       ref={getRootRef}
-      vkuiClass={getClassName("Progress", platform)}
+      vkuiClass="Progress"
     >
-      <div vkuiClass="Progress__bg" aria-hidden="true" />
       <div
         vkuiClass="Progress__in"
         style={{ width: `${progress}%` }}
-        aria-hidden="true"
+        aria-hidden
       />
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Progress;

package/src/components/Progress/Readme.md

@@ -1,14 +1,12 @@
-```
-  <View activePanel="progress">
-    <Panel id="progress">
-      <PanelHeader>
-        Progress
-      </PanelHeader>
-      <Group>
-        <Div>
-          <Progress value={40} />
-        </Div>
-      </Group>
-    </Panel>
-  </View>
+```jsx
+<View activePanel="progress">
+  <Panel id="progress">
+    <PanelHeader>Progress</PanelHeader>
+    <Group>
+      <FormItem id="progresslabel" top="Прогресс">
+        <Progress aria-labelledby="progresslabel" value={40} />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>
 ```

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Icon24Dismiss } from "@vkontakte/icons";
 import { Button } from "../Button/Button";
-import SimpleCell from "../SimpleCell/SimpleCell";
-import Avatar from "../Avatar/Avatar";
+import { SimpleCell } from "../SimpleCell/SimpleCell";
+import { Avatar } from "../Avatar/Avatar";
 import { Caption } from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
@@ -48,7 +48,11 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const warn = warnOnce("PromoBanner");
-const PromoBanner = (props: PromoBannerProps) => {
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/PromoBanner
+ */
+export const PromoBanner = (props: PromoBannerProps) => {
   const platform = usePlatform();
   const { bannerData = {}, onClose, ...restProps } = props;
 
@@ -130,6 +134,3 @@ const PromoBanner = (props: PromoBannerProps) => {
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default PromoBanner;

package/src/components/PullToRefresh/PullToRefresh.css

@@ -29,18 +29,20 @@
   transition: transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
     opacity 220ms ease-out;
   opacity: 0;
+  background: var(
+    --background_suggestions,
+    var(--vkui--color_background_modal)
+  );
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .PullToRefresh--ios .PullToRefresh__spinner {
-  color: var(--icon_outline_secondary);
-}
-
-.PullToRefresh--android .PullToRefresh__spinner,
-.PullToRefresh--vkcom .PullToRefresh__spinner {
-  background: var(--background_suggestions);
-  border-radius: 50%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  color: var(--accent);
+  border-radius: none;
+  box-shadow: none;
+  background: none;
+  color: var(--icon_outline_secondary, var(--vkui--color_icon_medium));
 }
 
 .PullToRefresh--watching .PullToRefresh__spinner {