@jobber/components 6.120.2 → 6.120.3-JOB-145568-e19b446.16

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,7 +1,6 @@
 import type { Ref, RefAttributes } from "react";
 import React from "react";
 import { type AnyOption, type AutocompleteLegacyProps, type Option } from "./Autocomplete.types";
-import type { InputTextRef } from "../InputText";
-declare function AutocompleteInternal<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu, ...inputProps }: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>, ref: Ref<InputTextRef>): React.JSX.Element;
-export declare const Autocomplete: <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & RefAttributes<InputTextRef>) => ReturnType<typeof AutocompleteInternal>;
+declare function AutocompleteInternal<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, customRenderMenu, version, ...inputProps }: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>, ref: Ref<HTMLInputElement>): React.JSX.Element;
+export declare const Autocomplete: <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & RefAttributes<HTMLInputElement>) => ReturnType<typeof AutocompleteInternal>;
 export {};

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

@@ -1,7 +1,7 @@
 import type { CSSProperties, Key, Ref, RefObject } from "react";
 import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
 import type { FormFieldProps } from "../FormField";
-import type { InputTextRebuiltProps, InputTextRef } from "../InputText";
+import type { InputTextProps } from "../InputText";
 /**
  * ARIA attributes for Autocomplete with managed/orchestrated behavior.
  * Certain ARIA attributes are controlled internally by Autocomplete's
@@ -92,10 +92,6 @@ export interface AutocompleteLegacyProps<GenericOption extends AnyOption = AnyOp
      * @param newInputText
      */
     readonly getOptions: (newInputText: string) => Array<GenericGetOptionsValue | GenericOption> | Promise<Array<GenericGetOptionsValue | GenericOption>>;
-    /**
-     * Validations to run on the input.
-     */
-    readonly validations?: FormFieldProps["validations"];
 }
 export type AutocompleteProps<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption> = AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>;
 export type CustomOptionsMenuType<GenericOption extends AnyOption = AnyOption> = (props: CustomOptionsMenuProp<GenericOption>) => React.ReactElement;
@@ -110,7 +106,7 @@ export interface MenuProps<GenericOption extends AnyOption = AnyOption, GenericO
     /**
      * Ref to the TextInput element.
      */
-    readonly inputRef: RefObject<InputTextRef | null>;
+    readonly inputRef: RefObject<HTMLInputElement | null>;
     onOptionSelect(chosenOption?: GenericOptionValue): void;
     readonly customRenderMenu?: (props: CustomOptionsMenuProp<GenericOption, GenericOptionValue>) => React.ReactElement;
 }
@@ -137,9 +133,8 @@ export interface CustomOptionsMenuProp<GenericOption extends AnyOption = AnyOpti
     readonly inputFocused: boolean;
     /**
      * Ref to the TextInput element.
-     * v1 provides InputTextRef; v2 provides a DOM element ref.
      */
-    readonly inputRef: RefObject<InputTextRef | HTMLInputElement | HTMLTextAreaElement | null>;
+    readonly inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
     /**
      * Component that wraps the menu content. Used for handling keyboard scroll behavior.
      */
@@ -349,7 +344,7 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
      */
     readonly customRenderInput?: (props: {
         inputRef: Ref<HTMLInputElement | HTMLTextAreaElement>;
-        inputProps: InputTextRebuiltProps;
+        inputProps: InputTextProps;
     }) => React.ReactNode;
     /**
      * **Use at your own risk:** Custom class names for specific elements. This should only be used as a

package/dist/Autocomplete/index.cjs

@@ -12,8 +12,8 @@ var Text = require('../Text-cjs.js');
 var Typography = require('../Typography-cjs.js');
 var Icon = require('../Icon-cjs.js');
 var Glimmer = require('../Glimmer-cjs.js');
-var InputText_index = require('../InputText/index.cjs');
-var FormField = require('../FormField-cjs.js');
+var InputText = require('../InputText-cjs.js');
+var mergeRefs = require('../mergeRefs-cjs.js');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../Button-cjs.js');
@@ -1180,7 +1180,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
             ? `${listboxId}-item-${activeIndex}`
             : undefined,
     };
-    const inputProps = Object.assign(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(Object.assign({ 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, clearable: props.clearable, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), ariaProps), dataAttrs);
     const chipAreaRef = React.useCallback((node) => {
         if (!node)
@@ -1208,7 +1208,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
             }
         }
     }, [setReferenceElement, props.multiple]);
-    const mergedInputRef = React.useMemo(() => FormField.mergeRefs([
+    const mergedInputRef = React.useMemo(() => mergeRefs.mergeRefs([
         referenceInputRef,
         internalInputRef,
         forwardedRef,
@@ -1253,7 +1253,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
                 : composedReferenceProps, inputAriaProps: ariaProps, inputDataAttrs: dataAttrs, limitVisibleSelections: props.limitVisibleSelections, limitSelectionText: props.limitSelectionText, unsafeClassName: (_p = props.UNSAFE_className) === null || _p === void 0 ? void 0 : _p.selection, unsafeStyle: (_q = props.UNSAFE_styles) === null || _q === void 0 ? void 0 : _q.selection }, floatingMenu));
     }
     return (React.createElement("div", { "data-testid": "ATL-AutocompleteRebuilt" },
-        React.createElement(InputText_index.InputText, Object.assign({ ref: mergedInputRef }, inputProps)),
+        React.createElement(InputText.InputText, Object.assign({ ref: mergedInputRef }, inputProps)),
         floatingMenu));
 }
 function SelectionChip({ value, active, disabled, getOptionLabel, customRenderValue, canDismiss, onDismiss, unsafeClassName, unsafeStyle, }) {
@@ -1298,7 +1298,7 @@ function MultipleSelectionLayout({ selectedValues, inputValue, disabled, error,
     }, []);
     return (React.createElement("div", { "data-testid": "ATL-AutocompleteRebuilt", onFocus: handleFocusIn, onBlur: handleFocusOut },
         React.createElement("div", { className: styles$1.multiSelectField, "data-testid": "ATL-AutocompleteRebuilt-multiSelectContainer" },
-            React.createElement(FormField.FormFieldWrapper, { disabled: disabled, size: sizeProp ? sizeProp : undefined, error: (_a = error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(error || invalid), identifier: inputId, descriptionIdentifier: descriptionId, description: description, clearable: clearable !== null && clearable !== void 0 ? clearable : "never", onClear: () => {
+            React.createElement(mergeRefs.FormFieldWrapper, { disabled: disabled, size: sizeProp ? sizeProp : undefined, error: (_a = error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(error || invalid), identifier: inputId, descriptionIdentifier: descriptionId, description: description, clearable: clearable !== null && clearable !== void 0 ? clearable : "never", onClear: () => {
                     var _a;
                     clearAll();
                     (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -1566,7 +1566,9 @@ function CustomMenu({ options, selectedOption, onOptionSelect, customRenderMenu,
 // eslint-disable-next-line max-statements
 function AutocompleteInternal(_a, ref) {
     var _b;
-    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations", "customRenderMenu"]);
+    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, customRenderMenu, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Exclude this from inputProps
+    version } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "customRenderMenu", "version"]);
     const initialOptionsMemo = React.useMemo(() => mapToOptions(initialOptions), [initialOptions]);
     const [options, setOptions] = React.useState(initialOptionsMemo);
     const [inputFocused, setInputFocused] = React.useState(false);
@@ -1582,7 +1584,7 @@ function AutocompleteInternal(_a, ref) {
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
     return (React.createElement("div", { className: styles.autocomplete, ref: setAutocompleteRef },
-        React.createElement(InputText_index.InputText, Object.assign({ ref: FormField.mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        React.createElement(InputText.InputText, Object.assign({ ref: mergeRefs.mergeRefs([ref, inputRef]), autoComplete: "off", size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur }, inputProps)),
         React.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
     function updateInput(newText) {
         setInputText(newText);
@@ -1650,7 +1652,7 @@ function AutocompleteShim(props, ref) {
     if (isNewAutocompleteProps(props)) {
         return (React.createElement(AutocompleteRebuilt, Object.assign({}, props, { ref: ref })));
     }
-    return React.createElement(Autocomplete$1, Object.assign({}, props, { ref: ref }));
+    return (React.createElement(Autocomplete$1, Object.assign({}, props, { ref: ref })));
 }
 const AutocompleteForwarded = React.forwardRef(AutocompleteShim);
 AutocompleteForwarded.displayName = "Autocomplete";

package/dist/Autocomplete/index.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import type { AnyOption, AutocompleteLegacyProps, AutocompleteRebuiltProps, ExtraProps, Option, OptionLike } from "./Autocomplete.types";
-import type { InputTextRef } from "../InputText";
 export type { OptionLike } from "./Autocomplete.types";
 export { type MenuOptionProps, BaseMenuOption, type BaseMenuOptionProps, MenuOption, BaseMenuGroupOption, type BaseMenuGroupOptionProps, } from "./Option";
 export { type AnyOption, type AutocompleteProps, type BaseOption, type CustomOptionsMenuProp, type GroupOption, type OptionCollection, type Option, type MenuItem, type MenuSection, type MenuOptions, type MenuHeader, type MenuFooter, type MenuAction, type ExtraProps, defineMenu, } from "./Autocomplete.types";
@@ -9,7 +8,7 @@ export { useRepositionMenu } from "./useRepositionMenu";
 export { BaseAutocompleteMenuWrapper, useAutocompleteMenu, } from "./Menu/MenuWrapper";
 export { isOptionSelected, isOptionGroup } from "./Autocomplete.utils";
 type AutocompleteShimProps = AutocompleteLegacyProps | AutocompleteRebuiltProps<OptionLike, boolean, ExtraProps, ExtraProps>;
-declare function AutocompleteShim(props: AutocompleteShimProps, ref: React.Ref<InputTextRef | HTMLInputElement | HTMLTextAreaElement>): React.JSX.Element;
+declare function AutocompleteShim(props: AutocompleteShimProps, ref: React.Ref<HTMLInputElement | HTMLTextAreaElement>): React.JSX.Element;
 export declare const Autocomplete: {
     <T extends OptionLike = OptionLike, Multiple extends boolean = false, S extends object = ExtraProps, A extends object = ExtraProps>(props: AutocompleteRebuiltProps<T, Multiple, S, A> & {
         version: 2;
@@ -19,12 +18,12 @@ export declare const Autocomplete: {
     }): ReturnType<typeof AutocompleteShim>;
     <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & {
         version?: 1;
-        ref?: React.Ref<InputTextRef>;
+        ref?: React.Ref<HTMLInputElement>;
         menu?: never;
     }): ReturnType<typeof AutocompleteShim>;
     (props: AutocompleteLegacyProps & {
         version?: 1;
-        ref?: React.Ref<InputTextRef>;
+        ref?: React.Ref<HTMLInputElement>;
         menu?: never;
     }): ReturnType<typeof AutocompleteShim>;
 };

package/dist/Autocomplete/index.mjs

@@ -10,8 +10,8 @@ import { T as Text } from '../Text-es.js';
 import { T as Typography } from '../Typography-es.js';
 import { I as Icon } from '../Icon-es.js';
 import { G as Glimmer } from '../Glimmer-es.js';
-import { InputText } from '../InputText/index.mjs';
-import { n as mergeRefs, f as FormFieldWrapper } from '../FormField-es.js';
+import { I as InputText } from '../InputText-es.js';
+import { m as mergeRefs, c as FormFieldWrapper } from '../mergeRefs-es.js';
 import { _ as __rest, a as __awaiter } from '../tslib.es6-es.js';
 import 'react-hook-form';
 import '../Button-es.js';
@@ -1178,7 +1178,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
             ? `${listboxId}-item-${activeIndex}`
             : undefined,
     };
-    const inputProps = Object.assign(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(Object.assign({ 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, clearable: props.clearable, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), ariaProps), dataAttrs);
     const chipAreaRef = useCallback((node) => {
         if (!node)
@@ -1564,7 +1564,9 @@ function CustomMenu({ options, selectedOption, onOptionSelect, customRenderMenu,
 // eslint-disable-next-line max-statements
 function AutocompleteInternal(_a, ref) {
     var _b;
-    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations", "customRenderMenu"]);
+    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, customRenderMenu, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Exclude this from inputProps
+    version } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "customRenderMenu", "version"]);
     const initialOptionsMemo = useMemo(() => mapToOptions(initialOptions), [initialOptions]);
     const [options, setOptions] = useState(initialOptionsMemo);
     const [inputFocused, setInputFocused] = useState(false);
@@ -1580,7 +1582,7 @@ function AutocompleteInternal(_a, ref) {
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
     return (React__default.createElement("div", { className: styles.autocomplete, ref: setAutocompleteRef },
-        React__default.createElement(InputText, Object.assign({ ref: mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        React__default.createElement(InputText, Object.assign({ ref: mergeRefs([ref, inputRef]), autoComplete: "off", size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur }, inputProps)),
         React__default.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
     function updateInput(newText) {
         setInputText(newText);
@@ -1648,7 +1650,7 @@ function AutocompleteShim(props, ref) {
     if (isNewAutocompleteProps(props)) {
         return (React__default.createElement(AutocompleteRebuilt, Object.assign({}, props, { ref: ref })));
     }
-    return React__default.createElement(Autocomplete$1, Object.assign({}, props, { ref: ref }));
+    return (React__default.createElement(Autocomplete$1, Object.assign({}, props, { ref: ref })));
 }
 const AutocompleteForwarded = forwardRef(AutocompleteShim);
 AutocompleteForwarded.displayName = "Autocomplete";

package/dist/DataList/components/DataListSearch/index.cjs

@@ -5,8 +5,8 @@ require('react');
 require('classnames');
 require('@jobber/design');
 require('@jobber/hooks');
-require('../../../InputText/index.cjs');
-require('../../../FormField-cjs.js');
+require('../../../InputText-cjs.js');
+require('../../../mergeRefs-cjs.js');
 require('framer-motion');
 require('../../../Button-cjs.js');
 require('react-router-dom');

package/dist/DataList/components/DataListSearch/index.mjs

@@ -3,8 +3,8 @@ import 'react';
 import 'classnames';
 import '@jobber/design';
 import '@jobber/hooks';
-import '../../../InputText/index.mjs';
-import '../../../FormField-es.js';
+import '../../../InputText-es.js';
+import '../../../mergeRefs-es.js';
 import 'framer-motion';
 import '../../../Button-es.js';
 import 'react-router-dom';

package/dist/DataList/index.cjs

@@ -79,8 +79,8 @@ require('../ComboboxActivator-cjs.js');
 require('../DataListOverflowFade-cjs.js');
 require('../DataListStickyHeader-cjs.js');
 require('../DataListSearch-cjs.js');
-require('../InputText/index.cjs');
-require('../FormField-cjs.js');
+require('../InputText-cjs.js');
+require('../mergeRefs-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../DataListEmptyState-cjs.js');

package/dist/DataList/index.mjs

@@ -77,8 +77,8 @@ import '../ComboboxActivator-es.js';
 import '../DataListOverflowFade-es.js';
 import '../DataListStickyHeader-es.js';
 import '../DataListSearch-es.js';
-import '../InputText/index.mjs';
-import '../FormField-es.js';
+import '../InputText-es.js';
+import '../mergeRefs-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../DataListEmptyState-es.js';

package/dist/DataListSearch-cjs.js

@@ -4,7 +4,7 @@ var React = require('react');
 var classnames = require('classnames');
 var design = require('@jobber/design');
 var jobberHooks = require('@jobber/hooks');
-var InputText_index = require('./InputText/index.cjs');
+var InputText = require('./InputText-cjs.js');
 var DataListContext = require('./DataListContext-cjs.js');
 var DataList_const = require('./DataList.const-cjs.js');
 var Button = require('./Button-cjs.js');
@@ -24,24 +24,26 @@ function DataListSearch(_) {
 function InternalDataListSearch() {
     const inputRef = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState("");
     const { searchComponent, filterComponent, sorting, title } = DataListContext.useDataListContext();
     const debouncedSearch = jobberHooks.useDebounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, DataList_const.SEARCH_DEBOUNCE_DELAY);
     if (!searchComponent)
         return null;
     const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;
+    const isControlled = controlledValue !== undefined;
     return (React.createElement("div", { className: classnames(styles.wrapper, {
             [styles.withNoFilters]: !filterComponent && !sorting,
         }) },
         React.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles.searchInput, {
                 [styles.searchInputVisible]: visible,
             }) },
-            React.createElement(InputText_index.InputText
+            React.createElement(InputText.InputText
             // If the initial value changes, reset the input.
             , { 
                 // If the initial value changes, reset the input.
-                key: initialValue, defaultValue: initialValue, value: controlledValue, ref: inputRef, placeholder: getPlaceholder(), onChange: controlledValue !== undefined
-                    ? searchComponent.props.onSearch
-                    : debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
+                key: initialValue, value: isControlled ? controlledValue : internalValue, ref: inputRef, placeholder: getPlaceholder(), onChange: isControlled
+                    ? (val) => searchComponent.props.onSearch(val)
+                    : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
         React.createElement("div", { className: styles.searchButton },
             React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
@@ -55,9 +57,13 @@ function InternalDataListSearch() {
         const visibility = !visible;
         setVisible(visibility);
         if (visibility && inputRef.current) {
-            setTimeout(inputRef.current.focus, design.tokens["timing-quick"]);
+            setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, design.tokens["timing-quick"]);
         }
     }
+    function handleUncontrolledChange(val) {
+        setInternalValue(val);
+        debouncedSearch(val);
+    }
 }
 
 exports.DATA_LIST_SEARCH_TEST_ID = DATA_LIST_SEARCH_TEST_ID;

package/dist/DataListSearch-es.js

@@ -2,7 +2,7 @@ import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import { tokens } from '@jobber/design';
 import { useDebounce } from '@jobber/hooks';
-import { InputText } from './InputText/index.mjs';
+import { I as InputText } from './InputText-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { S as SEARCH_DEBOUNCE_DELAY } from './DataList.const-es.js';
 import { B as Button } from './Button-es.js';
@@ -22,11 +22,13 @@ function DataListSearch(_) {
 function InternalDataListSearch() {
     const inputRef = useRef(null);
     const [visible, setVisible] = useState(false);
+    const [internalValue, setInternalValue] = useState("");
     const { searchComponent, filterComponent, sorting, title } = useDataListContext();
     const debouncedSearch = useDebounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY);
     if (!searchComponent)
         return null;
     const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;
+    const isControlled = controlledValue !== undefined;
     return (React__default.createElement("div", { className: classnames(styles.wrapper, {
             [styles.withNoFilters]: !filterComponent && !sorting,
         }) },
@@ -37,9 +39,9 @@ function InternalDataListSearch() {
             // If the initial value changes, reset the input.
             , { 
                 // If the initial value changes, reset the input.
-                key: initialValue, defaultValue: initialValue, value: controlledValue, ref: inputRef, placeholder: getPlaceholder(), onChange: controlledValue !== undefined
-                    ? searchComponent.props.onSearch
-                    : debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
+                key: initialValue, value: isControlled ? controlledValue : internalValue, ref: inputRef, placeholder: getPlaceholder(), onChange: isControlled
+                    ? (val) => searchComponent.props.onSearch(val)
+                    : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
         React__default.createElement("div", { className: styles.searchButton },
             React__default.createElement(AnimatedSwitcher, { switched: visible, initialChild: React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
@@ -53,9 +55,13 @@ function InternalDataListSearch() {
         const visibility = !visible;
         setVisible(visibility);
         if (visibility && inputRef.current) {
-            setTimeout(inputRef.current.focus, tokens["timing-quick"]);
+            setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, tokens["timing-quick"]);
         }
     }
+    function handleUncontrolledChange(val) {
+        setInternalValue(val);
+        debouncedSearch(val);
+    }
 }
 
 export { DATA_LIST_SEARCH_TEST_ID as D, InternalDataListSearch as I, DataListSearch as a };

package/dist/DataTable/index.cjs

@@ -24,6 +24,7 @@ require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
 require('../_setToString-cjs.js');
 require('../FormField-cjs.js');
+require('../mergeRefs-cjs.js');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');

package/dist/DataTable/index.mjs

@@ -22,6 +22,7 @@ import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
 import '../_setToString-es.js';
 import '../FormField-es.js';
+import '../mergeRefs-es.js';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';

package/dist/FormField/index.cjs

@@ -1,35 +1,36 @@
 'use strict';
 
 var FormField = require('../FormField-cjs.js');
+var mergeRefs = require('../mergeRefs-cjs.js');
 require('react');
+require('classnames');
+require('../tslib.es6-cjs.js');
+require('react-hook-form');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('../Button-cjs.js');
 require('react-router-dom');
-require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('react-hook-form');
 
 
 
-exports.AffixIcon = FormField.AffixIcon;
-exports.AffixLabel = FormField.AffixLabel;
 exports.FormField = FormField.FormField;
-exports.FormFieldInputHorizontalWrapper = FormField.FormFieldInputHorizontalWrapper;
-exports.FormFieldInputWrapperStyles = FormField.FormFieldInputWrapperStyles;
-exports.FormFieldLabel = FormField.FormFieldLabel;
-exports.FormFieldWrapper = FormField.FormFieldWrapper;
-exports.FormFieldWrapperMain = FormField.FormFieldWrapperMain;
-exports.FormFieldWrapperToolbar = FormField.FormFieldWrapperToolbar;
 exports.useAtlantisFormField = FormField.useAtlantisFormField;
 exports.useAtlantisFormFieldActions = FormField.useAtlantisFormFieldActions;
-exports.useAtlantisFormFieldName = FormField.useAtlantisFormFieldName;
 exports.useAtlantisReactHookForm = FormField.useAtlantisReactHookForm;
-exports.useFormFieldWrapperStyles = FormField.useFormFieldWrapperStyles;
+exports.AffixIcon = mergeRefs.AffixIcon;
+exports.AffixLabel = mergeRefs.AffixLabel;
+exports.FormFieldInputHorizontalWrapper = mergeRefs.FormFieldInputHorizontalWrapper;
+exports.FormFieldInputWrapperStyles = mergeRefs.FormFieldInputWrapperStyles;
+exports.FormFieldLabel = mergeRefs.FormFieldLabel;
+exports.FormFieldWrapper = mergeRefs.FormFieldWrapper;
+exports.FormFieldWrapperMain = mergeRefs.FormFieldWrapperMain;
+exports.FormFieldWrapperToolbar = mergeRefs.FormFieldWrapperToolbar;
+exports.useAtlantisFormFieldName = mergeRefs.useAtlantisFormFieldName;
+exports.useFormFieldWrapperStyles = mergeRefs.useFormFieldWrapperStyles;

package/dist/FormField/index.mjs

@@ -1,16 +1,17 @@
-export { A as AffixIcon, i as AffixLabel, k as FormField, F as FormFieldInputHorizontalWrapper, d as FormFieldInputWrapperStyles, e as FormFieldLabel, f as FormFieldWrapper, g as FormFieldWrapperMain, h as FormFieldWrapperToolbar, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisFormFieldName, c as useAtlantisReactHookForm, j as useFormFieldWrapperStyles } from '../FormField-es.js';
+export { F as FormField, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisReactHookForm } from '../FormField-es.js';
+export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useAtlantisFormFieldName, g as useFormFieldWrapperStyles } from '../mergeRefs-es.js';
 import 'react';
+import 'classnames';
+import '../tslib.es6-es.js';
+import 'react-hook-form';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import '../Button-es.js';
 import 'react-router-dom';
-import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import 'react-hook-form';