@jobber/components 6.115.3 → 6.116.1

package/dist/Modal/index.cjs

@@ -28,18 +28,19 @@ require('../keysIn-cjs.js');
 require('../_isIterateeCall-cjs.js');
 require('../_setToString-cjs.js');
 
-var styles$1 = {"container":"y3M-9xoEnk0-","overlay":"zkyJp1mib-U-","modal":"gMPgiggaud8-","header":"_5sBzUnyOqD0-","closeButton":"_4gw63G7IYG0-","actionBar":"cwVJrrJkNDg-","leftAction":"MkD4pNUKeAA-","rightAction":"C-yC8JKpQLg-","spinning":"_7hYqr6OrfHs-"};
+var styles$1 = {"container":"y3M-9xoEnk0-","containerFullScreen":"IsN-kBe8icY-","overlay":"zkyJp1mib-U-","modal":"gMPgiggaud8-","header":"_5sBzUnyOqD0-","closeButton":"_4gw63G7IYG0-","actionBar":"cwVJrrJkNDg-","leftAction":"MkD4pNUKeAA-","rightAction":"C-yC8JKpQLg-","spinning":"_7hYqr6OrfHs-"};
 
-var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKITqY0-"};
+var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","fullScreen":"_9wD-TaKfDys-","spinning":"_10FfgKITqY0-"};
 
 const MODAL_HEADER_ID = "ATL-Modal-Header";
 
 function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, ariaLabel, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
+    const containerClassName = classnames(styles$1.container, size === "fullScreen" && styles$1.containerFullScreen);
     jobberHooks.useRefocusOnActivator(open);
     const modalRef = jobberHooks.useFocusTrap(open);
     jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
-    const template = (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0, "aria-modal": "true", "aria-labelledby": title ? MODAL_HEADER_ID : undefined, "aria-label": ariaLabel },
+    const template = (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement("div", { ref: modalRef, role: "dialog", className: containerClassName, tabIndex: 0, "aria-modal": "true", "aria-labelledby": title ? MODAL_HEADER_ID : undefined, "aria-label": ariaLabel },
         React.createElement(framerMotion.motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
         React.createElement(framerMotion.motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
                 duration: 0.2,

package/dist/Modal/index.mjs

@@ -26,18 +26,19 @@ import '../keysIn-es.js';
 import '../_isIterateeCall-es.js';
 import '../_setToString-es.js';
 
-var styles$1 = {"container":"y3M-9xoEnk0-","overlay":"zkyJp1mib-U-","modal":"gMPgiggaud8-","header":"_5sBzUnyOqD0-","closeButton":"_4gw63G7IYG0-","actionBar":"cwVJrrJkNDg-","leftAction":"MkD4pNUKeAA-","rightAction":"C-yC8JKpQLg-","spinning":"_7hYqr6OrfHs-"};
+var styles$1 = {"container":"y3M-9xoEnk0-","containerFullScreen":"IsN-kBe8icY-","overlay":"zkyJp1mib-U-","modal":"gMPgiggaud8-","header":"_5sBzUnyOqD0-","closeButton":"_4gw63G7IYG0-","actionBar":"cwVJrrJkNDg-","leftAction":"MkD4pNUKeAA-","rightAction":"C-yC8JKpQLg-","spinning":"_7hYqr6OrfHs-"};
 
-var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKITqY0-"};
+var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","fullScreen":"_9wD-TaKfDys-","spinning":"_10FfgKITqY0-"};
 
 const MODAL_HEADER_ID = "ATL-Modal-Header";
 
 function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, ariaLabel, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
+    const containerClassName = classnames(styles$1.container, size === "fullScreen" && styles$1.containerFullScreen);
     useRefocusOnActivator(open);
     const modalRef = useFocusTrap(open);
     useOnKeyDown(handleRequestClose, "Escape");
-    const template = (React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0, "aria-modal": "true", "aria-labelledby": title ? MODAL_HEADER_ID : undefined, "aria-label": ariaLabel },
+    const template = (React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: containerClassName, tabIndex: 0, "aria-modal": "true", "aria-labelledby": title ? MODAL_HEADER_ID : undefined, "aria-label": ariaLabel },
         React__default.createElement(motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
         React__default.createElement(motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
                 duration: 0.2,

package/dist/styles.css

@@ -4735,6 +4735,9 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 :root {
   --modal--width: 600px;
+  --modal--max-height: calc(100dvh - 2 * var(--space-base));
+  --modal--margin: auto;
+  --modal--border-radius: var(--radius-base);
   --modal--padding-horizontal: var(--space-base);
   --modal--padding-vertical: var(--space-base);
   --modal--padding: var(--modal--padding-vertical)
@@ -4766,15 +4769,20 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .y3M-9xoEnk0- {
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
   z-index: 1001;
   z-index: var(--elevation-modal);
+  box-sizing: border-box;
+  -ms-flex-direction: column;
+      flex-direction: column;
   padding: 8px;
   padding: var(--space-small);
   overflow: auto;
 }
 
+.IsN-kBe8icY- {
+  padding: 0;
+}
+
 .y3M-9xoEnk0-,
 .zkyJp1mib-U- {
   position: fixed;
@@ -4796,11 +4804,13 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   max-width: var(--modal--width);
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--modal--shadow);
+  box-sizing: border-box;
   margin: auto;
+  margin: var(--modal--margin);
   border: 1px solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
-  border-radius: var(--radius-base);
+  border-radius: var(--modal--border-radius);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
   -ms-flex: 0 0 auto;
@@ -4911,8 +4921,20 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   max-width: 940px;
 }
 
+._9wD-TaKfDys- {
+  --modal--width: 100dvw;
+  --modal--max-height: 100dvh;
+  --modal--margin: 0;
+  --modal--border-radius: 0;
+  height: 100dvh;
+  max-width: 100dvw;
+}
+
 :root {
   --modal--width: 600px;
+  --modal--max-height: calc(100dvh - 2 * var(--space-base));
+  --modal--margin: auto;
+  --modal--border-radius: var(--radius-base);
   --modal--padding-horizontal: var(--space-base);
   --modal--padding-vertical: var(--space-base);
   --modal--padding: var(--modal--padding-vertical)
@@ -4971,14 +4993,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   max-width: 600px;
   max-width: var(--modal--width);
   max-height: calc(100dvh - 2 * 16px);
-  max-height: calc(100dvh - 2 * var(--space-base));
+  max-height: var(--modal--max-height);
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--modal--shadow);
+  box-sizing: border-box;
   margin: auto;
+  margin: var(--modal--margin);
   border: 1px solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
-  border-radius: var(--radius-base);
+  border-radius: var(--modal--border-radius);
   outline: none;
   overflow: hidden;
   background-color: rgba(255, 255, 255, 1);
@@ -4994,6 +5018,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .zM9SWwAd5Dg- {
   max-height: inherit;
+  box-sizing: border-box;
   padding: 8px;
   padding: var(--space-small);
   overflow-y: auto;
@@ -10525,14 +10550,26 @@ input.oOrjwubmsVA- {
   background-color: var(--color-interactive--background--subtle--hover);
 }
 
+/* Extends beyond the container's padding box by --border-base so the green
+   border overlays the grey container border. margin-left applies the horizontal
+   offset uniformly to all left positions. */
+
 .FDDKTZkTdfM- span {
   position: absolute;
+  top: calc(-1 * 1px);
+  top: calc(-1 * var(--border-base));
   left: 0;
-  width: calc(100% / var(--segmentedControl--option-count));
-  height: 100%;
+  width: calc(
+    100% / var(--segmentedControl--option-count) + 2 * 1px
+  );
+  width: calc(
+    100% / var(--segmentedControl--option-count) + 2 * var(--border-base)
+  );
+  height: calc(100% + 2 * 1px);
+  height: calc(100% + 2 * var(--border-base));
   box-sizing: border-box;
-  border: 1px solid hsl(107, 58%, 33%);
-  border: var(--border-base) solid var(--color-interactive);
+  margin-left: calc(-1 * 1px);
+  margin-left: calc(-1 * var(--border-base));
   border-radius: 8px;
   border-radius: var(--radius-base);
   background-color: rgba(255, 255, 255, 1);
@@ -10541,22 +10578,20 @@ input.oOrjwubmsVA- {
   transition: var(--timing-slow) left ease-out;
 }
 
-/* Focus ring at z-index: 2 so hover backgrounds (z-index: 1) can't cover it.
-   Negative inset aligns with the span's outer edge so the green border stays
-   visible inside the focus ring. */
+/* Green border and focus ring live on ::after at z-index: 2 so hover
+   backgrounds on adjacent labels (z-index: 1) can't cover them. */
 
 .FDDKTZkTdfM- span::after {
   content: "";
   position: absolute;
-  top: calc(-1 * 1px);
-  right: calc(-1 * 1px);
-  bottom: calc(-1 * 1px);
-  left: calc(-1 * 1px);
-  top: calc(-1 * var(--border-base));
-  right: calc(-1 * var(--border-base));
-  bottom: calc(-1 * var(--border-base));
-  left: calc(-1 * var(--border-base));
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: 2;
+  box-sizing: border-box;
+  border: 1px solid hsl(107, 58%, 33%);
+  border: var(--border-base) solid var(--color-interactive);
   border-radius: inherit;
   pointer-events: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.115.3",
+  "version": "6.116.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a707925b53e459e55d217809955eced664dfa70c"
+  "gitHead": "4b569551a7938c439c4543a4520b65d2aea9fc33"
 }