chore(Wizard) Updates wizard utilities to use hooks and compound-components

packages/wizard/package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@leafygreen-ui/button": "workspace:^",
+    "@leafygreen-ui/compound-component": "workspace:^",
     "@leafygreen-ui/descendants": "workspace:^",
     "@leafygreen-ui/emotion": "workspace:^",
     "@leafygreen-ui/form-footer": "workspace:^",

packages/wizard/src/Wizard/Wizard.tsx

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
+import {
+  CompoundComponent,
+  findChild,
+  findChildren,
+} from '@leafygreen-ui/compound-component';
 import { Direction } from '@leafygreen-ui/descendants';
-import { findChild, findChildren } from '@leafygreen-ui/lib';
+import { useControlled } from '@leafygreen-ui/hooks';
 
 import { WizardSubComponentProperties } from '../constants';
-import { CompoundComponent } from '../utils/CompoundComponent';
-import { useWizardControlledValue } from '../utils/useWizardControlledValue/useWizardControlledValue';
 import { WizardProvider } from '../WizardContext/WizardContext';
 import { WizardFooter } from '../WizardFooter';
 import { WizardStep } from '../WizardStep';
@@ -30,11 +33,8 @@ export const Wizard = CompoundComponent(
     );
 
     // Controlled/Uncontrolled activeStep value
-    const {
-      isControlled,
-      value: activeStep,
-      setValue: setActiveStep,
-    } = useWizardControlledValue<number>(activeStepProp, undefined, 0);
+    const { value: activeStep, updateValue: setActiveStep } =
+      useControlled<number>(activeStepProp, onStepChange, 0);
 
     if (
       activeStepProp &&
@@ -47,22 +47,23 @@ export const Wizard = CompoundComponent(
       );
     }
 
-    const updateStep = (direction: Direction) => {
-      const getNextStep = (curr: number) => {
-        switch (direction) {
-          case Direction.Next:
-            return Math.min(curr + 1, stepChildren.length - 1);
-          case Direction.Prev:
-            return Math.max(curr - 1, 0);
-        }
-      };
+    const updateStep = useCallback(
+      (direction: Direction) => {
+        const getNextStep = (curr: number) => {
+          switch (direction) {
+            case Direction.Next:
+              return Math.min(curr + 1, stepChildren.length - 1);
+            case Direction.Prev:
+              return Math.max(curr - 1, 0);
+          }
+        };
 
-      if (!isControlled) {
-        setActiveStep(getNextStep);
-      }
-
-      onStepChange?.(getNextStep(activeStep));
-    };
+        // TODO pass getNextStep into setter as callback https://jira.mongodb.org/browse/LG-5607
+        const nextStep = getNextStep(activeStep);
+        setActiveStep(nextStep);
+      },
+      [activeStep, setActiveStep, stepChildren.length],
+    );
 
     // Get the current step to render
     const currentStep = stepChildren[activeStep] || null;

packages/wizard/src/WizardFooter/WizardFooter.tsx

@@ -1,11 +1,11 @@
 import React, { MouseEventHandler } from 'react';
 
+import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
 import { Direction } from '@leafygreen-ui/descendants';
 import { FormFooter } from '@leafygreen-ui/form-footer';
 import { consoleOnce } from '@leafygreen-ui/lib';
 
 import { WizardSubComponentProperties } from '../constants';
-import { CompoundSubComponent } from '../utils/CompoundSubComponent';
 import { useWizardContext } from '../WizardContext';
 
 import { WizardFooterProps } from './WizardFooter.types';

packages/wizard/src/WizardStep/WizardStep.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
+import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
 import { cx } from '@leafygreen-ui/emotion';
 import { consoleOnce } from '@leafygreen-ui/lib';
 import { Description, H3 } from '@leafygreen-ui/typography';
 
 import { WizardSubComponentProperties } from '../constants';
-import { CompoundSubComponent } from '../utils/CompoundSubComponent';
 import { useWizardContext } from '../WizardContext';
 
 import { TextNode } from './TextNode';

packages/wizard/tsconfig.json

@@ -9,6 +9,12 @@
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.*", "**/*.stories.*"],
   "references": [
+    {
+      "path": "../button"
+    },
+    {
+      "path": "../compound-component"
+    },
     {
       "path": "../button"
     },