Fix FormStepper compatibility and new onChange handler for Stepper

.changeset/mighty-swans-check.md

@@ -0,0 +1,6 @@
+---
+'@saas-ui/react': patch
+'@saas-ui/stepper': patch
+---
+
+Stepper now accepts an onChange handler.

packages/saas-ui-forms/src/step-form.tsx

@@ -6,8 +6,8 @@ import {
   chakra,
   HTMLChakraProps,
   useMultiStyleConfig,
-  StylesProvider,
   SystemStyleObject,
+  createStylesContext,
 } from '@chakra-ui/system'
 
 import { callAllHandlers, runIfFn, cx, __DEV__ } from '@chakra-ui/utils'
@@ -18,6 +18,7 @@ import {
   StepperStepsProps,
   StepperStep,
   useStepperContext,
+  StepperContainer,
 } from '@saas-ui/stepper'
 import { Button, ButtonProps } from '@saas-ui/button'
 
@@ -32,6 +33,8 @@ import {
   UseStepFormReturn,
 } from './use-step-form'
 
+const [StylesProvider, useStyles] = createStylesContext('StepForm')
+
 export interface StepFormProps<TFieldValues extends FieldValues = FieldValues>
   extends UseStepFormProps<TFieldValues> {}
 
@@ -80,7 +83,7 @@ export interface FormStepOptions {
 }
 
 export const FormStepper: React.FC<StepperStepsProps> = (props) => {
-  const styles = useMultiStyleConfig('Stepper', props)
+  const { activeIndex, setIndex } = useStepperContext()
 
   const { children } = props
 
@@ -100,12 +103,16 @@ export const FormStepper: React.FC<StepperStepsProps> = (props) => {
     return child
   })
 
+  const onChange = React.useCallback((name: string, i: number) => {
+    setIndex(i)
+  }, [])
+
   return (
-    <StylesProvider value={styles}>
+    <StepperContainer step={activeIndex} onChange={onChange}>
       <StepperSteps mb="4" {...props}>
         {elements}
       </StepperSteps>
-    </StylesProvider>
+    </StepperContainer>
   )
 }
 

packages/saas-ui-forms/stories/step-form.stories.tsx

@@ -218,8 +218,8 @@ export const WithStepper = () => {
                   autoFocus
                   autoComplete="off"
                 />
+                <StepperNav />
               </FormLayout>
-              <StepperNav />
             </FormStep>
 
             <FormStep name="confirmation" title="Confirmation">

packages/saas-ui-stepper/src/stepper.tsx

@@ -29,7 +29,7 @@ const [StylesProvider, useStyles] = createStylesContext('Stepper')
 
 export interface StepperProps
   extends UseStepperProps,
-    HTMLChakraProps<'div'>,
+    Omit<HTMLChakraProps<'div'>, 'onChange'>,
     ThemingProps<'Stepper'> {
   orientation?: 'horizontal' | 'vertical'
 }
@@ -40,42 +40,63 @@ export interface StepperProps
  * Can be controlled or uncontrolled.
  */
 export const Stepper = forwardRef<StepperProps, 'div'>((props, ref) => {
-  const { children, orientation = 'horizontal', step, ...rest } = props
-
-  const styles = useMultiStyleConfig('Stepper', {
-    ...rest,
-    orientation,
-  })
-  const containerProps = omitThemingProps(rest)
-
-  const context = useStepper(props)
-
-  const containerStyles: SystemStyleObject = {
-    display: 'flex',
-    flexDirection: 'column',
-    ...styles.container,
-  }
-
+  const { orientation, children, ...containerProps } = props
   return (
-    <StylesProvider value={styles}>
-      <StepperProvider value={context}>
-        <chakra.div
-          ref={ref}
-          __css={containerStyles}
-          {...containerProps}
-          className={cx('saas-stepper', props.className)}
-        >
-          <StepperSteps orientation={orientation}>{children}</StepperSteps>
-        </chakra.div>
-      </StepperProvider>
-    </StylesProvider>
+    <StepperContainer ref={ref} orientation={orientation} {...containerProps}>
+      <StepperSteps orientation={orientation}>{children}</StepperSteps>
+    </StepperContainer>
   )
 })
 
 if (__DEV__) {
   Stepper.displayName = 'Stepper'
 }
 
+export const StepperContainer = forwardRef<StepperProps, 'div'>(
+  (props, ref) => {
+    const {
+      children,
+      orientation = 'horizontal',
+      step,
+      onChange,
+      ...rest
+    } = props
+
+    const styles = useMultiStyleConfig('Stepper', {
+      ...rest,
+      orientation,
+    })
+    const containerProps = omitThemingProps(rest)
+
+    const context = useStepper(props)
+
+    const containerStyles: SystemStyleObject = {
+      display: 'flex',
+      flexDirection: 'column',
+      ...styles.container,
+    }
+
+    return (
+      <StylesProvider value={styles}>
+        <StepperProvider value={context}>
+          <chakra.div
+            ref={ref}
+            __css={containerStyles}
+            {...containerProps}
+            className={cx('saas-stepper', props.className)}
+          >
+            {children}
+          </chakra.div>
+        </StepperProvider>
+      </StylesProvider>
+    )
+  }
+)
+
+if (__DEV__) {
+  StepperContainer.displayName = 'StepperContainer'
+}
+
 export interface StepperStepsProps extends HTMLChakraProps<'div'> {
   orientation?: 'horizontal' | 'vertical'
   stepComponent?: React.JSXElementConstructor<any>

packages/saas-ui-stepper/src/use-stepper.tsx

@@ -11,10 +11,12 @@ export const [StepperProvider, useStepperContext] =
 
 export interface UseStepperProps {
   step?: number | string
+  isCompleted?: boolean
+  onChange?(name: string, index: number): void
 }
 
 export function useStepper(props: UseStepperProps) {
-  const { step } = props
+  const { step, onChange } = props
 
   const [activeIndex, setIndex] = React.useState(-1) // Set to -1 by default to prevent any initial transitions.
 
@@ -42,7 +44,6 @@ export function useStepper(props: UseStepperProps) {
 
   const setStep = (name: string) => {
     const i = stepsRef.current.indexOf(name)
-
     if (i !== -1) {
       setIndex(i)
     }
@@ -66,6 +67,10 @@ export function useStepper(props: UseStepperProps) {
     }
   }, [step])
 
+  React.useEffect(() => {
+    onChange?.(stepsRef.current[activeIndex], activeIndex)
+  }, [activeIndex, onChange])
+
   const context = {
     stepsRef,
     activeStep: stepsRef.current[activeIndex],