fumadocs-openapi 8.1.2 → 8.1.4

package/dist/playground/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getPreferredType, } from '../utils/schema.js';
+import { getPreferredType } from '../utils/schema.js';
 import { getSecurities } from '../utils/get-security.js';
 import { ClientLazy } from '../playground/client.lazy.js';
 export async function APIPlayground({ path, method, ctx, client, }) {
@@ -15,18 +15,20 @@ export async function APIPlayground({ path, method, ctx, client, }) {
         registered: new WeakMap(),
         render: ctx,
     };
-    const bodySchema = bodyContent && mediaType && bodyContent[mediaType].schema
-        ? toSchema(bodyContent[mediaType].schema, true, context)
-        : undefined;
     const props = {
         authorization: getAuthorizationField(method, ctx),
         method: method.method,
         route: path,
-        parameters: method.parameters?.map((v) => parameterToField(v, context)),
-        body: bodySchema && mediaType
+        parameters: method.parameters?.map((v) => ({
+            name: v.name,
+            in: v.in,
+            schema: writeReferences((v.schema ?? true), context),
+            description: v.description,
+        })),
+        body: bodyContent && mediaType
             ? {
-                ...bodySchema,
-                mediaType: mediaType,
+                schema: writeReferences(bodyContent[mediaType].schema, context),
+                mediaType,
             }
             : undefined,
         references: context.references,
@@ -35,6 +37,39 @@ export async function APIPlayground({ path, method, ctx, client, }) {
     };
     return _jsx(ClientLazy, { ...props });
 }
+function writeReferences(schema, ctx, stack = new WeakMap()) {
+    if (typeof schema !== 'object' || !schema)
+        return schema;
+    if (stack.has(schema)) {
+        const out = stack.get(schema);
+        const id = ctx.nextId();
+        ctx.references[id] = out;
+        return {
+            $ref: id,
+        };
+    }
+    const output = { ...schema };
+    stack.set(schema, output);
+    for (const name of ['items', 'additionalProperties']) {
+        if (!output[name])
+            continue;
+        output[name] = writeReferences(output[name], ctx, stack);
+    }
+    for (const name of ['oneOf', 'allOf', 'anyOf']) {
+        if (!output[name])
+            continue;
+        output[name] = output[name].map((item) => writeReferences(item, ctx, stack));
+    }
+    for (const name of ['properties', 'patternProperties']) {
+        if (!output[name])
+            continue;
+        output[name] = { ...output[name] };
+        for (const key in output[name]) {
+            output[name][key] = writeReferences(output[name][key], ctx, stack);
+        }
+    }
+    return output;
+}
 function getAuthorizationField(method, { schema: { document } }) {
     const security = method.security ?? document.security ?? [];
     if (security.length === 0)
@@ -64,134 +99,3 @@ function getAuthorizationField(method, { schema: { document } }) {
         ...scheme,
     };
 }
-function getIdFromSchema(schema, required, ctx) {
-    const registered = ctx.registered.get(schema);
-    if (registered === undefined) {
-        const id = ctx.nextId();
-        ctx.registered.set(schema, id);
-        ctx.references[id] = toSchema(schema, required, ctx);
-        return id;
-    }
-    return registered;
-}
-function parameterToField(v, ctx) {
-    const allowed = ['header', 'cookie', 'query', 'path'];
-    if (!allowed.includes(v.in))
-        throw new Error(`Unsupported parameter in: "${v.in}"`);
-    return {
-        name: v.name,
-        in: v.in,
-        ...toSchema(v.schema ?? { type: 'string' }, v.required ?? false, ctx),
-    };
-}
-function toReference(schema, required, ctx) {
-    return {
-        type: 'ref',
-        isRequired: required,
-        schema: getIdFromSchema(schema, false, ctx),
-    };
-}
-function toSchema(schema, required, ctx) {
-    if (schema.type === 'array') {
-        return {
-            type: 'array',
-            description: schema.description ?? schema.title,
-            isRequired: required,
-            items: getIdFromSchema(schema.items, false, ctx),
-        };
-    }
-    if (schema.type === 'object' ||
-        schema.properties !== undefined ||
-        schema.allOf !== undefined) {
-        const properties = {};
-        Object.entries(schema.properties ?? {}).forEach(([key, prop]) => {
-            properties[key] = toReference(prop, schema.required?.includes(key) ?? false, ctx);
-        });
-        schema.allOf?.forEach((c) => {
-            const field = toSchema(c, true, ctx);
-            if (field.type === 'object')
-                Object.assign(properties, field.properties);
-        });
-        const additional = schema.additionalProperties;
-        let additionalProperties;
-        if (additional && typeof additional === 'object') {
-            if ((!additional.type || additional.type.length === 0) &&
-                !additional.anyOf &&
-                !additional.allOf &&
-                !additional.oneOf) {
-                additionalProperties = true;
-            }
-            else {
-                additionalProperties = getIdFromSchema(additional, false, ctx);
-            }
-        }
-        else {
-            additionalProperties = additional;
-        }
-        return {
-            type: 'object',
-            isRequired: required,
-            description: schema.description ?? schema.title,
-            properties,
-            additionalProperties,
-        };
-    }
-    if (schema.type === undefined) {
-        const combine = schema.anyOf ?? schema.oneOf;
-        if (combine) {
-            return {
-                type: 'switcher',
-                description: schema.description ?? schema.title,
-                items: Object.fromEntries(combine.map((item, idx) => {
-                    return [
-                        item.title ?? item.type ?? `Item ${idx.toString()}`,
-                        toReference(item, true, ctx),
-                    ];
-                })),
-                isRequired: required,
-            };
-        }
-        return {
-            type: 'null',
-            isRequired: false,
-        };
-    }
-    if (ctx.allowFile && schema.type === 'string' && schema.format === 'binary') {
-        return {
-            type: 'file',
-            isRequired: required,
-            description: schema.description ?? schema.title,
-        };
-    }
-    if (Array.isArray(schema.type)) {
-        const items = {};
-        for (const type of schema.type) {
-            if (type === 'array') {
-                items[type] = {
-                    type,
-                    items: 'items' in schema && schema.items
-                        ? toSchema(schema.items, false, ctx)
-                        : toSchema({}, required, ctx),
-                    isRequired: required,
-                };
-            }
-            else {
-                items[type] = toSchema({
-                    ...schema,
-                    type,
-                }, required, ctx);
-            }
-        }
-        return {
-            type: 'switcher',
-            description: schema.description ?? schema.title,
-            items,
-            isRequired: required,
-        };
-    }
-    return {
-        type: schema.type === 'integer' ? 'number' : schema.type,
-        isRequired: required,
-        description: schema.description ?? schema.title,
-    };
-}

package/dist/playground/inputs.d.ts

@@ -1,26 +1,24 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import type { RequestSchema } from '../playground/index.js';
-type FieldOfType<Type> = Extract<RequestSchema, {
-    type: Type;
-}>;
-export declare function ObjectInput({ field, fieldName, ...props }: {
-    field: FieldOfType<'object'>;
+export declare function ObjectInput({ field: _field, fieldName, ...props }: {
+    field: Exclude<RequestSchema, boolean>;
     fieldName: string;
 } & HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare function JsonInput({ fieldName }: {
+export declare function JsonInput({ fieldName, children, }: {
     fieldName: string;
+    children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function FieldInput({ field, fieldName, ...props }: HTMLAttributes<HTMLElement> & {
-    field: Exclude<RequestSchema, {
-        type: 'switcher';
-    }>;
+export declare function FieldInput({ field, fieldName, isRequired, ...props }: HTMLAttributes<HTMLElement> & {
+    field: Exclude<RequestSchema, boolean>;
+    isRequired?: boolean;
     fieldName: string;
-}): import("react/jsx-runtime").JSX.Element | null;
-export declare function FieldSet({ field, fieldName, toolbar, name, ...props }: HTMLAttributes<HTMLElement> & {
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth, ...props }: HTMLAttributes<HTMLElement> & {
+    isRequired?: boolean;
     name?: ReactNode;
     field: RequestSchema;
     fieldName: string;
+    depth?: number;
     toolbar?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element | null;
-export {};
 //# sourceMappingURL=inputs.d.ts.map

package/dist/playground/inputs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../src/playground/inputs.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQxD,KAAK,WAAW,CAAC,IAAI,IAAI,OAAO,CAAC,aAAa,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AA6BhE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,2CAqBjC;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,2CAuB7D;AA+ID,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE;QAAE,IAAI,EAAE,UAAU,CAAA;KAAE,CAAC,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;CACnB,kDAmGA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,kDAgGA"}
+{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../src/playground/inputs.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AA8CxD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,MAAM,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,2CAqCjC;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CA0BA;AAyFD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB,2CA+FA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EAAE,MAAM,EACb,SAAS,EACT,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,kDA2HA"}

package/dist/playground/inputs.js

@@ -4,126 +4,88 @@ import { useState, } from 'react';
 import { Plus, Trash2 } from '../icons.js';
 import { Controller, useController, useFieldArray, useFormContext, } from 'react-hook-form';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/components/select.js';
-import { resolve } from '../playground/resolve.js';
 import { Input, labelVariants } from '../ui/components/input.js';
 import { getDefaultValue } from './get-default-values.js';
-import { useSchemaContext } from './client.js';
 import { cn } from 'fumadocs-ui/utils/cn';
 import { buttonVariants } from 'fumadocs-ui/components/ui/button';
+import { combineSchema } from '../utils/combine-schema.js';
+import { schemaToString } from '../utils/schema-to-string.js';
+import { anyFields, useFieldInfo, useResolvedSchema, } from '../playground/schema.js';
 function FieldHeader({ name, required = false, type, ...props }) {
-    return (_jsxs("label", { ...props, className: cn('w-full inline-flex items-center gap-1', props.className), children: [_jsx("span", { className: cn(labelVariants()), children: name }), required ? _jsx("span", { className: "text-red-500", children: "*" }) : null, _jsx("div", { className: "flex-1" }), type ? (_jsx("code", { className: "text-xs text-fd-muted-foreground", children: type })) : null, props.children] }));
+    return (_jsxs("label", { ...props, className: cn('w-full inline-flex items-center gap-1', props.className), children: [_jsxs("span", { className: cn(labelVariants()), children: [name, required ? _jsx("span", { className: "text-red-400/80 mx-1", children: "*" }) : null] }), _jsx("div", { className: "flex-1" }), type ? (_jsx("code", { "data-type": true, className: "text-xs text-fd-muted-foreground", children: type })) : null, props.children] }));
 }
-export function ObjectInput({ field, fieldName, ...props }) {
-    const { references } = useSchemaContext();
-    return (_jsxs("div", { ...props, className: cn('flex flex-col gap-6', props.className), children: [Object.entries(field.properties).map(([key, child]) => (_jsx(FieldSet, { name: key, field: resolve(child, references), fieldName: `${fieldName}.${key}` }, key))), field.additionalProperties ? (_jsx(AdditionalProperties, { fieldName: fieldName, type: field.additionalProperties })) : null] }));
+export function ObjectInput({ field: _field, fieldName, ...props }) {
+    const field = useResolvedSchema(combineSchema([_field, ...(_field.allOf ?? []), ...(_field.anyOf ?? [])]));
+    return (_jsxs("div", { ...props, className: cn('flex flex-col gap-6', props.className), children: [Object.entries(field.properties ?? {}).map(([key, child]) => (_jsx(FieldSet, { name: key, field: child, fieldName: `${fieldName}.${key}`, isRequired: field.required?.includes(key) }, key))), (field.additionalProperties || field.patternProperties) && (_jsx(DynamicProperties, { fieldName: fieldName, filterKey: (v) => !field.properties || !Object.keys(field.properties).includes(v), getType: (key) => {
+                    for (const pattern in field.patternProperties) {
+                        if (key.match(RegExp(pattern))) {
+                            return field.patternProperties[pattern];
+                        }
+                    }
+                    if (field.additionalProperties)
+                        return field.additionalProperties;
+                    return anyFields;
+                } }))] }));
 }
-export function JsonInput({ fieldName }) {
+export function JsonInput({ fieldName, children, }) {
     const controller = useController({
         name: fieldName,
     });
     const [value, setValue] = useState(() => JSON.stringify(controller.field.value, null, 2));
-    return (_jsx("textarea", { ...controller.field, value: value, className: "w-full h-[300px] text-[13px] font-mono resize-none rounded-lg border p-2 bg-fd-secondary text-fd-secondary-foreground focus-visible:outline-none", onChange: (v) => {
-            setValue(v.target.value);
-            try {
-                controller.field.onChange(JSON.parse(v.target.value));
-            }
-            catch {
-                // ignore
-            }
-        } }));
+    return (_jsxs("div", { className: "rounded-lg border bg-fd-secondary text-fd-secondary-foreground", children: [children, _jsx("textarea", { ...controller.field, value: value, className: "p-2 w-full h-[240px] text-[13px] font-mono resize-none focus-visible:outline-none", onChange: (v) => {
+                    setValue(v.target.value);
+                    try {
+                        controller.field.onChange(JSON.parse(v.target.value));
+                    }
+                    catch {
+                        // ignore
+                    }
+                } })] }));
 }
-function AdditionalProperties({ fieldName, type, }) {
+function DynamicProperties({ fieldName, filterKey = () => true, getType = () => anyFields, }) {
     const { control, setValue, getValues } = useFormContext();
-    const { references } = useSchemaContext();
     const [nextName, setNextName] = useState('');
     const [properties, setProperties] = useState(() => {
         const value = getValues(fieldName);
         if (value)
-            return Object.keys(value);
+            return Object.keys(value).filter(filterKey);
         return [];
     });
-    const types = typeof type === 'string'
-        ? resolveDynamicTypes(references[type], references)
-        : anyFields;
     const onAppend = () => {
         const name = nextName.trim();
         if (name.length === 0)
             return;
         setProperties((p) => {
-            if (p.includes(name))
+            if (p.includes(name) || !filterKey(name))
                 return p;
-            setValue(`${fieldName}.${name}`, getDefaultValue(Object.values(types)[0], references));
+            const type = getType(name);
+            setValue(`${fieldName}.${name}`, getDefaultValue(type));
             setNextName('');
             return [...p, name];
         });
     };
-    return (_jsxs(_Fragment, { children: [properties.map((item) => (_jsx(FieldSet, { name: item, field: {
-                    type: 'switcher',
-                    items: types,
-                    isRequired: false,
-                }, fieldName: `${fieldName}.${item}`, toolbar: _jsx("button", { type: "button", "aria-label": "Remove Item", className: cn(buttonVariants({
-                        color: 'secondary',
-                        size: 'sm',
+    return (_jsxs(_Fragment, { children: [properties.map((item) => (_jsx(FieldSet, { name: item, field: getType(item), fieldName: `${fieldName}.${item}`, toolbar: _jsx("button", { type: "button", "aria-label": "Remove Item", className: cn(buttonVariants({
+                        color: 'ghost',
+                        className: 'p-1',
                     })), onClick: () => {
                         setProperties((p) => p.filter((prop) => prop !== item));
                         control.unregister(`${fieldName}.${item}`);
-                    }, children: _jsx(Trash2, { className: "size-4" }) }) }, item))), _jsxs("div", { className: "flex flex-row gap-1", children: [_jsx(Input, { value: nextName, placeholder: "Enter Property Name", onChange: (e) => {
-                            setNextName(e.target.value);
-                        }, onKeyDown: (e) => {
+                    }, children: _jsx(Trash2, { className: "size-4" }) }) }, item))), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: nextName, placeholder: "Enter Property Name", onChange: (e) => setNextName(e.target.value), onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 onAppend();
                                 e.preventDefault();
                             }
-                        } }), _jsx("button", { type: "button", className: cn(buttonVariants({ color: 'secondary' })), onClick: onAppend, children: "New" })] })] }));
+                        } }), _jsx("button", { type: "button", className: cn(buttonVariants({ color: 'secondary', size: 'sm' }), 'px-4'), onClick: onAppend, children: "New" })] })] }));
 }
-function resolveDynamicTypes(schema, references) {
-    if (schema.type !== 'switcher')
-        return { [schema.type]: schema };
-    return Object.fromEntries(Object.entries(schema.items).map(([key, value]) => [
-        key,
-        resolve(value, references),
-    ]));
-}
-const anyFields = {
-    string: {
-        type: 'string',
-        isRequired: false,
-    },
-    boolean: {
-        type: 'boolean',
-        isRequired: false,
-    },
-    number: {
-        type: 'number',
-        isRequired: false,
-    },
-    object: {
-        type: 'object',
-        properties: {},
-        additionalProperties: true,
-        isRequired: false,
-    },
-};
-anyFields.array = {
-    type: 'array',
-    isRequired: false,
-    items: {
-        type: 'switcher',
-        isRequired: false,
-        items: anyFields,
-    },
-};
-export function FieldInput({ field, fieldName, ...props }) {
+export function FieldInput({ field, fieldName, isRequired, ...props }) {
     const { control, register } = useFormContext();
-    if (field.type === 'null')
-        return null;
     if (field.type === 'object') {
         return (_jsx(ObjectInput, { field: field, fieldName: fieldName, ...props, className: cn('rounded-lg border border-fd-primary/20 bg-fd-background/50 p-3 shadow-sm', props.className) }));
     }
     if (field.type === 'array') {
-        return (_jsx(ArrayInput, { fieldName: fieldName, field: field, ...props, className: cn('rounded-lg border border-fd-primary/20 bg-fd-background/50 p-3 shadow-sm', props.className) }));
+        return (_jsx(ArrayInput, { fieldName: fieldName, items: field.items ?? anyFields, ...props, className: cn('rounded-lg border border-fd-primary/20 bg-fd-background/50 p-3 shadow-sm', props.className) }));
     }
-    if (field.type === 'file') {
+    if (field.type === 'string' && field.format === 'binary') {
         return (_jsx(Controller, { control: control, name: fieldName, render: ({ field: { value: _, onChange, ...restField } }) => (_jsx("input", { id: fieldName, type: "file", multiple: false, onChange: (e) => {
                     if (!e.target.files)
                         return;
@@ -131,74 +93,55 @@ export function FieldInput({ field, fieldName, ...props }) {
                 }, ...props, ...restField })) }));
     }
     if (field.type === 'boolean') {
-        return (_jsx(Controller, { control: control, name: fieldName, render: ({ field: { value, onChange, ...restField } }) => (_jsxs(Select, { value: String(value), onValueChange: (value) => onChange(value === 'null' ? null : value === 'true'), disabled: restField.disabled, children: [_jsx(SelectTrigger, { id: fieldName, className: props.className, ...restField, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "true", children: "True" }), _jsx(SelectItem, { value: "false", children: "False" }), field.isRequired ? null : (_jsx(SelectItem, { value: "null", children: "Null" }))] })] })) }));
+        return (_jsx(Controller, { control: control, name: fieldName, render: ({ field: { value, onChange, ...restField } }) => (_jsxs(Select, { value: String(value), onValueChange: (value) => onChange(value === 'null' ? null : value === 'true'), disabled: restField.disabled, children: [_jsx(SelectTrigger, { id: fieldName, className: props.className, ...restField, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "true", children: "True" }), _jsx(SelectItem, { value: "false", children: "False" }), !isRequired && _jsx(SelectItem, { value: "null", children: "Null" })] })] })) }));
     }
     return (_jsx(Input, { id: fieldName, placeholder: "Enter value", type: field.type === 'string' ? 'text' : 'number', ...register(fieldName, {
-            valueAsNumber: field.type === 'number',
+            valueAsNumber: field.type === 'number' || field.type === 'integer',
         }), ...props }));
 }
-export function FieldSet({ field, fieldName, toolbar, name, ...props }) {
-    const form = useFormContext();
-    const { references, dynamic } = useSchemaContext();
-    const [type, setType] = useState(() => {
-        if (field.type !== 'switcher')
-            return '';
-        const d = dynamic.current.get(fieldName);
-        const items = Object.keys(field.items);
-        if (d?.type === 'field') {
-            // schemas are passed from server components, object references are maintained
-            const cached = items.find((item) => d.schema === field.items[item]);
-            if (cached)
-                return cached;
-        }
-        const value = form.getValues(fieldName);
-        let type = typeof value;
-        if (Array.isArray(value)) {
-            type = 'array';
-        }
-        else if (value instanceof File) {
-            type = 'file';
-        }
-        else if (value === null) {
-            type = 'null';
-        }
-        return items.find((item) => field.items[item].type === type) ?? items[0];
-    });
-    if (field.type === 'null')
+export function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth = 0, ...props }) {
+    const field = useResolvedSchema(_field);
+    const [show, setShow] = useState(() => typeof _field !== 'object' ||
+        !_field.$ref ||
+        (field.type !== 'object' && !field.allOf && !field.oneOf && !field.anyOf));
+    const { info, updateInfo } = useFieldInfo(fieldName, field, depth);
+    if (_field === false)
         return null;
-    if (field.type === 'switcher') {
-        const child = resolve(field.items[type], references);
-        return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsxs(FieldHeader, { name: name, htmlFor: fieldName, required: field.isRequired, children: [_jsx("select", { value: type, onChange: (e) => {
-                                const value = e.target.value;
-                                if (value === type)
-                                    return;
-                                setType(value);
-                                dynamic.current.set(fieldName, {
-                                    type: 'field',
-                                    schema: field.items[value],
+    if (!show) {
+        return (_jsxs(FieldHeader, { ...props, name: name, required: isRequired, children: [toolbar, _jsx("button", { type: "button", className: cn(buttonVariants({ size: 'sm' })), onClick: () => setShow(true), children: "Show" })] }));
+    }
+    if (field.oneOf) {
+        return (_jsx(FieldSet, { ...props, className: cn(props.className, '[&>label>[data-type]]:hidden'), name: name, fieldName: fieldName, isRequired: isRequired, field: field.oneOf[info.oneOf], depth: depth + 1, toolbar: _jsxs(_Fragment, { children: [_jsx("select", { className: "text-xs font-mono", value: info.oneOf, onChange: (e) => {
+                            updateInfo({
+                                oneOf: Number(e.target.value),
+                            });
+                        }, children: field.oneOf.map((item, i) => (_jsx("option", { value: i, children: schemaToString(item) }, i))) }), toolbar] }) }));
+    }
+    if (Array.isArray(field.type)) {
+        return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsxs(FieldHeader, { name: name, htmlFor: fieldName, required: isRequired, children: [_jsx("select", { className: "text-xs font-mono", value: info.selectedType, onChange: (e) => {
+                                updateInfo({
+                                    selectedType: e.target.value,
                                 });
-                                form.setValue(fieldName, getDefaultValue(field.items[value], references));
-                            }, className: "text-xs", children: Object.keys(field.items).map((item) => (_jsx("option", { value: item, children: item }, item))) }), toolbar] }), _jsx("p", { className: "text-xs text-fd-muted-foreground", children: field.description }), child.type === 'switcher' ? (_jsx(FieldSet, { field: child, fieldName: fieldName })) : (_jsx(FieldInput, { field: child, fieldName: fieldName }))] }));
+                            }, children: field.type.map((item) => (_jsx("option", { value: item, children: item }, item))) }), toolbar] }), _jsx("p", { className: "text-xs text-fd-muted-foreground", children: field.description }), _jsx(FieldInput, { isRequired: isRequired, field: {
+                        ...field,
+                        type: info.selectedType,
+                    }, fieldName: fieldName })] }));
     }
-    return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsx(FieldHeader, { htmlFor: fieldName, name: name, required: field.isRequired, type: field.type, children: toolbar }), _jsx(FieldInput, { field: field, fieldName: fieldName })] }));
+    return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsx(FieldHeader, { htmlFor: fieldName, name: name, required: isRequired, type: field.oneOf ? undefined : schemaToString(field), children: toolbar }), show ? (_jsx(FieldInput, { field: field, fieldName: fieldName, isRequired: isRequired })) : (_jsx("div", { children: _jsx("button", { onClick: () => setShow((prev) => !prev), children: "Show" }) }))] }));
 }
-function ArrayInput({ fieldName, field, ...props }) {
-    const { references } = useSchemaContext();
-    const items = resolve(field.items, references);
+function ArrayInput({ fieldName, items, ...props }) {
     const name = fieldName.split('.').at(-1) ?? '';
     const { fields, append, remove } = useFieldArray({
         name: fieldName,
     });
     return (_jsxs("div", { ...props, className: cn('flex flex-col gap-2', props.className), children: [fields.map((item, index) => (_jsx(FieldSet, { name: _jsxs("span", { className: "text-fd-muted-foreground", children: [name, "[", index, "]"] }), field: items, fieldName: `${fieldName}.${index}`, toolbar: _jsx("button", { type: "button", "aria-label": "Remove Item", className: cn(buttonVariants({
-                        color: 'secondary',
-                        size: 'sm',
-                    })), onClick: () => {
-                        remove(index);
-                    }, children: _jsx(Trash2, { className: "size-4" }) }) }, item.id))), _jsxs("button", { type: "button", className: cn(buttonVariants({
+                        color: 'ghost',
+                        className: 'p-1',
+                    })), onClick: () => remove(index), children: _jsx(Trash2, { className: "size-4" }) }) }, item.id))), _jsxs("button", { type: "button", className: cn(buttonVariants({
                     color: 'outline',
                     className: 'gap-1.5 py-2',
                     size: 'sm',
                 })), onClick: () => {
-                    append(getDefaultValue(items, references));
+                    append(getDefaultValue(items));
                 }, children: [_jsx(Plus, { className: "size-4" }), "New Item"] })] }));
 }

package/dist/playground/schema.d.ts

@@ -0,0 +1,38 @@
+import { Ajv2020 } from 'ajv/dist/2020';
+import type { RequestSchema } from '../playground/index.js';
+import { ReactNode } from 'react';
+interface SchemaContextType {
+    references: Record<string, RequestSchema>;
+    fieldInfoMap: Map<string, FieldInfo>;
+    ajv: Ajv2020;
+}
+export interface FieldInfo {
+    selectedType?: string;
+    oneOf: number;
+}
+export declare const anyFields: {
+    type: string[];
+    items: true;
+    additionalProperties: true;
+};
+export declare function SchemaProvider({ references, fieldInfoMap, children, }: Omit<SchemaContextType, 'ajv'> & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * A hook to store dynamic info of a field, such as selected schema of `oneOf`.
+ *
+ * @param fieldName - field name of form.
+ * @param schema - The JSON Schema to generate initial values.
+ * @param depth - The depth to avoid duplicated field name with same schema (e.g. nested `oneOf`).
+ */
+export declare function useFieldInfo(fieldName: string, schema: Exclude<RequestSchema, boolean>, depth: number): {
+    info: FieldInfo;
+    updateInfo: (value: Partial<FieldInfo>) => void;
+};
+/**
+ * Resolve `$ref` in the schema, **not recursive**.
+ */
+export declare function useResolvedSchema(schema: RequestSchema): Exclude<RequestSchema, boolean>;
+export declare function fallbackAny(schema: RequestSchema): Exclude<RequestSchema, boolean>;
+export {};
+//# sourceMappingURL=schema.d.ts.map

package/dist/playground/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/playground/schema.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAiB,SAAS,EAAiC,MAAM,OAAO,CAAC;AAKhF,UAAU,iBAAiB;IACzB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACrC,GAAG,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,eAAO,MAAM,SAAS;;;;CAIG,CAAC;AAE1B,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,QAAQ,GACT,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsB1D;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,EACvC,KAAK,EAAE,MAAM,GACZ;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;CACjD,CAiEA;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,aAAa,GACpB,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAQjC;AAED,wBAAgB,WAAW,CACzB,MAAM,EAAE,aAAa,GACpB,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAEjC"}