@vkontakte/vkui 4.22.2 → 4.23.0

package/dist/components/ClickPopper/ClickPopper.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["getRef", "content", "children", "onShownChange", "shown"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from 'react';
+import { useDOM } from "../../lib/dom";
+import { Popper } from "../Popper/Popper";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useEventListener } from "../../hooks/useEventListener";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { usePatchChildrenRef } from "../../hooks/usePatchChildrenRef";
+export var ClickPopper = function ClickPopper(_ref) {
+  var getRef = _ref.getRef,
+      content = _ref.content,
+      children = _ref.children,
+      onShownChange = _ref.onShownChange,
+      _shown = _ref.shown,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _React$useState = React.useState(_shown || false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      computedShown = _React$useState2[0],
+      setComputedShown = _React$useState2[1];
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      dropdownNode = _React$useState4[0],
+      setPopperNode = _React$useState4[1];
+
+  var shown = typeof _shown === 'boolean' ? _shown : computedShown;
+
+  var _useDOM = useDOM(),
+      document = _useDOM.document;
+
+  var patchedPopperRef = useExternRef(setPopperNode, getRef);
+
+  var _usePatchChildrenRef = usePatchChildrenRef(children),
+      _usePatchChildrenRef2 = _slicedToArray(_usePatchChildrenRef, 2),
+      childRef = _usePatchChildrenRef2[0],
+      child = _usePatchChildrenRef2[1];
+
+  var setShown = function setShown(value) {
+    if (typeof _shown !== 'boolean') {
+      setComputedShown(value);
+    }
+
+    typeof onShownChange === 'function' && onShownChange(value);
+  };
+
+  useGlobalEventListener(document, 'click', function (e) {
+    if (dropdownNode && !childRef.current.contains(e.target) && !dropdownNode.contains(e.target)) {
+      setShown(false);
+    }
+  });
+  var targetClickEvent = useEventListener('click', function () {
+    setShown(!shown);
+  });
+  React.useEffect(function () {
+    targetClickEvent.add(childRef.current);
+  }, []);
+  return createScopedElement(React.Fragment, null, child, shown && createScopedElement(Popper, _extends({}, restProps, {
+    targetRef: childRef,
+    getRef: patchedPopperRef
+  }), content));
+};
+//# sourceMappingURL=ClickPopper.js.map

package/dist/components/ClickPopper/ClickPopper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ClickPopper/ClickPopper.tsx"],"names":["React","useDOM","Popper","useExternRef","useEventListener","useGlobalEventListener","usePatchChildrenRef","ClickPopper","getRef","content","children","onShownChange","_shown","shown","restProps","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","document","patchedPopperRef","childRef","child","setShown","value","e","current","contains","target","targetClickEvent","useEffect","add"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT;AACA,SAASC,MAAT;AACA,SAASC,YAAT;AACA,SAASC,gBAAT;AACA,SAASC,sBAAT;AACA,SAASC,mBAAT;AAqBA,OAAO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,OAO/B;AAAA,MANtBC,MAMsB,QANtBA,MAMsB;AAAA,MALtBC,OAKsB,QALtBA,OAKsB;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,aAGsB,QAHtBA,aAGsB;AAAA,MAFfC,MAEe,QAFtBC,KAEsB;AAAA,MADnBC,SACmB;;AACtB,wBAA0Cd,KAAK,CAACe,QAAN,CAAeH,MAAM,IAAI,KAAzB,CAA1C;AAAA;AAAA,MAAOI,aAAP;AAAA,MAAsBC,gBAAtB;;AACA,yBAAsCjB,KAAK,CAACe,QAAN,CAAe,IAAf,CAAtC;AAAA;AAAA,MAAOG,YAAP;AAAA,MAAqBC,aAArB;;AAEA,MAAMN,KAAK,GAAG,OAAOD,MAAP,KAAkB,SAAlB,GAA8BA,MAA9B,GAAuCI,aAArD;;AAEA,gBAAqBf,MAAM,EAA3B;AAAA,MAAQmB,QAAR,WAAQA,QAAR;;AAEA,MAAMC,gBAAgB,GAAGlB,YAAY,CAACgB,aAAD,EAAgBX,MAAhB,CAArC;;AAEA,6BAA0BF,mBAAmB,CAACI,QAAD,CAA7C;AAAA;AAAA,MAAOY,QAAP;AAAA,MAAiBC,KAAjB;;AAEA,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAoB;AACnC,QAAI,OAAOb,MAAP,KAAkB,SAAtB,EAAiC;AAC/BK,MAAAA,gBAAgB,CAACQ,KAAD,CAAhB;AACD;;AACD,WAAOd,aAAP,KAAyB,UAAzB,IAAuCA,aAAa,CAACc,KAAD,CAApD;AACD,GALD;;AAOApB,EAAAA,sBAAsB,CAACe,QAAD,EAAW,OAAX,EAAoB,UAACM,CAAD,EAAmB;AAC3D,QAAIR,YAAY,IAAI,CAACI,QAAQ,CAACK,OAAT,CAAiBC,QAAjB,CAA0BF,CAAC,CAACG,MAA5B,CAAjB,IAAgE,CAACX,YAAY,CAACU,QAAb,CAAsBF,CAAC,CAACG,MAAxB,CAArE,EAAsG;AACpGL,MAAAA,QAAQ,CAAC,KAAD,CAAR;AACD;AACF,GAJqB,CAAtB;AAMA,MAAMM,gBAAgB,GAAG1B,gBAAgB,CAAC,OAAD,EAAU,YAAM;AACvDoB,IAAAA,QAAQ,CAAC,CAACX,KAAF,CAAR;AACD,GAFwC,CAAzC;AAIAb,EAAAA,KAAK,CAAC+B,SAAN,CAAgB,YAAM;AACpBD,IAAAA,gBAAgB,CAACE,GAAjB,CAAqBV,QAAQ,CAACK,OAA9B;AACD,GAFD,EAEG,EAFH;AAIA,SACE,oBAAC,KAAD,CAAO,QAAP,QACGJ,KADH,EAEGV,KAAK,IACJ,oBAAC,MAAD,eACMC,SADN;AAEE,IAAA,SAAS,EAAEQ,QAFb;AAGE,IAAA,MAAM,EAAED;AAHV,MAKGZ,OALH,CAHJ,CADF;AAcD,CAtDM","sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\n\nexport interface ClickPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое `ClickPopper`\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элемнету компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const ClickPopper: React.FC<ClickPopperProps> = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  ...restProps\n}: ClickPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n  const [dropdownNode, setPopperNode] = React.useState(null);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const { document } = useDOM();\n\n  const patchedPopperRef = useExternRef(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  useGlobalEventListener(document, 'click', (e: MouseEvent) => {\n    if (dropdownNode && !childRef.current.contains(e.target as Node) && !dropdownNode.contains(e.target)) {\n      setShown(false);\n    }\n  });\n\n  const targetClickEvent = useEventListener('click', () => {\n    setShown(!shown);\n  });\n\n  React.useEffect(() => {\n    targetClickEvent.add(childRef.current);\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown &&\n        <Popper\n          {...restProps}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n        >\n          {content}\n        </Popper>\n      }\n    </React.Fragment>\n  );\n};\n"],"file":"ClickPopper.js"}

package/dist/components/ConfigProvider/ConfigProviderContext.d.ts

@@ -6,7 +6,15 @@ export declare enum Appearance {
     LIGHT = "light"
 }
 export declare enum Scheme {
+    /**
+     * @deprecated будет удалено в 5.0.0
+     * версия оставлена для совместимости со старыми версиями клиентов
+     */
     DEPRECATED_CLIENT_LIGHT = "client_light",
+    /**
+     * @deprecated будет удалено в 5.0.0
+     * версия оставлена для совместимости со старыми версиями клиентов
+     */
     DEPRECATED_CLIENT_DARK = "client_dark",
     /**
      * @deprecated будет удалено в 5.0.0

package/dist/components/ConfigProvider/ConfigProviderContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"names":["React","vkBridge","platform","Appearance","Scheme","WebviewType","defaultConfigProviderProps","webviewType","VKAPPS","isWebView","scheme","BRIGHT_LIGHT","transitionMotionEnabled","ConfigProviderContext","createContext"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAA+D,sBAA/D;AACA,SAAuBC,QAAvB;AAEA,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U;AAAAA,EAAAA,U;GAAAA,U,KAAAA,U;;AAKZ,WAAYC,MAAZ;;WAAYA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;GAAAA,M,KAAAA,M;;AAiBZ,WAAYC,WAAZ;;WAAYA,W;AAAAA,EAAAA,W;AAAAA,EAAAA,W;GAAAA,W,KAAAA,W;;AAiCZ,OAAO,IAAMC,0BAA0B,GAAG;AACxCC,EAAAA,WAAW,EAAEF,WAAW,CAACG,MADe;AAExCC,EAAAA,SAAS,EAAER,QAAQ,CAACQ,SAAT,EAF6B;AAGxCC,EAAAA,MAAM,EAAEN,MAAM,CAACO,YAHyB;AAIxCC,EAAAA,uBAAuB,EAAE,IAJe;AAKxCV,EAAAA,QAAQ,EAAEA,QAAQ,EALsB,CAMxC;AACA;;AAPwC,CAAnC;AAUP,OAAO,IAAMW,qBAAqB,gBAAGb,KAAK,CAACc,aAAN,CAAoDR,0BAApD,CAA9B","sourcesContent":["import * as React from 'react';\nimport vkBridge, { AppearanceSchemeType, AppearanceType } from '@vkontakte/vk-bridge';\nimport { PlatformType, platform } from '../../lib/platform';\n\nexport enum Appearance {\n  DARK = 'dark',\n  LIGHT = 'light',\n}\n\nexport enum Scheme {\n  DEPRECATED_CLIENT_LIGHT = 'client_light',\n  DEPRECATED_CLIENT_DARK = 'client_dark',\n  /**\n   * @deprecated будет удалено в 5.0.0\n   * версия оставлена для совместимости с vkcom, когда там была только одна схема\n   */\n  VKCOM = 'vkcom',\n\n  BRIGHT_LIGHT = 'bright_light',\n  SPACE_GRAY = 'space_gray',\n  VKCOM_LIGHT = 'vkcom_light',\n  VKCOM_DARK = 'vkcom_dark'\n}\n\nexport type AppearanceScheme = AppearanceSchemeType | Scheme.VKCOM | Scheme.VKCOM_DARK | Scheme.VKCOM_LIGHT | 'inherit';\n\nexport enum WebviewType {\n  VKAPPS = 'vkapps',\n  INTERNAL = 'internal',\n}\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере\n   */\n  isWebView?: boolean;\n  /**\n   * Тип вебвью.<br>\n   * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)\n   */\n  webviewType?: WebviewType.INTERNAL | WebviewType.VKAPPS;\n  /**\n   * Тип приложения\n   */\n  app?: string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  appearance?: AppearanceType;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled?: boolean;\n  /**\n   * Платформа\n   */\n  platform?: PlatformType;\n}\n\nexport const defaultConfigProviderProps = {\n  webviewType: WebviewType.VKAPPS,\n  isWebView: vkBridge.isWebView(),\n  scheme: Scheme.BRIGHT_LIGHT,\n  transitionMotionEnabled: true,\n  platform: platform(),\n  // appearance is auto-detected by default\n  // appearance: Appearance.LIGHT,\n};\n\nexport const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>(defaultConfigProviderProps);\n"],"file":"ConfigProviderContext.js"}
+{"version":3,"sources":["../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"names":["React","vkBridge","platform","Appearance","Scheme","WebviewType","defaultConfigProviderProps","webviewType","VKAPPS","isWebView","scheme","BRIGHT_LIGHT","transitionMotionEnabled","ConfigProviderContext","createContext"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAA+D,sBAA/D;AACA,SAAuBC,QAAvB;AAEA,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U;AAAAA,EAAAA,U;GAAAA,U,KAAAA,U;;AAKZ,WAAYC,MAAZ;;WAAYA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;GAAAA,M,KAAAA,M;;AAyBZ,WAAYC,WAAZ;;WAAYA,W;AAAAA,EAAAA,W;AAAAA,EAAAA,W;GAAAA,W,KAAAA,W;;AAiCZ,OAAO,IAAMC,0BAA0B,GAAG;AACxCC,EAAAA,WAAW,EAAEF,WAAW,CAACG,MADe;AAExCC,EAAAA,SAAS,EAAER,QAAQ,CAACQ,SAAT,EAF6B;AAGxCC,EAAAA,MAAM,EAAEN,MAAM,CAACO,YAHyB;AAIxCC,EAAAA,uBAAuB,EAAE,IAJe;AAKxCV,EAAAA,QAAQ,EAAEA,QAAQ,EALsB,CAMxC;AACA;;AAPwC,CAAnC;AAUP,OAAO,IAAMW,qBAAqB,gBAAGb,KAAK,CAACc,aAAN,CAAoDR,0BAApD,CAA9B","sourcesContent":["import * as React from 'react';\nimport vkBridge, { AppearanceSchemeType, AppearanceType } from '@vkontakte/vk-bridge';\nimport { PlatformType, platform } from '../../lib/platform';\n\nexport enum Appearance {\n  DARK = 'dark',\n  LIGHT = 'light',\n}\n\nexport enum Scheme {\n  /**\n   * @deprecated будет удалено в 5.0.0\n   * версия оставлена для совместимости со старыми версиями клиентов\n   */\n  DEPRECATED_CLIENT_LIGHT = 'client_light',\n  /**\n   * @deprecated будет удалено в 5.0.0\n   * версия оставлена для совместимости со старыми версиями клиентов\n   */\n  DEPRECATED_CLIENT_DARK = 'client_dark',\n  /**\n   * @deprecated будет удалено в 5.0.0\n   * версия оставлена для совместимости с vkcom, когда там была только одна схема\n   */\n  VKCOM = 'vkcom',\n\n  BRIGHT_LIGHT = 'bright_light',\n  SPACE_GRAY = 'space_gray',\n  VKCOM_LIGHT = 'vkcom_light',\n  VKCOM_DARK = 'vkcom_dark'\n}\n\nexport type AppearanceScheme = AppearanceSchemeType | Scheme.VKCOM | Scheme.VKCOM_DARK | Scheme.VKCOM_LIGHT | 'inherit';\n\nexport enum WebviewType {\n  VKAPPS = 'vkapps',\n  INTERNAL = 'internal',\n}\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере\n   */\n  isWebView?: boolean;\n  /**\n   * Тип вебвью.<br>\n   * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)\n   */\n  webviewType?: WebviewType.INTERNAL | WebviewType.VKAPPS;\n  /**\n   * Тип приложения\n   */\n  app?: string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  appearance?: AppearanceType;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled?: boolean;\n  /**\n   * Платформа\n   */\n  platform?: PlatformType;\n}\n\nexport const defaultConfigProviderProps = {\n  webviewType: WebviewType.VKAPPS,\n  isWebView: vkBridge.isWebView(),\n  scheme: Scheme.BRIGHT_LIGHT,\n  transitionMotionEnabled: true,\n  platform: platform(),\n  // appearance is auto-detected by default\n  // appearance: Appearance.LIGHT,\n};\n\nexport const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>(defaultConfigProviderProps);\n"],"file":"ConfigProviderContext.js"}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { HoverPopperProps } from '../HoverPopper/HoverPopper';
+import { Placement } from '../Popper/Popper';
+import './Dropdown.css';
+export interface DropdownProps {
+    /**
+     * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+     */
+    placement?: Placement;
+    /**
+     * Отступ по вспомогательной оси
+     */
+    offsetSkidding?: number;
+    /**
+     * Отступ по главной оси
+     */
+    offsetDistance?: number;
+    onPlacementChange?: (data: {
+        placement?: Placement;
+    }) => void;
+    /**
+     * Содержимое тултипа
+     */
+    content?: React.ReactNode;
+    /**
+     * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+     */
+    shown?: boolean;
+    /**
+     * Вызывается при каждом изменении видимости тултипа
+     */
+    onShownChange?: (shown: boolean) => void;
+    /**
+     * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
+     */
+    children?: React.ReactElement;
+    action?: 'click' | 'hover';
+    /**
+     * Актуально только для action="hover"
+     * Количество миллисекунд, после которых произойдет показ дропдауна
+     */
+    showDelay?: HoverPopperProps['showDelay'];
+    /**
+     * Актуально только для action="hover"
+     * Количество миллисекунд, после которых произойдет скрытие дропдауна
+     */
+    hideDelay?: HoverPopperProps['hideDelay'];
+}
+export declare const Dropdown: React.FC<DropdownProps>;

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["action", "hideDelay", "showDelay"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import { HoverPopper } from "../HoverPopper/HoverPopper";
+import { ClickPopper } from "../ClickPopper/ClickPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+export var Dropdown = function Dropdown(_ref) {
+  var _ref$action = _ref.action,
+      action = _ref$action === void 0 ? 'click' : _ref$action,
+      hideDelay = _ref.hideDelay,
+      showDelay = _ref.showDelay,
+      popperProps = _objectWithoutProperties(_ref, _excluded);
+
+  var platform = usePlatform();
+  var Component;
+  var actionSpecificProps = {};
+
+  switch (action) {
+    case 'click':
+      Component = ClickPopper;
+      break;
+
+    case 'hover':
+      actionSpecificProps = {
+        hideDelay: hideDelay,
+        showDelay: showDelay
+      };
+      Component = HoverPopper;
+      break;
+  }
+
+  return createScopedElement(Component, _extends({
+    vkuiClass: getClassName('Dropdown', platform)
+  }, actionSpecificProps, popperProps));
+};
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":["HoverPopper","ClickPopper","getClassName","usePlatform","Dropdown","action","hideDelay","showDelay","popperProps","platform","Component","actionSpecificProps"],"mappings":";;;;AACA,SAASA,WAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AAkDA,OAAO,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAA+E;AAAA,yBAA5EC,MAA4E;AAAA,MAA5EA,MAA4E,4BAAnE,OAAmE;AAAA,MAA1DC,SAA0D,QAA1DA,SAA0D;AAAA,MAA/CC,SAA+C,QAA/CA,SAA+C;AAAA,MAAjCC,WAAiC;;AAC9H,MAAMC,QAAQ,GAAGN,WAAW,EAA5B;AAEA,MAAIO,SAAJ;AACA,MAAIC,mBAA2C,GAAG,EAAlD;;AAEA,UAAQN,MAAR;AACE,SAAK,OAAL;AACEK,MAAAA,SAAS,GAAGT,WAAZ;AACA;;AACF,SAAK,OAAL;AACEU,MAAAA,mBAAmB,GAAG;AAAEL,QAAAA,SAAS,EAATA,SAAF;AAAaC,QAAAA,SAAS,EAATA;AAAb,OAAtB;AACAG,MAAAA,SAAS,GAAGV,WAAZ;AACA;AAPJ;;AAUA,SACE,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAEE,YAAY,CAAC,UAAD,EAAaO,QAAb;AAAlC,KAA8DE,mBAA9D,EAAuFH,WAAvF,EADF;AAGD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { ClickPopper } from '../ClickPopper/ClickPopper';\nimport { getClassName } from '../../helpers/getClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Placement } from '../Popper/Popper';\nimport './Dropdown.css';\n\n// Приходится избегать экстендов от HoverPopperProps, ClickPopperProps и PopperProps, потому что react-docgen не умеет в Omit.\n// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.\nexport interface DropdownProps {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n\n  action?: 'click' | 'hover';\n  /**\n   * Актуально только для action=\"hover\"\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: HoverPopperProps['showDelay'];\n  /**\n   * Актуально только для action=\"hover\"\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: HoverPopperProps['hideDelay'];\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({ action = 'click', hideDelay, showDelay, ...popperProps }: DropdownProps) => {\n  const platform = usePlatform();\n\n  let Component;\n  let actionSpecificProps: Partial<DropdownProps> = {};\n\n  switch (action) {\n    case 'click':\n      Component = ClickPopper;\n      break;\n    case 'hover':\n      actionSpecificProps = { hideDelay, showDelay };\n      Component = HoverPopper;\n      break;\n  }\n\n  return (\n    <Component vkuiClass={getClassName('Dropdown', platform)} {...actionSpecificProps} {...popperProps} />\n  );\n};\n"],"file":"Dropdown.js"}

package/dist/components/Footer/Footer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
+import { HasComponent } from '../../types';
 import './Footer.css';
-declare type FooterProps = React.AllHTMLAttributes<HTMLElement>;
-declare const Footer: React.FC<FooterProps>;
-export default Footer;
+export declare type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
+export declare const Footer: React.FC<FooterProps>;

package/dist/components/Footer/Footer.js

@@ -3,8 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import Caption from "../Typography/Caption/Caption";
-
-var Footer = function Footer(_ref) {
+export var Footer = function Footer(_ref) {
   var children = _ref.children,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -16,6 +15,4 @@ var Footer = function Footer(_ref) {
     vkuiClass: "Footer"
   }), children);
 };
-
-export default Footer;
 //# sourceMappingURL=Footer.js.map

package/dist/components/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Footer/Footer.tsx"],"names":["Caption","Footer","children","restProps"],"mappings":";;;;AACA,OAAOA,OAAP;;AAKA,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAA6C;AAAA,MAA1CC,QAA0C,QAA1CA,QAA0C;AAAA,MAA7BC,SAA6B;;AACjF,SACE,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAAgCA,SAAhC;AAA2C,IAAA,KAAK,EAAC,GAAjD;AAAqD,IAAA,MAAM,EAAC,SAA5D;AAAsE,IAAA,SAAS,EAAC;AAAhF,MACGD,QADH,CADF;AAKD,CAND;;AAQA,eAAeD,MAAf","sourcesContent":["import * as React from 'react';\nimport Caption from '../Typography/Caption/Caption';\nimport './Footer.css';\n\ntype FooterProps = React.AllHTMLAttributes<HTMLElement>;\n\nconst Footer: React.FC<FooterProps> = ({ children, ...restProps }: FooterProps) => {\n  return (\n    <Caption Component=\"footer\" {...restProps} level=\"1\" weight=\"regular\" vkuiClass=\"Footer\">\n      {children}\n    </Caption>\n  );\n};\n\nexport default Footer;\n"],"file":"Footer.js"}
+{"version":3,"sources":["../../../src/components/Footer/Footer.tsx"],"names":["Caption","Footer","children","restProps"],"mappings":";;;;AAEA,OAAOA,OAAP;AAKA,OAAO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAG1B;AAAA,MAFjBC,QAEiB,QAFjBA,QAEiB;AAAA,MADdC,SACc;;AACjB,SACE,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAAgCA,SAAhC;AAA2C,IAAA,KAAK,EAAC,GAAjD;AAAqD,IAAA,MAAM,EAAC,SAA5D;AAAsE,IAAA,SAAS,EAAC;AAAhF,MACGD,QADH,CADF;AAKD,CATM","sourcesContent":["import * as React from 'react';\nimport { HasComponent } from '../../types';\nimport Caption from '../Typography/Caption/Caption';\nimport './Footer.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\nexport const Footer: React.FC<FooterProps> = ({\n  children,\n  ...restProps\n}: FooterProps) => {\n  return (\n    <Caption Component=\"footer\" {...restProps} level=\"1\" weight=\"regular\" vkuiClass=\"Footer\">\n      {children}\n    </Caption>\n  );\n};\n"],"file":"Footer.js"}

package/dist/components/HoverPopper/HoverPopper.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { PopperCommonProps } from '../Popper/Popper';
+export interface HoverPopperProps extends PopperCommonProps {
+    /**
+     * Содержимое тултипа
+     */
+    content?: React.ReactNode;
+    /**
+     * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+     */
+    shown?: boolean;
+    /**
+     * Вызывается при каждом изменении видимости тултипа
+     */
+    onShownChange?: (shown: boolean) => void;
+    /**
+     * Количество миллисекунд, после которых произойдет показ дропдауна
+     */
+    showDelay?: number;
+    /**
+     * Количество миллисекунд, после которых произойдет скрытие дропдауна
+     */
+    hideDelay?: number;
+    /**
+     * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
+     */
+    children?: React.ReactElement;
+}
+export declare const HoverPopper: React.FC<HoverPopperProps>;

package/dist/components/HoverPopper/HoverPopper.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["getRef", "content", "children", "onShownChange", "shown", "showDelay", "hideDelay"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from 'react';
+import { Popper } from "../Popper/Popper";
+import { useEventListener } from "../../hooks/useEventListener";
+import { useTimeout } from "../../hooks/useTimeout";
+import { usePatchChildrenRef } from "../../hooks/usePatchChildrenRef";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+export var HoverPopper = function HoverPopper(_ref) {
+  var getRef = _ref.getRef,
+      content = _ref.content,
+      children = _ref.children,
+      onShownChange = _ref.onShownChange,
+      _shown = _ref.shown,
+      showDelay = _ref.showDelay,
+      _ref$hideDelay = _ref.hideDelay,
+      hideDelay = _ref$hideDelay === void 0 ? 150 : _ref$hideDelay,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _React$useState = React.useState(_shown || false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      computedShown = _React$useState2[0],
+      setComputedShown = _React$useState2[1];
+
+  var shown = typeof _shown === 'boolean' ? _shown : computedShown;
+
+  var setShown = function setShown(value) {
+    if (typeof _shown !== 'boolean') {
+      setComputedShown(value);
+    }
+
+    typeof onShownChange === 'function' && onShownChange(value);
+  };
+
+  var showTimeout = useTimeout(function () {
+    setShown(true);
+  }, showDelay);
+  var hideTimeout = useTimeout(function () {
+    setShown(false);
+  }, hideDelay);
+
+  var _usePatchChildrenRef = usePatchChildrenRef(children),
+      _usePatchChildrenRef2 = _slicedToArray(_usePatchChildrenRef, 2),
+      childRef = _usePatchChildrenRef2[0],
+      child = _usePatchChildrenRef2[1];
+
+  var onTargetEnter = function onTargetEnter() {
+    hideTimeout.clear();
+    showTimeout.set();
+  };
+
+  var onTargetLeave = function onTargetLeave() {
+    showTimeout.clear();
+    hideTimeout.set();
+  };
+
+  var targetEnterListener = useEventListener('pointerenter', onTargetEnter);
+  var targetLeaveListener = useEventListener('pointerleave', onTargetLeave);
+  useIsomorphicLayoutEffect(function () {
+    targetEnterListener.add(childRef.current);
+    targetLeaveListener.add(childRef.current);
+  }, []);
+  return createScopedElement(React.Fragment, null, child, shown && createScopedElement(Popper, _extends({}, restProps, {
+    onMouseOver: hideTimeout.clear,
+    onMouseOut: onTargetLeave,
+    getRef: getRef,
+    targetRef: childRef
+  }), content));
+};
+//# sourceMappingURL=HoverPopper.js.map

package/dist/components/HoverPopper/HoverPopper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/HoverPopper/HoverPopper.tsx"],"names":["React","Popper","useEventListener","useTimeout","usePatchChildrenRef","useIsomorphicLayoutEffect","HoverPopper","getRef","content","children","onShownChange","_shown","shown","showDelay","hideDelay","restProps","useState","computedShown","setComputedShown","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","add","current"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT;AACA,SAASC,gBAAT;AACA,SAASC,UAAT;AACA,SAASC,mBAAT;AACA,SAASC,yBAAT;AA6BA,OAAO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,OAS/B;AAAA,MARtBC,MAQsB,QARtBA,MAQsB;AAAA,MAPtBC,OAOsB,QAPtBA,OAOsB;AAAA,MANtBC,QAMsB,QANtBA,QAMsB;AAAA,MALtBC,aAKsB,QALtBA,aAKsB;AAAA,MAJfC,MAIe,QAJtBC,KAIsB;AAAA,MAHtBC,SAGsB,QAHtBA,SAGsB;AAAA,4BAFtBC,SAEsB;AAAA,MAFtBA,SAEsB,+BAFV,GAEU;AAAA,MADnBC,SACmB;;AACtB,wBAA0Cf,KAAK,CAACgB,QAAN,CAAeL,MAAM,IAAI,KAAzB,CAA1C;AAAA;AAAA,MAAOM,aAAP;AAAA,MAAsBC,gBAAtB;;AAEA,MAAMN,KAAK,GAAG,OAAOD,MAAP,KAAkB,SAAlB,GAA8BA,MAA9B,GAAuCM,aAArD;;AAEA,MAAME,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAoB;AACnC,QAAI,OAAOT,MAAP,KAAkB,SAAtB,EAAiC;AAC/BO,MAAAA,gBAAgB,CAACE,KAAD,CAAhB;AACD;;AACD,WAAOV,aAAP,KAAyB,UAAzB,IAAuCA,aAAa,CAACU,KAAD,CAApD;AACD,GALD;;AAOA,MAAMC,WAAW,GAAGlB,UAAU,CAAC,YAAM;AACnCgB,IAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,GAF6B,EAE3BN,SAF2B,CAA9B;AAIA,MAAMS,WAAW,GAAGnB,UAAU,CAAC,YAAM;AACnCgB,IAAAA,QAAQ,CAAC,KAAD,CAAR;AACD,GAF6B,EAE3BL,SAF2B,CAA9B;;AAIA,6BAA0BV,mBAAmB,CAACK,QAAD,CAA7C;AAAA;AAAA,MAAOc,QAAP;AAAA,MAAiBC,KAAjB;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1BH,IAAAA,WAAW,CAACI,KAAZ;AACAL,IAAAA,WAAW,CAACM,GAAZ;AACD,GAHD;;AAKA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1BP,IAAAA,WAAW,CAACK,KAAZ;AACAJ,IAAAA,WAAW,CAACK,GAAZ;AACD,GAHD;;AAKA,MAAME,mBAAmB,GAAG3B,gBAAgB,CAAC,cAAD,EAAiBuB,aAAjB,CAA5C;AACA,MAAMK,mBAAmB,GAAG5B,gBAAgB,CAAC,cAAD,EAAiB0B,aAAjB,CAA5C;AAEAvB,EAAAA,yBAAyB,CAAC,YAAM;AAC9BwB,IAAAA,mBAAmB,CAACE,GAApB,CAAwBR,QAAQ,CAACS,OAAjC;AACAF,IAAAA,mBAAmB,CAACC,GAApB,CAAwBR,QAAQ,CAACS,OAAjC;AACD,GAHwB,EAGtB,EAHsB,CAAzB;AAKA,SACE,oBAAC,KAAD,CAAO,QAAP,QACGR,KADH,EAEGZ,KAAK,IACJ,oBAAC,MAAD,eACMG,SADN;AAEE,IAAA,WAAW,EAAEO,WAAW,CAACI,KAF3B;AAGE,IAAA,UAAU,EAAEE,aAHd;AAIE,IAAA,MAAM,EAAErB,MAJV;AAKE,IAAA,SAAS,EAAEgB;AALb,MAOGf,OAPH,CAHJ,CADF;AAgBD,CAjEM","sourcesContent":["import * as React from 'react';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\n\nexport interface HoverPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper: React.FC<HoverPopperProps> = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    targetEnterListener.add(childRef.current);\n    targetLeaveListener.add(childRef.current);\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown &&\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      }\n    </React.Fragment>\n  );\n};\n"],"file":"HoverPopper.js"}

package/dist/components/Popper/Popper.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { HasRef } from '../../types';
+import './Popper.css';
+export declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' | 'bottom' | 'left' | 'right';
+export interface PopperCommonProps extends React.HTMLAttributes<HTMLElement>, HasRef<HTMLElement> {
+    /**
+     * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+     */
+    placement?: Placement;
+    /**
+     * Отступ по вспомогательной оси
+     */
+    offsetSkidding?: number;
+    /**
+     * Отступ по главной оси
+     */
+    offsetDistance?: number;
+    arrow?: boolean;
+    arrowClassName?: string;
+    onPlacementChange?: (data: {
+        placement?: Placement;
+    }) => void;
+}
+export interface PopperProps extends PopperCommonProps {
+    targetRef?: React.RefObject<HTMLElement>;
+}
+export declare const Popper: React.FC<PopperProps>;

package/dist/components/Popper/Popper.js

@@ -0,0 +1,127 @@
+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 = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "offsetDistance", "offsetSkidding", "style"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from 'react';
+import { usePopper } from 'react-popper';
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+var ARROW_PADDING = 8;
+var ARROW_WIDTH = 20;
+var ARROW_HEIGHT = 8;
+export var Popper = function Popper(_ref) {
+  var targetRef = _ref.targetRef,
+      children = _ref.children,
+      getRef = _ref.getRef,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+      onPlacementChange = _ref.onPlacementChange,
+      arrow = _ref.arrow,
+      arrowClassName = _ref.arrowClassName,
+      _ref$offsetDistance = _ref.offsetDistance,
+      offsetDistance = _ref$offsetDistance === void 0 ? 8 : _ref$offsetDistance,
+      _ref$offsetSkidding = _ref.offsetSkidding,
+      offsetSkidding = _ref$offsetSkidding === void 0 ? 0 : _ref$offsetSkidding,
+      compStyles = _ref.style,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      popperNode = _React$useState2[0],
+      setPopperNode = _React$useState2[1];
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      smallTargetOffsetSkidding = _React$useState4[0],
+      setSmallTargetOffsetSkidding = _React$useState4[1];
+
+  var platform = usePlatform();
+  var setExternalRef = useExternRef(getRef, setPopperNode);
+  var modifiers = [{
+    name: 'preventOverflow'
+  }, {
+    name: 'offset',
+    options: {
+      offset: [arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding, arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance]
+    }
+  }, {
+    name: 'flip'
+  }];
+
+  if (arrow) {
+    modifiers.push({
+      name: 'arrow',
+      options: {
+        padding: ARROW_PADDING
+      }
+    });
+  }
+
+  var _usePopper = usePopper(targetRef.current, popperNode, {
+    placement: placement,
+    modifiers: modifiers
+  }),
+      styles = _usePopper.styles,
+      state = _usePopper.state,
+      attributes = _usePopper.attributes;
+
+  var resolvedPlacement = state === null || state === void 0 ? void 0 : state.placement;
+  var isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован скраю
+  // Если поппер рисуется скраю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
+  // таргета из-за маленьких размеров последнего
+
+  useIsomorphicLayoutEffect(function () {
+    if (arrow && isEdgePlacement) {
+      var placementDirection = resolvedPlacement.startsWith('bottom') || resolvedPlacement.startsWith('top') ? 'vertical' : 'horizontal';
+      var arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;
+      var targetSize = placementDirection === 'vertical' ? targetRef.current.offsetWidth : targetRef.current.offsetHeight;
+
+      if (targetSize < arrowSize + 2 * ARROW_PADDING) {
+        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
+      }
+    } else {
+      setSmallTargetOffsetSkidding(0);
+    }
+  }, [arrow, isEdgePlacement]);
+  React.useEffect(function () {
+    if (resolvedPlacement) {
+      onPlacementChange && onPlacementChange({
+        placement: resolvedPlacement
+      });
+    }
+  }, [resolvedPlacement]);
+  var dropdown = createScopedElement("div", _extends({}, restProps, attributes.popper, {
+    vkuiClass: getClassName('Popper', platform),
+    ref: setExternalRef,
+    style: _objectSpread(_objectSpread({}, compStyles), styles.popper)
+  }), arrow && createScopedElement("div", _extends({}, attributes.arrow, {
+    vkuiClass: "Popper__arrow",
+    "data-popper-arrow": true,
+    style: styles.arrow
+  }), createScopedElement("svg", {
+    vkuiClass: "Popper__arrow-in",
+    className: arrowClassName,
+    width: "20",
+    height: "8",
+    viewBox: "0 0 20 8",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, createScopedElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z",
+    fill: "currentColor"
+  }))), createScopedElement("div", {
+    vkuiClass: "Popper__content"
+  }, children));
+  return createScopedElement(AppRootPortal, {
+    forcePortal: true,
+    vkuiClass: "PopperPortal"
+  }, dropdown);
+};
+//# sourceMappingURL=Popper.js.map

package/dist/components/Popper/Popper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Popper/Popper.tsx"],"names":["React","usePopper","AppRootPortal","usePlatform","getClassName","useExternRef","useIsomorphicLayoutEffect","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","offsetDistance","offsetSkidding","compStyles","style","restProps","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","setExternalRef","modifiers","name","options","offset","push","padding","current","styles","state","attributes","resolvedPlacement","isEdgePlacement","includes","placementDirection","startsWith","arrowSize","targetSize","offsetWidth","offsetHeight","useEffect","dropdown","popper"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { usePopper } from 'react-popper';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { HasRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport './Popper.css';\n\nexport type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' |\n'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' | 'bottom' | 'left' | 'right';\n\ntype Modifier = {\n  name: string;\n  options?: {\n    [index: string]: any;\n  };\n};\n\nexport interface PopperCommonProps extends React.HTMLAttributes<HTMLElement>, HasRef<HTMLElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  arrow?: boolean;\n  arrowClassName?: string;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef?: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\nexport const Popper: React.FC<PopperProps> = ({\n  targetRef,\n  children,\n  getRef,\n  placement = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  style: compStyles,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState(null);\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] = React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef(getRef, setPopperNode);\n\n  const modifiers: Modifier[] = [{\n    name: 'preventOverflow',\n  }, {\n    name: 'offset',\n    options: {\n      offset: [\n        arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n        arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n      ],\n    },\n  }, {\n    name: 'flip',\n  }];\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        padding: ARROW_PADDING,\n      },\n    });\n  }\n\n  const { styles, state, attributes } = usePopper(targetRef.current, popperNode, {\n    placement,\n    modifiers,\n  });\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован скраю\n\n  // Если поппер рисуется скраю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection = resolvedPlacement.startsWith('bottom') || resolvedPlacement.startsWith('top') ? 'vertical' : 'horizontal';\n\n      const arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize = placementDirection === 'vertical' ? targetRef.current.offsetWidth : targetRef.current.offsetHeight;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      vkuiClass={getClassName('Popper', platform)}\n      ref={setExternalRef}\n      style={{ ...compStyles, ...styles.popper }}\n    >\n      {arrow && (\n        <div\n          {...attributes.arrow}\n          vkuiClass=\"Popper__arrow\"\n          data-popper-arrow={true}\n          style={styles.arrow}\n        >\n          <svg vkuiClass=\"Popper__arrow-in\" className={arrowClassName} width=\"20\" height=\"8\" viewBox=\"0 0 20 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\" fill=\"currentColor\" />\n          </svg>\n        </div>\n      )}\n      <div vkuiClass=\"Popper__content\">\n        {children}\n      </div>\n    </div>\n  );\n\n  return <AppRootPortal forcePortal vkuiClass=\"PopperPortal\">{dropdown}</AppRootPortal>;\n};\n"],"file":"Popper.js"}

package/dist/components/RichTooltip/RichTooltip.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Placement } from '../Popper/Popper';
+import './RichTooltip.css';
+export interface RichTooltipProps {
+    /**
+     * Содержимое тултипа
+     */
+    content?: React.ReactNode;
+    /**
+     * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+     */
+    shown?: boolean;
+    /**
+     * Вызывается при каждом изменении видимости тултипа
+     */
+    onShownChange?: (shown: boolean) => void;
+    /**
+     * Количество миллисекунд, после которых произойдет показ дропдауна
+     */
+    showDelay?: number;
+    /**
+     * Количество миллисекунд, после которых произойдет скрытие дропдауна
+     */
+    hideDelay?: number;
+    /**
+     * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
+     */
+    children?: React.ReactElement;
+    /**
+     * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+     */
+    placement?: Placement;
+    /**
+     * Отступ по вспомогательной оси
+     */
+    offsetSkidding?: number;
+    /**
+     * Отступ по главной оси
+     */
+    offsetDistance?: number;
+    onPlacementChange?: (data: {
+        placement?: Placement;
+    }) => void;
+    arrow?: boolean;
+}
+export declare const RichTooltip: React.FC<RichTooltipProps>;

package/dist/components/RichTooltip/RichTooltip.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "arrow"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import { HoverPopper } from "../HoverPopper/HoverPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useAppearance } from "../../hooks/useAppearance";
+import { classNames } from "../../lib/classNames";
+import { prefixClass } from "../../lib/prefixClass";
+export var RichTooltip = function RichTooltip(_ref) {
+  var children = _ref.children,
+      _ref$arrow = _ref.arrow,
+      arrow = _ref$arrow === void 0 ? true : _ref$arrow,
+      popperProps = _objectWithoutProperties(_ref, _excluded);
+
+  var platform = usePlatform();
+  var appearance = useAppearance();
+  return createScopedElement(HoverPopper, _extends({
+    vkuiClass: classNames(getClassName('RichTooltip', platform), _defineProperty({}, "RichTooltip--".concat(appearance), !!appearance)),
+    arrow: arrow,
+    arrowClassName: prefixClass('RichTooltip__arrow')
+  }, popperProps), children);
+};
+//# sourceMappingURL=RichTooltip.js.map