@activecollab/components 2.0.444 → 2.0.446

package/dist/index.js

@@ -15482,6 +15482,16 @@
       setChildNode = _useState6[1];
     var elementRef = React.useRef(null);
     var isOpenAtLeastOnce = React.useRef(false);
+    var wasOpen = React.useRef(open);
+    var focusBeforeOpen = React.useRef(null);
+    var returnFocusTo = React.useRef(null);
+    var popperRef = React.useRef(null);
+
+    // Read on the render that opens the menu, before the focus lock moves the focus inside it.
+    if (open && !wasOpen.current && typeof document !== "undefined") {
+      focusBeforeOpen.current = document.activeElement;
+    }
+    wasOpen.current = open;
     React.useEffect(function () {
       setOpen(defaultOpen);
     }, [defaultOpen]);
@@ -15519,17 +15529,41 @@
       if (open) {
         isOpenAtLeastOnce.current = true;
       } else if (!open && isOpenAtLeastOnce.current) {
-        var _elementRef$current;
-        (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.focus();
+        var previous = focusBeforeOpen.current;
+        var returnTo = previous instanceof HTMLElement && previous.isConnected ? previous : elementRef.current;
+        returnFocusTo.current = returnTo;
+        returnTo === null || returnTo === void 0 || returnTo.focus();
         isOpenAtLeastOnce.current = false;
       }
     }, [open]);
+
+    // A fading menu is already closed. Its content can still reach for the focus, and would take it away
+    // with it when it unmounts, so the focus goes straight back to where the menu returned it.
+    React.useEffect(function () {
+      if (open || exited) {
+        return undefined;
+      }
+      var keepFocusOut = function keepFocusOut(event) {
+        var _popperRef$current;
+        if ((_popperRef$current = popperRef.current) !== null && _popperRef$current !== void 0 && _popperRef$current.contains(event.target)) {
+          var _returnFocusTo$curren;
+          (_returnFocusTo$curren = returnFocusTo.current) === null || _returnFocusTo$curren === void 0 || _returnFocusTo$curren.focus();
+        }
+      };
+      document.addEventListener("focusin", keepFocusOut, true);
+      return function () {
+        return document.removeEventListener("focusin", keepFocusOut, true);
+      };
+    }, [open, exited]);
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, target && /*#__PURE__*/React__default["default"].cloneElement(target, targetProps), open || !exited ? /*#__PURE__*/React__default["default"].createElement(Window, {
       onClose: handleClose,
       disableScrollLock: !handleScroll
-      // A closing menu hands the focus back at once, it does not hold it for the length of the fade.
+      // The menu returns the focus itself at once, so a late returnFocus cannot undo a caller's move.
       ,
-      disableFocusLock: disableFocusLock || !open,
+      disableFocusLock: disableFocusLock || !open
+      // A fading menu is already closed, so an escape pressed meanwhile belongs to the page behind it.
+      ,
+      disableCloseOnEsc: !open,
       style: {
         position: windowAbsolutelyPositioned ? "absolute" : "fixed"
       }
@@ -15539,6 +15573,7 @@
       tabIndex: -1,
       disableBackgroundColor: true
     }) : null, /*#__PURE__*/React__default["default"].createElement(Popper, {
+      ref: popperRef,
       anchorEl: childNode,
       open: childNode ? open : false,
       placement: position,
@@ -15561,7 +15596,10 @@
       }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$3, {
         className: classNames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
         $mode: mode,
-        onMouseDown: onMenuClick
+        onMouseDown: onMenuClick,
+        style: open ? undefined : {
+          pointerEvents: "none"
+        }
       }, /*#__PURE__*/React__default["default"].createElement(MenuContextProvider, {
         value: {
           open,
@@ -24847,6 +24885,8 @@
   });
   Textarea.displayName = "Textarea";
 
+  var SHEET_ENTER_MS = 400;
+  var SHEET_EXIT_MS = 200;
   var StyledSheetIcons = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSheetIcons",
     componentId: "sc-144eyxd-0"
@@ -24907,13 +24947,13 @@
     displayName: "Styles__StyledCssTransition",
     componentId: "sc-144eyxd-5"
   })(["", " ", " ", " ", ""], function (props) {
-    return props.$direction === "top" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity 200ms,transform 200ms;}"]);
+    return props.$direction === "top" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity ", "ms,transform ", "ms;}"], SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_EXIT_MS, SHEET_EXIT_MS);
   }, function (props) {
-    return props.$direction === "bottom" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity 200ms,transform 200ms;}"]);
+    return props.$direction === "bottom" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity ", "ms,transform ", "ms;}"], SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_EXIT_MS, SHEET_EXIT_MS);
   }, function (props) {
-    return props.$direction === "left" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity 200ms,transform 200ms;}"]);
+    return props.$direction === "left" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity ", "ms,transform ", "ms;}"], SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_EXIT_MS, SHEET_EXIT_MS);
   }, function (props) {
-    return props.$direction === "right" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]);
+    return props.$direction === "right" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity ", "ms,transform ", "ms;}"], SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_ENTER_MS, SHEET_EXIT_MS, SHEET_EXIT_MS);
   });
   StyledCssTransition.displayName = "StyledCssTransition";
   var StyledListSeparator = styled__default["default"](ListSeparator).withConfig({
@@ -24996,10 +25036,16 @@
       onClose: handleClose,
       disableFocusLock: disableFocusLock,
       disableScrollLock: disableScrollLock
-    }), open && /*#__PURE__*/React__default["default"].createElement(Overlay, {
+    }), /*#__PURE__*/React__default["default"].createElement(Fade, {
+      in: open,
+      timeout: open ? SHEET_ENTER_MS : SHEET_EXIT_MS
+    }, /*#__PURE__*/React__default["default"].createElement(Overlay, {
       onClick: handleBackgroundClick,
-      disableBackgroundColor: disableBackgroundColor
-    }), /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
+      disableBackgroundColor: disableBackgroundColor,
+      style: {
+        pointerEvents: open ? undefined : "none"
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
       className: classNames__default["default"]("c-sheet__wrapper", bodyClassName),
       style: bodyStyle,
       $position: position,
@@ -25007,7 +25053,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(StyledCssTransition, {
       appear: true,
       in: open,
-      timeout: 400,
+      timeout: SHEET_ENTER_MS,
       classNames: "c-sheet__animation",
       $direction: animation,
       onEnter: handleEnter,