@gitlab/ui 80.0.1 → 80.2.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 02 May 2024 10:07:41 GMT
+ * Generated on Fri, 03 May 2024 22:13:37 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 02 May 2024 10:07:41 GMT
+ * Generated on Fri, 03 May 2024 22:13:37 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 02 May 2024 10:07:41 GMT
+ * Generated on Fri, 03 May 2024 22:13:37 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 02 May 2024 10:07:41 GMT
+ * Generated on Fri, 03 May 2024 22:13:37 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 02 May 2024 10:07:41 GMT
+// Generated on Fri, 03 May 2024 22:13:37 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-link: #63a6e9 !default; // Used for default text links.

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 02 May 2024 10:07:41 GMT
+// Generated on Fri, 03 May 2024 22:13:37 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-success: #217645 !default; // Used for text indicating success or validity.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.0.1",
+  "version": "80.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -80,7 +80,7 @@
   "peerDependencies": {
     "@gitlab/svgs": "^1.116.0 || ^2.0.0 || ^3.0.0",
     "bootstrap": ">=4.5.3 <=4.6.2",
-    "dompurify": "^2.4.7 || ^3.0.5",
+    "dompurify": ">=2.5.2 <3.0.0 || >=3.1.2",
     "emoji-regex": ">=10.0.0",
     "pikaday": "^1.8.0",
     "tailwindcss": "^3",
@@ -93,10 +93,10 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.24.4",
+    "@babel/core": "^7.24.5",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.5.0",
@@ -134,11 +134,11 @@
     "cypress": "13.8.1",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
-    "dompurify": "^3.0.0",
+    "dompurify": "^3.1.2",
     "emoji-regex": "^10.0.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.0.0",
+    "eslint-plugin-cypress": "3.0.3",
     "eslint-plugin-storybook": "0.8.0",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",

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

@@ -100,6 +100,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 }
 
 .gl-drawer-close-button {
+  @include gl-align-self-start;
   @include gl-bg-none;
   @include gl-border-none;
 }

package/src/components/base/drawer/drawer.stories.js

@@ -144,7 +144,7 @@ export const WithActions = (_args, { viewMode }) => ({
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       ${createSidebarTemplate(`
           <template #title>
-          <h3>custom-network-policy</h3>
+          <h3>custom-network-policy multiple lines headline</h3>
         </template>
         <template #header>
             <div class="gl-mt-5">

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

@@ -25,6 +25,11 @@ const FakeToken = avoidReactivity({
   render: (h) => h('div'),
 });
 
+const AppliedTokensTestFakeToken = avoidReactivity({
+  props: ['appliedTokens'],
+  render: (h) => h('div'),
+});
+
 Vue.directive('GlTooltip', () => {});
 
 let wrapper;
@@ -475,6 +480,20 @@ describe('Filtered search', () => {
     );
   });
 
+  it('passes appliedTokens prop to the token component', async () => {
+    const value = [{ type: 'faketoken', value: 'foo' }];
+    const expectedAppliedTokens = [{ type: 'faketoken', value: 'foo', id: expect.anything() }];
+    createComponent({
+      value,
+      availableTokens: [{ type: 'faketoken', token: AppliedTokensTestFakeToken }],
+    });
+    await nextTick();
+
+    const fakeTokenInstance = wrapper.findComponent(AppliedTokensTestFakeToken);
+    expect(fakeTokenInstance.exists()).toBe(true);
+    expect(fakeTokenInstance.props('appliedTokens')).toEqual(expectedAppliedTokens);
+  });
+
   it('passes `searchButtonAttributes` prop to `GlSearchBoxByClick`', () => {
     const searchButtonAttributes = { 'data-prop': 'foo-bar' };
 

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

@@ -183,6 +183,9 @@ export default {
     activeToken() {
       return this.tokens[this.activeTokenIdx];
     },
+    appliedTokens() {
+      return this.tokens.filter((token) => !isEmptyTerm(token));
+    },
     lastTokenIdx() {
       return this.tokens.length - 1;
     },
@@ -433,6 +436,7 @@ export default {
             :is-last-token="isLastToken(idx)"
             :class="getTokenClassList(idx)"
             :search-text-option-label="searchTextOptionLabel"
+            :applied-tokens="appliedTokens"
             @activate="activate(idx)"
             @deactivate="deactivate(token)"
             @destroy="destroyToken(idx, $event)"