@jobber/components 3.3.2-pre.1 → 3.4.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.4.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.3.2...@jobber/components@3.4.0) (2023-03-02)
+
+
+### Features
+
+* **hooks:** Add useFocusTrap hook ([#1100](https://github.com/GetJobber/atlantis/issues/1100)) ([2fed042](https://github.com/GetJobber/atlantis/commit/2fed042db990704e1723e1ebe87bff7b04acc44f))
+
+
+### Reverts
+
+* Revert "chore(components): Upgrade react router dom (#1089)" (#1101) ([717cb0f](https://github.com/GetJobber/atlantis/commit/717cb0fb0cc1fd178d9fe4f931ebef5949a15818)), closes [#1089](https://github.com/GetJobber/atlantis/issues/1089) [#1101](https://github.com/GetJobber/atlantis/issues/1101)
+
+
+
+
+
+## [3.3.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.3.1...@jobber/components@3.3.2) (2023-03-02)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
 ## [3.3.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.3.0...@jobber/components@3.3.1) (2023-03-01)
 
 **Note:** Version bump only for package @jobber/components

package/dist/ConfirmationModal/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-c9dc96c6.js');
+var ConfirmationModal = require('../ConfirmationModal-e95f46d7.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('@jobber/hooks');
-require('../Modal-eb97d4c3.js');
+require('../Modal-cc3bd7bf.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');

package/dist/{ConfirmationModal-c9dc96c6.js → ConfirmationModal-e95f46d7.js}

@@ -3,7 +3,7 @@
 var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks');
-var Modal = require('./Modal-eb97d4c3.js');
+var Modal = require('./Modal-cc3bd7bf.js');
 var Content = require('./Content-18de5fbb.js');
 var Markdown = require('./Markdown-b53e0308.js');
 

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-8d3b95d6.js');
+var FormatFile = require('../FormatFile-44fc7b58.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -13,9 +13,9 @@ require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
 require('../Typography-fbe0ed6e.js');
-require('../ConfirmationModal-c9dc96c6.js');
+require('../ConfirmationModal-e95f46d7.js');
 require('@jobber/hooks');
-require('../Modal-eb97d4c3.js');
+require('../Modal-cc3bd7bf.js');
 require('react-dom');
 require('framer-motion');
 require('../Heading-a9a66964.js');

package/dist/{FormatFile-8d3b95d6.js → FormatFile-44fc7b58.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-cd30df0f.js');
-var ConfirmationModal = require('./ConfirmationModal-c9dc96c6.js');
+var ConfirmationModal = require('./ConfirmationModal-e95f46d7.js');
 var Icon = require('./Icon-d5ad1a6d.js');
 var Typography = require('./Typography-fbe0ed6e.js');
 var Text = require('./Text-e012fb46.js');

package/dist/Gallery/index.js

@@ -6,25 +6,27 @@ var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var LightBox = require('../LightBox-2077d32f.js');
-var FormatFile = require('../FormatFile-8d3b95d6.js');
+var LightBox = require('../LightBox-6aea2128.js');
+var FormatFile = require('../FormatFile-44fc7b58.js');
 var Button = require('../Button-cd30df0f.js');
-require('framer-motion');
-require('@jobber/hooks');
-require('../Icon-d5ad1a6d.js');
-require('@jobber/design');
-require('../ButtonDismiss-a9590195.js');
+require('react-image-lightbox');
+require('react-image-lightbox/style.css');
 require('filesize');
-require('../ConfirmationModal-c9dc96c6.js');
-require('../Modal-eb97d4c3.js');
+require('../ConfirmationModal-e95f46d7.js');
+require('@jobber/hooks');
+require('../Modal-cc3bd7bf.js');
 require('react-dom');
+require('framer-motion');
 require('../Heading-a9a66964.js');
 require('../Typography-fbe0ed6e.js');
+require('../ButtonDismiss-a9590195.js');
 require('../Content-18de5fbb.js');
 require('../Markdown-b53e0308.js');
 require('react-markdown');
 require('../Text-e012fb46.js');
 require('../Emphasis-75a3f411.js');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
 require('../ProgressBar-e9a49129.js');
 require('react-router-dom');
 

package/dist/LightBox/LightBox.d.ts

@@ -1,3 +1,4 @@
+import "react-image-lightbox/style.css";
 interface PresentedImage {
     title?: string;
     caption?: string;

package/dist/LightBox/index.js

@@ -2,19 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LightBox = require('../LightBox-2077d32f.js');
+var LightBox = require('../LightBox-6aea2128.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
-require('framer-motion');
-require('@jobber/hooks');
+require('react-image-lightbox');
 require('../style-inject.es-dcee06b6.js');
-require('../Icon-d5ad1a6d.js');
-require('@jobber/design');
-require('../ButtonDismiss-a9590195.js');
-require('../Button-cd30df0f.js');
-require('classnames');
-require('react-router-dom');
-require('../Typography-fbe0ed6e.js');
+require('react-image-lightbox/style.css');
 
 
 

package/dist/LightBox-6aea2128.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var ExternalLightBox = require('react-image-lightbox');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+require('react-image-lightbox/style.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ExternalLightBox__default = /*#__PURE__*/_interopDefaultLegacy(ExternalLightBox);
+
+var css = "._23H2TI8rNmnv0zlHOHZooa.ril__outer {\n  font-family: var(--typography--fontFamily-normal);\n  background-color: transparent;\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer:before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-overlay);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__captionContent {\n  color: var(--color-greyBlue--lighter);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__toolbarItem {\n  color: var(--color-greyBlue--lighter);\n}\n";
+var styles = {"wrapper":"_23H2TI8rNmnv0zlHOHZooa"};
+styleInject_es.styleInject(css);
+
+function LightBox(_a) {
+    var open = _a.open, images = _a.images, _b = _a.imageIndex, imageIndex = _b === void 0 ? 0 : _b, onRequestClose = _a.onRequestClose;
+    var _c = tslib_es6.__read(React.useState(imageIndex), 2), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
+    var nextSrc = undefined;
+    var prevSrc = undefined;
+    if (images.length > 1) {
+        nextSrc = images[(currentImageIndex + 1) % images.length].url;
+        prevSrc =
+            images[(currentImageIndex + images.length - 1) % images.length].url;
+    }
+    React.useEffect(function () {
+        setCurrentImageIndex(imageIndex);
+    }, [imageIndex]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement(ExternalLightBox__default["default"], { wrapperClassName: styles.wrapper, mainSrc: images[currentImageIndex].url, enableZoom: false, nextSrc: nextSrc, prevSrc: prevSrc, imageTitle: images[currentImageIndex].title, imageCaption: images[currentImageIndex].caption, onCloseRequest: function () {
+            return onRequestClose({ lastPosition: currentImageIndex });
+        }, onMovePrevRequest: handleMovePrevious, onMoveNextRequest: handleMoveNext }))));
+    function handleMovePrevious() {
+        setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
+    }
+    function handleMoveNext() {
+        setCurrentImageIndex((currentImageIndex + 1) % images.length);
+    }
+}
+
+exports.LightBox = LightBox;

package/dist/Modal/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Modal = require('../Modal-eb97d4c3.js');
+var Modal = require('../Modal-cc3bd7bf.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('react-dom');

package/dist/{Modal-eb97d4c3.js → Modal-cc3bd7bf.js}

@@ -25,70 +25,11 @@ var css = "._1rPyLQMc1nSLWx4zAzSas0 {\n  --modal--padding: var(--space-base);\n
 var sizes = {"small":"_1rPyLQMc1nSLWx4zAzSas0","large":"_3GkHDHYnN_8P6NQFVSfYiB"};
 styleInject_es.styleInject(css);
 
-/**
- * Traps the focus within the children of the ref element.
- *
- * @param active - Turns the focus trapping on or off. Also adds aria-hidden on the
- * body but not the dialog.
- *
- * @returns ref
- */
-function useFocusTrap(active) {
-    // There's an ongoing issue with useRef return type clashing with an element's
-    // ref prop type. TLDR: Use null because useRef doesn't expect undefined.
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572
-    var ref = React.useRef(null);
-    function handleKeyDown(event) {
-        if (!(active && ref.current) || event.key !== "Tab") {
-            return;
-        }
-        var _a = getElements(ref.current), firstElement = _a.firstElement, lastElement = _a.lastElement;
-        if (event.shiftKey) {
-            if (document.activeElement === firstElement) {
-                lastElement.focus();
-                event.preventDefault();
-            }
-        }
-        else {
-            if (document.activeElement === lastElement) {
-                firstElement.focus();
-                event.preventDefault();
-            }
-        }
-    }
-    React.useEffect(function () {
-        var _a, _b;
-        if (active) {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener("keydown", handleKeyDown);
-        }
-        return function () {
-            var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [active]);
-    return ref;
-}
-function getElements(ref) {
-    var focusables = [
-        "button",
-        "[href]",
-        "input",
-        "select",
-        "textarea",
-        '[tabindex]:not([tabindex="-1"])',
-    ];
-    var elements = ref.querySelectorAll(focusables.join(", "));
-    var firstElement = ref;
-    var lastElement = elements[elements.length - 1];
-    return { firstElement: firstElement, lastElement: lastElement };
-}
-
 function Modal(_a) {
     var _b = _a.open, open = _b === void 0 ? false : _b, title = _a.title, size = _a.size, _c = _a.dismissible, dismissible = _c === void 0 ? true : _c, children = _a.children, primaryAction = _a.primaryAction, secondaryAction = _a.secondaryAction, tertiaryAction = _a.tertiaryAction, onRequestClose = _a.onRequestClose;
     var modalClassName = classnames__default["default"](styles.modal, size && sizes[size]);
     jobberHooks.useRefocusOnActivator(open);
-    var modalRef = useFocusTrap(open);
+    var modalRef = jobberHooks.useFocusTrap(open);
     jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
     var template = (React__default["default"].createElement(framerMotion.AnimatePresence, null, open && (React__default["default"].createElement("div", { ref: modalRef, className: styles.container, tabIndex: 0 },
         React__default["default"].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 } }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "3.3.2-pre.1+fbcb0d57",
+  "version": "3.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@jobber/design": "^0.29.3",
     "@jobber/formatters": "^0.2.1",
-    "@jobber/hooks": "^1.12.5",
+    "@jobber/hooks": "^1.13.0",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -41,6 +41,7 @@
     "react-datepicker": "^4.10.0",
     "react-dropzone": "^11.0.2",
     "react-hook-form": "^6.7.2",
+    "react-image-lightbox": "^5.1.1",
     "react-markdown": "^8.0.3",
     "react-popper": "^2.2.5",
     "react-router-dom": "~5.2.0",
@@ -84,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "fbcb0d57f65018e709689e9698aff3eb10d3929f"
+  "gitHead": "347e591cc612d851632e3728e0a7d0c36f684aad"
 }

package/rollup.config.js

@@ -50,6 +50,8 @@ export default {
     "react-countdown",
     "react-popper",
     "react-datepicker",
+    "react-image-lightbox",
+    "react-image-lightbox/style.css",
     "react-dropzone",
     "axios",
     "filesize",

package/dist/LightBox-2077d32f.js

@@ -1,118 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
-var React = require('react');
-var framerMotion = require('framer-motion');
-var jobberHooks = require('@jobber/hooks');
-var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var Icon = require('./Icon-d5ad1a6d.js');
-var ButtonDismiss = require('./ButtonDismiss-a9590195.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var css = "._23H2TI8rNmnv0zlHOHZooa.ril__outer {\n  font-family: var(--typography--fontFamily-normal);\n  background-color: transparent;\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer:before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-overlay);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__captionContent {\n  color: var(--color-greyBlue--lighter);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__toolbarItem {\n  color: var(--color-greyBlue--lighter);\n}\n\n._2qgU3ylcPWUJGRthB18cb,\n._27gh3HPkx5J1Ru4Tqp_1tF {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: calc(50% - 20px);\n  z-index: 2;\n  width: 20px;\n  height: 34px;\n  padding: 30px 20px;\n  font-size: 18px;\n  font-weight: bold;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background-color: rgba(0, 0, 0, 0.2);\n  cursor: pointer;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2qgU3ylcPWUJGRthB18cb {\n  right: 0px;\n}\n\n._27gh3HPkx5J1Ru4Tqp_1tF {\n  left: 0px;\n}\n\n._3FuSx2b8rfxjzTQKeVn6MW {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-overlay);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n._2gGRj41uQJhcl0zcSNgsOA {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-small) var(--space-base);\n  color: var(--color-greyBlue--lighter);\n  font-size: var(--typography--fontSize-large);\n  background-color: rgba(0, 0, 0, 0.5);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n\n.oyIA3-aR1Fvwn0lpp1Mgx {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._1PPDSsP7v3FAZG3DA--Oq3 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
-var styles = {"wrapper":"_23H2TI8rNmnv0zlHOHZooa","next":"_2qgU3ylcPWUJGRthB18cb","prev":"_27gh3HPkx5J1Ru4Tqp_1tF","lightboxWrapper":"_3FuSx2b8rfxjzTQKeVn6MW","toolbar":"_2gGRj41uQJhcl0zcSNgsOA","title":"oyIA3-aR1Fvwn0lpp1Mgx","imagesWrapper":"_1PPDSsP7v3FAZG3DA--Oq3"};
-styleInject_es.styleInject(css);
-
-var swipeConfidenceThreshold = 10000;
-var swipePower = function (offset, velocity) {
-    return Math.abs(offset) * velocity;
-};
-var variants = {
-    enter: function (direction) {
-        return {
-            x: direction > 0 ? 2000 : -2000,
-            opacity: 0,
-        };
-    },
-    center: {
-        zIndex: 1,
-        x: 0,
-        opacity: 1,
-    },
-};
-var imageTransition = {
-    x: { type: "spring", stiffness: 300, damping: 30 },
-    opacity: { duration: 0.2 },
-};
-function LightBox(_a) {
-    var open = _a.open, images = _a.images, _b = _a.imageIndex, imageIndex = _b === void 0 ? 0 : _b, onRequestClose = _a.onRequestClose;
-    var _c = tslib_es6.__read(React.useState(imageIndex), 2), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
-    jobberHooks.useRefocusOnActivator(open);
-    jobberHooks.useOnKeyDown(function () {
-        onRequestClose({ lastPosition: currentImageIndex });
-    }, "Escape");
-    jobberHooks.useOnKeyDown(handleMovePrevious, {
-        key: "ArrowLeft",
-    });
-    jobberHooks.useOnKeyDown(handleMoveNext, {
-        key: "ArrowRight",
-    });
-    React.useEffect(function () {
-        setCurrentImageIndex(imageIndex);
-    }, [imageIndex, open]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(framerMotion.AnimatePresence, { initial: false }, open && (React__default["default"].createElement(LightBoxWrapper, { key: "lightbox" },
-            React__default["default"].createElement(Toolbar, null,
-                React__default["default"].createElement(Title, null, images[currentImageIndex].title),
-                React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close lightbox", onClick: function () {
-                        onRequestClose({ lastPosition: currentImageIndex });
-                    } })),
-            React__default["default"].createElement(ImagesWrapper, { handleImageWrapperClick: handleImageWrapperClick },
-                React__default["default"].createElement(PreviousButton, { onClick: handleMovePrevious }),
-                React__default["default"].createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, initial: "enter", animate: "center", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }),
-                React__default["default"].createElement(NextButton, { onClick: handleMoveNext })),
-            React__default["default"].createElement(Toolbar, null, images[currentImageIndex].caption))))));
-    function handleMovePrevious() {
-        setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
-    }
-    function handleMoveNext() {
-        setCurrentImageIndex((currentImageIndex + 1) % images.length);
-    }
-    function handleImageWrapperClick(event) {
-        var target = event.target;
-        if (target.id === "imageWrapper") {
-            onRequestClose({ lastPosition: currentImageIndex });
-        }
-    }
-    function handleOnDragEnd(event, _a) {
-        var offset = _a.offset, velocity = _a.velocity;
-        var swipe = swipePower(offset.x, velocity.x);
-        if (swipe < -swipeConfidenceThreshold) {
-            handleMovePrevious();
-        }
-        else if (swipe > swipeConfidenceThreshold) {
-            handleMoveNext();
-        }
-    }
-}
-function Title(_a) {
-    var children = _a.children;
-    return React__default["default"].createElement("span", { className: styles.title }, children);
-}
-function Toolbar(_a) {
-    var children = _a.children;
-    return React__default["default"].createElement("div", { className: styles.toolbar }, children);
-}
-function LightBoxWrapper(_a) {
-    var children = _a.children;
-    return (React__default["default"].createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox" }, children));
-}
-function ImagesWrapper(_a) {
-    var children = _a.children, handleImageWrapperClick = _a.handleImageWrapperClick;
-    return (React__default["default"].createElement("div", { className: styles.imagesWrapper, onClick: handleImageWrapperClick, id: "imageWrapper" }, children));
-}
-function PreviousButton(_a) {
-    var onClick = _a.onClick;
-    return (React__default["default"].createElement("div", { className: styles.prev, onClick: onClick },
-        React__default["default"].createElement(Icon.Icon, { name: "arrowLeft", color: "white", size: "large" })));
-}
-function NextButton(_a) {
-    var onClick = _a.onClick;
-    return (React__default["default"].createElement("div", { className: styles.next, onClick: onClick },
-        React__default["default"].createElement(Icon.Icon, { name: "arrowRight", color: "white", size: "large" })));
-}
-
-exports.LightBox = LightBox;

package/dist/Modal/useFocusTrap.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-/**
- * Traps the focus within the children of the ref element.
- *
- * @param active - Turns the focus trapping on or off. Also adds aria-hidden on the
- * body but not the dialog.
- *
- * @returns ref
- */
-export declare function useFocusTrap<T extends HTMLElement>(active: boolean): import("react").RefObject<T>;