@rjsf/core 6.7.0 → 6.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "6.7.0",
+  "version": "6.7.1",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "lint-staged": {
     "{src,test}/**/*.{ts,tsx,js,jsx}": [
@@ -50,7 +50,7 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "@rjsf/utils": "^6.7.0"
+    "@rjsf/utils": "^6.7.1"
   },
   "dependencies": {
     "lodash": "^4.18.1",
@@ -67,9 +67,9 @@
     "ajv": "^8.20.0",
     "atob": "^2.1.2",
     "react-portal": "^4.3.0",
-    "@rjsf/snapshot-tests": "^6.7.0",
-    "@rjsf/validator-ajv8": "^6.7.0",
-    "@rjsf/utils": "^6.7.0"
+    "@rjsf/snapshot-tests": "^6.7.1",
+    "@rjsf/utils": "^6.7.1",
+    "@rjsf/validator-ajv8": "^6.7.1"
   },
   "directories": {
     "test": "test"

package/src/components/fields/NumberField.tsx

@@ -7,18 +7,10 @@ import type {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
-import { asNumber } from '@rjsf/utils';
+import { asNumber, getDecimalSeparator, getUiOptions, optionsList } from '@rjsf/utils';
 
-// Matches a string that ends in a . character, optionally followed by a sequence of
-// digits followed by any number of 0 characters up until the end of the line.
-// Ensuring that there is at least one prefixed character is important so that
-// you don't incorrectly match against "0".
+// Static matchers for standard '.' separator used during normalization inside handleChange
 const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
-
-// This is used for trimming the trailing 0 and . characters without affecting
-// the rest of the string. Its possible to use one RegEx with groups for this
-// functionality, but it is fairly complex compared to simply defining two
-// different matchers.
 const trailingCharMatcher = /[0.]0*$/;
 
 /**
@@ -45,6 +37,9 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const [lastValue, setLastValue] = useState(initialValue);
   const { StringField } = registry.fields;
 
+  const separator = getDecimalSeparator();
+  const escapedSeparator = separator === '.' ? '\\.' : separator;
+
   let value = formData;
 
   /** Handle the change from the `StringField` to properly convert to a number
@@ -56,9 +51,12 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
       // Cache the original value in component state
       setLastValue(newValue);
 
+      // Convert locale separator to standard '.' first
+      const standardValue = typeof newValue === 'string' ? newValue.replace(separator, '.') : newValue;
+
       // Normalize decimals that don't start with a zero character in advance so
       // that the rest of the normalization logic is simpler
-      const normalizedValue = `${newValue}`.startsWith('.') ? `0${newValue}` : newValue;
+      const normalizedValue = `${standardValue}`.startsWith('.') ? `0${standardValue}` : standardValue;
 
       // Check that the value is a string (this can happen if the widget used is a
       // <select>, due to an enum declaration etc) then, if the value ends in a
@@ -70,14 +68,14 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
 
       onChange(processed as unknown as T, path, errorSchema, id);
     },
-    [onChange],
+    [onChange, separator],
   );
 
   if (typeof lastValue === 'string' && typeof value === 'number') {
     // Construct a regular expression that checks for a string that consists
-    // of the formData value suffixed with zero or one '.' characters and zero
+    // of the formData value suffixed with zero or one locale separator characters and zero
     // or more '0' characters
-    const re = new RegExp(`^(${String(value).replace('.', '\\.')})?\\.?0*$`);
+    const re = new RegExp(`^(${String(value).replace('.', escapedSeparator)})?${escapedSeparator}?0*$`);
 
     // If the cached "lastValue" is a match, use that instead of the formData
     // value to prevent the input value from changing in the UI
@@ -86,7 +84,23 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
     }
   }
 
-  return <StringField {...props} formData={value} onChange={handleChange} />;
+  // Format value to use the locale separator for rendering if it is a number
+  let displayValue: T | undefined = value;
+  if (typeof value === 'number' && separator !== '.') {
+    const { schema, uiSchema } = props;
+    const { schemaUtils } = registry;
+    const enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema, uiSchema) : undefined;
+    const defaultWidget = enumOptions ? 'select' : 'text';
+    const { widget = defaultWidget } = getUiOptions(uiSchema);
+
+    // Do not convert the value to a locale-specific string for radio, select,
+    // or hidden widgets because option matching relies on the original numeric value.
+    if (widget !== 'radio' && widget !== 'select' && widget !== 'hidden') {
+      displayValue = String(value).replace('.', separator) as unknown as T;
+    }
+  }
+
+  return <StringField {...props} formData={displayValue} onChange={handleChange} />;
 }
 
 export default NumberField;

package/src/components/fields/ObjectField.tsx

@@ -72,6 +72,16 @@ function getDefaultValue<T = any, S extends StrictRJSFSchema = RJSFSchema, F ext
   }
 }
 
+function isAdditionalPropertySchema(schema: unknown) {
+  return Boolean((schema as RJSFMarkedSchema)?.[ADDITIONAL_PROPERTY_FLAG]);
+}
+
+function getAdditionalPropertyOrder<S extends StrictRJSFSchema = RJSFSchema>(
+  schemaProperties: NonNullable<S['properties']>,
+) {
+  return Object.keys(schemaProperties).filter((property) => isAdditionalPropertySchema(schemaProperties[property]));
+}
+
 /** Props for the `ObjectFieldProperty` component */
 interface ObjectFieldPropertyProps<
   T = any,
@@ -234,10 +244,17 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     [schemaUtils, rawSchema, formData],
   );
   const uiOptions = useMemo(() => getUiOptions<T, S, F>(uiSchema, globalUiOptions), [uiSchema, globalUiOptions]);
-  const { properties: schemaProperties = {} } = schema;
+  const schemaProperties = useMemo(() => schema.properties ?? {}, [schema.properties]);
   // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
   const childFieldPathId = props.childFieldPathId ?? fieldPathId;
   const lastRenamedProperty = useRef({ previousKey: '', currentKey: undefined as string | undefined });
+  const [additionalPropertyOrder, setAdditionalPropertyOrder] = useState(() =>
+    getAdditionalPropertyOrder<S>(schemaProperties),
+  );
+  const definedPropertyOrder = useMemo(() => {
+    const additionalPropertySet = new Set(getAdditionalPropertyOrder<S>(schemaProperties));
+    return Object.keys(schemaProperties).filter((property) => !additionalPropertySet.has(property));
+  }, [schemaProperties]);
 
   const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
   const description = uiOptions.description ?? schema.description;
@@ -308,6 +325,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       lastRenamedProperty.current.currentKey = newKey;
       lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
     }
+    setAdditionalPropertyOrder((order) => [...order, newKey]);
     onChange(newFormData, childFieldPathId.path);
   }, [formData, onChange, translateString, schemaUtils, childFieldPathId, getAvailableKey, schema]);
 
@@ -339,6 +357,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
           lastRenamedProperty.current.previousKey = oldKey;
         }
         lastRenamedProperty.current.currentKey = actualNewKey;
+        setAdditionalPropertyOrder((order) => order.map((property) => (property === oldKey ? actualNewKey : property)));
         onChange(renamedObj, childFieldPathId.path);
       }
     },
@@ -350,6 +369,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
    */
   const handleRemoveProperty = useCallback(
     (key: string) => {
+      setAdditionalPropertyOrder((order) => order.filter((property) => property !== key));
       onChange(ADDITIONAL_PROPERTY_KEY_REMOVE as T, [...childFieldPathId.path, key]);
     },
     [onChange, childFieldPathId],
@@ -369,8 +389,11 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
 
   if (!renderOptionalField || hasFormData) {
     try {
-      const properties = Object.keys(schemaProperties);
-      orderedProperties = orderProperties(properties, uiOptions.order);
+      const definedPropertySet = new Set(definedPropertyOrder);
+      const currentAdditionalProperties = additionalPropertyOrder.filter(
+        (property) => Object.hasOwn(schemaProperties, property) && !definedPropertySet.has(property),
+      );
+      orderedProperties = orderProperties([...definedPropertyOrder, ...currentAdditionalProperties], uiOptions.order);
     } catch (err) {
       return (
         <div>
@@ -395,9 +418,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     title: uiOptions.label === false ? '' : templateTitle,
     description: uiOptions.label === false ? undefined : description,
     properties: orderedProperties.map((propertyName) => {
-      const addedByAdditionalProperties = Boolean(
-        (schema.properties?.[propertyName] as RJSFMarkedSchema)?.[ADDITIONAL_PROPERTY_FLAG],
-      );
+      const addedByAdditionalProperties = isAdditionalPropertySchema(schema.properties?.[propertyName]);
       const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[propertyName];
       const hidden = getUiOptions<T, S, F>(fieldUiSchema).widget === 'hidden';
       const content = (