@bug-on/m3-expressive 1.3.6 → 1.3.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bug-on/m3-expressive
 
+## 1.3.7
+
+### Patch Changes
+
+- ba83a90: Fix FAB outside-close and card morphing
+
 ## 1.3.6
 
 ### Patch Changes

package/dist/buttons.d.mts

@@ -1,7 +1,7 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-gAz6OAIi.mjs';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-CpT8iPpr.mjs';
 import { Transition } from 'motion/react';
-import { b as MD3Size } from './md3-BQhRygSi.mjs';
-export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CxyJv7UV.mjs';
+import { d as MD3Size } from './md3-xBl4wgND.mjs';
+export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-BpX9_fwZ.mjs';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import 'react';
 import 'react/jsx-runtime';

package/dist/buttons.d.ts

@@ -1,7 +1,7 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-CGzk7KcG.js';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-BpyIlOdn.js';
 import { Transition } from 'motion/react';
-import { b as MD3Size } from './md3-BQhRygSi.js';
-export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-Di8VX6ou.js';
+import { d as MD3Size } from './md3-xBl4wgND.js';
+export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-DFXp9hze.js';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import 'react';
 import 'react/jsx-runtime';

package/dist/buttons.js

@@ -3578,6 +3578,25 @@ function FABMenuItem({
     }
   );
 }
+function useClickOutside(ref, handler, enabled) {
+  const stableHandler = React16__namespace.useRef(handler);
+  React16__namespace.useEffect(() => {
+    stableHandler.current = handler;
+  });
+  React16__namespace.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,
@@ -3593,9 +3612,18 @@ function FABMenu({
   const fabId = React16__namespace.useId();
   const menuId = React16__namespace.useId();
   const toggleRef = React16__namespace.useRef(null);
+  const containerRef = React16__namespace.useRef(null);
   const itemRefs = React16__namespace.useRef([]);
   const [focusedIndex, setFocusedIndex] = React16__namespace.useState(-1);
   const reversedItems = React16__namespace.useMemo(() => [...items].reverse(), [items]);
+  const handleOutsideClick = React16__namespace.useCallback(() => {
+    onToggle(false);
+  }, [onToggle]);
+  useClickOutside(
+    containerRef,
+    handleOutsideClick,
+    expanded && closeOnBackdropClick
+  );
   const focusItem = React16__namespace.useCallback((index) => {
     var _a;
     const clampedIndex = Math.max(
@@ -3653,97 +3681,88 @@ function FABMenu({
     },
     [expanded, focusedIndex, items.length, focusItem, onToggle]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.LazyMotion, { features: react.domMax, strict: true, children: [
-    expanded && closeOnBackdropClick && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "aria-hidden": "true",
-        className: "fixed inset-0 z-40",
-        onClick: () => onToggle(false)
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.AnimatePresence, { children: expanded && /* @__PURE__ */ jsxRuntime.jsx(
-            react.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__ */ jsxRuntime.jsx(
-                  react.m.div,
-                  {
-                    variants: MENU_ITEM_VARIANTS,
-                    style: {
-                      transformOrigin: (_a = ALIGNMENT_TRANSFORM_ORIGIN[alignment]) != null ? _a : "right"
-                    },
-                    ref: (el) => {
-                      itemRefs.current[originalIndex] = el;
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.AnimatePresence, { children: expanded && /* @__PURE__ */ jsxRuntime.jsx(
+          react.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__ */ jsxRuntime.jsx(
+                react.m.div,
+                {
+                  variants: MENU_ITEM_VARIANTS,
+                  style: {
+                    transformOrigin: (_a = ALIGNMENT_TRANSFORM_ORIGIN[alignment]) != null ? _a : "right"
                   },
-                  item.id
-                );
-              })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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",
@@ -3760,7 +3779,7 @@ var WIDTH_SIZE_STYLES = {
   },
   sm: {
     default: "w-10",
-    narrow: "w-12",
+    narrow: "w-10",
     wide: "w-[3.25rem]"
   },
   md: {