@jobber/components 4.85.4-CJS-to-ESM.2 → 4.85.4-CJS-to-ESM.4

package/dist/showToast-59a77248.js

@@ -0,0 +1,100 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { AnimatePresence, motion } from 'framer-motion';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { I as Icon } from './Icon-22723fe6.js';
+import { B as Button } from './Button-9ae092b3.js';
+import { T as Typography } from './Typography-7cc5daf5.js';
+
+var css_248z = ".FVK4VwhLaVQ- {\n  position: relative;\n  z-index: 1003;\n  z-index: var(--elevation-toast);\n}\n\n.MUXYGaC7Msg- {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  right: 0;\n  bottom: calc(16px * 1.5);\n  bottom: var(--space-large);\n  left: 0;\n  z-index: 1003;\n  z-index: var(--elevation-toast);\n  width: 100%;\n  box-sizing: border-box;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0 calc(16px * 1.5);\n  padding: 0 var(--space-large);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\n  font-size: calc(16px * 1);\n  font-size: var(--typography--fontSize-large);\n  pointer-events: none;\n}\n\n.yCRa7jHH33M- {\n  box-shadow: 0px calc(16px * 1) calc(16px * 1) 0px\n      rgba(0, 0, 0, 0.075),\n    0px 0px calc(16px / 2) 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-high);\n  overflow: hidden;\n  pointer-events: all;\n}\n\n.yCRa7jHH33M- + .yCRa7jHH33M- {\n  margin-top: calc(16px * 1);\n  margin-top: var(--space-base);\n}\n\n.KiJL-VNZ3Sg- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc((16px / 2) / 1.25) calc(16px * 1);\n  padding: calc(calc(16px / 2) / 1.25) calc(16px * 1);\n  padding: calc(var(--space-small) / 1.25) var(--space-base);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background: rgb(1, 41, 57);\n  background: var(--color-surface--reverse);\n}\n\n.xtRB59TMHcU- {\n  margin-right: calc(16px * 1);\n  margin-right: var(--space-base);\n}\n\n.cExoS0APILs- {\n  margin-left: calc(16px * 1);\n  margin-left: var(--space-base);\n}\n\n.jobber-retheme .cExoS0APILs- svg path {\n  fill: rgb(147, 161, 169);\n  fill: var(--color-greyBlue--light);\n}\n\n.jobber-retheme .cExoS0APILs-:hover svg path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-greyBlue);\n}\n\n.-T38wWbQUNs- {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles = {"wrapper":"FVK4VwhLaVQ-","container":"MUXYGaC7Msg-","toast":"yCRa7jHH33M-","slice":"KiJL-VNZ3Sg-","icon":"xtRB59TMHcU-","button":"cExoS0APILs-","action":"-T38wWbQUNs-"};
+styleInject(css_248z);
+
+function Toast({ message, variation = "success", action, actionLabel, }) {
+    const [visible, setVisible] = useState(true);
+    const icon = getIcon();
+    let timer;
+    useEffect(() => startTimer(), []);
+    return (React.createElement(AnimatePresence, null, visible && (React.createElement(motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
+            opacity: 0,
+            scale: 0.8,
+            height: 0,
+            transition: { duration: 0.4 },
+        } },
+        React.createElement("div", { className: styles.slice },
+            React.createElement("div", { className: styles.icon },
+                React.createElement(Icon, { color: icon.color, name: icon.name })),
+            React.createElement(Typography, { element: "span", size: "large" }, message),
+            action && (React.createElement(Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
+            React.createElement("div", { className: styles.button },
+                React.createElement(Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+    function startTimer() {
+        timer = setTimeout(() => handleToastClose(), getTimeout());
+    }
+    function stopTimer() {
+        clearTimeout(timer);
+    }
+    function handleToastClose() {
+        setVisible(false);
+    }
+    function getTimeout() {
+        const min = 5000;
+        const max = 10000;
+        const time = message.length * 200;
+        if (time < min)
+            return min;
+        if (time > max)
+            return max;
+        return time;
+    }
+    function getIcon() {
+        switch (variation) {
+            case "info":
+                return { name: "knot", color: "lightBlue" };
+            case "error":
+                return { name: "alert", color: "red" };
+            default:
+                return { name: "checkmark", color: "green" };
+        }
+    }
+}
+
+const targetId = "atlantis-toast-element";
+let target = document.querySelector(`#${targetId}`);
+if (!target) {
+    target = document.createElement("div");
+    target.id = targetId;
+    target.classList.add(styles.wrapper);
+    document.body.appendChild(target);
+}
+const root = createRoot(target);
+function showToast(props) {
+    // Ensure target and body is still there when rendering the toast. This is due
+    // to an issue with ReactDOM createRoot assuming document is always there and
+    // Jest taking the document down.
+    if (document.body.contains(target)) {
+        root.render(React.createElement(ToasterOven, Object.assign({}, props)));
+    }
+}
+const ToastContainer = forwardRef(ToastInternal);
+function ToasterOven(props) {
+    const toastRef = useRef();
+    useEffect(() => toastRef.current.add(props));
+    return React.createElement(ToastContainer, { ref: toastRef });
+}
+function ToastInternal(_, ref) {
+    const [toastKey, setToastKey] = useState(0);
+    const [toasts, setToasts] = useState([]);
+    useImperativeHandle(ref, () => ({
+        add: props => {
+            setToastKey(toastKey + 1);
+            setToasts([
+                Object.assign(Object.assign({}, props), { id: toastKey }),
+                ...toasts,
+            ]);
+        },
+    }));
+    return (React.createElement("div", { className: styles.container }, toasts.map(toast => (React.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
+}
+
+export { showToast as s };

package/dist/showToast-c1e660fd.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var React = require('react');
+var client = require('react-dom/client');
+var framerMotion = require('framer-motion');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Icon = require('./Icon-405a216c.js');
+var Button = require('./Button-b73a5e01.js');
+var Typography = require('./Typography-c45bf216.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = ".FVK4VwhLaVQ- {\n  position: relative;\n  z-index: 1003;\n  z-index: var(--elevation-toast);\n}\n\n.MUXYGaC7Msg- {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  right: 0;\n  bottom: calc(16px * 1.5);\n  bottom: var(--space-large);\n  left: 0;\n  z-index: 1003;\n  z-index: var(--elevation-toast);\n  width: 100%;\n  box-sizing: border-box;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0 calc(16px * 1.5);\n  padding: 0 var(--space-large);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\n  font-size: calc(16px * 1);\n  font-size: var(--typography--fontSize-large);\n  pointer-events: none;\n}\n\n.yCRa7jHH33M- {\n  box-shadow: 0px calc(16px * 1) calc(16px * 1) 0px\n      rgba(0, 0, 0, 0.075),\n    0px 0px calc(16px / 2) 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-high);\n  overflow: hidden;\n  pointer-events: all;\n}\n\n.yCRa7jHH33M- + .yCRa7jHH33M- {\n  margin-top: calc(16px * 1);\n  margin-top: var(--space-base);\n}\n\n.KiJL-VNZ3Sg- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc((16px / 2) / 1.25) calc(16px * 1);\n  padding: calc(calc(16px / 2) / 1.25) calc(16px * 1);\n  padding: calc(var(--space-small) / 1.25) var(--space-base);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background: rgb(1, 41, 57);\n  background: var(--color-surface--reverse);\n}\n\n.xtRB59TMHcU- {\n  margin-right: calc(16px * 1);\n  margin-right: var(--space-base);\n}\n\n.cExoS0APILs- {\n  margin-left: calc(16px * 1);\n  margin-left: var(--space-base);\n}\n\n.jobber-retheme .cExoS0APILs- svg path {\n  fill: rgb(147, 161, 169);\n  fill: var(--color-greyBlue--light);\n}\n\n.jobber-retheme .cExoS0APILs-:hover svg path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-greyBlue);\n}\n\n.-T38wWbQUNs- {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles = {"wrapper":"FVK4VwhLaVQ-","container":"MUXYGaC7Msg-","toast":"yCRa7jHH33M-","slice":"KiJL-VNZ3Sg-","icon":"xtRB59TMHcU-","button":"cExoS0APILs-","action":"-T38wWbQUNs-"};
+styleInject_es.styleInject(css_248z);
+
+function Toast({ message, variation = "success", action, actionLabel, }) {
+    const [visible, setVisible] = React.useState(true);
+    const icon = getIcon();
+    let timer;
+    React.useEffect(() => startTimer(), []);
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(framerMotion.motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
+            opacity: 0,
+            scale: 0.8,
+            height: 0,
+            transition: { duration: 0.4 },
+        } },
+        React__default["default"].createElement("div", { className: styles.slice },
+            React__default["default"].createElement("div", { className: styles.icon },
+                React__default["default"].createElement(Icon.Icon, { color: icon.color, name: icon.name })),
+            React__default["default"].createElement(Typography.Typography, { element: "span", size: "large" }, message),
+            action && (React__default["default"].createElement(Button.Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
+            React__default["default"].createElement("div", { className: styles.button },
+                React__default["default"].createElement(Button.Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+    function startTimer() {
+        timer = setTimeout(() => handleToastClose(), getTimeout());
+    }
+    function stopTimer() {
+        clearTimeout(timer);
+    }
+    function handleToastClose() {
+        setVisible(false);
+    }
+    function getTimeout() {
+        const min = 5000;
+        const max = 10000;
+        const time = message.length * 200;
+        if (time < min)
+            return min;
+        if (time > max)
+            return max;
+        return time;
+    }
+    function getIcon() {
+        switch (variation) {
+            case "info":
+                return { name: "knot", color: "lightBlue" };
+            case "error":
+                return { name: "alert", color: "red" };
+            default:
+                return { name: "checkmark", color: "green" };
+        }
+    }
+}
+
+const targetId = "atlantis-toast-element";
+let target = document.querySelector(`#${targetId}`);
+if (!target) {
+    target = document.createElement("div");
+    target.id = targetId;
+    target.classList.add(styles.wrapper);
+    document.body.appendChild(target);
+}
+const root = client.createRoot(target);
+function showToast(props) {
+    // Ensure target and body is still there when rendering the toast. This is due
+    // to an issue with ReactDOM createRoot assuming document is always there and
+    // Jest taking the document down.
+    if (document.body.contains(target)) {
+        root.render(React__default["default"].createElement(ToasterOven, Object.assign({}, props)));
+    }
+}
+const ToastContainer = React.forwardRef(ToastInternal);
+function ToasterOven(props) {
+    const toastRef = React.useRef();
+    React.useEffect(() => toastRef.current.add(props));
+    return React__default["default"].createElement(ToastContainer, { ref: toastRef });
+}
+function ToastInternal(_, ref) {
+    const [toastKey, setToastKey] = React.useState(0);
+    const [toasts, setToasts] = React.useState([]);
+    React.useImperativeHandle(ref, () => ({
+        add: props => {
+            setToastKey(toastKey + 1);
+            setToasts([
+                Object.assign(Object.assign({}, props), { id: toastKey }),
+                ...toasts,
+            ]);
+        },
+    }));
+    return (React__default["default"].createElement("div", { className: styles.container }, toasts.map(toast => (React__default["default"].createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
+}
+
+exports.showToast = showToast;

package/dist/useActiveLayout-101129a8.js

@@ -0,0 +1,14 @@
+import { u as useResponsiveSizing } from './useResponsiveSizing-c1e28e54.js';
+import { u as useDataListContext } from './DataListContext-736a42a2.js';
+
+function useActiveLayout() {
+    const { layoutBreakpoints, layouts } = useDataListContext();
+    const breakpoints = useResponsiveSizing();
+    const reversedLayoutBreakpoints = [...layoutBreakpoints].reverse();
+    const activeBreakpoint = reversedLayoutBreakpoints.find(key => breakpoints[key]) ||
+        layoutBreakpoints[0];
+    const layout = layouts[activeBreakpoint];
+    return { layout, activeBreakpoint };
+}
+
+export { useActiveLayout as u };

package/dist/useActiveLayout-adbf2bc3.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var useResponsiveSizing = require('./useResponsiveSizing-10f0860d.js');
+var DataListContext = require('./DataListContext-f40570a7.js');
+
+function useActiveLayout() {
+    const { layoutBreakpoints, layouts } = DataListContext.useDataListContext();
+    const breakpoints = useResponsiveSizing.useResponsiveSizing();
+    const reversedLayoutBreakpoints = [...layoutBreakpoints].reverse();
+    const activeBreakpoint = reversedLayoutBreakpoints.find(key => breakpoints[key]) ||
+        layoutBreakpoints[0];
+    const layout = layouts[activeBreakpoint];
+    return { layout, activeBreakpoint };
+}
+
+exports.useActiveLayout = useActiveLayout;

package/dist/useBatchSelect-33acc2fc.js

@@ -0,0 +1,36 @@
+import { u as useDataListContext } from './DataListContext-736a42a2.js';
+
+function useBatchSelect() {
+    const { selected, onSelect, onSelectAll } = useDataListContext();
+    const isArray = Array.isArray(selected);
+    const selectedIDs = getIDs(selected);
+    const isSelectAll = !isArray;
+    return {
+        canSelect: Boolean(selected && onSelect),
+        canSelectAll: Boolean(onSelect && onSelectAll),
+        hasAtLeastOneSelected: isSelectAll || selectedIDs.length > 0,
+        isSelectAll,
+        isSelectSome: isArray,
+        selectedCount: getSelectedCount(selected),
+        selectedIDs,
+        selected,
+        onSelect,
+        onSelectAll,
+    };
+}
+function getIDs(selected) {
+    if (Array.isArray(selected))
+        return selected;
+    if (selected === undefined)
+        return [];
+    return selected.unselected;
+}
+function getSelectedCount(selected) {
+    if (Array.isArray(selected))
+        return selected.length;
+    if (selected === undefined)
+        return 0;
+    return selected.totalCount - selected.unselected.length;
+}
+
+export { useBatchSelect as u };

package/dist/useBatchSelect-ac66c1cb.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var DataListContext = require('./DataListContext-f40570a7.js');
+
+function useBatchSelect() {
+    const { selected, onSelect, onSelectAll } = DataListContext.useDataListContext();
+    const isArray = Array.isArray(selected);
+    const selectedIDs = getIDs(selected);
+    const isSelectAll = !isArray;
+    return {
+        canSelect: Boolean(selected && onSelect),
+        canSelectAll: Boolean(onSelect && onSelectAll),
+        hasAtLeastOneSelected: isSelectAll || selectedIDs.length > 0,
+        isSelectAll,
+        isSelectSome: isArray,
+        selectedCount: getSelectedCount(selected),
+        selectedIDs,
+        selected,
+        onSelect,
+        onSelectAll,
+    };
+}
+function getIDs(selected) {
+    if (Array.isArray(selected))
+        return selected;
+    if (selected === undefined)
+        return [];
+    return selected.unselected;
+}
+function getSelectedCount(selected) {
+    if (Array.isArray(selected))
+        return selected.length;
+    if (selected === undefined)
+        return 0;
+    return selected.totalCount - selected.unselected.length;
+}
+
+exports.useBatchSelect = useBatchSelect;

package/dist/useChildComponent-13989d0a.js

@@ -0,0 +1,15 @@
+import React, { useMemo, isValidElement } from 'react';
+
+/**
+ * Returns the first React Child that receives `true` from isCorrectComponent
+ * @param children React Children
+ * @param isCorrectComponent a function that accepts a JSX Element and returns a boolean.
+ * @returns The first child component that returns true on isCorrectComponent
+ */
+function useChildComponent(children, isCorrectComponent) {
+    return useMemo(() => {
+        return React.Children.toArray(children).find(d => isValidElement(d) && isCorrectComponent(d));
+    }, [children]);
+}
+
+export { useChildComponent as u };

package/dist/useChildComponent-d661dbd6.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Returns the first React Child that receives `true` from isCorrectComponent
+ * @param children React Children
+ * @param isCorrectComponent a function that accepts a JSX Element and returns a boolean.
+ * @returns The first child component that returns true on isCorrectComponent
+ */
+function useChildComponent(children, isCorrectComponent) {
+    return React.useMemo(() => {
+        return React__default["default"].Children.toArray(children).find(d => React.isValidElement(d) && isCorrectComponent(d));
+    }, [children]);
+}
+
+exports.useChildComponent = useChildComponent;

package/dist/useResponsiveSizing-10f0860d.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+var DataList_const = require('./DataList.const-c05b47de.js');
+
+function useMediaQuery(CSSMediaQuery) {
+    /**
+     * matchMedia have had full support for browsers since 2012 but jest, being a
+     * lite version of a DOM, doesn't support it.
+     *
+     * Instead of the consumers mocking matchMedia on every usage of DataList,
+     * we can just return true to mimic the largest screen we support.
+     *
+     * In the event that the consumer wants to test the DataList on different
+     * screen sizes, they can use the `mockViewportWidth` function from
+     * `@jobber/components/useBreakpoints`.
+     */
+    if (window.matchMedia === undefined)
+        return true;
+    const [matches, setMatches] = React.useState(window.matchMedia(CSSMediaQuery).matches);
+    React.useEffect(() => {
+        const media = window.matchMedia(CSSMediaQuery);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        media.addEventListener("change", listener);
+        return () => media.removeEventListener("change", listener);
+    }, [CSSMediaQuery]);
+    return matches;
+}
+
+function useResponsiveSizing() {
+    // This was originally written to look for "min-width: 0" which would always
+    // return true no matter what.
+    // So, instead of running media query on it, just set it to true.
+    const xs = true;
+    const sm = useMediaQuery(`(min-width: ${DataList_const.BREAKPOINT_SIZES.sm}px)`);
+    const md = useMediaQuery(`(min-width: ${DataList_const.BREAKPOINT_SIZES.md}px)`);
+    const lg = useMediaQuery(`(min-width: ${DataList_const.BREAKPOINT_SIZES.lg}px)`);
+    const xl = useMediaQuery(`(min-width: ${DataList_const.BREAKPOINT_SIZES.xl}px)`);
+    return { xs, sm, md, lg, xl };
+}
+
+exports.useResponsiveSizing = useResponsiveSizing;

package/dist/useResponsiveSizing-c1e28e54.js

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+import { g as BREAKPOINT_SIZES } from './DataList.const-3ae7ceef.js';
+
+function useMediaQuery(CSSMediaQuery) {
+    /**
+     * matchMedia have had full support for browsers since 2012 but jest, being a
+     * lite version of a DOM, doesn't support it.
+     *
+     * Instead of the consumers mocking matchMedia on every usage of DataList,
+     * we can just return true to mimic the largest screen we support.
+     *
+     * In the event that the consumer wants to test the DataList on different
+     * screen sizes, they can use the `mockViewportWidth` function from
+     * `@jobber/components/useBreakpoints`.
+     */
+    if (window.matchMedia === undefined)
+        return true;
+    const [matches, setMatches] = useState(window.matchMedia(CSSMediaQuery).matches);
+    useEffect(() => {
+        const media = window.matchMedia(CSSMediaQuery);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        media.addEventListener("change", listener);
+        return () => media.removeEventListener("change", listener);
+    }, [CSSMediaQuery]);
+    return matches;
+}
+
+function useResponsiveSizing() {
+    // This was originally written to look for "min-width: 0" which would always
+    // return true no matter what.
+    // So, instead of running media query on it, just set it to true.
+    const xs = true;
+    const sm = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.sm}px)`);
+    const md = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.md}px)`);
+    const lg = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.lg}px)`);
+    const xl = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.xl}px)`);
+    return { xs, sm, md, lg, xl };
+}
+
+export { useResponsiveSizing as u };