@gitlab/ui 65.1.0 → 65.1.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [65.1.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.1.1...v65.1.2) (2023-08-11)
+
+
+### Bug Fixes
+
+* **GlDisclosureDropdown:** sets alignment to fix right placement ([02c966a](https://gitlab.com/gitlab-org/gitlab-ui/commit/02c966aa2d990a514134e376f33ee47864f6cc76)), closes [#L69-L70](https://gitlab.com/gitlab-org/gitlab-ui/issues/L69-L70)
+
+## [65.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.1.0...v65.1.1) (2023-08-10)
+
+
+### Bug Fixes
+
+* **GlCollpasibleListbox:** correctly handle Home and End ([596127d](https://gitlab.com/gitlab-org/gitlab-ui/commit/596127d79c05f190746109ec9776ee7460672237))
+
 # [65.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.0.1...v65.1.0) (2023-08-09)
 
 

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -230,10 +230,13 @@ var script = {
       return this.positioningStrategy === POSITION_FIXED;
     },
     floatingUIConfig() {
+      const placement = dropdownPlacements[this.placement];
+      const [, alignment] = placement.split('-');
       return {
-        placement: dropdownPlacements[this.placement],
+        placement,
         strategy: this.positioningStrategy,
         middleware: [offset(this.offset), autoPlacement({
+          alignment,
           allowedPlacements: dropdownAllowedAutoPlacements[this.placement]
         }), size({
           apply: _ref => {

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js

@@ -34,7 +34,6 @@ var script = {
           href: item.href,
           ...item.extraAttrs
         },
-        wrapperClass: item.wrapperClass,
         listeners: {
           click: this.action
         }
@@ -51,8 +50,7 @@ var script = {
             item === null || item === void 0 ? void 0 : (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(undefined, item);
             this.action();
           }
-        },
-        wrapperClass: item === null || item === void 0 ? void 0 : item.wrapperClass
+        }
       };
     },
     listIndex() {
@@ -63,6 +61,10 @@ var script = {
       var _this$item3, _this$item3$extraAttr;
       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;
     },
+    wrapperClass() {
+      var _this$item$wrapperCla, _this$item4;
+      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 : '';
+    },
     wrapperListeners() {
       const listeners = {
         keydown: this.onKeydown
@@ -105,7 +107,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-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)};
+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)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -545,8 +545,14 @@ var script = {
       let stop = true;
       const isSearchInput = target.matches(SEARCH_INPUT_SELECTOR);
       if (code === HOME) {
+        if (isSearchInput) {
+          return;
+        }
         this.focusItem(0, elements);
       } else if (code === END) {
+        if (isSearchInput) {
+          return;
+        }
         this.focusItem(elements.length - 1, elements);
       } else if (code === ARROW_UP) {
         if (isSearchInput) {

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Aug 2023 06:12:06 GMT
+ * Generated on Fri, 11 Aug 2023 17:26:50 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Aug 2023 06:12:06 GMT
+ * Generated on Fri, 11 Aug 2023 17:26:50 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Aug 2023 06:12:06 GMT
+ * Generated on Fri, 11 Aug 2023 17:26:50 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Aug 2023 06:12:06 GMT
+ * Generated on Fri, 11 Aug 2023 17:26:50 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 09 Aug 2023 06:12:06 GMT
+// Generated on Fri, 11 Aug 2023 17:26:50 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 09 Aug 2023 06:12:06 GMT
+// Generated on Fri, 11 Aug 2023 17:26:50 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "65.1.0",
+  "version": "65.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -123,7 +123,7 @@
     "emoji-regex": "^10.0.0",
     "eslint": "8.46.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "2.13.3",
+    "eslint-plugin-cypress": "2.13.4",
     "eslint-plugin-storybook": "0.6.12",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -108,6 +108,7 @@ describe('base dropdown', () => {
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
+                alignment: 'start',
                 allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
               }),
             ],
@@ -128,6 +129,7 @@ describe('base dropdown', () => {
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
+                alignment: undefined,
                 allowedPlacements: ['bottom', 'top'],
               }),
             ],
@@ -148,6 +150,7 @@ describe('base dropdown', () => {
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
+                alignment: 'end',
                 allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
               }),
             ],

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -243,12 +243,15 @@ export default {
       return this.positioningStrategy === POSITION_FIXED;
     },
     floatingUIConfig() {
+      const placement = dropdownPlacements[this.placement];
+      const [, alignment] = placement.split('-');
       return {
-        placement: dropdownPlacements[this.placement],
+        placement,
         strategy: this.positioningStrategy,
         middleware: [
           offset(this.offset),
           autoPlacement({
+            alignment,
             allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
           }),
           size({

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -34,7 +34,6 @@ export default {
             href: item.href,
             ...item.extraAttrs,
           },
-          wrapperClass: item.wrapperClass,
           listeners: {
             click: this.action,
           },
@@ -52,7 +51,6 @@ export default {
             this.action();
           },
         },
-        wrapperClass: item?.wrapperClass,
       };
     },
     listIndex() {
@@ -61,6 +59,9 @@ export default {
     componentIndex() {
       return this.item?.extraAttrs?.disabled ? null : -1;
     },
+    wrapperClass() {
+      return this.item?.wrapperClass ?? '';
+    },
     wrapperListeners() {
       const listeners = {
         keydown: this.onKeydown,
@@ -100,7 +101,7 @@ export default {
 <template>
   <li
     :tabindex="listIndex"
-    :class="[$options.ITEM_CLASS, itemComponent.wrapperClass]"
+    :class="[$options.ITEM_CLASS, wrapperClass]"
     data-testid="disclosure-dropdown-item"
     v-on="wrapperListeners"
   >

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -330,6 +330,14 @@ describe('GlCollapsibleListbox', () => {
         expect(searchboxInput.element).toHaveFocus();
       });
 
+      it('should not move focus away from the input on `HOME` and `END`', async () => {
+        expect(searchboxInput.element).toHaveFocus();
+        await searchboxInput.trigger('keydown', { code: HOME });
+        expect(searchboxInput.element).toHaveFocus();
+        await searchboxInput.trigger('keydown', { code: END });
+        expect(searchboxInput.element).toHaveFocus();
+      });
+
       describe('pressing Enter on the input', () => {
         const keydownSpy = jest.fn();
 

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -565,8 +565,14 @@ export default {
       const isSearchInput = target.matches(SEARCH_INPUT_SELECTOR);
 
       if (code === HOME) {
+        if (isSearchInput) {
+          return;
+        }
         this.focusItem(0, elements);
       } else if (code === END) {
+        if (isSearchInput) {
+          return;
+        }
         this.focusItem(elements.length - 1, elements);
       } else if (code === ARROW_UP) {
         if (isSearchInput) {