@jobber/components 6.103.4-uncontroll-3a6b89f.8 → 6.103.5

package/dist/ComboboxActivator-cjs.js

@@ -22,8 +22,8 @@ function useComboboxActivatorAccessibility() {
 function ComboboxActivator(props) {
     const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
     const accessibilityAttributes = useComboboxActivatorAccessibility();
-    if (typeof props.children !== "function" &&
-        (props.children.type === Button.Button || props.children.type === Chip.ChipNamespace)) {
+    if (React.isValidElement(props.children) &&
+        (props.children.type === Button.Button || props.children.type === Chip.Chip)) {
         return React.cloneElement(props.children, {
             role: accessibilityAttributes.role,
             onClick: handleOpen,

package/dist/ComboboxActivator-es.js

@@ -1,7 +1,7 @@
 import React__default, { useContext } from 'react';
 import { B as Button } from './Button-es.js';
 import 'classnames';
-import { C as ChipNamespace } from './Chip-es.js';
+import { C as Chip } from './Chip-es.js';
 import './tslib.es6-es.js';
 import '@jobber/design';
 import { a as ComboboxContext } from './ComboboxProvider-es.js';
@@ -20,8 +20,8 @@ function useComboboxActivatorAccessibility() {
 function ComboboxActivator(props) {
     const { handleOpen } = React__default.useContext(ComboboxContext);
     const accessibilityAttributes = useComboboxActivatorAccessibility();
-    if (typeof props.children !== "function" &&
-        (props.children.type === Button || props.children.type === ChipNamespace)) {
+    if (React__default.isValidElement(props.children) &&
+        (props.children.type === Button || props.children.type === Chip)) {
         return React__default.cloneElement(props.children, {
             role: accessibilityAttributes.role,
             onClick: handleOpen,

package/dist/ComboboxTrigger-cjs.js

@@ -10,7 +10,7 @@ function ComboboxTrigger({ label = "Select", selected, activatorRef, }) {
     const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
-    return (React.createElement(Chip.ChipNamespace, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React.createElement(Chip.ChipNamespace.Suffix, null,
+    return (React.createElement(Chip.Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React.createElement(Chip.Chip.Suffix, null,
         React.createElement(Icon.Icon, { name: "add", size: "small" })))));
 }
 

package/dist/ComboboxTrigger-es.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-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';
 import { a as ComboboxContext } from './ComboboxProvider-es.js';
@@ -8,7 +8,7 @@ function ComboboxTrigger({ label = "Select", selected, activatorRef, }) {
     const { handleOpen } = React__default.useContext(ComboboxContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
-    return (React__default.createElement(ChipNamespace, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React__default.createElement(ChipNamespace.Suffix, null,
+    return (React__default.createElement(Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React__default.createElement(Chip.Suffix, null,
         React__default.createElement(Icon, { name: "add", size: "small" })))));
 }
 

package/dist/DataList/DataList.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import type { IconNames } from "@jobber/design";
 import type { XOR } from "ts-xor";
 import { type Breakpoints } from "./DataList.const";
@@ -144,7 +144,7 @@ export interface DataListSelectedAllType<T extends DataListObject = DataListObje
     readonly unselected: T["id"][];
 }
 export type DataListSelectedType<T extends string | number = DataListObject["id"]> = T[] | DataListSelectedAllType;
-export type LayoutRenderer<T extends DataListObject> = (item: DataListItemType<T[]>) => JSX.Element;
+export type LayoutRenderer<T extends DataListObject> = (item: DataListItemType<T[]>) => ReactElement;
 export interface DataListLayoutProps<T extends DataListObject> {
     readonly children: LayoutRenderer<T>;
     /**

package/dist/DataList/DataList.utils.d.ts

@@ -19,4 +19,4 @@ export declare function generateListItemElement<T extends DataListObject>(item:
  */
 export declare function generateHeaderElements<T extends DataListObject>(headers: DataListHeader<T>): DataListItemTypeFromHeader<T, DataListHeader<T>> | undefined;
 export declare function sortBreakpoints(sizeProp: Breakpoints[]): ("xs" | "sm" | "md" | "lg" | "xl")[];
-export declare function getExposedActions(childrenArray: ReactElement[], childCount?: number): ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare function getExposedActions(childrenArray: ReactElement[], childCount?: number): ReactElement<unknown, string | React.JSXElementConstructor<any>>[];

package/dist/DataList/components/DataListHeaderTile/components/DataListSortingOptions.d.ts

@@ -5,8 +5,8 @@ interface DataListSortingOptionsProps {
     readonly selectedOption: DataListSorting | null;
     readonly onSelectChange: (selectedOption: SortableOptions) => void;
     readonly onClose: () => void;
-    readonly optionsListRef: React.RefObject<HTMLUListElement>;
-    readonly dataListHeaderTileRef: React.RefObject<HTMLElement>;
+    readonly optionsListRef: React.RefObject<HTMLUListElement | null>;
+    readonly dataListHeaderTileRef: React.RefObject<HTMLElement | null>;
 }
 export declare function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }: DataListSortingOptionsProps): React.JSX.Element;
 export {};

package/dist/DataList/components/DataListItem/DataListItemInternal.d.ts

@@ -1,7 +1,8 @@
+import type { ReactElement } from "react";
 import React from "react";
 import type { DataListObject } from "@jobber/components/DataList/DataList.types";
 interface ListItemInternalProps<T extends DataListObject> {
-    readonly children: JSX.Element;
+    readonly children: ReactElement;
     readonly item: T;
 }
 export declare function DataListItemInternal<T extends DataListObject>({ children, item, }: ListItemInternalProps<T>): React.JSX.Element;

package/dist/DataList.utils-cjs.js

@@ -149,7 +149,9 @@ function sortBreakpoints(sizeProp) {
 function getExposedActions(childrenArray, childCount = 2) {
     const firstNChildren = childrenArray.slice(0, childCount);
     return firstNChildren.reduce((result, child, i) => {
+        // @ts-expect-error - TODO: fix props are type unknown
         const hasIcon = Boolean(child.props.icon);
+        // @ts-expect-error - TODO: fix props are type unknown
         const isAlwaysVisible = child.props.alwaysVisible; // If true, the child action will always be visible and not nested in the dropdown.
         if (isAlwaysVisible === false ||
             (isAlwaysVisible === undefined && !hasIcon)) {

package/dist/DataList.utils-es.js

@@ -147,7 +147,9 @@ function sortBreakpoints(sizeProp) {
 function getExposedActions(childrenArray, childCount = 2) {
     const firstNChildren = childrenArray.slice(0, childCount);
     return firstNChildren.reduce((result, child, i) => {
+        // @ts-expect-error - TODO: fix props are type unknown
         const hasIcon = Boolean(child.props.icon);
+        // @ts-expect-error - TODO: fix props are type unknown
         const isAlwaysVisible = child.props.alwaysVisible; // If true, the child action will always be visible and not nested in the dropdown.
         if (isAlwaysVisible === false ||
             (isAlwaysVisible === undefined && !hasIcon)) {

package/dist/DataListActions-cjs.js

@@ -14,7 +14,9 @@ function DataListActions({ children, itemsToExpose = 2, }) {
     const exposedActions = DataList_utils.getExposedActions(childrenArray, itemsToExpose);
     childrenArray.splice(0, exposedActions.length);
     return (React.createElement(React.Fragment, null,
-        exposedActions.map(({ props }) => {
+        exposedActions.map(({ props: actionProps }) => {
+            const props = actionProps;
+            // @ts-expect-error - TODO: fix activeItem might be undefined
             const isVisible = props.visible ? props.visible(activeItem) : true;
             const hasIconOrAlwaysVisible = props.icon || props.alwaysVisible;
             if (!isVisible || !hasIconOrAlwaysVisible) {
@@ -31,12 +33,17 @@ function DataListActions({ children, itemsToExpose = 2, }) {
             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, 
+                    // @ts-expect-error - TODO: fix props.label might be a function
+                    key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
                         var _a;
+                        // @ts-expect-error - TODO: fix activeItem might be undefined
                         (_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 },
+            return (
+            // @ts-expect-error - TODO: fix actionLabel might be undefined
+            React.createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },
                 React.createElement(Button.Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
                         var _a, _b;
                         if (activeItem) {

package/dist/DataListActions-es.js

@@ -12,7 +12,9 @@ function DataListActions({ children, itemsToExpose = 2, }) {
     const exposedActions = getExposedActions(childrenArray, itemsToExpose);
     childrenArray.splice(0, exposedActions.length);
     return (React__default.createElement(React__default.Fragment, null,
-        exposedActions.map(({ props }) => {
+        exposedActions.map(({ props: actionProps }) => {
+            const props = actionProps;
+            // @ts-expect-error - TODO: fix activeItem might be undefined
             const isVisible = props.visible ? props.visible(activeItem) : true;
             const hasIconOrAlwaysVisible = props.icon || props.alwaysVisible;
             if (!isVisible || !hasIconOrAlwaysVisible) {
@@ -29,12 +31,17 @@ function DataListActions({ children, itemsToExpose = 2, }) {
             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, 
+                    // @ts-expect-error - TODO: fix props.label might be a function
+                    key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
                         var _a;
+                        // @ts-expect-error - TODO: fix activeItem might be undefined
                         (_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 },
+            return (
+            // @ts-expect-error - TODO: fix actionLabel might be undefined
+            React__default.createElement(Tooltip, { key: actionLabel, message: actionLabel },
                 React__default.createElement(Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
                         var _a, _b;
                         if (activeItem) {

package/dist/DataListItem-cjs.js

@@ -66,7 +66,9 @@ function useGetItemActions(item) {
     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 => {
+            // @ts-expect-error - TODO: fix action.props type is unknown
             if (React.isValidElement(action) && action.props.visible) {
+                // @ts-expect-error - TODO: fix action.props type is unknown
                 return action.props.visible(item);
             }
             return true;

package/dist/DataListItem-es.js

@@ -64,7 +64,9 @@ function useGetItemActions(item) {
     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 => {
+            // @ts-expect-error - TODO: fix action.props type is unknown
             if (isValidElement(action) && action.props.visible) {
+                // @ts-expect-error - TODO: fix action.props type is unknown
                 return action.props.visible(item);
             }
             return true;

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/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";

package/dist/DatePicker-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";

package/dist/FormField/FormFieldAffix.d.ts

@@ -3,7 +3,7 @@ import React 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

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

@@ -2,8 +2,8 @@ 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"> {
     readonly error?: string;
-    suffixRef?: RefObject<HTMLDivElement>;
-    prefixRef?: RefObject<HTMLDivElement>;
+    suffixRef?: RefObject<HTMLDivElement | null>;
+    prefixRef?: RefObject<HTMLDivElement | null>;
     showMiniLabel?: boolean;
 }
 export interface LabelPadding {

package/dist/FormField-cjs.js

@@ -150,8 +150,8 @@ function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
 }
 
 function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
-    const prefixRef = React.useRef();
-    const suffixRef = React.useRef();
+    const prefixRef = React.useRef(null);
+    const suffixRef = React.useRef(null);
     const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
         align,
         max,

package/dist/FormField-es.js

@@ -148,8 +148,8 @@ function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
 }
 
 function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
-    const prefixRef = useRef();
-    const suffixRef = useRef();
+    const prefixRef = useRef(null);
+    const suffixRef = useRef(null);
     const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
         align,
         max,

package/dist/InputGroup-cjs.js

@@ -14,6 +14,7 @@ function InputGroup({ children, flowDirection = "vertical", }) {
 function isInvalidGroupNesting(childs) {
     return React.Children.toArray(childs).some(child => {
         if (child.type === InputGroup &&
+            // @ts-expect-error - TODO: fix child.props type is unknown
             child.props.flowDirection != "horizontal") {
             console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);
             return true;

package/dist/InputGroup-es.js

@@ -12,6 +12,7 @@ function InputGroup({ children, flowDirection = "vertical", }) {
 function isInvalidGroupNesting(childs) {
     return React__default.Children.toArray(childs).some(child => {
         if (child.type === InputGroup &&
+            // @ts-expect-error - TODO: fix child.props type is unknown
             child.props.flowDirection != "horizontal") {
             console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);
             return true;

package/dist/InputText/InputText.d.ts

@@ -26,7 +26,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly prefix?: import("../FormField").Affix | undefined;
     readonly autofocus?: boolean | undefined;
     readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
     readonly maxLength?: number | undefined;
     readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
@@ -60,7 +60,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly prefix?: import("../FormField").Affix | undefined;
     readonly autofocus?: boolean | undefined;
     readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
     readonly maxLength?: number | undefined;
     readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;

package/dist/InputText/useInputTextActions.d.ts

@@ -1,7 +1,7 @@
 import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
 import type { InputTextRebuiltProps } from "./InputText.types";
 export interface useInputTextActionsProps extends Pick<InputTextRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown"> {
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
 }
 /**
  * Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.

package/dist/InputText/useInputTextFormField.d.ts

@@ -69,7 +69,7 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         capture?: boolean | "user" | "environment" | undefined;
         checked?: boolean | undefined;
         form?: string | undefined;
-        formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
@@ -135,6 +135,10 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
         part?: string | undefined;
@@ -337,6 +341,8 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onScroll?: import("react").UIEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onScrollCapture?: import("react").UIEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onScrollEnd?: import("react").UIEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onScrollEndCapture?: import("react").UIEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onWheel?: import("react").WheelEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onWheelCapture?: import("react").WheelEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onAnimationStart?: import("react").AnimationEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
@@ -345,8 +351,16 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onAnimationIteration?: import("react").AnimationEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onToggle?: import("react").ToggleEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onBeforeToggle?: import("react").ToggleEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionCancel?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionRun?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionStart?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     };
     descriptionIdentifier: string;
 };

package/dist/InputText/useTextAreaResize.d.ts

@@ -6,8 +6,8 @@ import type { RowRange } from "./InputText.types";
 export declare function useTextAreaResize({ rows, value, inputRef, wrapperRef, }: {
     rows?: number | RowRange;
     value: string | number | Date | undefined;
-    inputRef: RefObject<HTMLTextAreaElement | HTMLInputElement>;
-    wrapperRef: RefObject<HTMLDivElement>;
+    inputRef: RefObject<HTMLTextAreaElement | HTMLInputElement | null>;
+    wrapperRef: RefObject<HTMLDivElement | null>;
 }): {
     resize: () => void;
     rowRange: RowRange;

package/dist/InternalChipDismissible-cjs.js

@@ -14,9 +14,9 @@ var Chip = require('./Chip-cjs.js');
 require('./tslib.es6-cjs.js');
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React.createElement(Chip.ChipNamespace, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
-        prefix && React.createElement(Chip.ChipNamespace.Prefix, null, prefix),
-        suffix && React.createElement(Chip.ChipNamespace.Suffix, null, suffix)));
+    return (React.createElement(Chip.Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+        prefix && React.createElement(Chip.Chip.Prefix, null, prefix),
+        suffix && React.createElement(Chip.Chip.Suffix, null, suffix)));
 }
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};

package/dist/InternalChipDismissible-es.js

@@ -8,13 +8,13 @@ import { F as FloatingPortal } from './floating-ui.react-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
 import { S as Spinner } from './Spinner-es.js';
-import { C as ChipNamespace, I as InternalChipButton } from './Chip-es.js';
+import { C as Chip, I as InternalChipButton } from './Chip-es.js';
 import './tslib.es6-es.js';
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React__default.createElement(ChipNamespace, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
-        prefix && React__default.createElement(ChipNamespace.Prefix, null, prefix),
-        suffix && React__default.createElement(ChipNamespace.Suffix, null, suffix)));
+    return (React__default.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+        prefix && React__default.createElement(Chip.Prefix, null, prefix),
+        suffix && React__default.createElement(Chip.Suffix, null, suffix)));
 }
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};

package/dist/Menu-cjs.js

@@ -126,6 +126,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     const { width } = jobberHooks.useWindowDimensions();
     const buttonID = React.useId();
     const menuID = React.useId();
+    // @ts-expect-error - TODO: fix activator.props type is unknown
     const fullWidth = ((_a = activator === null || activator === void 0 ? void 0 : activator.props) === null || _a === void 0 ? void 0 : _a.fullWidth) || false;
     const wrapperClasses = classnames(styles.wrapper, {
         [styles.fullWidth]: fullWidth,
@@ -198,6 +199,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         }))));
     return (React.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
         React.createElement("div", Object.assign({ ref: setReferenceElement }, getReferenceProps()), React.cloneElement(activator, {
+            // @ts-expect-error - TODO: fix activator.props type is unknown, onClick doesn't exist in unknown type
             onClick: toggle(activator.props.onClick),
             id: buttonID,
             ariaControls: menuID,

package/dist/Menu-es.js

@@ -124,6 +124,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     const { width } = useWindowDimensions();
     const buttonID = useId();
     const menuID = useId();
+    // @ts-expect-error - TODO: fix activator.props type is unknown
     const fullWidth = ((_a = activator === null || activator === void 0 ? void 0 : activator.props) === null || _a === void 0 ? void 0 : _a.fullWidth) || false;
     const wrapperClasses = classnames(styles.wrapper, {
         [styles.fullWidth]: fullWidth,
@@ -196,6 +197,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         }))));
     return (React__default.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
         React__default.createElement("div", Object.assign({ ref: setReferenceElement }, getReferenceProps()), React__default.cloneElement(activator, {
+            // @ts-expect-error - TODO: fix activator.props type is unknown, onClick doesn't exist in unknown type
             onClick: toggle(activator.props.onClick),
             id: buttonID,
             ariaControls: menuID,

package/dist/MultiSelect-cjs.js

@@ -12,7 +12,7 @@ var styles = {"dropDownMenuContainer":"zossMHCpMPU-","option":"poS49c-LqiU-","ac
 
 function DropDownMenu({ options, setOptions }) {
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
-    const menuDiv = React.useRef();
+    const menuDiv = React.useRef(null);
     const handleOptionClick = React.useCallback((clickedOption) => {
         setOptions(current => current.map(option => {
             if (option.label == clickedOption.label) {
@@ -87,13 +87,17 @@ function DropDownMenu({ options, setOptions }) {
         event.preventDefault();
         const newIndex = Math.max(0, highlightedIndex - 1);
         handleOptionFocus(newIndex);
-        scrollMenuIfItemNotInView(menuDiv.current, "up");
+        if (menuDiv.current) {
+            scrollMenuIfItemNotInView(menuDiv.current, "up");
+        }
     }
     function handlePressDown(event) {
         event.preventDefault();
         const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
         handleOptionFocus(newIndex);
-        scrollMenuIfItemNotInView(menuDiv.current, "down");
+        if (menuDiv.current) {
+            scrollMenuIfItemNotInView(menuDiv.current, "down");
+        }
     }
 }
 
@@ -101,15 +105,16 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
     const [label, setLabel] = React.useState(defaultLabel);
     const [menuVisible, setMenuVisible] = React.useState(false);
     const [focused, setFocused] = React.useState(false);
-    const multiSelectContainer = React.useRef();
-    const multiSelectRef = React.useRef();
+    const multiSelectContainer = React.useRef(null);
+    const multiSelectRef = React.useRef(null);
     const multiSelectClass = classnames(styles$1.multiSelect, {
         [styles$1.active]: menuVisible,
         [styles$1.large]: size === "large",
         [styles$1.small]: size === "small",
     });
     function handleMenuVisibility() {
-        multiSelectRef.current.focus();
+        var _a;
+        (_a = multiSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         setMenuVisible(!menuVisible);
     }
     const handleClickOutside = (e) => {
@@ -119,6 +124,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
         }
     };
     function handleKeydown(event) {
+        var _a;
         const { key, metaKey, ctrlKey } = event;
         if (metaKey || ctrlKey)
             return;
@@ -131,7 +137,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
                 break;
             }
             case "Escape": {
-                multiSelectRef.current.focus();
+                (_a = multiSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 setMenuVisible(false);
                 break;
             }