@jobber/components 6.68.1 → 6.68.2

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

@@ -21,12 +21,12 @@ export interface ComboboxProps {
     /**
      * Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument.
      */
-    readonly onSelect: (selection: ComboboxSelection[]) => void;
+    readonly onSelect: (selection: ComboboxOption[]) => 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;
+    readonly onSelectAll?: (selection: ComboboxOption[]) => void;
     /**
      * Callback function invoked upon the clearing of all options.
      * This is only available when `multiSelect` is `true`.
@@ -118,7 +118,6 @@ export interface ComboboxOptionProps {
     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/index.d.ts

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

package/dist/ComboboxContent-cjs.js

@@ -138,6 +138,14 @@ function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     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);
+    // options that are passed back to consumers via onSelectAll callback
+    // should only contain id and label
+    const optionsData = React.useMemo(() => {
+        return props.options.map(option => ({
+            id: option.id,
+            label: option.label,
+        }));
+    }, [props.options]);
     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,
         }), style: popperStyles }, floatingProps),
@@ -147,7 +155,7 @@ function ComboboxContent(props) {
                 onClear === null || onClear === void 0 ? void 0 : onClear();
             }, onSelectAll: () => {
                 props.selectedStateSetter(props.options);
-                onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(props.options);
+                onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(optionsData);
             } })),
         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

@@ -1,4 +1,4 @@
-import React__default, { useContext, useRef, useEffect } from 'react';
+import React__default, { useContext, useRef, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
 import { u as useFloatingParentNodeId, a as useFloatingNodeId, b as useFloating, c as autoPlacement, o as offset, s as shift, d as autoUpdate, e as useDismiss, f as useInteractions, F as FloatingTree, g as FloatingNode, h as FloatingPortal } from './floating-ui.react-es.js';
 import ReactDOM__default from 'react-dom';
@@ -136,6 +136,14 @@ function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     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);
+    // options that are passed back to consumers via onSelectAll callback
+    // should only contain id and label
+    const optionsData = useMemo(() => {
+        return props.options.map(option => ({
+            id: option.id,
+            label: option.label,
+        }));
+    }, [props.options]);
     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,
         }), style: popperStyles }, floatingProps),
@@ -145,7 +153,7 @@ function ComboboxContent(props) {
                 onClear === null || onClear === void 0 ? void 0 : onClear();
             }, onSelectAll: () => {
                 props.selectedStateSetter(props.options);
-                onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(props.options);
+                onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(optionsData);
             } })),
         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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.68.1",
+  "version": "6.68.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "984dcaa45ef84984b1989dbd973dd95a7b729f94"
+  "gitHead": "2ac0d333a2eef4ee38b49817ff7930a998094645"
 }