orcs-design-system 3.2.4 → 3.2.6

package/es/components/ActionsMenu/index.js

@@ -1,12 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["as"],
-  _excluded2 = ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children", "ariaLabel", "onTriggerFocus", "closeMenu", "closeOnClick"],
-  _excluded3 = ["children", "customTriggerComponent", "direction", "isOpen", "theme", "closeOnClick", "ariaLabel"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useState, useEffect, useImperativeHandle, useCallback, createContext, useContext, useMemo, useRef, useId } from "react";
 import styled, { css, keyframes, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
@@ -14,178 +5,105 @@ import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 import { useKeepInView } from "../../hooks/keepInView";
 import { commonKeys } from "../../hooks/keypress";
-var ActionMenuContext = /*#__PURE__*/createContext({});
-var crossTransform1 = keyframes(["0%{transform:translate(0,-6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(-45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(-45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
-var crossTransform2 = keyframes(["0%{transform:translate(0,6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
-var Wrapper = styled.div.withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ActionMenuContext = /*#__PURE__*/createContext({});
+const crossTransform1 = keyframes(["0%{transform:translate(0,-6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(-45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(-45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
+const crossTransform2 = keyframes(["0%{transform:translate(0,6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
+const Wrapper = styled.div.withConfig({
   displayName: "ActionsMenu__Wrapper",
   componentId: "sc-yvbni2-0"
 })(["", " ", " position:relative;width:auto;"], space, layout);
-var Control = styled.button.withConfig({
+const Control = styled.button.withConfig({
   displayName: "ActionsMenu__Control",
   componentId: "sc-yvbni2-1"
-})(["position:relative;background-color:", ";border:none;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:pointer;width:30px;height:30px;&:hover,&:focus{outline:0;background-color:", ";}"], function (props) {
-  return themeGet("colors.greyLighter")(props);
-}, function (props) {
-  return themeGet("radii.2")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return themeGet("colors.greyLight")(props);
-});
-var Icon = styled.div.withConfig({
+})(["position:relative;background-color:", ";border:none;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:pointer;width:30px;height:30px;&:hover,&:focus{outline:0;background-color:", ";}"], props => themeGet("colors.greyLighter")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyLight")(props));
+const Icon = styled.div.withConfig({
   displayName: "ActionsMenu__Icon",
   componentId: "sc-yvbni2-2"
-})(["border-radius:2px;height:4px;width:4px;background-color:", ";&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";transition:", ";transform-origin:50% 50%;}&:before{transform:translate(0,-6px) scaleX(1);}&:after{transform:translate(0,6px) scaleX(1);}", ";"], function (props) {
-  return themeGet("colors.greyDarker")(props);
-}, function (props) {
-  return themeGet("colors.greyDarker")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return props.isOpen ? css(["&:before{animation:400ms ", " ease-in-out forwards;}&:after{animation:400ms ", " ease-in-out forwards;}"], crossTransform1, crossTransform2) : css([""]);
-});
-var Menu = styled.div.withConfig({
+})(["border-radius:2px;height:4px;width:4px;background-color:", ";&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";transition:", ";transform-origin:50% 50%;}&:before{transform:translate(0,-6px) scaleX(1);}&:after{transform:translate(0,6px) scaleX(1);}", ";"], props => themeGet("colors.greyDarker")(props), props => themeGet("colors.greyDarker")(props), props => themeGet("transition.transitionDefault")(props), props => props.isOpen ? css(["&:before{animation:400ms ", " ease-in-out forwards;}&:after{animation:400ms ", " ease-in-out forwards;}"], crossTransform1, crossTransform2) : css([""]));
+const Menu = styled.div.withConfig({
   displayName: "ActionsMenu__Menu",
   componentId: "sc-yvbni2-3"
-})(["display:", ";position:absolute;left:", ";right:", ";top:", ";width:", ";z-index:5;background-color:", ";border-radius:", ";transform:scale(0);opacity:0;pointer-events:none;transform-origin:", ";transition:all 300ms;transition-timing-function:cubic-bezier(0,1.4,1,1);", ";"], function (props) {
-  return props.isOpen ? "block" : "none";
-}, function (props) {
-  return props.menuLeftPosition ? props.menuLeftPosition : props.direction == "left" ? "auto" : "34px";
-}, function (props) {
-  return props.menuRightPosition ? props.menuRightPosition : props.direction == "left" ? "34px" : "auto";
-}, function (props) {
-  return props.menuTopPosition ? props.menuTopPosition : "0";
-}, function (props) {
-  return props.menuWidth ? props.menuWidth : "auto";
-}, function (props) {
-  return themeGet("colors.greyDarker")(props);
-}, function (props) {
-  return themeGet("radii.2")(props);
-}, function (props) {
-  return props.direction == "left" ? "top right" : "top left";
-}, function (props) {
-  return props.isOpen ? css(["transform:scale(1);opacity:1;pointer-events:auto;"]) : css([""]);
-});
-export var ActionsMenuHeading = styled(function (props) {
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    onKeyUp: function onKeyUp(e) {
+})(["display:", ";position:absolute;left:", ";right:", ";top:", ";width:", ";z-index:5;background-color:", ";border-radius:", ";transform:scale(0);opacity:0;pointer-events:none;transform-origin:", ";transition:all 300ms;transition-timing-function:cubic-bezier(0,1.4,1,1);", ";"], props => props.isOpen ? "block" : "none", props => props.menuLeftPosition ? props.menuLeftPosition : props.direction == "left" ? "auto" : "34px", props => props.menuRightPosition ? props.menuRightPosition : props.direction == "left" ? "34px" : "auto", props => props.menuTopPosition ? props.menuTopPosition : "0", props => props.menuWidth ? props.menuWidth : "auto", props => themeGet("colors.greyDarker")(props), props => themeGet("radii.2")(props), props => props.direction == "left" ? "top right" : "top left", props => props.isOpen ? css(["transform:scale(1);opacity:1;pointer-events:auto;"]) : css([""]));
+export const ActionsMenuHeading = styled(props => {
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    onKeyUp: e => {
       if (e.key === commonKeys.ENTER && props !== null && props !== void 0 && props.canClick) {
         props === null || props === void 0 || props.onClick();
       }
     }
-  }));
+  });
 }).attrs({
   tabIndex: "0",
   role: "button"
 }).withConfig({
   displayName: "ActionsMenu__ActionsMenuHeading",
   componentId: "sc-yvbni2-4"
-})(["color:", ";padding:8px;width:100%;font-size:", ";font-weight:", ";border-bottom:solid 1px ", ";white-space:nowrap;cursor:", ";"], function (props) {
-  return themeGet("colors.white")(props);
-}, function (props) {
-  return themeGet("fontSizes.1")(props);
-}, function (props) {
-  return themeGet("fontWeights.1")(props);
-}, function (props) {
-  return themeGet("colors.greyDarkest")(props);
-}, function (props) {
-  return props.canClick ? "pointer" : "default";
-});
-export var ActionsMenuItem = styled(function (props) {
-  var _useContext = useContext(ActionMenuContext),
-    id = _useContext.id,
-    onItemClick = _useContext.onItemClick;
-  var as = props.as,
-    others = _objectWithoutProperties(props, _excluded);
-  var Component = as ? as : others.href ? "a" : "button";
-  var newProps = others;
-  var _newProps = newProps,
-    originalOnClick = _newProps.onClick;
-  var onClick = useMemo(function () {
-    return function (e) {
-      onItemClick === null || onItemClick === void 0 || onItemClick(e);
-      originalOnClick === null || originalOnClick === void 0 || originalOnClick(e);
-    };
+})(["color:", ";padding:8px;width:100%;font-size:", ";font-weight:", ";border-bottom:solid 1px ", ";white-space:nowrap;cursor:", ";"], props => themeGet("colors.white")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontWeights.1")(props), props => themeGet("colors.greyDarkest")(props), props => props.canClick ? "pointer" : "default");
+export const ActionsMenuItem = styled(props => {
+  const {
+    id,
+    onItemClick
+  } = useContext(ActionMenuContext);
+  const {
+    as,
+    ...others
+  } = props;
+  const Component = as ? as : others.href ? "a" : "button";
+  let newProps = others;
+  const {
+    onClick: originalOnClick
+  } = newProps;
+  const onClick = useMemo(() => e => {
+    onItemClick === null || onItemClick === void 0 || onItemClick(e);
+    originalOnClick === null || originalOnClick === void 0 || originalOnClick(e);
   }, [originalOnClick, onItemClick]);
   if (Component === "button") {
-    newProps = _objectSpread(_objectSpread({}, others), {}, _defineProperty({
-      type: "button"
-    }, "data-action-menu-id", id));
+    newProps = {
+      ...others,
+      type: "button",
+      ["data-action-menu-id"]: id
+    };
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({}, newProps, {
+  return /*#__PURE__*/_jsx(Component, {
+    ...newProps,
     onClick: onClick
-  }));
+  });
 }).attrs({
   role: "listitem"
 }).withConfig({
   displayName: "ActionsMenu__ActionsMenuItem",
   componentId: "sc-yvbni2-5"
-})(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover,&:focus{outline:0;background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}&:only-child{border-radius:", ";}"], function (props) {
-  return props.selected ? themeGet("colors.successDark")(props) : "transparent";
-}, function (props) {
-  return themeGet("colors.greyDarkest")(props);
-}, function (props) {
-  return themeGet("colors.white")(props);
-}, function (props) {
-  return themeGet("fontSizes.1")(props);
-}, function (props) {
-  return themeGet("fontSizes.1")(props);
-}, function (props) {
-  return themeGet("fonts.main")(props);
-}, function (props) {
-  return themeGet("fontWeights.2")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return themeGet("colors.primaryDark")(props);
-}, function (props) {
-  return themeGet("radii.2")(props);
-}, function (props) {
-  return themeGet("radii.2")(props);
-}, function (props) {
-  return themeGet("radii.2")(props);
-}, function (props) {
-  return themeGet("radii.2")(props);
-}, function (props) {
-  return themeGet("radii.2")(props);
-});
-export var ActionsMenuBody = function ActionsMenuBody(_ref) {
-  var theme = _ref.theme,
-    onToggle = _ref.onToggle,
-    toggleState = _ref.toggleState,
-    direction = _ref.direction,
-    menuTopPosition = _ref.menuTopPosition,
-    menuLeftPosition = _ref.menuLeftPosition,
-    menuRightPosition = _ref.menuRightPosition,
-    menuWidth = _ref.menuWidth,
-    customTriggerComponent = _ref.customTriggerComponent,
-    children = _ref.children,
-    _ref$ariaLabel = _ref.ariaLabel,
-    ariaLabel = _ref$ariaLabel === void 0 ? "Options Menu" : _ref$ariaLabel,
-    onTriggerFocus = _ref.onTriggerFocus,
-    closeMenu = _ref.closeMenu,
-    _ref$closeOnClick = _ref.closeOnClick,
-    closeOnClick = _ref$closeOnClick === void 0 ? false : _ref$closeOnClick,
-    props = _objectWithoutProperties(_ref, _excluded2);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isTabbed = _useState2[0],
-    setTabbed = _useState2[1];
-  var id = useId();
-  var wrapperRef = useRef();
-  var _useState3 = useState({
-      menuLeftPosition: menuLeftPosition,
-      menuRightPosition: menuRightPosition,
-      menuTopPosition: menuTopPosition
-    }),
-    _useState4 = _slicedToArray(_useState3, 1),
-    menuPosition = _useState4[0];
-  var _useState5 = useState(direction),
-    _useState6 = _slicedToArray(_useState5, 2),
-    inViewDirection = _useState6[0],
-    setInViewDirection = _useState6[1];
-  var setMenuPosition = useCallback(function (newDirection) {
+})(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover,&:focus{outline:0;background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}&:only-child{border-radius:", ";}"], props => props.selected ? themeGet("colors.successDark")(props) : "transparent", props => themeGet("colors.greyDarkest")(props), props => themeGet("colors.white")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fonts.main")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props));
+export const ActionsMenuBody = _ref => {
+  let {
+    theme,
+    onToggle,
+    toggleState,
+    direction,
+    menuTopPosition,
+    menuLeftPosition,
+    menuRightPosition,
+    menuWidth,
+    customTriggerComponent,
+    children,
+    ariaLabel = "Options Menu",
+    onTriggerFocus,
+    closeMenu,
+    closeOnClick = false,
+    ...props
+  } = _ref;
+  const [isTabbed, setTabbed] = useState(false);
+  const id = useId();
+  const wrapperRef = useRef();
+  const [menuPosition] = useState({
+    menuLeftPosition,
+    menuRightPosition,
+    menuTopPosition
+  });
+  const [inViewDirection, setInViewDirection] = useState(direction);
+  const setMenuPosition = useCallback(newDirection => {
     if (typeof menuLeftPosition !== "undefined" || typeof menuRightPosition !== "undefined") {
       if (menuPosition.menuLeftPosition) {
         menuPosition.menuRightPosition = menuPosition.menuLeftPosition;
@@ -197,49 +115,46 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
     }
     setInViewDirection(newDirection);
   }, [menuLeftPosition, menuRightPosition, menuPosition, setInViewDirection]);
-  var _useKeepInView = useKeepInView({
-      direction: direction,
-      callback: setMenuPosition
-    }),
-    _useKeepInView2 = _slicedToArray(_useKeepInView, 2),
-    ref = _useKeepInView2[0],
-    setIsShown = _useKeepInView2[1];
-  useEffect(function () {
+  const [ref, setIsShown] = useKeepInView({
+    direction,
+    callback: setMenuPosition
+  });
+  useEffect(() => {
     setIsShown(toggleState);
   }, [toggleState, setIsShown]);
-  var triggerBtn = null;
-  var value = useMemo(function () {
-    return {
-      id: id,
-      onItemClick: function onItemClick(e) {
-        if (closeOnClick && !isTabbed) {
-          closeMenu(e);
-        }
+  let triggerBtn = null;
+  const value = useMemo(() => ({
+    id,
+    onItemClick: e => {
+      if (closeOnClick && !isTabbed) {
+        closeMenu(e);
       }
-    };
-  }, [closeOnClick, isTabbed, closeMenu, id]);
+    }
+  }), [closeOnClick, isTabbed, closeMenu, id]);
   if (customTriggerComponent) {
     triggerBtn = /*#__PURE__*/React.cloneElement(customTriggerComponent, {
       onClick: onToggle,
       "aria-label": ariaLabel,
       "aria-expanded": "".concat(toggleState),
       onFocus: onTriggerFocus,
-      id: id
+      id
     });
   } else {
-    triggerBtn = /*#__PURE__*/React.createElement(Control, {
+    triggerBtn = /*#__PURE__*/_jsx(Control, {
       "aria-label": ariaLabel,
       "aria-expanded": "".concat(toggleState),
       onClick: onToggle,
       onFocus: onTriggerFocus,
-      id: id
-    }, /*#__PURE__*/React.createElement(Icon, {
-      isOpen: toggleState
-    }));
+      id: id,
+      children: /*#__PURE__*/_jsx(Icon, {
+        isOpen: toggleState
+      })
+    });
   }
-  var component = /*#__PURE__*/React.createElement(Wrapper, _extends({}, props, {
+  const component = /*#__PURE__*/_jsxs(Wrapper, {
+    ...props,
     ref: wrapperRef,
-    onKeyUp: function onKeyUp(e) {
+    onKeyUp: e => {
       if ([commonKeys.ESCAPE, commonKeys.ESC].includes(e.key)) {
         closeMenu(e);
         document.getElementById(id).focus();
@@ -248,33 +163,37 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
         setTabbed === null || setTabbed === void 0 || setTabbed(true);
       }
     },
-    onBlur: function onBlur(e) {
-      setTimeout(function () {
+    onBlur: e => {
+      setTimeout(() => {
         var _wrapperRef$current, _document$getElementB;
-        var focusedElement = document.activeElement;
-        var isChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.contains(focusedElement);
-        var isModalChild = (_document$getElementB = document.getElementById("modal-overlay")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contains(focusedElement);
-        var isModalAndTabbed = isTabbed && isModalChild;
+        const focusedElement = document.activeElement;
+        const isChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.contains(focusedElement);
+        const isModalChild = (_document$getElementB = document.getElementById("modal-overlay")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contains(focusedElement);
+        const isModalAndTabbed = isTabbed && isModalChild;
         if (isChild || isModalAndTabbed) return;
         setTabbed === null || setTabbed === void 0 || setTabbed(false);
         closeMenu(e);
       }, 0);
-    }
-  }), triggerBtn, /*#__PURE__*/React.createElement(Menu, {
-    isOpen: toggleState,
-    direction: inViewDirection,
-    menuTopPosition: menuPosition.menuTopPosition,
-    menuLeftPosition: menuPosition.menuLeftPosition,
-    menuRightPosition: menuPosition.menuRightPosition,
-    menuWidth: menuWidth,
-    ref: ref,
-    role: "list"
-  }, /*#__PURE__*/React.createElement(ActionMenuContext.Provider, {
-    value: value
-  }, children)));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    },
+    children: [triggerBtn, /*#__PURE__*/_jsx(Menu, {
+      isOpen: toggleState,
+      direction: inViewDirection,
+      menuTopPosition: menuPosition.menuTopPosition,
+      menuLeftPosition: menuPosition.menuLeftPosition,
+      menuRightPosition: menuPosition.menuRightPosition,
+      menuWidth: menuWidth,
+      ref: ref,
+      role: "list",
+      children: /*#__PURE__*/_jsx(ActionMenuContext.Provider, {
+        value: value,
+        children: children
+      })
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 };
 ActionsMenuBody.propTypes = {
   onTriggerFocus: PropTypes.func,
@@ -292,38 +211,32 @@ ActionsMenuBody.propTypes = {
   theme: PropTypes.object,
   ariaLabel: PropTypes.string
 };
-var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    customTriggerComponent = _ref2.customTriggerComponent,
-    direction = _ref2.direction,
-    _ref2$isOpen = _ref2.isOpen,
-    isOpen = _ref2$isOpen === void 0 ? false : _ref2$isOpen,
-    theme = _ref2.theme,
-    _ref2$closeOnClick = _ref2.closeOnClick,
-    closeOnClick = _ref2$closeOnClick === void 0 ? true : _ref2$closeOnClick,
-    _ref2$ariaLabel = _ref2.ariaLabel,
-    ariaLabel = _ref2$ariaLabel === void 0 ? "Options Menu" : _ref2$ariaLabel,
-    props = _objectWithoutProperties(_ref2, _excluded3);
-  var _useState7 = useState(isOpen),
-    _useState8 = _slicedToArray(_useState7, 2),
-    toggleState = _useState8[0],
-    setToggle = _useState8[1];
-  useImperativeHandle(ref, function () {
-    return {
-      closeMenu: function closeMenu() {
-        setToggle(false);
-      }
-    };
-  });
-  var onToggle = function onToggle(e) {
+const ActionsMenu = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    customTriggerComponent,
+    direction,
+    isOpen = false,
+    theme,
+    closeOnClick = true,
+    ariaLabel = "Options Menu",
+    ...props
+  } = _ref2;
+  const [toggleState, setToggle] = useState(isOpen);
+  useImperativeHandle(ref, () => ({
+    closeMenu: () => {
+      setToggle(false);
+    }
+  }));
+  const onToggle = e => {
     e.stopPropagation();
     setToggle(!toggleState);
   };
-  var closeMenu = function closeMenu(e) {
+  const closeMenu = e => {
     e.stopPropagation();
     setToggle(false);
   };
-  return /*#__PURE__*/React.createElement(ActionsMenuBody, _extends({
+  return /*#__PURE__*/_jsx(ActionsMenuBody, {
     onToggle: onToggle,
     closeMenu: closeMenu,
     toggleState: toggleState,
@@ -331,8 +244,10 @@ var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     direction: direction,
     theme: theme,
     ariaLabel: ariaLabel,
-    closeOnClick: closeOnClick
-  }, props), children);
+    closeOnClick: closeOnClick,
+    ...props,
+    children: children
+  });
 });
 ActionsMenu.propTypes = {
   isOpen: PropTypes.bool,