antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

package/es/components/dropdown/item.js

@@ -1,18 +1,31 @@
 import classNames from 'classnames';
 import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { useShouldRender } from '../../utils/use-should-render';
 var classPrefix = "adm-dropdown-item";
 
 var Item = function Item(props) {
   var _classNames;
 
-  var cls = classNames(classPrefix, props.className, (_classNames = {}, _classNames[classPrefix + "-active"] = props.active, _classNames[classPrefix + "-highlight"] = props.highlight, _classNames));
-  return /*#__PURE__*/React.createElement("div", {
+  var cls = classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-active"] = props.active, _classNames[classPrefix + "-highlight"] = props.highlight, _classNames));
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: cls,
-    style: props.style,
     onClick: props.onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-title"
-  }, /*#__PURE__*/React.createElement("span", null, props.title)));
+  }, /*#__PURE__*/React.createElement("span", null, props.title))));
 };
 
-export default Item;
+export default Item;
+export var ItemChildrenWrap = function ItemChildrenWrap(props) {
+  var _classNames2;
+
+  var _props$active = props.active,
+      active = _props$active === void 0 ? false : _props$active;
+  var shouldRender = useShouldRender(active, props.forceRender, props.destroyOnClose);
+  var cls = classNames(classPrefix + "-content", (_classNames2 = {}, _classNames2[classPrefix + "-content-hidden"] = !active, _classNames2));
+  return shouldRender ? /*#__PURE__*/React.createElement("div", {
+    className: cls,
+    onClick: props.onClick
+  }, props.children) : null;
+};

package/es/components/ellipsis/ellipsis.d.ts

@@ -1,8 +1,10 @@
-import React from 'react';
+import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type EllipsisProps = {
     content: string;
-    direction?: 'start' | 'end';
+    direction?: 'start' | 'end' | 'middle';
     rows?: number;
+    expandText?: string;
+    collapseText?: string;
 } & NativeProps;
-export declare const Ellipsis: React.FC<EllipsisProps>;
+export declare const Ellipsis: FC<EllipsisProps>;

package/es/components/ellipsis/ellipsis.js

@@ -1,22 +1,34 @@
-import React, { useRef, useState, useLayoutEffect } from 'react';
-import { withDefaultProps } from '../../utils/with-default-props';
+import React, { useRef, useState } from 'react';
+import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
+import { useResizeEffect } from '../../utils/use-resize-effect';
 var classPrefix = "adm-ellipsis";
 var defaultProps = {
   direction: 'end',
-  rows: 1
+  rows: 1,
+  expandText: '',
+  collapseText: ''
 };
-export var Ellipsis = withDefaultProps(defaultProps)(function (props) {
-  var originRef = useRef(null);
+export var Ellipsis = function Ellipsis(p) {
+  var props = mergeProps(defaultProps, p);
+  var rootRef = useRef(null);
 
-  var _useState = useState(''),
+  var _useState = useState({}),
       ellipsised = _useState[0],
       setEllipsised = _useState[1];
 
-  useLayoutEffect(function () {
-    var origin = originRef.current;
-    if (!origin) return;
-    var originStyle = window.getComputedStyle(origin);
+  var _useState2 = useState(false),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var _useState3 = useState(false),
+      exceeded = _useState3[0],
+      setExceeded = _useState3[1];
+
+  useResizeEffect(function () {
+    var root = rootRef.current;
+    if (!root) return;
+    var originStyle = window.getComputedStyle(root);
     var container = document.createElement('div');
     var styleNames = Array.prototype.slice.apply(originStyle);
     styleNames.forEach(function (name) {
@@ -35,28 +47,32 @@ export var Ellipsis = withDefaultProps(defaultProps)(function (props) {
     container.style.webkitBoxOrient = 'unset';
     container.style.display = 'block';
     var lineHeight = pxToNumber(originStyle.lineHeight);
-    var maxHeight = Math.floor(lineHeight) * props.rows + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom);
+    var maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
     container.innerText = props.content;
     document.body.appendChild(container);
 
     if (container.offsetHeight <= maxHeight) {
-      setEllipsised(props.content);
+      setExceeded(false);
     } else {
       var check = function check(left, right) {
         if (right - left <= 1) {
           if (props.direction === 'end') {
-            return props.content.slice(0, left) + '...';
+            return {
+              leading: props.content.slice(0, left) + '...'
+            };
           } else {
-            return '...' + props.content.slice(right, end);
+            return {
+              tailing: '...' + props.content.slice(right, end)
+            };
           }
         }
 
         var middle = Math.round((left + right) / 2);
 
         if (props.direction === 'end') {
-          container.innerText = props.content.slice(0, middle) + '...';
+          container.innerText = props.content.slice(0, middle) + '...' + actionText;
         } else {
-          container.innerText = '...' + props.content.slice(middle, end);
+          container.innerText = actionText + '...' + props.content.slice(middle, end);
         }
 
         if (container.offsetHeight <= maxHeight) {
@@ -74,17 +90,65 @@ export var Ellipsis = withDefaultProps(defaultProps)(function (props) {
         }
       };
 
+      var checkMiddle = function checkMiddle(leftPart, rightPart) {
+        if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
+          return {
+            leading: props.content.slice(0, leftPart[0]) + '...',
+            tailing: '...' + props.content.slice(rightPart[1], end)
+          };
+        }
+
+        var leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
+        var rightPartMiddle = Math.floor((rightPart[0] + rightPart[1]) / 2);
+        container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
+
+        if (container.offsetHeight <= maxHeight) {
+          return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);
+        } else {
+          return checkMiddle([leftPart[0], leftPartMiddle], [rightPartMiddle, rightPart[1]]);
+        }
+      };
+
+      setExceeded(true);
       var end = props.content.length;
-      setEllipsised(check(0, props.content.length));
+      var actionText = expanded ? props.collapseText : props.expandText;
+      var middle = Math.floor((0 + end) / 2);
+
+      var _ellipsised = props.direction === 'middle' ? checkMiddle([0, middle], [middle, end]) : check(0, end);
+
+      setEllipsised(_ellipsised);
     }
 
     document.body.removeChild(container);
-  }, [props.content, props.rows, props.direction]);
+  }, rootRef);
+  var expandActionElement = exceeded && props.expandText ? /*#__PURE__*/React.createElement("a", {
+    onClick: function onClick() {
+      setExpanded(true);
+    }
+  }, props.expandText) : null;
+  var collapseActionElement = exceeded && props.expandText ? /*#__PURE__*/React.createElement("a", {
+    onClick: function onClick() {
+      setExpanded(false);
+    }
+  }, props.collapseText) : null;
+
+  var renderContent = function renderContent() {
+    if (!exceeded) {
+      return props.content;
+    }
+
+    if (expanded) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, props.content, collapseActionElement);
+    } else {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
+    }
+  };
+
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    ref: originRef,
+    ref: rootRef,
     className: classPrefix
-  }, ellipsised));
-});
+  }, renderContent()));
+};
 
 function pxToNumber(value) {
   if (!value) return 0;

package/es/components/error-block/error-block.css

@@ -1,32 +1,25 @@
 .adm-error-block {
   --color: var(--adm-color-text);
-  position: relative;
-  top: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  --image-height: var(--adm-error-block-image-height, 100px);
+  --image-height-full-page: var(--adm-error-block-image-height-full-page, 200px);
+  --image-width: var(--adm-error-block-image-width, auto);
+  --image-width-full-page: var(--adm-error-block-image-width-full-page, auto);
   box-sizing: border-box;
+  text-align: center;
 }
 .adm-error-block-image {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100px;
-  margin-bottom: 20px;
-  overflow: hidden;
+  height: var(--image-height);
+  width: var(--image-width);
+  max-width: 100%;
 }
 .adm-error-block-image img {
   height: 100%;
 }
 .adm-error-block-description {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   font-size: 12px;
   color: #999;
   line-height: 1.4;
+  margin-top: 12px;
 }
 .adm-error-block-description-title {
   font-size: 15px;
@@ -35,15 +28,17 @@
   margin-top: 8px;
 }
 .adm-error-block-content {
-  margin-top: 20px;
+  margin-top: 12px;
 }
 .adm-error-block-full-page {
-  top: 116px;
+  padding-top: calc(50vh - var(--image-height-full-page));
 }
 .adm-error-block-full-page .adm-error-block-image {
-  height: 200px;
+  height: var(--image-height-full-page);
+  width: var(--image-width-full-page);
 }
 .adm-error-block-full-page .adm-error-block-description {
+  margin-top: 20px;
   font-size: 13px;
 }
 .adm-error-block-full-page .adm-error-block-description-title {

package/es/components/error-block/error-block.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, ReactElement } from 'react';
+import { FC, ReactElement, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ErrorBlockProps = {
     status?: 'default' | 'disconnected' | 'empty' | 'busy';
@@ -6,5 +6,5 @@ export declare type ErrorBlockProps = {
     image?: string | ReactElement;
     description?: ReactNode;
     fullPage?: boolean;
-} & NativeProps;
-export declare const ErrorBlock: React.FC<ErrorBlockProps>;
+} & NativeProps<'--image-height' | '--image-height-full-page'>;
+export declare const ErrorBlock: FC<ErrorBlockProps>;

package/es/components/error-block/error-block.js

@@ -1,20 +1,27 @@
 import React from 'react';
 import classNames from 'classnames';
-import { errorConfigRecord } from './error';
-import { withDefaultProps } from '../../utils/with-default-props';
+import { iconRecord } from './error';
+import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
+import { useConfig } from '../config-provider';
 var classPrefix = "adm-error-block";
 var defaultProps = {
   status: 'default'
 };
-export var ErrorBlock = withDefaultProps(defaultProps)(function (props) {
+export var ErrorBlock = function ErrorBlock(p) {
   var _classNames;
 
-  var config = errorConfigRecord[props.status];
-  var des = 'description' in props ? props.description : config.description;
-  var title = 'title' in props ? props.title : config.title;
+  var props = mergeProps(defaultProps, p);
+  var icon = iconRecord[props.status];
+
+  var _useConfig = useConfig(),
+      locale = _useConfig.locale;
+
+  var contentPack = locale.ErrorBlock[props.status];
+  var des = 'description' in props ? props.description : contentPack.description;
+  var title = 'title' in props ? props.title : contentPack.title;
   var imageNode = /*#__PURE__*/React.createElement("img", {
-    src: config.icon
+    src: icon
   });
 
   if (props.image) {
@@ -33,11 +40,11 @@ export var ErrorBlock = withDefaultProps(defaultProps)(function (props) {
     className: classPrefix + "-image"
   }, imageNode), /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-description"
-  }, title && /*#__PURE__*/React.createElement("span", {
+  }, title && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-description-title"
-  }, title), des && /*#__PURE__*/React.createElement("span", {
+  }, title), des && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-description-subtitle"
   }, des)), props.children && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-content"
   }, props.children)));
-});
+};

package/es/components/error-block/error.d.ts

@@ -1,7 +1 @@
-interface ErrorConfig {
-    icon: string;
-    title: string;
-    description?: string;
-}
-export declare const errorConfigRecord: Record<'default' | 'disconnected' | 'empty' | 'busy', ErrorConfig>;
-export {};
+export declare const iconRecord: Record<'default' | 'disconnected' | 'empty' | 'busy', string>;

package/es/components/error-block/error.js

@@ -2,25 +2,9 @@ import DefaultErrorIcon from '../../assets/default.svg';
 import Busy from '../../assets/busy.svg';
 import DisconnectedIcon from '../../assets/disconnected.svg';
 import EmptyErrorIcon from '../../assets/empty.svg';
-export var errorConfigRecord = {
-  "default": {
-    icon: DefaultErrorIcon,
-    title: '页面遇到一些小问题',
-    description: '待会来试试'
-  },
-  busy: {
-    icon: Busy,
-    title: '前方拥堵',
-    description: '刷新试试'
-  },
-  disconnected: {
-    icon: DisconnectedIcon,
-    title: '网络有点忙',
-    description: '动动手指帮忙修复'
-  },
-  empty: {
-    icon: EmptyErrorIcon,
-    title: '没有找到你需要的东西',
-    description: '找找其他的吧'
-  }
+export var iconRecord = {
+  "default": DefaultErrorIcon,
+  busy: Busy,
+  disconnected: DisconnectedIcon,
+  empty: EmptyErrorIcon
 };

package/es/components/floating-bubble/floating-bubble.css

@@ -0,0 +1,46 @@
+.adm-floating-bubble {
+  --initial-position-left: var(--initial-position-left);
+  --initial-position-right: var(--initial-position-right);
+  --initial-position-top: var(--initial-position-top);
+  --initial-position-bottom: var(--initial-position-bottom);
+  --z-index: 1;
+  --edge-distance: 0;
+  --size: 48px;
+  --border-radius: 50%;
+}
+.adm-floating-bubble-boundary-outer {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  padding: var(--edge-distance);
+  pointer-events: none;
+}
+.adm-floating-bubble-boundary {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.adm-floating-bubble-button {
+  position: fixed;
+  top: var(--initial-position-top);
+  bottom: var(--initial-position-bottom);
+  left: var(--initial-position-left);
+  right: var(--initial-position-right);
+  box-sizing: border-box;
+  width: var(--size);
+  height: var(--size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+  transition: opacity ease 0.15s;
+  user-select: none;
+  touch-action: none;
+  background: var(--adm-color-primary);
+  color: var(--adm-color-white);
+  border-radius: var(--border-radius);
+  z-index: var(--z-index);
+}

package/es/components/floating-bubble/floating-bubble.d.ts

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type FloatingBubbleProps = {
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+} & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius'>;
+export declare const FloatingBubble: FC<FloatingBubbleProps>;

package/es/components/floating-bubble/floating-bubble.js

@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+import { useSpring, animated } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+var classPrefix = "adm-floating-bubble";
+var defaultProps = {};
+export var FloatingBubble = function FloatingBubble(p) {
+  var props = mergeProps(defaultProps, p);
+  var boundaryRef = useRef(null);
+  /**
+   * memoize the `to` function
+   * inside a component that renders frequently
+   * to prevent an unintended restart
+   */
+
+  var _useSpring = useSpring(function () {
+    return {
+      y: 0,
+      scale: 1,
+      opacity: 1
+    };
+  }),
+      animationStyles = _useSpring[0],
+      animation = _useSpring[1];
+
+  var bind = useDrag(function (state) {
+    if (state.down) {
+      // be movable in y axis
+      animation.start({
+        y: state.offset[1]
+      });
+    } // active status
+
+
+    animation.start({
+      scale: state.active ? 1.1 : 1,
+      opacity: state.active ? 0.8 : 1
+    });
+  }, {
+    // only trigger if a movement is detected on the specified axis.
+    axis: 'y',
+    pointer: {
+      touch: true
+    },
+    // the component won't trigger drag logic if the user just clicked on the component.
+    filterTaps: true,
+    // set constraints to the user gesture
+    bounds: boundaryRef
+  });
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-boundary-outer"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-boundary",
+    ref: boundaryRef
+  })), /*#__PURE__*/React.createElement(animated.div, Object.assign({}, bind(), {
+    style: Object.assign({}, animationStyles),
+    onClick: props.onClick,
+    className: classPrefix + "-button"
+  }), props.children)));
+};

package/es/components/floating-bubble/index.d.ts

@@ -0,0 +1,4 @@
+import './floating-bubble.less';
+import { FloatingBubble } from './floating-bubble';
+export type { FloatingBubbleProps } from './floating-bubble';
+export default FloatingBubble;

package/es/components/floating-bubble/index.js

@@ -0,0 +1,3 @@
+import "./floating-bubble.css";
+import { FloatingBubble } from './floating-bubble';
+export default FloatingBubble;

package/es/components/floating-panel/floating-panel.css

@@ -1,18 +1,19 @@
-.adm-drawer {
+.adm-floating-panel {
   --border-radius: 8px;
   --header-height: 28px;
+  --z-index: var(--adm-floating-panel-z-index, 900);
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
   background: var(--adm-color-white);
   position: fixed;
-  z-index: var(--adm-z-index-floating-panel);
+  z-index: var(--z-index);
   top: 100vh;
   left: 0;
   width: 100vw;
   display: flex;
   flex-direction: column;
 }
-.adm-drawer-mask {
+.adm-floating-panel-mask {
   display: block;
   width: 100%;
   height: 100vh;
@@ -21,7 +22,7 @@
   top: -100vh;
   background: transparent;
 }
-.adm-drawer::after {
+.adm-floating-panel::after {
   content: '';
   display: block;
   position: absolute;
@@ -30,7 +31,7 @@
   width: 100vw;
   background: var(--adm-color-white);
 }
-.adm-drawer .adm-drawer-header {
+.adm-floating-panel .adm-floating-panel-header {
   flex: none;
   height: var(--header-height);
   display: flex;
@@ -39,13 +40,13 @@
   cursor: grab;
   user-select: none;
 }
-.adm-drawer .adm-drawer-header .adm-drawer-bar {
+.adm-floating-panel .adm-floating-panel-header .adm-floating-panel-bar {
   height: 3px;
   width: 20px;
   border-radius: 10px;
   background: var(--adm-color-light);
 }
-.adm-drawer .adm-drawer-content {
+.adm-floating-panel .adm-floating-panel-content {
   flex: 1;
   overflow-y: scroll;
 }

package/es/components/floating-panel/floating-panel.d.ts

@@ -3,7 +3,7 @@ import { NativeProps } from '../../utils/native-props';
 export declare type FloatingPanelProps = {
     anchors: number[];
     children: ReactNode;
-} & NativeProps<'--border-radius'>;
+} & NativeProps<'--border-radius' | '--z-index'>;
 export declare type FloatingPanelRef = {
     setHeight: (height: number, options?: {
         immediate?: boolean;
@@ -12,4 +12,4 @@ export declare type FloatingPanelRef = {
 export declare const FloatingPanel: React.ForwardRefExoticComponent<{
     anchors: number[];
     children: ReactNode;
-} & NativeProps<"--border-radius"> & React.RefAttributes<FloatingPanelRef>>;
+} & NativeProps<"--z-index" | "--border-radius"> & React.RefAttributes<FloatingPanelRef>>;

package/es/components/floating-panel/floating-panel.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import { useDrag } from 'react-use-gesture';
+import { useDrag } from '@use-gesture/react';
 import { useSpring, animated } from '@react-spring/web';
 import { supportsPassive } from '../../utils/supports-passive';
 import { nearest } from '../../utils/nearest';
@@ -38,9 +38,8 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
       api = _useSpring[1];
 
   useDrag(function (state) {
-    var _state$movement = state.movement,
-        _ = _state$movement[0],
-        movementY = _state$movement[1];
+    var _state$offset = state.offset,
+        offsetY = _state$offset[1];
 
     if (state.first) {
       var target = state.event.target;
@@ -54,7 +53,7 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
         if (!content) return;
 
         if (reachedTop) {
-          if (content.scrollTop <= 0 && state.vxvy[1] > 0) {
+          if (content.scrollTop <= 0 && state.direction[1] > 0) {
             pullingRef.current = true;
           }
         } else {
@@ -72,12 +71,12 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     event.stopPropagation();
-    var nextY = movementY;
+    var nextY = offsetY;
 
     if (state.last) {
       pullingRef.current = false;
       setPulling(false);
-      nextY = nearest(possibles, movementY);
+      nextY = nearest(possibles, offsetY);
     }
 
     api.start({
@@ -87,11 +86,13 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     axis: 'y',
     bounds: bounds,
     rubberband: true,
-    initial: function initial() {
+    from: function from() {
       return [0, y.get()];
     },
-    useTouch: true,
-    domTarget: elementRef,
+    pointer: {
+      touch: true
+    },
+    target: elementRef,
     eventOptions: supportsPassive ? {
       passive: false
     } : false
@@ -108,23 +109,23 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [api]);
   return withNativeProps(props, /*#__PURE__*/React.createElement(animated.div, {
     ref: elementRef,
-    className: 'adm-drawer',
+    className: 'adm-floating-panel',
     style: {
       height: maxHeight,
       y: y
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'adm-drawer-mask',
+    className: 'adm-floating-panel-mask',
     style: {
       display: pulling ? 'block' : 'none'
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: 'adm-drawer-header',
+    className: 'adm-floating-panel-header',
     ref: headerRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'adm-drawer-bar'
+    className: 'adm-floating-panel-bar'
   })), /*#__PURE__*/React.createElement("div", {
-    className: 'adm-drawer-content',
+    className: 'adm-floating-panel-content',
     ref: contentRef
   }, props.children)));
 });