@jobber/components 6.103.2 → 6.103.4-uncontroll-d4ef425.5

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,47 @@ 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;
+            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);
@@ -486,7 +520,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 +700,7 @@ function useAutocomplete(props) {
         activeIndex,
         setActiveIndex,
         listRef,
+        inputValue,
         // actions
         onSelection,
         onAction,
@@ -903,8 +938,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 +955,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,47 @@ 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;
+            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);
@@ -484,7 +518,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 +698,7 @@ function useAutocomplete(props) {
         activeIndex,
         setActiveIndex,
         listRef,
+        inputValue,
         // actions
         onSelection,
         onAction,
@@ -901,8 +936,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 +953,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/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/dist/styles.css

@@ -6401,10 +6401,9 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       -webkit-transform: translateY(0) scale(1);
               transform: translateY(0) scale(1);
     }
-  .-hmXAsAfH9U- {
 
     /* options */
-    option {
+    .-hmXAsAfH9U- option {
       padding: 4px 0;
       padding: var(--space-smaller) 0;
       color: hsl(198, 35%, 21%);
@@ -6414,16 +6413,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       cursor: pointer;
     }
 
-    option:hover,
-    option:focus,
-    option:focus-visible,
-    option:checked {
+    .-hmXAsAfH9U- option:hover,
+    .-hmXAsAfH9U- option:focus,
+    .-hmXAsAfH9U- option:focus-visible,
+    .-hmXAsAfH9U- option:checked {
       background-color: hsl(53, 21%, 93%);
       background-color: var(--color-surface--hover);
     }
 
     /* optgroup headers */
-    optgroup {
+    .-hmXAsAfH9U- optgroup {
       padding: 8px 0 0 0;
       padding: var(--space-small) 0 0 0;
       color: hsl(197, 90%, 12%);
@@ -6438,36 +6437,35 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
     }
 
     /* Divider directly under the group label */
-    optgroup option:first-child {
+    .-hmXAsAfH9U- optgroup option:first-child {
       border-top: 1px solid hsl(200, 13%, 87%);
       border-top: var(--border-base) solid var(--color-border);
     }
 
     /* Disabled groups and their options */
-    optgroup[disabled] {
+    .-hmXAsAfH9U- optgroup[disabled] {
       color: hsl(0, 0%, 58%);
       color: var(--color-disabled);
     }
-    optgroup[disabled] option,
-    option[disabled] {
+    .-hmXAsAfH9U- optgroup[disabled] option,
+    .-hmXAsAfH9U- option[disabled] {
       color: hsl(0, 0%, 58%);
       color: var(--color-disabled);
       cursor: default;
     }
 
-    optgroup[disabled] option:focus,
-    optgroup[disabled] option:focus-visible,
-    optgroup[disabled] option:checked,
-    optgroup[disabled] option:hover,
-    option[disabled]:focus,
-    option[disabled]:focus-visible,
-    option[disabled]:checked,
-    option[disabled]:hover {
+    .-hmXAsAfH9U- optgroup[disabled] option:focus,
+    .-hmXAsAfH9U- optgroup[disabled] option:focus-visible,
+    .-hmXAsAfH9U- optgroup[disabled] option:checked,
+    .-hmXAsAfH9U- optgroup[disabled] option:hover,
+    .-hmXAsAfH9U- option[disabled]:focus,
+    .-hmXAsAfH9U- option[disabled]:focus-visible,
+    .-hmXAsAfH9U- option[disabled]:checked,
+    .-hmXAsAfH9U- option[disabled]:hover {
       background-color: transparent;
     }
 
     /* Animate the chevron rotation for the provided postfix class */
-  }
     .-hmXAsAfH9U- + ._5ST4c1fXDYU- svg {
       transition: -webkit-transform 100ms;
       transition: -webkit-transform var(--timing-quick);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.103.2",
+  "version": "6.103.4-uncontroll-d4ef425.5+d4ef4259d",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "901fec98e7fac64fac23c225d7ac6da63d0739f5"
+  "gitHead": "d4ef4259debb09593eabc29a42b18faa208329b8"
 }