@gitlab/ui 65.0.1 → 65.1.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [65.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.1.0...v65.1.1) (2023-08-10)
+
+
+### Bug Fixes
+
+* **GlCollpasibleListbox:** correctly handle Home and End ([596127d](https://gitlab.com/gitlab-org/gitlab-ui/commit/596127d79c05f190746109ec9776ee7460672237))
+
+# [65.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.0.1...v65.1.0) (2023-08-09)
+
+
+### Features
+
+* **GlFormFields:** Add validator for emojis ([7f5b9aa](https://gitlab.com/gitlab-org/gitlab-ui/commit/7f5b9aa195b3a62a83b5b395aec2e49d08b87bcb))
+
 ## [65.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.0.0...v65.0.1) (2023-08-05)
 
 

package/dist/components/base/form/form_fields/validators.js

@@ -1,3 +1,7 @@
+import emojiRegex from 'emoji-regex';
+
+const EMOJI_REGEX = emojiRegex();
+
 // This contains core validating behavior and **should not** contain
 // domain-specific validations.
 //
@@ -11,6 +15,34 @@
 // export const projectPathIsUnique = ...
 // ```
 const factory = (failMessage, isValid) => val => !isValid(val) ? failMessage : '';
+
+/**
+ * Validator function to check if a string is present and non-empty.
+ *
+ * Returns an empty string if the input contains a valid string.
+ *
+ * Returns `failMessage` if the input string is empty, null, or undefined.
+ * @param {string} failMessage - The error message to be returned when validation fails.
+ * @returns {Function} A validation function that returns either `failMessage` or empty string.
+ */
 const required = failMessage => factory(failMessage, val => val !== '' && val !== null && val !== undefined);
 
-export { factory, required };
+/**
+ * Validator function to check if a string contains any emojis.
+ *
+ * Returns an empty string if the input is empty, null, or undefined, or if no emoji is present.
+ *
+ * Returns `failMessage` if the input string contains at least one emoji.
+ * @param {string} failMessage - The error message to be returned when validation fails.
+ * @returns {Function} A validation function that returns either `failMessage` or empty string.
+ */
+const noEmojis = failMessage => factory(failMessage, val => {
+  var _val$match$length, _val$match;
+  if (!val || typeof val !== 'string') {
+    return true;
+  }
+  const resultsLength = (_val$match$length = (_val$match = val.match(EMOJI_REGEX)) === null || _val$match === void 0 ? void 0 : _val$match.length) !== null && _val$match$length !== void 0 ? _val$match$length : 0;
+  return resultsLength < 1;
+});
+
+export { factory, noEmojis, required };

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js

@@ -34,7 +34,6 @@ var script = {
           href: item.href,
           ...item.extraAttrs
         },
-        wrapperClass: item.wrapperClass,
         listeners: {
           click: this.action
         }
@@ -51,8 +50,7 @@ var script = {
             item === null || item === void 0 ? void 0 : (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(undefined, item);
             this.action();
           }
-        },
-        wrapperClass: item === null || item === void 0 ? void 0 : item.wrapperClass
+        }
       };
     },
     listIndex() {
@@ -63,6 +61,10 @@ var script = {
       var _this$item3, _this$item3$extraAttr;
       return (_this$item3 = this.item) !== null && _this$item3 !== void 0 && (_this$item3$extraAttr = _this$item3.extraAttrs) !== null && _this$item3$extraAttr !== void 0 && _this$item3$extraAttr.disabled ? null : -1;
     },
+    wrapperClass() {
+      var _this$item$wrapperCla, _this$item4;
+      return (_this$item$wrapperCla = (_this$item4 = this.item) === null || _this$item4 === void 0 ? void 0 : _this$item4.wrapperClass) !== null && _this$item$wrapperCla !== void 0 ? _this$item$wrapperCla : '';
+    },
     wrapperListeners() {
       const listeners = {
         keydown: this.onKeydown
@@ -105,7 +107,7 @@ var 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('li',_vm._g({class:[_vm.$options.ITEM_CLASS, _vm.itemComponent.wrapperClass],attrs:{"tabindex":_vm.listIndex,"data-testid":"disclosure-dropdown-item"}},_vm.wrapperListeners),[_vm._t("default",function(){return [_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":_vm.componentIndex}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("list-item",function(){return [_vm._v("\n          "+_vm._s(_vm.item.text)+"\n        ")]})],2)])]})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',_vm._g({class:[_vm.$options.ITEM_CLASS, _vm.wrapperClass],attrs:{"tabindex":_vm.listIndex,"data-testid":"disclosure-dropdown-item"}},_vm.wrapperListeners),[_vm._t("default",function(){return [_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":_vm.componentIndex}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("list-item",function(){return [_vm._v("\n          "+_vm._s(_vm.item.text)+"\n        ")]})],2)])]})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -545,8 +545,14 @@ var script = {
       let stop = true;
       const isSearchInput = target.matches(SEARCH_INPUT_SELECTOR);
       if (code === HOME) {
+        if (isSearchInput) {
+          return;
+        }
         this.focusItem(0, elements);
       } else if (code === END) {
+        if (isSearchInput) {
+          return;
+        }
         this.focusItem(elements.length - 1, elements);
       } else if (code === ARROW_UP) {
         if (isSearchInput) {

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 05 Aug 2023 22:20:46 GMT
+ * Generated on Thu, 10 Aug 2023 14:55:51 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 05 Aug 2023 22:20:46 GMT
+ * Generated on Thu, 10 Aug 2023 14:55:51 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 05 Aug 2023 22:20:46 GMT
+ * Generated on Thu, 10 Aug 2023 14:55:51 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 05 Aug 2023 22:20:46 GMT
+ * Generated on Thu, 10 Aug 2023 14:55:51 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Sat, 05 Aug 2023 22:20:46 GMT
+// Generated on Thu, 10 Aug 2023 14:55:51 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Sat, 05 Aug 2023 22:20:46 GMT
+// Generated on Thu, 10 Aug 2023 14:55:51 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "65.0.1",
+  "version": "65.1.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,7 +91,7 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.58.0",
+    "@gitlab/svgs": "3.59.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -118,7 +118,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.17.2",
+    "cypress": "12.17.3",
     "dompurify": "^2.4.7",
     "emoji-regex": "^10.0.0",
     "eslint": "8.46.0",

package/src/components/base/form/form_fields/validators.js

@@ -1,3 +1,7 @@
+import emojiRegex from 'emoji-regex';
+
+const EMOJI_REGEX = emojiRegex();
+
 // This contains core validating behavior and **should not** contain
 // domain-specific validations.
 //
@@ -12,5 +16,34 @@
 // ```
 export const factory = (failMessage, isValid) => (val) => !isValid(val) ? failMessage : '';
 
+/**
+ * Validator function to check if a string is present and non-empty.
+ *
+ * Returns an empty string if the input contains a valid string.
+ *
+ * Returns `failMessage` if the input string is empty, null, or undefined.
+ * @param {string} failMessage - The error message to be returned when validation fails.
+ * @returns {Function} A validation function that returns either `failMessage` or empty string.
+ */
 export const required = (failMessage) =>
   factory(failMessage, (val) => val !== '' && val !== null && val !== undefined);
+
+/**
+ * Validator function to check if a string contains any emojis.
+ *
+ * Returns an empty string if the input is empty, null, or undefined, or if no emoji is present.
+ *
+ * Returns `failMessage` if the input string contains at least one emoji.
+ * @param {string} failMessage - The error message to be returned when validation fails.
+ * @returns {Function} A validation function that returns either `failMessage` or empty string.
+ */
+export const noEmojis = (failMessage) =>
+  factory(failMessage, (val) => {
+    if (!val || typeof val !== 'string') {
+      return true;
+    }
+
+    const resultsLength = val.match(EMOJI_REGEX)?.length ?? 0;
+
+    return resultsLength < 1;
+  });

package/src/components/base/form/form_fields/validators.spec.js

@@ -1,4 +1,4 @@
-import { required } from './validators';
+import { noEmojis, required } from './validators';
 
 const TEST_FAIL_MESSAGE = 'Yo test failed!';
 
@@ -26,4 +26,31 @@ describe('components/base/form/form_fields/validators', () => {
       expect(validator(input)).toBe(output);
     });
   });
+
+  describe('noEmojis', () => {
+    let validator;
+
+    beforeEach(() => {
+      validator = noEmojis(TEST_FAIL_MESSAGE);
+    });
+
+    it.each`
+      input        | output
+      ${'123🐱'}   | ${TEST_FAIL_MESSAGE}
+      ${'0 🍩'}    | ${TEST_FAIL_MESSAGE}
+      ${'🐟'}      | ${TEST_FAIL_MESSAGE}
+      ${''}        | ${''}
+      ${null}      | ${''}
+      ${undefined} | ${''}
+      ${'123'}     | ${''}
+      ${'0'}       | ${''}
+      ${{}}        | ${''}
+      ${0}         | ${''}
+      ${1}         | ${''}
+      ${true}      | ${''}
+      ${false}     | ${''}
+    `('with $input, returns $output', ({ input, output }) => {
+      expect(validator(input)).toBe(output);
+    });
+  });
 });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -34,7 +34,6 @@ export default {
             href: item.href,
             ...item.extraAttrs,
           },
-          wrapperClass: item.wrapperClass,
           listeners: {
             click: this.action,
           },
@@ -52,7 +51,6 @@ export default {
             this.action();
           },
         },
-        wrapperClass: item?.wrapperClass,
       };
     },
     listIndex() {
@@ -61,6 +59,9 @@ export default {
     componentIndex() {
       return this.item?.extraAttrs?.disabled ? null : -1;
     },
+    wrapperClass() {
+      return this.item?.wrapperClass ?? '';
+    },
     wrapperListeners() {
       const listeners = {
         keydown: this.onKeydown,
@@ -100,7 +101,7 @@ export default {
 <template>
   <li
     :tabindex="listIndex"
-    :class="[$options.ITEM_CLASS, itemComponent.wrapperClass]"
+    :class="[$options.ITEM_CLASS, wrapperClass]"
     data-testid="disclosure-dropdown-item"
     v-on="wrapperListeners"
   >

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

@@ -330,6 +330,14 @@ describe('GlCollapsibleListbox', () => {
         expect(searchboxInput.element).toHaveFocus();
       });
 
+      it('should not move focus away from the input on `HOME` and `END`', async () => {
+        expect(searchboxInput.element).toHaveFocus();
+        await searchboxInput.trigger('keydown', { code: HOME });
+        expect(searchboxInput.element).toHaveFocus();
+        await searchboxInput.trigger('keydown', { code: END });
+        expect(searchboxInput.element).toHaveFocus();
+      });
+
       describe('pressing Enter on the input', () => {
         const keydownSpy = jest.fn();
 

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

@@ -565,8 +565,14 @@ export default {
       const isSearchInput = target.matches(SEARCH_INPUT_SELECTOR);
 
       if (code === HOME) {
+        if (isSearchInput) {
+          return;
+        }
         this.focusItem(0, elements);
       } else if (code === END) {
+        if (isSearchInput) {
+          return;
+        }
         this.focusItem(elements.length - 1, elements);
       } else if (code === ARROW_UP) {
         if (isSearchInput) {