@jobber/components 4.85.4-CJS-to-ESM.1 → 4.85.4

package/dist/Combobox/index.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Combobox = require('../Combobox-a24c8241.js');
+require('react');
+require('classnames');
+require('react-dom');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Icon-405a216c.js');
+require('@jobber/design');
+require('../Text-259af966.js');
+require('../Typography-c45bf216.js');
+require('../Glimmer-84dee1ed.js');
+require('../tslib.es6-754e2961.js');
+require('../Content-e3f7b6fc.js');
+require('../Spinner-9d8fc7ff.js');
+require('../AnimatedPresence-20a02aaa.js');
+require('framer-motion');
+require('../Flex-d490c4db.js');
+require('@jobber/hooks/useInView');
+require('../Button-b73a5e01.js');
+require('react-router-dom');
+require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useFocusTrap');
+require('react-popper');
+require('@jobber/hooks/useOnKeyDown');
+require('../Chip-3d1bfddc.js');
+require('../Avatar-76a799fa.js');
+require('color');
+require('../Tooltip-ef3d6ef4.js');
+require('@jobber/hooks/useSafeLayoutEffect');
+require('lodash/debounce');
+require('lodash/noop');
+require('@jobber/hooks/useAssert');
+
+
+
+exports.Combobox = Combobox.Combobox;
+exports.ComboboxContextProvider = Combobox.ComboboxContextProvider;

package/dist/Combobox-a24c8241.js

@@ -0,0 +1,479 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var ReactDOM = require('react-dom');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Icon = require('./Icon-405a216c.js');
+var Text = require('./Text-259af966.js');
+var Glimmer = require('./Glimmer-84dee1ed.js');
+var Spinner = require('./Spinner-9d8fc7ff.js');
+var AnimatedPresence = require('./AnimatedPresence-20a02aaa.js');
+var Flex = require('./Flex-d490c4db.js');
+var tslib_es6 = require('./tslib.es6-754e2961.js');
+var useInView = require('@jobber/hooks/useInView');
+var Typography = require('./Typography-c45bf216.js');
+var Button = require('./Button-b73a5e01.js');
+var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
+var useFocusTrap = require('@jobber/hooks/useFocusTrap');
+var reactPopper = require('react-popper');
+var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+var Chip = require('./Chip-3d1bfddc.js');
+var debounce = require('lodash/debounce');
+var noop = require('lodash/noop');
+require('@jobber/design');
+var useAssert = require('@jobber/hooks/useAssert');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
+
+var css_248z$7 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc((16px * 4) * 3.75);\n  width: calc(calc(16px * 4) * 3.75);\n  width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n.jobber-retheme .m1w5vdUZ6rQ- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
+var styles$7 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
+styleInject_es.styleInject(css_248z$7);
+
+var css_248z$6 = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n  outline: none;\n}\n\n._7loHrVUe-Rk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n  outline: transparent;\n}\n\n._7loHrVUe-Rk-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles$6 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
+styleInject_es.styleInject(css_248z$6);
+
+function ComboboxContentSearch(props) {
+    const searchRef = React.useRef(null);
+    React.useEffect(() => {
+        if (props.open) {
+            setTimeout(() => {
+                var _a;
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [props.open]);
+    return (React__default["default"].createElement("div", { className: styles$6.search },
+        React__default["default"].createElement("input", { type: "search", ref: searchRef, className: styles$6.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
+        props.searchValue && (React__default["default"].createElement("button", { className: styles$6.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+            React__default["default"].createElement(Icon.Icon, { name: "remove", size: "small" })))));
+    function clearSearch() {
+        var _a;
+        props.setSearchValue("");
+        props.handleSearchChange("");
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleSearch(event) {
+        props.setSearchValue(event.currentTarget.value);
+        props.handleSearchChange(event.currentTarget.value);
+    }
+}
+
+var css_248z$5 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n\n  max-height: calc((16px / 2) * 33.33);\n\n  max-height: calc(calc(16px / 2) * 33.33);\n\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  top: calc(16px / 2);\n  top: var(--space-small);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n  opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n  opacity: 0;\n}\n\n.A6z4OI58xoE- {\n  padding: calc(16px * 1) calc(16px * 1);\n  padding: var(--space-base) var(--space-base);\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: sticky;\n  bottom: 0;\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk-:empty {\n  display: none;\n}\n";
+var styles$5 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
+styleInject_es.styleInject(css_248z$5);
+
+var css_248z$4 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles$4 = {"option":"_5QdRGmaNHvc-"};
+styleInject_es.styleInject(css_248z$4);
+
+const ComboboxContext = React__default["default"].createContext({});
+function ComboboxContextProvider(_a) {
+    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
+    return (React__default["default"].createElement(ComboboxContext.Provider, { value: props }, children));
+}
+
+function ComboboxOption(props) {
+    const { selected, selectionHandler } = React.useContext(ComboboxContext);
+    const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
+    return (React__default["default"].createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: () => selectionHandler &&
+            selectionHandler({ id: props.id, label: props.label }), className: classnames__default["default"](styles$4.option) },
+        React__default["default"].createElement(Flex.Flex, { template: props.prefix ? ["shrink", "grow"] : ["grow"] },
+            props.prefix,
+            props.label),
+        React__default["default"].createElement("div", null, isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" }))));
+}
+
+var css_248z$3 = "._3s8-RC5Ky3s- {\n  -webkit-transform: translateY(calc((16px * 3) * -1));\n  -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc((16px * 3) * -1));\n          transform: translateY(calc(calc(16px * 3) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n";
+var styles$3 = {"trigger":"_3s8-RC5Ky3s-"};
+styleInject_es.styleInject(css_248z$3);
+
+function ComboboxLoadMore({ onLoadMore }) {
+    const [inViewRef, isInView] = useInView.useInView();
+    React.useEffect(() => {
+        isInView && onLoadMore();
+    }, [isInView]);
+    return (React__default["default"].createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles$3.trigger }));
+}
+
+function ComboboxContentList(props) {
+    const optionsExist = props.options.length > 0;
+    const hasSearchTerm = props.searchValue.length > 0;
+    const { listScrollState } = useScrollState(props.optionsListRef, props.options);
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$5.container, styles$5[listScrollState]) },
+        optionsExist && (React__default["default"].createElement("ul", { className: styles$5.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
+            props.options.map(option => {
+                return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix }));
+            }),
+            React__default["default"].createElement("div", { className: classnames__default["default"]([styles$5.loadingContainer, styles$5.hasOptions]) },
+                React__default["default"].createElement(AnimatedPresence.AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
+            props.onLoadMore && (React__default["default"].createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
+        props.loading && !optionsExist && (React__default["default"].createElement(React__default["default"].Fragment, null, Array.from({ length: 5 }).map((_, index) => (React__default["default"].createElement("div", { className: styles$5.loadingContainer, key: index },
+            React__default["default"].createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))),
+        hasSearchTerm && !props.loading && !optionsExist && (React__default["default"].createElement("div", { className: styles$5.filterMessage },
+            React__default["default"].createElement(Text.Text, { variation: "subdued" },
+                "No results for ",
+                `“${props.searchValue}”`))),
+        !hasSearchTerm && !props.loading && !optionsExist && (React__default["default"].createElement("div", { className: styles$5.emptyStateMessage },
+            React__default["default"].createElement(Text.Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
+}
+function getZeroIndexStateText(subjectNoun) {
+    if (subjectNoun) {
+        return `You don't have any ${subjectNoun} yet`;
+    }
+    return "No options yet";
+}
+function useScrollState(optionsListRef, options) {
+    const [listScrollState, setlistScrollState] = React.useState("");
+    React.useEffect(() => {
+        const handleScroll = () => {
+            if (optionsListRef.current) {
+                const { scrollTop, clientHeight, scrollHeight } = optionsListRef.current;
+                if (scrollHeight === clientHeight) {
+                    setlistScrollState("scrollNone");
+                }
+                else if (scrollTop === 0) {
+                    setlistScrollState("scrollTop");
+                }
+                else if (scrollTop + clientHeight >= scrollHeight) {
+                    setlistScrollState("scrollBottom");
+                }
+                else {
+                    setlistScrollState("");
+                }
+            }
+        };
+        if (options.length === 0) {
+            handleScroll();
+        }
+        if (optionsListRef.current) {
+            optionsListRef.current.addEventListener("scroll", handleScroll);
+            handleScroll();
+        }
+        return () => {
+            if (optionsListRef.current) {
+                optionsListRef.current.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [options]);
+    return { listScrollState };
+}
+
+var css_248z$2 = ".Q-mwo-g5Fi8- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1) calc(16px / 2) 0 calc(16px * 1);\n  padding: var(--space-base) var(--space-small) 0 var(--space-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: baseline;\n      align-items: baseline;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n";
+var styles$2 = {"header":"Q-mwo-g5Fi8-"};
+styleInject_es.styleInject(css_248z$2);
+
+function ComboboxContentHeader(props) {
+    const hasSelected = props.selectedCount > 0;
+    const actionLabel = hasSelected ? "Clear" : "Select all";
+    const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
+    const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
+    const showAction = hasSelected || props.hasOptionsVisible;
+    return (React__default["default"].createElement("div", { className: styles$2.header, "data-testid": "ATL-Combobox-Header" },
+        React__default["default"].createElement(Typography.Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
+        showAction && (React__default["default"].createElement(Button.Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
+}
+function getLabel(hasSelected, count, subjectNoun) {
+    if (hasSelected) {
+        return `${count} selected`;
+    }
+    if (subjectNoun) {
+        return `Select ${subjectNoun}`;
+    }
+    return "Select";
+}
+
+function useComboboxContent(open, selected) {
+    const { shouldScroll } = React.useContext(ComboboxContext);
+    const optionsListRef = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (open && shouldScroll.current && optionsListRef.current) {
+            const firstSelected = Array.from((_a = optionsListRef === null || optionsListRef === void 0 ? void 0 : optionsListRef.current) === null || _a === void 0 ? void 0 : _a.children).find(child => {
+                if (child instanceof HTMLElement) {
+                    return child.dataset.selected === "true";
+                }
+            });
+            scrollToFirstSelected(firstSelected, shouldScroll);
+        }
+    }, [open, selected]);
+    return {
+        optionsListRef,
+    };
+}
+function scrollToFirstSelected(firstSelected, shouldScroll) {
+    if (firstSelected) {
+        firstSelected.scrollIntoView({
+            block: "nearest",
+        });
+        shouldScroll.current = false;
+    }
+}
+
+// eslint-disable-next-line max-statements
+function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
+    const { handleClose } = React.useContext(ComboboxContext);
+    const hasOptionsVisible = open && filteredOptions.length > 0;
+    const focusedIndex = React.useRef(null);
+    useRefocusOnActivator.useRefocusOnActivator(open);
+    const popperRef = useFocusTrap.useFocusTrap(open);
+    const { styles: popperStyles, attributes, update, } = reactPopper.usePopper(wrapperRef.current, popperRef.current, {
+        modifiers: [
+            {
+                name: "flip",
+                options: {
+                    fallbackPlacements: ["top-start"],
+                },
+            },
+        ],
+        placement: "bottom-start",
+    });
+    React.useEffect(() => {
+        focusedIndex.current = null;
+        if (open) {
+            update === null || update === void 0 ? void 0 : update();
+        }
+    }, [open, filteredOptions.length]);
+    React.useEffect(() => {
+        var _a;
+        if (open) {
+            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
+        }
+        return () => {
+            var _a;
+            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
+        };
+    }, [open, optionsListRef, filteredOptions]);
+    useOnKeyDown.useOnKeyDown(() => {
+        if (open) {
+            handleClose();
+        }
+    }, "Escape");
+    function handleContentKeydown(event) {
+        var _a;
+        if (!hasOptionsVisible)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            const activeElementInList = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
+            if (!activeElementInList)
+                return;
+            handleKeyboardSelection(event);
+        }
+        if (event.key === "ArrowDown") {
+            handleKeyboardNavigation(event, 1);
+        }
+        if (event.key === "ArrowUp") {
+            handleKeyboardNavigation(event, -1);
+        }
+    }
+    function handleKeyboardNavigation(event, indexChange) {
+        var _a;
+        const newIndex = focusedIndex.current === null ? 0 : focusedIndex.current + indexChange;
+        if (newIndex < 0 || newIndex >= filteredOptions.length)
+            return;
+        const optionElement = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.children[newIndex];
+        optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
+        focusedIndex.current = newIndex;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    function handleKeyboardSelection(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (focusedIndex.current !== null) {
+            selectionCallback(filteredOptions[focusedIndex.current]);
+        }
+    }
+    return {
+        popperRef,
+        popperStyles,
+        attributes,
+    };
+}
+
+function ComboboxContent(props) {
+    const optionsExist = props.options.length > 0;
+    const { optionsListRef } = useComboboxContent(props.open, props.selected);
+    const { popperRef, popperStyles, attributes } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const template = (React__default["default"].createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames__default["default"](styles$7.content, { [styles$7.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
+        React__default["default"].createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
+        props.multiselect && (optionsExist || props.selected.length > 0) && (React__default["default"].createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
+                props.selectedStateSetter([]);
+            }, onSelectAll: () => {
+                props.selectedStateSetter(props.options);
+            } })),
+        React__default["default"].createElement(ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
+        props.actionElements && (React__default["default"].createElement("div", { className: styles$7.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
+                [styles$7.actionPadding]: index === childrenArray.length - 1,
+            }) }, child)))))));
+    return ReactDOM__default["default"].createPortal(template, document.body);
+}
+
+var css_248z$1 = ".Ow9wSNnGP-g- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n  position: relative;\n  width: 100%;\n  min-height: calc((calc(16px * 3) - calc(16px / 2)));\n  min-height: calc((var(--space-largest) - var(--space-small)));\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  text-align: left;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.jobber-retheme .ncp0nKHQ7d8- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n  outline: none;\n}\n\n.ncp0nKHQ7d8-:hover,\n.ncp0nKHQ7d8-:focus-visible {\n  outline: none;\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.ncp0nKHQ7d8-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.ncp0nKHQ7d8- span {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles$1 = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-"};
+styleInject_es.styleInject(css_248z$1);
+
+function ComboboxAction(props) {
+    const { searchValue } = React.useContext(ComboboxContext);
+    if (props.visible) {
+        const isVisible = typeof props.visible === "function" && !props.visible({ searchValue });
+        if (isVisible || !props.visible) {
+            return null;
+        }
+    }
+    const options = { searchValue };
+    const computedLabel = typeof props.label === "string" ? props.label : props.label(options);
+    return (React__default["default"].createElement("div", { className: styles$1.actionContainer },
+        React__default["default"].createElement("button", { className: styles$1.actionButton, onClick: e => props.onClick(e, options), type: "button" },
+            React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, computedLabel))));
+}
+
+function ComboboxTrigger({ label = "Select", selected, }) {
+    const { handleClose, open, setOpen } = React__default["default"].useContext(ComboboxContext);
+    const hasSelection = selected.length;
+    const selectedLabel = selected.map(option => option.label).join(", ");
+    return (React__default["default"].createElement(Chip.Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: () => {
+            if (open) {
+                handleClose();
+            }
+            else {
+                setOpen(true);
+            }
+        }, role: "combobox" }, !hasSelection && (React__default["default"].createElement(Chip.Chip.Suffix, null,
+        React__default["default"].createElement(Icon.Icon, { name: "add", size: "small" })))));
+}
+
+var css_248z = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  background-color: transparent;\n}\n\n._-0dkolvLF-Y- {\n  display: inline-block;\n}\n";
+var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
+styleInject_es.styleInject(css_248z);
+
+function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
+    const handleClose = React.useCallback(() => {
+        setOpen(false);
+        setSearchValue("");
+        onSearch && onSearch("");
+        onClose && onClose();
+        if (selectedOptions.length > 0) {
+            shouldScroll.current = true;
+        }
+    }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
+    const handleSelection = React.useCallback((selection) => {
+        if (multiSelect) {
+            handleMultiSelect(selectedStateSetter, selectedOptions, selection);
+        }
+        else {
+            handleSingleSelect(selectedStateSetter, selection);
+        }
+    }, [multiSelect, selectedStateSetter, selectedOptions]);
+    const handleSingleSelect = React.useCallback((selectCallback, selection) => {
+        selectCallback([selection]);
+        handleClose();
+    }, []);
+    return {
+        handleClose,
+        handleSelection,
+    };
+}
+function handleMultiSelect(selectCallback, selected, selection) {
+    if (selected.some(s => s.id === selection.id)) {
+        selectCallback(selected.filter(s => s.id !== selection.id));
+    }
+    else {
+        selectCallback([...selected, selection]);
+    }
+}
+
+function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch, debounceTime = 300) {
+    const wrapperRef = React.useRef(null);
+    const shouldScroll = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState("");
+    const searchCallback = React.useCallback(debounce__default["default"]((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime), [onSearch, debounceTime]);
+    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
+    const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
+    return {
+        wrapperRef,
+        searchValue,
+        setSearchValue,
+        open,
+        setOpen,
+        selectedOptions: selected,
+        selectedStateSetter: onSelect,
+        shouldScroll,
+        handleClose,
+        handleSelection,
+        internalFilteredOptions,
+        handleSearchChange: onSearch ? searchCallback : noop__default["default"],
+    };
+}
+
+function ComboboxActivator(props) {
+    const { handleClose, open, setOpen } = React__default["default"].useContext(ComboboxContext);
+    if (props.children.type === Button.Button || props.children.type === Chip.Chip) {
+        return React__default["default"].cloneElement(props.children, {
+            role: "combobox",
+            onClick: () => {
+                if (open) {
+                    handleClose();
+                }
+                else {
+                    setOpen(true);
+                }
+            },
+        });
+    }
+    return props.children;
+}
+
+const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox must have exactly one Trigger element";
+function useComboboxValidation(children) {
+    const optionElements = getCompoundComponents(ComboboxOption, children);
+    const actionElements = getCompoundComponents(ComboboxAction, children);
+    const activatorElements = getCompoundComponents(ComboboxActivator, children);
+    const shouldThrowTriggerError = isInvalid(activatorElements);
+    useAssert.useAssert(shouldThrowTriggerError, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE);
+    return {
+        optionElements,
+        triggerElement: activatorElements[0],
+        actionElements,
+    };
+}
+function isInvalid(activators) {
+    return activators.length > 1 ? true : false;
+}
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+function getCompoundComponents(type, children) {
+    const childrenArray = React.Children.toArray(children);
+    const elements = childrenArray.filter((child) => React.isValidElement(child) && child.type === type);
+    return elements;
+}
+
+function Combobox(props) {
+    const { optionElements, triggerElement, actionElements } = useComboboxValidation(props.children);
+    const options = React.useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => ({
+        id: option.props.id,
+        label: option.props.label,
+        prefix: option.props.prefix,
+    }))) || [], [optionElements]);
+    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, setOpen, handleClose, handleSelection, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
+    return (React__default["default"].createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue },
+        React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper },
+            open && (React__default["default"].createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
+            triggerElement || (React__default["default"].createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),
+            React__default["default"].createElement(ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, setOpen: setOpen, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
+}
+Combobox.Activator = ComboboxActivator;
+Combobox.Action = ComboboxAction;
+Combobox.Option = ComboboxOption;
+
+exports.Combobox = Combobox;
+exports.ComboboxContextProvider = ComboboxContextProvider;

package/dist/ConfirmationModal/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ConfirmationModal = require('../ConfirmationModal-52e16873.js');
+require('react');
+require('@jobber/hooks/useOnKeyDown');
+require('../Modal-c336cac6.js');
+require('react-dom');
+require('classnames');
+require('framer-motion');
+require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useFocusTrap');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Heading-1e8e4bd3.js');
+require('../Typography-c45bf216.js');
+require('../getAtlantisConfig-0f3e8af2.js');
+require('../Button-b73a5e01.js');
+require('react-router-dom');
+require('../Icon-405a216c.js');
+require('@jobber/design');
+require('../ButtonDismiss-350af163.js');
+require('../Content-e3f7b6fc.js');
+require('../Markdown-f7c55304.js');
+require('react-markdown');
+require('../Text-259af966.js');
+require('../Emphasis-bda56d3b.js');
+
+
+
+exports.ConfirmationModal = ConfirmationModal.ConfirmationModal;

package/dist/ConfirmationModal-52e16873.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var React = require('react');
+var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+var Modal = require('./Modal-c336cac6.js');
+var Content = require('./Content-e3f7b6fc.js');
+var Markdown = require('./Markdown-f7c55304.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function confirmationModalReducer(state, action) {
+    switch (action.type) {
+        case "display":
+            return Object.assign(Object.assign({}, state), { title: action.title, message: action.message, open: true, confirmLabel: action.confirmLabel, cancelLabel: action.cancelLabel || "Cancel", onConfirm: action.onConfirm, onCancel: action.onCancel });
+        case "confirm":
+            state.onConfirm && state.onConfirm();
+            return Object.assign(Object.assign({}, state), { open: false });
+        case "cancel":
+            state.onCancel && state.onCancel();
+            return Object.assign(Object.assign({}, state), { open: false });
+        case "reset":
+            return Object.assign(Object.assign({}, state), action.state);
+        default:
+            throw new Error();
+    }
+}
+const ConfirmationModal = React.forwardRef(function ConfirmationModalInternal({ title, message, open = false, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onRequestClose, variation = "work", size, children, }, ref) {
+    const [state, dispatch] = React.useReducer(confirmationModalReducer, {
+        title,
+        message,
+        open: false,
+        confirmLabel,
+        cancelLabel,
+        onConfirm,
+        onCancel,
+    });
+    // Expose a `show` method through this component's ref.
+    React.useImperativeHandle(ref, () => ({
+        show: ({ title: newTitle, message: newMessage, confirmLabel: newConfirmLabel, cancelLabel: newCancelLabel, onConfirm: newOnConfirm, onCancel: newOnCancel, }) => {
+            dispatch({
+                type: "display",
+                title: newTitle,
+                message: newMessage,
+                confirmLabel: newConfirmLabel,
+                cancelLabel: newCancelLabel,
+                onConfirm: newOnConfirm,
+                onCancel: newOnCancel,
+            });
+        },
+    }));
+    React.useEffect(() => {
+        dispatch({
+            type: "reset",
+            state: Object.assign(Object.assign({}, state), { title, message: message, confirmLabel,
+                cancelLabel,
+                onConfirm,
+                onCancel }),
+        });
+    }, [title, message, confirmLabel, cancelLabel, onConfirm, onCancel]);
+    useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape", "Enter"]);
+    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"),
+        } }, state.message ? (React__default["default"].createElement(Content.Content, null,
+        React__default["default"].createElement(Markdown.Markdown, { content: state.message }))) : (children)));
+    function handleAction(type) {
+        return () => {
+            dispatch({ type });
+            onRequestClose && onRequestClose();
+        };
+    }
+    function handleKeyboardShortcut(event) {
+        const { metaKey, ctrlKey, key, target } = event;
+        if (!open)
+            return;
+        const shouldTriggerShortcut = target instanceof HTMLButtonElement ? metaKey || ctrlKey : true;
+        if (!shouldTriggerShortcut)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        switch (key) {
+            case "Enter": {
+                handleAction("confirm")();
+                break;
+            }
+            case "Escape": {
+                handleAction("cancel")();
+                break;
+            }
+        }
+    }
+});
+
+exports.ConfirmationModal = ConfirmationModal;