@moda/om 15.11.0 → 15.11.4

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.4](https://github.com/ModaOperandi/om/compare/v15.11.3...v15.11.4) (2021-12-14)
+
+
+### Bug Fixes
+
+* **popover:** fixes error and clears out code[refactor] ([#2269](https://github.com/ModaOperandi/om/issues/2269)) ([974a3c6](https://github.com/ModaOperandi/om/commit/974a3c6f5355b38f9a2707e9c41a899fba1b17a6))
+
+## [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)
 
 

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

@@ -7,6 +7,7 @@ export declare type PopoverProps = React.HTMLAttributes<HTMLDivElement> & {
     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

@@ -11279,11 +11279,12 @@ var Paginator = function Paginator(_ref) {
   })));
 };
 
-var _excluded$b = ["className", "children", "content", "open", "anchor", "zIndex", "autoPreview"];
+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";
@@ -11295,17 +11296,22 @@ var Popover = function Popover(_ref) {
   var className = _ref.className,
       children = _ref.children,
       content = _ref.content,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? false : _ref$open,
+      open = _ref.open,
       _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(function () {
-    if (open) {
+    if (open && smoothTransitioning) {
+      return Mode.Opening;
+    }
+
+    if (open && !smoothTransitioning) {
       return Mode.Open;
     }
 
@@ -11320,19 +11326,24 @@ var Popover = function Popover(_ref) {
       setMode = _useState2[1];
 
   var timeout = React$2.useRef(null);
+  var handleOpen = React$2.useCallback(function () {
+    if (smoothTransitioning) setMode(Mode.Opening);
+    if (!smoothTransitioning) setMode(Mode.Open);
+  }, [smoothTransitioning]);
+  var handleClose = React$2.useCallback(function () {
+    if (smoothTransitioning) setMode(Mode.Closing);
+    if (!smoothTransitioning) setMode(Mode.Closed);
+  }, [smoothTransitioning]);
   var handleMouseEnter = React$2.useCallback(function () {
     if (!open) {
       timeout.current && clearTimeout(timeout.current);
-      setMode(Mode.Open);
+      handleOpen();
     }
-  }, [open]);
+  }, [handleOpen, open]);
   var handleMouseLeave = React$2.useCallback(function () {
-    if (!open) {
-      timeout.current = setTimeout(function () {
-        return setMode(Mode.Closing);
-      }, POPOVER_MOUSEOUT_DELAY_MS);
-    }
-  }, [open]);
+    if (open) return;
+    timeout.current = setTimeout(handleClose, POPOVER_MOUSEOUT_DELAY_MS);
+  }, [handleClose, open]);
   React$2.useEffect(function () {
     if (mode !== Mode.Closing) return;
     var closingTimeout = setTimeout(function () {
@@ -11351,16 +11362,27 @@ var Popover = function Popover(_ref) {
       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 () {
     if (mode !== Mode.AutoOpen) return;
-    var stayingTimeout = setTimeout(function () {
-      return setMode(Mode.Closing);
-    }, 5000);
+    var stayingTimeout = setTimeout(handleClose, 5000);
     return function () {
       return clearTimeout(stayingTimeout);
     };
-  }, [mode]);
-  var isOpen = mode === Mode.AutoOpen || mode === Mode.Open || mode === Mode.Closing;
+  }, [handleClose, mode, smoothTransitioning]);
+  React$2.useEffect(function () {
+    if (open === undefined) return;
+    open ? handleOpen() : handleClose();
+  }, [handleClose, handleOpen, open]);
+  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,
@@ -11369,6 +11391,7 @@ var Popover = function Popover(_ref) {
     className: "Popover__trigger"
   }, 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", {