@rjsf/core 5.0.0-beta.18 → 5.0.0-beta.19

package/dist/core.cjs.development.js

@@ -940,7 +940,10 @@ function BooleanField(props) {
   });
 }
 
-var _excluded$7 = ["widget", "placeholder", "autofocus", "autocomplete"];
+var _excluded$7 = ["widget", "placeholder", "autofocus", "autocomplete", "title"];
+/** The prefix used when a oneOf option does not have a title
+ */
+var UNKNOWN_OPTION_PREFIX = "Option";
 /** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
  * the currently selected option and cleans up any irrelevant data in `formData`.
  *
@@ -956,19 +959,20 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
     var _this;
     _this = _Component.call(this, props) || this;
     _this.onOptionChange = function (option) {
-      var selectedOption = _this.state.selectedOption;
+      var _this$state = _this.state,
+        selectedOption = _this$state.selectedOption,
+        retrievedOptions = _this$state.retrievedOptions;
       var _this$props = _this.props,
         formData = _this$props.formData,
         onChange = _this$props.onChange,
-        options = _this$props.options,
         registry = _this$props.registry;
       var schemaUtils = registry.schemaUtils;
       var intOption = option !== undefined ? parseInt(option, 10) : -1;
       if (intOption === selectedOption) {
         return;
       }
-      var newOption = intOption >= 0 ? schemaUtils.retrieveSchema(options[intOption], formData) : undefined;
-      var oldOption = selectedOption >= 0 ? schemaUtils.retrieveSchema(options[selectedOption], formData) : undefined;
+      var newOption = intOption >= 0 ? retrievedOptions[intOption] : undefined;
+      var oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : undefined;
       var newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
       if (newFormData && newOption) {
         // Call getDefaultFormState to make sure defaults are populated on change. Pass "excludeObjectChildren"
@@ -982,13 +986,19 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
     };
     var _this$props2 = _this.props,
       _formData = _this$props2.formData,
-      _options = _this$props2.options;
+      options = _this$props2.options,
+      _schemaUtils = _this$props2.registry.schemaUtils;
+    // cache the retrieved options in state in case they have $refs to save doing it later
+    var _retrievedOptions = options.map(function (opt) {
+      return _schemaUtils.retrieveSchema(opt, _formData);
+    });
     _this.state = {
-      selectedOption: _this.getMatchingOption(0, _formData, _options)
+      retrievedOptions: _retrievedOptions,
+      selectedOption: _this.getMatchingOption(0, _formData, _retrievedOptions)
     };
     return _this;
   }
-  /** React lifecycle methos that is called when the props and/or state for this component is updated. It recomputes the
+  /** React lifecycle method that is called when the props and/or state for this component is updated. It recomputes the
    * currently selected option based on the overall `formData`
    *
    * @param prevProps - The previous `FieldProps` for this template
@@ -1001,14 +1011,31 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
       options = _this$props3.options,
       idSchema = _this$props3.idSchema;
     var selectedOption = this.state.selectedOption;
+    var newState = this.state;
+    if (!utils.deepEquals(prevProps.options, options)) {
+      var schemaUtils = this.props.registry.schemaUtils;
+      // re-cache the retrieved options in state in case they have $refs to save doing it later
+      var retrievedOptions = options.map(function (opt) {
+        return schemaUtils.retrieveSchema(opt, formData);
+      });
+      newState = {
+        selectedOption: selectedOption,
+        retrievedOptions: retrievedOptions
+      };
+    }
     if (!utils.deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
-      var matchingOption = this.getMatchingOption(selectedOption, formData, options);
-      if (!prevState || matchingOption === selectedOption) {
-        return;
+      var _newState = newState,
+        _retrievedOptions2 = _newState.retrievedOptions;
+      var matchingOption = this.getMatchingOption(selectedOption, formData, _retrievedOptions2);
+      if (prevState && matchingOption !== selectedOption) {
+        newState = {
+          selectedOption: matchingOption,
+          retrievedOptions: _retrievedOptions2
+        };
       }
-      this.setState({
-        selectedOption: matchingOption
-      });
+    }
+    if (newState !== this.state) {
+      this.setState(newState);
     }
   }
   /** Determines the best matching option for the given `formData` and `options`.
@@ -1031,7 +1058,7 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
    * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
    * the `onChange` handler.
    *
-   * @param option -
+   * @param option - The new option value being selected
    */;
   _proto.getFieldId = function getFieldId() {
     var _this$props4 = this.props,
@@ -1051,26 +1078,30 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
       formContext = _this$props5.formContext,
       onBlur = _this$props5.onBlur,
       onFocus = _this$props5.onFocus,
-      options = _this$props5.options,
       registry = _this$props5.registry,
+      schema = _this$props5.schema,
       uiSchema = _this$props5.uiSchema;
     var widgets = registry.widgets,
       fields = registry.fields;
     var _SchemaField = fields.SchemaField;
-    var selectedOption = this.state.selectedOption;
+    var _this$state2 = this.state,
+      selectedOption = _this$state2.selectedOption,
+      retrievedOptions = _this$state2.retrievedOptions;
     var _getUiOptions = utils.getUiOptions(uiSchema),
       _getUiOptions$widget = _getUiOptions.widget,
       widget = _getUiOptions$widget === void 0 ? "select" : _getUiOptions$widget,
       placeholder = _getUiOptions.placeholder,
       autofocus = _getUiOptions.autofocus,
       autocomplete = _getUiOptions.autocomplete,
+      _getUiOptions$title = _getUiOptions.title,
+      title = _getUiOptions$title === void 0 ? schema.title : _getUiOptions$title,
       uiOptions = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$7);
     var Widget = utils.getWidget({
       type: "number"
     }, widget, widgets);
     var rawErrors = get__default["default"](errorSchema, utils.ERRORS_KEY, []);
     var fieldErrorSchema = omit__default["default"](errorSchema, [utils.ERRORS_KEY]);
-    var option = options[selectedOption] || null;
+    var option = retrievedOptions[selectedOption] || null;
     var optionSchema;
     if (option) {
       // If the subschema doesn't declare a type, infer the type from the
@@ -1079,9 +1110,10 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
         type: baseType
       });
     }
-    var enumOptions = options.map(function (option, index) {
+    var optionLabel = title ? title + " " + UNKNOWN_OPTION_PREFIX.toLowerCase() : UNKNOWN_OPTION_PREFIX;
+    var enumOptions = retrievedOptions.map(function (opt, index) {
       return {
-        label: option.title || "Option " + (index + 1),
+        label: opt.title || optionLabel + " " + (index + 1),
         value: index
       };
     });
@@ -1657,7 +1689,8 @@ function SchemaFieldRender(props) {
   };
   var _AnyOfField = registry.fields.AnyOfField;
   var _OneOfField = registry.fields.OneOfField;
-  return /*#__PURE__*/React__default["default"].createElement(FieldTemplate, _extends({}, fieldProps), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, field, schema.anyOf && !(uiSchema !== null && uiSchema !== void 0 && uiSchema["ui:field"]) && !schemaUtils.isSelect(schema) && /*#__PURE__*/React__default["default"].createElement(_AnyOfField, {
+  var isReplacingAnyOrOneOf = (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:field"]) && (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:fieldReplacesAnyOrOneOf"]) === true;
+  return /*#__PURE__*/React__default["default"].createElement(FieldTemplate, _extends({}, fieldProps), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, field, schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /*#__PURE__*/React__default["default"].createElement(_AnyOfField, {
     name: name,
     disabled: disabled,
     readonly: readonly,
@@ -1678,7 +1711,7 @@ function SchemaFieldRender(props) {
     registry: registry,
     schema: schema,
     uiSchema: uiSchema
-  }), schema.oneOf && !(uiSchema !== null && uiSchema !== void 0 && uiSchema["ui:field"]) && !schemaUtils.isSelect(schema) && /*#__PURE__*/React__default["default"].createElement(_OneOfField, {
+  }), schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /*#__PURE__*/React__default["default"].createElement(_OneOfField, {
     name: name,
     disabled: disabled,
     readonly: readonly,