@jobber/components 6.112.1 → 6.113.0

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/floating-ui.react-es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 
 function hasWindow() {

package/dist/index.cjs

@@ -112,12 +112,12 @@ require('react/jsx-runtime');
 require('react-dom');
 require('classnames');
 require('./maxHeight-cjs.js');
-require('./filterDataAttributes-cjs.js');
 require('./tslib.es6-cjs.js');
+require('react-hook-form');
+require('./filterDataAttributes-cjs.js');
 require('color');
 require('react-router-dom');
 require('./getMappedAtlantisSpaceToken-cjs.js');
-require('react-hook-form');
 require('./useChildComponent-cjs.js');
 require('./InternalChipDismissible-cjs.js');
 require('./useScrollToActive-cjs.js');

package/dist/index.mjs

@@ -110,12 +110,12 @@ import 'react/jsx-runtime';
 import 'react-dom';
 import 'classnames';
 import './maxHeight-es.js';
-import './filterDataAttributes-es.js';
 import './tslib.es6-es.js';
+import 'react-hook-form';
+import './filterDataAttributes-es.js';
 import 'color';
 import 'react-router-dom';
 import './getMappedAtlantisSpaceToken-es.js';
-import 'react-hook-form';
 import './useChildComponent-es.js';
 import './InternalChipDismissible-es.js';
 import './useScrollToActive-es.js';