@activecollab/components 2.0.442 → 2.0.444

package/dist/index.js

@@ -14659,23 +14659,105 @@
   });
   StyledMenuHeader.displayName = "StyledMenuHeader";
 
+  var listeners = new Set();
+  var stack = [];
+  var lastId = 0;
+  var notify = function notify() {
+    return listeners.forEach(function (listener) {
+      return listener();
+    });
+  };
+  var pushOverlay = function pushOverlay(zIndex) {
+    lastId += 1;
+    stack = [...stack, {
+      id: lastId,
+      zIndex
+    }];
+    notify();
+    return lastId;
+  };
+  var popOverlay = function popOverlay(id) {
+    stack = stack.filter(function (entry) {
+      return entry.id !== id;
+    });
+    notify();
+  };
+
+  // The overlay that covers the rest is the one on the highest layer. Mount order only breaks a tie,
+  // because a lazily loaded surface can mount after the one it sits under.
+  var isTopOverlay = function isTopOverlay(id) {
+    if (stack.length === 0) {
+      return true;
+    }
+    var top = stack.reduce(function (highest, entry) {
+      return entry.zIndex > highest.zIndex || entry.zIndex === highest.zIndex && entry.id > highest.id ? entry : highest;
+    });
+    return top.id === id;
+  };
+  var subscribeToOverlays = function subscribeToOverlays(listener) {
+    listeners.add(listener);
+    return function () {
+      listeners.delete(listener);
+    };
+  };
+
   var StyledOverlay = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOverlay",
     componentId: "sc-flnrpv-0"
-  })(["position:fixed;top:0;right:0;bottom:0;left:0;", ""], function (props) {
-    return !props.$disableBackgroundColor && styled.css(["background:var(--modal-background);backdrop-filter:blur(2px);"]);
+  })(["position:fixed;top:0;right:0;bottom:0;left:0;", " ", ""], function (props) {
+    return !props.$disableBackgroundColor && styled.css(["background:var(--modal-background);transform:translateZ(0);"]);
+  }, function (props) {
+    return props.$blurs && styled.css(["backdrop-filter:blur(2px);"]);
   });
   StyledOverlay.displayName = "StyledOverlay";
 
+  var LayerContext = /*#__PURE__*/React.createContext({});
+  var LayerContextProvider = LayerContext.Provider;
+  var LayerContextConsumer = LayerContext.Consumer;
+  var useLayerContext = function useLayerContext() {
+    return React.useContext(LayerContext);
+  };
+  var LayerContext$1 = LayerContext;
+
   var _excluded$1G = ["className", "disableBackgroundColor"];
+
+  // Chrome samples the backdrop of every blurred overlay on every frame, and a covered one buys
+  // nothing for that cost. Only the overlay on top keeps its blur.
+  var useKeepsBlur = function useKeepsBlur(blurs, zIndex) {
+    var _useState = React.useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isTop = _useState2[0],
+      setIsTop = _useState2[1];
+    React.useEffect(function () {
+      if (!blurs) {
+        return undefined;
+      }
+      var id = pushOverlay(zIndex);
+      var sync = function sync() {
+        return setIsTop(isTopOverlay(id));
+      };
+      sync();
+      var unsubscribe = subscribeToOverlays(sync);
+      return function () {
+        unsubscribe();
+        popOverlay(id);
+      };
+    }, [blurs, zIndex]);
+    return blurs && isTop;
+  };
   var Overlay = function Overlay(_ref) {
     var className = _ref.className,
       _ref$disableBackgroun = _ref.disableBackgroundColor,
       disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
       rest = _objectWithoutProperties(_ref, _excluded$1G);
+    var _useLayerContext = useLayerContext(),
+      _useLayerContext$zInd = _useLayerContext.zIndex,
+      zIndex = _useLayerContext$zInd === void 0 ? layers.skyscraper : _useLayerContext$zInd;
+    var keepsBlur = useKeepsBlur(!disableBackgroundColor, zIndex);
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
       className: classNames__default["default"]("c-overlay", className),
-      $disableBackgroundColor: disableBackgroundColor
+      $disableBackgroundColor: disableBackgroundColor,
+      $blurs: keepsBlur
     }, rest));
   };
   Overlay.displayName = "Overlay";
@@ -15300,14 +15382,6 @@
   };
   Portal.displayName = "Portal";
 
-  var LayerContext = /*#__PURE__*/React.createContext({});
-  var LayerContextProvider = LayerContext.Provider;
-  var LayerContextConsumer = LayerContext.Consumer;
-  var useLayerContext = function useLayerContext() {
-    return React.useContext(LayerContext);
-  };
-  var LayerContext$1 = LayerContext;
-
   var _excluded$1A = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
   var returnFocus = {
     preventScroll: true
@@ -16571,7 +16645,7 @@
   var StyledDialogContent = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDialogContent",
     componentId: "sc-jwpvgm-5"
-  })(["padding:20px 30px;flex:1 1 auto;min-height:0;overflow-y:", ";", " ", ""], function (props) {
+  })(["padding:20px 30px;flex:1 1 auto;min-height:0;overscroll-behavior:contain;overflow-y:", ";", " ", ""], function (props) {
     return props.$scroll ? "auto" : "visible";
   }, FontStyle, BoxSizingStyle);
   StyledDialogContent.displayName = "StyledDialogContent";
@@ -24782,7 +24856,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) {
@@ -24806,39 +24880,32 @@
     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"
-  })(["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;", ""], {
+    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;}"]);
   }, function (props) {
@@ -24851,17 +24918,17 @@
   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";
 
@@ -24937,39 +25004,7 @@
       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,
@@ -24977,7 +25012,22 @@
       $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,
@@ -24995,7 +25045,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";