@jobber/components 6.101.4 → 6.101.5-JOB-140604-4487daa.55

package/dist/InputPhoneNumber/InputPhoneNumber.types.d.ts

@@ -1,6 +1,6 @@
-import type { Clearable } from "@jobber/hooks";
 import type { InputMaskProps } from "./InputMask";
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
+import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
 export interface InputPhoneNumberLegacyProps extends Omit<CommonFormFieldProps, "align">, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "validations" | "readonly" | "prefix" | "suffix"> {
     readonly value: string;
     readonly onChange: (value: string) => void;
@@ -16,20 +16,19 @@ export interface InputPhoneNumberLegacyProps extends Omit<CommonFormFieldProps,
      */
     readonly required?: boolean;
 }
-export interface InputPhoneNumberRebuiltProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "onBlur" | "size" | "suffix" | "prefix" | "value" | "max" | "min" | "defaultValue" | "readOnly" | "type" | "maxLength" | "minLength"> {
-    readonly error?: string;
-    readonly invalid?: boolean;
-    readonly identifier?: string;
-    readonly autocomplete?: boolean | string;
-    readonly loading?: boolean;
-    readonly onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    readonly children?: React.ReactNode;
-    readonly clearable?: Clearable;
+export interface InputPhoneNumberRebuiltProps extends Omit<HTMLInputBaseProps, "type" | "maxLength" | "minLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, RebuiltInputCommonProps {
+    /**
+     * The current value of the input.
+     */
     readonly value: string;
+    /**
+     * Custom onChange handler that provides the new value as the first argument.
+     */
     readonly onChange: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
-    readonly onBlur?: (event?: React.FocusEvent<HTMLInputElement>) => void;
-    readonly onEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    readonly onFocus?: (event?: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * @deprecated Use `onKeyDown` or `onKeyUp` instead.
+     */
+    readonly onEnter?: FormFieldProps["onEnter"];
     /**
      * A pattern to specify the format to display the phone number in.
      * For example if you want to display the format for [Denmark](https://en.wikipedia.org/wiki/National_conventions_for_writing_telephone_numbers#Denmark)
@@ -37,20 +36,5 @@ export interface InputPhoneNumberRebuiltProps extends Omit<React.InputHTMLAttrib
      * @default "(***) ***-****"
      */
     readonly pattern?: InputMaskProps["pattern"];
-    /**
-     * Shows a "required" validation message when the component is left empty.
-     */
-    readonly required?: boolean;
-    /**
-     * Version 2 is highly experimental, avoid using it unless you have talked with Atlantis first.
-     */
-    readonly version: 2;
-    readonly size?: FormFieldProps["size"];
-    readonly inline?: FormFieldProps["inline"];
-    readonly align?: FormFieldProps["align"];
-    readonly prefix?: FormFieldProps["prefix"];
-    readonly suffix?: FormFieldProps["suffix"];
-    readonly description?: FormFieldProps["description"];
-    readonly readonly?: boolean;
 }
 export declare const DEFAULT_PATTERN = "(***) ***-****";

package/dist/InputPhoneNumber/hooks/useInputPhoneActions.d.ts

@@ -1,16 +1,21 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
 import type { InputPhoneNumberRebuiltProps } from "../InputPhoneNumber.types";
-export interface useInputPhoneActionsProps extends Pick<InputPhoneNumberRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown"> {
+export interface useInputPhoneActionsProps extends Pick<InputPhoneNumberRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp"> {
     inputRef?: React.RefObject<HTMLInputElement>;
 }
 /**
  * Combines the actions on the InputPhoneNumber such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputPhoneNumber.
  * Do not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
  */
-export declare function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }: useInputPhoneActionsProps): {
+export declare function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }: useInputPhoneActionsProps): {
     handleClear: () => void;
     handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
     handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    handleBlur: (event?: FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    handleClick: (event: MouseEvent<HTMLInputElement>) => void;
+    handleMouseDown: (event: MouseEvent<HTMLInputElement>) => void;
+    handleMouseUp: (event: MouseEvent<HTMLInputElement>) => void;
+    handlePointerDown: (event: PointerEvent<HTMLInputElement>) => void;
+    handlePointerUp: (event: PointerEvent<HTMLInputElement>) => void;
 };

package/dist/InputPhoneNumber/index.cjs

@@ -7,6 +7,7 @@ var FormField = require('../FormField-cjs.js');
 var reactHookForm = require('react-hook-form');
 require('../Button-cjs.js');
 require('@jobber/design');
+var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('../Icon-cjs.js');
@@ -112,10 +113,9 @@ const DEFAULT_PATTERN = "(***) ***-****";
  * Combines the actions on the InputPhoneNumber such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputPhoneNumber.
  * Do not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
  */
-function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }) {
+function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
     function handleClear() {
         var _a;
-        handleBlur();
         onChange && onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -140,35 +140,40 @@ function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown,
     function handleBlur(event) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+    function handleMouseDown(event) {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+    }
+    function handleMouseUp(event) {
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
+    }
+    function handlePointerDown(event) {
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+    }
+    function handlePointerUp(event) {
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+    }
     return {
         handleClear,
         handleChange,
         handleFocus,
         handleBlur,
         handleKeyDown,
+        handleClick,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
     };
 }
 
-/**
- * Provides the props for the html fields rendered by the html input.
- *  DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
- */
-function useInputPhoneFormField(_a) {
-    var { id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error, disabled, autofocus, value, readonly } = _a, rest = tslib_es6.__rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error", "disabled", "autofocus", "value", "readonly"]);
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { id,
-        name,
-        disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, value, invalid: error || rest.invalid ? "true" : undefined }), (description &&
-        !inline && { "aria-describedby": descriptionIdentifier })), { readOnly: readonly });
-    return { fieldProps, descriptionIdentifier };
-}
-
 const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberInternal(_a, ref) {
     var _b, _c, _d, _e;
     var { pattern = DEFAULT_PATTERN } = _a, props = tslib_es6.__rest(_a, ["pattern"]);
     const inputPhoneNumberRef = (_b = ref) !== null && _b !== void 0 ? _b : React.useRef(null);
     const wrapperRef = React.useRef(null);
-    const { inputStyle } = FormField.useFormFieldWrapperStyles(Object.assign(Object.assign({}, props), { type: "tel" }));
     const generatedId = React.useId();
     const id = props.id || generatedId;
     const { name } = FormField.useAtlantisFormFieldName({
@@ -181,32 +186,28 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
         strict: false,
         onChange: props.onChange,
     });
-    const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, } = useInputPhoneActions({
+    const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputPhoneActions({
         onChange: maskedOnChange,
         onBlur: props.onBlur,
         onFocus: props.onFocus,
         onEnter: props.onEnter,
+        onKeyDown: props.onKeyDown,
+        onClick: props.onClick,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onPointerDown: props.onPointerDown,
+        onPointerUp: props.onPointerUp,
         inputRef: inputPhoneNumberRef,
     });
-    const { fieldProps, descriptionIdentifier } = useInputPhoneFormField({
-        id,
-        name,
-        handleChange,
-        handleBlur,
-        handleFocus,
-        handleKeyDown,
-        autofocus: props.autoFocus,
-        disabled: props.disabled,
-        readonly: props.readonly,
-        invalid: props.invalid,
-        error: props.error,
-        description: props.description,
-        inline: props.inline,
-    });
-    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", Object.assign({ type: "tel" }, fieldProps, { ref: inputPhoneNumberRef, className: classnames(inputStyle, {
+    const descriptionIdentifier = `descriptionUUID--${id}`, descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    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", Object.assign({ id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(FormField.formFieldStyles.input, {
                 [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
-            }), value: formattedValue })),
+            }), 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["aria-label"], "aria-describedby": descriptionVisible
+                ? descriptionIdentifier
+                : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp }, dataAttrs)),
         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

@@ -1,10 +1,11 @@
 import React__default, { useState, useMemo, useCallback, useEffect, cloneElement, forwardRef, useId } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
 import classnames from 'classnames';
-import { j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, k as FormField } from '../FormField-es.js';
+import { b as useAtlantisFormFieldName, f as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix, k as FormField } from '../FormField-es.js';
 import { useFormContext, useForm } from 'react-hook-form';
 import '../Button-es.js';
 import '@jobber/design';
+import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '../Icon-es.js';
@@ -110,10 +111,9 @@ const DEFAULT_PATTERN = "(***) ***-****";
  * Combines the actions on the InputPhoneNumber such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputPhoneNumber.
  * Do not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
  */
-function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }) {
+function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
     function handleClear() {
         var _a;
-        handleBlur();
         onChange && onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -138,35 +138,40 @@ function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown,
     function handleBlur(event) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+    function handleMouseDown(event) {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+    }
+    function handleMouseUp(event) {
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
+    }
+    function handlePointerDown(event) {
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+    }
+    function handlePointerUp(event) {
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+    }
     return {
         handleClear,
         handleChange,
         handleFocus,
         handleBlur,
         handleKeyDown,
+        handleClick,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
     };
 }
 
-/**
- * Provides the props for the html fields rendered by the html input.
- *  DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
- */
-function useInputPhoneFormField(_a) {
-    var { id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error, disabled, autofocus, value, readonly } = _a, rest = __rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error", "disabled", "autofocus", "value", "readonly"]);
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { id,
-        name,
-        disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, value, invalid: error || rest.invalid ? "true" : undefined }), (description &&
-        !inline && { "aria-describedby": descriptionIdentifier })), { readOnly: readonly });
-    return { fieldProps, descriptionIdentifier };
-}
-
 const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a, ref) {
     var _b, _c, _d, _e;
     var { pattern = DEFAULT_PATTERN } = _a, props = __rest(_a, ["pattern"]);
     const inputPhoneNumberRef = (_b = ref) !== null && _b !== void 0 ? _b : React__default.useRef(null);
     const wrapperRef = React__default.useRef(null);
-    const { inputStyle } = useFormFieldWrapperStyles(Object.assign(Object.assign({}, props), { type: "tel" }));
     const generatedId = useId();
     const id = props.id || generatedId;
     const { name } = useAtlantisFormFieldName({
@@ -179,32 +184,28 @@ const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a,
         strict: false,
         onChange: props.onChange,
     });
-    const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, } = useInputPhoneActions({
+    const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputPhoneActions({
         onChange: maskedOnChange,
         onBlur: props.onBlur,
         onFocus: props.onFocus,
         onEnter: props.onEnter,
+        onKeyDown: props.onKeyDown,
+        onClick: props.onClick,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onPointerDown: props.onPointerDown,
+        onPointerUp: props.onPointerUp,
         inputRef: inputPhoneNumberRef,
     });
-    const { fieldProps, descriptionIdentifier } = useInputPhoneFormField({
-        id,
-        name,
-        handleChange,
-        handleBlur,
-        handleFocus,
-        handleKeyDown,
-        autofocus: props.autoFocus,
-        disabled: props.disabled,
-        readonly: props.readonly,
-        invalid: props.invalid,
-        error: props.error,
-        description: props.description,
-        inline: props.inline,
-    });
-    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", Object.assign({ type: "tel" }, fieldProps, { ref: inputPhoneNumberRef, className: classnames(inputStyle, {
+    const descriptionIdentifier = `descriptionUUID--${id}`, descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    const dataAttrs = filterDataAttributes(props);
+    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", Object.assign({ id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(formFieldStyles.input, {
                 [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
-            }), value: formattedValue })),
+            }), 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["aria-label"], "aria-describedby": descriptionVisible
+                ? descriptionIdentifier
+                : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp }, dataAttrs)),
         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

@@ -26,7 +26,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly prefix?: import("../FormField").Affix | undefined;
     readonly autofocus?: boolean | undefined;
     readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
     readonly maxLength?: number | undefined;
     readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
@@ -60,7 +60,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly prefix?: import("../FormField").Affix | undefined;
     readonly autofocus?: boolean | undefined;
     readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
     readonly maxLength?: number | undefined;
     readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;

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

@@ -1,24 +1,27 @@
-import type { Clearable } from "@jobber/hooks";
 import type { XOR } from "ts-xor";
-import type { AutocompleteTypes, CommonFormFieldProps, FormFieldProps, FormFieldTypes } from "../FormField";
+import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
+import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
 export interface RowRange {
     min: number;
     max: number;
 }
+/**
+ * Character length constraint for inputs.
+ * Only extend this for text-based inputs where character limits make sense.
+ */
+interface InputLengthConstraint {
+    /**
+     * The maximum number of characters supported by the input.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength}
+     */
+    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 Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "onChange" | "onBlur" | "maxLength" | "rows" | "size" | "suffix" | "prefix" | "value" | "max" | "min" | "defaultValue"> {
-    readonly error?: string;
-    readonly invalid?: boolean;
-    readonly identifier?: string;
-    readonly autocomplete?: boolean | AutocompleteTypes;
-    readonly loading?: boolean;
-    readonly onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    readonly children?: React.ReactNode;
-    readonly clearable?: Clearable;
+export interface InputTextRebuiltProps extends HTMLInputBaseProps, MouseEvents<HTMLInputElement | HTMLTextAreaElement>, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, RebuiltInputCommonProps, InputLengthConstraint {
     /**
      * Use this when you're expecting a long answer.
      */
@@ -30,24 +33,26 @@ export interface InputTextRebuiltProps extends Omit<React.InputHTMLAttributes<HT
      * maximum number of visible rows.
      */
     readonly rows?: number | RowRange;
-    readonly type?: FormFieldTypes;
     /**
-     * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
+     * Toolbar to render content below the input.
      */
-    readonly version: 2;
-    readonly onChange?: (newValue: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    readonly onEnter?: FormFieldProps["onEnter"];
-    readonly onBlur?: FormFieldProps["onBlur"];
-    readonly value: string;
-    readonly maxLength?: number;
-    readonly size?: FormFieldProps["size"];
-    readonly inline?: FormFieldProps["inline"];
-    readonly align?: FormFieldProps["align"];
     readonly toolbar?: FormFieldProps["toolbar"];
+    /**
+     * Determines the visibility of the toolbar.
+     */
     readonly toolbarVisibility?: FormFieldProps["toolbarVisibility"];
-    readonly prefix?: FormFieldProps["prefix"];
-    readonly suffix?: FormFieldProps["suffix"];
-    readonly description?: FormFieldProps["description"];
+    /**
+     * The current value of the input.
+     */
+    readonly value: string;
+    /**
+     * Custom onChange handler that provides the new value as the first argument.
+     */
+    readonly onChange?: (newValue: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * @deprecated Use `onKeyDown` or `onKeyUp` instead.
+     */
+    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;

package/dist/InputText/index.cjs

@@ -4,12 +4,12 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks');
 var FormField = require('../FormField-cjs.js');
 require('classnames');
-var tslib_es6 = require('../tslib.es6-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
-var omit = require('../omit-cjs.js');
+var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 require('../Icon-cjs.js');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
@@ -17,17 +17,6 @@ require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('react-router-dom');
-require('../_commonjsHelpers-cjs.js');
-require('../_baseGet-cjs.js');
-require('../isTypedArray-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../identity-cjs.js');
-require('../_getTag-cjs.js');
-require('../isSymbol-cjs.js');
-require('../keysIn-cjs.js');
-require('../_baseAssignValue-cjs.js');
-require('../_baseFlatten-cjs.js');
-require('../_setToString-cjs.js');
 
 /**
  * Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.
@@ -159,10 +148,9 @@ function insertAtCursor(input, newText) {
  * Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
  * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
  */
-function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
+function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onPointerDown, onPointerUp, onClick, }) {
     function handleClear() {
         var _a;
-        handleBlur();
         onChange && onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -181,38 +169,48 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onK
         event.preventDefault();
         onEnter && onEnter(event);
     }
+    function handleKeyUp(event) {
+        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
+    }
     function handleFocus(event) {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     }
     function handleBlur(event) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
+    function handleMouseDown(event) {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+    }
+    function handleMouseUp(event) {
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
+    }
+    function handlePointerDown(event) {
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+    }
+    function handlePointerUp(event) {
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+    }
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
     return {
         handleClear,
         handleChange,
         handleKeyDown,
+        handleKeyUp,
         handleFocus,
         handleBlur,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
+        handleClick,
     };
 }
 
-/**
- * Provides the props for the html fields rendered by the html input.
- *  DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
- */
-function useInputTextFormField(_a) {
-    var { id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = tslib_es6.__rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { id, className: FormField.styles.input, name, disabled: rest.disabled, inputMode: rest.inputMode, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), (description &&
-        !inline && { "aria-describedby": descriptionIdentifier })), { "aria-invalid": rest["aria-invalid"] || error || rest.invalid ? true : undefined, autoFocus: rest.autoFocus, invalid: error || rest.invalid ? "true" : undefined, onKeyDown: handleKeyDown });
-    return { fieldProps, descriptionIdentifier };
-}
-
-const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRefs) {
+const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRef) {
     var _a, _b, _c;
-    const inputTextRef = React.useRef(null);
-    const wrapperRef = React.useRef(null);
-    const legacyPropHelper = Object.assign(Object.assign({}, props), { version: 1 });
+    const inputTextRef = React.useRef(null), wrapperRef = React.useRef(null);
     const id = useInputTextId(props);
     const { rowRange } = useTextAreaResize({
         rows: props.rows,
@@ -220,54 +218,48 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
         inputRef: inputTextRef,
         wrapperRef: wrapperRef,
     });
-    const type = props.multiline ? "textarea" : "text";
-    const { inputStyle } = FormField.useFormFieldWrapperStyles(legacyPropHelper);
     const { name } = FormField.useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
     });
-    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } = useInputTextActions({
+    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, handleClick, } = useInputTextActions({
         onChange: props.onChange,
         onBlur: props.onBlur,
         onFocus: props.onFocus,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onPointerDown: props.onPointerDown,
+        onPointerUp: props.onPointerUp,
+        onClick: props.onClick,
         onKeyDown: props.onKeyDown,
+        onKeyUp: props.onKeyUp,
         onEnter: props.onEnter,
         inputRef: inputTextRef,
     });
-    const inputProps = omit.omit(props, [
-        "onChange",
-        "onBlur",
-        "onFocus",
-        "onEnter",
-        "size",
-        "placeholder",
-        "multiline",
-        "prefix",
-        "suffix",
-        "version",
-    ]);
-    const { fieldProps, descriptionIdentifier } = useInputTextFormField(Object.assign(Object.assign({}, inputProps), { id,
-        name,
-        handleChange,
-        handleBlur,
-        handleFocus,
-        handleKeyDown }));
-    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 descriptionIdentifier = `descriptionUUID--${id}`;
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    // Shared props for both TextArea and TextInput
+    const commonInputProps = Object.assign({ id,
+        name, className: FormField.formFieldStyles.input, 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["aria-label"], "aria-describedby": descriptionVisible
+            ? descriptionIdentifier
+            : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onClick: handleClick, ref: FormField.mergeRefs([inputRef, inputTextRef]) }, dataAttrs);
+    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, 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, readonly: props.readOnly, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
         React.createElement(React.Fragment, null,
-            type === "textarea" ? (React.createElement(TextArea, { fieldProps: fieldProps, rowRange: rowRange, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })) : (React.createElement(TextInput, { fieldProps: fieldProps, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })),
-            React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
-            props.children)));
+            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 }))));
 });
 function useInputTextId(props) {
     const generatedId = React.useId();
     return props.id || generatedId;
 }
-function TextArea({ fieldProps, rowRange, inputRefs, value, inputStyle, }) {
-    return (React.createElement("textarea", Object.assign({}, fieldProps, { rows: rowRange.min, ref: FormField.mergeRefs(inputRefs), className: inputStyle, value: value })));
-}
-function TextInput({ fieldProps, inputRefs, value, inputStyle, }) {
-    return (React.createElement("input", Object.assign({}, fieldProps, { ref: FormField.mergeRefs(inputRefs), className: inputStyle, value: value })));
-}
+const TextArea = React.forwardRef(function TextArea(props, ref) {
+    return React.createElement("textarea", Object.assign({}, props, { ref: ref }));
+});
+const TextInput = React.forwardRef(function TextInput(props, ref) {
+    return React.createElement("input", Object.assign({}, props, { ref: ref }));
+});
 
 function isNewInputTextProps(props) {
     return props.version === 2;