@gitlab/ui 123.11.0 → 123.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "123.11.0",
3
+ "version": "123.11.1",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -101,7 +101,7 @@
101
101
  "@babel/preset-react": "^7.27.1",
102
102
  "@cypress/grep": "^4.1.1",
103
103
  "@gitlab/fonts": "^1.3.1",
104
- "@gitlab/svgs": "3.148.0",
104
+ "@gitlab/svgs": "*",
105
105
  "@jest/test-sequencer": "30.2.0",
106
106
  "@rollup/plugin-commonjs": "^28.0.6",
107
107
  "@rollup/plugin-node-resolve": "^16.0.3",
@@ -137,7 +137,7 @@
137
137
  "cypress-real-events": "^1.15.0",
138
138
  "dompurify": "^3.1.2",
139
139
  "emoji-regex": "^10.6.0",
140
- "esbuild": "^0.25.10",
140
+ "esbuild": "^0.25.11",
141
141
  "gitlab-api-async-iterator": "^1.3.1",
142
142
  "glob": "11.0.3",
143
143
  "globby": "^14.1.0",
@@ -169,7 +169,7 @@
169
169
  "start-server-and-test": "^2.1.2",
170
170
  "storybook": "^7.6.20",
171
171
  "storybook-dark-mode": "4.0.2",
172
- "style-dictionary": "^5.1.0",
172
+ "style-dictionary": "^5.1.1",
173
173
  "style-loader": "^4",
174
174
  "tailwindcss": "3.4.18",
175
175
  "vue": "2.7.16",
@@ -67,6 +67,7 @@ export default {
67
67
  return {
68
68
  fieldDirtyStatuses: {},
69
69
  fieldValidations: {},
70
+ fieldIds: {},
70
71
  };
71
72
  },
72
73
  computed: {
@@ -98,7 +99,7 @@ export default {
98
99
  },
99
100
  fieldsToRender() {
100
101
  return mapValues(this.fields, (field, fieldName) => {
101
- const id = uniqueId('gl-form-field-');
102
+ const id = this.memoizeAndReturnFieldId(field, fieldName);
102
103
 
103
104
  const inputSlotName = `input(${fieldName})`;
104
105
  const groupPassthroughSlotName = `group(${fieldName})-`;
@@ -173,6 +174,18 @@ export default {
173
174
 
174
175
  return val;
175
176
  },
177
+ memoizeAndReturnFieldId(field, fieldName) {
178
+ const memoizedId = this.fieldIds[fieldName];
179
+
180
+ if (memoizedId) {
181
+ return memoizedId;
182
+ }
183
+
184
+ const id = field.id || uniqueId('gl-form-field-');
185
+ this.fieldIds[fieldName] = id;
186
+
187
+ return id;
188
+ },
176
189
  onFieldValidationUpdate(fieldName, invalidFeedback) {
177
190
  this.fieldValidations = setObjectProperty(this.fieldValidations, fieldName, invalidFeedback);
178
191
 
@@ -221,8 +234,7 @@ export default {
221
234
 
222
235
  <template>
223
236
  <div>
224
- <template v-for="(field, fieldName) in fieldsToRender">
225
- <!-- eslint-disable-next-line vue/valid-v-for -->
237
+ <div v-for="(field, fieldName) in fieldsToRender" :key="field.id">
226
238
  <gl-form-group
227
239
  v-bind="field.groupAttrs"
228
240
  :label="field.label"
@@ -258,6 +270,6 @@ export default {
258
270
  </gl-form-group>
259
271
  <!-- @slot Can be used to add content the form group of a field. The name of the slot is `after(<fieldName>)`.-->
260
272
  <slot :name="field.afterSlotName"></slot>
261
- </template>
273
+ </div>
262
274
  </div>
263
275
  </template>