@dialpad/dialtone-vue 2.22.1 → 2.22.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/component-documentation.json +1 -1
  2. package/dist/dialtone-vue.common.js +60 -49
  3. package/dist/dialtone-vue.umd.js +60 -49
  4. package/dist/dialtone-vue.umd.min.js +1 -1
  5. package/package.json +1 -1
package/dist/dialtone-vue.common.js CHANGED
@@ -3103,9 +3103,9 @@ var button_group_component = normalizeComponent(
3103
3103
  ;// CONCATENATED MODULE: ./components/button_group/index.js
3104
3104
 
3105
3105
 
3106
- ;// 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/combobox/combobox.vue?vue&type=template&id=25daf05b&
3107
- var comboboxvue_type_template_id_25daf05b_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},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, 'onUpKey')},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, 'onDownKey')},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, 'onHomeKey')},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, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.isLoading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.isListEmpty && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex,"isLoading":_vm.isLoading,"isListEmpty":_vm.isListEmpty})],2):_vm._e()])}
3108
- var comboboxvue_type_template_id_25daf05b_staticRenderFns = []
3106
+ ;// 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/combobox/combobox.vue?vue&type=template&id=f9b55a7e&
3107
+ var comboboxvue_type_template_id_f9b55a7e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},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, 'onUpKey')},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, 'onDownKey')},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, 'onHomeKey')},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, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && _vm.emptyStateMessage && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
3108
+ var comboboxvue_type_template_id_f9b55a7e_staticRenderFns = []
3109
3109
 
3110
3110
 
3111
3111
  ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -3482,12 +3482,12 @@ var combobox_loading_listvue_type_template_id_07d9971d_render = function () {var
3482
3482
  var combobox_loading_listvue_type_template_id_07d9971d_staticRenderFns = []
3483
3483
 
3484
3484
 
3485
- ;// 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/list_item/list_item.vue?vue&type=template&id=4c19058e&
3486
- var list_itemvue_type_template_id_4c19058e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
3485
+ ;// 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/list_item/list_item.vue?vue&type=template&id=17070dec&
3486
+ var list_itemvue_type_template_id_17070dec_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
3487
3487
  'dt-list-item--focusable': _vm.isFocusable,
3488
3488
  'dt-list-item--highlighted': _vm.isHighlighted,
3489
3489
  }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
3490
- var list_itemvue_type_template_id_4c19058e_staticRenderFns = []
3490
+ var list_itemvue_type_template_id_17070dec_staticRenderFns = []
3491
3491
 
3492
3492
 
3493
3493
  ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
@@ -3737,13 +3737,6 @@ var default_list_item_component = normalizeComponent(
3737
3737
 
3738
3738
  this.$emit('keydown', event);
3739
3739
  },
3740
- mousedown: event => {
3741
- if (!this.isFocusable) {
3742
- event.preventDefault();
3743
- }
3744
-
3745
- this.$emit('mousedown', event);
3746
- },
3747
3740
  mousemove: event => {
3748
3741
  this.onMouseHover(event);
3749
3742
  this.$emit('mousemove', event);
@@ -3812,8 +3805,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(502);
3812
3805
 
3813
3806
  var list_item_component = normalizeComponent(
3814
3807
  list_item_list_itemvue_type_script_lang_js_,
3815
- list_itemvue_type_template_id_4c19058e_render,
3816
- list_itemvue_type_template_id_4c19058e_staticRenderFns,
3808
+ list_itemvue_type_template_id_17070dec_render,
3809
+ list_itemvue_type_template_id_17070dec_staticRenderFns,
3817
3810
  false,
3818
3811
  null,
3819
3812
  null,
@@ -4690,8 +4683,6 @@ var combobox_empty_list_component = normalizeComponent(
4690
4683
  //
4691
4684
  //
4692
4685
  //
4693
- //
4694
- //
4695
4686
 
4696
4687
 
4697
4688
 
@@ -4773,6 +4764,14 @@ var combobox_empty_list_component = normalizeComponent(
4773
4764
  default: false
4774
4765
  },
4775
4766
 
4767
+ /**
4768
+ * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
4769
+ */
4770
+ emptyList: {
4771
+ type: Boolean,
4772
+ default: false
4773
+ },
4774
+
4776
4775
  /**
4777
4776
  * Message to show when the list is empty
4778
4777
  */
@@ -4815,9 +4814,7 @@ var combobox_empty_list_component = normalizeComponent(
4815
4814
  // If the list is rendered at the root, rather than as a child
4816
4815
  // of this component, this is the ref to that dom element. Set
4817
4816
  // by the onOpen method.
4818
- outsideRenderedListRef: null,
4819
- isListEmpty: undefined,
4820
- isLoading: undefined
4817
+ outsideRenderedListRef: null
4821
4818
  };
4822
4819
  },
4823
4820
 
@@ -4877,25 +4874,28 @@ var combobox_empty_list_component = normalizeComponent(
4877
4874
  if (!showList && this.outsideRenderedListRef) {
4878
4875
  this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);
4879
4876
  this.outsideRenderedListRef = null;
4880
- this.isListEmpty = undefined;
4881
4877
  }
4882
4878
  },
4883
4879
 
4884
- loading(isLoading) {
4885
- this.isListEmpty = undefined;
4886
- this.isLoading = isLoading;
4880
+ loading(loading) {
4887
4881
  this.$nextTick(() => {
4888
- this.isListEmpty = this.checkItemsLength();
4889
4882
  this.setInitialHighlightIndex();
4890
4883
  });
4891
- }
4884
+ },
4885
+
4886
+ $props: {
4887
+ deep: true,
4888
+ immediate: true,
4892
4889
 
4890
+ handler() {
4891
+ this.validateEmptyListProps();
4892
+ }
4893
+
4894
+ }
4893
4895
  },
4894
4896
 
4895
- async mounted() {
4896
- this.isLoading = this.loading;
4897
- await this.$nextTick();
4898
- this.isListEmpty = this.checkItemsLength();
4897
+ created() {
4898
+ this.validateEmptyListProps();
4899
4899
  },
4900
4900
 
4901
4901
  methods: {
@@ -4926,7 +4926,7 @@ var combobox_empty_list_component = normalizeComponent(
4926
4926
  },
4927
4927
 
4928
4928
  onEnterKey() {
4929
- if (this.loading || this.isListEmpty) return;
4929
+ if (this.loading || this.emptyList) return;
4930
4930
 
4931
4931
  if (this.highlightIndex >= 0) {
4932
4932
  this.$emit('select', this.highlightIndex);
@@ -4945,7 +4945,6 @@ var combobox_empty_list_component = normalizeComponent(
4945
4945
  this.$emit('opened', open);
4946
4946
 
4947
4947
  if (open) {
4948
- this.isListEmpty = this.checkItemsLength();
4949
4948
  this.setInitialHighlightIndex();
4950
4949
  }
4951
4950
  },
@@ -4964,11 +4963,10 @@ var combobox_empty_list_component = normalizeComponent(
4964
4963
  });
4965
4964
  },
4966
4965
 
4967
- checkItemsLength() {
4968
- if (!this.showList) return undefined;
4969
- const list = this.getListElement();
4970
- const options = list === null || list === void 0 ? void 0 : list.querySelectorAll("[role=\"option\"]");
4971
- return (options === null || options === void 0 ? void 0 : options.length) === 0;
4966
+ validateEmptyListProps() {
4967
+ if (this.emptyList && !this.emptyStateMessage || !this.emptyList && this.emptyStateMessage) {
4968
+ console.error("Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n empty message.");
4969
+ }
4972
4970
  }
4973
4971
 
4974
4972
  }
@@ -4985,8 +4983,8 @@ var combobox_empty_list_component = normalizeComponent(
4985
4983
  ;
4986
4984
  var combobox_component = normalizeComponent(
4987
4985
  combobox_comboboxvue_type_script_lang_js_,
4988
- comboboxvue_type_template_id_25daf05b_render,
4989
- comboboxvue_type_template_id_25daf05b_staticRenderFns,
4986
+ comboboxvue_type_template_id_f9b55a7e_render,
4987
+ comboboxvue_type_template_id_f9b55a7e_staticRenderFns,
4990
4988
  false,
4991
4989
  null,
4992
4990
  null,
@@ -17338,17 +17336,15 @@ var root_layout_component = normalizeComponent(
17338
17336
  ;// CONCATENATED MODULE: ./components/root_layout/index.js
17339
17337
 
17340
17338
 
17341
- ;// 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!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=5ee1c401&
17342
- var combobox_with_popovervue_type_template_id_5ee1c401_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
17339
+ ;// 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!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=7efaa59c&
17340
+ var combobox_with_popovervue_type_template_id_7efaa59c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
17343
17341
  var inputProps = ref.inputProps;
17344
17342
  return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
17345
17343
  var opened = ref.opened;
17346
17344
  var listProps = ref.listProps;
17347
17345
  var clearHighlightIndex = ref.clearHighlightIndex;
17348
- var isLoading = ref.isLoading;
17349
- var isListEmpty = ref.isListEmpty;
17350
- return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(isLoading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(isListEmpty)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
17351
- var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17346
+ return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
17347
+ var combobox_with_popovervue_type_template_id_7efaa59c_staticRenderFns = []
17352
17348
 
17353
17349
 
17354
17350
  ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -17450,6 +17446,8 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17450
17446
  //
17451
17447
  //
17452
17448
  //
17449
+ //
17450
+ //
17453
17451
 
17454
17452
 
17455
17453
 
@@ -17603,6 +17601,14 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17603
17601
  default: false
17604
17602
  },
17605
17603
 
17604
+ /**
17605
+ * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
17606
+ */
17607
+ emptyList: {
17608
+ type: Boolean,
17609
+ default: false
17610
+ },
17611
+
17606
17612
  /**
17607
17613
  * Message to show when the list is empty
17608
17614
  */
@@ -17709,15 +17715,20 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17709
17715
  },
17710
17716
 
17711
17717
  onFocusOut(e) {
17712
- const comboboxRefs = ['input', 'header', 'footer', 'listWrapper'];
17718
+ const comboboxRefs = ['input', 'header', 'footer', 'listWrapper']; // Check if the focus change was to another target within the combobox component
17719
+
17713
17720
  const isComboboxStillFocused = comboboxRefs.some(ref => {
17714
17721
  var _this$$refs$ref;
17715
17722
 
17716
17723
  return (_this$$refs$ref = this.$refs[ref]) === null || _this$$refs$ref === void 0 ? void 0 : _this$$refs$ref.contains(e.relatedTarget);
17717
- });
17724
+ }); // If outside of the combobox then close
17718
17725
 
17719
17726
  if (!isComboboxStillFocused) {
17720
17727
  this.closeComboboxList();
17728
+ } else {
17729
+ // if focus is anywhere within the combobox input or list,
17730
+ // keep the focus on the input, or keyboard nav will break.
17731
+ e.target.focus();
17721
17732
  }
17722
17733
  },
17723
17734
 
@@ -17743,8 +17754,8 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17743
17754
  ;
17744
17755
  var combobox_with_popover_component = normalizeComponent(
17745
17756
  combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
17746
- combobox_with_popovervue_type_template_id_5ee1c401_render,
17747
- combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns,
17757
+ combobox_with_popovervue_type_template_id_7efaa59c_render,
17758
+ combobox_with_popovervue_type_template_id_7efaa59c_staticRenderFns,
17748
17759
  false,
17749
17760
  null,
17750
17761
  null,
package/dist/dialtone-vue.umd.js CHANGED
@@ -3121,9 +3121,9 @@ var button_group_component = normalizeComponent(
3121
3121
  ;// CONCATENATED MODULE: ./components/button_group/index.js
3122
3122
 
3123
3123
 
3124
- ;// 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/combobox/combobox.vue?vue&type=template&id=25daf05b&
3125
- var comboboxvue_type_template_id_25daf05b_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},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, 'onUpKey')},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, 'onDownKey')},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, 'onHomeKey')},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, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.isLoading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.isListEmpty && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex,"isLoading":_vm.isLoading,"isListEmpty":_vm.isListEmpty})],2):_vm._e()])}
3126
- var comboboxvue_type_template_id_25daf05b_staticRenderFns = []
3124
+ ;// 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/combobox/combobox.vue?vue&type=template&id=f9b55a7e&
3125
+ var comboboxvue_type_template_id_f9b55a7e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},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, 'onUpKey')},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, 'onDownKey')},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, 'onHomeKey')},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, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && _vm.emptyStateMessage && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
3126
+ var comboboxvue_type_template_id_f9b55a7e_staticRenderFns = []
3127
3127
 
3128
3128
 
3129
3129
  ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -3500,12 +3500,12 @@ var combobox_loading_listvue_type_template_id_07d9971d_render = function () {var
3500
3500
  var combobox_loading_listvue_type_template_id_07d9971d_staticRenderFns = []
3501
3501
 
3502
3502
 
3503
- ;// 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/list_item/list_item.vue?vue&type=template&id=4c19058e&
3504
- var list_itemvue_type_template_id_4c19058e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
3503
+ ;// 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/list_item/list_item.vue?vue&type=template&id=17070dec&
3504
+ var list_itemvue_type_template_id_17070dec_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
3505
3505
  'dt-list-item--focusable': _vm.isFocusable,
3506
3506
  'dt-list-item--highlighted': _vm.isHighlighted,
3507
3507
  }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
3508
- var list_itemvue_type_template_id_4c19058e_staticRenderFns = []
3508
+ var list_itemvue_type_template_id_17070dec_staticRenderFns = []
3509
3509
 
3510
3510
 
3511
3511
  ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
@@ -3755,13 +3755,6 @@ var default_list_item_component = normalizeComponent(
3755
3755
 
3756
3756
  this.$emit('keydown', event);
3757
3757
  },
3758
- mousedown: event => {
3759
- if (!this.isFocusable) {
3760
- event.preventDefault();
3761
- }
3762
-
3763
- this.$emit('mousedown', event);
3764
- },
3765
3758
  mousemove: event => {
3766
3759
  this.onMouseHover(event);
3767
3760
  this.$emit('mousemove', event);
@@ -3830,8 +3823,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(285);
3830
3823
 
3831
3824
  var list_item_component = normalizeComponent(
3832
3825
  list_item_list_itemvue_type_script_lang_js_,
3833
- list_itemvue_type_template_id_4c19058e_render,
3834
- list_itemvue_type_template_id_4c19058e_staticRenderFns,
3826
+ list_itemvue_type_template_id_17070dec_render,
3827
+ list_itemvue_type_template_id_17070dec_staticRenderFns,
3835
3828
  false,
3836
3829
  null,
3837
3830
  null,
@@ -4708,8 +4701,6 @@ var combobox_empty_list_component = normalizeComponent(
4708
4701
  //
4709
4702
  //
4710
4703
  //
4711
- //
4712
- //
4713
4704
 
4714
4705
 
4715
4706
 
@@ -4791,6 +4782,14 @@ var combobox_empty_list_component = normalizeComponent(
4791
4782
  default: false
4792
4783
  },
4793
4784
 
4785
+ /**
4786
+ * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
4787
+ */
4788
+ emptyList: {
4789
+ type: Boolean,
4790
+ default: false
4791
+ },
4792
+
4794
4793
  /**
4795
4794
  * Message to show when the list is empty
4796
4795
  */
@@ -4833,9 +4832,7 @@ var combobox_empty_list_component = normalizeComponent(
4833
4832
  // If the list is rendered at the root, rather than as a child
4834
4833
  // of this component, this is the ref to that dom element. Set
4835
4834
  // by the onOpen method.
4836
- outsideRenderedListRef: null,
4837
- isListEmpty: undefined,
4838
- isLoading: undefined
4835
+ outsideRenderedListRef: null
4839
4836
  };
4840
4837
  },
4841
4838
 
@@ -4895,25 +4892,28 @@ var combobox_empty_list_component = normalizeComponent(
4895
4892
  if (!showList && this.outsideRenderedListRef) {
4896
4893
  this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);
4897
4894
  this.outsideRenderedListRef = null;
4898
- this.isListEmpty = undefined;
4899
4895
  }
4900
4896
  },
4901
4897
 
4902
- loading(isLoading) {
4903
- this.isListEmpty = undefined;
4904
- this.isLoading = isLoading;
4898
+ loading(loading) {
4905
4899
  this.$nextTick(() => {
4906
- this.isListEmpty = this.checkItemsLength();
4907
4900
  this.setInitialHighlightIndex();
4908
4901
  });
4909
- }
4902
+ },
4903
+
4904
+ $props: {
4905
+ deep: true,
4906
+ immediate: true,
4910
4907
 
4908
+ handler() {
4909
+ this.validateEmptyListProps();
4910
+ }
4911
+
4912
+ }
4911
4913
  },
4912
4914
 
4913
- async mounted() {
4914
- this.isLoading = this.loading;
4915
- await this.$nextTick();
4916
- this.isListEmpty = this.checkItemsLength();
4915
+ created() {
4916
+ this.validateEmptyListProps();
4917
4917
  },
4918
4918
 
4919
4919
  methods: {
@@ -4944,7 +4944,7 @@ var combobox_empty_list_component = normalizeComponent(
4944
4944
  },
4945
4945
 
4946
4946
  onEnterKey() {
4947
- if (this.loading || this.isListEmpty) return;
4947
+ if (this.loading || this.emptyList) return;
4948
4948
 
4949
4949
  if (this.highlightIndex >= 0) {
4950
4950
  this.$emit('select', this.highlightIndex);
@@ -4963,7 +4963,6 @@ var combobox_empty_list_component = normalizeComponent(
4963
4963
  this.$emit('opened', open);
4964
4964
 
4965
4965
  if (open) {
4966
- this.isListEmpty = this.checkItemsLength();
4967
4966
  this.setInitialHighlightIndex();
4968
4967
  }
4969
4968
  },
@@ -4982,11 +4981,10 @@ var combobox_empty_list_component = normalizeComponent(
4982
4981
  });
4983
4982
  },
4984
4983
 
4985
- checkItemsLength() {
4986
- if (!this.showList) return undefined;
4987
- const list = this.getListElement();
4988
- const options = list === null || list === void 0 ? void 0 : list.querySelectorAll("[role=\"option\"]");
4989
- return (options === null || options === void 0 ? void 0 : options.length) === 0;
4984
+ validateEmptyListProps() {
4985
+ if (this.emptyList && !this.emptyStateMessage || !this.emptyList && this.emptyStateMessage) {
4986
+ console.error("Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n empty message.");
4987
+ }
4990
4988
  }
4991
4989
 
4992
4990
  }
@@ -5003,8 +5001,8 @@ var combobox_empty_list_component = normalizeComponent(
5003
5001
  ;
5004
5002
  var combobox_component = normalizeComponent(
5005
5003
  combobox_comboboxvue_type_script_lang_js_,
5006
- comboboxvue_type_template_id_25daf05b_render,
5007
- comboboxvue_type_template_id_25daf05b_staticRenderFns,
5004
+ comboboxvue_type_template_id_f9b55a7e_render,
5005
+ comboboxvue_type_template_id_f9b55a7e_staticRenderFns,
5008
5006
  false,
5009
5007
  null,
5010
5008
  null,
@@ -17356,17 +17354,15 @@ var root_layout_component = normalizeComponent(
17356
17354
  ;// CONCATENATED MODULE: ./components/root_layout/index.js
17357
17355
 
17358
17356
 
17359
- ;// 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!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=5ee1c401&
17360
- var combobox_with_popovervue_type_template_id_5ee1c401_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
17357
+ ;// 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!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=7efaa59c&
17358
+ var combobox_with_popovervue_type_template_id_7efaa59c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
17361
17359
  var inputProps = ref.inputProps;
17362
17360
  return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
17363
17361
  var opened = ref.opened;
17364
17362
  var listProps = ref.listProps;
17365
17363
  var clearHighlightIndex = ref.clearHighlightIndex;
17366
- var isLoading = ref.isLoading;
17367
- var isListEmpty = ref.isListEmpty;
17368
- return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(isLoading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(isListEmpty)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
17369
- var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17364
+ return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
17365
+ var combobox_with_popovervue_type_template_id_7efaa59c_staticRenderFns = []
17370
17366
 
17371
17367
 
17372
17368
  ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -17468,6 +17464,8 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17468
17464
  //
17469
17465
  //
17470
17466
  //
17467
+ //
17468
+ //
17471
17469
 
17472
17470
 
17473
17471
 
@@ -17621,6 +17619,14 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17621
17619
  default: false
17622
17620
  },
17623
17621
 
17622
+ /**
17623
+ * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
17624
+ */
17625
+ emptyList: {
17626
+ type: Boolean,
17627
+ default: false
17628
+ },
17629
+
17624
17630
  /**
17625
17631
  * Message to show when the list is empty
17626
17632
  */
@@ -17727,15 +17733,20 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17727
17733
  },
17728
17734
 
17729
17735
  onFocusOut(e) {
17730
- const comboboxRefs = ['input', 'header', 'footer', 'listWrapper'];
17736
+ const comboboxRefs = ['input', 'header', 'footer', 'listWrapper']; // Check if the focus change was to another target within the combobox component
17737
+
17731
17738
  const isComboboxStillFocused = comboboxRefs.some(ref => {
17732
17739
  var _this$$refs$ref;
17733
17740
 
17734
17741
  return (_this$$refs$ref = this.$refs[ref]) === null || _this$$refs$ref === void 0 ? void 0 : _this$$refs$ref.contains(e.relatedTarget);
17735
- });
17742
+ }); // If outside of the combobox then close
17736
17743
 
17737
17744
  if (!isComboboxStillFocused) {
17738
17745
  this.closeComboboxList();
17746
+ } else {
17747
+ // if focus is anywhere within the combobox input or list,
17748
+ // keep the focus on the input, or keyboard nav will break.
17749
+ e.target.focus();
17739
17750
  }
17740
17751
  },
17741
17752
 
@@ -17761,8 +17772,8 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17761
17772
  ;
17762
17773
  var combobox_with_popover_component = normalizeComponent(
17763
17774
  combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
17764
- combobox_with_popovervue_type_template_id_5ee1c401_render,
17765
- combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns,
17775
+ combobox_with_popovervue_type_template_id_7efaa59c_render,
17776
+ combobox_with_popovervue_type_template_id_7efaa59c_staticRenderFns,
17766
17777
  false,
17767
17778
  null,
17768
17779
  null,