@jobber/components 6.66.0 → 6.67.0

package/dist/Combobox/Combobox.types.d.ts

@@ -21,7 +21,17 @@ export interface ComboboxProps {
     /**
      * Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument.
      */
-    readonly onSelect: (selection: ComboboxOption[]) => void;
+    readonly onSelect: (selection: ComboboxSelection[]) => void;
+    /**
+     * Callback function invoked upon the selection of all options. Provides the selected option(s) as an argument.
+     * This is only available when `multiSelect` is `true`.
+     */
+    readonly onSelectAll?: (selection: ComboboxSelection[]) => void;
+    /**
+     * Callback function invoked upon the clearing of all options.
+     * This is only available when `multiSelect` is `true`.
+     */
+    readonly onClear?: () => void;
     /**
      * Callback function invoked upon the Combobox menu closing.
      */
@@ -102,8 +112,13 @@ export interface ComboboxOptionProps {
     readonly customRender?: (option: Omit<ComboboxOptionProps, "customRender"> & {
         isSelected: boolean;
     }) => React.ReactNode;
+    /**
+     * Callback function invoked when the option is clicked.
+     */
+    readonly onClick?: (option: ComboboxOption) => void;
 }
 export type ComboboxOption = ComboboxOptionProps;
+export type ComboboxSelection = Pick<ComboboxOptionProps, "id" | "label">;
 export interface ComboboxContentProps {
     /**
      * The selected options of the Combobox.

package/dist/Combobox/ComboboxProvider.d.ts

@@ -10,6 +10,8 @@ export interface ComboboxProviderProps {
     readonly shouldScroll: MutableRefObject<boolean>;
     readonly searchValue: string;
     readonly label?: string;
+    readonly onClear?: () => void;
+    readonly onSelectAll?: (selection: ComboboxOption[]) => void;
 }
 export declare const ComboboxContext: React.Context<Omit<ComboboxProviderProps, "children">>;
 export declare function ComboboxContextProvider({ children, ...props }: ComboboxProviderProps): JSX.Element;

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

@@ -1,6 +1,8 @@
 import { ComboboxOption } from "../Combobox.types";
 interface useComboboxContent {
     optionsListRef: React.RefObject<HTMLUListElement>;
+    onClear?: () => void;
+    onSelectAll?: (selection: ComboboxOption[]) => void;
 }
 export declare function useComboboxContent(open: boolean, selected: ComboboxOption[]): useComboboxContent;
 export {};

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

@@ -1,10 +1,10 @@
 import { ReactElement } from "react";
-import { ComboboxProps } from "../Combobox.types";
+import { ComboboxActionProps, ComboboxActivatorProps, ComboboxOptionProps, ComboboxProps } from "../Combobox.types";
 export declare const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox must have exactly one Trigger element";
 export declare function useComboboxValidation(children?: ComboboxProps["children"]): {
-    triggerElement?: ReactElement;
-    optionElements?: ReactElement[];
-    actionElements?: ReactElement[];
+    triggerElement?: ReactElement<ComboboxActivatorProps>;
+    optionElements?: ReactElement<ComboboxOptionProps>[];
+    actionElements?: ReactElement<ComboboxActionProps>[];
 };
 /**
  * Return all instances child component that matches the `type` provided

package/dist/Combobox/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./Combobox";
 export { ComboboxContextProvider } from "./ComboboxProvider";
-export { ComboboxOption, ComboboxCustomActivatorProps } from "./Combobox.types";
+export { ComboboxOption, ComboboxCustomActivatorProps, ComboboxSelection, } from "./Combobox.types";

package/dist/Combobox-cjs.js

@@ -97,16 +97,11 @@ function getCompoundComponents(type, children) {
 
 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,
-        customRender: option.props.customRender,
-    }))) || [], [optionElements]);
+    const options = React.useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => (Object.assign({}, option.props)))) || [], [optionElements]);
     const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, handleClose, handleSelection, handleOpen, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
-    return (React.createElement(ComboboxProvider.ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label },
+    return (React.createElement(ComboboxProvider.ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label, onClear: props.onClear, onSelectAll: props.onSelectAll },
         React.createElement("div", { ref: wrapperRef, className: styles.wrapper },
-            open && (React.createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
+            open && (React.createElement("div", { className: styles.overlay, onClick: handleClose, "data-testid": "ATL-Combobox-Overlay" })),
             triggerElement || (React.createElement(ComboboxTrigger.ComboboxTrigger, { label: props.label, selected: props.selected, activatorRef: props.defaultActivatorRef })),
             React.createElement(ComboboxContent.ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
 }

package/dist/Combobox-es.js

@@ -95,16 +95,11 @@ function getCompoundComponents(type, children) {
 
 function Combobox(props) {
     const { optionElements, triggerElement, actionElements } = useComboboxValidation(props.children);
-    const options = useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => ({
-        id: option.props.id,
-        label: option.props.label,
-        prefix: option.props.prefix,
-        customRender: option.props.customRender,
-    }))) || [], [optionElements]);
+    const options = useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => (Object.assign({}, option.props)))) || [], [optionElements]);
     const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, handleClose, handleSelection, handleOpen, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
-    return (React__default.createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label },
+    return (React__default.createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label, onClear: props.onClear, onSelectAll: props.onSelectAll },
         React__default.createElement("div", { ref: wrapperRef, className: styles.wrapper },
-            open && (React__default.createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
+            open && (React__default.createElement("div", { className: styles.overlay, onClick: handleClose, "data-testid": "ATL-Combobox-Overlay" })),
             triggerElement || (React__default.createElement(ComboboxTrigger, { label: props.label, selected: props.selected, activatorRef: props.defaultActivatorRef })),
             React__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, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
 }

package/dist/ComboboxContent-cjs.js

@@ -15,7 +15,7 @@ var constants = require('./constants-cjs.js');
 var styles = {"content":"QsRc49DHSgA-","hidden":"_7Fd5XGsPpUA-","actions":"yV8-0Hs43J0-","actionPadding":"g3Gdt8jXvFk-","spinning":"dJVYYOaf04E-"};
 
 function useComboboxContent(open, selected) {
-    const { shouldScroll } = React.useContext(ComboboxProvider.ComboboxContext);
+    const { onClear, onSelectAll, shouldScroll } = React.useContext(ComboboxProvider.ComboboxContext);
     const optionsListRef = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -29,6 +29,8 @@ function useComboboxContent(open, selected) {
         }
     }, [open, selected]);
     return {
+        onClear,
+        onSelectAll,
         optionsListRef,
     };
 }
@@ -134,7 +136,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
 
 function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
-    const { optionsListRef } = useComboboxContent(props.open, props.selected);
+    const { onClear, onSelectAll, optionsListRef } = useComboboxContent(props.open, props.selected);
     const { popperRef, popperStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
     const content = (React.createElement("div", Object.assign({ ref: popperRef, id: constants.COMBOBOX_MENU_ID, "data-testid": constants.COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
             [styles.hidden]: !props.open,
@@ -142,8 +144,10 @@ function ComboboxContent(props) {
         React.createElement(ComboboxContentSearch.ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
         props.multiselect && (optionsExist || props.selected.length > 0) && (React.createElement(ComboboxContentHeader.ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
+                onClear === null || onClear === void 0 ? void 0 : onClear();
             }, onSelectAll: () => {
                 props.selectedStateSetter(props.options);
+                onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(props.options);
             } })),
         React.createElement(ComboboxContentList.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.createElement("div", { className: styles.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React.createElement("div", { key: index, className: classnames({

package/dist/ComboboxContent-es.js

@@ -13,7 +13,7 @@ import { C as COMBOBOX_MENU_ID } from './constants-es.js';
 var styles = {"content":"QsRc49DHSgA-","hidden":"_7Fd5XGsPpUA-","actions":"yV8-0Hs43J0-","actionPadding":"g3Gdt8jXvFk-","spinning":"dJVYYOaf04E-"};
 
 function useComboboxContent(open, selected) {
-    const { shouldScroll } = useContext(ComboboxContext);
+    const { onClear, onSelectAll, shouldScroll } = useContext(ComboboxContext);
     const optionsListRef = useRef(null);
     useEffect(() => {
         var _a;
@@ -27,6 +27,8 @@ function useComboboxContent(open, selected) {
         }
     }, [open, selected]);
     return {
+        onClear,
+        onSelectAll,
         optionsListRef,
     };
 }
@@ -132,7 +134,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
 
 function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
-    const { optionsListRef } = useComboboxContent(props.open, props.selected);
+    const { onClear, onSelectAll, optionsListRef } = useComboboxContent(props.open, props.selected);
     const { popperRef, popperStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
     const content = (React__default.createElement("div", Object.assign({ ref: popperRef, id: COMBOBOX_MENU_ID, "data-testid": COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
             [styles.hidden]: !props.open,
@@ -140,8 +142,10 @@ function ComboboxContent(props) {
         React__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.createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
+                onClear === null || onClear === void 0 ? void 0 : onClear();
             }, onSelectAll: () => {
                 props.selectedStateSetter(props.options);
+                onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(props.options);
             } })),
         React__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.createElement("div", { className: styles.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default.createElement("div", { key: index, className: classnames({

package/dist/ComboboxContentList-cjs.js

@@ -18,7 +18,7 @@ function ComboboxContentList(props) {
     return (React.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
         optionsExist && (React.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
             props.options.map(option => {
-                return (React.createElement(ComboboxOption.ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender }));
+                return (React.createElement(ComboboxOption.ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
             }),
             React.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
                 React.createElement(AnimatedPresence.AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React.createElement(Spinner.Spinner, { size: "small" })))),

package/dist/ComboboxContentList-es.js

@@ -16,7 +16,7 @@ function ComboboxContentList(props) {
     return (React__default.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
         optionsExist && (React__default.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
             props.options.map(option => {
-                return (React__default.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender }));
+                return (React__default.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
             }),
             React__default.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
                 React__default.createElement(AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React__default.createElement(Spinner, { size: "small" })))),

package/dist/ComboboxOption-cjs.js

@@ -10,11 +10,15 @@ var ComboboxProvider = require('./ComboboxProvider-cjs.js');
 var styles = {"option":"HowvTX8-pw4-","spinning":"iwgbuC2MqzI-"};
 
 function ComboboxOption(props) {
-    const { customRender } = props, contentProps = tslib_es6.__rest(props, ["customRender"]);
+    const { customRender, onClick } = props, contentProps = tslib_es6.__rest(props, ["customRender", "onClick"]);
     const { selected, selectionHandler } = React.useContext(ComboboxProvider.ComboboxContext);
     const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
-    return (React.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(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected }))) : (React.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
+    const handleClick = () => {
+        const { id, label } = props;
+        selectionHandler === null || selectionHandler === void 0 ? void 0 : selectionHandler({ id, label });
+        onClick === null || onClick === void 0 ? void 0 : onClick({ id, label });
+    };
+    return (React.createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: handleClick, className: classnames(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected }))) : (React.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
 }
 function InternalDefaultContent(props) {
     return (React.createElement(React.Fragment, null,

package/dist/ComboboxOption-es.js

@@ -8,11 +8,15 @@ import { a as ComboboxContext } from './ComboboxProvider-es.js';
 var styles = {"option":"HowvTX8-pw4-","spinning":"iwgbuC2MqzI-"};
 
 function ComboboxOption(props) {
-    const { customRender } = props, contentProps = __rest(props, ["customRender"]);
+    const { customRender, onClick } = props, contentProps = __rest(props, ["customRender", "onClick"]);
     const { selected, selectionHandler } = useContext(ComboboxContext);
     const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
-    return (React__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(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected }))) : (React__default.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
+    const handleClick = () => {
+        const { id, label } = props;
+        selectionHandler === null || selectionHandler === void 0 ? void 0 : selectionHandler({ id, label });
+        onClick === null || onClick === void 0 ? void 0 : onClick({ id, label });
+    };
+    return (React__default.createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: handleClick, className: classnames(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected }))) : (React__default.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
 }
 function InternalDefaultContent(props) {
     return (React__default.createElement(React__default.Fragment, null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.66.0",
+  "version": "6.67.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "c4b9bf8f3dab846ea63b3f772f993a5232de10af"
+  "gitHead": "6246dedceb2a622533b0bb366c0a96b312eabc0e"
 }