@jobber/components 6.41.0 → 6.42.0

package/dist/index.cjs

@@ -75,7 +75,7 @@ var Link = require('./Link-cjs.js');
 var List = require('./List-cjs.js');
 var Markdown = require('./Markdown-cjs.js');
 var Menu = require('./Menu-cjs.js');
-var Modal = require('./Modal-cjs.js');
+var Modal_index = require('./Modal/index.cjs');
 var MultiSelect = require('./MultiSelect-cjs.js');
 var Page = require('./Page-cjs.js');
 var Popover = require('./Popover-cjs.js');
@@ -129,6 +129,7 @@ require('./_baseGet-cjs.js');
 require('./_getTag-cjs.js');
 require('./_baseEach-cjs.js');
 require('./ComboboxContent-cjs.js');
+require('./floating-ui.react-cjs.js');
 require('./ComboboxContentSearch-cjs.js');
 require('./ComboboxContentList-cjs.js');
 require('./ComboboxOption-cjs.js');
@@ -289,7 +290,9 @@ exports.List = List.List;
 exports.ListItem = List.ListItem;
 exports.Markdown = Markdown.Markdown;
 exports.Menu = Menu.Menu;
-exports.Modal = Modal.Modal;
+exports.Modal = Modal_index.Modal;
+exports.useModalContext = Modal_index.useModalContext;
+exports.useModalStyles = Modal_index.useModalStyles;
 exports.MultiSelect = MultiSelect.MultiSelect;
 exports.Page = Page.Page;
 exports.Popover = Popover.Popover;

package/dist/index.mjs

@@ -73,7 +73,7 @@ export { L as Link } from './Link-es.js';
 export { L as List, a as ListItem } from './List-es.js';
 export { M as Markdown } from './Markdown-es.js';
 export { M as Menu } from './Menu-es.js';
-export { M as Modal } from './Modal-es.js';
+export { Modal, useModalContext, useModalStyles } from './Modal/index.mjs';
 export { M as MultiSelect } from './MultiSelect-es.js';
 export { P as Page } from './Page-es.js';
 export { P as Popover, u as usePopoverContext, a as usePopoverStyles } from './Popover-es.js';
@@ -127,6 +127,7 @@ import './_baseGet-es.js';
 import './_getTag-es.js';
 import './_baseEach-es.js';
 import './ComboboxContent-es.js';
+import './floating-ui.react-es.js';
 import './ComboboxContentSearch-es.js';
 import './ComboboxContentList-es.js';
 import './ComboboxOption-es.js';

package/dist/styles.css

@@ -4403,6 +4403,162 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   max-width: 940px;
 }
 
+:root {
+  --modal--width: 600px;
+  --modal--padding-horizontal: var(--space-base);
+  --modal--padding-vertical: var(--space-base);
+  --modal--padding: var(--modal--padding-vertical)
+    var(--modal--padding-horizontal);
+
+  --modal--shadow: var(--shadow-base);
+}
+
+@media (min-width: 768px) {
+
+:root {
+    --modal--padding-horizontal: var(--space-large);
+    --modal--padding-vertical: var(--space-large);
+    --modal--padding: var(--modal--padding-vertical)
+      var(--modal--padding-horizontal);
+}
+  }
+
+@media (--medium-screens-and-up) {
+
+:root {
+    --modal--padding-horizontal: var(--space-large);
+    --modal--padding-vertical: var(--space-large);
+    --modal--padding: var(--modal--padding-vertical)
+      var(--modal--padding-horizontal);
+}
+  }
+
+.cRhQeXmZobs- {
+  display: grid;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  background-color: rgba(0, 0, 0, 0.32);
+  background-color: var(--color-overlay);
+  -ms-flex-align: center;
+      align-items: center;
+  justify-items: center;
+  place-items: center;
+}
+
+.OiqCKNmbHZ0- {
+  position: relative;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  width: 100%;
+  max-width: 600px;
+  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);
+  margin: auto;
+  padding: 8px;
+  padding: var(--space-small);
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  outline-color: hsl(198, 12%, 57%);
+  outline-color: var(--color-focus);
+}
+
+/* Adjust `Content` and `Tab` components public padding to match the modal */
+
+.OiqCKNmbHZ0- > * {
+  --public-content--padding: var(--modal--padding);
+  --public-tab--inset: var(--modal--padding-horizontal);
+}
+
+/* Remove the nested `Content` components public padding */
+
+.OiqCKNmbHZ0- > * > * {
+  --public-content--padding: 0;
+}
+
+.GDWGHwmjgAc- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: justify;
+      justify-content: space-between;
+  padding: 16px
+    16px;
+  padding: var(--modal--padding);
+  background-color: transparent;
+}
+
+/**
+ * Ensure there's no extra padding top on the next element. This mostly negates
+ * the <Content /> padding
+ */
+
+.GDWGHwmjgAc- + * {
+  padding-top: 0;
+}
+
+.KJlGo4z-E6Q- {
+  margin-top: -6px;
+  margin-right: -6px;
+}
+
+.ZGrhWCAymCw- {
+  display: -ms-flexbox;
+  display: flex;
+  padding: 16px
+    16px;
+  padding: var(--modal--padding);
+  padding-top: 0;
+  -ms-flex: 1 1 100%;
+      flex: 1 1 100%;
+  -ms-flex-pack: end;
+      justify-content: flex-end;
+}
+
+/**
+ * 1. Use CSS `order` to adjust the buttons position on the UI
+ */
+
+.hOiEWds2Vq8- {
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  -ms-flex-order: 1;
+      order: 1; /* 1 */
+}
+
+.K31NzxPZP9s- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-order: 2;
+      order: 2; /* 1 */
+}
+
+/* This is in a correct position and order */
+
+/* stylelint-disable-next-line no-descending-specificity */
+
+.K31NzxPZP9s- > * {
+  margin-left: 8px;
+  margin-left: var(--space-small);
+}
+
+.K31NzxPZP9s- > *:first-child {
+  -ms-flex-order: 2;
+      order: 2; /* 1 */
+}
+
+.K31NzxPZP9s- > *:nth-child(2) {
+  -ms-flex-order: 1;
+      order: 1; /* 1 */
+}
+
 .rJamQZ6fRes- {
   --content-block-max-width: 100ch;
   --content-block-gutters: 0;

package/dist/utils/meta/meta.json

@@ -116,6 +116,11 @@
     "Markdown",
     "Menu",
     "Modal",
+    "Modal.Actions",
+    "Modal.Activator",
+    "Modal.Content",
+    "Modal.Header",
+    "Modal.Provider",
     "MultiSelect",
     "Option",
     "Page",
@@ -157,4 +162,4 @@
     "Tooltip",
     "Typography"
   ]
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.41.0",
+  "version": "6.42.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -534,5 +534,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "925c94b58b51dba6d99cfbfe779bb7d0651a2f1c"
+  "gitHead": "39b7324adf214f1d5e9b4ca1bdc5dc4b3d373793"
 }

package/dist/Modal-cjs.js

@@ -1,63 +0,0 @@
-'use strict';
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-var classnames = require('classnames');
-var framerMotion = require('framer-motion');
-var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
-var useOnKeyDown = require('./useOnKeyDown-cjs.js');
-var useFocusTrap = require('./useFocusTrap-cjs.js');
-var Heading = require('./Heading-cjs.js');
-var Button = require('./Button-cjs.js');
-var ButtonDismiss = require('./ButtonDismiss-cjs.js');
-
-var styles = {"container":"y3M-9xoEnk0-","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-"};
-
-function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
-    const modalClassName = classnames(styles.modal, size && sizes[size]);
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
-    const modalRef = useFocusTrap.useFocusTrap_2(open);
-    useOnKeyDown.useOnKeyDown_2(handleRequestClose, "Escape");
-    const template = (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement("div", { ref: modalRef, role: "dialog", className: styles.container, tabIndex: 0 },
-        React.createElement(framerMotion.motion.div, { key: styles.overlay, className: styles.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
-        React.createElement(framerMotion.motion.div, { key: styles.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
-                duration: 0.2,
-                ease: "easeInOut",
-            } },
-            title != undefined && (React.createElement(Header, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
-            children,
-            React.createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction }))))));
-    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
-        ? ReactDOM.createPortal(template, document.body)
-        : template;
-    function handleRequestClose() {
-        if (open && onRequestClose) {
-            onRequestClose();
-        }
-    }
-}
-function Header({ title, dismissible, onRequestClose }) {
-    return (React.createElement("div", { className: styles.header, "data-testid": "modal-header" },
-        React.createElement(Heading.Heading, { level: 2 }, title),
-        dismissible && (React.createElement("div", { className: styles.closeButton },
-            React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
-}
-function Actions({ primary, secondary, tertiary }) {
-    const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
-    if (secondary != undefined) {
-        secondary = Object.assign({ type: "primary", variation: "subtle" }, secondary);
-    }
-    if (tertiary != undefined) {
-        tertiary = Object.assign({ type: "secondary", variation: "destructive" }, tertiary);
-    }
-    return (React.createElement(React.Fragment, null, shouldShow && (React.createElement("div", { className: styles.actionBar },
-        React.createElement("div", { className: styles.rightAction },
-            primary && React.createElement(Button.Button, Object.assign({}, primary)),
-            secondary && React.createElement(Button.Button, Object.assign({}, secondary))),
-        tertiary && (React.createElement("div", { className: styles.leftAction },
-            React.createElement(Button.Button, Object.assign({}, tertiary))))))));
-}
-
-exports.Modal = Modal;

package/dist/Modal-es.js

@@ -1,61 +0,0 @@
-import React__default from 'react';
-import ReactDOM__default from 'react-dom';
-import classnames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
-import { H as Heading } from './Heading-es.js';
-import { B as Button } from './Button-es.js';
-import { B as ButtonDismiss } from './ButtonDismiss-es.js';
-
-var styles = {"container":"y3M-9xoEnk0-","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-"};
-
-function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
-    const modalClassName = classnames(styles.modal, size && sizes[size]);
-    useRefocusOnActivator_2(open);
-    const modalRef = useFocusTrap_2(open);
-    useOnKeyDown_2(handleRequestClose, "Escape");
-    const template = (React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: styles.container, tabIndex: 0 },
-        React__default.createElement(motion.div, { key: styles.overlay, className: styles.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
-        React__default.createElement(motion.div, { key: styles.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
-                duration: 0.2,
-                ease: "easeInOut",
-            } },
-            title != undefined && (React__default.createElement(Header, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
-            children,
-            React__default.createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction }))))));
-    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
-        ? ReactDOM__default.createPortal(template, document.body)
-        : template;
-    function handleRequestClose() {
-        if (open && onRequestClose) {
-            onRequestClose();
-        }
-    }
-}
-function Header({ title, dismissible, onRequestClose }) {
-    return (React__default.createElement("div", { className: styles.header, "data-testid": "modal-header" },
-        React__default.createElement(Heading, { level: 2 }, title),
-        dismissible && (React__default.createElement("div", { className: styles.closeButton },
-            React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
-}
-function Actions({ primary, secondary, tertiary }) {
-    const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
-    if (secondary != undefined) {
-        secondary = Object.assign({ type: "primary", variation: "subtle" }, secondary);
-    }
-    if (tertiary != undefined) {
-        tertiary = Object.assign({ type: "secondary", variation: "destructive" }, tertiary);
-    }
-    return (React__default.createElement(React__default.Fragment, null, shouldShow && (React__default.createElement("div", { className: styles.actionBar },
-        React__default.createElement("div", { className: styles.rightAction },
-            primary && React__default.createElement(Button, Object.assign({}, primary)),
-            secondary && React__default.createElement(Button, Object.assign({}, secondary))),
-        tertiary && (React__default.createElement("div", { className: styles.leftAction },
-            React__default.createElement(Button, Object.assign({}, tertiary))))))));
-}
-
-export { Modal as M };