@arch-ui/dropdown - npm Package Compare versions

Comparing version 0.0.21 to 0.0.22

CHANGELOG.md

 # @arch-ui/dropdown
 
+## 0.0.22
+
+### Patch Changes
+
+- [`8d7056c8e`](https://github.com/keystonejs/keystone/commit/8d7056c8ed8d4fccfd61e64fc5fc2caf65899cee) [#4294](https://github.com/keystonejs/keystone/pull/4294) Thanks [@renovate](https://github.com/apps/renovate)! - Update dependency focus-trap-react to ^8.3.0
+
 ## 0.0.21
@@ -4,0 +10,0 @@

dist/dropdown.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _defineProperty$1 = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -20,3 +20,3 @@ var _extends = require('@babel/runtime/helpers/extends');
 
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty$1);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
@@ -27,6 +27,51 @@ var _extends__default = /*#__PURE__*/_interopDefault(_extends);
 
-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 _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
 
-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__default['default'](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; }
+  return obj;
+}
 
+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 _objectSpread2(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;
+}
+
 const ItemElement = props => {
@@ -111,3 +156,3 @@ if (props.to) return core.jsx(reactRouterDom.Link, props);
   };
-  return _objectSpread({
+  return _objectSpread2({
     backgroundColor: 'white',
@@ -114,0 +159,0 @@ borderRadius: theme.borderRadius,

dist/dropdown.cjs.prod.js

@@ -1,46 +0,89 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: !0
-});
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require("@babel/runtime/helpers/defineProperty"), _objectWithoutProperties = require("@babel/runtime/helpers/objectWithoutProperties"), _extends = require("@babel/runtime/helpers/extends"), react = require("react"), reactRouterDom = require("react-router-dom"), reactDom = require("react-dom"), styled = require("@emotion/styled"), core = require("@emotion/core"), theme = require("@arch-ui/theme"), FocusTrap = require("focus-trap-react"), modalUtils = require("@arch-ui/modal-utils");
+var _defineProperty$1 = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _extends = require('@babel/runtime/helpers/extends');
+var react = require('react');
+var reactRouterDom = require('react-router-dom');
+var reactDom = require('react-dom');
+var styled = require('@emotion/styled');
+var core = require('@emotion/core');
+var theme = require('@arch-ui/theme');
+var FocusTrap = require('focus-trap-react');
+var modalUtils = require('@arch-ui/modal-utils');
 
-function _interopDefault(e) {
-  return e && e.__esModule ? e : {
-    default: e
-  };
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty$1);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
+var _extends__default = /*#__PURE__*/_interopDefault(_extends);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var FocusTrap__default = /*#__PURE__*/_interopDefault(FocusTrap);
+
+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 _defineProperty__default = _interopDefault(_defineProperty), _objectWithoutProperties__default = _interopDefault(_objectWithoutProperties), _extends__default = _interopDefault(_extends), styled__default = _interopDefault(styled), FocusTrap__default = _interopDefault(FocusTrap);
-
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
+
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter((function(sym) {
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    }))), keys.push.apply(keys, symbols);
+    });
+    keys.push.apply(keys, symbols);
   }
+
   return keys;
 }
 
-function _objectSpread(target) {
+function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach((function(key) {
-      _defineProperty__default.default(target, key, source[key]);
-    })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach((function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    }));
+    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;
 }
 
-const ItemElement = props => props.to ? core.jsx(reactRouterDom.Link, props) : props.href ? core.jsx("a", props) : core.jsx("button", _extends__default.default({
-  type: "button"
-}, props)), ItemInner = ({children: children, icon: icon}) => icon ? core.jsx("div", {
+const ItemElement = props => {
+  if (props.to) return core.jsx(reactRouterDom.Link, props);
+  if (props.href) return core.jsx("a", props);
+  return core.jsx("button", _extends__default['default']({
+    type: "button"
+  }, props));
+};
+
+const ItemInner = ({
+  children,
+  icon
+}) => icon ? core.jsx("div", {
   css: {
-    alignItems: "center",
-    display: "flex",
+    alignItems: 'center',
+    display: 'flex',
     lineHeight: 1
@@ -53,3 +96,3 @@ }
     width: 16,
-    textAlign: "center"
+    textAlign: 'center'
   }
@@ -61,29 +104,37 @@ }, icon), core.jsx("div", {
   }
-}, children)) : children, Item = _ref => {
-  let {children: children, icon: icon, isDisabled: isDisabled} = _ref, props = _objectWithoutProperties__default.default(_ref, [ "children", "icon", "isDisabled" ]);
-  return core.jsx(ItemElement, _extends__default.default({
+}, children)) : children;
+
+const Item = (_ref) => {
+  let {
+    children,
+    icon,
+    isDisabled
+  } = _ref,
+      props = _objectWithoutProperties__default['default'](_ref, ["children", "icon", "isDisabled"]);
+
+  return core.jsx(ItemElement, _extends__default['default']({
     disabled: isDisabled,
     css: {
-      appearance: "none",
-      background: "none",
-      border: "1px solid transparent",
-      boxSizing: "border-box",
+      appearance: 'none',
+      background: 'none',
+      border: '1px solid transparent',
+      boxSizing: 'border-box',
       color: isDisabled ? theme.colors.N40 : theme.colors.text,
-      cursor: "pointer",
-      display: "block",
+      cursor: 'pointer',
+      display: 'block',
       fontSize: 14,
-      lineHeight: "17px",
+      lineHeight: '17px',
       margin: 0,
-      padding: `${theme.gridSize}px ${1.5 * theme.gridSize}px`,
-      pointerEvents: isDisabled ? "none" : null,
-      textAlign: "left",
-      transition: "box-shadow 100ms linear",
-      verticalAlign: "middle",
-      whiteSpace: "nowrap",
-      width: "100%",
-      "&:hover, &:focus": {
+      padding: `${theme.gridSize}px ${theme.gridSize * 1.5}px`,
+      pointerEvents: isDisabled ? 'none' : null,
+      textAlign: 'left',
+      transition: 'box-shadow 100ms linear',
+      verticalAlign: 'middle',
+      whiteSpace: 'nowrap',
+      width: '100%',
+      '&:hover, &:focus': {
         backgroundColor: theme.colors.B.L90,
         color: theme.colors.primary,
         outline: 0,
-        textDecoration: "none"
+        textDecoration: 'none'
       }
@@ -94,9 +145,14 @@ }
   }, children));
-}, Menu = styled__default.default.div(({left: left, top: top}) => {
+};
+
+const Menu = styled__default['default'].div(({
+  left,
+  top
+}) => {
   const placementStyles = {
-    left: left,
-    top: top
+    left,
+    top
   };
-  return _objectSpread({
-    backgroundColor: "white",
+  return _objectSpread2({
+    backgroundColor: 'white',
     borderRadius: theme.borderRadius,
@@ -108,3 +164,3 @@ boxShadow: theme.shadows[2],
     paddingTop: theme.gridSize / 2,
-    position: "absolute",
+    position: 'absolute',
     zIndex: 2
@@ -115,3 +171,5 @@ }, placementStyles);
 function focus(el) {
-  el && el instanceof HTMLElement && "function" == typeof el.focus && el.focus();
+  if (el && el instanceof HTMLElement && typeof el.focus === 'function') {
+    el.focus();
+  }
 }
@@ -121,79 +179,190 @@
   constructor(...args) {
-    super(...args), _defineProperty__default.default(this, "state", {
+    super(...args);
+
+    _defineProperty__default['default'](this, "state", {
       leftOffset: 0,
       topOffset: 0
-    }), _defineProperty__default.default(this, "handleItemClick", _ref2 => {
-      let {onClick: onClick} = _ref2, data = _objectWithoutProperties__default.default(_ref2, [ "onClick" ]);
+    });
+
+    _defineProperty__default['default'](this, "handleItemClick", (_ref2) => {
+      let {
+        onClick
+      } = _ref2,
+          data = _objectWithoutProperties__default['default'](_ref2, ["onClick"]);
+
       return event => {
-        const {close: close, selectClosesMenu: selectClosesMenu} = this.props;
-        selectClosesMenu && close(event), onClick && onClick({
-          event: event,
-          data: data
+        const {
+          close,
+          selectClosesMenu
+        } = this.props;
+        if (selectClosesMenu) close(event);
+        if (onClick) onClick({
+          event,
+          data
         });
       };
-    }), _defineProperty__default.default(this, "handleKeyDown", event => {
-      const {key: key, target: target} = event;
-      if (!(target instanceof HTMLElement)) return;
-      if (-1 === [ "ArrowUp", "ArrowDown", "PageUp", "PageDown" ].indexOf(key)) return;
-      event.preventDefault();
-      const isArrowUp = "ArrowUp" === key, isArrowDown = "ArrowDown" === key, isPageUp = "PageUp" === key, isPageDown = "PageDown" === key, firstItem = this.menu.firstChild, lastItem = this.menu.lastChild, previousItem = target.previousSibling, nextItem = target.nextSibling;
-      isArrowUp && focus(previousItem), isArrowDown && focus(nextItem), isPageUp && focus(firstItem), 
-      isPageDown && focus(lastItem), target === firstItem && isArrowUp && focus(lastItem), 
-      target === lastItem && isArrowDown && focus(firstItem);
-    }), _defineProperty__default.default(this, "handleMouseEnter", ({target: target}) => {
-      target instanceof HTMLElement && (this.lastHover = target), document.activeElement && document.activeElement.blur();
-    }), _defineProperty__default.default(this, "handleMenuLeave", () => {
+    });
+
+    _defineProperty__default['default'](this, "handleKeyDown", event => {
+      const {
+        key,
+        target
+      } = event; // appease flow
+
+      if (!(target instanceof HTMLElement)) return; // bail on unused keys
+
+      if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown'].indexOf(key) === -1) {
+        return;
+      } // kill scroll that occurs on arrow/page key press
+
+
+      event.preventDefault(); // prep shorthand key/node helpers
+
+      const isArrowUp = key === 'ArrowUp';
+      const isArrowDown = key === 'ArrowDown';
+      const isPageUp = key === 'PageUp';
+      const isPageDown = key === 'PageDown';
+      const firstItem = this.menu.firstChild;
+      const lastItem = this.menu.lastChild;
+      const previousItem = target.previousSibling;
+      const nextItem = target.nextSibling; // typical item traversal
+
+      if (isArrowUp) focus(previousItem);
+      if (isArrowDown) focus(nextItem);
+      if (isPageUp) focus(firstItem);
+      if (isPageDown) focus(lastItem); // support looping
+
+      if (target === firstItem && isArrowUp) focus(lastItem);
+      if (target === lastItem && isArrowDown) focus(firstItem);
+    });
+
+    _defineProperty__default['default'](this, "handleMouseEnter", ({
+      target
+    }) => {
+      if (target instanceof HTMLElement) {
+        this.lastHover = target;
+      }
+
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+    });
+
+    _defineProperty__default['default'](this, "handleMenuLeave", () => {
       focus(this.lastHover);
-    }), _defineProperty__default.default(this, "getMenu", ref => {
-      null !== ref && (this.menu = ref, this.props.getModalRef(ref));
-    }), _defineProperty__default.default(this, "calculatePosition", () => {
-      const {align: align, mode: mode, mouseCoords: mouseCoords, targetNode: targetNode} = this.props;
+    });
+
+    _defineProperty__default['default'](this, "getMenu", ref => {
+      if (ref !== null) {
+        this.menu = ref;
+        this.props.getModalRef(ref);
+      }
+    });
+
+    _defineProperty__default['default'](this, "calculatePosition", () => {
+      const {
+        align,
+        mode,
+        mouseCoords,
+        targetNode
+      } = this.props;
       if (!targetNode || !document.body) return;
-      const bodyRect = document.body.getBoundingClientRect(), targetRect = targetNode.getBoundingClientRect(), menuHeight = this.menu.clientHeight, menuWidth = this.menu.clientWidth;
-      let leftOffset = 0, topOffset = 0;
-      if ("click" === mode) return leftOffset = "left" === align ? targetRect.left : targetRect.right - menuWidth, 
-      topOffset = targetRect.bottom - bodyRect.top, void this.setState({
-        leftOffset: leftOffset,
-        topOffset: topOffset
+      const bodyRect = document.body.getBoundingClientRect();
+      const targetRect = targetNode.getBoundingClientRect();
+      const menuHeight = this.menu.clientHeight;
+      const menuWidth = this.menu.clientWidth;
+      let leftOffset = 0;
+      let topOffset = 0; // ------------------------------
+      // click menu
+      // ------------------------------
+
+      if (mode === 'click') {
+        leftOffset = align === 'left' ? targetRect.left : targetRect.right - menuWidth;
+        topOffset = targetRect.bottom - bodyRect.top;
+        this.setState({
+          leftOffset,
+          topOffset
+        });
+        return;
+      } // ------------------------------
+      // context menu
+      // ------------------------------
+
+
+      const {
+        clientX,
+        clientY
+      } = mouseCoords;
+      const screen = {
+        w: window.innerWidth,
+        h: window.innerHeight
+      };
+      const right = screen.w - clientX > menuWidth;
+      const left = !right;
+      const top = screen.h - clientY > menuHeight;
+      const bottom = !top;
+      if (right) leftOffset = clientX;
+      if (left) leftOffset = clientX - menuWidth;
+      if (top) topOffset = clientY - bodyRect.top;
+      if (bottom) topOffset = clientY - bodyRect.top - menuHeight;
+      this.setState({
+        leftOffset,
+        topOffset
       });
-      const {clientX: clientX, clientY: clientY} = mouseCoords, right = window.innerWidth - clientX > menuWidth, top = window.innerHeight - clientY > menuHeight, bottom = !top;
-      right && (leftOffset = clientX), !right && (leftOffset = clientX - menuWidth), top && (topOffset = clientY - bodyRect.top), 
-      bottom && (topOffset = clientY - bodyRect.top - menuHeight), this.setState({
-        leftOffset: leftOffset,
-        topOffset: topOffset
-      });
     });
   }
+
   componentDidMount() {
-    this.calculatePosition(), document.addEventListener("keydown", this.handleKeyDown, !1);
+    this.calculatePosition();
+    document.addEventListener('keydown', this.handleKeyDown, false);
   }
+
   componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown, !1);
+    document.removeEventListener('keydown', this.handleKeyDown, false);
   }
+
   render() {
-    const {items: items, style: style} = this.props, {leftOffset: leftOffset, topOffset: topOffset} = this.state, attachTo = document.body;
-    return attachTo ? reactDom.createPortal(core.jsx(FocusTrap__default.default, {
-      focusTrapOptions: {
-        clickOutsideDeactivates: !0
-      }
-    }, core.jsx(Menu, {
-      left: leftOffset,
-      onMouseLeave: this.handleMenuLeave,
-      ref: this.getMenu,
-      style: style,
-      top: topOffset
-    }, items.map((item, idx) => {
-      const {content: content} = item, rest = _objectWithoutProperties__default.default(item, [ "content" ]);
-      return core.jsx(Item, _extends__default.default({}, rest, {
-        onClick: this.handleItemClick(item),
-        onMouseEnter: this.handleMouseEnter,
-        key: idx
-      }), content);
-    }))), attachTo) : null;
+    const {
+      items,
+      style
+    } = this.props;
+    const {
+      leftOffset,
+      topOffset
+    } = this.state;
+    const attachTo = document.body;
+
+    if (attachTo) {
+      return /*#__PURE__*/reactDom.createPortal(core.jsx(FocusTrap__default['default'], {
+        focusTrapOptions: {
+          clickOutsideDeactivates: true
+        }
+      }, core.jsx(Menu, {
+        left: leftOffset,
+        onMouseLeave: this.handleMenuLeave,
+        ref: this.getMenu,
+        style: style,
+        top: topOffset
+      }, items.map((item, idx) => {
+        const {
+          content
+        } = item,
+              rest = _objectWithoutProperties__default['default'](item, ["content"]);
+
+        return core.jsx(Item, _extends__default['default']({}, rest, {
+          onClick: this.handleItemClick(item),
+          onMouseEnter: this.handleMouseEnter,
+          key: idx
+        }), content);
+      }))), attachTo);
+    } else {
+      return null;
+    }
   }
+
 }
 
-_defineProperty__default.default(Dropdown, "defaultProps", {
-  align: "left",
-  selectClosesMenu: !0
+_defineProperty__default['default'](Dropdown, "defaultProps", {
+  align: 'left',
+  selectClosesMenu: true
 });
@@ -200,0 +369,0 @@

dist/dropdown.esm.js

@@ -1,2 +0,2 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _defineProperty$1 from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -13,6 +13,51 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 
-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 _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
 
-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; }
+  return obj;
+}
 
+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 _objectSpread2(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;
+}
+
 const ItemElement = props => {
@@ -97,3 +142,3 @@ if (props.to) return jsx(Link, props);
   };
-  return _objectSpread({
+  return _objectSpread2({
     backgroundColor: 'white',
@@ -121,3 +166,3 @@ borderRadius: borderRadius,
 
-    _defineProperty(this, "state", {
+    _defineProperty$1(this, "state", {
       leftOffset: 0,
@@ -127,3 +172,3 @@ topOffset: 0
 
-    _defineProperty(this, "handleItemClick", (_ref2) => {
+    _defineProperty$1(this, "handleItemClick", (_ref2) => {
       let {
@@ -147,3 +192,3 @@ onClick
 
-    _defineProperty(this, "handleKeyDown", event => {
+    _defineProperty$1(this, "handleKeyDown", event => {
       const {
@@ -181,3 +226,3 @@ key,
 
-    _defineProperty(this, "handleMouseEnter", ({
+    _defineProperty$1(this, "handleMouseEnter", ({
       target
@@ -194,7 +239,7 @@ }) => {
 
-    _defineProperty(this, "handleMenuLeave", () => {
+    _defineProperty$1(this, "handleMenuLeave", () => {
       focus(this.lastHover);
     });
 
-    _defineProperty(this, "getMenu", ref => {
+    _defineProperty$1(this, "getMenu", ref => {
       if (ref !== null) {
@@ -206,3 +251,3 @@ this.menu = ref;
 
-    _defineProperty(this, "calculatePosition", () => {
+    _defineProperty$1(this, "calculatePosition", () => {
       const {
@@ -310,3 +355,3 @@ align,
 
-_defineProperty(Dropdown, "defaultProps", {
+_defineProperty$1(Dropdown, "defaultProps", {
   align: 'left',
@@ -313,0 +358,0 @@ selectClosesMenu: true

package.json

 {
   "name": "@arch-ui/dropdown",
   "description": "Dropdown UI as used in @keystonejs Admin UI.",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "author": "Jed Watson",
@@ -9,8 +9,8 @@ "license": "MIT",
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
   "devDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
@@ -20,6 +20,6 @@ "dependencies": {
     "@arch-ui/theme": "^0.0.11",
-    "@babel/runtime": "^7.11.2",
-    "@emotion/core": "^10.0.35",
+    "@babel/runtime": "^7.12.5",
+    "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
-    "focus-trap-react": "^8.0.0",
+    "focus-trap-react": "^8.3.0",
     "react-router-dom": "5.2.0"
@@ -26,0 +26,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

45482

increased by5.9%

Lines of code

1174

increased by21.28%

Dependency changes

• Updated@babel/runtime@^7.12.5

• Updated@emotion/core@^10.1.1

• Updatedfocus-trap-react@^8.3.0