@gitlab/ui 65.1.0 → 65.1.1

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 (13) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js +6 -4
  3. package/dist/components/base/new_dropdowns/listbox/listbox.js +6 -0
  4. package/dist/tokens/css/tokens.css +1 -1
  5. package/dist/tokens/css/tokens.dark.css +1 -1
  6. package/dist/tokens/js/tokens.dark.js +1 -1
  7. package/dist/tokens/js/tokens.js +1 -1
  8. package/dist/tokens/scss/_tokens.dark.scss +1 -1
  9. package/dist/tokens/scss/_tokens.scss +1 -1
  10. package/package.json +1 -1
  11. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue +4 -3
  12. package/src/components/base/new_dropdowns/listbox/listbox.spec.js +8 -0
  13. package/src/components/base/new_dropdowns/listbox/listbox.vue +6 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [65.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.1.0...v65.1.1) (2023-08-10)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **GlCollpasibleListbox:** correctly handle Home and End ([596127d](https://gitlab.com/gitlab-org/gitlab-ui/commit/596127d79c05f190746109ec9776ee7460672237))
7
+
1
8
  # [65.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.0.1...v65.1.0) (2023-08-09)
2
9
 
3
10
 
package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js CHANGED
@@ -34,7 +34,6 @@ var script = {
34
34
  href: item.href,
35
35
  ...item.extraAttrs
36
36
  },
37
- wrapperClass: item.wrapperClass,
38
37
  listeners: {
39
38
  click: this.action
40
39
  }
@@ -51,8 +50,7 @@ var script = {
51
50
  item === null || item === void 0 ? void 0 : (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(undefined, item);
52
51
  this.action();
53
52
  }
54
- },
55
- wrapperClass: item === null || item === void 0 ? void 0 : item.wrapperClass
53
+ }
56
54
  };
57
55
  },
58
56
  listIndex() {
@@ -63,6 +61,10 @@ var script = {
63
61
  var _this$item3, _this$item3$extraAttr;
64
62
  return (_this$item3 = this.item) !== null && _this$item3 !== void 0 && (_this$item3$extraAttr = _this$item3.extraAttrs) !== null && _this$item3$extraAttr !== void 0 && _this$item3$extraAttr.disabled ? null : -1;
65
63
  },
64
+ wrapperClass() {
65
+ var _this$item$wrapperCla, _this$item4;
66
+ return (_this$item$wrapperCla = (_this$item4 = this.item) === null || _this$item4 === void 0 ? void 0 : _this$item4.wrapperClass) !== null && _this$item$wrapperCla !== void 0 ? _this$item$wrapperCla : '';
67
+ },
66
68
  wrapperListeners() {
67
69
  const listeners = {
68
70
  keydown: this.onKeydown
@@ -105,7 +107,7 @@ var script = {
105
107
  const __vue_script__ = script;
106
108
 
107
109
  /* template */
108
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',_vm._g({class:[_vm.$options.ITEM_CLASS, _vm.itemComponent.wrapperClass],attrs:{"tabindex":_vm.listIndex,"data-testid":"disclosure-dropdown-item"}},_vm.wrapperListeners),[_vm._t("default",function(){return [_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":_vm.componentIndex}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("list-item",function(){return [_vm._v("\n "+_vm._s(_vm.item.text)+"\n ")]})],2)])]})],2)};
110
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',_vm._g({class:[_vm.$options.ITEM_CLASS, _vm.wrapperClass],attrs:{"tabindex":_vm.listIndex,"data-testid":"disclosure-dropdown-item"}},_vm.wrapperListeners),[_vm._t("default",function(){return [_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":_vm.componentIndex}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("list-item",function(){return [_vm._v("\n "+_vm._s(_vm.item.text)+"\n ")]})],2)])]})],2)};
109
111
  var __vue_staticRenderFns__ = [];
110
112
 
111
113
  /* style */
package/dist/components/base/new_dropdowns/listbox/listbox.js CHANGED
@@ -545,8 +545,14 @@ var script = {
545
545
  let stop = true;
546
546
  const isSearchInput = target.matches(SEARCH_INPUT_SELECTOR);
547
547
  if (code === HOME) {
548
+ if (isSearchInput) {
549
+ return;
550
+ }
548
551
  this.focusItem(0, elements);
549
552
  } else if (code === END) {
553
+ if (isSearchInput) {
554
+ return;
555
+ }
550
556
  this.focusItem(elements.length - 1, elements);
551
557
  } else if (code === ARROW_UP) {
552
558
  if (isSearchInput) {
package/dist/tokens/css/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 09 Aug 2023 06:12:06 GMT
3
+ * Generated on Thu, 10 Aug 2023 14:55:51 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/tokens/css/tokens.dark.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 09 Aug 2023 06:12:06 GMT
3
+ * Generated on Thu, 10 Aug 2023 14:55:51 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/tokens/js/tokens.dark.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 09 Aug 2023 06:12:06 GMT
3
+ * Generated on Thu, 10 Aug 2023 14:55:51 GMT
4
4
  */
5
5
 
6
6
  export const BLACK = "#fff";
package/dist/tokens/js/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 09 Aug 2023 06:12:06 GMT
3
+ * Generated on Thu, 10 Aug 2023 14:55:51 GMT
4
4
  */
5
5
 
6
6
  export const BLACK = "#000";
package/dist/tokens/scss/_tokens.dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 09 Aug 2023 06:12:06 GMT
3
+ // Generated on Thu, 10 Aug 2023 14:55:51 GMT
4
4
 
5
5
  $red-950: #fff4f3;
6
6
  $red-900: #fcf1ef;
package/dist/tokens/scss/_tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 09 Aug 2023 06:12:06 GMT
3
+ // Generated on Thu, 10 Aug 2023 14:55:51 GMT
4
4
 
5
5
  $brand-gray-05: #2b2838 !default;
6
6
  $brand-gray-04: #45424d !default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "65.1.0",
3
+ "version": "65.1.1",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue CHANGED
@@ -34,7 +34,6 @@ export default {
34
34
  href: item.href,
35
35
  ...item.extraAttrs,
36
36
  },
37
- wrapperClass: item.wrapperClass,
38
37
  listeners: {
39
38
  click: this.action,
40
39
  },
@@ -52,7 +51,6 @@ export default {
52
51
  this.action();
53
52
  },
54
53
  },
55
- wrapperClass: item?.wrapperClass,
56
54
  };
57
55
  },
58
56
  listIndex() {
@@ -61,6 +59,9 @@ export default {
61
59
  componentIndex() {
62
60
  return this.item?.extraAttrs?.disabled ? null : -1;
63
61
  },
62
+ wrapperClass() {
63
+ return this.item?.wrapperClass ?? '';
64
+ },
64
65
  wrapperListeners() {
65
66
  const listeners = {
66
67
  keydown: this.onKeydown,
@@ -100,7 +101,7 @@ export default {
100
101
  <template>
101
102
  <li
102
103
  :tabindex="listIndex"
103
- :class="[$options.ITEM_CLASS, itemComponent.wrapperClass]"
104
+ :class="[$options.ITEM_CLASS, wrapperClass]"
104
105
  data-testid="disclosure-dropdown-item"
105
106
  v-on="wrapperListeners"
106
107
  >
package/src/components/base/new_dropdowns/listbox/listbox.spec.js CHANGED
@@ -330,6 +330,14 @@ describe('GlCollapsibleListbox', () => {
330
330
  expect(searchboxInput.element).toHaveFocus();
331
331
  });
332
332
 
333
+ it('should not move focus away from the input on `HOME` and `END`', async () => {
334
+ expect(searchboxInput.element).toHaveFocus();
335
+ await searchboxInput.trigger('keydown', { code: HOME });
336
+ expect(searchboxInput.element).toHaveFocus();
337
+ await searchboxInput.trigger('keydown', { code: END });
338
+ expect(searchboxInput.element).toHaveFocus();
339
+ });
340
+
333
341
  describe('pressing Enter on the input', () => {
334
342
  const keydownSpy = jest.fn();
335
343
 
package/src/components/base/new_dropdowns/listbox/listbox.vue CHANGED
@@ -565,8 +565,14 @@ export default {
565
565
  const isSearchInput = target.matches(SEARCH_INPUT_SELECTOR);
566
566
 
567
567
  if (code === HOME) {
568
+ if (isSearchInput) {
569
+ return;
570
+ }
568
571
  this.focusItem(0, elements);
569
572
  } else if (code === END) {
573
+ if (isSearchInput) {
574
+ return;
575
+ }
570
576
  this.focusItem(elements.length - 1, elements);
571
577
  } else if (code === ARROW_UP) {
572
578
  if (isSearchInput) {