@activecollab/components 2.0.455 → 2.0.457

package/dist/index.js

@@ -168,25 +168,48 @@
 
   var FontStyle = styled.css(["font-family:-apple-system,BlinkMacSystemFont,\"Inter\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"]);
 
+  // The hover look of each variant. A trigger keeps it while the menu it opened is open.
+  var hoverStyle$1 = function hoverStyle(variant) {
+    switch (variant) {
+      case "primary":
+      case "contained":
+        return styled.css(["box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);"]);
+      case "secondary":
+      case "outlined":
+        return styled.css(["border-color:var(--color-primary);color:var(--color-primary);"]);
+      case "dark transparent":
+        return styled.css(["background-color:rgba(0,0,0,0.85);"]);
+      case "tertiary":
+      case "text colored":
+        return styled.css(["background-color:var(--color-primary-200);"]);
+      case "option":
+      case "text gray":
+        return styled.css(["background-color:var(--color-theme-300);color:var(--color-theme-900);"]);
+      case "circle raised":
+        return styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);"]);
+      default:
+        return undefined;
+    }
+  };
   var StyledButton$2 = styled__default["default"].button.withConfig({
     displayName: "Styles__StyledButton",
     componentId: "sc-vi1kcr-0"
-  })(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:288px;--c-btn-text-inset:8px;--c-btn-icon-inset:8px;--c-btn-icon-tight-inset:6px;--c-btn-inset:0px;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
+  })(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:288px;--c-btn-text-inset:8px;--c-btn-icon-inset:8px;--c-btn-icon-tight-inset:6px;--c-btn-inset:0px;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " &[aria-haspopup][aria-expanded=\"true\"]{", "}"], FontStyle, BoxSizingStyle, function (props) {
     return props.size === "small" && styled.css(["height:24px;"]);
   }, function (props) {
     return props.size === "big" && styled.css(["height:40px;"]);
   }, function (props) {
-    return (props.variant === "primary" || props.variant === "contained") && styled.css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
+    return (props.variant === "primary" || props.variant === "contained") && styled.css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{", "}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"], hoverStyle$1(props.variant));
   }, function (props) {
-    return (props.variant === "secondary" || props.variant === "outlined") && styled.css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
+    return (props.variant === "secondary" || props.variant === "outlined") && styled.css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{", "}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], hoverStyle$1(props.variant));
   }, function (props) {
-    return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
+    return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus-visible{", "}&:active{background-color:var(--only-black);}"], hoverStyle$1(props.variant));
   }, function (props) {
-    return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 var(--c-btn-text-inset);--c-btn-inset:var(--c-btn-text-inset);background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
+    return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 var(--c-btn-text-inset);--c-btn-inset:var(--c-btn-text-inset);background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus-visible{", "}&:active{background-color:var(--color-primary-300);}"], hoverStyle$1(props.variant));
   }, function (props) {
-    return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 var(--c-btn-text-inset);--c-btn-inset:var(--c-btn-text-inset);background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
+    return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 var(--c-btn-text-inset);--c-btn-inset:var(--c-btn-text-inset);background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus-visible{", "}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"], hoverStyle$1(props.variant));
   }, function (props) {
-    return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
+    return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus-visible{", "}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"], hoverStyle$1(props.variant));
   }, function (props) {
     return props.iconOnly && styled.css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;--c-btn-inset:0px;", " ", ";", " ", ""], (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray") && props.size !== "small" && props.size !== "big" && styled.css(["--c-btn-inset:", ";"], props.$inset === "tight" ? "var(--c-btn-icon-tight-inset)" : "var(--c-btn-icon-inset)"), (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && styled.css(["width:24px;"]), props.size === "big" && styled.css(["width:40px;"]));
   }, function (props) {
@@ -195,6 +218,8 @@
     return (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && styled.css([".c-btn__elements__element:first-child svg{margin-left:-4px;}.c-btn__elements__element:last-child svg{margin-right:-4px;}", " ", ""], props.size === "small" && styled.css(["border-radius:var(--ac-br-4);"]), props.size === "big" && styled.css(["border-radius:var(--ac-br-8);"]));
   }, function (props) {
     return props.active && styled.css(["", " ", " ", " ", " ", " ", ""], (props.variant === "primary" || props.variant === "contained") && styled.css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && styled.css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && styled.css(["background-color:var(--only-black);"]), props.variant === "circle raised" && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && styled.css(["color:var(--color-primary);&:hover,&:focus-visible{color:var(--color-primary);}", ""], props.children instanceof Array && styled.css(["background-color:var(--color-theme-300);"])));
+  }, function (props) {
+    return hoverStyle$1(props.variant);
   });
   StyledButton$2.displayName = "StyledButton";
   var StyledButtonElements = styled__default["default"].span.withConfig({
@@ -14822,8 +14847,6 @@
     displayName: "Styles__StyledMenu",
     componentId: "sc-8fhkp-0"
   })(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", " ", ""], {
-    "marginTop": "0.25rem",
-    "marginBottom": "0.25rem",
     "overflow": "auto",
     "borderColor": "var(--border-primary)",
     "backgroundColor": "var(--page-paper-main)"
@@ -15647,30 +15670,102 @@
   // source: https://twitter.com/mattpocockuk/status/1671908303918473217/photo/1
   // eslint-disable-next-line @typescript-eslint/ban-types
 
-  var Menu = function Menu(_ref) {
-    var children = _ref.children,
-      _ref$disableFocusLock = _ref.disableFocusLock,
-      disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
-      onMenuClick = _ref.onMenuClick,
-      _ref$handleScroll = _ref.handleScroll,
-      handleScroll = _ref$handleScroll === void 0 ? true : _ref$handleScroll,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "normal" : _ref$mode,
-      _ref$open = _ref.open,
-      defaultOpen = _ref$open === void 0 ? false : _ref$open,
-      onOpen = _ref.onOpen,
-      onClose = _ref.onClose,
-      onBeforeClose = _ref.onBeforeClose,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? "bottom-start" : _ref$position,
-      target = _ref.target,
-      className = _ref.className,
-      menuClassName = _ref.menuClassName,
-      popperClassName = _ref.popperClassName,
-      backgroundElementClass = _ref.backgroundElementClass,
-      _ref$windowAbsolutely = _ref.windowAbsolutelyPositioned,
-      windowAbsolutelyPositioned = _ref$windowAbsolutely === void 0 ? false : _ref$windowAbsolutely,
-      onPopperOpen = _ref.onPopperOpen;
+  var isFocusVisible = function isFocusVisible(element) {
+    try {
+      return Boolean(element === null || element === void 0 ? void 0 : element.matches(":focus-visible"));
+    } catch (_unused) {
+      return false;
+    }
+  };
+  var TRIGGER = 'button, [role="button"], a[href]';
+
+  // A target can wrap its button, as a div around a Tooltip or a CounterButton does.
+  var triggerOf = function triggerOf(node) {
+    var _node$querySelector;
+    return node.matches(TRIGGER) ? node : (_node$querySelector = node.querySelector(TRIGGER)) !== null && _node$querySelector !== void 0 ? _node$querySelector : node;
+  };
+  var visibleBoxOf = function visibleBoxOf(node) {
+    var rects = [node, ...Array.from(node.children)].map(function (element) {
+      return element.getBoundingClientRect();
+    });
+    return {
+      left: Math.min(...rects.map(function (rect) {
+        return rect.left;
+      })),
+      right: Math.max(...rects.map(function (rect) {
+        return rect.right;
+      })),
+      top: Math.min(...rects.map(function (rect) {
+        return rect.top;
+      })),
+      bottom: Math.max(...rects.map(function (rect) {
+        return rect.bottom;
+      }))
+    };
+  };
+
+  // A control group pulls a wrapped button out of its wrapper by negative margins, so the menu lines up with the button.
+  var offsetToVisibleBox = function offsetToVisibleBox(node) {
+    return {
+      name: "offset",
+      options: {
+        offset: function offset(_ref) {
+          var placement = _ref.placement;
+          if (triggerOf(node) === node) {
+            return [0, 0];
+          }
+          var wrapper = node.getBoundingClientRect();
+          var box = visibleBoxOf(node);
+          var _placement$split = placement.split("-"),
+            _placement$split2 = _slicedToArray(_placement$split, 2),
+            side = _placement$split2[0],
+            align = _placement$split2[1];
+          var vertical = side === "top" || side === "bottom";
+          var start = vertical ? "left" : "top";
+          var end = vertical ? "right" : "bottom";
+          var skidding = align === "start" ? box[start] - wrapper[start] : align === "end" ? box[end] - wrapper[end] : (box[start] + box[end] - wrapper[start] - wrapper[end]) / 2;
+          var distance = {
+            bottom: box.bottom - wrapper.bottom,
+            top: wrapper.top - box.top,
+            right: box.right - wrapper.right,
+            left: wrapper.left - box.left
+          }[side];
+          return [skidding, distance !== null && distance !== void 0 ? distance : 0];
+        }
+      }
+    };
+  };
+
+  // A menu opened with the pointer hands the focus back without a focus ring, so its trigger does not stay lit.
+  var returnFocusOptions = function returnFocusOptions(visible) {
+    return {
+      focusVisible: visible
+    };
+  };
+  var Menu = function Menu(_ref2) {
+    var children = _ref2.children,
+      _ref2$disableFocusLoc = _ref2.disableFocusLock,
+      disableFocusLock = _ref2$disableFocusLoc === void 0 ? false : _ref2$disableFocusLoc,
+      onMenuClick = _ref2.onMenuClick,
+      _ref2$handleScroll = _ref2.handleScroll,
+      handleScroll = _ref2$handleScroll === void 0 ? true : _ref2$handleScroll,
+      _ref2$mode = _ref2.mode,
+      mode = _ref2$mode === void 0 ? "normal" : _ref2$mode,
+      _ref2$open = _ref2.open,
+      defaultOpen = _ref2$open === void 0 ? false : _ref2$open,
+      onOpen = _ref2.onOpen,
+      onClose = _ref2.onClose,
+      onBeforeClose = _ref2.onBeforeClose,
+      _ref2$position = _ref2.position,
+      position = _ref2$position === void 0 ? "bottom-start" : _ref2$position,
+      target = _ref2.target,
+      className = _ref2.className,
+      menuClassName = _ref2.menuClassName,
+      popperClassName = _ref2.popperClassName,
+      backgroundElementClass = _ref2.backgroundElementClass,
+      _ref2$windowAbsolutel = _ref2.windowAbsolutelyPositioned,
+      windowAbsolutelyPositioned = _ref2$windowAbsolutel === void 0 ? false : _ref2$windowAbsolutel,
+      onPopperOpen = _ref2.onPopperOpen;
     var _useState = React.useState(defaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -15687,12 +15782,14 @@
     var isOpenAtLeastOnce = React.useRef(false);
     var wasOpen = React.useRef(open);
     var focusBeforeOpen = React.useRef(null);
+    var focusWasVisible = React.useRef(false);
     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;
+      focusWasVisible.current = isFocusVisible(document.activeElement);
     }
     wasOpen.current = open;
     React.useEffect(function () {
@@ -15703,8 +15800,42 @@
         setExited(false);
       }
     }, [open]);
+
+    // Set on the node itself, so the trigger gets it also through a wrapper such as Tooltip.
+    var expandedTrigger = React.useRef(null);
+    var checkedTrigger = React.useRef(null);
+    var triggerOwnsExpanded = React.useRef(false);
+    React.useEffect(function () {
+      var node = elementRef.current;
+      if (!node) {
+        return;
+      }
+      var trigger = triggerOf(node);
+
+      // A trigger that renders its own aria-expanded keeps it, so the menu never clears its "false".
+      if (checkedTrigger.current !== trigger) {
+        checkedTrigger.current = trigger;
+        triggerOwnsExpanded.current = trigger.hasAttribute("aria-expanded");
+      }
+      if (!trigger.hasAttribute("aria-haspopup")) {
+        trigger.setAttribute("aria-haspopup", "true");
+      }
+      if (triggerOwnsExpanded.current) {
+        return;
+      }
+      if (open) {
+        trigger.setAttribute("aria-expanded", "true");
+        expandedTrigger.current = trigger;
+      } else if (expandedTrigger.current) {
+        expandedTrigger.current.removeAttribute("aria-expanded");
+        expandedTrigger.current = null;
+      }
+    }, [open, childNode]);
     var handleRefRef = useForkRef(target ? target.ref : undefined, setChildNode);
     var handleRef = useForkRef(handleRefRef, elementRef);
+    var popperModifiers = React.useMemo(function () {
+      return childNode instanceof HTMLElement ? [offsetToVisibleBox(childNode)] : undefined;
+    }, [childNode]);
     var handleOpen = React.useCallback(function (event) {
       var _target$props;
       event === null || event === void 0 || event.preventDefault();
@@ -15735,7 +15866,7 @@
         var previous = focusBeforeOpen.current;
         var returnTo = previous instanceof HTMLElement && previous.isConnected ? previous : elementRef.current;
         returnFocusTo.current = returnTo;
-        returnTo === null || returnTo === void 0 || returnTo.focus();
+        returnTo === null || returnTo === void 0 || returnTo.focus(returnFocusOptions(focusWasVisible.current));
         isOpenAtLeastOnce.current = false;
       }
     }, [open]);
@@ -15750,7 +15881,7 @@
         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();
+          (_returnFocusTo$curren = returnFocusTo.current) === null || _returnFocusTo$curren === void 0 || _returnFocusTo$curren.focus(returnFocusOptions(focusWasVisible.current));
         }
       };
       document.addEventListener("focusin", keepFocusOut, true);
@@ -15783,10 +15914,11 @@
       className: popperClassName,
       tabIndex: -1,
       afterWrite: onPopperOpen,
+      modifiers: popperModifiers,
       transition: true
-    }, function (_ref2) {
-      var placement = _ref2.placement,
-        transitionProps = _ref2.transitionProps;
+    }, function (_ref3) {
+      var placement = _ref3.placement,
+        transitionProps = _ref3.transitionProps;
       return /*#__PURE__*/React__default["default"].createElement(Grow, {
         placement: placement,
         in: transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.in,
@@ -16335,7 +16467,7 @@
     displayName: "Styles__StyledCounterButton",
     componentId: "sc-1ecrcba-1"
   })(["", " ", " ", " ", ""], function (props) {
-    return props.$active && !props.disabled && styled.css(["padding:0 8px;svg{fill:var(--color-primary);}&:hover{background:var(--color-primary-300);}"]);
+    return props.$active && !props.disabled && styled.css(["padding:0 8px;svg{fill:var(--color-primary);}&:hover,&[aria-haspopup][aria-expanded=\"true\"]{background:var(--color-primary-300);}"]);
   }, function (props) {
     return props.$selected && styled.css(["border-top-right-radius:0;border-bottom-right-radius:0;background-color:var(--color-primary-200);"]);
   }, function (props) {
@@ -16352,9 +16484,9 @@
   var StyledCounterButtonLabel = styled__default["default"](Body2).withConfig({
     displayName: "Styles__StyledCounterButtonLabel",
     componentId: "sc-1ecrcba-3"
-  })(["", " @media (max-width:768px){display:none;}", ":hover &&{", "}", ""], {
+  })(["", " @media (max-width:768px){display:none;}", ":hover &&,", "[aria-haspopup][aria-expanded=\"true\"] &&{", "}", ""], {
     "pointerEvents": "none"
-  }, StyledCounterButton, function (props) {
+  }, StyledCounterButton, StyledCounterButton, function (props) {
     return !props.$active && styled.css(["color:var(--color-theme-900);"]);
   }, function (props) {
     return props.$active && styled.css(["color:var(--color-primary);"]);
@@ -29014,7 +29146,6 @@
       onClose: handleClose,
       position: position,
       target: /*#__PURE__*/React__default["default"].createElement(CounterButton, {
-        active: open,
         label: label,
         icon: icon,
         counter: count,