@rjsf/core 6.1.1 → 6.2.3

package/dist/core.umd.js

@@ -1462,6 +1462,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       FieldTemplate2,
       {
+        fieldPathId,
         id,
         schema,
         label: (title || schema.title) ?? "",
@@ -2236,6 +2237,7 @@
       rawHelp: typeof help === "string" ? help : void 0,
       errors: errorsComponent,
       rawErrors: hideError ? void 0 : __errors,
+      fieldPathId,
       id,
       label,
       hidden,
@@ -2616,6 +2618,7 @@
       // remove this from ...rest
       ...rest
     } = props;
+    const { ClearButton: ClearButton2 } = registry.templates.ButtonTemplates;
     if (!id) {
       console.log("No id for", props);
       throw new Error(`no id for props ${JSON.stringify(props)}`);
@@ -2642,6 +2645,14 @@
       ({ target }) => onFocus(id, target && target.value),
       [onFocus, id]
     );
+    const _onClear = react.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onChange(options.emptyValue ?? "");
+      },
+      [onChange, options.emptyValue]
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -2661,6 +2672,7 @@
           "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
         }
       ),
+      options.allowClearTextInputs && !readonly && !disabled && inputValue && /* @__PURE__ */ jsxRuntime.jsx(ClearButton2, { registry, onClick: _onClear }),
       Array.isArray(schema.examples) && /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: utils.examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
         return /* @__PURE__ */ jsxRuntime.jsx("option", { value: example }, example);
       }) }, `datalist_${id}`)
@@ -2701,6 +2713,30 @@
     } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.RemoveButton), ...props, iconType: "danger", icon: "remove" });
   }
+  function ClearButton({
+    id,
+    className,
+    onClick,
+    disabled,
+    registry,
+    ...props
+  }) {
+    const { translateString } = registry;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconButton,
+      {
+        id,
+        iconType: "default",
+        icon: "remove",
+        className: "btn-clear col-xs-12",
+        title: translateString(utils.TranslatableString.ClearButton),
+        onClick,
+        disabled,
+        registry,
+        ...props
+      }
+    );
+  }
   function AddButton({
     id,
     className,
@@ -2738,7 +2774,8 @@
       CopyButton,
       MoveDownButton,
       MoveUpButton,
-      RemoveButton
+      RemoveButton,
+      ClearButton
     };
   }
   var ButtonTemplates_default = buttonTemplates;
@@ -2887,6 +2924,10 @@
       registry,
       options
     );
+    const isPureUnionSchema = (schema.oneOf || schema.anyOf) && !schema.properties && properties.length === 0;
+    if (isPureUnionSchema) {
+      return null;
+    }
     const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
@@ -3635,10 +3676,6 @@
       }
     );
   }
-  TextareaWidget.defaultProps = {
-    autofocus: false,
-    options: {}
-  };
   var TextareaWidget_default = TextareaWidget;
   function TextWidget(props) {
     const { options, registry } = props;
@@ -3719,6 +3756,10 @@
     /** The list of pending changes
      */
     pendingChanges = [];
+    /** Flag to track when we're processing a user-initiated field change.
+     * This prevents componentDidUpdate from reverting oneOf/anyOf option switches.
+     */
+    _isProcessingUserChange = false;
     /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
      * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
      * state construction.
@@ -3795,7 +3836,13 @@
     componentDidUpdate(_, prevState, snapshot) {
       if (snapshot.shouldUpdate) {
         const { nextState } = snapshot;
-        if (!utils.deepEquals(nextState.formData, this.props.formData) && !utils.deepEquals(nextState.formData, prevState.formData) && this.props.onChange) {
+        const nextStateDiffersFromProps = !utils.deepEquals(nextState.formData, this.props.formData);
+        const wasProcessingUserChange = this._isProcessingUserChange;
+        this._isProcessingUserChange = false;
+        if (wasProcessingUserChange && nextStateDiffersFromProps) {
+          return;
+        }
+        if (nextStateDiffersFromProps && !utils.deepEquals(nextState.formData, prevState.formData) && this.props.onChange) {
           this.props.onChange(toIChangeEvent(nextState));
         }
         this.setState(nextState);
@@ -4031,60 +4078,30 @@
      *
      * @param formData - The data for the `Form`
      * @param fields - The fields to keep while filtering
+     * @deprecated - To be removed as an exported `Form` function in a future release; there isn't a planned replacement
      */
     getUsedFormData = (formData, fields2) => {
-      if (fields2.length === 0 && typeof formData !== "object") {
-        return formData;
-      }
-      const data = _pick(formData, fields2);
-      if (Array.isArray(formData)) {
-        return Object.keys(data).map((key) => data[key]);
-      }
-      return data;
+      return utils.getUsedFormData(formData, fields2);
     };
     /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
      *
      * @param pathSchema - The `PathSchema` object for the form
      * @param [formData] - The form data to use while checking for empty objects/arrays
+     * @deprecated - To be removed as an exported `Form` function in a future release; there isn't a planned replacement
      */
     getFieldNames = (pathSchema, formData) => {
-      const formValueHasData = (value, isLeaf) => typeof value !== "object" || isEmpty(value) || isLeaf && !isEmpty(value);
-      const getAllPaths = (_obj, acc = [], paths = [[]]) => {
-        const objKeys = Object.keys(_obj);
-        objKeys.forEach((key) => {
-          const data = _obj[key];
-          if (typeof data === "object") {
-            const newPaths = paths.map((path) => [...path, key]);
-            if (data[utils.RJSF_ADDITIONAL_PROPERTIES_FLAG] && data[utils.NAME_KEY] !== "") {
-              acc.push(data[utils.NAME_KEY]);
-            } else {
-              getAllPaths(data, acc, newPaths);
-            }
-          } else if (key === utils.NAME_KEY && data !== "") {
-            paths.forEach((path) => {
-              const formValue = get(formData, path);
-              const isLeaf = objKeys.length === 1;
-              if (formValueHasData(formValue, isLeaf) || Array.isArray(formValue) && formValue.every((val) => formValueHasData(val, isLeaf))) {
-                acc.push(path);
-              }
-            });
-          }
-        });
-        return acc;
-      };
-      return getAllPaths(pathSchema);
+      return utils.getFieldNames(pathSchema, formData);
     };
     /** Returns the `formData` after filtering to remove any extra data not in a form field
      *
      * @param formData - The data for the `Form`
      * @returns The `formData` after omitting extra data
+     * @deprecated - To be removed as an exported `Form` function in a future release, use `SchemaUtils.omitExtraData`
+     *               instead.
      */
     omitExtraData = (formData) => {
       const { schema, schemaUtils } = this.state;
-      const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-      const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
-      const fieldNames = this.getFieldNames(pathSchema, formData);
-      return this.getUsedFormData(formData, fieldNames);
+      return schemaUtils.omitExtraData(schema, formData);
     };
     /** Allows a user to set a value for the provided `fieldPath`, which must be either a dotted path to the field OR a
      * `FieldPathList`. To set the root element, used either `''` or `[]` for the path. Passing undefined will clear the
@@ -4126,6 +4143,7 @@
       if (this.pendingChanges.length === 0) {
         return;
       }
+      this._isProcessingUserChange = true;
       const { newValue, path, id } = this.pendingChanges[0];
       const { newErrorSchema } = this.pendingChanges[0];
       const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
@@ -4135,13 +4153,16 @@
       const isRootPath = !path || path.length === 0 || path.length === 1 && path[0] === rootPathId;
       let retrievedSchema = this.state.retrievedSchema;
       let formData = isRootPath ? newValue : cloneDeep(oldFormData);
+      const hasOnlyUndefinedValues = utils.isObject(formData) && Object.keys(formData).length > 0 && Object.values(formData).every((v) => v === void 0);
+      const wasPreviouslyNull = oldFormData === null || oldFormData === void 0;
+      const inputForDefaults = hasOnlyUndefinedValues && wasPreviouslyNull ? void 0 : formData;
       if (utils.isObject(formData) || Array.isArray(formData)) {
         if (newValue === ADDITIONAL_PROPERTY_KEY_REMOVE) {
           _unset(formData, path);
         } else if (!isRootPath) {
           set(formData, path, newValue);
         }
-        const newState = this.getStateFromProps(this.props, formData, void 0, void 0, void 0, true);
+        const newState = this.getStateFromProps(this.props, inputForDefaults, void 0, void 0, void 0, true);
         formData = newState.formData;
         retrievedSchema = newState.retrievedSchema;
       }

package/dist/index.cjs

@@ -1565,6 +1565,7 @@ function LayoutMultiSchemaField(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     FieldTemplate2,
     {
+      fieldPathId,
       id,
       schema,
       label: (title || schema.title) ?? "",
@@ -2375,6 +2376,7 @@ function SchemaFieldRender(props) {
     rawHelp: typeof help === "string" ? help : void 0,
     errors: errorsComponent,
     rawErrors: hideError ? void 0 : __errors,
+    fieldPathId,
     id,
     label,
     hidden,
@@ -2788,6 +2790,7 @@ function BaseInputTemplate(props) {
     // remove this from ...rest
     ...rest
   } = props;
+  const { ClearButton: ClearButton2 } = registry.templates.ButtonTemplates;
   if (!id) {
     console.log("No id for", props);
     throw new Error(`no id for props ${JSON.stringify(props)}`);
@@ -2814,6 +2817,14 @@ function BaseInputTemplate(props) {
     ({ target }) => onFocus(id, target && target.value),
     [onFocus, id]
   );
+  const _onClear = (0, import_react12.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onChange(options.emptyValue ?? "");
+    },
+    [onChange, options.emptyValue]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "input",
@@ -2833,6 +2844,7 @@ function BaseInputTemplate(props) {
         "aria-describedby": (0, import_utils18.ariaDescribedByIds)(id, !!schema.examples)
       }
     ),
+    options.allowClearTextInputs && !readonly && !disabled && inputValue && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ClearButton2, { registry, onClick: _onClear }),
     Array.isArray(schema.examples) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("datalist", { id: (0, import_utils18.examplesId)(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
       return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: example }, example);
     }) }, `datalist_${id}`)
@@ -2884,6 +2896,30 @@ function RemoveButton(props) {
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconButton, { title: translateString(import_utils20.TranslatableString.RemoveButton), ...props, iconType: "danger", icon: "remove" });
 }
+function ClearButton({
+  id,
+  className,
+  onClick,
+  disabled,
+  registry,
+  ...props
+}) {
+  const { translateString } = registry;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    IconButton,
+    {
+      id,
+      iconType: "default",
+      icon: "remove",
+      className: "btn-clear col-xs-12",
+      title: translateString(import_utils20.TranslatableString.ClearButton),
+      onClick,
+      disabled,
+      registry,
+      ...props
+    }
+  );
+}
 
 // src/components/templates/ButtonTemplates/AddButton.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -2924,7 +2960,8 @@ function buttonTemplates() {
     CopyButton,
     MoveDownButton,
     MoveUpButton,
-    RemoveButton
+    RemoveButton,
+    ClearButton
   };
 }
 var ButtonTemplates_default = buttonTemplates;
@@ -3123,6 +3160,10 @@ function ObjectFieldTemplate(props) {
     registry,
     options
   );
+  const isPureUnionSchema = (schema.oneOf || schema.anyOf) && !schema.properties && properties.length === 0;
+  if (isPureUnionSchema) {
+    return null;
+  }
   const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
@@ -3954,10 +3995,6 @@ function TextareaWidget({
     }
   );
 }
-TextareaWidget.defaultProps = {
-  autofocus: false,
-  options: {}
-};
 var TextareaWidget_default = TextareaWidget;
 
 // src/components/widgets/TextWidget.tsx
@@ -4058,6 +4095,10 @@ var Form = class extends import_react21.Component {
   /** The list of pending changes
    */
   pendingChanges = [];
+  /** Flag to track when we're processing a user-initiated field change.
+   * This prevents componentDidUpdate from reverting oneOf/anyOf option switches.
+   */
+  _isProcessingUserChange = false;
   /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
    * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
    * state construction.
@@ -4134,7 +4175,13 @@ var Form = class extends import_react21.Component {
   componentDidUpdate(_, prevState, snapshot) {
     if (snapshot.shouldUpdate) {
       const { nextState } = snapshot;
-      if (!(0, import_utils49.deepEquals)(nextState.formData, this.props.formData) && !(0, import_utils49.deepEquals)(nextState.formData, prevState.formData) && this.props.onChange) {
+      const nextStateDiffersFromProps = !(0, import_utils49.deepEquals)(nextState.formData, this.props.formData);
+      const wasProcessingUserChange = this._isProcessingUserChange;
+      this._isProcessingUserChange = false;
+      if (wasProcessingUserChange && nextStateDiffersFromProps) {
+        return;
+      }
+      if (nextStateDiffersFromProps && !(0, import_utils49.deepEquals)(nextState.formData, prevState.formData) && this.props.onChange) {
         this.props.onChange(toIChangeEvent(nextState));
       }
       this.setState(nextState);
@@ -4370,60 +4417,30 @@ var Form = class extends import_react21.Component {
    *
    * @param formData - The data for the `Form`
    * @param fields - The fields to keep while filtering
+   * @deprecated - To be removed as an exported `Form` function in a future release; there isn't a planned replacement
    */
   getUsedFormData = (formData, fields2) => {
-    if (fields2.length === 0 && typeof formData !== "object") {
-      return formData;
-    }
-    const data = (0, import_pick.default)(formData, fields2);
-    if (Array.isArray(formData)) {
-      return Object.keys(data).map((key) => data[key]);
-    }
-    return data;
+    return (0, import_utils49.getUsedFormData)(formData, fields2);
   };
   /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
    *
    * @param pathSchema - The `PathSchema` object for the form
    * @param [formData] - The form data to use while checking for empty objects/arrays
+   * @deprecated - To be removed as an exported `Form` function in a future release; there isn't a planned replacement
    */
   getFieldNames = (pathSchema, formData) => {
-    const formValueHasData = (value, isLeaf) => typeof value !== "object" || (0, import_isEmpty4.default)(value) || isLeaf && !(0, import_isEmpty4.default)(value);
-    const getAllPaths = (_obj, acc = [], paths = [[]]) => {
-      const objKeys = Object.keys(_obj);
-      objKeys.forEach((key) => {
-        const data = _obj[key];
-        if (typeof data === "object") {
-          const newPaths = paths.map((path) => [...path, key]);
-          if (data[import_utils49.RJSF_ADDITIONAL_PROPERTIES_FLAG] && data[import_utils49.NAME_KEY] !== "") {
-            acc.push(data[import_utils49.NAME_KEY]);
-          } else {
-            getAllPaths(data, acc, newPaths);
-          }
-        } else if (key === import_utils49.NAME_KEY && data !== "") {
-          paths.forEach((path) => {
-            const formValue = (0, import_get5.default)(formData, path);
-            const isLeaf = objKeys.length === 1;
-            if (formValueHasData(formValue, isLeaf) || Array.isArray(formValue) && formValue.every((val) => formValueHasData(val, isLeaf))) {
-              acc.push(path);
-            }
-          });
-        }
-      });
-      return acc;
-    };
-    return getAllPaths(pathSchema);
+    return (0, import_utils49.getFieldNames)(pathSchema, formData);
   };
   /** Returns the `formData` after filtering to remove any extra data not in a form field
    *
    * @param formData - The data for the `Form`
    * @returns The `formData` after omitting extra data
+   * @deprecated - To be removed as an exported `Form` function in a future release, use `SchemaUtils.omitExtraData`
+   *               instead.
    */
   omitExtraData = (formData) => {
     const { schema, schemaUtils } = this.state;
-    const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-    const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
-    const fieldNames = this.getFieldNames(pathSchema, formData);
-    return this.getUsedFormData(formData, fieldNames);
+    return schemaUtils.omitExtraData(schema, formData);
   };
   /** Allows a user to set a value for the provided `fieldPath`, which must be either a dotted path to the field OR a
    * `FieldPathList`. To set the root element, used either `''` or `[]` for the path. Passing undefined will clear the
@@ -4465,6 +4482,7 @@ var Form = class extends import_react21.Component {
     if (this.pendingChanges.length === 0) {
       return;
     }
+    this._isProcessingUserChange = true;
     const { newValue, path, id } = this.pendingChanges[0];
     const { newErrorSchema } = this.pendingChanges[0];
     const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
@@ -4474,13 +4492,16 @@ var Form = class extends import_react21.Component {
     const isRootPath = !path || path.length === 0 || path.length === 1 && path[0] === rootPathId;
     let retrievedSchema = this.state.retrievedSchema;
     let formData = isRootPath ? newValue : (0, import_cloneDeep2.default)(oldFormData);
+    const hasOnlyUndefinedValues = (0, import_utils49.isObject)(formData) && Object.keys(formData).length > 0 && Object.values(formData).every((v) => v === void 0);
+    const wasPreviouslyNull = oldFormData === null || oldFormData === void 0;
+    const inputForDefaults = hasOnlyUndefinedValues && wasPreviouslyNull ? void 0 : formData;
     if ((0, import_utils49.isObject)(formData) || Array.isArray(formData)) {
       if (newValue === ADDITIONAL_PROPERTY_KEY_REMOVE) {
         (0, import_unset.default)(formData, path);
       } else if (!isRootPath) {
         (0, import_set5.default)(formData, path, newValue);
       }
-      const newState = this.getStateFromProps(this.props, formData, void 0, void 0, void 0, true);
+      const newState = this.getStateFromProps(this.props, inputForDefaults, void 0, void 0, void 0, true);
       formData = newState.formData;
       retrievedSchema = newState.retrievedSchema;
     }