@bug-on/m3-expressive 1.3.6 → 1.3.7

package/dist/buttons.mjs

@@ -3556,6 +3556,25 @@ function FABMenuItem({
     }
   );
 }
+function useClickOutside(ref, handler, enabled) {
+  const stableHandler = React16.useRef(handler);
+  React16.useEffect(() => {
+    stableHandler.current = handler;
+  });
+  React16.useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) return;
+      stableHandler.current();
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener, { passive: true });
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, enabled]);
+}
 function FABMenu({
   expanded,
   onToggle,
@@ -3571,9 +3590,18 @@ function FABMenu({
   const fabId = React16.useId();
   const menuId = React16.useId();
   const toggleRef = React16.useRef(null);
+  const containerRef = React16.useRef(null);
   const itemRefs = React16.useRef([]);
   const [focusedIndex, setFocusedIndex] = React16.useState(-1);
   const reversedItems = React16.useMemo(() => [...items].reverse(), [items]);
+  const handleOutsideClick = React16.useCallback(() => {
+    onToggle(false);
+  }, [onToggle]);
+  useClickOutside(
+    containerRef,
+    handleOutsideClick,
+    expanded && closeOnBackdropClick
+  );
   const focusItem = React16.useCallback((index) => {
     var _a;
     const clampedIndex = Math.max(
@@ -3631,97 +3659,88 @@ function FABMenu({
     },
     [expanded, focusedIndex, items.length, focusItem, onToggle]
   );
-  return /* @__PURE__ */ jsxs(LazyMotion, { features: domMax, strict: true, children: [
-    expanded && closeOnBackdropClick && /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-hidden": "true",
-        className: "fixed inset-0 z-40",
-        onClick: () => onToggle(false)
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "group",
-        "aria-label": ariaLabel != null ? ariaLabel : "Actions menu",
-        className: cn(
-          "fixed z-50 flex flex-col gap-2",
-          ALIGNMENT_CONTAINER_CLASSES[alignment],
-          "*:shrink-0",
-          className
-        ),
-        onKeyDown: handleMenuKeyDown,
-        children: [
-          /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              id: menuId,
-              role: "menu",
-              "aria-labelledby": fabId,
-              "aria-orientation": "vertical",
-              variants: MENU_CONTAINER_VARIANTS,
-              initial: "closed",
-              animate: "open",
-              exit: "closed",
-              className: cn(
-                "flex flex-col-reverse gap-2",
-                ALIGNMENT_ITEMS_CLASSES[alignment]
-              ),
-              children: reversedItems.map((item, reversedIndex) => {
-                var _a;
-                const originalIndex = items.length - 1 - reversedIndex;
-                return /* @__PURE__ */ jsx(
-                  m.div,
-                  {
-                    variants: MENU_ITEM_VARIANTS,
-                    style: {
-                      transformOrigin: (_a = ALIGNMENT_TRANSFORM_ORIGIN[alignment]) != null ? _a : "right"
-                    },
-                    ref: (el) => {
-                      itemRefs.current[originalIndex] = el;
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      FABMenuItem,
-                      {
-                        icon: item.icon,
-                        label: item.label,
-                        onClick: () => {
-                          if (!item.disabled) {
-                            item.onClick();
-                            onToggle(false);
-                          }
-                        },
-                        disabled: item.disabled,
-                        colorVariant,
-                        className: item.className,
-                        tabIndex: expanded ? 0 : -1
-                      }
-                    )
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: "group",
+      "aria-label": ariaLabel != null ? ariaLabel : "Actions menu",
+      className: cn(
+        "fixed z-50 flex flex-col gap-2",
+        ALIGNMENT_CONTAINER_CLASSES[alignment],
+        "*:shrink-0",
+        className
+      ),
+      onKeyDown: handleMenuKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && /* @__PURE__ */ jsx(
+          m.div,
+          {
+            id: menuId,
+            role: "menu",
+            "aria-labelledby": fabId,
+            "aria-orientation": "vertical",
+            variants: MENU_CONTAINER_VARIANTS,
+            initial: "closed",
+            animate: "open",
+            exit: "closed",
+            className: cn(
+              "flex flex-col-reverse gap-2",
+              ALIGNMENT_ITEMS_CLASSES[alignment]
+            ),
+            children: reversedItems.map((item, reversedIndex) => {
+              var _a;
+              const originalIndex = items.length - 1 - reversedIndex;
+              return /* @__PURE__ */ jsx(
+                m.div,
+                {
+                  variants: MENU_ITEM_VARIANTS,
+                  style: {
+                    transformOrigin: (_a = ALIGNMENT_TRANSFORM_ORIGIN[alignment]) != null ? _a : "right"
                   },
-                  item.id
-                );
-              })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            ToggleFAB,
-            {
-              ref: toggleRef,
-              id: fabId,
-              expanded,
-              onToggle,
-              colorVariant,
-              size,
-              "aria-label": ariaLabel != null ? ariaLabel : expanded ? "Close actions menu" : "Open actions menu",
-              "aria-controls": menuId,
-              icon: defaultFabIcon
-            }
-          )
-        ]
-      }
-    )
-  ] });
+                  ref: (el) => {
+                    itemRefs.current[originalIndex] = el;
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    FABMenuItem,
+                    {
+                      icon: item.icon,
+                      label: item.label,
+                      onClick: () => {
+                        if (!item.disabled) {
+                          item.onClick();
+                          onToggle(false);
+                        }
+                      },
+                      disabled: item.disabled,
+                      colorVariant,
+                      className: item.className,
+                      tabIndex: expanded ? 0 : -1
+                    }
+                  )
+                },
+                item.id
+              );
+            })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ToggleFAB,
+          {
+            ref: toggleRef,
+            id: fabId,
+            expanded,
+            onToggle,
+            colorVariant,
+            size,
+            "aria-label": ariaLabel != null ? ariaLabel : expanded ? "Close actions menu" : "Open actions menu",
+            "aria-controls": menuId,
+            icon: defaultFabIcon
+          }
+        )
+      ]
+    }
+  ) });
 }
 var SIZE_HEIGHT_STYLES = {
   xs: "h-8",
@@ -3738,7 +3757,7 @@ var WIDTH_SIZE_STYLES = {
   },
   sm: {
     default: "w-10",
-    narrow: "w-12",
+    narrow: "w-10",
     wide: "w-[3.25rem]"
   },
   md: {