@butternutbox/pawprint-native 1.2.0 → 1.3.1

package/dist/index.js

@@ -9128,6 +9128,16 @@ var SelectFieldRoot = React66.forwardRef(
         keyboardSub.remove();
       };
     }, [isOpen, searchable, isSearching, searchQuery]);
+    const isOpenRef = React66.useRef(isOpen);
+    React66.useEffect(() => {
+      isOpenRef.current = isOpen;
+    });
+    const handleSearchBlur = () => {
+      setTimeout(() => {
+        var _a2;
+        if (isOpenRef.current) (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      }, 50);
+    };
     const isCompound = React66.Children.toArray(children).some(
       (child) => React66.isValidElement(child) && child.type === SelectFieldContent
     );
@@ -9218,6 +9228,7 @@ var SelectFieldRoot = React66.forwardRef(
                     ref: searchInputRef,
                     value: searchQuery,
                     onChangeText: setSearchQuery,
+                    onBlur: handleSearchBlur,
                     placeholder: searchPlaceholder != null ? searchPlaceholder : "Search...",
                     returnKeyType: "search",
                     clearButtonMode: "never",
@@ -10627,46 +10638,37 @@ var Tooltip = React66.forwardRef(
 );
 Tooltip.displayName = "Tooltip";
 var parseTokenValue53 = (value) => parseFloat(value);
-var Row = styled51(Pressable)(({ theme: theme2, divider }) => {
+var Row = styled51(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.forwardRef((_a, ref) => {
   var _b = _a, { variant = "action", onPress, children, divider = true } = _b, rest = __objRest(_b, ["variant", "onPress", "children", "divider"]);
   const theme2 = 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__ */ jsx(
-    Row,
-    __spreadProps(__spreadValues({
-      ref,
-      divider,
-      onPress,
-      accessible: true,
-      accessibilityRole: "menuitem",
-      accessibilityLabel: label
-    }, rest), {
-      children: label !== void 0 ? /* @__PURE__ */ jsx(
-        Typography,
-        {
-          token: typography.body.medium.md,
-          align: "center",
-          color: labelColour,
-          children: label
-        }
-      ) : children
-    })
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Row,
+      __spreadProps(__spreadValues({
+        ref,
+        onPress,
+        accessible: true,
+        accessibilityRole: "menuitem",
+        accessibilityLabel: label
+      }, rest), {
+        children: label !== void 0 ? /* @__PURE__ */ jsx(Typography, { token: typography.body.medium.md, color: labelColour, children: label }) : children
+      })
+    ),
+    divider && /* @__PURE__ */ jsx(Divider, {})
+  ] });
 });
 MenuItem.displayName = "Menu.Item";
 var parseTokenValue54 = (value) => parseFloat(value);
@@ -10677,18 +10679,14 @@ var DismissLayer = styled51(Pressable)({
   right: 0,
   bottom: 0
 });
-var Anchor = styled51(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(View)({
+  position: "absolute"
 });
 var Card = styled51(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,
@@ -10706,12 +10704,25 @@ var Card = styled51(Pressable)(({ theme: theme2, width }) => {
 var MenuRoot = ({
   open,
   onClose,
+  anchor,
   anchorOffset = 0,
   align = "right",
-  width = 360,
+  width = 280,
   closeAccessibilityLabel = "Close menu",
   children
 }) => {
+  const theme2 = useTheme();
+  const { width: windowWidth } = useWindowDimensions();
+  const { spacing } = theme2.tokens.semantics.dimensions;
+  const [lastAnchor, setLastAnchor] = 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__ */ jsxs(
     Modal,
     {
@@ -10729,10 +10740,10 @@ var MenuRoot = ({
             accessibilityLabel: closeAccessibilityLabel
           }
         ),
-        /* @__PURE__ */ jsx(Anchor, { align, style: { top: anchorOffset }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Anchor, { style: position, children: /* @__PURE__ */ jsx(
           Card,
           {
-            width,
+            width: Math.min(width, windowWidth * 0.9),
             onPress: () => {
             },
             accessible: false,
@@ -10748,6 +10759,25 @@ MenuRoot.displayName = "Menu";
 var Menu2 = Object.assign(MenuRoot, {
   Item: MenuItem
 });
+var useMenuTrigger = () => {
+  const triggerRef = useRef(null);
+  const [anchor, setAnchor] = useState();
+  const open = useCallback(() => {
+    var _a;
+    (_a = triggerRef.current) == null ? void 0 : _a.measureInWindow(
+      (x, y, width, height) => setAnchor({ x, y, width, height })
+    );
+  }, []);
+  const close = 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(View)(
   ({
@@ -12803,6 +12833,6 @@ var FloatingActionButton = React66.forwardRef(
 );
 FloatingActionButton.displayName = "FloatingActionButton";
 
-export { Accordion, Animated5 as Animated, Avatar, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, FloatingActionButton, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, Animated5 as Animated, Avatar, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, FloatingActionButton, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, useMenuTrigger, usePasswordField, usePawprint, useSearchField, useSelectField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map