antd-mobile 5.4.0 → 5.6.0

package/2x/es/components/image-viewer/methods.js

@@ -1,49 +1,18 @@
-import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import React, { createRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { renderToBody } from '../../utils/render-to-body';
 import { ImageViewer, MultiImageViewer } from './image-viewer';
-import { useUnmountedRef } from 'ahooks';
+import { renderImperatively } from '../../utils/render-imperatively';
 const handlerSet = new Set();
 export function showImageViewer(props) {
   clearImageViewer();
-  const Wrapper = forwardRef((_, ref) => {
-    const [visible, setVisible] = useState(false);
-    useEffect(() => {
-      setVisible(true);
-    }, []);
-    const isUnmountedRef = useUnmountedRef();
-    useImperativeHandle(ref, () => ({
-      close: () => {
-        if (isUnmountedRef.current) return;
-        setVisible(false);
-      }
-    }));
-    return React.createElement(ImageViewer, Object.assign({}, props, {
-      visible: visible,
-      onClose: () => {
-        var _a;
-
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        setVisible(false);
-      },
-      afterClose: () => {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
-    }));
-  });
-  const ref = createRef();
-  const unmount = renderToBody(React.createElement(Wrapper, {
-    ref: ref
-  }));
-  const handler = {
-    close: () => {
+  const handler = renderImperatively(React.createElement(ImageViewer, Object.assign({}, props, {
+    afterClose: () => {
       var _a;
 
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+      handlerSet.delete(handler);
+      (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  };
+  })));
   handlerSet.add(handler);
   return handler;
 }
@@ -51,30 +20,39 @@ export function showMultiImageViewer(props) {
   clearImageViewer();
   const Wrapper = forwardRef((_, ref) => {
     const [visible, setVisible] = useState(false);
+    const closedRef = useRef(false);
     useEffect(() => {
-      setVisible(true);
+      if (!closedRef.current) {
+        setVisible(true);
+      } else {
+        handleAfterClose();
+      }
     }, []);
-    const isUnmountedRef = useUnmountedRef();
+
+    function handleClose() {
+      var _a;
+
+      closedRef.current = true;
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    }
+
     useImperativeHandle(ref, () => ({
-      close: () => {
-        if (isUnmountedRef.current) return;
-        setVisible(false);
-      }
+      close: handleClose
     }));
-    return React.createElement(MultiImageViewer, Object.assign({}, props, {
-      visible: visible,
-      onClose: () => {
-        var _a;
 
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        setVisible(false);
-      },
-      afterClose: () => {
-        var _a;
+    function handleAfterClose() {
+      var _a;
 
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
+      (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      unmount();
+      handlerSet.delete(handler);
+    }
+
+    return React.createElement(MultiImageViewer, Object.assign({}, props, {
+      visible: visible,
+      onClose: handleClose,
+      afterClose: handleAfterClose
     }));
   });
   const ref = createRef();
@@ -96,4 +74,7 @@ export function clearImageViewer() {
     handler.close();
   });
   handlerSet.clear();
-}
+}
+export const getH = () => {
+  console.log(handlerSet);
+};

package/2x/es/components/modal/index.d.ts

@@ -6,7 +6,7 @@ import { confirm } from './confirm';
 import { clear } from './clear';
 export type { ModalProps } from './modal';
 export type { Action } from './modal-action-button';
-export type { ModalShowProps, ModalShowRef } from './show';
+export type { ModalShowProps, ModalShowHandler } from './show';
 export type { ModalAlertProps } from './alert';
 export type { ModalConfirmProps } from './confirm';
 declare const _default: import("react").FC<import("./modal").ModalProps> & {

package/2x/es/components/modal/show.d.ts

@@ -1,9 +1,7 @@
 import { ModalProps } from './modal';
 export declare type ModalShowProps = Omit<ModalProps, 'visible'>;
-export declare type ModalShowRef = {
+export declare type ModalShowHandler = {
     close: () => void;
 };
 export declare const closeFnSet: Set<() => void>;
-export declare function show(props: ModalShowProps): {
-    close: () => void;
-};
+export declare function show(props: ModalShowProps): ModalShowHandler;

package/2x/es/components/modal/show.js

@@ -1,52 +1,16 @@
-import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { renderToBody } from '../../utils/render-to-body';
+import React from 'react';
 import { Modal } from './modal';
+import { renderImperatively } from '../../utils/render-imperatively';
 export const closeFnSet = new Set();
 export function show(props) {
-  const Wrapper = forwardRef((_, ref) => {
-    const [visible, setVisible] = useState(false);
-    useEffect(() => {
-      setVisible(true);
-    }, []);
-
-    function handleClose() {
-      var _a;
-
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      setVisible(false);
-    }
-
-    useImperativeHandle(ref, () => ({
-      close: handleClose
-    }));
-
-    function handleAfterClose() {
+  const handler = renderImperatively(React.createElement(Modal, Object.assign({}, props, {
+    afterClose: () => {
       var _a;
 
+      closeFnSet.delete(handler.close);
       (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      unmount();
-      closeFnSet.delete(close);
     }
-
-    return React.createElement(Modal, Object.assign({}, props, {
-      visible: visible,
-      onClose: handleClose,
-      afterClose: handleAfterClose
-    }));
-  });
-  const ref = createRef();
-  const unmount = renderToBody(React.createElement(Wrapper, {
-    ref: ref
-  }));
-
-  const close = () => {
-    var _a;
-
-    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-  };
-
-  closeFnSet.add(close);
-  return {
-    close
-  };
+  })));
+  closeFnSet.add(handler.close);
+  return handler;
 }

package/2x/es/components/popover/index.d.ts

@@ -3,16 +3,21 @@ import './popover.less';
 import './popover-menu.less';
 export type { PopoverProps, PopoverRef } from './popover';
 export type { PopoverMenuProps, Action } from './popover-menu';
+export declare type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export declare type DeprecatedPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 declare const _default: import("react").ForwardRefExoticComponent<{
+    defaultVisible?: boolean | undefined;
+    visible?: boolean | undefined;
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
     getContainer?: import("../../utils/render-to-container").GetContainer | undefined;
     destroyOnHide?: boolean | undefined;
     children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
-    placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
+    placement?: DeprecatedPlacement | Placement | undefined;
     stopPropagation?: "click"[] | undefined;
     content: import("react").ReactNode;
-} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
+} & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
     Menu: import("react").ForwardRefExoticComponent<Omit<import("./popover").PopoverProps, "content"> & {
         actions: import("./popover-menu").Action[];
         onAction?: ((item: import("./popover-menu").Action) => void) | undefined;

package/2x/es/components/popover/normalize-placement.d.ts

@@ -0,0 +1,2 @@
+import { DeprecatedPlacement, Placement } from './index';
+export declare function normalizePlacement(placement: Placement | DeprecatedPlacement): Placement;

package/2x/es/components/popover/normalize-placement.js

@@ -0,0 +1,15 @@
+const record = {
+  'topLeft': 'top-start',
+  'topRight': 'top-end',
+  'bottomLeft': 'bottom-start',
+  'bottomRight': 'bottom-end',
+  'leftTop': 'left-start',
+  'leftBottom': 'left-end',
+  'rightTop': 'right-start',
+  'rightBottom': 'right-end'
+};
+export function normalizePlacement(placement) {
+  var _a;
+
+  return (_a = record[placement]) !== null && _a !== void 0 ? _a : placement;
+}

package/2x/es/components/popover/popover.css

@@ -34,110 +34,6 @@
   display: none;
 }
 
-.adm-popover-placement-top,
-.adm-popover-placement-topLeft,
-.adm-popover-placement-topRight {
-  padding-bottom: var(--arrow-size);
-}
-
-.adm-popover-placement-top .adm-popover-arrow,
-.adm-popover-placement-topLeft .adm-popover-arrow,
-.adm-popover-placement-topRight .adm-popover-arrow {
-  bottom: 0;
-  --arrow-icon-rotate: 0deg;
-}
-
-.adm-popover-placement-top .adm-popover-arrow {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.adm-popover-placement-topLeft .adm-popover-arrow {
-  left: 24px;
-}
-
-.adm-popover-placement-topRight .adm-popover-arrow {
-  right: 24px;
-}
-
-.adm-popover-placement-right,
-.adm-popover-placement-rightTop,
-.adm-popover-placement-rightBottom {
-  padding-left: var(--arrow-size);
-}
-
-.adm-popover-placement-right .adm-popover-arrow,
-.adm-popover-placement-rightTop .adm-popover-arrow,
-.adm-popover-placement-rightBottom .adm-popover-arrow {
-  left: 0;
-  --arrow-icon-rotate: 90deg;
-}
-
-.adm-popover-placement-right .adm-popover-arrow {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.adm-popover-placement-rightTop .adm-popover-arrow {
-  top: 24px;
-}
-
-.adm-popover-placement-rightBottom .adm-popover-arrow {
-  bottom: 24px;
-}
-
-.adm-popover-placement-bottom,
-.adm-popover-placement-bottomLeft,
-.adm-popover-placement-bottomRight {
-  padding-top: var(--arrow-size);
-}
-
-.adm-popover-placement-bottom .adm-popover-arrow,
-.adm-popover-placement-bottomLeft .adm-popover-arrow,
-.adm-popover-placement-bottomRight .adm-popover-arrow {
-  top: 0;
-  --arrow-icon-rotate: 180deg;
-}
-
-.adm-popover-placement-bottom .adm-popover-arrow {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.adm-popover-placement-bottomLeft .adm-popover-arrow {
-  left: 24px;
-}
-
-.adm-popover-placement-bottomRight .adm-popover-arrow {
-  right: 24px;
-}
-
-.adm-popover-placement-left,
-.adm-popover-placement-leftTop,
-.adm-popover-placement-leftBottom {
-  padding-right: var(--arrow-size);
-}
-
-.adm-popover-placement-left .adm-popover-arrow,
-.adm-popover-placement-leftTop .adm-popover-arrow,
-.adm-popover-placement-leftBottom .adm-popover-arrow {
-  right: 0;
-  --arrow-icon-rotate: 270deg;
-}
-
-.adm-popover-placement-left .adm-popover-arrow {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.adm-popover-placement-leftTop .adm-popover-arrow {
-  top: 24px;
-}
-
-.adm-popover-placement-leftBottom .adm-popover-arrow {
-  bottom: 24px;
-}
-
 .adm-popover-inner {
   background-color: var(--background);
   background-clip: padding-box;

package/2x/es/components/popover/popover.d.ts

@@ -1,30 +1,36 @@
 import React, { ReactElement } from 'react';
-import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
 import { NativeProps } from '../../utils/native-props';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { GetContainer } from '../../utils/render-to-container';
+import { DeprecatedPlacement, Placement } from './index';
 export declare type PopoverProps = {
+    defaultVisible?: boolean;
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
     getContainer?: GetContainer;
     destroyOnHide?: boolean;
     children: ReactElement;
     mode?: 'light' | 'dark';
     trigger?: 'click';
-    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    placement?: Placement | DeprecatedPlacement;
     stopPropagation?: PropagationEvent[];
     content: React.ReactNode;
-} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'align'> & NativeProps<'--z-index'>;
+} & NativeProps<'--z-index'>;
 export declare type PopoverRef = {
     show: () => void;
     hide: () => void;
     visible: boolean;
 };
 export declare const Popover: React.ForwardRefExoticComponent<{
+    defaultVisible?: boolean | undefined;
+    visible?: boolean | undefined;
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
     getContainer?: GetContainer | undefined;
     destroyOnHide?: boolean | undefined;
     children: ReactElement;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
-    placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
+    placement?: DeprecatedPlacement | Placement | undefined;
     stopPropagation?: "click"[] | undefined;
     content: React.ReactNode;
-} & Pick<TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & NativeProps<"--z-index"> & React.RefAttributes<PopoverRef>>;
+} & NativeProps<"--z-index"> & React.RefAttributes<PopoverRef>>;

package/2x/es/components/popover/popover.js

@@ -1,10 +1,18 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
-import Tooltip from 'rc-tooltip';
+import { __awaiter } from "tslib";
+import React, { forwardRef, useImperativeHandle, useRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
 import { Arrow } from './arrow';
+import { renderToContainer } from '../../utils/render-to-container';
+import { arrow, computePosition, flip, offset, autoUpdate, hide, shift, limitShift } from './temp-floating-ui.min.js';
+import { Wrapper } from './wrapper';
+import { useShouldRender } from '../../utils/should-render';
+import { useClickAway, useIsomorphicLayoutEffect } from 'ahooks';
+import { normalizePlacement } from './normalize-placement';
+import { convertPx } from '../../utils/convert-px';
 const classPrefix = `adm-popover`;
 const defaultProps = {
   placement: 'top',
@@ -13,12 +21,11 @@ const defaultProps = {
   getContainer: () => document.body
 };
 export const Popover = forwardRef((p, ref) => {
-  var _a;
-
   const props = mergeProps(defaultProps, p);
   const {
     mode = 'light'
   } = props;
+  const placement = normalizePlacement(props.placement);
   const [visible, setVisible] = usePropsValue({
     value: props.visible,
     defaultValue: props.defaultVisible,
@@ -31,23 +38,113 @@ export const Popover = forwardRef((p, ref) => {
       visible
     };
   }, [visible]);
-  const overlay = withStopPropagation(props.stopPropagation, React.createElement("div", {
+  const targetRef = useRef(null);
+  const floatingRef = useRef(null);
+  const arrowRef = useRef(null);
+  const floating = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-${mode}`, !visible && `${classPrefix}-hidden`),
+    ref: floatingRef
+  }, React.createElement("div", {
+    className: `${classPrefix}-arrow`,
+    ref: arrowRef
+  }, React.createElement(Arrow, {
+    className: `${classPrefix}-arrow-icon`
+  })), React.createElement("div", {
+    className: `${classPrefix}-inner`
+  }, React.createElement("div", {
     className: `${classPrefix}-inner-content`
-  }, props.content));
-  return React.createElement(Tooltip, Object.assign({}, props, {
-    placement: props.placement,
-    align: props.align,
-    overlayClassName: classNames(`${classPrefix}-${mode}`, props.className),
-    overlayStyle: props.style,
-    destroyTooltipOnHide: props.destroyOnHide,
-    prefixCls: classPrefix,
-    getTooltipContainer: props.getContainer || (() => document.body),
-    visible: visible,
-    arrowContent: React.createElement(Arrow, {
-      className: `${classPrefix}-arrow-icon`
-    }),
-    onVisibleChange: setVisible,
-    trigger: (_a = props.trigger) !== null && _a !== void 0 ? _a : [],
-    overlay: overlay
-  }), props.children);
+  }, props.content)))));
+  const [targetElement, setTargetElement] = useState(null);
+
+  function update() {
+    var _a, _b, _c;
+
+    return __awaiter(this, void 0, void 0, function* () {
+      const target = (_b = (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : null;
+      const floating = floatingRef.current;
+      const arrowElement = arrowRef.current;
+      setTargetElement(target);
+      if (!target || !floating || !arrowElement) return;
+      const {
+        x,
+        y,
+        placement: realPlacement,
+        middlewareData
+      } = yield computePosition(target, floating, {
+        placement,
+        middleware: [offset(convertPx(12)), shift({
+          padding: convertPx(4),
+          crossAxis: false,
+          limiter: limitShift()
+        }), flip(), hide(), arrow({
+          element: arrowElement,
+          padding: convertPx(12)
+        })]
+      });
+      Object.assign(floating.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      const side = realPlacement.split('-')[0];
+      const arrowSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[side];
+      const {
+        x: arrowX,
+        y: arrowY
+      } = (_c = middlewareData.arrow) !== null && _c !== void 0 ? _c : {};
+      Object.assign(arrowElement.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
+        right: '',
+        bottom: '',
+        [arrowSide]: `-${convertPx(8)}px`
+      });
+      const arrowRotate = {
+        top: '0deg',
+        bottom: '180deg',
+        left: '270deg',
+        right: '90deg'
+      }[side];
+      arrowElement.style.setProperty('--arrow-icon-rotate', arrowRotate);
+    });
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    update();
+  });
+  useEffect(() => {
+    if (!targetElement) return;
+    if (!props.trigger) return;
+
+    function handleClick() {
+      console.log('handleClick');
+      setVisible(v => !v);
+    }
+
+    targetElement.addEventListener('click', handleClick);
+    return () => {
+      targetElement.removeEventListener('click', handleClick);
+    };
+  }, [targetElement, props.trigger]);
+  useEffect(() => {
+    const floatingElement = floatingRef.current;
+    if (!targetElement || !floatingElement) return;
+    return autoUpdate(targetElement, floatingElement, update);
+  }, [targetElement]);
+  useClickAway(() => {
+    if (!props.trigger) return;
+    setVisible(false);
+  }, () => {
+    var _a;
+
+    return (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element;
+  });
+  const shouldRender = useShouldRender(visible, false, props.destroyOnHide);
+  return React.createElement(React.Fragment, null, React.createElement(Wrapper, {
+    ref: targetRef
+  }, props.children), shouldRender && renderToContainer(props.getContainer, floating));
 });

package/2x/es/components/popover/temp-floating-ui.min.d.ts

@@ -0,0 +1 @@
+export * from '@floating-ui/dom'

package/2x/es/components/popover/temp-floating-ui.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@floating-ui/core")):"function"==typeof define&&define.amd?define(["exports","@floating-ui/core"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).FloatingUIDOM={},t.FloatingUICore)}(this,(function(t,e){"use strict";function n(t){return"[object Window]"===(null==t?void 0:t.toString())}function o(t){if(null==t)return window;if(!n(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function i(t){return o(t).getComputedStyle(t)}function r(t){return n(t)?"":t?(t.nodeName||"").toLowerCase():""}function l(t){return t instanceof o(t).HTMLElement}function c(t){return t instanceof o(t).Element}function f(t){return t instanceof o(t).ShadowRoot||t instanceof ShadowRoot}function u(t){const{overflow:e,overflowX:n,overflowY:o}=i(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function s(t){return["table","td","th"].includes(r(t))}function d(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=i(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const h=Math.min,a=Math.max,g=Math.round;function p(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let o=1,i=1;return e&&l(t)&&(o=t.offsetWidth>0&&g(n.width)/t.offsetWidth||1,i=t.offsetHeight>0&&g(n.height)/t.offsetHeight||1),{width:n.width/o,height:n.height/i,top:n.top/i,right:n.right/o,bottom:n.bottom/i,left:n.left/o,x:n.left/o,y:n.top/i}}function m(t){return(e=t,(e instanceof o(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function y(t){return n(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function w(t){return p(m(t)).left+y(t).scrollLeft}function b(t,e,n){const o=l(e),i=m(e),c=p(t,o&&function(t){const e=p(t);return g(e.width)!==t.offsetWidth||g(e.height)!==t.offsetHeight}(e));let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==r(e)||u(i))&&(f=y(e)),l(e)){const t=p(e,!0);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=w(i));return{x:c.left+f.scrollLeft-s.x,y:c.top+f.scrollTop-s.y,width:c.width,height:c.height}}function v(t){return"html"===r(t)?t:t.assignedSlot||t.parentNode||(f(t)?t.host:null)||m(t)}function x(t){return l(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function L(t){const e=o(t);let n=x(t);for(;n&&s(n)&&"static"===getComputedStyle(n).position;)n=x(n);return n&&("html"===r(n)||"body"===r(n)&&"static"===getComputedStyle(n).position&&!d(n))?e:n||function(t){let e=v(t);for(f(e)&&(e=e.host);l(e)&&!["html","body"].includes(r(e));){if(d(e))return e;e=e.parentNode}return null}(t)||e}function O(t){if(l(t))return{width:t.offsetWidth,height:t.offsetHeight};const e=p(t);return{width:e.width,height:e.height}}function P(t){const e=v(t);return["html","body","#document"].includes(r(e))?t.ownerDocument.body:l(e)&&u(e)?e:P(e)}function R(t,e){var n;void 0===e&&(e=[]);const i=P(t),r=i===(null==(n=t.ownerDocument)?void 0:n.body),l=o(i),c=r?[l].concat(l.visualViewport||[],u(i)?i:[]):i,f=e.concat(c);return r?f:f.concat(R(v(c)))}function T(t,n){return"viewport"===n?e.rectToClientRect(function(t){const e=o(t),n=m(t),i=e.visualViewport;let r=n.clientWidth,l=n.clientHeight,c=0,f=0;return i&&(r=i.width,l=i.height,Math.abs(e.innerWidth/i.scale-i.width)<.01&&(c=i.offsetLeft,f=i.offsetTop)),{width:r,height:l,x:c,y:f}}(t)):c(n)?function(t){const e=p(t),n=e.top+t.clientTop,o=e.left+t.clientLeft;return{top:n,left:o,x:o,y:n,right:o+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(n):e.rectToClientRect(function(t){var e;const n=m(t),o=y(t),r=null==(e=t.ownerDocument)?void 0:e.body,l=a(n.scrollWidth,n.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),c=a(n.scrollHeight,n.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0);let f=-o.scrollLeft+w(t);const u=-o.scrollTop;return"rtl"===i(r||n).direction&&(f+=a(n.clientWidth,r?r.clientWidth:0)-l),{width:l,height:c,x:f,y:u}}(m(t)))}function C(t){const e=R(t),n=["absolute","fixed"].includes(i(t).position)&&l(t)?L(t):t;return c(n)?e.filter((t=>c(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&f(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==r(t))):[]}const W={getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o}=t;const i=[..."clippingAncestors"===n?C(e):[].concat(n),o],r=i[0],l=i.reduce(((t,n)=>{const o=T(e,n);return t.top=a(o.top,t.top),t.right=h(o.right,t.right),t.bottom=h(o.bottom,t.bottom),t.left=a(o.left,t.left),t}),T(e,r));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=l(n),c=m(n);if(n===c)return e;let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==r(n)||u(c))&&(f=y(n)),l(n))){const t=p(n,!0);s.x=t.x+n.clientLeft,s.y=t.y+n.clientTop}return{...e,x:e.x-f.scrollLeft+s.x,y:e.y-f.scrollTop+s.y}},isElement:c,getDimensions:O,getOffsetParent:L,getDocumentElement:m,getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:b(e,L(n),o),floating:{...O(n),x:0,y:0}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>"rtl"===i(t).direction};Object.defineProperty(t,"arrow",{enumerable:!0,get:function(){return e.arrow}}),Object.defineProperty(t,"autoPlacement",{enumerable:!0,get:function(){return e.autoPlacement}}),Object.defineProperty(t,"detectOverflow",{enumerable:!0,get:function(){return e.detectOverflow}}),Object.defineProperty(t,"flip",{enumerable:!0,get:function(){return e.flip}}),Object.defineProperty(t,"hide",{enumerable:!0,get:function(){return e.hide}}),Object.defineProperty(t,"inline",{enumerable:!0,get:function(){return e.inline}}),Object.defineProperty(t,"limitShift",{enumerable:!0,get:function(){return e.limitShift}}),Object.defineProperty(t,"offset",{enumerable:!0,get:function(){return e.offset}}),Object.defineProperty(t,"shift",{enumerable:!0,get:function(){return e.shift}}),Object.defineProperty(t,"size",{enumerable:!0,get:function(){return e.size}}),t.autoUpdate=function(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l=!0,animationFrame:f=!1}=o;let u=!1;const s=i&&!f,d=r&&!f,h=l&&!f,a=s||d?[...c(t)?R(t):[],...R(e)]:[];a.forEach((t=>{s&&t.addEventListener("scroll",n,{passive:!0}),d&&t.addEventListener("resize",n)}));let g,m=null;h&&(m=new ResizeObserver(n),c(t)&&m.observe(t),m.observe(e));let y=f?p(t):null;return f&&function e(){if(u)return;const o=p(t);!y||o.x===y.x&&o.y===y.y&&o.width===y.width&&o.height===y.height||n();y=o,g=requestAnimationFrame(e)}(),()=>{var t;u=!0,a.forEach((t=>{s&&t.removeEventListener("scroll",n),d&&t.removeEventListener("resize",n)})),null==(t=m)||t.disconnect(),m=null,f&&cancelAnimationFrame(g)}},t.computePosition=(t,n,o)=>e.computePosition(t,n,{platform:W,...o}),t.getOverflowAncestors=R,Object.defineProperty(t,"__esModule",{value:!0})}));

package/2x/es/components/popover/wrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare class Wrapper extends React.Component<{}, {}> {
+    element: Element | null;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): React.ReactNode;
+}

package/2x/es/components/popover/wrapper.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+export class Wrapper extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.element = null;
+  }
+
+  componentDidMount() {
+    this.componentDidUpdate();
+  }
+
+  componentDidUpdate() {
+    // eslint-disable-next-line
+    const node = findDOMNode(this);
+
+    if (node instanceof Element) {
+      this.element = node;
+    } else {
+      this.element = null;
+    }
+  }
+
+  render() {
+    return React.Children.only(this.props.children);
+  }
+
+}