@jobber/components 6.103.2 → 6.103.4-JOB-138679-1657252.19

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

@@ -19,7 +19,7 @@ const SPACEBAR_KEY = " ";
  * Please use `<Card onClick={onClick} />` component instead.
  */
 function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
-    const cardRef = React.useRef();
+    const cardRef = React.useRef(null);
     return (React.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;

package/dist/Card-es.js

@@ -17,7 +17,7 @@ const SPACEBAR_KEY = " ";
  * Please use `<Card onClick={onClick} />` component instead.
  */
 function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
-    const cardRef = useRef();
+    const cardRef = useRef(null);
     return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;

package/dist/Chip/Chip.d.ts

@@ -2,8 +2,7 @@ import React from "react";
 import { ChipPrefix } from "./components/ChipPrefix/Chip.Prefix";
 import { ChipSuffix } from "./components/ChipSuffix/Chip.Suffix";
 import type { ChipProps } from "./Chip.types";
-declare const ChipNamespace: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
     Prefix: typeof ChipPrefix;
     Suffix: typeof ChipSuffix;
 };
-export { ChipNamespace as Chip };

package/dist/Chip/hooks/useChildComponent.d.ts

@@ -1,8 +1,9 @@
-import type { ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
+import React from "react";
 /**
  * Returns the first React Child that receives `true` from isCorrectComponent
  * @param children React Children
- * @param isCorrectComponent a function that accepts a JSX Element and returns a boolean.
+ * @param isCorrectComponent a function that accepts a ReactElement and returns a boolean.
  * @returns The first child component that returns true on isCorrectComponent
  */
-export declare function useChildComponent(children: ReactNode | undefined, isCorrectComponent: (toCheck: JSX.Element) => boolean): JSX.Element | undefined;
+export declare function useChildComponent(children: ReactNode | undefined, isCorrectComponent: (toCheck: ReactElement) => boolean): ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;

package/dist/Chip/index.cjs

@@ -20,6 +20,6 @@ require('../tslib.es6-cjs.js');
 
 
 
-exports.Chip = Chip.ChipNamespace;
+exports.Chip = Chip.Chip;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;

package/dist/Chip-cjs.js

@@ -21,14 +21,15 @@ function ChipPrefix({ children }) {
 var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp8oIxJ0-","invalid":"H7VZzUBkgjk-","disabled":"-yQxZSnxBBU-","button":"ngKOY8l4BG4-","icon":"rzbiB2nz36Q-","spinning":"X7Bx5CDPfDs-"};
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
-    const buttonRef = React.useRef();
+    const buttonRef = React.useRef(null);
     return (React.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React.createElement(Icon.Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
+        var _a;
         if (document.activeElement === buttonRef.current &&
             (event.key === " " || event.key === "Enter")) {
             event.stopPropagation();
-            buttonRef.current.click();
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
     }
     function handleKeyDown(event) {
@@ -124,12 +125,12 @@ function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, headin
     return message;
 }
 ChipComponent.displayName = "Chip";
-const ChipNamespace = Object.assign(ChipComponent, {
+const Chip = Object.assign(ChipComponent, {
     Prefix: ChipPrefix,
     Suffix: ChipSuffix,
 });
 
-exports.ChipNamespace = ChipNamespace;
+exports.Chip = Chip;
 exports.InternalChipButton = InternalChipButton;
 exports.styles = styles$1;
 exports.styles$1 = styles;

package/dist/Chip-es.js

@@ -19,14 +19,15 @@ function ChipPrefix({ children }) {
 var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp8oIxJ0-","invalid":"H7VZzUBkgjk-","disabled":"-yQxZSnxBBU-","button":"ngKOY8l4BG4-","icon":"rzbiB2nz36Q-","spinning":"X7Bx5CDPfDs-"};
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
-    const buttonRef = useRef();
+    const buttonRef = useRef(null);
     return (React__default.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React__default.createElement(Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
+        var _a;
         if (document.activeElement === buttonRef.current &&
             (event.key === " " || event.key === "Enter")) {
             event.stopPropagation();
-            buttonRef.current.click();
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
     }
     function handleKeyDown(event) {
@@ -122,9 +123,9 @@ function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, headin
     return message;
 }
 ChipComponent.displayName = "Chip";
-const ChipNamespace = Object.assign(ChipComponent, {
+const Chip = Object.assign(ChipComponent, {
     Prefix: ChipPrefix,
     Suffix: ChipSuffix,
 });
 
-export { ChipNamespace as C, InternalChipButton as I, styles as a, styles$1 as s };
+export { Chip as C, InternalChipButton as I, styles as a, styles$1 as s };

package/dist/ChipDismissible-cjs.js

@@ -7,14 +7,14 @@ var Chip = require('./Chip-cjs.js');
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = tslib_es6.__rest(_a, ["selected"]);
-    return (React.createElement(Chip.ChipNamespace, Object.assign({}, rest),
-        React.createElement(Chip.ChipNamespace.Suffix, { className: selected ? Chip.styles.selected : "" },
+    return (React.createElement(Chip.Chip, Object.assign({}, rest),
+        React.createElement(Chip.Chip.Suffix, { className: selected ? Chip.styles.selected : "" },
             React.createElement(Icon.Icon, { name: selected ? "checkmark" : "add", size: "small", color: "interactiveSubtle" }))));
 }
 
 function ChipDismissible(props) {
-    return (React.createElement(Chip.ChipNamespace, Object.assign({}, props),
-        React.createElement(Chip.ChipNamespace.Suffix, null,
+    return (React.createElement(Chip.Chip, Object.assign({}, props),
+        React.createElement(Chip.Chip.Suffix, null,
             React.createElement(Icon.Icon, { name: "cross", size: "small", color: "interactiveSubtle" }))));
 }
 

package/dist/ChipDismissible-es.js

@@ -1,18 +1,18 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default from 'react';
 import { I as Icon } from './Icon-es.js';
-import { C as ChipNamespace, s as styles } from './Chip-es.js';
+import { C as Chip, s as styles } from './Chip-es.js';
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = __rest(_a, ["selected"]);
-    return (React__default.createElement(ChipNamespace, Object.assign({}, rest),
-        React__default.createElement(ChipNamespace.Suffix, { className: selected ? styles.selected : "" },
+    return (React__default.createElement(Chip, Object.assign({}, rest),
+        React__default.createElement(Chip.Suffix, { className: selected ? styles.selected : "" },
             React__default.createElement(Icon, { name: selected ? "checkmark" : "add", size: "small", color: "interactiveSubtle" }))));
 }
 
 function ChipDismissible(props) {
-    return (React__default.createElement(ChipNamespace, Object.assign({}, props),
-        React__default.createElement(ChipNamespace.Suffix, null,
+    return (React__default.createElement(Chip, Object.assign({}, props),
+        React__default.createElement(Chip.Suffix, null,
             React__default.createElement(Icon, { name: "cross", size: "small", color: "interactiveSubtle" }))));
 }
 

package/dist/Chips/InternalChipDismissible/hooks/useInView.d.ts

@@ -1,4 +1,4 @@
 export declare function useInView<T extends Element>(): {
-    ref: import("react").RefObject<T>;
+    ref: import("react").RefObject<T | null>;
     isInView: boolean;
 };

package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissibleInput.d.ts

@@ -8,7 +8,7 @@ export declare function useInternalChipDismissibleInput({ options, isLoadingMore
     searchValue: string;
     shouldCancelBlur: boolean;
     menuId: string;
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     activeOption: ChipDismissibleInputOptionProps;
     hasAvailableOptions: boolean;
     nextOptionIndex: number;

package/dist/Chips/InternalChipDismissible/hooks/useScrollToActive.d.ts

@@ -1 +1 @@
-export declare function useScrollToActive(index: number): import("react").MutableRefObject<HTMLDivElement | null>;
+export declare function useScrollToActive(index: number): import("react").RefObject<HTMLDivElement | null>;

package/dist/Combobox/Combobox.d.ts

@@ -1,8 +1,9 @@
+import React from "react";
 import type { ComboboxProps } from "./Combobox.types";
 import { ComboboxAction } from "./components/ComboboxAction";
 import { ComboboxOption as ComboboxOptionComponent } from "./components/ComboboxOption/ComboboxOption";
 import { ComboboxActivator } from "./components/ComboboxActivator";
-export declare function Combobox(props: ComboboxProps): JSX.Element;
+export declare function Combobox(props: ComboboxProps): React.JSX.Element;
 export declare namespace Combobox {
     var Activator: typeof ComboboxActivator;
     var Action: typeof ComboboxAction;

package/dist/Combobox/Combobox.types.d.ts

@@ -165,7 +165,7 @@ export interface ComboboxContentProps {
     /**
      * Reference to the wrapping div element of all the Combobox pieces
      */
-    readonly wrapperRef: React.RefObject<HTMLDivElement>;
+    readonly wrapperRef: React.RefObject<HTMLDivElement | null>;
     /**
      * Is the Combobox open
      */
@@ -235,7 +235,7 @@ export interface ComboboxListProps {
     /**
      * A ref to the list element.
      */
-    readonly optionsListRef: React.RefObject<HTMLUListElement>;
+    readonly optionsListRef: React.RefObject<HTMLUListElement | null>;
     /**
      * The current search term. Used in the no results message.
      */

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,11 +8,11 @@ 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;
     readonly onSelectAll?: (selection: ComboboxOption[]) => void;
 }
 export declare const ComboboxContext: React.Context<Omit<ComboboxProviderProps, "children">>;
-export declare function ComboboxContextProvider({ children, ...props }: ComboboxProviderProps): JSX.Element;
+export declare function ComboboxContextProvider({ children, ...props }: ComboboxProviderProps): React.JSX.Element;

package/dist/Combobox/components/ComboboxActivator/ComboboxActivator.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ComboboxActivatorProps } from "../../Combobox.types";
-export declare function ComboboxActivator(props: ComboboxActivatorProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare function ComboboxActivator(props: ComboboxActivatorProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

package/dist/Combobox/components/ComboboxContent/ComboboxContent.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import type { ComboboxContentProps } from "../../Combobox.types";
-export declare function ComboboxContent(props: ComboboxContentProps): JSX.Element;
+export declare function ComboboxContent(props: ComboboxContentProps): React.JSX.Element;

package/dist/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import type { ComboboxHeaderProps } from "../../../Combobox.types";
-export declare function ComboboxContentHeader(props: ComboboxHeaderProps): JSX.Element;
+export declare function ComboboxContentHeader(props: ComboboxHeaderProps): React.JSX.Element;

package/dist/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import type { ComboboxListProps } from "../../../Combobox.types";
-export declare function ComboboxContentList(props: ComboboxListProps): JSX.Element;
+export declare function ComboboxContentList(props: ComboboxListProps): React.JSX.Element;

package/dist/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import type { ComboboxSearchProps } from "../../../Combobox.types";
-export declare function ComboboxContentSearch(props: ComboboxSearchProps): JSX.Element;
+export declare function ComboboxContentSearch(props: ComboboxSearchProps): React.JSX.Element;

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

@@ -3,7 +3,7 @@ import type React from "react";
 import type { UseMakeComboboxHandlersReturn } from "./useMakeComboboxHandlers";
 import { type ComboboxOption } from "../Combobox.types";
 type UseComboboxReturn = {
-    wrapperRef: React.RefObject<HTMLDivElement>;
+    wrapperRef: React.RefObject<HTMLDivElement | null>;
     searchValue: string;
     setSearchValue: Dispatch<React.SetStateAction<string>>;
     open: boolean;

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

@@ -1,7 +1,7 @@
 import type { UseInteractionsReturn } from "@floating-ui/react";
 import { type ComboboxOption } from "../Combobox.types";
-export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement>): {
-    floatingRef: React.RefObject<HTMLDivElement>;
+export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement | null>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement | null>): {
+    floatingRef: React.RefObject<HTMLDivElement | null>;
     floatingStyles: React.CSSProperties;
     floatingProps: ReturnType<UseInteractionsReturn["getFloatingProps"]>;
     nodeId?: string;

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

@@ -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>;
     /**
@@ -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<any, 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/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,7 @@
-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: 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/hooks/useGetItemActions.d.ts

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

package/dist/DataListActions-cjs.js

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

package/dist/DataListActions-es.js

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

package/dist/DataListItem-cjs.js

@@ -61,19 +61,18 @@ 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 rawActions = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children;
+    const actionsArray = rawActions
+        ? Array.isArray(rawActions)
+            ? rawActions
+            : [rawActions]
+        : [];
     const disableContextMenu = (_a = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.disableContextMenu) !== null && _a !== void 0 ? _a : false;
     const actions = React.useMemo(() => {
-        return actionsArray.filter(action => {
-            if (React.isValidElement(action) && action.props.visible) {
-                return action.props.visible(item);
-            }
-            return true;
-        });
-    }, [itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children, item]);
+        return actionsArray.filter(action => action.props.visible ? action.props.visible(item) : true);
+    }, [actionsArray, 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, useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import classnames from 'classnames';
 import { u as useDataListLayoutContext } from './DataListLayoutContext-es.js';
@@ -59,19 +59,18 @@ 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 rawActions = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children;
+    const actionsArray = rawActions
+        ? Array.isArray(rawActions)
+            ? rawActions
+            : [rawActions]
+        : [];
     const disableContextMenu = (_a = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.disableContextMenu) !== null && _a !== void 0 ? _a : false;
     const actions = useMemo(() => {
-        return actionsArray.filter(action => {
-            if (isValidElement(action) && action.props.visible) {
-                return action.props.visible(item);
-            }
-            return true;
-        });
-    }, [itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children, item]);
+        return actionsArray.filter(action => action.props.visible ? action.props.visible(item) : true);
+    }, [actionsArray, item]);
     return {
-        actions: actions,
+        actions,
         hasActions: Boolean(actions.length),
         disableContextMenu,
     };

package/dist/DataListSort-cjs.js

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