@jobber/components 4.66.1 → 4.66.2-dependabot.1

package/dist/Chip/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Chip = require('../Chip-0d2454d9.js');
+var Chip = require('../Chip-168acf3e.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var Icon = require('../Icon-405a216c.js');

package/dist/Chip-168acf3e.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var useInView = require('@jobber/hooks/useInView');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Avatar = require('./Avatar-76a799fa.js');
+var Icon = require('./Icon-405a216c.js');
+var Typography = require('./Typography-973b122e.js');
+var Tooltip = require('./Tooltip-6b12f1c2.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z = ":root {\n  --chip--gradient-color-variation: var(--chip-base-bg);\n  --chip--gradient-color-variation--hover: var(--chip-base--hover);\n}\n\n.af7U8MvcbHE- {\n  --chip-height: 40px;\n  --chip-radius: 20px;\n  --chip-base-bg: var(--color-surface--background);\n  --chip-base--hover: var(--color-surface--background--hover);\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  height: 40px;\n  height: var(--chip-height);\n  min-width: 0;\n  padding: calc(16px / 2) 16px;\n  padding: var(--space-small) var(--base-unit);\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  border-radius: 20px;\n  border-radius: var(--chip-radius);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  text-align: left;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.af7U8MvcbHE-:focus,\n.af7U8MvcbHE-:focus-visible {\n  outline: none;\n}\n\n.af7U8MvcbHE-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.af7U8MvcbHE- .e905AYK4SCc- {\n  margin-left: calc(-1 * (16px / 2));\n  margin-left: calc(-1 * calc(16px / 2));\n  margin-left: calc(-1 * var(--space-small));\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.af7U8MvcbHE- .ySADfZ0FckM- {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n  margin-right: calc(-1 * (16px / 2));\n  margin-right: calc(-1 * calc(16px / 2));\n  margin-right: calc(-1 * var(--space-small));\n}\n\n.af7U8MvcbHE- .e905AYK4SCc-,\n.af7U8MvcbHE- .ySADfZ0FckM- {\n  display: -ms-flexbox;\n  display: flex;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.af7U8MvcbHE- .e905AYK4SCc-.usdkmQ9Sxbk-,\n.af7U8MvcbHE- .ySADfZ0FckM-.usdkmQ9Sxbk- {\n  display: none;\n}\n\n.af7U8MvcbHE- .dg1-Izy1eQA- {\n  width: calc(16px / 16);\n  width: var(--space-minuscule);\n  height: 16px;\n  height: var(--base-unit);\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  background-color: rgb(77, 105, 116);\n  background-color: var(--color-text--secondary);\n}\n\n.af7U8MvcbHE- .-lz0EYLTDgg- {\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.wSI5L-5rODg- {\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  background-color: var(--chip-base-bg);\n  --chip--gradient-color-variation: var(--chip-base-bg);\n}\n\n.wSI5L-5rODg-:hover,\n.wSI5L-5rODg-:focus-visible {\n  background-color: var(--chip-base--hover);\n  --chip--gradient-color-variation--hover: var(--chip-base--hover);\n}\n\n.SmUxkzpIC84-,\n.SmUxkzpIC84-:hover,\n.SmUxkzpIC84-:focus-visible,\n.Mux23dmZSuw-.SmUxkzpIC84-,\n.Mux23dmZSuw-.SmUxkzpIC84-:hover,\n.Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {\n  border: calc(16px / 16) solid rgb(201, 66, 33);\n  border: var(--border-base) solid var(--color-critical);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-critical--surface);\n  --chip--gradient-color-variation: var(--color-critical--surface);\n  --chip--gradient-color-variation--hover: var(--color-critical--surface);\n}\n\n.SmUxkzpIC84-:hover,\n.SmUxkzpIC84-:focus-visible,\n.Mux23dmZSuw-.SmUxkzpIC84-:hover,\n.Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {\n  background-color: rgb(193, 201, 206);\n  background-color: var(--color-surface--background--hover);\n  --chip--gradient-color-variation: var(--color-surface--background--hover);\n  --chip--gradient-color-variation--hover: var(\n    --color-surface--background--hover\n  );\n}\n\n.Mux23dmZSuw- {\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  --chip--gradient-color-variation: var(--color-surface);\n}\n\n/* CAUTION: Order is important here since\n* there is are different styles for subtle:focus and subtle:hover\n* and we want hover to take priority\n*/\n\n.Mux23dmZSuw-:focus-visible {\n  --chip--gradient-color-variation--hover: var(--color-surface);\n}\n\n.Mux23dmZSuw-:hover {\n  border: calc(16px / 16) solid var(--chip-base-bg);\n  border: var(--border-base) solid var(--chip-base-bg);\n  background-color: var(--chip-base-bg);\n  --chip--gradient-color-variation--hover: var(--chip-base-bg);\n}\n\n.SmUxkzpIC84-.MbRItb9vKhc-,\n.SmUxkzpIC84-.MbRItb9vKhc-:hover,\n.SmUxkzpIC84-.MbRItb9vKhc-:focus-visible {\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n  cursor: auto;\n}\n\n.MbRItb9vKhc-,\n.MbRItb9vKhc-:hover,\n.MbRItb9vKhc-:focus-visible {\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-disabled--secondary);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n  cursor: auto;\n  --chip--gradient-color-variation: var(--color-disabled--secondary);\n  --chip--gradient-color-variation--hover: var(--color-disabled--secondary);\n}\n\n.MbRItb9vKhc- .dg1-Izy1eQA- {\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- {\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- path {\n  fill: rgb(181, 181, 181);\n  fill: var(--color-disabled);\n}\n\n.tJhURjR2Vec- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n.tJhURjR2Vec- > * {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n.tJhURjR2Vec- > p {\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.G3QXY0rNcK0- {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: calc(16px * 1);\n  width: var(--space-base);\n  height: 100%;\n  background: linear-gradient(\n    to left,\n    var(--chip-base-bg) 5%,\n    rgba(255, 255, 255, 0)\n  );\n  background: linear-gradient(\n    to left,\n    var(--chip--gradient-color-variation) 5%,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.af7U8MvcbHE-:focus-visible .G3QXY0rNcK0-,\n.af7U8MvcbHE-:hover .G3QXY0rNcK0- {\n  background: linear-gradient(\n    to left,\n    var(--chip-base--hover) 5%,\n    rgba(255, 255, 255, 0)\n  );\n  background: linear-gradient(\n    to left,\n    var(--chip--gradient-color-variation--hover) 5%,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.MUKEW6c2nNA- {\n  display: inline-block;\n  width: 1px;\n}\n";
+var styles = {"chip":"af7U8MvcbHE-","prefix":"e905AYK4SCc-","suffix":"ySADfZ0FckM-","empty":"usdkmQ9Sxbk-","chipBar":"dg1-Izy1eQA-","selected":"-lz0EYLTDgg-","base":"wSI5L-5rODg-","invalid":"SmUxkzpIC84-","subtle":"Mux23dmZSuw-","disabled":"MbRItb9vKhc-","chipContent":"tJhURjR2Vec-","truncateGradient":"G3QXY0rNcK0-","chipLabelRef":"MUKEW6c2nNA-"};
+styleInject_es.styleInject(css_248z);
+
+/**
+ * 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.
+ * @returns The first child component that returns true on isCorrectComponent
+ */
+function useChildComponent(children, isCorrectComponent) {
+    return React.useMemo(() => {
+        return React__default["default"].Children.toArray(children).find(d => React.isValidElement(d) && isCorrectComponent(d));
+    }, [children]);
+}
+
+function ChipPrefix({ children }) {
+    const singleChild = useChildComponent(children, d => d.type === Avatar.Avatar || d.type === Icon.Icon);
+    return (React__default["default"].createElement("span", { className: classnames__default["default"](styles.prefix, !singleChild && styles.empty) }, singleChild));
+}
+
+function ChipSuffix({ children, className }) {
+    var _a;
+    let singleChild = useChildComponent(children, d => d.type === Icon.Icon);
+    if (!allowedSuffixIcons.includes((_a = singleChild === null || singleChild === void 0 ? void 0 : singleChild.props) === null || _a === void 0 ? void 0 : _a.name)) {
+        singleChild = undefined;
+    }
+    return (React__default["default"].createElement("span", { className: classnames__default["default"](styles.suffix, className, !singleChild && styles.empty) }, singleChild));
+}
+const allowedSuffixIcons = ["cross", "add", "checkmark", "arrowDown"];
+
+const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) => {
+    const classes = classnames__default["default"](styles.chip, {
+        [styles.invalid]: invalid,
+        [styles.base]: variation === "base",
+        [styles.subtle]: variation === "subtle",
+        [styles.disabled]: disabled,
+    });
+    const prefix = useChildComponent(children, d => d.type === Chip.Prefix);
+    const suffix = useChildComponent(children, d => d.type === Chip.Suffix);
+    const [labelRef, labelFullyVisible] = useInView.useInView();
+    const [headingRef, headingFullyVisible] = useInView.useInView();
+    const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
+    return (React__default["default"].createElement(Tooltip.Tooltip, { message: tooltipMessage },
+        React__default["default"].createElement("button", { className: classes, onClick: (ev) => onClick && onClick(value, ev), tabIndex: tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel || label, disabled: disabled, role: role, type: "button" },
+            prefix,
+            React__default["default"].createElement("div", { className: styles.chipContent },
+                heading && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(Typography.Typography, { size: "base", fontWeight: "medium" },
+                        heading,
+                        React__default["default"].createElement("span", { ref: headingRef, className: styles.chipLabelRef })),
+                    label && React__default["default"].createElement("span", { className: styles.chipBar }))),
+                React__default["default"].createElement(Typography.Typography, { size: "base" },
+                    label,
+                    React__default["default"].createElement("span", { ref: labelRef, className: styles.chipLabelRef })),
+                !labelFullyVisible && (React__default["default"].createElement("div", { className: styles.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" }))),
+            suffix)));
+};
+function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
+    let message = "";
+    if (heading && !headingFullyVisible) {
+        message = `${heading} | ${label}`;
+    }
+    else if (!labelFullyVisible) {
+        message = label;
+    }
+    return message;
+}
+Chip.Prefix = ChipPrefix;
+Chip.Suffix = ChipSuffix;
+
+exports.Chip = Chip;
+exports.styles = styles;

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-6840a13e.js');
+var Combobox = require('../Combobox-b6053eb7.js');
 require('react');
 require('classnames');
 require('react-dom');
@@ -11,13 +11,14 @@ 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');
 require('@jobber/hooks/useFocusTrap');
 require('react-popper');
 require('@jobber/hooks/useOnKeyDown');
-require('../Chip-0d2454d9.js');
+require('../Chip-168acf3e.js');
 require('@jobber/hooks/useInView');
 require('../Avatar-76a799fa.js');
 require('color');

package/dist/{Combobox-6840a13e.js → Combobox-b6053eb7.js}

@@ -6,13 +6,14 @@ 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');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Chip = require('./Chip-0d2454d9.js');
+var Chip = require('./Chip-168acf3e.js');
 require('@jobber/design');
 var useAssert = require('@jobber/hooks/useAssert');
 
@@ -26,7 +27,7 @@ var css_248z$6 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-
 var styles$6 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
 styleInject_es.styleInject(css_248z$6);
 
-var css_248z$5 = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n  outline: none;\n}\n\n._7loHrVUe-Rk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
+var css_248z$5 = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n  outline: none;\n}\n\n._7loHrVUe-Rk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n  outline: transparent;\n}\n\n._7loHrVUe-Rk-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
 var styles$5 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
 styleInject_es.styleInject(css_248z$5);
 
@@ -54,24 +55,18 @@ function ComboboxContentSearch(props) {
     }
 }
 
-var css_248z$4 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: scroll;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n  pointer-events: none;\n}\n\n.SgMzjOcdE-E-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc(16px / 2);\n  top: var(--space-small);\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n  pointer-events: none;\n}\n";
-var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-"};
+var css_248z$4 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: scroll;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  top: calc(16px / 2);\n  top: var(--space-small);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n  opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n  opacity: 0;\n}\n";
+var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-"};
 styleInject_es.styleInject(css_248z$4);
 
-var css_248z$3 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
+var css_248z$3 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
 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) {
@@ -84,7 +79,39 @@ function ComboboxOption(props) {
 }
 
 function ComboboxContentList(props) {
-    return (React__default["default"].createElement("div", { className: styles$4.container },
+    const [listScrollState, setlistScrollState] = React.useState("");
+    React.useEffect(() => {
+        const handleScroll = () => {
+            if (props.optionsListRef.current) {
+                const { scrollTop, clientHeight, scrollHeight } = props.optionsListRef.current;
+                if (scrollHeight === clientHeight) {
+                    setlistScrollState("scrollNone");
+                }
+                else if (scrollTop === 0) {
+                    setlistScrollState("scrollTop");
+                }
+                else if (scrollTop + clientHeight === scrollHeight) {
+                    setlistScrollState("scrollBottom");
+                }
+                else {
+                    setlistScrollState("");
+                }
+            }
+        };
+        if (!props.showEmptyState && props.options.length === 0) {
+            handleScroll();
+        }
+        if (props.optionsListRef.current) {
+            props.optionsListRef.current.addEventListener("scroll", handleScroll);
+            handleScroll();
+        }
+        return () => {
+            if (props.optionsListRef.current) {
+                props.optionsListRef.current.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [props.options]);
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$4.container, styles$4[listScrollState]) },
         !props.showEmptyState && props.options.length > 0 && (React__default["default"].createElement("ul", { className: styles$4.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef }, !props.showEmptyState &&
             props.options.map(option => {
                 return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
@@ -255,14 +282,23 @@ function ComboboxContent(props) {
     return ReactDOM__default["default"].createPortal(template, document.body);
 }
 
-var css_248z$1 = ".Ow9wSNnGP-g- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n  position: relative;\n  width: 100%;\n  min-height: calc((calc(16px * 3) - calc(16px / 2)));\n  min-height: calc((var(--space-largest) - var(--space-small)));\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  text-align: left;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n  outline: none;\n}\n\n.ncp0nKHQ7d8-:hover,\n.ncp0nKHQ7d8-:focus-visible {\n  outline: none;\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n.ncp0nKHQ7d8-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.ncp0nKHQ7d8- span {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var css_248z$1 = ".Ow9wSNnGP-g- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n  position: relative;\n  width: 100%;\n  min-height: calc((calc(16px * 3) - calc(16px / 2)));\n  min-height: calc((var(--space-largest) - var(--space-small)));\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  text-align: left;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n  outline: none;\n}\n\n.ncp0nKHQ7d8-:hover,\n.ncp0nKHQ7d8-:focus-visible {\n  outline: none;\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.ncp0nKHQ7d8-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.ncp0nKHQ7d8- span {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
 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 +425,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/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

@@ -25,8 +25,8 @@ 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-6840a13e.js');
-var Chip = require('../Chip-0d2454d9.js');
+var Combobox = require('../Combobox-b6053eb7.js');
+var Chip = require('../Chip-168acf3e.js');
 var Icon = require('../Icon-405a216c.js');
 var debounce = require('lodash/debounce');
 var InputText = require('../InputText-f7c45ee5.js');
@@ -50,7 +50,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$f = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
+var css_248z$f = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
 var styles$f = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
 styleInject_es.styleInject(css_248z$f);
 
@@ -218,7 +218,7 @@ function DataListOverflowFade({ children }) {
             React__default["default"].createElement("span", { ref: rightRef, className: styles$b.overflowTrigger }))));
 }
 
-var css_248z$a = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  white-space: nowrap;\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var css_248z$a = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  --inline-label-height: calc(\n    var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.5) *\n      2\n  );\n\n  display: -ms-flexbox;\n\n  display: flex;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  max-height: calc((\n    ((16px * 1) * 0.75) * 1.5 + ((16px / 4) * 1.5) *\n      2\n  ) * 2);\n  max-height: calc(calc(\n    calc(calc(16px * 1) * 0.75) * 1.5 + calc(calc(16px / 4) * 1.5) *\n      2\n  ) * 2);\n  max-height: calc(var(--inline-label-height) * 2);\n  overflow: hidden;\n  white-space: nowrap;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
 var styles$a = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
 styleInject_es.styleInject(css_248z$a);
 
@@ -231,6 +231,7 @@ function DataListTags({ items }) {
         var _a;
         if (!window.IntersectionObserver)
             return;
+        setVisibleIndex([]);
         const observer = new IntersectionObserver(handleIntersection, {
             root: ref.current,
             threshold: buildIntersectionThreshold(items),
@@ -279,7 +280,7 @@ var css_248z$9 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n
 var styles$9 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
 styleInject_es.styleInject(css_248z$9);
 
-var css_248z$8 = ".AN5egORYy-0- {\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-greyBlue);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: rgb(1, 41, 57);\n  fill: var(--color-blue);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(193, 201, 206);\n  fill: var(--color-greyBlue--lighter);\n}\n";
+var css_248z$8 = ".AN5egORYy-0- {\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: rgb(1, 41, 57);\n  fill: var(--color-heading);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(217, 223, 225);\n  fill: var(--color-inactive--surface);\n}\n";
 var styles$8 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
 styleInject_es.styleInject(css_248z$8);
 
@@ -477,8 +478,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 +1057,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.1",
+  "version": "4.66.2-dependabot.1+96ccd928",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.50.0",
-    "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.7.2",
+    "@jobber/design": "^0.50.1-dependabot.7+96ccd928",
+    "@jobber/formatters": "^0.2.2",
+    "@jobber/hooks": "^2.7.3-dependabot.39+96ccd928",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -38,7 +38,7 @@
     "framer-motion": "6.3.16",
     "lodash": "^4.17.21",
     "react-countdown": "^2.3.2",
-    "react-datepicker": "^4.10.0",
+    "react-datepicker": "~4.10.0",
     "react-dropzone": "^11.0.2",
     "react-hook-form": "^7.43.7",
     "react-markdown": "^8.0.3",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "b53e4d60443df84695231a2c5be414fca0f47387"
+  "gitHead": "96ccd928a050a3a1d4f8f61884e28ffe21bdf444"
 }

package/dist/Chip-0d2454d9.js

@@ -1,89 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var useInView = require('@jobber/hooks/useInView');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Avatar = require('./Avatar-76a799fa.js');
-var Icon = require('./Icon-405a216c.js');
-var Typography = require('./Typography-973b122e.js');
-var Tooltip = require('./Tooltip-6b12f1c2.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-
-var css_248z = ":root {\n  --chip--gradient-color-variation: var(--chip-base-bg);\n  --chip--gradient-color-variation--hover: var(--chip-base--hover);\n}\n\n.af7U8MvcbHE- {\n  --chip-height: 40px;\n  --chip-radius: 20px;\n  --chip-disabled--bg: var(--color-grey--lighter);\n  --chip-bar-color: var(--color-greyBlue--light);\n  --chip-base-bg: var(--color-greyBlue--lightest);\n  --chip-base--hover: var(--color-greyBlue--lighter);\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  height: 40px;\n  height: var(--chip-height);\n  min-width: 0;\n  padding: calc(16px / 2) 16px;\n  padding: var(--space-small) var(--base-unit);\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  border-radius: 20px;\n  border-radius: var(--chip-radius);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  text-align: left;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.af7U8MvcbHE-:focus,\n.af7U8MvcbHE-:focus-visible {\n  outline: none;\n}\n\n.af7U8MvcbHE-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.af7U8MvcbHE- .e905AYK4SCc- {\n  margin-left: calc(-1 * (16px / 2));\n  margin-left: calc(-1 * calc(16px / 2));\n  margin-left: calc(-1 * var(--space-small));\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.af7U8MvcbHE- .ySADfZ0FckM- {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n  margin-right: calc(-1 * (16px / 2));\n  margin-right: calc(-1 * calc(16px / 2));\n  margin-right: calc(-1 * var(--space-small));\n}\n\n.af7U8MvcbHE- .e905AYK4SCc-,\n.af7U8MvcbHE- .ySADfZ0FckM- {\n  display: -ms-flexbox;\n  display: flex;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.af7U8MvcbHE- .e905AYK4SCc-.usdkmQ9Sxbk-,\n.af7U8MvcbHE- .ySADfZ0FckM-.usdkmQ9Sxbk- {\n  display: none;\n}\n\n.af7U8MvcbHE- .dg1-Izy1eQA- {\n  width: calc(16px / 16);\n  width: var(--space-minuscule);\n  height: 16px;\n  height: var(--base-unit);\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  background-color: var(--chip-bar-color);\n}\n\n.af7U8MvcbHE- .-lz0EYLTDgg- {\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.wSI5L-5rODg- {\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  background-color: var(--chip-base-bg);\n  --chip--gradient-color-variation: var(--chip-base-bg);\n}\n\n.wSI5L-5rODg-:hover,\n.wSI5L-5rODg-:focus-visible {\n  background-color: var(--chip-base--hover);\n  --chip--gradient-color-variation--hover: var(--chip-base--hover);\n}\n\n.SmUxkzpIC84-,\n.SmUxkzpIC84-:hover,\n.SmUxkzpIC84-:focus-visible,\n.Mux23dmZSuw-.SmUxkzpIC84-,\n.Mux23dmZSuw-.SmUxkzpIC84-:hover,\n.Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {\n  border: calc(16px / 16) solid rgb(201, 66, 33);\n  border: var(--border-base) solid var(--color-critical);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-critical--surface);\n  --chip--gradient-color-variation: var(--color-critical--surface);\n  --chip--gradient-color-variation--hover: var(--color-critical--surface);\n}\n\n.Mux23dmZSuw- {\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-disabled--secondary);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  --chip--gradient-color-variation: var(--color-surface);\n}\n\n/* CAUTION: Order is important here since\n* there is are different styles for subtle:focus and subtle:hover\n* and we want hover to take priority\n*/\n\n.Mux23dmZSuw-:focus-visible {\n  --chip--gradient-color-variation--hover: var(--color-surface);\n}\n\n.Mux23dmZSuw-:hover {\n  border: calc(16px / 16) solid var(--chip-base-bg);\n  border: var(--border-base) solid var(--chip-base-bg);\n  background-color: var(--chip-base-bg);\n  --chip--gradient-color-variation--hover: var(--chip-base-bg);\n}\n\n.MbRItb9vKhc-,\n.MbRItb9vKhc-:hover,\n.MbRItb9vKhc-:focus-visible {\n  border: calc(16px / 16) solid var(--chip-disabled--bg);\n  border: var(--border-base) solid var(--chip-disabled--bg);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  background-color: var(--chip-disabled--bg);\n  cursor: auto;\n  --chip--gradient-color-variation: var(--chip-disabled--bg);\n  --chip--gradient-color-variation--hover: var(--chip-disabled--bg);\n}\n\n.MbRItb9vKhc- .dg1-Izy1eQA- {\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- {\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.tJhURjR2Vec- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n.tJhURjR2Vec- > * {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n.tJhURjR2Vec- > p {\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.G3QXY0rNcK0- {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: calc(16px * 1);\n  width: var(--space-base);\n  height: 100%;\n  background: linear-gradient(\n    to left,\n    var(--chip-base-bg) 5%,\n    rgba(255, 255, 255, 0)\n  );\n  background: linear-gradient(\n    to left,\n    var(--chip--gradient-color-variation) 5%,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.af7U8MvcbHE-:focus-visible .G3QXY0rNcK0-,\n.af7U8MvcbHE-:hover .G3QXY0rNcK0- {\n  background: linear-gradient(\n    to left,\n    var(--chip-base--hover) 5%,\n    rgba(255, 255, 255, 0)\n  );\n  background: linear-gradient(\n    to left,\n    var(--chip--gradient-color-variation--hover) 5%,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.MUKEW6c2nNA- {\n  display: inline-block;\n  width: 1px;\n}\n";
-var styles = {"chip":"af7U8MvcbHE-","prefix":"e905AYK4SCc-","suffix":"ySADfZ0FckM-","empty":"usdkmQ9Sxbk-","chipBar":"dg1-Izy1eQA-","selected":"-lz0EYLTDgg-","base":"wSI5L-5rODg-","invalid":"SmUxkzpIC84-","subtle":"Mux23dmZSuw-","disabled":"MbRItb9vKhc-","chipContent":"tJhURjR2Vec-","truncateGradient":"G3QXY0rNcK0-","chipLabelRef":"MUKEW6c2nNA-"};
-styleInject_es.styleInject(css_248z);
-
-/**
- * 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.
- * @returns The first child component that returns true on isCorrectComponent
- */
-function useChildComponent(children, isCorrectComponent) {
-    return React.useMemo(() => {
-        return React__default["default"].Children.toArray(children).find(d => React.isValidElement(d) && isCorrectComponent(d));
-    }, [children]);
-}
-
-function ChipPrefix({ children }) {
-    const singleChild = useChildComponent(children, d => d.type === Avatar.Avatar || d.type === Icon.Icon);
-    return (React__default["default"].createElement("span", { className: classnames__default["default"](styles.prefix, !singleChild && styles.empty) }, singleChild));
-}
-
-function ChipSuffix({ children, className }) {
-    var _a;
-    let singleChild = useChildComponent(children, d => d.type === Icon.Icon);
-    if (!allowedSuffixIcons.includes((_a = singleChild === null || singleChild === void 0 ? void 0 : singleChild.props) === null || _a === void 0 ? void 0 : _a.name)) {
-        singleChild = undefined;
-    }
-    return (React__default["default"].createElement("span", { className: classnames__default["default"](styles.suffix, className, !singleChild && styles.empty) }, singleChild));
-}
-const allowedSuffixIcons = ["cross", "add", "checkmark", "arrowDown"];
-
-const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) => {
-    const classes = classnames__default["default"](styles.chip, {
-        [styles.invalid]: invalid,
-        [styles.base]: variation === "base",
-        [styles.subtle]: variation === "subtle",
-        [styles.disabled]: disabled,
-    });
-    const prefix = useChildComponent(children, d => d.type === Chip.Prefix);
-    const suffix = useChildComponent(children, d => d.type === Chip.Suffix);
-    const [labelRef, labelFullyVisible] = useInView.useInView();
-    const [headingRef, headingFullyVisible] = useInView.useInView();
-    const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
-    return (React__default["default"].createElement(Tooltip.Tooltip, { message: tooltipMessage },
-        React__default["default"].createElement("button", { className: classes, onClick: (ev) => onClick && onClick(value, ev), tabIndex: tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel || label, disabled: disabled, role: role, type: "button" },
-            prefix,
-            React__default["default"].createElement("div", { className: styles.chipContent },
-                heading && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(Typography.Typography, { size: "base", fontWeight: "medium" },
-                        heading,
-                        React__default["default"].createElement("span", { ref: headingRef, className: styles.chipLabelRef })),
-                    label && React__default["default"].createElement("span", { className: styles.chipBar }))),
-                React__default["default"].createElement(Typography.Typography, { size: "base" },
-                    label,
-                    React__default["default"].createElement("span", { ref: labelRef, className: styles.chipLabelRef })),
-                !labelFullyVisible && (React__default["default"].createElement("div", { className: styles.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" }))),
-            suffix)));
-};
-function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
-    let message = "";
-    if (heading && !headingFullyVisible) {
-        message = `${heading} | ${label}`;
-    }
-    else if (!labelFullyVisible) {
-        message = label;
-    }
-    return message;
-}
-Chip.Prefix = ChipPrefix;
-Chip.Suffix = ChipSuffix;
-
-exports.Chip = Chip;
-exports.styles = styles;

package/dist/MultiSelect/utils.d.ts

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