@jobber/components 8.2.0 → 8.3.0

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, ...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

@@ -3,7 +3,7 @@ import type { UseAutocompleteListNavReturn } from "./hooks/useAutocompleteListNa
 import type { createInteractionPointerDownHandler } from "./utils/interactionUtils";
 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
@@ -94,10 +94,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;
@@ -112,7 +108,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;
 }
@@ -139,9 +135,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.
      */
@@ -351,7 +346,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,7 +12,7 @@ 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 InputText = require('../InputText-cjs.js');
 var FormFieldWrapper = require('../FormFieldWrapper-cjs.js');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react-hook-form');
@@ -24,14 +24,13 @@ require('../index.esm-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../Content-cjs.js');
-require('../FormField-cjs.js');
 require('../FormFieldPostFix-cjs.js');
 require('../Spinner-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
 require('framer-motion');
-require('react-router-dom');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
+require('react-router-dom');
 
 const AUTOCOMPLETE_MAX_HEIGHT$1 = 300;
 /** Stable empty array for cleared/empty selection state. Reuse to avoid reference churn. */
@@ -1186,7 +1185,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)
@@ -1259,7 +1258,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, }) {
@@ -1572,7 +1571,7 @@ 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 } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "customRenderMenu"]);
     const initialOptionsMemo = React.useMemo(() => mapToOptions(initialOptions), [initialOptions]);
     const [options, setOptions] = React.useState(initialOptionsMemo);
     const [inputFocused, setInputFocused] = React.useState(false);
@@ -1588,7 +1587,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: mergeRefs.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);
@@ -1656,7 +1655,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 | HTMLTextAreaElement | null>;
         menu?: never;
     }): ReturnType<typeof AutocompleteShim>;
     (props: AutocompleteLegacyProps & {
         version?: 1;
-        ref?: React.Ref<InputTextRef>;
+        ref?: React.Ref<HTMLInputElement | HTMLTextAreaElement | null>;
         menu?: never;
     }): ReturnType<typeof AutocompleteShim>;
 };

package/dist/Autocomplete/index.mjs

@@ -10,7 +10,7 @@ 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 { I as InputText } from '../InputText-es.js';
 import { c as FormFieldWrapper } from '../FormFieldWrapper-es.js';
 import { _ as __rest, a as __awaiter } from '../tslib.es6-es.js';
 import 'react-hook-form';
@@ -22,14 +22,13 @@ import '../index.esm-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../Content-es.js';
-import '../FormField-es.js';
 import '../FormFieldPostFix-es.js';
 import '../Spinner-es.js';
 import '../useAtlantisFormFieldName-es.js';
 import 'framer-motion';
-import 'react-router-dom';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
+import 'react-router-dom';
 
 const AUTOCOMPLETE_MAX_HEIGHT$1 = 300;
 /** Stable empty array for cleared/empty selection state. Reuse to avoid reference churn. */
@@ -1184,7 +1183,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)
@@ -1570,7 +1569,7 @@ 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 } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "customRenderMenu"]);
     const initialOptionsMemo = useMemo(() => mapToOptions(initialOptions), [initialOptions]);
     const [options, setOptions] = useState(initialOptionsMemo);
     const [inputFocused, setInputFocused] = useState(false);
@@ -1586,7 +1585,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);
@@ -1654,7 +1653,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,7 @@ require('react');
 require('classnames');
 require('@jobber/design');
 require('@jobber/hooks');
-require('../../../InputText/index.cjs');
-require('../../../FormField-cjs.js');
+require('../../../InputText-cjs.js');
 require('../../../FormFieldWrapper-cjs.js');
 require('framer-motion');
 require('../../../Button-cjs.js');

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

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

package/dist/DataList/index.cjs

@@ -79,8 +79,7 @@ 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('../FormFieldWrapper-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');

package/dist/DataList/index.mjs

@@ -77,8 +77,7 @@ 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 '../FormFieldWrapper-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-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/InputDate/index.cjs

@@ -30,8 +30,7 @@ require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
 require('../_setToString-cjs.js');
 require('../AtlantisContext-cjs.js');
-require('../InputText/index.cjs');
-require('../FormField-cjs.js');
+require('../InputText-cjs.js');
 require('../FormFieldWrapper-cjs.js');
 require('framer-motion');
 require('../Text-cjs.js');

package/dist/InputDate/index.mjs

@@ -28,8 +28,7 @@ import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
 import '../_setToString-es.js';
 import '../AtlantisContext-es.js';
-import '../InputText/index.mjs';
-import '../FormField-es.js';
+import '../InputText-es.js';
 import '../FormFieldWrapper-es.js';
 import 'framer-motion';
 import '../Text-es.js';

package/dist/InputDate-cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var DatePicker = require('./DatePicker-cjs.js');
-var InputText_index = require('./InputText/index.cjs');
+var InputText = require('./InputText-cjs.js');
 
 function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
     const [isFocused, setIsFocused] = React.useState(false);
@@ -82,7 +82,7 @@ const InputDate = React.forwardRef((props, forwardedRef) => {
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React.createElement("div", { onClick: onClick },
-            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React.createElement(InputText.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);

package/dist/InputDate-es.js

@@ -1,6 +1,6 @@
 import React__default, { useState, forwardRef, useRef } from 'react';
 import { D as DatePicker } from './DatePicker-es.js';
-import { InputText } from './InputText/index.mjs';
+import { I as InputText } from './InputText-es.js';
 
 function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
     const [isFocused, setIsFocused] = useState(false);
@@ -80,7 +80,7 @@ const InputDate = forwardRef((props, forwardedRef) => {
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React__default.createElement("div", { onClick: onClick },
-            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);

package/dist/InputText/InputText.d.ts

@@ -1,71 +1,3 @@
 import React from "react";
-import type { InputTextRef } from "./InputText.types";
-export declare const InputText: React.ForwardRefExoticComponent<({
-    readonly multiline: true;
-    readonly rows?: (number | import("./InputText.types").RowRange) | undefined;
-    readonly id?: string | undefined;
-    readonly align?: ("center" | "right") | undefined;
-    readonly description?: React.ReactNode;
-    readonly disabled?: boolean | undefined;
-    readonly showMiniLabel?: boolean | undefined;
-    readonly invalid?: boolean | undefined;
-    readonly inline?: boolean | undefined;
-    loading?: boolean | undefined;
-    readonly name?: string | undefined;
-    onChange?: ((newValue: string | number | boolean | Date, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void) | undefined;
-    onValidation?: ((message: string) => void) | undefined;
-    readonly placeholder?: string | undefined;
-    readonly size?: ("small" | "large") | undefined;
-    readonly value?: (string | number | Date) | undefined;
-    readonly clearable?: import("@jobber/hooks").Clearable | undefined;
-    version?: 1 | undefined;
-    onFocus?: ((event?: React.FocusEvent) => void) | undefined;
-    onBlur?: ((event?: React.FocusEvent) => void) | undefined;
-    readonly toolbar?: React.ReactNode;
-    readonly defaultValue?: (string | Date) | undefined;
-    readonly prefix?: import("..").Affix | undefined;
-    readonly maxLength?: number | undefined;
-    readonly autofocus?: boolean | undefined;
-    readonly autocomplete?: (boolean | import("..").AutocompleteTypes) | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
-    readonly keyboard?: ("numeric" | "decimal") | undefined;
-    readonly suffix?: import("ts-xor").XOR<import("..").Affix, import("..").Suffix> | undefined;
-    onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
-    readonly readonly?: boolean | undefined;
-    readonly validations?: import("react-hook-form").RegisterOptions | undefined;
-    readonly toolbarVisibility?: ("always" | "while-editing") | undefined;
-} | {
-    rows?: undefined;
-    multiline?: boolean | undefined;
-    readonly id?: string | undefined;
-    readonly align?: ("center" | "right") | undefined;
-    readonly description?: React.ReactNode;
-    readonly disabled?: boolean | undefined;
-    readonly showMiniLabel?: boolean | undefined;
-    readonly invalid?: boolean | undefined;
-    readonly inline?: boolean | undefined;
-    loading?: boolean | undefined;
-    readonly name?: string | undefined;
-    onChange?: ((newValue: string | number | boolean | Date, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void) | undefined;
-    onValidation?: ((message: string) => void) | undefined;
-    readonly placeholder?: string | undefined;
-    readonly size?: ("small" | "large") | undefined;
-    readonly value?: (string | number | Date) | undefined;
-    readonly clearable?: import("@jobber/hooks").Clearable | undefined;
-    version?: 1 | undefined;
-    onFocus?: ((event?: React.FocusEvent) => void) | undefined;
-    onBlur?: ((event?: React.FocusEvent) => void) | undefined;
-    readonly toolbar?: React.ReactNode;
-    readonly defaultValue?: (string | Date) | undefined;
-    readonly prefix?: import("..").Affix | undefined;
-    readonly maxLength?: number | undefined;
-    readonly autofocus?: boolean | undefined;
-    readonly autocomplete?: (boolean | import("..").AutocompleteTypes) | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
-    readonly keyboard?: ("numeric" | "decimal") | undefined;
-    readonly suffix?: import("ts-xor").XOR<import("..").Affix, import("..").Suffix> | undefined;
-    onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
-    readonly readonly?: boolean | undefined;
-    readonly validations?: import("react-hook-form").RegisterOptions | undefined;
-    readonly toolbarVisibility?: ("always" | "while-editing") | undefined;
-}) & React.RefAttributes<InputTextRef>>;
+import type { InputTextProps } from "./InputText.types";
+export declare const InputText: React.ForwardRefExoticComponent<InputTextProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/InputText/InputText.types.d.ts

@@ -1,5 +1,4 @@
-import type { XOR } from "ts-xor";
-import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
+import type { FormFieldProps } from "../FormField";
 import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
 export interface RowRange {
     min: number;
@@ -16,12 +15,11 @@ interface InputLengthConstraint {
      */
     readonly maxLength?: number;
 }
-export type InputTextVersion = 1 | 2 | undefined;
 /**
  * Experimental version 2 of the InputText component.
  * Do not use unless you have talked with Atlantis first.
  */
-export interface InputTextRebuiltProps extends HTMLInputBaseProps, MouseEvents<HTMLInputElement | HTMLTextAreaElement>, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, RebuiltInputCommonProps, InputLengthConstraint {
+export interface InputTextProps extends HTMLInputBaseProps, MouseEvents<HTMLInputElement | HTMLTextAreaElement>, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, Omit<RebuiltInputCommonProps, "version">, InputLengthConstraint {
     /**
      * When false, the placeholder text only serves as a standard placeholder and
      * disappears when the user types, instead of floating above the value as a
@@ -61,30 +59,4 @@ export interface InputTextRebuiltProps extends HTMLInputBaseProps, MouseEvents<H
      */
     readonly onEnter?: FormFieldProps["onEnter"];
 }
-interface BaseProps extends CommonFormFieldProps, Pick<FormFieldProps, "autofocus" | "maxLength" | "readonly" | "autocomplete" | "keyboard" | "onEnter" | "onFocus" | "onBlur" | "onChange" | "inputRef" | "validations" | "defaultValue" | "prefix" | "suffix" | "toolbar" | "toolbarVisibility" | "version"> {
-    multiline?: boolean;
-}
-export interface InputTextRef {
-    insert(text: string): void;
-    blur(): void;
-    focus(): void;
-    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
-}
-interface MultilineProps extends BaseProps {
-    /**
-     * Use this when you're expecting a long answer.
-     */
-    readonly multiline: true;
-    /**
-     * Specifies the visible height of a long answer form field. Can be in the
-     * form of a single number to set a static height, or an object with a min
-     * and max keys indicating the minimum number of visible rows, and the
-     * maximum number of visible rows.
-     */
-    readonly rows?: number | RowRange;
-}
-/**
- * @deprecated Use the v2 InputText component instead (version={2}).
- */
-export type InputTextLegacyProps = XOR<BaseProps, MultilineProps>;
 export {};