@jobber/components 6.103.4 → 6.103.6

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

@@ -11,10 +11,13 @@ function InputGroup({ children, flowDirection = "vertical", }) {
     const className = classnames(styles.inputGroup, styles[flowDirection]);
     return React.createElement("div", { className: className }, children);
 }
+function isInputGroupElement(node) {
+    return React.isValidElement(node) && node.type === InputGroup;
+}
 function isInvalidGroupNesting(childs) {
     return React.Children.toArray(childs).some(child => {
-        if (child.type === InputGroup &&
-            child.props.flowDirection != "horizontal") {
+        if (isInputGroupElement(child) &&
+            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

@@ -9,10 +9,13 @@ function InputGroup({ children, flowDirection = "vertical", }) {
     const className = classnames(styles.inputGroup, styles[flowDirection]);
     return React__default.createElement("div", { className: className }, children);
 }
+function isInputGroupElement(node) {
+    return React__default.isValidElement(node) && node.type === InputGroup;
+}
 function isInvalidGroupNesting(childs) {
     return React__default.Children.toArray(childs).some(child => {
-        if (child.type === InputGroup &&
-            child.props.flowDirection != "horizontal") {
+        if (isInputGroupElement(child) &&
+            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/Menu.types.d.ts

@@ -8,7 +8,11 @@ export interface MenuLegacyProps extends MenuBaseProps {
     /**
      * Custom menu activator. If this is not provided a default [… More] will be used.
      */
-    readonly activator?: ReactElement;
+    readonly activator?: ReactElement<{
+        fullWidth?: boolean;
+        onClick?: (event?: React.MouseEvent) => void;
+        [key: string]: unknown;
+    }>;
     /**
      * Collection of action items.
      */

package/dist/Modal/Modal.types.d.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject, PropsWithChildren, ReactNode } from "react";
+import type { PropsWithChildren, ReactNode, RefObject } from "react";
 import type { ExtendedRefs, FloatingContext, ReferenceType, UseInteractionsReturn } from "@floating-ui/react";
 import type { XOR } from "ts-xor";
 import type sizes from "./ModalSizes.module.css";
@@ -18,7 +18,7 @@ export interface ModalContextType {
      * Ref to specify the activator element. Useful if the activator can unmount
      * and needs to be re-mounted.
      */
-    readonly activatorRef?: MutableRefObject<HTMLElement | null> | null;
+    readonly activatorRef?: RefObject<HTMLElement | null>;
     /**
      * Refs used by floating-ui to position the modal.
      */
@@ -57,7 +57,7 @@ export interface ModalContextType {
      * Tracks whether the current pointer interaction began inside the dialog.
      * Used to disambiguate outsidePress after nested overlay closes.
      */
-    readonly startedInsideRef?: MutableRefObject<boolean>;
+    readonly startedInsideRef?: RefObject<boolean>;
 }
 export interface ModalActionsProps {
     /**

package/dist/Modal/ModalContext.rebuilt.d.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 import React from "react";
 import type sizes from "./ModalSizes.module.css";
 import type { ModalContextType } from "./Modal.types";
@@ -8,7 +8,7 @@ export interface ModalProviderProps {
     readonly size?: keyof typeof sizes;
     readonly open?: boolean;
     readonly onRequestClose?: () => void;
-    readonly activatorRef?: MutableRefObject<HTMLElement | null> | null;
+    readonly activatorRef?: RefObject<HTMLElement | null>;
     readonly dismissible?: boolean;
     readonly modalLabelledBy?: string;
     readonly ariaLabel?: string;

package/dist/MultiSelect/DropDownMenu.d.ts

@@ -1,5 +1,5 @@
-import type { Dispatch } from "react";
 import React from "react";
+import type { Dispatch } from "react";
 import type { Options } from "./types";
 interface DropDownMenuProps {
     /**

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;
             }

package/dist/MultiSelect-es.js

@@ -10,7 +10,7 @@ var styles = {"dropDownMenuContainer":"zossMHCpMPU-","option":"poS49c-LqiU-","ac
 
 function DropDownMenu({ options, setOptions }) {
     const [highlightedIndex, setHighlightedIndex] = useState(0);
-    const menuDiv = useRef();
+    const menuDiv = useRef(null);
     const handleOptionClick = useCallback((clickedOption) => {
         setOptions(current => current.map(option => {
             if (option.label == clickedOption.label) {
@@ -85,13 +85,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");
+        }
     }
 }
 
@@ -99,15 +103,16 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
     const [label, setLabel] = useState(defaultLabel);
     const [menuVisible, setMenuVisible] = useState(false);
     const [focused, setFocused] = useState(false);
-    const multiSelectContainer = useRef();
-    const multiSelectRef = useRef();
+    const multiSelectContainer = useRef(null);
+    const multiSelectRef = 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) => {
@@ -117,6 +122,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
         }
     };
     function handleKeydown(event) {
+        var _a;
         const { key, metaKey, ctrlKey } = event;
         if (metaKey || ctrlKey)
             return;
@@ -129,7 +135,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;
             }

package/dist/RadioGroup/RadioGroup.d.ts

@@ -1,7 +1,8 @@
 import type { ReactElement } from "react";
 import React from "react";
+import type { RadioOptionProps } from "./RadioOption";
 export interface RadioGroupProps {
-    readonly children: ReactElement | ReactElement[];
+    readonly children: ReactElement<RadioOptionProps> | ReactElement<RadioOptionProps>[];
     /**
      * Defines the default value that will be pre-selected in the radio group.
      */

package/dist/RadioGroup/RadioOption.d.ts

@@ -33,7 +33,7 @@ interface WithRequiredChildren extends BaseRadioOptionProps {
 interface WithRequiredLabel extends BaseRadioOptionProps {
     readonly label: string;
 }
-type RadioOptionProps = XOR<WithRequiredChildren, WithRequiredLabel>;
+export type RadioOptionProps = XOR<WithRequiredChildren, WithRequiredLabel>;
 /**
  * For rendering props only. To make updates to
  * the real RadioOption, look at InternalRadioOption

package/dist/Tabs/hooks/useTabsOverflow.d.ts

@@ -1,8 +1,8 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 interface UseTabsOverflow {
     overflowRight: boolean;
     overflowLeft: boolean;
-    tabRow: MutableRefObject<HTMLUListElement>;
+    tabRow: RefObject<HTMLUListElement | null>;
 }
 export declare function useTabsOverflow(): UseTabsOverflow;
 export {};

package/dist/Tabs-cjs.js

@@ -84,7 +84,7 @@ var throttle$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(throttle_
 function useTabsOverflow() {
     const [overflowRight, setOverflowRight] = React.useState(false);
     const [overflowLeft, setOverflowLeft] = React.useState(false);
-    const tabRow = React.useRef();
+    const tabRow = React.useRef(null);
     const handleOverflowing = () => {
         if (tabRow.current) {
             const scrollWidth = tabRow.current.scrollWidth;
@@ -197,7 +197,9 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
                         }
                     }, tabIndex: activeTab === index ? 0 : -1 }));
             }))),
-        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
+        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": typeof (activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label) === "string"
+                ? activeTabProps.label
+                : undefined }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
 }
 function Tab({ label }) {
     return React.createElement(React.Fragment, null, label);

package/dist/Tabs-es.js

@@ -82,7 +82,7 @@ var throttle$1 = /*@__PURE__*/getDefaultExportFromCjs(throttle_1);
 function useTabsOverflow() {
     const [overflowRight, setOverflowRight] = useState(false);
     const [overflowLeft, setOverflowLeft] = useState(false);
-    const tabRow = useRef();
+    const tabRow = useRef(null);
     const handleOverflowing = () => {
         if (tabRow.current) {
             const scrollWidth = tabRow.current.scrollWidth;
@@ -195,7 +195,9 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
                         }
                     }, tabIndex: activeTab === index ? 0 : -1 }));
             }))),
-        React__default.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
+        React__default.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": typeof (activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label) === "string"
+                ? activeTabProps.label
+                : undefined }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
 }
 function Tab({ label }) {
     return React__default.createElement(React__default.Fragment, null, label);

package/dist/Tooltip/useTooltipPositioning.d.ts

@@ -11,7 +11,7 @@ export declare function useTooltipPositioning({ preferredPlacement, }: ToolTipPo
         }) | undefined;
     };
     placement: import("@floating-ui/utils").Placement;
-    shadowRef: import("react").RefObject<HTMLSpanElement>;
+    shadowRef: import("react").RefObject<HTMLSpanElement | null>;
     setArrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
     setTooltipRef: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
 };

package/dist/helpers-cjs.js

@@ -23,7 +23,7 @@ var jobberHooks__namespace = /*#__PURE__*/_interopNamespaceDefault(jobberHooks);
 
 const mockContainerWidth = (exactWidth) => {
     jest.spyOn(jobberHooks__namespace, "useResizeObserver").mockReturnValue([
-        { current: null },
+        { current: document.createElement("div") },
         {
             width: 1200,
             height: 800,

package/dist/helpers-es.js

@@ -2,7 +2,7 @@ import * as jobberHooks from '@jobber/hooks';
 
 const mockContainerWidth = (exactWidth) => {
     jest.spyOn(jobberHooks, "useResizeObserver").mockReturnValue([
-        { current: null },
+        { current: document.createElement("div") },
         {
             width: 1200,
             height: 800,

package/dist/index.cjs

@@ -219,7 +219,7 @@ exports.Cluster = Cluster.Cluster;
 exports.Container = Container.Container;
 exports.Cover = Cover.Cover;
 exports.Checkbox = Checkbox_index.Checkbox;
-exports.Chip = Chip.ChipNamespace;
+exports.Chip = Chip.Chip;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;
 exports.Icon = Icon.Icon;

package/dist/showToast-cjs.js

@@ -84,8 +84,8 @@ function showToast(props) {
 }
 const ToastContainer = React.forwardRef(ToastInternal);
 function ToasterOven(props) {
-    const toastRef = React.useRef();
-    React.useEffect(() => toastRef.current.add(props));
+    const toastRef = React.useRef(null);
+    React.useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(props); });
     return React.createElement(ToastContainer, { ref: toastRef });
 }
 function ToastInternal(_, ref) {

package/dist/showToast-es.js

@@ -82,8 +82,8 @@ function showToast(props) {
 }
 const ToastContainer = forwardRef(ToastInternal);
 function ToasterOven(props) {
-    const toastRef = useRef();
-    useEffect(() => toastRef.current.add(props));
+    const toastRef = useRef(null);
+    useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(props); });
     return React__default.createElement(ToastContainer, { ref: toastRef });
 }
 function ToastInternal(_, ref) {

package/dist/utils/mergeRefs.d.ts

@@ -1,6 +1,6 @@
-import type { LegacyRef, MutableRefObject, RefCallback } from "react";
+import type { LegacyRef, RefCallback, RefObject } from "react";
 /**
  * Given an array of refs, merge them into a single ref callback.
  * This is useful for cases where you need to pass a multiple refs to a component.
  */
-export declare function mergeRefs<T = unknown>(refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined | null>): RefCallback<T>;
+export declare function mergeRefs<T = unknown>(refs: Array<RefObject<T> | LegacyRef<T> | undefined | null>): RefCallback<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.103.4",
+  "version": "6.103.6",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "89fec0b77276ec2b2fc80f4fc4ec2f6d207c1ac6"
+  "gitHead": "953deb18e2cf5a920ab5e23295e15aefd3865c0f"
 }