@vkontakte/vkui 4.37.0 → 5.0.0

package/dist/components/AppRoot/AppRoot.js

@@ -2,36 +2,30 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "mode", "embedded", "sizeX", "hasMouse", "noLegacyClasses", "scroll", "portalRoot", "disablePortal"];
+var _excluded = ["children", "mode", "scroll", "portalRoot", "disablePortal"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { useDOM } from "../../lib/dom";
 import { classNames } from "../../lib/classNames";
 import { AppRootContext } from "./AppRootContext";
-import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { classScopingMode } from "../../lib/classScopingMode";
 import { IconSettingsProvider } from "@vkontakte/icons";
 import { ElementScrollController, GlobalScrollController } from "./ScrollContext";
 import { noop } from "../../lib/utils";
-import { warnOnce } from "../../lib/warnOnce";
 import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker";
 import { useInsets } from "../../hooks/useInsets";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import { isRefObject } from "../../lib/isRefObject";
-var warn = warnOnce("AppRoot");
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
+
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */
-
-export var AppRoot = withAdaptivity(function (_ref) {
+export var AppRoot = function AppRoot(_ref) {
   var children = _ref.children,
-      _mode = _ref.mode,
-      _embedded = _ref.embedded,
-      sizeX = _ref.sizeX,
-      hasMouse = _ref.hasMouse,
-      _ref$noLegacyClasses = _ref.noLegacyClasses,
-      noLegacyClasses = _ref$noLegacyClasses === void 0 ? false : _ref$noLegacyClasses,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "full" : _ref$mode,
       _ref$scroll = _ref.scroll,
       scroll = _ref$scroll === void 0 ? "global" : _ref$scroll,
       _ref$portalRoot = _ref.portalRoot,
@@ -39,8 +33,6 @@ export var AppRoot = withAdaptivity(function (_ref) {
       disablePortal = _ref.disablePortal,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  // normalize mode
-  var mode = _mode || (_embedded ? "embedded" : "full");
   var isKeyboardInputActive = useKeyboardInputTracker();
   var rootRef = React.useRef(null);
 
@@ -57,17 +49,9 @@ export var AppRoot = withAdaptivity(function (_ref) {
   var _React$useContext = React.useContext(ConfigProviderContext),
       appearance = _React$useContext.appearance;
 
-  classScopingMode.noConflict = noLegacyClasses;
-
-  if (process.env.NODE_ENV === "development") {
-    if (scroll !== "global" && mode !== "embedded") {
-      warn("\u0421\u0432\u043E\u0439\u0441\u0442\u0432\u043E scroll=\"".concat(scroll, "\" \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u0432 \u0440\u0435\u0436\u0438\u043C\u0435 embedded"), "error");
-    }
-
-    if (_mode && _embedded) {
-      warn("\u0421\u0432\u043E\u0439\u0441\u0442\u0432\u043E mode=\"".concat(mode, "\" \u043F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442\u043D\u0435\u0435, \u0447\u0435\u043C \"embedded\""));
-    }
-  } // setup portal
+  var _useAdaptivity = useAdaptivity(),
+      hasMouse = _useAdaptivity.hasMouse,
+      sizeX = _useAdaptivity.sizeX; // setup portal
 
 
   useIsomorphicLayoutEffect(function () {
@@ -152,14 +136,15 @@ export var AppRoot = withAdaptivity(function (_ref) {
   useIsomorphicLayoutEffect(function () {
     var _rootRef$current3;
 
-    if (mode === "partial" || sizeX !== SizeType.REGULAR) {
+    if (mode === "partial") {
       return noop;
     }
 
+    var className = getSizeXClassName("vkui", sizeX);
     var container = mode === "embedded" ? (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.parentElement : document.body;
-    container === null || container === void 0 ? void 0 : container.classList.add("vkui--sizeX-regular");
+    container === null || container === void 0 ? void 0 : container.classList.add(className);
     return function () {
-      return container === null || container === void 0 ? void 0 : container.classList.remove("vkui--sizeX-regular");
+      return container === null || container === void 0 ? void 0 : container.classList.remove(className);
     };
   }, [sizeX]);
   useIsomorphicLayoutEffect(function () {
@@ -187,16 +172,11 @@ export var AppRoot = withAdaptivity(function (_ref) {
   }, createScopedElement(ScrollController, {
     elRef: rootRef
   }, createScopedElement(IconSettingsProvider, {
-    classPrefix: "vkui",
-    globalClasses: !noLegacyClasses
+    classPrefix: "vkui"
   }, children)));
   return mode === "partial" ? content : createScopedElement("div", _extends({
     ref: rootRef,
     vkuiClass: classNames("AppRoot", !hasMouse && "AppRoot--no-mouse")
   }, props), content);
-}, {
-  sizeX: true,
-  hasMouse: true
-});
-AppRoot.displayName = "AppRoot";
+};
 //# sourceMappingURL=AppRoot.js.map

package/dist/components/AppRoot/AppRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppRoot.js","names":["React","useDOM","classNames","AppRootContext","withAdaptivity","SizeType","useIsomorphicLayoutEffect","classScopingMode","IconSettingsProvider","ElementScrollController","GlobalScrollController","noop","warnOnce","useKeyboardInputTracker","useInsets","ConfigProviderContext","isRefObject","warn","AppRoot","children","_mode","mode","_embedded","embedded","sizeX","hasMouse","noLegacyClasses","scroll","portalRoot","portalRootProp","disablePortal","props","isKeyboardInputActive","rootRef","useRef","useState","setPortalRoot","document","insets","useContext","appearance","noConflict","process","env","NODE_ENV","portal","current","createElement","classList","add","body","appendChild","parentElement","removeChild","parent","classes","concat","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","REGULAR","container","ScrollController","useMemo","content","appRoot","keyboardInput","displayName"],"sources":["../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../../lib/dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { AppRootContext } from \"./AppRootContext\";\nimport {\n  withAdaptivity,\n  SizeType,\n  AdaptivityProps,\n} from \"../../hoc/withAdaptivity\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { classScopingMode } from \"../../lib/classScopingMode\";\nimport { IconSettingsProvider } from \"@vkontakte/icons\";\nimport {\n  ElementScrollController,\n  GlobalScrollController,\n} from \"./ScrollContext\";\nimport { noop } from \"../../lib/utils\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { useKeyboardInputTracker } from \"../../hooks/useKeyboardInputTracker\";\nimport { useInsets } from \"../../hooks/useInsets\";\nimport { Insets } from \"@vkontakte/vk-bridge\";\nimport { ConfigProviderContext } from \"../ConfigProvider/ConfigProviderContext\";\nimport { isRefObject } from \"../../lib/isRefObject\";\nimport \"./AppRoot.css\";\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<AdaptivityProps, \"sizeX\" | \"hasMouse\"> {\n  /** @deprecated Use mode=\"embedded\" */\n  embedded?: boolean;\n  /** Режим встраивания */\n  mode?: \"partial\" | \"embedded\" | \"full\";\n  window?: Window;\n  /** Убирает классы без префикса (.Button) */\n  noLegacyClasses?: boolean;\n  scroll?: \"global\" | \"contain\";\n  /** Элемент используемый в качестве root для порталов\n   * При передаче своего элемента необходимо задать ему class=\"vkui__portal-root\" и добавить в DOM\n   */\n  // TODO: v5.0.0 изменить тип на HTMLElement\n  portalRoot?: HTMLDivElement | React.RefObject<HTMLDivElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\nconst warn = warnOnce(\"AppRoot\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = withAdaptivity<AppRootProps>(\n  ({\n    children,\n    mode: _mode,\n    embedded: _embedded,\n    sizeX,\n    hasMouse,\n    noLegacyClasses = false,\n    scroll = \"global\",\n    portalRoot: portalRootProp = null,\n    disablePortal,\n    ...props\n  }) => {\n    // normalize mode\n    const mode = _mode || (_embedded ? \"embedded\" : \"full\");\n    const isKeyboardInputActive = useKeyboardInputTracker();\n    const rootRef = React.useRef<HTMLDivElement | null>(null);\n    const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement | null>(\n      null\n    );\n    const { document } = useDOM();\n    const insets = useInsets();\n    const { appearance } = React.useContext(ConfigProviderContext);\n\n    classScopingMode.noConflict = noLegacyClasses;\n\n    if (process.env.NODE_ENV === \"development\") {\n      if (scroll !== \"global\" && mode !== \"embedded\") {\n        warn(\n          `Свойство scroll=\"${scroll}\" поддерживается только в режиме embedded`,\n          \"error\"\n        );\n      }\n      if (_mode && _embedded) {\n        warn(`Свойство mode=\"${mode}\" приоритетнее, чем \"embedded\"`);\n      }\n    }\n\n    // setup portal\n    useIsomorphicLayoutEffect(() => {\n      let portal: HTMLDivElement | null = null;\n      if (portalRootProp) {\n        if (isRefObject(portalRootProp)) {\n          portal = portalRootProp.current;\n        } else {\n          portal = portalRootProp;\n        }\n      }\n      if (!portal) {\n        portal = document!.createElement(\"div\");\n        portal.classList.add(\"vkui__portal-root\");\n        document!.body.appendChild(portal);\n      }\n      setPortalRoot(portal);\n      return () => {\n        portal?.parentElement?.removeChild(portal);\n      };\n    }, [portalRootProp]);\n\n    // setup root classes\n    useIsomorphicLayoutEffect(() => {\n      if (mode === \"partial\") {\n        return noop;\n      }\n\n      const parent = rootRef.current?.parentElement;\n      const classes = [\"vkui__root\"].concat(\n        mode === \"embedded\" ? \"vkui__root--embedded\" : []\n      );\n      parent?.classList.add(...classes);\n\n      return () => {\n        parent?.classList.remove(...classes);\n      };\n    }, []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (mode === \"full\") {\n        document!.documentElement.classList.add(\"vkui\");\n\n        return () => {\n          document!.documentElement.classList.remove(\"vkui\");\n        };\n      }\n\n      return undefined;\n    }, [document, mode]);\n\n    // setup insets\n    useIsomorphicLayoutEffect(() => {\n      if (mode === \"partial\" || !rootRef.current?.parentElement) {\n        return noop;\n      }\n\n      const parent = rootRef.current.parentElement;\n\n      for (const key in insets) {\n        if (\n          insets.hasOwnProperty(key) &&\n          typeof insets[key as keyof Insets] === \"number\"\n        ) {\n          const inset = insets[key as keyof Insets];\n          parent.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);\n          portalRoot &&\n            portalRoot.style.setProperty(\n              `--safe-area-inset-${key}`,\n              `${inset}px`\n            );\n        }\n      }\n\n      return () => {\n        for (const key in insets) {\n          if (insets.hasOwnProperty(key)) {\n            parent.style.removeProperty(`--safe-area-inset-${key}`);\n            portalRoot &&\n              portalRoot.style.removeProperty(`--safe-area-inset-${key}`);\n          }\n        }\n      };\n    }, [insets, portalRoot]);\n\n    // adaptivity handler\n    useIsomorphicLayoutEffect(() => {\n      if (mode === \"partial\" || sizeX !== SizeType.REGULAR) {\n        return noop;\n      }\n      const container =\n        mode === \"embedded\" ? rootRef.current?.parentElement : document!.body;\n      container?.classList.add(\"vkui--sizeX-regular\");\n      return () => container?.classList.remove(\"vkui--sizeX-regular\");\n    }, [sizeX]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (mode !== \"full\" || appearance === undefined) {\n        return noop;\n      }\n      document!.documentElement.style.setProperty(\"color-scheme\", appearance);\n\n      return () =>\n        document!.documentElement.style.removeProperty(\"color-scheme\");\n    }, [appearance]);\n\n    const ScrollController = React.useMemo(\n      () =>\n        scroll === \"contain\" ? ElementScrollController : GlobalScrollController,\n      [scroll]\n    );\n\n    const content = (\n      <AppRootContext.Provider\n        value={{\n          appRoot: rootRef,\n          portalRoot,\n          embedded: mode === \"embedded\",\n          keyboardInput: isKeyboardInputActive,\n          mode,\n          disablePortal,\n        }}\n      >\n        <ScrollController elRef={rootRef}>\n          <IconSettingsProvider\n            classPrefix=\"vkui\"\n            globalClasses={!noLegacyClasses}\n          >\n            {children}\n          </IconSettingsProvider>\n        </ScrollController>\n      </AppRootContext.Provider>\n    );\n\n    return mode === \"partial\" ? (\n      content\n    ) : (\n      <div\n        ref={rootRef}\n        vkuiClass={classNames(\"AppRoot\", !hasMouse && \"AppRoot--no-mouse\")}\n        {...props}\n      >\n        {content}\n      </div>\n    );\n  },\n  {\n    sizeX: true,\n    hasMouse: true,\n  }\n);\n\nAppRoot.displayName = \"AppRoot\";\n"],"mappings":"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"}
+{"version":3,"file":"AppRoot.js","names":["React","useDOM","classNames","AppRootContext","useIsomorphicLayoutEffect","IconSettingsProvider","ElementScrollController","GlobalScrollController","noop","useKeyboardInputTracker","useInsets","useAdaptivity","ConfigProviderContext","isRefObject","getSizeXClassName","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","props","isKeyboardInputActive","rootRef","useRef","useState","setPortalRoot","document","insets","useContext","appearance","hasMouse","sizeX","portal","current","createElement","classList","add","body","appendChild","parentElement","removeChild","parent","classes","concat","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","className","container","ScrollController","useMemo","content","appRoot","embedded","keyboardInput"],"sources":["../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../../lib/dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { AppRootContext } from \"./AppRootContext\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { IconSettingsProvider } from \"@vkontakte/icons\";\nimport {\n  ElementScrollController,\n  GlobalScrollController,\n} from \"./ScrollContext\";\nimport { noop } from \"../../lib/utils\";\nimport { useKeyboardInputTracker } from \"../../hooks/useKeyboardInputTracker\";\nimport { useInsets } from \"../../hooks/useInsets\";\nimport { Insets } from \"@vkontakte/vk-bridge\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { ConfigProviderContext } from \"../ConfigProvider/ConfigProviderContext\";\nimport { isRefObject } from \"../../lib/isRefObject\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport \"./AppRoot.css\";\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: \"partial\" | \"embedded\" | \"full\";\n  window?: Window;\n  scroll?: \"global\" | \"contain\";\n  /** root-элемент для порталов.\n   *\n   * При передаче своего элемента задайте этому элементу `class=\"vkui__portal-root\"` и добавьте его в DOM.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = \"full\",\n  scroll = \"global\",\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const { appearance } = React.useContext(ConfigProviderContext);\n\n  const { hasMouse, sizeX } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement(\"div\");\n      portal.classList.add(\"vkui__portal-root\");\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      portal?.parentElement?.removeChild(portal);\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === \"partial\") {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = [\"vkui__root\"].concat(\n      mode === \"embedded\" ? \"vkui__root--embedded\" : []\n    );\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === \"full\") {\n      document!.documentElement.classList.add(\"vkui\");\n\n      return () => {\n        document!.documentElement.classList.remove(\"vkui\");\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === \"partial\" || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    for (const key in insets) {\n      if (\n        insets.hasOwnProperty(key) &&\n        typeof insets[key as keyof Insets] === \"number\"\n      ) {\n        const inset = insets[key as keyof Insets];\n        parent.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(\n            `--safe-area-inset-${key}`,\n            `${inset}px`\n          );\n      }\n    }\n\n    return () => {\n      for (const key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(`--safe-area-inset-${key}`);\n          portalRoot &&\n            portalRoot.style.removeProperty(`--safe-area-inset-${key}`);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === \"partial\") {\n      return noop;\n    }\n    const className = getSizeXClassName(\"vkui\", sizeX);\n    const container =\n      mode === \"embedded\" ? rootRef.current?.parentElement : document!.body;\n    container?.classList.add(className);\n    return () => container?.classList.remove(className);\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== \"full\" || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty(\"color-scheme\", appearance);\n\n    return () => document!.documentElement.style.removeProperty(\"color-scheme\");\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () =>\n      scroll === \"contain\" ? ElementScrollController : GlobalScrollController,\n    [scroll]\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === \"embedded\",\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">\n          {children}\n        </IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === \"partial\" ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      vkuiClass={classNames(\"AppRoot\", !hasMouse && \"AppRoot--no-mouse\")}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/AppRoot/AppRootContext.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 export interface AppRootContextInterface {
     appRoot?: React.RefObject<HTMLDivElement>;
-    portalRoot?: HTMLDivElement | null;
+    portalRoot?: HTMLElement | null;
     embedded?: boolean;
     mode?: "partial" | "embedded" | "full";
     keyboardInput?: boolean;

package/dist/components/AppRoot/AppRootContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppRootContext.js","names":["React","AppRootContext","createContext","portalRoot"],"sources":["../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLDivElement | null;\n  embedded?: boolean;\n  mode?: \"partial\" | \"embedded\" | \"full\";\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAWA,OAAO,IAAMC,cAAc,gBAAGD,KAAK,CAACE,aAAN,CAA6C;EACzEC,UAAU,EAAE;AAD6D,CAA7C,CAAvB"}
+{"version":3,"file":"AppRootContext.js","names":["React","AppRootContext","createContext","portalRoot"],"sources":["../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: \"partial\" | \"embedded\" | \"full\";\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAWA,OAAO,IAAMC,cAAc,gBAAGD,KAAK,CAACE,aAAN,CAA6C;EACzEC,UAAU,EAAE;AAD6D,CAA7C,CAAvB"}

package/dist/components/AppRoot/AppRootPortal.d.ts

@@ -4,4 +4,4 @@ export interface AppRootPortalProps {
     forcePortal?: boolean;
     children?: React.ReactNode;
 }
-export declare const AppRootPortal: ({ children, className, forcePortal, }: AppRootPortalProps) => JSX.Element;
+export declare const AppRootPortal: ({ children, className, forcePortal: forcePortalProp, }: AppRootPortalProps) => JSX.Element | null;

package/dist/components/AppRoot/AppRootPortal.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { createPortal } from "react-dom";
@@ -5,11 +6,14 @@ import { AppRootContext } from "./AppRootContext";
 import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
 import { useAppearance } from "../../hooks/useAppearance";
 export var AppRootPortal = function AppRootPortal(_ref) {
-  var _forcePortal;
-
   var children = _ref.children,
       className = _ref.className,
-      forcePortal = _ref.forcePortal;
+      forcePortalProp = _ref.forcePortal;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      mounted = _React$useState2[0],
+      setMounted = _React$useState2[1];
 
   var _React$useContext = React.useContext(AppRootContext),
       portalRoot = _React$useContext.portalRoot,
@@ -17,7 +21,15 @@ export var AppRootPortal = function AppRootPortal(_ref) {
       disablePortal = _React$useContext.disablePortal;
 
   var appearance = useAppearance();
-  forcePortal = (_forcePortal = forcePortal) !== null && _forcePortal !== void 0 ? _forcePortal : mode !== "full";
+  React.useEffect(function () {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  var forcePortal = forcePortalProp !== null && forcePortalProp !== void 0 ? forcePortalProp : mode !== "full";
   return !disablePortal && portalRoot && forcePortal ? /*#__PURE__*/createPortal(createScopedElement(AppearanceProvider, {
     appearance: appearance
   }, createScopedElement("div", {

package/dist/components/AppRoot/AppRootPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppRootPortal.js","names":["React","createPortal","AppRootContext","AppearanceProvider","useAppearance","AppRootPortal","children","className","forcePortal","useContext","portalRoot","mode","disablePortal","appearance"],"sources":["../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AppRootContext } from \"./AppRootContext\";\nimport { AppearanceProvider } from \"../AppearanceProvider/AppearanceProvider\";\nimport { useAppearance } from \"../../hooks/useAppearance\";\n\nexport interface AppRootPortalProps {\n  className?: string;\n  forcePortal?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal,\n}: AppRootPortalProps) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  forcePortal = forcePortal ?? mode !== \"full\";\n  return !disablePortal && portalRoot && forcePortal ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalRoot\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,WAA7B;AACA,SAASC,cAAT;AACA,SAASC,kBAAT;AACA,SAASC,aAAT;AAQA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAIH;EAAA;;EAAA,IAHxBC,QAGwB,QAHxBA,QAGwB;EAAA,IAFxBC,SAEwB,QAFxBA,SAEwB;EAAA,IADxBC,WACwB,QADxBA,WACwB;;EACxB,wBAA4CR,KAAK,CAACS,UAAN,CAAiBP,cAAjB,CAA5C;EAAA,IAAQQ,UAAR,qBAAQA,UAAR;EAAA,IAAoBC,IAApB,qBAAoBA,IAApB;EAAA,IAA0BC,aAA1B,qBAA0BA,aAA1B;;EACA,IAAMC,UAAU,GAAGT,aAAa,EAAhC;EAEAI,WAAW,mBAAGA,WAAH,uDAAkBG,IAAI,KAAK,MAAtC;EACA,OAAO,CAACC,aAAD,IAAkBF,UAAlB,IAAgCF,WAAhC,gBACLP,YAAY,CACV,oBAAC,kBAAD;IAAoB,UAAU,EAAEY;EAAhC,GACE;IAAK,SAAS,EAAEN;EAAhB,GAA4BD,QAA5B,CADF,CADU,EAIVI,UAJU,CADP,GAQL,oBAAC,KAAD,CAAO,QAAP,QAAiBJ,QAAjB,CARF;AAUD,CAnBM"}
+{"version":3,"file":"AppRootPortal.js","names":["React","createPortal","AppRootContext","AppearanceProvider","useAppearance","AppRootPortal","children","className","forcePortalProp","forcePortal","useState","mounted","setMounted","useContext","portalRoot","mode","disablePortal","appearance","useEffect"],"sources":["../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AppRootContext } from \"./AppRootContext\";\nimport { AppearanceProvider } from \"../AppearanceProvider/AppearanceProvider\";\nimport { useAppearance } from \"../../hooks/useAppearance\";\n\nexport interface AppRootPortalProps {\n  className?: string;\n  forcePortal?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n}: AppRootPortalProps) => {\n  const [mounted, setMounted] = React.useState(false);\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== \"full\";\n\n  return !disablePortal && portalRoot && forcePortal ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalRoot\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,WAA7B;AACA,SAASC,cAAT;AACA,SAASC,kBAAT;AACA,SAASC,aAAT;AAQA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAIH;EAAA,IAHxBC,QAGwB,QAHxBA,QAGwB;EAAA,IAFxBC,SAEwB,QAFxBA,SAEwB;EAAA,IADXC,eACW,QADxBC,WACwB;;EACxB,sBAA8BT,KAAK,CAACU,QAAN,CAAe,KAAf,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB;;EACA,wBAA4CZ,KAAK,CAACa,UAAN,CAAiBX,cAAjB,CAA5C;EAAA,IAAQY,UAAR,qBAAQA,UAAR;EAAA,IAAoBC,IAApB,qBAAoBA,IAApB;EAAA,IAA0BC,aAA1B,qBAA0BA,aAA1B;;EACA,IAAMC,UAAU,GAAGb,aAAa,EAAhC;EAEAJ,KAAK,CAACkB,SAAN,CAAgB,YAAM;IACpBN,UAAU,CAAC,IAAD,CAAV;EACD,CAFD,EAEG,EAFH;;EAIA,IAAI,CAACD,OAAL,EAAc;IACZ,OAAO,IAAP;EACD;;EAED,IAAMF,WAAW,GAAGD,eAAH,aAAGA,eAAH,cAAGA,eAAH,GAAsBO,IAAI,KAAK,MAAhD;EAEA,OAAO,CAACC,aAAD,IAAkBF,UAAlB,IAAgCL,WAAhC,gBACLR,YAAY,CACV,oBAAC,kBAAD;IAAoB,UAAU,EAAEgB;EAAhC,GACE;IAAK,SAAS,EAAEV;EAAhB,GAA4BD,QAA5B,CADF,CADU,EAIVQ,UAJU,CADP,GAQL,oBAAC,KAAD,CAAO,QAAP,QAAiBR,QAAjB,CARF;AAUD,CA7BM"}

package/dist/components/AppearanceProvider/AppearanceProvider.js

@@ -1,7 +1,6 @@
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { AppearanceProviderContext } from "./AppearanceProviderContext";
-import { getScheme } from "../../helpers/getScheme";
 import { classNamesString } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Platform } from "../../lib/platform";
@@ -36,16 +35,12 @@ export var AppearanceProvider = function AppearanceProvider(_ref) {
       _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? "light" : _ref$appearance;
   var platform = usePlatform();
-  var scheme = getScheme({
-    platform: platform,
-    appearance: appearance
-  });
   return createScopedElement(AppearanceProviderContext.Provider, {
     value: appearance
   }, React.Children.map(children, function (child) {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       return /*#__PURE__*/React.cloneElement(child, {
-        className: classNamesString(child.props.className, "vkui".concat(scheme), generateVKUITokensClassName(platform, appearance))
+        className: classNamesString(child.props.className, generateVKUITokensClassName(platform, appearance))
       });
     }
 

package/dist/components/AppearanceProvider/AppearanceProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppearanceProvider.js","names":["React","AppearanceProviderContext","getScheme","classNamesString","usePlatform","Platform","generateVKUITokensClassName","platform","appearance","tokensPlatform","ANDROID","IOS","VKCOM","AppearanceProvider","children","scheme","Children","map","child","isValidElement","cloneElement","className","props"],"sources":["../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AppearanceType } from \"@vkontakte/vk-bridge\";\nimport { AppearanceProviderContext } from \"./AppearanceProviderContext\";\nimport { getScheme } from \"../../helpers/getScheme\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\n\nexport interface AppearanceProviderProps {\n  appearance?: AppearanceType;\n  children?: React.ReactNode;\n}\n\nexport const generateVKUITokensClassName = (\n  platform: string,\n  appearance: string\n): string => {\n  let tokensPlatform;\n  switch (platform) {\n    case Platform.ANDROID:\n      tokensPlatform = \"vkBase\";\n      break;\n    case Platform.IOS:\n      tokensPlatform = \"vkIOS\";\n      break;\n    case Platform.VKCOM:\n      tokensPlatform = \"vkCom\";\n      break;\n    default:\n      tokensPlatform = platform;\n  }\n\n  return `vkui--${tokensPlatform}--${appearance}`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({\n  children,\n  appearance = \"light\",\n}: AppearanceProviderProps) => {\n  const platform = usePlatform();\n  const scheme = getScheme({\n    platform,\n    appearance,\n  });\n\n  return (\n    <AppearanceProviderContext.Provider value={appearance}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            className: classNamesString(\n              child.props.className,\n              `vkui${scheme}`,\n              generateVKUITokensClassName(platform, appearance)\n            ),\n          });\n        }\n        return child;\n      })}\n    </AppearanceProviderContext.Provider>\n  );\n};\n"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,yBAAT;AACA,SAASC,SAAT;AACA,SAASC,gBAAT;AACA,SAASC,WAAT;AACA,SAASC,QAAT;AAOA,OAAO,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA8B,CACzCC,QADyC,EAEzCC,UAFyC,EAG9B;EACX,IAAIC,cAAJ;;EACA,QAAQF,QAAR;IACE,KAAKF,QAAQ,CAACK,OAAd;MACED,cAAc,GAAG,QAAjB;MACA;;IACF,KAAKJ,QAAQ,CAACM,GAAd;MACEF,cAAc,GAAG,OAAjB;MACA;;IACF,KAAKJ,QAAQ,CAACO,KAAd;MACEH,cAAc,GAAG,OAAjB;MACA;;IACF;MACEA,cAAc,GAAGF,QAAjB;EAXJ;;EAcA,uBAAgBE,cAAhB,eAAmCD,UAAnC;AACD,CApBM;AAsBP;AACA;AACA;;AACA,OAAO,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB,OAGH;EAAA,IAF7BC,QAE6B,QAF7BA,QAE6B;EAAA,2BAD7BN,UAC6B;EAAA,IAD7BA,UAC6B,gCADhB,OACgB;EAC7B,IAAMD,QAAQ,GAAGH,WAAW,EAA5B;EACA,IAAMW,MAAM,GAAGb,SAAS,CAAC;IACvBK,QAAQ,EAARA,QADuB;IAEvBC,UAAU,EAAVA;EAFuB,CAAD,CAAxB;EAKA,OACE,oBAAC,yBAAD,CAA2B,QAA3B;IAAoC,KAAK,EAAEA;EAA3C,GACGR,KAAK,CAACgB,QAAN,CAAeC,GAAf,CAAmBH,QAAnB,EAA6B,UAACI,KAAD,EAAW;IACvC,kBAAIlB,KAAK,CAACmB,cAAN,CAAqBD,KAArB,CAAJ,EAAiC;MAC/B,oBAAOlB,KAAK,CAACoB,YAAN,CAAmBF,KAAnB,EAA0B;QAC/BG,SAAS,EAAElB,gBAAgB,CACzBe,KAAK,CAACI,KAAN,CAAYD,SADa,gBAElBN,MAFkB,GAGzBT,2BAA2B,CAACC,QAAD,EAAWC,UAAX,CAHF;MADI,CAA1B,CAAP;IAOD;;IACD,OAAOU,KAAP;EACD,CAXA,CADH,CADF;AAgBD,CA1BM"}
+{"version":3,"file":"AppearanceProvider.js","names":["React","AppearanceProviderContext","classNamesString","usePlatform","Platform","generateVKUITokensClassName","platform","appearance","tokensPlatform","ANDROID","IOS","VKCOM","AppearanceProvider","children","Children","map","child","isValidElement","cloneElement","className","props"],"sources":["../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AppearanceType } from \"@vkontakte/vk-bridge\";\nimport { AppearanceProviderContext } from \"./AppearanceProviderContext\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\n\nexport interface AppearanceProviderProps {\n  appearance?: AppearanceType;\n  children?: React.ReactNode;\n}\n\nexport const generateVKUITokensClassName = (\n  platform: string,\n  appearance: string\n): string => {\n  let tokensPlatform;\n  switch (platform) {\n    case Platform.ANDROID:\n      tokensPlatform = \"vkBase\";\n      break;\n    case Platform.IOS:\n      tokensPlatform = \"vkIOS\";\n      break;\n    case Platform.VKCOM:\n      tokensPlatform = \"vkCom\";\n      break;\n    default:\n      tokensPlatform = platform;\n  }\n\n  return `vkui--${tokensPlatform}--${appearance}`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({\n  children,\n  appearance = \"light\",\n}: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <AppearanceProviderContext.Provider value={appearance}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            className: classNamesString(\n              child.props.className,\n              generateVKUITokensClassName(platform, appearance)\n            ),\n          });\n        }\n        return child;\n      })}\n    </AppearanceProviderContext.Provider>\n  );\n};\n"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,yBAAT;AACA,SAASC,gBAAT;AACA,SAASC,WAAT;AACA,SAASC,QAAT;AAOA,OAAO,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA8B,CACzCC,QADyC,EAEzCC,UAFyC,EAG9B;EACX,IAAIC,cAAJ;;EACA,QAAQF,QAAR;IACE,KAAKF,QAAQ,CAACK,OAAd;MACED,cAAc,GAAG,QAAjB;MACA;;IACF,KAAKJ,QAAQ,CAACM,GAAd;MACEF,cAAc,GAAG,OAAjB;MACA;;IACF,KAAKJ,QAAQ,CAACO,KAAd;MACEH,cAAc,GAAG,OAAjB;MACA;;IACF;MACEA,cAAc,GAAGF,QAAjB;EAXJ;;EAcA,uBAAgBE,cAAhB,eAAmCD,UAAnC;AACD,CApBM;AAsBP;AACA;AACA;;AACA,OAAO,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB,OAGH;EAAA,IAF7BC,QAE6B,QAF7BA,QAE6B;EAAA,2BAD7BN,UAC6B;EAAA,IAD7BA,UAC6B,gCADhB,OACgB;EAC7B,IAAMD,QAAQ,GAAGH,WAAW,EAA5B;EAEA,OACE,oBAAC,yBAAD,CAA2B,QAA3B;IAAoC,KAAK,EAAEI;EAA3C,GACGP,KAAK,CAACc,QAAN,CAAeC,GAAf,CAAmBF,QAAnB,EAA6B,UAACG,KAAD,EAAW;IACvC,kBAAIhB,KAAK,CAACiB,cAAN,CAAqBD,KAArB,CAAJ,EAAiC;MAC/B,oBAAOhB,KAAK,CAACkB,YAAN,CAAmBF,KAAnB,EAA0B;QAC/BG,SAAS,EAAEjB,gBAAgB,CACzBc,KAAK,CAACI,KAAN,CAAYD,SADa,EAEzBd,2BAA2B,CAACC,QAAD,EAAWC,UAAX,CAFF;MADI,CAA1B,CAAP;IAMD;;IACD,OAAOS,KAAP;EACD,CAVA,CADH,CADF;AAeD,CArBM"}

package/dist/components/AppearanceProvider/AppearanceProviderContext.js

@@ -1,4 +1,4 @@
 import * as React from "react";
-import { Appearance } from "../../helpers/scheme";
+import { Appearance } from "../../helpers/appearance";
 export var AppearanceProviderContext = /*#__PURE__*/React.createContext(Appearance.LIGHT);
 //# sourceMappingURL=AppearanceProviderContext.js.map

package/dist/components/AppearanceProvider/AppearanceProviderContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppearanceProviderContext.js","names":["React","Appearance","AppearanceProviderContext","createContext","LIGHT"],"sources":["../../../src/components/AppearanceProvider/AppearanceProviderContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AppearanceType } from \"@vkontakte/vk-bridge\";\nimport { Appearance } from \"../../helpers/scheme\";\n\nexport const AppearanceProviderContext = React.createContext<AppearanceType>(\n  Appearance.LIGHT\n);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,UAAT;AAEA,OAAO,IAAMC,yBAAyB,gBAAGF,KAAK,CAACG,aAAN,CACvCF,UAAU,CAACG,KAD4B,CAAlC"}
+{"version":3,"file":"AppearanceProviderContext.js","names":["React","Appearance","AppearanceProviderContext","createContext","LIGHT"],"sources":["../../../src/components/AppearanceProvider/AppearanceProviderContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AppearanceType } from \"@vkontakte/vk-bridge\";\nimport { Appearance } from \"../../helpers/appearance\";\n\nexport const AppearanceProviderContext = React.createContext<AppearanceType>(\n  Appearance.LIGHT\n);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,UAAT;AAEA,OAAO,IAAMC,yBAAyB,gBAAGF,KAAK,CAACG,aAAN,CACvCF,UAAU,CAACG,KAD4B,CAAlC"}

package/dist/components/Avatar/Avatar.d.ts

@@ -1,24 +1,48 @@
-import * as React from "react";
-import { HasRef, HasRootRef } from "../../types";
-import "./Avatar.css";
-export interface AvatarProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {
+/// <reference types="react" />
+import { type ImageBaseProps, type ImageBaseBadgeProps } from "../ImageBase/ImageBase";
+declare const COLORS_NUMBER_TO_TEXT_MAP: {
+    readonly 1: "red";
+    readonly 2: "orange";
+    readonly 3: "yellow";
+    readonly 4: "green";
+    readonly 5: "l-blue";
+    readonly 6: "violet";
+};
+export declare const AVATAR_DEFAULT_SIZE = 48;
+/**
+ * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
+ * @example user.id % 6 + 1
+ */
+export declare type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;
+export declare type InitialsAvatarTextGradients = typeof COLORS_NUMBER_TO_TEXT_MAP[InitialsAvatarNumberGradients] | "blue";
+export interface AvatarProps extends Omit<ImageBaseProps, "badge"> {
     /**
-     * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24
+     * > Не показывается при `size < 24`
+     *
+     * Бейдж в правом нижнем углу компонента.
+     *
+     * Можно передать алиасы, конструктор иконки или конфигурацию.
      */
-    size?: number;
-    mode?: "default" | "image" | "app";
-    shadow?: boolean;
-    badge?: "online" | "online-mobile" | JSX.Element;
-    overlayIcon?: JSX.Element;
-    overlayMode?: "dark" | "light";
+    badge?: "online" | "online-mobile" | ImageBaseBadgeProps["Icon"] | ImageBaseBadgeProps;
     /**
-     * Поведение показа overlay: "hover" - при наведении, "always" - всегда
+     * Задаёт градиент для фона.
+     *
+     * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:
+     *
+     * 1: 'red'
+     * 2: 'orange'
+     * 3: 'yellow'
+     * 4: 'green'
+     * 5: 'l-blue'
+     * 6: 'violet'
+     *
+     * > Если необходимо задать свой градиент, то используйте значение `"custom"` и определите цвет градиента либо через
+     * > свой класс в `className`, либо через `style={{ backgroundImage: "..." }}`.
      */
-    overlayAction?: "hover" | "always";
+    gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | "custom";
 }
-export declare const AVATAR_DEFAULT_SIZE = 48;
-export declare const AVATAR_DEFAULT_SHADOW = true;
 /**
  * @see https://vkcom.github.io/VKUI/#/Avatar
  */
-export declare const Avatar: ({ alt, crossOrigin, decoding, height, loading, referrerPolicy, sizes, src, srcSet, useMap, width, getRef, size, shadow, mode, className, children, getRootRef, style, "aria-label": ariaLabel, badge, overlayIcon, overlayMode, overlayAction: passedOverlayAction, onClick, ...restProps }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ size, className, badge: badgeProp, gradientColor, children, FallbackIcon, ...restProps }: AvatarProps) => JSX.Element;
+export {};

package/dist/components/Avatar/Avatar.js

@@ -1,141 +1,101 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["alt", "crossOrigin", "decoding", "height", "loading", "referrerPolicy", "sizes", "src", "srcSet", "useMap", "width", "getRef", "size", "shadow", "mode", "className", "children", "getRootRef", "style", "aria-label", "badge", "overlayIcon", "overlayMode", "overlayAction", "onClick"];
+var _excluded = ["size", "className", "badge", "gradientColor", "children", "FallbackIcon"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from "react";
-import { Icon12Circle, Icon12OnlineMobile } from "@vkontakte/icons";
-import { classNames } from "../../lib/classNames";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { Tappable } from "../Tappable/Tappable";
+import { Icon28Users } from "@vkontakte/icons";
+import { classNamesString } from "../../lib/classNames";
+import { ImageBase } from "../ImageBase/ImageBase";
+import { getInitialsFontSize } from "./helpers";
+import { Icon12Circle, Icon12OnlineMobile } from "./icons";
+var styles = {
+  "Avatar": "vkuiAvatar",
+  "Avatar--has-gradient": "vkuiAvatar--has-gradient",
+  "Avatar--gradient-red": "vkuiAvatar--gradient-red",
+  "Avatar--gradient-pink": "vkuiAvatar--gradient-pink",
+  "Avatar--gradient-orange": "vkuiAvatar--gradient-orange",
+  "Avatar--gradient-yellow": "vkuiAvatar--gradient-yellow",
+  "Avatar--gradient-green": "vkuiAvatar--gradient-green",
+  "Avatar--gradient-l-blue": "vkuiAvatar--gradient-l-blue",
+  "Avatar--gradient-blue": "vkuiAvatar--gradient-blue",
+  "Avatar--gradient-violet": "vkuiAvatar--gradient-violet",
+  "Avatar__content": "vkuiAvatar__content",
+  "Avatar__badge": "vkuiAvatar__badge",
+  "Avatar__badge--shifted": "vkuiAvatar__badge--shifted",
+  "Avatar__badge--online": "vkuiAvatar__badge--online",
+  "Avatar__badge--online-mobile": "vkuiAvatar__badge--online-mobile"
+};
+var BADGE_ONLINE = {
+  className: classNamesString(styles["Avatar__badge"], styles["Avatar__badge--online"]),
+  background: "stroke",
+  Icon: Icon12Circle
+};
+var BADGE_ONLINE_MOBILE = {
+  className: classNamesString(styles["Avatar__badge"], styles["Avatar__badge--online-mobile"]),
+  background: "stroke",
+  Icon: Icon12OnlineMobile
+};
+var COLORS_NUMBER_TO_TEXT_MAP = {
+  1: "red",
+  2: "orange",
+  3: "yellow",
+  4: "green",
+  5: "l-blue",
+  6: "violet"
+};
 export var AVATAR_DEFAULT_SIZE = 48;
-export var AVATAR_DEFAULT_SHADOW = true;
 /**
- * @see https://vkcom.github.io/VKUI/#/Avatar
+ * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
+ * @example user.id % 6 + 1
  */
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Avatar
+ */
 export var Avatar = function Avatar(_ref) {
-  var alt = _ref.alt,
-      crossOrigin = _ref.crossOrigin,
-      decoding = _ref.decoding,
-      height = _ref.height,
-      loading = _ref.loading,
-      referrerPolicy = _ref.referrerPolicy,
-      sizes = _ref.sizes,
-      src = _ref.src,
-      srcSet = _ref.srcSet,
-      useMap = _ref.useMap,
-      width = _ref.width,
-      getRef = _ref.getRef,
-      _ref$size = _ref.size,
+  var _ref$size = _ref.size,
       size = _ref$size === void 0 ? AVATAR_DEFAULT_SIZE : _ref$size,
-      _ref$shadow = _ref.shadow,
-      shadow = _ref$shadow === void 0 ? AVATAR_DEFAULT_SHADOW : _ref$shadow,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "default" : _ref$mode,
       className = _ref.className,
+      badgeProp = _ref.badge,
+      gradientColor = _ref.gradientColor,
       children = _ref.children,
-      getRootRef = _ref.getRootRef,
-      style = _ref.style,
-      ariaLabel = _ref["aria-label"],
-      badge = _ref.badge,
-      overlayIcon = _ref.overlayIcon,
-      _ref$overlayMode = _ref.overlayMode,
-      overlayMode = _ref$overlayMode === void 0 ? "light" : _ref$overlayMode,
-      passedOverlayAction = _ref.overlayAction,
-      onClick = _ref.onClick,
+      _ref$FallbackIcon = _ref.FallbackIcon,
+      FallbackIcon = _ref$FallbackIcon === void 0 ? Icon28Users : _ref$FallbackIcon,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var _useAdaptivity = useAdaptivity(),
-      hasMouse = _useAdaptivity.hasMouse;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      failedImage = _React$useState2[0],
-      setFailedImage = _React$useState2[1];
-
-  var overlayAction = passedOverlayAction !== null && passedOverlayAction !== void 0 ? passedOverlayAction : hasMouse ? "hover" : "always";
-
-  var onImageError = function onImageError() {
-    setFailedImage(true);
-  };
+  var gradientName = typeof gradientColor === "number" ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;
+  var badge = undefined;
 
-  var onImageLoad = function onImageLoad() {
-    setFailedImage(false);
-  };
-
-  var borderRadius = "50%";
+  switch (badgeProp) {
+    case undefined:
+      break;
 
-  switch (mode) {
-    case "image":
-      size < 64 && (borderRadius = 4);
-      size >= 64 && size < 96 && (borderRadius = 6);
-      size >= 96 && (borderRadius = 8);
+    case "online":
+      badge = BADGE_ONLINE;
       break;
 
-    case "app":
-      size <= 40 && (borderRadius = 8);
-      size > 40 && size < 56 && (borderRadius = 10);
-      size >= 56 && size < 64 && (borderRadius = 12);
-      size >= 64 && size < 84 && (borderRadius = 16);
-      size >= 84 && (borderRadius = 18);
+    case "online-mobile":
+      badge = BADGE_ONLINE_MOBILE;
       break;
 
     default:
-      break;
+      badge = _objectSpread(_objectSpread({}, typeof badgeProp === "function" ? {
+        Icon: badgeProp
+      } : badgeProp), {}, {
+        className: classNamesString(styles["Avatar__badge"], size < 96 && styles["Avatar__badge--shifted"])
+      });
   }
 
-  var hasSrc = src || srcSet;
-  return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames("Avatar", "Avatar--type-".concat(mode), "Avatar--sz-".concat(size), shadow && "Avatar--shadow", failedImage && "Avatar--failed"),
-    className: className,
-    ref: getRootRef,
-    role: hasSrc ? "img" : "presentation",
-    "aria-label": alt || ariaLabel,
-    onClick: !overlayIcon ? onClick : undefined,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      width: size,
-      height: size,
-      borderRadius: borderRadius
-    })
-  }), hasSrc && createScopedElement("img", {
-    crossOrigin: crossOrigin,
-    decoding: decoding,
-    height: height,
-    loading: loading,
-    referrerPolicy: referrerPolicy,
-    sizes: sizes,
-    src: src,
-    srcSet: srcSet,
-    useMap: useMap,
-    width: width,
-    ref: getRef,
-    onError: onImageError,
-    onLoad: onImageLoad,
-    vkuiClass: "Avatar__img",
-    alt: ""
+  return createScopedElement(ImageBase, _extends({}, restProps, {
+    size: size,
+    badge: badge,
+    className: classNamesString(styles["Avatar"], gradientName && styles["Avatar--has-gradient"], gradientName !== "custom" && styles["Avatar--gradient-".concat(gradientName)], className),
+    FallbackIcon: FallbackIcon
   }), children && createScopedElement("div", {
-    vkuiClass: "Avatar__children"
-  }, children), overlayIcon && createScopedElement(Tappable, {
-    Component: "button",
-    vkuiClass: classNames("Avatar__overlay", overlayAction === "always" && "Avatar__overlay--visible", overlayMode === "light" && "Avatar__overlay--light", overlayMode === "dark" && "Avatar__overlay--dark"),
-    hoverMode: "Avatar__overlay--visible",
-    focusVisibleMode: "Avatar__overlay--focus-visible",
-    hasActive: false,
-    onClick: onClick
-  }, overlayIcon), badge && createScopedElement("div", {
-    vkuiClass: classNames("Avatar__badge", size >= 96 && "Avatar__badge--large", badge !== "online" && badge !== "online-mobile" && "Avatar__badge--shadow")
-  }, badge === "online" ? createScopedElement("div", {
-    vkuiClass: "Avatar__badge-online"
-  }, createScopedElement(Icon12Circle, {
-    width: size >= 72 ? 15 : 12,
-    height: size >= 72 ? 15 : 12
-  })) : badge === "online-mobile" ? createScopedElement("div", {
-    vkuiClass: "Avatar__badge-online-mobile"
-  }, createScopedElement(Icon12OnlineMobile, {
-    width: size >= 72 ? 9 : 8,
-    height: size >= 72 ? 15 : 12
-  })) : badge));
+    className: styles["Avatar__content"],
+    style: {
+      fontSize: getInitialsFontSize(size)
+    }
+  }, children));
 };
 //# sourceMappingURL=Avatar.js.map