@vkontakte/vkui 4.28.0 → 4.28.1

package/jest.unit.config.js

@@ -0,0 +1,14 @@
+const path = require("path");
+module.exports = {
+  displayName: "unit",
+  roots: [path.join(__dirname, "src")],
+  setupFilesAfterEnv: [path.join(__dirname, "src/testing/setup.ts")],
+  collectCoverage: true,
+  collectCoverageFrom: ["src/*/**/*.{ts,tsx}"],
+  coveragePathIgnorePatterns: [
+    "\\.d\\.ts$",
+    "\\.e2e\\.tsx?$",
+    "src/types",
+    "src/testing",
+  ],
+};

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.28.0",
+  "version": "4.28.1",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "CONTRIBUTING.md",
-    "VKUI_TOKENS_MIGRATION_GUIDE.md"
-  ],
   "sideEffects": [
     "./dist/lib/polyfills.js",
     "./dist/index.js",
@@ -81,9 +76,8 @@
     "jest-playwright-preset": "^1.4.1",
     "lint-staged": "^12.1.2",
     "mini-css-extract-plugin": "^2.5.2",
-    "playwright": "^1.8.0",
-    "playwright-chromium": "^1.8.0",
-    "playwright-core": "^1.8.0",
+    "playwright": "1.17.2",
+    "playwright-chromium": "1.17.2",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-csso": "^6.0.0",
@@ -214,5 +208,8 @@
     "date-fns": "^2.28.0",
     "mitt": "^3.0.0",
     "react-popper": "^2.2.5"
+  },
+  "engines": {
+    "yarn": ">=1.21.1 <=1.22.18"
   }
 }

package/src/appearance/constants.ts

@@ -0,0 +1 @@
+export const tabbarHeight = 48;

package/src/components/ActionSheet/ActionSheet.css

@@ -0,0 +1,145 @@
+.ActionSheet {
+  position: relative;
+  overflow: hidden;
+}
+
+.ActionSheet__header {
+  color: var(--text_secondary);
+}
+
+/**
+ * iOS
+ */
+.ActionSheet--ios {
+  width: 100%;
+  animation: vkui-animation-actionsheet-intro 0.3s var(--ios-easing);
+  padding: 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.ActionSheet--ios.ActionSheet--closing {
+  transform: translateY(100%);
+  transition: transform 0.3s var(--ios-easing);
+}
+
+.ActionSheet--ios .ActionSheet__header {
+  padding: 15px 10px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 14px 14px 0 0;
+  text-align: center;
+}
+
+.ActionSheet--ios .ActionSheet__title {
+  position: relative;
+  z-index: 2;
+}
+
+.ActionSheet--ios .ActionSheet__title + .ActionSheet__text {
+  margin-top: 9px;
+}
+
+.ActionSheet--ios .ActionSheet__text {
+  position: relative;
+  z-index: 2;
+}
+
+.ActionSheet--ios .ActionSheet__header::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--modal_card_background);
+  z-index: 1;
+  content: "";
+}
+
+/**
+ * Android
+ */
+.ActionSheet--android,
+.ActionSheet--vkcom {
+  width: calc(100% - 20px);
+  margin: 10px;
+  animation: vkui-animation-actionsheet-intro 0.2s var(--android-easing);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border-radius: 12px;
+  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.16), 0 0 4px 0 rgba(0, 0, 0, 0.08);
+  padding: 8px 0;
+  background: var(--modal_card_background);
+}
+
+.ActionSheet--android.ActionSheet--closing {
+  transform: translateY(calc(100% + 20px));
+  transition: transform 0.2s var(--android-easing);
+}
+
+.ActionSheet--android .ActionSheet__header,
+.ActionSheet--vkcom .ActionSheet__header {
+  padding: 16px 20px;
+}
+
+.ActionSheet--android .ActionSheet__title + .ActionSheet__text,
+.ActionSheet--vkcom .ActionSheet__title + .ActionSheet__text {
+  margin-top: 8px;
+}
+
+/**
+ * Desktop version
+ */
+
+.ActionSheet--desktop {
+  width: auto;
+  height: auto;
+  background: var(--modal_card_background);
+  animation: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ActionSheet--desktop.ActionSheet--sizeY-compact {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.ActionSheet--desktop.ActionSheet--ios {
+  border-radius: 14px;
+  box-shadow: 0 0 96px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
+  padding: 0;
+}
+
+.ActionSheet--desktop.ActionSheet--android {
+  min-width: 112px;
+  border-radius: 12px;
+  padding: 8px 0;
+  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.16), 0 0 4px rgba(0, 0, 0, 0.08);
+}
+
+.ActionSheet--desktop.ActionSheet--vkcom {
+  border-radius: 12px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
+}
+
+.ActionSheet--desktop.ActionSheet--vkcom .ActionSheet__header {
+  padding: 14px 20px;
+}
+
+/**
+* Animations
+*/
+@keyframes vkui-animation-actionsheet-intro {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}

package/src/components/ActionSheet/ActionSheet.tsx

@@ -0,0 +1,158 @@
+import * as React from "react";
+import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
+import { ViewWidth, ViewHeight } from "../../hoc/withAdaptivity";
+import { IOS } from "../../lib/platform";
+import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
+import { ActionSheetDropdown } from "./ActionSheetDropdown";
+import { hasReactNode, noop } from "../../lib/utils";
+import { ActionSheetContext, ItemClickHandler } from "./ActionSheetContext";
+import { Caption } from "../Typography/Caption/Caption";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useTimeout } from "../../hooks/useTimeout";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useObjectMemo } from "../../hooks/useObjectMemo";
+import { warnOnce } from "../../lib/warnOnce";
+import { SharedDropdownProps, PopupDirection, ToggleRef } from "./types";
+import "./ActionSheet.css";
+
+export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
+  header?: React.ReactNode;
+  text?: React.ReactNode;
+  /**
+   * Закрыть попап по клику снаружи. В v5 будет обязательным.
+   */
+  onClose?: VoidFunction;
+  /**
+   * Элемент, рядом с которым вылезает попап на десктопе.
+   * Лучше передавать RefObject c current.
+   * В v5 будет обязательным.
+   */
+  toggleRef?: ToggleRef;
+  /**
+   * Направление на десктопе
+   */
+  popupDirection?: PopupDirection;
+  /**
+   * Только iOS. В v5 будет обязательным.
+   */
+  iosCloseItem?: React.ReactNode;
+}
+
+const warn = warnOnce("ActionSheet");
+
+export const ActionSheet: React.FC<ActionSheetProps> = ({
+  children,
+  className,
+  header,
+  text,
+  style,
+  iosCloseItem,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+  const [closing, setClosing] = React.useState(false);
+  const onClose = () => setClosing(true);
+  const _action = React.useRef(noop);
+
+  const afterClose = () => {
+    restProps.onClose?.();
+    _action.current();
+    _action.current = noop;
+  };
+
+  if (process.env.NODE_ENV === "development" && !restProps.onClose) {
+    warn("can't close on outer click without onClose");
+  }
+
+  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
+  const isDesktop =
+    viewWidth >= ViewWidth.SMALL_TABLET &&
+    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+
+  let timeout = platform === IOS ? 300 : 200;
+
+  if (isDesktop) {
+    timeout = 0;
+  }
+
+  const fallbackTransitionFinish = useTimeout(afterClose, timeout);
+  React.useEffect(() => {
+    if (closing) {
+      fallbackTransitionFinish.set();
+    } else {
+      fallbackTransitionFinish.clear();
+    }
+  }, [closing, fallbackTransitionFinish]);
+
+  const onItemClick = React.useCallback<ItemClickHandler>(
+    (action, immediateAction, autoclose) => (event) => {
+      event.persist();
+      immediateAction && immediateAction(event);
+      if (autoclose) {
+        _action.current = () => action && action(event);
+        setClosing(true);
+      } else {
+        action && action(event);
+      }
+    },
+    []
+  );
+  const contextValue = useObjectMemo({ onItemClick, isDesktop });
+
+  const DropdownComponent = isDesktop
+    ? ActionSheetDropdownDesktop
+    : ActionSheetDropdown;
+
+  const actionSheet = (
+    <ActionSheetContext.Provider value={contextValue}>
+      <DropdownComponent
+        closing={closing}
+        timeout={timeout}
+        {...(restProps as Omit<SharedDropdownProps, "closing">)}
+        onClose={onClose}
+        className={isDesktop ? className : undefined}
+        style={isDesktop ? style : undefined}
+      >
+        {(hasReactNode(header) || hasReactNode(text)) && (
+          <header vkuiClass="ActionSheet__header">
+            {hasReactNode(header) && (
+              <Caption
+                weight={platform === IOS ? "1" : "2"}
+                vkuiClass="ActionSheet__title"
+              >
+                {header}
+              </Caption>
+            )}
+            {hasReactNode(text) && (
+              <Caption vkuiClass="ActionSheet__text">{text}</Caption>
+            )}
+          </header>
+        )}
+        {children}
+        {platform === IOS && !isDesktop && iosCloseItem}
+      </DropdownComponent>
+    </ActionSheetContext.Provider>
+  );
+
+  if (isDesktop) {
+    return actionSheet;
+  }
+
+  return (
+    <PopoutWrapper
+      closing={closing}
+      alignY="bottom"
+      className={className}
+      style={style}
+      onClick={onClose}
+      hasMask
+      fixed
+    >
+      {actionSheet}
+    </PopoutWrapper>
+  );
+};
+
+ActionSheet.defaultProps = {
+  popupDirection: "bottom",
+};

package/src/components/ActionSheet/ActionSheetContext.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export type ActionType<T> = (event: React.MouseEvent<T>) => void;
+
+export type ItemClickHandler<T extends Element = Element> = (
+  action: ActionType<T> | undefined,
+  immediateAction: ActionType<T> | undefined,
+  autoclose: boolean
+) => (event: React.MouseEvent) => void;
+
+export type ActionSheetContextType<T extends Element = Element> = {
+  onItemClick?: ItemClickHandler<T>;
+  isDesktop?: boolean;
+};
+
+export const ActionSheetContext = React.createContext<
+  ActionSheetContextType<any>
+>({});

package/src/components/ActionSheet/ActionSheetDropdown.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { SharedDropdownProps } from "./types";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
+import "./ActionSheet.css";
+
+const stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();
+
+export const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({
+  children,
+  closing,
+  // these 2 props are only omitted - ActionSheetDesktop compat
+  toggleRef,
+  popupDirection,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+  const baseClaseName = getClassName("ActionSheet", platform);
+
+  return (
+    <FocusTrap
+      {...restProps}
+      onClick={stopPropagation}
+      vkuiClass={classNames(baseClaseName, {
+        "ActionSheet--closing": closing,
+      })}
+    >
+      {children}
+    </FocusTrap>
+  );
+};

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { useDOM } from "../../lib/dom";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useEffectDev } from "../../hooks/useEffectDev";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { isRefObject } from "../../lib/isRefObject";
+import { warnOnce } from "../../lib/warnOnce";
+import { useEventListener } from "../../hooks/useEventListener";
+import { SharedDropdownProps } from "./types";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
+import { Popper } from "../Popper/Popper";
+import "./ActionSheet.css";
+
+const warn = warnOnce("ActionSheet");
+function getEl(
+  ref: SharedDropdownProps["toggleRef"]
+): Element | null | undefined {
+  return ref && "current" in ref ? ref.current : ref;
+}
+
+export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
+  children,
+  toggleRef,
+  closing,
+  popupDirection,
+  onClose,
+  className,
+  style,
+  ...restProps
+}) => {
+  const { document } = useDOM();
+  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+  const elementRef = React.useRef<HTMLDivElement | null>(null);
+
+  useEffectDev(() => {
+    const toggleEl = getEl(toggleRef);
+    if (!toggleEl) {
+      warn("toggleRef not passed");
+    }
+  }, [toggleRef]);
+
+  const isPopupDirectionTop = React.useMemo(
+    () =>
+      popupDirection === "top" ||
+      (typeof popupDirection === "function" &&
+        popupDirection(elementRef) === "top"),
+    [popupDirection, elementRef]
+  );
+
+  const bodyClickListener = useEventListener("click", (e: MouseEvent) => {
+    const dropdownElement = elementRef?.current;
+    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {
+      onClose?.();
+    }
+  });
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      bodyClickListener.add(document!.body);
+    });
+  }, [bodyClickListener, document]);
+
+  const onClick = React.useCallback((e) => e.stopPropagation(), []);
+
+  const targetRef = React.useMemo(() => {
+    if (isRefObject<SharedDropdownProps["toggleRef"], HTMLElement>(toggleRef)) {
+      return toggleRef;
+    }
+    const refObject = { current: toggleRef as HTMLElement };
+
+    return refObject;
+  }, [toggleRef]);
+
+  return (
+    <Popper
+      targetRef={targetRef}
+      offsetDistance={0}
+      placement={isPopupDirectionTop ? "top-end" : "bottom-end"}
+      vkuiClass={classNames(
+        getClassName("ActionSheet", platform),
+        "ActionSheet--desktop",
+        `ActionSheet--sizeY-${sizeY}`
+      )}
+      className={className}
+      style={style}
+      getRef={elementRef}
+      forcePortal={false}
+    >
+      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>
+        {children}
+      </FocusTrap>
+    </Popper>
+  );
+};