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

package/dist/DataTable/index.cjs

@@ -13,12 +13,12 @@ require('../Content-cjs.js');
 require('../Select/index.cjs');
 require('../omit-cjs.js');
 require('../_commonjsHelpers-cjs.js');
-require('../_getAllKeys-cjs.js');
+require('../_baseGet-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
-require('../isSymbol-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');

package/dist/DataTable/index.mjs

@@ -11,12 +11,12 @@ import '../Content-es.js';
 import '../Select/index.mjs';
 import '../omit-es.js';
 import '../_commonjsHelpers-es.js';
-import '../_getAllKeys-es.js';
+import '../_baseGet-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
-import '../isSymbol-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';

package/dist/DatePicker/index.cjs

@@ -16,12 +16,12 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../omit-cjs.js');
 require('../_commonjsHelpers-cjs.js');
-require('../_getAllKeys-cjs.js');
+require('../_baseGet-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
-require('../isSymbol-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');

package/dist/DatePicker/index.mjs

@@ -14,12 +14,12 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../omit-es.js';
 import '../_commonjsHelpers-es.js';
-import '../_getAllKeys-es.js';
+import '../_baseGet-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
-import '../isSymbol-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';

package/dist/DatePicker-es.js

@@ -1,7 +1,7 @@
 import React__default, { cloneElement, Component, createRef, useRef, useCallback, useEffect, createElement, forwardRef, isValidElement, useState } from 'react';
 import classnames from 'classnames';
 import { c as clsx } from './clsx-es.js';
-import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, t as FloatingArrow } from './floating-ui.react-es.js';
+import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, v as FloatingArrow } from './floating-ui.react-es.js';
 import ReactDOM__default from 'react-dom';
 import { useRefocusOnActivator } from '@jobber/hooks';
 import { T as Typography } from './Typography-es.js';

package/dist/FormField/FormFieldTypes.d.ts

@@ -158,6 +158,8 @@ export interface FormFieldProps extends CommonFormFieldProps {
      */
     readonly suffix?: XOR<Affix, Suffix>;
     /**
+     * Simplified onChange handler that only provides the new value.
+     * @param newValue
      * Specifies the minimum numerical or date value that a user can type
      */
     readonly min?: number;

package/dist/FormField/hooks/useFormFieldWrapperStyles.d.ts

@@ -1,12 +1,7 @@
 import type { RefObject } from "react";
 import type { FormFieldProps } from "../FormFieldTypes";
-export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "maxLength" | "type" | "disabled" | "inline"> {
+export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "max" | "maxLength" | "type" | "disabled" | "inline"> {
     readonly error?: string;
-    /**
-     * Maximum numerical or date value
-     * In v2 components, this is typically undefined.
-     */
-    readonly max?: number | string;
     suffixRef?: RefObject<HTMLDivElement>;
     prefixRef?: RefObject<HTMLDivElement>;
     showMiniLabel?: boolean;
@@ -23,7 +18,7 @@ export declare function useFormFieldWrapperStyles({ size, align, placeholder, va
     wrapperClasses: string;
     containerClasses: string;
     wrapperInlineStyle: {
-        [x: string]: string | number | undefined;
+        [x: string]: number | undefined;
     };
     labelStyle: LabelPadding;
     setLabelStyle: import("react").Dispatch<import("react").SetStateAction<LabelPadding>>;

package/dist/FormField-cjs.js

@@ -383,6 +383,7 @@ function FormField(props) {
     return React.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
 }
 function FormFieldInternal(props) {
+    var _a;
     const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
     const { name } = useAtlantisFormFieldName({ id, nameProp });
     const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
@@ -429,7 +430,10 @@ function FormFieldInternal(props) {
         handleValidation,
         handleKeyDown,
     });
-    return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
+    // Ensure focus tracking works by providing a wrapperRef when none is passed
+    const internalWrapperRef = React.useRef(null);
+    const wrapperRef = (_a = props.wrapperRef) !== null && _a !== void 0 ? _a : internalWrapperRef;
+    return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
     function renderField() {
         switch (type) {
             case "select":
@@ -467,6 +471,7 @@ exports.FormFieldWrapper = FormFieldWrapper;
 exports.FormFieldWrapperMain = FormFieldWrapperMain;
 exports.FormFieldWrapperToolbar = FormFieldWrapperToolbar;
 exports.mergeRefs = mergeRefs;
+exports.styles = styles$1;
 exports.useAtlantisFormField = useAtlantisFormField;
 exports.useAtlantisFormFieldActions = useAtlantisFormFieldActions;
 exports.useAtlantisFormFieldName = useAtlantisFormFieldName;

package/dist/FormField-es.js

@@ -381,6 +381,7 @@ function FormField(props) {
     return React__default.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
 }
 function FormFieldInternal(props) {
+    var _a;
     const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
     const { name } = useAtlantisFormFieldName({ id, nameProp });
     const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
@@ -427,7 +428,10 @@ function FormFieldInternal(props) {
         handleValidation,
         handleKeyDown,
     });
-    return (React__default.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
+    // Ensure focus tracking works by providing a wrapperRef when none is passed
+    const internalWrapperRef = useRef(null);
+    const wrapperRef = (_a = props.wrapperRef) !== null && _a !== void 0 ? _a : internalWrapperRef;
+    return (React__default.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
     function renderField() {
         switch (type) {
             case "select":
@@ -454,4 +458,4 @@ function setAutocomplete(autocompleteSetting) {
     return autocompleteSetting;
 }
 
-export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, FormFieldInputWrapperStyles as d, FormFieldLabel as e, FormFieldWrapper as f, FormFieldWrapperMain as g, FormFieldWrapperToolbar as h, AffixLabel as i, useFormFieldWrapperStyles as j, FormField as k, FormFieldPostFix as l, mergeRefs as m, useAtlantisFormField as u };
+export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, FormFieldInputWrapperStyles as d, FormFieldLabel as e, FormFieldWrapper as f, FormFieldWrapperMain as g, FormFieldWrapperToolbar as h, AffixLabel as i, useFormFieldWrapperStyles as j, FormField as k, FormFieldPostFix as l, mergeRefs as m, styles$1 as s, useAtlantisFormField as u };

package/dist/InputDate/index.cjs

@@ -13,12 +13,12 @@ require('../Button-cjs.js');
 var DatePicker = require('../DatePicker-cjs.js');
 var InputText_index = require('../InputText/index.cjs');
 require('../_commonjsHelpers-cjs.js');
-require('../_getAllKeys-cjs.js');
+require('../_baseGet-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
-require('../isSymbol-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');
@@ -79,9 +79,13 @@ function InputDate$1(inputProps) {
         } }));
 }
 
+/**
+ * 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.
+ */
 function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
     const [isFocused, setIsFocused] = React.useState(false);
-    function handleChange(_newValue, event) {
+    function handleChange(_, event) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
     function handleFocus(event) {
@@ -89,8 +93,8 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
         setIsFocused(true);
     }
     function handleBlur(event) {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
         setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
     return {
         handleBlur,
@@ -131,7 +135,7 @@ const InputDateRebuilt = React.forwardRef((props, forwardedRef) => {
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React.createElement("div", { onClick: onClick },
-            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-invalid": activatorProps.ariaInvalid === "true" ? true : false, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);

package/dist/InputDate/index.mjs

@@ -11,12 +11,12 @@ import '../Button-es.js';
 import { D as DatePicker } from '../DatePicker-es.js';
 import { InputText } from '../InputText/index.mjs';
 import '../_commonjsHelpers-es.js';
-import '../_getAllKeys-es.js';
+import '../_baseGet-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
-import '../isSymbol-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';
@@ -77,9 +77,13 @@ function InputDate$1(inputProps) {
         } }));
 }
 
+/**
+ * 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.
+ */
 function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
     const [isFocused, setIsFocused] = useState(false);
-    function handleChange(_newValue, event) {
+    function handleChange(_, event) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
     function handleFocus(event) {
@@ -87,8 +91,8 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
         setIsFocused(true);
     }
     function handleBlur(event) {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
         setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
     return {
         handleBlur,
@@ -129,7 +133,7 @@ const InputDateRebuilt = forwardRef((props, forwardedRef) => {
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React__default.createElement("div", { onClick: onClick },
-            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-invalid": activatorProps.ariaInvalid === "true" ? true : false, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);

package/dist/InputDate/useInputDateActivatorActions.d.ts

@@ -1,12 +1,16 @@
-import type { ChangeEvent } from "react";
+import type { ChangeEvent, FocusEvent } 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: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleChange: (_newValue: string, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleFocus: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
+    handleChange: (_: unknown, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => 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, InputLengthConstraint, KeyboardEvents, 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,19 +7,27 @@ 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 HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, RebuiltInputCommonProps, InputLengthConstraint {
+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;
     /**
-     * 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>) => 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 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

@@ -8,5 +8,5 @@ export declare function useInputEmailActions({ onChange, inputRef, onEnter, onFo
     handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
     handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (event?: FocusEvent) => void;
 };

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

@@ -0,0 +1,32 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
+export interface UseInputEmailFormFieldProps {
+    readonly id: string;
+    readonly name: string;
+    readonly disabled?: boolean;
+    readonly autofocus?: boolean;
+    readonly error?: string;
+    readonly inline?: boolean;
+    readonly description?: ReactNode;
+    readonly invalid?: boolean;
+    readonly value?: string;
+    readonly handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    readonly handleBlur: (event?: FocusEvent<HTMLInputElement>) => void;
+    readonly handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    readonly handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+export interface UseInputEmailFormFieldReturn {
+    readonly fieldProps: {
+        readonly id: string;
+        readonly name: string;
+        readonly disabled?: boolean;
+        readonly autofocus?: boolean;
+        readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        readonly onBlur: (event?: FocusEvent<HTMLInputElement>) => void;
+        readonly onFocus: (event: FocusEvent<HTMLInputElement>) => void;
+        readonly onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+        readonly value?: string;
+        readonly "aria-describedby"?: string;
+    };
+    readonly descriptionIdentifier: string;
+}
+export declare function useInputEmailFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error, ...rest }: UseInputEmailFormFieldProps): UseInputEmailFormFieldReturn;

package/dist/InputEmail/index.cjs

@@ -3,12 +3,13 @@
 var React = require('react');
 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('@jobber/hooks');
 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');
 
 const validationMessage = "Please enter a valid email";
 
@@ -37,6 +49,7 @@ function InputEmail$1(props) {
 function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     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();
     }
@@ -70,10 +83,19 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
     };
 }
 
+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 generatedId = React.useId();
-    const id = props.id || generatedId;
+    const id = React.useId();
     const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : React.useRef(null);
     const wrapperRef = React.useRef(null);
     const { inputStyle } = FormField.useFormFieldWrapperStyles({
@@ -100,11 +122,25 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
         onEnter: props.onEnter,
         inputRef,
     });
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.error || props.invalid);
-    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, wrapperRef: wrapperRef, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, autofocus: props.autoFocus, name: name },
-        React.createElement("input", { id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, "data-testid": "ATL-InputEmail-input" }),
+    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));
 });

package/dist/InputEmail/index.mjs

@@ -1,12 +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 'classnames';
-import '../tslib.es6-es.js';
+import { _ as __rest } from '../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 '../Icon-es.js';
 import '../Text-es.js';
 import '../Typography-es.js';
@@ -14,6 +15,17 @@ 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";
 
@@ -35,6 +47,7 @@ function InputEmail$1(props) {
 function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     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();
     }
@@ -68,10 +81,19 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
     };
 }
 
+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 generatedId = useId();
-    const id = props.id || generatedId;
+    const id = useId();
     const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : useRef(null);
     const wrapperRef = useRef(null);
     const { inputStyle } = useFormFieldWrapperStyles({
@@ -98,11 +120,25 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
         onEnter: props.onEnter,
         inputRef,
     });
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.error || props.invalid);
-    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, 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", { id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, "data-testid": "ATL-InputEmail-input" }),
+    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));
 });

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

@@ -1,39 +1,22 @@
 import type { ReactNode } from "react";
 import type React from "react";
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
-import type { AriaInputProps, FocusEvents, InputConstraintProps, KeyboardEvents } from "../sharedHelpers/types";
 export type InputNumberVersion = 1 | 2 | undefined;
-export interface InputNumberRebuiltProps extends Omit<CommonFormFieldProps, "version">, AriaInputProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, InputConstraintProps {
+export interface InputNumberRebuiltProps extends Omit<CommonFormFieldProps, "version">, Pick<FormFieldProps, "onFocus" | "onBlur" | "inputRef" | "readonly" | "size"> {
     readonly align?: "center" | "right";
-    /**
-     * HTML autocomplete attribute for browser autofill.
-     */
-    readonly autoComplete?: string;
+    readonly autocomplete?: boolean;
     readonly autoFocus?: boolean;
     readonly defaultValue?: number;
     readonly description?: ReactNode;
     readonly error?: string;
     readonly formatOptions?: Intl.NumberFormatOptions;
-    /**
-     * The ID of the input element.
-     */
-    readonly id?: string;
+    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;
-    /**
-     * Whether the input is read-only.
-     */
-    readonly readOnly?: boolean;
     readonly showMiniLabel?: boolean;
-    readonly size?: FormFieldProps["size"];
     readonly value?: number;
     /**
      * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.