@jobber/components 2.79.0 → 2.80.0

package/CHANGELOG.md

@@ -8,6 +8,17 @@ 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)
 
 

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/package.json

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