@dt-dds/react-stepper 1.0.0-beta.46 → 1.0.0-beta.48

package/dist/index.js

@@ -1,7 +1,9 @@
 "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;
@@ -19,6 +21,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -44,217 +47,520 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.ts
 var index_exports = {};
 __export(index_exports, {
-  Counter: () => Counter,
-  Step: () => Step_default,
+  Step: () => Step,
   Stepper: () => Stepper,
   useStepper: () => useStepper
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/Stepper.styled.ts
+// src/Stepper.tsx
+var import_react3 = require("react");
+
+// src/components/Step/Step.styled.ts
 var import_styled = __toESM(require("@emotion/styled"));
-var StepperStyled = import_styled.default.ul`
+
+// src/constants/index.ts
+var VERTICAL_TRAIL_LINE_MIN_HEIGHT = 24;
+var HORIZONTAL_TRAIL_LINE_MIN_WIDTH = 80;
+var STEP_MIN_WIDTH = 120;
+var STEP_CONTENT_MAX_WIDTH = 112;
+var VERTICAL_LAST_STEP_INDICATOR_MIN_HEIGHT = 24;
+var VERTICAL_STEP_INDICATOR_MIN_HEIGHT = 56;
+var HORIZONTAL_TRAIL_LINE_START_OFFSET = 20;
+var VERTICAL_TRAIL_LINE_TOP_OFFSET = 32;
+var VERTICAL_TRAIL_LINE_LEFT_OFFSET = 12;
+
+// src/components/Step/Step.styled.ts
+var StepContainer = import_styled.default.div`
+  display: flex;
+  position: relative;
+  overflow: visible;
+  gap: 8px;
+
+  ${({ orientation, isLast, isDisabled }) => {
+  if (orientation === "horizontal") {
+    return `
+        flex-direction: column;
+        align-items: center;
+        flex: 1 1 0;
+        min-width: ${STEP_MIN_WIDTH}px;
+      `;
+  }
+  return `
+      flex-direction: row;
+      padding-bottom: ${isLast ? "0" : "8px"};
+      cursor: ${isDisabled ? "not-allowed" : "pointer"};
+    `;
+}}
+`;
+var StepIndicatorWrapper = import_styled.default.div`
+  display: flex;
+  position: relative;
+
+  ${({ orientation, isLast }) => {
+  if (orientation === "horizontal") {
+    return `
+        width: 100%;
+        flex-direction: row;
+        justify-content: center;
+      `;
+  }
+  return `
+      flex-direction: column;
+      align-self: flex-start;
+      min-height: ${isLast ? `${VERTICAL_LAST_STEP_INDICATOR_MIN_HEIGHT}px` : `${VERTICAL_STEP_INDICATOR_MIN_HEIGHT}px`};
+    `;
+}}
+`;
+
+// src/components/StepContent/StepContent.tsx
+var import_react = require("react");
+var import_react_tooltip = require("@dt-dds/react-tooltip");
+
+// src/components/StepContent/StepContent.styled.ts
+var import_styled2 = __toESM(require("@emotion/styled"));
+var StepContentStyled = import_styled2.default.div`
   display: flex;
   flex-direction: column;
-  gap: 32px;
-  list-style: none;
+  gap: 4px;
+  max-width: ${STEP_CONTENT_MAX_WIDTH}px;
 
-  ${({ theme, orientation = "vertical" }) => `
-    @media only screen and (min-width: ${theme.breakpoints.mq3d}px) {
-      flex-direction: ${orientation === "horizontal" ? "row" : "column"}
-    }
-  `}
+  & > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  ${({ orientation }) => orientation === "horizontal" ? `
+        align-items: center;
+        text-align: center;
+      ` : `
+        align-items: flex-start;
+        text-align: left;
+        padding-top: 4px;
+      `}
+`;
+var StepTitleStyled = import_styled2.default.span`
+  ${({ theme, state, isActive }) => {
+  const getColor = () => {
+    if (state === "disabled") return theme.palette.content.light;
+    if (state === "error") return theme.palette.error.default;
+    return theme.palette.content.dark;
+  };
+  return `
+      ${isActive ? theme.fontStyles.bodyMdBold : theme.fontStyles.bodyMdRegular}
+      color: ${getColor()};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `;
+}}
+`;
+var StepDescriptionStyled = import_styled2.default.span`
+  ${({ theme, state }) => {
+  const getColor = () => {
+    if (state === "disabled") return theme.palette.content.light;
+    if (state === "error") return theme.palette.error.default;
+    if (state === "warning") return theme.palette.content.default;
+    return theme.palette.primary.medium;
+  };
+  return `
+      ${theme.fontStyles.bodySmRegular}
+      color: ${getColor()};
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `;
+}}
 `;
 
-// src/Stepper.tsx
+// src/components/StepContent/StepContent.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Stepper = ({
-  children,
-  dataTestId,
+var StepContent = ({
+  title,
+  description,
+  state,
+  isActive,
   orientation
 }) => {
-  const testId = dataTestId != null ? dataTestId : "default";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StepperStyled, { "data-testid": `${testId}-stepper`, orientation, children });
+  const titleRef = (0, import_react.useRef)(null);
+  const descRef = (0, import_react.useRef)(null);
+  const [showTitleTooltip, setShowTitleTooltip] = (0, import_react.useState)(false);
+  const [showDescTooltip, setShowDescTooltip] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (titleRef.current && title) {
+      const element = titleRef.current;
+      setShowTitleTooltip(element.scrollWidth > element.clientWidth);
+    }
+    if (descRef.current && description) {
+      const element = descRef.current;
+      setShowDescTooltip(element.scrollHeight > element.clientHeight);
+    }
+  }, [title, description, orientation]);
+  if (!title && !description) {
+    return null;
+  }
+  const renderContent = (content, ref, showTooltip, Component, componentProps) => {
+    if (!content) {
+      return null;
+    }
+    const element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({}, componentProps), { ref, children: content }));
+    if (showTooltip) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_tooltip.Tooltip, { children: [
+        element,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_tooltip.Tooltip.Content, { direction: "right", children: content })
+      ] });
+    }
+    return element;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StepContentStyled, { orientation, children: [
+    renderContent(title, titleRef, showTitleTooltip, StepTitleStyled, {
+      state,
+      isActive
+    }),
+    renderContent(
+      description,
+      descRef,
+      showDescTooltip,
+      StepDescriptionStyled,
+      { state }
+    )
+  ] });
 };
 
-// src/components/Step/Step.tsx
-var import_react = require("react");
+// src/components/StepIndicator/StepIndicator.tsx
 var import_react2 = require("@emotion/react");
 var import_react_icon = require("@dt-dds/react-icon");
-var import_react_typography = require("@dt-dds/react-typography");
 
-// src/components/Counter/Counter.styled.ts
-var import_styled2 = __toESM(require("@emotion/styled"));
-var CounterStyled = import_styled2.default.span`
-  ${({ theme, color, outlined, isLarge }) => `
-    ${theme.fontStyles.bodySmRegular}
-    color: ${theme.palette.content.contrast};
-    border: ${theme.spacing.spacing_0};
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    width: ${isLarge ? "24px" : "16px"};
-    height: ${isLarge ? "24px" : "16px"};
-    border-radius: 50%;
-    background-color: ${color === "disabled" ? theme.palette.content.default : theme.palette[color].default};
+// src/components/StepIndicator/StepIndicator.styled.ts
+var import_styled3 = __toESM(require("@emotion/styled"));
+var StepIndicatorStyled = import_styled3.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
 
-    ${outlined && `
-        border: 2px solid ${color === "disabled" ? theme.palette.content.light : theme.palette[color].default};
-        color: ${color === "disabled" ? theme.palette.content.light : theme.palette[color].default};
-        background-color: ${theme.palette.surface.contrast}
-      `};
-  `}
+  ${({ theme, state, isActive, variant }) => {
+  const activeBgColor = isActive ? theme.palette.primary.light : theme.palette.content.contrast;
+  const colorMap = {
+    completed: {
+      bg: theme.palette.primary.default,
+      border: theme.palette.primary.default
+    },
+    warning: {
+      bg: theme.palette.warning.default,
+      border: "transparent"
+    },
+    error: {
+      bg: theme.palette.error.default,
+      border: "transparent"
+    },
+    disabled: {
+      bg: theme.palette.content.contrast,
+      border: theme.palette.border.medium,
+      text: theme.palette.content.light
+    },
+    incomplete: {
+      bg: activeBgColor,
+      border: theme.palette.primary.default,
+      text: theme.palette.primary.default
+    }
+  };
+  const colors = colorMap[state] || colorMap.incomplete;
+  const disabledBorderColor = state === "disabled" ? theme.palette.border.medium : theme.palette.primary.default;
+  if (variant === "bullet" && (state === "incomplete" || state === "disabled")) {
+    return `
+        background-color: ${activeBgColor};
+        border: 1px solid ${disabledBorderColor};
+        
+        &::after {
+          content: '';
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          background-color: ${state === "disabled" ? theme.palette.content.light : theme.palette.primary.default};
+        }
+      `;
+  }
+  if (variant === "icon" && state === "disabled") {
+    return `
+        border: 1px solid ${disabledBorderColor};
+        
+        > i {
+          color: ${theme.palette.content.light};
+        }
+      `;
+  }
+  return `
+      background-color: ${colors.bg};
+      border: 1px solid ${colors.border};
+      color: ${colors.text};
+      ${theme.fontStyles.bodySmBold}
+    `;
+}}
 `;
 
-// src/components/Counter/Counter.tsx
+// src/components/StepIndicator/StepIndicator.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Counter = ({
-  children,
-  color = "informative",
-  dataTestId,
-  style,
-  outlined = false,
-  isLarge = false
+var StepIndicator = ({
+  index,
+  state,
+  variant,
+  isActive,
+  icon
 }) => {
+  const theme = (0, import_react2.useTheme)();
+  const getIndicatorContent = () => {
+    const iconMap = {
+      completed: "check",
+      warning: "warning",
+      error: "error"
+    };
+    if (iconMap[state]) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_icon.Icon,
+        {
+          code: iconMap[state],
+          color: theme.palette.content.contrast,
+          size: "small"
+        }
+      );
+    }
+    if (variant === "bullet") {
+      return null;
+    }
+    if (variant === "icon" && icon) {
+      return icon;
+    }
+    return index + 1;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    CounterStyled,
+    StepIndicatorStyled,
     {
-      color,
-      "data-testid": dataTestId != null ? dataTestId : "counter",
-      isLarge,
-      outlined,
-      style,
-      children
+      "data-testid": "step-indicator",
+      isActive,
+      state,
+      variant,
+      children: getIndicatorContent()
     }
   );
 };
 
-// src/components/Step/Step.styled.ts
-var import_styled3 = __toESM(require("@emotion/styled"));
-var StepStyled = import_styled3.default.li`
-  display: flex;
-  gap: 12px;
-  align-items: center;
-`;
-var LabelStyled = import_styled3.default.span`
-  ${({ theme, color }) => `
-    ${theme.fontStyles.bodyMdRegularSmall};
-    color: ${color === "disabled" ? theme.palette.content.light : theme.palette[color].default};
-  `}
+// src/components/TrailLine/TrailLine.styled.ts
+var import_styled4 = __toESM(require("@emotion/styled"));
+var TrailLineStyled = import_styled4.default.span`
+  position: absolute;
+  transition: background-color 0.3s ease;
+
+  ${({ state, orientation, theme }) => {
+  const color = state === "completed" ? `${theme.palette.primary.default}` : `${theme.palette.primary.light}`;
+  if (orientation === "horizontal") {
+    return `
+        top: 50%;
+        transform: translateY(-50%);
+        left: calc(50% + ${HORIZONTAL_TRAIL_LINE_START_OFFSET}px);
+        right: calc(-50% + ${HORIZONTAL_TRAIL_LINE_START_OFFSET}px);
+        min-width: ${HORIZONTAL_TRAIL_LINE_MIN_WIDTH}px;
+        height: ${state === "completed" ? "2px" : "1px"};
+        background-color: ${color};
+      `;
+  }
+  return `
+      top: ${VERTICAL_TRAIL_LINE_TOP_OFFSET}px;
+      left: ${VERTICAL_TRAIL_LINE_LEFT_OFFSET}px;
+      width: ${state === "completed" ? "2px" : "1px"};
+      min-height: ${VERTICAL_TRAIL_LINE_MIN_HEIGHT}px;
+      background-color: ${color};
+    `;
+}}
 `;
 
-// src/components/Step/Step.tsx
+// src/components/TrailLine/TrailLine.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Step = ({
-  children,
-  isActive = false,
-  isCompleted = false,
-  isDisabled = false,
-  isError = false
-}) => {
-  const clonedChildren = (0, import_react.useMemo)(
-    () => import_react.Children.map(children, (child) => {
-      return child && (0, import_react.cloneElement)(child, __spreadValues({
-        isActive,
-        isCompleted,
-        isDisabled,
-        isError
-      }, child.props));
-    }),
-    [children, isActive, isCompleted, isDisabled, isError]
+var TrailLine = ({ state, orientation }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    TrailLineStyled,
+    {
+      "data-testid": "trail-line",
+      orientation,
+      state
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StepStyled, { children: clonedChildren });
 };
-var StepCounter = ({
-  children,
+
+// src/components/Step/Step.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Step = ({
+  index = 0,
+  title,
+  description,
+  state = "incomplete",
   isActive = false,
-  isCompleted = false,
-  isDisabled = false,
-  isError = false
+  variant = "number",
+  icon,
+  isLast = false,
+  orientation,
+  dataTestId
 }) => {
-  const theme = (0, import_react2.useTheme)();
-  const color = isError ? "error" : isDisabled ? "disabled" : "primary";
-  const bgColor = isError ? theme.palette.error.light : theme.palette.primary.light;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    Counter,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    StepContainer,
     {
-      color,
-      isLarge: true,
-      outlined: !isCompleted,
-      style: __spreadValues({
-        borderWidth: 1
-      }, isActive && { backgroundColor: bgColor }),
-      children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icon.Icon, { code: "check", color: theme.palette.surface.light, size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_typography.Typography,
-        {
-          color: color === "disabled" ? "content.light" : `${color}.default`,
-          element: "span",
-          fontStyles: "bodyXsBold",
-          style: {
-            width: 24,
-            height: 24,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children
-        }
-      )
+      isDisabled: state === "disabled",
+      isLast,
+      orientation,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          StepIndicatorWrapper,
+          {
+            "data-testid": dataTestId != null ? dataTestId : `step-${index}`,
+            isLast,
+            orientation,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                StepIndicator,
+                {
+                  icon,
+                  index,
+                  isActive,
+                  state,
+                  variant
+                }
+              ),
+              !isLast && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TrailLine, { orientation, state })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          StepContent,
+          {
+            description,
+            isActive,
+            orientation,
+            state,
+            title
+          }
+        )
+      ]
     }
   );
 };
-Step.Counter = StepCounter;
-var labelColor = ({
-  isActive,
-  isError,
-  isDisabled,
-  isCompleted
-}) => {
-  if (isError) {
-    return "error";
-  } else if (isActive || isCompleted) {
-    return "primary";
-  } else if (isDisabled) {
-    return "disabled";
-  } else {
-    return "secondary";
-  }
-};
-Step.Label = ({
+
+// src/Stepper.styled.ts
+var import_styled5 = __toESM(require("@emotion/styled"));
+var StepperStyled = import_styled5.default.div`
+  display: flex;
+
+  ${({ orientation = "vertical" }) => `
+    flex-direction: ${orientation === "horizontal" ? "row" : "column"};
+    width: ${orientation === "horizontal" ? "100%" : "fit-content"};
+    align-items: stretch;
+  `}
+`;
+
+// src/Stepper.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Stepper = ({
   children,
-  isActive = false,
-  isCompleted = false,
-  isDisabled = false,
-  isError = false
+  orientation = "vertical",
+  variant = "number",
+  activeStep,
+  dataTestId
 }) => {
-  const color = labelColor({ isActive, isError, isDisabled, isCompleted });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LabelStyled, { color, children });
+  const childrenArray = import_react3.Children.toArray(children);
+  const enhancedChildren = childrenArray.map((child, index) => {
+    var _a;
+    if (child.type !== Step) {
+      return child;
+    }
+    return (0, import_react3.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
+      index,
+      variant,
+      orientation,
+      isLast: index === childrenArray.length - 1,
+      isActive: (_a = child.props.isActive) != null ? _a : activeStep === index
+    }));
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    StepperStyled,
+    {
+      "data-testid": dataTestId != null ? dataTestId : "stepper",
+      orientation,
+      children: enhancedChildren
+    }
+  );
 };
-var Step_default = Step;
+Stepper.Step = Step;
 
 // src/hooks/useStepper.ts
-var import_react3 = require("react");
-var useStepper = () => {
-  const [activeStep, setActiveStep] = (0, import_react3.useState)(0);
-  const handleNext = () => {
-    setActiveStep((activeStep2) => activeStep2 + 1);
-  };
-  const handleBack = () => {
-    setActiveStep((activeStep2) => activeStep2 - 1);
-  };
-  const handleChangeStep = (0, import_react3.useCallback)((step) => {
-    setActiveStep(step);
+var import_react4 = require("react");
+var useStepper = (options) => {
+  const { initialStep = 0, totalSteps } = options || {};
+  const [activeStep, setActiveStep] = (0, import_react4.useState)(initialStep);
+  const [completedSteps, setCompletedSteps] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
+  const isFirstStep = activeStep === 0;
+  const isLastStep = totalSteps !== void 0 ? activeStep === totalSteps - 1 : false;
+  const canGoNext = totalSteps !== void 0 ? activeStep < totalSteps - 1 : true;
+  const canGoBack = activeStep > 0;
+  const handleNext = (0, import_react4.useCallback)(() => {
+    if (canGoNext) {
+      setActiveStep((prev) => prev + 1);
+    }
+  }, [canGoNext]);
+  const handleBack = (0, import_react4.useCallback)(() => {
+    if (canGoBack) {
+      setActiveStep((prev) => prev - 1);
+    }
+  }, [canGoBack]);
+  const handleChangeStep = (0, import_react4.useCallback)(
+    (step) => {
+      const isValidStep = step >= 0 && (totalSteps === void 0 || step < totalSteps);
+      if (isValidStep) {
+        setActiveStep(step);
+      }
+    },
+    [totalSteps]
+  );
+  const handleReset = (0, import_react4.useCallback)(() => {
+    setActiveStep(initialStep);
+    setCompletedSteps(/* @__PURE__ */ new Set());
+  }, [initialStep]);
+  const markStepComplete = (0, import_react4.useCallback)((step) => {
+    setCompletedSteps((prev) => new Set(prev).add(step));
+  }, []);
+  const markStepIncomplete = (0, import_react4.useCallback)((step) => {
+    setCompletedSteps((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(step);
+      return newSet;
+    });
   }, []);
+  const isStepComplete = (0, import_react4.useCallback)(
+    (step) => completedSteps.has(step),
+    [completedSteps]
+  );
   return {
     activeStep,
-    handleChangeStep,
+    isFirstStep,
+    isLastStep,
+    canGoNext,
+    canGoBack,
+    completedSteps,
     handleNext,
-    handleBack
+    handleBack,
+    handleChangeStep,
+    handleReset,
+    markStepComplete,
+    markStepIncomplete,
+    isStepComplete
   };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Counter,
   Step,
   Stepper,
   useStepper