@servicetitan/anvil2 1.2.7 → 1.3.0

package/Stepper-85a93af9.js

@@ -0,0 +1,633 @@
+import "./Stepper.css";
+import { f as t } from "./jsx-runtime-944c88e2-e73fa629.js";
+import { forwardRef as C, useState as S, useRef as E, useEffect as R, useContext as D, createContext as se, useCallback as L, useMemo as ie } from "react";
+import { u as M } from "./floating-ui.react-8d61182d.js";
+import { c as k } from "./index-e0f6271a.js";
+import { C as ce } from "./Icon-b94f924c.js";
+import { a as de } from "./check-5f087ea0-b5474547.js";
+import { j as $ } from "./Flex-d338e855.js";
+import { J as B } from "./useLayoutPropsUtil-e307abc7-cbe2fb6d.js";
+import { B as q } from "./Button-855c7b85.js";
+import { u as G } from "./use-reduced-motion-b359504d.js";
+import { m as Q } from "./motion-a0a946d6.js";
+const pe = "_overflow_4bvd0_2", ue = "_expanded_4bvd0_2", me = "_content_4bvd0_55", xe = "_horizontal_4bvd0_99", fe = "_truncate_4bvd0_102", p = {
+  overflow: pe,
+  expanded: ue,
+  "shadow-top": "_shadow-top_4bvd0_2",
+  "shadow-right": "_shadow-right_4bvd0_6",
+  "shadow-bottom": "_shadow-bottom_4bvd0_10",
+  "shadow-left": "_shadow-left_4bvd0_14",
+  "overflow-text": "_overflow-text_4bvd0_21",
+  "expand-button": "_expand-button_4bvd0_34",
+  content: me,
+  horizontal: xe,
+  truncate: fe
+}, V = C(
+  (v, b) => {
+    const { rows: u = 1, ...x } = v, { layoutStyles: o, componentProps: i } = B(x), [a, m] = S(!1), { className: r, style: c, children: l, ...d } = i, s = {
+      ...c,
+      ...o,
+      "--overflow-text-row": a ? "initial" : u
+    };
+    if ("expandable" in v && v.expandable === !0) {
+      const {
+        expandable: _,
+        expandText: y,
+        collapseText: e,
+        onExpand: n,
+        onCollapse: g,
+        ...N
+      } = d, A = y ?? "Show more...", P = e ?? "Show less...", h = (j) => {
+        if (m((I) => !I), a) {
+          g == null || g(j);
+          return;
+        }
+        n == null || n(j);
+      }, w = k(
+        [p["overflow-text"]],
+        [p.expandable],
+        {
+          [p.expanded]: a
+        }
+      );
+      return /* @__PURE__ */ t.jsxs(
+        "div",
+        {
+          ref: b,
+          className: w,
+          style: s,
+          "data-anv": "overflow-text",
+          ...N,
+          children: [
+            /* @__PURE__ */ t.jsx("div", { className: p.content, children: l }),
+            /* @__PURE__ */ t.jsx(
+              "button",
+              {
+                className: p["expand-button"],
+                onClick: h,
+                "aria-hidden": !0,
+                children: a ? P : A
+              }
+            )
+          ]
+        }
+      );
+    }
+    const f = k([p["overflow-text"]]);
+    return /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        ref: b,
+        className: f,
+        style: s,
+        "data-anv": "overflow-text",
+        ...d,
+        children: /* @__PURE__ */ t.jsx("div", { className: p.content, children: l })
+      }
+    );
+  }
+);
+V.displayName = "OverflowText";
+const X = C(
+  (v, b) => {
+    const { layoutStyles: u, componentProps: x } = B(v), {
+      children: o,
+      className: i,
+      direction: a = "column",
+      style: m,
+      height: r,
+      width: c,
+      truncate: l,
+      gap: d,
+      ...s
+    } = x, f = E(null), [_, y] = S(!1), [e, n] = S({
+      left: !1,
+      right: !1,
+      top: !1,
+      bottom: !1
+    });
+    R(() => {
+      if (!f.current)
+        return;
+      if (a === "row") {
+        const w = f.current.offsetWidth < f.current.scrollWidth;
+        n((j) => ({
+          ...j,
+          right: w
+        }));
+        return;
+      }
+      const h = f.current.offsetHeight < f.current.scrollHeight;
+      n((w) => ({
+        ...w,
+        bottom: h
+      }));
+    }, [a]);
+    const g = () => {
+      if (!f.current)
+        return;
+      const h = f.current;
+      if (a === "row") {
+        const I = h.scrollLeft > 0, T = h.scrollLeft < h.scrollWidth - h.offsetWidth;
+        n({
+          left: I,
+          right: T,
+          top: !1,
+          bottom: !1
+        });
+        return;
+      }
+      const w = h.scrollTop > 0, j = h.scrollTop < h.scrollHeight - h.offsetHeight;
+      n({
+        top: w,
+        bottom: j,
+        left: !1,
+        right: !1
+      });
+    }, N = k([p.overflow], {
+      [p.vertical]: a === "column",
+      [p.horizontal]: a === "row",
+      [p.truncate]: !!l,
+      [p.expanded]: _
+    });
+    if (l) {
+      const h = {
+        ...m,
+        ...u
+      }, w = {
+        height: r ?? void 0
+      }, j = typeof l == "object" ? l.expandText : "Show more...", I = typeof l == "object" ? l.collapseText : "Show less...", T = (W) => {
+        var J, K;
+        if (y((oe) => !oe), setTimeout(() => {
+          g();
+        }, 100), typeof l == "object") {
+          if (_) {
+            (J = l.onCollapse) == null || J.call(l, W);
+            return;
+          }
+          (K = l.onExpand) == null || K.call(l, W);
+        }
+      };
+      return /* @__PURE__ */ t.jsxs(
+        "div",
+        {
+          ref: b,
+          style: h,
+          className: N,
+          "data-anv": "overflow",
+          ...s,
+          children: [
+            e.top && !l ? /* @__PURE__ */ t.jsx("div", { className: p["shadow-top"] }) : null,
+            e.left && !l ? /* @__PURE__ */ t.jsx("div", { className: p["shadow-left"] }) : null,
+            /* @__PURE__ */ t.jsx(
+              $,
+              {
+                className: p.content,
+                onScroll: g,
+                style: w,
+                ref: f,
+                direction: a,
+                gap: d,
+                tabIndex: 0,
+                children: o
+              }
+            ),
+            e.bottom && !l ? /* @__PURE__ */ t.jsx("div", { className: p["shadow-bottom"] }) : null,
+            e.right && !l ? /* @__PURE__ */ t.jsx("div", { className: p["shadow-right"] }) : null,
+            /* @__PURE__ */ t.jsx(
+              "button",
+              {
+                className: p["expand-button"],
+                onClick: T,
+                children: _ ? I : j
+              }
+            )
+          ]
+        }
+      );
+    }
+    const A = {
+      ...m,
+      ...u
+    }, P = {
+      height: r ?? void 0
+    };
+    return /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        ref: b,
+        style: A,
+        className: N,
+        "data-anv": "overflow",
+        ...s,
+        children: [
+          e.left ? /* @__PURE__ */ t.jsx("div", { className: p["shadow-left"] }) : null,
+          e.top ? /* @__PURE__ */ t.jsx("div", { className: p["shadow-top"] }) : null,
+          /* @__PURE__ */ t.jsx(
+            $,
+            {
+              className: p.content,
+              onScroll: g,
+              ref: f,
+              style: P,
+              direction: a,
+              gap: d,
+              tabIndex: 0,
+              children: o
+            }
+          ),
+          e.bottom ? /* @__PURE__ */ t.jsx("div", { className: p["shadow-bottom"] }) : null,
+          e.right ? /* @__PURE__ */ t.jsx("div", { className: p["shadow-right"] }) : null
+        ]
+      }
+    );
+  }
+);
+X.displayName = "Overflow";
+const Y = Object.assign(X, {
+  Text: V
+});
+const ve = "_bar_ead3t_27", be = "_label_ead3t_43", he = "_circle_ead3t_50", F = {
+  "stepper-step": "_stepper-step_ead3t_4",
+  bar: ve,
+  label: be,
+  circle: he,
+  "all-completed": "_all-completed_ead3t_81",
+  "can-navigate": "_can-navigate_ead3t_84"
+}, Z = C(
+  (v, b) => {
+    var u;
+    const x = E(null), {
+      current: o,
+      items: i,
+      setCurrent: a,
+      setFocus: m,
+      allCompleted: r,
+      allowNavigateToPrevStep: c
+    } = D(z), {
+      onClick: l,
+      children: d,
+      onFocus: s,
+      onKeyDown: f,
+      controls: _,
+      className: y,
+      ...e
+    } = v, n = E(), [g, N] = S(!1), [A, P] = S(
+      // Below is to be used for custom overriding
+      // completed state for a step
+      // Check Stepper.stories.tsx#103 for the use case
+      ((u = x.current) == null ? void 0 : u.getAttribute("data-completed")) === "true" ? !0 : void 0
+    );
+    R(() => {
+      i && (n.current = Array.prototype.indexOf.call(i, x.current), P(n.current < o), n.current === o ? N(!0) : N(!1));
+    }, [o, i]);
+    const h = k(F["stepper-step"], y, {
+      [F["can-navigate"]]: c,
+      [F["all-completed"]]: r
+    }), w = (j) => {
+      g || n.current === void 0 || !i || c && (l == null || l(j, n.current), !(n.current > o) && (a == null || a(n.current), m == null || m(n.current), i[n.current].focus()));
+    };
+    return /* @__PURE__ */ t.jsxs(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "data-anv": "stepper-step",
+        className: h,
+        "aria-selected": g,
+        "aria-controls": _,
+        tabIndex: c && g ? 0 : -1,
+        "data-completed": A,
+        onClick: w,
+        ...e,
+        ref: M([x, b]),
+        children: [
+          /* @__PURE__ */ t.jsx("span", { className: F.bar }),
+          /* @__PURE__ */ t.jsxs("span", { className: F.label, children: [
+            /* @__PURE__ */ t.jsx("span", { className: F.circle, children: /* @__PURE__ */ t.jsx(ce, { svg: de, inherit: !0, "aria-hidden": !0 }) }),
+            d
+          ] })
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "StepperStep";
+const ye = "_label_17lfc_25", O = {
+  "stepper-list": "_stepper-list_17lfc_4",
+  label: ye
+}, U = C(
+  (v, b) => {
+    const { className: u, children: x, onKeyDown: o, ...i } = v, {
+      current: a,
+      setCurrent: m,
+      focus: r,
+      setFocus: c,
+      items: l,
+      allowNavigateToPrevStep: d
+    } = D(z), s = (y) => {
+      if (o == null || o(y), !d)
+        return;
+      const e = Array.prototype.filter.call(
+        l,
+        (n) => n.getAttribute("data-completed") === "true" || n.getAttribute("aria-selected") === "true"
+      );
+      switch (y.code) {
+        case "Enter":
+        case "Space":
+          y.preventDefault(), m == null || m(r);
+          break;
+        case "ArrowRight":
+          if (y.preventDefault(), r + 1 === (e == null ? void 0 : e.length)) {
+            c == null || c(0), e == null || e[0].focus(), e == null || e[0].setAttribute("tabindex", "0");
+            return;
+          }
+          e == null || e[r].setAttribute("tabindex", "-1"), c == null || c(r + 1), e == null || e[r + 1].focus(), e == null || e[r + 1].setAttribute("tabindex", "0");
+          break;
+        case "ArrowLeft":
+          if (y.preventDefault(), r === 0) {
+            const n = e ? (e == null ? void 0 : e.length) - 1 : 0;
+            c == null || c(n), e == null || e[n].focus(), e == null || e[n].setAttribute("tabindex", "0");
+            return;
+          }
+          e == null || e[r].setAttribute("tabindex", "-1"), c == null || c(r - 1), e == null || e[r - 1].focus(), e == null || e[r - 1].setAttribute("tabindex", "0");
+          break;
+      }
+    }, f = k(O["stepper-list"], u), _ = l == null ? void 0 : l[a].querySelectorAll("span")[1].textContent;
+    return /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        ...i,
+        tabIndex: 0,
+        className: f,
+        "data-anv": "stepper-list",
+        onKeyDown: s,
+        ref: b,
+        role: "tablist",
+        children: [
+          /* @__PURE__ */ t.jsx($, { direction: "row", className: O["stepper-list"], children: x }),
+          /* @__PURE__ */ t.jsx("span", { className: O.label, children: _ })
+        ]
+      }
+    );
+  }
+);
+U.displayName = "StepperList";
+const ee = {
+  "stepper-panel": "_stepper-panel_13grs_4"
+}, te = C(
+  (v, b) => {
+    var u;
+    const { layoutStyles: x, componentProps: o } = B(v), { id: i, className: a, style: m, children: r, ...c } = o, { current: l, items: d, allCompleted: s } = D(z), f = G();
+    let _;
+    d == null || d.forEach((N, A) => {
+      N.getAttribute("aria-controls") === i && (_ = N.id);
+    });
+    const y = ((u = d == null ? void 0 : d[l]) == null ? void 0 : u.getAttribute("aria-controls")) === i, e = f ? {
+      enter: {
+        opacity: 0
+      },
+      center: {
+        zIndex: 1,
+        opacity: 1
+      },
+      exit: {
+        zIndex: 0,
+        opacity: 0
+      }
+    } : {
+      enter: {
+        y: 50,
+        opacity: 0
+      },
+      center: {
+        zIndex: 1,
+        y: 0,
+        opacity: 1
+      },
+      exit: {
+        zIndex: 0,
+        y: -50,
+        opacity: 0
+      }
+    }, n = k(ee["stepper-panel"], a), g = { ...m, ...x };
+    return y && !s ? /* @__PURE__ */ t.jsx(
+      Q.div,
+      {
+        variants: e,
+        style: g,
+        initial: "enter",
+        animate: "center",
+        exit: "exit",
+        className: n,
+        transition: {
+          x: {
+            type: "spring",
+            stiffness: 300,
+            damping: 30
+          },
+          opacity: { duration: 1 }
+        },
+        ...c,
+        role: "tabpanel",
+        "data-anv": "stepper-panel",
+        id: i,
+        "aria-labelledby": _,
+        tabIndex: 0,
+        ref: b,
+        children: /* @__PURE__ */ t.jsx(Y, { children: r })
+      }
+    ) : /* @__PURE__ */ t.jsx(t.Fragment, {});
+  }
+);
+te.displayName = "StepperPanel";
+const _e = "_stepper_1vd1x_4", Ne = {
+  stepper: _e
+}, le = C((v, b) => {
+  const { goToNext: u, markComplete: x, items: o, current: i, allCompleted: a } = D(z), {
+    onClick: m,
+    onFocus: r,
+    nextLabel: c = "Next",
+    completeLabel: l = "Complete",
+    appearance: d = "primary",
+    ...s
+  } = v, f = (_) => {
+    if (m == null || m(_), o && i === o.length - 1) {
+      x == null || x();
+      return;
+    }
+    u == null || u();
+  };
+  return a ? null : /* @__PURE__ */ t.jsx(
+    q,
+    {
+      "data-anv": "stepper-next-button",
+      onClick: f,
+      appearance: d,
+      ref: b,
+      ...s,
+      children: o && i === o.length - 1 ? l : c
+    }
+  );
+});
+le.displayName = "StepperNextButton";
+const ne = C((v, b) => {
+  const { goToPrev: u, allCompleted: x, setAllCompleted: o, items: i, current: a } = D(z), { onClick: m, label: r = "Previous", onFocus: c, ...l } = v, d = (s) => {
+    x ? (o == null || o(!1), i == null || i[a].setAttribute("tabindex", "0")) : u == null || u(), m == null || m(s);
+  };
+  return a === 0 ? null : /* @__PURE__ */ t.jsx(
+    q,
+    {
+      "data-anv": "stepper-prev-button",
+      onClick: d,
+      ref: b,
+      ...l,
+      children: r
+    }
+  );
+});
+ne.displayName = "StepperPrevButton";
+const ae = C((v, b) => {
+  const { layoutStyles: u, componentProps: x } = B(v), { id: o, className: i, style: a, children: m, ...r } = x, { allCompleted: c } = D(z), l = G() ? {
+    enter: {
+      opacity: 0
+    },
+    center: {
+      zIndex: 1,
+      opacity: 1
+    },
+    exit: {
+      zIndex: 0,
+      opacity: 0
+    }
+  } : {
+    enter: {
+      y: 50,
+      opacity: 0
+    },
+    center: {
+      zIndex: 1,
+      y: 0,
+      opacity: 1
+    },
+    exit: {
+      zIndex: 0,
+      y: -50,
+      opacity: 0
+    }
+  }, d = k(ee["stepper-panel"], i), s = { ...a, ...u };
+  return c ? /* @__PURE__ */ t.jsx(
+    Q.div,
+    {
+      variants: l,
+      style: s,
+      initial: "enter",
+      animate: "center",
+      exit: "exit",
+      className: d,
+      transition: {
+        x: {
+          type: "spring",
+          stiffness: 300,
+          damping: 30
+        },
+        opacity: { duration: 1 }
+      },
+      ...r,
+      role: "tabpanel",
+      "data-anv": "stepper-final-panel",
+      tabIndex: 0,
+      ref: b,
+      children: /* @__PURE__ */ t.jsx(Y, { children: m })
+    }
+  ) : /* @__PURE__ */ t.jsx(t.Fragment, {});
+});
+ae.displayName = "StepperFinalPanel";
+const H = {
+  current: 0,
+  focus: 0
+}, z = se(H), re = C(
+  (v, b) => {
+    const { layoutStyles: u, componentProps: x } = B(v), {
+      defaultIndex: o,
+      className: i,
+      allowNavigateToPrevStep: a,
+      children: m,
+      onComplete: r,
+      style: c,
+      ...l
+    } = x, d = E(null), [s, f] = S(), [_, y] = S(!1), [e, n] = S(
+      o ?? H.current
+    ), [g, N] = S(
+      o ?? H.focus
+    ), A = k(Ne.stepper, i);
+    R(() => {
+      var T;
+      f((T = d.current) == null ? void 0 : T.querySelectorAll("[role=tab]:not([disabled])"));
+    }, [d]);
+    const P = L(() => {
+      s && (s.forEach((T) => T.setAttribute("tabindex", "-1")), y(!0), r == null || r());
+    }, [s, r]), h = L(() => {
+      s && e + 1 !== s.length && (n == null || n(e + 1), N == null || N(e + 1));
+    }, [e, s]), w = L(() => {
+      e !== 0 && (n == null || n(e - 1), N == null || N(e - 1));
+    }, [e]), j = { ...c, ...u }, I = ie(
+      () => ({
+        current: e,
+        setCurrent: n,
+        focus: g,
+        setFocus: N,
+        goToNext: h,
+        goToPrev: w,
+        markComplete: P,
+        items: s,
+        allCompleted: _,
+        setAllCompleted: y,
+        allowNavigateToPrevStep: a
+      }),
+      [
+        e,
+        g,
+        h,
+        w,
+        P,
+        s,
+        _,
+        y,
+        a
+      ]
+    );
+    return /* @__PURE__ */ t.jsx(z.Provider, { value: I, children: /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        className: A,
+        "data-anv": "stepper",
+        style: j,
+        ...l,
+        ref: M([d, b]),
+        children: m
+      }
+    ) });
+  }
+);
+re.displayName = "Stepper";
+const De = Object.assign(re, {
+  Step: Z,
+  List: U,
+  Panel: te,
+  NextButton: le,
+  PrevButton: ne,
+  FinalPanel: ae
+});
+export {
+  U as G,
+  V as I,
+  te as Q,
+  Z as V,
+  le as W,
+  ne as X,
+  ae as Y,
+  De as j,
+  Y as o
+};
+//# sourceMappingURL=Stepper-85a93af9.js.map