@dialpad/dialtone-vue 2.11.0 → 2.12.0

package/dist/dialtone-vue.common.js

@@ -3375,6 +3375,7 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
  * the root element of the component.
  */
 
+const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced ' + 'element doesn\'t exist. Received listElement: ';
 /* harmony default export */ const keyboard_list_navigation = (function () {
   let {
     // Role of the list items in the component. This is used to identify the list items
@@ -3398,7 +3399,7 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
     endOfListMethod = null,
     // Scroll the active element into view when highlighted by a keyboard event.
     scrollToOnHighlight = true,
-    // Focus the active element on keyboard navigation
+    // Focus the active element on keyboard navigation.
     focusOnKeyboardNavigation = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
@@ -3408,8 +3409,8 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
       return {
         [indexKey]: -1,
         [idKey]: '',
-        scrollToOnHighlight: scrollToOnHighlight,
-        focusOnKeyboardNavigation: focusOnKeyboardNavigation
+        scrollToOnHighlight,
+        focusOnKeyboardNavigation
       };
     },
 
@@ -3432,14 +3433,25 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
       // Gets the length of all the items in the list, uses the listItemRole param to determine
       // whether an element is a list item.
       _itemsLength() {
+        const listItems = this._getListItemNodes();
+
+        if (listItems === null) {
+          return 0;
+        }
+
+        return listItems.length;
+      },
+
+      // Gets all the list item nodes within the list element
+      _getListItemNodes() {
         const listElement = this._getListElement();
 
         if (!listElement) {
-          console.error("listElementKey is required or the referenced element doesn't exist. Received\n          listElement: ", listElement);
-          return 0;
+          console.error(ERROR_INVALID_LIST_ELEMENT, listElement);
+          return null;
         }
 
-        return listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")).length;
+        return Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
       },
 
       onUpKey() {
@@ -3484,6 +3496,31 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
         this.focusActiveItemIfNeeded();
       },
 
+      onNavigationKey(key) {
+        const listItems = this._getListItemNodes();
+
+        const matchingItems = listItems.filter(item => {
+          const content = item.textContent.trim().toLowerCase();
+          return content.startsWith(key.toLowerCase());
+        });
+
+        if (matchingItems.length <= 0) {
+          return;
+        }
+
+        const highlightedMatchingItemIndex = matchingItems.findIndex(item => {
+          return this[indexKey] === listItems.indexOf(item);
+        });
+        const nextHighlightedItemIndex = listItems.indexOf(highlightedMatchingItemIndex < matchingItems.length - 1 ? matchingItems[highlightedMatchingItemIndex + 1] : matchingItems[0]);
+        this.setHighlightIndex(nextHighlightedItemIndex);
+        this.scrollActiveItemIntoViewIfNeeded();
+        this.focusActiveItemIfNeeded();
+      },
+
+      isValidCharacter(key) {
+        return key.length === 1;
+      },
+
       jumpToBeginning() {
         this.setHighlightIndex(0);
       },
@@ -3520,8 +3557,7 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
         }
 
         const listItems = Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
-        const index = listItems.indexOf(listElement.querySelector("#".concat(id)));
-        return index;
+        return listItems.indexOf(listElement.querySelector("#".concat(id)));
       },
 
       _getItemId(index) {
@@ -3830,13 +3866,13 @@ var combobox_component = normalizeComponent(
 /* harmony default export */ const combobox = (combobox_component.exports);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=1eb414fd&
-var dropdownvue_type_template_id_1eb414fd_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":"first","fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=e689f0c4&
+var dropdownvue_type_template_id_e689f0c4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":"first","fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')},function($event){return _vm.onKeyValidation($event, 'onKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
 return [_c('ul',{ref:"listWrapper",class:['d-ps-relative', 'd-px0', _vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close})],2)]}}],null,true)},_vm.$listeners))}
-var dropdownvue_type_template_id_1eb414fd_staticRenderFns = []
+var dropdownvue_type_template_id_e689f0c4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=97535496&
@@ -9534,6 +9570,7 @@ const DROPDOWN_PADDING_CLASSES = {
 //
 //
 //
+//
 
 
 
@@ -9703,6 +9740,10 @@ const DROPDOWN_PADDING_CLASSES = {
 
     activeItemEl() {
       return this.getListElement().querySelector('#' + this.highlightId);
+    },
+
+    isArrowKeyNav() {
+      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;
     }
 
   },
@@ -9762,7 +9803,7 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onUpKey();
       }
     },
@@ -9773,29 +9814,35 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onDownKey();
       }
     },
 
     onHomeKeyPress() {
-      if (!this.isOpen) {
+      if (!this.isOpen || !this.isArrowKeyNav) {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
-        return this.onHomeKey();
-      }
+      return this.onHomeKey();
     },
 
     onEndKeyPress() {
-      if (!this.isOpen) {
+      if (!this.isOpen || !this.isArrowKeyNav) {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
-        return this.onEndKey();
+      return this.onEndKey();
+    },
+
+    onKeyPress(e) {
+      if (!this.isOpen || !this.isArrowKeyNav || !this.isValidCharacter(e.key)) {
+        return;
       }
+
+      e.stopPropagation();
+      e.preventDefault();
+      return this.onNavigationKey(e.key);
     },
 
     onKeyValidation(e, eventHandler) {
@@ -9820,8 +9867,8 @@ const DROPDOWN_PADDING_CLASSES = {
 ;
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_1eb414fd_render,
-  dropdownvue_type_template_id_1eb414fd_staticRenderFns,
+  dropdownvue_type_template_id_e689f0c4_render,
+  dropdownvue_type_template_id_e689f0c4_staticRenderFns,
   false,
   null,
   null,
@@ -14360,15 +14407,20 @@ var checkbox_group_component = normalizeComponent(
 /* harmony default export */ const checkbox_group = (checkbox_group_component.exports);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/chip/chip.vue?vue&type=template&id=4d7bb584&
-var chipvue_type_template_id_4d7bb584_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:_vm.chipClasses(),attrs:{"id":_vm.id,"data-qa":"dt-chip","tabindex":_vm.tabIndex,"aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel},on:{"mousedown":_vm.onClick,"mouseup":_vm.onClick,"mouseleave":function($event){_vm.isActive = false},"focusout":function($event){_vm.isActive = false},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.onClose.apply(null, arguments)}]}},[(_vm.$slots.icon)?_c('span',{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[_vm._t("icon")],2):(_vm.$slots.avatar)?_c('span',{attrs:{"data-qa":"dt-chip-avatar"}},[_vm._t("avatar")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-truncate', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e(),(!_vm.hideClose)?_c('span',{staticClass:"d-chip-btn-holder"}):_vm._e(),_c('span',{ref:"closeBtnContainer",staticClass:"d-chip-btn-container"},[(!_vm.hideClose)?_c('dt-button',_vm._b({attrs:{"data-qa":"dt-chip-close","circle":"","importance":"clear","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}}},'dt-button',_vm.closeButtonProps,false),[_c('icon-close')],1):_vm._e()],1)])}
-var chipvue_type_template_id_4d7bb584_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/chip/chip.vue?vue&type=template&id=81827eb4&
+var chipvue_type_template_id_81827eb4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"d-chip"},[_c(_vm.interactive ? 'button' : 'span',_vm._g({tag:"component",class:_vm.chipClasses(),attrs:{"id":_vm.id,"type":_vm.interactive && 'button',"data-qa":"dt-chip","aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel}},_vm.chipListeners),[(_vm.$slots.icon)?_c('span',{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[_vm._t("icon")],2):(_vm.$slots.avatar)?_c('span',{attrs:{"data-qa":"dt-chip-avatar"}},[_vm._t("avatar")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-truncate', 'd-chip__text', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e()]),(!_vm.hideClose)?_c('dt-button',_vm._b({class:_vm.chipCloseButtonClasses(),attrs:{"data-qa":"dt-chip-close","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],1)}
+var chipvue_type_template_id_81827eb4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
-  xs: 'd-chip--xs',
-  sm: 'd-chip--sm',
+  xs: 'd-chip__label--xs',
+  sm: 'd-chip__label--sm',
+  md: ''
+};
+const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
+  xs: 'd-chip__close--xs',
+  sm: 'd-chip__close--sm',
   md: ''
 };
 /* harmony default export */ const chip_constants = ({
@@ -14427,17 +14479,6 @@ const CHIP_SIZE_MODIFIERS = {
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
 
 
 
@@ -14515,7 +14556,7 @@ const CHIP_SIZE_MODIFIERS = {
       default: ''
     }
   },
-  emits: ['click', 'close'],
+  emits: ['click', 'close', 'keyup'],
 
   data() {
     return {
@@ -14524,37 +14565,37 @@ const CHIP_SIZE_MODIFIERS = {
   },
 
   computed: {
-    tabIndex() {
-      return this.interactive ? 0 : -1;
+    chipListeners() {
+      return { ...this.$listeners,
+        click: event => {
+          if (this.interactive) this.$emit('click', event);
+        },
+        keyup: event => {
+          var _event$code;
+
+          if (((_event$code = event.code) === null || _event$code === void 0 ? void 0 : _event$code.toLowerCase()) === 'delete') {
+            this.onClose();
+          } else {
+            this.$emit('keyup', event);
+          }
+        }
+      };
     }
 
   },
   methods: {
     chipClasses() {
-      return ['d-chip', CHIP_SIZE_MODIFIERS[this.size], {
-        'd-chip--interactive': this.interactive,
-        'd-chip--active': this.isActive
-      }];
+      return ['d-chip__label', CHIP_SIZE_MODIFIERS[this.size]];
+    },
+
+    chipCloseButtonClasses() {
+      return ['d-chip__close', CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]];
     },
 
     onClose() {
       if (!this.hideClose) {
         this.$emit('close');
       }
-    },
-
-    onClick(event) {
-      // Clicking on the button should not update value of isActive.
-      if (!this.interactive || this.$refs.closeBtnContainer.contains(event.target)) {
-        return;
-      }
-
-      if (event.type === 'mousedown' || event.type === 'keydown') {
-        this.isActive = true;
-      } else {
-        this.isActive = false;
-        this.$emit('click');
-      }
     }
 
   }
@@ -14571,8 +14612,8 @@ const CHIP_SIZE_MODIFIERS = {
 ;
 var chip_component = normalizeComponent(
   chip_chipvue_type_script_lang_js_,
-  chipvue_type_template_id_4d7bb584_render,
-  chipvue_type_template_id_4d7bb584_staticRenderFns,
+  chipvue_type_template_id_81827eb4_render,
+  chipvue_type_template_id_81827eb4_staticRenderFns,
   false,
   null,
   null,

package/dist/dialtone-vue.umd.js

@@ -3393,6 +3393,7 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
  * the root element of the component.
  */
 
+const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced ' + 'element doesn\'t exist. Received listElement: ';
 /* harmony default export */ const keyboard_list_navigation = (function () {
   let {
     // Role of the list items in the component. This is used to identify the list items
@@ -3416,7 +3417,7 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
     endOfListMethod = null,
     // Scroll the active element into view when highlighted by a keyboard event.
     scrollToOnHighlight = true,
-    // Focus the active element on keyboard navigation
+    // Focus the active element on keyboard navigation.
     focusOnKeyboardNavigation = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
@@ -3426,8 +3427,8 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
       return {
         [indexKey]: -1,
         [idKey]: '',
-        scrollToOnHighlight: scrollToOnHighlight,
-        focusOnKeyboardNavigation: focusOnKeyboardNavigation
+        scrollToOnHighlight,
+        focusOnKeyboardNavigation
       };
     },
 
@@ -3450,14 +3451,25 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
       // Gets the length of all the items in the list, uses the listItemRole param to determine
       // whether an element is a list item.
       _itemsLength() {
+        const listItems = this._getListItemNodes();
+
+        if (listItems === null) {
+          return 0;
+        }
+
+        return listItems.length;
+      },
+
+      // Gets all the list item nodes within the list element
+      _getListItemNodes() {
         const listElement = this._getListElement();
 
         if (!listElement) {
-          console.error("listElementKey is required or the referenced element doesn't exist. Received\n          listElement: ", listElement);
-          return 0;
+          console.error(ERROR_INVALID_LIST_ELEMENT, listElement);
+          return null;
         }
 
-        return listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")).length;
+        return Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
       },
 
       onUpKey() {
@@ -3502,6 +3514,31 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
         this.focusActiveItemIfNeeded();
       },
 
+      onNavigationKey(key) {
+        const listItems = this._getListItemNodes();
+
+        const matchingItems = listItems.filter(item => {
+          const content = item.textContent.trim().toLowerCase();
+          return content.startsWith(key.toLowerCase());
+        });
+
+        if (matchingItems.length <= 0) {
+          return;
+        }
+
+        const highlightedMatchingItemIndex = matchingItems.findIndex(item => {
+          return this[indexKey] === listItems.indexOf(item);
+        });
+        const nextHighlightedItemIndex = listItems.indexOf(highlightedMatchingItemIndex < matchingItems.length - 1 ? matchingItems[highlightedMatchingItemIndex + 1] : matchingItems[0]);
+        this.setHighlightIndex(nextHighlightedItemIndex);
+        this.scrollActiveItemIntoViewIfNeeded();
+        this.focusActiveItemIfNeeded();
+      },
+
+      isValidCharacter(key) {
+        return key.length === 1;
+      },
+
       jumpToBeginning() {
         this.setHighlightIndex(0);
       },
@@ -3538,8 +3575,7 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
         }
 
         const listItems = Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
-        const index = listItems.indexOf(listElement.querySelector("#".concat(id)));
-        return index;
+        return listItems.indexOf(listElement.querySelector("#".concat(id)));
       },
 
       _getItemId(index) {
@@ -3848,13 +3884,13 @@ var combobox_component = normalizeComponent(
 /* harmony default export */ const combobox = (combobox_component.exports);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=1eb414fd&
-var dropdownvue_type_template_id_1eb414fd_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":"first","fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=e689f0c4&
+var dropdownvue_type_template_id_e689f0c4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":"first","fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')},function($event){return _vm.onKeyValidation($event, 'onKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
 return [_c('ul',{ref:"listWrapper",class:['d-ps-relative', 'd-px0', _vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close})],2)]}}],null,true)},_vm.$listeners))}
-var dropdownvue_type_template_id_1eb414fd_staticRenderFns = []
+var dropdownvue_type_template_id_e689f0c4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=97535496&
@@ -9552,6 +9588,7 @@ const DROPDOWN_PADDING_CLASSES = {
 //
 //
 //
+//
 
 
 
@@ -9721,6 +9758,10 @@ const DROPDOWN_PADDING_CLASSES = {
 
     activeItemEl() {
       return this.getListElement().querySelector('#' + this.highlightId);
+    },
+
+    isArrowKeyNav() {
+      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;
     }
 
   },
@@ -9780,7 +9821,7 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onUpKey();
       }
     },
@@ -9791,29 +9832,35 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onDownKey();
       }
     },
 
     onHomeKeyPress() {
-      if (!this.isOpen) {
+      if (!this.isOpen || !this.isArrowKeyNav) {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
-        return this.onHomeKey();
-      }
+      return this.onHomeKey();
     },
 
     onEndKeyPress() {
-      if (!this.isOpen) {
+      if (!this.isOpen || !this.isArrowKeyNav) {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
-        return this.onEndKey();
+      return this.onEndKey();
+    },
+
+    onKeyPress(e) {
+      if (!this.isOpen || !this.isArrowKeyNav || !this.isValidCharacter(e.key)) {
+        return;
       }
+
+      e.stopPropagation();
+      e.preventDefault();
+      return this.onNavigationKey(e.key);
     },
 
     onKeyValidation(e, eventHandler) {
@@ -9838,8 +9885,8 @@ const DROPDOWN_PADDING_CLASSES = {
 ;
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_1eb414fd_render,
-  dropdownvue_type_template_id_1eb414fd_staticRenderFns,
+  dropdownvue_type_template_id_e689f0c4_render,
+  dropdownvue_type_template_id_e689f0c4_staticRenderFns,
   false,
   null,
   null,
@@ -14378,15 +14425,20 @@ var checkbox_group_component = normalizeComponent(
 /* harmony default export */ const checkbox_group = (checkbox_group_component.exports);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/chip/chip.vue?vue&type=template&id=4d7bb584&
-var chipvue_type_template_id_4d7bb584_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:_vm.chipClasses(),attrs:{"id":_vm.id,"data-qa":"dt-chip","tabindex":_vm.tabIndex,"aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel},on:{"mousedown":_vm.onClick,"mouseup":_vm.onClick,"mouseleave":function($event){_vm.isActive = false},"focusout":function($event){_vm.isActive = false},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.onClose.apply(null, arguments)}]}},[(_vm.$slots.icon)?_c('span',{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[_vm._t("icon")],2):(_vm.$slots.avatar)?_c('span',{attrs:{"data-qa":"dt-chip-avatar"}},[_vm._t("avatar")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-truncate', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e(),(!_vm.hideClose)?_c('span',{staticClass:"d-chip-btn-holder"}):_vm._e(),_c('span',{ref:"closeBtnContainer",staticClass:"d-chip-btn-container"},[(!_vm.hideClose)?_c('dt-button',_vm._b({attrs:{"data-qa":"dt-chip-close","circle":"","importance":"clear","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}}},'dt-button',_vm.closeButtonProps,false),[_c('icon-close')],1):_vm._e()],1)])}
-var chipvue_type_template_id_4d7bb584_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/chip/chip.vue?vue&type=template&id=81827eb4&
+var chipvue_type_template_id_81827eb4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"d-chip"},[_c(_vm.interactive ? 'button' : 'span',_vm._g({tag:"component",class:_vm.chipClasses(),attrs:{"id":_vm.id,"type":_vm.interactive && 'button',"data-qa":"dt-chip","aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel}},_vm.chipListeners),[(_vm.$slots.icon)?_c('span',{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[_vm._t("icon")],2):(_vm.$slots.avatar)?_c('span',{attrs:{"data-qa":"dt-chip-avatar"}},[_vm._t("avatar")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-truncate', 'd-chip__text', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e()]),(!_vm.hideClose)?_c('dt-button',_vm._b({class:_vm.chipCloseButtonClasses(),attrs:{"data-qa":"dt-chip-close","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],1)}
+var chipvue_type_template_id_81827eb4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
-  xs: 'd-chip--xs',
-  sm: 'd-chip--sm',
+  xs: 'd-chip__label--xs',
+  sm: 'd-chip__label--sm',
+  md: ''
+};
+const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
+  xs: 'd-chip__close--xs',
+  sm: 'd-chip__close--sm',
   md: ''
 };
 /* harmony default export */ const chip_constants = ({
@@ -14445,17 +14497,6 @@ const CHIP_SIZE_MODIFIERS = {
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
 
 
 
@@ -14533,7 +14574,7 @@ const CHIP_SIZE_MODIFIERS = {
       default: ''
     }
   },
-  emits: ['click', 'close'],
+  emits: ['click', 'close', 'keyup'],
 
   data() {
     return {
@@ -14542,37 +14583,37 @@ const CHIP_SIZE_MODIFIERS = {
   },
 
   computed: {
-    tabIndex() {
-      return this.interactive ? 0 : -1;
+    chipListeners() {
+      return { ...this.$listeners,
+        click: event => {
+          if (this.interactive) this.$emit('click', event);
+        },
+        keyup: event => {
+          var _event$code;
+
+          if (((_event$code = event.code) === null || _event$code === void 0 ? void 0 : _event$code.toLowerCase()) === 'delete') {
+            this.onClose();
+          } else {
+            this.$emit('keyup', event);
+          }
+        }
+      };
     }
 
   },
   methods: {
     chipClasses() {
-      return ['d-chip', CHIP_SIZE_MODIFIERS[this.size], {
-        'd-chip--interactive': this.interactive,
-        'd-chip--active': this.isActive
-      }];
+      return ['d-chip__label', CHIP_SIZE_MODIFIERS[this.size]];
+    },
+
+    chipCloseButtonClasses() {
+      return ['d-chip__close', CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]];
     },
 
     onClose() {
       if (!this.hideClose) {
         this.$emit('close');
       }
-    },
-
-    onClick(event) {
-      // Clicking on the button should not update value of isActive.
-      if (!this.interactive || this.$refs.closeBtnContainer.contains(event.target)) {
-        return;
-      }
-
-      if (event.type === 'mousedown' || event.type === 'keydown') {
-        this.isActive = true;
-      } else {
-        this.isActive = false;
-        this.$emit('click');
-      }
     }
 
   }
@@ -14589,8 +14630,8 @@ const CHIP_SIZE_MODIFIERS = {
 ;
 var chip_component = normalizeComponent(
   chip_chipvue_type_script_lang_js_,
-  chipvue_type_template_id_4d7bb584_render,
-  chipvue_type_template_id_4d7bb584_staticRenderFns,
+  chipvue_type_template_id_81827eb4_render,
+  chipvue_type_template_id_81827eb4_staticRenderFns,
   false,
   null,
   null,