@availity/mui-stepper 0.2.4 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-stepper",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Availity MUI Stepper Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -32,13 +32,13 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-icon": "^0.12.1"
+    "@availity/mui-icon": "^0.12.1",
+    "@availity/mui-typography": "^0.2.1"
   },
   "devDependencies": {
     "@availity/mui-button": "^0.6.14",
     "@availity/mui-layout": "^0.2.0",
     "@availity/mui-paper": "^0.1.9",
-    "@availity/mui-typography": "^0.2.1",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/lib/Step.stories.tsx

@@ -21,13 +21,13 @@ export const _Step: StoryObj<typeof Step> = {
     <Box>
       <Paper sx={{ padding: '2rem' }}>
         <Stepper>
-          <Step {...args}/>
+          <Step {...args} />
         </Stepper>
       </Paper>
     </Box>
   ),
   args: {
-    children: 'Children'
+    children: 'Children',
   },
 };
 

package/src/lib/StepButton.tsx

@@ -1,7 +1,14 @@
 import MuiStepButton, { StepButtonProps as MuiStepButtonProps } from '@mui/material/StepButton';
 
-export type StepButtonProps = MuiStepButtonProps;
+export type StepButtonProps = Omit<
+  MuiStepButtonProps,
+  'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'TouchRippleProps' | 'touchRippleRef'
+>;
 
 export const StepButton = ({ children, ...rest }: StepButtonProps): JSX.Element => {
-  return <MuiStepButton {...rest}>{children}</MuiStepButton>;
+  return (
+    <MuiStepButton {...rest} disableRipple disableTouchRipple>
+      {children}
+    </MuiStepButton>
+  );
 };

package/src/lib/StepLabel.tsx

@@ -1,12 +1,22 @@
 import MuiStepLabel, { StepLabelProps as MuiStepLabelProps } from '@mui/material/StepLabel';
 
 import { StepIcon, StepIconProps } from './StepIcon';
+import { Typography } from '@availity/mui-typography';
 
 export type StepLabelProps = Pick<StepIconProps, 'warning'> & MuiStepLabelProps;
 
-const StepLabel = ({ children, error, warning, ...rest }: StepLabelProps): JSX.Element => {
+const StepLabel = ({ children, error, optional, warning, ...rest }: StepLabelProps): JSX.Element => {
+  if (typeof optional === 'string') {
+    optional = <Typography variant="caption" children={optional} />;
+  }
   return (
-    <MuiStepLabel StepIconProps={{ error, warning }} StepIconComponent={StepIcon} error={error} {...rest}>
+    <MuiStepLabel
+      StepIconProps={{ error, warning }}
+      StepIconComponent={StepIcon}
+      error={error}
+      optional={optional}
+      {...rest}
+    >
       {children}
     </MuiStepLabel>
   );

package/src/lib/Stepper.stories.tsx

@@ -174,7 +174,73 @@ export const _Stepper: StoryObj<typeof Stepper> = {
       </Box>
     );
   },
-  args: {},
+};
+
+export const _StepperScrollButtons: StoryObj<typeof Stepper> = {
+  render: (args) => (
+    <Box>
+      <Paper sx={{ padding: '2rem' }}>
+        <Stepper {...args}>
+          <Step>
+            <StepLabel optional="Optional Sub-label">Label</StepLabel>
+          </Step>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+        </Stepper>
+      </Paper>
+    </Box>
+  ),
+  args: {
+    scrollButtons: true,
+  },
+};
+
+/**
+ * To remove the connector, set the `connector` prop to `null`.
+ * */
+export const _StepperWithoutConnectors: StoryObj<typeof Stepper> = {
+  render: (args) => (
+    <Box>
+      <Paper sx={{ padding: '2rem' }}>
+        <Stepper {...args} connector={null}>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+          <Step>
+            <StepLabel>Label</StepLabel>
+          </Step>
+        </Stepper>
+      </Paper>
+    </Box>
+  ),
+  args: {
+    connector: null,
+  },
 };
 
 export const _StepLabel: StoryObj<typeof StepLabel> = {

package/src/lib/Stepper.test.tsx

@@ -1,10 +1,18 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 import { render, screen } from '@testing-library/react';
 
 import { Stepper } from './Stepper';
 import { Step } from './Step';
 import { StepLabel } from './StepLabel';
 
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
 describe('Stepper', () => {
+  window.ResizeObserver = ResizeObserver;
   test('should render successfully', () => {
     render(
       <Stepper activeStep={0}>

package/src/lib/Stepper.tsx

@@ -1,13 +1,109 @@
+import { useRef, useState, useEffect } from 'react';
 import MuiStepper, { StepperProps as MuiStepperProps } from '@mui/material/Stepper';
+import { IconButton } from '@availity/mui-button';
+import { NavigatePreviousIcon, NavigateNextIcon } from '@availity/mui-icon';
+import { Grid } from '@availity/mui-layout';
+import { styled } from '@mui/material/styles';
 
-export type StepperProps = Omit<MuiStepperProps, 'alternativeLabel' | 'elevation'>;
+export type StepperProps = {
+  scrollButtons?: boolean;
+} & Omit<MuiStepperProps, 'alternativeLabel' | 'elevation'>;
 
-export const Stepper = ({ children, orientation, ...rest }: StepperProps): JSX.Element => {
+export const Stepper = ({ children, connector, orientation, scrollButtons, ...rest }: StepperProps): JSX.Element => {
   const alternativeLabel = orientation !== 'vertical';
 
-  return (
-    <MuiStepper {...rest} orientation={orientation} alternativeLabel={alternativeLabel}>
-      {children}
-    </MuiStepper>
+  const stepperRef = useRef<HTMLDivElement>(null);
+  const [showLeftButton, setShowLeftButton] = useState(true);
+  const [showRightButton, setShowRightButton] = useState(true);
+
+  useEffect(() => {
+    const stepper = stepperRef.current;
+
+    const handleScroll = () => {
+      if (stepper) {
+        setShowLeftButton(stepper.scrollLeft > 0);
+
+        // Check if scrolled to right
+        const isRight = Math.abs(stepper.scrollWidth - stepper.clientWidth - stepper.scrollLeft) <= 1; // Using 1px threshold for floating point precision
+        setShowRightButton(!isRight);
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(() => {
+      handleScroll();
+    });
+
+    if (stepper) {
+      stepper.addEventListener('scroll', handleScroll);
+      resizeObserver.observe(stepper);
+      // Initial check
+      handleScroll();
+    }
+
+    return () => {
+      if (stepper) {
+        stepper.removeEventListener('scroll', handleScroll);
+        resizeObserver.disconnect();
+      }
+    };
+  }, []);
+
+  const showScrollButtons = scrollButtons && orientation !== 'vertical';
+
+  const ScrollIconContainer = styled('div')({
+    width: '50px',
+    flexShrink: 0,
+    paddingTop: '15px',
+  });
+
+  return showScrollButtons ? (
+    <Grid container direction="row" justifyContent="space-between" wrap="nowrap">
+      <ScrollIconContainer style={{ paddingRight: '8px' }}>
+        {showLeftButton && (
+          <IconButton
+            title="Previous"
+            variant="outlined"
+            onClick={() => stepperRef.current?.scrollTo({ left: 0, behavior: 'smooth' })}
+          >
+            <NavigatePreviousIcon fontSize="xsmall" />
+          </IconButton>
+        )}
+      </ScrollIconContainer>
+
+      <MuiStepper
+        {...rest}
+        connector={connector}
+        orientation={orientation}
+        alternativeLabel={alternativeLabel}
+        ref={stepperRef}
+        children={children}
+      />
+
+      <ScrollIconContainer style={{ paddingLeft: '8px' }}>
+        {showRightButton && (
+          <IconButton
+            title="Next"
+            variant="outlined"
+            onClick={() => {
+              stepperRef.current?.scrollTo({
+                left: stepperRef.current.scrollWidth - stepperRef.current.clientWidth,
+                behavior: 'smooth',
+              });
+            }}
+          >
+            <NavigateNextIcon fontSize="xsmall" />
+          </IconButton>
+        )}
+      </ScrollIconContainer>
+    </Grid>
+  ) : (
+    <MuiStepper
+      {...rest}
+      connector={connector}
+      orientation={orientation}
+      alternativeLabel={alternativeLabel}
+      ref={stepperRef}
+      children={children}
+    />
   );
 };