@jobber/components 2.78.2 → 2.80.0

package/CHANGELOG.md

@@ -8,6 +8,36 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.80.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.79.0...@jobber/components@2.80.0) (2022-04-05)
+
+
+### Features
+
+* **components:** Enable chip navigation with left and right arrow keys ([#872](https://github.com/GetJobber/atlantis/issues/872)) ([065b17b](https://github.com/GetJobber/atlantis/commit/065b17bf55161c85d11346fdd1d41a1c6e01e39d))
+
+
+
+
+
+# [2.79.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.78.3...@jobber/components@2.79.0) (2022-03-25)
+
+
+### Features
+
+* **components:** create statuslabel component ([#870](https://github.com/GetJobber/atlantis/issues/870)) ([cced9b9](https://github.com/GetJobber/atlantis/commit/cced9b9c1af70432b62766e440f445b949bdd236))
+
+
+
+
+
+## [2.78.3](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.78.2...@jobber/components@2.78.3) (2022-03-17)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
 ## [2.78.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.78.1...@jobber/components@2.78.2) (2022-03-16)
 
 **Note:** Version bump only for package @jobber/components

package/StatusLabel.d.ts

@@ -0,0 +1 @@
+export * from "./dist/StatusLabel";

package/StatusLabel.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var StatusLabel = require("./dist/StatusLabel");
+
+Object.keys(StatusLabel).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return StatusLabel[key];
+    },
+  });
+});

package/dist/Chips/ChipTypes.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactElement } from "react";
+import { KeyboardEvent, MouseEvent, ReactElement } from "react";
 import { ChipButtonProps } from "./InternalChipButton";
 import { AvatarProps } from "../Avatar";
 import { IconProps } from "../Icon";
@@ -12,7 +12,7 @@ export interface InternalChipProps {
      */
     readonly active?: boolean;
     /**
-     * Makes the chip look and feels uninteractable.
+     * Makes the chip look and feel uninteractable.
      */
     readonly disabled?: boolean;
     /**
@@ -35,8 +35,25 @@ export interface InternalChipProps {
      * Adds a component on the right side of the label.
      */
     readonly suffix?: ReactElement<IconProps | ChipButtonProps>;
+    /**
+     * The label for the interactive chip element for voice over
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Allows the chip to be focused.
+     *
+     * **NOTE**: Clickable chips are focusable by default so you don't need to
+     * specify this prop.
+     *
+     * This has the same effect as HTML [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).
+     */
+    readonly tabIndex?: number;
     /**
      * Callback when the chip itself gets clicked.
      */
     onClick?(event: MouseEvent<HTMLDivElement | HTMLInputElement | HTMLButtonElement>): void;
+    /**
+     * Callback for keyboard interaction with chips (e.g., chip deletion).
+     */
+    onKeyDown?(event: KeyboardEvent<HTMLDivElement | HTMLButtonElement>): void;
 }

package/dist/Chips/InternalChip.d.ts

@@ -1,2 +1,2 @@
 import { InternalChipProps } from "./ChipTypes";
-export declare function InternalChip({ label, active, disabled, invalid, prefix, suffix, onClick, }: InternalChipProps): JSX.Element;
+export declare function InternalChip({ label, active, disabled, invalid, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }: InternalChipProps): JSX.Element;

package/dist/Chips/InternalChipDismissible/InternalChipDismissibleTypes.d.ts

@@ -5,7 +5,6 @@ export declare type InternalChipDismissibleProps = Omit<ChipDismissibleProps, "t
 export interface ChipDismissibleInputProps extends Pick<InternalChipDismissibleProps, "activator" | "isLoadingMore" | "onSearch" | "onLoadMore"> {
     readonly attachTo: React.RefObject<Element | null>;
     readonly options: ChipProps[];
-    onEmptyBackspace(): void;
     onCustomOptionSelect?(value: string): void;
     onOptionSelect(value: string): void;
 }

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

@@ -1,12 +1,15 @@
-import { MouseEvent } from "react";
+import { KeyboardEvent, MouseEvent } from "react";
 import { InternalChipDismissibleProps } from "../InternalChipDismissibleTypes";
 export declare function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }: InternalChipDismissibleProps): {
     ref: import("react").RefObject<HTMLDivElement>;
     sortedVisibleChipOptions: import("../../Chip").ChipProps[];
     availableChipOptions: import("../../Chip").ChipProps[];
-    handleChipRemove: (chip: import("../../Chip").ChipProps) => () => void;
+    handleChipRemove: (value: string) => () => void;
     handleChipAdd: (value: string) => void;
     handleCustomAdd: ((value: string) => void) | undefined;
     handleChipClick: (value: string) => ((event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void) | undefined;
-    handleEmptyBackspace: () => void;
+    handleWrapperKeyDown: (event: KeyboardEvent<HTMLDivElement> & {
+        target: HTMLElement;
+    }) => void;
+    handleChipKeyDown: (value: string) => (event: KeyboardEvent<HTMLElement>) => void;
 };

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

@@ -1,7 +1,7 @@
 /// <reference types="lodash" />
 import React from "react";
 import { ChipDismissibleInputOptionProps, ChipDismissibleInputProps } from "../InternalChipDismissibleTypes";
-export declare function useInternalChipDismissibleInput({ options, isLoadingMore, onEmptyBackspace, onCustomOptionSelect, onOptionSelect, onSearch, }: ChipDismissibleInputProps): {
+export declare function useInternalChipDismissibleInput({ options, isLoadingMore, onCustomOptionSelect, onOptionSelect, onSearch, }: ChipDismissibleInputProps): {
     menuOpen: boolean;
     searchValue: string;
     shouldCancelBlur: boolean;

package/dist/Chips/index.js

@@ -26,7 +26,7 @@ var index$4 = require('../Tooltip/index.js');
 var reactPopper = require('react-popper');
 var lodash = require('lodash');
 
-var css = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.uhcyg-a-GLRKF_7oHwvMP {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2XfthED8eqbKIyTNoH1aWp {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm,\n.fl19i7ccgBu7NZkxnpvcI {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea,\n._35he2rVDYRU4YQko5r4adP ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n._2XfthED8eqbKIyTNoH1aWp:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  outline: none;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-focus);\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:hover,\n._3Uf2El5YBbG3DmUWHBhuea:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp:not(._18wCcoIrboygQTnIVm8yzS) {\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n._2XfthED8eqbKIyTNoH1aWp._18wCcoIrboygQTnIVm8yzS {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n._2XfthED8eqbKIyTNoH1aWp._1FTJ2ALrm1mVaT7HdMFFGN {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n._2XfthED8eqbKIyTNoH1aWp.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n._18wCcoIrboygQTnIVm8yzS.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n._1FTJ2ALrm1mVaT7HdMFFGN.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n._35he2rVDYRU4YQko5r4adP {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._1M_ek3kiaa7OApx5rwBEc3 {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:hover,\n._1M_ek3kiaa7OApx5rwBEc3:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:focus,\n._3Uf2El5YBbG3DmUWHBhuea ._1M_ek3kiaa7OApx5rwBEc3:hover {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n._3AG5dSWeyKYD1Xfu9fN_DL > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n._3AG5dSWeyKYD1Xfu9fN_DL {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
+var css = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.uhcyg-a-GLRKF_7oHwvMP {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2XfthED8eqbKIyTNoH1aWp {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm,\n.fl19i7ccgBu7NZkxnpvcI {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea,\n._35he2rVDYRU4YQko5r4adP ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n._3Uf2El5YBbG3DmUWHBhuea:hover,\n._2XfthED8eqbKIyTNoH1aWp:focus {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._2XfthED8eqbKIyTNoH1aWp:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-focus);\n}\n\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp:not(._18wCcoIrboygQTnIVm8yzS) {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n._2XfthED8eqbKIyTNoH1aWp._18wCcoIrboygQTnIVm8yzS {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n._2XfthED8eqbKIyTNoH1aWp._1FTJ2ALrm1mVaT7HdMFFGN {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n._2XfthED8eqbKIyTNoH1aWp.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n._18wCcoIrboygQTnIVm8yzS.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n._1FTJ2ALrm1mVaT7HdMFFGN.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n._35he2rVDYRU4YQko5r4adP {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._1M_ek3kiaa7OApx5rwBEc3 {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:hover,\n._1M_ek3kiaa7OApx5rwBEc3:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:focus,\n._3Uf2El5YBbG3DmUWHBhuea ._1M_ek3kiaa7OApx5rwBEc3:hover {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n._3AG5dSWeyKYD1Xfu9fN_DL > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n._3AG5dSWeyKYD1Xfu9fN_DL {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
 var styles = {"wrapper":"uhcyg-a-GLRKF_7oHwvMP","chip":"_2XfthED8eqbKIyTNoH1aWp","hasPrefix":"_4U2lNr3Kk6xnNZTk3Fxgm","hasSuffix":"fl19i7ccgBu7NZkxnpvcI","clickable":"_3Uf2El5YBbG3DmUWHBhuea","input":"_35he2rVDYRU4YQko5r4adP","active":"_18wCcoIrboygQTnIVm8yzS","invalid":"_1FTJ2ALrm1mVaT7HdMFFGN","disabled":"B1ELFzeQy9Ihy9oYcv-px","button":"_1M_ek3kiaa7OApx5rwBEc3","icon":"_3AG5dSWeyKYD1Xfu9fN_DL"};
 __chunk_2.styleInject(css);
 
@@ -97,7 +97,7 @@ function InternalChipAffix(_a) {
 
 function InternalChip(_a) {
     var _b;
-    var label = _a.label, _c = _a.active, active = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.invalid, invalid = _e === void 0 ? false : _e, prefix = _a.prefix, suffix = _a.suffix, onClick = _a.onClick;
+    var label = _a.label, _c = _a.active, active = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.invalid, invalid = _e === void 0 ? false : _e, prefix = _a.prefix, suffix = _a.suffix, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, onClick = _a.onClick, onKeyDown = _a.onKeyDown;
     var _f = __chunk_1.__read(React.useState(), 2), truncateRef = _f[0], setTruncateRef = _f[1];
     var isClickable = onClick && !disabled;
     var classNames = classnames(styles.chip, (_b = {},
@@ -110,10 +110,7 @@ function InternalChip(_a) {
         _b));
     var affixProps = { active: active, invalid: invalid, disabled: disabled };
     var Tag = onClick ? "button" : "div";
-    var chip = (React__default.createElement(Tag, __chunk_1.__assign({ className: classNames }, (isClickable && {
-        onClick: onClick,
-        disabled: disabled,
-    }), { "data-testid": "chip-wrapper" }),
+    var chip = (React__default.createElement(Tag, __chunk_1.__assign({ className: classNames }, (isClickable && { onClick: onClick, disabled: disabled }), { onKeyDown: onKeyDown, "data-testid": "chip-wrapper", "aria-label": ariaLabel, tabIndex: tabIndex, role: tabIndex !== undefined ? "option" : undefined }),
         React__default.createElement(InternalChipAffix, __chunk_1.__assign({ affix: prefix }, affixProps)),
         React__default.createElement(index.Typography, { element: "span", numberOfLines: 1, size: "base" },
             React__default.createElement("span", { ref: setTruncateRef }, label)),
@@ -226,10 +223,10 @@ function useInternalChipDismissible(_a) {
     var availableChipOptions = chipOptions.filter(function (chip) { return !selected.includes(chip.value); });
     var liveAnnounce = hooks.useLiveAnnounce().liveAnnounce;
     var actions = {
-        handleChipRemove: function (chip) {
+        handleChipRemove: function (value) {
             return function () {
-                liveAnnounce(chip.label + " Removed");
-                onChange(selected.filter(function (val) { return val !== chip.value; }));
+                liveAnnounce(value + " Removed");
+                onChange(selected.filter(function (val) { return val !== value; }));
             };
         },
         handleChipAdd: function (value) { return onChange(__chunk_1.__spread(selected, [value])); },
@@ -239,8 +236,39 @@ function useInternalChipDismissible(_a) {
                 return;
             return function (event) { return onClick(event, value); };
         },
-        handleEmptyBackspace: function () {
-            actions.handleChipRemove(sortedVisibleChipOptions[selected.length - 1])();
+        handleWrapperKeyDown: function (event) {
+            var target = event.target;
+            var isInputAndHasValue = target instanceof HTMLInputElement && target.value;
+            if (isInputAndHasValue)
+                return;
+            var nextElementToFocus = target.nextElementSibling;
+            var prevElementToFocus = target.previousElementSibling;
+            if (event.key === "ArrowLeft" &&
+                prevElementToFocus instanceof HTMLElement) {
+                prevElementToFocus.focus();
+            }
+            if (event.key === "ArrowRight" &&
+                nextElementToFocus instanceof HTMLElement) {
+                nextElementToFocus.focus();
+            }
+        },
+        handleChipKeyDown: function (value) {
+            return function (event) {
+                if (event.key === "Backspace" || event.key === "Delete") {
+                    var target = event.target;
+                    if (target instanceof HTMLElement) {
+                        var prevElement = target.previousElementSibling;
+                        var nextElement = target.nextElementSibling;
+                        if (prevElement instanceof HTMLElement) {
+                            prevElement.focus();
+                        }
+                        else if (nextElement instanceof HTMLElement) {
+                            nextElement.focus();
+                        }
+                    }
+                    actions.handleChipRemove(value)();
+                }
+            };
         },
     };
     return __chunk_1.__assign(__chunk_1.__assign({}, actions), { ref: ref,
@@ -250,7 +278,7 @@ function useInternalChipDismissible(_a) {
 
 var menuId = uuid.v1();
 function useInternalChipDismissibleInput(_a) {
-    var options = _a.options, _b = _a.isLoadingMore, isLoadingMore = _b === void 0 ? false : _b, onEmptyBackspace = _a.onEmptyBackspace, onCustomOptionSelect = _a.onCustomOptionSelect, onOptionSelect = _a.onOptionSelect, onSearch = _a.onSearch;
+    var options = _a.options, _b = _a.isLoadingMore, isLoadingMore = _b === void 0 ? false : _b, onCustomOptionSelect = _a.onCustomOptionSelect, onOptionSelect = _a.onOptionSelect, onSearch = _a.onSearch;
     var _c = __chunk_1.__read(React.useState([]), 2), allOptions = _c[0], setAllOptions = _c[1];
     var _d = __chunk_1.__read(React.useState(""), 2), searchValue = _d[0], setSearchValue = _d[1];
     var _e = __chunk_1.__read(React.useState(false), 2), menuOpen = _e[0], setMenuOpen = _e[1];
@@ -325,7 +353,15 @@ function useInternalChipDismissibleInput(_a) {
                 ArrowUp: function () { return setActiveIndex(computed.previousOptionIndex); },
             };
             if (searchValue.length === 0) {
-                callbacks.Backspace = function () { return onEmptyBackspace(); };
+                callbacks.Backspace = function () {
+                    var _a;
+                    // If there's no text left to delete,
+                    // and delete is pressed again, focus on a chip instead.
+                    var target = (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+                    if (target instanceof HTMLElement) {
+                        target.focus();
+                    }
+                };
             }
             handleKeydownEvents(callbacks, event);
         },
@@ -446,7 +482,7 @@ function InternalChipDismissibleInput(props) {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("input", { ref: inputRef, className: styles$1.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: lodash.debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
         (hasAvailableOptions || isLoadingMore) && (React__default.createElement("div", __chunk_1.__assign({ ref: setPositionedElementRef, className: styles$1.menu, style: popperStyles.popper }, attributes.popper),
-            React__default.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles$1.menuList },
+            React__default.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles$1.menuList, "data-testid": "chip-menu" },
                 allOptions.map(function (option, i) {
                     var _a;
                     return (React__default.createElement("button", { key: option.value, role: "option", id: generateDescendantId(i), className: classnames(styles$1.menuListOption, (_a = {},
@@ -461,10 +497,10 @@ function InternalChipDismissibleInput(props) {
 }
 
 function InternalChipDismissible(props) {
-    var _a = useInternalChipDismissible(props), availableChipOptions = _a.availableChipOptions, wrapperRef = _a.ref, sortedVisibleChipOptions = _a.sortedVisibleChipOptions, handleChipClick = _a.handleChipClick, handleChipAdd = _a.handleChipAdd, handleChipRemove = _a.handleChipRemove, handleCustomAdd = _a.handleCustomAdd, handleEmptyBackspace = _a.handleEmptyBackspace;
-    return (React__default.createElement("div", { ref: wrapperRef, className: styles$1.wrapper, "data-testid": "dismissible-chips" },
-        sortedVisibleChipOptions.map(function (chip) { return (React__default.createElement(ChipDismissible, __chunk_1.__assign({ key: chip.value }, chip, { onClick: handleChipClick(chip.value), onRequestRemove: handleChipRemove(chip) }))); }),
-        React__default.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onEmptyBackspace: handleEmptyBackspace, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
+    var _a = useInternalChipDismissible(props), availableChipOptions = _a.availableChipOptions, wrapperRef = _a.ref, sortedVisibleChipOptions = _a.sortedVisibleChipOptions, handleChipAdd = _a.handleChipAdd, handleChipClick = _a.handleChipClick, handleChipKeyDown = _a.handleChipKeyDown, handleChipRemove = _a.handleChipRemove, handleCustomAdd = _a.handleCustomAdd, handleWrapperKeyDown = _a.handleWrapperKeyDown;
+    return (React__default.createElement("div", { ref: wrapperRef, className: styles$1.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
+        sortedVisibleChipOptions.map(function (chip) { return (React__default.createElement(InternalChip, __chunk_1.__assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: chip.value + ". Press delete or backspace to remove " + chip.value, tabIndex: 0, suffix: React__default.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) }))); }),
+        React__default.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
 }
 
 function Chips(props) {

package/dist/Popover/index.js

@@ -18,7 +18,7 @@ var hooks = require('@jobber/hooks');
 var index$1$1 = require('../ButtonDismiss/index.js');
 var reactPopper = require('react-popper');
 
-var css = ":root {\n  --card--base-padding: var(--space-base);\n  --popover--padding: var(--space-base);\n  --popover--width: calc(var(--base-unit) * 21.875);\n  --dismiss--button-padding: calc(var(--base-unit) / 4);\n}\n\n.bmcwfoRgxW9uxv0uyXH04 {\n  display: -ms-flexbox;\n  display: flex;\n  position: \"relative\";\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--popover--padding);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TjIegPUFwvTBnPHT-hzfN {\n  float: right;\n  padding: calc(var(--base-unit) / 4);\n  padding: calc(var(--base-unit) / 4);\n  padding: var(--dismiss--button-padding);\n  text-align: right;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z {\n  z-index: var(--elevation-base);\n  width: 100%;\n  max-width: calc(var(--base-unit) * 21.875);\n  max-width: calc(var(--base-unit) * 21.875);\n  max-width: var(--popover--width);\n  box-shadow: var(--shadow-base);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n  font-size: var(--base-unit);\n  line-height: normal;\n  background: var(--color-surface);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n.ZBY5pcUZw7V-86CZwsJcF {\n  visibility: hidden;\n}\n\n.ZBY5pcUZw7V-86CZwsJcF,\n.ZBY5pcUZw7V-86CZwsJcF::before {\n  position: absolute;\n  width: var(--base-unit);\n  height: var(--base-unit);\n  background: inherit;\n}\n\n.ZBY5pcUZw7V-86CZwsJcF::before {\n  content: \"\";\n  visibility: visible;\n  border: var(--border-base) solid var(--color-border);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n          clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"top\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  bottom: -5px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"top\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(-135deg);\n          transform: rotate(-135deg);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"bottom\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  top: -7px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"left\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  right: -5px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"left\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(135deg);\n          transform: rotate(135deg);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"right\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  left: -7px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"right\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n}\n";
+var css = ":root {\n  --card--base-padding: var(--space-base);\n  --popover--padding: var(--space-base);\n  --popover--width: calc(var(--base-unit) * 21.875);\n  --dismiss--button-padding: calc(var(--base-unit) / 4);\n}\n\n.bmcwfoRgxW9uxv0uyXH04 {\n  display: -ms-flexbox;\n  display: flex;\n  position: \"relative\";\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--popover--padding);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TjIegPUFwvTBnPHT-hzfN {\n  float: right;\n  padding: calc(var(--base-unit) / 4);\n  padding: calc(var(--base-unit) / 4);\n  padding: var(--dismiss--button-padding);\n  text-align: right;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z {\n  z-index: var(--elevation-tooltip);\n  width: -webkit-max-content;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: calc(var(--base-unit) * 21.875);\n  max-width: calc(var(--base-unit) * 21.875);\n  max-width: var(--popover--width);\n  box-shadow: var(--shadow-base);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n  font-size: var(--base-unit);\n  line-height: normal;\n  background: var(--color-surface);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n.ZBY5pcUZw7V-86CZwsJcF {\n  visibility: hidden;\n}\n\n.ZBY5pcUZw7V-86CZwsJcF,\n.ZBY5pcUZw7V-86CZwsJcF::before {\n  position: absolute;\n  width: var(--base-unit);\n  height: var(--base-unit);\n  background: inherit;\n}\n\n.ZBY5pcUZw7V-86CZwsJcF::before {\n  content: \"\";\n  visibility: visible;\n  border: var(--border-base) solid var(--color-border);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n          clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"top\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  bottom: -5px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"top\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(-135deg);\n          transform: rotate(-135deg);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"bottom\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  top: -7px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"left\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  right: -5px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"left\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(135deg);\n          transform: rotate(135deg);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"right\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  left: -7px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"right\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n}\n";
 var classes = {"header":"bmcwfoRgxW9uxv0uyXH04","dismissButton":"TjIegPUFwvTBnPHT-hzfN","popover":"_1v-Ekqld7VhWiu8_bFt62z","arrow":"ZBY5pcUZw7V-86CZwsJcF"};
 __chunk_2.styleInject(css);
 

package/dist/StatusLabel/StatusLabel.d.ts

@@ -0,0 +1,25 @@
+export declare type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
+export interface StatusLabelType {
+    readonly statusLabel: string;
+    readonly statusType?: StatusType;
+}
+interface StatusLabelProps {
+    /**
+     * Text to display
+     */
+    readonly label: string;
+    /**
+     * Alignment of label
+     *
+     * @default "start"
+     */
+    readonly alignment?: "start" | "end";
+    /**
+     * Status color of the indicator beside text
+     *
+     * @default "inactive"
+     */
+    readonly status: StatusType;
+}
+export declare function StatusLabel({ label, alignment, status, }: StatusLabelProps): JSX.Element;
+export {};

package/dist/StatusLabel/index.d.ts

@@ -0,0 +1 @@
+export { StatusLabel } from "./StatusLabel";

package/dist/StatusLabel/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+require('../chunk-b67af3cb.js');
+var React = require('react');
+var React__default = _interopDefault(React);
+var __chunk_2 = require('../chunk-17e02351.js');
+var classnames = _interopDefault(require('classnames'));
+require('../Typography/index.js');
+var index$1 = require('../Text/index.js');
+
+var css = ":root {\n  --statusLabel-icon-diameter: calc(var(--space-base) - var(--space-smaller));\n}\n\n.NUUO4mR41Qn5Pf0pzjhZe {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n._2XU8xQD0q92o9P2Ej5EdwP {\n  width: calc(var(--space-base) - var(--space-smaller));\n  width: calc(var(--space-base) - var(--space-smaller));\n  width: var(--statusLabel-icon-diameter);\n  height: calc(var(--space-base) - var(--space-smaller));\n  height: calc(var(--space-base) - var(--space-smaller));\n  height: var(--statusLabel-icon-diameter);\n  margin-top: var(--space-smallest);\n  border-radius: var(--radius-base);\n  background-color: var(--color-success);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n\n._3eQHL9hZlneMfEoGaF0dDv {\n  -ms-flex-direction: row-reverse;\n      flex-direction: row-reverse;\n}\n";
+var styles = {"statusLabelRow":"NUUO4mR41Qn5Pf0pzjhZe","statusIndicator":"_2XU8xQD0q92o9P2Ej5EdwP","labelTextEndAligned":"_3eQHL9hZlneMfEoGaF0dDv"};
+__chunk_2.styleInject(css);
+
+function StatusLabel(_a) {
+    var label = _a.label, _b = _a.alignment, alignment = _b === void 0 ? "start" : _b, _c = _a.status, status = _c === void 0 ? "inactive" : _c;
+    var containerClassNames = classnames(styles.statusLabelRow, alignment === "end" && styles.labelTextEndAligned);
+    return (React__default.createElement("div", { role: "status", className: containerClassNames },
+        React__default.createElement(StatusLabelIcon, { status: status }),
+        React__default.createElement(index$1.Text, { size: "small", align: alignment }, label)));
+}
+function StatusLabelIcon(_a) {
+    var status = _a.status;
+    return (React__default.createElement("div", { style: { backgroundColor: "var(--color-" + status }, className: styles.statusIndicator }));
+}
+
+exports.StatusLabel = StatusLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.78.2",
+  "version": "2.80.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3d60a8625c6acd8fff6fde34c934d78b0a725b10"
+  "gitHead": "74a06594d91c1808e47dad89994633817c3c55e0"
 }