@rjsf/core 6.0.0-beta.9 → 6.0.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.
Files changed (160) hide show
  1. package/README.md +2 -0
  2. package/dist/core.umd.js +2042 -1987
  3. package/dist/index.cjs +4909 -0
  4. package/dist/index.cjs.map +7 -0
  5. package/dist/index.esm.js +2509 -2389
  6. package/dist/index.esm.js.map +4 -4
  7. package/lib/components/Form.d.ts +137 -34
  8. package/lib/components/Form.d.ts.map +1 -1
  9. package/lib/components/Form.js +318 -173
  10. package/lib/components/fields/ArrayField.d.ts +2 -187
  11. package/lib/components/fields/ArrayField.d.ts.map +1 -1
  12. package/lib/components/fields/ArrayField.js +526 -492
  13. package/lib/components/fields/BooleanField.d.ts.map +1 -1
  14. package/lib/components/fields/BooleanField.js +8 -3
  15. package/lib/components/fields/FallbackField.d.ts +7 -0
  16. package/lib/components/fields/FallbackField.d.ts.map +1 -0
  17. package/lib/components/fields/FallbackField.js +72 -0
  18. package/lib/components/fields/LayoutGridField.d.ts +109 -186
  19. package/lib/components/fields/LayoutGridField.d.ts.map +1 -1
  20. package/lib/components/fields/LayoutGridField.js +426 -426
  21. package/lib/components/fields/LayoutHeaderField.d.ts +1 -1
  22. package/lib/components/fields/LayoutHeaderField.js +3 -3
  23. package/lib/components/fields/LayoutMultiSchemaField.d.ts.map +1 -1
  24. package/lib/components/fields/LayoutMultiSchemaField.js +6 -6
  25. package/lib/components/fields/MultiSchemaField.d.ts.map +1 -1
  26. package/lib/components/fields/MultiSchemaField.js +16 -10
  27. package/lib/components/fields/NullField.js +3 -3
  28. package/lib/components/fields/NumberField.d.ts.map +1 -1
  29. package/lib/components/fields/NumberField.js +3 -3
  30. package/lib/components/fields/ObjectField.d.ts +2 -68
  31. package/lib/components/fields/ObjectField.d.ts.map +1 -1
  32. package/lib/components/fields/ObjectField.js +163 -163
  33. package/lib/components/fields/OptionalDataControlsField.d.ts +8 -0
  34. package/lib/components/fields/OptionalDataControlsField.d.ts.map +1 -0
  35. package/lib/components/fields/OptionalDataControlsField.js +43 -0
  36. package/lib/components/fields/SchemaField.d.ts.map +1 -1
  37. package/lib/components/fields/SchemaField.js +52 -30
  38. package/lib/components/fields/StringField.d.ts.map +1 -1
  39. package/lib/components/fields/StringField.js +8 -3
  40. package/lib/components/fields/index.d.ts.map +1 -1
  41. package/lib/components/fields/index.js +4 -0
  42. package/lib/components/templates/ArrayFieldDescriptionTemplate.d.ts +1 -1
  43. package/lib/components/templates/ArrayFieldDescriptionTemplate.js +3 -3
  44. package/lib/components/templates/ArrayFieldItemButtonsTemplate.d.ts +3 -3
  45. package/lib/components/templates/ArrayFieldItemButtonsTemplate.d.ts.map +1 -1
  46. package/lib/components/templates/ArrayFieldItemButtonsTemplate.js +3 -8
  47. package/lib/components/templates/ArrayFieldItemTemplate.d.ts +3 -3
  48. package/lib/components/templates/ArrayFieldItemTemplate.d.ts.map +1 -1
  49. package/lib/components/templates/ArrayFieldItemTemplate.js +1 -1
  50. package/lib/components/templates/ArrayFieldTemplate.d.ts +1 -1
  51. package/lib/components/templates/ArrayFieldTemplate.d.ts.map +1 -1
  52. package/lib/components/templates/ArrayFieldTemplate.js +4 -5
  53. package/lib/components/templates/ArrayFieldTitleTemplate.d.ts +1 -1
  54. package/lib/components/templates/ArrayFieldTitleTemplate.d.ts.map +1 -1
  55. package/lib/components/templates/ArrayFieldTitleTemplate.js +3 -3
  56. package/lib/components/templates/BaseInputTemplate.js +2 -2
  57. package/lib/components/templates/ButtonTemplates/AddButton.d.ts +1 -1
  58. package/lib/components/templates/ButtonTemplates/AddButton.d.ts.map +1 -1
  59. package/lib/components/templates/ButtonTemplates/AddButton.js +2 -2
  60. package/lib/components/templates/FallbackFieldTemplate.d.ts +7 -0
  61. package/lib/components/templates/FallbackFieldTemplate.d.ts.map +1 -0
  62. package/lib/components/templates/FallbackFieldTemplate.js +12 -0
  63. package/lib/components/templates/FieldErrorTemplate.js +2 -2
  64. package/lib/components/templates/FieldHelpTemplate.js +2 -2
  65. package/lib/components/templates/MultiSchemaFieldTemplate.d.ts +8 -0
  66. package/lib/components/templates/MultiSchemaFieldTemplate.d.ts.map +1 -0
  67. package/lib/components/templates/MultiSchemaFieldTemplate.js +10 -0
  68. package/lib/components/templates/ObjectFieldTemplate.d.ts.map +1 -1
  69. package/lib/components/templates/ObjectFieldTemplate.js +3 -2
  70. package/lib/components/templates/OptionalDataControlsTemplate.d.ts +11 -0
  71. package/lib/components/templates/OptionalDataControlsTemplate.d.ts.map +1 -0
  72. package/lib/components/templates/OptionalDataControlsTemplate.js +20 -0
  73. package/lib/components/templates/TitleField.d.ts.map +1 -1
  74. package/lib/components/templates/TitleField.js +2 -2
  75. package/lib/components/templates/UnsupportedField.js +3 -3
  76. package/lib/components/templates/WrapIfAdditionalTemplate.js +2 -2
  77. package/lib/components/templates/index.d.ts.map +1 -1
  78. package/lib/components/templates/index.js +6 -0
  79. package/lib/components/widgets/AltDateWidget.d.ts +1 -1
  80. package/lib/components/widgets/AltDateWidget.d.ts.map +1 -1
  81. package/lib/components/widgets/AltDateWidget.js +5 -46
  82. package/lib/components/widgets/CheckboxWidget.d.ts +1 -1
  83. package/lib/components/widgets/CheckboxWidget.d.ts.map +1 -1
  84. package/lib/components/widgets/CheckboxWidget.js +2 -2
  85. package/lib/components/widgets/CheckboxesWidget.d.ts +1 -1
  86. package/lib/components/widgets/CheckboxesWidget.d.ts.map +1 -1
  87. package/lib/components/widgets/CheckboxesWidget.js +4 -4
  88. package/lib/components/widgets/FileWidget.d.ts.map +1 -1
  89. package/lib/components/widgets/FileWidget.js +7 -87
  90. package/lib/components/widgets/HiddenWidget.d.ts +1 -1
  91. package/lib/components/widgets/HiddenWidget.d.ts.map +1 -1
  92. package/lib/components/widgets/HiddenWidget.js +2 -2
  93. package/lib/components/widgets/RadioWidget.d.ts +1 -1
  94. package/lib/components/widgets/RadioWidget.d.ts.map +1 -1
  95. package/lib/components/widgets/RadioWidget.js +2 -2
  96. package/lib/components/widgets/RatingWidget.d.ts +1 -1
  97. package/lib/components/widgets/RatingWidget.d.ts.map +1 -1
  98. package/lib/components/widgets/RatingWidget.js +2 -2
  99. package/lib/components/widgets/SelectWidget.d.ts +1 -1
  100. package/lib/components/widgets/SelectWidget.d.ts.map +1 -1
  101. package/lib/components/widgets/SelectWidget.js +2 -2
  102. package/lib/components/widgets/TextareaWidget.d.ts +1 -1
  103. package/lib/components/widgets/TextareaWidget.d.ts.map +1 -1
  104. package/lib/components/widgets/TextareaWidget.js +2 -2
  105. package/lib/getDefaultRegistry.d.ts.map +1 -1
  106. package/lib/getDefaultRegistry.js +6 -1
  107. package/lib/getTestRegistry.d.ts +5 -0
  108. package/lib/getTestRegistry.d.ts.map +1 -0
  109. package/lib/getTestRegistry.js +23 -0
  110. package/lib/index.d.ts +2 -1
  111. package/lib/index.d.ts.map +1 -1
  112. package/lib/index.js +2 -1
  113. package/lib/tsconfig.tsbuildinfo +1 -1
  114. package/package.json +35 -20
  115. package/src/components/Form.tsx +468 -206
  116. package/src/components/fields/ArrayField.tsx +871 -723
  117. package/src/components/fields/BooleanField.tsx +14 -5
  118. package/src/components/fields/FallbackField.tsx +157 -0
  119. package/src/components/fields/LayoutGridField.tsx +626 -603
  120. package/src/components/fields/LayoutHeaderField.tsx +3 -3
  121. package/src/components/fields/LayoutMultiSchemaField.tsx +9 -10
  122. package/src/components/fields/MultiSchemaField.tsx +57 -36
  123. package/src/components/fields/NullField.tsx +3 -3
  124. package/src/components/fields/NumberField.tsx +11 -3
  125. package/src/components/fields/ObjectField.tsx +308 -239
  126. package/src/components/fields/OptionalDataControlsField.tsx +84 -0
  127. package/src/components/fields/SchemaField.tsx +75 -94
  128. package/src/components/fields/StringField.tsx +14 -5
  129. package/src/components/fields/index.ts +4 -0
  130. package/src/components/templates/ArrayFieldDescriptionTemplate.tsx +3 -3
  131. package/src/components/templates/ArrayFieldItemButtonsTemplate.tsx +16 -21
  132. package/src/components/templates/ArrayFieldItemTemplate.tsx +3 -3
  133. package/src/components/templates/ArrayFieldTemplate.tsx +11 -18
  134. package/src/components/templates/ArrayFieldTitleTemplate.tsx +4 -3
  135. package/src/components/templates/BaseInputTemplate.tsx +5 -5
  136. package/src/components/templates/ButtonTemplates/AddButton.tsx +2 -0
  137. package/src/components/templates/FallbackFieldTemplate.tsx +28 -0
  138. package/src/components/templates/FieldErrorTemplate.tsx +2 -2
  139. package/src/components/templates/FieldHelpTemplate.tsx +2 -2
  140. package/src/components/templates/MultiSchemaFieldTemplate.tsx +20 -0
  141. package/src/components/templates/ObjectFieldTemplate.tsx +12 -7
  142. package/src/components/templates/OptionalDataControlsTemplate.tsx +43 -0
  143. package/src/components/templates/TitleField.tsx +6 -1
  144. package/src/components/templates/UnsupportedField.tsx +3 -3
  145. package/src/components/templates/WrapIfAdditionalTemplate.tsx +5 -5
  146. package/src/components/templates/index.ts +6 -0
  147. package/src/components/widgets/AltDateWidget.tsx +8 -126
  148. package/src/components/widgets/CheckboxWidget.tsx +4 -3
  149. package/src/components/widgets/CheckboxesWidget.tsx +5 -4
  150. package/src/components/widgets/FileWidget.tsx +11 -102
  151. package/src/components/widgets/HiddenWidget.tsx +2 -1
  152. package/src/components/widgets/RadioWidget.tsx +3 -2
  153. package/src/components/widgets/RatingWidget.tsx +2 -1
  154. package/src/components/widgets/SelectWidget.tsx +3 -2
  155. package/src/components/widgets/TextareaWidget.tsx +3 -2
  156. package/src/getDefaultRegistry.ts +14 -1
  157. package/src/getTestRegistry.tsx +38 -0
  158. package/src/index.ts +2 -1
  159. package/dist/index.js +0 -4834
  160. package/dist/index.js.map +0 -7
@@ -1,53 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useCallback, useEffect, useReducer, useState } from 'react';
3
- import { ariaDescribedByIds, dateRangeOptions, parseDateString, toDateString, TranslatableString, getDateElementProps, } from '@rjsf/utils';
4
- function readyForChange(state) {
5
- return Object.values(state).every((value) => value !== -1);
6
- }
7
- function DateElement({ type, range, value, select, rootId, name, disabled, readonly, autofocus, registry, onBlur, onFocus, }) {
8
- const id = rootId + '_' + type;
9
- const { SelectWidget } = registry.widgets;
10
- return (_jsx(SelectWidget, { schema: { type: 'integer' }, id: id, name: name, className: 'form-control', options: { enumOptions: dateRangeOptions(range[0], range[1]) }, placeholder: type, value: value, disabled: disabled, readonly: readonly, autofocus: autofocus, onChange: (value) => select(type, value), onBlur: onBlur, onFocus: onFocus, registry: registry, label: '', "aria-describedby": ariaDescribedByIds(rootId) }));
11
- }
2
+ import { DateElement, TranslatableString, useAltDateWidgetProps, } from '@rjsf/utils';
12
3
  /** The `AltDateWidget` is an alternative widget for rendering date properties.
13
4
  * @param props - The `WidgetProps` for this component
14
5
  */
15
- function AltDateWidget({ time = false, disabled = false, readonly = false, autofocus = false, options, id, name, registry, onBlur, onFocus, onChange, value, }) {
6
+ function AltDateWidget(props) {
7
+ const { disabled = false, readonly = false, autofocus = false, options, id, name, registry, onBlur, onFocus } = props;
16
8
  const { translateString } = registry;
17
- const [lastValue, setLastValue] = useState(value);
18
- const [state, setState] = useReducer((state, action) => {
19
- return { ...state, ...action };
20
- }, parseDateString(value, time));
21
- useEffect(() => {
22
- const stateValue = toDateString(state, time);
23
- if (readyForChange(state) && stateValue !== value) {
24
- // The user changed the date to a new valid data via the comboboxes, so call onChange
25
- onChange(stateValue);
26
- }
27
- else if (lastValue !== value) {
28
- // We got a new value in the props
29
- setLastValue(value);
30
- setState(parseDateString(value, time));
31
- }
32
- }, [time, value, onChange, state, lastValue]);
33
- const handleChange = useCallback((property, value) => {
34
- setState({ [property]: value });
35
- }, []);
36
- const handleSetNow = useCallback((event) => {
37
- event.preventDefault();
38
- if (disabled || readonly) {
39
- return;
40
- }
41
- const nextState = parseDateString(new Date().toJSON(), time);
42
- onChange(toDateString(nextState, time));
43
- }, [disabled, readonly, time]);
44
- const handleClear = useCallback((event) => {
45
- event.preventDefault();
46
- if (disabled || readonly) {
47
- return;
48
- }
49
- onChange(undefined);
50
- }, [disabled, readonly, onChange]);
51
- return (_jsxs("ul", { className: 'list-inline', children: [getDateElementProps(state, time, options.yearsRange, options.format).map((elemProps, i) => (_jsx("li", { className: 'list-inline-item', children: _jsx(DateElement, { rootId: id, name: name, select: handleChange, ...elemProps, disabled: disabled, readonly: readonly, registry: registry, onBlur: onBlur, onFocus: onFocus, autofocus: autofocus && i === 0 }) }, i))), (options.hideNowButton !== 'undefined' ? !options.hideNowButton : true) && (_jsx("li", { className: 'list-inline-item', children: _jsx("a", { href: '#', className: 'btn btn-info btn-now', onClick: handleSetNow, children: translateString(TranslatableString.NowLabel) }) })), (options.hideClearButton !== 'undefined' ? !options.hideClearButton : true) && (_jsx("li", { className: 'list-inline-item', children: _jsx("a", { href: '#', className: 'btn btn-warning btn-clear', onClick: handleClear, children: translateString(TranslatableString.ClearLabel) }) }))] }));
9
+ const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
10
+ return (_jsxs("ul", { className: 'list-inline', children: [elements.map((elemProps, i) => (_jsx("li", { className: 'list-inline-item', children: _jsx(DateElement, { rootId: id, name: name, select: handleChange, ...elemProps, disabled: disabled, readonly: readonly, registry: registry, onBlur: onBlur, onFocus: onFocus, autofocus: autofocus && i === 0 }) }, i))), (options.hideNowButton !== 'undefined' ? !options.hideNowButton : true) && (_jsx("li", { className: 'list-inline-item', children: _jsx("a", { href: '#', className: 'btn btn-info btn-now', onClick: handleSetNow, children: translateString(TranslatableString.NowLabel) }) })), (options.hideClearButton !== 'undefined' ? !options.hideClearButton : true) && (_jsx("li", { className: 'list-inline-item', children: _jsx("a", { href: '#', className: 'btn btn-warning btn-clear', onClick: handleClear, children: translateString(TranslatableString.ClearLabel) }) }))] }));
52
11
  }
53
12
  export default AltDateWidget;
@@ -4,6 +4,6 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjs
4
4
  *
5
5
  * @param props - The `WidgetProps` for this component
6
6
  */
7
- declare function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ schema, uiSchema, options, id, value, disabled, readonly, label, hideLabel, autofocus, onBlur, onFocus, onChange, registry, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
7
+ declare function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ schema, uiSchema, options, id, value, disabled, readonly, label, hideLabel, autofocus, onBlur, onFocus, onChange, registry, htmlName, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
8
8
  export default CheckboxWidget;
9
9
  //# sourceMappingURL=CheckboxWidget.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/CheckboxWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,iBAAS,cAAc,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACzG,MAAM,EACN,QAAQ,EACR,OAAO,EACP,EAAE,EACF,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAwDtB;AAED,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"CheckboxWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/CheckboxWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,iBAAS,cAAc,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACzG,MAAM,EACN,QAAQ,EACR,OAAO,EACP,EAAE,EACF,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAwDtB;AAED,eAAe,cAAc,CAAC"}
@@ -6,7 +6,7 @@ import { ariaDescribedByIds, descriptionId, getTemplate, labelValue, schemaRequi
6
6
  *
7
7
  * @param props - The `WidgetProps` for this component
8
8
  */
9
- function CheckboxWidget({ schema, uiSchema, options, id, value, disabled, readonly, label, hideLabel, autofocus = false, onBlur, onFocus, onChange, registry, }) {
9
+ function CheckboxWidget({ schema, uiSchema, options, id, value, disabled, readonly, label, hideLabel, autofocus = false, onBlur, onFocus, onChange, registry, htmlName, }) {
10
10
  const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
11
11
  // Because an unchecked checkbox will cause html5 validation to fail, only add
12
12
  // the "required" attribute if the field value must be "true", due to the
@@ -16,6 +16,6 @@ function CheckboxWidget({ schema, uiSchema, options, id, value, disabled, readon
16
16
  const handleBlur = useCallback((event) => onBlur(id, event.target.checked), [onBlur, id]);
17
17
  const handleFocus = useCallback((event) => onFocus(id, event.target.checked), [onFocus, id]);
18
18
  const description = options.description ?? schema.description;
19
- return (_jsxs("div", { className: `checkbox ${disabled || readonly ? 'disabled' : ''}`, children: [!hideLabel && description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsxs("label", { children: [_jsx("input", { type: 'checkbox', id: id, name: id, checked: typeof value === 'undefined' ? false : value, required: required, disabled: disabled || readonly, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedByIds(id) }), labelValue(_jsx("span", { children: label }), hideLabel)] })] }));
19
+ return (_jsxs("div", { className: `checkbox ${disabled || readonly ? 'disabled' : ''}`, children: [!hideLabel && description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsxs("label", { children: [_jsx("input", { type: 'checkbox', id: id, name: htmlName || id, checked: typeof value === 'undefined' ? false : value, required: required, disabled: disabled || readonly, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedByIds(id) }), labelValue(_jsx("span", { children: label }), hideLabel)] })] }));
20
20
  }
21
21
  export default CheckboxWidget;
@@ -4,6 +4,6 @@ import { FormContextType, WidgetProps, RJSFSchema, StrictRJSFSchema } from '@rjs
4
4
  *
5
5
  * @param props - The `WidgetProps` for this component
6
6
  */
7
- declare function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, disabled, options: { inline, enumOptions, enumDisabled, emptyValue }, value, autofocus, readonly, onChange, onBlur, onFocus, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
7
+ declare function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, disabled, options: { inline, enumOptions, enumDisabled, emptyValue }, value, autofocus, readonly, onChange, onBlur, onFocus, htmlName, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
8
8
  export default CheckboxesWidget;
9
9
  //# sourceMappingURL=CheckboxesWidget.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxesWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/CheckboxesWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,eAAe,EACf,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EAC3G,EAAE,EACF,QAAQ,EACR,OAAO,EAAE,EAAE,MAAc,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,EAClE,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA4DtB;AAED,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"CheckboxesWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/CheckboxesWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,eAAe,EACf,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EAC3G,EAAE,EACF,QAAQ,EACR,OAAO,EAAE,EAAE,MAAc,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,EAClE,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA4DtB;AAED,eAAe,gBAAgB,CAAC"}
@@ -6,10 +6,10 @@ import { ariaDescribedByIds, enumOptionsDeselectValue, enumOptionsIsSelected, en
6
6
  *
7
7
  * @param props - The `WidgetProps` for this component
8
8
  */
9
- function CheckboxesWidget({ id, disabled, options: { inline = false, enumOptions, enumDisabled, emptyValue }, value, autofocus = false, readonly, onChange, onBlur, onFocus, }) {
9
+ function CheckboxesWidget({ id, disabled, options: { inline = false, enumOptions, enumDisabled, emptyValue }, value, autofocus = false, readonly, onChange, onBlur, onFocus, htmlName, }) {
10
10
  const checkboxesValues = Array.isArray(value) ? value : [value];
11
- const handleBlur = useCallback(({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)), [onBlur, id]);
12
- const handleFocus = useCallback(({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)), [onFocus, id]);
11
+ const handleBlur = useCallback(({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)), [onBlur, id, enumOptions, emptyValue]);
12
+ const handleFocus = useCallback(({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)), [onFocus, id, enumOptions, emptyValue]);
13
13
  return (_jsx("div", { className: 'checkboxes', id: id, children: Array.isArray(enumOptions) &&
14
14
  enumOptions.map((option, index) => {
15
15
  const checked = enumOptionsIsSelected(option.value, checkboxesValues);
@@ -23,7 +23,7 @@ function CheckboxesWidget({ id, disabled, options: { inline = false, enumOptions
23
23
  onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
24
24
  }
25
25
  };
26
- const checkbox = (_jsxs("span", { children: [_jsx("input", { type: 'checkbox', id: optionId(id, index), name: id, checked: checked, value: String(index), disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && index === 0, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedByIds(id) }), _jsx("span", { children: option.label })] }));
26
+ const checkbox = (_jsxs("span", { children: [_jsx("input", { type: 'checkbox', id: optionId(id, index), name: htmlName || id, checked: checked, value: String(index), disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && index === 0, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedByIds(id) }), _jsx("span", { children: option.label })] }));
27
27
  return inline ? (_jsx("label", { className: `checkbox-inline ${disabledCls}`, children: checkbox }, index)) : (_jsx("div", { className: `checkbox ${disabledCls}`, children: _jsx("label", { children: checkbox }) }, index));
28
28
  }) }));
29
29
  }
@@ -1 +1 @@
1
- {"version":3,"file":"FileWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/FileWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,eAAe,EAGf,UAAU,EACV,gBAAgB,EAGhB,WAAW,EACZ,MAAM,aAAa,CAAC;AA2IrB;;;GAGG;AACH,iBAAS,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACnG,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAyD5B;AAED,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"FileWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/FileWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,eAAe,EAGf,UAAU,EACV,gBAAgB,EAIhB,WAAW,EACZ,MAAM,aAAa,CAAC;AAwErB;;;GAGG;AACH,iBAAS,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACnG,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAgC5B;AAED,eAAe,UAAU,CAAC"}
@@ -1,42 +1,6 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useCallback, useMemo } from 'react';
3
- import { dataURItoBlob, getTemplate, TranslatableString, } from '@rjsf/utils';
2
+ import { getTemplate, TranslatableString, useFileWidgetProps, } from '@rjsf/utils';
4
3
  import Markdown from 'markdown-to-jsx';
5
- function addNameToDataURL(dataURL, name) {
6
- if (dataURL === null) {
7
- return null;
8
- }
9
- return dataURL.replace(';base64', `;name=${encodeURIComponent(name)};base64`);
10
- }
11
- function processFile(file) {
12
- const { name, size, type } = file;
13
- return new Promise((resolve, reject) => {
14
- const reader = new window.FileReader();
15
- reader.onerror = reject;
16
- reader.onload = (event) => {
17
- if (typeof event.target?.result === 'string') {
18
- resolve({
19
- dataURL: addNameToDataURL(event.target.result, name),
20
- name,
21
- size,
22
- type,
23
- });
24
- }
25
- else {
26
- resolve({
27
- dataURL: null,
28
- name,
29
- size,
30
- type,
31
- });
32
- }
33
- };
34
- reader.readAsDataURL(file);
35
- });
36
- }
37
- function processFiles(files) {
38
- return Promise.all(Array.from(files).map(processFile));
39
- }
40
4
  function FileInfoPreview({ fileInfo, registry, }) {
41
5
  const { translateString } = registry;
42
6
  const { dataURL, type, name } = fileInfo;
@@ -64,63 +28,19 @@ function FilesInfo({ filesInfo, registry, preview, onRemove, options, }) {
64
28
  return (_jsxs("li", { children: [_jsx(Markdown, { children: translateString(TranslatableString.FilesInfo, [name, type, String(size)]) }), preview && _jsx(FileInfoPreview, { fileInfo: fileInfo, registry: registry }), _jsx(RemoveButton, { onClick: handleRemove, registry: registry })] }, key));
65
29
  }) }));
66
30
  }
67
- function extractFileInfo(dataURLs) {
68
- return dataURLs.reduce((acc, dataURL) => {
69
- if (!dataURL) {
70
- return acc;
71
- }
72
- try {
73
- const { blob, name } = dataURItoBlob(dataURL);
74
- return [
75
- ...acc,
76
- {
77
- dataURL,
78
- name: name,
79
- size: blob.size,
80
- type: blob.type,
81
- },
82
- ];
83
- }
84
- catch {
85
- // Invalid dataURI, so just ignore it.
86
- return acc;
87
- }
88
- }, []);
89
- }
90
31
  /**
91
32
  * The `FileWidget` is a widget for rendering file upload fields.
92
33
  * It is typically used with a string property with data-url format.
93
34
  */
94
35
  function FileWidget(props) {
95
36
  const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
37
+ const { filesInfo, handleChange, handleRemove } = useFileWidgetProps(value, onChange, multiple);
96
38
  const BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
97
- const handleChange = useCallback((event) => {
98
- if (!event.target.files) {
99
- return;
100
- }
101
- // Due to variances in themes, dealing with multiple files for the array case now happens one file at a time.
102
- // This is because we don't pass `multiple` into the `BaseInputTemplate` anymore. Instead, we deal with the single
103
- // file in each event and concatenate them together ourselves
104
- processFiles(event.target.files).then((filesInfoEvent) => {
105
- const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
106
- if (multiple) {
107
- onChange(value.concat(newValue));
108
- }
109
- else {
110
- onChange(newValue[0]);
111
- }
112
- });
113
- }, [multiple, value, onChange]);
114
- const filesInfo = useMemo(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
115
- const rmFile = useCallback((index) => {
116
- if (multiple) {
117
- const newValue = value.filter((_, i) => i !== index);
118
- onChange(newValue);
119
- }
120
- else {
121
- onChange(undefined);
39
+ const handleOnChangeEvent = (event) => {
40
+ if (event.target.files) {
41
+ handleChange(event.target.files);
122
42
  }
123
- }, [multiple, value, onChange]);
124
- return (_jsxs("div", { children: [_jsx(BaseInputTemplate, { ...props, disabled: disabled || readonly, type: 'file', required: value ? false : required, onChangeOverride: handleChange, value: '', accept: options.accept ? String(options.accept) : undefined }), _jsx(FilesInfo, { filesInfo: filesInfo, onRemove: rmFile, registry: registry, preview: options.filePreview, options: options })] }));
43
+ };
44
+ return (_jsxs("div", { children: [_jsx(BaseInputTemplate, { ...props, disabled: disabled || readonly, type: 'file', required: value ? false : required, onChangeOverride: handleOnChangeEvent, value: '', accept: options.accept ? String(options.accept) : undefined }), _jsx(FilesInfo, { filesInfo: filesInfo, onRemove: handleRemove, registry: registry, preview: options.filePreview, options: options })] }));
125
45
  }
126
46
  export default FileWidget;
@@ -4,6 +4,6 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjs
4
4
  *
5
5
  * @param props - The `WidgetProps` for this component
6
6
  */
7
- declare function HiddenWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, value, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
7
+ declare function HiddenWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, value, htmlName, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
8
8
  export default HiddenWidget;
9
9
  //# sourceMappingURL=HiddenWidget.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"HiddenWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/HiddenWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEzF;;;;GAIG;AACH,iBAAS,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACvG,EAAE,EACF,KAAK,GACN,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAEtB;AAED,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"HiddenWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/HiddenWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEzF;;;;GAIG;AACH,iBAAS,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACvG,EAAE,EACF,KAAK,EACL,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAEtB;AAED,eAAe,YAAY,CAAC"}
@@ -4,7 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
4
4
  *
5
5
  * @param props - The `WidgetProps` for this component
6
6
  */
7
- function HiddenWidget({ id, value, }) {
8
- return _jsx("input", { type: 'hidden', id: id, name: id, value: typeof value === 'undefined' ? '' : value });
7
+ function HiddenWidget({ id, value, htmlName, }) {
8
+ return _jsx("input", { type: 'hidden', id: id, name: htmlName || id, value: typeof value === 'undefined' ? '' : value });
9
9
  }
10
10
  export default HiddenWidget;
@@ -4,6 +4,6 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjs
4
4
  *
5
5
  * @param props - The `WidgetProps` for this component
6
6
  */
7
- declare function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ options, value, required, disabled, readonly, autofocus, onBlur, onFocus, onChange, id, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
7
+ declare function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ options, value, required, disabled, readonly, autofocus, onBlur, onFocus, onChange, id, htmlName, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
8
8
  export default RadioWidget;
9
9
  //# sourceMappingURL=RadioWidget.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"RadioWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/RadioWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACtG,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,EAAE,GACH,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAyDtB;AAED,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"RadioWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/RadioWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACtG,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,EAAE,EACF,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAyDtB;AAED,eAAe,WAAW,CAAC"}
@@ -6,7 +6,7 @@ import { ariaDescribedByIds, enumOptionsIsSelected, enumOptionsValueForIndex, op
6
6
  *
7
7
  * @param props - The `WidgetProps` for this component
8
8
  */
9
- function RadioWidget({ options, value, required, disabled, readonly, autofocus = false, onBlur, onFocus, onChange, id, }) {
9
+ function RadioWidget({ options, value, required, disabled, readonly, autofocus = false, onBlur, onFocus, onChange, id, htmlName, }) {
10
10
  const { enumOptions, enumDisabled, inline, emptyValue } = options;
11
11
  const handleBlur = useCallback(({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)), [onBlur, enumOptions, emptyValue, id]);
12
12
  const handleFocus = useCallback(({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)), [onFocus, enumOptions, emptyValue, id]);
@@ -16,7 +16,7 @@ function RadioWidget({ options, value, required, disabled, readonly, autofocus =
16
16
  const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
17
17
  const disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
18
18
  const handleChange = () => onChange(option.value);
19
- const radio = (_jsxs("span", { children: [_jsx("input", { type: 'radio', id: optionId(id, i), checked: checked, name: id, required: required, value: String(i), disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && i === 0, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedByIds(id) }), _jsx("span", { children: option.label })] }));
19
+ const radio = (_jsxs("span", { children: [_jsx("input", { type: 'radio', id: optionId(id, i), checked: checked, name: htmlName || id, required: required, value: String(i), disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && i === 0, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedByIds(id) }), _jsx("span", { children: option.label })] }));
20
20
  return inline ? (_jsx("label", { className: `radio-inline ${disabledCls}`, children: radio }, i)) : (_jsx("div", { className: `radio ${disabledCls}`, children: _jsx("label", { children: radio }) }, i));
21
21
  }) }));
22
22
  }
@@ -11,5 +11,5 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjs
11
11
  *
12
12
  * @param props - The `WidgetProps` for this component
13
13
  */
14
- export default function RatingWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, value, required, disabled, readonly, autofocus, onChange, onFocus, onBlur, schema, options, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
14
+ export default function RatingWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, value, required, disabled, readonly, autofocus, onChange, onFocus, onBlur, schema, options, htmlName, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
15
15
  //# sourceMappingURL=RatingWidget.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"RatingWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/RatingWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEzF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,EACA,EAAE,EACF,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,OAAO,GACR,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAiGtB"}
1
+ {"version":3,"file":"RatingWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/RatingWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEzF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,EACA,EAAE,EACF,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAiGtB"}
@@ -12,7 +12,7 @@ import { useCallback } from 'react';
12
12
  *
13
13
  * @param props - The `WidgetProps` for this component
14
14
  */
15
- export default function RatingWidget({ id, value, required, disabled, readonly, autofocus, onChange, onFocus, onBlur, schema, options, }) {
15
+ export default function RatingWidget({ id, value, required, disabled, readonly, autofocus, onChange, onFocus, onBlur, schema, options, htmlName, }) {
16
16
  const { stars = 5, shape = 'star' } = options;
17
17
  // Use schema.maximum if provided, otherwise use stars option (limited to 1-5)
18
18
  const numStars = schema.maximum ? Math.min(schema.maximum, 5) : Math.min(Math.max(stars, 1), 5);
@@ -59,5 +59,5 @@ export default function RatingWidget({ id, value, required, disabled, readonly,
59
59
  transition: 'color 0.2s',
60
60
  userSelect: 'none',
61
61
  }, children: getSymbol(isFilled) }, index));
62
- }), _jsx("input", { type: 'hidden', id: id, name: id, value: value || '', required: required, disabled: disabled || readonly, "aria-hidden": 'true' })] }) }));
62
+ }), _jsx("input", { type: 'hidden', id: id, name: htmlName || id, value: value || '', required: required, disabled: disabled || readonly, "aria-hidden": 'true' })] }) }));
63
63
  }
@@ -4,6 +4,6 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjs
4
4
  *
5
5
  * @param props - The `WidgetProps` for this component
6
6
  */
7
- declare function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ schema, id, options, value, required, disabled, readonly, multiple, autofocus, onChange, onBlur, onFocus, placeholder, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
7
+ declare function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ schema, id, options, value, required, disabled, readonly, multiple, autofocus, onChange, onBlur, onFocus, placeholder, htmlName, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
8
8
  export default SelectWidget;
9
9
  //# sourceMappingURL=SelectWidget.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SelectWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/SelectWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,aAAa,CAAC;AAYrB;;;;GAIG;AACH,iBAAS,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACvG,MAAM,EACN,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,SAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,GACZ,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA2DtB;AAED,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"SelectWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/SelectWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,aAAa,CAAC;AAYrB;;;;GAIG;AACH,iBAAS,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACvG,MAAM,EACN,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,SAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA2DtB;AAED,eAAe,YAAY,CAAC"}
@@ -15,7 +15,7 @@ function getValue(event, multiple) {
15
15
  *
16
16
  * @param props - The `WidgetProps` for this component
17
17
  */
18
- function SelectWidget({ schema, id, options, value, required, disabled, readonly, multiple = false, autofocus = false, onChange, onBlur, onFocus, placeholder, }) {
18
+ function SelectWidget({ schema, id, options, value, required, disabled, readonly, multiple = false, autofocus = false, onChange, onBlur, onFocus, placeholder, htmlName, }) {
19
19
  const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
20
20
  const emptyValue = multiple ? [] : '';
21
21
  const handleFocus = useCallback((event) => {
@@ -32,7 +32,7 @@ function SelectWidget({ schema, id, options, value, required, disabled, readonly
32
32
  }, [onChange, multiple, enumOptions, optEmptyVal]);
33
33
  const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
34
34
  const showPlaceholderOption = !multiple && schema.default === undefined;
35
- return (_jsxs("select", { id: id, name: id, multiple: multiple, role: 'combobox', className: 'form-control', value: typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes, required: required, disabled: disabled || readonly, autoFocus: autofocus, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, "aria-describedby": ariaDescribedByIds(id), children: [showPlaceholderOption && _jsx("option", { value: '', children: placeholder }), Array.isArray(enumOptions) &&
35
+ return (_jsxs("select", { id: id, name: htmlName || id, multiple: multiple, role: 'combobox', className: 'form-control', value: typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes, required: required, disabled: disabled || readonly, autoFocus: autofocus, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, "aria-describedby": ariaDescribedByIds(id), children: [showPlaceholderOption && _jsx("option", { value: '', children: placeholder }), Array.isArray(enumOptions) &&
36
36
  enumOptions.map(({ value, label }, i) => {
37
37
  const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
38
38
  return (_jsx("option", { value: String(i), disabled: disabled, children: label }, i));
@@ -3,7 +3,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjs
3
3
  *
4
4
  * @param props - The `WidgetProps` for this component
5
5
  */
6
- declare function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, options, placeholder, value, required, disabled, readonly, autofocus, onChange, onBlur, onFocus, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
6
+ declare function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, options, placeholder, value, required, disabled, readonly, autofocus, onChange, onBlur, onFocus, htmlName, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
7
7
  declare namespace TextareaWidget {
8
8
  var defaultProps: {
9
9
  autofocus: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"TextareaWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/TextareaWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE7G;;;GAGG;AACH,iBAAS,cAAc,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACzG,EAAE,EACF,OAAY,EACZ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAkCtB;kBA9CQ,cAAc;;;;;;AAqDvB,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"TextareaWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/TextareaWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE7G;;;GAGG;AACH,iBAAS,cAAc,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACzG,EAAE,EACF,OAAY,EACZ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAkCtB;kBA/CQ,cAAc;;;;;;AAsDvB,eAAe,cAAc,CAAC"}
@@ -5,11 +5,11 @@ import { ariaDescribedByIds } from '@rjsf/utils';
5
5
  *
6
6
  * @param props - The `WidgetProps` for this component
7
7
  */
8
- function TextareaWidget({ id, options = {}, placeholder, value, required, disabled, readonly, autofocus = false, onChange, onBlur, onFocus, }) {
8
+ function TextareaWidget({ id, options = {}, placeholder, value, required, disabled, readonly, autofocus = false, onChange, onBlur, onFocus, htmlName, }) {
9
9
  const handleChange = useCallback(({ target: { value } }) => onChange(value === '' ? options.emptyValue : value), [onChange, options.emptyValue]);
10
10
  const handleBlur = useCallback(({ target }) => onBlur(id, target && target.value), [onBlur, id]);
11
11
  const handleFocus = useCallback(({ target }) => onFocus(id, target && target.value), [id, onFocus]);
12
- return (_jsx("textarea", { id: id, name: id, className: 'form-control', value: value ? value : '', placeholder: placeholder, required: required, disabled: disabled, readOnly: readonly, autoFocus: autofocus, rows: options.rows, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, "aria-describedby": ariaDescribedByIds(id) }));
12
+ return (_jsx("textarea", { id: id, name: htmlName || id, className: 'form-control', value: value ? value : '', placeholder: placeholder, required: required, disabled: disabled, readOnly: readonly, autoFocus: autofocus, rows: options.rows, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, "aria-describedby": ariaDescribedByIds(id) }));
13
13
  }
14
14
  TextareaWidget.defaultProps = {
15
15
  autofocus: false,
@@ -1 +1 @@
1
- {"version":3,"file":"getDefaultRegistry.d.ts","sourceRoot":"","sources":["../src/getDefaultRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAM/G;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,KAC5B,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,CAS1C"}
1
+ {"version":3,"file":"getDefaultRegistry.d.ts","sourceRoot":"","sources":["../src/getDefaultRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,eAAe,EACf,QAAQ,EACR,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAMrB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,KAC5B,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,CAc1C"}
@@ -1,4 +1,4 @@
1
- import { englishStringTranslator } from '@rjsf/utils';
1
+ import { DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR, englishStringTranslator, } from '@rjsf/utils';
2
2
  import fields from './components/fields/index.js';
3
3
  import templates from './components/templates/index.js';
4
4
  import widgets from './components/widgets/index.js';
@@ -14,5 +14,10 @@ export default function getDefaultRegistry() {
14
14
  rootSchema: {},
15
15
  formContext: {},
16
16
  translateString: englishStringTranslator,
17
+ globalFormOptions: {
18
+ idPrefix: DEFAULT_ID_PREFIX,
19
+ idSeparator: DEFAULT_ID_SEPARATOR,
20
+ useFallbackUiForUnsupportedType: false,
21
+ },
17
22
  };
18
23
  }
@@ -0,0 +1,5 @@
1
+ import { Registry } from '@rjsf/utils';
2
+ /** Use for react testing library tests where we directly test the component rather than testing inside a Form
3
+ */
4
+ export default function getTestRegistry(rootSchema: Registry['rootSchema'], fields?: Registry['fields'], templates?: Partial<Registry['templates']>, widgets?: Registry['widgets'], formContext?: Registry['formContext'], globalFormOptions?: Registry['globalFormOptions']): Registry;
5
+ //# sourceMappingURL=getTestRegistry.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getTestRegistry.d.ts","sourceRoot":"","sources":["../src/getTestRegistry.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,QAAQ,EACT,MAAM,aAAa,CAAC;AAKrB;GACG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,EAClC,MAAM,GAAE,QAAQ,CAAC,QAAQ,CAAM,EAC/B,SAAS,GAAE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAM,EAC9C,OAAO,GAAE,QAAQ,CAAC,SAAS,CAAM,EACjC,WAAW,GAAE,QAAQ,CAAC,aAAa,CAAM,EACzC,iBAAiB,GAAE,QAAQ,CAAC,mBAAmB,CAI9C,GACA,QAAQ,CAaV"}
@@ -0,0 +1,23 @@
1
+ import { DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR, createSchemaUtils, englishStringTranslator, } from '@rjsf/utils';
2
+ import validator from '@rjsf/validator-ajv8';
3
+ import getDefaultRegistry from './getDefaultRegistry.js';
4
+ /** Use for react testing library tests where we directly test the component rather than testing inside a Form
5
+ */
6
+ export default function getTestRegistry(rootSchema, fields = {}, templates = {}, widgets = {}, formContext = {}, globalFormOptions = {
7
+ idPrefix: DEFAULT_ID_PREFIX,
8
+ idSeparator: DEFAULT_ID_SEPARATOR,
9
+ useFallbackUiForUnsupportedType: false,
10
+ }) {
11
+ const defaults = getDefaultRegistry();
12
+ const schemaUtils = createSchemaUtils(validator, rootSchema);
13
+ return {
14
+ fields: { ...defaults.fields, ...fields },
15
+ templates: { ...defaults.templates, ...templates },
16
+ widgets: { ...defaults.widgets, ...widgets },
17
+ formContext,
18
+ rootSchema,
19
+ schemaUtils,
20
+ translateString: englishStringTranslator,
21
+ globalFormOptions,
22
+ };
23
+ }
package/lib/index.d.ts CHANGED
@@ -2,7 +2,8 @@ import Form, { FormProps, FormState, IChangeEvent } from './components/Form.js';
2
2
  import RichDescription, { RichDescriptionProps } from './components/RichDescription.js';
3
3
  import withTheme, { ThemeProps } from './withTheme.js';
4
4
  import getDefaultRegistry from './getDefaultRegistry.js';
5
+ import getTestRegistry from './getTestRegistry.js';
5
6
  export type { FormProps, FormState, IChangeEvent, ThemeProps, RichDescriptionProps };
6
- export { withTheme, getDefaultRegistry, RichDescription };
7
+ export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription };
7
8
  export default Form;
8
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,eAAe,EAAE,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,oBAAoB,EAAE,CAAC;AAErF,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC;AAC1D,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,eAAe,EAAE,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,oBAAoB,EAAE,CAAC;AAErF,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAC3E,eAAe,IAAI,CAAC"}
package/lib/index.js CHANGED
@@ -2,5 +2,6 @@ import Form from './components/Form.js';
2
2
  import RichDescription from './components/RichDescription.js';
3
3
  import withTheme from './withTheme.js';
4
4
  import getDefaultRegistry from './getDefaultRegistry.js';
5
- export { withTheme, getDefaultRegistry, RichDescription };
5
+ import getTestRegistry from './getTestRegistry.js';
6
+ export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription };
6
7
  export default Form;