@jobber/components 6.119.0 → 6.120.1

package/dist/Gallery-cjs.js

@@ -9,7 +9,7 @@ require('filesize');
 var Button = require('./Button-cjs.js');
 var Thumbnail = require('./Thumbnail-cjs.js');
 
-var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreButton":"EvHA4-Q7O9g-","baseShowMoreButton":"VWW-3mSlumg-","largeShowMoreButton":"DNhegGxB75M-","spinning":"aqCoXiyvGKw-"};
+var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreButton":"EvHA4-Q7O9g-","showMoreButtonOverride":"CP3mpiod-4Q-","baseShowMoreButton":"VWW-3mSlumg-","largeShowMoreButton":"DNhegGxB75M-","spinning":"aqCoXiyvGKw-"};
 
 function Gallery({ files, size = "base", max, onDelete }) {
     const [images, setImages] = React.useState([]);
@@ -32,7 +32,7 @@ function Gallery({ files, size = "base", max, onDelete }) {
                     }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
             }),
             max && files.length > max && !displayPastMax && (React.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
-                React.createElement(Button.Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
+                React.createElement(Button.Button, { type: "tertiary", size: size, UNSAFE_className: { container: styles.showMoreButtonOverride }, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
                         setDisplayPastMax(true);
                     } })))),
         React.createElement(LightBox.LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));

package/dist/Gallery-es.js

@@ -7,7 +7,7 @@ import 'filesize';
 import { B as Button } from './Button-es.js';
 import { i as isSafari } from './Thumbnail-es.js';
 
-var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreButton":"EvHA4-Q7O9g-","baseShowMoreButton":"VWW-3mSlumg-","largeShowMoreButton":"DNhegGxB75M-","spinning":"aqCoXiyvGKw-"};
+var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreButton":"EvHA4-Q7O9g-","showMoreButtonOverride":"CP3mpiod-4Q-","baseShowMoreButton":"VWW-3mSlumg-","largeShowMoreButton":"DNhegGxB75M-","spinning":"aqCoXiyvGKw-"};
 
 function Gallery({ files, size = "base", max, onDelete }) {
     const [images, setImages] = useState([]);
@@ -30,7 +30,7 @@ function Gallery({ files, size = "base", max, onDelete }) {
                     }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
             }),
             max && files.length > max && !displayPastMax && (React__default.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
-                React__default.createElement(Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
+                React__default.createElement(Button, { type: "tertiary", size: size, UNSAFE_className: { container: styles.showMoreButtonOverride }, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
                         setDisplayPastMax(true);
                     } })))),
         React__default.createElement(LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));

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;
 }
@@ -8768,6 +8831,11 @@ progress.w8NAw4ZMB6g-[value]::-webkit-progress-value {
   display: flex;
 }
 
+.CP3mpiod-4Q- {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .VWW-3mSlumg- {
   width: 56px;
   height: 56px;

package/package.json

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