@headlessui-float/react
Version:
Easily use Headless UI for React with Floating UI (Popper.js)
1,338 lines (1,335 loc) • 43.2 kB
JavaScript
var Ut = Object.defineProperty;
var Vt = (t, o, n) => o in t ? Ut(t, o, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[o] = n;
var Te = (t, o, n) => Vt(t, typeof o != "symbol" ? o + "" : o, n);
import de, { useEffect as O, useLayoutEffect as Nt, useState as M, useMemo as K, useRef as J, Fragment as P, forwardRef as Ht, isValidElement as nt, createContext as Oe, useCallback as Bt, useContext as Fe } from "react";
import { Portal as zt, Transition as Ze } from "@headlessui/react";
import { arrow as Xt, useFloating as qt } from "@floating-ui/react";
import { offset as Jt, flip as Kt, shift as Gt, autoPlacement as Zt, hide as Qt, autoUpdate as er } from "@floating-ui/dom";
var Se = { exports: {} }, te = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Qe;
function tr() {
if (Qe) return te;
Qe = 1;
var t = de, o = Symbol.for("react.element"), n = Symbol.for("react.fragment"), r = Object.prototype.hasOwnProperty, u = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, l = { key: !0, ref: !0, __self: !0, __source: !0 };
function s(g, d, E) {
var f, v = {}, R = null, b = null;
E !== void 0 && (R = "" + E), d.key !== void 0 && (R = "" + d.key), d.ref !== void 0 && (b = d.ref);
for (f in d) r.call(d, f) && !l.hasOwnProperty(f) && (v[f] = d[f]);
if (g && g.defaultProps) for (f in d = g.defaultProps, d) v[f] === void 0 && (v[f] = d[f]);
return { $$typeof: o, type: g, key: R, ref: b, props: v, _owner: u.current };
}
return te.Fragment = n, te.jsx = s, te.jsxs = s, te;
}
var re = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var et;
function rr() {
return et || (et = 1, process.env.NODE_ENV !== "production" && function() {
var t = de, o = Symbol.for("react.element"), n = Symbol.for("react.portal"), r = Symbol.for("react.fragment"), u = Symbol.for("react.strict_mode"), l = Symbol.for("react.profiler"), s = Symbol.for("react.provider"), g = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), E = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), v = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), b = Symbol.for("react.offscreen"), w = Symbol.iterator, C = "@@iterator";
function W(e) {
if (e === null || typeof e != "object")
return null;
var i = w && e[w] || e[C];
return typeof i == "function" ? i : null;
}
var k = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function _(e) {
{
for (var i = arguments.length, a = new Array(i > 1 ? i - 1 : 0), c = 1; c < i; c++)
a[c - 1] = arguments[c];
V("error", e, a);
}
}
function V(e, i, a) {
{
var c = k.ReactDebugCurrentFrame, p = c.getStackAddendum();
p !== "" && (i += "%s", a = a.concat([p]));
var x = a.map(function(m) {
return String(m);
});
x.unshift("Warning: " + i), Function.prototype.apply.call(console[e], console, x);
}
}
var N = !1, j = !1, Y = !1, H = !1, oe = !1, G;
G = Symbol.for("react.module.reference");
function Z(e) {
return !!(typeof e == "string" || typeof e == "function" || e === r || e === l || oe || e === u || e === E || e === f || H || e === b || N || j || Y || typeof e == "object" && e !== null && (e.$$typeof === R || e.$$typeof === v || e.$$typeof === s || e.$$typeof === g || e.$$typeof === d || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === G || e.getModuleId !== void 0));
}
function Q(e, i, a) {
var c = e.displayName;
if (c)
return c;
var p = i.displayName || i.name || "";
return p !== "" ? a + "(" + p + ")" : a;
}
function B(e) {
return e.displayName || "Context";
}
function D(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && _("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case r:
return "Fragment";
case n:
return "Portal";
case l:
return "Profiler";
case u:
return "StrictMode";
case E:
return "Suspense";
case f:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case g:
var i = e;
return B(i) + ".Consumer";
case s:
var a = e;
return B(a._context) + ".Provider";
case d:
return Q(e, e.render, "ForwardRef");
case v:
var c = e.displayName || null;
return c !== null ? c : D(e.type) || "Memo";
case R: {
var p = e, x = p._payload, m = p._init;
try {
return D(m(x));
} catch {
return null;
}
}
}
return null;
}
var L = Object.assign, z = 0, ve, he, ge, me, ye, be, ae;
function $e() {
}
$e.__reactDisabledLog = !0;
function ht() {
{
if (z === 0) {
ve = console.log, he = console.info, ge = console.warn, me = console.error, ye = console.group, be = console.groupCollapsed, ae = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: $e,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
z++;
}
}
function gt() {
{
if (z--, z === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: L({}, e, {
value: ve
}),
info: L({}, e, {
value: he
}),
warn: L({}, e, {
value: ge
}),
error: L({}, e, {
value: me
}),
group: L({}, e, {
value: ye
}),
groupCollapsed: L({}, e, {
value: be
}),
groupEnd: L({}, e, {
value: ae
})
});
}
z < 0 && _("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var Ee = k.ReactCurrentDispatcher, we;
function ue(e, i, a) {
{
if (we === void 0)
try {
throw Error();
} catch (p) {
var c = p.stack.trim().match(/\n( *(at )?)/);
we = c && c[1] || "";
}
return `
` + we + e;
}
}
var pe = !1, se;
{
var mt = typeof WeakMap == "function" ? WeakMap : Map;
se = new mt();
}
function We(e, i) {
if (!e || pe)
return "";
{
var a = se.get(e);
if (a !== void 0)
return a;
}
var c;
pe = !0;
var p = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var x;
x = Ee.current, Ee.current = null, ht();
try {
if (i) {
var m = function() {
throw Error();
};
if (Object.defineProperty(m.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(m, []);
} catch (A) {
c = A;
}
Reflect.construct(e, [], m);
} else {
try {
m.call();
} catch (A) {
c = A;
}
e.call(m.prototype);
}
} else {
try {
throw Error();
} catch (A) {
c = A;
}
e();
}
} catch (A) {
if (A && c && typeof A.stack == "string") {
for (var h = A.stack.split(`
`), F = c.stack.split(`
`), T = h.length - 1, S = F.length - 1; T >= 1 && S >= 0 && h[T] !== F[S]; )
S--;
for (; T >= 1 && S >= 0; T--, S--)
if (h[T] !== F[S]) {
if (T !== 1 || S !== 1)
do
if (T--, S--, S < 0 || h[T] !== F[S]) {
var I = `
` + h[T].replace(" at new ", " at ");
return e.displayName && I.includes("<anonymous>") && (I = I.replace("<anonymous>", e.displayName)), typeof e == "function" && se.set(e, I), I;
}
while (T >= 1 && S >= 0);
break;
}
}
} finally {
pe = !1, Ee.current = x, gt(), Error.prepareStackTrace = p;
}
var q = e ? e.displayName || e.name : "", U = q ? ue(q) : "";
return typeof e == "function" && se.set(e, U), U;
}
function yt(e, i, a) {
return We(e, !1);
}
function bt(e) {
var i = e.prototype;
return !!(i && i.isReactComponent);
}
function ce(e, i, a) {
if (e == null)
return "";
if (typeof e == "function")
return We(e, bt(e));
if (typeof e == "string")
return ue(e);
switch (e) {
case E:
return ue("Suspense");
case f:
return ue("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case d:
return yt(e.render);
case v:
return ce(e.type, i, a);
case R: {
var c = e, p = c._payload, x = c._init;
try {
return ce(x(p), i, a);
} catch {
}
}
}
return "";
}
var ee = Object.prototype.hasOwnProperty, Ye = {}, Me = k.ReactDebugCurrentFrame;
function le(e) {
if (e) {
var i = e._owner, a = ce(e.type, e._source, i ? i.type : null);
Me.setExtraStackFrame(a);
} else
Me.setExtraStackFrame(null);
}
function Et(e, i, a, c, p) {
{
var x = Function.call.bind(ee);
for (var m in e)
if (x(e, m)) {
var h = void 0;
try {
if (typeof e[m] != "function") {
var F = Error((c || "React class") + ": " + a + " type `" + m + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[m] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw F.name = "Invariant Violation", F;
}
h = e[m](i, m, c, a, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (T) {
h = T;
}
h && !(h instanceof Error) && (le(p), _("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", c || "React class", a, m, typeof h), le(null)), h instanceof Error && !(h.message in Ye) && (Ye[h.message] = !0, le(p), _("Failed %s type: %s", a, h.message), le(null));
}
}
}
var wt = Array.isArray;
function Re(e) {
return wt(e);
}
function pt(e) {
{
var i = typeof Symbol == "function" && Symbol.toStringTag, a = i && e[Symbol.toStringTag] || e.constructor.name || "Object";
return a;
}
}
function Rt(e) {
try {
return Le(e), !1;
} catch {
return !0;
}
}
function Le(e) {
return "" + e;
}
function Ue(e) {
if (Rt(e))
return _("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", pt(e)), Le(e);
}
var Ve = k.ReactCurrentOwner, xt = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Ne, He;
function Ct(e) {
if (ee.call(e, "ref")) {
var i = Object.getOwnPropertyDescriptor(e, "ref").get;
if (i && i.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function _t(e) {
if (ee.call(e, "key")) {
var i = Object.getOwnPropertyDescriptor(e, "key").get;
if (i && i.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function jt(e, i) {
typeof e.ref == "string" && Ve.current;
}
function Tt(e, i) {
{
var a = function() {
Ne || (Ne = !0, _("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", i));
};
a.isReactWarning = !0, Object.defineProperty(e, "key", {
get: a,
configurable: !0
});
}
}
function Pt(e, i) {
{
var a = function() {
He || (He = !0, _("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", i));
};
a.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: a,
configurable: !0
});
}
}
var St = function(e, i, a, c, p, x, m) {
var h = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: o,
// Built-in properties that belong on the element
type: e,
key: i,
ref: a,
props: m,
// Record the component responsible for creating this element.
_owner: x
};
return h._store = {}, Object.defineProperty(h._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(h, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: c
}), Object.defineProperty(h, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: p
}), Object.freeze && (Object.freeze(h.props), Object.freeze(h)), h;
};
function Ot(e, i, a, c, p) {
{
var x, m = {}, h = null, F = null;
a !== void 0 && (Ue(a), h = "" + a), _t(i) && (Ue(i.key), h = "" + i.key), Ct(i) && (F = i.ref, jt(i, p));
for (x in i)
ee.call(i, x) && !xt.hasOwnProperty(x) && (m[x] = i[x]);
if (e && e.defaultProps) {
var T = e.defaultProps;
for (x in T)
m[x] === void 0 && (m[x] = T[x]);
}
if (h || F) {
var S = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
h && Tt(m, S), F && Pt(m, S);
}
return St(e, h, F, p, c, Ve.current, m);
}
}
var xe = k.ReactCurrentOwner, Be = k.ReactDebugCurrentFrame;
function X(e) {
if (e) {
var i = e._owner, a = ce(e.type, e._source, i ? i.type : null);
Be.setExtraStackFrame(a);
} else
Be.setExtraStackFrame(null);
}
var Ce;
Ce = !1;
function _e(e) {
return typeof e == "object" && e !== null && e.$$typeof === o;
}
function ze() {
{
if (xe.current) {
var e = D(xe.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function Ft(e) {
return "";
}
var Xe = {};
function At(e) {
{
var i = ze();
if (!i) {
var a = typeof e == "string" ? e : e.displayName || e.name;
a && (i = `
Check the top-level render call using <` + a + ">.");
}
return i;
}
}
function qe(e, i) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var a = At(i);
if (Xe[a])
return;
Xe[a] = !0;
var c = "";
e && e._owner && e._owner !== xe.current && (c = " It was passed a child from " + D(e._owner.type) + "."), X(e), _('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', a, c), X(null);
}
}
function Je(e, i) {
{
if (typeof e != "object")
return;
if (Re(e))
for (var a = 0; a < e.length; a++) {
var c = e[a];
_e(c) && qe(c, i);
}
else if (_e(e))
e._store && (e._store.validated = !0);
else if (e) {
var p = W(e);
if (typeof p == "function" && p !== e.entries)
for (var x = p.call(e), m; !(m = x.next()).done; )
_e(m.value) && qe(m.value, i);
}
}
}
function kt(e) {
{
var i = e.type;
if (i == null || typeof i == "string")
return;
var a;
if (typeof i == "function")
a = i.propTypes;
else if (typeof i == "object" && (i.$$typeof === d || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
i.$$typeof === v))
a = i.propTypes;
else
return;
if (a) {
var c = D(i);
Et(a, e.props, "prop", c, e);
} else if (i.PropTypes !== void 0 && !Ce) {
Ce = !0;
var p = D(i);
_("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", p || "Unknown");
}
typeof i.getDefaultProps == "function" && !i.getDefaultProps.isReactClassApproved && _("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function Dt(e) {
{
for (var i = Object.keys(e.props), a = 0; a < i.length; a++) {
var c = i[a];
if (c !== "children" && c !== "key") {
X(e), _("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", c), X(null);
break;
}
}
e.ref !== null && (X(e), _("Invalid attribute `ref` supplied to `React.Fragment`."), X(null));
}
}
var Ke = {};
function Ge(e, i, a, c, p, x) {
{
var m = Z(e);
if (!m) {
var h = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (h += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var F = Ft();
F ? h += F : h += ze();
var T;
e === null ? T = "null" : Re(e) ? T = "array" : e !== void 0 && e.$$typeof === o ? (T = "<" + (D(e.type) || "Unknown") + " />", h = " Did you accidentally export a JSX literal instead of a component?") : T = typeof e, _("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", T, h);
}
var S = Ot(e, i, a, p, x);
if (S == null)
return S;
if (m) {
var I = i.children;
if (I !== void 0)
if (c)
if (Re(I)) {
for (var q = 0; q < I.length; q++)
Je(I[q], e);
Object.freeze && Object.freeze(I);
} else
_("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
Je(I, e);
}
if (ee.call(i, "key")) {
var U = D(e), A = Object.keys(i).filter(function(Lt) {
return Lt !== "key";
}), je = A.length > 0 ? "{key: someKey, " + A.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Ke[U + je]) {
var Mt = A.length > 0 ? "{" + A.join(": ..., ") + ": ...}" : "{}";
_(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, je, U, Mt, U), Ke[U + je] = !0;
}
}
return e === r ? Dt(S) : kt(S), S;
}
}
function It(e, i, a) {
return Ge(e, i, a, !0);
}
function $t(e, i, a) {
return Ge(e, i, a, !1);
}
var Wt = $t, Yt = It;
re.Fragment = r, re.jsx = Wt, re.jsxs = Yt;
}()), re;
}
process.env.NODE_ENV === "production" ? Se.exports = tr() : Se.exports = rr();
var y = Se.exports;
function nr(t) {
return typeof window > "u" ? 1 : (t.ownerDocument.defaultView || window).devicePixelRatio || 1;
}
function tt(t, o) {
const n = nr(t);
return Math.round(o * n) / n;
}
class ir {
constructor() {
Te(this, "current", this.detect());
Te(this, "currentId", 0);
}
set(o) {
this.current !== o && (this.currentId = 0, this.current = o);
}
reset() {
this.set(this.detect());
}
nextId() {
return ++this.currentId;
}
get isServer() {
return this.current === "server";
}
get isClient() {
return this.current === "client";
}
detect() {
return typeof window > "u" || typeof document > "u" ? "server" : "client";
}
}
const ne = new ir(), it = (t, o) => {
ne.isServer ? O(t, o) : Nt(t, o);
}, Pe = { serverHandoffComplete: !1 };
function or() {
const [t, o] = M(Pe.serverHandoffComplete);
return O(() => {
t !== !0 && o(!0);
}, [t]), O(() => {
Pe.serverHandoffComplete === !1 && (Pe.serverHandoffComplete = !0);
}, []), t;
}
const ar = (
// Prefer React's `useId` if it's available.
de.useId ?? function() {
const o = or(), [n, r] = de.useState(o ? () => ne.nextId() : null);
return it(() => {
n === null && r(ne.nextId());
}, [n]), n != null ? `${n}` : void 0;
}
);
function ur(t, o, n, r) {
O(() => {
const u = [];
(typeof r.offset == "number" || typeof r.offset == "object" || typeof r.offset == "function") && u.push(Jt(r.offset)), (r.flip === !0 || typeof r.flip == "number" || typeof r.flip == "object") && u.push(Kt({
padding: typeof r.flip == "number" ? r.flip : void 0,
...typeof r.flip == "object" ? r.flip : {}
})), (r.shift === !0 || typeof r.shift == "number" || typeof r.shift == "object") && u.push(Gt({
padding: typeof r.shift == "number" ? r.shift : void 0,
...typeof r.shift == "object" ? r.shift : {}
})), (r.autoPlacement === !0 || typeof r.autoPlacement == "object") && u.push(Zt(
typeof r.autoPlacement == "object" ? r.autoPlacement : void 0
)), u.push(...typeof r.middleware == "function" ? r.middleware({
referenceEl: o.reference,
floatingEl: o.floating
}) : r.middleware || []), (r.arrow === !0 || typeof r.arrow == "number") && u.push(Xt({
element: n,
padding: r.arrow === !0 ? 0 : r.arrow
})), (r.hide === !0 || typeof r.hide == "object" || Array.isArray(r.hide)) && (Array.isArray(r.hide) ? r.hide : [r.hide]).forEach((l) => {
u.push(Qt(
typeof l == "object" ? l : void 0
));
}), t(u);
}, [
r.offset,
r.shift,
r.flip,
r.arrow,
r.autoPlacement,
r.hide,
r.middleware
]);
}
function sr(t, o, n) {
O(() => {
if (t && ne.isClient && typeof ResizeObserver < "u" && o.current && o.current instanceof Element) {
const r = new ResizeObserver(([u]) => {
const l = u.borderBoxSize.reduce((s, { inlineSize: g }) => s + g, 0);
n(l);
});
return r.observe(o.current), () => {
r.disconnect(), n(null);
};
}
}, []);
}
const Cr = [
"origin-bottom",
"origin-top",
"origin-right",
"origin-left",
"origin-bottom-left",
"origin-bottom-right",
"origin-top-left",
"origin-top-right"
], cr = (t) => {
switch (t) {
case "top":
return "origin-bottom";
case "bottom":
return "origin-top";
case "left":
return "origin-right";
case "right":
return "origin-left";
case "top-start":
case "right-end":
return "origin-bottom-left";
case "top-end":
case "left-end":
return "origin-bottom-right";
case "right-start":
case "bottom-start":
return "origin-top-left";
case "left-start":
case "bottom-end":
return "origin-top-right";
default:
return "origin-center";
}
}, _r = [
"origin-bottom",
"origin-top",
"ltr:origin-right rtl:origin-left",
"ltr:origin-left rtl:origin-right",
"ltr:origin-bottom-left rtl:origin-bottom-right",
"ltr:origin-bottom-right rtl:origin-bottom-left",
"ltr:origin-top-left rtl:origin-top-right",
"ltr:origin-top-right rtl:origin-top-left"
], jr = (t) => {
switch (t) {
case "top":
return "origin-bottom";
case "bottom":
return "origin-top";
case "left":
return "ltr:origin-right rtl:origin-left";
case "right":
return "ltr:origin-left rtl:origin-right";
case "top-start":
case "right-end":
return "ltr:origin-bottom-left rtl:origin-bottom-right";
case "top-end":
case "left-end":
return "ltr:origin-bottom-right rtl:origin-bottom-left";
case "right-start":
case "bottom-start":
return "ltr:origin-top-left rtl:origin-top-right";
case "left-start":
case "bottom-end":
return "ltr:origin-top-right rtl:origin-top-left";
default:
return "origin-center";
}
};
function lr(t, o) {
return K(() => typeof t.originClass == "function" ? t.originClass(o) : typeof t.originClass == "string" ? t.originClass : t.tailwindcssOriginClass ? cr(o) : "", [o, t.originClass, t.tailwindcssOriginClass]);
}
function ot(t, o, ...n) {
if (t in o) {
const u = o[t];
return typeof u == "function" ? u(...n) : u;
}
const r = new Error(
`Tried to handle "${t}" but there is no handler defined. Only defined handlers are: ${Object.keys(
o
).map((u) => `"${u}"`).join(", ")}.`
);
throw Error.captureStackTrace && Error.captureStackTrace(r, ot), r;
}
function at(t) {
return ne.isServer ? null : t instanceof Node ? t.ownerDocument : t && Object.prototype.hasOwnProperty.call(t, "current") && t.current instanceof Node ? t.current.ownerDocument : document;
}
const rt = [
"[contentEditable=true]",
"[tabindex]",
"a[href]",
"area[href]",
"button:not([disabled])",
"iframe",
"input:not([disabled])",
"select:not([disabled])",
"textarea:not([disabled])"
].map(
// TODO: Remove this once JSDOM fixes the issue where an element that is
// "hidden" can be the document.activeElement, because this is not possible
// in real browsers.
process.env.NODE_ENV === "test" ? (t) => `${t}:not([tabindex='-1']):not([style*='display: none'])` : (t) => `${t}:not([tabindex='-1'])`
).join(",");
var ut = /* @__PURE__ */ ((t) => (t[t.Strict = 0] = "Strict", t[t.Loose = 1] = "Loose", t))(ut || {});
function fr(t, o = 0) {
var n;
return t === ((n = at(t)) == null ? void 0 : n.body) ? !1 : ot(o, {
0() {
return t.matches(rt);
},
1() {
let r = t;
for (; r !== null; ) {
if (r.matches(rt)) return !0;
r = r.parentElement;
}
return !1;
}
});
}
function dr(t) {
const o = J(t);
return it(() => {
o.current = t;
}, [t]), o;
}
function $(t, o, n) {
const r = dr(o);
O(() => {
function u(l) {
r.current(l);
}
return document.addEventListener(t, u, n), () => document.removeEventListener(t, u, n);
}, [t, n]);
}
function vr(t, o, n = !0) {
const r = J(!1);
O(
process.env.NODE_ENV === "test" ? () => {
r.current = n;
} : () => {
requestAnimationFrame(() => {
r.current = n;
});
},
[n]
);
function u(s, g) {
if (!r.current || s.defaultPrevented) return;
const d = function f(v) {
return typeof v == "function" ? f(v()) : Array.isArray(v) || v instanceof Set ? v : [v];
}(t), E = g(s);
if (E !== null && E.getRootNode().contains(E)) {
for (const f of d) {
if (f === null) continue;
const v = f instanceof HTMLElement ? f : f.current;
if (v != null && v.contains(E) || s.composed && s.composedPath().includes(v))
return;
}
return (
// This check alllows us to know whether or not we clicked on a "focusable" element like a
// button or an input. This is a backwards compatibility check so that you can open a <Menu
// /> and click on another <Menu /> which should close Menu A and open Menu B. We might
// revisit that so that you will require 2 clicks instead.
!fr(E, ut.Loose) && // This could be improved, but the `Combobox.Button` adds tabIndex={-1} to make it
// unfocusable via the keyboard so that tabbing to the next item from the input doesn't
// first go to the button.
E.tabIndex !== -1 && s.preventDefault(), o(s, E)
);
}
}
const l = J(null);
$("mousedown", (s) => {
var g, d;
r.current && (l.current = ((d = (g = s.composedPath) == null ? void 0 : g.call(s)) == null ? void 0 : d[0]) || s.target);
}, !0), $(
"click",
(s) => {
l.current && (u(s, () => l.current), l.current = null);
},
// We will use the `capture` phase so that layers in between with `event.stopPropagation()`
// don't "cancel" this outside click check. E.g.: A `Menu` inside a `DialogPanel` if the `Menu`
// is open, and you click outside of it in the `DialogPanel` the `Menu` should close. However,
// the `DialogPanel` has a `onClick(e) { e.stopPropagation() }` which would cancel this.
!0
), $("blur", (s) => u(
s,
() => window.document.activeElement instanceof HTMLIFrameElement ? window.document.activeElement : null
), !0);
}
const fe = /* @__PURE__ */ new Map(), Ae = Oe(null);
Ae.displayName = "ReferenceContext";
const ke = Oe(null);
ke.displayName = "FloatingContext";
const ie = Oe(null);
ie.displayName = "ArrowContext";
function st(t) {
const o = Fe(Ae);
if (o === null) {
const n = new Error(`<${t} /> is missing a parent <Float /> component.`);
throw Error.captureStackTrace && Error.captureStackTrace(n, st), n;
}
return o;
}
function ct(t) {
const o = Fe(ke);
if (o === null) {
const n = new Error(`<${t} /> is missing a parent <Float /> component.`);
throw Error.captureStackTrace && Error.captureStackTrace(n, ct), n;
}
return o;
}
function lt(t) {
const o = Fe(ie);
if (o === null) {
const n = new Error(`<${t} /> is missing a parent <Float /> component.`);
throw Error.captureStackTrace && Error.captureStackTrace(n, lt), n;
}
return o;
}
function ft(t, o, { key: n, ...r }, u) {
const { referenceRef: l } = u, s = o;
if (s.as === P)
return /* @__PURE__ */ y.jsx(
t.type,
{
...t.props,
...r,
ref: l
},
n
);
const g = s.as || "div";
return /* @__PURE__ */ y.jsx(g, { ...r, ref: l, children: /* @__PURE__ */ y.jsx(t.type, { ...t.props }) }, n);
}
function De(t, o, { key: n, ...r }, u) {
const { floatingRef: l, props: s, mounted: g, setShow: d, referenceHidden: E, escaped: f, placement: v, floatingStyles: R, referenceElWidth: b } = u, w = {
...s,
...o
}, C = lr(w, v), W = {
show: g.current ? w.show : !1,
unmount: t.props.unmount === !1 ? !1 : void 0,
enter: `${w.enter || ""} ${C}`,
enterFrom: `${w.enterFrom || ""}`,
enterTo: `${w.enterTo || ""}`,
leave: `${w.leave || ""} ${C}`,
leaveFrom: `${w.leaveFrom || ""}`,
leaveTo: `${w.leaveTo || ""}`,
beforeEnter: () => {
d(!0);
},
afterLeave: () => {
d(!1);
}
}, k = {
className: [
E ? w.referenceHiddenClass : void 0,
f ? w.escapedClass : void 0
].filter((j) => !!j).join(" "),
style: {
...R,
zIndex: w.zIndex || 9999
}
};
if (w.adaptiveWidth && typeof b == "number") {
const j = {
attribute: "width",
...typeof w.adaptiveWidth == "object" ? w.adaptiveWidth : {}
};
k.style[j.attribute] = `${b}px`;
}
function _(j) {
return w.portal ? g.current ? /* @__PURE__ */ y.jsx(zt, { children: j }) : /* @__PURE__ */ y.jsx(P, {}) : j;
}
function V(j) {
const Y = {
...k,
...r,
ref: l
};
if (j.type === P)
return /* @__PURE__ */ y.jsx(P, {});
if (w.as === P)
return /* @__PURE__ */ y.jsx(
j.type,
{
...j.props,
...Y
},
n
);
const H = w.as || "div";
return /* @__PURE__ */ y.jsx(H, { ...Y, children: /* @__PURE__ */ y.jsx(j.type, { ...j.props }) }, n);
}
function N() {
return g.current ? w.transitionChild ? /* @__PURE__ */ y.jsx(Ze.Child, { as: P, ...W, children: /* @__PURE__ */ y.jsx(t.type, { ...t.props }) }) : /* @__PURE__ */ y.jsx(Ze, { as: P, ...W, children: /* @__PURE__ */ y.jsx(t.type, { ...t.props }) }) : /* @__PURE__ */ y.jsx(P, {});
}
return _(
V(
N()
)
);
}
function dt([t, o], n) {
var Z, Q;
const r = ar(), u = J(!1), [l, s] = M(), [g, d] = M(void 0), [E, f] = M(void 0), v = J(null), R = K(() => ({
show: n.onShow || (() => {
}),
hide: n.onHide || (() => {
}),
update: n.onUpdate || (() => {
})
}), [n.onShow, n.onHide, n.onUpdate]), { placement: b, update: w, refs: C, floatingStyles: W, isPositioned: k, middlewareData: _ } = qt({
placement: n.placement || "bottom-start",
strategy: n.strategy,
middleware: l,
transform: n.dialog ? !1 : n.transform ?? !1
// If enable dialog mode, then set `transform` to false.
}), [V, N] = M(null);
O(() => {
u.current = !0;
}, []), O(() => {
t && !fe.get(r) ? (fe.set(r, !0), R.show()) : !t && fe.get(r) && (fe.delete(r), R.hide());
}, [t]);
const j = Bt(() => {
w(), R.update();
}, [w, R]);
O(j, [n.placement, n.strategy, l]), ur(s, C, v, n), O(() => {
var B, D;
(n.hide === !0 || typeof n.hide == "object" || Array.isArray(n.hide)) && (d(((B = _.hide) == null ? void 0 : B.referenceHidden) || !k), f((D = _.hide) == null ? void 0 : D.escaped));
}, [_, n.hide, k]), sr(!!n.adaptiveWidth, C.reference, N), O(() => {
if (C.reference.current && C.floating.current && t)
return n.autoUpdate !== !1 ? er(
C.reference.current,
C.floating.current,
j,
typeof n.autoUpdate == "object" ? n.autoUpdate : void 0
) : () => {
};
}, [t, j, C]);
const Y = J(!0);
O(() => {
!(C.reference.current instanceof Element) && C.reference.current && C.floating.current && Y.current && (Y.current = !1, j(), window.requestAnimationFrame(() => {
Y.current = !0, j();
}));
}, [C]);
const H = {
referenceRef: C.setReference,
placement: b
}, oe = {
floatingRef: C.setFloating,
props: n,
mounted: u,
setShow: o,
referenceHidden: g,
escaped: E,
placement: b,
floatingStyles: W,
referenceElWidth: V
}, G = {
arrowRef: v,
placement: b,
x: (Z = _.arrow) == null ? void 0 : Z.x,
y: (Q = _.arrow) == null ? void 0 : Q.y
};
return { referenceApi: H, floatingApi: oe, arrowApi: G, placement: b, update: j, refs: C, middlewareData: _ };
}
const vt = Ht((t, o) => {
const [n, r] = M(t.show ?? !1), {
referenceApi: u,
floatingApi: l,
arrowApi: s,
placement: g
} = dt([n, r], t), d = { placement: g }, [E, f] = typeof t.children == "function" ? t.children(d) : t.children;
if (!nt(E))
return console.warn("<Float /> is missing a reference and floating element."), /* @__PURE__ */ y.jsx(P, {});
function v(w) {
if (t.as === P || !t.as)
return /* @__PURE__ */ y.jsx(P, { children: w });
const C = t.as;
return /* @__PURE__ */ y.jsx(C, { ref: o, className: t.className, children: w });
}
if (t.composable || t.dialog)
return v(
/* @__PURE__ */ y.jsx(Ae.Provider, { value: u, children: /* @__PURE__ */ y.jsx(ke.Provider, { value: l, children: /* @__PURE__ */ y.jsx(ie.Provider, { value: s, children: typeof t.children == "function" ? t.children(d) : t.children }) }) }, "FloatingNode")
);
const R = ft(
E,
{ as: P },
{ key: "reference-node" },
u
), b = De(
f,
{ as: t.floatingAs || "div" },
{},
l
);
return v([
R,
/* @__PURE__ */ y.jsx(ie.Provider, { value: s, children: b }, "floating-node")
]);
});
vt.displayName = "Float";
function hr(t) {
if (!t.children)
return /* @__PURE__ */ y.jsx(P, {});
const o = K(() => {
const { as: l, children: s, ...g } = t;
return g;
}, [t]), n = st("Float.Reference"), { placement: r } = n, u = { placement: r };
return ft(
typeof t.children == "function" ? t.children(u) : t.children,
{ ...t, as: t.as || P },
o,
n
);
}
function gr(t) {
if (!t.children)
return /* @__PURE__ */ y.jsx(P, {});
const o = K(() => {
const { as: l, enter: s, enterFrom: g, enterTo: d, leave: E, leaveFrom: f, leaveTo: v, originClass: R, tailwindcssOriginClass: b, transitionChild: w, children: C, ...W } = t;
return W;
}, [t]), n = ct("Float.Content"), { placement: r } = n, u = { placement: r };
return De(
typeof t.children == "function" ? t.children(u) : t.children,
{ ...t, as: t.as || "div" },
o,
n
);
}
function mr(t) {
const { arrowRef: o, placement: n, x: r, y: u } = lt("Float.Arrow"), l = K(() => {
const { as: E, offset: f, children: v, ...R } = t;
return R;
}, [t]), s = {
top: "bottom",
right: "left",
bottom: "top",
left: "right"
}[n.split("-")[0]], g = {
left: o.current && typeof r == "number" ? `${tt(o.current, r)}px` : void 0,
top: o.current && typeof u == "number" ? `${tt(o.current, u)}px` : void 0,
right: void 0,
bottom: void 0,
[s]: `${(t.offset ?? 4) * -1}px`,
...l.style
};
if (t.as === P) {
const E = { placement: n }, f = typeof t.children == "function" ? t.children(E) : t.children;
return !f || !nt(f) ? /* @__PURE__ */ y.jsx(P, {}) : /* @__PURE__ */ y.jsx(
f.type,
{
...f.props,
ref: o,
style: g
}
);
}
const d = t.as || "div";
return /* @__PURE__ */ y.jsx(
d,
{
ref: o,
...l,
style: g,
children: t.children
}
);
}
function Ie({ onInitial: t, children: o, ...n }) {
const [r, u] = M(n.show ?? !1), l = K(() => {
const { as: b, show: w, placement: C, strategy: W, offset: k, shift: _, flip: V, arrow: N, autoPlacement: j, autoUpdate: Y, zIndex: H, enter: oe, enterFrom: G, enterTo: Z, leave: Q, leaveFrom: B, leaveTo: D, originClass: L, tailwindcssOriginClass: z, portal: ve, transform: he, middleware: ge, onShow: me, onHide: ye, onUpdate: be, ...ae } = n;
return ae;
}, [n]), {
floatingApi: s,
arrowApi: g,
placement: d,
refs: E
} = dt([r, u], n);
O(() => {
u(n.show ?? !1);
}, [n.show]);
function f() {
r && u(!1);
}
if (t({ show: r, setShow: u, placement: d, refs: E }), !o)
return /* @__PURE__ */ y.jsx(P, {});
const R = De(
typeof o == "function" ? o({ placement: d, close: f }) : o,
{
...n,
as: n.as || P,
show: r
},
l,
s
);
return /* @__PURE__ */ y.jsx(ie.Provider, { value: g, children: R });
}
function yr(t) {
const [o, n] = M(!1);
function r({ setShow: u, refs: l }) {
$("contextmenu", (s) => {
s.preventDefault(), l.setPositionReference({
getBoundingClientRect() {
return {
width: 0,
height: 0,
x: s.clientX,
y: s.clientY,
top: s.clientY,
left: s.clientX,
right: s.clientX,
bottom: s.clientY
};
}
}), u(!0);
}), vr(l.floating, () => {
u(!1);
});
}
return O(() => (n(!0), () => {
n(!1);
}), []), o ? /* @__PURE__ */ y.jsx(
Ie,
{
flip: !0,
...t,
show: !1,
portal: !0,
onInitial: r
}
) : /* @__PURE__ */ y.jsx(P, {});
}
function br({ globalHideCursor: t, ...o }) {
const [n, r] = M(!1);
function u({ setShow: l, refs: s }) {
function g() {
l(!0);
}
function d() {
l(!1);
}
function E(b) {
s.setPositionReference({
getBoundingClientRect() {
return {
width: 0,
height: 0,
x: b.clientX,
y: b.clientY,
top: b.clientY,
left: b.clientX,
right: b.clientX,
bottom: b.clientY
};
}
});
}
function f(b) {
g(), E(b);
}
function v(b) {
g(), E(b.touches[0]);
}
const R = at(s.floating);
R && (O(() => {
if ((t || t === void 0) && !R.getElementById("headlesui-float-cursor-style")) {
const b = R.createElement("style");
return (R.head || R.getElementsByTagName("head")[0]).appendChild(b), b.id = "headlesui-float-cursor-style", b.appendChild(R.createTextNode([
"*, *::before, *::after {",
" cursor: none !important;",
"}",
".headlesui-float-cursor-root {",
" pointer-events: none !important;",
"}"
].join(`
`))), () => {
var C;
return (C = R.getElementById("headlesui-float-cursor-style")) == null ? void 0 : C.remove();
};
}
}, [t]), "ontouchstart" in window || navigator.maxTouchPoints > 0 ? ($("touchstart", v), $("touchend", d), $("touchmove", v)) : ($("mouseenter", f), $("mouseleave", d), $("mousemove", f)));
}
return O(() => (r(!0), () => {
r(!1);
}), []), n ? /* @__PURE__ */ y.jsx(
Ie,
{
...o,
portal: !0,
className: "headlesui-float-cursor-root",
onInitial: u
}
) : /* @__PURE__ */ y.jsx(P, {});
}
const Tr = Object.assign(vt, { Reference: hr, Content: gr, Arrow: mr, Virtual: Ie, ContextMenu: yr, Cursor: br });
export {
Tr as Float,
De as renderFloatingElement,
ft as renderReferenceElement,
cr as tailwindcssOriginClassResolver,
Cr as tailwindcssOriginSafelist,
jr as tailwindcssRtlOriginClassResolver,
_r as tailwindcssRtlOriginSafelist,
vr as useOutsideClick
};