@rjsf/semantic-ui 5.1.0 → 5.2.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.
@@ -1,12 +1,11 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('semantic-ui-react'), require('react'), require('@rjsf/utils'), require('nanoid'), require('lodash-es/map')) :
3
- typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'semantic-ui-react', 'react', '@rjsf/utils', 'nanoid', 'lodash-es/map'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/semantic-ui"] = {}, global.core, global.semanticUiReact, global.React, global.utils, global.nanoid, global.map));
5
- })(this, (function (exports, core, semanticUiReact, React, utils, nanoid, map) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('semantic-ui-react'), require('react/jsx-runtime'), require('@rjsf/utils'), require('nanoid'), require('react'), require('lodash-es/map')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'semantic-ui-react', 'react/jsx-runtime', '@rjsf/utils', 'nanoid', 'react', 'lodash-es/map'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/semantic-ui"] = {}, global.core, global.semanticUiReact, global.jsxRuntime, global.utils, global.nanoid, global.React, global.map));
5
+ })(this, (function (exports, core, semanticUiReact, jsxRuntime, utils, nanoid, react, map) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
9
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
9
  var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
11
10
 
12
11
  function _extends() {
@@ -40,16 +39,19 @@
40
39
  /** The `AddButton` renders a button that represent the `Add` action on a form
41
40
  */
42
41
  function AddButton(_ref) {
43
- var color = _ref.color,
42
+ var registry = _ref.registry,
43
+ color = _ref.color,
44
44
  props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
45
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button, _extends({
46
- title: "Add Item",
45
+ var translateString = registry.translateString;
46
+ return jsxRuntime.jsx(semanticUiReact.Button, _extends({
47
+ title: translateString(utils.TranslatableString.AddItemButton),
47
48
  color: color
48
49
  }, props, {
49
50
  icon: true,
50
- size: "tiny"
51
- }), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Icon, {
52
- name: "plus"
51
+ size: 'tiny',
52
+ children: jsxRuntime.jsx(semanticUiReact.Icon, {
53
+ name: 'plus'
54
+ })
53
55
  }));
54
56
  }
55
57
 
@@ -103,8 +105,8 @@
103
105
  options = _ref2$options === void 0 ? {} : _ref2$options,
104
106
  _ref2$defaultProps = _ref2.defaultProps,
105
107
  defaultProps = _ref2$defaultProps === void 0 ? {
106
- size: "small",
107
- pointing: "above"
108
+ size: 'small',
109
+ pointing: 'above'
108
110
  } : _ref2$defaultProps;
109
111
  var formContextProps = formContext.semantic && formContext.semantic.errorOptions;
110
112
  var semanticOptions = utils.getUiOptions(uiSchema).semantic;
@@ -134,7 +136,7 @@
134
136
  // returning them as a string
135
137
  return [].concat(new Set(classList.filter(function (cn) {
136
138
  return !omit.includes(cn);
137
- }))).join(" ");
139
+ }))).join(' ');
138
140
  }
139
141
  /**
140
142
  *
@@ -147,14 +149,14 @@
147
149
  function MaybeWrap(_ref3) {
148
150
  var wrap = _ref3.wrap,
149
151
  _ref3$component = _ref3.component,
150
- Component = _ref3$component === void 0 ? "div" : _ref3$component,
152
+ Component = _ref3$component === void 0 ? 'div' : _ref3$component,
151
153
  props = _objectWithoutPropertiesLoose(_ref3, _excluded$3);
152
- return wrap ? /*#__PURE__*/React__default["default"].createElement(Component, _extends({}, props)) : props.children;
154
+ return wrap ? jsxRuntime.jsx(Component, _extends({}, props)) : props.children;
153
155
  }
154
156
 
155
157
  var gridStyle = function gridStyle(vertical) {
156
158
  return {
157
- display: "grid",
159
+ display: 'grid',
158
160
  gridTemplateColumns: "1fr " + (vertical ? 65 : 110) + "px"
159
161
  };
160
162
  };
@@ -186,40 +188,47 @@
186
188
  horizontalButtons = _uiOptions$semantic$h === void 0 ? false : _uiOptions$semantic$h,
187
189
  _uiOptions$semantic$w = _uiOptions$semantic.wrapItem,
188
190
  wrapItem = _uiOptions$semantic$w === void 0 ? false : _uiOptions$semantic$w;
189
- return /*#__PURE__*/React__default["default"].createElement("div", {
190
- className: "array-item"
191
- }, /*#__PURE__*/React__default["default"].createElement(MaybeWrap, {
192
- wrap: wrapItem,
193
- component: semanticUiReact.Segment
194
- }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid, {
195
- style: index !== 0 ? _extends({}, gridStyle(!horizontalButtons), {
196
- alignItems: "center"
197
- }) : gridStyle(!horizontalButtons)
198
- }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
199
- width: 16,
200
- verticalAlign: "middle"
201
- }, children), hasToolbar && /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, null, (hasMoveUp || hasMoveDown || hasRemove) && /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button.Group, {
202
- size: "mini",
203
- vertical: !horizontalButtons
204
- }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveUpButton, {
205
- className: "array-item-move-up",
206
- disabled: disabled || readonly || !hasMoveUp,
207
- onClick: onReorderClick(index, index - 1),
208
- uiSchema: uiSchema,
209
- registry: registry
210
- }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
211
- className: "array-item-move-down",
212
- disabled: disabled || readonly || !hasMoveDown,
213
- onClick: onReorderClick(index, index + 1),
214
- uiSchema: uiSchema,
215
- registry: registry
216
- }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
217
- className: "array-item-remove",
218
- disabled: disabled || readonly,
219
- onClick: onDropIndexClick(index),
220
- uiSchema: uiSchema,
221
- registry: registry
222
- }))))));
191
+ return jsxRuntime.jsx("div", {
192
+ className: 'array-item',
193
+ children: jsxRuntime.jsx(MaybeWrap, {
194
+ wrap: wrapItem,
195
+ component: semanticUiReact.Segment,
196
+ children: jsxRuntime.jsxs(semanticUiReact.Grid, {
197
+ style: index !== 0 ? _extends({}, gridStyle(!horizontalButtons), {
198
+ alignItems: 'center'
199
+ }) : gridStyle(!horizontalButtons),
200
+ children: [jsxRuntime.jsx(semanticUiReact.Grid.Column, {
201
+ width: 16,
202
+ verticalAlign: 'middle',
203
+ children: children
204
+ }), hasToolbar && jsxRuntime.jsx(semanticUiReact.Grid.Column, {
205
+ children: (hasMoveUp || hasMoveDown || hasRemove) && jsxRuntime.jsxs(semanticUiReact.Button.Group, {
206
+ size: 'mini',
207
+ vertical: !horizontalButtons,
208
+ children: [(hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveUpButton, {
209
+ className: 'array-item-move-up',
210
+ disabled: disabled || readonly || !hasMoveUp,
211
+ onClick: onReorderClick(index, index - 1),
212
+ uiSchema: uiSchema,
213
+ registry: registry
214
+ }), (hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveDownButton, {
215
+ className: 'array-item-move-down',
216
+ disabled: disabled || readonly || !hasMoveDown,
217
+ onClick: onReorderClick(index, index + 1),
218
+ uiSchema: uiSchema,
219
+ registry: registry
220
+ }), hasRemove && jsxRuntime.jsx(RemoveButton, {
221
+ className: 'array-item-remove',
222
+ disabled: disabled || readonly,
223
+ onClick: onDropIndexClick(index),
224
+ uiSchema: uiSchema,
225
+ registry: registry
226
+ })]
227
+ })
228
+ })]
229
+ })
230
+ })
231
+ });
223
232
  }
224
233
 
225
234
  var _excluded$2 = ["key", "uiSchema"];
@@ -256,57 +265,58 @@
256
265
  wrapItem: wrapItem
257
266
  };
258
267
  var uiOptions = utils.getUiOptions(uiSchema);
259
- var ArrayFieldDescriptionTemplate = utils.getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
260
- var ArrayFieldItemTemplate = utils.getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
261
- var ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
268
+ var ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
269
+ var ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
270
+ var ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
262
271
  // Button templates are not overridden in the uiSchema
263
272
  var AddButton = registry.templates.ButtonTemplates.AddButton;
264
- return /*#__PURE__*/React__default["default"].createElement("div", {
265
- className: cleanClassNames([className, utils.isFixedItems(schema) ? "" : "sortable-form-fields"])
266
- }, /*#__PURE__*/React__default["default"].createElement(ArrayFieldTitleTemplate, {
267
- idSchema: idSchema,
268
- title: uiOptions.title || title,
269
- schema: schema,
270
- uiSchema: uiSchema,
271
- required: required,
272
- registry: registry
273
- }), /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
274
- idSchema: idSchema,
275
- description: uiOptions.description || schema.description,
276
- schema: schema,
277
- uiSchema: uiSchema,
278
- registry: registry
279
- }), /*#__PURE__*/React__default["default"].createElement("div", {
280
- key: "array-item-list-" + idSchema.$id
281
- }, /*#__PURE__*/React__default["default"].createElement("div", {
282
- className: "row array-item-list"
283
- }, items && items.map(function (_ref) {
284
- var _extends2;
285
- var key = _ref.key,
286
- _ref$uiSchema = _ref.uiSchema,
287
- itemUiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema,
288
- props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
289
- // Merge in the semantic props from the ArrayFieldTemplate into each of the items
290
- var mergedUiSchema = _extends({}, itemUiSchema, (_extends2 = {}, _extends2[utils.UI_OPTIONS_KEY] = _extends({}, itemUiSchema[utils.UI_OPTIONS_KEY], {
291
- semantic: semantic
292
- }), _extends2));
293
- return /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
294
- key: key
295
- }, props, {
296
- uiSchema: mergedUiSchema
297
- }));
298
- })), canAdd && /*#__PURE__*/React__default["default"].createElement("div", {
299
- style: {
300
- marginTop: "1rem",
301
- position: "relative",
302
- textAlign: "right"
303
- }
304
- }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
305
- onClick: onAddClick,
306
- disabled: disabled || readonly,
307
- uiSchema: uiSchema,
308
- registry: registry
309
- }))));
273
+ return jsxRuntime.jsxs("div", {
274
+ className: cleanClassNames([className, utils.isFixedItems(schema) ? '' : 'sortable-form-fields']),
275
+ children: [jsxRuntime.jsx(ArrayFieldTitleTemplate, {
276
+ idSchema: idSchema,
277
+ title: uiOptions.title || title,
278
+ schema: schema,
279
+ uiSchema: uiSchema,
280
+ required: required,
281
+ registry: registry
282
+ }), jsxRuntime.jsx(ArrayFieldDescriptionTemplate, {
283
+ idSchema: idSchema,
284
+ description: uiOptions.description || schema.description,
285
+ schema: schema,
286
+ uiSchema: uiSchema,
287
+ registry: registry
288
+ }), jsxRuntime.jsxs("div", {
289
+ children: [jsxRuntime.jsx("div", {
290
+ className: 'row array-item-list',
291
+ children: items && items.map(function (_ref) {
292
+ var _extends2;
293
+ var key = _ref.key,
294
+ _ref$uiSchema = _ref.uiSchema,
295
+ itemUiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema,
296
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
297
+ // Merge in the semantic props from the ArrayFieldTemplate into each of the items
298
+ var mergedUiSchema = _extends({}, itemUiSchema, (_extends2 = {}, _extends2[utils.UI_OPTIONS_KEY] = _extends({}, itemUiSchema[utils.UI_OPTIONS_KEY], {
299
+ semantic: semantic
300
+ }), _extends2));
301
+ return jsxRuntime.jsx(ArrayFieldItemTemplate, _extends({}, props, {
302
+ uiSchema: mergedUiSchema
303
+ }), key);
304
+ })
305
+ }), canAdd && jsxRuntime.jsx("div", {
306
+ style: {
307
+ marginTop: '1rem',
308
+ position: 'relative',
309
+ textAlign: 'right'
310
+ },
311
+ children: jsxRuntime.jsx(AddButton, {
312
+ onClick: onAddClick,
313
+ disabled: disabled || readonly,
314
+ uiSchema: uiSchema,
315
+ registry: registry
316
+ })
317
+ })]
318
+ }, "array-item-list-" + idSchema.$id)]
319
+ });
310
320
  }
311
321
 
312
322
  /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
@@ -324,6 +334,7 @@
324
334
  readonly = props.readonly,
325
335
  disabled = props.disabled,
326
336
  onChange = props.onChange,
337
+ onChangeOverride = props.onChangeOverride,
327
338
  onBlur = props.onBlur,
328
339
  onFocus = props.onFocus,
329
340
  autofocus = props.autofocus,
@@ -344,7 +355,7 @@
344
355
  var schemaUtils = registry.schemaUtils;
345
356
  var _onChange = function _onChange(_ref) {
346
357
  var value = _ref.target.value;
347
- return onChange(value === "" ? options.emptyValue : value);
358
+ return onChange(value === '' ? options.emptyValue : value);
348
359
  };
349
360
  var _onBlur = function _onBlur() {
350
361
  return onBlur && onBlur(id, value);
@@ -353,32 +364,33 @@
353
364
  return onFocus && onFocus(id, value);
354
365
  };
355
366
  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
356
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Input, _extends({
357
- key: id,
358
- id: id,
359
- name: id,
360
- placeholder: placeholder
361
- }, inputProps, {
362
- label: displayLabel ? label || schema.title : false,
363
- required: required,
364
- autoFocus: autofocus,
365
- disabled: disabled || readonly,
366
- list: schema.examples ? utils.examplesId(id) : undefined
367
- }, semanticProps, {
368
- value: value || value === 0 ? value : "",
369
- error: rawErrors.length > 0,
370
- onChange: _onChange,
371
- onBlur: _onBlur,
372
- onFocus: _onFocus,
373
- "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
374
- })), Array.isArray(schema.examples) && /*#__PURE__*/React__default["default"].createElement("datalist", {
375
- id: utils.examplesId(id)
376
- }, schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
377
- return /*#__PURE__*/React__default["default"].createElement("option", {
378
- key: example,
379
- value: example
380
- });
381
- })));
367
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
368
+ children: [jsxRuntime.jsx(semanticUiReact.Form.Input, _extends({
369
+ id: id,
370
+ name: id,
371
+ placeholder: placeholder
372
+ }, inputProps, {
373
+ label: displayLabel ? label || schema.title : false,
374
+ required: required,
375
+ autoFocus: autofocus,
376
+ disabled: disabled || readonly,
377
+ list: schema.examples ? utils.examplesId(id) : undefined
378
+ }, semanticProps, {
379
+ value: value || value === 0 ? value : '',
380
+ error: rawErrors.length > 0,
381
+ onChange: onChangeOverride || _onChange,
382
+ onBlur: _onBlur,
383
+ onFocus: _onFocus,
384
+ "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
385
+ }), id), Array.isArray(schema.examples) && jsxRuntime.jsx("datalist", {
386
+ id: utils.examplesId(id),
387
+ children: schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
388
+ return jsxRuntime.jsx("option", {
389
+ value: example
390
+ }, example);
391
+ })
392
+ })]
393
+ });
382
394
  }
383
395
 
384
396
  /** The `DescriptionField` is the template to use to render the description of a field
@@ -391,10 +403,11 @@
391
403
  if (!description) {
392
404
  return null;
393
405
  }
394
- return /*#__PURE__*/React__default["default"].createElement("p", {
406
+ return jsxRuntime.jsx("p", {
395
407
  id: id,
396
- className: "sui-description"
397
- }, description);
408
+ className: 'sui-description',
409
+ children: description
410
+ });
398
411
  }
399
412
 
400
413
  /** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
@@ -402,14 +415,21 @@
402
415
  * @param props - The `ErrorListProps` for this component
403
416
  */
404
417
  function ErrorList(_ref) {
405
- var errors = _ref.errors;
406
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message, {
407
- negative: true
408
- }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.Header, null, "Errors"), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.List, null, errors.map(function (error, index) {
409
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.Item, {
410
- key: "error-" + index
411
- }, error.stack);
412
- })));
418
+ var errors = _ref.errors,
419
+ registry = _ref.registry;
420
+ var translateString = registry.translateString;
421
+ return jsxRuntime.jsxs(semanticUiReact.Message, {
422
+ negative: true,
423
+ children: [jsxRuntime.jsx(semanticUiReact.Message.Header, {
424
+ children: translateString(utils.TranslatableString.ErrorsLabel)
425
+ }), jsxRuntime.jsx(semanticUiReact.Message.List, {
426
+ children: errors.map(function (error, index) {
427
+ return jsxRuntime.jsx(semanticUiReact.Message.Item, {
428
+ children: error.stack
429
+ }, "error-" + index);
430
+ })
431
+ })]
432
+ });
413
433
  }
414
434
 
415
435
  var _excluded$1 = ["icon", "iconType", "color", "className", "uiSchema", "registry"];
@@ -419,7 +439,7 @@
419
439
  color = props.color,
420
440
  className = props.className,
421
441
  otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
422
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button, _extends({
442
+ return jsxRuntime.jsx(semanticUiReact.Button, _extends({
423
443
  icon: icon,
424
444
  size: iconType,
425
445
  color: color,
@@ -427,31 +447,34 @@
427
447
  }, otherProps));
428
448
  }
429
449
  function MoveDownButton(props) {
430
- return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
431
- title: "Move down"
450
+ var translateString = props.registry.translateString;
451
+ return jsxRuntime.jsx(IconButton, _extends({
452
+ title: translateString(utils.TranslatableString.MoveDownButton)
432
453
  }, props, {
433
- icon: "angle down"
454
+ icon: 'angle down'
434
455
  }));
435
456
  }
436
457
  function MoveUpButton(props) {
437
- return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
438
- title: "Move up"
458
+ var translateString = props.registry.translateString;
459
+ return jsxRuntime.jsx(IconButton, _extends({
460
+ title: translateString(utils.TranslatableString.MoveUpButton)
439
461
  }, props, {
440
- icon: "angle up"
462
+ icon: 'angle up'
441
463
  }));
442
464
  }
443
465
  function RemoveButton(props) {
444
- return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
445
- title: "Remove"
466
+ var translateString = props.registry.translateString;
467
+ return jsxRuntime.jsx(IconButton, _extends({
468
+ title: translateString(utils.TranslatableString.RemoveButton)
446
469
  }, props, {
447
- icon: "trash"
470
+ icon: 'trash'
448
471
  }));
449
472
  }
450
473
 
451
474
  var DEFAULT_OPTIONS$1 = {
452
475
  options: {
453
- pointing: "above",
454
- size: "small"
476
+ pointing: 'above',
477
+ size: 'small'
455
478
  }
456
479
  };
457
480
  /** The `FieldErrorTemplate` component renders the errors local to the particular field
@@ -472,20 +495,22 @@
472
495
  var pointing = options.pointing,
473
496
  size = options.size;
474
497
  if (errors && errors.length > 0) {
475
- var id = idSchema.$id + "__error";
476
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Label, {
498
+ var id = utils.errorId(idSchema);
499
+ return jsxRuntime.jsx(semanticUiReact.Label, {
477
500
  id: id,
478
- color: "red",
479
- pointing: pointing || "above",
480
- size: size || "small",
481
- basic: true
482
- }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.List, {
483
- bulleted: true
484
- }, errors.map(function (error) {
485
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.List.Item, {
486
- key: nanoid.nanoid()
487
- }, error);
488
- })));
501
+ color: 'red',
502
+ pointing: pointing || 'above',
503
+ size: size || 'small',
504
+ basic: true,
505
+ children: jsxRuntime.jsx(semanticUiReact.List, {
506
+ bulleted: true,
507
+ children: errors.map(function (error) {
508
+ return jsxRuntime.jsx(semanticUiReact.List.Item, {
509
+ children: error
510
+ }, nanoid.nanoid());
511
+ })
512
+ })
513
+ });
489
514
  }
490
515
  return null;
491
516
  }
@@ -498,9 +523,9 @@
498
523
  var idSchema = props.idSchema,
499
524
  help = props.help;
500
525
  if (help) {
501
- var id = idSchema.$id + "__help";
502
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message, {
503
- size: "mini",
526
+ var id = utils.helpId(idSchema);
527
+ return jsxRuntime.jsx(semanticUiReact.Message, {
528
+ size: 'mini',
504
529
  info: true,
505
530
  id: id,
506
531
  content: help
@@ -534,16 +559,17 @@
534
559
  var wrapLabel = semanticProps.wrapLabel,
535
560
  wrapContent = semanticProps.wrapContent;
536
561
  var uiOptions = utils.getUiOptions(uiSchema);
537
- var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
538
- var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
562
+ var WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
563
+ var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
539
564
  if (hidden) {
540
- return /*#__PURE__*/React__default["default"].createElement("div", {
565
+ return jsxRuntime.jsx("div", {
541
566
  style: {
542
- display: "none"
543
- }
544
- }, children);
567
+ display: 'none'
568
+ },
569
+ children: children
570
+ });
545
571
  }
546
- return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, _extends({
572
+ return jsxRuntime.jsx(WrapIfAdditionalTemplate, _extends({
547
573
  classNames: classNames,
548
574
  style: style,
549
575
  id: id,
@@ -551,23 +577,27 @@
551
577
  registry: registry,
552
578
  schema: schema,
553
579
  uiSchema: uiSchema
554
- }, otherProps), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, {
555
- key: id,
556
- widths: "equal",
557
- grouped: true
558
- }, /*#__PURE__*/React__default["default"].createElement(MaybeWrap, {
559
- wrap: wrapContent,
560
- className: "sui-field-content"
561
- }, children, displayLabel && rawDescription && /*#__PURE__*/React__default["default"].createElement(MaybeWrap, {
562
- wrap: wrapLabel,
563
- className: "sui-field-label"
564
- }, rawDescription && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
565
- id: utils.descriptionId(id),
566
- description: rawDescription,
567
- schema: schema,
568
- uiSchema: uiSchema,
569
- registry: registry
570
- })), help, errors)));
580
+ }, otherProps, {
581
+ children: jsxRuntime.jsx(semanticUiReact.Form.Group, {
582
+ widths: 'equal',
583
+ grouped: true,
584
+ children: jsxRuntime.jsxs(MaybeWrap, {
585
+ wrap: wrapContent,
586
+ className: 'sui-field-content',
587
+ children: [children, displayLabel && rawDescription && jsxRuntime.jsx(MaybeWrap, {
588
+ wrap: wrapLabel,
589
+ className: 'sui-field-label',
590
+ children: rawDescription && jsxRuntime.jsx(DescriptionFieldTemplate, {
591
+ id: utils.descriptionId(id),
592
+ description: rawDescription,
593
+ schema: schema,
594
+ uiSchema: uiSchema,
595
+ registry: registry
596
+ })
597
+ }), help, errors]
598
+ })
599
+ }, id)
600
+ }));
571
601
  }
572
602
 
573
603
  /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
@@ -590,42 +620,48 @@
590
620
  idSchema = props.idSchema,
591
621
  registry = props.registry;
592
622
  var uiOptions = utils.getUiOptions(uiSchema);
593
- var TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
594
- var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
623
+ var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
624
+ var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
595
625
  // Button templates are not overridden in the uiSchema
596
626
  var AddButton = registry.templates.ButtonTemplates.AddButton;
597
627
  var fieldTitle = uiOptions.title || title;
598
628
  var fieldDescription = uiOptions.description || description;
599
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fieldTitle && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
600
- id: utils.titleId(idSchema),
601
- title: fieldTitle,
602
- required: required,
603
- schema: schema,
604
- uiSchema: uiSchema,
605
- registry: registry
606
- }), fieldDescription && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
607
- id: utils.descriptionId(idSchema),
608
- description: fieldDescription,
609
- schema: schema,
610
- uiSchema: uiSchema,
611
- registry: registry
612
- }), properties.map(function (prop) {
613
- return prop.content;
614
- }), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
615
- width: 16,
616
- verticalAlign: "middle"
617
- }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Row, null, /*#__PURE__*/React__default["default"].createElement("div", {
618
- style: {
619
- marginTop: "1rem",
620
- position: "relative",
621
- textAlign: "right"
622
- }
623
- }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
624
- onClick: onAddClick(schema),
625
- disabled: disabled || readonly,
626
- uiSchema: uiSchema,
627
- registry: registry
628
- })))));
629
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
630
+ children: [fieldTitle && jsxRuntime.jsx(TitleFieldTemplate, {
631
+ id: utils.titleId(idSchema),
632
+ title: fieldTitle,
633
+ required: required,
634
+ schema: schema,
635
+ uiSchema: uiSchema,
636
+ registry: registry
637
+ }), fieldDescription && jsxRuntime.jsx(DescriptionFieldTemplate, {
638
+ id: utils.descriptionId(idSchema),
639
+ description: fieldDescription,
640
+ schema: schema,
641
+ uiSchema: uiSchema,
642
+ registry: registry
643
+ }), properties.map(function (prop) {
644
+ return prop.content;
645
+ }), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(semanticUiReact.Grid.Column, {
646
+ width: 16,
647
+ verticalAlign: 'middle',
648
+ children: jsxRuntime.jsx(semanticUiReact.Grid.Row, {
649
+ children: jsxRuntime.jsx("div", {
650
+ style: {
651
+ marginTop: '1rem',
652
+ position: 'relative',
653
+ textAlign: 'right'
654
+ },
655
+ children: jsxRuntime.jsx(AddButton, {
656
+ onClick: onAddClick(schema),
657
+ disabled: disabled || readonly,
658
+ uiSchema: uiSchema,
659
+ registry: registry
660
+ })
661
+ })
662
+ })
663
+ })]
664
+ });
629
665
  }
630
666
 
631
667
  /** The `SubmitButton` renders a button that represent the `Submit` action on a form
@@ -640,10 +676,12 @@
640
676
  if (norender) {
641
677
  return null;
642
678
  }
643
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button, _extends({
644
- type: "submit",
679
+ return jsxRuntime.jsx(semanticUiReact.Button, _extends({
680
+ type: 'submit',
645
681
  primary: true
646
- }, submitButtonProps), submitText);
682
+ }, submitButtonProps, {
683
+ children: submitText
684
+ }));
647
685
  }
648
686
 
649
687
  var DEFAULT_OPTIONS = {
@@ -665,11 +703,12 @@
665
703
  if (!title) {
666
704
  return null;
667
705
  }
668
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Header, _extends({
706
+ return jsxRuntime.jsx(semanticUiReact.Header, _extends({
669
707
  id: id
670
708
  }, semanticProps, {
671
- as: "h5"
672
- }), title);
709
+ as: 'h5',
710
+ children: title
711
+ }));
673
712
  }
674
713
 
675
714
  /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
@@ -691,60 +730,71 @@
691
730
  schema = props.schema,
692
731
  uiSchema = props.uiSchema,
693
732
  registry = props.registry;
733
+ var templates = registry.templates,
734
+ translateString = registry.translateString;
694
735
  // Button templates are not overridden in the uiSchema
695
- var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
736
+ var RemoveButton = templates.ButtonTemplates.RemoveButton;
737
+ var keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
696
738
  var _registry$formContext = registry.formContext,
697
739
  _registry$formContext2 = _registry$formContext.readonlyAsDisabled,
698
740
  readonlyAsDisabled = _registry$formContext2 === void 0 ? true : _registry$formContext2,
699
741
  wrapperStyle = _registry$formContext.wrapperStyle;
700
- var keyLabel = label + " Key"; // i18n ?
701
742
  var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
702
743
  if (!additional) {
703
- return /*#__PURE__*/React__default["default"].createElement("div", {
744
+ return jsxRuntime.jsx("div", {
704
745
  className: classNames,
705
- style: style
706
- }, children);
746
+ style: style,
747
+ children: children
748
+ });
707
749
  }
708
750
  var handleBlur = function handleBlur(_ref) {
709
751
  var target = _ref.target;
710
752
  return onKeyChange(target.value);
711
753
  };
712
- return /*#__PURE__*/React__default["default"].createElement("div", {
754
+ return jsxRuntime.jsx("div", {
713
755
  className: classNames,
714
756
  style: style,
715
- key: id + "-key"
716
- }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid, {
717
- columns: "equal"
718
- }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Row, null, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
719
- className: "form-additional"
720
- }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, {
721
- widths: "equal",
722
- grouped: true
723
- }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Input, {
724
- className: "form-group",
725
- hasFeedback: true,
726
- fluid: true,
727
- htmlFor: "" + id,
728
- label: keyLabel,
729
- required: required,
730
- defaultValue: label,
731
- disabled: disabled || readonlyAsDisabled && readonly,
732
- id: "" + id,
733
- name: "" + id,
734
- onBlur: !readonly ? handleBlur : undefined,
735
- style: wrapperStyle,
736
- type: "text"
737
- }))), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
738
- className: "form-additional",
739
- verticalAlign: "middle"
740
- }, children), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, null, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
741
- iconType: "mini",
742
- className: "array-item-remove",
743
- disabled: disabled || readonly,
744
- onClick: onDropPropertyClick(label),
745
- uiSchema: uiSchema,
746
- registry: registry
747
- })))));
757
+ children: jsxRuntime.jsx(semanticUiReact.Grid, {
758
+ columns: 'equal',
759
+ children: jsxRuntime.jsxs(semanticUiReact.Grid.Row, {
760
+ children: [jsxRuntime.jsx(semanticUiReact.Grid.Column, {
761
+ className: 'form-additional',
762
+ children: jsxRuntime.jsx(semanticUiReact.Form.Group, {
763
+ widths: 'equal',
764
+ grouped: true,
765
+ children: jsxRuntime.jsx(semanticUiReact.Form.Input, {
766
+ className: 'form-group',
767
+ hasFeedback: true,
768
+ fluid: true,
769
+ htmlFor: "" + id,
770
+ label: keyLabel,
771
+ required: required,
772
+ defaultValue: label,
773
+ disabled: disabled || readonlyAsDisabled && readonly,
774
+ id: "" + id,
775
+ name: "" + id,
776
+ onBlur: !readonly ? handleBlur : undefined,
777
+ style: wrapperStyle,
778
+ type: 'text'
779
+ })
780
+ })
781
+ }), jsxRuntime.jsx(semanticUiReact.Grid.Column, {
782
+ className: 'form-additional',
783
+ verticalAlign: 'middle',
784
+ children: children
785
+ }), jsxRuntime.jsx(semanticUiReact.Grid.Column, {
786
+ children: jsxRuntime.jsx(RemoveButton, {
787
+ iconType: 'mini',
788
+ className: 'array-item-remove',
789
+ disabled: disabled || readonly,
790
+ onClick: onDropPropertyClick(label),
791
+ uiSchema: uiSchema,
792
+ registry: registry
793
+ })
794
+ })]
795
+ })
796
+ })
797
+ }, id + "-key");
748
798
  }
749
799
 
750
800
  function generateTemplates() {
@@ -813,20 +863,20 @@
813
863
  var _onFocus = function _onFocus() {
814
864
  return onFocus && onFocus(id, value);
815
865
  };
816
- var checked = value == "true" || value == true;
817
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Checkbox, _extends({
866
+ var checked = value == 'true' || value == true;
867
+ return jsxRuntime.jsx(semanticUiReact.Form.Checkbox, _extends({
818
868
  id: id,
819
869
  name: id,
820
870
  disabled: disabled || readonly,
821
871
  autoFocus: autofocus
822
872
  }, semanticProps, {
823
- checked: typeof value === "undefined" ? false : checked,
873
+ checked: typeof value === 'undefined' ? false : checked,
824
874
  error: rawErrors.length > 0,
825
875
  onChange: _onChange,
826
876
  onBlur: _onBlur,
827
877
  onFocus: _onFocus,
828
878
  required: required,
829
- label: label || "",
879
+ label: label || '',
830
880
  "aria-describedby": utils.ariaDescribedByIds(id)
831
881
  }));
832
882
  }
@@ -852,7 +902,7 @@
852
902
  _props$rawErrors = props.rawErrors,
853
903
  rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
854
904
  registry = props.registry;
855
- var TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
905
+ var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
856
906
  var enumOptions = options.enumOptions,
857
907
  enumDisabled = options.enumDisabled,
858
908
  inline = options.inline;
@@ -888,34 +938,37 @@
888
938
  } : {
889
939
  grouped: true
890
940
  };
891
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, title && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
892
- id: utils.titleId(id),
893
- title: title,
894
- schema: schema,
895
- uiSchema: uiSchema,
896
- registry: registry
897
- }), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, _extends({
898
- id: id,
899
- name: id
900
- }, inlineOption), Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
901
- var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
902
- var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
903
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Checkbox, _extends({
904
- id: utils.optionId(id, index),
905
- name: id,
906
- key: index,
907
- label: option.label
908
- }, semanticProps, {
909
- checked: checked,
910
- error: rawErrors.length > 0,
911
- disabled: disabled || itemDisabled || readonly,
912
- autoFocus: autofocus && index === 0,
913
- onChange: _onChange(index),
914
- onBlur: _onBlur,
915
- onFocus: _onFocus,
916
- "aria-describedby": utils.ariaDescribedByIds(id)
917
- }));
918
- })));
941
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
942
+ children: [title && jsxRuntime.jsx(TitleFieldTemplate, {
943
+ id: utils.titleId(id),
944
+ title: title,
945
+ schema: schema,
946
+ uiSchema: uiSchema,
947
+ registry: registry
948
+ }), jsxRuntime.jsx(semanticUiReact.Form.Group, _extends({
949
+ id: id,
950
+ name: id
951
+ }, inlineOption, {
952
+ children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
953
+ var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
954
+ var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
955
+ return jsxRuntime.jsx(semanticUiReact.Form.Checkbox, _extends({
956
+ id: utils.optionId(id, index),
957
+ name: id,
958
+ label: option.label
959
+ }, semanticProps, {
960
+ checked: checked,
961
+ error: rawErrors.length > 0,
962
+ disabled: disabled || itemDisabled || readonly,
963
+ autoFocus: autofocus && index === 0,
964
+ onChange: _onChange(index),
965
+ onBlur: _onBlur,
966
+ onFocus: _onFocus,
967
+ "aria-describedby": utils.ariaDescribedByIds(id)
968
+ }), index);
969
+ })
970
+ }))]
971
+ });
919
972
  }
920
973
 
921
974
  /** The `RadioWidget` is a widget for rendering a radio group.
@@ -960,26 +1013,28 @@
960
1013
  } : {
961
1014
  grouped: true
962
1015
  };
963
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, _extends({}, inlineOption), Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
964
- var checked = utils.enumOptionsIsSelected(option.value, value);
965
- var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
966
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Field, _extends({
967
- required: required,
968
- control: semanticUiReact.Radio,
969
- id: utils.optionId(id, index),
970
- name: id
971
- }, semanticProps, {
972
- onFocus: _onFocus,
973
- onBlur: _onBlur,
974
- onChange: _onChange,
975
- label: option.label,
976
- value: String(index),
977
- error: rawErrors.length > 0,
978
- key: index,
979
- checked: checked,
980
- disabled: disabled || itemDisabled || readonly,
981
- "aria-describedby": utils.ariaDescribedByIds(id)
982
- }));
1016
+ return jsxRuntime.jsx(semanticUiReact.Form.Group, _extends({}, inlineOption, {
1017
+ children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
1018
+ var checked = utils.enumOptionsIsSelected(option.value, value);
1019
+ var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
1020
+ return /*#__PURE__*/react.createElement(semanticUiReact.Form.Field, _extends({
1021
+ required: required,
1022
+ control: semanticUiReact.Radio,
1023
+ id: utils.optionId(id, index),
1024
+ name: id
1025
+ }, semanticProps, {
1026
+ onFocus: _onFocus,
1027
+ onBlur: _onBlur,
1028
+ onChange: _onChange,
1029
+ label: option.label,
1030
+ value: String(index),
1031
+ error: rawErrors.length > 0,
1032
+ key: index,
1033
+ checked: checked,
1034
+ disabled: disabled || itemDisabled || readonly,
1035
+ "aria-describedby": utils.ariaDescribedByIds(id)
1036
+ }));
1037
+ })
983
1038
  }));
984
1039
  }
985
1040
 
@@ -1014,7 +1069,7 @@
1014
1069
  // eslint-disable-next-line no-shadow
1015
1070
  var _onChange = function _onChange(_ref) {
1016
1071
  var value = _ref.target.value;
1017
- return onChange && onChange(value === "" ? options.emptyValue : value);
1072
+ return onChange && onChange(value === '' ? options.emptyValue : value);
1018
1073
  };
1019
1074
  var _onBlur = function _onBlur() {
1020
1075
  return onBlur && onBlur(id, value);
@@ -1022,21 +1077,24 @@
1022
1077
  var _onFocus = function _onFocus() {
1023
1078
  return onFocus && onFocus(id, value);
1024
1079
  };
1025
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Input, _extends({
1026
- id: id,
1027
- key: id,
1028
- name: id,
1029
- type: "range",
1030
- required: required,
1031
- disabled: disabled || readonly
1032
- }, utils.rangeSpec(schema), semanticProps, {
1033
- value: value || "",
1034
- error: rawErrors.length > 0,
1035
- onChange: _onChange,
1036
- onBlur: _onBlur,
1037
- onFocus: _onFocus,
1038
- "aria-describedby": utils.ariaDescribedByIds(id)
1039
- })), /*#__PURE__*/React__default["default"].createElement("span", null, value));
1080
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
1081
+ children: [jsxRuntime.jsx(semanticUiReact.Input, _extends({
1082
+ id: id,
1083
+ name: id,
1084
+ type: 'range',
1085
+ required: required,
1086
+ disabled: disabled || readonly
1087
+ }, utils.rangeSpec(schema), semanticProps, {
1088
+ value: value || '',
1089
+ error: rawErrors.length > 0,
1090
+ onChange: _onChange,
1091
+ onBlur: _onBlur,
1092
+ onFocus: _onFocus,
1093
+ "aria-describedby": utils.ariaDescribedByIds(id)
1094
+ }), id), jsxRuntime.jsx("span", {
1095
+ children: value
1096
+ })]
1097
+ });
1040
1098
  }
1041
1099
 
1042
1100
  /**
@@ -1088,7 +1146,7 @@
1088
1146
  formContext: formContext,
1089
1147
  options: options,
1090
1148
  defaultSchemaProps: {
1091
- inverted: "false",
1149
+ inverted: 'false',
1092
1150
  selection: true,
1093
1151
  fluid: true,
1094
1152
  scrolling: true,
@@ -1098,7 +1156,7 @@
1098
1156
  var enumDisabled = options.enumDisabled,
1099
1157
  enumOptions = options.enumOptions,
1100
1158
  optEmptyVal = options.emptyValue;
1101
- var emptyValue = multiple ? [] : "";
1159
+ var emptyValue = multiple ? [] : '';
1102
1160
  var dropdownOptions = createDefaultValueOptionsForDropDown(enumOptions, enumDisabled);
1103
1161
  var _onChange = function _onChange(_, _ref2) {
1104
1162
  var value = _ref2.value;
@@ -1114,13 +1172,12 @@
1114
1172
  return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
1115
1173
  };
1116
1174
  var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
1117
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Dropdown, _extends({
1118
- key: id,
1175
+ return jsxRuntime.jsx(semanticUiReact.Form.Dropdown, _extends({
1119
1176
  id: id,
1120
1177
  name: id,
1121
1178
  label: label || schema.title,
1122
- multiple: typeof multiple === "undefined" ? false : multiple,
1123
- value: typeof value === "undefined" ? emptyValue : selectedIndexes,
1179
+ multiple: typeof multiple === 'undefined' ? false : multiple,
1180
+ value: typeof value === 'undefined' ? emptyValue : selectedIndexes,
1124
1181
  error: rawErrors.length > 0,
1125
1182
  disabled: disabled,
1126
1183
  placeholder: placeholder
@@ -1133,7 +1190,7 @@
1133
1190
  onBlur: _onBlur,
1134
1191
  onFocus: _onFocus,
1135
1192
  "aria-describedby": utils.ariaDescribedByIds(id)
1136
- }));
1193
+ }), id);
1137
1194
  }
1138
1195
 
1139
1196
  /** The `TextareaWidget` is a widget for rendering input fields as textarea.
@@ -1170,7 +1227,7 @@
1170
1227
  // eslint-disable-next-line no-shadow
1171
1228
  var _onChange = function _onChange(_ref) {
1172
1229
  var value = _ref.target.value;
1173
- return onChange && onChange(value === "" ? options.emptyValue : value);
1230
+ return onChange && onChange(value === '' ? options.emptyValue : value);
1174
1231
  };
1175
1232
  var _onBlur = function _onBlur() {
1176
1233
  return onBlur && onBlur(id, value);
@@ -1179,9 +1236,8 @@
1179
1236
  return onFocus && onFocus(id, value);
1180
1237
  };
1181
1238
  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
1182
- return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.TextArea, _extends({
1239
+ return jsxRuntime.jsx(semanticUiReact.Form.TextArea, _extends({
1183
1240
  id: id,
1184
- key: id,
1185
1241
  name: id,
1186
1242
  label: displayLabel ? label || schema.title : false,
1187
1243
  placeholder: placeholder,
@@ -1189,14 +1245,14 @@
1189
1245
  required: required,
1190
1246
  disabled: disabled || readonly
1191
1247
  }, semanticProps, {
1192
- value: value || "",
1248
+ value: value || '',
1193
1249
  error: rawErrors.length > 0,
1194
1250
  rows: options.rows || 5,
1195
1251
  onChange: _onChange,
1196
1252
  onBlur: _onBlur,
1197
1253
  onFocus: _onFocus,
1198
1254
  "aria-describedby": utils.ariaDescribedByIds(id)
1199
- }));
1255
+ }), id);
1200
1256
  }
1201
1257
 
1202
1258
  function generateWidgets() {