@gitlab/ui 115.3.0 → 115.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "115.3.0",
+  "version": "115.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -70,7 +70,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.7.2",
     "echarts": "^5.6.0",
-    "gridstack": "^12.2.1",
+    "gridstack": "^12.2.2",
     "iframe-resizer": "^4.4.5",
     "lodash": "^4.17.21",
     "popper.js": "^1.16.1",
@@ -87,12 +87,12 @@
     "vue": "^2.7.16"
   },
   "resolutions": {
-    "chokidar": "^3.6.0",
+    "chokidar": "^4.0.3",
     "sane": "^5.0.1",
     "jackspeak": "2.1.1",
     "postcss": "8.5.6",
     "json5": "2.2.3",
-    "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "1.4.2"
+    "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
@@ -138,7 +138,6 @@
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.4.0",
-    "entities": "^5.0.0",
     "esbuild": "^0.18.0",
     "fuse.js": "^7.1.0",
     "gitlab-api-async-iterator": "^1.3.1",
@@ -150,7 +149,7 @@
     "jest-environment-jsdom": "30.0.2",
     "jest-image-snapshot": "^6.5.1",
     "merge-cobertura": "^1.0.4",
-    "mockdate": "^2.0.5",
+    "mockdate": "^3.0.5",
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
@@ -160,7 +159,7 @@
     "postcss-loader": "8.1.1",
     "postcss-scss": "4.0.9",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "rollup": "^2.79.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-postcss": "4.0.2",

package/src/components/base/drawer/drawer.scss

@@ -112,13 +112,16 @@ $gl-drawer-scrim-gradient: linear-gradient(
 
 .gl-drawer-body {
   @apply gl-grow;
-  min-height: 0;
   // prevent safari bug where box shadow is visible
   // above the drawer when hovering interactive elements
   // see https://gitlab.com/gitlab-org/gitlab/-/issues/366558
   background-color: inherit;
 }
 
+.gl-drawer-body-shrink {
+  overflow-y: auto;
+}
+
 .gl-drawer-body-scrim {
   &::after {
     background: $gl-drawer-scrim-gradient;

package/src/components/base/drawer/drawer.vue

@@ -120,13 +120,18 @@ export default {
         </div>
         <slot name="header"></slot>
       </div>
-      <div class="gl-drawer-body" :class="{ 'gl-drawer-body-scrim': !shouldRenderFooter }">
+      <div
+        class="gl-drawer-body"
+        :class="{
+          'gl-drawer-body-shrink': headerSticky,
+          'gl-drawer-body-scrim': !shouldRenderFooter,
+        }"
+      >
         <slot></slot>
       </div>
       <div
         v-if="shouldRenderFooter"
-        class="gl-drawer-footer gl-drawer-footer-sticky"
-        :class="{ 'gl-drawer-body-scrim-on-footer': shouldRenderFooter }"
+        class="gl-drawer-footer gl-drawer-footer-sticky gl-drawer-body-scrim-on-footer"
         :style="{ zIndex }"
       >
         <slot name="footer"></slot>

package/src/components/dashboards/dashboard_layout/dashboard_layout.vue

@@ -20,14 +20,8 @@ export default {
      * @typedef {Object} Dashboard
      * @property {string} title - The dashboard title to render. Expected if no #title or #header slot is provided.
      * @property {string} description - Optional: The dashboard description to render.
-     * @property {Array<Object>} panels - Optional: The dashboard panels. The entire object is passed to the #panel slot.
-     * @property {string} panels[].id - Each panel must have a unique ID.
-     * @property {string} panels[].title - The panel title to render.
-     * @property {Object} panels[].gridAttributes - Layout settings for the panel.
-     * @property {number} panels[].gridAttributes.width - Width of the panel in grid units.
-     * @property {number} panels[].gridAttributes.height - Height of the panel in grid units.
-     * @property {number} panels[].gridAttributes.xPos - X position of the panel in the grid, expressed in grid units, starts from 0.
-     * @property {number} panels[].gridAttributes.yPos - Y position of the panel in the grid, expressed in grid units, starts from 0.
+     * @property {DashboardGrid} panels - Optional: The grid configuration.
+     * @see GridLayout.vue
      *
      * @type {Dashboard}
      */
@@ -112,7 +106,7 @@ export default {
         <grid-layout
           v-if="dashboardHasPanels"
           :value="config"
-          :is-static="isStaticGrid"
+          :is-static-grid="isStaticGrid"
           class="-gl-mx-3"
           @input="emitChanges"
         >

package/src/components/dashboards/dashboard_layout/grid_layout/grid_layout.vue

@@ -8,11 +8,29 @@ const CURSOR_GRABBING_CLASS = '!gl-cursor-grabbing';
 export default {
   name: 'GlGridLayout',
   props: {
+    /**
+     * The grid configuration object.
+     *
+     * @typedef {Object} DashboardGrid
+     * @property {Array<Object>} panels - The dashboard panels. If empty, it will render an empty grid
+     * @property {string} panels[].id - Each panel must have a unique ID.
+     * @property {string} panels[].title - The panel title to render.
+     * @property {Object} panels[].gridAttributes - Layout settings for the panel.
+     * @property {number} panels[].gridAttributes.width - Width of the panel in grid units.
+     * @property {number} panels[].gridAttributes.height - Height of the panel in grid units.
+     * @property {number} panels[].gridAttributes.xPos - X position of the panel in the grid, expressed in grid units, starts from 0.
+     * @property {number} panels[].gridAttributes.yPos - Y position of the panel in the grid, expressed in grid units, starts from 0.
+     *
+     * @type {DashboardGrid}
+     */
     value: {
       type: Object,
       required: true,
     },
-    isStatic: {
+    /**
+     * Set to `false` to enable user-driven modification of the grid layout.
+     */
+    isStaticGrid: {
       type: Boolean,
       required: false,
       default: true,
@@ -37,7 +55,7 @@ export default {
     },
   },
   watch: {
-    isStatic(value) {
+    isStaticGrid(value) {
       this.grid?.setStatic(value);
     },
     gridConfig: {
@@ -138,7 +156,7 @@ export default {
           animate: true,
           float: true,
           // Toggles user-customization of grid layout
-          staticGrid: this.isStatic,
+          staticGrid: this.isStaticGrid,
         },
         this.$refs.grid,
       ).load(this.gridConfig);
@@ -238,7 +256,7 @@ export default {
       ref="panelWrappers"
       :key="panel.id"
       class="gl-h-full"
-      :class="{ 'gl-cursor-grab': !isStatic }"
+      :class="{ 'gl-cursor-grab': !isStaticGrid }"
       data-testid="gridstack-panel"
     >
       <slot name="panel" v-bind="{ panel: panel.props }"></slot>

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -26,6 +26,11 @@ export default {
       required: false,
       default: '',
     },
+    bodyContentClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
     borderColorClass: {
       type: String,
       required: false,
@@ -95,6 +100,11 @@ export default {
     containerClasses() {
       return `${this.containerClass} ${this.borderClass}`;
     },
+    bodyClasses() {
+      return this.loading
+        ? 'gl-flex gl-flex-wrap gl-content-center gl-text-center'
+        : `gl-grow gl-overflow-y-auto gl-overflow-x-hidden ${this.bodyContentClass}`;
+    },
     hasTitleIcon() {
       return Boolean(this.titleIcon);
     },
@@ -188,10 +198,7 @@ export default {
           </template>
         </gl-disclosure-dropdown>
       </div>
-      <div
-        class="gl-grow gl-overflow-y-auto gl-overflow-x-hidden"
-        :class="{ 'gl-flex gl-flex-wrap gl-content-center gl-text-center': loading }"
-      >
+      <div :class="bodyClasses">
         <template v-if="loading">
           <gl-loading-icon size="lg" class="gl-min-h-8 gl-w-full" />
           <div