@jobber/components 6.101.5-JOB-140604-4c8f8f2.41 → 6.101.5-JOB-140604-4487daa.55

package/dist/InputDate/useInputDateActivatorActions.d.ts

@@ -1,16 +1,12 @@
-import type { ChangeEvent, FocusEvent } from "react";
+import type { ChangeEvent } from "react";
 import type { InputDateRebuiltProps } from "./InputDate.types";
 import type { DatePickerActivatorProps } from "../DatePicker/DatePickerActivator";
 export interface useInputDateActivatorActionsProps extends Pick<InputDateRebuiltProps, "onFocus" | "onBlur"> {
     onChange: DatePickerActivatorProps["onChange"];
 }
-/**
- * Combines the actions on the InputDate such as onChange, onFocus, onBlur to forward event handler passed to the InputDate component to the DatePicker component.
- * 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 useInputDateActivatorActions({ onChange, onBlur, onFocus, }: useInputDateActivatorActionsProps): {
-    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
-    handleChange: (_: unknown, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleChange: (_newValue: string, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleFocus: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     isFocused: boolean;
 };

package/dist/InputEmail/InputEmail.types.d.ts

@@ -1,5 +1,5 @@
-import type { Clearable } from "@jobber/hooks";
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
+import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
 export type InputEmailLegacyProps = CommonFormFieldProps & Pick<FormFieldProps, "maxLength" | "readonly" | "validations" | "defaultValue">;
 export declare const validationMessage = "Please enter a valid email";
 export type InputEmailVersion = 1 | 2 | undefined;
@@ -7,27 +7,17 @@ export type InputEmailVersion = 1 | 2 | undefined;
  * Experimental version 2 of the InputEmail component.
  * Do not use unless you have talked with Atlantis first.
  */
-export interface InputEmailRebuiltProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "onBlur" | "size" | "suffix" | "prefix" | "value" | "max" | "min" | "defaultValue"> {
-    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 InputEmailRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, RebuiltInputCommonProps {
     /**
-     * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
+     * The current value of the input.
+     */
+    readonly value?: string;
+    /**
+     * Custom onChange handler that provides the new value as the first argument.
      */
-    readonly version: 2;
     readonly onChange?: (newValue: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * @deprecated Use `onKeyDown` or `onKeyUp` instead.
+     */
     readonly onEnter?: FormFieldProps["onEnter"];
-    readonly onBlur?: FormFieldProps["onBlur"];
-    readonly value?: string;
-    readonly size?: FormFieldProps["size"];
-    readonly inline?: FormFieldProps["inline"];
-    readonly align?: FormFieldProps["align"];
-    readonly prefix?: FormFieldProps["prefix"];
-    readonly suffix?: FormFieldProps["suffix"];
-    readonly description?: FormFieldProps["description"];
 }

package/dist/InputEmail/hooks/useInputEmailActions.d.ts

@@ -1,12 +1,18 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
 import type { InputEmailRebuiltProps } from "../InputEmail.types";
-export interface UseInputEmailActionsProps extends Pick<InputEmailRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown"> {
+export interface UseInputEmailActionsProps extends Pick<InputEmailRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp"> {
     inputRef?: React.RefObject<HTMLInputElement>;
 }
-export declare function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }: UseInputEmailActionsProps): {
+export declare function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }: UseInputEmailActionsProps): {
     handleClear: () => void;
     handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    handleKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
     handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    handleBlur: (event?: FocusEvent) => void;
+    handleBlur: (event: FocusEvent<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/InputEmail/index.cjs

@@ -3,13 +3,13 @@
 var React = require('react');
 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('@jobber/hooks');
 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');
 
 const validationMessage = "Please enter a valid email";
 
@@ -46,10 +35,9 @@ function InputEmail$1(props) {
     }
 }
 
-function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
+function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
     function handleClear() {
         var _a;
-        handleBlur();
         onChange === null || onChange === void 0 ? void 0 : onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -74,75 +62,70 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
     function handleBlur(event) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
+    function handleKeyUp(event) {
+        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(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,
         handleKeyDown,
+        handleKeyUp,
         handleFocus,
         handleBlur,
+        handleClick,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
     };
 }
 
-function useInputEmailFormField(_a) {
-    var { id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = tslib_es6.__rest(_a, ["id", "name", "disabled", "autofocus", "description", "inline", "value", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = 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 }));
-    return { fieldProps, descriptionIdentifier };
-}
-
 const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, ref) {
     var _a, _b, _c;
-    const id = React.useId();
+    const generatedId = React.useId();
+    const id = props.id || generatedId;
     const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : React.useRef(null);
     const wrapperRef = React.useRef(null);
-    const { inputStyle } = FormField.useFormFieldWrapperStyles({
-        size: props.size,
-        inline: props.inline,
-        align: props.align,
-        type: "email",
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        maxLength: props.maxLength,
-        disabled: props.disabled,
-        placeholder: props.placeholder,
-    });
     const { name } = FormField.useAtlantisFormFieldName({
         nameProp: props.name,
         id,
     });
-    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } = useInputEmailActions({
+    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputEmailActions({
         onChange: props.onChange,
         onBlur: props.onBlur,
         onFocus: props.onFocus,
         onKeyDown: props.onKeyDown,
+        onKeyUp: props.onKeyUp,
         onEnter: props.onEnter,
+        onClick: props.onClick,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onPointerDown: props.onPointerDown,
+        onPointerUp: props.onPointerUp,
         inputRef,
     });
-    const inputProps = omit.omit(props, [
-        "placeholder",
-        "onChange",
-        "onBlur",
-        "onFocus",
-        "onEnter",
-        "size",
-        "prefix",
-        "suffix",
-        "version",
-    ]);
-    const { fieldProps, descriptionIdentifier } = useInputEmailFormField(Object.assign(Object.assign({}, inputProps), { id,
-        name,
-        handleChange,
-        handleBlur,
-        handleFocus,
-        handleKeyDown }));
-    return (React.createElement(FormField.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: props.identifier || id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, autofocus: props.autoFocus, name: name },
-        React.createElement("input", Object.assign({}, fieldProps, { ref: inputRef, type: "email", className: inputStyle, value: props.value, "data-testid": "ATL-InputEmail-input" })),
-        React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
-        props.children));
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    return (React.createElement(FormField.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
+        React.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: FormField.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, 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, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
+        React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
 });
 
 function isNewInputEmailProps(props) {

package/dist/InputEmail/index.mjs

@@ -1,13 +1,13 @@
 import React__default, { forwardRef, useId, useRef } from 'react';
-import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix } from '../FormField-es.js';
+import { k as FormField, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix } from '../FormField-es.js';
 import 'classnames';
-import { _ as __rest } from '../tslib.es6-es.js';
+import '../tslib.es6-es.js';
 import 'react-hook-form';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
-import { o as omit } from '../omit-es.js';
+import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import '../Icon-es.js';
 import '../Text-es.js';
 import '../Typography-es.js';
@@ -15,17 +15,6 @@ import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import 'react-router-dom';
-import '../_commonjsHelpers-es.js';
-import '../_baseGet-es.js';
-import '../isTypedArray-es.js';
-import '../isObjectLike-es.js';
-import '../identity-es.js';
-import '../_getTag-es.js';
-import '../isSymbol-es.js';
-import '../keysIn-es.js';
-import '../_baseAssignValue-es.js';
-import '../_baseFlatten-es.js';
-import '../_setToString-es.js';
 
 const validationMessage = "Please enter a valid email";
 
@@ -44,10 +33,9 @@ function InputEmail$1(props) {
     }
 }
 
-function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
+function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
     function handleClear() {
         var _a;
-        handleBlur();
         onChange === null || onChange === void 0 ? void 0 : onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -72,75 +60,70 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
     function handleBlur(event) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
+    function handleKeyUp(event) {
+        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(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,
         handleKeyDown,
+        handleKeyUp,
         handleFocus,
         handleBlur,
+        handleClick,
+        handleMouseDown,
+        handleMouseUp,
+        handlePointerDown,
+        handlePointerUp,
     };
 }
 
-function useInputEmailFormField(_a) {
-    var { id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = __rest(_a, ["id", "name", "disabled", "autofocus", "description", "inline", "value", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = 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 }));
-    return { fieldProps, descriptionIdentifier };
-}
-
 const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
     var _a, _b, _c;
-    const id = useId();
+    const generatedId = useId();
+    const id = props.id || generatedId;
     const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : useRef(null);
     const wrapperRef = useRef(null);
-    const { inputStyle } = useFormFieldWrapperStyles({
-        size: props.size,
-        inline: props.inline,
-        align: props.align,
-        type: "email",
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        maxLength: props.maxLength,
-        disabled: props.disabled,
-        placeholder: props.placeholder,
-    });
     const { name } = useAtlantisFormFieldName({
         nameProp: props.name,
         id,
     });
-    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } = useInputEmailActions({
+    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputEmailActions({
         onChange: props.onChange,
         onBlur: props.onBlur,
         onFocus: props.onFocus,
         onKeyDown: props.onKeyDown,
+        onKeyUp: props.onKeyUp,
         onEnter: props.onEnter,
+        onClick: props.onClick,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onPointerDown: props.onPointerDown,
+        onPointerUp: props.onPointerUp,
         inputRef,
     });
-    const inputProps = omit(props, [
-        "placeholder",
-        "onChange",
-        "onBlur",
-        "onFocus",
-        "onEnter",
-        "size",
-        "prefix",
-        "suffix",
-        "version",
-    ]);
-    const { fieldProps, descriptionIdentifier } = useInputEmailFormField(Object.assign(Object.assign({}, inputProps), { id,
-        name,
-        handleChange,
-        handleBlur,
-        handleFocus,
-        handleKeyDown }));
-    return (React__default.createElement(FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: props.identifier || id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, autofocus: props.autoFocus, name: name },
-        React__default.createElement("input", Object.assign({}, fieldProps, { ref: inputRef, type: "email", className: inputStyle, value: props.value, "data-testid": "ATL-InputEmail-input" })),
-        React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
-        props.children));
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    const dataAttrs = filterDataAttributes(props);
+    return (React__default.createElement(FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
+        React__default.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, 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, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
+        React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
 });
 
 function isNewInputEmailProps(props) {

package/dist/InputFile-cjs.js

@@ -1649,8 +1649,11 @@ function InputFile({ variation = "dropzone", size = "base", name, buttonLabel: p
             try {
                 params = yield getUploadParams(file);
             }
-            catch (_a) {
-                onUploadError && onUploadError(new Error("Failed to get upload params"));
+            catch (error) {
+                onUploadError &&
+                    onUploadError(error instanceof Error
+                        ? error
+                        : new Error("Failed to get upload params"));
                 return;
             }
             const { url, key = generateId(), fields = {}, httpMethod = "POST", } = params;

package/dist/InputFile-es.js

@@ -1647,8 +1647,11 @@ function InputFile({ variation = "dropzone", size = "base", name, buttonLabel: p
             try {
                 params = yield getUploadParams(file);
             }
-            catch (_a) {
-                onUploadError && onUploadError(new Error("Failed to get upload params"));
+            catch (error) {
+                onUploadError &&
+                    onUploadError(error instanceof Error
+                        ? error
+                        : new Error("Failed to get upload params"));
                 return;
             }
             const { url, key = generateId(), fields = {}, httpMethod = "POST", } = params;

package/dist/InputGroup-cjs.js

@@ -11,10 +11,13 @@ function InputGroup({ children, flowDirection = "vertical", }) {
     const className = classnames(styles.inputGroup, styles[flowDirection]);
     return React.createElement("div", { className: className }, children);
 }
+function isInputGroupElement(node) {
+    return React.isValidElement(node) && node.type === InputGroup;
+}
 function isInvalidGroupNesting(childs) {
     return React.Children.toArray(childs).some(child => {
-        if (child.type === InputGroup &&
-            child.props.flowDirection != "horizontal") {
+        if (isInputGroupElement(child) &&
+            child.props.flowDirection !== "horizontal") {
             console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);
             return true;
         }

package/dist/InputGroup-es.js

@@ -9,10 +9,13 @@ function InputGroup({ children, flowDirection = "vertical", }) {
     const className = classnames(styles.inputGroup, styles[flowDirection]);
     return React__default.createElement("div", { className: className }, children);
 }
+function isInputGroupElement(node) {
+    return React__default.isValidElement(node) && node.type === InputGroup;
+}
 function isInvalidGroupNesting(childs) {
     return React__default.Children.toArray(childs).some(child => {
-        if (child.type === InputGroup &&
-            child.props.flowDirection != "horizontal") {
+        if (isInputGroupElement(child) &&
+            child.props.flowDirection !== "horizontal") {
             console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);
             return true;
         }

package/dist/InputNumber/InputNumber.rebuilt.types.d.ts

@@ -1,27 +1,19 @@
-import type { ReactNode } from "react";
 import type React from "react";
-import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
+import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
 export type InputNumberVersion = 1 | 2 | undefined;
-export interface InputNumberRebuiltProps extends Omit<CommonFormFieldProps, "version">, Pick<FormFieldProps, "onFocus" | "onBlur" | "inputRef" | "readonly" | "size"> {
-    readonly align?: "center" | "right";
-    readonly autocomplete?: boolean;
-    readonly autoFocus?: boolean;
+export interface InputNumberRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "clearable" | "suffix" | "prefix"> {
     readonly defaultValue?: number;
-    readonly description?: ReactNode;
-    readonly error?: string;
     readonly formatOptions?: Intl.NumberFormatOptions;
-    readonly identifier?: string;
-    readonly inline?: boolean;
-    readonly invalid?: boolean;
     readonly maxValue?: number;
     readonly minValue?: number;
+    /**
+     * Callback for value changes.
+     * @param newValue - The new numeric value
+     * @param event - Optional change event
+     */
     readonly onChange?: (newValue: number, event?: React.ChangeEvent<HTMLInputElement>) => void;
     readonly showMiniLabel?: boolean;
     readonly value?: number;
-    /**
-     * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
-     */
-    readonly version: 2;
 }
 export interface InputNumberRebuiltRef {
     focus: () => void;

package/dist/InputNumber/index.cjs

@@ -7,6 +7,7 @@ require('react-dom');
 var classnames = require('classnames');
 var Icon = require('../Icon-cjs.js');
 var Text = require('../Text-cjs.js');
+var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 var FormField = require('../FormField-cjs.js');
 require('react-hook-form');
 require('@jobber/hooks');
@@ -2740,14 +2741,15 @@ 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 dataAttrs = filterDataAttributes.filterDataAttributes(props);
     const stringDescription = typeof description === "string";
-    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 }),
+    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); }, onClick: props.onClick, onMouseDown: props.onMouseDown, onMouseUp: props.onMouseUp, onPointerDown: props.onPointerDown, onPointerUp: props.onPointerUp, 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]) },
-                    React.createElement($3985021b0ad6602f$export$f5b8910cec6cf069, { className: styles.input, placeholder: " " // used for CSS minilabel
-                        , ref: inputRef }),
+                    React.createElement($3985021b0ad6602f$export$f5b8910cec6cf069, Object.assign({ className: styles.input, placeholder: " " // used for CSS minilabel
+                        , ref: inputRef }, dataAttrs)),
                     React.createElement($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: styles.label }, placeholder)))),
         description && (React.createElement(Tree.$514c0188e459b4c0$export$5f1af8db9871e1d6, { className: styles.description, elementType: "div", slot: "description" }, stringDescription ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description))),
         error && (React.createElement($ee014567cb39d3f0$export$f551688fc98f2e09, { className: styles.fieldError },
@@ -2773,7 +2775,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

@@ -5,6 +5,7 @@ import 'react-dom';
 import classnames from 'classnames';
 import { I as Icon } from '../Icon-es.js';
 import { T as Text } from '../Text-es.js';
+import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import { k as FormField } from '../FormField-es.js';
 import 'react-hook-form';
 import '@jobber/hooks';
@@ -2738,14 +2739,15 @@ 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 dataAttrs = filterDataAttributes(props);
     const stringDescription = typeof description === "string";
-    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 }),
+    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); }, onClick: props.onClick, onMouseDown: props.onMouseDown, onMouseUp: props.onMouseUp, onPointerDown: props.onPointerDown, onPointerUp: props.onPointerUp, 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]) },
-                    React__default.createElement($3985021b0ad6602f$export$f5b8910cec6cf069, { className: styles.input, placeholder: " " // used for CSS minilabel
-                        , ref: inputRef }),
+                    React__default.createElement($3985021b0ad6602f$export$f5b8910cec6cf069, Object.assign({ className: styles.input, placeholder: " " // used for CSS minilabel
+                        , ref: inputRef }, dataAttrs)),
                     React__default.createElement($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: styles.label }, placeholder)))),
         description && (React__default.createElement($514c0188e459b4c0$export$5f1af8db9871e1d6, { className: styles.description, elementType: "div", slot: "description" }, stringDescription ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description))),
         error && (React__default.createElement($ee014567cb39d3f0$export$f551688fc98f2e09, { className: styles.fieldError },
@@ -2771,7 +2773,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;