@gitlab/ui 115.4.0 → 115.6.0

package/dist/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.js

@@ -121,9 +121,18 @@ const plugin = Vue => {
       }
     });
     // Create a mount point (a DIV) and mount it (which triggers the show)
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-    toast.$mount(div);
+    function createMountPoint() {
+      const div = document.createElement('div');
+      document.body.appendChild(div);
+      toast.$mount(div);
+    }
+
+    // ViewTransition fallback
+    if (!document.startViewTransition) {
+      createMountPoint();
+      return;
+    }
+    document.startViewTransition(createMountPoint);
   };
 
   // Declare BvToast instance property class

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "115.4.0",
+  "version": "115.6.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": "2.0.4"
+    "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
@@ -138,29 +138,28 @@
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.4.0",
-    "entities": "^5.0.0",
-    "esbuild": "^0.18.0",
+    "esbuild": "^0.25.6",
     "fuse.js": "^7.1.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",
     "globby": "^14.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "30.0.2",
-    "jest-circus": "30.0.2",
-    "jest-environment-jsdom": "30.0.2",
+    "jest": "30.0.4",
+    "jest-circus": "30.0.4",
+    "jest-environment-jsdom": "30.0.4",
     "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",
-    "playwright": "^1.53.2",
-    "playwright-core": "^1.53.2",
+    "playwright": "^1.54.1",
+    "playwright-core": "^1.54.1",
     "postcss": "8.5.6",
     "postcss-loader": "8.1.1",
     "postcss-scss": "4.0.9",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "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/base/toast/toast.scss

@@ -5,10 +5,14 @@
 .b-toaster {
   &.b-toaster-bottom-left {
     .b-toaster-slot {
+      @apply gl-w-auto;
+      @apply gl-flex;
       bottom: $gl-spacing-scale-6;
       left: $gl-spacing-scale-6;
       right: auto;
-      @apply gl-w-auto;
+      flex-direction: column-reverse;
+      gap: $gl-spacing-scale-4;
+      view-transition-name: gl-toast;
 
       @include media-breakpoint-down(xs) {
         @apply gl-w-full;
@@ -60,3 +64,8 @@
     color: inherit !important;
   }
 }
+
+::view-transition-group(gl-toast) {
+  animation-duration: $gl-transition-duration-medium;
+  animation-timing-function: $gl-easing-out-cubic;
+}

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/vendor/bootstrap-vue/src/components/toast/_toast.scss

@@ -19,10 +19,6 @@
     background-color: rgba($toast-background-color, $b-toast-background-opacity);
   }
 
-  &:not(:last-child) {
-    margin-bottom: $toast-padding-x;
-  }
-
   &.b-toast-solid {
     .toast {
       background-color: rgba($toast-background-color, 1);

package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.js

@@ -133,9 +133,19 @@ const plugin = Vue => {
       }
     })
     // Create a mount point (a DIV) and mount it (which triggers the show)
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    toast.$mount(div)
+    function createMountPoint() {
+      const div = document.createElement('div')
+      document.body.appendChild(div)
+      toast.$mount(div)
+    }
+
+    // ViewTransition fallback
+    if (!document.startViewTransition) {
+      createMountPoint()
+      return
+    }
+
+    document.startViewTransition(createMountPoint)
   }
 
   // Declare BvToast instance property class

package/src/vendor/bootstrap-vue/src/components/toast/index.scss

@@ -1,3 +1,2 @@
 @import "toast";
 @import "toaster";
-@import "toaster-transition";

package/src/vendor/bootstrap-vue/src/components/toast/_toaster-transition.scss

@@ -1,45 +0,0 @@
-// --- <b-toast> custom transition SCSS ---
-
-// PortalVue appears to have issues with transition classes on portaled items
-
-.b-toaster {
-  &.b-toaster-top-right,
-  &.b-toaster-top-left,
-  &.b-toaster-bottom-right,
-  &.b-toaster-bottom-left {
-    .b-toast {
-      &.b-toaster-enter-active,
-      &.b-toaster-leave-active,
-      &.b-toaster-move {
-        transition: transform 0.175s;
-      }
-
-      &.b-toaster-enter {
-      }
-
-      &.b-toaster-enter-to,
-      &.b-toaster-enter-active {
-        .toast.fade {
-          // Delay the appearance of the toast until
-          // the move transition has completed
-          transition-delay: 0.175s;
-        }
-      }
-
-      &.b-toaster-enter-to {
-      }
-
-      &.b-toaster-leave-active {
-        position: absolute;
-        transition-delay: 0.175s;
-
-        .toast.fade {
-          transition-delay: 0s;
-        }
-      }
-
-      &.b-toaster-leave-to {
-      }
-    }
-  }
-}