@koide-labs/ui 0.0.0 → 0.0.2

package/dist/FloatingPortal-tWyuKRSN.js

@@ -0,0 +1,435 @@
+import * as l from "react";
+import * as q from "react-dom";
+import { c as $ } from "./floating-ui.utils.dom-C7FS5id0.js";
+import { u as Q } from "./useId-C5kyn6tA.js";
+import { u as U } from "./useIsoLayoutEffect-CIDbvm3Q.js";
+import { b as tt } from "./detectBrowser-I-s3yzIE.js";
+import { v as et } from "./visuallyHidden-CpJ-mhai.js";
+import { jsx as E, jsxs as _ } from "react/jsx-runtime";
+import { c as rt, f as at } from "./createBaseUIEventDetails-D8M2Yl-a.js";
+import { E as nt, u as it } from "./useRenderElement-DwToLA61.js";
+import { f as ot, d as N, h as st } from "./element-CZEOj04G.js";
+const qt = 500, Ut = 500, jt = {
+  style: {
+    transition: "none"
+  }
+}, Yt = "data-base-ui-click-trigger", zt = {
+  fallbackAxisSide: "none"
+}, Wt = {
+  fallbackAxisSide: "end"
+}, ut = {
+  clipPath: "inset(50%)",
+  position: "fixed",
+  top: 0,
+  left: 0
+};
+var lt = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert] *)", "textarea:not([inert]):not([inert] *)", "a[href]:not([inert]):not([inert] *)", "button:not([inert]):not([inert] *)", "[tabindex]:not(slot):not([inert]):not([inert] *)", "audio[controls]:not([inert]):not([inert] *)", "video[controls]:not([inert]):not([inert] *)", '[contenteditable]:not([contenteditable="false"]):not([inert]):not([inert] *)', "details>summary:first-of-type:not([inert]):not([inert] *)", "details:not([inert]):not([inert] *)"], T = /* @__PURE__ */ lt.join(","), j = typeof Element > "u", y = j ? function() {
+} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector, I = !j && Element.prototype.getRootNode ? function(a) {
+  var t;
+  return a == null || (t = a.getRootNode) === null || t === void 0 ? void 0 : t.call(a);
+} : function(a) {
+  return a?.ownerDocument;
+}, R = function(t, e) {
+  var r;
+  e === void 0 && (e = !0);
+  var n = t == null || (r = t.getAttribute) === null || r === void 0 ? void 0 : r.call(t, "inert"), s = n === "" || n === "true", o = s || e && t && // closest does not exist on shadow roots, so we fall back to a manual
+  // lookup upward, in case it is not defined.
+  (typeof t.closest == "function" ? t.closest("[inert]") : R(t.parentNode));
+  return o;
+}, ct = function(t) {
+  var e, r = t == null || (e = t.getAttribute) === null || e === void 0 ? void 0 : e.call(t, "contenteditable");
+  return r === "" || r === "true";
+}, Y = function(t, e, r) {
+  if (R(t))
+    return [];
+  var n = Array.prototype.slice.apply(t.querySelectorAll(T));
+  return e && y.call(t, T) && n.unshift(t), n = n.filter(r), n;
+}, x = function(t, e, r) {
+  for (var n = [], s = Array.from(t); s.length; ) {
+    var o = s.shift();
+    if (!R(o, !1))
+      if (o.tagName === "SLOT") {
+        var u = o.assignedElements(), c = u.length ? u : o.children, i = x(c, !0, r);
+        r.flatten ? n.push.apply(n, i) : n.push({
+          scopeParent: o,
+          candidates: i
+        });
+      } else {
+        var f = y.call(o, T);
+        f && r.filter(o) && (e || !t.includes(o)) && n.push(o);
+        var d = o.shadowRoot || // check for an undisclosed shadow
+        typeof r.getShadowRoot == "function" && r.getShadowRoot(o), h = !R(d, !1) && (!r.shadowRootFilter || r.shadowRootFilter(o));
+        if (d && h) {
+          var b = x(d === !0 ? o.children : d.children, !0, r);
+          r.flatten ? n.push.apply(n, b) : n.push({
+            scopeParent: o,
+            candidates: b
+          });
+        } else
+          s.unshift.apply(s, o.children);
+      }
+  }
+  return n;
+}, z = function(t) {
+  return !isNaN(parseInt(t.getAttribute("tabindex"), 10));
+}, W = function(t) {
+  if (!t)
+    throw new Error("No node provided");
+  return t.tabIndex < 0 && (/^(AUDIO|VIDEO|DETAILS)$/.test(t.tagName) || ct(t)) && !z(t) ? 0 : t.tabIndex;
+}, ft = function(t, e) {
+  var r = W(t);
+  return r < 0 && e && !z(t) ? 0 : r;
+}, dt = function(t, e) {
+  return t.tabIndex === e.tabIndex ? t.documentOrder - e.documentOrder : t.tabIndex - e.tabIndex;
+}, H = function(t) {
+  return t.tagName === "INPUT";
+}, bt = function(t) {
+  return H(t) && t.type === "hidden";
+}, vt = function(t) {
+  var e = t.tagName === "DETAILS" && Array.prototype.slice.apply(t.children).some(function(r) {
+    return r.tagName === "SUMMARY";
+  });
+  return e;
+}, ht = function(t, e) {
+  for (var r = 0; r < t.length; r++)
+    if (t[r].checked && t[r].form === e)
+      return t[r];
+}, pt = function(t) {
+  if (!t.name)
+    return !0;
+  var e = t.form || I(t), r = function(u) {
+    return e.querySelectorAll('input[type="radio"][name="' + u + '"]');
+  }, n;
+  if (typeof window < "u" && typeof window.CSS < "u" && typeof window.CSS.escape == "function")
+    n = r(window.CSS.escape(t.name));
+  else
+    try {
+      n = r(t.name);
+    } catch (o) {
+      return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", o.message), !1;
+    }
+  var s = ht(n, t.form);
+  return !s || s === t;
+}, gt = function(t) {
+  return H(t) && t.type === "radio";
+}, mt = function(t) {
+  return gt(t) && !pt(t);
+}, yt = function(t) {
+  var e, r = t && I(t), n = (e = r) === null || e === void 0 ? void 0 : e.host, s = !1;
+  if (r && r !== t) {
+    var o, u, c;
+    for (s = !!((o = n) !== null && o !== void 0 && (u = o.ownerDocument) !== null && u !== void 0 && u.contains(n) || t != null && (c = t.ownerDocument) !== null && c !== void 0 && c.contains(t)); !s && n; ) {
+      var i, f, d;
+      r = I(n), n = (i = r) === null || i === void 0 ? void 0 : i.host, s = !!((f = n) !== null && f !== void 0 && (d = f.ownerDocument) !== null && d !== void 0 && d.contains(n));
+    }
+  }
+  return s;
+}, B = function(t) {
+  var e = t.getBoundingClientRect(), r = e.width, n = e.height;
+  return r === 0 && n === 0;
+}, St = function(t, e) {
+  var r = e.displayCheck, n = e.getShadowRoot;
+  if (r === "full-native" && "checkVisibility" in t) {
+    var s = t.checkVisibility({
+      // Checking opacity might be desirable for some use cases, but natively,
+      // opacity zero elements _are_ focusable and tabbable.
+      checkOpacity: !1,
+      opacityProperty: !1,
+      contentVisibilityAuto: !0,
+      visibilityProperty: !0,
+      // This is an alias for `visibilityProperty`. Contemporary browsers
+      // support both. However, this alias has wider browser support (Chrome
+      // >= 105 and Firefox >= 106, vs. Chrome >= 121 and Firefox >= 122), so
+      // we include it anyway.
+      checkVisibilityCSS: !0
+    });
+    return !s;
+  }
+  if (getComputedStyle(t).visibility === "hidden")
+    return !0;
+  var o = y.call(t, "details>summary:first-of-type"), u = o ? t.parentElement : t;
+  if (y.call(u, "details:not([open]) *"))
+    return !0;
+  if (!r || r === "full" || // full-native can run this branch when it falls through in case
+  // Element#checkVisibility is unsupported
+  r === "full-native" || r === "legacy-full") {
+    if (typeof n == "function") {
+      for (var c = t; t; ) {
+        var i = t.parentElement, f = I(t);
+        if (i && !i.shadowRoot && n(i) === !0)
+          return B(t);
+        t.assignedSlot ? t = t.assignedSlot : !i && f !== t.ownerDocument ? t = f.host : t = i;
+      }
+      t = c;
+    }
+    if (yt(t))
+      return !t.getClientRects().length;
+    if (r !== "legacy-full")
+      return !0;
+  } else if (r === "non-zero-area")
+    return B(t);
+  return !1;
+}, Et = function(t) {
+  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(t.tagName))
+    for (var e = t.parentElement; e; ) {
+      if (e.tagName === "FIELDSET" && e.disabled) {
+        for (var r = 0; r < e.children.length; r++) {
+          var n = e.children.item(r);
+          if (n.tagName === "LEGEND")
+            return y.call(e, "fieldset[disabled] *") ? !0 : !n.contains(t);
+        }
+        return !0;
+      }
+      e = e.parentElement;
+    }
+  return !1;
+}, A = function(t, e) {
+  return !(e.disabled || bt(e) || St(e, t) || // For a details element with a summary, the summary element gets the focus
+  vt(e) || Et(e));
+}, w = function(t, e) {
+  return !(mt(e) || W(e) < 0 || !A(t, e));
+}, Tt = function(t) {
+  var e = parseInt(t.getAttribute("tabindex"), 10);
+  return !!(isNaN(e) || e >= 0);
+}, K = function(t) {
+  var e = [], r = [];
+  return t.forEach(function(n, s) {
+    var o = !!n.scopeParent, u = o ? n.scopeParent : n, c = ft(u, o), i = o ? K(n.candidates) : u;
+    c === 0 ? o ? e.push.apply(e, i) : e.push(u) : r.push({
+      documentOrder: s,
+      tabIndex: c,
+      item: n,
+      isScope: o,
+      content: i
+    });
+  }), r.sort(dt).reduce(function(n, s) {
+    return s.isScope ? n.push.apply(n, s.content) : n.push(s.content), n;
+  }, []).concat(e);
+}, F = function(t, e) {
+  e = e || {};
+  var r;
+  return e.getShadowRoot ? r = x([t], e.includeContainer, {
+    filter: w.bind(null, e),
+    flatten: !1,
+    getShadowRoot: e.getShadowRoot,
+    shadowRootFilter: Tt
+  }) : r = Y(t, e.includeContainer, w.bind(null, e)), K(r);
+}, Ht = function(t, e) {
+  e = e || {};
+  var r;
+  return e.getShadowRoot ? r = x([t], e.includeContainer, {
+    filter: A.bind(null, e),
+    flatten: !0,
+    getShadowRoot: e.getShadowRoot
+  }) : r = Y(t, e.includeContainer, A.bind(null, e)), r;
+}, Kt = function(t, e) {
+  if (e = e || {}, !t)
+    throw new Error("No node provided");
+  return y.call(t, T) === !1 ? !1 : w(e, t);
+};
+const D = () => ({
+  getShadowRoot: !0,
+  displayCheck: (
+    // JSDOM does not support the `tabbable` library. To solve this we can
+    // check if `ResizeObserver` is a real function (not polyfilled), which
+    // determines if the current environment is JSDOM-like.
+    typeof ResizeObserver == "function" && ResizeObserver.toString().includes("[native code]") ? "full" : "none"
+  )
+});
+function Z(a, t) {
+  const e = F(a, D()), r = e.length;
+  if (r === 0)
+    return;
+  const n = st(N(a)), s = e.indexOf(n), o = s === -1 ? t === 1 ? 0 : r - 1 : s + t;
+  return e[o];
+}
+function It(a) {
+  return Z(N(a).body, 1) || a;
+}
+function Rt(a) {
+  return Z(N(a).body, -1) || a;
+}
+function J(a, t) {
+  if (!a)
+    return null;
+  const e = F(N(a).body, D()), r = e.length;
+  if (r === 0)
+    return null;
+  const n = e.indexOf(a);
+  if (n === -1)
+    return null;
+  const s = (n + t + r) % r;
+  return e[s];
+}
+function Zt(a) {
+  return J(a, 1);
+}
+function Jt(a) {
+  return J(a, -1);
+}
+function O(a, t) {
+  const e = t || a.currentTarget, r = a.relatedTarget;
+  return !r || !ot(e, r);
+}
+function xt(a) {
+  F(a, D()).forEach((e) => {
+    e.dataset.tabindex = e.getAttribute("tabindex") || "", e.setAttribute("tabindex", "-1");
+  });
+}
+function G(a) {
+  a.querySelectorAll("[data-tabindex]").forEach((e) => {
+    const r = e.dataset.tabindex;
+    delete e.dataset.tabindex, r ? e.setAttribute("tabindex", r) : e.removeAttribute("tabindex");
+  });
+}
+function Nt(a) {
+  return `data-base-ui-${a}`;
+}
+const P = /* @__PURE__ */ l.forwardRef(function(t, e) {
+  const [r, n] = l.useState();
+  return U(() => {
+    tt && n("button");
+  }, []), /* @__PURE__ */ E("span", {
+    ...t,
+    ref: e,
+    style: et,
+    "aria-hidden": r ? void 0 : !0,
+    ...{
+      tabIndex: 0,
+      // Role is only for VoiceOver
+      role: r
+    },
+    "data-base-ui-focus-guard": ""
+  });
+});
+process.env.NODE_ENV !== "production" && (P.displayName = "FocusGuard");
+const L = /* @__PURE__ */ l.createContext(null);
+process.env.NODE_ENV !== "production" && (L.displayName = "PortalContext");
+const Ct = () => l.useContext(L), Ot = Nt("portal");
+function At(a = {}) {
+  const {
+    ref: t,
+    container: e,
+    componentProps: r = nt,
+    elementProps: n,
+    elementState: s
+  } = a, o = Q(), c = Ct()?.portalNode, [i, f] = l.useState(null), [d, h] = l.useState(null), b = l.useRef(null);
+  U(() => {
+    if (e === null) {
+      b.current && (b.current = null, h(null), f(null));
+      return;
+    }
+    if (o == null)
+      return;
+    const g = (e && ($(e) ? e : e.current)) ?? c ?? document.body;
+    if (g == null) {
+      b.current && (b.current = null, h(null), f(null));
+      return;
+    }
+    b.current !== g && (b.current = g, h(null), f(g));
+  }, [e, c, o]);
+  const S = it("div", r, {
+    ref: [t, h],
+    state: s,
+    props: [{
+      id: o,
+      [Ot]: ""
+    }, n]
+  });
+  return {
+    portalNode: d,
+    portalSubtree: i && S ? /* @__PURE__ */ q.createPortal(S, i) : null
+  };
+}
+const wt = /* @__PURE__ */ l.forwardRef(function(t, e) {
+  const {
+    children: r,
+    container: n,
+    className: s,
+    render: o,
+    renderGuards: u,
+    ...c
+  } = t, {
+    portalNode: i,
+    portalSubtree: f
+  } = At({
+    container: n,
+    ref: e,
+    componentProps: t,
+    elementProps: c
+  }), d = l.useRef(null), h = l.useRef(null), b = l.useRef(null), S = l.useRef(null), [v, g] = l.useState(null), k = v?.modal, M = v?.open, C = typeof u == "boolean" ? u : !!v && !v.modal && v.open && !!i;
+  l.useEffect(() => {
+    if (!i || k)
+      return;
+    function p(m) {
+      i && O(m) && (m.type === "focusin" ? G : xt)(i);
+    }
+    return i.addEventListener("focusin", p, !0), i.addEventListener("focusout", p, !0), () => {
+      i.removeEventListener("focusin", p, !0), i.removeEventListener("focusout", p, !0);
+    };
+  }, [i, k]), l.useEffect(() => {
+    !i || M || G(i);
+  }, [M, i]);
+  const X = l.useMemo(() => ({
+    beforeOutsideRef: d,
+    afterOutsideRef: h,
+    beforeInsideRef: b,
+    afterInsideRef: S,
+    portalNode: i,
+    setFocusManagerState: g
+  }), [i]);
+  return /* @__PURE__ */ _(l.Fragment, {
+    children: [f, /* @__PURE__ */ _(L.Provider, {
+      value: X,
+      children: [C && i && /* @__PURE__ */ E(P, {
+        "data-type": "outside",
+        ref: d,
+        onFocus: (p) => {
+          if (O(p, i))
+            b.current?.focus();
+          else {
+            const m = v ? v.domReference : null;
+            Rt(m)?.focus();
+          }
+        }
+      }), C && i && /* @__PURE__ */ E("span", {
+        "aria-owns": i.id,
+        style: ut
+      }), i && /* @__PURE__ */ q.createPortal(r, i), C && i && /* @__PURE__ */ E(P, {
+        "data-type": "outside",
+        ref: h,
+        onFocus: (p) => {
+          if (O(p, i))
+            S.current?.focus();
+          else {
+            const m = v ? v.domReference : null;
+            It(m)?.focus(), v?.closeOnFocusOut && v?.onOpenChange(!1, rt(at, p.nativeEvent));
+          }
+        }
+      })]
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (wt.displayName = "FloatingPortal");
+export {
+  Yt as C,
+  jt as D,
+  P as F,
+  Wt as P,
+  qt as T,
+  Ct as a,
+  It as b,
+  Nt as c,
+  Rt as d,
+  Kt as e,
+  Ht as f,
+  D as g,
+  wt as h,
+  O as i,
+  Ut as j,
+  Jt as k,
+  Zt as l,
+  zt as m,
+  F as t,
+  At as u
+};

package/dist/FloatingPortalLite-DVyq6YhV.js

@@ -0,0 +1,28 @@
+import * as o from "react";
+import * as s from "react-dom";
+import { jsxs as c } from "react/jsx-runtime";
+import { u as m } from "./FloatingPortal-tWyuKRSN.js";
+const f = /* @__PURE__ */ o.forwardRef(function(t, a) {
+  const {
+    children: i,
+    container: n,
+    className: d,
+    render: u,
+    ...l
+  } = t, {
+    portalNode: r,
+    portalSubtree: e
+  } = m({
+    container: n,
+    ref: a,
+    componentProps: t,
+    elementProps: l
+  });
+  return !e && !r ? null : /* @__PURE__ */ c(o.Fragment, {
+    children: [e, r && /* @__PURE__ */ s.createPortal(i, r)]
+  });
+});
+process.env.NODE_ENV !== "production" && (f.displayName = "FloatingPortalLite");
+export {
+  f as F
+};