@jobber/components 6.14.1-aidenfix--e9ec00c.0 → 6.15.0

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,50 +1,6 @@
-import React from "react";
-import { XOR } from "ts-xor";
-import { GroupOption, Option } from "./Option";
+import { Ref, RefAttributes } from "react";
+import { AnyOption, AutocompleteProps, Option } from "./Autocomplete.types";
 import { InputTextRef } from "../InputText";
-import { FormFieldProps } from "../FormField";
-type OptionCollection = XOR<Option[], GroupOption[]>;
-interface AutocompleteProps extends Pick<FormFieldProps, "clearable" | "description" | "invalid" | "name" | "onBlur" | "onFocus" | "prefix" | "size" | "suffix" | "validations"> {
-    /**
-     * @deprecated
-     * Use `ref` instead.
-     */
-    readonly inputRef?: FormFieldProps["inputRef"];
-    /**
-     * Initial options to show when user first focuses the Autocomplete
-     */
-    readonly initialOptions?: OptionCollection;
-    /**
-     * Set Autocomplete value.
-     */
-    readonly value: Option | undefined;
-    /**
-     * Allow the autocomplete to use values not from the drop down menu.
-     *
-     * @default true
-     */
-    readonly allowFreeForm?: boolean;
-    /**
-     * Debounce in milliseconds for getOptions
-     *
-     * @default 300
-     */
-    readonly debounce?: number;
-    /**
-     * Simplified onChange handler that only provides the new value.
-     * @param newValue
-     */
-    onChange(newValue?: Option): void;
-    /**
-     * Called as the user types in the input. The autocomplete will display what
-     * is returned from this method to the user as available options.
-     * @param newInputText
-     */
-    getOptions(newInputText: string): OptionCollection | Promise<OptionCollection>;
-    /**
-     * Hint text that goes above the value once the form is filled out.
-     */
-    readonly placeholder: string;
-}
-export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<InputTextRef>>;
+declare function AutocompleteInternal<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu, ...inputProps }: AutocompleteProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>, ref: Ref<InputTextRef>): JSX.Element;
+export declare const Autocomplete: <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & RefAttributes<InputTextRef>) => ReturnType<typeof AutocompleteInternal>;
 export {};

package/dist/Autocomplete/Autocomplete.types.d.ts

@@ -0,0 +1,111 @@
+import { RefObject } from "react";
+import { FormFieldProps } from "../FormField";
+import { InputTextRef } from "../InputText";
+type OptionValue = string | number;
+export interface BaseOption {
+    label: string;
+}
+export interface Option extends BaseOption {
+    value?: OptionValue;
+    description?: string;
+    details?: string;
+}
+export interface GroupOption extends BaseOption {
+    options: Option[];
+}
+export type OptionCollection = AnyOption[];
+export type AnyOption<GenericOption extends Option | GroupOption = Option | GroupOption> = GenericOption;
+export type OptionInGroup<T extends AnyOption> = T extends GroupOption ? T["options"][number] : T;
+export interface AutocompleteProps<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption> extends Pick<FormFieldProps, "clearable" | "description" | "invalid" | "name" | "onBlur" | "onFocus" | "prefix" | "size" | "suffix" | "validations"> {
+    /**
+     * @deprecated
+     * Use `ref` instead.
+     */
+    readonly inputRef?: FormFieldProps["inputRef"];
+    readonly initialOptions?: GenericOption[];
+    /**
+     * Set Autocomplete value.
+     */
+    readonly value: GenericOptionValue | undefined;
+    /**
+     * Allow the autocomplete to use values not from the drop down menu.
+     *
+     * @default true
+     */
+    readonly allowFreeForm?: boolean;
+    /**
+     * Debounce in milliseconds for getOptions
+     *
+     * @default 300
+     */
+    readonly debounce?: number;
+    /**
+     * Simplified onChange handler that only provides the new value.
+     * @param newValue
+     */
+    onChange(newValue?: GenericOptionValue): void;
+    /**
+     * Called as the user types in the input. The autocomplete will display what
+     * is returned from this method to the user as available options.
+     * @param newInputText
+     */
+    getOptions(newInputText: string): Array<GenericGetOptionsValue | GenericOption> | Promise<Array<GenericGetOptionsValue | GenericOption>>;
+    /**
+     * Hint text that goes above the value once the form is filled out.
+     */
+    readonly placeholder: string;
+    /**
+     * Override the content rendered in the menu.
+     */
+    readonly customRenderMenu?: (props: CustomOptionsMenuProp<GenericOption | GenericGetOptionsValue, GenericOptionValue>) => React.ReactElement;
+}
+export type CustomOptionsMenuType<GenericOption extends AnyOption = AnyOption> = (props: CustomOptionsMenuProp<GenericOption>) => React.ReactElement;
+export interface MenuProps<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option> {
+    readonly options: GenericOption[];
+    readonly selectedOption?: GenericOptionValue;
+    readonly inputFocused: boolean;
+    /**
+     * Element that the menu is attached to when the menu opens.
+     */
+    readonly attachTo: RefObject<Element | null>;
+    /**
+     * Ref to the TextInput element.
+     */
+    readonly inputRef: RefObject<InputTextRef | null>;
+    onOptionSelect(chosenOption?: GenericOptionValue): void;
+    readonly customRenderMenu?: (props: CustomOptionsMenuProp<GenericOption, GenericOptionValue>) => React.ReactElement;
+}
+export interface CustomOptionsMenuProp<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option> {
+    /**
+     * The options to display in the menu
+     */
+    options: Array<OptionInGroup<GenericOption> | GenericOption>;
+    /**
+     * The currently selected option
+     */
+    selectedOption?: GenericOptionValue;
+    /**
+     * The HTML element that wraps the menu content. Used for handling keyboard scroll behavior.
+     */
+    readonly menuRef: HTMLElement | null | undefined;
+    /**
+     * Callback to select an option
+     */
+    readonly onOptionSelect: (chosenOption?: GenericOptionValue) => void;
+    /**
+     * Determine if the input is focused. Can be used to conditionally render the menu.
+     */
+    readonly inputFocused: boolean;
+    /**
+     * Ref to the TextInput element.
+     */
+    readonly inputRef: RefObject<InputTextRef | null>;
+    /**
+     * Component that wraps the menu content. Used for handling keyboard scroll behavior.
+     */
+    readonly MenuWrapper: (props: {
+        children: React.ReactNode;
+        visible: boolean;
+    }) => React.ReactElement;
+}
+export {};

package/dist/Autocomplete/Autocomplete.utils.d.ts

@@ -0,0 +1,8 @@
+import { AnyOption, GroupOption, Option } from "./Autocomplete.types";
+export declare function isOptionSelected(selectedOption: Option | undefined, option: Option): boolean;
+/**
+ * Helper function to determine if the option is a group. This is used to
+ * determine if the option contains a list of options for rendering Section
+ * Labels in the Autocomplete component.
+ */
+export declare function isOptionGroup<T extends AnyOption>(option: T): option is Extract<T, GroupOption>;

package/dist/Autocomplete/Menu/DefaultMenu.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from "react";
+import { AnyOption, Option } from "../Autocomplete.types";
+export interface DefaultMenuProps {
+    readonly options: AnyOption[];
+    readonly selectedOption?: Option;
+    /**
+     * Element that it's attached to when the menu opens.
+     */
+    readonly attachTo: RefObject<Element | null>;
+    onOptionSelect(chosenOption?: Option): void;
+    readonly visible?: boolean;
+}
+/**
+ * Renders the default Menu for the Autocomplete component.
+ */
+export declare function DefaultMenu({ options, selectedOption, onOptionSelect, attachTo, visible, }: DefaultMenuProps): JSX.Element;

package/dist/Autocomplete/Menu/Menu.d.ts

@@ -0,0 +1,2 @@
+import { AnyOption, MenuProps, Option } from "../Autocomplete.types";
+export declare function Menu<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option>({ options, selectedOption, onOptionSelect, inputFocused, attachTo, inputRef, customRenderMenu, }: MenuProps<GenericOption, GenericOptionValue>): JSX.Element | null;

package/dist/Autocomplete/Menu/MenuWrapper.d.ts

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from "react";
+import { UseRepositionMenu } from "../useRepositionMenu";
+export interface BaseAutocompleteMenuWrapperInternalProps {
+    readonly setMenuRef: UseRepositionMenu["setMenuRef"];
+    readonly popperStyles: UseRepositionMenu["styles"];
+    readonly attributes: UseRepositionMenu["attributes"];
+    readonly targetWidth: UseRepositionMenu["targetWidth"];
+    readonly visible?: boolean;
+}
+/**
+ * Provides a wrapper for the Autocomplete menu that handles positioning and visibility.
+ * @param attachTo - The element that the menu should be attached to.
+ */
+export declare function useAutocompleteMenu({ attachTo, }: {
+    attachTo: React.RefObject<Element | null>;
+}): {
+    MenuWrapper: ({ children, visible, }: {
+        children?: React.ReactNode;
+        visible: boolean;
+    }) => React.ReactElement;
+    menuRef: HTMLElement | null;
+};
+export declare function BaseAutocompleteMenuWrapper(props: PropsWithChildren<BaseAutocompleteMenuWrapperInternalProps>): JSX.Element;

package/dist/Autocomplete/Option.d.ts

@@ -1,15 +1,77 @@
-import { XOR } from "ts-xor";
-type OptionValue = string | number;
-interface BaseOption {
-    label: string;
+import React, { PropsWithChildren } from "react";
+import { AnyOption, Option } from "./Autocomplete.types";
+export interface MenuOptionProps {
+    readonly isHighlighted: boolean;
+    readonly option: AnyOption;
+    readonly onOptionSelect: (option?: AnyOption) => void;
+    /**
+     * Whether to add separators between the options.
+     */
+    readonly addSeparators: boolean;
+    readonly isSelected: boolean;
+    readonly UNSAFE_className?: {
+        option?: BaseMenuOptionProps["UNSAFE_className"];
+        content?: MenuOptionContentProps["UNSAFE_className"];
+        groupOption?: MenuGroupOptionProps["UNSAFE_className"];
+    };
+    readonly UNSAFE_style?: {
+        option?: BaseMenuOptionProps["UNSAFE_style"];
+        content?: MenuOptionContentProps["UNSAFE_style"];
+        groupOption?: MenuGroupOptionProps["UNSAFE_style"];
+    };
 }
-export interface Option extends BaseOption {
-    value?: OptionValue;
-    description?: string;
-    details?: string;
+/**
+ * The rendering of the default MenuOption
+ */
+export declare function MenuOption({ isHighlighted, option, onOptionSelect, isSelected, addSeparators, UNSAFE_className, UNSAFE_style, }: MenuOptionProps): JSX.Element;
+interface MenuOptionContentProps {
+    readonly UNSAFE_className?: {
+        readonly icon?: string;
+        readonly text?: string;
+        readonly details?: string;
+        readonly label?: string;
+    };
+    readonly UNSAFE_style?: {
+        readonly icon?: React.CSSProperties;
+        readonly text?: React.CSSProperties;
+        readonly label?: React.CSSProperties;
+        readonly details?: React.CSSProperties;
+    };
+    readonly option: Option;
+    readonly isSelected: boolean;
 }
-export interface GroupOption extends BaseOption {
-    options: Option[];
+export declare function MenuOptionContent({ option, isSelected, UNSAFE_className, UNSAFE_style, }: MenuOptionContentProps): JSX.Element;
+export interface MenuGroupOptionProps {
+    readonly option: AnyOption;
+    readonly UNSAFE_className?: {
+        heading?: string;
+    };
+    readonly UNSAFE_style?: {
+        heading?: React.CSSProperties;
+    };
 }
-export type AnyOption = XOR<Option, GroupOption>;
+/**
+ * The rendering of the default MenuGroupOption
+ */
+export declare function MenuGroupOptions({ option, UNSAFE_className, UNSAFE_style, }: MenuGroupOptionProps): JSX.Element;
+/**
+ * The base component for the MenuGroupOption
+ */
+export interface BaseMenuGroupOptionProps extends PropsWithChildren {
+    readonly UNSAFE_className?: string;
+    readonly UNSAFE_style?: React.CSSProperties;
+}
+export declare function BaseMenuGroupOption({ children, UNSAFE_className, UNSAFE_style, }: BaseMenuGroupOptionProps): JSX.Element;
+export interface BaseMenuOptionProps<GenericOption extends AnyOption = AnyOption> extends PropsWithChildren {
+    readonly option?: GenericOption;
+    readonly onOptionSelect?: (option?: GenericOption) => void;
+    readonly isHighlighted: boolean;
+    readonly addSeparators: boolean;
+    readonly UNSAFE_className?: string;
+    readonly UNSAFE_style?: React.CSSProperties;
+}
+/**
+ * Renders the base option component. The component takes children and renders them inside a button.
+ */
+export declare function BaseMenuOption<GenericOption extends AnyOption = AnyOption>({ option, isHighlighted, onOptionSelect, addSeparators, children, UNSAFE_className, UNSAFE_style, }: BaseMenuOptionProps<GenericOption>): JSX.Element;
 export {};

package/dist/Autocomplete/index.cjs

@@ -4,16 +4,16 @@ var Autocomplete = require('../Autocomplete-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
+require('../useIsMounted-cjs.js');
+require('../useSafeLayoutEffect-cjs.js');
 require('react-dom');
 require('react-popper');
-require('../useOnKeyDown-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
-require('../useIsMounted-cjs.js');
-require('../Text-cjs.js');
+require('../Heading-cjs.js');
 require('../Typography-cjs.js');
+require('../Text-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
-require('../Heading-cjs.js');
+require('../useOnKeyDown-cjs.js');
 require('../InputText/index.cjs');
 require('../FormField-cjs.js');
 require('framer-motion');
@@ -40,3 +40,18 @@ require('../debounce-cjs.js');
 
 
 exports.Autocomplete = Autocomplete.Autocomplete;
+exports.BaseAutocompleteMenuWrapper = Autocomplete.BaseAutocompleteMenuWrapper;
+exports.BaseMenuGroupOption = Autocomplete.BaseMenuGroupOption;
+exports.BaseMenuOption = Autocomplete.BaseMenuOption;
+Object.defineProperty(exports, "KeyboardAction", {
+	enumerable: true,
+	get: function () { return Autocomplete.KeyboardAction; }
+});
+exports.MenuOption = Autocomplete.MenuOption;
+exports.getRequestedIndexChange = Autocomplete.getRequestedIndexChange;
+exports.isOptionGroup = Autocomplete.isOptionGroup;
+exports.isOptionSelected = Autocomplete.isOptionSelected;
+exports.useAutocompleteMenu = Autocomplete.useAutocompleteMenu;
+exports.useCustomKeyboardNavigation = Autocomplete.useCustomKeyboardNavigation;
+exports.useKeyboardNavigation = Autocomplete.useKeyboardNavigation;
+exports.useRepositionMenu = Autocomplete.useRepositionMenu;

package/dist/Autocomplete/index.d.ts

@@ -1,2 +1,7 @@
 export { Autocomplete } from "./Autocomplete";
-export * from "./Option";
+export { MenuOptionProps, BaseMenuOption, BaseMenuOptionProps, MenuOption, BaseMenuGroupOption, BaseMenuGroupOptionProps, } from "./Option";
+export { AnyOption, AutocompleteProps, BaseOption, CustomOptionsMenuProp, GroupOption, OptionCollection, Option, } from "./Autocomplete.types";
+export { KeyboardAction, getRequestedIndexChange, useKeyboardNavigation, useCustomKeyboardNavigation, } from "./useKeyboardNavigation";
+export { useRepositionMenu } from "./useRepositionMenu";
+export { BaseAutocompleteMenuWrapper, useAutocompleteMenu, } from "./Menu/MenuWrapper";
+export { isOptionSelected, isOptionGroup } from "./Autocomplete.utils";

package/dist/Autocomplete/index.mjs

@@ -1,17 +1,17 @@
-export { A as Autocomplete } from '../Autocomplete-es.js';
+export { A as Autocomplete, d as BaseAutocompleteMenuWrapper, a as BaseMenuGroupOption, B as BaseMenuOption, K as KeyboardAction, M as MenuOption, g as getRequestedIndexChange, f as isOptionGroup, i as isOptionSelected, e as useAutocompleteMenu, b as useCustomKeyboardNavigation, u as useKeyboardNavigation, c as useRepositionMenu } from '../Autocomplete-es.js';
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
+import '../useIsMounted-es.js';
+import '../useSafeLayoutEffect-es.js';
 import 'react-dom';
 import 'react-popper';
-import '../useOnKeyDown-es.js';
-import '../useSafeLayoutEffect-es.js';
-import '../useIsMounted-es.js';
-import '../Text-es.js';
+import '../Heading-es.js';
 import '../Typography-es.js';
+import '../Text-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
-import '../Heading-es.js';
+import '../useOnKeyDown-es.js';
 import '../InputText/index.mjs';
 import '../FormField-es.js';
 import 'framer-motion';

package/dist/Autocomplete/useKeyboardNavigation.d.ts

@@ -0,0 +1,35 @@
+import { AnyOption, Option } from "./Autocomplete.types";
+export declare enum KeyboardAction {
+    Previous = -1,
+    Next = 1,
+    Select = 0
+}
+/**
+ * Hook to handle custom keyboard navigation for the Autocomplete component.
+ * Use this hook if you are using components in the menu that aren't MenuOption or BaseMenuOption.
+ */
+export declare function useCustomKeyboardNavigation({ onRequestHighlightChange, }: {
+    onRequestHighlightChange?: (event: KeyboardEvent, direction: KeyboardAction) => void;
+}): void;
+/**
+ * Hook to handle keyboard navigation for the Menu in the Autocomplete component.
+ * If using components in the menu that aren't MenuOption or BaseMenuOption, you should use the `useCustomKeyboardNavigation` hook.
+ */
+export declare function useKeyboardNavigation<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option>({ options, onOptionSelect, menuRef, visible, }: {
+    options: GenericOption[];
+    visible?: boolean;
+    menuRef?: HTMLElement | null;
+    onOptionSelect: (option?: GenericOptionValue) => void;
+}): {
+    highlightedIndex: number;
+};
+/**
+ * Function to get the requested index change based on the current highlighted index and the direction of the keyboard action.
+ * Accounts for groups in the options array.
+ */
+export declare function getRequestedIndexChange<T extends AnyOption>({ event, options, direction, highlightedIndex, }: {
+    event: KeyboardEvent;
+    direction: KeyboardAction;
+    options: T[];
+    highlightedIndex: number;
+}): number;

package/dist/Autocomplete/useRepositionMenu.d.ts

@@ -0,0 +1,23 @@
+import { usePopper } from "react-popper";
+import { MenuProps } from "./Autocomplete.types";
+export interface UseRepositionMenu extends ReturnType<typeof usePopper> {
+    readonly menuRef: HTMLElement | null;
+    readonly setMenuRef: (ref: HTMLElement | null) => void;
+    readonly targetWidth: number | undefined;
+}
+export declare function useRepositionMenu(attachTo: MenuProps["attachTo"], visible?: boolean): {
+    menuRef: HTMLElement | null;
+    setMenuRef: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+    targetWidth: number | undefined;
+    styles: {
+        [key: string]: React.CSSProperties;
+    };
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+    state: import("@popperjs/core").State | null;
+    update: import("@popperjs/core").Instance["update"] | null;
+    forceUpdate: import("@popperjs/core").Instance["forceUpdate"] | null;
+};