@jobber/components 4.45.0 → 4.45.1-visual-upd.1

package/dist/Combobox/index.js

@@ -8,13 +8,13 @@ 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-59bde58c.js');
+var Text = require('../Text-54334431.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 Typography = require('../Typography-9bff9c91.js');
-var Button = require('../Button-d89f2271.js');
+var Typography = require('../Typography-83915c54.js');
+var Button = require('../Button-db6114a6.js');
 require('@jobber/design');
 require('react-router-dom');
 
@@ -24,11 +24,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-var css_248z$5 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  max-width: var(--popover--width);\n  min-width: calc((16px * 4) * 3.75);\n  min-width: calc(calc(16px * 4) * 3.75);\n  min-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(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: scroll;\n  overflow-y: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\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.YQry-Rd6zfQ-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc((16px * 1.5) * -1);\n  top: calc(calc(16px * 1.5) * -1);\n  top: calc(var(--space-large) * -1);\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\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 css_248z$5 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  max-width: var(--popover--width);\n  min-width: calc((16px * 4) * 3.75);\n  min-width: calc(calc(16px * 4) * 3.75);\n  min-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(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: scroll;\n  overflow-y: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\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.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$5 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
 styleInject_es.styleInject(css_248z$5);
 
-var css_248z$4 = ".ifwwZOYTf8U- {\n  position: relative;\n}\n\n.gIbHknFkZLI- {\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(225, 225, 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.dZmEG-amk2U- {\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(244, 244, 244);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n.dZmEG-amk2U-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n.ifwwZOYTf8U-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: calc((16px * 1.5) * -1);\n  bottom: calc(calc(16px * 1.5) * -1);\n  bottom: calc(var(--space-large) * -1);\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background-image: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n";
+var css_248z$4 = ".ifwwZOYTf8U- {\n  position: relative;\n}\n\n.gIbHknFkZLI- {\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(225, 225, 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.dZmEG-amk2U- {\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(244, 244, 244);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n.dZmEG-amk2U-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n";
 var styles$4 = {"search":"ifwwZOYTf8U-","searchInput":"gIbHknFkZLI-","clearSearch":"dZmEG-amk2U-"};
 styleInject_es.styleInject(css_248z$4);
 
@@ -44,7 +44,7 @@ function ComboboxSearch(props) {
     }, [props.open]);
     return (React__default["default"].createElement("div", { className: styles$4.search },
         React__default["default"].createElement("input", { type: "search", ref: searchRef, className: styles$4.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
-        props.searchValue && (React__default["default"].createElement("button", { className: styles$4.clearSearch, onClick: clearSearch, "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+        props.searchValue && (React__default["default"].createElement("button", { className: styles$4.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;
@@ -56,22 +56,22 @@ function ComboboxSearch(props) {
     }
 }
 
-var css_248z$3 = "._5n7VvEn39-Y- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.KhX5VfZjAog- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: scroll;\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.NNCJVHYx6lc- {\n  display: -ms-flexbox;\n  display: flex;\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  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  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.IvTItlT0MOQ-,\n.NNCJVHYx6lc-:hover,\n.NNCJVHYx6lc-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n.NNCJVHYx6lc-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n._2IRm1sf-TUU-,\n.DTuoA8WPNzc- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n";
-var styles$3 = {"container":"_5n7VvEn39-Y-","optionsList":"KhX5VfZjAog-","option":"NNCJVHYx6lc-","selectedOption":"IvTItlT0MOQ-","filterMessage":"_2IRm1sf-TUU-","emptyStateMessage":"DTuoA8WPNzc-"};
+var css_248z$3 = "._5n7VvEn39-Y- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.KhX5VfZjAog- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: scroll;\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.NNCJVHYx6lc- {\n  display: -ms-flexbox;\n  display: flex;\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.NNCJVHYx6lc-:hover,\n.NNCJVHYx6lc-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n.NNCJVHYx6lc-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n._2IRm1sf-TUU-,\n.DTuoA8WPNzc- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n._5n7VvEn39-Y-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n._5n7VvEn39-Y-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc(16px / 2);\n  top: var(--space-small);\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n";
+var styles$3 = {"container":"_5n7VvEn39-Y-","optionsList":"KhX5VfZjAog-","option":"NNCJVHYx6lc-","filterMessage":"_2IRm1sf-TUU-","emptyStateMessage":"DTuoA8WPNzc-"};
 styleInject_es.styleInject(css_248z$3);
 
 function ComboboxList(props) {
+    let hasSeenFirstSelected = false;
     return (React__default["default"].createElement("div", { className: styles$3.container },
-        !props.showEmptyState && props.options.length > 0 && (React__default["default"].createElement("ul", { className: styles$3.optionsList, role: "listbox", ref: props.optionsListRef }, !props.showEmptyState &&
+        !props.showEmptyState && props.options.length > 0 && (React__default["default"].createElement("ul", { className: styles$3.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef }, !props.showEmptyState &&
             props.options.map(option => {
-                var _a;
-                const isSelected = option.id.toString() === ((_a = props.selected) === null || _a === void 0 ? void 0 : _a.id.toString());
+                const isSelected = props.selected.some(selection => selection.id.toString() === option.id.toString());
                 return (React__default["default"].createElement("li", { ref: listItem => {
-                        if (isSelected)
-                            props.setSelectedElement(listItem);
-                    }, key: option.id, tabIndex: -1, role: "option", "aria-selected": isSelected, onClick: () => props.selectionHandler(option), className: classnames__default["default"](styles$3.option, {
-                        [styles$3.selectedOption]: isSelected,
-                    }) },
+                        if (isSelected && !hasSeenFirstSelected) {
+                            props.setFirstSelectedElement(listItem);
+                            hasSeenFirstSelected = true;
+                        }
+                    }, key: option.id, tabIndex: -1, role: "option", "aria-selected": isSelected, onClick: () => props.selectionHandler(option), className: classnames__default["default"](styles$3.option) },
                     option.label,
                     isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })));
             }))),
@@ -95,32 +95,47 @@ styleInject_es.styleInject(css_248z$2);
 
 const ComboboxContext = React__default["default"].createContext({});
 function ComboboxContextProvider(props) {
+    const multiselect = props.multiselect || false;
     const [open, setOpen] = React.useState(false);
     const wrapperRef = React.useRef(null);
-    return (React__default["default"].createElement(ComboboxContext.Provider, { value: { open, setOpen, wrapperRef } },
+    return (React__default["default"].createElement(ComboboxContext.Provider, { value: { multiselect, open, setOpen, wrapperRef } },
         React__default["default"].createElement("div", { ref: wrapperRef },
             open && (React__default["default"].createElement("div", { className: styles$2.overlay, onClick: () => setOpen(false), "data-testid": "ATL-Combobox-Overlay" })),
             props.children)));
 }
 
-function useComboboxContent(options, open) {
+function useComboboxContent(options, open, selected, onClose) {
     const [searchValue, setSearchValue] = React.useState("");
-    const [selectedElement, setSelectedElement] = React.useState(null);
+    const [firstSelectedElement, setFirstSelectedElement] = React.useState(null);
     const optionsListRef = React.useRef(null);
     const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
+    const [internalSelected, setInternalSelected] = React.useState(selected);
+    const selectedOptions = onClose ? internalSelected : selected;
+    React.useEffect(() => {
+        if (!open && onClose) {
+            onClose(selectedOptions);
+        }
+    }, [open, onClose, selectedOptions]);
     React.useEffect(() => {
-        if (open && selectedElement) {
-            selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.scrollIntoView({
+        if (open && firstSelectedElement) {
+            firstSelectedElement === null || firstSelectedElement === void 0 ? void 0 : firstSelectedElement.scrollIntoView({
                 block: "nearest",
             });
         }
-    }, [open, selectedElement]);
+    }, [open, firstSelectedElement]);
+    React.useEffect(() => {
+        if (selectedOptions.length === 0) {
+            setFirstSelectedElement(null);
+        }
+    }, [selectedOptions]);
     return {
         searchValue,
         setSearchValue,
-        setSelectedElement,
+        setFirstSelectedElement,
         filteredOptions,
         optionsListRef,
+        selectedOptions,
+        setInternalSelected,
     };
 }
 
@@ -201,23 +216,42 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
 }
 
 function ComboboxContent(props) {
-    const { open, setOpen, wrapperRef } = React__default["default"].useContext(ComboboxContext);
+    const { open, setOpen, wrapperRef, multiselect } = React__default["default"].useContext(ComboboxContext);
     const optionsExist = props.options.length > 0;
-    const { searchValue, setSearchValue, setSelectedElement, filteredOptions, optionsListRef, } = useComboboxContent(props.options, open);
+    const { searchValue, setSearchValue, setFirstSelectedElement, filteredOptions, optionsListRef, selectedOptions, setInternalSelected, } = useComboboxContent(props.options, open, props.selected, props.onClose);
     const { popperRef, popperStyles, attributes } = useComboboxAccessibility(handleSelection, filteredOptions, optionsListRef, open, setOpen, 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$5.content, { [styles$5.hidden]: !open }), style: popperStyles.popper }, attributes.popper),
         React__default["default"].createElement(ComboboxSearch, { open: open, placeholder: props.subjectNoun, searchValue: searchValue, setSearchValue: setSearchValue }),
-        React__default["default"].createElement(ComboboxList, { showEmptyState: !optionsExist, options: filteredOptions, selected: props.selected, optionsListRef: optionsListRef, setSelectedElement: setSelectedElement, selectionHandler: handleSelection, searchValue: searchValue, subjectNoun: props.subjectNoun }),
+        React__default["default"].createElement(ComboboxList, { multiselect: multiselect, showEmptyState: !optionsExist, options: filteredOptions, selected: selectedOptions, optionsListRef: optionsListRef, setFirstSelectedElement: setFirstSelectedElement, selectionHandler: handleSelection, searchValue: searchValue, subjectNoun: props.subjectNoun }),
         props.children && (React__default["default"].createElement("div", { className: styles$5.actions, role: "group" }, React__default["default"].Children.toArray(props.children).map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
                 [styles$5.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
     return ReactDOM__default["default"].createPortal(template, document.body);
     function handleSelection(selection) {
-        props.onSelect(selection);
+        const callbackHandler = props.onSelect
+            ? props.onSelect
+            : setInternalSelected;
+        if (multiselect) {
+            handleMultiSelect(callbackHandler, selectedOptions, selection);
+        }
+        else {
+            handleSingleSelect(callbackHandler, selection);
+        }
+    }
+    function handleSingleSelect(selectCallback, selection) {
+        selectCallback([selection]);
         setSearchValue("");
         setOpen(false);
     }
 }
+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]);
+    }
+}
 
 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.ncp0nKHQ7d8-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n.ncp0nKHQ7d8-:hover {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\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-"};
@@ -225,7 +259,7 @@ styleInject_es.styleInject(css_248z$1);
 
 function ComboboxAction(props) {
     return (React__default["default"].createElement("div", { className: styles$1.actionContainer },
-        React__default["default"].createElement("button", { className: styles$1.actionButton, onClick: props.onClick, "aria-label": props.label },
+        React__default["default"].createElement("button", { className: styles$1.actionButton, onClick: props.onClick, type: "button", "aria-label": props.label },
             React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, props.label))));
 }
 
@@ -240,7 +274,7 @@ styleInject_es.styleInject(css_248z);
 
 function ComboboxTriggerChip(props) {
     const { open, setOpen } = React__default["default"].useContext(ComboboxContext);
-    return (React__default["default"].createElement("button", { className: styles.trigger, role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": "ATL-Combobox-Content", "aria-autocomplete": "list", onClick: () => {
+    return (React__default["default"].createElement("button", { className: styles.trigger, role: "combobox", type: "button", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": "ATL-Combobox-Content", "aria-autocomplete": "list", onClick: () => {
             setOpen(!open);
         } },
         React__default["default"].createElement(Typography.Typography, { fontWeight: "semiBold", textColor: "heading" }, props.label),
@@ -252,7 +286,7 @@ const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger
 const COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = "Combobox must have a Trigger and Combobox.Content element";
 const Combobox = (props) => {
     const { contentElement, triggerElement } = useComboboxValidation(props.children);
-    return (React__default["default"].createElement(ComboboxContextProvider, null,
+    return (React__default["default"].createElement(ComboboxContextProvider, { multiselect: props.multiSelect },
         triggerElement,
         contentElement));
 };

package/dist/ConfirmationModal/index.js

@@ -2,28 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-92f07027.js');
+var ConfirmationModal = require('../ConfirmationModal-285c3cbe.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-dcdc0032.js');
+require('../Modal-c17cc105.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-4562900a.js');
-require('../Typography-9bff9c91.js');
-require('../Button-d89f2271.js');
+require('../Heading-4cde9989.js');
+require('../Typography-83915c54.js');
+require('../Button-db6114a6.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ButtonDismiss-250840a4.js');
+require('../ButtonDismiss-1ccb84ec.js');
 require('../Content-2ca1ffe1.js');
-require('../Markdown-b37cf9ec.js');
+require('../Markdown-d53b01bf.js');
 require('react-markdown');
-require('../Text-59bde58c.js');
-require('../Emphasis-cc3456ac.js');
+require('../Text-54334431.js');
+require('../Emphasis-e10dde65.js');
 
 
 

package/dist/{ConfirmationModal-92f07027.js → ConfirmationModal-285c3cbe.js}

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-dcdc0032.js');
+var Modal = require('./Modal-c17cc105.js');
 var Content = require('./Content-2ca1ffe1.js');
-var Markdown = require('./Markdown-b37cf9ec.js');
+var Markdown = require('./Markdown-d53b01bf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataDump/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-69304e99.js');
+var Card = require('../Card-116af709.js');
 var Content = require('../Content-2ca1ffe1.js');
-var Emphasis = require('../Emphasis-cc3456ac.js');
+var Emphasis = require('../Emphasis-e10dde65.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-4562900a.js');
-require('../Typography-9bff9c91.js');
-require('../Button-d89f2271.js');
+require('../Heading-4cde9989.js');
+require('../Typography-83915c54.js');
+require('../Button-db6114a6.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-cec53b50.js');
+require('../Menu-2e64307a.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/DataList/DataList.d.ts

@@ -8,7 +8,7 @@ import { DataListAction } from "./components/DataListAction";
 import { DataListLayoutActions } from "./components/DataListLayoutActions";
 import { DataListBulkActionProps, DataListObject, DataListProps } from "./DataList.types";
 import { DataListBulkActions } from "./components/DataListBulkActions";
-export declare function DataList<T extends DataListObject>({ sorting, ...props }: DataListProps<T>): JSX.Element;
+export declare function DataList<T extends DataListObject>({ selected, sorting, ...props }: DataListProps<T>): JSX.Element;
 export declare namespace DataList {
     var Layout: typeof DataListLayout;
     var LayoutActions: typeof DataListLayoutActions;

package/dist/DataList/DataList.types.d.ts

@@ -102,8 +102,9 @@ export interface DataListProps<T extends DataListObject> {
     readonly selected?: T["id"][];
     readonly onSelectAll?: () => void;
 }
+export type LayoutRenderer<T extends DataListObject> = (item: DataListItemType<T[]>) => JSX.Element;
 export interface DataListLayoutProps<T extends DataListObject> {
-    readonly children: (item: DataListItemType<T[]>) => JSX.Element;
+    readonly children: LayoutRenderer<T>;
     /**
      * The breakpoint at which the layout should be displayed. It will be rendered until a layout with a larger breakpoint is found.
      * @default "xs"
@@ -116,7 +117,15 @@ export interface DataListSearchProps {
      * prepended by "Search" or just falls back to "Search".
      */
     readonly placeholder?: string;
-    readonly onSearch: (search: string) => void;
+    /**
+     * The initial value of the search input.
+     *
+     * Updating this prop after the component has mounted will rerender the
+     * component with the new value. Only update the value of this when you
+     * absolutely have to.
+     */
+    readonly initialValue?: string;
+    readonly onSearch: (value: string) => void;
 }
 export interface DataListFiltersProps {
     readonly children: ReactElement | ReactElement[];
@@ -149,6 +158,12 @@ export interface DataListContextProps<T extends DataListObject> extends DataList
     readonly layoutComponents?: ReactElement<DataListLayoutProps<T>>[];
     readonly itemActionComponent?: ReactElement<DataListItemActionsProps<T>>;
     readonly bulkActionsComponent?: ReactElement<DataListItemActionsProps<T>>;
+    readonly layoutBreakpoints: Breakpoints[];
+    readonly registerLayoutBreakpoints: (breakpoint: Breakpoints) => void;
+    readonly layouts: {
+        readonly [Breakpoint in Breakpoints]?: LayoutRenderer<T>;
+    };
+    readonly registerLayout: (size: Breakpoints, layout: LayoutRenderer<T>) => void;
 }
 export interface DataListLayoutContextProps {
     readonly isInLayoutProvider: boolean;
@@ -215,13 +230,21 @@ export interface DataListActionProps<T extends DataListObject> {
      */
     readonly onClick?: (data: T) => void;
 }
+export interface DataListActionsProps<T extends DataListObject> {
+    /**
+     * The actions to render for each item in the DataList. This only accepts the
+     * DataList.Action component.
+     */
+    readonly children?: Fragment<ReactElement<DataListActionProps<T>>>;
+    /**
+     * The number of items to expose before the "More" button is shown.
+     * @default 2
+     */
+    readonly itemsToExpose?: number;
+}
 export interface DataListBulkActionProps extends DataListActionProps<DataListObject> {
     /**
      * The callback function when the action is clicked.
      */
     readonly onClick?: () => void;
 }
-export interface InternalDataListActionProps<T extends DataListObject> extends DataListActionProps<T> {
-    readonly item?: T;
-    readonly onClick?: ((data: T) => void) | (() => void);
-}

package/dist/DataList/DataList.utils.d.ts

@@ -17,5 +17,5 @@ export declare function generateListItemElement<T extends DataListObject>(item:
  * Generate the header elements with the default styling
  */
 export declare function generateHeaderElements<T extends DataListObject>(headers: DataListHeader<T>): DataListItemTypeFromHeader<T, DataListHeader<T>> | undefined;
-export declare function sortSizeProp(sizeProp: Breakpoints[]): ("xs" | "sm" | "md" | "lg" | "xl")[];
+export declare function sortBreakpoints(sizeProp: Breakpoints[]): ("xs" | "sm" | "md" | "lg" | "xl")[];
 export declare function getExposedActions(childrenArray: ReactElement[], childCount?: number): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

package/dist/DataList/components/DataListAction/DataListAction.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import { DataListActionProps, DataListObject, InternalDataListActionProps } from "../../DataList.types";
-export declare function DataListAction<T extends DataListObject>(_: DataListActionProps<T>): null;
-export declare function InternalDataListAction<T extends DataListObject>({ label, icon, destructive, onClick, item, }: InternalDataListActionProps<T>): JSX.Element;
+import { DataListActionProps, DataListObject } from "@jobber/components/DataList/DataList.types";
+export declare function DataListAction<T extends DataListObject>({ label, icon, destructive, onClick, }: DataListActionProps<T>): JSX.Element;

package/dist/DataList/components/DataListActions/DataListActions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DataListActionsProps, DataListObject } from "../../DataList.types";
+export declare function DataListActions<T extends DataListObject>({ children, itemsToExpose, }: DataListActionsProps<T>): JSX.Element;

package/dist/DataList/components/DataListActions/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataListActions";

package/dist/DataList/components/DataListHeader/DataListHeader.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DataListHeader(): JSX.Element | null;

package/dist/DataList/components/DataListHeader/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataListHeader";

package/dist/DataList/components/DataListItem/DataListItem.d.ts

@@ -1,9 +1,9 @@
-import { ReactElement } from "react";
+/// <reference types="react" />
 import { DataListLayoutProps, DataListObject } from "@jobber/components/DataList/DataList.types";
 interface DataListItem<T extends DataListObject> {
     readonly item: T;
     readonly index: number;
-    readonly layout: ReactElement<DataListLayoutProps<T>>;
+    readonly layout: DataListLayoutProps<T>["children"];
 }
 export declare function DataListItem<T extends DataListObject>({ item, layout, }: DataListItem<T>): JSX.Element;
 export {};

package/dist/DataList/components/DataListItemActions/DataListItemActions.d.ts

@@ -1,8 +1,4 @@
 /// <reference types="react" />
 import { DataListItemActionsProps, DataListObject } from "../../DataList.types";
 export declare function DataListItemActions<T extends DataListObject>(_: DataListItemActionsProps<T>): null;
-interface InternalDataListItemActionsProps<T extends DataListObject> {
-    readonly item: T;
-}
-export declare function InternalDataListItemActions<T extends DataListObject>({ item, }: InternalDataListItemActionsProps<T>): JSX.Element | null;
-export {};
+export declare function InternalDataListItemActions(): JSX.Element | null;

package/dist/DataList/components/DataListItemActions/index.d.ts

@@ -1,2 +1 @@
 export * from "./DataListItemActions";
-export * from "./DataListItemActionsOverflow";

package/dist/DataList/components/DataListItemActionsOverflow/DataListItemActionsOverflow.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+import { DataListActionProps, DataListObject } from "../../DataList.types";
+interface DataListItemActionsOverflowProps<T extends DataListObject> {
+    readonly actions: ReactElement<DataListActionProps<T>>[];
+}
+export declare function DataListItemActionsOverflow<T extends DataListObject>({ actions, }: DataListItemActionsOverflowProps<T>): JSX.Element | null;
+export {};

package/dist/DataList/components/DataListItemActionsOverflow/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataListItemActionsOverflow";

package/dist/DataList/components/DataListItems/DataListItems.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Breakpoints, DataListObject } from "@jobber/components/DataList/DataList.types";
+interface DataListItemsProps {
+    readonly size?: Breakpoints;
+}
+export declare function DataListItems<T extends DataListObject>({ size, }: DataListItemsProps): JSX.Element | null;
+export {};

package/dist/DataList/components/DataListItems/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataListItems";

package/dist/DataList/components/DataListLayout/DataListLayout.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { DataListLayoutProps, DataListObject } from "../../DataList.types";
-export declare function DataListLayout<T extends DataListObject>(_: DataListLayoutProps<T>): JSX.Element;
+import { DataListLayoutProps, DataListObject } from "@jobber/components/DataList/DataList.types";
+export declare function DataListLayout<T extends DataListObject>({ children, size, }: DataListLayoutProps<T>): JSX.Element | null;

package/dist/DataList/components/DataListLoadingState/DataListLoadingState.d.ts

@@ -1,11 +1,4 @@
-import React from "react";
-import { Breakpoints, DataListHeader, DataListLayoutProps, DataListObject } from "../../DataList.types";
-interface DataListLoadingStateProps<T extends DataListObject> {
-    readonly headers: DataListHeader<T>;
-    readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
-    readonly mediaMatches?: Record<Breakpoints, boolean>;
-}
+/// <reference types="react" />
 export declare const LOADING_STATE_LIMIT_ITEMS = 10;
 export declare const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
-export declare function DataListLoadingState<T extends DataListObject>({ headers, layouts, mediaMatches, }: DataListLoadingStateProps<T>): JSX.Element;
-export {};
+export declare function DataListLoadingState(): JSX.Element | null;

package/dist/DataList/components/DataListSearch/DataListSearch.d.ts

@@ -3,6 +3,6 @@ import { DataListSearchProps } from "../../DataList.types";
 export declare const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
 export declare function DataListSearch(_: DataListSearchProps): null;
 /**
- * Renders the DataList.Search component
+ * Renders the DataList.Search component.
  */
 export declare function InternalDataListSearch(): JSX.Element | null;

package/dist/DataList/context/DataListContext/DataListContext.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from "react";
 import { DataListContextProps, DataListObject } from "../../DataList.types";
 export declare const defaultValues: DataListContextProps<DataListObject>;
-export declare const DataListContext: import("react").Context<DataListContextProps<DataListObject>>;
-export declare function useDataListContext(): DataListContextProps<DataListObject>;
+export declare const DataListContext: React.Context<DataListContextProps<DataListObject>>;
+export declare function useDataListContext<T extends DataListObject>(): DataListContextProps<T>;

package/dist/DataList/hooks/useActiveLayout.d.ts

@@ -0,0 +1,4 @@
+export declare function useActiveLayout(): {
+    layout: import("../DataList.types").LayoutRenderer<import("../DataList.types").DataListObject> | undefined;
+    activeBreakpoint: "xs" | "sm" | "md" | "lg" | "xl";
+};