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

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

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
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;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  Step: () => Step,
  StepButton: () => StepButton,
  StepConnector: () => StepConnector,
  StepContent: () => StepContent,
  StepIcon: () => StepIcon,
  StepLabel: () => StepLabel,
  Stepper: () => Stepper
});
module.exports = __toCommonJS(index_exports);

// src/lib/Step.tsx
var import_Step = __toESM(require("@mui/material/Step"));
var import_jsx_runtime = require("react/jsx-runtime");
var Step = (_a) => {
  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Step.default, __spreadProps(__spreadValues({}, rest), { children }));
};

// src/lib/StepButton.tsx
var import_StepButton = __toESM(require("@mui/material/StepButton"));
var import_jsx_runtime2 = require("react/jsx-runtime");
var StepButton = (_a) => {
  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_StepButton.default, __spreadProps(__spreadValues({}, rest), { disableRipple: true, disableTouchRipple: true, children }));
};

// src/lib/StepConnector.tsx
var import_StepConnector = __toESM(require("@mui/material/StepConnector"));
var import_jsx_runtime3 = require("react/jsx-runtime");
var StepConnector = (props) => {
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_StepConnector.default, __spreadValues({}, props));
};

// src/lib/StepContent.tsx
var import_StepContent = __toESM(require("@mui/material/StepContent"));
var import_jsx_runtime4 = require("react/jsx-runtime");
var StepContent = (_a) => {
  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_StepContent.default, __spreadProps(__spreadValues({}, rest), { children }));
};

// src/lib/StepIcon.tsx
var import_StepIcon = __toESM(require("@mui/material/StepIcon"));
var import_mui_icon = require("@availity/mui-icon");
var import_jsx_runtime5 = require("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 = import_mui_icon.WarningCircleIcon;
  if (warning) tag = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_icon.WarningCircleIcon, __spreadValues({ color: "warning" }, props));
  if (completed) tag = import_mui_icon.SuccessCircleIcon;
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_StepIcon.default, __spreadProps(__spreadValues({}, rest), { error, completed, as: tag }));
};

// src/lib/StepLabel.tsx
var import_StepLabel = __toESM(require("@mui/material/StepLabel"));
var import_mui_typography = require("@availity/mui-typography");
var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsx)(import_mui_typography.Typography, { variant: "caption", children: optional });
  }
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
    import_StepLabel.default,
    __spreadProps(__spreadValues({
      StepIconProps: { error, warning },
      StepIconComponent: StepIcon,
      error,
      optional
    }, rest), {
      children
    })
  );
};
StepLabel.muiName = import_StepLabel.default.muiName;

// src/lib/Stepper.tsx
var import_react2 = require("react");
var import_Stepper = __toESM(require("@mui/material/Stepper"));

// ../button/src/lib/IconButton.tsx
var import_react = require("react");
var import_IconButton = __toESM(require("@mui/material/IconButton"));
var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
var import_jsx_runtime7 = require("react/jsx-runtime");
var outlinedStyles = {
  borderRadius: ".25rem",
  border: 1
};
var IconButton = (0, import_react.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__ */ (0, import_jsx_runtime7.jsx)(import_Tooltip.default, { title, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_IconButton.default, __spreadProps(__spreadValues({ "aria-label": title, sx: __spreadValues({}, styles) }, rest), { ref, size })) });
});

// src/lib/Stepper.tsx
var import_mui_icon2 = require("@availity/mui-icon");

// ../layout/src/lib/Grid.tsx
var import_Grid = __toESM(require("@mui/material/Grid"));
var import_jsx_runtime8 = require("react/jsx-runtime");
var Grid = (args) => {
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Grid.default, __spreadValues({}, args));
};

// src/lib/Stepper.tsx
var import_styles = require("@mui/material/styles");
var import_jsx_runtime9 = require("react/jsx-runtime");
var HiddenConnectorStepper = (0, import_styles.styled)(import_Stepper.default, {
  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 : import_Stepper.default;
  const stepperRef = (0, import_react2.useRef)(null);
  const [showLeftButton, setShowLeftButton] = (0, import_react2.useState)(true);
  const [showRightButton, setShowRightButton] = (0, import_react2.useState)(true);
  (0, import_react2.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 = (0, import_styles.styled)("div")({
    width: "50px",
    flexShrink: 0,
    paddingTop: "15px"
  });
  return showScrollButtons ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Grid, { container: true, direction: "row", justifyContent: "space-between", wrap: "nowrap", children: [
    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollIconContainer, { style: { paddingRight: "8px" }, children: showLeftButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
      IconButton,
      {
        title: "Previous",
        variant: "outlined",
        onClick: () => {
          var _a2;
          return (_a2 = stepperRef.current) == null ? void 0 : _a2.scrollTo({ left: 0, behavior: "smooth" });
        },
        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_mui_icon2.NavigatePreviousIcon, { fontSize: "xsmall" })
      }
    ) }),
    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
      Stepper2,
      __spreadProps(__spreadValues({
        "aria-label": "multi-step process",
        role: "region"
      }, rest), {
        connector,
        orientation,
        alternativeLabel,
        ref: stepperRef,
        children,
        tabIndex: 0
      })
    ),
    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollIconContainer, { style: { paddingLeft: "8px" }, children: showRightButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
      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__ */ (0, import_jsx_runtime9.jsx)(import_mui_icon2.NavigateNextIcon, { fontSize: "xsmall" })
      }
    ) })
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
    Stepper2,
    __spreadProps(__spreadValues({
      "aria-label": "multi-step process",
      role: "region"
    }, rest), {
      connector,
      orientation,
      alternativeLabel,
      ref: stepperRef,
      children
    })
  );
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Step,
  StepButton,
  StepConnector,
  StepContent,
  StepIcon,
  StepLabel,
  Stepper
});