@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/Dialog/Dialog.stories.js

@@ -1,31 +1,39 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Button from '../Button';
 import Dialog from './Dialog';
 import image from '../../docs/public/placeholders/placeholder_400x400.svg';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const Basic = args => {
   const [isOpen, setIsOpen] = useState(false);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setIsOpen(true),
-    "data-id": "trigger"
-  }, 'Open'), /*#__PURE__*/React.createElement(Dialog, _extends({}, args, {
-    "data-type": "test",
-    isOpen: isOpen,
-    onClose: () => setIsOpen(false)
-  })));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: () => setIsOpen(true),
+      "data-id": "trigger",
+      children: 'Open'
+    }), /*#__PURE__*/_jsx(Dialog, {
+      ...args,
+      "data-type": "test",
+      isOpen: isOpen,
+      onClose: () => setIsOpen(false)
+    })]
+  });
 };
 Basic.args = {
   children: 'Dialog content.',
   title: 'Title',
   subtitle: 'Subtitle'
 };
-export const WithSideBanner = args => /*#__PURE__*/React.createElement(Basic, args);
+export const WithSideBanner = args => /*#__PURE__*/_jsx(Basic, {
+  ...args
+});
 WithSideBanner.args = {
   ...Basic.args,
   size: 'xs',
-  sideBanner: /*#__PURE__*/React.createElement("img", {
+  sideBanner: /*#__PURE__*/_jsx("img", {
     src: image
   }),
   sideBannerContainer: {

package/esm/components/Drawer/Drawer.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
 import React, { Fragment, isValidElement, cloneElement, useRef, useState } from 'react';
@@ -8,12 +7,13 @@ import { CLS_PREFIX } from '../../constants';
 import Overlay from '../Overlay';
 import { useClosingConfirmation } from '../ClosingConfirmation';
 import Header from './Header';
-import ScrollDirection from './ScrollDirection';
 import Form from '../Form';
 import Heading from '../Heading';
 import { isLikeText } from '../Translate';
 import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
 import DrawerProgress from './DrawerProgress';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const propTypes = {
   /**
    * Toggles visibility.
@@ -163,7 +163,7 @@ const defaultProps = {
 
 /**
  * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
- * The component is similar to `Dialog` but it is intended to work with more complex forms or lists.
+ * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
  * @since 0.0.65
  */
 const Drawer = _ref => {
@@ -201,15 +201,17 @@ const Drawer = _ref => {
           footer
         } = _ref2;
         return render({
-          content: /*#__PURE__*/React.createElement("div", {
-            className: `${baseClassName}__form`
-          }, content),
+          content: /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__form`,
+            children: content
+          }),
           footer
         });
       };
-      return /*#__PURE__*/React.createElement(DrawerProgress, _extends({
-        render: drawerProgressRender
-      }, progress));
+      return /*#__PURE__*/_jsx(DrawerProgress, {
+        render: drawerProgressRender,
+        ...progress
+      });
     }
     if (form) {
       if ( /*#__PURE__*/isValidElement(form)) {
@@ -239,7 +241,8 @@ const Drawer = _ref => {
             ...form.cancelButton
           };
         }
-        return /*#__PURE__*/React.createElement(Form, _extends({}, form, {
+        return /*#__PURE__*/_jsx(Form, {
+          ...form,
           render: _ref4 => {
             let {
               renderForm,
@@ -249,56 +252,64 @@ const Drawer = _ref => {
               content: renderForm(),
               footer: renderActionButtons()
             });
-          }
-        }), children);
+          },
+          children: children
+        });
       }
     }
     return render({
-      content: /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__inner-body`
-      }, children)
+      content: /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__inner-body`,
+        children: children
+      })
     });
   };
-  return /*#__PURE__*/React.createElement(Overlay, _extends({
+  return /*#__PURE__*/_jsxs(Overlay, {
     className: classNames(baseClassName, {
       [`${baseClassName}--form`]: form
     }, className),
     onClose: onCloseWithConfirmation,
-    canCloseOnBackdropClick: true
-  }, props), takeApart(_ref5 => {
-    let {
-      content,
-      footer
-    } = _ref5;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
-      backButton: backButton,
-      hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
-      onClose: onCloseWithConfirmation,
-      tabs: tabs
-    }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
-      level: "2",
-      className: `${baseClassName}__title`
-    }, title) : /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__title`
-    }, title), subtitle && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__subtitle`
-    }, subtitle)), /*#__PURE__*/React.createElement(ScrollDirection, null, _ref6 => {
+    canCloseOnBackdropClick: true,
+    ...props,
+    children: [takeApart(_ref5 => {
       let {
-        handleScroll
-      } = _ref6;
-      return /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__body`,
-        onScroll: handleScroll,
-        ref: scrollableRef
-      }, /*#__PURE__*/React.createElement(ScrollableElementFormContext.Provider, {
-        value: scrollableRef.current
-      }, content));
-    }), footer && /*#__PURE__*/React.createElement("footer", {
-      className: `${baseClassName}__footer`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__footer-inner`
-    }, footer)));
-  }), closingConfirmationDialog);
+        content,
+        footer
+      } = _ref5;
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsxs(Header, {
+          backButton: backButton,
+          hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
+          onClose: onCloseWithConfirmation,
+          tabs: tabs,
+          children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
+            level: "2",
+            className: `${baseClassName}__title`,
+            children: title
+          }) : /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__title`,
+            children: title
+          }), subtitle && /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__subtitle`,
+            children: subtitle
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__body`,
+          ref: scrollableRef,
+          children: /*#__PURE__*/_jsx(ScrollableElementFormContext.Provider, {
+            value: scrollableRef.current,
+            children: content
+          })
+        }), footer && /*#__PURE__*/_jsx("footer", {
+          className: `${baseClassName}__footer`,
+          children: /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__footer-inner`,
+            children: footer
+          })
+        })]
+      });
+    }), closingConfirmationDialog]
+  });
 };
 Drawer.propTypes = propTypes;
 Drawer.defaultProps = defaultProps;

package/esm/components/Drawer/Drawer.stories.js

@@ -1,43 +1,55 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Button from '../Button';
 import Drawer from './Drawer';
 import image from '../../docs/public/placeholders/placeholder_400x400.svg';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const Basic = args => {
   const [isOpen, setIsOpen] = useState(false);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setIsOpen(true),
-    "data-id": "trigger"
-  }, 'Open'), /*#__PURE__*/React.createElement(Drawer, _extends({}, args, {
-    "data-type": "test",
-    isOpen: isOpen,
-    onClose: () => setIsOpen(false)
-  })));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: () => setIsOpen(true),
+      "data-id": "trigger",
+      children: 'Open'
+    }), /*#__PURE__*/_jsx(Drawer, {
+      ...args,
+      "data-type": "test",
+      isOpen: isOpen,
+      onClose: () => setIsOpen(false)
+    })]
+  });
 };
 Basic.args = {
   children: 'Drawer content.',
   title: 'Title',
   subtitle: 'Subtitle'
 };
-export const WithForm = args => /*#__PURE__*/React.createElement(Basic, args);
+export const WithForm = args => /*#__PURE__*/_jsx(Basic, {
+  ...args
+});
 WithForm.args = {
   ...Basic.args,
   form: {}
 };
-export const WithSideBanner = args => /*#__PURE__*/React.createElement(Basic, args);
+export const WithSideBanner = args => /*#__PURE__*/_jsx(Basic, {
+  ...args
+});
 WithSideBanner.args = {
   ...Basic.args,
   size: 'xs',
-  sideBanner: /*#__PURE__*/React.createElement("img", {
+  sideBanner: /*#__PURE__*/_jsx("img", {
     src: image
   }),
   sideBannerContainer: {
     background: 'skyblue'
   }
 };
-export const WithClosingConfirmation = args => /*#__PURE__*/React.createElement(Basic, args);
+export const WithClosingConfirmation = args => /*#__PURE__*/_jsx(Basic, {
+  ...args
+});
 WithClosingConfirmation.args = {
   ...Basic.args,
   closingConfirmation: true

package/esm/components/Drawer/DrawerProgress.js

@@ -1,25 +1,21 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
 
-import React, { Component, Fragment, isValidElement, cloneElement } from 'react';
+import { Component, Fragment } from 'react';
 import Button from '../Button';
+import { ButtonContext, getButtonContextValue } from '../Button/ButtonContext';
 import Translate from '../Translate';
 import Progress from '../Progress';
 import ProgressStep, { STATUS_DONE, STATUS_ERROR, STATUS_NOT_STARTED } from '../ProgressStep';
 import { CLS_PREFIX } from '../../constants';
 import { safeInvoke } from '../utils';
-const renderAdditionalButtons = buttons => {
-  const buttonProcessing = button => {
-    if ( /*#__PURE__*/isValidElement(button) && button.type === Button) {
-      return /*#__PURE__*/cloneElement(button, {
-        size: 'lg'
-      });
-    }
-    return button;
-  };
-  return Array.isArray(buttons) ? buttons.map(buttonProcessing) : buttonProcessing(buttons);
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const additionalButtonsConfig = getButtonContextValue({
+  defaultProps: {
+    size: 'lg'
+  }
+});
 class DrawerProgress extends Component {
   constructor() {
     super(...arguments);
@@ -110,27 +106,41 @@ class DrawerProgress extends Component {
     const isFailed = status === STATUS_ERROR;
     const canCancel = cancelable && !(isFinished || isFailed);
     const hasFooter = !!(buttons || canCancel);
-    const content = /*#__PURE__*/React.createElement(Fragment, null, title && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__title`
-    }, title), /*#__PURE__*/React.createElement(Progress, {
-      onStatusChange: this.handleStatusChange,
-      className: `${baseClassName}__progress`
-    }, steps.map((step, index) => /*#__PURE__*/React.createElement(ProgressStep, _extends({
-      key: index.toString()
-    }, step)))));
-    const footer = hasFooter ? /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__footer`
-    }, renderAdditionalButtons(buttons), canCancel && /*#__PURE__*/React.createElement(Button, {
-      onClick: this.handleCancel,
-      size: "lg"
-    }, /*#__PURE__*/React.createElement(Translate, {
-      content: "DrawerProgress.cancelButton",
-      fallback: "Cancel"
-    }))) : null;
+    const content = /*#__PURE__*/_jsxs(Fragment, {
+      children: [title && /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__title`,
+        children: title
+      }), /*#__PURE__*/_jsx(Progress, {
+        onStatusChange: this.handleStatusChange,
+        className: `${baseClassName}__progress`,
+        children: steps.map((step, index) =>
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        _jsx(ProgressStep, {
+          ...step
+        }, index.toString()))
+      })]
+    });
+    const footer = hasFooter ? /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__footer`,
+      children: [/*#__PURE__*/_jsx(ButtonContext.Provider, {
+        value: additionalButtonsConfig,
+        children: buttons
+      }), canCancel && /*#__PURE__*/_jsx(Button, {
+        onClick: this.handleCancel,
+        size: "lg",
+        children: /*#__PURE__*/_jsx(Translate, {
+          content: "DrawerProgress.cancelButton",
+          fallback: "Cancel"
+        })
+      })]
+    }) : null;
     return typeof render === 'function' ? render({
       content,
       footer
-    }) : /*#__PURE__*/React.createElement(Fragment, null, content, footer);
+    }) : /*#__PURE__*/_jsxs(Fragment, {
+      children: [content, footer]
+    });
   }
 }
 _defineProperty(DrawerProgress, "defaultProps", {

package/esm/components/Drawer/Header.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
@@ -9,6 +8,8 @@ import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
 import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default class Header extends Component {
   componentDidMount() {
     this.isRtl = isRtl();
@@ -18,11 +19,11 @@ export default class Header extends Component {
       baseClassName,
       onClose
     } = this.props;
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/_jsx(Button, {
       ghost: true,
       className: classNames(`${baseClassName}__button`, `${baseClassName}__button--back`),
       size: "lg",
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/_jsx(Icon, {
         name: "chevron-left",
         flipHorizontal: this.isRtl,
         className: `${baseClassName}__icon`
@@ -35,11 +36,11 @@ export default class Header extends Component {
       baseClassName,
       onClose
     } = this.props;
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/_jsx(Button, {
       ghost: true,
       className: classNames(`${baseClassName}__button`, `${baseClassName}__button--hide`),
       size: "lg",
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/_jsx(Icon, {
         className: `${baseClassName}__icon`,
         name: "minimize"
       }),
@@ -54,11 +55,11 @@ export default class Header extends Component {
       baseClassName,
       onClose
     } = this.props;
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/_jsx(Button, {
       ghost: true,
       className: classNames(`${baseClassName}__button`, `${baseClassName}__button--close`),
       size: "lg",
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/_jsx(Icon, {
         name: 'cross-mark',
         className: `${baseClassName}__icon`
       }),
@@ -84,30 +85,38 @@ export default class Header extends Component {
           prefix = this.renderBackButton();
           break;
         case hideButton:
-          suffix = /*#__PURE__*/React.createElement("div", {
-            className: `${baseClassName}__actions`
-          }, this.renderHideButton(), this.renderCloseButton({
-            disabled: true
-          }));
+          suffix = /*#__PURE__*/_jsxs("div", {
+            className: `${baseClassName}__actions`,
+            children: [this.renderHideButton(), this.renderCloseButton({
+              disabled: true
+            })]
+          });
           break;
         default:
-          suffix = /*#__PURE__*/React.createElement("div", {
-            className: `${baseClassName}__actions`
-          }, this.renderCloseButton());
+          suffix = /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__actions`,
+            children: this.renderCloseButton()
+          });
           break;
       }
     }
-    return /*#__PURE__*/React.createElement("div", _extends({
-      className: baseClassName
-    }, props), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__inner`
-    }, prefix, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content`
-    }, children, tabs && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__tabs`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__tabs-inner`
-    }, tabs))), suffix));
+    return /*#__PURE__*/_jsx("div", {
+      className: baseClassName,
+      ...props,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__inner`,
+        children: [prefix, /*#__PURE__*/_jsxs("div", {
+          className: `${baseClassName}__content`,
+          children: [children, tabs && /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__tabs`,
+            children: /*#__PURE__*/_jsx("div", {
+              className: `${baseClassName}__tabs-inner`,
+              children: tabs
+            })
+          })]
+        }), suffix]
+      })
+    });
   }
 }
 _defineProperty(Header, "propTypes", {

package/esm/components/Dropdown/Dropdown.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import { isRtl } from '../../utils';
@@ -14,15 +13,19 @@ import Layer from '../Layer';
 import { MenuItem, MenuDivider } from '../Menu';
 import Translate from '../Translate';
 import localeFallback from './locale/en-US';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const createTarget = (node, _ref) => {
   let {
     onToggle,
     targetRef
   } = _ref;
   if (false === ( /*#__PURE__*/isValidElement(node) && node.type !== Translate)) {
-    node = /*#__PURE__*/React.createElement(Button, {
-      caret: true
-    }, node);
+    node = /*#__PURE__*/_jsx(Button, {
+      caret: true,
+      children: node
+    });
   }
   let isKeyboardEvent = false;
   return /*#__PURE__*/cloneElement(node, {
@@ -90,18 +93,17 @@ const useEnhancedMenu = (menu, _ref2) => {
     children
   } = menu.props;
   if (overlay) {
-    children = [...menu.props.children, /*#__PURE__*/React.createElement(MenuDivider, {
-      className: `${baseClassName}__overlay-menu-divider`,
-      key: "divider"
-    }), /*#__PURE__*/React.createElement(MenuItem, {
+    children = [...menu.props.children, /*#__PURE__*/_jsx(MenuDivider, {
+      className: `${baseClassName}__overlay-menu-divider`
+    }, "divider"), /*#__PURE__*/_jsx(MenuItem, {
       onClick: handleClose,
-      key: "close"
-    }, /*#__PURE__*/React.createElement(Translate, {
-      namespace: "Dropdown",
-      content: "close",
-      translators: locale,
-      fallback: localeFallback.close
-    }))];
+      children: /*#__PURE__*/_jsx(Translate, {
+        namespace: "Dropdown",
+        content: "close",
+        translators: locale,
+        fallback: localeFallback.close
+      })
+    }, "close")];
   }
   const clone = /*#__PURE__*/cloneElement(menu, {
     onItemClick: wrapFunction(menu.props.onItemClick, handleClose),
@@ -138,10 +140,8 @@ const Dropdown = _ref3 => {
   const [opened, setOpened] = useState(false);
   const [autoFocus, setAutoFocus] = useState(false);
   const closeTimerRef = useRef();
-  useEffect(() => {
-    return () => {
-      clearTimeout(closeTimerRef.current);
-    };
+  useEffect(() => () => {
+    clearTimeout(closeTimerRef.current);
   }, []);
   const handleOpen = isKeyboardEvent => {
     setAutoFocus(isKeyboardEvent);
@@ -167,30 +167,40 @@ const Dropdown = _ref3 => {
     onToggle: handleOpen,
     targetRef
   });
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsx("div", {
     className: classNames(baseClassName, {
       [`${baseClassName}--opened`]: opened
-    }, className)
-  }, props), overlay ? /*#__PURE__*/React.createElement(React.Fragment, null, target, opened && /*#__PURE__*/React.createElement(Layer, {
-    level: Z_INDEX_OVERLAY
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__overlay`
-  }, /*#__PURE__*/React.createElement(AutoClosable, {
-    onClose: handleClose,
-    nodeRef: menuRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__overlay-menu`
-  }, enhancedMenu))))) : /*#__PURE__*/React.createElement(Popper, {
-    target: target,
-    targetRef: targetRef,
-    placement: computePlacement(menuPlacement),
-    show: opened,
-    className: `${baseClassName}__popper`,
-    zIndex: Z_INDEX_DROPDOWN
-  }, /*#__PURE__*/React.createElement(AutoClosable, {
-    onClose: handleClose,
-    nodeRef: menuRef
-  }, enhancedMenu)));
+    }, className),
+    ...props,
+    children: overlay ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [target, opened && /*#__PURE__*/_jsx(Layer, {
+        level: Z_INDEX_OVERLAY,
+        children: /*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__overlay`,
+          children: /*#__PURE__*/_jsx(AutoClosable, {
+            onClose: handleClose,
+            nodeRef: menuRef,
+            children: /*#__PURE__*/_jsx("div", {
+              className: `${baseClassName}__overlay-menu`,
+              children: enhancedMenu
+            })
+          })
+        })
+      })]
+    }) : /*#__PURE__*/_jsx(Popper, {
+      target: target,
+      targetRef: targetRef,
+      placement: computePlacement(menuPlacement),
+      show: opened,
+      className: `${baseClassName}__popper`,
+      zIndex: Z_INDEX_DROPDOWN,
+      children: /*#__PURE__*/_jsx(AutoClosable, {
+        onClose: handleClose,
+        nodeRef: menuRef,
+        children: enhancedMenu
+      })
+    })
+  });
 };
 Dropdown.propTypes = {
   /**