type changes

Author: gsimone

packages/leva/src/plugins/Select/select-plugin.ts

@@ -1,7 +1,7 @@
 import type { SelectInput, InternalSelectSettings } from './select-types'
 import { z } from 'zod'
 
-const zValidPrimitive = z.union([z.string(), z.number(), z.boolean()])
+const zValidPrimitive = z.union([z.string(), z.number(), z.boolean(), z.function()])
 
 /**
  * Schema for the usecase
@@ -28,14 +28,18 @@ const keyAsLabelObjectSchema = z.record(z.string(), zValidPrimitive)
  * [{ value: 'x', label: 'X' }, { value: 'y', label: 'Y' }]
  * ```
  */
-const valueLabelObjectSchema = z.object({
+export const valueLabelObjectSchema = z.object({
   value: zValidPrimitive,
   label: z.string().optional(),
 })
 
 const arrayOfValueLabelObjectsSchema = z.array(valueLabelObjectSchema)
 
-const allUsecases = z.union([arrayOfPrimitivesSchema, keyAsLabelObjectSchema, arrayOfValueLabelObjectsSchema])
+export const selectOptionsSchema = z.union([
+  arrayOfPrimitivesSchema,
+  keyAsLabelObjectSchema,
+  arrayOfValueLabelObjectsSchema,
+])
 
 /**
  * Schema for the settings object - checks if it has an 'options' key
@@ -44,11 +48,11 @@ const allUsecases = z.union([arrayOfPrimitivesSchema, keyAsLabelObjectSchema, ar
  * 2. Array of {value, label} objects: [{ value: 'x', label: 'X' }]
  * 3. Object with key-value pairs: { x: 1, y: 2 }
  *
- * Note: We use allUsecases which handles detailed validation, so invalid formats
+ * Note: We use selectOptionsSchema which handles detailed validation, so invalid formats
  * will be caught and warned about in normalize()
  */
 const selectInputSchema = z.object({
-  options: allUsecases,
+  options: selectOptionsSchema,
 })
 
 // the options attribute is either a key value object, an array, or an array of {value, label} objects

packages/leva/src/plugins/Select/select-types.ts

@@ -1,9 +1,10 @@
 import type { LevaInputProps } from '../../types'
-import type { SelectOption } from '../../types/public'
+import type { z } from 'zod'
+import type { selectOptionsSchema } from './select-plugin'
 
-export type SelectSettings<U = unknown> = { options: Record<string, U> | U[] | SelectOption<U>[] }
+export type SelectSettings = { options: z.infer<typeof selectOptionsSchema> }
 export type InternalSelectSettings = { keys: string[]; values: any[] }
 
-export type SelectInput<P = unknown, U = unknown> = { value?: P } & SelectSettings<U>
+export type SelectInput<P = unknown> = { value?: P } & SelectSettings
 
 export type SelectProps = LevaInputProps<any, InternalSelectSettings, number>

packages/leva/src/types/public.test.ts

@@ -59,9 +59,7 @@ expectType<{ a: string }>(useControls({ a: 'some string' }))
  */
 expectType<{ a: string }>(useControls({ a: { options: ['foo', 'bar'] } }))
 expectType<{ a: number | string }>(useControls({ a: { options: [1, 'bar'] } }))
-expectType<{ a: string | number | Array<string | number> }>(useControls({ a: { options: ['foo', 1, ['foo', 'bar']] } }))
 expectType<{ a: boolean | number }>(useControls({ a: { options: { foo: 1, bar: true } } }))
-expectType<{ a: number | string | string[] }>(useControls({ a: { value: 3, options: ['foo', ['foo', 'bar']] } }))
 expectType<{ a: string }>(
   useControls({
     a: {

packages/leva/src/types/public.ts

@@ -4,6 +4,8 @@
 import type { VectorSettings } from '../plugins/Vector/vector-types'
 import { StoreType, Data, DataInput } from './internal'
 import type { BeautifyUnionType, UnionToIntersection } from './utils'
+import type { z } from 'zod'
+import type { valueLabelObjectSchema, selectOptionsSchema } from '../plugins/Select/select-plugin'
 
 export type RenderFn = (get: (key: string) => any) => boolean
 
@@ -104,12 +106,12 @@ export type IntervalInput = { value: [number, number]; min: number; max: number
 
 export type ImageInput = { image: undefined | string }
 
-export type SelectOption<T = unknown> = { value: T; label?: string }
+// Infer valid select types from Zod schemas to ensure runtime validation and types stay in sync
+export type SelectOption<T = unknown> = z.infer<typeof valueLabelObjectSchema> & { value: T }
+export type SelectOptionsType = z.infer<typeof selectOptionsSchema>
+export type SelectInput = { options: SelectOptionsType; value?: any }
 
-type SelectInput = { options: any[] | Record<string, any> | SelectOption[]; value?: any }
-
-// Union branches prevent SelectOption objects from appearing in inferred value types.
-// SelectOption<T>[] branch extracts T; Exclude<T, SelectOption> branch handles primitives.
+// Type inference helpers that extract value types from different option formats
 type SelectWithValueInput<T, K> =
   | { options: SelectOption<T>[]; value: K }
   | { options: Exclude<T, SelectOption<any>>[] | Record<string, Exclude<T, SelectOption<any>>>; value: K }

packages/leva/stories/inputs/Select.stories.tsx

@@ -1,16 +1,19 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import Reset from '../components/decorator-reset'
 
 import { useControls } from '../../src'
 
-export default {
+const meta = {
   title: 'Inputs/Select',
   decorators: [Reset],
-} as Meta
+} satisfies Meta
 
-const Template: StoryFn = (args) => {
+export default meta
+type Story = StoryObj<typeof meta>
+
+const Render = (args: any) => {
   const values = useControls({
     foo: args,
   })
@@ -25,50 +28,60 @@ const Template: StoryFn = (args) => {
 /**
  * Passes a list of values. The value will be used as both value AND label.
  */
-export const Simple = Template.bind({})
-Simple.args = {
-  value: 'x',
-  options: ['x', 'y'],
-}
+export const Simple: Story = {
+  args: {
+    value: 'x',
+    options: ['x', 'y'],
+  },
+  render: Render,
+} as Story
 
 /**
  * No value is passed, so the first option will be selected as the default.
  */
-export const NoValue = Template.bind({})
-NoValue.args = {
-  options: ['x', 'y'],
-}
+export const NoValue: Story = {
+  args: {
+    options: ['x', 'y'],
+  },
+  render: Render,
+} as Story
 
 /**
  * Passes an object of values. The key will be used as label and the value will be used as value.
  */
-export const CustomLabels = Template.bind({})
-CustomLabels.args = {
-  value: 'helloWorld',
-  options: {
-    'Hello World': 'helloWorld',
-    'Leva is awesome!': 'leva',
+export const CustomLabels: Story = {
+  args: {
+    value: 'helloWorld',
+    options: {
+      'Hello World': 'helloWorld',
+      'Leva is awesome!': 'leva',
+    },
   },
-}
+  render: Render,
+} as Story
 
-export const InferredValueAsOption = Template.bind({})
-InferredValueAsOption.args = {
-  value: true,
-  options: [false],
-}
+export const InferredValueAsOption: Story = {
+  args: {
+    value: true,
+    options: [false],
+  },
+  render: Render,
+} as Story
 
 const ComponentA = () => <span>Component A</span>
 const ComponentB = () => <span>Component B</span>
 
 /**
  * Shows passing functions as the option values.
  */
-export const FunctionAsOptions = () => {
+const FunctionAsOptionsRender = () => {
   const values = useControls({
     foo: { options: { none: '', ComponentA, ComponentB } },
   })
 
-  if (!values.foo) return null
+  if (!values.foo) {
+    return <div>No component selected</div>
+  }
 
   // render value.foo as a react component
   const Component = values.foo as React.ComponentType
@@ -80,15 +93,21 @@ export const FunctionAsOptions = () => {
   )
 }
 
+export const FunctionAsOptions: Story = {
+  render: FunctionAsOptionsRender,
+} as Story
+
 /**
  * Shows passing a value/label records array.
  */
-export const ValueLabelObjects = Template.bind({})
-ValueLabelObjects.args = {
-  value: '#f00',
-  options: [
-    { value: '#f00', label: 'red' },
-    { value: '#0f0', label: 'green' },
-    { value: '#00f', label: 'blue' },
-  ],
-}
+export const ValueLabelObjects: Story = {
+  args: {
+    value: '#f00',
+    options: [
+      { value: '#f00', label: 'red' },
+      { value: '#0f0', label: 'green' },
+      { value: '#00f', label: 'blue' },
+    ],
+  },
+  render: Render,
+} as Story