@gitlab/ui 54.4.1 → 55.0.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [55.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v55.0.0...v55.0.1) (2023-02-07)
+
+
+### Bug Fixes
+
+* **GlDisclosureDropdown:** Ensure default ID is unique ([06326e8](https://gitlab.com/gitlab-org/gitlab-ui/commit/06326e89003bb5c9f13e8b0511bee306fac6ffc7))
+
+# [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/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -99,12 +99,12 @@ var script = {
     },
     /**
      * Custom toggle id.
-     * Fot instance, it can be referenced by tooltip or popover
+     * For instance, it can be referenced by tooltip or popover
      */
     toggleId: {
       type: String,
       required: false,
-      default: _uniqueId('dropdown-toggle-btn-')
+      default: () => _uniqueId('dropdown-toggle-btn-')
     },
     /**
      * Additional CSS classes to customize toggle appearance

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 */