@box-kite/react 2.2.5 → 2.2.6

package/components/dialog.mjs

@@ -1,77 +1,89 @@
 "use client";
-import { t as e } from "../client.mjs";
-import { a as t, l as n, u as r } from "../platform.mjs";
-import { n as i } from "../effects.mjs";
-import a from "../box.mjs";
-import { a as o, i as s, n as c, r as l } from "../behavior.mjs";
-import { t as u } from "../identity.mjs";
-import { H2 as d, P as f } from "./semantics.mjs";
-import { createContext as p, useCallback as m, useContext as h, useMemo as g, useRef as _, useState as v } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { i as e } from "../client.mjs";
+import { a as t, l as n, n as r, u as i } from "../platform.mjs";
+import { n as a } from "../effects.mjs";
+import o from "../box.mjs";
+import { a as s, i as c, n as l, r as u } from "../behavior.mjs";
+import { t as d } from "../identity.mjs";
+import { H2 as f, P as p } from "./semantics.mjs";
+import { createContext as m, useCallback as h, useContext as g, useMemo as _, useRef as v, useState as y } from "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/react/dialog/useScrollLock.ts
+var C = 0;
+function w(t) {
+	let { classNames: n, styleElements: i } = e({ overflow: "hidden" }, !1), o = n.slice(1).join(" ");
+	return a(() => {
+		let e = r();
+		if (!(!t || !e || !o)) return C += 1, e.classList.add(o), () => {
+			--C, C === 0 && e.classList.remove(o);
+		};
+	}, [t, o]), i;
+}
+//#endregion
 //#region src/components/dialog.tsx
-var S = p(null);
-function C(e) {
-	let t = h(S);
+var T = m(null);
+function E(e) {
+	let t = g(T);
 	if (!t) throw Error(`<${e}> must be rendered inside a <Dialog>.`);
 	return t;
 }
-function w(e) {
-	return /* @__PURE__ */ b(E, {
+function D(e) {
+	return /* @__PURE__ */ x(k, {
 		role: "dialog",
 		...e
 	});
 }
-function T(e) {
-	return /* @__PURE__ */ b(E, {
+function O(e) {
+	return /* @__PURE__ */ x(k, {
 		role: "alertdialog",
 		...e,
 		modal: !0,
 		dismissible: !1
 	});
 }
-function E(t) {
-	let { role: r, trigger: l, children: d, open: f, defaultOpen: p = !1, onOpenChange: h, label: _, labelledBy: C, describedBy: w, modal: T = !0, dismissible: E = !0, lockScroll: O = T, initialFocus: k, props: A, ...j } = t, M = u("dialog"), N = j.id ?? M, [P, F] = s({
-		value: f,
-		defaultValue: p,
-		onChange: h
-	}), [I, L] = v(null), [R, z] = v(null), [B, V] = v(!1), [H, U] = v({
+function k(e) {
+	let { role: t, trigger: r, children: i, open: u, defaultOpen: f = !1, onOpenChange: p, label: m, labelledBy: g, describedBy: v, modal: C = !0, dismissible: E = !0, lockScroll: D = C, initialFocus: O, props: k, ...j } = e, M = d("dialog"), N = j.id ?? M, [P, F] = c({
+		value: u,
+		defaultValue: f,
+		onChange: p
+	}), [I, L] = y(null), [R, z] = y(null), [B, V] = y(!1), [H, U] = y({
 		title: 0,
 		description: 0
-	}), W = e(P && O);
-	c({
+	}), W = w(P && D);
+	l({
 		enabled: P,
 		returnTo: R
 	});
-	let G = m((e) => (U((t) => ({
+	let G = h((e) => (U((t) => ({
 		...t,
 		[e]: t[e] + 1
 	})), () => U((t) => ({
 		...t,
 		[e]: t[e] - 1
-	}))), []), K = g(() => ({
+	}))), []), K = _(() => ({
 		titleId: `${N}-title`,
 		descriptionId: `${N}-description`,
 		register: G
 	}), [N, G]);
-	D({
+	A({
 		dialog: I,
 		isOpen: P,
 		domOpen: B,
 		setDomOpen: V,
 		setOpen: F,
-		modal: T,
+		modal: C,
 		dismissible: E,
 		triggerElement: R
-	}), i(() => {
-		let e = n(k);
+	}), a(() => {
+		let e = n(O);
 		!P || !e || e.focus();
-	}, [P, k]);
-	let q = o((e) => {
+	}, [P, O]);
+	let q = s((e) => {
 		F((e) => !e, {
 			reason: "trigger",
 			event: e
 		});
-	}), J = g(() => ({
+	}), J = _(() => ({
 		ref: z,
 		props: {
 			"aria-expanded": P,
@@ -84,40 +96,40 @@ function E(t) {
 		q,
 		P
 	]), Y = j;
-	return /* @__PURE__ */ x(y, { children: [
+	return /* @__PURE__ */ S(b, { children: [
 		W,
-		l?.(J),
-		/* @__PURE__ */ b(S.Provider, {
+		r?.(J),
+		/* @__PURE__ */ x(T.Provider, {
 			value: K,
-			children: /* @__PURE__ */ b(a, {
+			children: /* @__PURE__ */ x(o, {
 				ref: L,
 				tag: "dialog",
 				component: "dialog",
 				...Y,
 				id: N,
 				props: {
-					role: r,
-					"aria-label": H.title || C ? void 0 : _,
-					"aria-labelledby": C ?? (H.title ? K.titleId : void 0),
-					"aria-describedby": w ?? (H.description ? K.descriptionId : void 0),
-					...A
+					role: t,
+					"aria-label": H.title || g ? void 0 : m,
+					"aria-labelledby": g ?? (H.title ? K.titleId : void 0),
+					"aria-describedby": v ?? (H.description ? K.descriptionId : void 0),
+					...k
 				},
-				children: d
+				children: i
 			})
 		})
 	] });
 }
-function D(e) {
-	let { dialog: n, isOpen: a, domOpen: o, setDomOpen: s, setOpen: c, modal: u, dismissible: d, triggerElement: f } = e, p = _("imperative"), m = t(), h = d ? "any" : "closerequest";
-	i(() => {
-		!n || a === o || (s(a), a ? u ? n.showModal() : n.show() : n.close());
+function A(e) {
+	let { dialog: n, isOpen: r, domOpen: o, setDomOpen: s, setOpen: c, modal: l, dismissible: d, triggerElement: f } = e, p = v("imperative"), m = t(), h = d ? "any" : "closerequest";
+	a(() => {
+		!n || r === o || (s(r), r ? l ? n.showModal() : n.show() : n.close());
 	}, [
 		n,
-		a,
+		r,
 		o,
-		u,
+		l,
 		s
-	]), i(() => {
+	]), a(() => {
 		if (!n) return;
 		let e = new AbortController();
 		return n.addEventListener("close", (e) => {
@@ -130,14 +142,14 @@ function D(e) {
 		n,
 		s,
 		c
-	]), i(() => {
+	]), a(() => {
 		if (!(!n || !m)) return n.setAttribute("closedby", h), () => n.removeAttribute("closedby");
 	}, [
 		n,
 		m,
 		h
-	]), i(() => {
-		if (!a || !n) return;
+	]), a(() => {
+		if (!r || !n) return;
 		let e = new AbortController(), t = (t, n) => document.addEventListener(t, n, {
 			signal: e.signal,
 			capture: !0
@@ -145,14 +157,14 @@ function D(e) {
 		return t("keydown", (e) => {
 			e.key === "Escape" && (p.current = "escape");
 		}), t("pointerdown", (e) => {
-			r(e, [f]) ? p.current = "trigger" : !r(e, [n]) || O(n, e) ? p.current = "outside-pointer" : p.current = "imperative";
+			i(e, [f]) ? p.current = "trigger" : !i(e, [n]) || j(n, e) ? p.current = "outside-pointer" : p.current = "imperative";
 		}), () => e.abort();
 	}, [
-		a,
+		r,
 		n,
 		f
-	]), l({
-		enabled: a && !u && !m,
+	]), u({
+		enabled: r && !l && !m,
 		inside: [n],
 		escapeKey: !0,
 		outsidePointer: !1,
@@ -160,11 +172,11 @@ function D(e) {
 			reason: "escape",
 			event: t
 		})
-	}), i(() => {
-		if (!n || !a || !d || m) return;
+	}), a(() => {
+		if (!n || !r || !d || m) return;
 		let e = new AbortController();
 		return document.addEventListener("pointerdown", (e) => {
-			r(e, [f]) || r(e, [n]) && !O(n, e) || c(!1, {
+			i(e, [f]) || i(e, [n]) && !j(n, e) || c(!1, {
 				reason: "outside-pointer",
 				event: e
 			});
@@ -174,38 +186,38 @@ function D(e) {
 		}), () => e.abort();
 	}, [
 		n,
-		a,
+		r,
 		d,
 		m,
 		f,
 		c
 	]);
 }
-function O(e, t) {
+function j(e, t) {
 	let n = e.getBoundingClientRect();
 	return t.clientX < n.left || t.clientX > n.right || t.clientY < n.top || t.clientY > n.bottom;
 }
-function k(e) {
-	let t = C("Dialog.Title");
-	return i(() => t.register("title"), [t]), /* @__PURE__ */ b(d, {
+function M(e) {
+	let t = E("Dialog.Title");
+	return a(() => t.register("title"), [t]), /* @__PURE__ */ x(f, {
 		id: t.titleId,
 		component: "dialog.title",
 		...e
 	});
 }
-function A(e) {
-	let t = C("Dialog.Description");
-	return i(() => t.register("description"), [t]), /* @__PURE__ */ b(f, {
+function N(e) {
+	let t = E("Dialog.Description");
+	return a(() => t.register("description"), [t]), /* @__PURE__ */ x(p, {
 		id: t.descriptionId,
 		component: "dialog.description",
 		...e
 	});
 }
-k.displayName = "Dialog.Title", A.displayName = "Dialog.Description";
-var j = {
-	Title: k,
-	Description: A
-}, M = Object.assign(w, j), N = Object.assign(T, j);
-w.displayName = "Dialog", T.displayName = "AlertDialog";
+M.displayName = "Dialog.Title", N.displayName = "Dialog.Description";
+var P = {
+	Title: M,
+	Description: N
+}, F = Object.assign(D, P), I = Object.assign(O, P);
+D.displayName = "Dialog", O.displayName = "AlertDialog";
 //#endregion
-export { N as AlertDialog, M as default };
+export { I as AlertDialog, F as default };

package/components/overlay.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../client.cjs"),t=require("../platform.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../placement.cjs"),a=require("../layer.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("react-dom");function l(l,u){let{side:d=`bottom`,align:f=`center`,offset:p=0,flip:m=!0,onSideChange:h,anchor:g,contentRef:_,matchWidth:v=!0,...y}=l,[b,x]=(0,o.useState)(null),[S,C]=(0,o.useState)(!1),w=(0,o.useRef)(null),T=a.n(),E=(0,o.useRef)(null),D=e.n(!T),O=i.t({side:d,align:f,offset:p,flip:m,matchWidth:v,anchor:g??b,trackSide:!!h});n.n(()=>{let e=E.current;!T||!t.o()||!e||!e.isConnected||e.matches(`:popover-open`)||e.showPopover()}),n.n(()=>{if(T)return;let e=t.l(g)??b;C(!!e&&t.d(e))},[g,b,T]),n.n(()=>{w.current!==O.side&&(w.current=O.side,h?.(O.side))});let k=O.layerProps.ref,A=(0,o.useCallback)(e=>{k?.(e),E.current=e,typeof u==`function`?u(e):u&&(u.current=e)},[k,u]),j=(0,s.jsx)(r.default,{...O.layerProps,ref:A,transition:`none`,props:T?{popover:`manual`}:{dir:S?`rtl`:`ltr`},children:(0,s.jsx)(r.default,{ref:_,...y})});return(0,s.jsxs)(s.Fragment,{children:[!g&&(0,s.jsx)(r.default,{ref:x}),T?j:D&&(0,c.createPortal)(j,D)]})}var u=(0,o.forwardRef)(l);u.displayName=`Overlay`,exports.default=u;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../client.cjs"),t=require("../platform.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../placement.cjs"),a=require("../layer.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("react-dom");function l(l,u){let{side:d=`bottom`,align:f=`center`,offset:p=0,flip:m=!0,onSideChange:h,anchor:g,contentRef:_,matchWidth:v=!0,...y}=l,[b,x]=(0,o.useState)(null),[S,C]=(0,o.useState)(!1),w=(0,o.useRef)(null),T=a.n(),E=(0,o.useRef)(null),D=e.t(!T),O=i.t({side:d,align:f,offset:p,flip:m,matchWidth:v,anchor:g??b,trackSide:!!h});n.n(()=>{let e=E.current;!T||!t.o()||!e||!e.isConnected||e.matches(`:popover-open`)||e.showPopover()}),n.n(()=>{if(T)return;let e=t.l(g)??b;C(!!e&&t.d(e))},[g,b,T]),n.n(()=>{w.current!==O.side&&(w.current=O.side,h?.(O.side))});let k=O.layerProps.ref,A=(0,o.useCallback)(e=>{k?.(e),E.current=e,typeof u==`function`?u(e):u&&(u.current=e)},[k,u]),j=(0,s.jsx)(r.default,{...O.layerProps,ref:A,transition:`none`,props:T?{popover:`manual`}:{dir:S?`rtl`:`ltr`},children:(0,s.jsx)(r.default,{ref:_,...y})});return(0,s.jsxs)(s.Fragment,{children:[!g&&(0,s.jsx)(r.default,{ref:x}),T?j:D&&(0,c.createPortal)(j,D)]})}var u=(0,o.forwardRef)(l);u.displayName=`Overlay`,exports.default=u;

package/components/overlay.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { n as e } from "../client.mjs";
+import { t as e } from "../client.mjs";
 import { d as t, l as n, o as r } from "../platform.mjs";
 import { n as i } from "../effects.mjs";
 import a from "../box.mjs";