@gitlab/ui 64.1.0 → 64.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [64.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.1.1...v64.2.0) (2023-06-02)
+
+
+### Features
+
+* **GlFilteredSearchToken:** Pass input attributes to data segment ([e8dcc5f](https://gitlab.com/gitlab-org/gitlab-ui/commit/e8dcc5f8fb8ff4b6fa78f1e46b899a18990d39c8))
+
+## [64.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.1.0...v64.1.1) (2023-06-01)
+
+
+### Bug Fixes
+
+* **dropdowns:** auto-focus only once dropdown is properly positioned ([fe6c39d](https://gitlab.com/gitlab-org/gitlab-ui/commit/fe6c39dee065cbbc35dd225ea0e565dba368af14))
+
 # [64.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.0.2...v64.1.0) (2023-05-30)
 
 

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

@@ -81,6 +81,11 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    dataSegmentInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data() {
@@ -322,7 +327,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
   var inputValue = ref.inputValue;
 return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v("\n        "+_vm._s(inputValue)+"\n      ")])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"cursor-position":_vm.intendedCursorPosition,"options":_vm.operators,"option-text-field":"value","custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')},"previous":_vm.activatePreviousTitleSegment,"next":_vm.activateNextDataSegment},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v("\n        "+_vm._s(_vm.operatorDescription)+"\n      ")])]},proxy:true},{key:"option",fn:function(ref){
   var option = ref.option;
-return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(_vm.showFriendlyText ? option.description : option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(_vm.showFriendlyText ? option.value : option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"view-only":_vm.viewOnly},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
+return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(_vm.showFriendlyText ? option.description : option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(_vm.showFriendlyText ? option.value : option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"view-only":_vm.viewOnly,"search-input-attributes":_vm.dataSegmentInputAttributes},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
   var inputValue = ref.inputValue;
 return [_vm._t("view-token",function(){return [_c('gl-token',_vm._g({staticClass:"gl-filtered-search-token-data",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA),attrs:{"variant":"search-value","view-only":_vm.viewOnly}},_vm.eventListeners),[_c('span',{staticClass:"gl-filtered-search-token-data-content"},[_vm._t("view",function(){return [_vm._v(_vm._s(inputValue))]},null,{ inputValue: inputValue })],2)])]},null,{
           inputValue: inputValue,

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

@@ -138,7 +138,6 @@ var script = {
   data() {
     return {
       visible: false,
-      openedYet: false,
       baseDropdownId: uniqueId('base-dropdown-')
     };
   },
@@ -264,7 +263,7 @@ var script = {
           Use 'a' or 'button' element instead or make sure to add 'role="button"' along with 'tabindex' otherwise.`, this.$el);
       }
     },
-    startFloating() {
+    async startFloating() {
       this.calculateNonScrollableAreaHeight();
       this.observer = new MutationObserver(this.calculateNonScrollableAreaHeight);
       this.observer.observe(this.$refs.content, {
@@ -272,22 +271,26 @@ var script = {
         childList: true,
         subtree: true
       });
-      this.stopAutoUpdate = autoUpdate(this.toggleElement, this.$refs.content, async () => {
-        const {
-          x,
-          y
-        } = await computePosition(this.toggleElement, this.$refs.content, this.floatingUIConfig);
+      await new Promise(resolve => {
+        const stopAutoUpdate = autoUpdate(this.toggleElement, this.$refs.content, async () => {
+          const {
+            x,
+            y
+          } = await computePosition(this.toggleElement, this.$refs.content, this.floatingUIConfig);
 
-        /**
-         * Due to the asynchronous nature of computePosition, it's technically possible for the
-         * component to have been destroyed by the time the promise resolves. In such case, we exit
-         * early to prevent a TypeError.
-         */
-        if (!this.$refs.content) return;
-        Object.assign(this.$refs.content.style, {
-          left: `${x}px`,
-          top: `${y}px`
+          /**
+           * Due to the asynchronous nature of computePosition, it's technically possible for the
+           * component to have been destroyed by the time the promise resolves. In such case, we exit
+           * early to prevent a TypeError.
+           */
+          if (!this.$refs.content) return;
+          Object.assign(this.$refs.content.style, {
+            left: `${x}px`,
+            top: `${y}px`
+          });
+          resolve(stopAutoUpdate);
         });
+        this.stopAutoUpdate = stopAutoUpdate;
       });
     },
     stopFloating() {
@@ -298,12 +301,15 @@ var script = {
     async toggle() {
       this.visible = !this.visible;
       if (this.visible) {
+        // The dropdown needs to be actually visible before we compute its position with Floating UI.
+        await this.$nextTick();
+
         /**
-         * We defer the following logic to the next tick as all that comes next relies on the
-         * dropdown actually being visible.
+         * We wait until the dropdown's position has been computed before emitting the `shown` event.
+         * This ensures that, if the parent component attempts to focus an inner element, the dropdown
+         * is already properly placed in the page. Otherwise, the page would scroll back to the top.
          */
-        await this.$nextTick();
-        this.startFloating();
+        await this.startFloating();
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
         this.stopFloating();

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

@@ -57,6 +57,35 @@ const mockGroups = [{
     value: 'v2.1'
   }]
 }];
+const mockGroupsWithTextSrOnly = [{
+  text: 'Default',
+  options: [{
+    text: 'main',
+    value: 'main'
+  }, {
+    text: 'development',
+    value: 'development'
+  }],
+  textSrOnly: true
+}, {
+  text: 'Feature branches',
+  options: [{
+    text: 'feature/add-avatar',
+    value: 'add'
+  }, {
+    text: 'feature/improve-panel',
+    value: 'improve'
+  }]
+}, {
+  text: 'Bugfix branches',
+  options: [{
+    text: 'fix/border-of-avatar',
+    value: 'fix-border'
+  }, {
+    text: 'fix/radius-panel',
+    value: 'fix-radius'
+  }]
+}];
 const mockUsers = [{
   value: 'mikegreiling',
   text: 'Mike Greiling',
@@ -74,4 +103,4 @@ const mockUsers = [{
   icon: 'bin'
 }];
 
-export { mockGroups, mockOptions, mockUsers };
+export { mockGroups, mockGroupsWithTextSrOnly, mockOptions, mockUsers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.1.0",
+  "version": "64.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -85,7 +85,7 @@
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.22.1",
-    "@babel/preset-env": "^7.22.2",
+    "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -210,6 +210,21 @@ describe('Filtered search token', () => {
     expect(wrapper.emitted().replace[0][0].value).toStrictEqual({ data: '' });
   });
 
+  it('sets input attributes on data segment when provided', () => {
+    const dataSegmentInputAttributes = {
+      placeholder: 'YYYY-MM-DD',
+      id: 'this-id',
+    };
+    createComponent({
+      active: true,
+      dataSegmentInputAttributes,
+      value: { operator: '=', data: 'something' },
+    });
+    expect(findDataSegment().props().searchInputAttributes).toStrictEqual(
+      dataSegmentInputAttributes
+    );
+  });
+
   describe('integration tests', () => {
     beforeAll(() => {
       if (!HTMLElement.prototype.scrollIntoView) {

package/src/components/base/filtered_search/filtered_search_token.stories.js

@@ -1,6 +1,7 @@
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import GlIcon from '../icon/icon.vue';
+import GlDatepicker from '../datepicker/datepicker.vue';
 import { provide } from './common_story_options';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import readme from './filtered_search_token.md';
@@ -153,6 +154,53 @@ export const WithStaticOptions = (args, { argTypes }) => ({
 });
 WithStaticOptions.args = generateProps();
 
+// eslint-disable-next-line no-unused-vars
+export const WithDataSegmentInputAttributes = (args, { argTypes }) => ({
+  components: {
+    GlFilteredSearchToken,
+    GlDatepicker,
+  },
+  provide,
+  props: ['active'],
+  data() {
+    return {
+      value: { operator: '<', data: null },
+      config: {
+        title: 'Date',
+        operators: [
+          { value: '<', description: 'before' },
+          { value: '>', description: 'after' },
+        ],
+      },
+      dataSegmentInputAttributes: {
+        placeholder: 'YYYY-MM-DD',
+        id: 'this-id',
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      document.activeElement.blur();
+    });
+  },
+  template: `
+    <div>
+      <div> {{ value }} </div>
+      <div class="gl-border-1 gl-border-solid gl-border-gray-200">
+        <gl-filtered-search-token
+          v-model="value"
+          class="gl-h-full"
+          :config="config"
+          :active="active"
+          :data-segment-input-attributes="dataSegmentInputAttributes"
+        />
+        <gl-datepicker target='#this-id' />
+      </div>
+    </div>
+  `,
+});
+WithDataSegmentInputAttributes.args = generateProps();
+
 export default {
   title: 'base/filtered-search/token',
   component: GlFilteredSearchToken,

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -78,6 +78,11 @@ export default {
       required: false,
       default: false,
     },
+    dataSegmentInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -405,6 +410,7 @@ export default {
       :multi-select="config.multiSelect"
       :options="config.options"
       :view-only="viewOnly"
+      :search-input-attributes="dataSegmentInputAttributes"
       @activate="activateDataSegment"
       @backspace="activateSegment($options.segments.SEGMENT_OPERATOR)"
       @complete="handleComplete"

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

@@ -62,7 +62,7 @@ describe('base dropdown', () => {
       expect(autoUpdate).toHaveBeenCalledTimes(1);
     });
 
-    it("stops Floating UI's when closing the dropdown", async () => {
+    it('stops Floating UI when closing the dropdown', async () => {
       buildWrapper();
       await findDefaultDropdownToggle().trigger('click');
       await findDefaultDropdownToggle().trigger('click');
@@ -71,7 +71,7 @@ describe('base dropdown', () => {
       expect(mockStopAutoUpdate).toHaveBeenCalledTimes(1);
     });
 
-    it("restarts Floating UI's when reopening the dropdown", async () => {
+    it('restarts Floating UI when reopening the dropdown', async () => {
       buildWrapper();
       await findDefaultDropdownToggle().trigger('click');
       await findDefaultDropdownToggle().trigger('click');
@@ -335,6 +335,11 @@ describe('base dropdown', () => {
     });
 
     describe('toggle visibility', () => {
+      beforeEach(() => {
+        autoUpdate.mockImplementation(jest.requireActual('@floating-ui/dom').autoUpdate);
+        computePosition.mockImplementation(() => Promise.resolve);
+      });
+
       it('should toggle menu visibility on toggle click', async () => {
         const toggle = findCustomDropdownToggle();
         const firstToggleChild = findFirstToggleElement();

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

@@ -150,7 +150,6 @@ export default {
   data() {
     return {
       visible: false,
-      openedYet: false,
       baseDropdownId: uniqueId('base-dropdown-'),
     };
   },
@@ -282,7 +281,7 @@ export default {
         );
       }
     },
-    startFloating() {
+    async startFloating() {
       this.calculateNonScrollableAreaHeight();
       this.observer = new MutationObserver(this.calculateNonScrollableAreaHeight);
       this.observer.observe(this.$refs.content, {
@@ -291,24 +290,29 @@ export default {
         subtree: true,
       });
 
-      this.stopAutoUpdate = autoUpdate(this.toggleElement, this.$refs.content, async () => {
-        const { x, y } = await computePosition(
-          this.toggleElement,
-          this.$refs.content,
-          this.floatingUIConfig
-        );
+      await new Promise((resolve) => {
+        const stopAutoUpdate = autoUpdate(this.toggleElement, this.$refs.content, async () => {
+          const { x, y } = await computePosition(
+            this.toggleElement,
+            this.$refs.content,
+            this.floatingUIConfig
+          );
 
-        /**
-         * Due to the asynchronous nature of computePosition, it's technically possible for the
-         * component to have been destroyed by the time the promise resolves. In such case, we exit
-         * early to prevent a TypeError.
-         */
-        if (!this.$refs.content) return;
+          /**
+           * Due to the asynchronous nature of computePosition, it's technically possible for the
+           * component to have been destroyed by the time the promise resolves. In such case, we exit
+           * early to prevent a TypeError.
+           */
+          if (!this.$refs.content) return;
+
+          Object.assign(this.$refs.content.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+          });
 
-        Object.assign(this.$refs.content.style, {
-          left: `${x}px`,
-          top: `${y}px`,
+          resolve(stopAutoUpdate);
         });
+        this.stopAutoUpdate = stopAutoUpdate;
       });
     },
     stopFloating() {
@@ -319,12 +323,16 @@ export default {
       this.visible = !this.visible;
 
       if (this.visible) {
+        // The dropdown needs to be actually visible before we compute its position with Floating UI.
+        await this.$nextTick();
+
         /**
-         * We defer the following logic to the next tick as all that comes next relies on the
-         * dropdown actually being visible.
+         * We wait until the dropdown's position has been computed before emitting the `shown` event.
+         * This ensures that, if the parent component attempts to focus an inner element, the dropdown
+         * is already properly placed in the page. Otherwise, the page would scroll back to the top.
          */
-        await this.$nextTick();
-        this.startFloating();
+        await this.startFloating();
+
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
         this.stopFloating();

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

@@ -18,7 +18,7 @@ import GlIntersectionObserver from '../../../utilities/intersection_observer/int
 import GlCollapsibleListbox, { ITEM_SELECTOR } from './listbox.vue';
 import GlListboxItem from './listbox_item.vue';
 import GlListboxGroup from './listbox_group.vue';
-import { mockOptions, mockGroups } from './mock_data';
+import { mockOptions, mockGroups, mockGroupsWithTextSrOnly } from './mock_data';
 
 jest.mock('@floating-ui/dom');
 autoUpdate.mockImplementation(() => {
@@ -398,14 +398,13 @@ describe('GlCollapsibleListbox', () => {
     });
 
     it('passes the `textSrOnly` prop', () => {
-      const mockGroupsWithTextSrOnly = JSON.parse(JSON.stringify(mockGroups));
-      mockGroupsWithTextSrOnly[0].textSrOnly = true;
-      mockGroupsWithTextSrOnly[1].textSrOnly = false;
       buildWrapper({ items: mockGroupsWithTextSrOnly });
 
       const groups = findListboxGroups();
 
-      const expectedTextSrOnlyProps = mockGroupsWithTextSrOnly.map((group) => group.textSrOnly);
+      const expectedTextSrOnlyProps = mockGroupsWithTextSrOnly.map(
+        (group) => group.textSrOnly ?? false
+      );
       const actualTextSrOnlyProps = groups.wrappers.map((group) => group.props('textSrOnly'));
 
       expect(actualTextSrOnlyProps).toEqual(expectedTextSrOnlyProps);

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

@@ -24,7 +24,7 @@ import {
 } from '../../../../utils/stories_constants';
 import { POSITION } from '../../../utilities/truncate/constants';
 import readme from './listbox.md';
-import { mockOptions, mockGroups, mockUsers } from './mock_data';
+import { mockOptions, mockGroups, mockGroupsWithTextSrOnly, mockUsers } from './mock_data';
 import { flattenedOptions } from './utils';
 import GlCollapsibleListbox from './listbox.vue';
 
@@ -462,6 +462,33 @@ export const CustomGroupsAndItems = makeGroupedExample({
   `),
 });
 
+export const GroupWithoutLabel = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    GlBadge,
+    GlCollapsibleListbox,
+  },
+  data() {
+    return {
+      selected: mockGroupsWithTextSrOnly[1].options[1].value,
+    };
+  },
+  mounted() {
+    if (this.startOpened) {
+      openListbox(this);
+    }
+  },
+  template: template(`
+    <template #list-item="{ item }">
+      {{ item.text }} <gl-badge v-if="item.value === 'main'" size="sm">default</gl-badge>
+    </template>
+  `),
+});
+GroupWithoutLabel.args = generateProps({
+  items: mockGroupsWithTextSrOnly,
+  headerText: 'Select branch',
+});
+
 export default {
   title: 'base/new-dropdowns/listbox',
   component: GlCollapsibleListbox,

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

@@ -67,6 +67,49 @@ export const mockGroups = [
   },
 ];
 
+export const mockGroupsWithTextSrOnly = [
+  {
+    text: 'Default',
+    options: [
+      {
+        text: 'main',
+        value: 'main',
+      },
+      {
+        text: 'development',
+        value: 'development',
+      },
+    ],
+    textSrOnly: true,
+  },
+  {
+    text: 'Feature branches',
+    options: [
+      {
+        text: 'feature/add-avatar',
+        value: 'add',
+      },
+      {
+        text: 'feature/improve-panel',
+        value: 'improve',
+      },
+    ],
+  },
+  {
+    text: 'Bugfix branches',
+    options: [
+      {
+        text: 'fix/border-of-avatar',
+        value: 'fix-border',
+      },
+      {
+        text: 'fix/radius-panel',
+        value: 'fix-radius',
+      },
+    ],
+  },
+];
+
 export const mockUsers = [
   {
     value: 'mikegreiling',

package/src/scss/functions.scss

@@ -21,7 +21,7 @@
     @return $value;
   }
 
-  $converted: $value / $font-size-base;
+  $converted: calc($value / $font-size-base);
 
   @return strip-unit($converted) * 1rem;
 }
@@ -54,7 +54,7 @@
   $min-width: px-to-rem($min-width);
   $max-width: px-to-rem($max-width);
 
-  $slope: ($max - $min) / ($max-width - $min-width);
+  $slope: calc(($max - $min) / ($max-width - $min-width));
   $intersection: (-$min-width * $slope) + $min;
 
   // Use calc() inside of clamp() function to work around SassC