@jobber/components 8.27.0 → 8.27.1

package/dist/dialogReturnFocus-cjs.js

@@ -133,11 +133,11 @@ function useInsideDialogScrollArea() {
  * backed by the BottomSheet primitive's scroll area, for its fade.)
  */
 function DialogScrollArea$1({ children, className, style, }) {
-    return (React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: classnames(styles.scrollRegion, className), style: style },
+    return (React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: classnames(styles.scrollRegion, className), style: style, "data-testid": "ATL-Dialog-ScrollRegion" },
         React.createElement(ScrollAreaViewport.ScrollAreaViewport, { className: styles.scrollViewport, 
             // BaseUI defaults the viewport to `overflow: scroll`; `auto` so the
             // native scrollbar only shows when the content overflows.
-            style: { overflow: "auto" } },
+            style: { overflow: "auto" }, "data-testid": "ATL-Dialog-ScrollViewport" },
             React.createElement(DialogScrollAreaContext.Provider, { value: true }, children))));
 }
 /** Layout-only header row; sticky unless nested inside a `Dialog.ScrollArea`. */
@@ -195,7 +195,9 @@ function DialogBottomSheetContent(_a) {
         React.createElement(BottomSheet.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)));
+            render: resolveBottomSheetContentRender(render), className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }),
+            React.createElement(ScrollAreaViewport.DrawerContent, { "data-base-ui-swipe-ignore": true },
+                React.createElement(DialogScrollAreaContext.Provider, { value: false }, children)))));
 }
 function DialogBottomSheetTitle(_a) {
     var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
@@ -247,8 +249,9 @@ function DialogModalContent(_a) {
     const { type, size, finalFocus } = useDialogContext();
     return (React.createElement(ScrollAreaViewport.DialogPortal, null,
         React.createElement(DrawerDescription.DialogBackdrop, { forceRender: true, className: styles.backdrop, "data-testid": "ATL-Dialog-Backdrop" }),
-        React.createElement(DrawerDescription.DialogViewport, { className: styles.viewport },
-            React.createElement(DrawerDescription.DialogPopup, Object.assign({}, rest, { className: classnames(styles.popup, styles[size], className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "modal" }), children))));
+        React.createElement(ScrollAreaViewport.DialogViewport, { className: styles.viewport },
+            React.createElement(DrawerDescription.DialogPopup, Object.assign({}, rest, { className: classnames(styles.popup, styles[size], className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "modal" }),
+                React.createElement(DialogScrollAreaContext.Provider, { value: false }, children)))));
 }
 function DialogModalTitle(_a) {
     var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);

package/dist/dialogReturnFocus-es.js

@@ -4,12 +4,12 @@ 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, h as DialogTrigger$1, i as DialogPortal } from './ScrollAreaViewport-es.js';
+import { S as ScrollAreaRoot, f as ScrollAreaViewport, g as DrawerContent, j as DialogRoot, k as DialogTrigger$1, l as DialogPortal, m as DialogViewport } 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 { D as DrawerDescription, a as DialogBackdrop, b as DialogViewport, c as DialogPopup, d as DialogDescription, e as createDialogHandle } from './DrawerDescription-es.js';
+import { D as DrawerDescription, a as DialogBackdrop, b as DialogPopup, c as DialogDescription, d as createDialogHandle } from './DrawerDescription-es.js';
 
 // Copied from Menu's constant so the two surfaces agree on what "mobile" means.
 // (The proposal calls for copying shared Menu values into the component first
@@ -131,11 +131,11 @@ function useInsideDialogScrollArea() {
  * backed by the BottomSheet primitive's scroll area, for its fade.)
  */
 function DialogScrollArea$1({ children, className, style, }) {
-    return (React__default.createElement(ScrollAreaRoot, { className: classnames(styles.scrollRegion, className), style: style },
+    return (React__default.createElement(ScrollAreaRoot, { className: classnames(styles.scrollRegion, className), style: style, "data-testid": "ATL-Dialog-ScrollRegion" },
         React__default.createElement(ScrollAreaViewport, { className: styles.scrollViewport, 
             // BaseUI defaults the viewport to `overflow: scroll`; `auto` so the
             // native scrollbar only shows when the content overflows.
-            style: { overflow: "auto" } },
+            style: { overflow: "auto" }, "data-testid": "ATL-Dialog-ScrollViewport" },
             React__default.createElement(DialogScrollAreaContext.Provider, { value: true }, children))));
 }
 /** Layout-only header row; sticky unless nested inside a `Dialog.ScrollArea`. */
@@ -193,7 +193,9 @@ function DialogBottomSheetContent(_a) {
         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)));
+            render: resolveBottomSheetContentRender(render), className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }),
+            React__default.createElement(DrawerContent, { "data-base-ui-swipe-ignore": true },
+                React__default.createElement(DialogScrollAreaContext.Provider, { value: false }, children)))));
 }
 function DialogBottomSheetTitle(_a) {
     var { children } = _a, rest = __rest(_a, ["children"]);
@@ -246,7 +248,8 @@ function DialogModalContent(_a) {
     return (React__default.createElement(DialogPortal, null,
         React__default.createElement(DialogBackdrop, { forceRender: true, className: styles.backdrop, "data-testid": "ATL-Dialog-Backdrop" }),
         React__default.createElement(DialogViewport, { className: styles.viewport },
-            React__default.createElement(DialogPopup, Object.assign({}, rest, { className: classnames(styles.popup, styles[size], className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "modal" }), children))));
+            React__default.createElement(DialogPopup, Object.assign({}, rest, { className: classnames(styles.popup, styles[size], className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "modal" }),
+                React__default.createElement(DialogScrollAreaContext.Provider, { value: false }, children)))));
 }
 function DialogModalTitle(_a) {
     var { children } = _a, rest = __rest(_a, ["children"]);

package/dist/styles.css

@@ -4055,7 +4055,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
    */
 }
 
-.Qf3IFhKJwQ0-:has(~ ._868PDAA3U2M-[data-nested-drawer-open]) {
+.Qf3IFhKJwQ0-:has(~ .U069n8h0urk- ._868PDAA3U2M-[data-nested-drawer-open]) {
     background-color: transparent;
   }
 
@@ -4154,6 +4154,24 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   }
 }
 
+/*
+ * Positioning container for the popup, spanning the whole screen. Base UI's
+ * Drawer expects the popup to render within a viewport (it enables swipe
+ * handling and touch scroll locking). The popup positions itself (fixed, pinned
+ * to the bottom); the viewport only establishes the full-screen area above the
+ * backdrop.
+ */
+
+.U069n8h0urk- {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+}
+
 .yL7--3ni8BM- {
   display: -ms-flexbox;
   display: flex;
@@ -10381,8 +10399,14 @@ h2.react-datepicker__current-month {
   --dialog-popup-max-width: 1032px;
 }
 .nJoCr8oWJ7w- {
-  --dialog-popup-width: 100vw;
-  --dialog-popup-max-width: 100vw;
+  /* Use 100% (not 100vw) so the popup fills the viewport's scrollable content
+     box rather than the full vw since the vertical scrollbar takes up layout space */
+  --dialog-popup-width: 100%;
+  --dialog-popup-max-width: 100%;
+  /* Always cap the popup to the viewport height for full-screen, regardless of
+     whether any region is sticky. Without this, the "nothing-sticky" scroll
+     composition will not be able to scroll. */
+  --dialog-popup-max-height: 100dvh;
   --dialog-popup-min-height: 100dvh;
   /* No margins full screen — the viewport also drops its padding-block for
      fullScreen (below) so the popup sits flush against every edge. Zeroing the
@@ -10456,12 +10480,8 @@ h2.react-datepicker__current-month {
   padding: 0 24px 24px;
   padding: 0 var(--space-large) var(--space-large);
 }
-/* Slide the bottom sheet up from the bottom on open/close. */
+/* Slide the sheet up on open, down on close. */
 .vmcZRwOcNMo- {
-  -webkit-transform: translateY(0px);
-  -webkit-transform: translateY(var(--drawer-swipe-movement-y, 0px));
-          transform: translateY(0px);
-          transform: translateY(var(--drawer-swipe-movement-y, 0px));
   transition: -webkit-transform 200ms ease;
   transition: -webkit-transform var(--timing-base) ease;
   transition: transform 200ms ease;
@@ -10474,12 +10494,44 @@ h2.react-datepicker__current-month {
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
+/*
+   * Only transform the sheet mid-swipe, never while it's just sitting open.
+   * Why it matters: any transform on this element makes its `position: fixed`
+   * children size themselves to the sheet instead of the screen. FilterPicker's
+   * click-away layer is one of those fixed, full-screen children — with a
+   * transform here it shrinks to the sheet's box, so tapping the backdrop misses
+   * it, hits the sheet, and closes the whole sheet instead of just the picker.
+   * A swipe is the one time we need the transform, and there's no open picker to
+   * break then. base-ui adds `data-swiping` and updates the movement variable
+   * while a swipe is happening.
+   */
+.vmcZRwOcNMo-[data-swiping] {
+    -webkit-transform: translateY(0px);
+    -webkit-transform: translateY(var(--drawer-swipe-movement-y, 0px));
+            transform: translateY(0px);
+            transform: translateY(var(--drawer-swipe-movement-y, 0px));
+  }
 /* Full-screen bottom sheet */
 .vmcZRwOcNMo-[data-size="fullScreen"] {
   height: 100dvh;
   max-height: 100dvh;
   border-radius: 0;
 }
+/* The sheet content renders inside a `Drawer.Content` region (`data-drawer-content`,
+   swipe-ignored so a nested floater can catch an outside press). It's a direct
+   child of the popup, so pass the popup's flex column through it — otherwise the
+   Header/ScrollArea/Footer no longer flex against the popup and the scroll region
+   can't fill/scroll (most visibly on fullScreen at 100dvh). */
+.vmcZRwOcNMo- > [data-drawer-content] {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  min-height: 0;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  overflow: hidden;
+}
 /* Scroll divider — shown on a sticky Header/Footer only while the scroll region
    actually overflows (BaseUI sets `data-has-overflow-y` on the ScrollArea root
    when its content overflows). */
@@ -10548,8 +10600,12 @@ h2.react-datepicker__current-month {
     background-color: transparent;
     backdrop-filter: none;
   }
-/* Bottom sheet backdrop */
-[data-testid="ATL-BottomSheet-Backdrop"]:has(~ [data-dialog-variant="sheet"]) {
+/* Bottom sheet backdrop. The sheet popup (`data-dialog-variant="sheet"`) renders
+   inside the drawer viewport, which is the backdrop's following sibling, so
+   target the viewport by its testid then match the sheet popup within it. */
+[data-testid="ATL-BottomSheet-Backdrop"]:has(
+    ~ [data-testid="ATL-BottomSheet-Viewport"] [data-dialog-variant="sheet"]
+  ) {
   background-color: rgba(121, 119, 114, 0.48);
   backdrop-filter: blur(2px);
 }