@jobber/components 6.101.4 → 6.101.5-JOB-140604-4487daa.55

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

@@ -38,6 +38,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 '../../../DataList.module-es.js';
 import '../../../DataListItemClickable-es.js';

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

@@ -18,20 +18,10 @@ 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('../../../filterDataAttributes-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,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/hooks/useGetItemActions.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import type { DataListActionProps, DataListObject } from "../DataList.types";
 export declare function useGetItemActions<T extends DataListObject>(item: T): {
-    actions: ReactElement<DataListActionProps<T>>[];
+    actions: ReactElement<DataListActionProps<T>, string | import("react").JSXElementConstructor<any>>[];
     hasActions: boolean;
     disableContextMenu: boolean;
 };

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/DataListActions-cjs.js

@@ -27,13 +27,15 @@ function DataListActions({ children, itemsToExpose = 2, }) {
                 if (activeItem) {
                     return props.label(activeItem);
                 }
+                return "";
             }
             const actionLabel = getActionLabel();
             // If the action is always visible, we don't want a tooltip.
             if (props.alwaysVisible) {
-                return (React.createElement(Button.Button, { ariaLabel: actionLabel, key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
+                return (React.createElement(Button.Button, { ariaLabel: actionLabel, key: actionLabel, icon: props.icon, label: actionLabel, onClick: () => {
                         var _a;
-                        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
+                        if (activeItem)
+                            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
                     }, type: "secondary", variation: "subtle" }));
             }
             return (React.createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },

package/dist/DataListActions-es.js

@@ -25,13 +25,15 @@ function DataListActions({ children, itemsToExpose = 2, }) {
                 if (activeItem) {
                     return props.label(activeItem);
                 }
+                return "";
             }
             const actionLabel = getActionLabel();
             // If the action is always visible, we don't want a tooltip.
             if (props.alwaysVisible) {
-                return (React__default.createElement(Button, { ariaLabel: actionLabel, key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
+                return (React__default.createElement(Button, { ariaLabel: actionLabel, key: actionLabel, icon: props.icon, label: actionLabel, onClick: () => {
                         var _a;
-                        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
+                        if (activeItem)
+                            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
                     }, type: "secondary", variation: "subtle" }));
             }
             return (React__default.createElement(Tooltip, { key: actionLabel, message: actionLabel },

package/dist/DataListItem-cjs.js

@@ -61,19 +61,20 @@ function DataListItemInternal({ children, item, }) {
 function useGetItemActions(item) {
     var _a;
     const { itemActionComponent } = DataListContext.useDataListContext();
-    const itemActions = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) || [];
-    const actionsArray = React.Children.toArray(itemActions);
     const disableContextMenu = (_a = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.disableContextMenu) !== null && _a !== void 0 ? _a : false;
     const actions = React.useMemo(() => {
-        return actionsArray.filter(action => {
-            if (React.isValidElement(action) && action.props.visible) {
-                return action.props.visible(item);
+        var _a;
+        const children = (_a = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) !== null && _a !== void 0 ? _a : [];
+        const nodes = React.Children.toArray(children);
+        return nodes.filter((node) => {
+            if (React.isValidElement(node)) {
+                return node.props.visible ? node.props.visible(item) : true;
             }
-            return true;
+            return false;
         });
     }, [itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children, item]);
     return {
-        actions: actions,
+        actions,
         hasActions: Boolean(actions.length),
         disableContextMenu,
     };

package/dist/DataListItem-es.js

@@ -1,4 +1,4 @@
-import React__default, { Children, useMemo, isValidElement, useState } from 'react';
+import React__default, { useMemo, Children, isValidElement, useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import classnames from 'classnames';
 import { u as useDataListLayoutContext } from './DataListLayoutContext-es.js';
@@ -59,19 +59,20 @@ function DataListItemInternal({ children, item, }) {
 function useGetItemActions(item) {
     var _a;
     const { itemActionComponent } = useDataListContext();
-    const itemActions = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) || [];
-    const actionsArray = Children.toArray(itemActions);
     const disableContextMenu = (_a = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.disableContextMenu) !== null && _a !== void 0 ? _a : false;
     const actions = useMemo(() => {
-        return actionsArray.filter(action => {
-            if (isValidElement(action) && action.props.visible) {
-                return action.props.visible(item);
+        var _a;
+        const children = (_a = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) !== null && _a !== void 0 ? _a : [];
+        const nodes = Children.toArray(children);
+        return nodes.filter((node) => {
+            if (isValidElement(node)) {
+                return node.props.visible ? node.props.visible(item) : true;
             }
-            return true;
+            return false;
         });
     }, [itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children, item]);
     return {
-        actions: actions,
+        actions,
         hasActions: Boolean(actions.length),
         disableContextMenu,
     };

package/dist/DataListSort-cjs.js

@@ -21,7 +21,7 @@ function DataListSort() {
             },
         ] },
         React.createElement(Combobox.Combobox.Activator, null,
-            React.createElement(Chip.ChipNamespace, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React.createElement(Chip.ChipNamespace.Suffix, null,
+            React.createElement(Chip.Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React.createElement(Chip.Chip.Suffix, null,
                 React.createElement(Icon.Icon, { name: "arrowDown", size: "small" }))))),
         sortByOptions.map(({ label, value }) => (React.createElement(Combobox.Combobox.Option, { key: value, id: value, label: label })))));
     function getSortByOptions() {

package/dist/DataListSort-es.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { C as Combobox } from './Combobox-es.js';
 import './ComboboxProvider-es.js';
-import { C as ChipNamespace } from './Chip-es.js';
+import { C as Chip } from './Chip-es.js';
 import './tslib.es6-es.js';
 import { I as Icon } from './Icon-es.js';
 
@@ -19,7 +19,7 @@ function DataListSort() {
             },
         ] },
         React__default.createElement(Combobox.Activator, null,
-            React__default.createElement(ChipNamespace, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React__default.createElement(ChipNamespace.Suffix, null,
+            React__default.createElement(Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React__default.createElement(Chip.Suffix, null,
                 React__default.createElement(Icon, { name: "arrowDown", size: "small" }))))),
         sortByOptions.map(({ label, value }) => (React__default.createElement(Combobox.Option, { key: value, id: value, label: label })))));
     function getSortByOptions() {

package/dist/DataTable/SortIcon.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 export declare enum SortDirection {
     ascending = 0,
     descending = 1,
@@ -6,5 +7,5 @@ export declare enum SortDirection {
 interface SortIconProps {
     readonly direction: SortDirection;
 }
-export declare function SortIcon({ direction }: SortIconProps): JSX.Element;
+export declare function SortIcon({ direction }: SortIconProps): React.JSX.Element;
 export {};

package/dist/DataTable/components/DataTableSortableHeader.d.ts

@@ -15,4 +15,4 @@ export interface DataTableSortableHeaderProps {
      */
     readonly onSort?: () => void;
 }
-export declare function DataTableSortableHeader(props: DataTableSortableHeaderProps & React.HTMLAttributes<HTMLTableCellElement>): JSX.Element;
+export declare function DataTableSortableHeader(props: DataTableSortableHeaderProps & React.HTMLAttributes<HTMLTableCellElement>): React.JSX.Element;

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/DatePicker.d.ts

@@ -40,6 +40,10 @@ interface BaseDatePickerProps {
      * Change handler when the selected month changes
      */
     onMonthChange?(val: Date): void;
+    /**
+     * Callback when the calendar open state changes
+     */
+    onOpenChange?(open: boolean): void;
 }
 interface DatePickerModalProps extends BaseDatePickerProps {
     /**
@@ -66,5 +70,5 @@ interface DatePickerInlineProps extends BaseDatePickerProps {
     readonly inline?: boolean;
 }
 type DatePickerProps = XOR<DatePickerModalProps, DatePickerInlineProps>;
-export declare function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly, disabled, fullWidth, smartAutofocus, maxDate, minDate, highlightDates, firstDayOfWeek, }: DatePickerProps): React.JSX.Element;
+export declare function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly, disabled, fullWidth, smartAutofocus, maxDate, minDate, highlightDates, firstDayOfWeek, }: DatePickerProps): React.JSX.Element;
 export {};

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/DatePicker/useFocusOnSelectedDate.d.ts

@@ -1,5 +1,4 @@
-import type { MutableRefObject } from "react";
 export declare function useFocusOnSelectedDate(): {
-    ref: MutableRefObject<HTMLDivElement>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
     focusOnSelectedDate: () => void;
 };

package/dist/DatePicker-cjs.js

@@ -12692,7 +12692,7 @@ function InternalActivator(props, ref) {
 }
 
 function useFocusOnSelectedDate() {
-    const ref = React.useRef();
+    const ref = React.useRef(null);
     function focusOnSelectedDate() {
         var _a;
         const selectedDateClass = ".react-datepicker__day--selected";
@@ -12705,7 +12705,7 @@ function useFocusOnSelectedDate() {
 }
 
 /*eslint max-statements: ["error", 14]*/
-function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
+function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
     const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
     const [open, setOpen] = React.useState(false);
     const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = AtlantisContext.useAtlantisContext();
@@ -12752,9 +12752,11 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     }
     function handleCalendarOpen() {
         setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
     }
     function handleCalendarClose() {
         setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     }
 }
 function useEscapeKeyToCloseDatePicker(open, ref) {

package/dist/DatePicker-es.js

@@ -1,7 +1,7 @@
 import React__default, { cloneElement, Component, createRef, useRef, useCallback, useEffect, createElement, forwardRef, isValidElement, useState } from 'react';
 import classnames from 'classnames';
 import { c as clsx } from './clsx-es.js';
-import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, t as FloatingArrow } from './floating-ui.react-es.js';
+import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, v as FloatingArrow } from './floating-ui.react-es.js';
 import ReactDOM__default from 'react-dom';
 import { useRefocusOnActivator } from '@jobber/hooks';
 import { T as Typography } from './Typography-es.js';
@@ -12690,7 +12690,7 @@ function InternalActivator(props, ref) {
 }
 
 function useFocusOnSelectedDate() {
-    const ref = useRef();
+    const ref = useRef(null);
     function focusOnSelectedDate() {
         var _a;
         const selectedDateClass = ".react-datepicker__day--selected";
@@ -12703,7 +12703,7 @@ function useFocusOnSelectedDate() {
 }
 
 /*eslint max-statements: ["error", 14]*/
-function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
+function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
     const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
     const [open, setOpen] = useState(false);
     const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = useAtlantisContext();
@@ -12750,9 +12750,11 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     }
     function handleCalendarOpen() {
         setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
     }
     function handleCalendarClose() {
         setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     }
 }
 function useEscapeKeyToCloseDatePicker(open, ref) {

package/dist/FormField/FormFieldAffix.d.ts

@@ -1,9 +1,9 @@
-import type { RefObject } from "react";
 import React from "react";
+import type { RefObject } from "react";
 import type { XOR } from "ts-xor";
 import type { Affix, FormFieldProps, Suffix } from "./FormFieldTypes";
 interface AffixLabelProps extends Affix {
-    readonly labelRef: RefObject<HTMLDivElement>;
+    readonly labelRef: RefObject<HTMLDivElement | null>;
     readonly variation?: "prefix" | "suffix";
 }
 /**

package/dist/FormField/FormFieldTypes.d.ts

@@ -109,7 +109,7 @@ export interface CommonFormFieldProps {
     version?: 1;
 }
 export interface FormFieldProps extends CommonFormFieldProps {
-    actionsRef?: RefObject<FieldActionsRef>;
+    actionsRef?: RefObject<FieldActionsRef | null>;
     /**
      * Determines if the input should be auto-focused, using the HTML attribute
      */
@@ -126,8 +126,8 @@ export interface FormFieldProps extends CommonFormFieldProps {
      * `<select>`.
      */
     readonly children?: ReactNode;
-    inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
-    wrapperRef?: RefObject<HTMLDivElement>;
+    inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null>;
+    wrapperRef?: RefObject<HTMLDivElement | null>;
     /**
      * Initial value of the input. Only use this when you need to pre-populate
      * the field with a data that is not controlled by the components state. If a
@@ -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/FormFieldWrapper.d.ts

@@ -2,7 +2,7 @@ import type { PropsWithChildren, ReactNode } from "react";
 import React from "react";
 import type { Clearable } from "@jobber/hooks";
 import type { FormFieldProps } from "./FormFieldTypes";
-export interface FormFieldWrapperProps extends FormFieldProps {
+export interface FormFieldWrapperProps extends Omit<FormFieldProps, "maxLength"> {
     readonly error: string;
     readonly identifier: string;
     readonly descriptionIdentifier: string;
@@ -10,6 +10,10 @@ export interface FormFieldWrapperProps extends FormFieldProps {
     readonly onClear?: () => void;
     readonly showMiniLabel?: boolean;
     readonly readonly?: boolean;
+    /**
+     * @deprecated Avoid using FormFieldWrapper's maxLength implementation. It is flawed and only exists for backwards compatibility on v1 components.
+     */
+    readonly maxLength?: number;
 }
 export declare function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility, showMiniLabel, wrapperRef, }: PropsWithChildren<FormFieldWrapperProps>): React.JSX.Element;
 /**

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

@@ -2,7 +2,7 @@ interface UseFormFieldFocus {
     focused: boolean;
 }
 interface UseFormFieldFocusProps {
-    wrapperRef?: React.RefObject<HTMLDivElement>;
+    wrapperRef?: React.RefObject<HTMLDivElement | null>;
 }
 export declare const formFieldFocusAttribute: {
     "data-atl-maintain-portal-focus": string;

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

@@ -1,9 +1,14 @@
 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;
-    suffixRef?: RefObject<HTMLDivElement>;
-    prefixRef?: RefObject<HTMLDivElement>;
+    /**
+     * 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;
 }
 export interface LabelPadding {
@@ -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>>;