@activecollab/components 2.0.443 → 2.0.445

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"
@@ -24856,7 +24896,7 @@
     displayName: "Styles__StyledSheetWrapper",
     componentId: "sc-144eyxd-1"
   })(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, function (props) {
-    return props.$mode === "stretch" ? styled.css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : styled.css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons);
+    return props.$mode === "stretch" ? styled.css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;}span{top:8px;}}"], StyledSheetIcons) : styled.css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;}span{top:-48px;right:8px;}}"], StyledSheetIcons);
   }, function (props) {
     return props.$mode === "stretch" && styled.css(["@media (max-width:640px){width:100%;height:100%;}"]);
   }, function (props) {
@@ -24880,62 +24920,55 @@
     return props.$mode === "stretch" && props.$position === "left" && styled.css(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons);
   });
   StyledSheetWrapper.displayName = "StyledSheetWrapper";
+  var StyledSheetSurface = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledSheetSurface",
+    componentId: "sc-144eyxd-2"
+  })(["display:flex;flex-direction:inherit;flex:1 1 auto;min-width:0;min-height:0;"]);
+  StyledSheetSurface.displayName = "StyledSheetSurface";
   var StyledSheetWrapperPaper = styled__default["default"].div.attrs(function (props) {
     return {
       className: props.paperClass
     };
   }).withConfig({
     displayName: "Styles__StyledSheetWrapperPaper",
-    componentId: "sc-144eyxd-2"
+    componentId: "sc-144eyxd-3"
   })(["background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:6px;overflow:auto;animation:0.3s linear ease-out;transform:translateZ(0);contain:paint;overscroll-behavior:contain;", ""], {
     "flex": "1 1 auto"
   });
   StyledSheetWrapperPaper.displayName = "StyledSheetWrapperPaper";
-  var StyledSheetControlsTop = styled.keyframes(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
-  var StyledSheetControlsBottom = styled.keyframes(["0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-200px);}"]);
-  var StyledSheetControlsCenterIn = styled.keyframes(["0%{transform:translateY(-150px);opacity:0;}100%{transform:translateY(0);opacity:1;}"]);
-  var StyledSheetControlsCenterOut = styled.keyframes(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
   var StyledAnimatedSpan = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledAnimatedSpan",
-    componentId: "sc-144eyxd-3"
-  })(["&:hover svg{fill:var(--color-primary);}", " ", " ", " ", " ", ""], function (props) {
-    return props.$state === "entering" && styled.css(["opacity:1;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, "".concat(props.$durationIn, "s"), "".concat(props.$durationIn, "s")) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, "".concat(props.$maxDurationIn, "s")));
-  }, function (props) {
-    return props.$state === "entered" && styled.css(["opacity:1;"]);
-  }, function (props) {
+    componentId: "sc-144eyxd-4"
+  })(["&:hover svg{fill:var(--color-primary);}", ""], function (props) {
     return props.$disabled && styled.css(["pointer-events:none;svg{opacity:0.5;}"]);
-  }, function (props) {
-    return props.$state === "exiting" && styled.css(["opacity:0;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, "".concat(props.$durationOut, "s"), "".concat(props.$durationOut, "s")) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, "".concat(props.$maxDurationOut, "s")));
-  }, function (props) {
-    return props.$state === "exited" && styled.css(["opacity:0;"]);
   });
   StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
   var StyledCssTransition = styled__default["default"](reactTransitionGroup.CSSTransition).withConfig({
     displayName: "Styles__StyledCssTransition",
-    componentId: "sc-144eyxd-4"
+    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({
     displayName: "Styles__StyledListSeparator",
-    componentId: "sc-144eyxd-5"
+    componentId: "sc-144eyxd-6"
   })(["margin:0;"]);
   StyledListSeparator.displayName = "StyledListSeparator";
   var StyledIconsWrapperSmall = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledIconsWrapperSmall",
-    componentId: "sc-144eyxd-6"
+    componentId: "sc-144eyxd-7"
   })(["height:40px;display:flex;gap:8px;padding-left:16px;padding-right:16px;align-items:center;place-content:end;flex-direction:row-reverse;"]);
   StyledIconsWrapperSmall.displayName = "StyledIconsWrapperSmall";
   var StyledHeader$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledHeader",
-    componentId: "sc-144eyxd-7"
+    componentId: "sc-144eyxd-8"
   })(["@media (min-width:640px){display:none;}"]);
   StyledHeader$1.displayName = "StyledHeader";
 
@@ -25003,55 +25036,44 @@
       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,
       $mode: mode
-    }, controls.length > 0 && /*#__PURE__*/React__default["default"].createElement(StyledSheetIcons, null, controls.map(function (_ref2, index) {
-      var IconComponent = _ref2.icon,
-        tooltip = _ref2.tooltip,
-        onClick = _ref2.onClick,
-        disabled = _ref2.disabled,
-        className = _ref2.className;
-      var maxDurationIn = 4;
-      var maxDurationOut = 2;
-      var control = index + 1;
-      var durationOut = Math.max(0, maxDurationOut - control);
-      var durationIn = Math.min(control, maxDurationIn);
-      return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
-        appear: true,
-        in: open,
-        timeout: maxDurationIn * 100,
-        key: "c-sheet-control-".concat(index)
-      }, function (state) {
-        return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
-          title: tooltip,
-          disable: !tooltip || disabled
-        }, /*#__PURE__*/React__default["default"].createElement(StyledAnimatedSpan, {
-          onClick: onClick,
-          $disabled: disabled,
-          $mode: mode,
-          $state: state,
-          className: className,
-          $maxDurationIn: maxDurationIn / 10,
-          $maxDurationOut: maxDurationOut / 10,
-          $durationOut: durationOut / 10,
-          $durationIn: durationIn / 10
-        }, IconComponent));
-      });
-    })), /*#__PURE__*/React__default["default"].createElement(StyledCssTransition, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledCssTransition, {
       appear: true,
       in: open,
-      timeout: 400,
+      timeout: SHEET_ENTER_MS,
       classNames: "c-sheet__animation",
       $direction: animation,
       onEnter: handleEnter,
       onExited: handleExited
-    }, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapperPaper, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledSheetSurface, null, controls.length > 0 && /*#__PURE__*/React__default["default"].createElement(StyledSheetIcons, null, controls.map(function (_ref2, index) {
+      var IconComponent = _ref2.icon,
+        tooltip = _ref2.tooltip,
+        onClick = _ref2.onClick,
+        disabled = _ref2.disabled,
+        className = _ref2.className;
+      return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+        title: tooltip,
+        disable: !tooltip || disabled,
+        key: "c-sheet-control-".concat(index)
+      }, /*#__PURE__*/React__default["default"].createElement(StyledAnimatedSpan, {
+        onClick: onClick,
+        $disabled: disabled,
+        className: className
+      }, IconComponent));
+    })), /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapperPaper, {
       paperClass: "c-sheet__wrapper__paper"
     }, controls.length > 0 && /*#__PURE__*/React__default["default"].createElement(StyledHeader$1, null, /*#__PURE__*/React__default["default"].createElement(StyledIconsWrapperSmall, null, controls.map(function (_ref3, index) {
       var IconComponent = _ref3.icon,
@@ -25069,7 +25091,7 @@
         className: className,
         variant: "text gray"
       }, IconComponent));
-    })), /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, null)), children))));
+    })), /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, null)), children)))));
   });
   Sheet.displayName = "Sheet";