@saas-ui/forms 2.5.4 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "2.5.4",
+  "version": "2.6.1",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
@@ -104,7 +104,7 @@
     "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/utils": "^2.0.15",
     "@hookform/resolvers": "^3.3.4",
-    "@saas-ui/core": "2.4.4",
+    "@saas-ui/core": "2.5.0",
     "react-hook-form": "^7.50.1"
   },
   "peerDependencies": {

package/src/default-fields.tsx

@@ -87,7 +87,7 @@ export const SwitchField = createField<SwitchFieldProps>(
   }
 )
 
-export interface SelectFieldProps extends SelectProps {
+export interface SelectFieldProps extends SelectProps<boolean> {
   buttonProps?: SelectButtonProps
   listProps?: SelectListProps
 }

package/src/select/select-context.tsx

@@ -19,7 +19,10 @@ export const [SelectProvider, useSelectContext] = createContext<
   strict: true,
 })
 
-export interface SelectOptions {
+export interface SelectOptions<
+  Multiple extends boolean = false,
+  Value = Multiple extends true ? string[] : string,
+> {
   /**
    * The name of the input field in a native form.
    */
@@ -27,16 +30,16 @@ export interface SelectOptions {
   /**
    * The value of the select field.
    */
-  value?: string | string[]
+  value?: Value
   /**
    * The initial value of the select field.
    */
-  defaultValue?: string | string[]
+  defaultValue?: Value
   /**
    * The callback invoked when the value of the select field changes.
    * @param value The value of the select field.
    */
-  onChange?: (value: string | string[]) => void
+  onChange?: (value: Value) => void
   /**
    * The placeholder text when there's no value.
    */
@@ -53,16 +56,16 @@ export interface SelectOptions {
   /**
    * Enable multiple select.
    */
-  multiple?: boolean
+  multiple?: Multiple
   /**
    * The function used to render the value of the select field.
    * @param value The value of the select field.
    * @returns The rendered value.
    */
-  renderValue?: (value: string | string[]) => React.ReactNode
+  renderValue?: (value: Value) => React.ReactNode
 }
 
-export const useSelect = (props: SelectOptions) => {
+export const useSelect = (props: SelectOptions<boolean>) => {
   const {
     name,
     value,

package/src/select/select.stories.tsx

@@ -1,31 +1,24 @@
-import {
-  Container,
-  Icon,
-  MenuItemOption,
-  Stack,
-  Tag,
-  Wrap,
-  WrapItem,
-} from '@chakra-ui/react'
+import { Container, Icon, Stack, Tag, Wrap, WrapItem } from '@chakra-ui/react'
 import * as React from 'react'
 
-import { StoryFn } from '@storybook/react'
+import { StoryObj } from '@storybook/react'
 
-import { Select, SelectButton, SelectList, SelectOption } from './select'
+import {
+  Select,
+  SelectButton,
+  SelectList,
+  SelectOption,
+  SelectProps,
+} from './select'
 import { NativeSelect } from './native-select'
 
 import { FiSmile } from 'react-icons/fi'
 
-const Template: StoryFn<typeof Select> = (args) => (
-  <Select placeholder="Select an option..." {...args}>
-    <SelectButton />
-    <SelectList />
-  </Select>
-)
+type Story<Multiple extends boolean = false> = StoryObj<SelectProps<Multiple>>
 
 export default {
   title: 'Components/Forms/Select',
-  component: Template,
+  component: Select,
   decorators: [
     (Story: any) => (
       <Container mt="40px" maxW="320px">
@@ -43,62 +36,104 @@ const getOptions = (length = 6) =>
 
 const options = getOptions()
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     name: 'select',
     options,
+    children: (
+      <>
+        <SelectButton />
+        <SelectList />
+      </>
+    ),
   },
 }
 
-export const DefaultValue = {
+export const DefaultValue: Story = {
   args: {
     name: 'select',
     options,
     defaultValue: '1',
+    children: (
+      <>
+        <SelectButton />
+        <SelectList />
+      </>
+    ),
   },
 }
 
-export const Placeholder = {
+export const Placeholder: Story = {
   args: {
     name: 'select',
     options,
     placeholder: 'Select an option...',
+    children: (
+      <>
+        <SelectButton />
+        <SelectList />
+      </>
+    ),
   },
 }
-export const Disabled = {
+export const Disabled: Story = {
   args: {
     name: 'select',
     options,
     placeholder: 'Disabled.',
     isDisabled: true,
+    children: (
+      <>
+        <SelectButton />
+        <SelectList />
+      </>
+    ),
   },
 }
 
-export const Multi = {
+export const Multi: Story<true> = {
   args: {
     name: 'select',
     options,
     placeholder: 'Multiple.',
     multiple: true,
+    children: (
+      <>
+        <SelectButton />
+        <SelectList />
+      </>
+    ),
   },
 }
 
-export const MultiWithDefaultValue = {
+export const MultiWithDefaultValue: Story<true> = {
   args: {
     name: 'select',
     options,
     placeholder: 'Select an option...',
     multiple: true,
     defaultValue: ['1'],
+    children: (
+      <>
+        <SelectButton />
+        <SelectList />
+      </>
+    ),
   },
 }
 
-export const MultiWithTags = {
+export const MultiWithTags: Story<true> = {
   args: {
     name: 'select',
     options,
     placeholder: 'Select options...',
     multiple: true,
+    children: (
+      <>
+        <SelectButton />
+        <SelectList />
+      </>
+    ),
     renderValue: (selected) => {
       if (selected?.length) {
         return (
@@ -115,15 +150,52 @@ export const MultiWithTags = {
   },
 }
 
-export const Test = {
-  render: () => (
-    <Tag variant="outline" colorScheme="teal">
-      Test
-    </Tag>
-  ),
+export const Controlled: Story = {
+  render: (args) => {
+    const [value, setValue] = React.useState('1')
+
+    return (
+      <Select
+        placeholder="Select an option..."
+        value={value}
+        onChange={(value) => setValue(value)}
+        {...args}
+      >
+        <SelectButton />
+        <SelectList />
+      </Select>
+    )
+  },
+  args: {
+    name: 'select',
+    options,
+  },
+}
+
+export const ControlledMulti: Story<true> = {
+  render: (args) => {
+    const [value, setValue] = React.useState(['1'])
+
+    return (
+      <Select
+        placeholder="Select an option..."
+        value={value}
+        onChange={(value) => setValue(value)}
+        {...args}
+      >
+        <SelectButton />
+        <SelectList />
+      </Select>
+    )
+  },
+  args: {
+    name: 'select',
+    options,
+    multiple: true,
+  },
 }
 
-export const WithIcons = {
+export const WithIcons: Story = {
   render: (args) => (
     <Select placeholder="Select an option..." {...args}>
       <SelectButton leftIcon={<Icon as={FiSmile} />} />
@@ -137,14 +209,21 @@ export const WithIcons = {
   },
 }
 
-export const MaxHeight = {
+export const MaxHeight: Story = {
   args: {
     name: 'select',
     options: getOptions(100),
+    placeholder: 'Select an option...',
+    children: (
+      <>
+        <SelectButton />
+        <SelectList />
+      </>
+    ),
   },
 }
 
-export const WithChildren = {
+export const WithChildren: Story = {
   render: () => (
     <Select name="select" defaultValue="1">
       <SelectButton />
@@ -156,7 +235,7 @@ export const WithChildren = {
   ),
 }
 
-export const WithEmptyOption = {
+export const WithEmptyOption: Story = {
   render: () => (
     <Select name="select" defaultValue="1">
       <SelectButton />
@@ -169,13 +248,13 @@ export const WithEmptyOption = {
   ),
 }
 
-export const WithNativeSelect = {
+export const WithNativeSelect: Story = {
   render: () => (
     <NativeSelect name="select" options={options} aria-label="Select" />
   ),
 }
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <Stack>
       <Select name="select" defaultValue="1" size="xs">
@@ -214,7 +293,7 @@ export const Sizes = {
   ),
 }
 
-export const Variants = {
+export const Variants: Story = {
   render: () => (
     <Stack>
       <Select name="select" defaultValue="1" variant="outline">

package/src/select/select.tsx

@@ -36,10 +36,14 @@ export interface SelectOption
   extends Omit<MenuItemOptionProps, 'value'>,
     FieldOption {}
 
-export interface SelectProps
-  extends Omit<MenuProps, 'children' | 'variant' | 'size'>,
+export interface SelectProps<
+  Multiple extends boolean = false,
+  Value = Multiple extends true ? string[] : string,
+> extends Omit<MenuProps, 'children' | 'variant' | 'size'>,
     ThemingProps<'SuiSelect'>,
-    SelectOptions {}
+    SelectOptions<Multiple, Value> {
+  children: React.ReactNode
+}
 
 export interface SelectButtonProps
   extends Omit<ButtonProps, 'size' | 'variant'> {}
@@ -143,7 +147,7 @@ SelectButton.displayName = 'SelectButton'
  *
  * @see https://saas-ui.dev/docs/components/forms/select
  */
-export const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
+export const Select = forwardRef((props, ref) => {
   const { name, children, isDisabled, multiple, ...rest } = props
 
   const styles = useMultiStyleConfig('SuiSelect', props)
@@ -173,7 +177,13 @@ export const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
       </SelectStylesProvider>
     </SelectProvider>
   )
-})
+}) as (<Multiple extends boolean = false>(
+  props: SelectProps<Multiple> & {
+    ref?: React.ForwardedRef<HTMLFormElement>
+  }
+) => React.ReactElement) & {
+  displayName?: string
+}
 
 export interface SelectListProps extends MenuListProps {}