@jobber/components 6.112.0 → 6.112.2

package/dist/DatePicker/useFocusOnSelectedDate.d.ts

@@ -1,4 +1,4 @@
-export declare function useFocusOnSelectedDate(): {
+export declare function useFocusOnSelectedDate(portalContainerId?: string): {
     ref: import("react").RefObject<HTMLDivElement | null>;
-    focusOnSelectedDate: () => void;
+    focusOnSelectedDate: () => boolean;
 };

package/dist/DatePicker-cjs.js

@@ -12652,7 +12652,7 @@ var DatePicker$1 = /** @class */ (function (_super) {
 var PRESELECT_CHANGE_VIA_INPUT = "input";
 var PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
 
-var styles = {"datePickerWrapper":"OmFI-Bfdzgw-","fullWidth":"HWDFy10kcYA-","datePicker":"Ma55F5Y-XhE-","inline":"_58kEbTu-IAA-","header":"Epg-Ub8Dn9A-","month":"Wx3NP8La95k-","spinning":"o0JLwNATy-M-"};
+var styles = {"datePickerWrapper":"OmFI-Bfdzgw-","fullWidth":"HWDFy10kcYA-","datePicker":"Ma55F5Y-XhE-","inline":"_58kEbTu-IAA-","portalContainer":"LDxKi0E-1rg-","header":"Epg-Ub8Dn9A-","month":"Wx3NP8La95k-","spinning":"o0JLwNATy-M-"};
 
 function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
     return (React.createElement("div", { className: styles.header },
@@ -12691,25 +12691,25 @@ function InternalActivator(props, ref) {
     }
 }
 
-function useFocusOnSelectedDate() {
+function useFocusOnSelectedDate(portalContainerId) {
     const ref = React.useRef(null);
-    function focusOnSelectedDate() {
-        var _a;
-        const selectedDateClass = ".react-datepicker__day--selected";
-        const selectedDate = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector(selectedDateClass);
-        if (selectedDate instanceof HTMLDivElement) {
-            selectedDate.focus();
+    // Moves focus to the selected/pre-selected day in the calendar ([tabindex="0"]).
+    const focusOnSelectedDate = React.useCallback(() => {
+        const portalElement = portalContainerId
+            ? document.getElementById(portalContainerId)
+            : null;
+        const searchRoot = portalElement !== null && portalElement !== void 0 ? portalElement : ref.current;
+        const day = searchRoot === null || searchRoot === void 0 ? void 0 : searchRoot.querySelector('[tabindex="0"]');
+        if (day instanceof HTMLElement) {
+            day.focus();
+            return true;
         }
-    }
+        return false;
+    }, [portalContainerId]);
     return { ref, focusOnSelectedDate };
 }
 
-/*eslint max-statements: ["error", 14]*/
-function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
-    const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
-    const [open, setOpen] = React.useState(false);
-    const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = AtlantisContext.useAtlantisContext();
-    const effectiveFirstDayOfWeek = firstDayOfWeek !== null && firstDayOfWeek !== void 0 ? firstDayOfWeek : contextFirstDayOfWeek;
+function getDatePickerClassNames(inline, open, fullWidth) {
     const wrapperClassName = classnames(styles.datePickerWrapper, {
         // react-datepicker uses this class name to not close the date picker when
         // the activator is clicked
@@ -12724,44 +12724,58 @@ function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline,
     const datePickerClassNames = classnames(styles.datePicker, {
         [styles.inline]: inline,
     });
-    const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
-    if (smartAutofocus) {
-        jobberHooks.useRefocusOnActivator(open);
-        React.useEffect(focusOnSelectedDate, [open]);
-    }
-    return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },
-        React.createElement(DatePicker$1, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
+    return { wrapperClassName, datePickerClassNames };
+}
+function useDatePickerHandlers(onChange, setOpen, onOpenChange, smartAutofocus, focusOnSelectedDate) {
+    const handleChange = React.useCallback((value) => {
+        onChange(value);
+    }, [onChange]);
+    const handleCalendarOpen = React.useCallback(() => {
+        setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
+        if (smartAutofocus) {
+            // The portal DOM may not be painted yet, so defer to the next frame
+            requestAnimationFrame(() => {
+                focusOnSelectedDate === null || focusOnSelectedDate === void 0 ? void 0 : focusOnSelectedDate();
+            });
+        }
+    }, [setOpen, onOpenChange, smartAutofocus, focusOnSelectedDate]);
+    const handleCalendarClose = React.useCallback(() => {
+        setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    }, [setOpen, onOpenChange]);
+    return { handleChange, handleCalendarOpen, handleCalendarClose };
+}
+function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
+    const [open, setOpen] = React.useState(false);
+    const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = AtlantisContext.useAtlantisContext();
+    const effectiveFirstDayOfWeek = firstDayOfWeek !== null && firstDayOfWeek !== void 0 ? firstDayOfWeek : contextFirstDayOfWeek;
+    const renderInsidePortal = !inline;
+    const uniquePortalId = React.useId();
+    const { ref, focusOnSelectedDate } = useFocusOnSelectedDate(uniquePortalId);
+    const { wrapperClassName, datePickerClassNames } = getDatePickerClassNames(inline !== null && inline !== void 0 ? inline : false, open, fullWidth !== null && fullWidth !== void 0 ? fullWidth : false);
+    const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, renderInsidePortal);
+    const { handleChange, handleCalendarOpen, handleCalendarClose } = useDatePickerHandlers(onChange, setOpen, onOpenChange, smartAutofocus !== null && smartAutofocus !== void 0 ? smartAutofocus : true, focusOnSelectedDate);
+    jobberHooks.useRefocusOnActivator(smartAutofocus ? open : false);
+    return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated", onKeyDown: event => {
+            // Stop Escape from bubbling to parent floating elements (e.g. Modal).
+            if (event.key === "Escape" && open) {
+                event.stopPropagation();
+            }
+        } },
+        React.createElement(DatePicker$1, Object.assign({ ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
                 dateFormat,
                 "P",
                 "PP",
                 "PPP",
                 "MMM dd yyyy",
                 "MMMM dd yyyy",
-            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek, popperPlacement: "bottom-start" })));
-    /**
-     * The onChange callback on ReactDatePicker returns a Date and an Event, but
-     * the onChange in our interface only provides the Date. Simplifying the code
-     * by removing this function and passing it directly to the underlying
-     * component breaks tests both here and downstream (i.e. the pattern
-     * `expect(onChange).toHaveBeenCalledWith(date)` is commonly used and would
-     * fail).
-     */
-    function handleChange(value) {
-        // TODO: Ticket created to update all DatePicker and InputDate usages to accept Date | null
-        onChange(value);
-    }
-    function handleCalendarOpen() {
-        setOpen(true);
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
-    }
-    function handleCalendarClose() {
-        setOpen(false);
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
-    }
+            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek, popperPlacement: "bottom-start" }, (renderInsidePortal && { portalId: uniquePortalId }))),
+        renderInsidePortal && React.createElement(DatePickerPortal, { portalId: uniquePortalId })));
 }
-function useEscapeKeyToCloseDatePicker(open, ref) {
+function useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, isPortalled) {
     const pickerRef = React.useRef(null);
-    const escFunction = (event) => {
+    const handleKeyDown = (event) => {
         var _a;
         if (event.key === "Escape" && open) {
             // Close the picker ourselves and prevent propagation so that ESC presses with the picker open
@@ -12769,18 +12783,38 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
             (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(false);
             event.stopPropagation();
         }
+        if (event.key === "Tab" && open && isPortalled) {
+            // When portalled, Tab from the activator doesn't reach the calendar.
+            // Intercept Tab to move focus there (mainly when smartAutofocus is false
+            // and focus stayed in the input).
+            const focused = focusOnSelectedDate();
+            if (focused) {
+                event.preventDefault();
+            }
+        }
     };
     React.useEffect(() => {
         var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", escFunction);
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleKeyDown);
         return () => {
             var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", escFunction);
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
         };
-    }, [open, ref, pickerRef]);
+    }, [open, ref, pickerRef, isPortalled]);
     return {
         pickerRef,
     };
 }
+function DatePickerPortal({ portalId }) {
+    const nodeId = floatingUi_react.useFloatingNodeId();
+    const parentNodeId = floatingUi_react.useFloatingParentNodeId();
+    const portalDiv = React.createElement("div", { id: portalId, className: styles.portalContainer });
+    if (parentNodeId) {
+        return (React.createElement(floatingUi_react.FloatingTree, null,
+            React.createElement(floatingUi_react.FloatingNode, { id: nodeId },
+                React.createElement(floatingUi_react.FloatingPortal, null, portalDiv))));
+    }
+    return React.createElement(floatingUi_react.FloatingPortal, null, portalDiv);
+}
 
 exports.DatePicker = DatePicker;

package/dist/DatePicker-es.js

@@ -1,7 +1,7 @@
-import React__default, { cloneElement, Component, createRef, useRef, useCallback, useEffect, createElement, forwardRef, isValidElement, useState } from 'react';
+import React__default, { cloneElement, Component, createRef, useRef, useCallback, useEffect, createElement, forwardRef, isValidElement, useState, useId } from 'react';
 import classnames from 'classnames';
 import { c as clsx } from './clsx-es.js';
-import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, w as FloatingArrow } from './floating-ui.react-es.js';
+import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, w as FloatingArrow, j as useFloatingNodeId, i as useFloatingParentNodeId, k as FloatingTree, m as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
 import ReactDOM__default from 'react-dom';
 import { useRefocusOnActivator } from '@jobber/hooks';
 import { T as Typography } from './Typography-es.js';
@@ -12650,7 +12650,7 @@ var DatePicker$1 = /** @class */ (function (_super) {
 var PRESELECT_CHANGE_VIA_INPUT = "input";
 var PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
 
-var styles = {"datePickerWrapper":"OmFI-Bfdzgw-","fullWidth":"HWDFy10kcYA-","datePicker":"Ma55F5Y-XhE-","inline":"_58kEbTu-IAA-","header":"Epg-Ub8Dn9A-","month":"Wx3NP8La95k-","spinning":"o0JLwNATy-M-"};
+var styles = {"datePickerWrapper":"OmFI-Bfdzgw-","fullWidth":"HWDFy10kcYA-","datePicker":"Ma55F5Y-XhE-","inline":"_58kEbTu-IAA-","portalContainer":"LDxKi0E-1rg-","header":"Epg-Ub8Dn9A-","month":"Wx3NP8La95k-","spinning":"o0JLwNATy-M-"};
 
 function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
     return (React__default.createElement("div", { className: styles.header },
@@ -12689,25 +12689,25 @@ function InternalActivator(props, ref) {
     }
 }
 
-function useFocusOnSelectedDate() {
+function useFocusOnSelectedDate(portalContainerId) {
     const ref = useRef(null);
-    function focusOnSelectedDate() {
-        var _a;
-        const selectedDateClass = ".react-datepicker__day--selected";
-        const selectedDate = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector(selectedDateClass);
-        if (selectedDate instanceof HTMLDivElement) {
-            selectedDate.focus();
+    // Moves focus to the selected/pre-selected day in the calendar ([tabindex="0"]).
+    const focusOnSelectedDate = useCallback(() => {
+        const portalElement = portalContainerId
+            ? document.getElementById(portalContainerId)
+            : null;
+        const searchRoot = portalElement !== null && portalElement !== void 0 ? portalElement : ref.current;
+        const day = searchRoot === null || searchRoot === void 0 ? void 0 : searchRoot.querySelector('[tabindex="0"]');
+        if (day instanceof HTMLElement) {
+            day.focus();
+            return true;
         }
-    }
+        return false;
+    }, [portalContainerId]);
     return { ref, focusOnSelectedDate };
 }
 
-/*eslint max-statements: ["error", 14]*/
-function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
-    const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
-    const [open, setOpen] = useState(false);
-    const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = useAtlantisContext();
-    const effectiveFirstDayOfWeek = firstDayOfWeek !== null && firstDayOfWeek !== void 0 ? firstDayOfWeek : contextFirstDayOfWeek;
+function getDatePickerClassNames(inline, open, fullWidth) {
     const wrapperClassName = classnames(styles.datePickerWrapper, {
         // react-datepicker uses this class name to not close the date picker when
         // the activator is clicked
@@ -12722,44 +12722,58 @@ function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline,
     const datePickerClassNames = classnames(styles.datePicker, {
         [styles.inline]: inline,
     });
-    const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
-    if (smartAutofocus) {
-        useRefocusOnActivator(open);
-        useEffect(focusOnSelectedDate, [open]);
-    }
-    return (React__default.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },
-        React__default.createElement(DatePicker$1, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
+    return { wrapperClassName, datePickerClassNames };
+}
+function useDatePickerHandlers(onChange, setOpen, onOpenChange, smartAutofocus, focusOnSelectedDate) {
+    const handleChange = useCallback((value) => {
+        onChange(value);
+    }, [onChange]);
+    const handleCalendarOpen = useCallback(() => {
+        setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
+        if (smartAutofocus) {
+            // The portal DOM may not be painted yet, so defer to the next frame
+            requestAnimationFrame(() => {
+                focusOnSelectedDate === null || focusOnSelectedDate === void 0 ? void 0 : focusOnSelectedDate();
+            });
+        }
+    }, [setOpen, onOpenChange, smartAutofocus, focusOnSelectedDate]);
+    const handleCalendarClose = useCallback(() => {
+        setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    }, [setOpen, onOpenChange]);
+    return { handleChange, handleCalendarOpen, handleCalendarClose };
+}
+function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
+    const [open, setOpen] = useState(false);
+    const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = useAtlantisContext();
+    const effectiveFirstDayOfWeek = firstDayOfWeek !== null && firstDayOfWeek !== void 0 ? firstDayOfWeek : contextFirstDayOfWeek;
+    const renderInsidePortal = !inline;
+    const uniquePortalId = useId();
+    const { ref, focusOnSelectedDate } = useFocusOnSelectedDate(uniquePortalId);
+    const { wrapperClassName, datePickerClassNames } = getDatePickerClassNames(inline !== null && inline !== void 0 ? inline : false, open, fullWidth !== null && fullWidth !== void 0 ? fullWidth : false);
+    const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, renderInsidePortal);
+    const { handleChange, handleCalendarOpen, handleCalendarClose } = useDatePickerHandlers(onChange, setOpen, onOpenChange, smartAutofocus !== null && smartAutofocus !== void 0 ? smartAutofocus : true, focusOnSelectedDate);
+    useRefocusOnActivator(smartAutofocus ? open : false);
+    return (React__default.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated", onKeyDown: event => {
+            // Stop Escape from bubbling to parent floating elements (e.g. Modal).
+            if (event.key === "Escape" && open) {
+                event.stopPropagation();
+            }
+        } },
+        React__default.createElement(DatePicker$1, Object.assign({ ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
                 dateFormat,
                 "P",
                 "PP",
                 "PPP",
                 "MMM dd yyyy",
                 "MMMM dd yyyy",
-            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek, popperPlacement: "bottom-start" })));
-    /**
-     * The onChange callback on ReactDatePicker returns a Date and an Event, but
-     * the onChange in our interface only provides the Date. Simplifying the code
-     * by removing this function and passing it directly to the underlying
-     * component breaks tests both here and downstream (i.e. the pattern
-     * `expect(onChange).toHaveBeenCalledWith(date)` is commonly used and would
-     * fail).
-     */
-    function handleChange(value) {
-        // TODO: Ticket created to update all DatePicker and InputDate usages to accept Date | null
-        onChange(value);
-    }
-    function handleCalendarOpen() {
-        setOpen(true);
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
-    }
-    function handleCalendarClose() {
-        setOpen(false);
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
-    }
+            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek, popperPlacement: "bottom-start" }, (renderInsidePortal && { portalId: uniquePortalId }))),
+        renderInsidePortal && React__default.createElement(DatePickerPortal, { portalId: uniquePortalId })));
 }
-function useEscapeKeyToCloseDatePicker(open, ref) {
+function useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, isPortalled) {
     const pickerRef = useRef(null);
-    const escFunction = (event) => {
+    const handleKeyDown = (event) => {
         var _a;
         if (event.key === "Escape" && open) {
             // Close the picker ourselves and prevent propagation so that ESC presses with the picker open
@@ -12767,18 +12781,38 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
             (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(false);
             event.stopPropagation();
         }
+        if (event.key === "Tab" && open && isPortalled) {
+            // When portalled, Tab from the activator doesn't reach the calendar.
+            // Intercept Tab to move focus there (mainly when smartAutofocus is false
+            // and focus stayed in the input).
+            const focused = focusOnSelectedDate();
+            if (focused) {
+                event.preventDefault();
+            }
+        }
     };
     useEffect(() => {
         var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", escFunction);
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleKeyDown);
         return () => {
             var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", escFunction);
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
         };
-    }, [open, ref, pickerRef]);
+    }, [open, ref, pickerRef, isPortalled]);
     return {
         pickerRef,
     };
 }
+function DatePickerPortal({ portalId }) {
+    const nodeId = useFloatingNodeId();
+    const parentNodeId = useFloatingParentNodeId();
+    const portalDiv = React__default.createElement("div", { id: portalId, className: styles.portalContainer });
+    if (parentNodeId) {
+        return (React__default.createElement(FloatingTree, null,
+            React__default.createElement(FloatingNode, { id: nodeId },
+                React__default.createElement(FloatingPortal, null, portalDiv))));
+    }
+    return React__default.createElement(FloatingPortal, null, portalDiv);
+}
 
 export { DatePicker as D };

package/dist/Page/Page.d.ts

@@ -1,74 +1,74 @@
-import type { ReactNode } from "react";
+import type { ReactElement } from "react";
 import React from "react";
-import type { XOR } from "ts-xor";
+import type { ButtonActionProps, PageActionButtonProps, PageActionsProps, PageBodyProps, PageComposableProps, PageHeaderContentProps, PageHeaderProps, PageIntroProps, PageLegacyProps, PageMenuProps, PageSlotProps, PageSubtitleProps, PageTitleBarProps, PageTitleProps } from "./types";
 import { type ButtonProps } from "../Button";
-import { type SectionProps } from "../Menu";
-export type ButtonActionProps = ButtonProps & {
-    ref?: React.RefObject<HTMLDivElement | null>;
-};
-interface PageFoundationProps {
-    readonly children: ReactNode | ReactNode[];
-    /**
-     * Title of the page.
-     *
-     * Supports any React node. If a string is provided, it will be rendered as an H1 heading.
-     * Otherwise it will be rendered as is.
-     *
-     * **Important**: If you're passing a custom element, it must include an H1-level heading within it.
-     * Ideally <Heading level={1}> should be used here.
-     */
-    readonly title: ReactNode;
-    /**
-     * TitleMetaData component to be displayed
-     * next to the title. Only compatible with string titles.
-     */
-    readonly titleMetaData?: ReactNode;
-    /**
-     * Subtitle of the page.
-     */
-    readonly subtitle?: string;
-    /**
-     * Determines the width of the page.
-     *
-     * Fill makes the width grow to 100%.
-     *
-     * Standard caps out at 1280px.
-     *
-     * Narrow caps out at 1024px.
-     *
-     * @default standard
-     */
-    readonly width?: "fill" | "standard" | "narrow";
-    /**
-     * Page title primary action button settings.
-     */
-    readonly primaryAction?: ButtonActionProps;
-    /**
-     * Page title secondary action button settings.
-     */
-    readonly secondaryAction?: ButtonActionProps;
-    /**
-     * Page title Action menu.
-     */
-    readonly moreActionsMenu?: SectionProps[];
+export declare function Page(props: PageLegacyProps): ReactElement;
+export declare function Page(props: PageComposableProps): ReactElement;
+export declare namespace Page {
+    var Header: typeof PageHeader;
+    var HeaderContent: typeof PageHeaderContent;
+    var TitleBar: typeof PageTitleBar;
+    var Title: typeof PageTitle;
+    var Subtitle: typeof PageSubtitle;
+    var Intro: typeof PageIntro;
+    var Actions: typeof PageActions;
+    var ActionPrimary: typeof PageActionPrimary;
+    var ActionSecondary: typeof PageActionSecondary;
+    var ActionMenu: typeof PageActionMenu;
+    var PrimaryButton: typeof PagePrimaryButton;
+    var SecondaryButton: typeof PageSecondaryButton;
+    var Menu: typeof PageMenu;
+    var Body: typeof PageBody;
 }
-interface PageWithIntroProps extends PageFoundationProps {
-    /**
-     * Content of the page. This supports basic markdown node types
-     * such as `_italic_`, `**bold**`, and `[link name](url)`.
-     */
-    readonly intro: string;
-    /**
-     * Causes any markdown links in the `intro` prop to open in a new
-     * tab, i.e. with `target="_blank"`.
-     *
-     * Can only be used if `intro` prop is also specified.
-     *
-     * Defaults to `false`.
-     */
-    readonly externalIntroLinks?: boolean;
-}
-export type PageProps = XOR<PageFoundationProps, PageWithIntroProps>;
-export declare function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width, primaryAction, secondaryAction, moreActionsMenu, }: PageProps): React.JSX.Element;
-export declare const getActionProps: (actionProps: ButtonActionProps) => ButtonProps;
+/**
+ * Groups the title area and actions into the page header layout.
+ * Place non-action content (title, subtitle) inside `Page.HeaderContent`
+ * and actions inside `Page.Actions`.
+ */
+declare function PageHeader({ children, ...rest }: PageHeaderProps): React.JSX.Element;
+/** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
+declare function PageHeaderContent({ children, ...rest }: PageHeaderContentProps): React.JSX.Element;
+/**
+ * Flex container for the page title and optional sibling elements such as
+ * status badges. Use when you need to display metadata alongside the heading.
+ *
+ * @example
+ * ```tsx
+ * <Page.TitleBar>
+ *   <Page.Title>Clients</Page.Title>
+ *   <StatusLabel label="Active" status="success" />
+ * </Page.TitleBar>
+ * ```
+ */
+declare function PageTitleBar({ children, ...rest }: PageTitleBarProps): React.JSX.Element;
+/**
+ * Renders the page heading as an H1. When metadata is present alongside the
+ * title, wrap both in `Page.TitleBar`.
+ */
+declare function PageTitle({ children, ...rest }: PageTitleProps): React.JSX.Element;
+/** Secondary text below the title. Always applies default Text/Emphasis styling. */
+declare function PageSubtitle({ children, ...rest }: PageSubtitleProps): React.JSX.Element;
+/** Introduction text between the header and body. Always applies default Text styling. */
+declare function PageIntro({ children }: PageIntroProps): React.JSX.Element;
+/** Container for action buttons and menu. Applies responsive actionGroup layout. */
+declare function PageActions({ children, ...rest }: PageActionsProps): React.JSX.Element;
+/** Positional container for the primary action. Should contain a Button element, e.g. <Page.PrimaryButton>. */
+declare function PageActionPrimary({ children, ref }: PageSlotProps): React.JSX.Element;
+/** Positional container for the secondary action. Should contain a Button element, e.g. <Page.SecondaryButton>. */
+declare function PageActionSecondary({ children, ref }: PageSlotProps): React.JSX.Element;
+/** Positional container for the menu action. Should contain Page.Menu or a custom Menu. */
+declare function PageActionMenu({ children, ref }: PageSlotProps): React.JSX.Element;
+/** Default primary Button with opinionated styling. Use inside Page.ActionPrimary. */
+declare function PagePrimaryButton({ ref, label, onClick, icon, disabled, loading, ariaLabel, ...rest }: PageActionButtonProps): React.JSX.Element;
+/** Default secondary Button with opinionated styling. Use inside Page.ActionSecondary. */
+declare function PageSecondaryButton({ ref, label, onClick, icon, disabled, loading, ariaLabel, ...rest }: PageActionButtonProps): React.JSX.Element;
+/**
+ * "More Actions" menu with a default trigger button.
+ * Consumers supply Menu.Item children (in case custom routing is needed,
+ * e.g. wrapping Menu.Item with createLink() from TanStack Router).
+ */
+declare function PageMenu({ children, triggerLabel, ...rest }: PageMenuProps): React.JSX.Element;
+/** Main content area of the page. */
+declare function PageBody({ children }: PageBodyProps): React.JSX.Element;
+export declare const getActionProps: (actionProps?: ButtonActionProps) => ButtonProps;
 export {};

package/dist/Page/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var Page = require('../Page-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('@jobber/hooks');
@@ -14,7 +15,6 @@ require('react/jsx-runtime');
 require('../_commonjsHelpers-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
-require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
@@ -25,6 +25,7 @@ require('../Tree-cjs.js');
 require('../clsx-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
+require('../filterDataAttributes-cjs.js');
 
 
 

package/dist/Page/index.d.ts

@@ -1 +1,2 @@
-export { Page, type PageProps } from "./Page";
+export { Page } from "./Page";
+export type { ButtonActionProps, PageActionButtonProps, PageComposableProps, PageLegacyProps, PageMenuProps, PageProps, PageSlotProps, } from "./types";

package/dist/Page/index.mjs

@@ -1,4 +1,5 @@
 export { P as Page } from '../Page-es.js';
+import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '@jobber/hooks';
@@ -12,7 +13,6 @@ import 'react/jsx-runtime';
 import '../_commonjsHelpers-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
-import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
@@ -23,3 +23,4 @@ import '../Tree-es.js';
 import '../clsx-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
+import '../filterDataAttributes-es.js';

package/dist/Page/types.d.ts

@@ -0,0 +1,120 @@
+import type { ReactNode, RefObject } from "react";
+import { type ButtonProps } from "../Button";
+import { type SectionProps } from "../Menu";
+export type ButtonActionProps = ButtonProps & {
+    ref?: React.RefObject<HTMLDivElement | null>;
+};
+interface PageBaseProps {
+    readonly children: ReactNode | ReactNode[];
+    /**
+     * Title of the page.
+     *
+     * Supports any React node. If a string is provided, it will be rendered as an H1 heading.
+     * Otherwise it will be rendered as is.
+     *
+     * **Important**: If you're passing a custom element, it must include an H1-level heading within it.
+     * Ideally <Heading level={1}> should be used here.
+     */
+    readonly title: ReactNode;
+    /**
+     * TitleMetaData component to be displayed
+     * next to the title. Only compatible with string titles.
+     */
+    readonly titleMetaData?: ReactNode;
+    /**
+     * Subtitle of the page.
+     */
+    readonly subtitle?: string;
+    /**
+     * Determines the width of the page.
+     *
+     * Fill makes the width grow to 100%.
+     *
+     * Standard caps out at 1280px.
+     *
+     * Narrow caps out at 1024px.
+     *
+     * @default standard
+     */
+    readonly width?: "fill" | "standard" | "narrow";
+    /**
+     * Page title primary action button settings.
+     */
+    readonly primaryAction?: ButtonActionProps;
+    /**
+     * Page title secondary action button settings.
+     */
+    readonly secondaryAction?: ButtonActionProps;
+    /**
+     * Page title Action menu.
+     */
+    readonly moreActionsMenu?: SectionProps[];
+}
+interface PageWithIntroProps extends PageBaseProps {
+    /**
+     * Content of the page. This supports basic markdown node types
+     * such as `_italic_`, `**bold**`, and `[link name](url)`.
+     */
+    readonly intro: string;
+    /**
+     * Causes any markdown links in the `intro` prop to open in a new
+     * tab, i.e. with `target="_blank"`.
+     *
+     * Can only be used if `intro` prop is also specified.
+     *
+     * Defaults to `false`.
+     */
+    readonly externalIntroLinks?: boolean;
+}
+interface PageWithoutIntroProps extends PageBaseProps {
+    readonly intro?: never;
+    readonly externalIntroLinks?: never;
+}
+export type PageLegacyProps = PageWithIntroProps | PageWithoutIntroProps;
+export interface PageComposableProps {
+    readonly children: ReactNode;
+    readonly width?: "fill" | "standard" | "narrow";
+}
+export type PageProps = PageLegacyProps | PageComposableProps;
+export interface PageHeaderProps {
+    readonly children: ReactNode;
+}
+export interface PageHeaderContentProps {
+    readonly children: ReactNode;
+}
+export interface PageTitleBarProps {
+    readonly children: ReactNode;
+}
+export interface PageTitleProps {
+    readonly children: ReactNode;
+}
+export interface PageSubtitleProps {
+    readonly children: ReactNode;
+}
+export interface PageIntroProps {
+    readonly children: ReactNode;
+}
+export interface PageActionsProps {
+    readonly children: ReactNode;
+}
+export interface PageSlotProps {
+    readonly children: ReactNode;
+    readonly ref?: RefObject<HTMLDivElement | null>;
+}
+export interface PageActionButtonProps {
+    readonly ref?: RefObject<HTMLDivElement | null>;
+    readonly label: string;
+    readonly onClick?: () => void;
+    readonly icon?: ButtonProps["icon"];
+    readonly disabled?: boolean;
+    readonly loading?: boolean;
+    readonly ariaLabel?: string;
+}
+export interface PageMenuProps {
+    readonly children: ReactNode;
+    readonly triggerLabel?: string;
+}
+export interface PageBodyProps {
+    readonly children: ReactNode;
+}
+export {};

package/dist/Page-cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
@@ -10,11 +11,27 @@ var Markdown = require('./Markdown-cjs.js');
 var Button = require('./Button-cjs.js');
 var Menu = require('./Menu-cjs.js');
 var Emphasis = require('./Emphasis-cjs.js');
+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-"};
 
-function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
-    const pageStyles = classnames(styles.page, styles[width]);
+/** 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"]);
+    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)));
+}
+/** Props-based renderer. Preserves the original Page behavior for existing consumers. */
+function PageLegacy(_a) {
+    var { title, titleMetaData, intro, externalIntroLinks, subtitle, children, primaryAction, secondaryAction, moreActionsMenu = [], pageStyles } = _a, rest = tslib_es6.__rest(_a, ["title", "titleMetaData", "intro", "externalIntroLinks", "subtitle", "children", "primaryAction", "secondaryAction", "moreActionsMenu", "pageStyles"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
     const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
     const titleBarClasses = classnames(styles.titleBar, {
         [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
@@ -23,16 +40,7 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;
-    if (primaryAction != undefined) {
-        primaryAction = Object.assign({ fullWidth: true }, primaryAction);
-    }
-    if (secondaryAction != undefined) {
-        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
-    }
-    if (secondaryAction != undefined) {
-        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
-    }
-    return (React.createElement("div", { className: pageStyles },
+    return (React.createElement("div", Object.assign({ className: pageStyles }, dataAttrs),
         React.createElement(Content.Content, null,
             React.createElement(Content.Content, null,
                 React.createElement("div", { className: titleBarClasses, ref: titleBarRef },
@@ -46,20 +54,144 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
                                     React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
                     showActionGroup && (React.createElement("div", { className: styles.actionGroup },
                         primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
-                            React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction))))),
+                            React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
                         secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
-                            React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction))))),
+                            React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
                         showMenu && (React.createElement("div", { className: styles.actionButton },
                             React.createElement(Menu.Menu, { items: moreActionsMenu })))))),
                 intro && (React.createElement(Text.Text, { size: "large" },
                     React.createElement(Markdown.Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
             React.createElement(Content.Content, null, children))));
 }
+/**
+ * Groups the title area and actions into the page header layout.
+ * Place non-action content (title, subtitle) inside `Page.HeaderContent`
+ * and actions inside `Page.Actions`.
+ */
+function PageHeader(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
+    const titleBarClasses = classnames(styles.titleBar, {
+        [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
+        [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
+    });
+    return (React.createElement("div", Object.assign({ className: titleBarClasses, ref: titleBarRef }, dataAttrs), children));
+}
+/** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
+function PageHeaderContent(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return React.createElement("div", Object.assign({}, dataAttrs), children);
+}
+/**
+ * Flex container for the page title and optional sibling elements such as
+ * status badges. Use when you need to display metadata alongside the heading.
+ *
+ * @example
+ * ```tsx
+ * <Page.TitleBar>
+ *   <Page.Title>Clients</Page.Title>
+ *   <StatusLabel label="Active" status="success" />
+ * </Page.TitleBar>
+ * ```
+ */
+function PageTitleBar(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({ className: styles.titleRow }, dataAttrs), children));
+}
+/**
+ * Renders the page heading as an H1. When metadata is present alongside the
+ * title, wrap both in `Page.TitleBar`.
+ */
+function PageTitle(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement(Heading.Heading, Object.assign({ level: 1 }, dataAttrs), children));
+}
+/** Secondary text below the title. Always applies default Text/Emphasis styling. */
+function PageSubtitle(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({ className: styles.subtitle }, dataAttrs),
+        React.createElement(Text.Text, { size: "large", variation: "subdued" },
+            React.createElement(Emphasis.Emphasis, { variation: "bold" }, children))));
+}
+/** Introduction text between the header and body. Always applies default Text styling. */
+function PageIntro({ children }) {
+    return React.createElement(Text.Text, { size: "large" }, children);
+}
+/** Container for action buttons and menu. Applies responsive actionGroup layout. */
+function PageActions(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({ className: styles.actionGroup }, dataAttrs), children));
+}
+/** Positional container for the primary action. Should contain a Button element, e.g. <Page.PrimaryButton>. */
+function PageActionPrimary({ children, ref }) {
+    return (React.createElement("div", { className: styles.primaryAction, ref: ref }, children));
+}
+/** Positional container for the secondary action. Should contain a Button element, e.g. <Page.SecondaryButton>. */
+function PageActionSecondary({ children, ref }) {
+    return (React.createElement("div", { className: styles.actionButton, ref: ref }, children));
+}
+/** Positional container for the menu action. Should contain Page.Menu or a custom Menu. */
+function PageActionMenu({ children, ref }) {
+    return (React.createElement("div", { className: styles.actionButton, ref: ref }, children));
+}
+/** Default primary Button with opinionated styling. Use inside Page.ActionPrimary. */
+function PagePrimaryButton(_a) {
+    var { ref, label, onClick, icon, disabled, loading, ariaLabel } = _a, rest = tslib_es6.__rest(_a, ["ref", "label", "onClick", "icon", "disabled", "loading", "ariaLabel"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({ ref: ref }, dataAttrs),
+        React.createElement(Button.Button, { label: label, onClick: onClick, icon: icon, disabled: disabled, loading: loading, ariaLabel: ariaLabel, fullWidth: true })));
+}
+/** Default secondary Button with opinionated styling. Use inside Page.ActionSecondary. */
+function PageSecondaryButton(_a) {
+    var { ref, label, onClick, icon, disabled, loading, ariaLabel } = _a, rest = tslib_es6.__rest(_a, ["ref", "label", "onClick", "icon", "disabled", "loading", "ariaLabel"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({ ref: ref }, dataAttrs),
+        React.createElement(Button.Button, { label: label, onClick: onClick, icon: icon, disabled: disabled, loading: loading, ariaLabel: ariaLabel, fullWidth: true, type: "secondary" })));
+}
+/**
+ * "More Actions" menu with a default trigger button.
+ * Consumers supply Menu.Item children (in case custom routing is needed,
+ * e.g. wrapping Menu.Item with createLink() from TanStack Router).
+ */
+function PageMenu(_a) {
+    var { children, triggerLabel = "More Actions" } = _a, rest = tslib_es6.__rest(_a, ["children", "triggerLabel"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    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))));
+}
+/** Main content area of the page. */
+function PageBody({ children }) {
+    return React.createElement(Content.Content, null, children);
+}
 const getActionProps = (actionProps) => {
-    const buttonProps = Object.assign({}, actionProps);
-    if (actionProps.ref)
+    const buttonProps = (actionProps !== null && actionProps !== void 0 ? actionProps : {});
+    if (actionProps === null || actionProps === void 0 ? void 0 : actionProps.ref)
         delete buttonProps.ref;
     return buttonProps;
 };
+Page.Header = PageHeader;
+Page.HeaderContent = PageHeaderContent;
+Page.TitleBar = PageTitleBar;
+Page.Title = PageTitle;
+Page.Subtitle = PageSubtitle;
+Page.Intro = PageIntro;
+Page.Actions = PageActions;
+Page.ActionPrimary = PageActionPrimary;
+Page.ActionSecondary = PageActionSecondary;
+Page.ActionMenu = PageActionMenu;
+Page.PrimaryButton = PagePrimaryButton;
+Page.SecondaryButton = PageSecondaryButton;
+Page.Menu = PageMenu;
+Page.Body = PageBody;
 
 exports.Page = Page;

package/dist/Page-es.js

@@ -1,3 +1,4 @@
+import { _ as __rest } from './tslib.es6-es.js';
 import React__default from 'react';
 import classnames from 'classnames';
 import { useResizeObserver, Breakpoints } from '@jobber/hooks';
@@ -8,11 +9,27 @@ import { M as Markdown } from './Markdown-es.js';
 import { B as Button } from './Button-es.js';
 import { M as Menu } from './Menu-es.js';
 import { E as Emphasis } from './Emphasis-es.js';
+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-"};
 
-function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
-    const pageStyles = classnames(styles.page, styles[width]);
+/** 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"]);
+    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)));
+}
+/** Props-based renderer. Preserves the original Page behavior for existing consumers. */
+function PageLegacy(_a) {
+    var { title, titleMetaData, intro, externalIntroLinks, subtitle, children, primaryAction, secondaryAction, moreActionsMenu = [], pageStyles } = _a, rest = __rest(_a, ["title", "titleMetaData", "intro", "externalIntroLinks", "subtitle", "children", "primaryAction", "secondaryAction", "moreActionsMenu", "pageStyles"]);
+    const dataAttrs = filterDataAttributes(rest);
     const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
     const titleBarClasses = classnames(styles.titleBar, {
         [styles.small]: titleBarWidth > Breakpoints.smaller,
@@ -21,16 +38,7 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;
-    if (primaryAction != undefined) {
-        primaryAction = Object.assign({ fullWidth: true }, primaryAction);
-    }
-    if (secondaryAction != undefined) {
-        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
-    }
-    if (secondaryAction != undefined) {
-        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
-    }
-    return (React__default.createElement("div", { className: pageStyles },
+    return (React__default.createElement("div", Object.assign({ className: pageStyles }, dataAttrs),
         React__default.createElement(Content, null,
             React__default.createElement(Content, null,
                 React__default.createElement("div", { className: titleBarClasses, ref: titleBarRef },
@@ -44,20 +52,144 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
                                     React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
                     showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
                         primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
-                            React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction))))),
+                            React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
                         secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
-                            React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction))))),
+                            React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
                         showMenu && (React__default.createElement("div", { className: styles.actionButton },
                             React__default.createElement(Menu, { items: moreActionsMenu })))))),
                 intro && (React__default.createElement(Text, { size: "large" },
                     React__default.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
             React__default.createElement(Content, null, children))));
 }
+/**
+ * Groups the title area and actions into the page header layout.
+ * Place non-action content (title, subtitle) inside `Page.HeaderContent`
+ * and actions inside `Page.Actions`.
+ */
+function PageHeader(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
+    const titleBarClasses = classnames(styles.titleBar, {
+        [styles.small]: titleBarWidth > Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > Breakpoints.small,
+        [styles.large]: titleBarWidth > Breakpoints.base,
+    });
+    return (React__default.createElement("div", Object.assign({ className: titleBarClasses, ref: titleBarRef }, dataAttrs), children));
+}
+/** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
+function PageHeaderContent(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return React__default.createElement("div", Object.assign({}, dataAttrs), children);
+}
+/**
+ * Flex container for the page title and optional sibling elements such as
+ * status badges. Use when you need to display metadata alongside the heading.
+ *
+ * @example
+ * ```tsx
+ * <Page.TitleBar>
+ *   <Page.Title>Clients</Page.Title>
+ *   <StatusLabel label="Active" status="success" />
+ * </Page.TitleBar>
+ * ```
+ */
+function PageTitleBar(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({ className: styles.titleRow }, dataAttrs), children));
+}
+/**
+ * Renders the page heading as an H1. When metadata is present alongside the
+ * title, wrap both in `Page.TitleBar`.
+ */
+function PageTitle(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement(Heading, Object.assign({ level: 1 }, dataAttrs), children));
+}
+/** Secondary text below the title. Always applies default Text/Emphasis styling. */
+function PageSubtitle(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({ className: styles.subtitle }, dataAttrs),
+        React__default.createElement(Text, { size: "large", variation: "subdued" },
+            React__default.createElement(Emphasis, { variation: "bold" }, children))));
+}
+/** Introduction text between the header and body. Always applies default Text styling. */
+function PageIntro({ children }) {
+    return React__default.createElement(Text, { size: "large" }, children);
+}
+/** Container for action buttons and menu. Applies responsive actionGroup layout. */
+function PageActions(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({ className: styles.actionGroup }, dataAttrs), children));
+}
+/** Positional container for the primary action. Should contain a Button element, e.g. <Page.PrimaryButton>. */
+function PageActionPrimary({ children, ref }) {
+    return (React__default.createElement("div", { className: styles.primaryAction, ref: ref }, children));
+}
+/** Positional container for the secondary action. Should contain a Button element, e.g. <Page.SecondaryButton>. */
+function PageActionSecondary({ children, ref }) {
+    return (React__default.createElement("div", { className: styles.actionButton, ref: ref }, children));
+}
+/** Positional container for the menu action. Should contain Page.Menu or a custom Menu. */
+function PageActionMenu({ children, ref }) {
+    return (React__default.createElement("div", { className: styles.actionButton, ref: ref }, children));
+}
+/** Default primary Button with opinionated styling. Use inside Page.ActionPrimary. */
+function PagePrimaryButton(_a) {
+    var { ref, label, onClick, icon, disabled, loading, ariaLabel } = _a, rest = __rest(_a, ["ref", "label", "onClick", "icon", "disabled", "loading", "ariaLabel"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({ ref: ref }, dataAttrs),
+        React__default.createElement(Button, { label: label, onClick: onClick, icon: icon, disabled: disabled, loading: loading, ariaLabel: ariaLabel, fullWidth: true })));
+}
+/** Default secondary Button with opinionated styling. Use inside Page.ActionSecondary. */
+function PageSecondaryButton(_a) {
+    var { ref, label, onClick, icon, disabled, loading, ariaLabel } = _a, rest = __rest(_a, ["ref", "label", "onClick", "icon", "disabled", "loading", "ariaLabel"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({ ref: ref }, dataAttrs),
+        React__default.createElement(Button, { label: label, onClick: onClick, icon: icon, disabled: disabled, loading: loading, ariaLabel: ariaLabel, fullWidth: true, type: "secondary" })));
+}
+/**
+ * "More Actions" menu with a default trigger button.
+ * Consumers supply Menu.Item children (in case custom routing is needed,
+ * e.g. wrapping Menu.Item with createLink() from TanStack Router).
+ */
+function PageMenu(_a) {
+    var { children, triggerLabel = "More Actions" } = _a, rest = __rest(_a, ["children", "triggerLabel"]);
+    const dataAttrs = filterDataAttributes(rest);
+    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))));
+}
+/** Main content area of the page. */
+function PageBody({ children }) {
+    return React__default.createElement(Content, null, children);
+}
 const getActionProps = (actionProps) => {
-    const buttonProps = Object.assign({}, actionProps);
-    if (actionProps.ref)
+    const buttonProps = (actionProps !== null && actionProps !== void 0 ? actionProps : {});
+    if (actionProps === null || actionProps === void 0 ? void 0 : actionProps.ref)
         delete buttonProps.ref;
     return buttonProps;
 };
+Page.Header = PageHeader;
+Page.HeaderContent = PageHeaderContent;
+Page.TitleBar = PageTitleBar;
+Page.Title = PageTitle;
+Page.Subtitle = PageSubtitle;
+Page.Intro = PageIntro;
+Page.Actions = PageActions;
+Page.ActionPrimary = PageActionPrimary;
+Page.ActionSecondary = PageActionSecondary;
+Page.ActionMenu = PageActionMenu;
+Page.PrimaryButton = PagePrimaryButton;
+Page.SecondaryButton = PageSecondaryButton;
+Page.Menu = PageMenu;
+Page.Body = PageBody;
 
 export { Page as P };

package/dist/styles.css

@@ -7383,9 +7383,12 @@ h2.react-datepicker__current-month {
   width: 100%;
   max-width: 100%;
 }
-.OmFI-Bfdzgw- .react-datepicker-popper {
-  z-index: 6;
-  z-index: var(--elevation-datepicker);
+.LDxKi0E-1rg- {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
 }
 .Ma55F5Y-XhE- .react-datepicker__header {
   padding: 0;

package/dist/utils/meta/meta.json

@@ -158,6 +158,20 @@
     "MultiSelect",
     "Option",
     "Page",
+    "Page.ActionMenu",
+    "Page.ActionPrimary",
+    "Page.ActionSecondary",
+    "Page.Actions",
+    "Page.Body",
+    "Page.Header",
+    "Page.HeaderContent",
+    "Page.Intro",
+    "Page.Menu",
+    "Page.PrimaryButton",
+    "Page.SecondaryButton",
+    "Page.Subtitle",
+    "Page.Title",
+    "Page.TitleBar",
     "Popover",
     "Popover.Arrow",
     "Popover.DismissButton",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.112.0",
+  "version": "6.112.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "90895403e005129293895a62760365300e645978"
+  "gitHead": "5c6d2a8ba2313768db2fd1147c74de0b4e8c3710"
 }