@butternutbox/pawprint-native 1.2.0 → 1.3.0

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.cjs     563.58 KB
+CJS dist/index.cjs     564.54 KB
 CJS dist/index.cjs.map 1.10 MB
-CJS ⚡️ Build success in 6123ms
-ESM dist/index.js     532.63 KB
+CJS ⚡️ Build success in 6535ms
+ESM dist/index.js     533.47 KB
 ESM dist/index.js.map 1.10 MB
-ESM ⚡️ Build success in 6123ms
-DTS ⚡️ Build success in 15381ms
-DTS dist/index.d.cts 108.40 KB
-DTS dist/index.d.ts  108.40 KB
+ESM ⚡️ Build success in 6536ms
+DTS ⚡️ Build success in 17552ms
+DTS dist/index.d.cts 111.87 KB
+DTS dist/index.d.ts  111.87 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @butternutbox/pawprint-native
 
+## 1.3.0
+
+### Minor Changes
+
+- 9449ba4: Refactor Menu component to include anchor to the trigger, improve stylings and API
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -10658,46 +10658,37 @@ var Tooltip = React66__default.default.forwardRef(
 );
 Tooltip.displayName = "Tooltip";
 var parseTokenValue53 = (value) => parseFloat(value);
-var Row = styled51__default.default(reactNative.Pressable)(({ theme: theme2, divider }) => {
+var Row = styled51__default.default(reactNative.Pressable)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
-  const { colour } = theme2.tokens.semantics;
   return {
     width: "100%",
-    alignItems: "center",
+    alignItems: "flex-start",
     justifyContent: "center",
     paddingVertical: parseTokenValue53(spacing.md),
-    paddingHorizontal: parseTokenValue53(spacing.md),
-    borderBottomWidth: divider ? 1 : 0,
-    borderBottomColor: colour.border.divider
+    paddingHorizontal: parseTokenValue53(spacing.md)
   };
 });
 var MenuItem = React66__default.default.forwardRef((_a, ref) => {
   var _b = _a, { variant = "action", onPress, children, divider = true } = _b, rest = __objRest(_b, ["variant", "onPress", "children", "divider"]);
   const theme2 = react.useTheme();
   const { colour, typography } = theme2.tokens.semantics;
-  const labelColour = variant === "destructive" ? colour.text.error : colour.text.action.default;
+  const labelColour = variant === "destructive" ? colour.text.error : colour.text.link.default;
   const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Row,
-    __spreadProps(__spreadValues({
-      ref,
-      divider,
-      onPress,
-      accessible: true,
-      accessibilityRole: "menuitem",
-      accessibilityLabel: label
-    }, rest), {
-      children: label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        Typography,
-        {
-          token: typography.body.medium.md,
-          align: "center",
-          color: labelColour,
-          children: label
-        }
-      ) : children
-    })
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Row,
+      __spreadProps(__spreadValues({
+        ref,
+        onPress,
+        accessible: true,
+        accessibilityRole: "menuitem",
+        accessibilityLabel: label
+      }, rest), {
+        children: label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { token: typography.body.medium.md, color: labelColour, children: label }) : children
+      })
+    ),
+    divider && /* @__PURE__ */ jsxRuntime.jsx(Divider, {})
+  ] });
 });
 MenuItem.displayName = "Menu.Item";
 var parseTokenValue54 = (value) => parseFloat(value);
@@ -10708,18 +10699,14 @@ var DismissLayer = styled51__default.default(reactNative.Pressable)({
   right: 0,
   bottom: 0
 });
-var Anchor = styled51__default.default(reactNative.View)(({ theme: theme2, align }) => {
-  const inset = parseTokenValue54(theme2.tokens.semantics.dimensions.spacing.md);
-  return __spreadValues({
-    position: "absolute"
-  }, align === "right" ? { right: inset } : { left: inset });
+var Anchor = styled51__default.default(reactNative.View)({
+  position: "absolute"
 });
 var Card = styled51__default.default(reactNative.Pressable)(({ theme: theme2, width }) => {
   const { borderRadius } = theme2.tokens.semantics.dimensions;
   const { shadow, background } = theme2.tokens.semantics.colour;
   return {
     width,
-    maxWidth: "90%",
     borderRadius: parseTokenValue54(borderRadius.md),
     overflow: "hidden",
     backgroundColor: background.surface.default,
@@ -10737,12 +10724,25 @@ var Card = styled51__default.default(reactNative.Pressable)(({ theme: theme2, wi
 var MenuRoot = ({
   open,
   onClose,
+  anchor,
   anchorOffset = 0,
   align = "right",
-  width = 360,
+  width = 280,
   closeAccessibilityLabel = "Close menu",
   children
 }) => {
+  const theme2 = react.useTheme();
+  const { width: windowWidth } = reactNative.useWindowDimensions();
+  const { spacing } = theme2.tokens.semantics.dimensions;
+  const [lastAnchor, setLastAnchor] = React66.useState(anchor);
+  if (anchor && anchor !== lastAnchor) setLastAnchor(anchor);
+  const shownAnchor = anchor != null ? anchor : lastAnchor;
+  const position = shownAnchor ? __spreadValues({
+    top: shownAnchor.y + shownAnchor.height + parseTokenValue54(spacing.xs)
+  }, align === "right" ? { right: windowWidth - (shownAnchor.x + shownAnchor.width) } : { left: shownAnchor.x }) : {
+    top: anchorOffset,
+    [align]: parseTokenValue54(spacing.md)
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.Modal,
     {
@@ -10760,10 +10760,10 @@ var MenuRoot = ({
             accessibilityLabel: closeAccessibilityLabel
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Anchor, { align, style: { top: anchorOffset }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(Anchor, { style: position, children: /* @__PURE__ */ jsxRuntime.jsx(
           Card,
           {
-            width,
+            width: Math.min(width, windowWidth * 0.9),
             onPress: () => {
             },
             accessible: false,
@@ -10779,6 +10779,25 @@ MenuRoot.displayName = "Menu";
 var Menu2 = Object.assign(MenuRoot, {
   Item: MenuItem
 });
+var useMenuTrigger = () => {
+  const triggerRef = React66.useRef(null);
+  const [anchor, setAnchor] = React66.useState();
+  const open = React66.useCallback(() => {
+    var _a;
+    (_a = triggerRef.current) == null ? void 0 : _a.measureInWindow(
+      (x, y, width, height) => setAnchor({ x, y, width, height })
+    );
+  }, []);
+  const close = React66.useCallback(() => setAnchor(void 0), []);
+  const isOpen = anchor !== void 0;
+  return {
+    triggerRef,
+    isOpen,
+    open,
+    close,
+    menuProps: { open: isOpen, onClose: close, anchor }
+  };
+};
 var parseTokenValue55 = (value) => parseFloat(value);
 var StyledInsightRoot = styled51__default.default(reactNative.View)(
   ({
@@ -12926,6 +12945,7 @@ exports.slideOutAnimation = slideOutAnimation;
 exports.theme = theme;
 exports.useCopyField = useCopyField;
 exports.useDrawerKeyboardAvoidance = useDrawerKeyboardAvoidance;
+exports.useMenuTrigger = useMenuTrigger;
 exports.usePasswordField = usePasswordField;
 exports.usePawprint = usePawprint;
 exports.useSearchField = useSearchField;