@jobber/components 2.93.2 → 2.94.1

package/CHANGELOG.md

@@ -8,6 +8,25 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.94.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.94.0...@jobber/components@2.94.1) (2023-01-31)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+# [2.94.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.93.2...@jobber/components@2.94.0) (2023-01-25)
+
+
+### Features
+
+* **components:** add modal size and child render support to confirmation modal ([#969](https://github.com/GetJobber/atlantis/issues/969)) ([75e8bc6](https://github.com/GetJobber/atlantis/commit/75e8bc6552b29a4a8c5ee4cb6ac947a567460835))
+
+
+
+
+
 ## [2.93.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.93.1...@jobber/components@2.93.2) (2023-01-19)
 
 **Note:** Version bump only for package @jobber/components

package/dist/Checkbox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../Checkbox-4624199c.js');
+var Checkbox = require('../Checkbox-70c7a272.js');
 require('react');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');

package/dist/{Checkbox-4624199c.js → Checkbox-70c7a272.js}

@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css = "._2y-hp0B8BHvB6C7hj0uluY {\n  display: inline-block;\n}\n\n._36KUbFCcSPE7xHQsQ4PC2D {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI {\n  cursor: not-allowed;\n}\n\n._3MnEDfs7rk_9yjl2XNHSuc {\n  position: relative;\n}\n\n.MEL3ANaAvLYMAoMbYSmCb {\n  /* Hide checkbox on UI but not screen readers and still allow focus state */\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n._1T-pYuzX7l9EyzvIri_U22 {\n  display: -ms-flexbox;\n  display: flex;\n  width: var(--space-base);\n  height: var(--space-base);\n  box-sizing: border-box;\n  border: var(--border-thick) solid var(--color-interactive);\n  border-radius: var(--radius-base);\n  background-color: var(--color-surface);\n  transition: all 200ms;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI ._1T-pYuzX7l9EyzvIri_U22 {\n  border-color: var(--color-disabled--secondary);\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI p {\n  color: var(--color-disabled);\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI ._1T-pYuzX7l9EyzvIri_U22 > * {\n  opacity: 0;\n}\n\n.MEL3ANaAvLYMAoMbYSmCb._3TAyEYP42fVPKOg97qm5Ue + ._1T-pYuzX7l9EyzvIri_U22,\n.MEL3ANaAvLYMAoMbYSmCb:checked + ._1T-pYuzX7l9EyzvIri_U22 {\n  border-color: var(--color-interactive);\n  background-color: var(--color-interactive);\n}\n\n.MEL3ANaAvLYMAoMbYSmCb:focus + ._1T-pYuzX7l9EyzvIri_U22 {\n  box-shadow: var(--shadow-focus);\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI .MEL3ANaAvLYMAoMbYSmCb._3TAyEYP42fVPKOg97qm5Ue + ._1T-pYuzX7l9EyzvIri_U22,\n.Kvt2p9_Z8Ln_jkPQEYuMI .MEL3ANaAvLYMAoMbYSmCb:checked + ._1T-pYuzX7l9EyzvIri_U22 {\n  border-color: var(--color-disabled--secondary);\n  background-color: var(--color-disabled--secondary);\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI .MEL3ANaAvLYMAoMbYSmCb._3TAyEYP42fVPKOg97qm5Ue + ._1T-pYuzX7l9EyzvIri_U22 > *,\n.Kvt2p9_Z8Ln_jkPQEYuMI .MEL3ANaAvLYMAoMbYSmCb:checked + ._1T-pYuzX7l9EyzvIri_U22 > * {\n  opacity: 1;\n}\n\n.C10gHWu17R4Nw-PFWmtvT {\n  margin: 0 var(--space-small);\n}\n\n._1wsib2K8k6XRKTFbeIeq4n {\n  margin-bottom: var(--space-small);\n  padding-left: var(--space-large);\n}\n";
+var css = "._2y-hp0B8BHvB6C7hj0uluY {\n  display: inline-block;\n}\n\n._36KUbFCcSPE7xHQsQ4PC2D {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI {\n  cursor: not-allowed;\n}\n\n._3MnEDfs7rk_9yjl2XNHSuc {\n  position: relative;\n  margin-top: var(--space-smallest);\n}\n\n.MEL3ANaAvLYMAoMbYSmCb {\n  /* Hide checkbox on UI but not screen readers and still allow focus state */\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n._1T-pYuzX7l9EyzvIri_U22 {\n  display: -ms-flexbox;\n  display: flex;\n  width: var(--space-base);\n  height: var(--space-base);\n  box-sizing: border-box;\n  border: var(--border-thick) solid var(--color-interactive);\n  border-radius: var(--radius-base);\n  background-color: var(--color-surface);\n  transition: all 200ms;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI ._1T-pYuzX7l9EyzvIri_U22 {\n  border-color: var(--color-disabled--secondary);\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI p {\n  color: var(--color-disabled);\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI ._1T-pYuzX7l9EyzvIri_U22 > * {\n  opacity: 0;\n}\n\n.MEL3ANaAvLYMAoMbYSmCb._3TAyEYP42fVPKOg97qm5Ue + ._1T-pYuzX7l9EyzvIri_U22,\n.MEL3ANaAvLYMAoMbYSmCb:checked + ._1T-pYuzX7l9EyzvIri_U22 {\n  border-color: var(--color-interactive);\n  background-color: var(--color-interactive);\n}\n\n.MEL3ANaAvLYMAoMbYSmCb:focus + ._1T-pYuzX7l9EyzvIri_U22 {\n  box-shadow: var(--shadow-focus);\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI .MEL3ANaAvLYMAoMbYSmCb._3TAyEYP42fVPKOg97qm5Ue + ._1T-pYuzX7l9EyzvIri_U22,\n.Kvt2p9_Z8Ln_jkPQEYuMI .MEL3ANaAvLYMAoMbYSmCb:checked + ._1T-pYuzX7l9EyzvIri_U22 {\n  border-color: var(--color-disabled--secondary);\n  background-color: var(--color-disabled--secondary);\n}\n\n.Kvt2p9_Z8Ln_jkPQEYuMI .MEL3ANaAvLYMAoMbYSmCb._3TAyEYP42fVPKOg97qm5Ue + ._1T-pYuzX7l9EyzvIri_U22 > *,\n.Kvt2p9_Z8Ln_jkPQEYuMI .MEL3ANaAvLYMAoMbYSmCb:checked + ._1T-pYuzX7l9EyzvIri_U22 > * {\n  opacity: 1;\n}\n\n.C10gHWu17R4Nw-PFWmtvT {\n  margin: 0 var(--space-small);\n}\n\n._1wsib2K8k6XRKTFbeIeq4n {\n  margin-bottom: var(--space-small);\n  padding-left: var(--space-large);\n}\n";
 var styles = {"checkbox":"_2y-hp0B8BHvB6C7hj0uluY","wrapper":"_36KUbFCcSPE7xHQsQ4PC2D","disabled":"Kvt2p9_Z8Ln_jkPQEYuMI","checkHolder":"_3MnEDfs7rk_9yjl2XNHSuc","input":"MEL3ANaAvLYMAoMbYSmCb","checkBox":"_1T-pYuzX7l9EyzvIri_U22","indeterminate":"_3TAyEYP42fVPKOg97qm5Ue","label":"C10gHWu17R4Nw-PFWmtvT","description":"_1wsib2K8k6XRKTFbeIeq4n"};
 styleInject_es.styleInject(css);
 

package/dist/ConfirmationModal/ConfirmationModal.d.ts

@@ -1,4 +1,4 @@
-import React, { Ref } from "react";
+import React, { ReactNode, Ref } from "react";
 interface DisplayAction {
     type: "display";
     title?: string;
@@ -18,6 +18,7 @@ interface BaseConfirmationModalProps {
     readonly title?: string;
     /**
      * Text or rich text content for the body of the modal.
+     * Not displayed if **children** prop is passed.
      */
     readonly message?: string;
     /**
@@ -36,6 +37,14 @@ interface BaseConfirmationModalProps {
      * Type (Work or destructive) for confirm button.
      */
     readonly variation?: "work" | "destructive";
+    /**
+     * Size of the modal (small, large),
+     */
+    readonly size?: "small" | "large";
+    /**
+     * Child component. Not displayed if **message** prop is passed.
+     */
+    readonly children?: ReactNode;
     /**
      * Callback for when the confirm button is pressed.
      */
@@ -50,7 +59,6 @@ interface BaseConfirmationModalProps {
     onRequestClose?(): void;
 }
 interface SimpleConfirmationModalProps extends BaseConfirmationModalProps {
-    readonly message: string;
     readonly open: boolean;
     readonly confirmLabel: string;
 }
@@ -58,5 +66,13 @@ interface ComplexConfirmationModalProps extends BaseConfirmationModalProps {
     readonly ref: Ref<ConfirmationModalRef>;
     readonly open?: undefined;
 }
-export declare const ConfirmationModal: React.ForwardRefExoticComponent<(SimpleConfirmationModalProps & React.RefAttributes<ConfirmationModalRef>) | (ComplexConfirmationModalProps & React.RefAttributes<ConfirmationModalRef>)>;
+interface ChildrenMessage extends BaseConfirmationModalProps {
+    message?: never;
+    children: ReactNode;
+}
+interface StringMessage extends BaseConfirmationModalProps {
+    message: string;
+    children?: never;
+}
+export declare const ConfirmationModal: React.ForwardRefExoticComponent<(SimpleConfirmationModalProps & ChildrenMessage & React.RefAttributes<ConfirmationModalRef>) | (SimpleConfirmationModalProps & StringMessage & React.RefAttributes<ConfirmationModalRef>) | (ComplexConfirmationModalProps & ChildrenMessage & React.RefAttributes<ConfirmationModalRef>) | (ComplexConfirmationModalProps & StringMessage & React.RefAttributes<ConfirmationModalRef>)>;
 export {};

package/dist/ConfirmationModal/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-474b3dbb.js');
+var ConfirmationModal = require('../ConfirmationModal-53da29da.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('@jobber/hooks');

package/dist/{ConfirmationModal-474b3dbb.js → ConfirmationModal-53da29da.js}

@@ -28,8 +28,8 @@ function confirmationModalReducer(state, action) {
     }
 }
 var ConfirmationModal = React.forwardRef(function ConfirmationModalInternal(_a, ref) {
-    var title = _a.title, message = _a.message, _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.confirmLabel, confirmLabel = _c === void 0 ? "Confirm" : _c, _d = _a.cancelLabel, cancelLabel = _d === void 0 ? "Cancel" : _d, onConfirm = _a.onConfirm, onCancel = _a.onCancel, onRequestClose = _a.onRequestClose, _e = _a.variation, variation = _e === void 0 ? "work" : _e;
-    var _f = tslib_es6.__read(React.useReducer(confirmationModalReducer, {
+    var title = _a.title, message = _a.message, _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.confirmLabel, confirmLabel = _c === void 0 ? "Confirm" : _c, _d = _a.cancelLabel, cancelLabel = _d === void 0 ? "Cancel" : _d, onConfirm = _a.onConfirm, onCancel = _a.onCancel, onRequestClose = _a.onRequestClose, _e = _a.variation, variation = _e === void 0 ? "work" : _e, _f = _a.size, size = _f === void 0 ? "small" : _f, children = _a.children;
+    var _g = tslib_es6.__read(React.useReducer(confirmationModalReducer, {
         title: title,
         message: message,
         open: false,
@@ -37,7 +37,7 @@ var ConfirmationModal = React.forwardRef(function ConfirmationModalInternal(_a,
         cancelLabel: cancelLabel,
         onConfirm: onConfirm,
         onCancel: onCancel,
-    }), 2), state = _f[0], dispatch = _f[1];
+    }), 2), state = _g[0], dispatch = _g[1];
     // Expose a `show` method through this component's ref.
     React.useImperativeHandle(ref, function () { return ({
         show: function (_a) {
@@ -63,15 +63,15 @@ var ConfirmationModal = React.forwardRef(function ConfirmationModalInternal(_a,
         });
     }, [title, message, confirmLabel, cancelLabel, onConfirm, onCancel]);
     jobberHooks.useOnKeyDown(handleKeyboardShortcut, ["Escape", "Enter"]);
-    return (React__default["default"].createElement(Modal.Modal, { title: state.title, open: open || state.open, size: "small", dismissible: false, primaryAction: {
+    return (React__default["default"].createElement(Modal.Modal, { title: state.title, open: open || state.open, size: size, dismissible: false, primaryAction: {
             label: state.confirmLabel,
             onClick: handleAction("confirm"),
             variation: variation === "destructive" ? "destructive" : "work",
         }, secondaryAction: {
             label: state.cancelLabel,
             onClick: handleAction("cancel"),
-        } },
-        React__default["default"].createElement(Content.Content, null, state.message && React__default["default"].createElement(Markdown.Markdown, { content: state.message }))));
+        } }, state.message ? (React__default["default"].createElement(Content.Content, null,
+        React__default["default"].createElement(Markdown.Markdown, { content: state.message }))) : (children)));
     function handleAction(type) {
         return function () {
             dispatch({ type: type });

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-d93126eb.js');
+var FormatFile = require('../FormatFile-96a358cb.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -13,7 +13,7 @@ require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
 require('../Typography-c8df6609.js');
-require('../ConfirmationModal-474b3dbb.js');
+require('../ConfirmationModal-53da29da.js');
 require('@jobber/hooks');
 require('../Modal-1f7e7433.js');
 require('react-dom');

package/dist/{FormatFile-d93126eb.js → FormatFile-96a358cb.js}

@@ -6,7 +6,7 @@ var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
 var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var Button = require('./Button-d0f7848a.js');
-var ConfirmationModal = require('./ConfirmationModal-474b3dbb.js');
+var ConfirmationModal = require('./ConfirmationModal-53da29da.js');
 var Icon = require('./Icon-d5ad1a6d.js');
 var Typography = require('./Typography-c8df6609.js');
 var Text = require('./Text-c317e805.js');

package/dist/Gallery/index.js

@@ -7,12 +7,12 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
 var LightBox = require('../LightBox-b893b656.js');
-var FormatFile = require('../FormatFile-d93126eb.js');
+var FormatFile = require('../FormatFile-96a358cb.js');
 var Button = require('../Button-d0f7848a.js');
 require('react-image-lightbox');
 require('react-image-lightbox/style.css');
 require('filesize');
-require('../ConfirmationModal-474b3dbb.js');
+require('../ConfirmationModal-53da29da.js');
 require('@jobber/hooks');
 require('../Modal-1f7e7433.js');
 require('react-dom');

package/dist/MultiSelect/index.js

@@ -7,7 +7,7 @@ var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Checkbox = require('../Checkbox-4624199c.js');
+var Checkbox = require('../Checkbox-70c7a272.js');
 var Text = require('../Text-c317e805.js');
 var Icon = require('../Icon-d5ad1a6d.js');
 require('../Typography-c8df6609.js');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.93.2",
+  "version": "2.94.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "f704c0af4552b2fbb8440421223d01fa1ae604f6"
+  "gitHead": "c4d8e38a9c61e6ecde34b1208c251e909d4e6be5"
 }