@availity/mui-stepper/dist/index.mjs

Availity MUI Stepper Component - part of the @availity/element design system

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};

// src/lib/Step.tsx
import MuiStep from "@mui/material/Step";
import { jsx } from "react/jsx-runtime";
var Step = (_a) => {
  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
  return /* @__PURE__ */ jsx(MuiStep, __spreadProps(__spreadValues({}, rest), { children }));
};

// src/lib/StepButton.tsx
import MuiStepButton from "@mui/material/StepButton";
import { jsx as jsx2 } from "react/jsx-runtime";
var StepButton = (_a) => {
  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
  return /* @__PURE__ */ jsx2(MuiStepButton, __spreadProps(__spreadValues({}, rest), { disableRipple: true, disableTouchRipple: true, children }));
};

// src/lib/StepConnector.tsx
import MuiStepConnector from "@mui/material/StepConnector";
import { jsx as jsx3 } from "react/jsx-runtime";
var StepConnector = (props) => {
  return /* @__PURE__ */ jsx3(MuiStepConnector, __spreadValues({}, props));
};

// src/lib/StepContent.tsx
import MuiStepContent from "@mui/material/StepContent";
import { jsx as jsx4 } from "react/jsx-runtime";
var StepContent = (_a) => {
  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
  return /* @__PURE__ */ jsx4(MuiStepContent, __spreadProps(__spreadValues({}, rest), { children }));
};

// src/lib/StepIcon.tsx
import MuiStepIcon from "@mui/material/StepIcon";
import { SuccessCircleIcon, WarningCircleIcon } from "@availity/mui-icon";
import { jsx as jsx5 } from "react/jsx-runtime";
var StepIcon = (_a) => {
  var _b = _a, { error, completed, warning } = _b, rest = __objRest(_b, ["error", "completed", "warning"]);
  let tag = null;
  if (error) tag = WarningCircleIcon;
  if (warning) tag = (props) => /* @__PURE__ */ jsx5(WarningCircleIcon, __spreadValues({ color: "warning" }, props));
  if (completed) tag = SuccessCircleIcon;
  return /* @__PURE__ */ jsx5(MuiStepIcon, __spreadProps(__spreadValues({}, rest), { error, completed, as: tag }));
};

// src/lib/StepLabel.tsx
import MuiStepLabel from "@mui/material/StepLabel";
import { Typography } from "@availity/mui-typography";
import { jsx as jsx6 } from "react/jsx-runtime";
var StepLabel = (_a) => {
  var _b = _a, { children, error, optional, warning } = _b, rest = __objRest(_b, ["children", "error", "optional", "warning"]);
  if (typeof optional === "string") {
    optional = /* @__PURE__ */ jsx6(Typography, { variant: "caption", children: optional });
  }
  return /* @__PURE__ */ jsx6(
    MuiStepLabel,
    __spreadProps(__spreadValues({
      StepIconProps: { error, warning },
      StepIconComponent: StepIcon,
      error,
      optional
    }, rest), {
      children
    })
  );
};
StepLabel.muiName = MuiStepLabel.muiName;

// src/lib/Stepper.tsx
import { useRef, useState, useEffect } from "react";
import MuiStepper from "@mui/material/Stepper";

// ../button/src/lib/IconButton.tsx
import { forwardRef } from "react";
import { default as MuiIconButton } from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import { jsx as jsx7 } from "react/jsx-runtime";
var outlinedStyles = {
  borderRadius: ".25rem",
  border: 1
};
var IconButton = forwardRef((props, ref) => {
  const _a = props, { title, variant = "text", sx, size = "medium" } = _a, rest = __objRest(_a, ["title", "variant", "sx", "size"]);
  const styles = __spreadValues(__spreadValues({}, sx), variant === "outlined" && outlinedStyles);
  return /* @__PURE__ */ jsx7(Tooltip, { title, children: /* @__PURE__ */ jsx7(MuiIconButton, __spreadProps(__spreadValues({ "aria-label": title, sx: __spreadValues({}, styles) }, rest), { ref, size })) });
});

// src/lib/Stepper.tsx
import { NavigatePreviousIcon, NavigateNextIcon } from "@availity/mui-icon";

// ../layout/src/lib/Grid.tsx
import MuiGrid from "@mui/material/Grid";
import { jsx as jsx8 } from "react/jsx-runtime";
var Grid = (args) => {
  return /* @__PURE__ */ jsx8(MuiGrid, __spreadValues({}, args));
};

// src/lib/Stepper.tsx
import { styled } from "@mui/material/styles";
import { jsx as jsx9, jsxs } from "react/jsx-runtime";
var HiddenConnectorStepper = styled(MuiStepper, {
  name: "MuiStepper",
  slot: "AvHideConnector",
  overridesResolver: (props, styles) => styles.avHideConnector
})({
  ".MuiStepLabel-root::before, .MuiStepLabel-root::after, .MuiStepConnector-root": {
    display: "none"
  }
});
var Stepper = (_a) => {
  var _b = _a, { children, connector, orientation, scrollButtons } = _b, rest = __objRest(_b, ["children", "connector", "orientation", "scrollButtons"]);
  const alternativeLabel = orientation !== "vertical";
  const Stepper2 = connector === null ? HiddenConnectorStepper : MuiStepper;
  const stepperRef = useRef(null);
  const [showLeftButton, setShowLeftButton] = useState(true);
  const [showRightButton, setShowRightButton] = useState(true);
  useEffect(() => {
    const stepper = stepperRef.current;
    const handleScroll = () => {
      if (stepper) {
        setShowLeftButton(stepper.scrollLeft > 0);
        const isRight = Math.abs(stepper.scrollWidth - stepper.clientWidth - stepper.scrollLeft) <= 1;
        setShowRightButton(!isRight);
      }
    };
    const resizeObserver = new ResizeObserver(() => {
      handleScroll();
    });
    if (stepper) {
      stepper.addEventListener("scroll", handleScroll);
      resizeObserver.observe(stepper);
      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 ? /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", justifyContent: "space-between", wrap: "nowrap", children: [
    /* @__PURE__ */ jsx9(ScrollIconContainer, { style: { paddingRight: "8px" }, children: showLeftButton && /* @__PURE__ */ jsx9(
      IconButton,
      {
        title: "Previous",
        variant: "outlined",
        onClick: () => {
          var _a2;
          return (_a2 = stepperRef.current) == null ? void 0 : _a2.scrollTo({ left: 0, behavior: "smooth" });
        },
        children: /* @__PURE__ */ jsx9(NavigatePreviousIcon, { fontSize: "xsmall" })
      }
    ) }),
    /* @__PURE__ */ jsx9(
      Stepper2,
      __spreadProps(__spreadValues({
        "aria-label": "multi-step process",
        role: "region"
      }, rest), {
        connector,
        orientation,
        alternativeLabel,
        ref: stepperRef,
        children,
        tabIndex: 0
      })
    ),
    /* @__PURE__ */ jsx9(ScrollIconContainer, { style: { paddingLeft: "8px" }, children: showRightButton && /* @__PURE__ */ jsx9(
      IconButton,
      {
        title: "Next",
        variant: "outlined",
        onClick: () => {
          var _a2;
          (_a2 = stepperRef.current) == null ? void 0 : _a2.scrollTo({
            left: stepperRef.current.scrollWidth - stepperRef.current.clientWidth,
            behavior: "smooth"
          });
        },
        children: /* @__PURE__ */ jsx9(NavigateNextIcon, { fontSize: "xsmall" })
      }
    ) })
  ] }) : /* @__PURE__ */ jsx9(
    Stepper2,
    __spreadProps(__spreadValues({
      "aria-label": "multi-step process",
      role: "region"
    }, rest), {
      connector,
      orientation,
      alternativeLabel,
      ref: stepperRef,
      children
    })
  );
};
export {
  Step,
  StepButton,
  StepConnector,
  StepContent,
  StepIcon,
  StepLabel,
  Stepper
};