@box-kite/react 2.2.4 → 2.2.5

package/catalog.mjs

@@ -1615,6 +1615,391 @@ var a = i, o = {
 			required: [],
 			styled: !0
 		},
+		List: {
+			description: "A list of things to read and pick from — messages, orders, people, settings.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: { tag: {
+				type: "string",
+				enum: ["ul", "ol"],
+				description: "`ol` when the order means something — steps, a ranking."
+			} },
+			required: [],
+			styled: !0
+		},
+		"List.Item": {
+			description: "One thing in the list: a flex row of its parts.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: {
+				size: {
+					type: "string",
+					enum: [
+						"sm",
+						"md",
+						"lg"
+					],
+					description: "The item's spacing."
+				},
+				wrap: {
+					type: "boolean",
+					description: "Lets the item's parts wrap onto a second line when they do not fit, instead of squeezing."
+				},
+				selected: {
+					type: "boolean",
+					description: "Tints the item as chosen."
+				},
+				chevron: {
+					type: "boolean",
+					description: "Ends the item with a chevron: pressing it goes somewhere with more."
+				}
+			},
+			required: [],
+			styled: !0
+		},
+		"List.Media": {
+			description: "The leading slot: an icon, an avatar, a thumbnail — `variant` is `icon`, `avatar` or `image`, or none for a bare icon.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: {},
+			required: [],
+			styled: !0
+		},
+		"List.Content": {
+			description: "The middle of an item, taking the room: a column of rows and text, which may shrink past its content.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: {},
+			required: [],
+			styled: !0
+		},
+		"List.Row": {
+			description: "A row inside `List.Content`: its parts side by side, the last at the end.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: {
+				wrap: {
+					type: "boolean",
+					description: "Lets the row's parts wrap onto a new line — a set of tags — instead of pushing the last to the end."
+				},
+				secondary: {
+					type: "boolean",
+					description: "The quieter line under the main one: smaller and muted."
+				}
+			},
+			required: [],
+			styled: !0
+		},
+		"List.Overline": {
+			description: "A small line above the title: an id, a date, a category.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: { lines: {
+				type: "number",
+				enum: [
+					1,
+					2,
+					3
+				],
+				description: "How many lines it runs to before it stops: `1` ends in an ellipsis, `2` and `3` are clamped."
+			} },
+			required: [],
+			styled: !0
+		},
+		"List.Title": {
+			description: "The item's name, and where its `List.Action` goes.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: { lines: {
+				type: "number",
+				enum: [
+					1,
+					2,
+					3
+				],
+				description: "How many lines it runs to before it stops: `1` ends in an ellipsis, `2` and `3` are clamped."
+			} },
+			required: [],
+			styled: !0
+		},
+		"List.Description": {
+			description: "Muted supporting text under the title.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: { lines: {
+				type: "number",
+				enum: [
+					1,
+					2,
+					3
+				],
+				description: "How many lines it runs to before it stops: `1` ends in an ellipsis, `2` and `3` are clamped."
+			} },
+			required: [],
+			styled: !0
+		},
+		"List.Meta": {
+			description: "A small muted value that never wraps — a time, a count — in tabular figures.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: {},
+			required: [],
+			styled: !0
+		},
+		"List.End": {
+			description: "The trailing slot: a value and its label, stacked and aligned to the end so a column of them lines up.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: {},
+			required: [],
+			styled: !0
+		},
+		"List.Actions": {
+			description: "Controls of the item's own — a switch, a menu, a checkbox — lifted above the action that covers the item.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: {},
+			required: [],
+			styled: !0
+		},
+		"List.Action": {
+			description: "The item's one primary action, stretched over the whole item.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: ["onClick"],
+			props: { tag: {
+				type: "string",
+				enum: [
+					"button",
+					"a",
+					"label"
+				],
+				description: "The element, when what `props` holds does not already say: `a` with no `href` is a placeholder link."
+			} },
+			required: [],
+			styled: !0
+		},
+		"List.Fields": {
+			description: "A `<dl>` of `List.Field`s, as many to a line as fit at 8rem each.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: {},
+			required: [],
+			styled: !0
+		},
+		"List.Field": {
+			description: "A labelled value: a `<dt>` and a `<dd>` in a `<div>`, which is the one wrapper a `<dl>` allows.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["label", "default"],
+			events: [],
+			props: {},
+			required: [],
+			styled: !0
+		},
+		"List.Group": {
+			description: "A section of the list: its label, then its own `<ul>` of items.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["label", "default"],
+			events: [],
+			props: {
+				level: {
+					type: "number",
+					enum: [
+						1,
+						2,
+						3,
+						4,
+						5,
+						6
+					],
+					description: "Makes the label a heading of this level, so a screen reader can jump between groups."
+				},
+				sticky: {
+					type: "boolean",
+					description: "Keeps the label at the top of the screen while its items scroll under it, until the next group's pushes it off."
+				}
+			},
+			required: [],
+			styled: !0
+		},
+		"List.Chevron": {
+			description: "The chevron that ends a drill-in item, pointing along the reading order.",
+			import: "import List from '@box-kite/react/components/list';",
+			slots: ["default"],
+			events: [],
+			props: {},
+			required: [],
+			styled: !0
+		},
+		SwipeItem: {
+			description: "A list item that slides aside to show the commands under it — Mail's archive and delete.",
+			import: "import SwipeItem from '@box-kite/react/components/swipeItem';",
+			slots: [
+				"default",
+				"startActions",
+				"endActions"
+			],
+			events: ["onOpenChange"],
+			props: {
+				fullSwipe: {
+					type: "boolean",
+					description: "A swipe carried most of the way across performs the outermost action instead of stopping at the tray — iOS's archive."
+				},
+				open: {
+					type: "string",
+					enum: ["start", "end"],
+					description: "Which tray is open."
+				},
+				defaultOpen: {
+					type: "string",
+					enum: ["start", "end"],
+					description: "Which tray is open to begin with."
+				},
+				size: {
+					type: "string",
+					enum: [
+						"sm",
+						"md",
+						"lg"
+					],
+					description: "The item's spacing, as on `List.Item`."
+				},
+				wrap: {
+					type: "boolean",
+					description: "Lets the item's parts wrap onto a second line, as on `List.Item`."
+				},
+				selected: {
+					type: "boolean",
+					description: "Tints the item as chosen, as on `List.Item`."
+				},
+				chevron: {
+					type: "boolean",
+					description: "Ends the item with a chevron, as on `List.Item`."
+				}
+			},
+			required: [],
+			styled: !0
+		},
+		"SwipeItem.Action": {
+			description: "One command in a tray: a label, and an icon over it if there is one.",
+			import: "import SwipeItem from '@box-kite/react/components/swipeItem';",
+			slots: ["default", "icon"],
+			events: ["onClick"],
+			props: { closeOnSelect: {
+				type: "boolean",
+				description: "Whether choosing the action closes the tray."
+			} },
+			required: [],
+			styled: !0
+		},
+		SortableList: {
+			description: "A list put in order by hand — a playlist, the columns of a report, a set of priorities.",
+			import: "import SortableList from '@box-kite/react/components/sortableList';",
+			slots: ["default"],
+			events: ["onOrderChange", "onOrderCommit"],
+			props: { tag: {
+				type: "string",
+				enum: ["ul", "ol"],
+				description: "`ol` when the order means something — steps, a ranking."
+			} },
+			required: [],
+			styled: !0
+		},
+		"SortableList.Item": {
+			description: "One item in the order: a `List.Item` that knows who it is.",
+			import: "import SortableList from '@box-kite/react/components/sortableList';",
+			slots: ["default"],
+			events: [],
+			props: {
+				value: {
+					type: "string",
+					description: "Who the item is in the order `onOrderChange` reports."
+				},
+				label: {
+					type: "string",
+					description: "What the handle and the announcements call the item: \"Move Ada Lovelace\"."
+				},
+				disabled: {
+					type: "boolean",
+					description: "Leaves the item where it is: its handle is disabled."
+				},
+				size: {
+					type: "string",
+					enum: [
+						"sm",
+						"md",
+						"lg"
+					],
+					description: "The item's spacing."
+				},
+				wrap: {
+					type: "boolean",
+					description: "Lets the item's parts wrap onto a second line when they do not fit, instead of squeezing."
+				},
+				selected: {
+					type: "boolean",
+					description: "Tints the item as chosen."
+				},
+				chevron: {
+					type: "boolean",
+					description: "Ends the item with a chevron: pressing it goes somewhere with more."
+				}
+			},
+			required: ["value"],
+			styled: !0
+		},
+		"SortableList.Handle": {
+			description: "",
+			import: "import SortableList from '@box-kite/react/components/sortableList';",
+			slots: ["default"],
+			events: [],
+			props: {},
+			required: [],
+			styled: !0
+		},
+		VirtualList: {
+			description: "A list too long to render whole — a mailbox, a contact book, a log.",
+			import: "import VirtualList from '@box-kite/react/components/virtualList';",
+			slots: [],
+			events: [
+				"itemKey",
+				"children",
+				"onRangeChange"
+			],
+			props: {
+				estimateSize: {
+					type: "number",
+					description: "What an item counts as until one has been drawn, in px — then the mean of those drawn."
+				},
+				overscan: {
+					type: "number",
+					description: "Items kept either side of what is on screen, so a fast scroll has something to show."
+				},
+				initialCount: {
+					type: "number",
+					description: "How many items render before anything is measured — on a server, and in the first frame."
+				},
+				tag: {
+					type: "string",
+					enum: ["ul", "ol"],
+					description: "`ol` when the order means something — steps, a ranking."
+				}
+			},
+			required: [],
+			styled: !0
+		},
 		Slider: {
 			description: "A value chosen by dragging a thumb along a track.",
 			import: "import Slider from '@box-kite/react/components/slider';",

package/client.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./platform.cjs"),r=require("./effects.cjs"),i=require("./box.cjs");let a=require("react");a=e.t(a,1);let o=require("@box-kite/core"),s=require("react-dom"),c=require("react/jsx-runtime");function l(e){let{node:t=null,event:r=`click`,hideOnScroll:i=!1,hideOnResize:o=!1,hideOnEscape:s=!0}=e??{},[c,l]=(0,a.useState)(!1),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{function e(e){let r=t??u.current;r&&!n.l(e,[r])&&l(!1)}function a(){l(!1)}function d(e){e.key===`Escape`&&l(!1)}let f=new AbortController;return c&&(window.addEventListener(r,e,f),s&&window.addEventListener(`keydown`,d,f),o&&window.addEventListener(`resize`,a,f),i&&window.addEventListener(`scroll`,e,{signal:f.signal,capture:!0})),()=>{f.abort()}},[t,c,r,s,o,i]),[c,l,u]}var u=r.t;function d(e,n){let{classNames:r,signature:i,styleElements:a}=t.l(e,n);return u(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:a}}function f(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return u(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var p;(function(e){function t(){(0,o.getDefaultEngine)().flushSync()}e.flushSync=t;function n(){(0,o.getDefaultEngine)().clear()}e.clear=n;function r(){return(0,o.getDefaultEngine)().getStyles()}e.getStyles=r;function i(){return(0,o.getDefaultEngine)().getStyleTag()}e.getStyleTag=i;function a(){return(0,o.getDefaultEngine)().styleElementId}e.styleElementId=a;function s(e){(0,o.getDefaultEngine)().configure(e)}e.configure=s})(p||={});var m=`[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19`;function h(e){if(typeof e.createContext!=`function`)throw Error(m)}h(a.default);var g=a.default.createContext({theme:``,setTheme:()=>{}});function _(e){let{children:t,theme:n,use:l=`local`,storageKey:u,globalStyles:d,viewTransition:p}=e,m=f(l===`global`?d:void 0,`html`),[h,_]=(0,a.useState)(n??o.defaultThemeName),[v,y]=(0,a.useState)(n!==void 0),b=(0,a.useRef)(null),x=(0,a.useRef)(h),S=(0,a.useRef)(null),C=(0,a.useRef)(void 0),w=(0,a.useCallback)(e=>{let t=()=>{e===null?(u&&(0,o.clearStoredTheme)(u),y(!1)):(u&&(0,o.writeStoredTheme)(u,e),_(e),y(!0))};if(p){let e=(0,o.transitionTheme)(()=>(0,s.flushSync)(t),p===`reveal`?`reveal`:`fade`);C.current=e.finished,e.finished.then(()=>C.current=void 0,()=>C.current=void 0)}else t()},[u,p]),T=p===`reveal`;(0,a.useEffect)(()=>T?(0,o.prepareReveal)():void 0,[T]);let[E,D]=(0,a.useState)(n);return n!==E&&(D(n),n===void 0?y(!1):(_(n),y(!0))),(0,a.useLayoutEffect)(()=>{if(v)return;let e=u?(0,o.readStoredTheme)(u):null,t=e??(0,o.getSystemTheme)();if(t!==x.current&&(b.current=t),_(t),e){y(!0);return}return(0,o.watchSystemTheme)(_)},[v,u]),r.t(()=>{h!==x.current&&(S.current??=(0,o.pauseTransitions)())},[h]),(0,a.useLayoutEffect)(()=>{if(x.current=h,b.current!==null&&b.current!==h)return;b.current=null;let e=S.current;S.current=null;let t=l===`global`?(0,o.documentRoot)():null,n=t?(0,o.applyThemeToElement)(t,h):void 0;return e?.(C.current),n},[h,l]),l===`local`?(0,c.jsxs)(g.Provider,{value:{theme:h,setTheme:w},children:[m,(0,c.jsx)(i.default,{className:h,props:{"data-theme":h},children:t})]}):(0,c.jsxs)(g.Provider,{value:{theme:h,setTheme:w},children:[m,t]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(g);return[e,t]}e.useTheme=t})(_||={});var v=_,y=new WeakMap;function b(e){let t=y.get(e);return t||(t=new Map,y.set(e,t)),t}function x(e=!0){let[t]=v.useTheme(),r=(0,a.useMemo)(()=>{if(!e)return null;let t=n.t();if(!t)return null;let r=`box-kite-portal`,i=t.getElementById(r);return i||(i=document.createElement(`div`),i.id=r,document.body.appendChild(i)),i},[e]);return(0,a.useLayoutEffect)(()=>{if(!t||!r)return;let e=b(r),n=e.get(t)??0;return e.set(t,n+1),n===0&&r.classList.add(t),()=>{let n=(e.get(t)??1)-1;n<=0?(e.delete(t),r.classList.remove(t)):e.set(t,n)}},[r,t]),r}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return x}});
+const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./platform.cjs"),r=require("./effects.cjs"),i=require("./box.cjs");let a=require("react");a=e.t(a,1);let o=require("@box-kite/core"),s=require("react/jsx-runtime"),c=require("react-dom");var l=`[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19`;function u(e){if(typeof e.createContext!=`function`)throw Error(l)}u(a.default);var d=a.default.createContext(void 0);function f({value:e,children:t}){return(0,s.jsx)(d.Provider,{value:e,children:t})}function p(e){let{node:t=null,event:r=`click`,hideOnScroll:i=!1,hideOnResize:o=!1,hideOnEscape:s=!0}=e??{},[c,l]=(0,a.useState)(!1),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{function e(e){let r=t??u.current;r&&!n.u(e,[r])&&l(!1)}function a(){l(!1)}function d(e){e.key===`Escape`&&l(!1)}let f=new AbortController;return c&&(window.addEventListener(r,e,f),s&&window.addEventListener(`keydown`,d,f),o&&window.addEventListener(`resize`,a,f),i&&window.addEventListener(`scroll`,e,{signal:f.signal,capture:!0})),()=>{f.abort()}},[t,c,r,s,o,i]),[c,l,u]}var m=r.t;function h(e,n){let{classNames:r,signature:i,styleElements:s}=t.l(e,n,(0,a.useContext)(d));return m(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:s}}function g(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return m(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var _;(function(e){function t(){(0,o.getDefaultEngine)().flushSync()}e.flushSync=t;function n(){(0,o.getDefaultEngine)().clear()}e.clear=n;function r(){return(0,o.getDefaultEngine)().getStyles()}e.getStyles=r;function i(){return(0,o.getDefaultEngine)().getStyleTag()}e.getStyleTag=i;function a(){return(0,o.getDefaultEngine)().styleElementId}e.styleElementId=a;function s(e){(0,o.getDefaultEngine)().configure(e)}e.configure=s})(_||={}),u(a.default);var v=a.default.createContext({theme:``,setTheme:()=>{}});function y(e){let{theme:t,use:n=`local`,storageKey:l,globalStyles:u,viewTransition:d,components:p}=e,m=p?(0,s.jsx)(f,{value:p,children:e.children}):e.children,h=g(n===`global`?u:void 0,`html`),[_,y]=(0,a.useState)(t??o.defaultThemeName),[b,x]=(0,a.useState)(t!==void 0),S=(0,a.useRef)(null),C=(0,a.useRef)(_),w=(0,a.useRef)(null),T=(0,a.useRef)(void 0),E=(0,a.useCallback)(e=>{let t=()=>{e===null?(l&&(0,o.clearStoredTheme)(l),x(!1)):(l&&(0,o.writeStoredTheme)(l,e),y(e),x(!0))};if(d){let e=(0,o.transitionTheme)(()=>(0,c.flushSync)(t),d===`reveal`?`reveal`:`fade`);T.current=e.finished,e.finished.then(()=>T.current=void 0,()=>T.current=void 0)}else t()},[l,d]),D=d===`reveal`;(0,a.useEffect)(()=>D?(0,o.prepareReveal)():void 0,[D]);let[O,k]=(0,a.useState)(t);return t!==O&&(k(t),t===void 0?x(!1):(y(t),x(!0))),(0,a.useLayoutEffect)(()=>{if(b)return;let e=l?(0,o.readStoredTheme)(l):null,t=e??(0,o.getSystemTheme)();if(t!==C.current&&(S.current=t),y(t),e){x(!0);return}return(0,o.watchSystemTheme)(y)},[b,l]),r.t(()=>{_!==C.current&&(w.current??=(0,o.pauseTransitions)())},[_]),(0,a.useLayoutEffect)(()=>{if(C.current=_,S.current!==null&&S.current!==_)return;S.current=null;let e=w.current;w.current=null;let t=n===`global`?(0,o.documentRoot)():null,r=t?(0,o.applyThemeToElement)(t,_):void 0;return e?.(T.current),r},[_,n]),n===`local`?(0,s.jsxs)(v.Provider,{value:{theme:_,setTheme:E},children:[h,(0,s.jsx)(i.default,{className:_,props:{"data-theme":_},children:m})]}):(0,s.jsxs)(v.Provider,{value:{theme:_,setTheme:E},children:[h,m]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(v);return[e,t]}e.useTheme=t})(y||={});var b=y,x=new WeakMap;function S(e){let t=x.get(e);return t||(t=new Map,x.set(e,t)),t}function C(e=!0){let[t]=b.useTheme(),r=(0,a.useMemo)(()=>{if(!e)return null;let t=n.t();if(!t)return null;let r=`box-kite-portal`,i=t.getElementById(r);return i||(i=document.createElement(`div`),i.id=r,document.body.appendChild(i)),i},[e]);return(0,a.useLayoutEffect)(()=>{if(!t||!r)return;let e=S(r),n=e.get(t)??0;return e.set(t,n+1),n===0&&r.classList.add(t),()=>{let n=(e.get(t)??1)-1;n<=0?(e.delete(t),r.classList.remove(t)):e.set(t,n)}},[r,t]),r}var w=0;function T(e){let{classNames:t,styleElements:i}=h({overflow:`hidden`},!1),a=t.slice(1).join(` `);return r.n(()=>{let t=n.n();if(!(!e||!t||!a))return w+=1,t.classList.add(a),()=>{--w,w===0&&t.classList.remove(a)}},[e,a]),i}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return T}});