@flodesk/grain 10.7.0 → 10.7.1

package/es/components/popover.js

@@ -37,7 +37,7 @@ var ChildrenWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "prod
 }, ";transition-property:opacity;", function (_ref4) {
   var isOpen = _ref4.isOpen;
   return isOpen ? "transition-duration: ".concat(getTransition('xxFast')) : "transition-duration: ".concat(getTransition('xFast'), "; opacity: 0; pointer-events: none;");
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3BvcG92ZXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCa0MiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvcG9wb3Zlci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlUmVmLCB1c2VFZmZlY3QsIGNsb25lRWxlbWVudCwgRnJhZ21lbnQsIGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBwbGFjZW1lbnRzTWFwIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IHVzZUtleVByZXNzLCB1c2VPbkNsaWNrT3V0c2lkZSB9IGZyb20gJy4uL2hvb2tzJztcbmltcG9ydCB7XG4gIGdldENvbG9yLFxuICBnZXREaW1lbnNpb24sXG4gIGdldFJhZGl1cyxcbiAgZ2V0U2hhZG93LFxuICBnZXRTcGFjZSxcbiAgZ2V0VHJhbnNpdGlvbixcbiAgbWVyZ2VSZWZzLFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgdXNlRmxvYXRpbmcsXG4gIGF1dG9VcGRhdGUsXG4gIG9mZnNldCxcbiAgZmxpcCxcbiAgRmxvYXRpbmdQb3J0YWwsXG4gIHNoaWZ0LFxuICBsaW1pdFNoaWZ0LFxufSBmcm9tICdAZmxvYXRpbmctdWkvcmVhY3QtZG9tLWludGVyYWN0aW9ucyc7XG5cbmNvbnN0IENoaWxkcmVuV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICR7KHsgd2lkdGggfSkgPT4gYHdpZHRoOiAke2dldERpbWVuc2lvbih3aWR0aCl9YH07XG4gICR7KHsgcGFkZGluZyB9KSA9PiBgcGFkZGluZzogJHtnZXRTcGFjZShwYWRkaW5nKX1gfTtcbiAgYm94LXNoYWRvdzogJHtnZXRTaGFkb3coJ20nKX07XG4gIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdtJyl9O1xuICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKCdmbG9hdGluZ0JhY2tncm91bmQnKX07XG4gICR7KHsgekluZGV4IH0pID0+IGB6LWluZGV4OiAke3pJbmRleH1gfTtcbiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogb3BhY2l0eTtcbiAgJHsoeyBpc09wZW4gfSkgPT5cbiAgICBpc09wZW5cbiAgICAgID8gYHRyYW5zaXRpb24tZHVyYXRpb246ICR7Z2V0VHJhbnNpdGlvbigneHhGYXN0Jyl9YFxuICAgICAgOiBgdHJhbnNpdGlvbi1kdXJhdGlvbjogJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTsgb3BhY2l0eTogMDsgcG9pbnRlci1ldmVudHM6IG5vbmU7YH07XG5gO1xuXG5leHBvcnQgY29uc3QgUG9wb3ZlciA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIHBhZGRpbmcgPSAnbCcsXG4gICAgICBwbGFjZW1lbnQgPSAnYm90dG9tJyxcbiAgICAgIHdpZHRoID0gJzI1NnB4JyxcbiAgICAgIHRyaWdnZXIsXG4gICAgICBpc09wZW4sXG4gICAgICBvbkNsb3NlLFxuICAgICAgekluZGV4ID0gMSxcbiAgICAgIGhhc1BvcnRhbCA9IHRydWUsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBlc2NQcmVzcyA9IHVzZUtleVByZXNzKCdFc2NhcGUnKTtcbiAgICBjb25zdCB3cmFwcGVyUmVmID0gdXNlUmVmKG51bGwpO1xuICAgIHVzZU9uQ2xpY2tPdXRzaWRlKHdyYXBwZXJSZWYsIG9uQ2xvc2UpO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGlmIChlc2NQcmVzcykgb25DbG9zZSgpO1xuICAgIH0sIFtlc2NQcmVzcywgb25DbG9zZV0pO1xuXG4gICAgY29uc3QgeyB4LCB5LCByZWZlcmVuY2UsIGZsb2F0aW5nLCBzdHJhdGVneSB9ID0gdXNlRmxvYXRpbmcoe1xuICAgICAgcGxhY2VtZW50OiBwbGFjZW1lbnRzTWFwW3BsYWNlbWVudF0sXG4gICAgICBtaWRkbGV3YXJlOiBbb2Zmc2V0KDQpLCBmbGlwKCksIHNoaWZ0KHsgcGFkZGluZzogNCwgbGltaXRlcjogbGltaXRTaGlmdCgpIH0pXSxcbiAgICAgIHdoaWxlRWxlbWVudHNNb3VudGVkOiBhdXRvVXBkYXRlLFxuICAgIH0pO1xuXG4gICAgY29uc3QgUm9vdCA9IGhhc1BvcnRhbCA/IEZsb2F0aW5nUG9ydGFsIDogRnJhZ21lbnQ7XG4gICAgY29uc3QgbWVyZ2VkUmVmID0gbWVyZ2VSZWZzKFtyZWYsIHdyYXBwZXJSZWZdKTtcbiAgICBjb25zdCBtZXJnZWRUcmlnZ2VyUmVmID0gbWVyZ2VSZWZzKFtyZWZlcmVuY2UsIHRyaWdnZXIucmVmXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPD5cbiAgICAgICAge2Nsb25lRWxlbWVudCh0cmlnZ2VyLCB7IHJlZjogbWVyZ2VkVHJpZ2dlclJlZiB9KX1cbiAgICAgICAgPFJvb3Q+XG4gICAgICAgICAgPGRpdiByZWY9e21lcmdlZFJlZn0+XG4gICAgICAgICAgICA8Q2hpbGRyZW5XcmFwcGVyXG4gICAgICAgICAgICAgIHdpZHRoPXt3aWR0aH1cbiAgICAgICAgICAgICAgcGFkZGluZz17cGFkZGluZ31cbiAgICAgICAgICAgICAgekluZGV4PXt6SW5kZXh9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT1cImdybi1jb250ZXh0XCJcbiAgICAgICAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgICAgICAgIHJlZj17ZmxvYXRpbmd9XG4gICAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgICAgcG9zaXRpb246IHN0cmF0ZWd5LFxuICAgICAgICAgICAgICAgIHRvcDogeSA/PyAwLFxuICAgICAgICAgICAgICAgIGxlZnQ6IHggPz8gMCxcbiAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L0NoaWxkcmVuV3JhcHBlcj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9Sb290PlxuICAgICAgPC8+XG4gICAgKTtcbiAgfSxcbik7XG5cblBvcG92ZXIucHJvcFR5cGVzID0ge1xuICBwYWRkaW5nOiB0eXBlcy5kaW1lbnNpb24sXG4gIHdpZHRoOiB0eXBlcy5kaW1lbnNpb24sXG4gIHBsYWNlbWVudDogdHlwZXMucGxhY2VtZW50LFxuICB0cmlnZ2VyOiBQcm9wVHlwZXMubm9kZSxcbiAgekluZGV4OiB0eXBlcy56SW5kZXgsXG4gIGlzT3BlbjogUHJvcFR5cGVzLmJvb2wsXG4gIG9uQ2xvc2U6IFByb3BUeXBlcy5mdW5jLmlzUmVxdWlyZWQsXG4gIGhhc1BvcnRhbDogUHJvcFR5cGVzLmJvb2wsXG59O1xuIl19 */"));
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3BvcG92ZXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCa0MiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvcG9wb3Zlci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlUmVmLCB1c2VFZmZlY3QsIGNsb25lRWxlbWVudCwgRnJhZ21lbnQsIGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBwbGFjZW1lbnRzTWFwIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IHVzZUtleVByZXNzLCB1c2VPbkNsaWNrT3V0c2lkZSB9IGZyb20gJy4uL2hvb2tzJztcbmltcG9ydCB7XG4gIGdldENvbG9yLFxuICBnZXREaW1lbnNpb24sXG4gIGdldFJhZGl1cyxcbiAgZ2V0U2hhZG93LFxuICBnZXRTcGFjZSxcbiAgZ2V0VHJhbnNpdGlvbixcbiAgbWVyZ2VSZWZzLFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgdXNlRmxvYXRpbmcsXG4gIGF1dG9VcGRhdGUsXG4gIG9mZnNldCxcbiAgZmxpcCxcbiAgRmxvYXRpbmdQb3J0YWwsXG4gIHNoaWZ0LFxuICBsaW1pdFNoaWZ0LFxufSBmcm9tICdAZmxvYXRpbmctdWkvcmVhY3QtZG9tLWludGVyYWN0aW9ucyc7XG5cbmNvbnN0IENoaWxkcmVuV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICR7KHsgd2lkdGggfSkgPT4gYHdpZHRoOiAke2dldERpbWVuc2lvbih3aWR0aCl9YH07XG4gICR7KHsgcGFkZGluZyB9KSA9PiBgcGFkZGluZzogJHtnZXRTcGFjZShwYWRkaW5nKX1gfTtcbiAgYm94LXNoYWRvdzogJHtnZXRTaGFkb3coJ20nKX07XG4gIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdtJyl9O1xuICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKCdmbG9hdGluZ0JhY2tncm91bmQnKX07XG4gICR7KHsgekluZGV4IH0pID0+IGB6LWluZGV4OiAke3pJbmRleH1gfTtcbiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogb3BhY2l0eTtcbiAgJHsoeyBpc09wZW4gfSkgPT5cbiAgICBpc09wZW5cbiAgICAgID8gYHRyYW5zaXRpb24tZHVyYXRpb246ICR7Z2V0VHJhbnNpdGlvbigneHhGYXN0Jyl9YFxuICAgICAgOiBgdHJhbnNpdGlvbi1kdXJhdGlvbjogJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTsgb3BhY2l0eTogMDsgcG9pbnRlci1ldmVudHM6IG5vbmU7YH07XG5gO1xuXG5leHBvcnQgY29uc3QgUG9wb3ZlciA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIHBhZGRpbmcgPSAnbCcsXG4gICAgICBwbGFjZW1lbnQgPSAnYm90dG9tJyxcbiAgICAgIHdpZHRoID0gJzI1NnB4JyxcbiAgICAgIHRyaWdnZXIsXG4gICAgICBpc09wZW4sXG4gICAgICBvbkNsb3NlLFxuICAgICAgekluZGV4ID0gMSxcbiAgICAgIGhhc1BvcnRhbCA9IHRydWUsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBlc2NQcmVzcyA9IHVzZUtleVByZXNzKCdFc2NhcGUnKTtcbiAgICBjb25zdCB3cmFwcGVyUmVmID0gdXNlUmVmKG51bGwpO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGlmIChlc2NQcmVzcykgb25DbG9zZSgpO1xuICAgIH0sIFtlc2NQcmVzcywgb25DbG9zZV0pO1xuXG4gICAgY29uc3QgeyB4LCB5LCByZWZlcmVuY2UsIGZsb2F0aW5nLCBzdHJhdGVneSB9ID0gdXNlRmxvYXRpbmcoe1xuICAgICAgcGxhY2VtZW50OiBwbGFjZW1lbnRzTWFwW3BsYWNlbWVudF0sXG4gICAgICBtaWRkbGV3YXJlOiBbb2Zmc2V0KDQpLCBmbGlwKCksIHNoaWZ0KHsgcGFkZGluZzogNCwgbGltaXRlcjogbGltaXRTaGlmdCgpIH0pXSxcbiAgICAgIHdoaWxlRWxlbWVudHNNb3VudGVkOiBhdXRvVXBkYXRlLFxuICAgIH0pO1xuXG4gICAgY29uc3QgUm9vdCA9IGhhc1BvcnRhbCA/IEZsb2F0aW5nUG9ydGFsIDogRnJhZ21lbnQ7XG4gICAgY29uc3QgbWVyZ2VkUmVmID0gbWVyZ2VSZWZzKFtyZWYsIHdyYXBwZXJSZWZdKTtcbiAgICAvLyB1c2VkIGZvciBjbGljayBvdXRzaWRlXG4gICAgY29uc3QgdHJpZ2dlclJlZiA9IHVzZVJlZihudWxsKTtcbiAgICBjb25zdCBtZXJnZWRUcmlnZ2VyUmVmID0gbWVyZ2VSZWZzKFtyZWZlcmVuY2UsIHRyaWdnZXIucmVmLCB0cmlnZ2VyUmVmXSk7XG5cbiAgICB1c2VPbkNsaWNrT3V0c2lkZShbd3JhcHBlclJlZiwgdHJpZ2dlclJlZl0sIG9uQ2xvc2UpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDw+XG4gICAgICAgIHtjbG9uZUVsZW1lbnQodHJpZ2dlciwgeyByZWY6IG1lcmdlZFRyaWdnZXJSZWYgfSl9XG4gICAgICAgIDxSb290PlxuICAgICAgICAgIDxkaXYgcmVmPXttZXJnZWRSZWZ9PlxuICAgICAgICAgICAgPENoaWxkcmVuV3JhcHBlclxuICAgICAgICAgICAgICB3aWR0aD17d2lkdGh9XG4gICAgICAgICAgICAgIHBhZGRpbmc9e3BhZGRpbmd9XG4gICAgICAgICAgICAgIHpJbmRleD17ekluZGV4fVxuICAgICAgICAgICAgICBjbGFzc05hbWU9XCJncm4tY29udGV4dFwiXG4gICAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgICByZWY9e2Zsb2F0aW5nfVxuICAgICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBzdHJhdGVneSxcbiAgICAgICAgICAgICAgICB0b3A6IHkgPz8gMCxcbiAgICAgICAgICAgICAgICBsZWZ0OiB4ID8/IDAsXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPC9DaGlsZHJlbldyYXBwZXI+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvUm9vdD5cbiAgICAgIDwvPlxuICAgICk7XG4gIH0sXG4pO1xuXG5Qb3BvdmVyLnByb3BUeXBlcyA9IHtcbiAgcGFkZGluZzogdHlwZXMuZGltZW5zaW9uLFxuICB3aWR0aDogdHlwZXMuZGltZW5zaW9uLFxuICBwbGFjZW1lbnQ6IHR5cGVzLnBsYWNlbWVudCxcbiAgdHJpZ2dlcjogUHJvcFR5cGVzLm5vZGUsXG4gIHpJbmRleDogdHlwZXMuekluZGV4LFxuICBpc09wZW46IFByb3BUeXBlcy5ib29sLFxuICBvbkNsb3NlOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxuICBoYXNQb3J0YWw6IFByb3BUeXBlcy5ib29sLFxufTtcbiJdfQ== */"));
 
 export var Popover = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   var children = _ref5.children,
@@ -58,7 +58,6 @@ export var Popover = /*#__PURE__*/forwardRef(function (_ref5, ref) {
 
   var escPress = useKeyPress('Escape');
   var wrapperRef = useRef(null);
-  useOnClickOutside(wrapperRef, onClose);
   useEffect(function () {
     if (escPress) onClose();
   }, [escPress, onClose]);
@@ -78,8 +77,11 @@ export var Popover = /*#__PURE__*/forwardRef(function (_ref5, ref) {
       strategy = _useFloating.strategy;
 
   var Root = hasPortal ? FloatingPortal : Fragment;
-  var mergedRef = mergeRefs([ref, wrapperRef]);
-  var mergedTriggerRef = mergeRefs([reference, trigger.ref]);
+  var mergedRef = mergeRefs([ref, wrapperRef]); // used for click outside
+
+  var triggerRef = useRef(null);
+  var mergedTriggerRef = mergeRefs([reference, trigger.ref, triggerRef]);
+  useOnClickOutside([wrapperRef, triggerRef], onClose);
   return ___EmotionJSX(React.Fragment, null, /*#__PURE__*/cloneElement(trigger, {
     ref: mergedTriggerRef
   }), ___EmotionJSX(Root, null, ___EmotionJSX("div", {

package/es/hooks/useOnClickOutside.js

@@ -1,12 +1,13 @@
+import "core-js/modules/es.object.to-string.js";
 import { useEffect } from 'react';
-export function useOnClickOutside(ref, handler) {
+export function useOnClickOutside(refs, handler) {
   useEffect(function () {
     var listener = function listener(event) {
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
+      if (refs.every(function (ref) {
+        return ref.current && !ref.current.contains(event.target);
+      })) {
+        handler(event);
       }
-
-      handler(event);
     };
 
     document.addEventListener('mousedown', listener);
@@ -15,5 +16,5 @@ export function useOnClickOutside(ref, handler) {
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };
-  }, [ref, handler]);
+  }, [refs, handler]);
 }

package/package.json

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