@jobber/components 6.103.4-uncontroll-3a6b89f.8 → 6.103.5

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

@@ -231,26 +231,18 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
      */
     readonly multiple?: Multiple;
     /**
-     * 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).
+     * The currently selected value of the Autocomplete.
+     * Single-select: undefined indicates no selection
      */
-    readonly value?: AutocompleteValue<Value, Multiple>;
+    readonly value: AutocompleteValue<Value, Multiple>;
     /**
-     * The initial value for uncontrolled mode.
-     * Only used when value is not provided.
+     * The current input value of the Autocomplete.
      */
-    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;
+    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.
      */
@@ -462,17 +454,20 @@ 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.
@@ -489,9 +484,8 @@ 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,50 +224,13 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
 // interactions and state transitions.
 // eslint-disable-next-line max-statements
 function useAutocomplete(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;
+    const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
     // 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);
@@ -359,8 +322,9 @@ function useAutocomplete(props) {
     // This is only options
     const optionCount = renderable.reduce((count, item) => count + (item.kind === "option" ? 1 : 0), 0);
     const hasSelection = React.useMemo(() => {
+        var _a;
         if (multiple) {
-            const current = value !== null && value !== void 0 ? value : [];
+            const current = (_a = value) !== null && _a !== void 0 ? _a : [];
             return Array.isArray(current) && current.length > 0;
         }
         return value != null;
@@ -415,15 +379,11 @@ function useAutocomplete(props) {
         // In multiple mode, clearing the input should NOT clear the selection
         if (multiple)
             return;
-        // 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
-        const currentlyHasSelection = value != null;
-        if (lastInputWasUser.current && currentlyHasSelection) {
+        // For single-select, treat clearing input as clearing the selection
+        if (hasSelection) {
             onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
         }
-    }, [inputValue, multiple, setActiveIndex, onChange, open, value]);
+    }, [inputValue, multiple, hasSelection, setActiveIndex, onChange, open]);
     function selectOption(option) {
         var _a;
         if (multiple) {
@@ -526,7 +486,7 @@ function useAutocomplete(props) {
         const freeFormCreated = (_a = props.createFreeFormValue) === null || _a === void 0 ? void 0 : _a.call(props, inputText);
         if (!freeFormCreated)
             return false;
-        onChange(freeFormCreated);
+        props.onChange(freeFormCreated);
         return true;
     }
     const tryRestoreInputToSelectedLabel = React.useCallback(() => {
@@ -706,7 +666,6 @@ function useAutocomplete(props) {
         activeIndex,
         setActiveIndex,
         listRef,
-        inputValue,
         // actions
         onSelection,
         onAction,
@@ -944,8 +903,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 { 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 { 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 listboxId = React.useId();
     // Provides mount/unmount-aware transition styles for the floating element
     const { isMounted, styles: transitionStyles } = floatingUi_react.useTransitionStyles(context, {
@@ -961,7 +920,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         onFocus: onInputFocus,
         onBlur: onInputBlur,
     });
-    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,
+    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,
         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,50 +222,13 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
 // interactions and state transitions.
 // eslint-disable-next-line max-statements
 function useAutocomplete(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;
+    const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
     // 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);
@@ -357,8 +320,9 @@ function useAutocomplete(props) {
     // This is only options
     const optionCount = renderable.reduce((count, item) => count + (item.kind === "option" ? 1 : 0), 0);
     const hasSelection = useMemo(() => {
+        var _a;
         if (multiple) {
-            const current = value !== null && value !== void 0 ? value : [];
+            const current = (_a = value) !== null && _a !== void 0 ? _a : [];
             return Array.isArray(current) && current.length > 0;
         }
         return value != null;
@@ -413,15 +377,11 @@ function useAutocomplete(props) {
         // In multiple mode, clearing the input should NOT clear the selection
         if (multiple)
             return;
-        // 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
-        const currentlyHasSelection = value != null;
-        if (lastInputWasUser.current && currentlyHasSelection) {
+        // For single-select, treat clearing input as clearing the selection
+        if (hasSelection) {
             onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
         }
-    }, [inputValue, multiple, setActiveIndex, onChange, open, value]);
+    }, [inputValue, multiple, hasSelection, setActiveIndex, onChange, open]);
     function selectOption(option) {
         var _a;
         if (multiple) {
@@ -524,7 +484,7 @@ function useAutocomplete(props) {
         const freeFormCreated = (_a = props.createFreeFormValue) === null || _a === void 0 ? void 0 : _a.call(props, inputText);
         if (!freeFormCreated)
             return false;
-        onChange(freeFormCreated);
+        props.onChange(freeFormCreated);
         return true;
     }
     const tryRestoreInputToSelectedLabel = useCallback(() => {
@@ -704,7 +664,6 @@ function useAutocomplete(props) {
         activeIndex,
         setActiveIndex,
         listRef,
-        inputValue,
         // actions
         onSelection,
         onAction,
@@ -942,8 +901,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 { 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 { 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 listboxId = React__default.useId();
     // Provides mount/unmount-aware transition styles for the floating element
     const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
@@ -959,7 +918,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         onFocus: onInputFocus,
         onBlur: onInputBlur,
     });
-    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,
+    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,
         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,20 +36,3 @@ 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,7 +56,6 @@ 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/Card-cjs.js

@@ -19,7 +19,7 @@ const SPACEBAR_KEY = " ";
  * Please use `<Card onClick={onClick} />` component instead.
  */
 function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
-    const cardRef = React.useRef();
+    const cardRef = React.useRef(null);
     return (React.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;

package/dist/Card-es.js

@@ -17,7 +17,7 @@ const SPACEBAR_KEY = " ";
  * Please use `<Card onClick={onClick} />` component instead.
  */
 function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
-    const cardRef = useRef();
+    const cardRef = useRef(null);
     return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;

package/dist/Chip/Chip.d.ts

@@ -2,8 +2,7 @@ import React from "react";
 import { ChipPrefix } from "./components/ChipPrefix/Chip.Prefix";
 import { ChipSuffix } from "./components/ChipSuffix/Chip.Suffix";
 import type { ChipProps } from "./Chip.types";
-declare const ChipNamespace: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
     Prefix: typeof ChipPrefix;
     Suffix: typeof ChipSuffix;
 };
-export { ChipNamespace as Chip };

package/dist/Chip/hooks/useChildComponent.d.ts

@@ -1,8 +1,9 @@
-import type { ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
+import React from "react";
 /**
  * Returns the first React Child that receives `true` from isCorrectComponent
  * @param children React Children
- * @param isCorrectComponent a function that accepts a JSX Element and returns a boolean.
+ * @param isCorrectComponent a function that accepts a ReactElement and returns a boolean.
  * @returns The first child component that returns true on isCorrectComponent
  */
-export declare function useChildComponent(children: ReactNode | undefined, isCorrectComponent: (toCheck: JSX.Element) => boolean): JSX.Element | undefined;
+export declare function useChildComponent(children: ReactNode | undefined, isCorrectComponent: (toCheck: ReactElement) => boolean): ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;

package/dist/Chip/index.cjs

@@ -20,6 +20,6 @@ require('../tslib.es6-cjs.js');
 
 
 
-exports.Chip = Chip.ChipNamespace;
+exports.Chip = Chip.Chip;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;

package/dist/Chip-cjs.js

@@ -21,14 +21,15 @@ function ChipPrefix({ children }) {
 var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp8oIxJ0-","invalid":"H7VZzUBkgjk-","disabled":"-yQxZSnxBBU-","button":"ngKOY8l4BG4-","icon":"rzbiB2nz36Q-","spinning":"X7Bx5CDPfDs-"};
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
-    const buttonRef = React.useRef();
+    const buttonRef = React.useRef(null);
     return (React.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React.createElement(Icon.Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
+        var _a;
         if (document.activeElement === buttonRef.current &&
             (event.key === " " || event.key === "Enter")) {
             event.stopPropagation();
-            buttonRef.current.click();
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
     }
     function handleKeyDown(event) {
@@ -124,12 +125,12 @@ function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, headin
     return message;
 }
 ChipComponent.displayName = "Chip";
-const ChipNamespace = Object.assign(ChipComponent, {
+const Chip = Object.assign(ChipComponent, {
     Prefix: ChipPrefix,
     Suffix: ChipSuffix,
 });
 
-exports.ChipNamespace = ChipNamespace;
+exports.Chip = Chip;
 exports.InternalChipButton = InternalChipButton;
 exports.styles = styles$1;
 exports.styles$1 = styles;

package/dist/Chip-es.js

@@ -19,14 +19,15 @@ function ChipPrefix({ children }) {
 var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp8oIxJ0-","invalid":"H7VZzUBkgjk-","disabled":"-yQxZSnxBBU-","button":"ngKOY8l4BG4-","icon":"rzbiB2nz36Q-","spinning":"X7Bx5CDPfDs-"};
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
-    const buttonRef = useRef();
+    const buttonRef = useRef(null);
     return (React__default.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React__default.createElement(Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
+        var _a;
         if (document.activeElement === buttonRef.current &&
             (event.key === " " || event.key === "Enter")) {
             event.stopPropagation();
-            buttonRef.current.click();
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
     }
     function handleKeyDown(event) {
@@ -122,9 +123,9 @@ function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, headin
     return message;
 }
 ChipComponent.displayName = "Chip";
-const ChipNamespace = Object.assign(ChipComponent, {
+const Chip = Object.assign(ChipComponent, {
     Prefix: ChipPrefix,
     Suffix: ChipSuffix,
 });
 
-export { ChipNamespace as C, InternalChipButton as I, styles as a, styles$1 as s };
+export { Chip as C, InternalChipButton as I, styles as a, styles$1 as s };

package/dist/ChipDismissible-cjs.js

@@ -7,14 +7,14 @@ var Chip = require('./Chip-cjs.js');
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = tslib_es6.__rest(_a, ["selected"]);
-    return (React.createElement(Chip.ChipNamespace, Object.assign({}, rest),
-        React.createElement(Chip.ChipNamespace.Suffix, { className: selected ? Chip.styles.selected : "" },
+    return (React.createElement(Chip.Chip, Object.assign({}, rest),
+        React.createElement(Chip.Chip.Suffix, { className: selected ? Chip.styles.selected : "" },
             React.createElement(Icon.Icon, { name: selected ? "checkmark" : "add", size: "small", color: "interactiveSubtle" }))));
 }
 
 function ChipDismissible(props) {
-    return (React.createElement(Chip.ChipNamespace, Object.assign({}, props),
-        React.createElement(Chip.ChipNamespace.Suffix, null,
+    return (React.createElement(Chip.Chip, Object.assign({}, props),
+        React.createElement(Chip.Chip.Suffix, null,
             React.createElement(Icon.Icon, { name: "cross", size: "small", color: "interactiveSubtle" }))));
 }
 

package/dist/ChipDismissible-es.js

@@ -1,18 +1,18 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default from 'react';
 import { I as Icon } from './Icon-es.js';
-import { C as ChipNamespace, s as styles } from './Chip-es.js';
+import { C as Chip, s as styles } from './Chip-es.js';
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = __rest(_a, ["selected"]);
-    return (React__default.createElement(ChipNamespace, Object.assign({}, rest),
-        React__default.createElement(ChipNamespace.Suffix, { className: selected ? styles.selected : "" },
+    return (React__default.createElement(Chip, Object.assign({}, rest),
+        React__default.createElement(Chip.Suffix, { className: selected ? styles.selected : "" },
             React__default.createElement(Icon, { name: selected ? "checkmark" : "add", size: "small", color: "interactiveSubtle" }))));
 }
 
 function ChipDismissible(props) {
-    return (React__default.createElement(ChipNamespace, Object.assign({}, props),
-        React__default.createElement(ChipNamespace.Suffix, null,
+    return (React__default.createElement(Chip, Object.assign({}, props),
+        React__default.createElement(Chip.Suffix, null,
             React__default.createElement(Icon, { name: "cross", size: "small", color: "interactiveSubtle" }))));
 }
 

package/dist/Chips/InternalChipDismissible/hooks/useInView.d.ts

@@ -1,4 +1,4 @@
 export declare function useInView<T extends Element>(): {
-    ref: import("react").RefObject<T>;
+    ref: import("react").RefObject<T | null>;
     isInView: boolean;
 };

package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissibleInput.d.ts

@@ -8,7 +8,7 @@ export declare function useInternalChipDismissibleInput({ options, isLoadingMore
     searchValue: string;
     shouldCancelBlur: boolean;
     menuId: string;
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     activeOption: ChipDismissibleInputOptionProps;
     hasAvailableOptions: boolean;
     nextOptionIndex: number;

package/dist/Chips/InternalChipDismissible/hooks/useScrollToActive.d.ts

@@ -1 +1 @@
-export declare function useScrollToActive(index: number): import("react").MutableRefObject<HTMLDivElement | null>;
+export declare function useScrollToActive(index: number): import("react").RefObject<HTMLDivElement | null>;

package/dist/Combobox/Combobox.d.ts

@@ -1,8 +1,9 @@
+import React from "react";
 import type { ComboboxProps } from "./Combobox.types";
 import { ComboboxAction } from "./components/ComboboxAction";
 import { ComboboxOption as ComboboxOptionComponent } from "./components/ComboboxOption/ComboboxOption";
 import { ComboboxActivator } from "./components/ComboboxActivator";
-export declare function Combobox(props: ComboboxProps): JSX.Element;
+export declare function Combobox(props: ComboboxProps): React.JSX.Element;
 export declare namespace Combobox {
     var Activator: typeof ComboboxActivator;
     var Action: typeof ComboboxAction;

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

@@ -165,7 +165,7 @@ export interface ComboboxContentProps {
     /**
      * Reference to the wrapping div element of all the Combobox pieces
      */
-    readonly wrapperRef: React.RefObject<HTMLDivElement>;
+    readonly wrapperRef: React.RefObject<HTMLDivElement | null>;
     /**
      * Is the Combobox open
      */
@@ -235,7 +235,7 @@ export interface ComboboxListProps {
     /**
      * A ref to the list element.
      */
-    readonly optionsListRef: React.RefObject<HTMLUListElement>;
+    readonly optionsListRef: React.RefObject<HTMLUListElement | null>;
     /**
      * The current search term. Used in the no results message.
      */

package/dist/Combobox/ComboboxProvider.d.ts

@@ -15,4 +15,4 @@ export interface ComboboxProviderProps {
     readonly onSelectAll?: (selection: ComboboxOption[]) => void;
 }
 export declare const ComboboxContext: React.Context<Omit<ComboboxProviderProps, "children">>;
-export declare function ComboboxContextProvider({ children, ...props }: ComboboxProviderProps): JSX.Element;
+export declare function ComboboxContextProvider({ children, ...props }: ComboboxProviderProps): React.JSX.Element;

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

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

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

@@ -1,2 +1,3 @@
+import React from "react";
 import type { ComboboxContentProps } from "../../Combobox.types";
-export declare function ComboboxContent(props: ComboboxContentProps): JSX.Element;
+export declare function ComboboxContent(props: ComboboxContentProps): React.JSX.Element;

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

@@ -1,2 +1,3 @@
+import React from "react";
 import type { ComboboxHeaderProps } from "../../../Combobox.types";
-export declare function ComboboxContentHeader(props: ComboboxHeaderProps): JSX.Element;
+export declare function ComboboxContentHeader(props: ComboboxHeaderProps): React.JSX.Element;

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

@@ -1,2 +1,3 @@
+import React from "react";
 import type { ComboboxListProps } from "../../../Combobox.types";
-export declare function ComboboxContentList(props: ComboboxListProps): JSX.Element;
+export declare function ComboboxContentList(props: ComboboxListProps): React.JSX.Element;

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

@@ -1,2 +1,3 @@
+import React from "react";
 import type { ComboboxSearchProps } from "../../../Combobox.types";
-export declare function ComboboxContentSearch(props: ComboboxSearchProps): JSX.Element;
+export declare function ComboboxContentSearch(props: ComboboxSearchProps): React.JSX.Element;

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

@@ -3,7 +3,7 @@ import type React from "react";
 import type { UseMakeComboboxHandlersReturn } from "./useMakeComboboxHandlers";
 import { type ComboboxOption } from "../Combobox.types";
 type UseComboboxReturn = {
-    wrapperRef: React.RefObject<HTMLDivElement>;
+    wrapperRef: React.RefObject<HTMLDivElement | null>;
     searchValue: string;
     setSearchValue: Dispatch<React.SetStateAction<string>>;
     open: boolean;

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

@@ -1,7 +1,7 @@
 import type { UseInteractionsReturn } from "@floating-ui/react";
 import { type ComboboxOption } from "../Combobox.types";
-export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement>): {
-    floatingRef: React.RefObject<HTMLDivElement>;
+export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement | null>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement | null>): {
+    floatingRef: React.RefObject<HTMLDivElement | null>;
     floatingStyles: React.CSSProperties;
     floatingProps: ReturnType<UseInteractionsReturn["getFloatingProps"]>;
     nodeId?: string;

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

@@ -1,6 +1,6 @@
 import { type ComboboxOption } from "../Combobox.types";
 interface useComboboxContent {
-    optionsListRef: React.RefObject<HTMLUListElement>;
+    optionsListRef: React.RefObject<HTMLUListElement | null>;
     onClear?: () => void;
     onSelectAll?: (selection: ComboboxOption[]) => void;
 }