@box-kite/react 2.2.1 → 2.2.2

package/docs/props.md

@@ -613,7 +613,7 @@ What a `::before`/`::after` renders — and whether it renders at all: a generat
 The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.
 
 - Writes: `content-visibility`
-- Values: `visible` · `hidden`
+- Values: `visible` · `hidden` · `auto`
 - Example: `contentVisibility="visible"` → `content-visibility: visible`
 
 ### `contrast`

package/layer.cjs

@@ -1 +1 @@
-const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./behavior.cjs"),r=require("./identity.cjs");let i=require("react");var a=()=>()=>{},o=()=>!0;function s(){return(0,i.useSyncExternalStore)(a,e.a,o)}function c(a){let{haspopup:o,id:c,idPrefix:l,open:u,defaultOpen:d=!1,onOpenChange:f,onOpened:p,onClosing:m,inside:h}=a,g=r.t(l),_=c??g,[v,y]=n.i({value:u,defaultValue:d,onChange:f}),[b,x]=(0,i.useState)(null),[S,C]=(0,i.useState)(null),w=s(),[T,E]=(0,i.useState)(!1),[D,O]=(0,i.useState)(),k=(0,i.useRef)(`imperative`),A=(0,i.useRef)(!1),j=n.a(p),M=n.a(m),N=n.a(e=>{let t=e.newState===`open`,n=e.currentTarget;if(t&&u===!1){e.preventDefault();return}t||(A.current=n.contains(document.activeElement),M(A.current,b)),E(t);let r=t?`trigger`:k.current;k.current=`imperative`,y(t,{reason:r,event:e})}),P=n.a(e=>{let t=e.currentTarget;e.newState===`open`&&j(t)});t.n(()=>{if(!w||!S)return;let e=new AbortController;return S.addEventListener(`beforetoggle`,N,{signal:e.signal}),S.addEventListener(`toggle`,P,{signal:e.signal}),()=>e.abort()},[w,S,N,P]),t.n(()=>{!w||!e.a()||!S||v===T||(v?S.showPopover():S.hidePopover())},[v,T,S,w]),t.n(()=>{if(!w||!v)return;let t=new AbortController,n=(e,n)=>document.addEventListener(e,n,{signal:t.signal,capture:!0});return n(`keydown`,e=>{e.key===`Escape`&&(k.current=`escape`)}),n(`pointerdown`,t=>{let n=!!b&&e.l(t,[b]);k.current=n?`trigger`:`outside-pointer`}),()=>t.abort()},[w,v,b]),t.n(()=>{b&&(b.id||b.setAttribute(`id`,`${_}-trigger`),O(b.id))},[b,_]),t.n(()=>{if(!(!w||!b))return b.setAttribute(`popovertarget`,_),()=>b.removeAttribute(`popovertarget`)},[w,b,_]),t.n(()=>{w||!v||!S||j(S)},[w,v,S,j]),n.r({enabled:!w&&v,inside:[S,b,...h??[]],onDismiss:(e,t)=>y(!1,{reason:e,event:t})}),n.n({enabled:!w&&v,returnTo:b});let F=n.a(e=>{y(e=>!e,{reason:`trigger`,event:e})});return{platform:w,isOpen:v,setOpen:y,id:_,trigger:(0,i.useMemo)(()=>({ref:x,props:{"aria-expanded":v,"aria-haspopup":o,"aria-controls":v?_:void 0,...w?{}:{onClick:F}}}),[F,o,v,_,w]),triggerElement:b,triggerId:D,setPanel:C,panelElement:S}}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});
+const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./behavior.cjs"),r=require("./identity.cjs");let i=require("react");var a=()=>()=>{},o=()=>!0;function s(){return(0,i.useSyncExternalStore)(a,e.a,o)}function c(a){let{haspopup:o,id:c,idPrefix:l,open:u,defaultOpen:d=!1,onOpenChange:f,onOpened:p,onClosing:m,inside:h}=a,g=r.t(l),_=c??g,[v,y]=n.i({value:u,defaultValue:d,onChange:f}),[b,x]=(0,i.useState)(null),[S,C]=(0,i.useState)(null),w=s(),[T,E]=(0,i.useState)(!1),[D,O]=(0,i.useState)(),k=(0,i.useRef)(`imperative`),A=(0,i.useRef)(!1),j=n.a(p),M=n.a(m),N=n.a(e=>{let t=e.newState===`open`,n=e.currentTarget;if(t&&u===!1){e.preventDefault(),setTimeout(()=>y(!0,{reason:`trigger`,event:e}));return}t||(A.current=n.contains(document.activeElement),M(A.current,b)),E(t);let r=t?`trigger`:k.current;k.current=`imperative`,y(t,{reason:r,event:e})}),P=n.a(e=>{let t=e.currentTarget;e.newState===`open`&&j(t)});t.n(()=>{if(!w||!S)return;let e=new AbortController;return S.addEventListener(`beforetoggle`,N,{signal:e.signal}),S.addEventListener(`toggle`,P,{signal:e.signal}),()=>e.abort()},[w,S,N,P]),t.n(()=>{!w||!e.a()||!S||v===T||(v?S.showPopover():S.hidePopover())},[v,T,S,w]),t.n(()=>{if(!w||!v)return;let t=new AbortController,n=(e,n)=>document.addEventListener(e,n,{signal:t.signal,capture:!0});return n(`keydown`,e=>{e.key===`Escape`&&(k.current=`escape`)}),n(`pointerdown`,t=>{let n=!!b&&e.l(t,[b]);k.current=n?`trigger`:`outside-pointer`}),()=>t.abort()},[w,v,b]),t.n(()=>{b&&(b.id||b.setAttribute(`id`,`${_}-trigger`),O(b.id))},[b,_]),t.n(()=>{if(!(!w||!b))return b.setAttribute(`popovertarget`,_),()=>b.removeAttribute(`popovertarget`)},[w,b,_]),t.n(()=>{w||!v||!S||j(S)},[w,v,S,j]),n.r({enabled:!w&&v,inside:[S,b,...h??[]],onDismiss:(e,t)=>y(!1,{reason:e,event:t})}),n.n({enabled:!w&&v,returnTo:b});let F=n.a(e=>{y(e=>!e,{reason:`trigger`,event:e})});return{platform:w,isOpen:v,setOpen:y,id:_,trigger:(0,i.useMemo)(()=>({ref:x,props:{"aria-expanded":v,"aria-haspopup":o,"aria-controls":v?_:void 0,...w?{}:{onClick:F}}}),[F,o,v,_,w]),triggerElement:b,triggerId:D,setPanel:C,panelElement:S}}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});

package/layer.mjs

@@ -18,7 +18,10 @@ function h(d) {
 	}), [E, D] = u(null), [O, k] = u(null), A = m(), [j, M] = u(!1), [N, P] = u(), F = l("imperative"), I = l(!1), L = r(y), R = r(b), z = r((e) => {
 		let t = e.newState === "open", n = e.currentTarget;
 		if (t && g === !1) {
-			e.preventDefault();
+			e.preventDefault(), setTimeout(() => T(!0, {
+				reason: "trigger",
+				event: e
+			}));
 			return;
 		}
 		t || (I.current = n.contains(document.activeElement), R(I.current, E)), M(t);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box-kite/react",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "type": "module",
   "sideEffects": [
     "pages/**"
@@ -113,10 +113,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "36.74 KB"
+      "limit": "37.54 KB"
     },
     {
       "name": "Box in a Server Component (react-server entry)",
@@ -124,10 +125,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "35.16 KB"
+      "limit": "35.63 KB"
     },
     {
       "name": "Behavior primitives (a11y entry)",
@@ -135,7 +137,8 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
       "limit": "3.2 KB"
@@ -146,7 +149,8 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
       "limit": "2.25 KB"
@@ -157,10 +161,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "55.18 KB"
+      "limit": "55.64 KB"
     },
     {
       "name": "Spec renderer (spec entry)",
@@ -168,7 +173,8 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
       "limit": "4.7 KB"
@@ -179,7 +185,8 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
       "limit": "4 KB"
@@ -188,9 +195,10 @@
       "name": "Core engine (@box-kite/core, no React)",
       "path": "dist-core/core.mjs",
       "gzip": true,
-      "limit": "36.20 KB",
+      "limit": "36.90 KB",
       "ignore": [
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ]
     },
     {
@@ -199,10 +207,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "38.83 KB"
+      "limit": "39.61 KB"
     },
     {
       "name": "Popover",
@@ -210,10 +219,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "40.35 KB"
+      "limit": "41.15 KB"
     },
     {
       "name": "Menu",
@@ -221,10 +231,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "42.63 KB"
+      "limit": "43.41 KB"
     },
     {
       "name": "Accordion",
@@ -232,10 +243,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "38.07 KB"
+      "limit": "38.88 KB"
     },
     {
       "name": "Agent",
@@ -243,10 +255,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "38.80 KB"
+      "limit": "39.63 KB"
     },
     {
       "name": "Markdown",
@@ -254,10 +267,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "37.30 KB"
+      "limit": "38.10 KB"
     },
     {
       "name": "Skeleton",
@@ -265,10 +279,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "36.64 KB"
+      "limit": "37.44 KB"
     },
     {
       "name": "Tabs",
@@ -276,10 +291,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "39.26 KB"
+      "limit": "40.06 KB"
     },
     {
       "name": "Slider",
@@ -287,10 +303,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "38.42 KB"
+      "limit": "39.22 KB"
     },
     {
       "name": "Progress",
@@ -298,10 +315,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "36.62 KB"
+      "limit": "37.41 KB"
     },
     {
       "name": "Toaster",
@@ -309,10 +327,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "40.08 KB"
+      "limit": "40.84 KB"
     },
     {
       "name": "Combobox",
@@ -320,10 +339,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "45.88 KB"
+      "limit": "46.65 KB"
     },
     {
       "name": "Dashboard",
@@ -331,10 +351,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "42.27 KB"
+      "limit": "43.06 KB"
     },
     {
       "name": "DataGrid",
@@ -342,10 +363,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "87.02 KB"
+      "limit": "89.79 KB"
     },
     {
       "name": "DataGrid export, the chunk fetched on the first press",
@@ -353,7 +375,8 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
       "limit": "3.8 KB"
@@ -364,10 +387,11 @@
       "ignore": [
         "react",
         "react-dom",
-        "./diagnostics-*"
+        "./diagnostics-*",
+        "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "118.64 KB"
+      "limit": "120.52 KB"
     }
   ],
   "repository": {
@@ -407,7 +431,7 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@box-kite/core": "2.2.1",
+    "@box-kite/core": "2.2.2",
     "csstype": "^3.2.3",
     "use-sync-external-store": "^1.6.0"
   },

package/react/theme/theme.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { ThemeTransition } from '@box-kite/core';
 import { BoxStyleProps } from '@box-kite/core/types';
 interface ThemeProps {
     children: React.ReactNode;
@@ -13,15 +14,16 @@ interface ThemeProps {
      */
     globalStyles?: BoxStyleProps;
     /**
-     * Cross-fade the page when the theme changes, where the browser has view transitions. Off by default,
-     * because a transition is a decision about the app rather than about theming.
+     * Animate a theme change where the browser has view transitions: `true` or `'fade'` cross-fades the page,
+     * `'reveal'` grows the new theme out of the control that was pressed (or focused) as a circle. Off by
+     * default, because a transition is a decision about the app rather than about theming.
      *
      * It exists as a prop rather than a recipe because the recipe has a trap in it: `startViewTransition`
      * screenshots the page the moment its callback returns, and a `setState` has not rendered by then — so
      * a hand-rolled version captures the old theme twice and nothing appears to change. This flushes the
      * update inside the callback. Reduced motion skips the transition and keeps the theme change.
      */
-    viewTransition?: boolean;
+    viewTransition?: boolean | ThemeTransition;
 }
 /**
  * The React binding for the theme system. Everything that actually touches the platform — reading

package/components/dataGrid/components/dataGridTopBarContextMenu.d.ts

@@ -1,6 +0,0 @@
-import { default as GridModel } from '../models/gridModel';
-interface Props<TRow> {
-    grid: GridModel<TRow>;
-}
-export default function DataGridTopBarContextMenu<TRow>(props: Props<TRow>): import("react").JSX.Element;
-export {};