@flodesk/grain 10.1.4 → 10.2.0

package/es/components/dropdown.js

@@ -1,22 +1,35 @@
 import "core-js/modules/es.array.map.js";
 import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect } from 'react';
 import { Menu } from '@headlessui/react';
 import { types } from '../types';
 import { MenuCard, MenuItem } from '../foundational';
 import { MenuItemDivider, useMenuPosition } from '../foundational/menu';
 import { FloatingPortal } from '@floating-ui/react-dom-interactions';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var Dropdown = function Dropdown(_ref) {
-  var options = _ref.options,
-      _ref$menuPlacement = _ref.menuPlacement,
-      menuPlacement = _ref$menuPlacement === void 0 ? 'bottomStart' : _ref$menuPlacement,
-      _ref$menuWidth = _ref.menuWidth,
-      menuWidth = _ref$menuWidth === void 0 ? '192px' : _ref$menuWidth,
-      menuZIndex = _ref.menuZIndex,
-      trigger = _ref.trigger,
-      _ref$hasPortal = _ref.hasPortal,
-      hasPortal = _ref$hasPortal === void 0 ? true : _ref$hasPortal;
+
+var Root = function Root(_ref) {
+  var open = _ref.open,
+      onOpenChange = _ref.onOpenChange,
+      children = _ref.children;
+  useEffect(function () {
+    onOpenChange(open);
+  }, [open, onOpenChange]);
+  return children;
+};
+
+export var Dropdown = function Dropdown(_ref2) {
+  var options = _ref2.options,
+      _ref2$menuPlacement = _ref2.menuPlacement,
+      menuPlacement = _ref2$menuPlacement === void 0 ? 'bottomStart' : _ref2$menuPlacement,
+      _ref2$menuWidth = _ref2.menuWidth,
+      menuWidth = _ref2$menuWidth === void 0 ? '192px' : _ref2$menuWidth,
+      menuZIndex = _ref2.menuZIndex,
+      trigger = _ref2.trigger,
+      _ref2$hasPortal = _ref2.hasPortal,
+      hasPortal = _ref2$hasPortal === void 0 ? true : _ref2$hasPortal,
+      _ref2$onOpenChange = _ref2.onOpenChange,
+      onOpenChange = _ref2$onOpenChange === void 0 ? function () {} : _ref2$onOpenChange;
 
   var _useMenuPosition = useMenuPosition({
     menuWidth: menuWidth,
@@ -27,10 +40,13 @@ export var Dropdown = function Dropdown(_ref) {
       floatingStyles = _useMenuPosition.floatingStyles;
 
   var ItemsRoot = hasPortal ? FloatingPortal : Fragment;
-  return ___EmotionJSX(Menu, null, function (_ref2) {
-    var open = _ref2.open,
-        close = _ref2.close;
-    return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Menu.Button, {
+  return ___EmotionJSX(Menu, null, function (_ref3) {
+    var open = _ref3.open,
+        close = _ref3.close;
+    return ___EmotionJSX(Root, {
+      open: open,
+      onOpenChange: onOpenChange
+    }, ___EmotionJSX(Menu.Button, {
       as: Fragment,
       ref: reference
     }, trigger), ___EmotionJSX(ItemsRoot, null, ___EmotionJSX(Menu.Items, {
@@ -55,8 +71,8 @@ export var Dropdown = function Dropdown(_ref) {
       }));
       return ___EmotionJSX(Menu.Item, {
         key: index
-      }, function (_ref3) {
-        var active = _ref3.active;
+      }, function (_ref4) {
+        var active = _ref4.active;
         return ___EmotionJSX(MenuItem, {
           icon: option.icon,
           isActive: active,
@@ -75,5 +91,6 @@ Dropdown.propTypes = {
   menuPlacement: types.menuPlacement,
   menuWidth: types.dimension,
   menuZIndex: types.zIndex,
-  hasPortal: PropTypes.bool
+  hasPortal: PropTypes.bool,
+  onOpenChange: PropTypes.func
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "10.1.4",
+  "version": "10.2.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",