@jobber/components 6.103.2-JOB-140609-8386817.45 → 6.103.3

package/dist/Autocomplete/Autocomplete.types.d.ts

@@ -1,17 +1,6 @@
 import type { CSSProperties, Key, Ref, RefObject } from "react";
-import type { AriaInputProps } from "../sharedHelpers/types";
 import type { FormFieldProps } from "../FormField";
 import type { InputTextRebuiltProps, InputTextRef } from "../InputText";
-/**
- * ARIA attributes for Autocomplete with managed/orchestrated behavior.
- * Certain ARIA attributes are controlled internally by Autocomplete's
- * state management and floating-ui integration and shouldn't be overridden.
- *
- * Omits: ariaControls, ariaExpanded, ariaActiveDescendant, ariaAutocomplete
- * (These are managed by the component's internal state/floating-ui)
- */
-export interface AriaInputPropsManaged extends Omit<AriaInputProps, "ariaControls" | "ariaExpanded" | "ariaActiveDescendant" | "ariaAutocomplete"> {
-}
 export type ExtraProps = Record<string, unknown>;
 type OptionValue = string | number;
 export interface BaseOption {
@@ -233,7 +222,7 @@ export type MenuFooter<Extra extends object = ExtraProps> = Extra & {
 };
 export type MenuItem<T extends OptionLike, SectionExtra extends object = ExtraProps, ActionExtra extends object = ExtraProps> = MenuSection<T, SectionExtra, ActionExtra> | MenuOptions<T, ActionExtra> | MenuHeader<ActionExtra> | MenuFooter<ActionExtra>;
 export type AutocompleteValue<Value extends OptionLike, Multiple extends boolean> = Multiple extends true ? Value[] : Value | undefined;
-interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> extends AriaInputPropsManaged {
+interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> {
     version: 2;
     /**
      * Whether the autocomplete allows multiple selections.

package/dist/Autocomplete/index.cjs

@@ -20,6 +20,18 @@ require('react-hook-form');
 require('framer-motion');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../omit-cjs.js');
+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');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
@@ -909,7 +921,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         onBlur: onInputBlur,
     });
     const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
-        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", ariaAutocomplete: "list", ariaExpanded: open ? true : false, ariaControls: listboxId, ariaActiveDescendant: open && activeIndex != null
+        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
             ? `${listboxId}-item-${activeIndex}`
             : undefined });
     const referenceInputRef = (node) => {

package/dist/Autocomplete/index.mjs

@@ -18,6 +18,18 @@ import 'react-hook-form';
 import 'framer-motion';
 import '../Button-es.js';
 import 'react-router-dom';
+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 '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
@@ -907,7 +919,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         onBlur: onInputBlur,
     });
     const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
-        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", ariaAutocomplete: "list", ariaExpanded: open ? true : false, ariaControls: listboxId, ariaActiveDescendant: open && activeIndex != null
+        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
             ? `${listboxId}-item-${activeIndex}`
             : undefined });
     const referenceInputRef = (node) => {

package/dist/Checkbox/Checkbox.types.d.ts

@@ -1,7 +1,6 @@
 import type { ReactElement, ReactNode } from "react";
 import type { XOR } from "ts-xor";
-import type { AriaInputProps, FocusEvents } from "../sharedHelpers/types";
-export interface BaseCheckboxProps extends AriaInputProps, FocusEvents<HTMLInputElement> {
+export interface BaseCheckboxProps {
     /**
      * Determines if the checkbox is checked or not.
      */
@@ -42,6 +41,14 @@ export interface BaseCheckboxProps extends AriaInputProps, FocusEvents<HTMLInput
      * Called when the checkbox value changes
      */
     onChange?(newValue: boolean): void;
+    /**
+     * Called when the checkbox is focused
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Called when the checkbox loses focus
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
     /**
      * Whether the checkbox is invalid
      */

package/dist/Checkbox/index.cjs

@@ -54,10 +54,9 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         } }));
 }
 
-const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, ariaLabel, ariaDescribedBy, ariaRequired, }, ref) {
+const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
     const descriptionIdentifier = React.useId();
     const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
-    const isInvalid = Boolean(invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
     });
@@ -71,8 +70,7 @@ const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ chec
     return (React.createElement("div", { className: styles.checkBoxParent },
         React.createElement("label", { className: wrapperClassName },
             React.createElement("span", { className: styles.checkHolder },
-                React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy ||
-                        (description ? descriptionIdentifier : undefined), "aria-invalid": isInvalid ? true : undefined, "aria-required": ariaRequired, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-describedby": description ? descriptionIdentifier : undefined, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
                 React.createElement("span", { className: styles.checkBox },
                     React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
             labelContent && React.createElement("span", { className: styles.label }, labelContent)),

package/dist/Checkbox/index.mjs

@@ -52,10 +52,9 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         } }));
 }
 
-const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, ariaLabel, ariaDescribedBy, ariaRequired, }, ref) {
+const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
     const descriptionIdentifier = useId();
     const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
-    const isInvalid = Boolean(invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
     });
@@ -69,8 +68,7 @@ const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, d
     return (React__default.createElement("div", { className: styles.checkBoxParent },
         React__default.createElement("label", { className: wrapperClassName },
             React__default.createElement("span", { className: styles.checkHolder },
-                React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy ||
-                        (description ? descriptionIdentifier : undefined), "aria-invalid": isInvalid ? true : undefined, "aria-required": ariaRequired, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-describedby": description ? descriptionIdentifier : undefined, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
                 React__default.createElement("span", { className: styles.checkBox },
                     React__default.createElement(Icon, { name: iconName, color: "surface" }))),
             labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),

package/dist/Chips/InternalChipDismissible/hooks/index.cjs

@@ -4,12 +4,12 @@ var useScrollToActive = require('../../../useScrollToActive-cjs.js');
 require('react');
 require('../../../_commonjsHelpers-cjs.js');
 require('../../../_baseFlatten-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('../../../_baseEach-cjs.js');
 require('../../../_baseFor-cjs.js');
 require('../../../_isIterateeCall-cjs.js');

package/dist/Chips/InternalChipDismissible/hooks/index.mjs

@@ -2,12 +2,12 @@ export { b as useInView, u as useInternalChipDismissible, a as useInternalChipDi
 import 'react';
 import '../../../_commonjsHelpers-es.js';
 import '../../../_baseFlatten-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 '../../../_baseEach-es.js';
 import '../../../_baseFor-es.js';
 import '../../../_isIterateeCall-es.js';

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -5,12 +5,12 @@ require('react');
 require('../../useScrollToActive-cjs.js');
 require('../../_commonjsHelpers-cjs.js');
 require('../../_baseFlatten-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('../../_baseEach-cjs.js');
 require('../../_baseFor-cjs.js');
 require('../../_isIterateeCall-cjs.js');

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -3,12 +3,12 @@ import 'react';
 import '../../useScrollToActive-es.js';
 import '../../_commonjsHelpers-es.js';
 import '../../_baseFlatten-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 '../../_baseEach-es.js';
 import '../../_baseFor-es.js';
 import '../../_isIterateeCall-es.js';

package/dist/Chips/index.cjs

@@ -7,12 +7,12 @@ var Chips = require('../Chips-cjs.js');
 require('../useScrollToActive-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../_baseFlatten-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('../_baseEach-cjs.js');
 require('../_baseFor-cjs.js');
 require('../_isIterateeCall-cjs.js');

package/dist/Chips/index.mjs

@@ -5,12 +5,12 @@ export { C as Chips } from '../Chips-es.js';
 import '../useScrollToActive-es.js';
 import '../_commonjsHelpers-es.js';
 import '../_baseFlatten-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 '../_baseEach-es.js';
 import '../_baseFor-es.js';
 import '../_isIterateeCall-es.js';

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

@@ -18,9 +18,20 @@ require('../../../useFormFieldFocus-cjs.js');
 require('../../../InputValidation-cjs.js');
 require('../../../Spinner-cjs.js');
 require('react-hook-form');
+require('../../../omit-cjs.js');
+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');
 require('../../../DataListContext-cjs.js');
 require('../../../noop-cjs.js');
-require('../../../_commonjsHelpers-cjs.js');
 require('../../../DataList.const-cjs.js');
 require('../../../AnimatedSwitcher-cjs.js');
 

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

@@ -16,8 +16,19 @@ 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 '../../../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

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

@@ -79,6 +79,14 @@ 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('../_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/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;
 };