@box-kite/react 2.1.0 → 2.2.1

package/rsc.mjs

@@ -1,18 +1,21 @@
-import { d as e, f as t, l as n } from "./react-shared.mjs";
+import { d as e, l as t, p as n } from "./react-shared.mjs";
 import r from "react";
-import { BoxExtends as i, Springs as a, getDefaultEngine as o } from "@box-kite/core";
+import { BoxExtends as i, Springs as a, getDefaultEngine as o, startViewTransition as s } from "@box-kite/core";
 //#region src/rsc.ts
 o().configure({ sink: "element" });
-function s(t) {
-	let { tag: i = "div", children: a } = t;
-	if (typeof a == "function") throw Error("[box-kite] Box children as a function track hover state, which needs the client Box — render it from a 'use client' module.");
-	let { classNames: o, styleElements: s } = n(t, i === "svg");
-	return r.createElement(r.Fragment, null, s, r.createElement(i, e(t, o), a));
+function c(n, i) {
+	let { tag: a = "div", children: o } = n;
+	if (typeof o == "function") throw Error("[box-kite] Box children as a function track hover state, which needs the client Box — render it from a 'use client' module.");
+	let { classNames: s, styleElements: c } = t(n, a === "svg");
+	return r.createElement(r.Fragment, null, c, r.createElement(a, e(n, s), o));
 }
-var c = s;
-c.extend = i.extend, c.components = i.components, c.keyframes = i.keyframes, c.spring = a.spring, c.getVariableValue = (e) => o().getVariableValue(e), c.configure = (e) => o().configure(e);
-function l(e, r) {
-	return t(n(e, r?.svg === !0), e.className);
+function l(e) {
+	return c(e);
+}
+var u = l;
+u.extend = i.extend, u.components = i.components, u.keyframes = i.keyframes, u.spring = a.spring, u.getVariableValue = (e) => o().getVariableValue(e), u.configure = (e) => o().configure(e), u.viewTransition = s;
+function d(e, r) {
+	return n(t(e, r?.svg === !0), e.className);
 }
 //#endregion
-export { c as default, l as useClassNames };
+export { u as default, c as useBoxElement, d as useClassNames };

package/ssg.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./rolldown-runtime.cjs"),t=require("./client.cjs");let n=require("react-dom/server");n=e.t(n,1);function r(){return t.r.getStyles()}function i(){t.r.clear()}function a(e,a=!0){let o=n.default.renderToStaticMarkup(e),s=r();if(a){let e=o.indexOf(`<head>`);if(e>-1){let n=e+6;o=o.substring(0,n)+`<style id="${t.r.styleElementId()}">${s}</style>`+o.substring(n)}}return i(),{html:o,styles:s}}exports.getStyles=r,exports.renderToStaticMarkup=a,exports.resetStyles=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./rolldown-runtime.cjs"),t=require("./client.cjs");let n=require("react-dom/server");n=e.t(n,1);function r(){return t.r.getStyles()}function i(){return t.r.getStyleTag()}function a(){t.r.clear()}function o(e,t=!0){let o=n.default.renderToStaticMarkup(e),s=r(),c=i();if(t){let e=o.indexOf(`<head>`);if(e>-1){let t=e+6;o=o.substring(0,t)+c+o.substring(t)}}return a(),{html:o,styles:s,styleTag:c}}exports.getStyleTag=i,exports.getStyles=r,exports.renderToStaticMarkup=o,exports.resetStyles=a;

package/ssg.d.ts

@@ -5,9 +5,14 @@ import { default as React } from 'react';
  */
 /**
  * The CSS for everything rendered since the last reset. Flushes first, so it is safe straight after
- * `renderToString` — no effects have run at that point. Goes in a `<style id="box-kite-styles">` in the head.
+ * `renderToString` — no effects have run at that point. `getStyleTag()` is the same CSS ready for the head.
  */
 export declare function getStyles(): string;
+/**
+ * The CSS as `<style id="box-kite-styles" data-box-kite="…">`, for the head. The attribute is what lets the
+ * browser adopt the sheet on hydration instead of generating and inserting every rule in it a second time.
+ */
+export declare function getStyleTag(): string;
 /**
  * Drop every rule, class name and variable the engine has emitted, so the next request starts blank.
  * Registration (`Box.extend()`, `Box.components()`) survives. Call it once per request, after `getStyles()`.
@@ -15,10 +20,11 @@ export declare function getStyles(): string;
 export declare function resetStyles(): void;
 /**
  * Render `element` to static HTML together with its CSS. With `addStylesToHead` (the default) and a
- * `<head>` in the tree the styles go there; otherwise use the returned `styles`. The engine is reset
+ * `<head>` in the tree the style tag goes there; otherwise use the returned `styleTag`. The engine is reset
  * before returning, so sequential calls are independent.
  */
 export declare function renderToStaticMarkup(element: React.ReactElement, addStylesToHead?: boolean): {
     html: string;
     styles: string;
+    styleTag: string;
 };

package/ssg.mjs

@@ -5,21 +5,25 @@ function n() {
 	return e.getStyles();
 }
 function r() {
+	return e.getStyleTag();
+}
+function i() {
 	e.clear();
 }
-function i(i, a = !0) {
-	let o = t.renderToStaticMarkup(i), s = n();
+function a(e, a = !0) {
+	let o = t.renderToStaticMarkup(e), s = n(), c = r();
 	if (a) {
-		let t = o.indexOf("<head>");
-		if (t > -1) {
-			let n = t + 6;
-			o = o.substring(0, n) + `<style id="${e.styleElementId()}">${s}</style>` + o.substring(n);
+		let e = o.indexOf("<head>");
+		if (e > -1) {
+			let t = e + 6;
+			o = o.substring(0, t) + c + o.substring(t);
 		}
 	}
-	return r(), {
+	return i(), {
 		html: o,
-		styles: s
+		styles: s,
+		styleTag: c
 	};
 }
 //#endregion
-export { n as getStyles, i as renderToStaticMarkup, r as resetStyles };
+export { r as getStyleTag, n as getStyles, a as renderToStaticMarkup, i as resetStyles };

package/utils/dataGrid/activeCellStore.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Which cell holds the grid's tab stop, as a store each cell subscribes to by its own coordinates. Handed
+ * down as a value, a move changed it for every cell on screen; subscribed to, it re-renders the two cells
+ * whose answer changed.
+ */
+export default class ActiveCellStore {
+    private row;
+    private column;
+    private readonly listeners;
+    constructor(row: number, column: number);
+    subscribe: (listener: () => void) => (() => void);
+    isActive(row: number, column: number): boolean;
+    set(row: number, column: number): void;
+}

package/utils/dataGrid/filterDraftUtils.d.ts

@@ -0,0 +1,19 @@
+import { FilterValue, NumberFilterValue } from '../../components/dataGrid/contracts/dataGridContract';
+/** What a number filter's inputs hold while they are being typed into: text, since `1.` is on its way to a number. */
+export interface NumberFilterDraft {
+    operator: NumberFilterValue['operator'];
+    value: string;
+    valueTo: string;
+}
+/**
+ * Whether a filter input's draft already says what the grid holds. When it does not, the grid's value
+ * came from somewhere else — "Clear filters", a controlled prop — and the input has to take it.
+ */
+declare namespace FilterDraftUtils {
+    /** A text filter stores what was typed, and a blank one is no filter at all. */
+    function textMatches(draft: string, filter: FilterValue | undefined): boolean;
+    function numberDraft(filter: FilterValue | undefined): NumberFilterDraft;
+    /** Read the way the model parses, so `1.` matches a stored `1` and a half-typed number is never rewritten. */
+    function numberMatches(draft: NumberFilterDraft, filter: FilterValue | undefined): boolean;
+}
+export default FilterDraftUtils;

package/utils/dataGrid/headerCellUtils.d.ts

@@ -0,0 +1,50 @@
+/** Where the travelling header hover sits: each edge's distance from the same edge of the header, in px. */
+export interface HeaderHoverBounds {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+/** The travelling hover's whole state. Physical edges, because a measured pixel has no reading order. */
+export interface HeaderHoverState {
+    bounds?: HeaderHoverBounds;
+    visible: boolean;
+    /** Shown this update from nothing, so it appears where it is rather than travelling from where it last was. */
+    entering: boolean;
+    /** Which way it last travelled: the leading edge is the fast one, which is what makes it stretch and settle. */
+    backward: boolean;
+    /** Hidden by the resizer between two cells rather than by leaving: the next cell is travelled to, not entered. */
+    paused: boolean;
+}
+/**
+ * What a header cell does with the pointer: which press sorts, and the model behind `def.headerHover:
+ * 'sliding'` — one pill that flows from the cell it was on to the one under the pointer.
+ */
+declare namespace HeaderCellUtils {
+    /** A sortable header cell: the only kind a press does anything on, and so the only kind that hovers. */
+    const CELL_SELECTOR = "[role=\"columnheader\"][aria-sort]";
+    /**
+     * Whether a press sorts: anywhere in the cell but a control inside it. Judged on where the press *began*,
+     * since a resize drag released over the cell fires its click on the cell itself.
+     */
+    function isSortPress(cell: Element, pressedOn: EventTarget | null): boolean;
+    const INITIAL: HeaderHoverState;
+    /** Whether the pointer is over a resizer, where a press resizes, so no cell hovers. */
+    function isOnResizer(target: EventTarget | null): boolean;
+    /** The hoverable cell an event landed in, if it belongs to this header. Over the resizer there is none. */
+    function cellAt(header: Element, target: EventTarget | null): HTMLElement | undefined;
+    /**
+     * The cell's box against the header's own, which is the hover's containing block — less the resizer's line
+     * where it stands inside the cell, so the pill keeps the same distance from it as the neighbour's does.
+     */
+    function bounds(header: Element, cell: Element): HeaderHoverBounds;
+    function sameBounds(a: HeaderHoverBounds | undefined, b: HeaderHoverBounds | undefined): boolean;
+    /** The next state for a pointer over `next` — a cell's bounds, or `undefined` for anywhere that does not hover. */
+    function hover(state: HeaderHoverState, next: HeaderHoverBounds | undefined): HeaderHoverState;
+    /**
+     * Over the resizer: hidden, but still on its way between two cells. The handle sits on the boundary every
+     * move from cell to cell crosses, so treating it as a leave would turn each move into an entrance.
+     */
+    function pause(state: HeaderHoverState): HeaderHoverState;
+}
+export default HeaderCellUtils;

package/utils/environment/environmentUtils.d.ts

@@ -6,6 +6,11 @@
  */
 /** A browser: a window with a document. What an effect that touches layout needs to exist. */
 export declare function isBrowser(): boolean;
+/**
+ * Development, unless the bundler or the process says production. Spelled out so a bundler replaces it;
+ * a page with no bundler has no `process` at all and counts as production.
+ */
+export declare function isDevelopment(): boolean;
 /** Whether there is a document at all — false during a server render. */
 export declare function hasDocument(): boolean;
 /** The document, or null when there is none, so a caller can `?.` instead of branching. */