@jobber/components 6.103.2-JOB-140609-9051081.26 → 6.103.2-JOB-140609-8386817.45

package/dist/InputPhoneNumber/index.cjs

@@ -115,7 +115,6 @@ const DEFAULT_PATTERN = "(***) ***-****";
 function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }) {
     function handleClear() {
         var _a;
-        // Don't call blur handler when programmatically clearing
         onChange && onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -161,13 +160,12 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
         value: props.value,
         invalid: props.invalid,
         error: props.error,
-        maxLength: undefined, // v2: maxLength not used for width styling
         disabled: props.disabled,
         inline: props.inline,
         type: "tel",
     });
     const generatedId = React.useId();
-    const id = props.identifier || props.id || generatedId;
+    const id = props.id || generatedId;
     const { name } = FormField.useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
@@ -187,11 +185,11 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
     });
     const descriptionIdentifier = `descriptionUUID--${id}`;
     const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.ariaInvalid || props.error || props.invalid);
+    const isInvalid = Boolean(props.error || props.invalid);
     return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, inline: props.inline, wrapperRef: wrapperRef, error: (_c = props.error) !== null && _c !== void 0 ? _c : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_d = props.clearable) !== null && _d !== void 0 ? _d : "never", onClear: handleClear, type: "tel", placeholder: props.placeholder, value: formattedValue, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, loading: props.loading },
         React.createElement("input", { id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(inputStyle, {
                 [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
-            }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown }),
+            }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown }),
         React.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),
         React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
 });

package/dist/InputPhoneNumber/index.mjs

@@ -113,7 +113,6 @@ const DEFAULT_PATTERN = "(***) ***-****";
 function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }) {
     function handleClear() {
         var _a;
-        // Don't call blur handler when programmatically clearing
         onChange && onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -159,13 +158,12 @@ const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a,
         value: props.value,
         invalid: props.invalid,
         error: props.error,
-        maxLength: undefined, // v2: maxLength not used for width styling
         disabled: props.disabled,
         inline: props.inline,
         type: "tel",
     });
     const generatedId = useId();
-    const id = props.identifier || props.id || generatedId;
+    const id = props.id || generatedId;
     const { name } = useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
@@ -185,11 +183,11 @@ const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a,
     });
     const descriptionIdentifier = `descriptionUUID--${id}`;
     const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.ariaInvalid || props.error || props.invalid);
+    const isInvalid = Boolean(props.error || props.invalid);
     return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, inline: props.inline, wrapperRef: wrapperRef, error: (_c = props.error) !== null && _c !== void 0 ? _c : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_d = props.clearable) !== null && _d !== void 0 ? _d : "never", onClear: handleClear, type: "tel", placeholder: props.placeholder, value: formattedValue, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, loading: props.loading },
         React__default.createElement("input", { id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(inputStyle, {
                 [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
-            }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown }),
+            }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown }),
         React__default.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),
         React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
 });

package/dist/InputText/InputText.d.ts

@@ -24,11 +24,11 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly toolbar?: React.ReactNode;
     readonly defaultValue?: (string | Date) | undefined;
     readonly prefix?: import("../FormField").Affix | undefined;
-    readonly maxLength?: number | undefined;
     readonly autofocus?: boolean | undefined;
     readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
     inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
+    readonly maxLength?: number | undefined;
     readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
     onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
     readonly readonly?: boolean | undefined;
@@ -58,11 +58,11 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly toolbar?: React.ReactNode;
     readonly defaultValue?: (string | Date) | undefined;
     readonly prefix?: import("../FormField").Affix | undefined;
-    readonly maxLength?: number | undefined;
     readonly autofocus?: boolean | undefined;
     readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
     inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
+    readonly maxLength?: number | undefined;
     readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
     onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
     readonly readonly?: boolean | undefined;

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

@@ -1,5 +1,6 @@
 import type { XOR } from "ts-xor";
-import type { CommonFormFieldProps, FocusEvents, FormFieldProps, FormFieldTypes, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../FormField";
+import type { CommonFormFieldProps, FormFieldProps, FormFieldTypes } from "../FormField";
+import type { FocusEvents, HTMLInputBaseProps, InputLengthConstraint, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
 export interface RowRange {
     min: number;
     max: number;
@@ -9,7 +10,7 @@ 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, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, RebuiltInputCommonProps {
+export interface InputTextRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, RebuiltInputCommonProps, InputLengthConstraint {
     /**
      * Use this when you're expecting a long answer.
      */
@@ -47,10 +48,6 @@ export interface InputTextRebuiltProps extends HTMLInputBaseProps, FocusEvents<H
      * are being held.
      */
     readonly onEnter?: FormFieldProps["onEnter"];
-    /**
-     * @deprecated Use `id` instead. This prop will be removed in a future version.
-     */
-    readonly identifier?: string;
 }
 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;

package/dist/InputText/index.cjs

@@ -150,7 +150,6 @@ function insertAtCursor(input, newText) {
 function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     function handleClear() {
         var _a;
-        // Don't call blur handler when programmatically clearing
         onChange && onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -202,8 +201,7 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
         value: props.value,
         invalid: props.invalid,
         error: props.error,
-        max: typeof props.max === "string" ? parseFloat(props.max) : props.max,
-        maxLength: undefined, // v2: maxLength is for HTML validation only, not for width styling
+        maxLength: props.maxLength,
         type: props.multiline ? "textarea" : "text",
         disabled: props.disabled,
         inline: props.inline,
@@ -222,16 +220,47 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
     });
     const descriptionIdentifier = `descriptionUUID--${id}`;
     const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.ariaInvalid || props.error || props.invalid);
-    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
+    const isInvalid = Boolean(props.error || props.invalid);
+    // Shared props for both TextArea and TextInput
+    const commonInputProps = {
+        id,
+        name,
+        className: inputStyle,
+        value: props.value,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        autoFocus: props.autoFocus,
+        autoComplete: props.autoComplete,
+        inputMode: props.inputMode,
+        tabIndex: props.tabIndex,
+        maxLength: props.maxLength,
+        role: props.role,
+        "aria-label": props.ariaLabel,
+        "aria-describedby": hasDescription
+            ? descriptionIdentifier
+            : props.ariaDescribedBy,
+        "aria-invalid": isInvalid ? true : undefined,
+        "aria-controls": props.ariaControls,
+        "aria-expanded": props.ariaExpanded,
+        "aria-activedescendant": props.ariaActiveDescendant,
+        "aria-autocomplete": props.ariaAutocomplete,
+        "aria-required": props.ariaRequired,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onKeyUp: props.onKeyUp,
+        ref: FormField.mergeRefs([inputRefs, inputTextRef]),
+    };
+    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", maxLength: props.maxLength, onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
         React.createElement(React.Fragment, null,
-            props.multiline ? (React.createElement(TextArea, { id: id, name: name, className: inputStyle, value: props.value, rows: rowRange.min, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, invalid: isInvalid ? "true" : undefined, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, ref: FormField.mergeRefs([inputRefs, inputTextRef]) })) : (React.createElement(TextInput, { id: id, name: name, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, max: props.max, min: props.min, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, invalid: isInvalid ? "true" : undefined, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, ref: FormField.mergeRefs([inputRefs, inputTextRef]) })),
+            props.multiline ? (React.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),
             React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
             props.children)));
 });
 function useInputTextId(props) {
     const generatedId = React.useId();
-    return props.identifier || props.id || generatedId;
+    return props.id || generatedId;
 }
 const TextArea = React.forwardRef(function TextArea(props, ref) {
     return React.createElement("textarea", Object.assign({}, props, { ref: ref }));

package/dist/InputText/index.mjs

@@ -1,6 +1,6 @@
 import React__default, { forwardRef, useRef, useImperativeHandle, useId } from 'react';
 import { useSafeLayoutEffect } from '@jobber/hooks';
-import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, m as mergeRefs, l as FormFieldPostFix } from '../FormField-es.js';
+import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, m as mergeRefs, f as FormFieldWrapper, l as FormFieldPostFix } from '../FormField-es.js';
 import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
@@ -148,7 +148,6 @@ function insertAtCursor(input, newText) {
 function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     function handleClear() {
         var _a;
-        // Don't call blur handler when programmatically clearing
         onChange && onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -200,8 +199,7 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
         value: props.value,
         invalid: props.invalid,
         error: props.error,
-        max: typeof props.max === "string" ? parseFloat(props.max) : props.max,
-        maxLength: undefined, // v2: maxLength is for HTML validation only, not for width styling
+        maxLength: props.maxLength,
         type: props.multiline ? "textarea" : "text",
         disabled: props.disabled,
         inline: props.inline,
@@ -220,16 +218,47 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
     });
     const descriptionIdentifier = `descriptionUUID--${id}`;
     const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.ariaInvalid || props.error || props.invalid);
-    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
+    const isInvalid = Boolean(props.error || props.invalid);
+    // Shared props for both TextArea and TextInput
+    const commonInputProps = {
+        id,
+        name,
+        className: inputStyle,
+        value: props.value,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        autoFocus: props.autoFocus,
+        autoComplete: props.autoComplete,
+        inputMode: props.inputMode,
+        tabIndex: props.tabIndex,
+        maxLength: props.maxLength,
+        role: props.role,
+        "aria-label": props.ariaLabel,
+        "aria-describedby": hasDescription
+            ? descriptionIdentifier
+            : props.ariaDescribedBy,
+        "aria-invalid": isInvalid ? true : undefined,
+        "aria-controls": props.ariaControls,
+        "aria-expanded": props.ariaExpanded,
+        "aria-activedescendant": props.ariaActiveDescendant,
+        "aria-autocomplete": props.ariaAutocomplete,
+        "aria-required": props.ariaRequired,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onKeyUp: props.onKeyUp,
+        ref: mergeRefs([inputRefs, inputTextRef]),
+    };
+    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", maxLength: props.maxLength, onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
         React__default.createElement(React__default.Fragment, null,
-            props.multiline ? (React__default.createElement(TextArea, { id: id, name: name, className: inputStyle, value: props.value, rows: rowRange.min, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, invalid: isInvalid ? "true" : undefined, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, ref: mergeRefs([inputRefs, inputTextRef]) })) : (React__default.createElement(TextInput, { id: id, name: name, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, max: props.max, min: props.min, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, invalid: isInvalid ? "true" : undefined, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, ref: mergeRefs([inputRefs, inputTextRef]) })),
+            props.multiline ? (React__default.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React__default.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),
             React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
             props.children)));
 });
 function useInputTextId(props) {
     const generatedId = useId();
-    return props.identifier || props.id || generatedId;
+    return props.id || generatedId;
 }
 const TextArea = forwardRef(function TextArea(props, ref) {
     return React__default.createElement("textarea", Object.assign({}, props, { ref: ref }));

package/dist/InputTime/InputTime.types.d.ts

@@ -1,5 +1,5 @@
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
-import type { AriaInputProps, FocusEvents, KeyboardEvents } from "../FormField/FormFieldTypes";
+import type { AriaInputProps, FocusEvents, InputConstraintProps, InputLengthConstraint, KeyboardEvents } from "../sharedHelpers/types";
 export interface InputTimeProps extends Pick<CommonFormFieldProps, "id" | "align" | "description" | "disabled" | "invalid" | "inline" | "loading" | "name" | "onValidation" | "placeholder" | "size" | "clearable">, Pick<FormFieldProps, "maxLength" | "readonly" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations"> {
     /**
      * Intial value of the input. Only use this when you need to prepopulate the
@@ -19,7 +19,7 @@ export interface InputTimeProps extends Pick<CommonFormFieldProps, "id" | "align
 export interface InputTimeLegacyProps extends InputTimeProps {
     version?: 1;
 }
-export interface InputTimeRebuiltProps extends Omit<InputTimeProps, "defaultValue" | "version" | "validations" | "onValidation" | "readonly" | "autocomplete" | "inputRef" | "onFocus" | "onBlur" | "onEnter">, AriaInputProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement> {
+export interface InputTimeRebuiltProps extends Omit<InputTimeProps, "defaultValue" | "version" | "validations" | "onValidation" | "readonly" | "autocomplete" | "inputRef" | "onFocus" | "onBlur" | "onEnter" | "max" | "min" | "maxLength">, AriaInputProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, InputLengthConstraint, InputConstraintProps {
     /**
      * Version 2 is highly experimental, avoid using it unless you have talked with Atlantis first.
      */

package/dist/InputTime/hooks/useInputTimeActions.d.ts

@@ -0,0 +1,16 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import type { InputTimeRebuiltProps } from "../InputTime.types";
+export interface UseInputTimeActionsProps extends Pick<InputTimeRebuiltProps, "onChange" | "onFocus" | "onBlur" | "onKeyDown"> {
+    readonly value?: Date;
+    readonly readOnly?: boolean;
+    readonly disabled?: boolean;
+    readonly inputRef?: React.RefObject<HTMLInputElement>;
+}
+export declare function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, }: UseInputTimeActionsProps): {
+    handleChangeEvent: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleChange: (newValue: string) => void;
+    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
+    handleClear: () => void;
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+};

package/dist/InputTime/index.cjs

@@ -204,6 +204,43 @@ function timeStringToDate(timeString, baseDate) {
     }
 }
 
+function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, }) {
+    function handleChangeEvent(event) {
+        handleChange(event.target.value);
+    }
+    function handleChange(newValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+            if (!inputRef.current.checkValidity()) {
+                inputRef.current.value = "";
+            }
+        }
+    }
+    function handleClear() {
+        var _a;
+        // Clear the value and refocus without triggering blur event
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleKeyDown(event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }
+    return {
+        handleChangeEvent,
+        handleChange,
+        handleBlur,
+        handleClear,
+        handleFocus,
+        handleKeyDown,
+    };
+}
+
 const InputTimeRebuilt = React.forwardRef(function InputTimeRebuilt(_a, forwardedRef) {
     var _b;
     var { value, onChange, readOnly, autoComplete, 
@@ -218,43 +255,31 @@ const InputTimeRebuilt = React.forwardRef(function InputTimeRebuilt(_a, forwarde
     const id = params.id || React.useId();
     const wrapperRef = React.useRef(null);
     const { inputStyle } = FormField.useFormFieldWrapperStyles(params);
+    const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, } = useInputTimeActions({
+        onChange,
+        value,
+        readOnly,
+        disabled: params.disabled,
+        inputRef: internalRef,
+        onFocus: params.onFocus,
+        onBlur: params.onBlur,
+        onKeyDown: params.onKeyDown,
+    });
     const { setTypedTime } = useTimePredict({
         value,
         handleChange,
     });
-    return (React.createElement(FormField.FormFieldWrapper, { disabled: params.disabled, size: params.size, align: params.align, inline: params.inline, name: params.name, error: params.error || "", identifier: id, descriptionIdentifier: `descriptionUUID--${id}`, invalid: Boolean(params.invalid), description: params.description, clearable: (_b = params.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: params.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
-        React.createElement("input", { ref: mergedRef, type: "time", name: params.name, className: inputStyle, onBlur: handleBlur, id: id, disabled: params.disabled, readOnly: readOnly, autoComplete: autoComplete, onChange: handleChangeEvent, onFocus: handleFocus, onKeyDown: params.onKeyDown, onKeyUp: e => {
-                var _a;
-                (_a = params.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(params, e);
-                if (params.disabled || readOnly)
-                    return;
-                !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
-            }, "data-testid": "ATL-InputTime-input", value: dateToTimeString(value), "aria-label": params.ariaLabel, "aria-describedby": params.ariaDescribedBy, "aria-invalid": params.ariaInvalid, "aria-required": params.ariaRequired })));
-    function handleChangeEvent(event) {
-        handleChange(event.target.value);
-    }
-    function handleChange(newValue) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
-    }
-    function handleBlur(event) {
+    // Kept outside the useInputTimeActions hook to avoid circular dependency via setTypedTime and handleChange
+    function handleKeyUp(event) {
         var _a;
-        (_a = params.onBlur) === null || _a === void 0 ? void 0 : _a.call(params, event);
-        if (internalRef.current) {
-            if (!internalRef.current.checkValidity()) {
-                internalRef.current.value = "";
-            }
-        }
-    }
-    function handleClear() {
-        var _a;
-        // Clear the value and refocus without triggering blur event
-        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
-        (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    function handleFocus(event) {
-        var _a;
-        (_a = params.onFocus) === null || _a === void 0 ? void 0 : _a.call(params, event);
+        (_a = params.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(params, event);
+        if (params.disabled || readOnly)
+            return;
+        !isNaN(parseInt(event.key, 10)) && setTypedTime(prev => prev + event.key);
     }
+    const isInvalid = Boolean(params.error || params.invalid);
+    return (React.createElement(FormField.FormFieldWrapper, { disabled: params.disabled, size: params.size, align: params.align, inline: params.inline, name: params.name, error: params.error || "", identifier: id, descriptionIdentifier: `descriptionUUID--${id}`, invalid: Boolean(params.invalid), description: params.description, maxLength: params.maxLength, clearable: (_b = params.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: params.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
+        React.createElement("input", { ref: mergedRef, type: "time", name: params.name, className: inputStyle, id: id, disabled: params.disabled, readOnly: readOnly, autoComplete: autoComplete, maxLength: params.maxLength, max: params.max, min: params.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "data-testid": "ATL-InputTime-input", "aria-label": params.ariaLabel, "aria-describedby": params.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-required": params.ariaRequired })));
 });
 
 function InputTime$1(_a) {

package/dist/InputTime/index.mjs

@@ -1,6 +1,6 @@
 import React__default, { useState, useCallback, useEffect, forwardRef, useRef, useId } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
-import { d as debounce } from '../debounce-es.js';
+import { a as debounce } from '../debounce-es.js';
 import { j as useFormFieldWrapperStyles, f as FormFieldWrapper, m as mergeRefs, k as FormField } from '../FormField-es.js';
 import 'classnames';
 import '@jobber/design';
@@ -202,6 +202,43 @@ function timeStringToDate(timeString, baseDate) {
     }
 }
 
+function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, }) {
+    function handleChangeEvent(event) {
+        handleChange(event.target.value);
+    }
+    function handleChange(newValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+            if (!inputRef.current.checkValidity()) {
+                inputRef.current.value = "";
+            }
+        }
+    }
+    function handleClear() {
+        var _a;
+        // Clear the value and refocus without triggering blur event
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleKeyDown(event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }
+    return {
+        handleChangeEvent,
+        handleChange,
+        handleBlur,
+        handleClear,
+        handleFocus,
+        handleKeyDown,
+    };
+}
+
 const InputTimeRebuilt = forwardRef(function InputTimeRebuilt(_a, forwardedRef) {
     var _b;
     var { value, onChange, readOnly, autoComplete, 
@@ -216,43 +253,31 @@ const InputTimeRebuilt = forwardRef(function InputTimeRebuilt(_a, forwardedRef)
     const id = params.id || useId();
     const wrapperRef = React__default.useRef(null);
     const { inputStyle } = useFormFieldWrapperStyles(params);
+    const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, } = useInputTimeActions({
+        onChange,
+        value,
+        readOnly,
+        disabled: params.disabled,
+        inputRef: internalRef,
+        onFocus: params.onFocus,
+        onBlur: params.onBlur,
+        onKeyDown: params.onKeyDown,
+    });
     const { setTypedTime } = useTimePredict({
         value,
         handleChange,
     });
-    return (React__default.createElement(FormFieldWrapper, { disabled: params.disabled, size: params.size, align: params.align, inline: params.inline, name: params.name, error: params.error || "", identifier: id, descriptionIdentifier: `descriptionUUID--${id}`, invalid: Boolean(params.invalid), description: params.description, clearable: (_b = params.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: params.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
-        React__default.createElement("input", { ref: mergedRef, type: "time", name: params.name, className: inputStyle, onBlur: handleBlur, id: id, disabled: params.disabled, readOnly: readOnly, autoComplete: autoComplete, onChange: handleChangeEvent, onFocus: handleFocus, onKeyDown: params.onKeyDown, onKeyUp: e => {
-                var _a;
-                (_a = params.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(params, e);
-                if (params.disabled || readOnly)
-                    return;
-                !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
-            }, "data-testid": "ATL-InputTime-input", value: dateToTimeString(value), "aria-label": params.ariaLabel, "aria-describedby": params.ariaDescribedBy, "aria-invalid": params.ariaInvalid, "aria-required": params.ariaRequired })));
-    function handleChangeEvent(event) {
-        handleChange(event.target.value);
-    }
-    function handleChange(newValue) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
-    }
-    function handleBlur(event) {
+    // Kept outside the useInputTimeActions hook to avoid circular dependency via setTypedTime and handleChange
+    function handleKeyUp(event) {
         var _a;
-        (_a = params.onBlur) === null || _a === void 0 ? void 0 : _a.call(params, event);
-        if (internalRef.current) {
-            if (!internalRef.current.checkValidity()) {
-                internalRef.current.value = "";
-            }
-        }
-    }
-    function handleClear() {
-        var _a;
-        // Clear the value and refocus without triggering blur event
-        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
-        (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    function handleFocus(event) {
-        var _a;
-        (_a = params.onFocus) === null || _a === void 0 ? void 0 : _a.call(params, event);
+        (_a = params.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(params, event);
+        if (params.disabled || readOnly)
+            return;
+        !isNaN(parseInt(event.key, 10)) && setTypedTime(prev => prev + event.key);
     }
+    const isInvalid = Boolean(params.error || params.invalid);
+    return (React__default.createElement(FormFieldWrapper, { disabled: params.disabled, size: params.size, align: params.align, inline: params.inline, name: params.name, error: params.error || "", identifier: id, descriptionIdentifier: `descriptionUUID--${id}`, invalid: Boolean(params.invalid), description: params.description, maxLength: params.maxLength, clearable: (_b = params.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: params.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
+        React__default.createElement("input", { ref: mergedRef, type: "time", name: params.name, className: inputStyle, id: id, disabled: params.disabled, readOnly: readOnly, autoComplete: autoComplete, maxLength: params.maxLength, max: params.max, min: params.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "data-testid": "ATL-InputTime-input", "aria-label": params.ariaLabel, "aria-describedby": params.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-required": params.ariaRequired })));
 });
 
 function InputTime$1(_a) {

package/dist/Select/Select.types.d.ts

@@ -1,5 +1,5 @@
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
-import type { AriaInputProps, FocusEvents } from "../FormField/FormFieldTypes";
+import type { AriaInputProps, FocusEvents } from "../sharedHelpers/types";
 export interface SelectLegacyProps extends Pick<CommonFormFieldProps, "id" | "align" | "description" | "disabled" | "invalid" | "inline" | "name" | "onValidation" | "placeholder" | "size" | "value" | "onChange">, Pick<FormFieldProps, "autofocus" | "onEnter" | "onBlur" | "onFocus" | "inputRef" | "wrapperRef" | "validations" | "children" | "prefix" | "suffix" | "defaultValue" | "version"> {
     /**
      * Changes the width to roughly the same size as the maximum character length

package/dist/Select/index.cjs

@@ -80,12 +80,13 @@ const SelectRebuilt = React.forwardRef(function SelectRebuilt(props, forwardedRe
         onBlur: props.onBlur,
         onFocus: props.onFocus,
     });
+    const isInvalid = Boolean(props.error || props.invalid);
     return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never", maxLength: props.maxLength },
         React.createElement(React.Fragment, null,
             React.createElement("select", { id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props.ariaLabel, "aria-describedby": props.ariaDescribedBy ||
                     (props.description && !props.inline
                         ? descriptionIdentifier
-                        : undefined), "aria-invalid": props.ariaInvalid, "aria-required": props.ariaRequired, ref: mergedRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }, props.children),
+                        : undefined), "aria-invalid": isInvalid ? true : undefined, "aria-required": props.ariaRequired, ref: mergedRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }, props.children),
             React.createElement(FormField.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 });
 function useSelectId(props) {

package/dist/Select/index.mjs

@@ -78,12 +78,13 @@ const SelectRebuilt = forwardRef(function SelectRebuilt(props, forwardedRef) {
         onBlur: props.onBlur,
         onFocus: props.onFocus,
     });
+    const isInvalid = Boolean(props.error || props.invalid);
     return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never", maxLength: props.maxLength },
         React__default.createElement(React__default.Fragment, null,
             React__default.createElement("select", { id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props.ariaLabel, "aria-describedby": props.ariaDescribedBy ||
                     (props.description && !props.inline
                         ? descriptionIdentifier
-                        : undefined), "aria-invalid": props.ariaInvalid, "aria-required": props.ariaRequired, ref: mergedRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }, props.children),
+                        : undefined), "aria-invalid": isInvalid ? true : undefined, "aria-required": props.ariaRequired, ref: mergedRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }, props.children),
             React__default.createElement(FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 });
 function useSelectId(props) {

package/dist/Tabs-es.js

@@ -1,7 +1,7 @@
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
-import { a as debounce_1 } from './debounce-es.js';
+import { d as debounce_1 } from './debounce-es.js';
 import { a as isObject_1 } from './isObjectLike-es.js';
 import { T as Typography } from './Typography-es.js';
 

package/dist/debounce-es.js

@@ -326,4 +326,4 @@ var debounce_1 = debounce;
 
 var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
 
-export { debounce_1 as a, debounce$1 as d };
+export { debounce$1 as a, debounce_1 as d };