braid-design-system 32.16.0 → 32.16.2

package/dist/styles/lib/components/Stepper/Step.cjs

@@ -1,373 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const assert = require("assert");
-const clsx = require("clsx");
-const React = require("react");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const styles_lib_components_Hidden_Hidden_cjs = require("../Hidden/Hidden.cjs");
-const styles_lib_components_Button_Button_cjs = require("../Button/Button.cjs");
-const styles_lib_components_Autosuggest_Autosuggest_cjs = require("../Autosuggest/Autosuggest.cjs");
-const styles_lib_components_Stepper_Stepper_css_cjs = require("./Stepper.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
-const StepContext = React.createContext({
-  stepNumber: 0,
-  isLast: false
-});
-const NAV_RIGHT = 0;
-const NAV_DOWN = 1;
-const NAV_LEFT = 2;
-const NAV_UP = 3;
-const NAV_HOME = 4;
-const NAV_END = 5;
-const NAV_TAB = 6;
-const NAV_CLICKED = 7;
-const NAV_FOCUSED = 8;
-const NAV_BLURRED = 9;
-const StepperContext = React.createContext(null);
-const getNextStep = (moveAmount, current, maxStep) => {
-  if (current === null) {
-    return moveAmount > 0 ? 1 : maxStep;
-  }
-  const nextStep = moveAmount + current;
-  if (nextStep > maxStep) {
-    return 1;
-  }
-  if (nextStep < 1) {
-    return maxStep;
-  }
-  return nextStep;
-};
-const StepperContextProvider = ({
-  children,
-  activeStep,
-  stepCount: stepCountProp,
-  progress,
-  isLinear,
-  align,
-  tone = "formAccent",
-  onStepClick
-}) => {
-  const stepCount = isLinear ? progress : stepCountProp;
-  const [stepperState, dispatch] = React.useReducer(
-    (state, action) => {
-      switch (action.type) {
-        case NAV_UP:
-        case NAV_LEFT: {
-          return {
-            ...state,
-            focusedStep: getNextStep(-1, state.focusedStep, stepCount)
-          };
-        }
-        case NAV_DOWN:
-        case NAV_RIGHT: {
-          return {
-            ...state,
-            focusedStep: getNextStep(1, state.focusedStep, stepCount)
-          };
-        }
-        case NAV_HOME: {
-          return {
-            ...state,
-            focusedStep: 1
-          };
-        }
-        case NAV_END: {
-          return {
-            ...state,
-            focusedStep: stepCount
-          };
-        }
-        case NAV_BLURRED:
-        case NAV_TAB: {
-          return {
-            ...state,
-            focusedStep: null
-          };
-        }
-        case NAV_CLICKED: {
-          return {
-            ...state,
-            focusedStep: action.value
-          };
-        }
-        case NAV_FOCUSED: {
-          return {
-            ...state,
-            focusedStep: state.focusedStep === null ? activeStep : state.focusedStep
-          };
-        }
-        default:
-          return state;
-      }
-    },
-    {
-      focusedStep: null,
-      activeStep,
-      isLinear,
-      tone,
-      align,
-      progress,
-      onStepClick
-    }
-  );
-  const onKeyUp = (event) => {
-    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
-    if (targetKey === "Tab") {
-      return;
-    }
-    const action = {
-      ArrowRight: { type: NAV_RIGHT },
-      ArrowLeft: { type: NAV_LEFT },
-      ArrowUp: { type: NAV_UP },
-      ArrowDown: { type: NAV_DOWN },
-      Home: { type: NAV_HOME },
-      End: { type: NAV_END }
-    };
-    if (action[targetKey]) {
-      dispatch(action[targetKey]);
-    }
-  };
-  const onKeyDown = (event) => {
-    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
-    if (targetKey === "Tab") {
-      dispatch({ type: NAV_TAB });
-      return;
-    }
-    const isNavigationKeyPress = targetKey.indexOf("Arrow") === 0 || ["Home", "End"].includes(targetKey);
-    if (isNavigationKeyPress) {
-      event.preventDefault();
-    }
-  };
-  const onFocus = () => dispatch({
-    type: NAV_FOCUSED
-  });
-  const onBlur = () => dispatch({
-    type: NAV_BLURRED
-  });
-  const onClick = (index) => dispatch({
-    type: NAV_CLICKED,
-    value: index
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StepperContext.Provider,
-    {
-      value: {
-        ...stepperState,
-        activeStep,
-        isLinear,
-        align,
-        tone,
-        progress,
-        onStepClick,
-        ...typeof onStepClick === "function" ? {
-          onKeyUp,
-          onKeyDown,
-          onClick,
-          onFocus,
-          onBlur
-        } : {}
-      },
-      children
-    }
-  );
-};
-const StepIndicator = ({ complete, started, active }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlSpace: "preserve",
-    focusable: "false",
-    viewBox: "0 0 24 24",
-    className: clsx__default.default(
-      styles_lib_components_Stepper_Stepper_css_cjs.indicator,
-      complete || active || started ? styles_lib_components_Stepper_Stepper_css_cjs.highlight : void 0,
-      complete && !active ? styles_lib_components_Stepper_Stepper_css_cjs.complete : void 0,
-      active ? styles_lib_components_Stepper_Stepper_css_cjs.active : void 0
-    ),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "circle",
-        {
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: 4,
-          cx: 12,
-          cy: 12,
-          r: 10
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: 12, r: 5, className: styles_lib_components_Stepper_Stepper_css_cjs.inner }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M 18.26 7.64 C 17.94 7.32 17.46 7.32 17.14 7.64 L 9.7 15.08 L 7.06 12.44 C 6.74 12.12 6.26 12.12 5.94 12.44 S 5.62 13.24 5.94 13.56 L 9.14 16.76 C 9.3 16.92 9.46 17 9.7 17 S 10.1 16.92 10.26 16.76 L 18.26 8.76 C 18.58 8.44 18.58 7.96 18.26 7.64 Z",
-          className: styles_lib_components_Stepper_Stepper_css_cjs.tick
-        }
-      )
-    ]
-  }
-);
-const Step = ({ complete = false, id, children }) => {
-  const stepRef = React.useRef(null);
-  const { stepNumber, isLast } = React.useContext(StepContext);
-  const stepperContext = React.useContext(StepperContext);
-  assert__default.default(
-    stepperContext !== null,
-    "A Step must be rendered as a child of a Stepper. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Stepper"
-  );
-  const {
-    focusedStep,
-    activeStep,
-    tone,
-    align,
-    progress,
-    isLinear,
-    onKeyUp,
-    onKeyDown,
-    onClick,
-    onFocus,
-    onBlur,
-    onStepClick
-  } = stepperContext;
-  const active = activeStep === stepNumber;
-  const focused = focusedStep === stepNumber;
-  const linearStepBeforeProgress = isLinear && stepNumber < progress;
-  const completed = complete || linearStepBeforeProgress;
-  const started = active || complete || isLinear && stepNumber <= progress;
-  const keyboardAccessible = focused || active && focusedStep === null;
-  const interactable = typeof onStepClick === "function" && !active && (!isLinear || stepNumber <= progress);
-  React.useEffect(() => {
-    if (stepRef.current && focused) {
-      stepRef.current.focus();
-    }
-  }, [focused]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    styles_lib_components_Box_Box_cjs.Box,
-    {
-      component: "button",
-      ref: stepRef,
-      position: "relative",
-      outline: "none",
-      display: "flex",
-      justifyContent: { tablet: align === "center" ? "center" : void 0 },
-      width: "full",
-      cursor: interactable ? "pointer" : void 0,
-      pointerEvents: !interactable && !active ? "none" : void 0,
-      "aria-current": active ? "step" : void 0,
-      className: [styles_lib_components_Stepper_Stepper_css_cjs.step, styles_lib_components_Stepper_Stepper_css_cjs.tone[tone]],
-      onClick: interactable ? () => {
-        if (onClick) {
-          onClick(stepNumber);
-        }
-        if (onStepClick) {
-          onStepClick({ id, stepNumber });
-        }
-      } : void 0,
-      onKeyUp,
-      onKeyDown,
-      onFocus,
-      onBlur: keyboardAccessible ? onBlur : void 0,
-      tabIndex: keyboardAccessible ? 0 : -1,
-      children: [
-        !isLast ? /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Box_Box_cjs.Box,
-          {
-            component: "span",
-            position: "absolute",
-            overflow: "hidden",
-            borderRadius: "full",
-            className: [
-              styles_lib_components_Stepper_Stepper_css_cjs.progressTrack,
-              align === "center" ? styles_lib_components_Stepper_Stepper_css_cjs.progressTrackCentered : void 0
-            ],
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              styles_lib_components_Box_Box_cjs.Box,
-              {
-                component: "span",
-                position: "absolute",
-                top: 0,
-                bottom: 0,
-                left: 0,
-                width: "full",
-                className: [
-                  styles_lib_components_Stepper_Stepper_css_cjs.progressLine,
-                  !linearStepBeforeProgress ? styles_lib_components_Stepper_Stepper_css_cjs.progressUnfilled : void 0
-                ]
-              }
-            )
-          }
-        ) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          styles_lib_components_Stack_Stack_cjs.Stack,
-          {
-            component: "span",
-            space: "medium",
-            align: {
-              mobile: "left",
-              tablet: align === "center" ? "center" : void 0
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                styles_lib_components_Box_Box_cjs.Box,
-                {
-                  component: "span",
-                  display: "block",
-                  position: "relative",
-                  transition: "fast",
-                  className: styles_lib_components_Stepper_Stepper_css_cjs.indicatorContainer,
-                  "aria-hidden": true,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      styles_lib_components_Button_Button_cjs.FieldOverlay,
-                      {
-                        variant: "focus",
-                        borderRadius: "full",
-                        onlyVisibleForKeyboardNavigation: true,
-                        className: styles_lib_components_Stepper_Stepper_css_cjs.focusOverlay
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      StepIndicator,
-                      {
-                        complete: completed,
-                        active,
-                        started
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Hidden_Hidden_cjs.Hidden, { component: "span", below: "tablet", children: /* @__PURE__ */ jsxRuntime.jsx(
-                styles_lib_components_Box_Box_cjs.Box,
-                {
-                  component: "span",
-                  display: "block",
-                  paddingX: align === "center" ? "xsmall" : void 0,
-                  paddingRight: align === "left" && !isLast ? "xsmall" : void 0,
-                  userSelect: "none",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    styles_lib_components_Accordion_AccordionItem_cjs.Text,
-                    {
-                      align: align === "center" ? "center" : void 0,
-                      weight: started ? "strong" : void 0,
-                      tone: !started ? "secondary" : void 0,
-                      children
-                    }
-                  )
-                }
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-Step.__isStep__ = true;
-exports.Step = Step;
-exports.StepContext = StepContext;
-exports.StepperContextProvider = StepperContextProvider;