@saas-ui/forms 2.0.0-next.2 → 2.0.0-next.21

package/src/select/select.tsx

@@ -10,176 +10,192 @@ import {
   MenuListProps,
   MenuItemOption,
   MenuOptionGroup,
-  MenuOptionGroupProps,
   Button,
   ButtonProps,
   omitThemingProps,
   useMultiStyleConfig,
   SystemStyleObject,
-  useFormControl,
-  HTMLChakraProps,
+  MenuItemOptionProps,
+  useFormControlContext,
 } from '@chakra-ui/react'
-import { ChevronDownIcon } from '@chakra-ui/icons'
-import { cx, __DEV__ } from '@chakra-ui/utils'
+import { cx, dataAttr } from '@chakra-ui/utils'
+import { ChevronDownIcon } from '@saas-ui/core'
 
-interface Option {
-  value: string
-  label?: string
-}
+import { FieldOption } from '../types'
 
-interface SelectOptions {
-  /**
-   * An array of options
-   * If you leave this empty the children prop will be rendered.
-   */
-  options?: Option[]
-  /**
-   * Props passed to the MenuList.
-   */
-  menuListProps?: MenuListProps
-  /**
-   * Customize how the value is rendered.
-   * @type (value?: string[]) => React.ReactElement
-   */
-  renderValue?: (value?: string[]) => React.ReactElement | undefined
-  /**
-   * Enable multiple select.
-   */
-  multiple?: boolean
-}
+import {
+  SelectOptions,
+  SelectProvider,
+  useSelect,
+  useSelectContext,
+} from './select-context'
+
+export interface SelectOption
+  extends Omit<MenuItemOptionProps, 'value'>,
+    FieldOption {}
 
 export interface SelectProps
   extends Omit<MenuProps, 'children'>,
-    Pick<ButtonProps, 'isDisabled' | 'leftIcon' | 'rightIcon'>,
-    Pick<MenuOptionGroupProps, 'onChange'>,
     SelectOptions {}
 
-const SelectButton = forwardRef((props, ref) => {
-  const styles = useMultiStyleConfig('Input', props)
-
-  /* @ts-ignore */
-  const focusStyles = styles.field._focusVisible
-
-  const height = styles.field.h || styles.field.height
-
-  const buttonStyles: SystemStyleObject = {
-    fontWeight: 'normal',
-    textAlign: 'left',
-    color: 'inherit',
-    _active: {
-      bg: 'transparent',
-    },
-    minH: height,
-    _focus: focusStyles,
-    _expanded: focusStyles,
-    ...styles.field,
-    h: 'auto',
+export interface SelectButtonProps extends ButtonProps {}
+
+/**
+ * Button that opens the select menu and displays the selected value.
+ *
+ * @see https://saas-ui.dev/docs/components/forms/select
+ */
+export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
+  (props, ref) => {
+    const styles = useMultiStyleConfig('SuiSelect', props)
+
+    const {
+      displayValue,
+      renderValue,
+      placeholder,
+      isDisabled: isSelectDisabled,
+    } = useSelectContext()
+
+    const context = useFormControlContext()
+
+    const {
+      isInvalid,
+      isReadOnly,
+      isDisabled,
+      isFocused,
+      isRequired,
+      id,
+      onBlur,
+      onFocus,
+    } = context || {}
+
+    const { rightIcon = <ChevronDownIcon />, ...rest } = props
+
+    /* @ts-ignore */
+    const focusStyles = styles.field?._focusVisible
+    /* @ts-ignore */
+    const readOnlyStyles = styles.field?._readOnly
+    /* @ts-ignore */
+    const invalid = styles.field?._invalid
+
+    const height = styles.field?.h || styles.field?.height
+
+    const buttonStyles: any = {
+      fontWeight: 'normal',
+      textAlign: 'left',
+      color: 'inherit',
+      _active: {
+        bg: 'transparent',
+      },
+      minH: height,
+      _focus: focusStyles,
+      _expanded: focusStyles,
+      _readOnly: readOnlyStyles,
+      _invalid: invalid,
+      ...styles.field,
+      h: 'auto',
+    }
+
+    // Using a Button, so we can simply use leftIcon and rightIcon
+    return (
+      <MenuButton
+        as={Button}
+        id={id || React.useId()}
+        {...buttonStyles}
+        {...rest}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        isDisabled={isDisabled || isSelectDisabled}
+        data-invalid={dataAttr(isInvalid)}
+        data-read-only={dataAttr(isReadOnly)}
+        data-focus={dataAttr(isFocused)}
+        data-required={dataAttr(isRequired)}
+        rightIcon={rightIcon}
+        ref={ref}
+      >
+        {renderValue(displayValue) || placeholder}
+      </MenuButton>
+    )
   }
+)
 
-  // Using a Button, so we can simply use leftIcon and rightIcon
-  return <MenuButton as={Button} {...props} ref={ref} sx={buttonStyles} />
-})
-
-if (__DEV__) {
-  SelectButton.displayName = 'SelectButton'
-}
+SelectButton.displayName = 'SelectButton'
 
+/**
+ * Allow users to select a value from a list of options.
+ *
+ * @see https://saas-ui.dev/docs/components/forms/select
+ */
 export const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
-  const {
-    name,
-    options,
-    children,
-    onChange,
-    defaultValue,
-    value,
-    placeholder,
-    isDisabled,
-    leftIcon,
-    rightIcon = <ChevronDownIcon />,
-    multiple,
-    size,
-    variant,
-    menuListProps,
-    renderValue = (value) => value?.join(', '),
-    ...rest
-  } = props
-  const menuProps = omitThemingProps(rest)
+  const { name, children, isDisabled, multiple, ...rest } = props
 
-  const [currentValue, setCurrentValue] = React.useState(value || defaultValue)
-
-  const controlProps = useFormControl({ name } as HTMLChakraProps<'input'>)
+  const menuProps = omitThemingProps(rest)
 
-  const handleChange = (value: string | string[]) => {
-    setCurrentValue(value)
-    onChange?.(value)
-  }
+  const context = useSelect(props)
 
-  const buttonProps = {
-    isDisabled,
-    leftIcon,
-    rightIcon,
-    size,
-    variant,
-  }
+  const { value, controlProps } = context
 
-  const getDisplayValue = React.useCallback(
-    (value: string) => {
-      if (!options) {
-        return value
-      }
-
-      for (const option of options) {
-        if (option.label && option.value === value) {
-          return option.label
-        }
-      }
-
-      return value
-    },
-    [options]
+  return (
+    <SelectProvider value={context}>
+      <Menu {...menuProps} closeOnSelect={!multiple}>
+        <chakra.div className={cx('sui-select')}>
+          {children}
+          <chakra.input
+            {...controlProps}
+            ref={ref}
+            name={name}
+            type="hidden"
+            value={value || ''}
+            className="saas-select__input"
+          />
+        </chakra.div>
+      </Menu>
+    </SelectProvider>
   )
+})
+
+export interface SelectListProps extends MenuListProps {}
 
-  const displayValue = currentValue
-    ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
-        getDisplayValue
-      )
-    : []
+/**
+ * The list of options to choose from.
+ *
+ * @see https://saas-ui.dev/docs/components/forms/select
+ */
+export const SelectList: React.FC<SelectListProps> = (props) => {
+  const { defaultValue, value, options, multiple, onChange } =
+    useSelectContext()
 
   return (
-    <Menu {...menuProps} closeOnSelect={!multiple}>
-      <chakra.div className={cx('sui-select')}>
-        <SelectButton ref={ref} {...buttonProps}>
-          {renderValue(displayValue) || placeholder}
-        </SelectButton>
-        <MenuList maxH="60vh" overflowY="auto" {...menuListProps}>
-          <MenuOptionGroup
-            defaultValue={
-              (defaultValue || value) as string | string[] | undefined
-            }
-            onChange={handleChange}
-            type={multiple ? 'checkbox' : 'radio'}
-          >
-            {options
-              ? options.map(({ value, label, ...rest }, i) => (
-                  <MenuItemOption key={i} value={value} {...rest}>
-                    {label || value}
-                  </MenuItemOption>
-                ))
-              : children}
-          </MenuOptionGroup>
-        </MenuList>
-        <chakra.input
-          {...controlProps}
-          name={name}
-          type="hidden"
-          value={currentValue}
-          className="saas-select__input"
-        />
-      </chakra.div>
-    </Menu>
+    <MenuList maxH="100vh" overflowY="auto" {...props}>
+      <MenuOptionGroup
+        defaultValue={(defaultValue || value) as string | string[] | undefined}
+        value={value}
+        onChange={onChange}
+        type={multiple ? 'checkbox' : 'radio'}
+      >
+        {options
+          ? options.map(({ value, label, ...rest }, i) => (
+              <SelectOption key={i} value={value} {...rest}>
+                {label || value}
+              </SelectOption>
+            ))
+          : props.children}
+      </MenuOptionGroup>
+    </MenuList>
   )
-})
-
-if (__DEV__) {
-  Select.displayName = 'Select'
 }
+
+Select.displayName = 'Select'
+
+/**
+ * An option in a select list
+ *
+ * @see https://saas-ui.dev/docs/components/forms/select
+ */
+export const SelectOption = forwardRef<MenuItemOptionProps, 'button'>(
+  (props, ref) => {
+    return <MenuItemOption ref={ref} {...props} />
+  }
+)
+SelectOption.id = 'MenuItemOption'
+SelectOption.displayName = 'SelectOption'

package/src/step-form.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { FieldValues, UseFormReturn } from 'react-hook-form'
+import { FieldValues } from 'react-hook-form'
 
 import {
   chakra,
@@ -10,71 +10,48 @@ import {
   ThemingProps,
 } from '@chakra-ui/react'
 
-import { callAllHandlers, runIfFn, cx, __DEV__ } from '@chakra-ui/utils'
+import { callAllHandlers, cx } from '@chakra-ui/utils'
 
 import {
-  StepperProvider,
-  StepperSteps,
-  StepperStepsProps,
-  StepperStep,
+  Steps,
+  StepsItem,
+  StepsItemProps,
+  StepsProps,
   useStepperContext,
-  StepperContainer,
-  StepperProps,
 } from '@saas-ui/core'
 
-import { Form } from './form'
 import { SubmitButton } from './submit-button'
 
 import {
-  useStepForm,
   useFormStep,
-  StepFormProvider,
   UseStepFormProps,
   FormStepSubmitHandler,
 } from './use-step-form'
+import { FieldProps } from './types'
+
+export type StepsOptions<TSchema, TName extends string = string> = {
+  /**
+   * The step name
+   */
+  name: TName
+  /**
+   * Schema
+   */
+  schema?: TSchema
+}[]
 
 export interface StepFormProps<
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object
-> extends UseStepFormProps<TFieldValues> {}
-
-export const StepForm = React.forwardRef(
-  <
-    TFieldValues extends FieldValues = FieldValues,
-    TContext extends object = object
-  >(
-    props: StepFormProps<TFieldValues, TContext>,
-    ref: React.ForwardedRef<HTMLFormElement>
-  ) => {
-    const { children, ...rest } = props
-
-    const stepper = useStepForm<TFieldValues>(props)
-
-    const { getFormProps, ...ctx } = stepper
-
-    const context = React.useMemo(() => ctx, [ctx])
-
-    return (
-      <StepperProvider value={context}>
-        <StepFormProvider value={context}>
-          <Form ref={ref} {...rest} {...getFormProps()}>
-            {runIfFn(children, stepper)}
-          </Form>
-        </StepFormProvider>
-      </StepperProvider>
-    )
-  }
-) as <TFieldValues extends FieldValues>(
-  props: StepFormProps<TFieldValues> & {
-    ref?: React.ForwardedRef<HTMLFormElement>
-  }
-) => React.ReactElement
-
-export interface FormStepOptions {
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
+> extends UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> {}
+
+export interface FormStepOptions<TName extends string = string> {
   /**
    * The step name
    */
-  name: string
+  name: TName
   /**
    * Schema
    */
@@ -85,14 +62,28 @@ export interface FormStepOptions {
   resolver?: any
 }
 
-export interface FormStepperProps
-  extends StepperStepsProps,
-    ThemingProps<'Stepper'> {}
+export interface FormStepperProps extends StepsProps, ThemingProps<'Stepper'> {
+  render?: StepsItemProps['render']
+}
 
+/**
+ * Renders a stepper that displays progress above the form.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 export const FormStepper: React.FC<FormStepperProps> = (props) => {
   const { activeIndex, setIndex } = useStepperContext()
 
-  const { children, orientation, variant, colorScheme, size, ...rest } = props
+  const {
+    children,
+    orientation,
+    variant,
+    colorScheme,
+    size,
+    onChange: onChangeProp,
+    render,
+    ...rest
+  } = props
 
   const elements = React.Children.map(children, (child) => {
     if (
@@ -101,14 +92,15 @@ export const FormStepper: React.FC<FormStepperProps> = (props) => {
     ) {
       const { isCompleted } = useFormStep(child.props) // Register this step
       return (
-        <StepperStep
+        <StepsItem
+          render={render}
           name={child.props.name}
           title={child.props.title}
           isCompleted={isCompleted}
           {...rest}
         >
           {child.props.children}
-        </StepperStep>
+        </StepsItem>
       )
     }
     return child
@@ -116,10 +108,11 @@ export const FormStepper: React.FC<FormStepperProps> = (props) => {
 
   const onChange = React.useCallback((i: number) => {
     setIndex(i)
+    onChangeProp?.(i)
   }, [])
 
   return (
-    <StepperContainer
+    <Steps
       orientation={orientation}
       step={activeIndex}
       variant={variant}
@@ -127,23 +120,26 @@ export const FormStepper: React.FC<FormStepperProps> = (props) => {
       size={size}
       onChange={onChange}
     >
-      <StepperSteps mb="4" {...props}>
-        {elements}
-      </StepperSteps>
-    </StepperContainer>
+      {elements}
+    </Steps>
   )
 }
 
-export interface FormStepProps
-  extends FormStepOptions,
+export interface FormStepProps<TName extends string = string>
+  extends FormStepOptions<TName>,
     Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
   onSubmit?: FormStepSubmitHandler
 }
-
-export const FormStep: React.FC<FormStepProps> = (props) => {
-  const { name, schema, resolver, children, className, onSubmit, ...rest } =
-    props
-  const step = useFormStep({ name, schema, resolver, onSubmit })
+/**
+ * The form step containing fields for a specific step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+export const FormStep = <TName extends string = string>(
+  props: FormStepProps<TName>
+) => {
+  const { name, children, className, onSubmit, ...rest } = props
+  const step = useFormStep({ name, onSubmit })
 
   const { isActive } = step
 
@@ -154,17 +150,20 @@ export const FormStep: React.FC<FormStepProps> = (props) => {
   ) : null
 }
 
-if (__DEV__) {
-  FormStep.displayName = 'FormStep'
-}
+FormStep.displayName = 'FormStep'
 
+/**
+ * A button that this opens the previous step when clicked. Disabled on the first step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 export const PrevButton: React.FC<ButtonProps> = (props) => {
   const { isFirstStep, isCompleted, prevStep } = useStepperContext()
 
   return (
     <Button
       isDisabled={isFirstStep || isCompleted}
-      label="Back"
+      children="Back"
       {...props}
       className={cx('sui-form__prev-button', props.className)}
       onClick={callAllHandlers(props.onClick, prevStep)}
@@ -172,15 +171,18 @@ export const PrevButton: React.FC<ButtonProps> = (props) => {
   )
 }
 
-if (__DEV__) {
-  PrevButton.displayName = 'PrevButton'
-}
+PrevButton.displayName = 'PrevButton'
 
 export interface NextButtonProps extends Omit<ButtonProps, 'children'> {
   submitLabel?: string
   label?: string
 }
 
+/**
+ * A button that submits the active step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 export const NextButton: React.FC<NextButtonProps> = (props) => {
   const { label = 'Next', submitLabel = 'Complete', ...rest } = props
   const { isLastStep, isCompleted } = useStepperContext()
@@ -196,6 +198,4 @@ export const NextButton: React.FC<NextButtonProps> = (props) => {
   )
 }
 
-if (__DEV__) {
-  NextButton.displayName = 'NextButton'
-}
+NextButton.displayName = 'NextButton'

package/src/submit-button.tsx

@@ -20,7 +20,11 @@ export interface SubmitButtonProps extends ButtonProps {
    */
   disableIfInvalid?: boolean
 }
-
+/**
+ * A button with type submit and default color scheme primary and isLoading state when the form is submitting.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
 export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
   (props, ref) => {
     const {