@moda/om 15.10.3 → 15.11.3

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [15.11.3](https://github.com/ModaOperandi/om/compare/v15.11.2...v15.11.3) (2021-12-13)
+
+
+### Bug Fixes
+
+* **popover:** fixes open & !open logic ([#2265](https://github.com/ModaOperandi/om/issues/2265)) ([21e5bc9](https://github.com/ModaOperandi/om/commit/21e5bc995297ca3eeaaf4c4e0361ddb4860bd7b7))
+
+## [15.11.2](https://github.com/ModaOperandi/om/compare/v15.11.1...v15.11.2) (2021-12-10)
+
+
+### Bug Fixes
+
+* **popover smooth transitioning:** fixes problem with auto triggering ([#2260](https://github.com/ModaOperandi/om/issues/2260)) ([4700f11](https://github.com/ModaOperandi/om/commit/4700f11641478123d6220f8bef7d4a0ce81daf45))
+
+## [15.11.1](https://github.com/ModaOperandi/om/compare/v15.11.0...v15.11.1) (2021-12-10)
+
+
+### Bug Fixes
+
+* **popover:** clears out props, makes smooth transitioning optional ([#2259](https://github.com/ModaOperandi/om/issues/2259)) ([9880664](https://github.com/ModaOperandi/om/commit/988066478a0f226d54db5b374dc54e1840fd9aee))
+
+# [15.11.0](https://github.com/ModaOperandi/om/compare/v15.10.3...v15.11.0) (2021-12-10)
+
+
+### Features
+
+* **popover:** adds popover smooth animation ([#2256](https://github.com/ModaOperandi/om/issues/2256)) ([ad7562f](https://github.com/ModaOperandi/om/commit/ad7562f3256ba04b7b80a761c044ac17656f6588))
+
 ## [15.10.3](https://github.com/ModaOperandi/om/compare/v15.10.2...v15.10.3) (2021-10-27)
 
 

package/dist/components/Popover/Popover.d.ts

@@ -6,6 +6,8 @@ export declare type PopoverProps = React.HTMLAttributes<HTMLDivElement> & {
     open?: boolean;
     anchor?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
     zIndex?: number;
+    autoPreview?: boolean;
+    smoothTransitioning?: boolean;
 };
 export declare const POPOVER_MOUSEOUT_DELAY_MS = 200;
 export declare const Popover: React.FC<PopoverProps>;

package/dist/index.cjs.js

@@ -2988,21 +2988,32 @@ var FocusLock = /*#__PURE__*/React__namespace.forwardRef(function FocusLockUI(pr
       onDeactivationCallback(observed.current);
     }
   }, [onDeactivationCallback]);
+  React$2.useEffect(function () {
+    if (!disabled) {
+      // cleanup return focus on trap deactivation
+      // sideEffect/returnFocus should happen by this time
+      originalFocusedElement.current = null;
+    }
+  }, []);
   var returnFocus = React__namespace.useCallback(function (allowDefer) {
-    var current = originalFocusedElement.current;
+    var returnFocusTo = originalFocusedElement.current;
 
-    if (Boolean(shouldReturnFocus) && current && current.focus) {
-      var focusOptions = _typeof(shouldReturnFocus) === 'object' ? shouldReturnFocus : undefined;
-      originalFocusedElement.current = null;
+    if (returnFocusTo && returnFocusTo.focus) {
+      var howToReturnFocus = typeof shouldReturnFocus === 'function' ? shouldReturnFocus(returnFocusTo) : shouldReturnFocus;
 
-      if (allowDefer) {
-        // React might return focus after update
-        // it's safer to defer the action
-        Promise.resolve().then(function () {
-          return current.focus(focusOptions);
-        });
-      } else {
-        current.focus(focusOptions);
+      if (Boolean(howToReturnFocus)) {
+        var focusOptions = _typeof(howToReturnFocus) === 'object' ? howToReturnFocus : undefined;
+        originalFocusedElement.current = null;
+
+        if (allowDefer) {
+          // React might return focus after update
+          // it's safer to defer the action
+          Promise.resolve().then(function () {
+            return returnFocusTo.focus(focusOptions);
+          });
+        } else {
+          returnFocusTo.focus(focusOptions);
+        }
       }
     }
   }, [shouldReturnFocus]); // MEDIUM CALLBACKS
@@ -3940,13 +3951,13 @@ var onWindowBlur = function onWindowBlur() {
 };
 
 var attachHandler = function attachHandler() {
-  document.addEventListener('focusin', onTrap, true);
+  document.addEventListener('focusin', onTrap);
   document.addEventListener('focusout', onBlur);
   window.addEventListener('blur', onWindowBlur);
 };
 
 var detachHandler = function detachHandler() {
-  document.removeEventListener('focusin', onTrap, true);
+  document.removeEventListener('focusin', onTrap);
   document.removeEventListener('focusout', onBlur);
   window.removeEventListener('blur', onWindowBlur);
 };
@@ -8616,30 +8627,30 @@ var useClickOutside = function useClickOutside(ref, onClickOutside) {
   });
 };
 
-var Mode;
+var Mode$1;
 
 (function (Mode) {
   Mode[Mode["Resting"] = 0] = "Resting";
   Mode[Mode["Open"] = 1] = "Open";
-})(Mode || (Mode = {}));
+})(Mode$1 || (Mode$1 = {}));
 
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case 'OPEN':
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        mode: Mode.Open
+        mode: Mode$1.Open
       });
 
     case 'CLOSE':
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        mode: Mode.Resting
+        mode: Mode$1.Resting
       });
 
     case 'SELECT':
       return _objectSpread2(_objectSpread2({}, state), {}, {
         value: action.payload.value,
         focused: undefined,
-        mode: Mode.Resting
+        mode: Mode$1.Resting
       });
 
     case 'FOCUS':
@@ -8658,7 +8669,7 @@ var useSelect = function useSelect(_ref) {
   var _useReducer = React$2.useReducer(reducer, {
     value: initialValue,
     focused: _typeof(initialValue) == 'object' ? initialValue === null || initialValue === void 0 ? void 0 : initialValue[0] : initialValue,
-    mode: Mode.Resting
+    mode: Mode$1.Resting
   }),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
@@ -8700,7 +8711,7 @@ var useSelect = function useSelect(_ref) {
   return {
     state: state,
     dispatch: dispatch,
-    Mode: Mode,
+    Mode: Mode$1,
     selectRef: selectRef
   };
 };
@@ -11268,8 +11279,19 @@ var Paginator = function Paginator(_ref) {
   })));
 };
 
-var _excluded$b = ["className", "children", "content", "open", "anchor", "zIndex"];
+var _excluded$b = ["className", "children", "content", "open", "anchor", "zIndex", "autoPreview", "smoothTransitioning"];
 var POPOVER_MOUSEOUT_DELAY_MS = 200;
+var Mode;
+
+(function (Mode) {
+  Mode["Opening"] = "opening";
+  Mode["Open"] = "open";
+  Mode["Closing"] = "closing";
+  Mode["AutoOpening"] = "autoOpening";
+  Mode["AutoOpen"] = "autoOpen";
+  Mode["Closed"] = "closed";
+})(Mode || (Mode = {}));
+
 var Popover = function Popover(_ref) {
   var className = _ref.className,
       children = _ref.children,
@@ -11279,37 +11301,110 @@ var Popover = function Popover(_ref) {
       _ref$anchor = _ref.anchor,
       anchor = _ref$anchor === void 0 ? 'topLeft' : _ref$anchor,
       zIndex = _ref.zIndex,
+      _ref$autoPreview = _ref.autoPreview,
+      autoPreview = _ref$autoPreview === void 0 ? false : _ref$autoPreview,
+      _ref$smoothTransition = _ref.smoothTransitioning,
+      smoothTransitioning = _ref$smoothTransition === void 0 ? false : _ref$smoothTransition,
       rest = _objectWithoutProperties(_ref, _excluded$b);
 
-  var _useState = React$2.useState(open),
+  var _useState = React$2.useState(function () {
+    if (open && smoothTransitioning) {
+      return Mode.Opening;
+    }
+
+    if (open && !smoothTransitioning) {
+      return Mode.Open;
+    }
+
+    if (autoPreview) {
+      return Mode.AutoOpening;
+    }
+
+    return Mode.Closed;
+  }),
       _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setOpen = _useState2[1];
+      mode = _useState2[0],
+      setMode = _useState2[1];
 
   var timeout = React$2.useRef(null);
   var handleMouseEnter = React$2.useCallback(function () {
     if (!open) {
       timeout.current && clearTimeout(timeout.current);
-      setOpen(true);
+      setMode(smoothTransitioning ? Mode.Opening : Mode.Open);
     }
-  }, [open]);
+  }, [open, smoothTransitioning]);
   var handleMouseLeave = React$2.useCallback(function () {
-    if (!open) {
-      timeout.current = setTimeout(function () {
-        return setOpen(false);
-      }, POPOVER_MOUSEOUT_DELAY_MS);
-    }
-  }, [open]);
+    if (open) return;
+    timeout.current = setTimeout(function () {
+      return setMode(smoothTransitioning ? Mode.Closing : Mode.Closed);
+    }, POPOVER_MOUSEOUT_DELAY_MS);
+  }, [open, smoothTransitioning]);
+  React$2.useEffect(function () {
+    if (mode !== Mode.Closing) return;
+    var closingTimeout = setTimeout(function () {
+      return setMode(Mode.Closed);
+    }, 750);
+    return function () {
+      return clearTimeout(closingTimeout);
+    };
+  }, [mode]);
+  React$2.useEffect(function () {
+    if (mode !== Mode.AutoOpening) return;
+    var openingTimeout = setTimeout(function () {
+      return setMode(Mode.AutoOpen);
+    }, 1000);
+    return function () {
+      return clearTimeout(openingTimeout);
+    };
+  }, [mode]);
+  React$2.useEffect(function () {
+    if (mode !== Mode.Opening) return;
+    var openingTimeout = setTimeout(function () {
+      return setMode(Mode.Open);
+    }, 750);
+    return function () {
+      return clearTimeout(openingTimeout);
+    };
+  }, [mode]);
   React$2.useEffect(function () {
-    return setOpen(open);
-  }, [open]);
+    if (mode !== Mode.AutoOpen) return;
+    var stayingTimeout = setTimeout(function () {
+      return setMode(smoothTransitioning ? Mode.Closing : Mode.Closed);
+    }, 5000);
+    return function () {
+      return clearTimeout(stayingTimeout);
+    };
+  }, [mode, smoothTransitioning]);
+  React$2.useEffect(function () {
+    if (open && smoothTransitioning) {
+      setMode(Mode.Opening);
+    }
+
+    if (open && !smoothTransitioning) {
+      setMode(Mode.Open);
+    }
+
+    if (!open && smoothTransitioning) {
+      setMode(Mode.Closing);
+    }
+
+    if (!open && !smoothTransitioning) {
+      setMode(Mode.Closed);
+    }
+  }, [open, smoothTransitioning]);
+  var isOpen = mode === Mode.AutoOpen || mode === Mode.Opening || mode === Mode.Open || mode === Mode.Closing;
   return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({
     className: classNames("Popover Popover--anchor-".concat(anchor), className),
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
   }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "Popover__trigger"
-  }, isOpen && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, isOpen && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames('Popover__box', {
+      'Popover__box--opening': mode === Mode.Opening,
+      'Popover__box--closing': mode === Mode.Closing
+    })
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "Popover__caret",
     style: {
       zIndex: zIndex != null ? zIndex + 1 : undefined