@spark-web/vertical-stepper/dist/spark-web-vertical-stepper.cjs.prod.js

--- title: Vertical Stepper storybookPath: data-display-vertical-stepper isExperimentalPackage: true ---

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');
var box = require('@spark-web/box');
var stack = require('@spark-web/stack');
var theme = require('@spark-web/theme');
var React = require('react');
var jsxRuntime = require('@emotion/react/jsx-runtime');
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var web = require('@react-spring/web');
var useMeasure = require('react-use-measure');
var heading = require('@spark-web/heading');
var icon = require('@spark-web/icon');
var text = require('@spark-web/text');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);

var StepperContext = /*#__PURE__*/React.createContext(null);
var StepperProvider = function StepperProvider(_ref) {
  var activeIndex = _ref.activeIndex,
    children = _ref.children;
  return jsxRuntime.jsx(StepperContext.Provider, {
    value: React.useMemo(function () {
      return {
        activeIndex: activeIndex
      };
    }, [activeIndex]),
    children: children
  });
};
var StepContext = /*#__PURE__*/React.createContext(null);
var StepProvider = function StepProvider(_ref2) {
  var stepIndex = _ref2.stepIndex,
    isActive = _ref2.isActive,
    isCompleted = _ref2.isCompleted,
    children = _ref2.children;
  return jsxRuntime.jsx(StepContext.Provider, {
    value: React.useMemo(function () {
      return {
        stepIndex: stepIndex,
        isActive: isActive,
        isCompleted: isCompleted
      };
    }, [stepIndex, isActive, isCompleted]),
    children: children
  });
};
var useStep = function useStep() {
  var context = React.useContext(StepContext);
  if (!context) {
    throw new Error('useStep must be used within a <Step />');
  }
  return context;
};

var getProgressBackground = function getProgressBackground(_ref) {
  var isCompleted = _ref.isCompleted,
    isActive = _ref.isActive;
  return isCompleted ? 'secondaryLow' : isActive ? 'primary' : 'inputPressed';
};
var STEP_LABEL_CIRCLE_SIZE = 28;

var StepCompletedContent = function StepCompletedContent(_ref) {
  var children = _ref.children,
    render = _ref.render;
  var _useStep = useStep(),
    isCompleted = _useStep.isCompleted,
    stepIndex = _useStep.stepIndex;
  var theme$1 = theme.useTheme();
  var _useMeasure = useMeasure__default["default"](),
    _useMeasure2 = _slicedToArray(_useMeasure, 2),
    completedContentRef = _useMeasure2[0],
    completedContentViewHeight = _useMeasure2[1].height;
  var activeContentAnimatedStyle = web.useSpring({
    from: {
      height: 0,
      opacity: 0
    },
    to: {
      height: isCompleted ? completedContentViewHeight : 0,
      opacity: isCompleted ? 1 : 0
    },
    config: {
      tension: 210,
      friction: 20,
      bounce: 0
    }
  });
  return jsxRuntime.jsx(web.animated.div, {
    style: _objectSpread(_objectSpread({}, activeContentAnimatedStyle), {}, {
      paddingLeft: STEP_LABEL_CIRCLE_SIZE + theme$1.spacing.medium
    }),
    children: jsxRuntime.jsx(web.a.div, {
      ref: completedContentRef,
      children: render ? render({
        stepIndex: stepIndex
      }) : children
    })
  });
};

var StepContent = function StepContent(_ref) {
  var children = _ref.children,
    render = _ref.render;
  var _useStep = useStep(),
    isActive = _useStep.isActive,
    stepIndex = _useStep.stepIndex;
  var theme$1 = theme.useTheme();
  var _useMeasure = useMeasure__default["default"](),
    _useMeasure2 = _slicedToArray(_useMeasure, 2),
    activeContentRef = _useMeasure2[0],
    activeContentViewHeight = _useMeasure2[1].height;
  var activeContentAnimatedStyle = web.useSpring({
    from: {
      height: 0,
      opacity: 0
    },
    to: {
      height: isActive ? activeContentViewHeight : 0,
      opacity: isActive ? 1 : 0
    },
    config: {
      tension: 210,
      friction: 20,
      bounce: 0
    }
  });
  return jsxRuntime.jsx(web.animated.div, {
    style: _objectSpread(_objectSpread({}, activeContentAnimatedStyle), {}, {
      paddingLeft: STEP_LABEL_CIRCLE_SIZE + theme$1.spacing.medium
    }),
    children: jsxRuntime.jsx(web.a.div, {
      ref: activeContentRef,
      children: render ? render({
        stepIndex: stepIndex
      }) : children
    })
  });
};

var StepDescription = function StepDescription(_ref) {
  var children = _ref.children,
    render = _ref.render;
  var _useStep = useStep(),
    isActive = _useStep.isActive,
    stepIndex = _useStep.stepIndex;
  var theme$1 = theme.useTheme();
  var _useMeasure = useMeasure__default["default"](),
    _useMeasure2 = _slicedToArray(_useMeasure, 2),
    activeContentRef = _useMeasure2[0],
    activeContentViewHeight = _useMeasure2[1].height;
  var activeContentAnimatedStyle = web.useSpring({
    from: {
      height: 0,
      opacity: 0
    },
    to: {
      height: isActive ? 0 : activeContentViewHeight,
      opacity: isActive ? 0 : 1
    },
    config: {
      tension: 210,
      friction: 20,
      bounce: 0
    }
  });
  return jsxRuntime.jsx(web.animated.div, {
    style: _objectSpread(_objectSpread({}, activeContentAnimatedStyle), {}, {
      paddingLeft: STEP_LABEL_CIRCLE_SIZE + theme$1.spacing.medium
    }),
    children: jsxRuntime.jsx(web.a.div, {
      ref: activeContentRef,
      children: render ? render({
        stepIndex: stepIndex
      }) : children
    })
  });
};

var _templateObject$1;
var StepHeading = function StepHeading(_ref) {
  var title = _ref.title,
    actionButton = _ref.actionButton,
    renderActionButton = _ref.renderActionButton,
    renderStepNumber = _ref.renderStepNumber;
  var _useStep = useStep(),
    isActive = _useStep.isActive,
    isCompleted = _useStep.isCompleted,
    stepIndex = _useStep.stepIndex;
  var progressBackground = getProgressBackground({
    isCompleted: isCompleted,
    isActive: isActive
  });
  var displayStepNumber = function displayStepNumber() {
    if (renderStepNumber) {
      return renderStepNumber({
        isActive: isActive,
        stepIndex: stepIndex
      });
    }
    return jsxRuntime.jsx(text.Text, {
      size: "xsmall",
      tone: isActive ? 'neutral' : 'muted',
      weight: "semibold",
      children: stepIndex + 1
    });
  };
  return jsxRuntime.jsxs(box.Box, {
    display: "flex",
    flexDirection: "row",
    gap: "medium",
    alignItems: "center",
    children: [jsxRuntime.jsx(box.Box, {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      flexShrink: 0,
      background: progressBackground,
      css: react.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n          width: ", "px;\n          height: ", "px;\n          border-radius: 50%;\n        "])), STEP_LABEL_CIRCLE_SIZE, STEP_LABEL_CIRCLE_SIZE),
      children: isCompleted ? jsxRuntime.jsx(icon.CheckIcon, {
        size: "xxsmall",
        tone: "primary"
      }) : displayStepNumber()
    }), jsxRuntime.jsxs(box.Box, {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "spaceBetween",
      gap: "small",
      height: "small",
      width: "full",
      children: [jsxRuntime.jsx(heading.Heading, {
        level: "3",
        tone: isActive || isCompleted ? 'primary' : 'muted',
        children: title
      }), renderActionButton ? renderActionButton({
        isCompleted: isCompleted,
        isActive: isActive,
        stepIndex: stepIndex
      }) : actionButton]
    })]
  });
};

var _templateObject;
var getStepComponents = function getStepComponents(children) {
  var stepHeading = null;
  var stepContent = null;
  var stepCompletedContent = null;
  var stepDescription = null;
  React__default["default"].Children.map(children, function (child) {
    if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
      if (child.type === StepHeading) {
        stepHeading = child;
      } else if (child.type === StepContent) {
        stepContent = child;
      } else if (child.type === StepCompletedContent) {
        stepCompletedContent = child;
      } else if (child.type === StepDescription) {
        stepDescription = child;
      }
    }
  });
  return {
    stepHeading: stepHeading,
    stepContent: stepContent,
    stepCompletedContent: stepCompletedContent,
    stepDescription: stepDescription
  };
};
var Step = function Step(_ref) {
  var children = _ref.children;
  var _useStep = useStep(),
    isActive = _useStep.isActive,
    isCompleted = _useStep.isCompleted;
  var theme$1 = theme.useTheme();
  var _getStepComponents = getStepComponents(children),
    stepHeading = _getStepComponents.stepHeading,
    stepContent = _getStepComponents.stepContent,
    stepCompletedContent = _getStepComponents.stepCompletedContent,
    stepDescription = _getStepComponents.stepDescription;
  var progressBackground = getProgressBackground({
    isCompleted: isCompleted,
    isActive: isActive
  });
  return jsxRuntime.jsx(box.Box, {
    position: "relative",
    paddingBottom: "xsmall",
    css: react.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        &:not(:last-child) {\n          &:after {\n            content: '';\n            position: absolute;\n            left: 13px;\n            top: ", "px;\n            bottom: 0px;\n            z-index: 1;\n            width: 3px;\n            background-color: ", ";\n          }\n        }\n      "])), STEP_LABEL_CIRCLE_SIZE, progressBackground ? theme$1.color.background[progressBackground] : 'initial'),
    children: jsxRuntime.jsxs(stack.Stack, {
      gap: "medium",
      children: [stepHeading, isActive && stepContent, isCompleted && stepCompletedContent, !isActive && !isCompleted && stepDescription]
    })
  });
};
Step.Heading = StepHeading;
Step.Content = StepContent;
Step.CompletedContent = StepCompletedContent;
Step.Description = StepDescription;

var VerticalStepper = function VerticalStepper(_ref) {
  var children = _ref.children,
    activeIndex = _ref.activeIndex;
  var childArray = React__default["default"].Children.toArray(children);
  return jsxRuntime.jsx(StepperProvider, {
    activeIndex: activeIndex,
    children: jsxRuntime.jsx(box.Box, {
      display: "flex",
      flexDirection: "column",
      gap: "small",
      children: childArray.map(function (child, index) {
        if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
          var active = index === activeIndex;
          var completed = index < activeIndex;
          return jsxRuntime.jsx(StepProvider, {
            stepIndex: index,
            isActive: active,
            isCompleted: completed,
            children: child
          }, "step-".concat(index));
        }
        return null;
      })
    })
  });
};

exports.Step = Step;
exports.VerticalStepper = VerticalStepper;