@jobber/components 6.103.3 → 6.103.4-uncontroll-951d07b.6

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

@@ -231,18 +231,26 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
      */
     readonly multiple?: Multiple;
     /**
-     * The currently selected value of the Autocomplete.
-     * Single-select: undefined indicates no selection
+     * The currently selected value of the Autocomplete (controlled mode).
+     * Single-select: undefined indicates no selection.
+     * If omitted, the component manages its own value state (uncontrolled mode).
      */
-    readonly value: AutocompleteValue<Value, Multiple>;
+    readonly value?: AutocompleteValue<Value, Multiple>;
     /**
-     * The current input value of the Autocomplete.
+     * The initial value for uncontrolled mode.
+     * Only used when value is not provided.
      */
-    readonly inputValue: string;
+    readonly defaultValue?: AutocompleteValue<Value, Multiple>;
+    /**
+     * The current input value of the Autocomplete (controlled mode).
+     * If omitted, the component manages its own input state based on the selected value.
+     */
+    readonly inputValue?: string;
     /**
      * Callback invoked when the input value changes.
+     * If omitted, the component manages its own input state based on the selected value.
      */
-    readonly onInputChange: (value: string) => void;
+    readonly onInputChange?: (value: string) => void;
     /**
      * Callback invoked when the input is blurred.
      */
@@ -454,20 +462,17 @@ interface FreeFormOff<Value extends OptionLike, Multiple extends boolean> {
     readonly allowFreeForm?: false;
     /**
      * Callback invoked when the selection value changes.
+     * Optional when value is not provided (uncontrolled mode).
      */
-    readonly onChange: (value: AutocompleteValue<Value, Multiple>) => void;
+    readonly onChange?: (value: AutocompleteValue<Value, Multiple>) => void;
 }
 interface FreeFormOn<Value extends OptionLike, Multiple extends boolean> {
     /**
-     * Whether the autocomplete allows free-form input.
-     * When true, the input value is not restricted to the options * in the menu. Input can be used to create a new value.
-     * When false, the input value must match an option in the menu.
-     * Input value will be cleared if no selection is made and
      * Whether the autocomplete allows free-form input.
      * When true, the input value is not restricted to the options in the menu. Input can be used to create a new value.
      * When false, the input value must match an option in the menu.
      * Input value will be cleared if no selection is made and focus is lost.
-     * */
+     */
     readonly allowFreeForm: true;
     /**
      * Factory used to create a Value from free-form input when committing. Necessary with complex option values. The only value the input can produce is a string.
@@ -484,8 +489,9 @@ interface FreeFormOn<Value extends OptionLike, Multiple extends boolean> {
      * - The user selects an option with click or enter
      * - The user types a value that matches an option
      * - The user types a value that does not match an option and allowFreeForm is true
+     * Optional when value is not provided (uncontrolled mode).
      */
-    readonly onChange: (value: AutocompleteValue<Value, Multiple>) => void;
+    readonly onChange?: (value: AutocompleteValue<Value, Multiple>) => void;
 }
 export type ActionOrigin = "menu" | "empty";
 export type AutocompleteRebuiltProps<Value extends OptionLike = OptionLike, Multiple extends boolean = false, SectionExtra extends object = ExtraProps, ActionExtra extends object = ExtraProps> = AutocompleteRebuiltBaseProps<Value, Multiple, SectionExtra, ActionExtra> & (FreeFormOn<Value, Multiple> | FreeFormOff<Value, Multiple>);

package/dist/Autocomplete/index.cjs

@@ -224,13 +224,50 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
 // interactions and state transitions.
 // eslint-disable-next-line max-statements
 function useAutocomplete(props) {
-    const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
+    const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue: inputValueProp, onInputChange: onInputChangeProp, value: valueProp, defaultValue, onChange: onChangeProp, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
+    // Internal state for uncontrolled value
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    // Use controlled value if provided, otherwise use internal state
+    const value = valueProp !== undefined ? valueProp : internalValue;
+    const onChange = onChangeProp !== null && onChangeProp !== void 0 ? onChangeProp : setInternalValue;
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
     const getOptionLabelPropRef = jobberHooks.useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
     const getOptionLabel = React.useCallback((opt) => {
         const maybe = getOptionLabelPropRef(opt);
         return maybe !== null && maybe !== void 0 ? maybe : opt.label;
     }, [getOptionLabelPropRef]);
+    // Initialize internal input value from defaultValue
+    const [internalInputValue, setInternalInputValue] = React.useState(() => {
+        if (multiple)
+            return "";
+        const initialValue = (defaultValue !== null && defaultValue !== void 0 ? defaultValue : valueProp);
+        if (!initialValue)
+            return "";
+        // Call getOptionLabelProp directly if provided, otherwise use label
+        const customLabel = getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(initialValue);
+        return customLabel !== null && customLabel !== void 0 ? customLabel : initialValue.label;
+    });
+    // Track previous value to detect when it changes
+    const prevValueRef = React.useRef(value);
+    // Sync internal input value with selected value only when value changes (not on user input)
+    React.useEffect(() => {
+        const isInputControlled = inputValueProp !== undefined;
+        if (isInputControlled || multiple)
+            return;
+        // Only update if the value actually changed
+        if (prevValueRef.current !== value) {
+            prevValueRef.current = value;
+            const currentValue = value;
+            // Mark this as a programmatic change, not user input
+            // This prevents onChange from being called when we sync from prop changes
+            lastInputWasUser.current = false;
+            setInternalInputValue(currentValue ? getOptionLabel(currentValue) : "");
+        }
+    }, [value, inputValueProp, multiple, getOptionLabel]);
+    // Use controlled inputValue if provided, otherwise use internal state
+    const isInputControlled = inputValueProp !== undefined;
+    const inputValue = isInputControlled ? inputValueProp : internalInputValue;
+    const onInputChange = onInputChangeProp !== null && onInputChangeProp !== void 0 ? onInputChangeProp : setInternalInputValue;
     const isOptionEqualToValueRef = jobberHooks.useCallbackRef((a, b) => isOptionEqualToValue === null || isOptionEqualToValue === void 0 ? void 0 : isOptionEqualToValue(a, b));
     const equals = React.useCallback((a, b) => {
         const custom = isOptionEqualToValueRef(a, b);
@@ -379,8 +416,11 @@ function useAutocomplete(props) {
         // In multiple mode, clearing the input should NOT clear the selection
         if (multiple)
             return;
-        // For single-select, treat clearing input as clearing the selection
-        if (hasSelection) {
+        // Only clear the selection if the user actually cleared the input
+        // (not from internal state sync when parent changes the value prop)
+        // This prevents calling onChange when we're syncing state from a controlled value prop,
+        // but still allows onChange to fire when the user deletes the input text
+        if (lastInputWasUser.current && hasSelection) {
             onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
         }
     }, [inputValue, multiple, hasSelection, setActiveIndex, onChange, open]);
@@ -486,7 +526,7 @@ function useAutocomplete(props) {
         const freeFormCreated = (_a = props.createFreeFormValue) === null || _a === void 0 ? void 0 : _a.call(props, inputText);
         if (!freeFormCreated)
             return false;
-        props.onChange(freeFormCreated);
+        onChange(freeFormCreated);
         return true;
     }
     const tryRestoreInputToSelectedLabel = React.useCallback(() => {
@@ -666,6 +706,7 @@ function useAutocomplete(props) {
         activeIndex,
         setActiveIndex,
         listRef,
+        inputValue,
         // actions
         onSelection,
         onAction,
@@ -903,8 +944,8 @@ const AutocompleteRebuilt = React.forwardRef(AutocompleteRebuiltInternal);
 // eslint-disable-next-line max-statements
 function AutocompleteRebuiltInternal(props, forwardedRef) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    const { inputValue, placeholder, disabled, error, invalid, description, size: sizeProp, loading = false, } = props;
-    const { renderable, optionCount, persistentsHeaders, persistentsFooters, headerInteractiveCount, middleNavigableCount, getOptionLabel, isOptionSelected, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps, activeIndex, open, listRef, onSelection, onAction, onInputChangeFromUser, onInputBlur, onInputFocus, onInputKeyDown, setReferenceElement, } = useAutocomplete(props);
+    const { placeholder, disabled, error, invalid, description, size: sizeProp, loading = false, } = props;
+    const { renderable, optionCount, persistentsHeaders, persistentsFooters, headerInteractiveCount, middleNavigableCount, getOptionLabel, isOptionSelected, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps, activeIndex, open, listRef, inputValue, onSelection, onAction, onInputChangeFromUser, onInputBlur, onInputFocus, onInputKeyDown, setReferenceElement, } = useAutocomplete(props);
     const listboxId = React.useId();
     // Provides mount/unmount-aware transition styles for the floating element
     const { isMounted, styles: transitionStyles } = floatingUi_react.useTransitionStyles(context, {
@@ -920,7 +961,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         onFocus: onInputFocus,
         onBlur: onInputBlur,
     });
-    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
+    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue !== null && inputValue !== void 0 ? inputValue : "", onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
         disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
             ? `${listboxId}-item-${activeIndex}`
             : undefined });

package/dist/Autocomplete/index.mjs

@@ -222,13 +222,50 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
 // interactions and state transitions.
 // eslint-disable-next-line max-statements
 function useAutocomplete(props) {
-    const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
+    const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue: inputValueProp, onInputChange: onInputChangeProp, value: valueProp, defaultValue, onChange: onChangeProp, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
+    // Internal state for uncontrolled value
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    // Use controlled value if provided, otherwise use internal state
+    const value = valueProp !== undefined ? valueProp : internalValue;
+    const onChange = onChangeProp !== null && onChangeProp !== void 0 ? onChangeProp : setInternalValue;
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
     const getOptionLabelPropRef = useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
     const getOptionLabel = useCallback((opt) => {
         const maybe = getOptionLabelPropRef(opt);
         return maybe !== null && maybe !== void 0 ? maybe : opt.label;
     }, [getOptionLabelPropRef]);
+    // Initialize internal input value from defaultValue
+    const [internalInputValue, setInternalInputValue] = useState(() => {
+        if (multiple)
+            return "";
+        const initialValue = (defaultValue !== null && defaultValue !== void 0 ? defaultValue : valueProp);
+        if (!initialValue)
+            return "";
+        // Call getOptionLabelProp directly if provided, otherwise use label
+        const customLabel = getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(initialValue);
+        return customLabel !== null && customLabel !== void 0 ? customLabel : initialValue.label;
+    });
+    // Track previous value to detect when it changes
+    const prevValueRef = useRef(value);
+    // Sync internal input value with selected value only when value changes (not on user input)
+    useEffect(() => {
+        const isInputControlled = inputValueProp !== undefined;
+        if (isInputControlled || multiple)
+            return;
+        // Only update if the value actually changed
+        if (prevValueRef.current !== value) {
+            prevValueRef.current = value;
+            const currentValue = value;
+            // Mark this as a programmatic change, not user input
+            // This prevents onChange from being called when we sync from prop changes
+            lastInputWasUser.current = false;
+            setInternalInputValue(currentValue ? getOptionLabel(currentValue) : "");
+        }
+    }, [value, inputValueProp, multiple, getOptionLabel]);
+    // Use controlled inputValue if provided, otherwise use internal state
+    const isInputControlled = inputValueProp !== undefined;
+    const inputValue = isInputControlled ? inputValueProp : internalInputValue;
+    const onInputChange = onInputChangeProp !== null && onInputChangeProp !== void 0 ? onInputChangeProp : setInternalInputValue;
     const isOptionEqualToValueRef = useCallbackRef((a, b) => isOptionEqualToValue === null || isOptionEqualToValue === void 0 ? void 0 : isOptionEqualToValue(a, b));
     const equals = useCallback((a, b) => {
         const custom = isOptionEqualToValueRef(a, b);
@@ -377,8 +414,11 @@ function useAutocomplete(props) {
         // In multiple mode, clearing the input should NOT clear the selection
         if (multiple)
             return;
-        // For single-select, treat clearing input as clearing the selection
-        if (hasSelection) {
+        // Only clear the selection if the user actually cleared the input
+        // (not from internal state sync when parent changes the value prop)
+        // This prevents calling onChange when we're syncing state from a controlled value prop,
+        // but still allows onChange to fire when the user deletes the input text
+        if (lastInputWasUser.current && hasSelection) {
             onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
         }
     }, [inputValue, multiple, hasSelection, setActiveIndex, onChange, open]);
@@ -484,7 +524,7 @@ function useAutocomplete(props) {
         const freeFormCreated = (_a = props.createFreeFormValue) === null || _a === void 0 ? void 0 : _a.call(props, inputText);
         if (!freeFormCreated)
             return false;
-        props.onChange(freeFormCreated);
+        onChange(freeFormCreated);
         return true;
     }
     const tryRestoreInputToSelectedLabel = useCallback(() => {
@@ -664,6 +704,7 @@ function useAutocomplete(props) {
         activeIndex,
         setActiveIndex,
         listRef,
+        inputValue,
         // actions
         onSelection,
         onAction,
@@ -901,8 +942,8 @@ const AutocompleteRebuilt = forwardRef(AutocompleteRebuiltInternal);
 // eslint-disable-next-line max-statements
 function AutocompleteRebuiltInternal(props, forwardedRef) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    const { inputValue, placeholder, disabled, error, invalid, description, size: sizeProp, loading = false, } = props;
-    const { renderable, optionCount, persistentsHeaders, persistentsFooters, headerInteractiveCount, middleNavigableCount, getOptionLabel, isOptionSelected, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps, activeIndex, open, listRef, onSelection, onAction, onInputChangeFromUser, onInputBlur, onInputFocus, onInputKeyDown, setReferenceElement, } = useAutocomplete(props);
+    const { placeholder, disabled, error, invalid, description, size: sizeProp, loading = false, } = props;
+    const { renderable, optionCount, persistentsHeaders, persistentsFooters, headerInteractiveCount, middleNavigableCount, getOptionLabel, isOptionSelected, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps, activeIndex, open, listRef, inputValue, onSelection, onAction, onInputChangeFromUser, onInputBlur, onInputFocus, onInputKeyDown, setReferenceElement, } = useAutocomplete(props);
     const listboxId = React__default.useId();
     // Provides mount/unmount-aware transition styles for the floating element
     const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
@@ -918,7 +959,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         onFocus: onInputFocus,
         onBlur: onInputBlur,
     });
-    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
+    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue !== null && inputValue !== void 0 ? inputValue : "", onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
         disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
             ? `${listboxId}-item-${activeIndex}`
             : undefined });

package/dist/Autocomplete/tests/Autocomplete.setup.d.ts

@@ -36,3 +36,20 @@ export declare function FreeFormWrapper({ initialValue, initialInputValue, onCha
     readonly inputEqualsOption?: (input: string, option: OptionLike) => boolean;
     readonly debounce?: number;
 }): React.JSX.Element;
+export declare function UncontrolledWrapper<T extends OptionLike>({ defaultValue, menu, placeholder, }: {
+    readonly defaultValue?: T;
+    readonly menu: MenuItem<T>[];
+    readonly placeholder?: string;
+}): React.JSX.Element;
+export declare function SemiControlledWrapper<T extends OptionLike>({ initialValue, onChange, menu, placeholder, }: {
+    readonly initialValue?: T;
+    readonly onChange?: (v: T | undefined) => void;
+    readonly menu: MenuItem<T>[];
+    readonly placeholder?: string;
+}): React.JSX.Element;
+export declare function ControlledValueWrapper<T extends OptionLike>({ value, onChange, menu, placeholder, }: {
+    readonly value: T | undefined;
+    readonly onChange: (v: T | undefined) => void;
+    readonly menu: MenuItem<T>[];
+    readonly placeholder?: string;
+}): React.JSX.Element;

package/dist/Autocomplete/useAutocomplete.d.ts

@@ -56,6 +56,7 @@ export declare function useAutocomplete<Value extends OptionLike, Multiple exten
     activeIndex: number | null;
     setActiveIndex: (index: number | null) => void;
     listRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    inputValue: string;
     onSelection: (option: Value) => void;
     onAction: (action: ActionConfig) => void;
     onInputChangeFromUser: (val: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.103.3",
+  "version": "6.103.4-uncontroll-951d07b.6+951d07b93",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "06b9bc94eb94f53486ddc9c41a978731163a85b5"
+  "gitHead": "951d07b936bd3e0cc6dc48c9a4cb98f2a93a838e"
 }