@occmundial/occ-atomic 3.0.0-beta.65 → 3.0.0-beta.67

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [3.0.0-beta.67](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.66...v3.0.0-beta.67) (2024-10-10)
+
+
+### Bug Fixes
+
+* Pass ref to nav avatar button and update menu example ([6aecf3d](https://github.com/occmundial/occ-atomic/commit/6aecf3d9d3353b2b397b42c1fd168561715f4f63))
+* Update NavAside styles ([313b8c0](https://github.com/occmundial/occ-atomic/commit/313b8c0da245dae3f08d25b0e9359067afac9835))
+
+
+### Features
+
+* Add a Drawer component ([255f022](https://github.com/occmundial/occ-atomic/commit/255f02222f2c3bfd46f6792611d05eafec92816e))
+* Implement triggerRef into the Menu component ([18e5ae8](https://github.com/occmundial/occ-atomic/commit/18e5ae80ef60d6da6d7cb3a7fd04492cc3ae9b4f))
+
+# [3.0.0-beta.66](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.65...v3.0.0-beta.66) (2024-10-04)
+
+
+### Bug Fixes
+
+* Menu orientation relative to target ([d1d60f7](https://github.com/occmundial/occ-atomic/commit/d1d60f764376ad46acd5f788981ba794b9786a96))
+
 # [3.0.0-beta.65](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.64...v3.0.0-beta.65) (2024-10-04)
 
 

package/build/Avatar/AvatarContent/__snapshots__/AvatarContent.test.js.snap

@@ -44,21 +44,21 @@ Object {
   },
   "editable": Object {
     "&:active $overlay": Object {
-      "background": "hsl(234 75.4% 12.7% / 0.4)",
+      "background": "rgba(8, 13, 57, 0.4)",
     },
     "&:hover $camera": Object {
       "opacity": 1,
     },
     "&:hover $overlay": Object {
-      "background": "hsl(234 75.4% 12.7% / 0.3)",
+      "background": "rgba(8, 13, 57, 0.3)",
     },
   },
   "hoverPhoto": Object {
     "&:active $overlay": Object {
-      "background": "hsl(234 75.4% 12.7% / 0.4)",
+      "background": "rgba(8, 13, 57, 0.4)",
     },
     "&:hover $overlay": Object {
-      "background": "hsl(234 75.4% 12.7% / 0.3)",
+      "background": "rgba(8, 13, 57, 0.3)",
     },
   },
   "initials": Object {

package/build/Button/__snapshots__/Button.test.js.snap

@@ -62,13 +62,13 @@ Object {
       "color": "#878A9F",
     },
     "&:active": Object {
-      "background": "hsl(234 75.4% 12.7% / 0.1)",
+      "background": "rgba(8, 13, 57, 0.1)",
     },
     "&:focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+      "boxShadow": "0 0 0 8px rgba(8, 13, 57, 0.1)",
     },
     "&:hover": Object {
-      "background": "hsl(234 75.4% 12.7% / 0.05)",
+      "background": "rgba(8, 13, 57, 0.05)",
     },
     "background": "transparent",
     "color": "#5A5D7B",
@@ -102,7 +102,7 @@ Object {
   },
   "ghostWhite": Object {
     "& $icon, & $iconRight": Object {
-      "fill": "#fff",
+      "fill": "rgba(255,255,255,0.7)",
     },
     "&$disabled": Object {
       "& $icon, & $iconRight": Object {
@@ -168,7 +168,7 @@ Object {
     "width": "100%",
   },
   "loadIcon": Object {
-    "fill": "#fff",
+    "fill": "rgba(255,255,255,0.7)",
     "height": 24,
     "width": 24,
   },
@@ -193,7 +193,7 @@ Object {
   },
   "primary": Object {
     "& $icon, & $iconRight": Object {
-      "fill": "#fff",
+      "fill": "rgba(255,255,255,0.7)",
     },
     "&$disabled": Object {
       "& $icon, & $iconRight": Object {
@@ -210,7 +210,7 @@ Object {
       "outline": "2px solid rgba(255,255,255,0.2)",
     },
     "&:focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
+      "boxShadow": "0 0 0 8px rgba(241, 52, 101, 0.3)",
     },
     "&:hover": Object {
       "background": "#A32444",
@@ -234,19 +234,19 @@ Object {
       "& $icon, & $iconRight": Object {
         "fill": "#8DA5DA",
       },
-      "background": "hsl(221 91.2% 35.7% / 0.1)",
+      "background": "rgba(8, 60, 174, 0.1)",
       "color": "#486EC3",
     },
     "&:active": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.2)",
+      "background": "rgba(8, 60, 174, 0.2)",
     },
     "&:focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+      "boxShadow": "0 0 0 8px rgba(8, 60, 174, 0.3)",
     },
     "&:hover": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.1)",
+      "background": "rgba(8, 60, 174, 0.1)",
     },
-    "background": "hsl(221 91.2% 35.7% / 0.05)",
+    "background": "rgba(8, 60, 174, 0.05)",
     "color": "#083CAE",
   },
   "tertiary": Object {
@@ -265,16 +265,16 @@ Object {
       "outlineColor": "#8DA5DA",
     },
     "&:active": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.1)",
+      "background": "rgba(8, 60, 174, 0.1)",
     },
     "&:focus": Object {
       "outline": "2px solid #083CAE",
     },
     "&:focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+      "boxShadow": "0 0 0 8px rgba(8, 60, 174, 0.3)",
     },
     "&:hover": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.05)",
+      "background": "rgba(8, 60, 174, 0.05)",
     },
     "background": "transparent",
     "color": "#083CAE",
@@ -283,7 +283,7 @@ Object {
   },
   "tertiaryWhite": Object {
     "& $icon, & $iconRight": Object {
-      "fill": "#fff",
+      "fill": "rgba(255,255,255,0.7)",
     },
     "&$disabled": Object {
       "& $icon, & $iconRight": Object {

package/build/Checkbox/__snapshots__/Checkbox.test.js.snap

@@ -78,7 +78,7 @@ Object {
     },
     "&$active, &$undetermined": Object {
       "& $check $box": Object {
-        "background": "hsl(221 91.2% 35.7% / 0.1)",
+        "background": "rgba(8, 60, 174, 0.1)",
         "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
       },
     },

package/build/Drawer/Drawer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Drawer;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function Drawer(_ref) {
+  var classes = _ref.classes,
+      header = _ref.header,
+      children = _ref.children,
+      testId = _ref.testId,
+      show = _ref.show,
+      _onAnimationEnd = _ref.onAnimationEnd;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.container, " ").concat(show ? classes.show : classes.hide),
+    onAnimationEnd: function onAnimationEnd(e) {
+      if (_onAnimationEnd) _onAnimationEnd(e);
+    },
+    "data-testid": testId
+  }, header, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.content
+  }, children));
+}
+
+;
+Drawer.propTypes = {
+  classes: _propTypes["default"].object,
+  header: _propTypes["default"].node,
+  children: _propTypes["default"].node,
+  testId: _propTypes["default"].string,
+  show: _propTypes["default"].bool,
+  onAnimationEnd: _propTypes["default"].func
+};

package/build/Drawer/index.js

@@ -0,0 +1,110 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Drawer = (0, _reactJss["default"])(_styles["default"])(_Drawer["default"]);
+
+var DrawerPortal = /*#__PURE__*/function (_React$Component) {
+  _inherits(DrawerPortal, _React$Component);
+
+  var _super = _createSuper(DrawerPortal);
+
+  function DrawerPortal(props) {
+    var _this;
+
+    _classCallCheck(this, DrawerPortal);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      mount: false
+    };
+    _this.onAnimationEnd = _this.onAnimationEnd.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(DrawerPortal, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(props) {
+      if (props.show && !this.props.show) {
+        this.setState({
+          mount: true
+        });
+      }
+    }
+  }, {
+    key: "onAnimationEnd",
+    value: function onAnimationEnd() {
+      this.setState({
+        mount: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var mount = this.state.mount;
+      var _this$props = this.props,
+          container = _this$props.container,
+          show = _this$props.show;
+
+      var DrawerComponent = /*#__PURE__*/_react["default"].createElement(Drawer, _extends({}, this.props, {
+        onAnimationEnd: !show && mount ? this.onAnimationEnd : null
+      }));
+
+      if (container) {
+        return mount ? /*#__PURE__*/_reactDom["default"].createPortal(DrawerComponent, container) : null;
+      } else {
+        return mount ? DrawerComponent : null;
+      }
+    }
+  }]);
+
+  return DrawerPortal;
+}(_react["default"].Component);
+
+DrawerPortal.propTypes = {
+  show: _propTypes["default"].bool,
+  container: _propTypes["default"].object
+};
+var _default = DrawerPortal;
+exports["default"] = _default;

package/build/Drawer/index.test.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
+describe('Drawer', function () {
+  it('should render', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      classes: classes,
+      show: true
+    }, "Test"));
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.text()).toContain('Test');
+  });
+  it('should apply the correct classes based on the show prop', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      classes: classes,
+      show: true
+    }, "Test"));
+    expect(wrapper.find('.show').exists()).toBe(true);
+    expect(wrapper.find('.hide').exists()).toBe(false);
+    wrapper.setProps({
+      show: false
+    });
+    expect(wrapper.find('.show').exists()).toBe(false);
+    expect(wrapper.find('.hide').exists()).toBe(true);
+  });
+  it('should call onAnimationEnd when animation ends', function () {
+    var onAnimationEndMock = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      classes: classes,
+      show: true,
+      onAnimationEnd: onAnimationEndMock
+    }, "Test"));
+    wrapper.find('div.container').simulate('animationEnd');
+    expect(onAnimationEndMock).toHaveBeenCalled();
+  });
+});

package/build/Drawer/styles.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  '@global': {
+    body: {
+      overflow: 'hidden'
+    }
+  },
+  '@keyframes expand': {
+    from: {
+      height: 0
+    },
+    to: {
+      height: '100%'
+    }
+  },
+  '@keyframes collapse': {
+    from: {
+      height: '100%'
+    },
+    to: {
+      height: 0
+    }
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    zIndex: 1000,
+    backgroundColor: _colors["default"].bg.surface["default"],
+    overflow: 'hidden',
+    boxShadow: _shadows["default"]['elevation-elevation-3']
+  },
+  show: {
+    animation: 'expand 0.4s cubic-bezier(.4,0,.2,1)'
+  },
+  hide: {
+    animation: 'collapse 0.4s cubic-bezier(.4,0,.2,1)'
+  },
+  content: {
+    padding: _spacing["default"]['size-3']
+  }
+};
+exports["default"] = _default;

package/build/Droplist/__snapshots__/Droplist.test.js.snap

@@ -36,7 +36,7 @@ Object {
     "font": "400 14px/1.5 'OccText', sans-serif",
   },
   "highlighted": Object {
-    "background": "hsl(221 91.2% 35.7% / 0.05)",
+    "background": "rgba(8, 60, 174, 0.05)",
     "font": "400 16px/1.5 'OccText', sans-serif",
   },
   "icon": Object {
@@ -47,10 +47,10 @@ Object {
       "& > $rightText": Object {
         "color": "#080D39",
       },
-      "background": "hsl(221 91.2% 35.7% / 0.1)",
+      "background": "rgba(8, 60, 174, 0.1)",
     },
     "&:hover": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.05)",
+      "background": "rgba(8, 60, 174, 0.05)",
     },
     "alignItems": "center",
     "borderRadius": "4px",
@@ -77,9 +77,9 @@ Object {
   },
   "onFocus": Object {
     "&:hover": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.1)",
+      "background": "rgba(8, 60, 174, 0.1)",
     },
-    "background": "hsl(221 91.2% 35.7% / 0.1)",
+    "background": "rgba(8, 60, 174, 0.1)",
   },
   "right": Object {
     "marginLeft": "16px",

package/build/Footer/__snapshots__/Footer.test.js.snap

@@ -95,7 +95,7 @@ Object {
   "link": Object {
     "&:focus-visible": Object {
       "borderRadius": "4px",
-      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+      "boxShadow": "0 0 0 8px rgba(8, 13, 57, 0.1)",
       "color": "#080D39",
       "outline": 0,
     },

package/build/Menu/Menu.js

@@ -21,44 +21,26 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function Menu(_ref) {
   var children = _ref.children,
       id = _ref.id,
       classes = _ref.classes,
       className = _ref.className,
-      triggerElement = _ref.triggerElement,
+      triggerRef = _ref.triggerRef,
+      open = _ref.open,
+      setOpen = _ref.setOpen,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'left' : _ref$placement;
 
-  var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
   var _useFloating = (0, _react2.useFloating)({
     open: open,
     onOpenChange: setOpen,
-    placement: placement === 'left' ? 'bottom-start' : 'bottom-end',
+    placement: placement,
     middleware: [(0, _react2.offset)(16), (0, _react2.shift)()],
-    whileElementsMounted: _react2.autoUpdate
+    whileElementsMounted: _react2.autoUpdate,
+    elements: {
+      reference: triggerRef
+    }
   }),
       refs = _useFloating.refs,
       floatingStyles = _useFloating.floatingStyles,
@@ -69,12 +51,10 @@ function Menu(_ref) {
   var role = (0, _react2.useRole)(context);
 
   var _useInteractions = (0, _react2.useInteractions)([click, dismiss, role]),
-      getReferenceProps = _useInteractions.getReferenceProps,
       getFloatingProps = _useInteractions.getFloatingProps;
 
-  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, triggerElement ? /*#__PURE__*/(0, _react.cloneElement)(triggerElement, _objectSpread({
-    ref: refs.setReference
-  }, getReferenceProps())) : '', open && /*#__PURE__*/_react["default"].createElement(_react2.FloatingPortal, null, /*#__PURE__*/_react["default"].createElement(_react2.FloatingFocusManager, {
+  console.log(triggerRef, '====');
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, open && /*#__PURE__*/_react["default"].createElement(_react2.FloatingPortal, null, /*#__PURE__*/_react["default"].createElement(_react2.FloatingFocusManager, {
     context: context,
     modal: false
   }, /*#__PURE__*/_react["default"].createElement("div", _extends({
@@ -100,6 +80,12 @@ Menu.propTypes = {
   /** Boolean value to show or hide the Menu component. */
   open: _propTypes["default"].bool,
 
+  /** Function that sets the Menu status. */
+  setOpen: _propTypes["default"].func,
+
+  /** Ref that sets to trigger element */
+  triggerRef: _propTypes["default"].object,
+
   /** Id that sets to Children container */
   id: _propTypes["default"].string,
 
@@ -107,5 +93,5 @@ Menu.propTypes = {
   className: _propTypes["default"].string,
 
   /** Determines the placement of the Menu */
-  placement: _propTypes["default"].oneOf(['left', 'right'])
+  placement: _propTypes["default"].oneOf(["top", "right", "bottom", "left", "top-start", "top-end", "right-start", "right-end", "bottom-start", "bottom-end", "left-start", "left-end"])
 };