@box-kite/react 2.2.4 → 2.2.6

package/behavior.mjs

@@ -1,4 +1,4 @@
-import { c as e, l as t, s as n, t as r, u as i } from "./platform.mjs";
+import { c as e, d as t, l as n, t as r, u as i } from "./platform.mjs";
 import { n as a } from "./effects.mjs";
 import { t as o } from "./keyboard.mjs";
 import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
@@ -33,24 +33,24 @@ function g() {
 	let e = m.filter((e) => !m.some((t) => t !== e && h(e, t)));
 	return e[e.length - 1];
 }
-function _(e) {
-	let { enabled: r = !0, onDismiss: i, inside: o, escapeKey: s = !0, outsidePointer: c = !0 } = e, l = d(o), u = f(i);
+function _(t) {
+	let { enabled: n = !0, onDismiss: r, inside: o, escapeKey: s = !0, outsidePointer: c = !0 } = t, l = d(o), u = f(r);
 	a(() => {
-		if (!r) return;
-		let e = { elements: () => (l.current ?? []).map((e) => n(e)).filter((e) => e !== null) };
-		m.push(e);
-		let i = new AbortController(), a = (e, t) => document.addEventListener(e, t, { signal: i.signal });
-		return s && a("keydown", (t) => {
-			t.key !== "Escape" || t.defaultPrevented || g() === e && u("escape", t);
+		if (!n) return;
+		let t = { elements: () => (l.current ?? []).map((t) => e(t)).filter((e) => e !== null) };
+		m.push(t);
+		let r = new AbortController(), a = (e, t) => document.addEventListener(e, t, { signal: r.signal });
+		return s && a("keydown", (e) => {
+			e.key !== "Escape" || e.defaultPrevented || g() === t && u("escape", e);
 		}), c && a("pointerdown", (e) => {
-			t(e, l.current ?? []) || u("outside-pointer", e);
+			i(e, l.current ?? []) || u("outside-pointer", e);
 		}), () => {
-			i.abort();
-			let t = m.indexOf(e);
-			t !== -1 && m.splice(t, 1);
+			r.abort();
+			let e = m.indexOf(t);
+			e !== -1 && m.splice(e, 1);
 		};
 	}, [
-		r,
+		n,
 		s,
 		c,
 		u,
@@ -63,18 +63,18 @@ function v() {
 	let e = r()?.activeElement;
 	return e && e !== document.body ? e : null;
 }
-function y(t = {}) {
-	let { enabled: n = !0, returnTo: r, preventScroll: i } = t, [a, o] = u(null), [s, l] = u(!1);
-	n !== s && (l(n), n && o(v()));
+function y(e = {}) {
+	let { enabled: t = !0, returnTo: r, preventScroll: i } = e, [a, o] = u(null), [s, l] = u(!1);
+	t !== s && (l(t), t && o(v()));
 	let d = f(() => {
-		(e(r) ?? a)?.focus({ preventScroll: i });
+		(n(r) ?? a)?.focus({ preventScroll: i });
 	});
 	return c(() => {
-		if (n) return () => {
+		if (t) return () => {
 			let e = document.activeElement;
 			(!e || e === document.body || !document.contains(e)) && d();
 		};
-	}, [n, d]), { returnFocus: d };
+	}, [t, d]), { returnFocus: d };
 }
 //#endregion
 //#region src/react/a11y/useRovingFocus.ts
@@ -98,18 +98,18 @@ function C(e, t, n) {
 	return S(e === 1 ? -1 : t, e, t, !1, n);
 }
 function w(e) {
-	let { count: t, columns: n, columnIndexOf: r, pageSize: a = b, defaultActiveColumn: c = 0, onActiveCellChange: f, orientation: m = "vertical", loop: h = !0, activeIndex: g, defaultActiveIndex: _ = 0, onActiveIndexChange: v, isDisabled: y, textOf: w, focusItems: T = !0, onSelect: E } = e, [D, O] = p({
+	let { count: n, columns: r, columnIndexOf: i, pageSize: a = b, defaultActiveColumn: c = 0, onActiveCellChange: f, orientation: m = "vertical", loop: h = !0, activeIndex: g, defaultActiveIndex: _ = 0, onActiveIndexChange: v, isDisabled: y, textOf: w, focusItems: T = !0, onSelect: E } = e, [D, O] = p({
 		value: g,
 		defaultValue: _,
 		onChange: v
-	}), k = Math.min(D, t - 1), A = n !== void 0, j = s((e) => typeof n == "function" ? n(e) : n ?? 0, [n]), M = s((e, t) => {
+	}), k = Math.min(D, n - 1), A = r !== void 0, j = s((e) => typeof r == "function" ? r(e) : r ?? 0, [r]), M = s((e, t) => {
 		let n = j(e);
-		if (!r) return x(t, n - 1);
+		if (!i) return x(t, n - 1);
 		if (n <= 0) return -1;
-		let i = 0;
-		for (; i + 1 < n && r(e, i + 1) <= t;) i++;
-		return i;
-	}, [r, j]), [N, P] = u(c), F = A && k >= 0 ? M(k, N) : -1, I = l([]), L = l(/* @__PURE__ */ new Map()), R = l(/* @__PURE__ */ new Map()), z = l(/* @__PURE__ */ new Map()), B = l({
+		let r = 0;
+		for (; r + 1 < n && i(e, r + 1) <= t;) r++;
+		return r;
+	}, [i, j]), [N, P] = u(c), F = A && k >= 0 ? M(k, N) : -1, I = l([]), L = l(/* @__PURE__ */ new Map()), R = l(/* @__PURE__ */ new Map()), z = l(/* @__PURE__ */ new Map()), B = l({
 		query: "",
 		at: 0
 	}), V = s((e) => {
@@ -123,8 +123,8 @@ function w(e) {
 	]), G = d({
 		row: k,
 		column: F
-	}), K = d(N), q = d(f), J = d(j), Y = d(M), X = d(r), Z = s((e, n, r) => {
-		let i = x(e, t - 1), a = Math.max(0, n), o = i < 0 ? -1 : Y.current(i, a), s = G.current;
+	}), K = d(N), q = d(f), J = d(j), Y = d(M), X = d(i), Z = s((e, t, r) => {
+		let i = x(e, n - 1), a = Math.max(0, t), o = i < 0 ? -1 : Y.current(i, a), s = G.current;
 		return i === s.row && o === s.column ? s : (O(i, r), P(a), q.current?.({
 			row: i,
 			column: o
@@ -136,14 +136,14 @@ function w(e) {
 		G,
 		Y,
 		q,
-		t,
+		n,
 		O
-	]), Q = s((e, n, r) => {
-		let i = x(e, t - 1), a = i < 0 ? -1 : x(Math.max(0, n), J.current(i) - 1);
+	]), Q = s((e, t, r) => {
+		let i = x(e, n - 1), a = i < 0 ? -1 : x(Math.max(0, t), J.current(i) - 1);
 		return Z(i, a < 0 ? 0 : X.current?.(i, a) ?? a, r);
 	}, [
 		X,
-		t,
+		n,
 		Z,
 		J
 	]), ee = s((e, t) => {
@@ -172,7 +172,7 @@ function w(e) {
 		T,
 		O
 	]), $ = s((e) => {
-		let { row: n, column: r } = G.current, o = (t, n) => {
+		let { row: r, column: i } = G.current, o = (t, n) => {
 			e.preventDefault();
 			let r = Q(t, n, {
 				reason: "keyboard",
@@ -186,20 +186,20 @@ function w(e) {
 				event: e
 			});
 			T && U(n.row, n.column);
-		}, c = 2 ** 53 - 1, l = () => i(e.currentTarget) ? -1 : 1;
+		}, c = 2 ** 53 - 1, l = () => t(e.currentTarget) ? -1 : 1;
 		switch (e.key) {
-			case "ArrowRight": return o(n, r + l());
-			case "ArrowLeft": return o(n, r - l());
-			case "ArrowDown": return s(n + 1);
-			case "ArrowUp": return s(n - 1);
-			case "Home": return e.ctrlKey || e.metaKey ? o(0, 0) : o(n, 0);
-			case "End": return e.ctrlKey || e.metaKey ? o(t - 1, c) : o(n, c);
-			case "PageDown": return s(n + a);
-			case "PageUp": return s(n - a);
+			case "ArrowRight": return o(r, i + l());
+			case "ArrowLeft": return o(r, i - l());
+			case "ArrowDown": return s(r + 1);
+			case "ArrowUp": return s(r - 1);
+			case "Home": return e.ctrlKey || e.metaKey ? o(0, 0) : o(r, 0);
+			case "End": return e.ctrlKey || e.metaKey ? o(n - 1, c) : o(r, c);
+			case "PageDown": return s(r + a);
+			case "PageUp": return s(r - a);
 		}
 	}, [
 		G,
-		t,
+		n,
 		K,
 		U,
 		T,
@@ -218,31 +218,31 @@ function w(e) {
 				$(e);
 				return;
 			}
-			let n = m !== "horizontal", r = m !== "vertical", a = B.current, s = o.isOpen(a, e.timeStamp), c = (t, n) => {
+			let r = m !== "horizontal", i = m !== "vertical", a = B.current, s = o.isOpen(a, e.timeStamp), c = (t, n) => {
 				t !== -1 && t !== k && (e.preventDefault(), O(t, {
 					reason: n,
 					event: e
 				}), T && V(t));
 			};
-			if (r && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
-				let n = e.key === "ArrowRight" !== i(e.currentTarget);
-				c(S(k, n ? 1 : -1, t, h, y), "keyboard");
+			if (i && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
+				let r = e.key === "ArrowRight" !== t(e.currentTarget);
+				c(S(k, r ? 1 : -1, n, h, y), "keyboard");
 				return;
 			}
-			if (e.key === "ArrowDown" && n) {
-				c(S(k, 1, t, h, y), "keyboard");
+			if (e.key === "ArrowDown" && r) {
+				c(S(k, 1, n, h, y), "keyboard");
 				return;
 			}
-			if (e.key === "ArrowUp" && n) {
-				c(S(k, -1, t, h, y), "keyboard");
+			if (e.key === "ArrowUp" && r) {
+				c(S(k, -1, n, h, y), "keyboard");
 				return;
 			}
 			if (e.key === "Home") {
-				c(C(1, t, y), "keyboard");
+				c(C(1, n, y), "keyboard");
 				return;
 			}
 			if (e.key === "End") {
-				c(C(-1, t, y), "keyboard");
+				c(C(-1, n, y), "keyboard");
 				return;
 			}
 			if (e.key === "Enter" || e.key === " " && !(s && w)) {
@@ -251,12 +251,12 @@ function w(e) {
 				return;
 			}
 			if (w && o.isPrintable(e)) {
-				let n = o.push(a, e.key, e.timeStamp);
-				c(o.target(n, k, t, w, y), "typeahead");
+				let t = o.push(a, e.key, e.timeStamp);
+				c(o.target(t, k, n, w, y), "typeahead");
 			}
 		}, [
 			k,
-			t,
+			n,
 			V,
 			T,
 			y,

package/box.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./client.cjs");let r=require("react");r=e.t(r,1);let i=require("@box-kite/core");function a({tag:e,tagProps:t,render:n}){let[i,a]=(0,r.useState)(!1);return r.default.createElement(e,{...t,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1)},n({isHover:i}))}function o(e,i){let{tag:o=`div`,children:s}=e,{classNames:c,styleElements:l}=n.i(e,o===`svg`),u=t.d(e,c);i&&(u.ref=i);let d=typeof s==`function`?r.default.createElement(a,{tag:o,tagProps:u,render:s}):r.default.createElement(o,u,s);return l?r.default.createElement(r.default.Fragment,null,l,d):d}var s=t.f(o,`Box`);s.extend=i.BoxExtends.extend,s.components=i.BoxExtends.components,s.keyframes=i.BoxExtends.keyframes,s.spring=i.Springs.spring,s.Theme=n.n,s.useTheme=n.n.useTheme,s.getVariableValue=e=>(0,i.getDefaultEngine)().getVariableValue(e),s.configure=n.r.configure,s.viewTransition=i.startViewTransition;function c(e,r){return t.p(n.i(e,r?.svg===!0),e.className)}exports.default=s,exports.useBoxElement=o,exports.useClassNames=c,exports.useVisibility=n.a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./client.cjs");let r=require("react");r=e.t(r,1);let i=require("@box-kite/core");function a({tag:e,tagProps:t,render:n}){let[i,a]=(0,r.useState)(!1);return r.default.createElement(e,{...t,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1)},n({isHover:i}))}function o(e,i){let{tag:o=`div`,children:s}=e,{classNames:c,styleElements:l}=n.i(e,o===`svg`),u=t.d(e,c);i&&(u.ref=i);let d=typeof s==`function`?r.default.createElement(a,{tag:o,tagProps:u,render:s}):r.default.createElement(o,u,s);return l?r.default.createElement(r.default.Fragment,null,l,d):d}var s=t.f(o,`Box`);s.extend=i.BoxExtends.extend,s.components=i.BoxExtends.components,s.createComponents=i.BoxExtends.createComponents,s.Components=n.o,s.keyframes=i.BoxExtends.keyframes,s.spring=i.Springs.spring,s.Theme=n.n,s.useTheme=n.n.useTheme,s.getVariableValue=e=>(0,i.getDefaultEngine)().getVariableValue(e),s.configure=n.r.configure,s.viewTransition=i.startViewTransition;function c(e,r){return t.p(n.i(e,r?.svg===!0),e.className)}exports.default=s,exports.useBoxElement=o,exports.useClassNames=c,exports.useVisibility=n.a;

package/box.d.ts

@@ -2,6 +2,7 @@ import { default as React, Ref, RefAttributes } from 'react';
 import { BoxExtends, Springs, startViewTransition } from '@box-kite/core';
 import { BoxClassNames } from './react/boxClassNames';
 import { BoxClassNameProps, BoxCoreProps } from './react/boxProps';
+import { default as Components } from './react/componentsProvider';
 import { default as useVisibility } from './react/hooks/useVisibility';
 import { ExtractElementFromTag } from './react/reactTypes';
 import { default as Theme } from './react/theme/theme';
@@ -20,6 +21,10 @@ interface BoxType {
     <TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never>(props: BoxCoreProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
     extend: typeof BoxExtends.extend;
     components: typeof BoxExtends.components;
+    /** A design for one subtree, registered nowhere: hand it to `<Box.Components value>` or `<Box.Theme components>`. */
+    createComponents: typeof BoxExtends.createComponents;
+    /** Every Box below resolves its `component` against this registry instead of the app's `Box.components()`. */
+    Components: typeof Components;
     keyframes: typeof BoxExtends.keyframes;
     /** A spring of your own, sampled into `{ easing, duration }` — the two halves the timing and duration props take. */
     spring: typeof Springs.spring;

package/box.mjs

@@ -1,30 +1,30 @@
 import { d as e, f as t, p as n } from "./react-shared.mjs";
-import { a as r, i, n as a, r as o } from "./client.mjs";
-import s, { useState as c } from "react";
-import { BoxExtends as l, Springs as u, getDefaultEngine as d, startViewTransition as f } from "@box-kite/core";
+import { a as r, i, n as a, o, r as s } from "./client.mjs";
+import c, { useState as l } from "react";
+import { BoxExtends as u, Springs as d, getDefaultEngine as f, startViewTransition as p } from "@box-kite/core";
 //#region src/box.ts
-function p({ tag: e, tagProps: t, render: n }) {
-	let [r, i] = c(!1);
-	return s.createElement(e, {
+function m({ tag: e, tagProps: t, render: n }) {
+	let [r, i] = l(!1);
+	return c.createElement(e, {
 		...t,
 		onMouseEnter: () => i(!0),
 		onMouseLeave: () => i(!1)
 	}, n({ isHover: r }));
 }
-function m(t, n) {
-	let { tag: r = "div", children: a } = t, { classNames: o, styleElements: c } = i(t, r === "svg"), l = e(t, o);
+function h(t, n) {
+	let { tag: r = "div", children: a } = t, { classNames: o, styleElements: s } = i(t, r === "svg"), l = e(t, o);
 	n && (l.ref = n);
-	let u = typeof a == "function" ? s.createElement(p, {
+	let u = typeof a == "function" ? c.createElement(m, {
 		tag: r,
 		tagProps: l,
 		render: a
-	}) : s.createElement(r, l, a);
-	return c ? s.createElement(s.Fragment, null, c, u) : u;
+	}) : c.createElement(r, l, a);
+	return s ? c.createElement(c.Fragment, null, s, u) : u;
 }
-var h = t(m, "Box");
-h.extend = l.extend, h.components = l.components, h.keyframes = l.keyframes, h.spring = u.spring, h.Theme = a, h.useTheme = a.useTheme, h.getVariableValue = (e) => d().getVariableValue(e), h.configure = o.configure, h.viewTransition = f;
-function g(e, t) {
+var g = t(h, "Box");
+g.extend = u.extend, g.components = u.components, g.createComponents = u.createComponents, g.Components = o, g.keyframes = u.keyframes, g.spring = d.spring, g.Theme = a, g.useTheme = a.useTheme, g.getVariableValue = (e) => f().getVariableValue(e), g.configure = s.configure, g.viewTransition = p;
+function _(e, t) {
 	return n(i(e, t?.svg === !0), e.className);
 }
 //#endregion
-export { h as default, m as useBoxElement, g as useClassNames, r as useVisibility };
+export { g as default, h as useBoxElement, _ as useClassNames, r as useVisibility };