diff --git a/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.tsx b/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.tsx index 12575f4f..802e8ae0 100644 --- a/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.tsx +++ b/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.tsx @@ -59,9 +59,14 @@ export const MultiOneOf: React.FC = (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 = (props) => { content: title, }; }), - [spec.description, spec.viewSpec.order, specProperties], + [propertiesOrder, spec.description, specProperties], ); const filterable = React.useMemo(() => (options.length || 0) > 9, [options.length]); diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx index caf0a5bf..24ef2762 100644 --- a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx +++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx @@ -82,7 +82,9 @@ export const ObjectBase: React.FC = ({ : 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 (
diff --git a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx index 0e512b9f..305fbd36 100644 --- a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx +++ b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx @@ -31,7 +31,9 @@ export const ObjectBaseView: React.FC = ({ : 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 (
diff --git a/src/lib/kit/hooks/useOneOf/useOneOf.tsx b/src/lib/kit/hooks/useOneOf/useOneOf.tsx index 0c3ee768..139b0ed7 100644 --- a/src/lib/kit/hooks/useOneOf/useOneOf.tsx +++ b/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(() => {