@box-kite/react 2.1.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/rules/box-kite-rules.md +8 -2
- package/.claude/skills/box-kite/SKILL.md +11 -5
- package/.claude/skills/box-kite/references/components.md +2 -2
- package/.claude/skills/box-kite/references/patterns.md +1 -1
- package/.claude/skills/box-kite/references/styling.md +23 -0
- package/.cursor/rules/box-kite.mdc +9 -3
- package/AGENTS.md +9 -3
- package/BOX_AI_CONTEXT.md +250 -87
- package/BOX_KITE_AI_CONTEXT.md +250 -87
- package/README.md +3 -3
- package/box.cjs +1 -1
- package/box.d.ts +13 -2
- package/box.mjs +25 -18
- package/catalog.cjs +1 -1
- package/catalog.mjs +15 -1
- package/client.cjs +1 -1
- package/client.mjs +59 -51
- package/components/button.cjs +1 -1
- package/components/button.mjs +10 -14
- package/components/dataGrid/components/dataGridBottomBarSelection.d.ts +7 -0
- package/components/dataGrid/components/dataGridDetailRow.d.ts +3 -3
- package/components/dataGrid/components/dataGridGroupRow.d.ts +3 -3
- package/components/dataGrid/components/dataGridHeader.d.ts +6 -2
- package/components/dataGrid/components/dataGridRow.d.ts +3 -3
- package/components/dataGrid/contracts/dataGridContract.d.ts +13 -0
- package/components/dataGrid/gridNavigationContext.d.ts +7 -2
- package/components/dataGrid/models/editModel.d.ts +6 -4
- package/components/dataGrid/models/exportModel.d.ts +1 -1
- package/components/dataGrid/models/gridModel.d.ts +55 -2
- package/components/dataGrid/models/headerCellModel.d.ts +5 -0
- package/components/dataGrid/models/localeText.d.ts +102 -0
- package/components/dataGrid/models/rangeModel.d.ts +2 -0
- package/components/dataGrid/useFilterDraft.d.ts +9 -0
- package/components/dataGrid.cjs +3 -3
- package/components/dataGrid.d.ts +1 -0
- package/components/dataGrid.mjs +1394 -990
- package/components/flex.cjs +1 -1
- package/components/flex.mjs +10 -13
- package/components/form.cjs +1 -1
- package/components/form.mjs +7 -7
- package/components/grid.cjs +1 -1
- package/components/grid.mjs +10 -13
- package/components/menu.cjs +1 -1
- package/components/menu.mjs +16 -16
- package/components/overlay.cjs +1 -1
- package/components/overlay.mjs +35 -34
- package/components/popover.cjs +1 -1
- package/components/popover.mjs +4 -4
- package/components/semantics.cjs +1 -1
- package/components/semantics.d.ts +29 -29
- package/components/semantics.mjs +9 -13
- package/components/svg.cjs +1 -1
- package/components/svg.mjs +38 -44
- package/components/textarea.cjs +1 -1
- package/components/textarea.mjs +12 -16
- package/components/textbox.cjs +1 -1
- package/components/textbox.mjs +12 -16
- package/components/toaster.cjs +1 -1
- package/components/toaster.mjs +42 -43
- package/components/visuallyHidden.cjs +1 -1
- package/components/visuallyHidden.mjs +10 -13
- package/docs/components.md +1 -1
- package/docs/mcp.md +6 -5
- package/docs/props.md +132 -20
- package/layer.cjs +1 -1
- package/layer.mjs +61 -59
- package/mcp/src/data.d.ts +1 -1
- package/mcp/src/styles.d.ts +2 -2
- package/mcp/src/vocabulary.d.ts +1 -1
- package/package.json +81 -49
- package/react/boxComponent.d.ts +10 -0
- package/react/popover/useTopLayer.d.ts +17 -0
- package/react/theme/theme.d.ts +10 -0
- package/react/useStyles.d.ts +2 -0
- package/react-shared.cjs +1 -1
- package/react-shared.mjs +44 -37
- package/rsc.cjs +1 -1
- package/rsc.d.ts +11 -1
- package/rsc.mjs +15 -12
- package/ssg.cjs +1 -1
- package/ssg.d.ts +8 -2
- package/ssg.mjs +13 -9
- package/utils/dataGrid/activeCellStore.d.ts +14 -0
- package/utils/dataGrid/filterDraftUtils.d.ts +19 -0
- package/utils/dataGrid/headerCellUtils.d.ts +50 -0
- package/utils/environment/environmentUtils.d.ts +5 -0
package/components/flex.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs");let t=require("@box-kite/react");function n(e,n){let{inline:r,...i}=e;return(0,t.useBoxElement)({display:r?`inline-flex`:`flex`,...i},n)}var r=e.f(n,`Flex`);exports.default=r;
|
package/components/flex.mjs
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import n from "@box-kite/react";
|
|
1
|
+
import { f as e } from "../react-shared.mjs";
|
|
2
|
+
import { useBoxElement as t } from "@box-kite/react";
|
|
4
3
|
//#region src/components/flex.tsx
|
|
5
|
-
function
|
|
6
|
-
let { inline:
|
|
7
|
-
return
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
});
|
|
4
|
+
function n(e, n) {
|
|
5
|
+
let { inline: r, ...i } = e;
|
|
6
|
+
return t({
|
|
7
|
+
display: r ? "inline-flex" : "flex",
|
|
8
|
+
...i
|
|
9
|
+
}, n);
|
|
12
10
|
}
|
|
13
|
-
var
|
|
14
|
-
i.displayName = "Flex";
|
|
11
|
+
var r = e(n, "Flex");
|
|
15
12
|
//#endregion
|
|
16
|
-
export {
|
|
13
|
+
export { r as default };
|
package/components/form.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs");let t=require("react"),n=require("react/jsx-runtime");var r;(function(e){function t(e){let t=Array.from(e.elements).reduce((e,t)=>{let n=t.name;return n?(e[n]||(e[n]=[]),e[n].push(t),e):e},{});return Object.entries(t).reduce((e,[t,r])=>{if(r.length===1){let i=r[0];n(e,t,i.type===`checkbox`||i.type===`radio`?i.checked:i.value)}else n(e,t,r.reduce((e,t)=>(t.type===`checkbox`||t.type===`radio`?t.checked&&e.push(t.value):e.push(t.value),e),[]));return e},{})}e.getFormEntries=t;function n(e,t,n){if(t.includes(`.`)){let r=t.split(`.`),i=e;r.forEach((e,t)=>{if(r.length>t+1){let t=e.match(/^(.+)\[(\d)\]$/);if(t){let[,e,n]=t;i[e]=i[e]||[],i[e][n]=i[e][n]||{},i=i[e][n]}else i[e]=i[e]||{},i=i[e]}else i[e]=n})}else e[t]=n}})(r||={});var i=r;function a(r){let{onSubmit:a,props:o}=r,
|
|
1
|
+
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs");let t=require("react"),n=require("react/jsx-runtime");var r;(function(e){function t(e){let t=Array.from(e.elements).reduce((e,t)=>{let n=t.name;return n?(e[n]||(e[n]=[]),e[n].push(t),e):e},{});return Object.entries(t).reduce((e,[t,r])=>{if(r.length===1){let i=r[0];n(e,t,i.type===`checkbox`||i.type===`radio`?i.checked:i.value)}else n(e,t,r.reduce((e,t)=>(t.type===`checkbox`||t.type===`radio`?t.checked&&e.push(t.value):e.push(t.value),e),[]));return e},{})}e.getFormEntries=t;function n(e,t,n){if(t.includes(`.`)){let r=t.split(`.`),i=e;r.forEach((e,t)=>{if(r.length>t+1){let t=e.match(/^(.+)\[(\d)\]$/);if(t){let[,e,n]=t;i[e]=i[e]||[],i[e][n]=i[e][n]||{},i=i[e][n]}else i[e]=i[e]||{},i=i[e]}else i[e]=n})}else e[t]=n}})(r||={});var i=r;function a(r){let{onSubmit:a,props:o,...s}=r,c=(0,t.useRef)(null),l=(0,t.useCallback)(e=>{e.preventDefault();let t=i.getFormEntries(c.current);a(t,e)},[a]),u={...o,onSubmit:l,ref:c};return(0,n.jsx)(e.default,{tag:`form`,...s,props:u})}a.displayName=`Form`,exports.default=a;
|
package/components/form.mjs
CHANGED
|
@@ -38,19 +38,19 @@ var a = i;
|
|
|
38
38
|
//#endregion
|
|
39
39
|
//#region src/components/form.tsx
|
|
40
40
|
function o(i) {
|
|
41
|
-
let { onSubmit: o, props: s } = i,
|
|
41
|
+
let { onSubmit: o, props: s, ...c } = i, l = n(null), u = t((e) => {
|
|
42
42
|
e.preventDefault();
|
|
43
|
-
let t = a.getFormEntries(
|
|
43
|
+
let t = a.getFormEntries(l.current);
|
|
44
44
|
o(t, e);
|
|
45
|
-
}, [o]),
|
|
45
|
+
}, [o]), d = {
|
|
46
46
|
...s,
|
|
47
|
-
onSubmit:
|
|
48
|
-
ref:
|
|
47
|
+
onSubmit: u,
|
|
48
|
+
ref: l
|
|
49
49
|
};
|
|
50
50
|
return /* @__PURE__ */ r(e, {
|
|
51
51
|
tag: "form",
|
|
52
|
-
...
|
|
53
|
-
props:
|
|
52
|
+
...c,
|
|
53
|
+
props: d
|
|
54
54
|
});
|
|
55
55
|
}
|
|
56
56
|
o.displayName = "Form";
|
package/components/grid.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs");let t=require("@box-kite/react");function n(e,n){let{inline:r,...i}=e;return(0,t.useBoxElement)({display:r?`inline-grid`:`grid`,...i},n)}var r=e.f(n,`Grid`);exports.default=r;
|
package/components/grid.mjs
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import n from "@box-kite/react";
|
|
1
|
+
import { f as e } from "../react-shared.mjs";
|
|
2
|
+
import { useBoxElement as t } from "@box-kite/react";
|
|
4
3
|
//#region src/components/grid.tsx
|
|
5
|
-
function
|
|
6
|
-
let { inline:
|
|
7
|
-
return
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
});
|
|
4
|
+
function n(e, n) {
|
|
5
|
+
let { inline: r, ...i } = e;
|
|
6
|
+
return t({
|
|
7
|
+
display: r ? "inline-grid" : "grid",
|
|
8
|
+
...i
|
|
9
|
+
}, n);
|
|
12
10
|
}
|
|
13
|
-
var
|
|
14
|
-
i.displayName = "Grid";
|
|
11
|
+
var r = e(n, "Grid");
|
|
15
12
|
//#endregion
|
|
16
|
-
export {
|
|
13
|
+
export { r as default };
|
package/components/menu.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../effects.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../identity.cjs"),a=require("../keyboard.cjs"),o=require("../placement.cjs"),s=require("
|
|
1
|
+
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../effects.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../identity.cjs"),a=require("../keyboard.cjs"),o=require("../placement.cjs"),s=require("../layer.cjs"),c=require("./overlay.cjs");let l=require("react"),u=require("react/jsx-runtime");var d;(function(e){let t=e.ITEM_SELECTOR=`[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]`;function n(e,t){return t instanceof Element&&t.closest(`[role="menu"]`)===e}e.owns=n;function r(e){return[...e.querySelectorAll(t)].filter(t=>n(e,t))}e.items=r;function i(e){return e.getAttribute(`aria-disabled`)===`true`}e.isDisabled=i;function o(e){return e.getAttribute(`aria-haspopup`)===`menu`}e.isSubTrigger=o;function s(e,t,n){if(e.length!==0)return e[t<0?n>0?0:e.length-1:((t+n)%e.length+e.length)%e.length]}e.step=s;function c(e,t,n){let r=a.t.target(t,n,e.length,t=>e[t].textContent??``);return r<0?void 0:e[r]}e.typeaheadTarget=c})(d||={});var f=d,p=(0,l.createContext)(null);function m(e){let t=(0,l.useContext)(p);if(!t)throw Error(`<${e}> must be rendered inside a <Menu>.`);return t}function h(e){let[t,n]=(0,l.useState)([]);return{panels:t,registerLayer:(0,l.useCallback)(t=>{n(e=>[...e,t]);let r=e?.(t);return()=>{n(e=>e.filter(e=>e!==t)),r?.()}},[e])}}var g=(0,l.createContext)(null);function _(e){let{trigger:t,children:n,open:i,defaultOpen:a=!1,onOpenChange:o,label:c,labelledBy:d,side:m=`bottom`,align:g=`start`,offset:_=1,flip:y=!0,matchWidth:b=!1,props:x,...S}=e,C=(0,l.useRef)(`first`),w=r.a(e=>{let t=f.items(e),n=C.current===`last`?t[t.length-1]:t[0];C.current=`first`,(n??e).focus()}),{panels:T,registerLayer:E}=h(),D=s.t({haspopup:`menu`,idPrefix:`menu`,id:S.id,open:i,defaultOpen:a,onOpenChange:o,onOpened:w,inside:T}),O=r.a(e=>{(e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),C.current=e.key===`ArrowUp`?`last`:`first`,D.isOpen&&D.panelElement?w(D.panelElement):D.setOpen(!0,{reason:`trigger`,event:e}))}),k=(0,l.useMemo)(()=>({ref:D.trigger.ref,props:{...D.trigger.props,onKeyDown:O}}),[O,D.trigger]),A=r.a(e=>D.setOpen(!1,e)),j=(0,l.useMemo)(()=>({open:D.isOpen,closeAll:A,registerLayer:E}),[A,D.isOpen,E]);return(0,u.jsxs)(u.Fragment,{children:[t(k),(0,u.jsx)(p.Provider,{value:j,children:(0,u.jsx)(v,{layer:D,side:m,align:g,offset:_,flip:y,matchWidth:b,label:c,labelledBy:d??(c?void 0:D.triggerId),contentProps:x,...S,children:n})})]})}function v(t){let{layer:i,side:s,align:d,offset:p,flip:h,matchWidth:g,label:_,labelledBy:v,contentProps:y,closeSelf:b,children:x,...S}=t,{platform:C,isOpen:w,id:T,triggerElement:E,setPanel:D}=i,O=m(`Menu`),k=(0,l.useRef)({query:``,at:0}),A=o.t({side:s,align:d,offset:p,flip:h,matchWidth:g,anchor:E}),j={role:`menu`,"aria-label":_,"aria-labelledby":v,tabIndex:-1,onKeyDown:r.a(t=>{let n=t.currentTarget;if(!f.owns(n,t.target))return;let r=f.items(n),i=r.indexOf(document.activeElement),o=e=>{e&&(t.preventDefault(),e.focus())},s=e.u(n)?`ArrowRight`:`ArrowLeft`;switch(t.key){case`ArrowDown`:return o(f.step(r,i,1));case`ArrowUp`:return o(f.step(r,i,-1));case`Home`:return o(r[0]);case`End`:return o(r[r.length-1]);case`Tab`:return O.closeAll({reason:`tab`,event:t});case s:return b?(t.preventDefault(),b({reason:`trigger`,event:t})):void 0}if(a.t.isPrintable(t)){let e=a.t.push(k.current,t.key,t.timeStamp);o(f.typeaheadTarget(r,e,i))}}),onPointerOver:r.a(e=>{let t=e.currentTarget,n=e.target?.closest(f.ITEM_SELECTOR);!n||!f.owns(t,n)||n===document.activeElement||n.focus()}),...y};return C?(0,u.jsx)(n.default,{ref:D,component:`menu`,...S,variant:[S.variant,{topLayer:!0}],...A.layerProps,id:T,props:{popover:`auto`,...j},children:x}):w?(0,u.jsx)(c.default,{contentRef:D,anchor:E,side:s,align:d,offset:p,flip:h,matchWidth:g,component:`menu`,...S,id:T,props:j,children:x}):null}function y(a){let{label:o,children:c,disabled:d,side:g=`end`,align:_=`start`,offset:y=0,flip:b=!0,itemProps:x,props:S,...C}=a,w=m(`Menu.Sub`),T=i.t(`menu-sub`),E=r.a(e=>{(f.items(e)[0]??e).focus()}),D=r.a((e,t)=>{e&&t?.focus()}),{panels:O,registerLayer:k}=h(w.registerLayer),A=s.t({haspopup:`menu`,idPrefix:`menu-sub`,id:C.id,onOpened:E,onClosing:D,inside:O});t.n(()=>{if(!(!A.isOpen||!A.panelElement))return w.registerLayer(A.panelElement)},[A.isOpen,A.panelElement,w.registerLayer]),t.n(()=>{w.open||A.setOpen(!1,{reason:`imperative`})},[w.open,A.setOpen]),t.n(()=>{if(!A.isOpen)return;let t=new AbortController;return document.addEventListener(`focusin`,t=>{e.l(t,[A.panelElement,A.triggerElement])||A.setOpen(!1,{reason:`imperative`,event:t})},{signal:t.signal}),()=>t.abort()},[A.isOpen,A.panelElement,A.triggerElement,A.setOpen]);let j=r.a(t=>{let n=e.u(t.currentTarget)?`ArrowLeft`:`ArrowRight`;d||t.key!==n||(t.preventDefault(),A.setOpen(!0,{reason:`trigger`,event:t}))}),M=r.a(e=>{d||A.setOpen(!0,{reason:`trigger`,event:e})}),N=(0,l.useMemo)(()=>({open:A.isOpen,closeAll:w.closeAll,registerLayer:k}),[A.isOpen,w.closeAll,k]);return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(n.default,{tag:`button`,ref:d?void 0:A.trigger.ref,component:`menu.item`,variant:{sub:!0},id:T,props:{type:`button`,role:`menuitem`,tabIndex:-1,"aria-disabled":d||void 0,...A.trigger.props,...x,onKeyDown:j,onPointerEnter:M},children:[o,(0,u.jsx)(n.default,{component:`menu.arrow`})]}),!d&&(0,u.jsx)(p.Provider,{value:N,children:(0,u.jsx)(v,{layer:A,side:g,align:_,offset:y,flip:b,matchWidth:!1,labelledBy:T,contentProps:S,closeSelf:e=>A.setOpen(!1,e),...C,children:c})})]})}function b(e){let{onSelect:t,disabled:i,closeOnSelect:a=!0,props:o,children:s,...c}=e,l=m(`Menu.Item`),d=r.a(e=>{i||(t?.(e),a&&l.closeAll({reason:`select`,event:e}))});return(0,u.jsx)(n.default,{tag:`button`,component:`menu.item`,...c,props:{type:`button`,role:`menuitem`,tabIndex:-1,"aria-disabled":i||void 0,...o,onClick:d},children:s})}function x(e){let{checked:t,defaultChecked:i=!1,onCheckedChange:a,disabled:o,closeOnSelect:s=!1,props:c,children:l,...d}=e,f=m(`Menu.CheckboxItem`),[p,h]=r.i({value:t,defaultValue:i,onChange:a}),g=r.a(e=>{o||(h(!p,{reason:`select`,event:e}),s&&f.closeAll({reason:`select`,event:e}))});return(0,u.jsxs)(n.default,{tag:`button`,component:`menu.item`,...d,props:{type:`button`,role:`menuitemcheckbox`,tabIndex:-1,"aria-checked":p,"aria-disabled":o||void 0,...c,onClick:g},children:[(0,u.jsx)(n.default,{component:`menu.indicator`,children:p&&(0,u.jsx)(n.default,{component:`menu.check`})}),l]})}function S(e){let{label:t,value:n,defaultValue:i=``,onValueChange:a,children:o,...s}=e,[c,d]=r.i({value:n,defaultValue:i,onChange:a}),f=r.a((e,t)=>d(e,{reason:`select`,event:t})),p=(0,l.useMemo)(()=>({value:c,select:f}),[c,f]);return(0,u.jsx)(g.Provider,{value:p,children:(0,u.jsx)(w,{label:t,...s,children:o})})}function C(e){let{value:t,disabled:i,closeOnSelect:a=!1,props:o,children:s,...c}=e,d=m(`Menu.RadioItem`),f=(0,l.useContext)(g);if(!f)throw Error(`<Menu.RadioItem> must be rendered inside a <Menu.RadioGroup>.`);let p=f.value===t,h=r.a(e=>{i||(f.select(t,e),a&&d.closeAll({reason:`select`,event:e}))});return(0,u.jsxs)(n.default,{tag:`button`,component:`menu.item`,...c,props:{type:`button`,role:`menuitemradio`,tabIndex:-1,"aria-checked":p,"aria-disabled":i||void 0,...o,onClick:h},children:[(0,u.jsx)(n.default,{component:`menu.indicator`,children:p&&(0,u.jsx)(n.default,{component:`menu.dot`})}),s]})}function w(e){let{label:t,props:r,children:a,...o}=e,s=i.t(`menu-group`);return(0,u.jsxs)(n.default,{component:`menu.group`,...o,props:{role:`group`,"aria-labelledby":t?s:void 0,...r},children:[t&&(0,u.jsx)(n.default,{component:`menu.label`,id:s,props:{role:`presentation`},children:t}),a]})}function T(e){let{props:t,...r}=e;return(0,u.jsx)(n.default,{component:`menu.separator`,...r,props:{role:`separator`,...t}})}b.displayName=`Menu.Item`,x.displayName=`Menu.CheckboxItem`,S.displayName=`Menu.RadioGroup`,C.displayName=`Menu.RadioItem`,w.displayName=`Menu.Group`,T.displayName=`Menu.Separator`,y.displayName=`Menu.Sub`;var E=Object.assign(_,{Item:b,CheckboxItem:x,RadioGroup:S,RadioItem:C,Group:w,Separator:T,Sub:y});_.displayName=`Menu`,exports.default=E;
|
package/components/menu.mjs
CHANGED
|
@@ -6,8 +6,8 @@ import { a as i, i as a } from "../behavior.mjs";
|
|
|
6
6
|
import { t as o } from "../identity.mjs";
|
|
7
7
|
import { t as s } from "../keyboard.mjs";
|
|
8
8
|
import { t as c } from "../placement.mjs";
|
|
9
|
-
import l from "
|
|
10
|
-
import
|
|
9
|
+
import { t as l } from "../layer.mjs";
|
|
10
|
+
import u from "./overlay.mjs";
|
|
11
11
|
import { createContext as d, useCallback as f, useContext as p, useMemo as m, useRef as h, useState as g } from "react";
|
|
12
12
|
import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
|
|
13
13
|
//#region src/utils/menu/menuUtils.ts
|
|
@@ -61,10 +61,10 @@ function w(e) {
|
|
|
61
61
|
}
|
|
62
62
|
var T = d(null);
|
|
63
63
|
function E(e) {
|
|
64
|
-
let { trigger: t, children: n, open: r, defaultOpen: a = !1, onOpenChange: o, label: s, labelledBy: c, side:
|
|
64
|
+
let { trigger: t, children: n, open: r, defaultOpen: a = !1, onOpenChange: o, label: s, labelledBy: c, side: u = "bottom", align: d = "start", offset: f = 1, flip: p = !0, matchWidth: g = !1, props: b, ...C } = e, T = h("first"), E = i((e) => {
|
|
65
65
|
let t = x.items(e), n = T.current === "last" ? t[t.length - 1] : t[0];
|
|
66
66
|
T.current = "first", (n ?? e).focus();
|
|
67
|
-
}), { panels: O, registerLayer: k } = w(), A =
|
|
67
|
+
}), { panels: O, registerLayer: k } = w(), A = l({
|
|
68
68
|
haspopup: "menu",
|
|
69
69
|
idPrefix: "menu",
|
|
70
70
|
id: C.id,
|
|
@@ -97,7 +97,7 @@ function E(e) {
|
|
|
97
97
|
value: P,
|
|
98
98
|
children: /* @__PURE__ */ v(D, {
|
|
99
99
|
layer: A,
|
|
100
|
-
side:
|
|
100
|
+
side: u,
|
|
101
101
|
align: d,
|
|
102
102
|
offset: f,
|
|
103
103
|
flip: p,
|
|
@@ -111,13 +111,13 @@ function E(e) {
|
|
|
111
111
|
})] });
|
|
112
112
|
}
|
|
113
113
|
function D(e) {
|
|
114
|
-
let { layer: n, side: a, align: o, offset:
|
|
114
|
+
let { layer: n, side: a, align: o, offset: l, flip: d, matchWidth: f, label: p, labelledBy: m, contentProps: g, closeSelf: _, children: y, ...b } = e, { platform: S, isOpen: w, id: T, triggerElement: E, setPanel: D } = n, O = C("Menu"), k = h({
|
|
115
115
|
query: "",
|
|
116
116
|
at: 0
|
|
117
117
|
}), A = c({
|
|
118
118
|
side: a,
|
|
119
119
|
align: o,
|
|
120
|
-
offset:
|
|
120
|
+
offset: l,
|
|
121
121
|
flip: d,
|
|
122
122
|
matchWidth: f,
|
|
123
123
|
anchor: E
|
|
@@ -169,12 +169,12 @@ function D(e) {
|
|
|
169
169
|
...j
|
|
170
170
|
},
|
|
171
171
|
children: y
|
|
172
|
-
}) : w ? /* @__PURE__ */ v(
|
|
172
|
+
}) : w ? /* @__PURE__ */ v(u, {
|
|
173
173
|
contentRef: D,
|
|
174
174
|
anchor: E,
|
|
175
175
|
side: a,
|
|
176
176
|
align: o,
|
|
177
|
-
offset:
|
|
177
|
+
offset: l,
|
|
178
178
|
flip: d,
|
|
179
179
|
matchWidth: f,
|
|
180
180
|
component: "menu",
|
|
@@ -185,11 +185,11 @@ function D(e) {
|
|
|
185
185
|
}) : null;
|
|
186
186
|
}
|
|
187
187
|
function O(a) {
|
|
188
|
-
let { label: s, children: c, disabled:
|
|
188
|
+
let { label: s, children: c, disabled: u, side: d = "end", align: f = "start", offset: p = 0, flip: h = !0, itemProps: g, props: b, ...T } = a, E = C("Menu.Sub"), O = o("menu-sub"), k = i((e) => {
|
|
189
189
|
(x.items(e)[0] ?? e).focus();
|
|
190
190
|
}), A = i((e, t) => {
|
|
191
191
|
e && t?.focus();
|
|
192
|
-
}), { panels: j, registerLayer: M } = w(E.registerLayer), N =
|
|
192
|
+
}), { panels: j, registerLayer: M } = w(E.registerLayer), N = l({
|
|
193
193
|
haspopup: "menu",
|
|
194
194
|
idPrefix: "menu-sub",
|
|
195
195
|
id: T.id,
|
|
@@ -222,12 +222,12 @@ function O(a) {
|
|
|
222
222
|
]);
|
|
223
223
|
let P = i((e) => {
|
|
224
224
|
let n = t(e.currentTarget) ? "ArrowLeft" : "ArrowRight";
|
|
225
|
-
|
|
225
|
+
u || e.key !== n || (e.preventDefault(), N.setOpen(!0, {
|
|
226
226
|
reason: "trigger",
|
|
227
227
|
event: e
|
|
228
228
|
}));
|
|
229
229
|
}), F = i((e) => {
|
|
230
|
-
|
|
230
|
+
u || N.setOpen(!0, {
|
|
231
231
|
reason: "trigger",
|
|
232
232
|
event: e
|
|
233
233
|
});
|
|
@@ -242,7 +242,7 @@ function O(a) {
|
|
|
242
242
|
]);
|
|
243
243
|
return /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ y(r, {
|
|
244
244
|
tag: "button",
|
|
245
|
-
ref:
|
|
245
|
+
ref: u ? void 0 : N.trigger.ref,
|
|
246
246
|
component: "menu.item",
|
|
247
247
|
variant: { sub: !0 },
|
|
248
248
|
id: O,
|
|
@@ -250,14 +250,14 @@ function O(a) {
|
|
|
250
250
|
type: "button",
|
|
251
251
|
role: "menuitem",
|
|
252
252
|
tabIndex: -1,
|
|
253
|
-
"aria-disabled":
|
|
253
|
+
"aria-disabled": u || void 0,
|
|
254
254
|
...N.trigger.props,
|
|
255
255
|
...g,
|
|
256
256
|
onKeyDown: P,
|
|
257
257
|
onPointerEnter: F
|
|
258
258
|
},
|
|
259
259
|
children: [s, /* @__PURE__ */ v(r, { component: "menu.arrow" })]
|
|
260
|
-
}), !
|
|
260
|
+
}), !u && /* @__PURE__ */ v(S.Provider, {
|
|
261
261
|
value: I,
|
|
262
262
|
children: /* @__PURE__ */ v(D, {
|
|
263
263
|
layer: N,
|
package/components/overlay.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../client.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../placement.cjs");let
|
|
1
|
+
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../client.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../placement.cjs"),a=require("../layer.cjs");let o=require("react"),s=require("react-dom"),c=require("react/jsx-runtime");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=t.t(!T),O=i.t({side:d,align:f,offset:p,flip:m,matchWidth:v,anchor:g??b,trackSide:!!h});n.n(()=>{let t=E.current;!T||!e.a()||!t||!t.isConnected||t.matches(`:popover-open`)||t.showPopover()}),n.n(()=>{if(T)return;let t=e.c(g)??b;C(!!t&&e.u(t))},[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,c.jsx)(r.default,{...O.layerProps,ref:A,transition:`none`,props:T?{popover:`manual`}:{dir:S?`rtl`:`ltr`},children:(0,c.jsx)(r.default,{ref:_,...y})});return(0,c.jsxs)(c.Fragment,{children:[!g&&(0,c.jsx)(r.default,{ref:x}),T?j:D&&(0,s.createPortal)(j,D)]})}var u=(0,o.forwardRef)(l);u.displayName=`Overlay`,exports.default=u;
|
package/components/overlay.mjs
CHANGED
|
@@ -4,49 +4,50 @@ import { t as r } from "../client.mjs";
|
|
|
4
4
|
import { n as i } from "../effects.mjs";
|
|
5
5
|
import a from "../box.mjs";
|
|
6
6
|
import { t as o } from "../placement.mjs";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import { createPortal as
|
|
7
|
+
import { n as s } from "../layer.mjs";
|
|
8
|
+
import { forwardRef as c, useCallback as l, useRef as u, useState as d } from "react";
|
|
9
|
+
import { createPortal as f } from "react-dom";
|
|
10
|
+
import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
|
|
10
11
|
//#region src/components/overlay.tsx
|
|
11
|
-
function
|
|
12
|
-
let { side:
|
|
13
|
-
side:
|
|
14
|
-
align:
|
|
15
|
-
offset:
|
|
16
|
-
flip:
|
|
17
|
-
matchWidth:
|
|
18
|
-
anchor:
|
|
19
|
-
trackSide: !!
|
|
12
|
+
function g(c, g) {
|
|
13
|
+
let { side: _ = "bottom", align: v = "center", offset: y = 0, flip: b = !0, onSideChange: x, anchor: S, contentRef: C, matchWidth: w = !0, ...T } = c, [E, D] = d(null), [O, k] = d(!1), A = u(null), j = s(), M = u(null), N = r(!j), P = o({
|
|
14
|
+
side: _,
|
|
15
|
+
align: v,
|
|
16
|
+
offset: y,
|
|
17
|
+
flip: b,
|
|
18
|
+
matchWidth: w,
|
|
19
|
+
anchor: S ?? E,
|
|
20
|
+
trackSide: !!x
|
|
20
21
|
});
|
|
21
22
|
i(() => {
|
|
22
|
-
let
|
|
23
|
-
!
|
|
23
|
+
let t = M.current;
|
|
24
|
+
!j || !e() || !t || !t.isConnected || t.matches(":popover-open") || t.showPopover();
|
|
24
25
|
}), i(() => {
|
|
25
|
-
if (
|
|
26
|
-
let e = t(
|
|
27
|
-
|
|
26
|
+
if (j) return;
|
|
27
|
+
let e = t(S) ?? E;
|
|
28
|
+
k(!!e && n(e));
|
|
28
29
|
}, [
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
S,
|
|
31
|
+
E,
|
|
32
|
+
j
|
|
32
33
|
]), i(() => {
|
|
33
|
-
|
|
34
|
+
A.current !== P.side && (A.current = P.side, x?.(P.side));
|
|
34
35
|
});
|
|
35
|
-
let
|
|
36
|
-
|
|
37
|
-
}, [
|
|
38
|
-
...
|
|
39
|
-
ref:
|
|
36
|
+
let F = P.layerProps.ref, I = l((e) => {
|
|
37
|
+
F?.(e), M.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
|
|
38
|
+
}, [F, g]), L = /* @__PURE__ */ m(a, {
|
|
39
|
+
...P.layerProps,
|
|
40
|
+
ref: I,
|
|
40
41
|
transition: "none",
|
|
41
|
-
props:
|
|
42
|
-
children: /* @__PURE__ */
|
|
43
|
-
ref:
|
|
44
|
-
...
|
|
42
|
+
props: j ? { popover: "manual" } : { dir: O ? "rtl" : "ltr" },
|
|
43
|
+
children: /* @__PURE__ */ m(a, {
|
|
44
|
+
ref: C,
|
|
45
|
+
...T
|
|
45
46
|
})
|
|
46
47
|
});
|
|
47
|
-
return /* @__PURE__ */ p
|
|
48
|
+
return /* @__PURE__ */ h(p, { children: [!S && /* @__PURE__ */ m(a, { ref: D }), j ? L : N && f(L, N)] });
|
|
48
49
|
}
|
|
49
|
-
var
|
|
50
|
-
|
|
50
|
+
var _ = c(g);
|
|
51
|
+
_.displayName = "Overlay";
|
|
51
52
|
//#endregion
|
|
52
|
-
export {
|
|
53
|
+
export { _ as default };
|
package/components/popover.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../placement.cjs"),r=require("
|
|
1
|
+
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../placement.cjs"),r=require("../layer.cjs"),i=require("./overlay.cjs");let a=require("react/jsx-runtime");function o(o){let{trigger:s,children:c,open:l,defaultOpen:u=!1,onOpenChange:d,label:f,labelledBy:p,side:m=`bottom`,align:h=`center`,offset:g=2,flip:_=!0,matchWidth:v=!1,autoFocus:y=!0,props:b,...x}=o,S=t.a(e=>{!y||e.contains(document.activeElement)||e.focus()}),{platform:C,isOpen:w,id:T,trigger:E,triggerElement:D,setPanel:O}=r.t({haspopup:`dialog`,idPrefix:`popover`,id:x.id,open:l,defaultOpen:u,onOpenChange:d,onOpened:S}),k=n.t({side:m,align:h,offset:g,flip:_,matchWidth:v,anchor:D}),A={"aria-label":f,"aria-labelledby":p},j=x;return C?(0,a.jsxs)(a.Fragment,{children:[s(E),(0,a.jsx)(e.default,{ref:O,component:`popover`,...j,variant:[j.variant,{topLayer:!0}],...k.layerProps,id:T,props:{popover:`auto`,role:`dialog`,...A,tabIndex:-1,...b},children:c})]}):(0,a.jsxs)(a.Fragment,{children:[s(E),w&&(0,a.jsx)(i.default,{contentRef:O,anchor:D,side:m,align:h,offset:g,flip:_,matchWidth:v,component:`popover`,...j,id:T,props:{role:`dialog`,...A,tabIndex:-1,...b},children:c})]})}var s=o;s.displayName=`Popover`,exports.default=s;
|
package/components/popover.mjs
CHANGED
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
import e from "../box.mjs";
|
|
3
3
|
import { a as t } from "../behavior.mjs";
|
|
4
4
|
import { t as n } from "../placement.mjs";
|
|
5
|
-
import r from "
|
|
6
|
-
import
|
|
5
|
+
import { t as r } from "../layer.mjs";
|
|
6
|
+
import i from "./overlay.mjs";
|
|
7
7
|
import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
8
8
|
//#region src/components/popover.tsx
|
|
9
9
|
function c(c) {
|
|
10
10
|
let { trigger: l, children: u, open: d, defaultOpen: f = !1, onOpenChange: p, label: m, labelledBy: h, side: g = "bottom", align: _ = "center", offset: v = 2, flip: y = !0, matchWidth: b = !1, autoFocus: x = !0, props: S, ...C } = c, w = t((e) => {
|
|
11
11
|
!x || e.contains(document.activeElement) || e.focus();
|
|
12
|
-
}), { platform: T, isOpen: E, id: D, trigger: O, triggerElement: k, setPanel: A } =
|
|
12
|
+
}), { platform: T, isOpen: E, id: D, trigger: O, triggerElement: k, setPanel: A } = r({
|
|
13
13
|
haspopup: "dialog",
|
|
14
14
|
idPrefix: "popover",
|
|
15
15
|
id: C.id,
|
|
@@ -43,7 +43,7 @@ function c(c) {
|
|
|
43
43
|
...S
|
|
44
44
|
},
|
|
45
45
|
children: u
|
|
46
|
-
})] }) : /* @__PURE__ */ s(a, { children: [l(O), E && /* @__PURE__ */ o(
|
|
46
|
+
})] }) : /* @__PURE__ */ s(a, { children: [l(O), E && /* @__PURE__ */ o(i, {
|
|
47
47
|
contentRef: A,
|
|
48
48
|
anchor: k,
|
|
49
49
|
side: g,
|
package/components/semantics.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../react-shared.cjs");let t=require("@box-kite/react");function n(n){return e.f((e,r)=>(0,t.useBoxElement)({tag:n,component:n,...e},r),e.a.capitalize(n))}var r=n(`label`),i=n(`span`),a=n(`article`),o=n(`aside`),s=n(`details`),c=n(`figcaption`),l=n(`figure`),u=n(`footer`),d=n(`header`),f=n(`main`),p=n(`mark`),m=n(`nav`),h=n(`menu`),g=h,_=n(`section`),v=n(`summary`),y=n(`time`),b=n(`p`),x=n(`ul`),S=n(`ol`),C=n(`li`),w=n(`h1`),T=n(`h2`),E=n(`h3`),D=n(`h4`),O=n(`h5`),k=n(`h6`),A=n(`a`),j=n(`img`);exports.Article=a,exports.Aside=o,exports.Details=s,exports.Figcaption=c,exports.Figure=l,exports.Footer=u,exports.H1=w,exports.H2=T,exports.H3=E,exports.H4=D,exports.H5=O,exports.H6=k,exports.Header=d,exports.Img=j,exports.Label=r,exports.Li=C,exports.Link=A,exports.Main=f,exports.Mark=p,exports.Menu=g,exports.MenuList=h,exports.Nav=m,exports.Ol=S,exports.P=b,exports.Section=_,exports.Span=i,exports.Summary=v,exports.Time=y,exports.Ul=x;
|