fix: Unify behavior of empty and undefined viewSpec.order in object form (#246)

Author: arteria32

src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.tsx

@@ -59,9 +59,14 @@ export const MultiOneOf: React.FC<MultiOneOfProps> = (props) => {
         [spec.properties],
     );
 
+    const propertiesOrder = React.useMemo(
+        () => (spec.viewSpec.order?.length ? spec.viewSpec.order : Object.keys(specProperties)),
+        [spec.viewSpec.order, specProperties],
+    );
+
     const options = React.useMemo(
         () =>
-            (spec.viewSpec.order || Object.keys(specProperties)).map((value) => {
+            propertiesOrder.map((value) => {
                 const title =
                     spec.description?.[value] ||
                     specProperties[value]?.viewSpec.layoutTitle ||
@@ -74,7 +79,7 @@ export const MultiOneOf: React.FC<MultiOneOfProps> = (props) => {
                     content: title,
                 };
             }),
-        [spec.description, spec.viewSpec.order, specProperties],
+        [propertiesOrder, spec.description, specProperties],
     );
 
     const filterable = React.useMemo(() => (options.length || 0) > 9, [options.length]);

src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx

@@ -82,7 +82,9 @@ export const ObjectBase: React.FC<ObjectBaseProps> = ({
             : spec.properties;
 
         const delimiter = spec.viewSpec.delimiter;
-        const orderProperties = spec.viewSpec.order || Object.keys(specProperties);
+        const orderProperties = spec.viewSpec.order?.length
+            ? spec.viewSpec.order
+            : Object.keys(specProperties);
 
         return (
             <div className={b('content', {inline})}>

src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx

@@ -31,7 +31,9 @@ export const ObjectBaseView: React.FC<ObjectBaseViewProps> = ({
             : spec.properties;
 
         const delimiter = spec.viewSpec.delimiter;
-        const orderProperties = spec.viewSpec.order || Object.keys(specProperties);
+        const orderProperties = spec.viewSpec.order?.length
+            ? spec.viewSpec.order
+            : Object.keys(specProperties);
 
         return (
             <div className={b('content', {inline})}>

src/lib/kit/hooks/useOneOf/useOneOf.tsx

@@ -43,7 +43,11 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
             }
         }
 
-        return (valueKeys || spec.viewSpec.order || Object.keys(specProperties))[0];
+        if (valueKeys) return valueKeys[0];
+
+        if (spec.viewSpec.order?.length) return spec.viewSpec.order[0];
+
+        return Object.keys(specProperties)[0];
     });
 
     const onOneOfChange = React.useCallback(
@@ -81,9 +85,14 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
         return undefined;
     }, [oneOfValue, specBooleanMap]);
 
+    const propertiesOrder = React.useMemo(
+        () => (spec.viewSpec.order?.length ? spec.viewSpec.order : Object.keys(specProperties)),
+        [spec.viewSpec.order, specProperties],
+    );
+
     const options = React.useMemo(
         () =>
-            (spec.viewSpec.order || Object.keys(specProperties)).map((value) => {
+            propertiesOrder.map((value) => {
                 const title =
                     spec.description?.[value] ||
                     specProperties[value]?.viewSpec.layoutTitle ||
@@ -96,7 +105,7 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
                     content: title,
                 };
             }),
-        [spec.description, spec.viewSpec.order, specProperties],
+        [propertiesOrder, spec.description, specProperties],
     );
 
     const togglerType = React.useMemo(() => {