@jobber/components 6.102.0 → 6.103.0

package/dist/Menu/Menu.types.d.ts

@@ -1,7 +1,9 @@
 import type { IconColorNames, IconNames } from "@jobber/design";
 import type React from "react";
-import type { CSSProperties, ReactElement, ReactNode } from "react";
+import type { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
+import type { Pressable as AriaPressable } from "react-aria-components";
 import type { IconProps } from "../Icon";
+type PressableChild = ComponentProps<typeof AriaPressable>["children"];
 export interface MenuLegacyProps extends MenuBaseProps {
     /**
      * Custom menu activator. If this is not provided a default [… More] will be used.
@@ -128,11 +130,12 @@ export interface MenuSectionComposableProps extends UnsafeProps {
 export interface MenuHeaderComposableProps extends UnsafeProps {
     readonly children: ReactNode;
 }
+type MenuItemVariants = "destructive";
 export interface MenuItemComposableProps extends UnsafeProps {
     /**
-     * Apply destructive styling to the item label and icon.
+     * Visual style variations for the MenuItem default content.
      */
-    readonly destructive?: boolean;
+    readonly variation?: MenuItemVariants;
     /**
      * Item content.
      */
@@ -172,7 +175,7 @@ export interface MenuTriggerComposableProps {
      * If you want to access the open event, use the onOpenChange on the Menu component.
      * If it does not have an interactive role, or a focus style it will have issues.
      */
-    readonly children: ReactNode;
+    readonly children: PressableChild;
 }
 export interface MenuSeparatorComposableProps extends UnsafeProps {
 }

package/dist/Menu-cjs.js

@@ -87,7 +87,7 @@ const composeOverlayVariation = {
     hidden: { opacity: 0 },
     visible: { opacity: 1 },
 };
-const variation = {
+const animationVariation = {
     overlayStartStop: { opacity: 0 },
     startOrStop: (placement) => {
         let y = Y_TRANSLATION_DESKTOP;
@@ -206,14 +206,14 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         })),
         React.createElement(MenuPortal, null,
             React.createElement(framerMotion.AnimatePresence, null, visible && (React.createElement(React.Fragment, null,
-                React.createElement(framerMotion.motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG) }),
+                React.createElement(framerMotion.motion.div, { className: styles.overlay, onClick: toggle(), variants: animationVariation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG) }),
                 React.createElement("div", Object.assign({ ref: refs.setFloating, className: styles.floatingContainer }, getFloatingProps({
                     onKeyDown: event => {
                         if (event.key === "Tab") {
                             event.preventDefault();
                         }
                     },
-                }), positionAttributes, useFormFieldFocus.formFieldFocusAttribute), items.length > 0 && (React.createElement(framerMotion.motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, transition: Object.assign({}, MENU_ANIMATION_CONFIG), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, renderedSections)))))))));
+                }), positionAttributes, useFormFieldFocus.formFieldFocusAttribute), items.length > 0 && (React.createElement(framerMotion.motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: animationVariation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, transition: Object.assign({}, MENU_ANIMATION_CONFIG), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, renderedSections)))))))));
     function toggle(callbackPassthrough) {
         return (event) => {
             setVisible(!visible);
@@ -348,14 +348,14 @@ const MenuItemComposable = React.forwardRef(function MenuItemComposable(props, r
     if (props.href) {
         const { href, target, rel, onClick } = props;
         return (React.createElement(Tree.$3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ref: ref, className: className, style: UNSAFE_style, textValue: props.textValue, href: href, target: target, rel: rel, onClick: onClick },
-            React.createElement(MenuItemContext.Provider, { value: { destructive: props.destructive } }, props.children)));
+            React.createElement(MenuItemContext.Provider, { value: { variation: props.variation } }, props.children)));
     }
     return (React.createElement(Tree.$3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ref: ref, className: className, style: UNSAFE_style, textValue: props.textValue, onAction: () => {
             var _a;
             // Zero-arg activation for non-link items
             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
         } },
-        React.createElement(MenuItemContext.Provider, { value: { destructive: props.destructive } }, props.children)));
+        React.createElement(MenuItemContext.Provider, { value: { variation: props.variation } }, props.children)));
 });
 const MenuItemContext = React.createContext(null);
 function useMenuItemContext() {
@@ -363,14 +363,14 @@ function useMenuItemContext() {
     return ctx !== null && ctx !== void 0 ? ctx : {};
 }
 function MenuItemIconComposable(props) {
-    const { destructive } = useMenuItemContext();
+    const { variation } = useMenuItemContext();
     return (React.createElement("div", { "data-menu-slot": "icon" },
-        React.createElement(Icon.Icon, Object.assign({}, props, { color: destructive ? "destructive" : props.color }))));
+        React.createElement(Icon.Icon, Object.assign({}, props, { color: variation === "destructive" ? "destructive" : props.color }))));
 }
 function MenuItemLabelComposable(props) {
-    const { destructive } = useMenuItemContext();
+    const { variation } = useMenuItemContext();
     return (React.createElement("div", { "data-menu-slot": "label" },
-        React.createElement(Typography.Typography, { element: "span", fontWeight: "semiBold", textColor: destructive ? "destructive" : "text" }, props.children)));
+        React.createElement(Typography.Typography, { element: "span", fontWeight: "semiBold", textColor: variation === "destructive" ? "destructive" : "text" }, props.children)));
 }
 function MenuHeaderLabel(props) {
     return React.createElement(DefaultHeaderContent, null, props.children);

package/dist/Menu-es.js

@@ -85,7 +85,7 @@ const composeOverlayVariation = {
     hidden: { opacity: 0 },
     visible: { opacity: 1 },
 };
-const variation = {
+const animationVariation = {
     overlayStartStop: { opacity: 0 },
     startOrStop: (placement) => {
         let y = Y_TRANSLATION_DESKTOP;
@@ -204,14 +204,14 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         })),
         React__default.createElement(MenuPortal, null,
             React__default.createElement(AnimatePresence, null, visible && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG) }),
+                React__default.createElement(motion.div, { className: styles.overlay, onClick: toggle(), variants: animationVariation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG) }),
                 React__default.createElement("div", Object.assign({ ref: refs.setFloating, className: styles.floatingContainer }, getFloatingProps({
                     onKeyDown: event => {
                         if (event.key === "Tab") {
                             event.preventDefault();
                         }
                     },
-                }), positionAttributes, formFieldFocusAttribute), items.length > 0 && (React__default.createElement(motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, transition: Object.assign({}, MENU_ANIMATION_CONFIG), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, renderedSections)))))))));
+                }), positionAttributes, formFieldFocusAttribute), items.length > 0 && (React__default.createElement(motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: animationVariation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, transition: Object.assign({}, MENU_ANIMATION_CONFIG), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, renderedSections)))))))));
     function toggle(callbackPassthrough) {
         return (event) => {
             setVisible(!visible);
@@ -346,14 +346,14 @@ const MenuItemComposable = React__default.forwardRef(function MenuItemComposable
     if (props.href) {
         const { href, target, rel, onClick } = props;
         return (React__default.createElement($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ref: ref, className: className, style: UNSAFE_style, textValue: props.textValue, href: href, target: target, rel: rel, onClick: onClick },
-            React__default.createElement(MenuItemContext.Provider, { value: { destructive: props.destructive } }, props.children)));
+            React__default.createElement(MenuItemContext.Provider, { value: { variation: props.variation } }, props.children)));
     }
     return (React__default.createElement($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ref: ref, className: className, style: UNSAFE_style, textValue: props.textValue, onAction: () => {
             var _a;
             // Zero-arg activation for non-link items
             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
         } },
-        React__default.createElement(MenuItemContext.Provider, { value: { destructive: props.destructive } }, props.children)));
+        React__default.createElement(MenuItemContext.Provider, { value: { variation: props.variation } }, props.children)));
 });
 const MenuItemContext = createContext(null);
 function useMenuItemContext() {
@@ -361,14 +361,14 @@ function useMenuItemContext() {
     return ctx !== null && ctx !== void 0 ? ctx : {};
 }
 function MenuItemIconComposable(props) {
-    const { destructive } = useMenuItemContext();
+    const { variation } = useMenuItemContext();
     return (React__default.createElement("div", { "data-menu-slot": "icon" },
-        React__default.createElement(Icon, Object.assign({}, props, { color: destructive ? "destructive" : props.color }))));
+        React__default.createElement(Icon, Object.assign({}, props, { color: variation === "destructive" ? "destructive" : props.color }))));
 }
 function MenuItemLabelComposable(props) {
-    const { destructive } = useMenuItemContext();
+    const { variation } = useMenuItemContext();
     return (React__default.createElement("div", { "data-menu-slot": "label" },
-        React__default.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: destructive ? "destructive" : "text" }, props.children)));
+        React__default.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: variation === "destructive" ? "destructive" : "text" }, props.children)));
 }
 function MenuHeaderLabel(props) {
     return React__default.createElement(DefaultHeaderContent, null, props.children);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.102.0",
+  "version": "6.103.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "1bab53a257b1c96c41a1d8b437f432fad4d138c1"
+  "gitHead": "97455b7bb50ed051e449077dc78c47a676446fee"
 }