@jobber/components 6.112.1 → 6.113.0

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

@@ -230,11 +230,12 @@ export type MenuFooter<Extra extends object = ExtraProps> = Extra & {
 };
 export type MenuItem<T extends OptionLike, SectionExtra extends object = ExtraProps, ActionExtra extends object = ExtraProps> = MenuSection<T, SectionExtra, ActionExtra> | MenuOptions<T, ActionExtra> | MenuHeader<ActionExtra> | MenuFooter<ActionExtra>;
 export type AutocompleteValue<Value extends OptionLike, Multiple extends boolean> = Multiple extends true ? Value[] : Value | undefined;
-interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> extends AriaInputPropsManaged, Pick<HTMLInputBaseProps, "name" | "disabled" | "readOnly" | "autoFocus">, Pick<RebuiltInputCommonProps, "placeholder" | "error" | "invalid" | "loading" | "description" | "size" | "prefix" | "suffix" | "version">, FocusEvents<HTMLInputElement | HTMLTextAreaElement> {
+interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> extends AriaInputPropsManaged, Pick<HTMLInputBaseProps, "name" | "disabled" | "readOnly" | "autoFocus">, Pick<RebuiltInputCommonProps, "placeholder" | "error" | "invalid" | "loading" | "clearable" | "description" | "size" | "prefix" | "suffix" | "version">, FocusEvents<HTMLInputElement | HTMLTextAreaElement> {
     /**
      * Whether the autocomplete allows multiple selections.
-     * WARNING: This is currently incomplete and will not display selections, only data is returned.
-     * Do not use this prop unless you are sure you know what you are doing.
+     * When true, selected values are displayed as dismissible chips above the input.
+     * The menu stays open after each selection so the user can pick additional options.
+     * Pressing Backspace on an empty input removes the most recently added selection.
      */
     readonly multiple?: Multiple;
     /**
@@ -322,6 +323,21 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
         value: MenuFooter<ActionExtra>;
         isActive?: boolean;
     }) => React.ReactNode;
+    /**
+     * Render prop to customize the content inside each selection chip.
+     * Only applicable in `multiple` mode. The Autocomplete handles the chip container,
+     * padding, dismiss button, hover/focus states, and disabled/readOnly behavior.
+     * You only provide the content that appears to the left of the dismiss button.
+     *
+     * When not provided, the chip content defaults to `getOptionLabel(option)`.
+     *
+     * @param args.value - The selected option this chip represents
+     * @param args.getOptionLabel - Function to get the display text for an option
+     */
+    readonly customRenderValue?: (args: {
+        value: Value;
+        getOptionLabel: (option: Value) => string;
+    }) => React.ReactNode;
     /**
      * Render prop to customize the rendering of the input.
      * @param props.inputRef - The ref to the input element
@@ -345,6 +361,7 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
         input?: string;
         header?: string;
         footer?: string;
+        selection?: string;
     };
     /**
      * **Use at your own risk:** Custom style for specific elements. This should only be used as a
@@ -359,6 +376,7 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
         input?: CSSProperties;
         header?: CSSProperties;
         footer?: CSSProperties;
+        selection?: CSSProperties;
     };
     /**
      * Render a custom empty state when the menu is empty.
@@ -377,6 +395,26 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
     readonly emptyActions?: MenuAction<ActionExtra>[] | ((args: {
         inputValue: string;
     }) => MenuAction<ActionExtra>[]);
+    /**
+     * Maximum number of selection chips visible when the input is not focused.
+     * When the input gains focus, all selections are shown regardless of this value.
+     * Set to `-1` to always show all selections.
+     *
+     * Only applicable when `multiple` is `true`. Ignored for single-select.
+     *
+     * @default 6
+     */
+    readonly limitVisibleSelections?: number;
+    /**
+     * Function to generate the label displayed when selections are truncated
+     * by `limitVisibleSelections`. Receives the number of hidden selections.
+     * The final returned content must be Phrasing Content eg. string, span, etc.
+     *
+     * Only applicable when `multiple` is `true`. Ignored for single-select.
+     *
+     * @default (count) => `+${count}`
+     */
+    readonly limitSelectionText?: (truncatedCount: number) => React.ReactNode;
     /**
      * Whether the menu should open when the input gains focus.
      * Note: Clicking on the input will always open the menu.

package/dist/Autocomplete/components/FloatingMenu.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import type { UseFloatingReturn, UseInteractionsReturn } from "@floating-ui/react";
+import type { ActionConfig, AutocompleteRebuiltProps, MenuFooter, MenuHeader, OptionLike } from "../Autocomplete.types";
+import type { RenderItem } from "../useAutocomplete";
+interface FloatingMenuProps<Value extends OptionLike> {
+    readonly context: UseFloatingReturn["context"];
+    readonly getFloatingProps: UseInteractionsReturn["getFloatingProps"];
+    readonly refs: UseFloatingReturn["refs"];
+    readonly listboxId: string;
+    readonly className: string;
+    readonly floatingStyles: React.CSSProperties;
+    readonly transitionStyles: React.CSSProperties;
+    readonly menuWidth?: number;
+    readonly menuStyle?: React.CSSProperties;
+    readonly renderable: Array<RenderItem<Value>>;
+    readonly persistentsHeaders: Array<MenuHeader<Record<string, unknown>>>;
+    readonly persistentsFooters: Array<MenuFooter<Record<string, unknown>>>;
+    readonly activeIndex: number | null;
+    readonly headerInteractiveCount: number;
+    readonly middleNavigableCount: number;
+    readonly getItemProps: UseInteractionsReturn["getItemProps"];
+    readonly listRef: React.RefObject<Array<HTMLElement | null>>;
+    readonly onSelection: (option: Value) => void;
+    readonly onAction: (action: ActionConfig) => void;
+    readonly onInteractionPointerDown: (e: React.PointerEvent) => void;
+    readonly getOptionLabel: (option: Value) => string;
+    readonly isOptionSelected: (option: Value) => boolean;
+    readonly loading: boolean;
+    readonly showEmptyStateMessage: boolean;
+    readonly emptyStateMessage?: React.ReactNode;
+    readonly customRenderLoading?: React.ReactNode;
+    readonly customRenderOption?: AutocompleteRebuiltProps<Value, false>["customRenderOption"];
+    readonly customRenderSection?: AutocompleteRebuiltProps<Value, false>["customRenderSection"];
+    readonly customRenderAction?: AutocompleteRebuiltProps<Value, false>["customRenderAction"];
+    readonly customRenderHeader?: AutocompleteRebuiltProps<Value, false>["customRenderHeader"];
+    readonly customRenderFooter?: AutocompleteRebuiltProps<Value, false>["customRenderFooter"];
+    readonly slotOverrides?: {
+        option?: {
+            className?: string;
+            style?: React.CSSProperties;
+        };
+        action?: {
+            className?: string;
+            style?: React.CSSProperties;
+        };
+        section?: {
+            className?: string;
+            style?: React.CSSProperties;
+        };
+        header?: {
+            className?: string;
+            style?: React.CSSProperties;
+        };
+        footer?: {
+            className?: string;
+            style?: React.CSSProperties;
+        };
+    };
+}
+export declare function FloatingMenu<Value extends OptionLike>({ context, getFloatingProps, refs, listboxId, className, floatingStyles, transitionStyles, menuWidth, menuStyle, renderable, persistentsHeaders, persistentsFooters, activeIndex, headerInteractiveCount, middleNavigableCount, getItemProps, listRef, onSelection, onAction, onInteractionPointerDown, getOptionLabel, isOptionSelected, loading, showEmptyStateMessage, emptyStateMessage, customRenderLoading, customRenderOption, customRenderSection, customRenderAction, customRenderHeader, customRenderFooter, slotOverrides, }: FloatingMenuProps<Value>): React.JSX.Element;
+export {};

package/dist/Autocomplete/constants.d.ts

@@ -1 +1,4 @@
+import type { OptionLike } from "./Autocomplete.types";
 export declare const AUTOCOMPLETE_MAX_HEIGHT = 300;
+/** Stable empty array for cleared/empty selection state. Reuse to avoid reference churn. */
+export declare const EMPTY_SELECTED_VALUES: readonly OptionLike[];

package/dist/Autocomplete/hooks/useAutocompleteListNav.d.ts

@@ -16,8 +16,15 @@ export interface UseAutocompleteListNavReturn {
 export interface UseAutocompleteListNavProps {
     navigableCount: number;
     shouldResetActiveIndexOnClose?: () => boolean;
+    onMenuOpen?: () => void;
     onMenuClose?: (reason?: string) => void;
     selectedIndex?: number | null;
     readOnly?: boolean;
+    disabled?: boolean;
+    /**
+     * When the reference is smaller than the clickable area (e.g. input inside chip area),
+     * pass a selector for the extended zone. Clicks inside it won't trigger outsidePress dismiss.
+     */
+    outsidePressExcludeSelector?: string;
 }
-export declare function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose, onMenuClose, selectedIndex, readOnly, }: UseAutocompleteListNavProps): UseAutocompleteListNavReturn;
+export declare function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose, onMenuOpen, onMenuClose, selectedIndex, readOnly, disabled, outsidePressExcludeSelector, }: UseAutocompleteListNavProps): UseAutocompleteListNavReturn;

package/dist/Autocomplete/hooks/useChipNavigation.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+import type { OptionLike } from "../Autocomplete.types";
+interface UseChipNavigationProps<Value extends OptionLike> {
+    readonly selectedValues: Value[];
+    readonly inputValue: string;
+    readonly readOnly?: boolean;
+    readonly removeSelection: (option: Value) => void;
+    readonly onInputKeyDown: (event: React.KeyboardEvent) => void;
+    readonly onInputBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+}
+interface UseChipNavigationReturn {
+    readonly activeChipIndex: number | null;
+    readonly onKeyDown: (event: React.KeyboardEvent) => void;
+    readonly onBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+}
+export declare function useChipNavigation<Value extends OptionLike>({ selectedValues, inputValue, readOnly, removeSelection, onInputKeyDown, onInputBlur, }: UseChipNavigationProps<Value>): UseChipNavigationReturn;
+export {};