@jobber/components 8.25.0 → 8.25.2

package/dist/dialogReturnFocus-es.js

@@ -4,11 +4,11 @@ import { useWindowDimensions } from '@jobber/hooks';
 import classnames from 'classnames';
 import { n as normalizeBaseUiButtonProps, i as isAtlantisButtonRenderTarget, s as stripNativeTypeFromButtonRenderTarget, r as renderAtlantisButtonTarget } from './buttonRenderAdapter-es.js';
 import { B as Button } from './Button-es.js';
-import { S as ScrollAreaRoot, e as ScrollAreaViewport, g as DialogRoot$1, h as DialogTrigger$1, i as DialogPortal } from './ScrollAreaViewport-es.js';
+import { S as ScrollAreaRoot, e as ScrollAreaViewport, g as DialogRoot, h as DialogTrigger$1, i as DialogPortal } from './ScrollAreaViewport-es.js';
+import { m as mergeProps } from './useRenderElement-es.js';
 import { H as Heading } from './Heading-es.js';
 import { a as BottomSheet, B as BottomSheetScrollAreaContext } from './BottomSheet-es.js';
 import { D as DrawerTitle, a as DrawerClose, b as DialogTitle$1, c as DialogClose$1 } from './DrawerTitle-es.js';
-import { m as mergeProps } from './useRenderElement-es.js';
 import { D as DrawerDescription, a as DialogBackdrop, b as DialogViewport, c as DialogPopup, d as DialogDescription, e as createDialogHandle } from './DrawerDescription-es.js';
 
 // Copied from Menu's constant so the two surfaces agree on what "mobile" means.
@@ -79,6 +79,24 @@ function resolveComposableCloseRender({ children, render, }) {
     return renderAtlantisButtonTarget(React__default.createElement(Button, { type: "tertiary", variation: "subtle", ariaLabel: "Close dialog" },
         React__default.createElement(Button.Icon, { name: "remove" })));
 }
+/**
+ * Adapts a `Dialog.Content` `render` for the bottom sheet's drawer popup. A
+ * render element passes through; a render function is wrapped to receive the
+ * drawer's state re-shaped as the dialog popup's state (e.g. `nestedDrawerOpen`
+ * becomes `nestedDialogOpen`), so `render` sees the same shape as the desktop
+ * dialog.
+ */
+function resolveBottomSheetContentRender(render) {
+    if (typeof render !== "function") {
+        return render;
+    }
+    return (props, drawerState) => render(props, {
+        open: drawerState.open,
+        transitionStatus: drawerState.transitionStatus,
+        nested: drawerState.nested,
+        nestedDialogOpen: drawerState.nestedDrawerOpen,
+    });
+}
 const DialogContext = React__default.createContext({
     type: "dialog",
     size: "base",
@@ -132,15 +150,26 @@ function SharedDialogFooter(_a) {
     const sticky = !useInsideDialogScrollArea();
     return (React__default.createElement("div", Object.assign({}, rest, { className: classnames(styles.footer, className), style: style, "data-sticky": sticky || undefined, "data-testid": "ATL-Dialog-Footer" }), children));
 }
+function renderActionButton(action, defaults) {
+    if (!action)
+        return null;
+    return isValidElement(action) ? (action) : (React__default.createElement(Button, Object.assign({}, mergeProps(defaults, action))));
+}
 /**
  * The action-button layout: tertiary on the left, primary/secondary grouped on
  * the right. Drop it inside a `Dialog.Footer`.
  */
 function DialogActions(_a) {
     var { primary, secondary, tertiary, align = "right", className, style } = _a, rest = __rest(_a, ["primary", "secondary", "tertiary", "align", "className", "style"]);
-    const secondaryAction = secondary && isValidElement(secondary) ? (secondary) : (React__default.createElement(Button, Object.assign({ type: "primary", variation: "subtle" }, secondary)));
-    const primaryAction = primary && isValidElement(primary) ? (primary) : (React__default.createElement(Button, Object.assign({ type: "primary" }, primary)));
-    const tertiaryAction = tertiary && isValidElement(tertiary) ? (tertiary) : (React__default.createElement(Button, Object.assign({ type: "secondary", variation: "destructive" }, tertiary)));
+    const primaryAction = renderActionButton(primary, { type: "primary" });
+    const secondaryAction = renderActionButton(secondary, {
+        type: "primary",
+        variation: "subtle",
+    });
+    const tertiaryAction = renderActionButton(tertiary, {
+        type: "secondary",
+        variation: "destructive",
+    });
     return (React__default.createElement("div", Object.assign({}, rest, { className: classnames(actionsStyles.actions, [actionsStyles[`align-${align}`]], className), style: style, "data-testid": "ATL-Dialog-Actions" }),
         tertiary && (React__default.createElement("div", { className: actionsStyles.leftActions }, tertiaryAction)),
         React__default.createElement("div", { className: classnames(actionsStyles.buttonGroup, actionsStyles[`align-${align}`]) },
@@ -148,20 +177,23 @@ function DialogActions(_a) {
             primary && primaryAction)));
 }
 
-function DialogBottomSheetRoot(props) {
+function DialogBottomSheet(props) {
     return (React__default.createElement(BottomSheet.Root, Object.assign({}, props)));
 }
 function DialogBottomSheetTrigger(props) {
     return (React__default.createElement(BottomSheet.Trigger, Object.assign({}, props)));
 }
 function DialogBottomSheetContent(_a) {
-    var { children, className, style } = _a, rest = __rest(_a, ["children", "className", "style"]);
+    var { children, className, style, render } = _a, rest = __rest(_a, ["children", "className", "style", "render"]);
     const { type, size, finalFocus } = useDialogContext();
     return (
     // Opt-out of the BottomSheet's built-in scroll area.
     // Dialog will handle the scroll area itself.
     React__default.createElement(BottomSheetScrollAreaContext.Provider, { value: false },
-        React__default.createElement(BottomSheet.Popup, Object.assign({}, rest, { className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }), children)));
+        React__default.createElement(BottomSheet.Popup, Object.assign({}, rest, { 
+            // The bottom sheet is backed by a drawer popup, so re-shape its state
+            // into the dialog popup state the consumer's `render` is typed against.
+            render: resolveBottomSheetContentRender(render), className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }), children)));
 }
 function DialogBottomSheetTitle(_a) {
     var { children } = _a, rest = __rest(_a, ["children"]);
@@ -192,19 +224,17 @@ function DialogBottomSheetBody(_a) {
     return insideScrollArea ? (content) : (React__default.createElement(DialogBottomSheetScrollArea, null, content));
 }
 /** Mobile shell: a bottom sheet built on the BottomSheet/Drawer primitives. */
-const DialogBottomSheet = Object.assign(DialogBottomSheetRoot, {
-    Trigger: DialogBottomSheetTrigger,
-    Content: DialogBottomSheetContent,
-    Header: SharedDialogHeader,
-    Title: DialogBottomSheetTitle,
-    Close: DialogBottomSheetClose,
-    Body: DialogBottomSheetBody,
-    Footer: SharedDialogFooter,
-    ScrollArea: DialogBottomSheetScrollArea,
-});
+DialogBottomSheet.Trigger = DialogBottomSheetTrigger;
+DialogBottomSheet.Content = DialogBottomSheetContent;
+DialogBottomSheet.Header = SharedDialogHeader;
+DialogBottomSheet.Title = DialogBottomSheetTitle;
+DialogBottomSheet.Close = DialogBottomSheetClose;
+DialogBottomSheet.Body = DialogBottomSheetBody;
+DialogBottomSheet.Footer = SharedDialogFooter;
+DialogBottomSheet.ScrollArea = DialogBottomSheetScrollArea;
 
-function DialogModalRoot(props) {
-    return React__default.createElement(DialogRoot$1, Object.assign({}, props));
+function DialogModal(props) {
+    return React__default.createElement(DialogRoot, Object.assign({}, props));
 }
 function DialogModalTrigger(_a) {
     var { children, render, handle, payload, className, style } = _a, rest = __rest(_a, ["children", "render", "handle", "payload", "className", "style"]);
@@ -236,17 +266,14 @@ function DialogModalBody(_a) {
     const content = (React__default.createElement(DialogDescription, { render: descriptionProps => (React__default.createElement("div", Object.assign({}, rest, descriptionProps, { className: classnames(styles.body, { [styles.fullBleed]: fullBleed }, className), style: style }), children)) }));
     return insideScrollArea ? (content) : (React__default.createElement(DialogScrollArea$1, null, content));
 }
-const DialogModal = Object.assign(DialogModalRoot, {
-    Trigger: DialogModalTrigger,
-    Content: DialogModalContent,
-    Header: SharedDialogHeader,
-    Title: DialogModalTitle,
-    Close: DialogModalClose,
-    Body: DialogModalBody,
-    Footer: SharedDialogFooter,
-    // The modal keeps the plain native-scrollbar scroll region.
-    ScrollArea: DialogScrollArea$1,
-});
+DialogModal.Trigger = DialogModalTrigger;
+DialogModal.Content = DialogModalContent;
+DialogModal.Header = SharedDialogHeader;
+DialogModal.Title = DialogModalTitle;
+DialogModal.Close = DialogModalClose;
+DialogModal.Body = DialogModalBody;
+DialogModal.Footer = SharedDialogFooter;
+DialogModal.ScrollArea = DialogScrollArea$1;
 
 /**
  * Creates a handle that opens/closes a `Dialog` from detached triggers (e.g. an
@@ -271,7 +298,7 @@ function useDialogShell() {
  * desktop, a bottom sheet on mobile. Compose it with `Dialog.Trigger`,
  * `Dialog.Content`, and the layout parts.
  */
-function DialogRoot(_a) {
+function Dialog(_a) {
     var { onRequestClose, size = "base", type = "dialog", finalFocus, children, onOpenChange } = _a, rest = __rest(_a, ["onRequestClose", "size", "type", "finalFocus", "children", "onOpenChange"]);
     function handleOpenChange(nextOpen, eventDetails) {
         if (!nextOpen) {
@@ -337,7 +364,6 @@ function DialogScrollArea(props) {
     const Shell = useDialogShell();
     return React__default.createElement(Shell.ScrollArea, Object.assign({}, props));
 }
-const Dialog = DialogRoot;
 Dialog.Trigger = DialogTrigger;
 Dialog.Content = DialogContent;
 Dialog.Header = DialogHeader;