@jobber/components 6.103.5 → 6.103.6

package/dist/Autocomplete/components/MenuList.d.ts

@@ -6,7 +6,7 @@ interface MenuListProps<T extends OptionLike> {
     readonly activeIndex: number | null;
     readonly indexOffset?: number;
     readonly getItemProps: (userProps?: Record<string, unknown>) => Record<string, unknown>;
-    readonly listRef: React.MutableRefObject<Array<HTMLElement | null>>;
+    readonly listRef: React.RefObject<Array<HTMLElement | null>>;
     readonly listboxId: string;
     readonly customRenderOption?: AutocompleteRebuiltProps<T, false>["customRenderOption"];
     readonly customRenderSection?: AutocompleteRebuiltProps<T, false>["customRenderSection"];

package/dist/Autocomplete/components/PersistentRegion.d.ts

@@ -7,7 +7,7 @@ interface PersistentRegionProps<T extends OptionLike> {
     readonly indexOffset: number;
     readonly listboxId?: string;
     readonly getItemProps: (args?: Record<string, unknown>) => Record<string, unknown>;
-    readonly listRef: React.MutableRefObject<Array<HTMLElement | null>>;
+    readonly listRef: React.RefObject<Array<HTMLElement | null>>;
     readonly customRenderHeader?: AutocompleteRebuiltProps<T, false>["customRenderHeader"];
     readonly customRenderFooter?: AutocompleteRebuiltProps<T, false>["customRenderFooter"];
     readonly className?: string;

package/dist/Autocomplete/hooks/useAutocompleteListNav.d.ts

@@ -8,7 +8,7 @@ export interface UseAutocompleteListNavReturn {
     getItemProps: UseInteractionsReturn["getItemProps"];
     activeIndex: number | null;
     setActiveIndex: (index: number | null) => void;
-    listRef: React.MutableRefObject<Array<HTMLElement | null>>;
+    listRef: React.RefObject<Array<HTMLElement | null>>;
     open: boolean;
     setOpen: (open: boolean) => void;
     setReferenceElement: (el: HTMLElement | null) => void;

package/dist/Autocomplete/useAutocomplete.d.ts

@@ -55,7 +55,7 @@ export declare function useAutocomplete<Value extends OptionLike, Multiple exten
     setOpen: (open: boolean) => void;
     activeIndex: number | null;
     setActiveIndex: (index: number | null) => void;
-    listRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    listRef: React.RefObject<(HTMLElement | null)[]>;
     onSelection: (option: Value) => void;
     onAction: (action: ActionConfig) => void;
     onInputChangeFromUser: (val: string) => void;

package/dist/Combobox/ComboboxProvider.d.ts

@@ -1,5 +1,5 @@
-import type { MutableRefObject } from "react";
 import React from "react";
+import type { RefObject } from "react";
 import { type ComboboxOption } from "./Combobox.types";
 export interface ComboboxProviderProps {
     readonly children: React.ReactNode;
@@ -8,7 +8,7 @@ export interface ComboboxProviderProps {
     readonly open: boolean;
     readonly handleClose: () => void;
     readonly handleOpen: () => void;
-    readonly shouldScroll: MutableRefObject<boolean>;
+    readonly shouldScroll: RefObject<boolean>;
     readonly searchValue: string;
     readonly label?: string;
     readonly onClear?: () => void;

package/dist/Combobox/hooks/useComboboxContent.d.ts

@@ -1,6 +1,7 @@
+import type { RefObject } from "react";
 import { type ComboboxOption } from "../Combobox.types";
 interface useComboboxContent {
-    optionsListRef: React.RefObject<HTMLUListElement | null>;
+    optionsListRef: RefObject<HTMLUListElement | null>;
     onClear?: () => void;
     onSelectAll?: (selection: ComboboxOption[]) => void;
 }

package/dist/Combobox/hooks/useMakeComboboxHandlers.d.ts

@@ -5,4 +5,4 @@ export interface UseMakeComboboxHandlersReturn {
     handleSelection: (selection: ComboboxOption) => void;
     handleOpen: () => void;
 }
-export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, open: boolean, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void, onSearch?: (searchValue: string) => void): UseMakeComboboxHandlersReturn;
+export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, open: boolean, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.RefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void, onSearch?: (searchValue: string) => void): UseMakeComboboxHandlersReturn;

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

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
 import type { IconNames } from "@jobber/design";
 import type { XOR } from "ts-xor";
 import { type Breakpoints } from "./DataList.const";
@@ -289,7 +289,7 @@ export interface DataListActionProps<T extends DataListObject> {
     /**
      * Determine if the action is visible for a given item.
      */
-    readonly visible?: (item: T) => boolean;
+    readonly visible?: (item?: T) => boolean;
     /**
      * The callback function when the action is clicked.
      */

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

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import React from "react";
-import type { DataListHeader, DataListItemType, DataListItemTypeFromHeader, DataListObject } from "./DataList.types";
+import type { DataListActionProps, DataListHeader, DataListItemType, DataListItemTypeFromHeader, DataListObject } from "./DataList.types";
 import type { Breakpoints } from "./DataList.const";
 /**
  * Return the child component that matches the `type` provided
@@ -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<unknown, string | React.JSXElementConstructor<any>>[];
+export declare function getExposedActions<T extends DataListObject>(childrenArray: ReactElement<DataListActionProps<T>>[], childCount?: number): ReactElement<DataListActionProps<T>, string | React.JSXElementConstructor<any>>[];

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

@@ -1,5 +1,4 @@
-import type { ReactElement } from "react";
-import React from "react";
+import React, { type ReactElement } from "react";
 import type { DataListObject } from "@jobber/components/DataList/DataList.types";
 interface ListItemInternalProps<T extends DataListObject> {
     readonly children: ReactElement;

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.utils-cjs.js

@@ -149,9 +149,7 @@ 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,9 +147,7 @@ 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,9 +14,7 @@ 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: actionProps }) => {
-            const props = actionProps;
-            // @ts-expect-error - TODO: fix activeItem might be undefined
+        exposedActions.map(({ props }) => {
             const isVisible = props.visible ? props.visible(activeItem) : true;
             const hasIconOrAlwaysVisible = props.icon || props.alwaysVisible;
             if (!isVisible || !hasIconOrAlwaysVisible) {
@@ -29,21 +27,18 @@ 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, 
-                    // @ts-expect-error - TODO: fix props.label might be a function
-                    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;
-                        // @ts-expect-error - TODO: fix activeItem might be undefined
-                        (_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 (
-            // @ts-expect-error - TODO: fix actionLabel might be undefined
-            React.createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },
+            return (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,9 +12,7 @@ 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: actionProps }) => {
-            const props = actionProps;
-            // @ts-expect-error - TODO: fix activeItem might be undefined
+        exposedActions.map(({ props }) => {
             const isVisible = props.visible ? props.visible(activeItem) : true;
             const hasIconOrAlwaysVisible = props.icon || props.alwaysVisible;
             if (!isVisible || !hasIconOrAlwaysVisible) {
@@ -27,21 +25,18 @@ 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, 
-                    // @ts-expect-error - TODO: fix props.label might be a function
-                    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;
-                        // @ts-expect-error - TODO: fix activeItem might be undefined
-                        (_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 (
-            // @ts-expect-error - TODO: fix actionLabel might be undefined
-            React__default.createElement(Tooltip, { key: actionLabel, message: actionLabel },
+            return (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

@@ -61,21 +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 => {
-            // @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);
+        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,21 +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 => {
-            // @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);
+        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/FormField/FormFieldAffix.d.ts

@@ -1,5 +1,5 @@
-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 {

package/dist/InputGroup-cjs.js

@@ -11,11 +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 &&
-            // @ts-expect-error - TODO: fix child.props type is unknown
-            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,11 +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 &&
-            // @ts-expect-error - TODO: fix child.props type is unknown
-            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/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/Menu-cjs.js

@@ -126,7 +126,6 @@ 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,
@@ -199,7 +198,6 @@ 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,7 +124,6 @@ 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,
@@ -197,7 +196,6 @@ 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/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/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/RadioGroup-cjs.js

@@ -31,13 +31,7 @@ function RadioGroup({ children, value, ariaLabel, onChange, name = React.useId()
     const className = classnames(styles.radioGroup, {
         [styles.directionHorizontal]: direction === "horizontal",
     });
-    return (React.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: className }, React.Children.map(children, option => (
-    // @ts-expect-error - TODO: it thinks value is missing, but it's probably coming from option.props
-    React.createElement(InternalRadioOption
-    // @ts-expect-error - TODO: fix option.props type is unknown
-    , Object.assign({ 
-        // @ts-expect-error - TODO: fix option.props type is unknown
-        checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
+    return (React.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: className }, React.Children.map(children, option => (React.createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
     function handleChange(newValue) {
         if (newValue !== value) {
             onChange(newValue);

package/dist/RadioGroup-es.js

@@ -29,13 +29,7 @@ function RadioGroup({ children, value, ariaLabel, onChange, name = useId(), dire
     const className = classnames(styles.radioGroup, {
         [styles.directionHorizontal]: direction === "horizontal",
     });
-    return (React__default.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: className }, React__default.Children.map(children, option => (
-    // @ts-expect-error - TODO: it thinks value is missing, but it's probably coming from option.props
-    React__default.createElement(InternalRadioOption
-    // @ts-expect-error - TODO: fix option.props type is unknown
-    , Object.assign({ 
-        // @ts-expect-error - TODO: fix option.props type is unknown
-        checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
+    return (React__default.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: className }, React__default.Children.map(children, option => (React__default.createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
     function handleChange(newValue) {
         if (newValue !== value) {
             onChange(newValue);

package/dist/Tabs-cjs.js

@@ -187,9 +187,7 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
                 if (!isChildTab(child)) {
                     return child;
                 }
-                const index = tabChildren.findIndex(
-                // @ts-expect-error - TODO: fix tab.props type is unknown
-                tab => tab.props.label === child.props.label);
+                const index = tabChildren.findIndex(tab => tab.props.label === child.props.label);
                 return (React.createElement(InternalTab, { label: child.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: child.props.onClick, ref: el => {
                         if (el) {
                             tabRefs.current.set(index, el);
@@ -199,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

@@ -185,9 +185,7 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
                 if (!isChildTab(child)) {
                     return child;
                 }
-                const index = tabChildren.findIndex(
-                // @ts-expect-error - TODO: fix tab.props type is unknown
-                tab => tab.props.label === child.props.label);
+                const index = tabChildren.findIndex(tab => tab.props.label === child.props.label);
                 return (React__default.createElement(InternalTab, { label: child.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: child.props.onClick, ref: el => {
                         if (el) {
                             tabRefs.current.set(index, el);
@@ -197,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/helpers-cjs.js

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

package/dist/helpers-es.js

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

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.5",
+  "version": "6.103.6",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4b120bbb1789aa1b6b9a8eaf157be90d4ea15efc"
+  "gitHead": "953deb18e2cf5a920ab5e23295e15aefd3865c0f"
 }