@jobber/components 4.58.5 → 4.59.1-st-spike-w.0

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

@@ -1,8 +1,8 @@
 import { Dispatch, ReactElement, SetStateAction } from "react";
-import { XOR } from "ts-xor";
-import { ButtonProps } from "../Button";
-export interface ComboboxProps extends Partial<Omit<ComboboxContentBaseProps, "options">> {
-    readonly children: ReactElement | ReactElement[];
+type ComboboxFragment = Iterable<ComboboxNode>;
+type ComboboxNode = ReactElement | ComboboxFragment;
+export interface ComboboxProps {
+    readonly children?: ComboboxNode;
     /**
      * When `true`, `Combobox` will allow for multiple selections
      *
@@ -10,52 +10,48 @@ export interface ComboboxProps extends Partial<Omit<ComboboxContentBaseProps, "o
      */
     readonly multiSelect?: boolean;
     /**
-     * The label for the Combobox trigger
-     */
-    readonly label?: string;
-    readonly onSelect?: (selection: ComboboxOption[]) => void;
-    readonly onClose?: (selection: ComboboxOption[]) => void;
-}
-export interface ComboboxTriggerProps {
-    /**
-     * The label text of the trigger.
+     * Placeholder text to display in the search input. Defaults to "Search".
      */
-    readonly label: string;
-}
-export interface ComboboxTriggerButtonProps extends ComboboxTriggerProps, Pick<ButtonProps, "type" | "variation" | "icon" | "iconOnRight"> {
-}
-export type ComboboxTriggerChipProps = ComboboxTriggerProps;
-export interface ComboboxOption {
+    readonly searchPlaceholder?: string;
     /**
-     * A unique identifier for the option.
+     * The selected options of the Combobox.
      */
-    id: string | number;
+    readonly selected: ComboboxOption[];
     /**
-     * The value to be visually displayed in the Combobox options list.
+     * The encapsulating noun for the content of the combobox. Used
+     * in the empty state, and search placeholder. Should be pluralized.
      */
-    label: string;
-}
-interface ComboboxCloseProps {
+    readonly subjectNoun?: string;
     /**
      * Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument.
      */
     readonly onSelect: (selection: ComboboxOption[]) => void;
-}
-interface ComboboxSelectProps {
     /**
-     * Callback function invoked upon the Combobox menu closing. Provides the selected option(s) as an argument.
+     * Callback function invoked upon the Combobox menu closing.
+     */
+    readonly onClose?: () => void;
+    /**
+     * The Chip heading for the trigger
      */
-    readonly onClose: (selection: ComboboxOption[]) => void;
+    readonly label?: string;
+}
+export interface ComboboxActivatorProps {
+    readonly children: React.ReactElement;
+}
+export interface ComboboxTriggerProps extends Pick<ComboboxContentProps, "selected"> {
+    readonly label?: string;
 }
-interface ComboboxContentBaseProps {
+export interface ComboboxOption {
     /**
-     * List of selectable options to display.
+     * A unique identifier for the option.
      */
-    readonly options: ComboboxOption[];
+    id: string | number;
     /**
-     * Optional action button(s) to display at the bottom of the list.
+     * The value to be visually displayed in the Combobox options list.
      */
-    readonly children?: ReactElement | ReactElement[];
+    label: string;
+}
+export interface ComboboxContentProps {
     /**
      * Placeholder text to display in the search input. Defaults to "Search".
      */
@@ -69,8 +65,47 @@ interface ComboboxContentBaseProps {
      * in the empty state, and search placeholder. Should be pluralized.
      */
     readonly subjectNoun?: string;
+    /**
+     * Action elements to be displayed at the bottom of the list.
+     */
+    readonly actionElements?: ReactElement[];
+    /**
+     * State setter for the selected options.
+     */
+    readonly selectedStateSetter: (selection: ComboboxOption[]) => void;
+    /**
+     * Callback function to be called when an option is selected.
+     */
+    readonly handleSelection: (option: ComboboxOption) => void;
+    /**
+     * Are multiple selections permitted.
+     */
+    readonly multiselect?: boolean;
+    /**
+     * The current search term.
+     */
+    readonly searchValue: string;
+    /**
+     * Setter for the current search term.
+     */
+    readonly setSearchValue: Dispatch<SetStateAction<string>>;
+    /**
+     * Reference to the wrapping div element of all the Combobox pieces
+     */
+    readonly wrapperRef: React.RefObject<HTMLDivElement>;
+    /**
+     * Is the Combobox open
+     */
+    readonly open: boolean;
+    /**
+     * Setter for the open state of the Combobox.
+     */
+    readonly setOpen: (open: boolean) => void;
+    /**
+     * The full set of options for the Combobox in the shape of data, not elements.
+     */
+    readonly options: ComboboxOption[];
 }
-export type ComboboxContentProps = ComboboxContentBaseProps & XOR<ComboboxCloseProps, ComboboxSelectProps>;
 export interface ComboboxSearchProps {
     /**
      * The placeholder for the search input.
@@ -128,14 +163,6 @@ export interface ComboboxListProps {
      * A ref to the list element.
      */
     readonly optionsListRef: React.RefObject<HTMLUListElement>;
-    /**
-     * Setter for the first selected element, which is used to scroll the list to the first selected element on re-opening.
-     */
-    readonly setFirstSelectedElement: React.Dispatch<SetStateAction<HTMLElement | null>>;
-    /**
-     * The callback function to call when an option is selected.
-     */
-    readonly selectionHandler: (option: ComboboxOption) => void;
     /**
      * The current search term. Used in the no results message.
      */
@@ -143,7 +170,7 @@ export interface ComboboxListProps {
     /**
      * Determines if it is a single selection or multi selection Combobox.
      */
-    readonly multiselect: boolean;
+    readonly multiselect?: boolean;
     /**
      * The noun to be used in the empty state message.
      */

package/dist/Combobox/ComboboxProvider.d.ts

@@ -1,12 +1,20 @@
-import React, { RefObject } from "react";
+import React, { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { ComboboxOption } from "./Combobox.types";
 export declare const ComboboxContext: React.Context<{
-    multiselect: boolean;
     open: boolean;
     setOpen: (open: boolean) => void;
-    wrapperRef: RefObject<HTMLDivElement>;
+    selected: ComboboxOption[];
+    selectionHandler: (option: ComboboxOption) => void;
+    handleClose: () => void;
+    shouldScroll: MutableRefObject<boolean>;
 }>;
 export interface ComboboxProviderProps {
     readonly children: React.ReactNode;
-    readonly multiselect?: boolean;
+    readonly selected: ComboboxOption[];
+    readonly selectionHandler: (option: ComboboxOption) => void;
+    readonly open: boolean;
+    readonly setOpen: Dispatch<SetStateAction<boolean>>;
+    readonly handleClose: () => void;
+    readonly shouldScroll: MutableRefObject<boolean>;
 }
 export declare function ComboboxContextProvider(props: ComboboxProviderProps): JSX.Element;

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

@@ -1,6 +1,3 @@
 import React from "react";
-interface ComboboxActivatorProps {
-    readonly children: React.ReactElement;
-}
+import { ComboboxActivatorProps } from "../../Combobox.types";
 export declare function ComboboxActivator(props: ComboboxActivatorProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export {};

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

@@ -1,2 +1,6 @@
-import { ComboboxOption as ComboboxOptionType } from "../../Combobox.types";
-export declare function ComboboxOption(_: ComboboxOptionType): null;
+/// <reference types="react" />
+export interface ComboboxOptionProps {
+    readonly id: string | number;
+    readonly label: string;
+}
+export declare function ComboboxOption(props: ComboboxOptionProps): JSX.Element;

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

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

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

@@ -1,3 +1 @@
-export { ComboboxTriggerButton } from "./ComboboxTriggerButton/ComboboxTriggerButton";
-export { ComboboxTriggerChip } from "./ComboboxTriggerChip/ComboboxTriggerChip";
 export { ComboboxTrigger } from "./ComboboxTrigger";

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

@@ -0,0 +1,15 @@
+import React, { Dispatch, MutableRefObject } from "react";
+import { UseMakeComboboxHandlersReturn } from "./useMakeComboboxHandlers";
+import { ComboboxOption } from "../Combobox.types";
+type UseComboboxReturn = {
+    wrapperRef: React.RefObject<HTMLDivElement>;
+    searchValue: string;
+    setSearchValue: Dispatch<React.SetStateAction<string>>;
+    open: boolean;
+    setOpen: Dispatch<React.SetStateAction<boolean>>;
+    selectedOptions: ComboboxOption[];
+    selectedStateSetter: (selection: ComboboxOption[]) => void;
+    shouldScroll: MutableRefObject<boolean>;
+} & UseMakeComboboxHandlersReturn;
+export declare function useCombobox(selected: ComboboxOption[], onSelect: (selection: ComboboxOption[]) => void, onClose?: () => void, multiSelect?: boolean): UseComboboxReturn;
+export {};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComboboxOption } from "../Combobox.types";
-export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, setOpen: (open: boolean) => void, wrapperRef: React.RefObject<HTMLDivElement>): {
+export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement>): {
     popperRef: React.RefObject<HTMLDivElement>;
     popperStyles: {
         [key: string]: React.CSSProperties;

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

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

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

@@ -1,10 +1,12 @@
-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_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 | undefined;
-    optionElements: ReactElement<ComboboxOptionProps>[];
-    actionElements: ReactElement<ComboboxActionProps>[];
+import { ReactElement } from "react";
+import { 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[];
 };
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+export declare function getCompoundComponents<T>(type: ReactElement<T>["type"], children?: ComboboxProps["children"]): ReactElement<T>[];

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { ComboboxOption } from "../Combobox.types";
+export interface UseMakeComboboxHandlersReturn {
+    handleClose: () => void;
+    handleSelection: (selection: ComboboxOption) => void;
+}
+export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void): UseMakeComboboxHandlersReturn;