@vkontakte/vkui 4.27.2 → 4.28.0

package/postcss.config.js

@@ -1,54 +0,0 @@
-const path = require("path");
-const cssCustomProperties = require("postcss-custom-properties");
-const scopeRoot = require("./tasks/postcss-scope-root.js");
-const cssImport = require("postcss-import");
-const autoprefixer = require("autoprefixer");
-const cssModules = require("postcss-modules");
-const csso = require("postcss-csso");
-const checkKeyframes = require("./tasks/postcss-check-keyframes");
-const { defaultSchemeId } = require("./package.json");
-
-const animationsSource = path.join(__dirname, "src/styles/animations.css");
-const cssPropSources = [
-  path.join(
-    __dirname,
-    "node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css"
-  ),
-  path.join(__dirname, "src/styles/bright_light.css"),
-  path.join(__dirname, "src/styles/constants.css"),
-  animationsSource,
-];
-
-let plugins = [
-  cssImport(),
-  checkKeyframes({
-    importFrom: animationsSource,
-  }),
-  cssCustomProperties({
-    importFrom: cssPropSources,
-    preserve: true,
-  }),
-  // postcss-custom-properties only works with :root
-  scopeRoot({
-    customPropRoot: ".vkui__root, .vkui__portal-root",
-    except: [
-      path.resolve(`./src/styles/${defaultSchemeId}.css`),
-      path.resolve(
-        "./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css"
-      ),
-    ],
-  }),
-  autoprefixer(),
-  cssModules({
-    generateScopedName: (name) =>
-      name.startsWith("vkui") || name === "mount" ? name : `vkui${name}`,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    getJSON: () => {},
-  }),
-];
-
-if (process.env.NODE_ENV === "production") {
-  plugins.push(csso({ restructure: false }));
-}
-
-module.exports = { plugins, cssPropSources };

package/src/appearance/constants.ts

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

package/src/components/ActionSheet/ActionSheet.css

@@ -1,145 +0,0 @@
-.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

@@ -1,161 +0,0 @@
-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
-                level="1"
-                weight={platform === IOS ? "semibold" : "medium"}
-                vkuiClass="ActionSheet__title"
-              >
-                {header}
-              </Caption>
-            )}
-            {hasReactNode(text) && (
-              <Caption level="1" weight="regular" 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

@@ -1,18 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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>
-  );
-};