@gitlab/ui 66.14.0 → 66.16.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [66.16.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.15.0...v66.16.0) (2023-09-27)
+
+
+### Features
+
+* **Typography:** Add heading scale classes ([4bfa950](https://gitlab.com/gitlab-org/gitlab-ui/commit/4bfa9505db2cfeb12009a0a4f0ea69a9f1c234ef))
+
+# [66.15.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.14.0...v66.15.0) (2023-09-26)
+
+
+### Features
+
+* **GLFilteredSearch:** Allow commas in multiSelect values ([160781a](https://gitlab.com/gitlab-org/gitlab-ui/commit/160781ad70105069163bc56631fb333a75764163))
+
 # [66.14.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.13.1...v66.14.0) (2023-09-25)
 
 

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -1,5 +1,5 @@
 import cloneDeep from 'lodash/cloneDeep';
-import { COMMA } from '../../../utils/constants';
+import isEqual from 'lodash/isEqual';
 import GlToken from '../token/token';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
 import { tokenToOption, createTerm, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
@@ -99,8 +99,13 @@ var script = {
     operators() {
       return this.config.operators || DEFAULT_OPERATORS;
     },
+    tokenEmpty() {
+      var _this$tokenValue$data;
+      return ((_this$tokenValue$data = this.tokenValue.data) === null || _this$tokenValue$data === void 0 ? void 0 : _this$tokenValue$data.length) === 0;
+    },
     hasDataOrDataSegmentIsCurrentlyActive() {
-      return this.tokenValue.data !== '' || this.isSegmentActive(SEGMENT_DATA);
+      const hasData = !this.tokenEmpty;
+      return hasData || this.isSegmentActive(SEGMENT_DATA);
     },
     availableTokensWithSelf() {
       return [this.config, ...this.availableTokens.filter(token => token !== this.config)].map(tokenToOption);
@@ -135,7 +140,7 @@ var script = {
     },
     value: {
       handler(newValue, oldValue) {
-        if ((newValue === null || newValue === void 0 ? void 0 : newValue.data) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.data) && (newValue === null || newValue === void 0 ? void 0 : newValue.operator) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.operator)) {
+        if (isEqual(newValue === null || newValue === void 0 ? void 0 : newValue.data, oldValue === null || oldValue === void 0 ? void 0 : oldValue.data) && (newValue === null || newValue === void 0 ? void 0 : newValue.operator) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.operator)) {
           return;
         }
         this.tokenValue = cloneDeep(newValue);
@@ -143,20 +148,31 @@ var script = {
     },
     active: {
       immediate: true,
-      handler(newValue) {
-        if (newValue) {
+      handler(tokenIsActive) {
+        if (tokenIsActive) {
           this.intendedCursorPosition = this.cursorPosition;
           if (!this.activeSegment) {
-            this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
+            this.activateSegment(this.tokenEmpty ? SEGMENT_OPERATOR : SEGMENT_DATA);
           }
-        } else if (this.tokenValue.data === '') {
+        } else {
           this.activeSegment = null;
-          /**
-           * Emitted when token is about to be destroyed.
-           *
-           * @event destroy
-           */
-          this.$emit('destroy');
+
+          // restore multi select values if we have them
+          // otherwise destroy the token
+          if (this.config.multiSelect) {
+            this.$emit('input', {
+              ...this.tokenValue,
+              data: this.multiSelectValues || ''
+            });
+          }
+          if (this.tokenEmpty && this.multiSelectValues.length === 0) {
+            /**
+             * Emitted when token is about to be destroyed.
+             *
+             * @event destroy
+             */
+            this.$emit('destroy');
+          }
         }
       }
     }
@@ -203,7 +219,7 @@ var script = {
       return this.active && this.activeSegment === segment;
     },
     replaceWithTermIfEmpty() {
-      if (this.tokenValue.operator === '' && this.tokenValue.data === '') {
+      if (this.tokenValue.operator === '' && this.tokenEmpty) {
         /**
          * Emitted when this token is converted to another type
          * @property {object} token Replacement token configuration
@@ -259,7 +275,7 @@ var script = {
         } = _ref3;
         return value.startsWith(potentialValue);
       })) {
-        if (this.tokenValue.data === '') {
+        if (this.tokenEmpty) {
           applySuggestion(suggestedValue);
         } else {
           evt.preventDefault();
@@ -292,12 +308,6 @@ var script = {
       this.intendedCursorPosition = 'start';
     },
     handleComplete() {
-      if (this.config.multiSelect) {
-        this.$emit('input', {
-          ...this.tokenValue,
-          data: this.multiSelectValues.join(COMMA)
-        });
-      }
       /**
        * Emitted when the token entry has been completed.
        *

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -1,6 +1,6 @@
 import last from 'lodash/last';
 import { Portal } from 'portal-vue';
-import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
+import { LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list';
 import { TERM_TOKEN_TYPE, splitOnQuotes, match, wrapTokenInQuotes } from './filtered_search_utils';
@@ -151,7 +151,7 @@ var script = {
       return (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.find(o => o.value === this.value);
     },
     nonMultipleValue() {
-      return this.multiSelect ? last(this.value.split(COMMA)) : this.value;
+      return Array.isArray(this.value) ? last(this.value) : this.value;
     },
     inputValue: {
       get() {
@@ -210,6 +210,7 @@ var script = {
     },
     inputValue(newValue) {
       if (this.termsAsTokens()) return;
+      if (this.multiSelect) return;
       const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
       if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
         return;