@jobber/components 4.42.0 → 4.42.1-update-hov.11

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

@@ -0,0 +1,189 @@
+import { Dispatch, ReactElement, SetStateAction } from "react";
+type ComboboxFragment = Iterable<ComboboxNode>;
+type ComboboxNode = ReactElement | ComboboxFragment;
+export interface ComboboxProps {
+    readonly children?: ComboboxNode;
+    /**
+     * When `true`, `Combobox` will allow for multiple selections
+     *
+     * @default false
+     */
+    readonly multiSelect?: boolean;
+    /**
+     * Placeholder text to display in the search input. Defaults to "Search".
+     */
+    readonly searchPlaceholder?: string;
+    /**
+     * The selected options of the Combobox.
+     */
+    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;
+    /**
+     * Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument.
+     */
+    readonly onSelect: (selection: ComboboxOption[]) => void;
+    /**
+     * Callback function invoked upon the Combobox menu closing.
+     */
+    readonly onClose?: () => void;
+    /**
+     * The Chip heading for the trigger
+     */
+    readonly label?: string;
+}
+export interface ComboboxActivatorProps {
+    readonly children: React.ReactElement;
+}
+export interface ComboboxTriggerProps extends Pick<ComboboxContentProps, "selected"> {
+    readonly label?: string;
+}
+export interface ComboboxOption {
+    /**
+     * A unique identifier for the option.
+     */
+    id: string | number;
+    /**
+     * The value to be visually displayed in the Combobox options list.
+     */
+    label: string;
+}
+export interface ComboboxContentProps {
+    /**
+     * Placeholder text to display in the search input. Defaults to "Search".
+     */
+    readonly searchPlaceholder?: string;
+    /**
+     * The selected options of the Combobox.
+     */
+    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;
+    /**
+     * 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 interface ComboboxSearchProps {
+    /**
+     * The placeholder for the search input.
+     */
+    placeholder?: string;
+    /**
+     * The value of the search input
+     */
+    searchValue: string;
+    /**
+     * The open state of the Combobox listbox.
+     */
+    open: boolean;
+    /**
+     * Setter for the search input value.
+     */
+    setSearchValue: Dispatch<SetStateAction<string>>;
+}
+export interface ComboboxHeaderProps {
+    /**
+     * Does the Combobox have any options visible in the list.
+     */
+    readonly hasOptionsVisible: boolean;
+    /**
+     * The noun to be used in the header label.
+     */
+    readonly subjectNoun?: string;
+    /**
+     * The number of selected options.
+     */
+    readonly selectedCount: number;
+    /**
+     * The function to call when the clear all button is clicked.
+     */
+    readonly onClearAll: () => void;
+    /**
+     * The function to call when the select all button is clicked.
+     */
+    readonly onSelectAll: () => void;
+}
+export interface ComboboxListProps {
+    /**
+     * The options to display in the list. May be the full set of the Combobox or could be filtered.
+     */
+    readonly options: ComboboxOption[];
+    /**
+     * Used to determine if the empty state should be shown and given priority over the options list.
+     */
+    readonly showEmptyState: boolean;
+    /**
+     * The currently selected options.
+     */
+    readonly selected: ComboboxOption[];
+    /**
+     * A ref to the list element.
+     */
+    readonly optionsListRef: React.RefObject<HTMLUListElement>;
+    /**
+     * The current search term. Used in the no results message.
+     */
+    readonly searchValue: string;
+    /**
+     * Determines if it is a single selection or multi selection Combobox.
+     */
+    readonly multiselect?: boolean;
+    /**
+     * The noun to be used in the empty state message.
+     */
+    readonly subjectNoun?: string;
+}
+export interface ComboboxActionProps {
+    /**
+     * The function to call when the action is clicked.
+     */
+    onClick(event: React.MouseEvent<HTMLButtonElement>): void;
+    /**
+     * The label text of the action.
+     */
+    readonly label: string;
+}
+export {};

package/dist/Combobox/ComboboxProvider.d.ts

@@ -0,0 +1,20 @@
+import React, { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { ComboboxOption } from "./Combobox.types";
+export declare const ComboboxContext: React.Context<{
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    selected: ComboboxOption[];
+    selectionHandler: (option: ComboboxOption) => void;
+    handleClose: () => void;
+    shouldScroll: MutableRefObject<boolean>;
+}>;
+export interface ComboboxProviderProps {
+    readonly children: React.ReactNode;
+    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/ComboboxAction/ComboboxAction.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxActionProps } from "../../Combobox.types";
+export declare function ComboboxAction(props: ComboboxActionProps): JSX.Element;

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

@@ -0,0 +1 @@
+export { ComboboxAction } from "./ComboboxAction";

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

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

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

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxContentProps } from "../../Combobox.types";
+export declare function ComboboxContent(props: ComboboxContentProps): JSX.Element;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxHeaderProps } from "../../../Combobox.types";
+export declare function ComboboxContentHeader(props: ComboboxHeaderProps): JSX.Element;

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

@@ -0,0 +1 @@
+export { ComboboxContentHeader } from "./ComboboxContentHeader";

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxListProps } from "../../../Combobox.types";
+export declare function ComboboxContentList(props: ComboboxListProps): JSX.Element;

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

@@ -0,0 +1 @@
+export { ComboboxContentList } from "./ComboboxContentList";

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxSearchProps } from "../../../Combobox.types";
+export declare function ComboboxContentSearch(props: ComboboxSearchProps): JSX.Element;

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

@@ -0,0 +1 @@
+export { ComboboxContentSearch } from "./ComboboxContentSearch";

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

@@ -0,0 +1 @@
+export { ComboboxContent } from "./ComboboxContent";

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

@@ -0,0 +1,6 @@
+/// <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/ComboboxOption/index.d.ts

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxTriggerProps } from "../../Combobox.types";
+export declare function ComboboxTrigger({ label, selected, }: ComboboxTriggerProps): JSX.Element;

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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ComboboxOption } from "../Combobox.types";
+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;
+    };
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComboboxOption } from "../Combobox.types";
+interface useComboboxContent {
+    filteredOptions: ComboboxOption[];
+    optionsListRef: React.RefObject<HTMLUListElement>;
+}
+export declare function useComboboxContent(options: ComboboxOption[], open: boolean, selected: ComboboxOption[], searchValue: string): useComboboxContent;
+export {};

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

@@ -0,0 +1,12 @@
+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;

package/dist/Combobox/index.d.ts

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

package/dist/Combobox/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Combobox = require('../Combobox-0044641d.js');
+require('react');
+require('classnames');
+require('react-dom');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Icon-405a216c.js');
+require('@jobber/design');
+require('../Text-4a2bc89f.js');
+require('../Typography-973b122e.js');
+require('../Button-163a0641.js');
+require('react-router-dom');
+require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useFocusTrap');
+require('react-popper');
+require('@jobber/hooks/useOnKeyDown');
+require('../Chip-55e6da05.js');
+require('@jobber/hooks/useInView');
+require('../Avatar-76a799fa.js');
+require('color');
+require('../Tooltip-6b12f1c2.js');
+require('framer-motion');
+require('@jobber/hooks/useAssert');
+
+
+
+exports.Combobox = Combobox.Combobox;
+exports.ComboboxContextProvider = Combobox.ComboboxContextProvider;