@jobber/components 6.103.2-JOB-140609-fafe469.18 → 6.103.2-JOB-135467-8ed574a.0

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';
@@ -87,16 +87,12 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
     function handleFocus(event) {
-        if (event) {
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
         setIsFocused(true);
     }
     function handleBlur(event) {
         setIsFocused(false);
-        if (event) {
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
     return {
         handleBlur,

package/dist/InputDate/useInputDateActivatorActions.d.ts

@@ -9,8 +9,8 @@ export interface useInputDateActivatorActionsProps extends Pick<InputDateRebuilt
  * 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 | HTMLTextAreaElement>) => void;
+    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
     handleChange: (_: unknown, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleFocus: (event?: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
     isFocused: boolean;
 };

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

@@ -1,4 +1,5 @@
-import type { CommonFormFieldProps, FocusEvents, FormFieldProps, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../FormField";
+import type { Clearable } from "@jobber/hooks";
+import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
 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;
@@ -6,35 +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 {
-    /**
-     * The current value of the input.
-     */
-    readonly value?: string;
+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;
     /**
-     * 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"];
-    /**
-     * @deprecated Use `id` instead. This prop will be removed in a future version.
-     */
-    readonly identifier?: string;
-    /**
-     * @deprecated Use `autoComplete` with string values instead. This prop will be removed in a future version.
-     */
-    readonly autocomplete?: never;
-    /**
-     * @deprecated Use `aria-label` instead. This prop will be removed in a future version.
-     */
-    readonly ariaLabel?: never;
-    /**
-     * @deprecated Use `readOnly` instead. This prop will be removed in a future version.
-     */
-    readonly readonly?: never;
+    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,7 +49,7 @@ function InputEmail$1(props) {
 function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     function handleClear() {
         var _a;
-        // Don't call blur handler when programmatically clearing
+        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();
     }
@@ -71,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.identifier || 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({
@@ -85,7 +106,7 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
         value: props.value,
         invalid: props.invalid,
         error: props.error,
-        maxLength: undefined, // v2: maxLength is for HTML validation only, not for width styling
+        maxLength: props.maxLength,
         disabled: props.disabled,
         placeholder: props.placeholder,
     });
@@ -101,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["aria-invalid"] || 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, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": hasDescription ? 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: 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,7 +47,7 @@ function InputEmail$1(props) {
 function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     function handleClear() {
         var _a;
-        // Don't call blur handler when programmatically clearing
+        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();
     }
@@ -69,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.identifier || props.id || generatedId;
+    const id = useId();
     const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : useRef(null);
     const wrapperRef = useRef(null);
     const { inputStyle } = useFormFieldWrapperStyles({
@@ -83,7 +104,7 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
         value: props.value,
         invalid: props.invalid,
         error: props.error,
-        maxLength: undefined, // v2: maxLength is for HTML validation only, not for width styling
+        maxLength: props.maxLength,
         disabled: props.disabled,
         placeholder: props.placeholder,
     });
@@ -99,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["aria-invalid"] || 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, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": hasDescription ? 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: 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,51 +1,22 @@
 import type { ReactNode } from "react";
 import type React from "react";
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
-import type { AriaInputProps, FocusEvents, KeyboardEvents } from "../FormField/FormFieldTypes";
 export type InputNumberVersion = 1 | 2 | undefined;
-export interface InputNumberRebuiltProps extends Omit<CommonFormFieldProps, "version">, AriaInputProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement> {
+export interface InputNumberRebuiltProps extends Omit<CommonFormFieldProps, "version">, Pick<FormFieldProps, "onFocus" | "onBlur" | "inputRef" | "readonly" | "size"> {
     readonly align?: "center" | "right";
-    /**
-     * @deprecated Use `autoComplete` (camelCase) instead.
-     */
     readonly autocomplete?: boolean;
-    /**
-     * HTML autocomplete attribute for browser autofill.
-     */
-    readonly autoComplete?: string;
     readonly autoFocus?: boolean;
     readonly defaultValue?: number;
     readonly description?: ReactNode;
     readonly error?: string;
     readonly formatOptions?: Intl.NumberFormatOptions;
-    /**
-     * @deprecated Use `id` instead.
-     */
     readonly identifier?: string;
-    /**
-     * The ID of the input element.
-     */
-    readonly id?: 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;
-    /**
-     * @deprecated Use `readOnly` (camelCase) instead.
-     */
-    readonly readonly?: boolean;
-    /**
-     * 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.

package/dist/InputNumber/index.cjs

@@ -2721,7 +2721,6 @@ const defaultFormatOptions = {
     style: "decimal",
 };
 const InputNumberRebuilt = React.forwardRef((props, ref) => {
-    var _a;
     const inputRef = React.createRef();
     const mergedFormatOptions = Object.assign(Object.assign({}, defaultFormatOptions), props.formatOptions);
     function handleChange(newValue, event) {
@@ -2741,16 +2740,9 @@ const InputNumberRebuilt = React.forwardRef((props, ref) => {
             }
         },
     }));
-    const { align, description, disabled, error, inline, invalid, placeholder, 
-    // Support both old and new prop names
-    readonly, readOnly = readonly, showMiniLabel = true, size, minValue, maxValue, 
-    // Deprecated props (filter out to avoid spreading to React Aria)
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    identifier: _deprecatedIdentifier, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    autocomplete: _deprecatedAutocomplete } = props, ariaNumberFieldProps = tslib_es6.__rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readonly", "readOnly", "showMiniLabel", "size", "minValue", "maxValue", "identifier", "autocomplete"]);
+    const { align, description, disabled, error, inline, invalid, placeholder, readonly, showMiniLabel = true, size, minValue, maxValue } = props, ariaNumberFieldProps = tslib_es6.__rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readonly", "showMiniLabel", "size", "minValue", "maxValue"]);
     const stringDescription = typeof description === "string";
-    return (React.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, id: (_a = props.id) !== null && _a !== void 0 ? _a : props.identifier, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onChange: handleChange }),
+    return (React.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, isDisabled: disabled, isInvalid: invalid, isReadOnly: readonly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onChange: handleChange }),
         React.createElement($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: classnames(styles.wrapper, align && styles[align], invalid && styles.invalid, disabled && styles.disabled) },
             React.createElement("div", { className: styles.horizontalWrapper },
                 React.createElement("div", { className: classnames(styles.inputWrapper, disabled && styles.disabled, !showMiniLabel && styles.hideLabel, size && styles[size]) },

package/dist/InputNumber/index.mjs

@@ -2719,7 +2719,6 @@ const defaultFormatOptions = {
     style: "decimal",
 };
 const InputNumberRebuilt = forwardRef((props, ref) => {
-    var _a;
     const inputRef = createRef();
     const mergedFormatOptions = Object.assign(Object.assign({}, defaultFormatOptions), props.formatOptions);
     function handleChange(newValue, event) {
@@ -2739,16 +2738,9 @@ const InputNumberRebuilt = forwardRef((props, ref) => {
             }
         },
     }));
-    const { align, description, disabled, error, inline, invalid, placeholder, 
-    // Support both old and new prop names
-    readonly, readOnly = readonly, showMiniLabel = true, size, minValue, maxValue, 
-    // Deprecated props (filter out to avoid spreading to React Aria)
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    identifier: _deprecatedIdentifier, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    autocomplete: _deprecatedAutocomplete } = props, ariaNumberFieldProps = __rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readonly", "readOnly", "showMiniLabel", "size", "minValue", "maxValue", "identifier", "autocomplete"]);
+    const { align, description, disabled, error, inline, invalid, placeholder, readonly, showMiniLabel = true, size, minValue, maxValue } = props, ariaNumberFieldProps = __rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readonly", "showMiniLabel", "size", "minValue", "maxValue"]);
     const stringDescription = typeof description === "string";
-    return (React__default.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, id: (_a = props.id) !== null && _a !== void 0 ? _a : props.identifier, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onChange: handleChange }),
+    return (React__default.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, isDisabled: disabled, isInvalid: invalid, isReadOnly: readonly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onChange: handleChange }),
         React__default.createElement($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: classnames(styles.wrapper, align && styles[align], invalid && styles.invalid, disabled && styles.disabled) },
             React__default.createElement("div", { className: styles.horizontalWrapper },
                 React__default.createElement("div", { className: classnames(styles.inputWrapper, disabled && styles.disabled, !showMiniLabel && styles.hideLabel, size && styles[size]) },

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

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

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

@@ -11,6 +11,6 @@ export declare function useInputPhoneActions({ onChange, inputRef, onFocus, onBl
     handleClear: () => void;
     handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
     handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (event?: FocusEvent<HTMLInputElement>) => void;
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
 };

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

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