@jobber/components 6.116.6 → 6.117.1

package/dist/Menu/Menu.d.ts

@@ -15,7 +15,7 @@ export declare namespace Menu {
     var HeaderLabel: typeof MenuHeaderLabel;
 }
 export declare function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }: MenuLegacyProps): React.JSX.Element;
-declare function MenuContentComposable({ children, UNSAFE_style, UNSAFE_className, }: MenuContentComposableProps): React.JSX.Element;
+declare function MenuContentComposable({ children, UNSAFE_style, UNSAFE_className, preferredPlacement, }: MenuContentComposableProps): React.JSX.Element;
 declare function MenuSeparatorComposable({ UNSAFE_style, UNSAFE_className, }: MenuSeparatorComposableProps): React.JSX.Element;
 declare function MenuSectionComposable({ children, UNSAFE_style, UNSAFE_className, ariaLabel, }: MenuSectionComposableProps): React.JSX.Element;
 declare function MenuHeaderComposable(props: MenuHeaderComposableProps): React.JSX.Element;

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

@@ -2,6 +2,7 @@ import type { IconColorNames, IconNames } from "@jobber/design";
 import type React from "react";
 import type { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
 import type { Pressable as AriaPressable } from "react-aria-components";
+import type { Placement } from "@react-types/overlays";
 import type { IconProps } from "../Icon";
 type PressableChild = ComponentProps<typeof AriaPressable>["children"];
 export interface MenuLegacyProps extends MenuBaseProps {
@@ -167,6 +168,11 @@ export interface MenuItemIconComposableProps extends IconProps {
 }
 export interface MenuContentComposableProps extends UnsafeProps {
     readonly children: ReactNode;
+    /**
+     * Describes the preferred placement of the Menu.
+     * @default 'bottom start'
+     */
+    readonly preferredPlacement?: Placement;
 }
 export interface MenuTriggerComposableProps extends UnsafeProps {
     /**

package/dist/Menu-cjs.js

@@ -8706,11 +8706,11 @@ const MenuTriggerComposable = React.forwardRef(function MenuTriggerComposable({
     return (React.createElement($3b117e43dc0ca95d$export$27c701ed9e449e99, { "aria-label": ariaLabel },
         React.createElement("div", { role: "button", className: className, ref: ref, style: UNSAFE_style }, children)));
 });
-function MenuContentComposable({ children, UNSAFE_style, UNSAFE_className, }) {
+function MenuContentComposable({ children, UNSAFE_style, UNSAFE_className, preferredPlacement, }) {
     const { state: animation, setState } = useMenuAnimation();
     const isMobile = isMobileDevice();
     return (React.createElement(React.Fragment, null,
-        React.createElement($07b14b47974efb58$export$5b6b19405a83ff9d, { isExiting: animation === "hidden", placement: "bottom start", offset: MENU_OFFSET }, ({ placement }) => {
+        React.createElement($07b14b47974efb58$export$5b6b19405a83ff9d, { isExiting: animation === "hidden", placement: preferredPlacement !== null && preferredPlacement !== void 0 ? preferredPlacement : "bottom start", offset: MENU_OFFSET }, ({ placement }) => {
             const directionModifier = (placement === null || placement === void 0 ? void 0 : placement.includes("bottom")) ? -1 : 1;
             const variants = isMobile
                 ? {

package/dist/Menu-es.js

@@ -8704,11 +8704,11 @@ const MenuTriggerComposable = React__default.forwardRef(function MenuTriggerComp
     return (React__default.createElement($3b117e43dc0ca95d$export$27c701ed9e449e99, { "aria-label": ariaLabel },
         React__default.createElement("div", { role: "button", className: className, ref: ref, style: UNSAFE_style }, children)));
 });
-function MenuContentComposable({ children, UNSAFE_style, UNSAFE_className, }) {
+function MenuContentComposable({ children, UNSAFE_style, UNSAFE_className, preferredPlacement, }) {
     const { state: animation, setState } = useMenuAnimation();
     const isMobile = isMobileDevice();
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement($07b14b47974efb58$export$5b6b19405a83ff9d, { isExiting: animation === "hidden", placement: "bottom start", offset: MENU_OFFSET }, ({ placement }) => {
+        React__default.createElement($07b14b47974efb58$export$5b6b19405a83ff9d, { isExiting: animation === "hidden", placement: preferredPlacement !== null && preferredPlacement !== void 0 ? preferredPlacement : "bottom start", offset: MENU_OFFSET }, ({ placement }) => {
             const directionModifier = (placement === null || placement === void 0 ? void 0 : placement.includes("bottom")) ? -1 : 1;
             const variants = isMobile
                 ? {

package/dist/Page/types.d.ts

@@ -114,6 +114,9 @@ export interface PageMenuProps {
     readonly children: ReactNode;
     readonly triggerLabel?: string;
 }
+export interface PageContextValue {
+    readonly width: PageComposableProps["width"];
+}
 export interface PageBodyProps {
     readonly children: ReactNode;
 }

package/dist/Page-cjs.js

@@ -15,18 +15,24 @@ var filterDataAttributes = require('./filterDataAttributes-cjs.js');
 
 var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
 
+const PageContext = React.createContext({ width: undefined });
+function usePageContext() {
+    return React.useContext(PageContext);
+}
 /** Discriminates between the props-based API and the composable children API. */
 function isLegacy(props) {
     return "title" in props;
 }
 function Page(props) {
     var _a;
-    const pageStyles = classnames(styles.page, styles[(_a = props.width) !== null && _a !== void 0 ? _a : "standard"]);
+    const width = (_a = props.width) !== null && _a !== void 0 ? _a : "standard";
+    const pageStyles = classnames(styles.page, styles[width]);
     if (isLegacy(props)) {
         return React.createElement(PageLegacy, Object.assign({}, props, { pageStyles: pageStyles }));
     }
-    return (React.createElement("div", { className: pageStyles },
-        React.createElement(Content.Content, null, props.children)));
+    return (React.createElement(PageContext.Provider, { value: { width } },
+        React.createElement("div", { className: pageStyles },
+            React.createElement(Content.Content, null, props.children))));
 }
 /** Props-based renderer. Preserves the original Page behavior for existing consumers. */
 function PageLegacy(_a) {
@@ -163,11 +169,13 @@ function PageSecondaryButton(_a) {
 function PageMenu(_a) {
     var { children, triggerLabel = "More Actions" } = _a, rest = tslib_es6.__rest(_a, ["children", "triggerLabel"]);
     const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    const { width } = usePageContext();
+    const preferredPlacement = width === "fill" ? "bottom end" : undefined;
     return (React.createElement("div", Object.assign({}, dataAttrs),
         React.createElement(Menu.Menu, null,
             React.createElement(Menu.Menu.Trigger, { UNSAFE_style: { display: "block" } },
                 React.createElement(Button.Button, { icon: "more", label: triggerLabel, type: "secondary", fullWidth: true })),
-            React.createElement(Menu.Menu.Content, null, children))));
+            React.createElement(Menu.Menu.Content, { preferredPlacement: preferredPlacement }, children))));
 }
 /** Main content area of the page. */
 function PageBody({ children }) {

package/dist/Page-es.js

@@ -1,5 +1,5 @@
 import { _ as __rest } from './tslib.es6-es.js';
-import React__default from 'react';
+import React__default, { createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { useResizeObserver, Breakpoints } from '@jobber/hooks';
 import { H as Heading } from './Heading-es.js';
@@ -13,18 +13,24 @@ import { f as filterDataAttributes } from './filterDataAttributes-es.js';
 
 var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
 
+const PageContext = createContext({ width: undefined });
+function usePageContext() {
+    return useContext(PageContext);
+}
 /** Discriminates between the props-based API and the composable children API. */
 function isLegacy(props) {
     return "title" in props;
 }
 function Page(props) {
     var _a;
-    const pageStyles = classnames(styles.page, styles[(_a = props.width) !== null && _a !== void 0 ? _a : "standard"]);
+    const width = (_a = props.width) !== null && _a !== void 0 ? _a : "standard";
+    const pageStyles = classnames(styles.page, styles[width]);
     if (isLegacy(props)) {
         return React__default.createElement(PageLegacy, Object.assign({}, props, { pageStyles: pageStyles }));
     }
-    return (React__default.createElement("div", { className: pageStyles },
-        React__default.createElement(Content, null, props.children)));
+    return (React__default.createElement(PageContext.Provider, { value: { width } },
+        React__default.createElement("div", { className: pageStyles },
+            React__default.createElement(Content, null, props.children))));
 }
 /** Props-based renderer. Preserves the original Page behavior for existing consumers. */
 function PageLegacy(_a) {
@@ -161,11 +167,13 @@ function PageSecondaryButton(_a) {
 function PageMenu(_a) {
     var { children, triggerLabel = "More Actions" } = _a, rest = __rest(_a, ["children", "triggerLabel"]);
     const dataAttrs = filterDataAttributes(rest);
+    const { width } = usePageContext();
+    const preferredPlacement = width === "fill" ? "bottom end" : undefined;
     return (React__default.createElement("div", Object.assign({}, dataAttrs),
         React__default.createElement(Menu, null,
             React__default.createElement(Menu.Trigger, { UNSAFE_style: { display: "block" } },
                 React__default.createElement(Button, { icon: "more", label: triggerLabel, type: "secondary", fullWidth: true })),
-            React__default.createElement(Menu.Content, null, children))));
+            React__default.createElement(Menu.Content, { preferredPlacement: preferredPlacement }, children))));
 }
 /** Main content area of the page. */
 function PageBody({ children }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.116.6",
+  "version": "6.117.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "b8a45899e8d301def2cbf89fcddae6464ca29c93"
+  "gitHead": "2005605be27d94b3e18231d7ede6fff71132f371"
 }