@rjsf/core 6.7.0 → 6.8.0

package/lib/components/fields/NumberField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/NumberField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,EACV,eAAe,EACf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAerB;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACpG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,+BAgD3B;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/NumberField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,EACV,eAAe,EACf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAOrB;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACpG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,+BAsE3B;AAED,eAAe,WAAW,CAAC"}

package/lib/components/fields/NumberField.js

@@ -1,15 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
-import { asNumber } 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".
+import { asNumber, getDecimalSeparator, getUiOptions, optionsList } from '@rjsf/utils';
+// 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*$/;
 /**
  * The NumberField class has some special handling for dealing with trailing
@@ -32,6 +25,8 @@ function NumberField(props) {
     const { registry, onChange, formData, value: initialValue } = props;
     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
      *
@@ -40,9 +35,11 @@ function NumberField(props) {
     const handleChange = useCallback((newValue, path, errorSchema, id) => {
         // 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
         // trailing decimal point or multiple zeroes, strip the trailing values
@@ -50,18 +47,32 @@ function NumberField(props) {
             ? asNumber(normalizedValue.replace(trailingCharMatcher, ''))
             : asNumber(normalizedValue);
         onChange(processed, 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
         if (lastValue.match(re)) {
             value = lastValue;
         }
     }
-    return _jsx(StringField, { ...props, formData: value, onChange: handleChange });
+    // Format value to use the locale separator for rendering if it is a number
+    let displayValue = 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);
+        }
+    }
+    return _jsx(StringField, { ...props, formData: displayValue, onChange: handleChange });
 }
 export default NumberField;

package/lib/components/fields/ObjectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ObjectField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAIV,UAAU,EACV,eAAe,EAIf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AA6LrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACnH,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,+BA8O3B"}
+{"version":3,"file":"ObjectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ObjectField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAIV,UAAU,EACV,eAAe,EAIf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAuMrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACnH,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,+BAyP3B"}

package/lib/components/fields/ObjectField.js

@@ -39,6 +39,12 @@ function getDefaultValue(translateString, type) {
             return translateString(TranslatableString.NewStringDefault);
     }
 }
+function isAdditionalPropertySchema(schema) {
+    return Boolean(schema?.[ADDITIONAL_PROPERTY_FLAG]);
+}
+function getAdditionalPropertyOrder(schemaProperties) {
+    return Object.keys(schemaProperties).filter((property) => isAdditionalPropertySchema(schemaProperties[property]));
+}
 /** The `ObjectFieldProperty` component is used to render the `SchemaField` for a child property of an object
  */
 function ObjectFieldPropertyFn(props) {
@@ -103,10 +109,15 @@ export default function ObjectField(props) {
     formDataRef.current = formData;
     const schema = useMemo(() => schemaUtils.retrieveSchema(rawSchema, formData, true), [schemaUtils, rawSchema, formData]);
     const uiOptions = useMemo(() => getUiOptions(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 });
+    const [additionalPropertyOrder, setAdditionalPropertyOrder] = useState(() => getAdditionalPropertyOrder(schemaProperties));
+    const definedPropertyOrder = useMemo(() => {
+        const additionalPropertySet = new Set(getAdditionalPropertyOrder(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;
     const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
@@ -169,6 +180,7 @@ export default function ObjectField(props) {
             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]);
     /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
@@ -197,6 +209,7 @@ export default function ObjectField(props) {
                 lastRenamedProperty.current.previousKey = oldKey;
             }
             lastRenamedProperty.current.currentKey = actualNewKey;
+            setAdditionalPropertyOrder((order) => order.map((property) => (property === oldKey ? actualNewKey : property)));
             onChange(renamedObj, childFieldPathId.path);
         }
     }, [onChange, childFieldPathId, getAvailableKey]);
@@ -204,6 +217,7 @@ export default function ObjectField(props) {
      * value for the path plus the key to be removed
      */
     const handleRemoveProperty = useCallback((key) => {
+        setAdditionalPropertyOrder((order) => order.filter((property) => property !== key));
         onChange(ADDITIONAL_PROPERTY_KEY_REMOVE, [...childFieldPathId.path, key]);
     }, [onChange, childFieldPathId]);
     /** Returns the stable React key for a property. For the most recently renamed
@@ -219,8 +233,9 @@ export default function ObjectField(props) {
     }, []);
     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 (_jsxs("div", { children: [_jsx("p", { className: 'rjsf-config-error', style: { color: 'red' }, children: _jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(TranslatableString.InvalidObjectField, [name || 'root', err.message]) }) }), _jsx("pre", { children: JSON.stringify(schema) })] }));
@@ -233,7 +248,7 @@ export default function ObjectField(props) {
         title: uiOptions.label === false ? '' : templateTitle,
         description: uiOptions.label === false ? undefined : description,
         properties: orderedProperties.map((propertyName) => {
-            const addedByAdditionalProperties = Boolean(schema.properties?.[propertyName]?.[ADDITIONAL_PROPERTY_FLAG]);
+            const addedByAdditionalProperties = isAdditionalPropertySchema(schema.properties?.[propertyName]);
             const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[propertyName];
             const hidden = getUiOptions(fieldUiSchema).widget === 'hidden';
             const content = (_jsx(ObjectFieldProperty, { propertyName: propertyName, required: isRequired(schema, propertyName), schema: get(schema, [PROPERTIES_KEY, propertyName], {}), uiSchema: fieldUiSchema, errorSchema: get(errorSchema, [propertyName]), fieldPathId: childFieldPathId, formData: get(formData, [propertyName]), handleKeyRename: handleKeyRename, handleRemoveProperty: handleRemoveProperty, addedByAdditionalProperties: addedByAdditionalProperties, onChange: onChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }, getStableKey(propertyName)));

package/lib/components/widgets/TimeWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/TimeWidget.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG9F;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAClH,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,+BAO5B"}
+{"version":3,"file":"TimeWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/TimeWidget.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG9F;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAClH,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,+BAsB5B"}

package/lib/components/widgets/TimeWidget.js

@@ -7,8 +7,20 @@ import { getTemplate } from '@rjsf/utils';
  * @param props - The `WidgetProps` for this component
  */
 export default function TimeWidget(props) {
-    const { onChange, options, registry } = props;
+    const { onChange, options, registry, schema, value } = props;
     const BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
-    const handleChange = useCallback((value) => onChange(value ? `${value}:00` : undefined), [onChange]);
-    return _jsx(BaseInputTemplate, { type: 'time', ...props, onChange: handleChange });
+    const hasSecondPrecision = typeof schema.multipleOf === 'number' && Number.isFinite(schema.multipleOf) && schema.multipleOf < 60;
+    const handleChange = useCallback((newValue) => {
+        if (!newValue) {
+            onChange(undefined);
+        }
+        else if (hasSecondPrecision) {
+            onChange(newValue);
+        }
+        else {
+            onChange(`${newValue}:00`);
+        }
+    }, [hasSecondPrecision, onChange]);
+    const displayValue = typeof value === 'string' && !hasSecondPrecision && /^\d{2}:\d{2}:00$/.test(value) ? value.slice(0, -3) : value;
+    return _jsx(BaseInputTemplate, { type: 'time', ...props, value: displayValue, onChange: handleChange });
 }