@jobber/components 4.66.3 → 4.66.5

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

@@ -238,7 +238,7 @@ export interface DataListActionProps<T extends DataListObject> {
     /**
      * The label of the action
      */
-    readonly label: string;
+    readonly label: string | ((item: T) => string);
     /**
      * The icon beside the label
      */

package/dist/DataList/index.js

@@ -477,8 +477,17 @@ function DataListActions({ children, itemsToExpose = 2, }) {
                 return null;
             if (!props.icon)
                 return null;
-            return (React__default["default"].createElement(Tooltip.Tooltip, { key: props.label, message: props.label },
-                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: props.label, onClick: () => {
+            function getActionLabel() {
+                if (typeof props.label === "string") {
+                    return props.label;
+                }
+                if (activeItem) {
+                    return props.label(activeItem);
+                }
+            }
+            const actionLabel = getActionLabel();
+            return (React__default["default"].createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },
+                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
                         var _a, _b;
                         if (activeItem) {
                             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
@@ -1047,9 +1056,17 @@ function DataListAction({ label, icon, destructive, visible = () => true, onClic
         return null;
     }
     const color = destructive ? "critical" : "heading";
+    function getActionLabel() {
+        if (typeof label === "string") {
+            return label;
+        }
+        if (activeItem) {
+            return label(activeItem);
+        }
+    }
     return (React__default["default"].createElement("button", { type: "button", className: styles$1.action, onClick: handleClick },
         React__default["default"].createElement(Typography.Typography, { textColor: color },
-            React__default["default"].createElement("span", { className: styles$1.label }, label)),
+            React__default["default"].createElement("span", { className: styles$1.label }, getActionLabel())),
         icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color })));
     function handleClick() {
         if (activeItem) {

package/dist/InputAvatar/InputAvatar.d.ts

@@ -7,7 +7,7 @@ interface InputAvatarProps extends Omit<AvatarProps, "size"> {
      * to upload the file.
      *
      * More info is available at:
-     * https://atlantis.getjobber.com/components/input-file#getuploadparams
+     * https://atlantis.getjobber.com/?path=/docs/components-forms-and-inputs-inputfile-docs--page#getuploadparams
      */
     getUploadParams(file: File): UploadParams | Promise<UploadParams>;
     /**

package/dist/InputFile/InputFile.d.ts

@@ -97,7 +97,7 @@ interface InputFileProps {
      * to upload the file.
      *
      * More info is available at:
-     * https://atlantis.getjobber.com/components/input-file#getuploadparams
+     * https://atlantis.getjobber.com/?path=/docs/components-forms-and-inputs-inputfile-docs--page#getuploadparams
      */
     getUploadParams(file: File): UploadParams | Promise<UploadParams>;
     /**

package/dist/InputGroup/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputGroup = require('../InputGroup-3fdde16b.js');
+var InputGroup = require('../InputGroup-8d4fd4eb.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{InputGroup-3fdde16b.js → InputGroup-8d4fd4eb.js}

@@ -23,7 +23,7 @@ function isInvalidGroupNesting(childs) {
     return React__default["default"].Children.toArray(childs).some(child => {
         if (child.type === InputGroup &&
             child.props.flowDirection != "horizontal") {
-            console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/components/input-group#nested-example`);
+            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;
         }
         return false;

package/dist/MultiSelect/DropDownMenu.d.ts

@@ -9,7 +9,7 @@ interface DropDownMenuProps {
     /**
      * Change handler.
      */
-    setOptions: Dispatch<React.SetStateAction<Options>>;
+    readonly setOptions: Dispatch<React.SetStateAction<Options>>;
 }
 export declare function DropDownMenu({ options, setOptions }: DropDownMenuProps): JSX.Element;
 export {};

package/dist/MultiSelect/MultiSelect.d.ts

@@ -16,7 +16,7 @@ interface MultiSelectProps {
     /**
      * Change handler
      */
-    onOptionsChange: Dispatch<React.SetStateAction<Options>>;
+    readonly onOptionsChange: Dispatch<React.SetStateAction<Options>>;
     /**
      * Adjusts the interface to either have small or large spacing.
      */

package/dist/MultiSelect/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Checkbox = require('../Checkbox-ad7ec2e7.js');
 var Text = require('../Text-4a2bc89f.js');
@@ -28,19 +27,6 @@ var css_248z = "._0SStdD4KRHs- {\n  display: -ms-flexbox;\n  display: flex;\n  p
 var styles = {"dropDownMenuContainer":"_0SStdD4KRHs-","option":"mFSgwOQZJm0-","active":"SepF4gvOxq8-"};
 styleInject_es.styleInject(css_248z);
 
-function handleKeyboardShortcut(setupKeyListeners) {
-    function callback(event) {
-        const { metaKey, ctrlKey, key, target } = event;
-        const shouldTriggerShortcut = target instanceof HTMLButtonElement ? metaKey || ctrlKey : true;
-        if (!shouldTriggerShortcut)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        setupKeyListeners(key);
-    }
-    return { callback };
-}
-
 function DropDownMenu({ options, setOptions }) {
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
     const menuDiv = React.useRef();
@@ -78,40 +64,32 @@ function DropDownMenu({ options, setOptions }) {
             menuDivElement.scrollTop += itemHeight;
         }
     }
-    function setupKeyListeners(key) {
+    function handleKeyDown(event) {
+        const { key, metaKey, ctrlKey } = event;
+        if (metaKey || ctrlKey)
+            return;
         switch (key) {
-            case "Enter":
-            case " ": {
+            case "Enter": {
                 if (highlightedIndex >= 0) {
                     handleOptionClick(options[highlightedIndex]);
                 }
                 break;
             }
             case "ArrowDown": {
-                const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
-                handleOptionFocus(newIndex);
-                scrollMenuIfItemNotInView(menuDiv.current, "down");
+                handlePressDown(event);
                 break;
             }
             case "ArrowUp": {
-                const newIndex = Math.max(0, highlightedIndex - 1);
-                handleOptionFocus(newIndex);
-                scrollMenuIfItemNotInView(menuDiv.current, "up");
+                handlePressUp(event);
                 break;
             }
         }
     }
-    useOnKeyDown.useOnKeyDown(handleKeyboardShortcut(setupKeyListeners).callback, [
-        "Enter",
-        " ",
-        "ArrowDown",
-        "ArrowUp",
-    ]);
     React.useEffect(() => {
         // focus first option
         handleOptionFocus(0);
     }, [menuDiv]);
-    return (React__default["default"].createElement("ul", { "data-testid": "dropdown-menu", className: styles.dropDownMenuContainer, ref: menuDiv }, options.map((option, index) => {
+    return (React__default["default"].createElement("ul", { "data-testid": "dropdown-menu", className: styles.dropDownMenuContainer, ref: menuDiv, onKeyDown: handleKeyDown }, options.map((option, index) => {
         const optionClass = classnames__default["default"](styles.option, {
             [styles.active]: index === highlightedIndex,
         });
@@ -122,6 +100,18 @@ function DropDownMenu({ options, setOptions }) {
             }, onMouseOver: e => handleOptionHover(e, index) },
             React__default["default"].createElement(Checkbox.Checkbox, { label: option.label, checked: option.checked, onFocus: () => setHighlightedIndex(index) })));
     })));
+    function handlePressUp(event) {
+        event.preventDefault();
+        const newIndex = Math.max(0, highlightedIndex - 1);
+        handleOptionFocus(newIndex);
+        scrollMenuIfItemNotInView(menuDiv.current, "up");
+    }
+    function handlePressDown(event) {
+        event.preventDefault();
+        const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
+        handleOptionFocus(newIndex);
+        scrollMenuIfItemNotInView(menuDiv.current, "down");
+    }
 }
 
 // eslint-disable-next-line max-statements
@@ -146,7 +136,10 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
             setMenuVisible(false);
         }
     };
-    function setupKeyListeners(key) {
+    function handleKeydown(event) {
+        const { key, metaKey, ctrlKey } = event;
+        if (metaKey || ctrlKey)
+            return;
         switch (key) {
             case "Enter":
             case " ": {
@@ -162,11 +155,6 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
             }
         }
     }
-    useOnKeyDown.useOnKeyDown(handleKeyboardShortcut(setupKeyListeners).callback, [
-        "Enter",
-        " ",
-        "Escape",
-    ]);
     React.useEffect(() => {
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
@@ -185,7 +173,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
             setLabel(selectedLabels.join(", "));
         }
     }, [options]);
-    return (React__default["default"].createElement("div", { ref: multiSelectContainer, className: styles$1.multiSelectContainer },
+    return (React__default["default"].createElement("div", { ref: multiSelectContainer, className: styles$1.multiSelectContainer, onKeyDown: handleKeydown },
         React__default["default"].createElement("div", { "data-testid": "multi-select", className: multiSelectClass, onClick: handleMenuVisibility, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: 0, ref: multiSelectRef, role: "button", "aria-label": `${defaultLabel}: ${label}`, "aria-multiselectable": true, "aria-haspopup": true },
             React__default["default"].createElement(Text.Text, null, label),
             React__default["default"].createElement(Icon.Icon, { name: "arrowDown" })),

package/dist/RecurringSelect/index.js

@@ -11,7 +11,7 @@ require('classnames');
 require('../Typography-973b122e.js');
 var Option = require('../Option-469029b5.js');
 var InputNumber = require('../InputNumber-d9ebabaa.js');
-var InputGroup = require('../InputGroup-3fdde16b.js');
+var InputGroup = require('../InputGroup-8d4fd4eb.js');
 var Content = require('../Content-2ca1ffe1.js');
 require('../FormField-dfc061ca.js');
 require('../tslib.es6-5b8768b7.js');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.66.3",
+  "version": "4.66.5",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "0d18614943f4b7e2fc2364e60332e7262ae76071"
+  "gitHead": "57d527093ccd90b30d13e0cfeaac47df72e4c3eb"
 }

package/dist/MultiSelect/utils.d.ts

@@ -1,3 +0,0 @@
-export declare function handleKeyboardShortcut(setupKeyListeners: (key: string) => void): {
-    callback: (event: KeyboardEvent) => void;
-};