@jobber/components 6.103.2-JOB-140609-8386817.45 → 6.103.2-JOB-141426-ee803fd.19

package/dist/InputNumber/index.cjs

@@ -2740,9 +2740,9 @@ const InputNumberRebuilt = React.forwardRef((props, ref) => {
             }
         },
     }));
-    const { align, description, disabled, error, inline, invalid, placeholder, readOnly, showMiniLabel = true, size, minValue, maxValue } = props, ariaNumberFieldProps = tslib_es6.__rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readOnly", "showMiniLabel", "size", "minValue", "maxValue"]);
+    const { align, description, disabled, error, inline, invalid, placeholder, readonly, showMiniLabel = true, size, minValue, maxValue } = props, ariaNumberFieldProps = tslib_es6.__rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readonly", "showMiniLabel", "size", "minValue", "maxValue"]);
     const stringDescription = typeof description === "string";
-    return (React.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, id: props.id, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onChange: handleChange }),
+    return (React.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, isDisabled: disabled, isInvalid: invalid, isReadOnly: readonly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onChange: handleChange }),
         React.createElement($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: classnames(styles.wrapper, align && styles[align], invalid && styles.invalid, disabled && styles.disabled) },
             React.createElement("div", { className: styles.horizontalWrapper },
                 React.createElement("div", { className: classnames(styles.inputWrapper, disabled && styles.disabled, !showMiniLabel && styles.hideLabel, size && styles[size]) },
@@ -2773,7 +2773,7 @@ function InputNumberInternal(props, ref) {
             }
         },
     }));
-    return (React.createElement(FormField.FormField, Object.assign({}, props, { type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
+    return (React.createElement(FormField.FormField, Object.assign({}, props, { clearable: "never", type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
     function customValidators(validators) {
         if (validators == null) {
             return getOverLimitMessage;

package/dist/InputNumber/index.mjs

@@ -2738,9 +2738,9 @@ const InputNumberRebuilt = forwardRef((props, ref) => {
             }
         },
     }));
-    const { align, description, disabled, error, inline, invalid, placeholder, readOnly, showMiniLabel = true, size, minValue, maxValue } = props, ariaNumberFieldProps = __rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readOnly", "showMiniLabel", "size", "minValue", "maxValue"]);
+    const { align, description, disabled, error, inline, invalid, placeholder, readonly, showMiniLabel = true, size, minValue, maxValue } = props, ariaNumberFieldProps = __rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readonly", "showMiniLabel", "size", "minValue", "maxValue"]);
     const stringDescription = typeof description === "string";
-    return (React__default.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, id: props.id, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onChange: handleChange }),
+    return (React__default.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, isDisabled: disabled, isInvalid: invalid, isReadOnly: readonly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onChange: handleChange }),
         React__default.createElement($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: classnames(styles.wrapper, align && styles[align], invalid && styles.invalid, disabled && styles.disabled) },
             React__default.createElement("div", { className: styles.horizontalWrapper },
                 React__default.createElement("div", { className: classnames(styles.inputWrapper, disabled && styles.disabled, !showMiniLabel && styles.hideLabel, size && styles[size]) },
@@ -2771,7 +2771,7 @@ function InputNumberInternal(props, ref) {
             }
         },
     }));
-    return (React__default.createElement(FormField, Object.assign({}, props, { type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
+    return (React__default.createElement(FormField, Object.assign({}, props, { clearable: "never", type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
     function customValidators(validators) {
         if (validators == null) {
             return getOverLimitMessage;

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, 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,21 +16,20 @@ export interface InputPhoneNumberLegacyProps extends Omit<CommonFormFieldProps,
      */
     readonly required?: boolean;
 }
-export interface InputPhoneNumberRebuiltProps extends Omit<HTMLInputBaseProps, "type" | "maxLength" | "minLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, RebuiltInputCommonProps {
-    /**
-     * The current value of the input.
-     */
+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;
     readonly value: string;
-    /**
-     * Custom onChange handler that provides the new value as the first argument.
-     */
     readonly onChange: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * A callback to handle "Enter" keypress. This will only run
-     * if Enter is the only key. Will not run if Shift or Control
-     * are being held.
-     */
+    readonly onBlur?: (event?: React.FocusEvent<HTMLInputElement>) => void;
     readonly onEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    readonly onFocus?: (event?: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * 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)
@@ -38,5 +37,20 @@ export interface InputPhoneNumberRebuiltProps extends Omit<HTMLInputBaseProps, "
      * @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

@@ -11,6 +11,6 @@ export declare function useInputPhoneActions({ onChange, inputRef, onFocus, onBl
     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;
 };

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

@@ -0,0 +1,71 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
+export interface useInputPhoneFormFieldProps {
+    /**
+     * The html id for the field
+     */
+    readonly id: string;
+    /**
+     * The auto-generated name for the html input field if a nameProp is not provided
+     */
+    readonly name: string;
+    /**
+     * The error message for the field
+     */
+    readonly error?: string;
+    /**
+     * Adjusts the form field to go inline with a content. This also silences the
+     * given `validations` prop. You'd have to used the `onValidate` prop to
+     * capture the message and render it somewhere else using the
+     * `InputValidation` component.
+     */
+    readonly inline?: boolean;
+    /**
+     * Further description of the input, can be used for a hint.
+     */
+    readonly description?: ReactNode;
+    /**
+     * Callback for when the field value changes
+     */
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback for when the field loses focus
+     */
+    handleBlur: () => void;
+    /**
+     * Callback for when the field gains focus
+     */
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback for when keydown event is triggered on the field
+     */
+    handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    readonly invalid?: boolean;
+    readonly disabled?: boolean;
+    readonly autofocus?: boolean;
+    readonly value?: string;
+    readonly readonly?: boolean;
+}
+export interface UseInputPhoneFormFieldReturn {
+    fieldProps: React.InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * 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.
+ */
+export declare function useInputPhoneFormField({ id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error, disabled, autofocus, value, readonly, ...rest }: useInputPhoneFormFieldProps): {
+    fieldProps: {
+        readOnly: boolean | undefined;
+        "aria-describedby"?: string | undefined;
+        id: string;
+        name: string;
+        disabled: boolean | undefined;
+        autoFocus: boolean | undefined;
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        onBlur: () => void;
+        onFocus: (event: FocusEvent<HTMLInputElement>) => void;
+        onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+        value: string | undefined;
+        invalid: string | undefined;
+    };
+    descriptionIdentifier: string;
+};

package/dist/InputPhoneNumber/index.cjs

@@ -115,6 +115,7 @@ const DEFAULT_PATTERN = "(***) ***-****";
 function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }) {
     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();
     }
@@ -148,22 +149,26 @@ function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown,
     };
 }
 
+/**
+ * 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({
-        size: props.size,
-        align: props.align,
-        placeholder: props.placeholder,
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        disabled: props.disabled,
-        inline: props.inline,
-        type: "tel",
-    });
+    const { inputStyle } = FormField.useFormFieldWrapperStyles(Object.assign(Object.assign({}, props), { type: "tel" }));
     const generatedId = React.useId();
     const id = props.id || generatedId;
     const { name } = FormField.useAtlantisFormFieldName({
@@ -183,13 +188,25 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
         onEnter: props.onEnter,
         inputRef: inputPhoneNumberRef,
     });
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const hasDescription = props.description && !props.inline;
-    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, {
+    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, {
                 [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
-            }), 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 }),
+            }), value: formattedValue })),
         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,6 +113,7 @@ const DEFAULT_PATTERN = "(***) ***-****";
 function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }) {
     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();
     }
@@ -146,22 +147,26 @@ function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown,
     };
 }
 
+/**
+ * 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({
-        size: props.size,
-        align: props.align,
-        placeholder: props.placeholder,
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        disabled: props.disabled,
-        inline: props.inline,
-        type: "tel",
-    });
+    const { inputStyle } = useFormFieldWrapperStyles(Object.assign(Object.assign({}, props), { type: "tel" }));
     const generatedId = useId();
     const id = props.id || generatedId;
     const { name } = useAtlantisFormFieldName({
@@ -181,13 +186,25 @@ const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a,
         onEnter: props.onEnter,
         inputRef: inputPhoneNumberRef,
     });
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const hasDescription = props.description && !props.inline;
-    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, {
+    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, {
                 [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
-            }), 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 }),
+            }), value: formattedValue })),
         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.types.d.ts

@@ -1,6 +1,6 @@
+import type { Clearable } from "@jobber/hooks";
 import type { XOR } from "ts-xor";
-import type { CommonFormFieldProps, FormFieldProps, FormFieldTypes } from "../FormField";
-import type { FocusEvents, HTMLInputBaseProps, InputLengthConstraint, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
+import type { AutocompleteTypes, CommonFormFieldProps, FormFieldProps, FormFieldTypes } from "../FormField";
 export interface RowRange {
     min: number;
     max: number;
@@ -10,7 +10,15 @@ 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, InputLengthConstraint {
+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;
     /**
      * Use this when you're expecting a long answer.
      */
@@ -22,32 +30,24 @@ export interface InputTextRebuiltProps extends HTMLInputBaseProps, FocusEvents<H
      * maximum number of visible rows.
      */
     readonly rows?: number | RowRange;
-    /**
-     * Determines what kind of form field should the component give you.
-     */
     readonly type?: FormFieldTypes;
     /**
-     * Toolbar to render content below the input.
-     */
-    readonly toolbar?: React.ReactNode;
-    /**
-     * Determines the visibility of the toolbar.
-     */
-    readonly toolbarVisibility?: "always" | "while-editing";
-    /**
-     * The current value of the input.
-     */
-    readonly value: string;
-    /**
-     * Custom onChange handler that provides the new value as the first argument.
+     * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
      */
+    readonly version: 2;
     readonly onChange?: (newValue: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    /**
-     * A callback to handle "Enter" keypress. This will only run
-     * if Enter is the only key. Will not run if Shift or Control
-     * are being held.
-     */
     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"];
+    readonly toolbarVisibility?: FormFieldProps["toolbarVisibility"];
+    readonly prefix?: FormFieldProps["prefix"];
+    readonly suffix?: FormFieldProps["suffix"];
+    readonly description?: FormFieldProps["description"];
 }
 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,11 +4,12 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks');
 var FormField = require('../FormField-cjs.js');
 require('classnames');
-require('../tslib.es6-cjs.js');
+var tslib_es6 = 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');
 require('../Icon-cjs.js');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
@@ -16,6 +17,17 @@ 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.
@@ -150,6 +162,7 @@ function insertAtCursor(input, newText) {
 function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     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();
     }
@@ -183,10 +196,23 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onK
     };
 }
 
+/**
+ * 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) {
     var _a, _b, _c;
     const inputTextRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
+    const legacyPropHelper = Object.assign(Object.assign({}, props), { version: 1 });
     const id = useInputTextId(props);
     const { rowRange } = useTextAreaResize({
         rows: props.rows,
@@ -194,18 +220,8 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
         inputRef: inputTextRef,
         wrapperRef: wrapperRef,
     });
-    const { inputStyle } = FormField.useFormFieldWrapperStyles({
-        size: props.size,
-        align: props.align,
-        placeholder: props.placeholder,
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        maxLength: props.maxLength,
-        type: props.multiline ? "textarea" : "text",
-        disabled: props.disabled,
-        inline: props.inline,
-    });
+    const type = props.multiline ? "textarea" : "text";
+    const { inputStyle } = FormField.useFormFieldWrapperStyles(legacyPropHelper);
     const { name } = FormField.useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
@@ -218,43 +234,27 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
         onEnter: props.onEnter,
         inputRef: inputTextRef,
     });
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.error || props.invalid);
-    // Shared props for both TextArea and TextInput
-    const commonInputProps = {
-        id,
+    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,
-        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 },
+        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 },
         React.createElement(React.Fragment, null,
-            props.multiline ? (React.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),
+            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)));
 });
@@ -262,12 +262,12 @@ function useInputTextId(props) {
     const generatedId = React.useId();
     return props.id || generatedId;
 }
-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 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 })));
+}
 
 function isNewInputTextProps(props) {
     return props.version === 2;