welcome-ui/dist/Breadcrumb.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import './Breadcrumb.css';
import { jsxs as I, jsx as w } from "react/jsx-runtime";
import { forwardRef as ge, Children as me, cloneElement as xe, useRef as M, useState as X, useCallback as q, useMemo as ze, useEffect as $ } from "react";
import { Icon as re } from "./Icon.js";
import { c as ne } from "./index-B6iGEm-i.js";
import { t as we } from "./throttle-BDBzFeFj.js";
import { f as Oe } from "./forwardRefWithAs-8eP3ZN15.js";
var g = [], Re = function() {
  return g.some(function(e) {
    return e.activeTargets.length > 0;
  });
}, ye = function() {
  return g.some(function(e) {
    return e.skippedTargets.length > 0;
  });
}, J = "ResizeObserver loop completed with undelivered notifications.", Ee = 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);
}, y;
(function(e) {
  e.BORDER_BOX = "border-box", e.CONTENT_BOX = "content-box", e.DEVICE_PIXEL_CONTENT_BOX = "device-pixel-content-box";
})(y || (y = {}));
var m = function(e) {
  return Object.freeze(e);
}, Be = /* @__PURE__ */ function() {
  function e(t, r) {
    this.inlineSize = t, this.blockSize = r, m(this);
  }
  return e;
}(), ie = 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, m(this);
  }
  return e.prototype.toJSON = function() {
    var t = this, r = t.x, n = t.y, i = t.top, o = t.right, s = t.bottom, a = t.left, l = t.width, v = t.height;
    return { x: r, y: n, top: i, right: o, bottom: s, left: a, width: l, height: v };
  }, 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;
}, oe = function(e) {
  if (G(e)) {
    var t = e.getBBox(), r = t.width, n = t.height;
    return !r && !n;
  }
  var i = e, o = i.offsetWidth, s = i.offsetHeight;
  return !(o || s || 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);
}, Te = 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;
}, R = typeof window < "u" ? window : {}, S = /* @__PURE__ */ new WeakMap(), Y = /auto|scroll/, Se = /^tb|vertical/, _e = /msie|trident/i.test(R.navigator && R.navigator.userAgent), h = function(e) {
  return parseFloat(e || "0");
}, z = function(e, t, r) {
  return e === void 0 && (e = 0), t === void 0 && (t = 0), r === void 0 && (r = !1), new Be((r ? t : e) || 0, (r ? e : t) || 0);
}, j = m({
  devicePixelContentBoxSize: z(),
  borderBoxSize: z(),
  contentBoxSize: z(),
  contentRect: new ie(0, 0, 0, 0)
}), se = function(e, t) {
  if (t === void 0 && (t = !1), S.has(e) && !t)
    return S.get(e);
  if (oe(e))
    return S.set(e, j), j;
  var r = getComputedStyle(e), n = G(e) && e.ownerSVGElement && e.getBBox(), i = !_e && r.boxSizing === "border-box", o = Se.test(r.writingMode || ""), s = !n && Y.test(r.overflowY || ""), a = !n && Y.test(r.overflowX || ""), l = n ? 0 : h(r.paddingTop), v = n ? 0 : h(r.paddingRight), f = n ? 0 : h(r.paddingBottom), u = n ? 0 : h(r.paddingLeft), E = n ? 0 : h(r.borderTopWidth), c = n ? 0 : h(r.borderRightWidth), d = n ? 0 : h(r.borderBottomWidth), p = n ? 0 : h(r.borderLeftWidth), b = u + v, x = l + f, O = p + c, D = E + d, F = a ? e.offsetHeight - D - e.clientHeight : 0, H = s ? e.offsetWidth - O - e.clientWidth : 0, fe = i ? b + O : 0, he = i ? x + D : 0, B = n ? n.width : h(r.width) - fe - H, T = n ? n.height : h(r.height) - he - F, pe = B + b + H + O, be = T + x + F + D, V = m({
    devicePixelContentBoxSize: z(Math.round(B * devicePixelRatio), Math.round(T * devicePixelRatio), o),
    borderBoxSize: z(pe, be, o),
    contentBoxSize: z(B, T, o),
    contentRect: new ie(u, l, B, T)
  });
  return S.set(e, V), V;
}, ae = function(e, t, r) {
  var n = se(e, r), i = n.borderBoxSize, o = n.contentBoxSize, s = n.devicePixelContentBoxSize;
  switch (t) {
    case y.DEVICE_PIXEL_CONTENT_BOX:
      return s;
    case y.BORDER_BOX:
      return i;
    default:
      return o;
  }
}, Ce = /* @__PURE__ */ function() {
  function e(t) {
    var r = se(t);
    this.target = t, this.contentRect = r.contentRect, this.borderBoxSize = m([r.borderBoxSize]), this.contentBoxSize = m([r.contentBoxSize]), this.devicePixelContentBoxSize = m([r.devicePixelContentBoxSize]);
  }
  return e;
}(), ce = function(e) {
  if (oe(e))
    return 1 / 0;
  for (var t = 0, r = e.parentNode; r; )
    t += 1, r = r.parentNode;
  return t;
}, Ne = function() {
  var e = 1 / 0, t = [];
  g.forEach(function(s) {
    if (s.activeTargets.length !== 0) {
      var a = [];
      s.activeTargets.forEach(function(v) {
        var f = new Ce(v.target), u = ce(v.target);
        a.push(f), v.lastReportedSize = ae(v.target, v.observedBox), u < e && (e = u);
      }), t.push(function() {
        s.callback.call(s.observer, a, s.observer);
      }), s.activeTargets.splice(0, s.activeTargets.length);
    }
  });
  for (var r = 0, n = t; r < n.length; r++) {
    var i = n[r];
    i();
  }
  return e;
}, K = function(e) {
  g.forEach(function(r) {
    r.activeTargets.splice(0, r.activeTargets.length), r.skippedTargets.splice(0, r.skippedTargets.length), r.observationTargets.forEach(function(i) {
      i.isActive() && (ce(i.target) > e ? r.activeTargets.push(i) : r.skippedTargets.push(i));
    });
  });
}, ke = function() {
  var e = 0;
  for (K(e); Re(); )
    e = Ne(), K(e);
  return ye() && Ee(), e > 0;
}, L, le = [], De = function() {
  return le.splice(0).forEach(function(e) {
    return e();
  });
}, Me = function(e) {
  if (!L) {
    var t = 0, r = document.createTextNode(""), n = { characterData: !0 };
    new MutationObserver(function() {
      return De();
    }).observe(r, n), L = function() {
      r.textContent = "".concat(t ? t-- : t++);
    };
  }
  le.push(e), L();
}, Le = function(e) {
  Me(function() {
    requestAnimationFrame(e);
  });
}, N = 0, We = function() {
  return !!N;
}, Ae = 250, Ie = { attributes: !0, characterData: !0, childList: !0, subtree: !0 }, Q = [
  "resize",
  "load",
  "transitionend",
  "animationend",
  "animationstart",
  "animationiteration",
  "keyup",
  "keydown",
  "mouseup",
  "mousedown",
  "mouseover",
  "mouseout",
  "blur",
  "focus"
], Z = function(e) {
  return e === void 0 && (e = 0), Date.now() + e;
}, W = !1, Pe = 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 = Ae), !W) {
      W = !0;
      var n = Z(t);
      Le(function() {
        var i = !1;
        try {
          i = ke();
        } finally {
          if (W = !1, t = n - Z(), !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, Ie);
    };
    document.body ? r() : R.addEventListener("DOMContentLoaded", r);
  }, e.prototype.start = function() {
    var t = this;
    this.stopped && (this.stopped = !1, this.observer = new MutationObserver(this.listener), this.observe(), Q.forEach(function(r) {
      return R.addEventListener(r, t.listener, !0);
    }));
  }, e.prototype.stop = function() {
    var t = this;
    this.stopped || (this.observer && this.observer.disconnect(), Q.forEach(function(r) {
      return R.removeEventListener(r, t.listener, !0);
    }), this.stopped = !0);
  }, e;
}(), P = new Pe(), ee = function(e) {
  !N && e > 0 && P.start(), N += e, !N && P.stop();
}, Ge = function(e) {
  return !G(e) && !Te(e) && getComputedStyle(e).display === "inline";
}, Fe = function() {
  function e(t, r) {
    this.target = t, this.observedBox = r || y.CONTENT_BOX, this.lastReportedSize = {
      inlineSize: 0,
      blockSize: 0
    };
  }
  return e.prototype.isActive = function() {
    var t = ae(this.target, this.observedBox, !0);
    return Ge(this.target) && (this.lastReportedSize = t), this.lastReportedSize.inlineSize !== t.inlineSize || this.lastReportedSize.blockSize !== t.blockSize;
  }, e;
}(), He = /* @__PURE__ */ function() {
  function e(t, r) {
    this.activeTargets = [], this.skippedTargets = [], this.observationTargets = [], this.observer = t, this.callback = r;
  }
  return e;
}(), _ = /* @__PURE__ */ new WeakMap(), te = function(e, t) {
  for (var r = 0; r < e.length; r += 1)
    if (e[r].target === t)
      return r;
  return -1;
}, C = function() {
  function e() {
  }
  return e.connect = function(t, r) {
    var n = new He(t, r);
    _.set(t, n);
  }, e.observe = function(t, r, n) {
    var i = _.get(t), o = i.observationTargets.length === 0;
    te(i.observationTargets, r) < 0 && (o && g.push(i), i.observationTargets.push(new Fe(r, n && n.box)), ee(1), P.schedule());
  }, e.unobserve = function(t, r) {
    var n = _.get(t), i = te(n.observationTargets, r), o = n.observationTargets.length === 1;
    i >= 0 && (o && g.splice(g.indexOf(n), 1), n.observationTargets.splice(i, 1), ee(-1));
  }, e.disconnect = function(t) {
    var r = this, n = _.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.");
    C.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");
    C.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");
    C.unobserve(this, t);
  }, e.prototype.disconnect = function() {
    C.disconnect(this);
  }, e.toString = function() {
    return "function ResizeObserver () { [polyfill code] }";
  }, e;
}();
const Xe = (e, t, r) => Math.min(Math.max(e, t), r), qe = "_root_1vc0t_2", $e = "_list_1vc0t_12", ve = {
  root: qe,
  list: $e,
  "start-gradient": "_start-gradient_1vc0t_23",
  "end-gradient": "_end-gradient_1vc0t_27",
  "item-wrapper": "_item-wrapper_1vc0t_38",
  "item-content": "_item-content_1vc0t_43",
  "item-separator": "_item-separator_1vc0t_63"
}, A = ne(ve), ue = Oe(
  ({
    as: e = "a",
    children: t,
    collapsed: r,
    "data-testid": n,
    icon: i,
    isActive: o,
    separator: s,
    ...a
  }, l) => {
    const v = a.href || a.to, f = !!(r && !o);
    let u;
    return f ? u = "ellipsis-h" : i === !0 ? u = o ? "folder-open" : "folder" : i && (u = i), /* @__PURE__ */ I("li", { "aria-label": "breadcrumb", className: A("item-wrapper"), "data-testid": n, children: [
      s ? /* @__PURE__ */ w("span", { className: A("item-separator"), role: "presentation", children: s }) : null,
      /* @__PURE__ */ I(
        e,
        {
          "aria-current": o ? "page" : void 0,
          "aria-disabled": !v,
          ...a,
          className: A("item-content", a.className),
          ref: l,
          children: [
            u ? /* @__PURE__ */ w(re, { name: u, size: "md" }) : null,
            f ? null : t
          ]
        }
      )
    ] });
  }
);
ue.displayName = "Breadcrumb.Item";
const k = ne(ve), de = ge(
  ({
    children: e,
    icon: t,
    lastChildNotClickable: r = !0,
    separator: n = /* @__PURE__ */ w(re, { name: "angle-right-b", size: "md" }),
    ...i
  }, o) => {
    const s = me.toArray(e).filter(Boolean), a = s.length, l = s.map((c, d) => {
      const p = a === 1 || a === d + 1;
      return xe(c, {
        icon: t,
        isActive: p && r,
        key: `breadcrumb-${d}`,
        separator: p ? void 0 : n,
        ...c.props
      });
    }), { endGradient: v, listRef: f, onListScroll: u, startGradient: E } = Je();
    return /* @__PURE__ */ I("nav", { ref: o, ...i, className: k("root", i.className), children: [
      E,
      /* @__PURE__ */ w("ol", { className: k("list"), dir: "rtl", onScroll: u, ref: f, children: l.reverse() }),
      v
    ] });
  }
);
de.displayName = "Breadcrumb";
const et = Object.assign(de, {
  Item: ue
}), Je = () => {
  const e = M(null), t = M(), r = M(), [n, i] = X(!1), [o, s] = X(0), a = (c, d) => {
    c && (c.style.transform = `scale3d(${d}, 1, 1)`);
  }, l = q((c) => {
    const d = 1 - c;
    a(t.current, d), a(r.current, c);
  }, []), v = q(() => {
    const {
      current: { offsetWidth: c, scrollLeft: d, scrollWidth: p }
    } = e, b = p - c, O = Xe(Math.abs(d - o), 0, b) / b;
    l(O);
  }, [o, l]), f = ze(
    () => we(
      (c) => {
        const [
          {
            // Is offsetWidth really needed ?
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            target: { offsetWidth: d, scrollLeft: p, scrollWidth: b }
          }
        ] = c, x = b - d;
        o || s(p === 0 ? 0 : x), i(x > 0);
      },
      300,
      !1
    ),
    [o]
  );
  $(() => {
    const c = new Ve(f);
    return c.observe(e.current), () => c.disconnect();
  }, []), $(() => {
    t.current && r.current && l(0);
  }, [n, l]);
  const u = n ? /* @__PURE__ */ w(
    "span",
    {
      className: k("start-gradient", "bg-linear-to-r  from-neutral-10 to-transparent"),
      ref: t
    }
  ) : null;
  return { endGradient: n ? /* @__PURE__ */ w(
    "span",
    {
      className: k("end-gradient", "bg-linear-to-l from-neutral-10 to-transparent"),
      ref: r
    }
  ) : null, listRef: e, onListScroll: v, startGradient: u };
};
export {
  et as Breadcrumb,
  de as BreadcrumbComponent,
  ve as breadcrumbClasses
};