feat(OneOfControl): add segmented option to OneOfControl

src/controls/combinators/CombinatorSchemaSwitcher.tsx

@@ -1,4 +1,4 @@
-import { Radio, RadioChangeEvent, Select } from "antd"
+import { Radio, RadioChangeEvent, Segmented, Select } from "antd"
 import { OneOfControlOptions } from "../../ui-schema"
 import merge from "lodash.merge"
 import { useEffect, useState } from "react"
@@ -102,6 +102,16 @@ export function CombinatorSchemaSwitcher({
           defaultValue={selectedIndex}
         />
       )
+    case "segmented":
+      return (
+        <Segmented
+          options={options}
+          onChange={(combinatorIndex: number) =>
+            setSelectedIndex(combinatorIndex)
+          }
+          value={selectedIndex}
+        />
+      )
     case "radio":
     default:
       return (

src/controls/combinators/OneOfControl.test.tsx

@@ -83,6 +83,26 @@ describe("OneOf control", () => {
     await userEvent.click(screen.getByText("Delivery"))
     screen.getByLabelText("Address")
   })
+  test("OneOf Control with segmented UISchema allows switching between subschemas", async () => {
+    render({
+      schema,
+      uischema: {
+        type: "VerticalLayout",
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/deliveryOption",
+            options: { optionType: "segmented" } satisfies OneOfControlOptions,
+          },
+        ],
+      },
+    })
+    await screen.findByText("Pickup")
+    screen.getByLabelText("Location")
+
+    await userEvent.click(screen.getByText("Delivery"))
+    screen.getByLabelText("Address")
+  })
   test("OneOf Control persists state when switching between subschemas", async () => {
     render({ schema })
     await screen.findByText("Pickup")

src/stories/controls/OneOfControl.stories.tsx

@@ -138,6 +138,30 @@ export const Dropdown: Story = {
   },
 }
 
+export const Segmented: Story = {
+  parameters: { controls: { expanded: true } },
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: schema,
+    uiSchema: {
+      type: "VerticalLayout",
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/deliveryOption",
+          options: { optionType: "segmented" } satisfies OneOfControlOptions,
+        },
+      ],
+    },
+  },
+  argTypes: {
+    jsonSchema: {
+      control: "object",
+      description: "this is a minimal oneOf combinator schema",
+    },
+  },
+}
+
 export const OneOfTitleLabelStyling: Story = {
   parameters: { controls: { expanded: true } },
   tags: ["autodocs"],

src/ui-schema.ts

@@ -145,6 +145,7 @@ export const OneOfControlOptions = [
   "dropdown",
   "radio",
   "toggle",
+  "segmented"
 ] as const
 
 export type OneOfControlOption = (typeof OneOfControlOptions)[number]