@rjsf/core 6.7.0 → 6.8.0

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 = (

package/src/components/widgets/TimeWidget.tsx

@@ -10,9 +10,24 @@ import { getTemplate } from '@rjsf/utils';
 export default function TimeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: WidgetProps<T, S, F>,
 ) {
-  const { onChange, options, registry } = props;
+  const { onChange, options, registry, schema, value } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
-  const handleChange = useCallback((value: any) => onChange(value ? `${value}:00` : undefined), [onChange]);
+  const hasSecondPrecision =
+    typeof schema.multipleOf === 'number' && Number.isFinite(schema.multipleOf) && schema.multipleOf < 60;
+  const handleChange = useCallback(
+    (newValue: any) => {
+      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 <BaseInputTemplate type='time' {...props} onChange={handleChange} />;
+  return <BaseInputTemplate type='time' {...props} value={displayValue} onChange={handleChange} />;
 }