@gitlab/ui 131.3.0 → 131.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "131.3.0",
+  "version": "131.3.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -90,7 +90,7 @@
     "chokidar": "^4.0.3",
     "sane": "^5.0.1",
     "jackspeak": "2.1.1",
-    "postcss": "8.5.8",
+    "postcss": "8.5.9",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
@@ -135,7 +135,7 @@
     "autoprefixer": "10.4.27",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.13.0",
+    "cypress": "15.13.1",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -152,7 +152,7 @@
     "pikaday": "^1.8.0",
     "playwright": "^1.59.1",
     "playwright-core": "^1.59.1",
-    "postcss": "8.5.8",
+    "postcss": "8.5.9",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",

package/src/components/utilities/truncate/truncate.scss

@@ -6,8 +6,10 @@
 .gl-truncate-start,
 .gl-truncate-end {
   flex: 0 1 auto;
+  min-width: 0;
   white-space: nowrap;
-  overflow: hidden;
+  overflow-x: clip;
+  overflow-y: visible;
 }
 
 .gl-truncate-start {

package/src/scss/mixins.scss

@@ -2,7 +2,9 @@
 
 @mixin str-truncated($max-width: 82%) {
   display: inline-block;
-  overflow: hidden;
+  min-width: 0;
+  overflow-x: clip;
+  overflow-y: visible;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;

package/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.js

@@ -14,11 +14,10 @@ import {
   MODEL_EVENT_NAME_PREFIX
 } from '../../constants/events'
 import {
-  PROP_TYPE_ARRAY_STRING,
+  PROP_TYPE_ARRAY,
   PROP_TYPE_BOOLEAN,
   PROP_TYPE_FUNCTION,
-  PROP_TYPE_NUMBER_OBJECT_STRING,
-  PROP_TYPE_NUMBER_STRING,
+  PROP_TYPE_NUMBER,
   PROP_TYPE_OBJECT,
   PROP_TYPE_STRING
 } from '../../constants/props'
@@ -28,7 +27,6 @@ import { getScopeId } from '../../utils/get-scope-id'
 import { isUndefinedOrNull } from '../../utils/inspect'
 import { pick } from '../../utils/object'
 import { TOOLTIP_DELAY } from '../../constants/config'
-import { makeProp } from '../../utils/props'
 import { createNewChildComponent, eventProp } from '../../utils/create-new-child-component'
 import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 import { BVTooltip } from './helpers/bv-tooltip'
@@ -47,35 +45,98 @@ export const props = {
   // String: scrollParent, window, or viewport
   // Element: element reference
   // Object: Vue component
-  boundary: makeProp([HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING], 'scrollParent'),
-  boundaryPadding: makeProp(PROP_TYPE_NUMBER_STRING, 5),
+  boundary: {
+    type: [HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: 'scrollParent'
+  },
+  boundaryPadding: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 5
+  },
   // String: HTML ID of container, if null body is used (default)
   // HTMLElement: element reference reference
   // Object: Vue Component
-  container: makeProp([HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING]),
-  customClass: makeProp(PROP_TYPE_STRING, 'gl-tooltip'),
-  delay: makeProp(PROP_TYPE_NUMBER_OBJECT_STRING, TOOLTIP_DELAY),
-  [MODEL_PROP_NAME_ENABLED]: makeProp(PROP_TYPE_BOOLEAN, false),
-  fallbackPlacement: makeProp(PROP_TYPE_ARRAY_STRING, 'flip'),
+  container: {
+    type: [HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  customClass: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'gl-tooltip'
+  },
+  delay: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: () => ({ ...TOOLTIP_DELAY })
+  },
+  [MODEL_PROP_NAME_ENABLED]: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  fallbackPlacement: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_STRING],
+    required: false,
+    default: 'flip'
+  },
   // ID to use for tooltip element
   // If not provided on will automatically be generated
-  id: makeProp(PROP_TYPE_STRING),
-  noFade: makeProp(PROP_TYPE_BOOLEAN, false),
-  noninteractive: makeProp(PROP_TYPE_BOOLEAN, false),
-  offset: makeProp(PROP_TYPE_NUMBER_STRING, 0),
-  placement: makeProp(PROP_TYPE_STRING, 'top'),
-  [MODEL_PROP_NAME_SHOW]: makeProp(PROP_TYPE_BOOLEAN, false),
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  noFade: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noninteractive: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  offset: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 0
+  },
+  placement: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'top'
+  },
+  [MODEL_PROP_NAME_SHOW]: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // String ID of element, or element/component reference
   // Or function that returns one of the above
   // Required
-  target: makeProp(
-    [HTMLElement, SVGElement, PROP_TYPE_FUNCTION, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
-    undefined,
-    true
-  ),
-  title: makeProp(PROP_TYPE_STRING),
-  triggers: makeProp(PROP_TYPE_ARRAY_STRING, 'hover focus'),
-  variant: makeProp(PROP_TYPE_STRING)
+  target: {
+    type: [HTMLElement, SVGElement, PROP_TYPE_FUNCTION, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: true
+  },
+  title: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  triggers: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_STRING],
+    required: false,
+    default: 'hover focus'
+  },
+  variant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 }
 
 // --- Main component ---

package/tailwind.defaults.js

@@ -163,7 +163,9 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
     },
     '.str-truncated': {
       display: 'inline-block',
-      overflow: 'hidden',
+      'min-width': '0',
+      'overflow-x': 'clip',
+      'overflow-y': 'visible',
       'text-overflow': 'ellipsis',
       'vertical-align': 'top',
       'white-space': 'nowrap',
@@ -231,6 +233,13 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
     '.text-align-inherit': {
       'text-align': 'inherit',
     },
+    '.truncate': {
+      'overflow-x': 'clip',
+      'overflow-y': 'visible',
+      'text-overflow': 'ellipsis',
+      'white-space': 'nowrap',
+      'min-width': '0',
+    },
   });
 }
 

package/dist/charts.js

@@ -1,13 +0,0 @@
-export { default as GlChart } from './components/charts/chart/chart';
-export { default as GlAreaChart } from './components/charts/area/area';
-export { default as GlBarChart } from './components/charts/bar/bar';
-export { default as GlGaugeChart } from './components/charts/gauge/gauge';
-export { default as GlLineChart } from './components/charts/line/line';
-export { default as GlChartLegend } from './components/charts/legend/legend';
-export { default as GlChartSeriesLabel } from './components/charts/series_label/series_label';
-export { default as GlHeatmap } from './components/charts/heatmap';
-export { default as GlColumnChart } from './components/charts/column/column';
-export { default as GlStackedColumnChart } from './components/charts/stacked_column/stacked_column';
-export { default as GlDiscreteScatterChart } from './components/charts/discrete_scatter/discrete_scatter';
-export { default as GlSingleStat } from './components/charts/single_stat/single_stat';
-export { default as GlSparklineChart } from './components/charts/sparkline/sparkline';

package/dist/components/base/accordion/accordion.js

@@ -1,69 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAccordion',
-  provide() {
-    return {
-      defaultHeaderLevel: this.headerLevel,
-      autoCollapse: this.autoCollapse
-    };
-  },
-  props: {
-    /**
-     * When true, will have the effect of closing other accordion items when one accordion item is visible.
-     */
-    autoCollapse: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
-     */
-    headerLevel: {
-      type: Number,
-      required: true,
-      validator(value) {
-        return value > 0 && value <= 6;
-      }
-    }
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t("default")],2)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };

package/dist/components/base/accordion/accordion_item.js

@@ -1,160 +0,0 @@
-import { uniqueId } from 'lodash-es';
-import GlCollapse from '../collapse/collapse';
-import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon';
-import GlButton from '../button/button';
-import { COLLAPSE_EVENT } from './constants';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAccordionItem',
-  components: {
-    GlCollapse,
-    GlButton,
-    GlAnimatedChevronRightDownIcon
-  },
-  inject: ['defaultHeaderLevel', 'autoCollapse'],
-  inheritAttrs: false,
-  model: {
-    prop: 'visible',
-    event: 'input'
-  },
-  props: {
-    /**
-     * Used to set the title of accordion link
-     */
-    title: {
-      type: String,
-      required: true
-    },
-    /**
-     * Used to set the title of accordion link when the content is visible
-     * */
-    titleVisible: {
-      type: String,
-      default: null,
-      required: false
-    },
-    /**
-     * When set, it will ensure the accordion item is initially visible
-     */
-    visible: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    /**
-     * The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.,
-     */
-    headerLevel: {
-      type: Number,
-      required: false,
-      default: null,
-      validator(value) {
-        return value > 0 && value <= 6;
-      }
-    },
-    /**
-     * Additional CSS class(es) to be applied to the header
-     */
-    headerClass: {
-      type: [String, Object, Array],
-      required: false,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      accordionItemId: uniqueId('accordion-item-'),
-      localVisible: this.visible
-    };
-  },
-  computed: {
-    headerComponent() {
-      const level = this.headerLevel || this.defaultHeaderLevel;
-      return `h${level}`;
-    },
-    buttonTitle() {
-      return this.localVisible && this.titleVisible ? this.titleVisible : this.title;
-    }
-  },
-  watch: {
-    visible: {
-      handler(newVisible) {
-        this.localVisible = newVisible;
-        this.checkAndCollapseSiblingAccordionItems(newVisible);
-      }
-    }
-  },
-  created() {
-    this.$emit('input', this.localVisible);
-  },
-  mounted() {
-    this.$parent.$el.addEventListener(COLLAPSE_EVENT, this.onParentCollapse);
-  },
-  beforeDestroy() {
-    this.$parent.$el.removeEventListener(COLLAPSE_EVENT, this.onParentCollapse);
-  },
-  methods: {
-    onParentCollapse(_ref) {
-      let {
-        detail: accordionItemId
-      } = _ref;
-      if (accordionItemId === this.accordionItemId) {
-        return;
-      }
-      this.$emit('input', false);
-      this.localVisible = false;
-    },
-    onButtonClick() {
-      const newLocalVisible = !this.localVisible;
-      this.$emit('input', newLocalVisible);
-      this.localVisible = newLocalVisible;
-      this.checkAndCollapseSiblingAccordionItems(newLocalVisible);
-    },
-    checkAndCollapseSiblingAccordionItems(newVisible) {
-      if (this.autoCollapse && newVisible) {
-        this.$parent.$el.dispatchEvent(new CustomEvent(COLLAPSE_EVENT, {
-          detail: this.accordionItemId
-        }));
-      }
-    }
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{attrs:{"variant":"link","button-text-classes":"gl-flex","aria-expanded":_vm.localVisible ? 'true' : 'false',"aria-controls":_vm.accordionItemId},on:{"click":_vm.onButtonClick}},[_c('gl-animated-chevron-right-down-icon',{attrs:{"is-on":_vm.localVisible}}),_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")],1)],1),_vm._v(" "),_c('gl-collapse',{attrs:{"id":_vm.accordionItemId,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.localVisible),callback:function ($$v) {_vm.localVisible=$$v;},expression:"localVisible"}},[_c('div',{staticClass:"gl-mt-3 gl-text-base"},[_vm._t("default")],2)])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };

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

@@ -1,3 +0,0 @@
-const COLLAPSE_EVENT = 'collapse';
-
-export { COLLAPSE_EVENT };