@jobber/components 6.104.0 → 6.104.1

package/dist/DataList/components/DataListSearch/index.mjs

@@ -16,19 +16,9 @@ import '../../../useFormFieldFocus-es.js';
 import '../../../InputValidation-es.js';
 import '../../../Spinner-es.js';
 import 'react-hook-form';
-import '../../../omit-es.js';
-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';
+import '../../../filterDataAttributes-es.js';
 import '../../../DataListContext-es.js';
 import '../../../noop-es.js';
+import '../../../_commonjsHelpers-es.js';
 import '../../../DataList.const-es.js';
 import '../../../AnimatedSwitcher-es.js';

package/dist/DataList/index.cjs

@@ -48,6 +48,7 @@ require('../DataListItemActionsOverflow-cjs.js');
 require('../DataListActionsMenu-cjs.js');
 require('../Checkbox/index.cjs');
 require('react-hook-form');
+require('../filterDataAttributes-cjs.js');
 require('../useBatchSelect-cjs.js');
 require('../DataListItemClickable-cjs.js');
 require('../DataListHeader-cjs.js');
@@ -81,14 +82,6 @@ require('../InputText/index.cjs');
 require('../FormField-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
-require('../omit-cjs.js');
-require('../_baseGet-cjs.js');
-require('../identity-cjs.js');
-require('../isSymbol-cjs.js');
-require('../keysIn-cjs.js');
-require('../_baseAssignValue-cjs.js');
-require('../_baseFlatten-cjs.js');
-require('../_setToString-cjs.js');
 require('../DataListEmptyState-cjs.js');
 require('../DataListLoadMore-cjs.js');
 require('../DataListAction-cjs.js');

package/dist/DataList/index.mjs

@@ -46,6 +46,7 @@ import '../DataListItemActionsOverflow-es.js';
 import '../DataListActionsMenu-es.js';
 import '../Checkbox/index.mjs';
 import 'react-hook-form';
+import '../filterDataAttributes-es.js';
 import '../useBatchSelect-es.js';
 import '../DataListItemClickable-es.js';
 import '../DataListHeader-es.js';
@@ -79,14 +80,6 @@ import '../InputText/index.mjs';
 import '../FormField-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
-import '../omit-es.js';
-import '../_baseGet-es.js';
-import '../identity-es.js';
-import '../isSymbol-es.js';
-import '../keysIn-es.js';
-import '../_baseAssignValue-es.js';
-import '../_baseFlatten-es.js';
-import '../_setToString-es.js';
 import '../DataListEmptyState-es.js';
 import '../DataListLoadMore-es.js';
 import '../DataListAction-es.js';

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('../_baseGet-cjs.js');
+require('../_getAllKeys-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');
@@ -35,6 +35,7 @@ require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('react-hook-form');
+require('../filterDataAttributes-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 '../_baseGet-es.js';
+import '../_getAllKeys-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';
@@ -33,3 +33,4 @@ import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import 'react-hook-form';
+import '../filterDataAttributes-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('../_baseGet-cjs.js');
+require('../_getAllKeys-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 '../_baseGet-es.js';
+import '../_getAllKeys-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/FormField/FormFieldTypes.d.ts

@@ -158,8 +158,6 @@ 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,7 +1,12 @@
 import type { RefObject } from "react";
 import type { FormFieldProps } from "../FormFieldTypes";
-export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "max" | "maxLength" | "type" | "disabled" | "inline"> {
+export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "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 | null>;
     prefixRef?: RefObject<HTMLDivElement | null>;
     showMiniLabel?: boolean;
@@ -18,7 +23,7 @@ export declare function useFormFieldWrapperStyles({ size, align, placeholder, va
     wrapperClasses: string;
     containerClasses: string;
     wrapperInlineStyle: {
-        [x: string]: number | undefined;
+        [x: string]: string | number | undefined;
     };
     labelStyle: LabelPadding;
     setLabelStyle: import("react").Dispatch<import("react").SetStateAction<LabelPadding>>;

package/dist/FormField-cjs.js

@@ -471,7 +471,6 @@ 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

@@ -458,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, styles$1 as s, 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, useAtlantisFormField as u };

package/dist/InputDate/InputDate.types.d.ts

@@ -1,11 +1,21 @@
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
-import type { InputTextRebuiltProps } from "../InputText/InputText.types";
-export interface InputDateRebuiltProps extends Omit<InputTextRebuiltProps, "clearable" | "onChange" | "value" | "prefix" | "suffix" | "multiline" | "rows" | "type" | "version"> {
+import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
+export interface InputDateRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix"> {
     /**
      * A Date object value
      * (e.g., `new Date("11/11/2011")`)
      * */
     readonly value?: Date;
+    /**
+     * Callback for value changes.
+     * @param newValue - The new Date value
+     * @param event - Optional change event
+     */
+    readonly onChange: (newValue: Date, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * @deprecated Use `onKeyDown` or `onKeyUp` instead.
+     */
+    readonly onEnter?: FormFieldProps["onEnter"];
     /**
      * The maximum selectable date.
      */
@@ -23,11 +33,6 @@ export interface InputDateRebuiltProps extends Omit<InputTextRebuiltProps, "clea
      * Text to display instead of a date value
      */
     readonly emptyValueLabel?: string;
-    /**
-     * Version 2 is highly experimental, avoid using it unless you have talked with Atlantis first.
-     */
-    readonly version: 2;
-    readonly onChange: (newValue: Date, event?: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export interface InputDateProps extends Omit<CommonFormFieldProps, "clearable">, Pick<FormFieldProps, "readonly" | "disabled" | "onEnter" | "onFocus" | "inputRef" | "validations" | "placeholder" | "onChange" | "onBlur"> {
     /**

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('../_baseGet-cjs.js');
+require('../_getAllKeys-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');
@@ -35,6 +35,7 @@ require('../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../AtlantisContext-cjs.js');
+require('../filterDataAttributes-cjs.js');
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = React.useRef(null);
@@ -79,13 +80,9 @@ 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(_, event) {
+    function handleChange(_newValue, event) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
     function handleFocus(event) {
@@ -93,8 +90,8 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
         setIsFocused(true);
     }
     function handleBlur(event) {
-        setIsFocused(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setIsFocused(false);
     }
     return {
         handleBlur,
@@ -135,7 +132,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-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 => {
+            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, 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 '../_baseGet-es.js';
+import '../_getAllKeys-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';
@@ -33,6 +33,7 @@ import '../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../AtlantisContext-es.js';
+import '../filterDataAttributes-es.js';
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = useRef(null);
@@ -77,13 +78,9 @@ 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(_, event) {
+    function handleChange(_newValue, event) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
     function handleFocus(event) {
@@ -91,8 +88,8 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
         setIsFocused(true);
     }
     function handleBlur(event) {
-        setIsFocused(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setIsFocused(false);
     }
     return {
         handleBlur,
@@ -133,7 +130,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-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 => {
+            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, 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,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, 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>, 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,13 @@
 import type { ChangeEvent, FocusEvent, KeyboardEvent } 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"> {
     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, }: 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;
 };

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, }) {
     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,28 +62,23 @@ 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);
+    }
     return {
         handleClear,
         handleChange,
         handleKeyDown,
+        handleKeyUp,
         handleFocus,
         handleBlur,
     };
 }
 
-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({
@@ -106,7 +89,6 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
         value: props.value,
         invalid: props.invalid,
         error: props.error,
-        maxLength: props.maxLength,
         disabled: props.disabled,
         placeholder: props.placeholder,
     });
@@ -114,35 +96,22 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
         nameProp: props.name,
         id,
     });
-    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } = useInputEmailActions({
+    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, } = useInputEmailActions({
         onChange: props.onChange,
         onBlur: props.onBlur,
         onFocus: props.onFocus,
         onKeyDown: props.onKeyDown,
+        onKeyUp: props.onKeyUp,
         onEnter: props.onEnter,
         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, 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: inputStyle, 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, "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) {