@jobber/components 4.66.7 → 4.67.0

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

@@ -172,10 +172,17 @@ export interface ComboboxActionProps {
     /**
      * The function to call when the action is clicked.
      */
-    onClick(event: React.MouseEvent<HTMLButtonElement>): void;
+    onClick(event: React.MouseEvent<HTMLButtonElement>, options: ComboboxActionCallbackOptions): void;
     /**
      * The label text of the action.
      */
-    readonly label: string;
+    readonly label: string | ((options: ComboboxActionCallbackOptions) => string);
+    /**
+     * Determine if the action is visible for a given item.
+     */
+    readonly visible?: boolean | ((options: ComboboxActionCallbackOptions) => boolean);
+}
+export interface ComboboxActionCallbackOptions {
+    readonly searchValue: string;
 }
 export {};

package/dist/Combobox/ComboboxProvider.d.ts

@@ -1,13 +1,5 @@
 import React, { Dispatch, MutableRefObject, SetStateAction } from "react";
 import { ComboboxOption } from "./Combobox.types";
-export declare const ComboboxContext: React.Context<{
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    selected: ComboboxOption[];
-    selectionHandler: (option: ComboboxOption) => void;
-    handleClose: () => void;
-    shouldScroll: MutableRefObject<boolean>;
-}>;
 export interface ComboboxProviderProps {
     readonly children: React.ReactNode;
     readonly selected: ComboboxOption[];
@@ -16,5 +8,7 @@ export interface ComboboxProviderProps {
     readonly setOpen: Dispatch<SetStateAction<boolean>>;
     readonly handleClose: () => void;
     readonly shouldScroll: MutableRefObject<boolean>;
+    readonly searchValue: string;
 }
-export declare function ComboboxContextProvider(props: ComboboxProviderProps): JSX.Element;
+export declare const ComboboxContext: React.Context<Omit<ComboboxProviderProps, "children">>;
+export declare function ComboboxContextProvider({ children, ...props }: ComboboxProviderProps): JSX.Element;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ComboboxActionProps } from "../../Combobox.types";
-export declare function ComboboxAction(props: ComboboxActionProps): JSX.Element;
+export declare function ComboboxAction(props: ComboboxActionProps): JSX.Element | null;

package/dist/Combobox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-4343fd6c.js');
+var Combobox = require('../Combobox-eb1e5817.js');
 require('react');
 require('classnames');
 require('react-dom');
@@ -11,6 +11,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Text-4a2bc89f.js');
 require('../Typography-973b122e.js');
+require('../tslib.es6-5b8768b7.js');
 require('../Button-163a0641.js');
 require('react-router-dom');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/{Combobox-4343fd6c.js → Combobox-eb1e5817.js}

@@ -6,6 +6,7 @@ var ReactDOM = require('react-dom');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-4a2bc89f.js');
+var tslib_es6 = require('./tslib.es6-5b8768b7.js');
 var Typography = require('./Typography-973b122e.js');
 var Button = require('./Button-163a0641.js');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
@@ -63,15 +64,9 @@ var styles$3 = {"option":"_5QdRGmaNHvc-"};
 styleInject_es.styleInject(css_248z$3);
 
 const ComboboxContext = React__default["default"].createContext({});
-function ComboboxContextProvider(props) {
-    return (React__default["default"].createElement(ComboboxContext.Provider, { value: {
-            open: props.open,
-            setOpen: props.setOpen,
-            selected: props.selected,
-            selectionHandler: props.selectionHandler,
-            handleClose: props.handleClose,
-            shouldScroll: props.shouldScroll,
-        } }, props.children));
+function ComboboxContextProvider(_a) {
+    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
+    return (React__default["default"].createElement(ComboboxContext.Provider, { value: props }, children));
 }
 
 function ComboboxOption(props) {
@@ -260,9 +255,18 @@ var styles$1 = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-"};
 styleInject_es.styleInject(css_248z$1);
 
 function ComboboxAction(props) {
+    const { searchValue } = React.useContext(ComboboxContext);
+    if (props.visible) {
+        const isVisible = typeof props.visible === "function" && !props.visible({ searchValue });
+        if (isVisible || !props.visible) {
+            return null;
+        }
+    }
+    const options = { searchValue };
+    const computedLabel = typeof props.label === "string" ? props.label : props.label(options);
     return (React__default["default"].createElement("div", { className: styles$1.actionContainer },
-        React__default["default"].createElement("button", { className: styles$1.actionButton, onClick: props.onClick, type: "button", "aria-label": props.label },
-            React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, props.label))));
+        React__default["default"].createElement("button", { className: styles$1.actionButton, onClick: e => props.onClick(e, options), type: "button" },
+            React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, computedLabel))));
 }
 
 function ComboboxTrigger({ label = "Select", selected, }) {
@@ -389,7 +393,7 @@ function Combobox(props) {
         label: option.props.label,
     }))) || [], [optionElements]);
     const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, setOpen, handleClose, handleSelection, } = useCombobox(props.selected, props.onSelect, props.onClose, props.multiSelect);
-    return (React__default["default"].createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll },
+    return (React__default["default"].createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue },
         React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper },
             open && (React__default["default"].createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
             triggerElement || (React__default["default"].createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),

package/dist/DataList/index.js

@@ -25,7 +25,7 @@ var ReactDOM = require('react-dom');
 var Checkbox = require('../Checkbox-ad7ec2e7.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
-var Combobox = require('../Combobox-4343fd6c.js');
+var Combobox = require('../Combobox-eb1e5817.js');
 var Chip = require('../Chip-168acf3e.js');
 var Icon = require('../Icon-405a216c.js');
 var debounce = require('lodash/debounce');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.66.7",
+  "version": "4.67.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "5bf46b3890aeddd4a75751f82ad9c48bf4774f96"
+  "gitHead": "8050cc83c347bd700c07536f2278ba81ed3bd7a0"
 }