@gitlab/ui 79.1.0 → 79.2.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [79.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.1.1...v79.2.0) (2024-04-24)
+
+
+### Bug Fixes
+
+* **dropdowns:** ignore vertical boundaries ([3fec816](https://gitlab.com/gitlab-org/gitlab-ui/commit/3fec81641a0f625810a89a05129737767792df13))
+
+
+### Features
+
+* **GlDuoChatMessage:** output errors ([f4c804a](https://gitlab.com/gitlab-org/gitlab-ui/commit/f4c804abc033a7b23823366d2b1fa1e065abf056))
+
+## [79.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.1.0...v79.1.1) (2024-04-24)
+
+
+### Bug Fixes
+
+* **GlFormTextarea:** fix bug when `value` prop is `null` ([dffde58](https://gitlab.com/gitlab-org/gitlab-ui/commit/dffde58ea067b8b0a59cd4e4e264f5a1ee477541))
+
 # [79.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.0.0...v79.1.0) (2024-04-24)
 
 

package/dist/components/base/form/form_textarea/form_textarea.js

@@ -103,7 +103,7 @@ var script = {
       if (!this.showCharacterCount) {
         return;
       }
-      this.remainingCharacterCount = this.characterCount - newValue.length;
+      this.remainingCharacterCount = this.characterCount - this.valueLength(newValue);
       this.debouncedUpdateRemainingCharacterCountSrOnly(newValue);
     }
   },
@@ -113,16 +113,19 @@ var script = {
     this.debouncedUpdateRemainingCharacterCountSrOnly = debounce(this.updateRemainingCharacterCountSrOnly, 1000);
   },
   methods: {
+    valueLength(value) {
+      return (value === null || value === void 0 ? void 0 : value.length) || 0;
+    },
     handleKeyPress(e) {
       if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
         this.$emit('submit');
       }
     },
     updateRemainingCharacterCountSrOnly(newValue) {
-      this.remainingCharacterCountSrOnly = this.characterCount - newValue.length;
+      this.remainingCharacterCountSrOnly = this.characterCount - this.valueLength(newValue);
     },
     initialRemainingCharacterCount() {
-      return this.characterCount - this.value.length;
+      return this.characterCount - this.valueLength(this.value);
     }
   }
 };

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

@@ -1,8 +1,8 @@
 import uniqueId from 'lodash/uniqueId';
 import { offset, autoPlacement, shift, size, autoUpdate, computePosition } from '@floating-ui/dom';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements, dropdownAllowedAutoPlacements } from '../../../../utils/constants';
-import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_BOUNDARY_SELECTOR, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
-import { logWarning, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
+import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
+import { logWarning, getHorizontalBoundingClientRect, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
 import { OutsideDirective } from '../../../../directives/outside/outside';
@@ -250,10 +250,13 @@ var script = {
       return {
         placement,
         strategy: this.positioningStrategy,
-        middleware: [offset(this.offset), autoPlacement({
-          alignment,
-          boundary: this.$el.closest(GL_DROPDOWN_BOUNDARY_SELECTOR) || 'clippingAncestors',
-          allowedPlacements: dropdownAllowedAutoPlacements[this.placement]
+        middleware: [offset(this.offset), autoPlacement(() => {
+          const autoHorizontalBoundary = getHorizontalBoundingClientRect(this.$el.closest(GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR));
+          return {
+            alignment,
+            boundary: autoHorizontalBoundary || 'clippingAncestors',
+            allowedPlacements: dropdownAllowedAutoPlacements[this.placement]
+          };
         }), shift(), size({
           apply: _ref => {
             var _this$nonScrollableCo;

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

@@ -1,5 +1,5 @@
 // base dropdown events
-const GL_DROPDOWN_BOUNDARY_SELECTOR = 'main';
+const GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR = 'main';
 const GL_DROPDOWN_SHOWN = 'shown';
 const GL_DROPDOWN_HIDDEN = 'hidden';
 const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
@@ -19,4 +19,4 @@ const POSITION_ABSOLUTE = 'absolute';
 const POSITION_FIXED = 'fixed';
 const GL_DROPDOWN_CONTENTS_CLASS = 'gl-new-dropdown-contents';
 
-export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_BOUNDARY_SELECTOR, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };
+export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };

package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -1,3 +1,5 @@
+import GlIcon from '../../../../../base/icon/icon';
+import { GlTooltipDirective } from '../../../../../../directives/tooltip';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
 import GlFormGroup from '../../../../../base/form/form_group/form_group';
 import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea';
@@ -16,11 +18,13 @@ const i18n = {
     DID_WHAT: 'What were you doing?',
     INTERACTION: 'The situation in which you interacted with GitLab Duo Chat.',
     IMPROVE_WHAT: 'How could the response be improved?',
-    BETTER_RESPONSE: 'How the response might better meet your needs.'
+    BETTER_RESPONSE: 'How the response might better meet your needs.',
+    MESSAGE_ERROR: 'Error sending the message'
   }
 };
 var script = {
   name: 'GlDuoChatMessage',
+  i18n,
   safeHtmlConfigExtension: {
     ADD_TAGS: ['copy-code']
   },
@@ -28,10 +32,12 @@ var script = {
     DocumentationSources,
     GlDuoUserFeedback,
     GlFormGroup,
-    GlFormTextarea
+    GlFormTextarea,
+    GlIcon
   },
   directives: {
-    SafeHtml: SafeHtmlDirective
+    SafeHtml: SafeHtmlDirective,
+    GlTooltip: GlTooltipDirective
   },
   provide() {
     return {
@@ -92,7 +98,6 @@ var script = {
       return (_this$message$extras2 = this.message.extras) === null || _this$message$extras2 === void 0 ? void 0 : _this$message$extras2.hasFeedback;
     },
     defaultContent() {
-      if (this.message.errors.length > 0) return this.renderMarkdown(this.message.errors.join('; '));
       if (this.message.contentHtml) {
         return this.message.contentHtml;
       }
@@ -103,6 +108,10 @@ var script = {
         return this.renderMarkdown(concatUntilEmpty(this.messageChunks));
       }
       return this.defaultContent || this.renderMarkdown(concatUntilEmpty(this.message.chunks));
+    },
+    error() {
+      var _this$message, _this$message$errors;
+      return Boolean((_this$message = this.message) === null || _this$message === void 0 ? void 0 : (_this$message$errors = _this$message.errors) === null || _this$message$errors === void 0 ? void 0 : _this$message$errors.length) && this.message.errors.join('; ');
     }
   },
   beforeCreate() {
@@ -142,7 +151,7 @@ var script = {
       }
     },
     hydrateContentWithGFM() {
-      if (!this.isChunk) {
+      if (!this.isChunk && this.$refs.content) {
         this.$nextTick(this.renderGFM(this.$refs.content));
       }
     },
@@ -160,8 +169,7 @@ var script = {
         this.stopWatchingMessage();
       }
     }
-  },
-  i18n
+  }
 };
 
 /* script */
@@ -172,7 +180,8 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': _vm.isUserMessage,
     'gl-rounded-bottom-left-none gl-text-gray-900 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-50':
       _vm.isAssistantMessage,
-  }},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)})],1)]:_vm._e()],2)};
+    'gl-bg-red-50 gl-border-none!': _vm.error,
+  }},[(_vm.error)?_c('gl-icon',{staticClass:"gl-text-red-600 gl-border gl-border-red-500 gl-rounded-full gl-mr-3 gl-flex-shrink-0 error-icon",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"status_warning_borderless","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.error)?_c('div',{ref:"error-message",staticClass:"error-message"},[_vm._v(_vm._s(_vm.error))]):_c('div',[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)})],1)]:_vm._e()],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */