@jobber/components 4.46.5 → 4.48.0

package/dist/Combobox/components/ComboboxContent/ComboboxContent.d.ts

@@ -1,14 +1,24 @@
 import { ReactElement } from "react";
+import { XOR } from "ts-xor";
 import { ComboboxOption } from "../../Combobox.types";
-interface ComboboxContentProps {
+interface ComboboxCloseProps {
     /**
-     * List of selectable options to display.
+     * Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument.
      */
-    readonly options: ComboboxOption[];
+    readonly onSelect: (selection: ComboboxOption[]) => void;
+}
+interface ComoboboxSelectProps {
+    /**
+     *
+     * Callback function invoked upon the Combobox menu closing. Provides the selected option(s) as an argument.
+     */
+    readonly onClose: (selection: ComboboxOption[]) => void;
+}
+interface ComboboxContentBaseProps {
     /**
-     * Callback function invoked upon the selection of an option. Provides the selected option as an argument.
+     * List of selectable options to display.
      */
-    readonly onSelect: (selection: ComboboxOption) => void;
+    readonly options: ComboboxOption[];
     /**
      * Optional action button(s) to display at the bottom of the list.
      */
@@ -22,12 +32,13 @@ interface ComboboxContentProps {
      * @default ""
      * @type string
      */
-    readonly selected: ComboboxOption | null;
+    readonly selected: ComboboxOption[];
     /**
      * The encapsulating noun for the content of the combobox. Used
      * in the empty state, and search placeholder. Should be pluralized.
      */
     readonly subjectNoun?: string;
 }
+type ComboboxContentProps = ComboboxContentBaseProps & XOR<ComboboxCloseProps, ComoboboxSelectProps>;
 export declare function ComboboxContent(props: ComboboxContentProps): JSX.Element;
 export {};

package/dist/Combobox/components/ComboboxContent/ComboboxList.d.ts

@@ -1,14 +1,15 @@
 import React, { SetStateAction } from "react";
 import { ComboboxOption } from "../../Combobox.types";
 interface ComboboxListProps {
-    options: ComboboxOption[];
-    showEmptyState: boolean;
-    selected: ComboboxOption | null;
-    optionsListRef: React.RefObject<HTMLUListElement>;
-    setSelectedElement: React.Dispatch<SetStateAction<HTMLElement | null>>;
-    selectionHandler: (option: ComboboxOption) => void;
-    searchValue: string;
-    subjectNoun?: string;
+    readonly options: ComboboxOption[];
+    readonly showEmptyState: boolean;
+    readonly selected: ComboboxOption[];
+    readonly optionsListRef: React.RefObject<HTMLUListElement>;
+    readonly setFirstSelectedElement: React.Dispatch<SetStateAction<HTMLElement | null>>;
+    readonly selectionHandler: (option: ComboboxOption) => void;
+    readonly searchValue: string;
+    readonly multiselect: boolean;
+    readonly subjectNoun?: string;
 }
 export declare function ComboboxList(props: ComboboxListProps): JSX.Element;
 export {};

package/dist/Combobox/hooks/useComboboxContent.d.ts

@@ -1,9 +1,13 @@
 /// <reference types="react" />
 import { ComboboxOption } from "../Combobox.types";
-export declare function useComboboxContent(options: ComboboxOption[], open: boolean): {
+interface useComboboxContent {
     searchValue: string;
     setSearchValue: React.Dispatch<React.SetStateAction<string>>;
-    setSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    setFirstSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
     filteredOptions: ComboboxOption[];
     optionsListRef: React.RefObject<HTMLUListElement>;
-};
+    selectedOptions: ComboboxOption[];
+    setInternalSelected: (selected: ComboboxOption[]) => void;
+}
+export declare function useComboboxContent(options: ComboboxOption[], open: boolean, selected: ComboboxOption[], onClose: ((selection: ComboboxOption[]) => void) | undefined): useComboboxContent;
+export {};

package/dist/Combobox/index.js

@@ -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  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.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) 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-","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" })));
             }))),
@@ -104,24 +104,38 @@ function ComboboxContextProvider(props) {
             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,
     };
 }
 
@@ -202,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-"};
@@ -226,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))));
 }
 
@@ -241,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),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.46.5",
+  "version": "4.48.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "d7aa0a27fea6da695c890f558b1f468593dddd56"
+  "gitHead": "d5d7b2d2ed40fd4fd526f001715b74373966506b"
 }