@enonic/ui 1.0.0-rc.1 → 1.0.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/dist/enonic-ui.es.js
CHANGED
|
@@ -180,13 +180,13 @@ return N(ll.Provider,{value:I,children:/* @__PURE__ */N("div",{"data-component":
|
|
|
180
180
|
return N(n?y:Pn,{"data-component":"Toolbar.ToggleItem",ref:M,id:D,..."single"===m?{"aria-pressed":R}:{"aria-checked":R},"data-state":R?"on":"off","data-active":R||void 0,disabled:A,tabIndex:z,onClick:T,onFocus:O,className:o,...i})});ml.displayName="Toolbar.ToggleItem";const fl=Object.assign(ul,{Root:ul,Item:ml}),pl=n(void 0);function gl(){const e=r(pl);if(!e)throw new Error("Toolbar components must be used within Toolbar.Root");return e}function bl(){return r(pl)}const vl=({defaultActive:e,onActiveChange:t,id:n,orientation:r="horizontal",loop:o=!0,children:i})=>{const c=se(n,"toolbar"),d=u(null),[m,f]=s(e),p=a(e=>{f(e),t?.(e)},[t]),{registerItem:g,unregisterItem:b,getItems:v,isItemDisabled:h}=pr(),y=l(()=>({toolbarId:c,toolbarRef:d,active:m,setActive:p,registerItem:g,unregisterItem:b,getItems:v,isItemDisabled:h,orientation:r,loop:o}),[c,m,p,g,b,v,h,r,o]);/* @__PURE__ */
|
|
181
181
|
return N(pl.Provider,{value:y,children:i})};vl.displayName="Toolbar";const hl=i(({"aria-label":e,className:t,children:n,onKeyDown:r,onBlur:o,...i},s)=>{const{active:l,setActive:c,getItems:d,isItemDisabled:u,toolbarId:m,toolbarRef:f,orientation:p,loop:g}=gl(),b=xn(s,f),{handleKeyDown:v}=br({getItems:d,isItemDisabled:u,active:l,setActive:c,loop:g,orientation:p,onSelect:e=>{const t=document.getElementById(e);if(t)if(t instanceof HTMLButtonElement)t.click();else{const e=new MouseEvent("click",{bubbles:!0,cancelable:!0,view:window});t.dispatchEvent(e)}}}),h=a(e=>{r?.(e),v(e)},[r,v]),y=a(e=>{o?.(e);const t=e.relatedTarget;f.current&&t instanceof Node&&f.current.contains(t)||c(void 0)},[o,c,f]);return kr({containerRef:f,activeId:l,orientation:p}),/* @__PURE__ */N("div",{"data-component":"Toolbar.Container",ref:b,id:m,role:"toolbar","aria-label":e,"aria-orientation":p,tabIndex:-1,className:bn("flex items-center gap-1.5 p-2 transition-highlight","outline-none has-focus-visible:ring-2 has-focus-visible:ring-ring/10 has-focus-visible:ring-inset","vertical"===p&&"flex-col",t),onKeyDown:h,onBlur:y,...i,children:n})});hl.displayName="Toolbar.Container";const yl=i(({id:e,disabled:t=!1,asChild:n,children:r,onPointerMove:o,onPointerDown:i,onFocus:s,...l},d)=>{const m=se(e,"toolbar-item"),{active:f,setActive:p,registerItem:g,unregisterItem:b,getItems:v,isItemDisabled:h}=gl(),w=f===m,x=u(null),I=xn(d,x);c(()=>(g(m,t,x.current),()=>b(m)),[m,t,g,b]);const k=a(e=>{i?.(e),t||p(m)},[t,m,i,p]),C=a(e=>{o?.(e)},[o]),D=a(e=>{s?.(e),t||p(m)},[s,t,p,m]),{tabIndex:S}=Nr({id:m,active:f,disabled:t,getItems:v,isItemDisabled:h});rr({ref:x,isActive:w,disabled:t});/* @__PURE__ */
|
|
182
182
|
return N(n?y:"div",{"data-component":"Toolbar.Item",ref:I,id:m,tabIndex:S,disabled:t,"aria-disabled":t,"data-disabled":t||void 0,onPointerDown:k,onPointerMove:C,onFocus:D,...l,children:r})});yl.displayName="Toolbar.Item";const wl=i(({className:e,...t},n)=>{const{orientation:r}=gl();/* @__PURE__ */
|
|
183
|
-
return N("div","vertical"===r?{"data-component":"Toolbar.Separator",ref:n,role:"separator","aria-orientation":"horizontal",className:bn("my-1 h-px w-full bg-bdr-subtle",e),...t}:{"data-component":"Toolbar.Separator",ref:n,role:"separator","aria-orientation":"vertical",className:bn("mx-1 h-4 w-px bg-bdr-subtle",e),...t})});wl.displayName="Toolbar.Separator";const xl=Object.assign(vl,{Root:vl,Container:hl,Item:yl,Separator:wl,ToggleGroup:fl,ToggleItem:ml}),Il={top:"bottom",bottom:"top",left:"right",right:"left"};function Nl({children:e,asChild:t,triggerRef:n,
|
|
184
|
-
return N(t?w:"div",{"data-component":"Tooltip",ref:n,onMouseEnter:o,onMouseLeave:a,onFocus:i,onBlur:s,"aria-describedby":r
|
|
185
|
-
return N("div",{"data-component":"Tooltip.Content",ref:
|
|
186
|
-
/* @__PURE__ */N("div",{className:bn("absolute size-2 rotate-45 bg-inherit","top"===
|
|
183
|
+
return N("div","vertical"===r?{"data-component":"Toolbar.Separator",ref:n,role:"separator","aria-orientation":"horizontal",className:bn("my-1 h-px w-full bg-bdr-subtle",e),...t}:{"data-component":"Toolbar.Separator",ref:n,role:"separator","aria-orientation":"vertical",className:bn("mx-1 h-4 w-px bg-bdr-subtle",e),...t})});wl.displayName="Toolbar.Separator";const xl=Object.assign(vl,{Root:vl,Container:hl,Item:yl,Separator:wl,ToggleGroup:fl,ToggleItem:ml}),Il={top:"bottom",bottom:"top",left:"right",right:"left"};function Nl({children:e,asChild:t,triggerRef:n,describedById:r,onMouseEnter:o,onMouseLeave:a,onFocus:i,onBlur:s}){/* @__PURE__ */
|
|
184
|
+
return N(t?w:"div",{"data-component":"Tooltip",ref:n,onMouseEnter:o,onMouseLeave:a,onFocus:i,onBlur:s,"aria-describedby":r,...!t&&{className:"inline-flex",role:"button",tabIndex:0},children:e})}function kl({children:e,id:t,actualSide:n,className:r,position:o,tooltipRef:a}){/* @__PURE__ */
|
|
185
|
+
return N("div",{"data-component":"Tooltip.Content",id:t,ref:a,role:null==t?void 0:"tooltip","aria-hidden":null==t?"true":void 0,className:bn("pointer-events-none fixed z-50 select-none",!o.transformOrigin&&"opacity-0"),style:{top:`${o.top}px`,left:`${o.left}px`,transformOrigin:o.transformOrigin},children:/* @__PURE__ */N("div",{className:bn("relative w-fit rounded-xs px-2 py-1 text-xs","bg-tooltip text-tooltip-foreground shadow-md","whitespace-nowrap","fade-in-0 zoom-in-95 animate-in","top"===n&&"slide-in-from-top-2","bottom"===n&&"slide-in-from-bottom-2","left"===n&&"slide-in-from-left-2","right"===n&&"slide-in-from-right-2",r),children:[e,
|
|
186
|
+
/* @__PURE__ */N("div",{className:bn("absolute size-2 rotate-45 bg-inherit","top"===n&&"-translate-x-1/2 bottom-0 left-1/2 translate-y-1/2","bottom"===n&&"-translate-x-1/2 -translate-y-1/2 top-0 left-1/2","left"===n&&"-translate-y-1/2 top-1/2 right-0 translate-x-1/2","right"===n&&"-translate-y-1/2 -translate-x-1/2 top-1/2 left-0")})]})})}function Cl({className:e,children:n,value:r,side:i="bottom",asChild:l=!0,delay:d=0,trigger:f="hover-focus"}){const p=o(),[g,b]=s(!1),h=u(null),y=u(null),w=u(),x=null==r||""===r,I=g&&!x,k=function(e,t,n,r){const[o,a]=s({top:0,left:0,transformOrigin:"",actualSide:t});return m(()=>{if(!e||!n.current||!r.current)return;const o=n.current.getBoundingClientRect(),i=r.current.getBoundingClientRect(),s=e=>{let t=0,n=0,r="";switch(e){case"top":t=o.top+window.scrollY-i.height-8,n=o.left+window.scrollX+(o.width-i.width)/2,r="bottom center";break;case"bottom":t=o.bottom+window.scrollY+8,n=o.left+window.scrollX+(o.width-i.width)/2,r="top center";break;case"left":t=o.top+window.scrollY+(o.height-i.height)/2,n=o.left+window.scrollX-i.width-8,r="center right";break;case"right":t=o.top+window.scrollY+(o.height-i.height)/2,n=o.right+window.scrollX+8,r="center left"}return{top:t,left:n,transformOrigin:r,actualSide:e}},l=({top:e,left:t})=>{const n=window.scrollY+8,r=window.scrollY+window.innerHeight-i.height-8,o=window.scrollX+8,a=window.scrollX+window.innerWidth-i.width-8;return e>=n&&e<=r&&t>=o&&t<=a};let c=s(t);if(!l(c)){const e=s(Il[t]);l(e)&&(c=e)}a(c)},[e,t,r.current,n.current]),o}(I,i,h,y);c(()=>()=>{w.current&&clearTimeout(w.current)},[]);const C=a(()=>{x||(w.current&&clearTimeout(w.current),d>0?w.current=window.setTimeout(()=>b(!0),d):b(!0))},[d,x]),D=a(()=>{w.current&&clearTimeout(w.current),b(!1)},[]),S=a(()=>{x||b(!0)},[x]),M=a(()=>b(!1),[]),A="hover"===f||"hover-focus"===f,R="focus"===f||"hover-focus"===f,P=!x&&("string"==typeof r||"number"==typeof r);/* @__PURE__ */
|
|
187
187
|
return N(t,{children:[
|
|
188
|
-
/* @__PURE__ */N(Nl,{asChild:
|
|
189
|
-
/* @__PURE__ */N(kl,{actualSide:
|
|
188
|
+
/* @__PURE__ */N(Nl,{asChild:l,triggerRef:h,describedById:P||!x&&g?p:void 0,onMouseEnter:A?C:void 0,onMouseLeave:A?D:void 0,onFocus:R?S:void 0,onBlur:R?M:void 0,children:n}),P&&/* @__PURE__ */N("div",{id:p,role:"tooltip",className:"sr-only",children:r}),I&&v(
|
|
189
|
+
/* @__PURE__ */N(kl,{id:P?void 0:p,actualSide:k.actualSide,className:e,position:k,tooltipRef:y,children:r}),document.body)]})}const Dl=(e,t)=>t*(e-1)-10,Sl=M(["group relative z-0 flex items-center gap-2.5 px-2.5 py-1 outline-none hover:bg-surface-neutral-hover",'after:-inset-y-0.75 after:-z-10 after:pointer-events-auto after:absolute after:inset-x-0 after:rounded-sm after:content-[""]'],{variants:{active:{true:"",false:""},selected:{true:"bg-surface-selected text-alt hover:bg-surface-selected-hover",false:""},disabled:{true:"pointer-events-none opacity-50",false:""},selectable:{true:"cursor-pointer",false:""}},compoundVariants:[{active:!0,class:["focus-visible:ring-3 focus-visible:ring-ring-offset focus-visible:ring-inset","focus-visible:ring-offset-3 focus-visible:ring-offset-ring"]}],defaultVariants:{active:!1,selected:!1,disabled:!1,selectable:!0}}),Ml=i(({selection:e,defaultSelection:t,onSelectionChange:n,selectionMode:r="single",active:o,defaultActive:i,onActiveChange:d,loop:m=!1,className:f,children:p,onActivate:g,getParentId:b,getFirstChildId:v,expanded:h,onExpandedChange:y,getItemInteraction:w,clearActiveOnReclick:x=!1,rowClickSelection:I="select",clearSelectionOnEscape:k=!0,...C},D)=>{const S=se(void 0,"tree-list"),M=u(null),A=u(null),R=a(e=>`${S}-item-${e}`,[S]),P=a(e=>e.replace(`${S}-item-`,""),[S]),[T,O]=lr(e,t??/* @__PURE__ */new Set,n),[z,E]=lr(o?R(o):void 0,i?R(i):void 0,e=>d?.(e?P(e):void 0)),L=a(e=>{E(e)},[E]),[$,V]=s(!1),[F,K]=s(void 0),[H,G]=lr(h,
|
|
190
190
|
/* @__PURE__ */new Set,y),[B,j]=s(void 0),{registerItem:q,unregisterItem:W,getItems:_,isItemDisabled:Y,registryVersion:U}=pr(),Z=a(e=>w?w(e):Y(R(e))?"none":"full",[w,Y,R]),X=a(e=>"none"!==Z(e),[Z]),J=a(e=>"full"===Z(e),[Z]),Q=a(e=>{if("none"===r)return;if(!J(e))return;const t=T.has(e),n=new Set("multiple"===r?T:[]);t?n.delete(e):n.add(e),O(n)},[T,r,J,O]),ee=a(e=>{"none"!==r&&J(e)&&O(/* @__PURE__ */new Set([e]))},[r,J,O]),te=a((e,t)=>{if("multiple"!==r)return;const n=_(),o=n.indexOf(R(e)),a=n.indexOf(R(t));if(-1===o||-1===a)return;const[i,s]=o<a?[o,a]:[a,o],l=n.slice(i,s+1).map(e=>P(e)).filter(e=>J(e));O(new Set(l))},[r,_,J,O,R,P]),ne=a(()=>{"none"!==r&&O(/* @__PURE__ */new Set)},[r,O]),re=a(()=>{if("multiple"!==r)return;const e=_().map(e=>P(e)).filter(e=>J(e));O(new Set(e))},[r,_,J,O,P]),oe=a(e=>H.has(e),[H]),ae=a(e=>{const t=new Set(H);t.has(e)?t.delete(e):t.add(e),G(t)},[H,G]);c(()=>{const e=_(),t=new Set(e);if(z&&!t.has(z)){const t=e.length>0?e[0]:void 0;L(t)}let n=!1;const r=/* @__PURE__ */new Set;for(const o of T)t.has(R(o))?r.add(o):n=!0;n&&O(r),F&&!t.has(R(F))&&K(z?P(z):void 0)},[U]);const ie='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',le=a(()=>{if(!z||!X(P(z)))return;const e=document.getElementById(z);if(!e)return;const t=e.querySelectorAll(ie)[0];t&&(j(P(z)),t.focus())},[z,X,P]),ce=a(()=>{j(void 0),M.current?.focus()},[]),{handleKeyDown:de,moveActive:ue}=br({getItems:_,isItemDisabled:e=>!X(P(e)),active:z,setActive:L,loop:m,orientation:"vertical",onSelect:e=>{if("none"===r)return;L(e);const t=P(e);Q(t),K(t)}}),me=a(()=>{const e=A.current;if(!e)return 10;const t=e.querySelector('[role="treeitem"]'),n=t?.getBoundingClientRect().height??32;return Math.max(1,Math.floor(e.clientHeight/n))},[]),fe=a(e=>{if(!B||" "!==e.key&&"Enter"!==e.key){if("F2"===e.key){e.preventDefault();let t=z;if(!t){const e=_();t=e.find(e=>T.has(P(e)))??e.find(e=>X(P(e))),t&&L(t)}if(!t||!X(P(t)))return;const n=document.getElementById(t);if(!n)return;const r=n.querySelectorAll(ie)[0];return void(r&&(j(P(t)),r.focus()))}if("Tab"===e.key&&B){e.preventDefault();const t=R(B),n=document.getElementById(t);if(!n)return void ce();const r=Array.from(n.querySelectorAll(ie));if(0===r.length)return void ce();const o=r.indexOf(document.activeElement);return void(e.shiftKey?o<=0?ce():r[o-1]?.focus():-1===o||o===r.length-1?ce():r[o+1]?.focus())}if("Escape"===e.key)return e.preventDefault(),void(B?ce():k&&"none"!==r&&ne());if(e.shiftKey&&"multiple"===r&&("ArrowUp"===e.key||"ArrowDown"===e.key)){if(e.preventDefault(),!z)return;const t=F??P(z);F||K(t);const n="ArrowDown"===e.key?1:-1,r=_(),o=r.indexOf(z);if(-1===o)return;let a=o+n;for(;a>=0&&a<r.length;){const e=r[a];if(e&&X(P(e)))break;a+=n}if(a<0||a>=r.length)return;const i=r[a];if(!i)return;return L(i),void te(t,P(i))}if("PageUp"===e.key)return e.preventDefault(),void ue(-me());if("PageDown"===e.key)return e.preventDefault(),void ue(me());if("ArrowRight"===e.key&&z){e.preventDefault();const t=P(z);if(!oe(t))return void ae(t);if(v){const e=v(t);e&&L(R(e))}return}if("ArrowLeft"===e.key&&z){e.preventDefault();const t=P(z);if(oe(t))return void ae(t);if(b){const e=b(t);e&&L(R(e))}return}if((e.ctrlKey||e.metaKey)&&"a"===e.key&&"multiple"===r){e.preventDefault();return void(_().filter(e=>J(P(e))).every(e=>T.has(P(e)))?ne():re())}if("Enter"===e.key&&z&&J(P(z))){e.preventDefault();const t=P(z);return"single"===r&&(Q(t),K(t)),void g?.(t)}de(e)}},[de,ue,me,z,P,R,L,oe,ae,b,v,r,F,_,X,J,te,T,ne,re,g,Q,ce,B,k]);c(()=>{if(!z||!M.current)return;const e=document.getElementById(z);e&&e.scrollIntoView({block:"nearest",behavior:"auto"})},[z]);const pe=l(()=>({baseId:S,active:z,setActive:L,isFocused:$,selection:T,toggleSelection:Q,selectOnly:ee,selectRange:te,clearSelection:ne,selectAll:re,selectionMode:r,anchorId:F,setAnchorId:K,registerItem:q,unregisterItem:W,getItems:_,isItemDisabled:Y,scrollContainerRef:A,getParentId:b,getFirstChildId:v,isExpanded:oe,toggleExpanded:ae,onActivate:g,actionModeRowId:B,enterActionMode:le,exitActionMode:ce,clearActiveOnReclick:x,rowClickSelection:I}),[S,z,L,$,T,Q,ee,te,ne,re,r,F,q,W,_,Y,b,v,oe,ae,g,B,le,ce,x,I]);/* @__PURE__ */
|
|
191
191
|
return N(_e,{value:pe,children:/* @__PURE__ */N("div",{"data-component":"TreeList.Root",id:S,ref:e=>{wn(M,e),wn(D,e)},className:bn("outline-none focus-within:ring-2 focus-within:ring-ring/10 focus-within:ring-inset",f),role:"tree","aria-activedescendant":z||void 0,"aria-multiselectable":"multiple"===r||void 0,tabIndex:0,onKeyDown:fe,onFocus:()=>V(!0),onBlur:()=>V(!1),...C,children:p})})});Ml.displayName="TreeList";const Al=i(({children:e,className:t,...n},r)=>{const{baseId:o,scrollContainerRef:a}=Ye();/* @__PURE__ */
|
|
192
192
|
return N("div",{"data-component":"TreeList.Container",id:`${o}-scroll-root`,ref:e=>{wn(a,e),wn(r,e)},className:bn("relative flex h-full flex-col gap-y-1.5 overflow-y-auto p-1",t),...n,children:e})});Al.displayName="TreeList.Container";const Rl=i(({id:e,disabled:t=!1,selectable:n=!0,level:r,hasChildren:o,expanded:i,posinset:s,setsize:l,className:d,children:m,...f},p)=>{const{selection:g,selectionMode:b,toggleSelection:v,selectOnly:h,clearSelection:y,selectRange:w,setActive:x,active:I,baseId:k,registerItem:C,unregisterItem:D,getItems:S,isItemDisabled:M,anchorId:A,setAnchorId:R,onActivate:P,actionModeRowId:T,clearActiveOnReclick:O,rowClickSelection:z}=Ye(),E=u(null),L=`${k}-item-${e}`,$=g.has(e),V=I===L;c(()=>(C(L,t,E.current),()=>D(L)),[L,t,C,D]);const{tabIndex:F}=Nr({id:L,active:I,disabled:t,getItems:S,isItemDisabled:M,focusMode:"roving-tabindex"});rr({ref:E,isActive:V,disabled:void 0!==T,focusMode:"roving-tabindex",checkFocusWithin:{enabled:!0,containerRole:"tree"}});const K=a(e=>e.replace(`${k}-item-`,""),[k]),H=a(r=>{if(t)return;if(!r.target.closest('button, a, input, select, textarea, [role="button"]'))if(O&&V&&1===r.detail)x(void 0);else if(!(O&&r.detail>1)&&(x(L),!O&&"none"!==b&&n))if("single"!==b)if(r.shiftKey){const t=A??(I?K(I):e);w(t,e)}else r.ctrlKey||r.metaKey?(v(e),R(e)):("toggle"===z?v(e):"clear"===z?y():h(e),R(e));else"clear"===z?y():v(e)},[t,x,L,b,n,e,v,h,y,w,A,I,K,R,O,V,z]),G=a(()=>{t||P?.(e)},[t,P,e]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Tooltip, type TooltipProps, type TooltipSide } from './tooltip';
|
|
1
|
+
export { Tooltip, type TooltipProps, type TooltipSide, type TooltipTrigger } from './tooltip';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
|
|
3
|
+
export type TooltipTrigger = 'hover' | 'focus' | 'hover-focus';
|
|
3
4
|
export type TooltipProps = {
|
|
4
5
|
children: ReactNode;
|
|
5
6
|
value?: ReactNode;
|
|
@@ -7,5 +8,6 @@ export type TooltipProps = {
|
|
|
7
8
|
className?: string;
|
|
8
9
|
asChild?: boolean;
|
|
9
10
|
delay?: number;
|
|
11
|
+
trigger?: TooltipTrigger;
|
|
10
12
|
};
|
|
11
|
-
export declare function Tooltip({ className, children, value, side, asChild, delay, }: TooltipProps): ReactElement<TooltipProps>;
|
|
13
|
+
export declare function Tooltip({ className, children, value, side, asChild, delay, trigger, }: TooltipProps): ReactElement<TooltipProps>;
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@enonic/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Enonic UI Component Library",
|
|
5
5
|
"author": "Enonic",
|
|
6
|
-
"license": "
|
|
6
|
+
"license": "Apache-2.0",
|
|
7
7
|
"homepage": "https://github.com/enonic/npm-enonic-ui#readme",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|