@jobber/components 4.56.0 → 4.57.0

package/dist/Combobox/Combobox.d.ts

@@ -3,12 +3,14 @@ import { ComboboxProps } from "./Combobox.types";
 import { ComboboxContent } from "./components/ComboboxContent";
 import { ComboboxAction } from "./components/ComboboxAction";
 import { ComboboxTriggerButton, ComboboxTriggerChip } from "./components/ComboboxTrigger";
+import { ComboboxOption } from "./components/ComboboxOption";
 import { ComboboxActivator } from "./components/ComboboxActivator";
-export declare function Combobox(props: ComboboxProps): JSX.Element;
+export declare function Combobox({ multiSelect, selected, ...props }: ComboboxProps): JSX.Element;
 export declare namespace Combobox {
     var TriggerButton: typeof ComboboxTriggerButton;
     var TriggerChip: typeof ComboboxTriggerChip;
     var Activator: typeof ComboboxActivator;
     var Content: typeof ComboboxContent;
     var Action: typeof ComboboxAction;
+    var Option: typeof ComboboxOption;
 }

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

@@ -1,7 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from "react";
 import { XOR } from "ts-xor";
 import { ButtonProps } from "../Button";
-export interface ComboboxProps {
+export interface ComboboxProps extends Partial<Omit<ComboboxContentBaseProps, "options">> {
     readonly children: ReactElement | ReactElement[];
     /**
      * When `true`, `Combobox` will allow for multiple selections
@@ -13,6 +13,8 @@ export interface ComboboxProps {
      * The Chip heading for the trigger
      */
     readonly heading: string;
+    readonly onSelect?: (selection: ComboboxOption[]) => void;
+    readonly onClose?: (selection: ComboboxOption[]) => void;
 }
 export interface ComboboxTriggerProps {
     /**

package/dist/Combobox/ComboboxProvider.d.ts

@@ -1,11 +1,8 @@
 import React, { RefObject } from "react";
-import { ComboboxOption } from "./Combobox.types";
 export declare const ComboboxContext: React.Context<{
     multiselect: boolean;
     open: boolean;
     setOpen: (open: boolean) => void;
-    selected: ComboboxOption[];
-    setSelected: (open: ComboboxOption[]) => void;
     wrapperRef: RefObject<HTMLDivElement>;
 }>;
 export interface ComboboxProviderProps {

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

@@ -0,0 +1,2 @@
+import { ComboboxOption as ComboboxOptionType } from "../../Combobox.types";
+export declare function ComboboxOption(_: ComboboxOptionType): null;

package/dist/Combobox/components/ComboboxOption/index.d.ts

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

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-interface ComboboxTriggerProps {
+import { ComboboxContentProps } from "../../Combobox.types";
+interface ComboboxTriggerProps extends Pick<ComboboxContentProps, "selected"> {
     readonly heading: string;
 }
-export declare function ComboboxTrigger(props: ComboboxTriggerProps): JSX.Element;
+export declare function ComboboxTrigger({ selected, ...props }: ComboboxTriggerProps): JSX.Element;
 export {};

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

@@ -1,7 +1,10 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
+import { ComboboxActionProps, ComboboxOption as ComboboxOptionProps } from "../Combobox.types";
 export declare const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger or Activator element";
-export declare const COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = "Combobox must have a Combobox.Content element";
+export declare const COMBOBOX_OPTION_AND_CONTENT_EXISTS_ERROR = "Combobox prefers using Combobox.Option and Combobox.Action as the direct child of Combobox instead of Combobox.Content";
 export declare function useComboboxValidation(children: ReactNode): {
     triggerElement: ReactNode;
-    contentElement: ReactNode;
+    contentElement: ReactNode | undefined;
+    optionElements: ReactElement<ComboboxOptionProps>[];
+    actionElements: ReactElement<ComboboxActionProps>[];
 };

package/dist/Combobox/index.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
@@ -127,9 +128,8 @@ const ComboboxContext = React__default["default"].createContext({});
 function ComboboxContextProvider(props) {
     const multiselect = props.multiselect || false;
     const [open, setOpen] = React.useState(false);
-    const [selected, setSelected] = React.useState([]);
     const wrapperRef = React.useRef(null);
-    return (React__default["default"].createElement(ComboboxContext.Provider, { value: { multiselect, open, setOpen, wrapperRef, selected, setSelected } },
+    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)));
@@ -248,10 +248,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
 }
 
 function ComboboxContent(props) {
-    const { open, setOpen, setSelected, wrapperRef, multiselect } = React__default["default"].useContext(ComboboxContext);
-    React.useEffect(() => {
-        setSelected(props.selected);
-    }, [props.selected]);
+    const { open, setOpen, wrapperRef, multiselect } = React__default["default"].useContext(ComboboxContext);
     const optionsExist = props.options.length > 0;
     const { searchValue, setSearchValue, setFirstSelectedElement, filteredOptions, optionsListRef, selectedOptions, optionsSelectionHandler, } = useComboboxContent(props.options, open, props.selected, props.onClose, props.onSelect);
     const { popperRef, popperStyles, attributes } = useComboboxAccessibility(handleSelection, filteredOptions, optionsListRef, open, setOpen, wrapperRef);
@@ -319,8 +316,9 @@ function ComboboxTriggerChip(props) {
             React__default["default"].createElement(Icon.Icon, { color: "surfaceReverse", name: "add", size: "small" }))));
 }
 
-function ComboboxTrigger(props) {
-    const { open, setOpen, selected, multiselect } = React__default["default"].useContext(ComboboxContext);
+function ComboboxTrigger(_a) {
+    var { selected } = _a, props = tslib_es6.__rest(_a, ["selected"]);
+    const { open, setOpen, multiselect } = React__default["default"].useContext(ComboboxContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
     const renderHeading = multiselect || !hasSelection;
@@ -339,11 +337,19 @@ function ComboboxActivator(props) {
     return props.children;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function ComboboxOption(_) {
+    useAssert.useAssert(true, "Combobox.Option can only be used inside a Combobox component");
+    return null;
+}
+
 const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger or Activator element";
-const COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = "Combobox must have a Combobox.Content element";
+const COMBOBOX_OPTION_AND_CONTENT_EXISTS_ERROR = "Combobox prefers using Combobox.Option and Combobox.Action as the direct child of Combobox instead of Combobox.Content";
 function useComboboxValidation(children) {
     const childrenArray = React__default["default"].Children.toArray(children);
     let triggerElement, contentElement, multipleTriggersFound = false;
+    const optionElements = [];
+    const actionElements = [];
     childrenArray.forEach(child => {
         if (isTriggerElement(child)) {
             if (triggerElement) {
@@ -354,12 +360,20 @@ function useComboboxValidation(children) {
         if (isContentElement(child)) {
             contentElement = child;
         }
+        if (isOptionElement(child)) {
+            optionElements.push(child);
+        }
+        if (isActionElement(child)) {
+            actionElements.push(child);
+        }
     });
     useAssert.useAssert(multipleTriggersFound, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE);
-    useAssert.useAssert(!contentElement, COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE);
+    useAssert.useAssert(Boolean((optionElements.length || actionElements.length) && contentElement), COMBOBOX_OPTION_AND_CONTENT_EXISTS_ERROR);
     return {
         contentElement,
         triggerElement,
+        optionElements,
+        actionElements,
     };
 }
 function isTriggerElement(child) {
@@ -371,12 +385,25 @@ function isTriggerElement(child) {
 function isContentElement(child) {
     return React__default["default"].isValidElement(child) && child.type === ComboboxContent;
 }
+function isOptionElement(child) {
+    return React__default["default"].isValidElement(child) && child.type === ComboboxOption;
+}
+function isActionElement(child) {
+    return React__default["default"].isValidElement(child) && child.type === ComboboxAction;
+}
 
-function Combobox(props) {
-    const { contentElement, triggerElement } = useComboboxValidation(props.children);
-    return (React__default["default"].createElement(ComboboxContextProvider, { multiselect: props.multiSelect },
-        triggerElement || React__default["default"].createElement(ComboboxTrigger, { heading: props.heading }),
-        contentElement));
+function Combobox(_a) {
+    var { multiSelect = false, selected = [] } = _a, props = tslib_es6.__rest(_a, ["multiSelect", "selected"]);
+    const { contentElement, triggerElement, optionElements, actionElements } = useComboboxValidation(props.children);
+    const buildOptions = optionElements.map(option => ({
+        id: option.props.id,
+        label: option.props.label,
+    }));
+    return (React__default["default"].createElement(ComboboxContextProvider, { multiselect: multiSelect },
+        triggerElement || (React__default["default"].createElement(ComboboxTrigger, { heading: props.heading, selected: selected })),
+        contentElement || (
+        // @ts-expect-error - Suppress the XOR error with onClose|onSelect until we finish the refactor on JOB-81416
+        React__default["default"].createElement(ComboboxContent, Object.assign({ options: buildOptions, selected: selected }, props), actionElements))));
 }
 /**
  * @deprecated Use Combobox.Activator instead
@@ -387,8 +414,12 @@ Combobox.TriggerButton = ComboboxTriggerButton;
  */
 Combobox.TriggerChip = ComboboxTriggerChip;
 Combobox.Activator = ComboboxActivator;
+/**
+ * @deprecated Use individual Combobox.Option instead
+ */
 Combobox.Content = ComboboxContent;
 Combobox.Action = ComboboxAction;
+Combobox.Option = ComboboxOption;
 
 exports.Combobox = Combobox;
 exports.ComboboxContextProvider = ComboboxContextProvider;

package/package.json

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