@jobber/components 6.119.0 → 6.120.0

package/dist/Modal/Modal.types.d.ts

@@ -73,12 +73,26 @@ export interface ModalActionsProps {
      * Useful for actions like "Cancel" that are not destructive.
      */
     readonly tertiary?: ButtonProps;
+    /**
+     * Controls how the actions are positioned within the modal content.
+     * - "inline": actions flow with content
+     * - "sticky": actions stay visible at the bottom while content scrolls
+     * @default "inline"
+     */
+    readonly variant?: "inline" | "sticky";
 }
 interface HeaderPropsWithoutChildren {
     /**
      * Title of the modal.
      */
     readonly title: string;
+    /**
+     * Controls how the header is positioned within the modal content.
+     * - "inline": header flows with content
+     * - "sticky": header stays visible while content scrolls
+     * @default "inline"
+     */
+    readonly variant?: "inline" | "sticky";
     /**
      * Whether the modal is dismissible.
      */
@@ -88,7 +102,15 @@ interface HeaderPropsWithoutChildren {
      */
     onRequestClose?(): void;
 }
-type HeaderWithChildren = PropsWithChildren;
+type HeaderWithChildren = PropsWithChildren<{
+    /**
+     * Controls how the header is positioned within the modal content.
+     * - "inline": header flows with content
+     * - "sticky": header stays visible while content scrolls
+     * @default "inline"
+     */
+    readonly variant?: "inline" | "sticky";
+}>;
 export type HeaderProps = XOR<HeaderPropsWithoutChildren, HeaderWithChildren>;
 export interface ModalLegacyProps {
     /**

package/dist/Modal/index.cjs

@@ -172,7 +172,7 @@ function useModalContext() {
     return React.useContext(ModalContext);
 }
 
-var styles = {"overlay":"cRhQeXmZobs-","overlayBackground":"PO6ZUDxQoFE-","modal":"OiqCKNmbHZ0-","modalBody":"zM9SWwAd5Dg-","header":"GDWGHwmjgAc-","closeButton":"KJlGo4z-E6Q-","actionBar":"ZGrhWCAymCw-","leftAction":"hOiEWds2Vq8-","rightAction":"K31NzxPZP9s-","spinning":"SKeimJFlB-g-"};
+var styles = {"overlay":"cRhQeXmZobs-","overlayBackground":"PO6ZUDxQoFE-","modal":"OiqCKNmbHZ0-","modalWithStickyRegions":"_6dGKr5VVf9Y-","stickyHeaderRegion":"uo6BCADQuLU-","stickyActionsRegion":"Vq0y9ggAxtI-","modalBody":"zM9SWwAd5Dg-","header":"GDWGHwmjgAc-","closeButton":"KJlGo4z-E6Q-","actionBar":"ZGrhWCAymCw-","leftAction":"hOiEWds2Vq8-","rightAction":"K31NzxPZP9s-","spinning":"SKeimJFlB-g-"};
 
 function useModalStyles(size) {
     return {
@@ -229,6 +229,10 @@ function ModalOverlay({ children }) {
 function ModalContent({ children }) {
     const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, ariaLabel, getFloatingProps, startedInsideRef, } = useModalContext();
     const { modal } = useModalStyles(size);
+    const childrenArray = React.Children.toArray(children);
+    const { sticky: stickyHeaders, rest: afterHeaders } = extractSticky(childrenArray, ModalHeader, props => props.variant === "sticky");
+    const { sticky: stickyActions, rest: bodyChildren } = extractSticky(afterHeaders, ModalActions, props => props.variant === "sticky");
+    const hasStickyRegions = stickyHeaders.length > 0 || stickyActions.length > 0;
     return (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement(floatingUi_react.FloatingNode, { id: floatingNodeId },
         React.createElement(floatingUi_react.FloatingPortal, null,
             React.createElement(AtlantisPortalContent.AtlantisPortalContent, null,
@@ -239,7 +243,9 @@ function ModalContent({ children }) {
                                 ease: "easeInOut",
                             }, ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, "data-modal-node-id": floatingNodeId }, getFloatingProps({
                             role: "dialog",
-                            className: modal,
+                            className: hasStickyRegions
+                                ? `${modal} ${styles.modalWithStickyRegions}`
+                                : modal,
                             "aria-labelledby": modalLabelledBy,
                             "aria-label": ariaLabel,
                             "aria-modal": true,
@@ -248,7 +254,22 @@ function ModalContent({ children }) {
                                 if (startedInsideRef)
                                     startedInsideRef.current = true;
                             } }),
-                            React.createElement("div", { className: styles.modalBody, tabIndex: -1 }, children))))))))));
+                            stickyHeaders.length > 0 && (React.createElement("div", { className: styles.stickyHeaderRegion }, stickyHeaders)),
+                            React.createElement("div", { className: styles.modalBody, tabIndex: -1 }, bodyChildren),
+                            stickyActions.length > 0 && (React.createElement("div", { className: styles.stickyActionsRegion }, stickyActions)))))))))));
+}
+function extractSticky(children, componentType, match) {
+    const sticky = [];
+    const rest = children.filter(child => {
+        if (React.isValidElement(child) &&
+            child.type === componentType &&
+            match(child.props)) {
+            sticky.push(child);
+            return false;
+        }
+        return true;
+    });
+    return { sticky, rest };
 }
 
 function Modal(props) {

package/dist/Modal/index.mjs

@@ -170,7 +170,7 @@ function useModalContext() {
     return useContext(ModalContext);
 }
 
-var styles = {"overlay":"cRhQeXmZobs-","overlayBackground":"PO6ZUDxQoFE-","modal":"OiqCKNmbHZ0-","modalBody":"zM9SWwAd5Dg-","header":"GDWGHwmjgAc-","closeButton":"KJlGo4z-E6Q-","actionBar":"ZGrhWCAymCw-","leftAction":"hOiEWds2Vq8-","rightAction":"K31NzxPZP9s-","spinning":"SKeimJFlB-g-"};
+var styles = {"overlay":"cRhQeXmZobs-","overlayBackground":"PO6ZUDxQoFE-","modal":"OiqCKNmbHZ0-","modalWithStickyRegions":"_6dGKr5VVf9Y-","stickyHeaderRegion":"uo6BCADQuLU-","stickyActionsRegion":"Vq0y9ggAxtI-","modalBody":"zM9SWwAd5Dg-","header":"GDWGHwmjgAc-","closeButton":"KJlGo4z-E6Q-","actionBar":"ZGrhWCAymCw-","leftAction":"hOiEWds2Vq8-","rightAction":"K31NzxPZP9s-","spinning":"SKeimJFlB-g-"};
 
 function useModalStyles(size) {
     return {
@@ -227,6 +227,10 @@ function ModalOverlay({ children }) {
 function ModalContent({ children }) {
     const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, ariaLabel, getFloatingProps, startedInsideRef, } = useModalContext();
     const { modal } = useModalStyles(size);
+    const childrenArray = React__default.Children.toArray(children);
+    const { sticky: stickyHeaders, rest: afterHeaders } = extractSticky(childrenArray, ModalHeader, props => props.variant === "sticky");
+    const { sticky: stickyActions, rest: bodyChildren } = extractSticky(afterHeaders, ModalActions, props => props.variant === "sticky");
+    const hasStickyRegions = stickyHeaders.length > 0 || stickyActions.length > 0;
     return (React__default.createElement(AnimatePresence, null, open && (React__default.createElement(FloatingNode, { id: floatingNodeId },
         React__default.createElement(FloatingPortal, null,
             React__default.createElement(AtlantisPortalContent, null,
@@ -237,7 +241,9 @@ function ModalContent({ children }) {
                                 ease: "easeInOut",
                             }, ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, "data-modal-node-id": floatingNodeId }, getFloatingProps({
                             role: "dialog",
-                            className: modal,
+                            className: hasStickyRegions
+                                ? `${modal} ${styles.modalWithStickyRegions}`
+                                : modal,
                             "aria-labelledby": modalLabelledBy,
                             "aria-label": ariaLabel,
                             "aria-modal": true,
@@ -246,7 +252,22 @@ function ModalContent({ children }) {
                                 if (startedInsideRef)
                                     startedInsideRef.current = true;
                             } }),
-                            React__default.createElement("div", { className: styles.modalBody, tabIndex: -1 }, children))))))))));
+                            stickyHeaders.length > 0 && (React__default.createElement("div", { className: styles.stickyHeaderRegion }, stickyHeaders)),
+                            React__default.createElement("div", { className: styles.modalBody, tabIndex: -1 }, bodyChildren),
+                            stickyActions.length > 0 && (React__default.createElement("div", { className: styles.stickyActionsRegion }, stickyActions)))))))))));
+}
+function extractSticky(children, componentType, match) {
+    const sticky = [];
+    const rest = children.filter(child => {
+        if (React__default.isValidElement(child) &&
+            child.type === componentType &&
+            match(child.props)) {
+            sticky.push(child);
+            return false;
+        }
+        return true;
+    });
+    return { sticky, rest };
 }
 
 function Modal(props) {

package/dist/styles.css

@@ -4940,6 +4940,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   --modal--max-height: calc(100dvh - 2 * var(--space-base));
   --modal--margin: auto;
   --modal--border-radius: var(--radius-base);
+  --modal--sticky-region-fade-size: var(--space-large);
   --modal--padding-horizontal: var(--space-base);
   --modal--padding-vertical: var(--space-base);
   --modal--padding: var(--modal--padding-vertical)
@@ -5016,6 +5017,62 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       flex: 0 0 auto;
 }
 
+._6dGKr5VVf9Y- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
+.uo6BCADQuLU-,
+.Vq0y9ggAxtI- {
+  position: relative;
+  z-index: 1;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.uo6BCADQuLU-::after,
+.Vq0y9ggAxtI-::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 24px;
+  height: var(--modal--sticky-region-fade-size);
+  pointer-events: none;
+}
+
+.uo6BCADQuLU-::after {
+  bottom: calc(24px * -1);
+  bottom: calc(var(--modal--sticky-region-fade-size) * -1);
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 1) 0%,
+    transparent 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    var(--color-surface) 0%,
+    transparent 100%
+  );
+}
+
+.Vq0y9ggAxtI-::before {
+  top: calc(24px * -1);
+  top: calc(var(--modal--sticky-region-fade-size) * -1);
+  background: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 1) 0%,
+    transparent 100%
+  );
+  background: linear-gradient(
+    to top,
+    var(--color-surface) 0%,
+    transparent 100%
+  );
+}
+
 .OiqCKNmbHZ0-:focus-visible {
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
@@ -5029,6 +5086,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   overflow-y: auto;
 }
 
+._6dGKr5VVf9Y- .zM9SWwAd5Dg- {
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  min-height: 0;
+}
+
 /* Adjust `Content` and `Tab` components public padding to match the modal */
 
 .zM9SWwAd5Dg- > * {
@@ -5074,8 +5137,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
     16px;
   padding: var(--modal--padding);
   padding-top: 0;
-  -ms-flex: 1 1 100%;
-      flex: 1 1 100%;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
   -ms-flex-pack: end;
       justify-content: flex-end;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.119.0",
+  "version": "6.120.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -552,5 +552,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e618aa8d9b5da2a7817060e16efb2f3ec2899b70"
+  "gitHead": "7bfcb010e0da7d73f3772ec5708229d63822bc01"
 }