welcome-ui 8.0.0 → 8.1.0-alpha.1

package/dist/ITI7HKP4-C89kOQb8.mjs

@@ -0,0 +1,474 @@
+"use client";
+import { t as de, c as Y, s as $, i as fe, g as Z, b as B, d as me } from "./YV4JVR4I-DPC8mMuG.mjs";
+import { B as _, A as j, P as ve, C as T, Q as Ie, H as ge, G as Se, c as pe, _ as se, i as Ee, R as ye, S as we, E as ee, T as O, U as be, V as he, b as H, o as z, u as xe, p as ie, D as Pe, d as _e, e as Fe, g as te, m as Ce, W as Ae, f as ke, h as Be } from "./LVA2YJMS-C-kJ1lkr.mjs";
+import { b as Re, g as L, s as De, i as Q, a as Ke, f as Le, c as Te } from "./P2CTZE2T-DOT1mNnX.mjs";
+import { useRef as ne, useEffect as ue, useState as Me, useCallback as Oe } from "react";
+import { j as ze } from "./jsx-runtime-B7I4PJ0H.mjs";
+function We(e) {
+  var s;
+  const n = e.find((c) => !!c.element), t = [...e].reverse().find((c) => !!c.element);
+  let i = (s = n == null ? void 0 : n.element) == null ? void 0 : s.parentElement;
+  for (; i && (t != null && t.element); ) {
+    if (t && i.contains(t.element))
+      return i;
+    i = i.parentElement;
+  }
+  return ge(i).body;
+}
+function Ve(e) {
+  return e == null ? void 0 : e.__unstablePrivateStore;
+}
+function He(e = {}) {
+  var s;
+  de(e, e.store);
+  const n = (s = e.store) == null ? void 0 : s.getState(), t = _(
+    e.items,
+    n == null ? void 0 : n.items,
+    e.defaultItems,
+    []
+  ), i = new Map(t.map((u) => [u.id, u])), c = {
+    items: t,
+    renderedItems: _(n == null ? void 0 : n.renderedItems, [])
+  }, l = Ve(e.store), a = Y(
+    { items: t, renderedItems: c.renderedItems },
+    l
+  ), r = Y(c, e.store), x = (u) => {
+    const f = Ie(u, (m) => m.element);
+    a.setState("renderedItems", f), r.setState("renderedItems", f);
+  };
+  $(r, () => fe(a)), $(a, () => Z(a, ["items"], (u) => {
+    r.setState("items", u.items);
+  })), $(a, () => Z(a, ["renderedItems"], (u) => {
+    let f = !0, m = requestAnimationFrame(() => {
+      const { renderedItems: S } = r.getState();
+      u.renderedItems !== S && x(u.renderedItems);
+    });
+    if (typeof IntersectionObserver != "function")
+      return () => cancelAnimationFrame(m);
+    const w = () => {
+      if (f) {
+        f = !1;
+        return;
+      }
+      cancelAnimationFrame(m), m = requestAnimationFrame(() => x(u.renderedItems));
+    }, D = We(u.renderedItems), g = new IntersectionObserver(w, { root: D });
+    for (const S of u.renderedItems)
+      S.element && g.observe(S.element);
+    return () => {
+      cancelAnimationFrame(m), g.disconnect();
+    };
+  }));
+  const v = (u, f, m = !1) => {
+    let w;
+    return f((g) => {
+      const S = g.findIndex(({ id: b }) => b === u.id), F = g.slice();
+      if (S !== -1) {
+        w = g[S];
+        const b = T(T({}, w), u);
+        F[S] = b, i.set(u.id, b);
+      } else
+        F.push(u), i.set(u.id, u);
+      return F;
+    }), () => {
+      f((g) => {
+        if (!w)
+          return m && i.delete(u.id), g.filter(({ id: b }) => b !== u.id);
+        const S = g.findIndex(({ id: b }) => b === u.id);
+        if (S === -1) return g;
+        const F = g.slice();
+        return F[S] = w, i.set(u.id, w), F;
+      });
+    };
+  }, K = (u) => v(
+    u,
+    (f) => a.setState("items", f),
+    !0
+  );
+  return j(T({}, r), {
+    registerItem: K,
+    renderItem: (u) => ve(
+      K(u),
+      v(
+        u,
+        (f) => a.setState("renderedItems", f)
+      )
+    ),
+    item: (u) => {
+      if (!u) return null;
+      let f = i.get(u);
+      if (!f) {
+        const { items: m } = a.getState();
+        f = m.find((w) => w.id === u), f && i.set(u, f);
+      }
+      return f || null;
+    },
+    // @ts-expect-error Internal
+    __unstablePrivateStore: a
+  });
+}
+function Ne(e, s, n) {
+  return Se(s, [n.store]), B(e, n, "items", "setItems"), e;
+}
+function ae(e) {
+  const s = [];
+  for (const n of e)
+    s.push(...n);
+  return s;
+}
+function J(e) {
+  return e.slice().reverse();
+}
+var Ue = { id: null };
+function R(e, s) {
+  return e.find((n) => s ? !n.disabled && n.id !== s : !n.disabled);
+}
+function $e(e, s) {
+  return e.filter((n) => s ? !n.disabled && n.id !== s : !n.disabled);
+}
+function re(e, s) {
+  return e.filter((n) => n.rowId === s);
+}
+function je(e, s, n = !1) {
+  const t = e.findIndex((i) => i.id === s);
+  return [
+    ...e.slice(t + 1),
+    ...n ? [Ue] : [],
+    ...e.slice(0, t)
+  ];
+}
+function ce(e) {
+  const s = [];
+  for (const n of e) {
+    const t = s.find((i) => {
+      var c;
+      return ((c = i[0]) == null ? void 0 : c.rowId) === n.rowId;
+    });
+    t ? t.push(n) : s.push([n]);
+  }
+  return s;
+}
+function le(e) {
+  let s = 0;
+  for (const { length: n } of e)
+    n > s && (s = n);
+  return s;
+}
+function qe(e) {
+  return {
+    id: "__EMPTY_ITEM__",
+    disabled: !0,
+    rowId: e
+  };
+}
+function Ge(e, s, n) {
+  const t = le(e);
+  for (const i of e)
+    for (let c = 0; c < t; c += 1) {
+      const l = i[c];
+      if (!l || n && l.disabled) {
+        const r = c === 0 && n ? R(i) : i[c - 1];
+        i[c] = r && s !== r.id && n ? r : qe(r == null ? void 0 : r.rowId);
+      }
+    }
+  return e;
+}
+function Qe(e) {
+  const s = ce(e), n = le(s), t = [];
+  for (let i = 0; i < n; i += 1)
+    for (const c of s) {
+      const l = c[i];
+      l && t.push(j(T({}, l), {
+        // If there's no rowId, it means that it's not a grid composite, but
+        // a single row instead. So, instead of verticalizing it, that is,
+        // assigning a different rowId based on the column index, we keep it
+        // undefined so they will be part of the same row. This is useful
+        // when using up/down on one-dimensional composites.
+        rowId: l.rowId ? `${i}` : void 0
+      }));
+    }
+  return t;
+}
+function dt(e = {}) {
+  var s;
+  const n = (s = e.store) == null ? void 0 : s.getState(), t = He(e), i = _(
+    e.activeId,
+    n == null ? void 0 : n.activeId,
+    e.defaultActiveId
+  ), c = j(T({}, t.getState()), {
+    id: _(
+      e.id,
+      n == null ? void 0 : n.id,
+      `id-${Math.random().toString(36).slice(2, 8)}`
+    ),
+    activeId: i,
+    baseElement: _(n == null ? void 0 : n.baseElement, null),
+    includesBaseElement: _(
+      e.includesBaseElement,
+      n == null ? void 0 : n.includesBaseElement,
+      i === null
+    ),
+    moves: _(n == null ? void 0 : n.moves, 0),
+    orientation: _(
+      e.orientation,
+      n == null ? void 0 : n.orientation,
+      "both"
+    ),
+    rtl: _(e.rtl, n == null ? void 0 : n.rtl, !1),
+    virtualFocus: _(
+      e.virtualFocus,
+      n == null ? void 0 : n.virtualFocus,
+      !1
+    ),
+    focusLoop: _(e.focusLoop, n == null ? void 0 : n.focusLoop, !1),
+    focusWrap: _(e.focusWrap, n == null ? void 0 : n.focusWrap, !1),
+    focusShift: _(e.focusShift, n == null ? void 0 : n.focusShift, !1)
+  }), l = Y(c, t, e.store);
+  $(
+    l,
+    () => me(l, ["renderedItems", "activeId"], (r) => {
+      l.setState("activeId", (x) => {
+        var v;
+        return x !== void 0 ? x : (v = R(r.renderedItems)) == null ? void 0 : v.id;
+      });
+    })
+  );
+  const a = (r = "next", x = {}) => {
+    var v, K;
+    const u = l.getState(), {
+      skip: f = 0,
+      activeId: m = u.activeId,
+      focusShift: w = u.focusShift,
+      focusLoop: D = u.focusLoop,
+      focusWrap: g = u.focusWrap,
+      includesBaseElement: S = u.includesBaseElement,
+      renderedItems: F = u.renderedItems,
+      rtl: b = u.rtl
+    } = x, C = r === "up" || r === "down", W = r === "next" || r === "down", q = W ? b && !C : !b || C, N = w && !f;
+    let p = C ? ae(
+      Ge(ce(F), m, N)
+    ) : F;
+    if (p = q ? J(p) : p, p = C ? Qe(p) : p, m == null)
+      return (v = R(p)) == null ? void 0 : v.id;
+    const M = p.find((I) => I.id === m);
+    if (!M)
+      return (K = R(p)) == null ? void 0 : K.id;
+    const U = p.some((I) => I.rowId), G = p.indexOf(M), o = p.slice(G + 1), d = re(o, M.rowId);
+    if (f) {
+      const I = $e(d, m), h = I.slice(f)[0] || // If we can't find an item, just return the last one.
+      I[I.length - 1];
+      return h == null ? void 0 : h.id;
+    }
+    const E = D && (C ? D !== "horizontal" : D !== "vertical"), y = U && g && (C ? g !== "horizontal" : g !== "vertical"), P = W ? (!U || C) && E && S : C ? S : !1;
+    if (E) {
+      const I = y && !P ? p : re(p, M.rowId), h = je(I, m, P), k = R(h, m);
+      return k == null ? void 0 : k.id;
+    }
+    if (y) {
+      const I = R(
+        // We can use nextItems, which contains all the next items, including
+        // items from other rows, to wrap between rows. However, if there is a
+        // null item (the composite container), we'll only use the next items in
+        // the row. So moving next from the last item will focus on the
+        // composite container. On grid composites, horizontal navigation never
+        // focuses on the composite container, only vertical.
+        P ? d : o,
+        m
+      );
+      return P ? (I == null ? void 0 : I.id) || null : I == null ? void 0 : I.id;
+    }
+    const A = R(d, m);
+    return !A && P ? null : A == null ? void 0 : A.id;
+  };
+  return j(T(T({}, t), l), {
+    setBaseElement: (r) => l.setState("baseElement", r),
+    setActiveId: (r) => l.setState("activeId", r),
+    move: (r) => {
+      r !== void 0 && (l.setState("activeId", r), l.setState("moves", (x) => x + 1));
+    },
+    first: () => {
+      var r;
+      return (r = R(l.getState().renderedItems)) == null ? void 0 : r.id;
+    },
+    last: () => {
+      var r;
+      return (r = R(J(l.getState().renderedItems))) == null ? void 0 : r.id;
+    },
+    next: (r) => (r !== void 0 && typeof r == "number" && (r = { skip: r }), a("next", r)),
+    previous: (r) => (r !== void 0 && typeof r == "number" && (r = { skip: r }), a("previous", r)),
+    down: (r) => (r !== void 0 && typeof r == "number" && (r = { skip: r }), a("down", r)),
+    up: (r) => (r !== void 0 && typeof r == "number" && (r = { skip: r }), a("up", r))
+  });
+}
+function ft(e, s, n) {
+  return e = Ne(e, s, n), B(e, n, "activeId", "setActiveId"), B(e, n, "includesBaseElement"), B(e, n, "virtualFocus"), B(e, n, "orientation"), B(e, n, "rtl"), B(e, n, "focusLoop"), B(e, n, "focusWrap"), B(e, n, "focusShift"), e;
+}
+var Ye = "div";
+function Je(e) {
+  return e.some((s) => !!s.rowId);
+}
+function Xe(e) {
+  const s = e.target;
+  return s && !ie(s) ? !1 : e.key.length === 1 && !e.ctrlKey && !e.metaKey;
+}
+function Ze(e) {
+  return e.key === "Shift" || e.key === "Control" || e.key === "Alt" || e.key === "Meta";
+}
+function oe(e, s, n) {
+  return H((t) => {
+    var i;
+    if (s == null || s(t), t.defaultPrevented || t.isPropagationStopped() || !z(t) || Ze(t) || Xe(t)) return;
+    const c = e.getState(), l = (i = L(e, c.activeId)) == null ? void 0 : i.element;
+    if (!l) return;
+    const a = t, { view: r } = a, x = se(a, ["view"]), v = n == null ? void 0 : n.current;
+    l !== v && l.focus(), Ae(l, t.type, x) || t.preventDefault(), t.currentTarget.contains(l) && t.stopPropagation();
+  });
+}
+function et(e) {
+  return Le(
+    ae(J(Te(e)))
+  );
+}
+function tt(e) {
+  const [s, n] = Me(!1), t = Oe(() => n(!0), []), i = e.useState(
+    (c) => L(e, c.activeId)
+  );
+  return ue(() => {
+    const c = i == null ? void 0 : i.element;
+    s && c && (n(!1), c.focus({ preventScroll: !0 }));
+  }, [i, s]), t;
+}
+var nt = pe(
+  function(s) {
+    var n = s, {
+      store: t,
+      composite: i = !0,
+      focusOnMove: c = i,
+      moveOnKeyPress: l = !0
+    } = n, a = se(n, [
+      "store",
+      "composite",
+      "focusOnMove",
+      "moveOnKeyPress"
+    ]);
+    const r = Re();
+    t = t || r, Ee(
+      t,
+      process.env.NODE_ENV !== "production" && "Composite must receive a `store` prop or be wrapped in a CompositeProvider component."
+    );
+    const x = ne(null), v = ne(null), K = tt(t), u = t.useState("moves"), [, f] = ye(
+      i ? t.setBaseElement : null
+    );
+    ue(() => {
+      var o;
+      if (!t || !u || !i || !c) return;
+      const { activeId: d } = t.getState(), E = (o = L(t, d)) == null ? void 0 : o.element;
+      E && we(E);
+    }, [t, u, i, c]), ee(() => {
+      if (!t || !u || !i) return;
+      const { baseElement: o, activeId: d } = t.getState();
+      if (!(d === null) || !o) return;
+      const y = v.current;
+      v.current = null, y && O(y, { relatedTarget: o }), be(o) || o.focus();
+    }, [t, u, i]);
+    const m = t.useState("activeId"), w = t.useState("virtualFocus");
+    ee(() => {
+      var o;
+      if (!t || !i || !w) return;
+      const d = v.current;
+      if (v.current = null, !d) return;
+      const y = ((o = L(t, m)) == null ? void 0 : o.element) || he(d);
+      y !== d && O(d, { relatedTarget: y });
+    }, [t, m, w, i]);
+    const D = oe(
+      t,
+      a.onKeyDownCapture,
+      v
+    ), g = oe(
+      t,
+      a.onKeyUpCapture,
+      v
+    ), S = a.onFocusCapture, F = H((o) => {
+      if (S == null || S(o), o.defaultPrevented || !t) return;
+      const { virtualFocus: d } = t.getState();
+      if (!d) return;
+      const E = o.relatedTarget, y = De(o.currentTarget);
+      z(o) && y && (o.stopPropagation(), v.current = E);
+    }), b = a.onFocus, C = H((o) => {
+      if (b == null || b(o), o.defaultPrevented || !i || !t) return;
+      const { relatedTarget: d } = o, { virtualFocus: E } = t.getState();
+      E ? z(o) && !Q(t, d) && queueMicrotask(K) : z(o) && t.setActiveId(null);
+    }), W = a.onBlurCapture, q = H((o) => {
+      var d;
+      if (W == null || W(o), o.defaultPrevented || !t) return;
+      const { virtualFocus: E, activeId: y } = t.getState();
+      if (!E) return;
+      const P = (d = L(t, y)) == null ? void 0 : d.element, A = o.relatedTarget, I = Q(t, A), h = v.current;
+      v.current = null, z(o) && I ? (A === P ? h && h !== A && O(h, o) : P ? O(P, o) : h && O(h, o), o.stopPropagation()) : !Q(t, o.target) && P && O(P, o);
+    }), N = a.onKeyDown, p = xe(l), M = H((o) => {
+      var d;
+      if (N == null || N(o), o.defaultPrevented || !t || !z(o)) return;
+      const { orientation: E, renderedItems: y, activeId: P } = t.getState(), A = L(t, P);
+      if ((d = A == null ? void 0 : A.element) != null && d.isConnected) return;
+      const I = E !== "horizontal", h = E !== "vertical", k = Je(y);
+      if ((o.key === "ArrowLeft" || o.key === "ArrowRight" || o.key === "Home" || o.key === "End") && ie(o.currentTarget)) return;
+      const X = {
+        ArrowUp: (k || I) && (() => {
+          if (k) {
+            const V = et(y);
+            return V == null ? void 0 : V.id;
+          }
+          return t == null ? void 0 : t.last();
+        }),
+        ArrowRight: (k || h) && t.first,
+        ArrowDown: (k || I) && t.first,
+        ArrowLeft: (k || h) && t.last,
+        Home: t.first,
+        End: t.last,
+        PageUp: t.first,
+        PageDown: t.last
+      }[o.key];
+      if (X) {
+        const V = X();
+        if (V !== void 0) {
+          if (!p(o)) return;
+          o.preventDefault(), t.move(V);
+        }
+      }
+    });
+    a = Pe(
+      a,
+      (o) => /* @__PURE__ */ ze.jsx(Ke, { value: t, children: o }),
+      [t]
+    );
+    const U = t.useState((o) => {
+      var d;
+      if (t && i && o.virtualFocus)
+        return (d = L(t, o.activeId)) == null ? void 0 : d.id;
+    });
+    a = _e(te({
+      "aria-activedescendant": U
+    }, a), {
+      ref: Fe(x, f, a.ref),
+      onKeyDownCapture: D,
+      onKeyUpCapture: g,
+      onFocusCapture: F,
+      onFocus: C,
+      onBlurCapture: q,
+      onKeyDown: M
+    });
+    const G = t.useState(
+      (o) => i && (o.virtualFocus || o.activeId === null)
+    );
+    return a = Ce(te({ focusable: G }, a)), a;
+  }
+);
+ke(function(s) {
+  const n = nt(s);
+  return Be(Ye, n);
+});
+export {
+  nt as a,
+  He as b,
+  dt as c,
+  ft as u
+};

package/dist/Icon.mjs

@@ -1,7 +1,7 @@
 "use client";
-import a from "react";
-import m, { css as i } from "@xstyled/styled-components";
-import { forwardRef as d } from "./System.mjs";
+import { j as a } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { forwardRef as m } from "./System.mjs";
+import d, { css as i } from "@xstyled/styled-components";
 const g = i`
   g,
   path {
@@ -13,38 +13,38 @@ const g = i`
   path {
     stroke: none;
   }
-`, l = m.svgBox(({ isFlag: e, size: o = "md", stroked: r, theme: s }) => {
-  const t = s.icons[o] || o;
+`, n = d.svgBox(({ isFlag: o, size: s = "md", stroked: r, theme: t }) => {
+  const e = t.icons[s] || s;
   return i`
-    ${!e && (r ? g : f)};
-    width: ${t};
-    height: ${t};
+    ${!o && (r ? g : f)};
+    width: ${e};
+    height: ${e};
   `;
-}), u = d(
-  ({ content: e, dataTestId: o, size: r = "md", title: s, ...t }, n) => {
-    const c = t.className || "";
-    return e ? /* @__PURE__ */ a.createElement(
-      l,
+}), u = m(
+  ({ content: o, dataTestId: s, size: r = "md", title: t, ...e }, l) => {
+    const c = e.className || "";
+    return o ? /* @__PURE__ */ a.jsx(
+      n,
       {
-        alt: s,
-        dangerouslySetInnerHTML: { __html: e.block },
-        "data-testid": o && `icon-${o}`,
-        isFlag: e.isFlag,
-        ref: n,
+        alt: t,
+        dangerouslySetInnerHTML: { __html: o.block },
+        "data-testid": s && `icon-${s}`,
+        isFlag: o.isFlag,
+        ref: l,
         role: "img",
         size: r,
-        stroked: e.stroked,
-        title: s,
-        viewBox: e.viewBox || "0 0 100 100",
-        ...t,
+        stroked: o.stroked,
+        title: t,
+        viewBox: o.viewBox || "0 0 100 100",
+        ...e,
         className: `${c} wui-icon`
       }
     ) : null;
   }
 );
 u.displayName = "Icon";
-const y = l;
+const k = n;
 export {
   u as Icon,
-  y as StyledIcon
+  k as StyledIcon
 };