@gitlab/ui 54.4.1 → 55.0.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [55.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v54.4.1...v55.0.0) (2023-02-06)
+
+
+### Features
+
+* **GlSearchBoxByType:** implemented component wide focusin focusout ([c202cde](https://gitlab.com/gitlab-org/gitlab-ui/commit/c202cde2374542c0b2b6608acc84f52390783e76))
+
+
+### BREAKING CHANGES
+
+* **GlSearchBoxByType:** removes `clearButtonFocus`, `clearButtonBlur`, and
+`clearButtonRelease` events.
+
 ## [54.4.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v54.4.0...v54.4.1) (2023-02-06)
 
 

package/dist/components/base/search_box_by_type/search_box_by_type.js

@@ -78,9 +78,9 @@ var script = {
     inputListeners() {
       return {
         ...this.$listeners,
-        input: value => {
-          this.$emit('input', value);
-        }
+        input: this.onInput,
+        focusin: this.onFocusin,
+        focusout: this.onFocusout
       };
     },
     showClearButton() {
@@ -88,21 +88,37 @@ var script = {
     }
   },
   methods: {
+    isInputOrClearButton(element) {
+      var _this$$refs$input, _this$$refs$clearButt;
+      return element === ((_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.$el) || element === ((_this$$refs$clearButt = this.$refs.clearButton) === null || _this$$refs$clearButt === void 0 ? void 0 : _this$$refs$clearButt.$el);
+    },
     clearInput() {
-      this.$emit('input', '');
+      this.onInput('');
       this.focusInput();
     },
     focusInput() {
       this.$refs.input.$el.focus();
     },
-    onClearButtonFocus() {
-      this.$emit('clearButtonFocus');
+    onInput(value) {
+      this.$emit('input', value);
     },
-    onClearButtonBlur() {
-      this.$emit('clearButtonBlur');
+    onFocusout(event) {
+      const {
+        relatedTarget
+      } = event;
+      if (this.isInputOrClearButton(relatedTarget)) {
+        return;
+      }
+      this.$emit('focusout', event);
     },
-    onClearButtonRelease() {
-      this.$emit('clearButtonRelease');
+    onFocusin(event) {
+      const {
+        relatedTarget
+      } = event;
+      if (this.isInputOrClearButton(relatedTarget)) {
+        return;
+      }
+      this.$emit('focusin', event);
     }
   }
 };
@@ -114,7 +130,7 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-search-box-by-type"},[_c('gl-icon',{staticClass:"gl-search-box-by-type-search-icon",attrs:{"name":"search"}}),_vm._v(" "),_c('gl-form-input',_vm._g(_vm._b({ref:"input",class:{
       'gl-search-box-by-type-input': !_vm.borderless,
       'gl-search-box-by-type-input-borderless': _vm.borderless,
-    },attrs:{"value":_vm.value,"disabled":_vm.disabled}},'gl-form-input',_vm.inputAttributes,false),_vm.inputListeners)),_vm._v(" "),(_vm.isLoading || _vm.showClearButton)?_c('div',{staticClass:"gl-search-box-by-type-right-icons"},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"gl-search-box-by-type-loading-icon"}):_vm._e(),_vm._v(" "),(_vm.showClearButton)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-type-clear gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer},on:{"click":function($event){$event.stopPropagation();return _vm.clearInput.apply(null, arguments)},"focus":_vm.onClearButtonFocus,"blur":_vm.onClearButtonBlur,"release":_vm.onClearButtonRelease}}):_vm._e()],1):_vm._e()],1)};
+    },attrs:{"value":_vm.value,"disabled":_vm.disabled}},'gl-form-input',_vm.inputAttributes,false),_vm.inputListeners)),_vm._v(" "),(_vm.isLoading || _vm.showClearButton)?_c('div',{staticClass:"gl-search-box-by-type-right-icons"},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"gl-search-box-by-type-loading-icon"}):_vm._e(),_vm._v(" "),(_vm.showClearButton)?_c('gl-clear-icon-button',{ref:"clearButton",staticClass:"gl-search-box-by-type-clear gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer},on:{"click":function($event){$event.stopPropagation();return _vm.clearInput.apply(null, arguments)},"focusin":_vm.onFocusin,"focusout":_vm.onFocusout}}):_vm._e()],1):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "54.4.1",
+  "version": "55.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/search_box_by_type/search_box_by_type.spec.js

@@ -57,22 +57,30 @@ describe('search box by type component', () => {
       expect(wrapper.emitted('input')).toEqual([['']]);
     });
 
-    it('emits clearButtonFocus when focused', () => {
-      findClearIcon().vm.$emit('focus', { stopPropagation: jest.fn() });
+    it('emits `focusin` event when focus inside the component', () => {
+      findInput().vm.$emit('focusin', { preventDefault: jest.fn() });
 
-      expect(wrapper.emitted('clearButtonFocus')).toHaveLength(1);
+      expect(wrapper.emitted('focus')).toBe(undefined);
+      expect(wrapper.emitted('focusin')).toHaveLength(1);
     });
+    it('emits `focusout` event when focus moves outside the component', () => {
+      findInput().vm.$emit('focusout', { preventDefault: jest.fn() });
+      expect(wrapper.emitted('blur')).toBe(undefined);
 
-    it('emits clearButtonBlur when blur', () => {
-      findClearIcon().vm.$emit('blur', { stopPropagation: jest.fn() });
-
-      expect(wrapper.emitted('clearButtonBlur')).toHaveLength(1);
+      expect(wrapper.emitted('focusout')).toHaveLength(1);
     });
 
-    it('emits clearButtonRelease when released', () => {
-      findClearIcon().vm.$emit('release', { stopPropagation: jest.fn() });
+    it('does NOT emit `focusout` event when tabbing inside the component back and forth', () => {
+      findInput().vm.$emit('focusout', {
+        preventDefault: jest.fn(),
+        relatedTarget: wrapper.vm.$refs.input.$el,
+      });
+      findClearIcon().vm.$emit('focusout', {
+        preventDefault: jest.fn(),
+        relatedTarget: wrapper.vm.$refs.clearButton.$el,
+      });
 
-      expect(wrapper.emitted('clearButtonRelease')).toHaveLength(1);
+      expect(wrapper.emitted('focusout')).toBe(undefined);
     });
   });
 

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -81,9 +81,9 @@ export default {
     inputListeners() {
       return {
         ...this.$listeners,
-        input: (value) => {
-          this.$emit('input', value);
-        },
+        input: this.onInput,
+        focusin: this.onFocusin,
+        focusout: this.onFocusout,
       };
     },
     showClearButton() {
@@ -91,21 +91,36 @@ export default {
     },
   },
   methods: {
+    isInputOrClearButton(element) {
+      return element === this.$refs.input?.$el || element === this.$refs.clearButton?.$el;
+    },
     clearInput() {
-      this.$emit('input', '');
+      this.onInput('');
       this.focusInput();
     },
     focusInput() {
       this.$refs.input.$el.focus();
     },
-    onClearButtonFocus() {
-      this.$emit('clearButtonFocus');
+    onInput(value) {
+      this.$emit('input', value);
     },
-    onClearButtonBlur() {
-      this.$emit('clearButtonBlur');
+    onFocusout(event) {
+      const { relatedTarget } = event;
+
+      if (this.isInputOrClearButton(relatedTarget)) {
+        return;
+      }
+
+      this.$emit('focusout', event);
     },
-    onClearButtonRelease() {
-      this.$emit('clearButtonRelease');
+    onFocusin(event) {
+      const { relatedTarget } = event;
+
+      if (this.isInputOrClearButton(relatedTarget)) {
+        return;
+      }
+
+      this.$emit('focusin', event);
     },
   },
 };
@@ -129,13 +144,13 @@ export default {
       <gl-loading-icon v-if="isLoading" class="gl-search-box-by-type-loading-icon" />
       <gl-clear-icon-button
         v-if="showClearButton"
+        ref="clearButton"
         :title="clearButtonTitle"
         :tooltip-container="tooltipContainer"
         class="gl-search-box-by-type-clear gl-clear-icon-button"
         @click.stop="clearInput"
-        @focus="onClearButtonFocus"
-        @blur="onClearButtonBlur"
-        @release="onClearButtonRelease"
+        @focusin="onFocusin"
+        @focusout="onFocusout"
       />
     </div>
   </div>