welcome-ui/dist/Breadcrumb.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as b } from "./jsx-runtime-B7I4PJ0H.mjs";
import { useRef as P, useState as X, Children as ge, cloneElement as me, useCallback as j, useMemo as xe, useEffect as q } from "react";
import "./Icon.mjs";
import { R as we } from "./index-CYmF7qCH.mjs";
import { forwardRef as ne } from "./System.mjs";
import { t as ze } from "./throttle-BDBzFeFj.mjs";
import { Box as Oe } from "./Box.mjs";
import y, { th as O, css as ie } from "@xstyled/styled-components";
import { h as Re } from "./hex-to-rgba-BIDK-3ab.mjs";
import "./overflow-ellipsis-DGV5Kgt-.mjs";
import "./index-BhcLigYU.mjs";
var x = [], ye = function() {
  return x.some(function(e) {
    return e.activeTargets.length > 0;
  });
}, Ee = function() {
  return x.some(function(e) {
    return e.skippedTargets.length > 0;
  });
}, J = "ResizeObserver loop completed with undelivered notifications.", Be = function() {
  var e;
  typeof ErrorEvent == "function" ? e = new ErrorEvent("error", {
    message: J
  }) : (e = document.createEvent("Event"), e.initEvent("error", !1, !1), e.message = J), window.dispatchEvent(e);
}, k;
(function(e) {
  e.BORDER_BOX = "border-box", e.CONTENT_BOX = "content-box", e.DEVICE_PIXEL_CONTENT_BOX = "device-pixel-content-box";
})(k || (k = {}));
var w = function(e) {
  return Object.freeze(e);
}, Te = /* @__PURE__ */ function() {
  function e(t, r) {
    this.inlineSize = t, this.blockSize = r, w(this);
  }
  return e;
}(), oe = function() {
  function e(t, r, n, i) {
    return this.x = t, this.y = r, this.width = n, this.height = i, this.top = this.y, this.left = this.x, this.bottom = this.top + this.height, this.right = this.left + this.width, w(this);
  }
  return e.prototype.toJSON = function() {
    var t = this, r = t.x, n = t.y, i = t.top, s = t.right, o = t.bottom, v = t.left, l = t.width, c = t.height;
    return { x: r, y: n, top: i, right: s, bottom: o, left: v, width: l, height: c };
  }, e.fromRect = function(t) {
    return new e(t.x, t.y, t.width, t.height);
  }, e;
}(), G = function(e) {
  return e instanceof SVGElement && "getBBox" in e;
}, se = function(e) {
  if (G(e)) {
    var t = e.getBBox(), r = t.width, n = t.height;
    return !r && !n;
  }
  var i = e, s = i.offsetWidth, o = i.offsetHeight;
  return !(s || o || e.getClientRects().length);
}, U = function(e) {
  var t;
  if (e instanceof Element)
    return !0;
  var r = (t = e == null ? void 0 : e.ownerDocument) === null || t === void 0 ? void 0 : t.defaultView;
  return !!(r && e instanceof r.Element);
}, Se = function(e) {
  switch (e.tagName) {
    case "INPUT":
      if (e.type !== "image")
        break;
    case "VIDEO":
    case "AUDIO":
    case "EMBED":
    case "OBJECT":
    case "CANVAS":
    case "IFRAME":
    case "IMG":
      return !0;
  }
  return !1;
}, C = typeof window < "u" ? window : {}, I = /* @__PURE__ */ new WeakMap(), Y = /auto|scroll/, Ce = /^tb|vertical/, ke = /msie|trident/i.test(C.navigator && C.navigator.userAgent), f = function(e) {
  return parseFloat(e || "0");
}, R = function(e, t, r) {
  return e === void 0 && (e = 0), t === void 0 && (t = 0), r === void 0 && (r = !1), new Te((r ? t : e) || 0, (r ? e : t) || 0);
}, K = w({
  devicePixelContentBoxSize: R(),
  borderBoxSize: R(),
  contentBoxSize: R(),
  contentRect: new oe(0, 0, 0, 0)
}), ae = function(e, t) {
  if (t === void 0 && (t = !1), I.has(e) && !t)
    return I.get(e);
  if (se(e))
    return I.set(e, K), K;
  var r = getComputedStyle(e), n = G(e) && e.ownerSVGElement && e.getBBox(), i = !ke && r.boxSizing === "border-box", s = Ce.test(r.writingMode || ""), o = !n && Y.test(r.overflowY || ""), v = !n && Y.test(r.overflowX || ""), l = n ? 0 : f(r.paddingTop), c = n ? 0 : f(r.paddingRight), E = n ? 0 : f(r.paddingBottom), d = n ? 0 : f(r.paddingLeft), W = n ? 0 : f(r.borderTopWidth), D = n ? 0 : f(r.borderRightWidth), A = n ? 0 : f(r.borderBottomWidth), $ = n ? 0 : f(r.borderLeftWidth), B = d + c, g = l + E, T = $ + D, S = W + A, a = v ? e.offsetHeight - S - e.clientHeight : 0, u = o ? e.offsetWidth - T - e.clientWidth : 0, h = i ? B + T : 0, m = i ? g + S : 0, p = n ? n.width : f(r.width) - h - u, z = n ? n.height : f(r.height) - m - a, pe = p + B + u + T, be = z + g + a + S, V = w({
    devicePixelContentBoxSize: R(Math.round(p * devicePixelRatio), Math.round(z * devicePixelRatio), s),
    borderBoxSize: R(pe, be, s),
    contentBoxSize: R(p, z, s),
    contentRect: new oe(d, l, p, z)
  });
  return I.set(e, V), V;
}, ce = function(e, t, r) {
  var n = ae(e, r), i = n.borderBoxSize, s = n.contentBoxSize, o = n.devicePixelContentBoxSize;
  switch (t) {
    case k.DEVICE_PIXEL_CONTENT_BOX:
      return o;
    case k.BORDER_BOX:
      return i;
    default:
      return s;
  }
}, De = /* @__PURE__ */ function() {
  function e(t) {
    var r = ae(t);
    this.target = t, this.contentRect = r.contentRect, this.borderBoxSize = w([r.borderBoxSize]), this.contentBoxSize = w([r.contentBoxSize]), this.devicePixelContentBoxSize = w([r.devicePixelContentBoxSize]);
  }
  return e;
}(), ue = function(e) {
  if (se(e))
    return 1 / 0;
  for (var t = 0, r = e.parentNode; r; )
    t += 1, r = r.parentNode;
  return t;
}, Ae = function() {
  var e = 1 / 0, t = [];
  x.forEach(function(o) {
    if (o.activeTargets.length !== 0) {
      var v = [];
      o.activeTargets.forEach(function(c) {
        var E = new De(c.target), d = ue(c.target);
        v.push(E), c.lastReportedSize = ce(c.target, c.observedBox), d < e && (e = d);
      }), t.push(function() {
        o.callback.call(o.observer, v, o.observer);
      }), o.activeTargets.splice(0, o.activeTargets.length);
    }
  });
  for (var r = 0, n = t; r < n.length; r++) {
    var i = n[r];
    i();
  }
  return e;
}, Q = function(e) {
  x.forEach(function(r) {
    r.activeTargets.splice(0, r.activeTargets.length), r.skippedTargets.splice(0, r.skippedTargets.length), r.observationTargets.forEach(function(i) {
      i.isActive() && (ue(i.target) > e ? r.activeTargets.push(i) : r.skippedTargets.push(i));
    });
  });
}, Ie = function() {
  var e = 0;
  for (Q(e); ye(); )
    e = Ae(), Q(e);
  return Ee() && Be(), e > 0;
}, _, ve = [], Me = function() {
  return ve.splice(0).forEach(function(e) {
    return e();
  });
}, Le = function(e) {
  if (!_) {
    var t = 0, r = document.createTextNode(""), n = { characterData: !0 };
    new MutationObserver(function() {
      return Me();
    }).observe(r, n), _ = function() {
      r.textContent = "".concat(t ? t-- : t++);
    };
  }
  ve.push(e), _();
}, Ne = function(e) {
  Le(function() {
    requestAnimationFrame(e);
  });
}, N = 0, We = function() {
  return !!N;
}, $e = 250, Pe = { attributes: !0, characterData: !0, childList: !0, subtree: !0 }, Z = [
  "resize",
  "load",
  "transitionend",
  "animationend",
  "animationstart",
  "animationiteration",
  "keyup",
  "keydown",
  "mouseup",
  "mousedown",
  "mouseover",
  "mouseout",
  "blur",
  "focus"
], ee = function(e) {
  return e === void 0 && (e = 0), Date.now() + e;
}, F = !1, _e = function() {
  function e() {
    var t = this;
    this.stopped = !0, this.listener = function() {
      return t.schedule();
    };
  }
  return e.prototype.run = function(t) {
    var r = this;
    if (t === void 0 && (t = $e), !F) {
      F = !0;
      var n = ee(t);
      Ne(function() {
        var i = !1;
        try {
          i = Ie();
        } finally {
          if (F = !1, t = n - ee(), !We())
            return;
          i ? r.run(1e3) : t > 0 ? r.run(t) : r.start();
        }
      });
    }
  }, e.prototype.schedule = function() {
    this.stop(), this.run();
  }, e.prototype.observe = function() {
    var t = this, r = function() {
      return t.observer && t.observer.observe(document.body, Pe);
    };
    document.body ? r() : C.addEventListener("DOMContentLoaded", r);
  }, e.prototype.start = function() {
    var t = this;
    this.stopped && (this.stopped = !1, this.observer = new MutationObserver(this.listener), this.observe(), Z.forEach(function(r) {
      return C.addEventListener(r, t.listener, !0);
    }));
  }, e.prototype.stop = function() {
    var t = this;
    this.stopped || (this.observer && this.observer.disconnect(), Z.forEach(function(r) {
      return C.removeEventListener(r, t.listener, !0);
    }), this.stopped = !0);
  }, e;
}(), H = new _e(), te = function(e) {
  !N && e > 0 && H.start(), N += e, !N && H.stop();
}, Fe = function(e) {
  return !G(e) && !Se(e) && getComputedStyle(e).display === "inline";
}, He = function() {
  function e(t, r) {
    this.target = t, this.observedBox = r || k.CONTENT_BOX, this.lastReportedSize = {
      inlineSize: 0,
      blockSize: 0
    };
  }
  return e.prototype.isActive = function() {
    var t = ce(this.target, this.observedBox, !0);
    return Fe(this.target) && (this.lastReportedSize = t), this.lastReportedSize.inlineSize !== t.inlineSize || this.lastReportedSize.blockSize !== t.blockSize;
  }, e;
}(), Ge = /* @__PURE__ */ function() {
  function e(t, r) {
    this.activeTargets = [], this.skippedTargets = [], this.observationTargets = [], this.observer = t, this.callback = r;
  }
  return e;
}(), M = /* @__PURE__ */ new WeakMap(), re = function(e, t) {
  for (var r = 0; r < e.length; r += 1)
    if (e[r].target === t)
      return r;
  return -1;
}, L = function() {
  function e() {
  }
  return e.connect = function(t, r) {
    var n = new Ge(t, r);
    M.set(t, n);
  }, e.observe = function(t, r, n) {
    var i = M.get(t), s = i.observationTargets.length === 0;
    re(i.observationTargets, r) < 0 && (s && x.push(i), i.observationTargets.push(new He(r, n && n.box)), te(1), H.schedule());
  }, e.unobserve = function(t, r) {
    var n = M.get(t), i = re(n.observationTargets, r), s = n.observationTargets.length === 1;
    i >= 0 && (s && x.splice(x.indexOf(n), 1), n.observationTargets.splice(i, 1), te(-1));
  }, e.disconnect = function(t) {
    var r = this, n = M.get(t);
    n.observationTargets.slice().forEach(function(i) {
      return r.unobserve(t, i.target);
    }), n.activeTargets.splice(0, n.activeTargets.length);
  }, e;
}(), Ve = function() {
  function e(t) {
    if (arguments.length === 0)
      throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
    if (typeof t != "function")
      throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
    L.connect(this, t);
  }
  return e.prototype.observe = function(t, r) {
    if (arguments.length === 0)
      throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
    if (!U(t))
      throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
    L.observe(this, t, r);
  }, e.prototype.unobserve = function(t) {
    if (arguments.length === 0)
      throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
    if (!U(t))
      throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
    L.unobserve(this, t);
  }, e.prototype.disconnect = function() {
    L.disconnect(this);
  }, e.toString = function() {
    return "function ResizeObserver () { [polyfill code] }";
  }, e;
}();
const Xe = (e, t, r) => Math.min(Math.max(e, t), r), je = y.aBox`
  ${O("breadcrumbs.item.default")};
  align-items: center;
  transition: medium;
  direction: initial;

  &:hover {
    ${O("breadcrumbs.item.hover")};
  }

  &[aria-current='page'] {
    ${O("breadcrumbs.item.active")};
  }

  &[aria-disabled='true'] {
    pointer-events: none;
    cursor: default;
  }
`, qe = y.spanBox`
  ${O("breadcrumbs.separator")};
  display: flex;
  align-items: center;
`, Je = ne(
  ({ children: e, dataTestId: t, isActive: r, separator: n, ...i }, s) => {
    const o = i.href || i.to;
    return /* @__PURE__ */ b.jsxs(
      Oe,
      {
        "aria-label": "breadcrumb",
        as: "li",
        "data-testid": t,
        display: "inline-flex",
        flex: "0 0 auto",
        lineHeight: "normal",
        children: [
          n ? /* @__PURE__ */ b.jsx(qe, { role: "presentation", children: n }) : null,
          /* @__PURE__ */ b.jsx(
            je,
            {
              "aria-current": r ? "page" : void 0,
              "aria-disabled": !o,
              ...i,
              ref: s,
              children: e
            }
          )
        ]
      }
    );
  }
), le = y.spanBox(
  ({ gradientBackground: e, theme: t }) => ie`
    left: 0;
    background-image: ${fe(t, e)};
    transform-origin: left;
  `
), de = y.spanBox(
  ({ gradientBackground: e, theme: t }) => ie`
    right: 0;
    background-image: ${fe(t, e, "left")};
    transform-origin: right;
  `
), Ue = y.divBox`
  ${O("breadcrumbs.list")};
  height: 100%;
  position: relative;
  overflow-x: hidden;

  ${le},
  ${de} {
    position: absolute;
    bottom: 0;
    top: 0;
    width: 30;
  }
`, Ye = y.olBox`
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 100%;
  overflow-x: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
`, fe = (e, t, r = "right") => {
  const n = O(`colors.${t}`)({ theme: e }), i = Re(n, 0);
  return `linear-gradient(to ${r}, ${n}, ${i} 100%)`;
}, he = ne(
  ({
    children: e,
    gradientBackground: t = "neutral-10",
    lastChildNotClickable: r = !0,
    separator: n = /* @__PURE__ */ b.jsx(we, { size: "xs" }),
    ...i
  }, s) => {
    const o = P(null), v = P(), l = P(), [c, E] = X(!1), [d, W] = X(0), D = ge.toArray(e).filter(Boolean), A = D.length, $ = D.map((a, u) => {
      const h = A === 1 || A === u + 1;
      return me(a, {
        isActive: h && r,
        key: `breadcrumb-${u}`,
        separator: h ? void 0 : n,
        ...a.props
      });
    });
    function B(a, u) {
      a && (a.style.transform = `scale3d(${u}, 1, 1)`);
    }
    const g = j((a) => {
      const u = 1 - a;
      B(v.current, u), B(l.current, a);
    }, []), T = j(() => {
      const {
        current: { offsetWidth: a, scrollLeft: u, scrollWidth: h }
      } = o, m = h - a, z = Xe(Math.abs(u - d), 0, m) / m;
      g(z);
    }, [d, g]), S = xe(
      () => ze(
        (a) => {
          const [
            {
              // Is offsetWidth really needed ?
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              target: { offsetWidth: u, scrollLeft: h, scrollWidth: m }
            }
          ] = a, p = m - u;
          d || W(h === 0 ? 0 : p), E(p > 0);
        },
        300,
        !1
      ),
      [d]
    );
    return q(() => {
      const a = new Ve(S);
      return a.observe(o.current), () => a.disconnect();
    }, []), q(() => {
      v.current && l.current && g(0);
    }, [c, g]), /* @__PURE__ */ b.jsxs(Ue, { as: "nav", ref: s, ...i, children: [
      c ? /* @__PURE__ */ b.jsx(le, { gradientBackground: t, ref: v }) : null,
      /* @__PURE__ */ b.jsx(Ye, { dir: "rtl", onScroll: T, ref: o, children: $.reverse() }),
      c ? /* @__PURE__ */ b.jsx(de, { gradientBackground: t, ref: l }) : null
    ] });
  }
);
he.displayName = "Breadcrumb";
const ct = Object.assign(he, {
  Item: Je
});
export {
  ct as Breadcrumb,
  he as BreadcrumbComponent
};