@mich8060/unified-design-system 0.2.45 → 0.2.47

package/dist/src/app-shell/AppShell.js

@@ -1 +1 @@
-import{jsxs as d,jsx as n,Fragment as a}from"react/jsx-runtime";import _,{useMemo as N,useId as ee,useState as ne,useCallback as y,useEffect as le}from"react";import{defaultLayout as te}from"./layout.types.js";import ae from"../../components/Avatar/Avatar.js";import oe from"../../components/ActionMenu/ActionMenu.js";import ie from"../../components/Button/Button.js";import se from"../../components/Branding/Branding.js";import{Toolbar as re}from"../../components/Toolbar/Toolbar.js";/* empty css          */const L=({children:l})=>n(a,{children:l}),$=({children:l})=>n(a,{children:l}),F=({children:l})=>n(a,{children:l}),x=({children:l})=>n(a,{children:l}),E=({children:l})=>n(a,{children:l}),P=({children:l})=>n(a,{children:l}),u=l=>_.Children.toArray(l).some(t=>typeof t=="string"?t.trim().length>0:t!=null&&t!==!1);function pe({layout:l,slots:t,children:I,standalone:O=!1,brand:m="default",theme:j="light",className:B="",skipToContent:z=!0,skipToContentLabel:D="Skip to content",mainContentId:J,mobileBrandLabel:R,mobileUserName:h="Jane Doe",mobileUserInitials:T="JD",mobileUserAvatarSrc:q,mobileAccountMenuItems:f=[]}){const i=N(()=>({...te,...l}),[l]),G=ee().replace(/[:]/g,""),C=J??`app-shell-main-${G}`,[s,S]=ne(!1),H=R??(m==="default"?"design-system":m),K=N(()=>Array.isArray(f)?f:[],[f]),r=y(()=>S(!1),[]),Q=y(()=>S(e=>!e),[]);le(()=>{if(!s)return;const e=c=>{c.key==="Escape"&&r()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[r,s]);const V=y(e=>{const c=e.target;c&&c.closest("a")&&r()},[r]);let b=null,M=null,v=null,A=null,g=null,k=null;const W=_.Children.toArray(I);for(const e of W){if(e.type===L){b=e.props.children;continue}if(e.type===$){M=e.props.children;continue}e.type===P&&(k=e.props.children)}const X=_.Children.toArray(M);for(const e of X){if(e.type===F){v=e.props.children;continue}if(e.type===x){A=e.props.children;continue}e.type===E&&(g=e.props.children)}const w=(t==null?void 0:t.Footer)??k,p=!O&&i.sidebar&&u(b),Y=u(v),Z=u(g),U=["app-shell",`brand-${m}`,`theme-${j}`,`density-${i.density}`,`container-${i.container}`,`padding-${i.padding}`,p?"app-shell--has-nav":"app-shell--standalone",s?"app-shell--mobile-menu-open":"",B].join(" ");return d("div",{className:U,children:[z?n("a",{className:"app-shell__skip-link",href:`#${C}`,children:D}):null,p?n("div",{className:"app-shell__mobile-toolbar-wrap",children:n(re,{className:"app-shell__mobile-toolbar",left:n(ie,{appearance:"text",icon:"List",label:s?"Close navigation menu":"Open navigation menu",layout:"icon-only","aria-label":s?"Close navigation menu":"Open navigation menu",onClick:Q}),center:n(se,{brand:H,symbol:!0}),right:n(oe,{placement:"bottom-end",items:K,trigger:n("button",{type:"button",className:"app-shell__mobile-avatar-trigger","aria-label":`${h} account menu`,children:n(ae,{src:q,initials:T,alt:h?`${h} avatar`:"User avatar",size:"default"})})})})}):null,d("div",{className:"app-shell__body",children:[p?n("aside",{className:"app-shell__sidebar","aria-label":"Primary",onClickCapture:V,children:b}):null,d("div",{className:"app-shell__main",children:[d("main",{className:"app-shell__content",id:C,tabIndex:-1,children:[Y?n("aside",{className:"app-shell__listview",children:v}):null,n("section",{className:"app-shell__main-content",children:A}),Z?n("aside",{className:"app-shell__side-panel",children:g}):null]}),i.footer&&u(w)?w:null]})]}),p?n("button",{type:"button",className:"app-shell__mobile-backdrop",onClick:r,"aria-label":"Close navigation menu"}):null]})}const o=pe;o.Menu=L;o.Content=$;o.Listview=F;o.Main=x;o.SidePanel=E;o.Footer=P;export{o as AppShell};
+import{jsxs as d,jsx as n,Fragment as ne}from"react/jsx-runtime";import y,{useMemo as L,useId as te,useState as le,useCallback as g,useEffect as oe}from"react";import{defaultLayout as ae}from"./layout.types.js";import ie from"../../components/Avatar/Avatar.js";import se from"../../components/ActionMenu/ActionMenu.js";import re from"../../components/Button/Button.js";import pe from"../../components/Branding/Branding.js";import{Toolbar as ce}from"../../components/Toolbar/Toolbar.js";/* empty css          */const a=t=>{const l=({children:h})=>n(ne,{children:h});return l.__appShellSlot=t,l},$=t=>{if(t&&(typeof t=="function"||typeof t=="object"&&t!==null))return t.__appShellSlot},F=a("Menu"),P=a("Content"),x=a("Listview"),E=a("Main"),j=a("SidePanel"),I=a("Footer"),u=t=>y.Children.toArray(t).some(l=>typeof l=="string"?l.trim().length>0:l!=null&&l!==!1);function de({layout:t,slots:l,children:h,standalone:O=!1,brand:m="default",theme:B="light",className:z="",skipToContent:D=!0,skipToContentLabel:J="Skip to content",mainContentId:R,mobileBrandLabel:T,mobileUserName:f="Jane Doe",mobileUserInitials:q="JD",mobileUserAvatarSrc:G,mobileAccountMenuItems:S=[]}){const s=L(()=>({...ae,...t}),[t]),H=te().replace(/[:]/g,""),C=R??`app-shell-main-${H}`,[r,M]=le(!1),K=T??(m==="default"?"design-system":m),Q=L(()=>Array.isArray(S)?S:[],[S]),p=g(()=>M(!1),[]),V=g(()=>M(e=>!e),[]);oe(()=>{if(!r)return;const e=o=>{o.key==="Escape"&&p()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[p,r]);const W=g(e=>{const o=e.target;o&&o.closest("a")&&p()},[p]);let b=null,A=null,v=null,w=null,_=null,N=null;const X=y.Children.toArray(h);for(const e of X){const o=$(e.type);if(e.type===F||o==="Menu"){b=e.props.children;continue}if(e.type===P||o==="Content"){A=e.props.children;continue}(e.type===I||o==="Footer")&&(N=e.props.children)}const Y=y.Children.toArray(A);for(const e of Y){const o=$(e.type);if(e.type===x||o==="Listview"){v=e.props.children;continue}if(e.type===E||o==="Main"){w=e.props.children;continue}(e.type===j||o==="SidePanel")&&(_=e.props.children)}const k=(l==null?void 0:l.Footer)??N,c=!O&&s.sidebar&&u(b),Z=u(v),U=u(_),ee=["app-shell",`brand-${m}`,`theme-${B}`,`density-${s.density}`,`container-${s.container}`,`padding-${s.padding}`,c?"app-shell--has-nav":"app-shell--standalone",r?"app-shell--mobile-menu-open":"",z].join(" ");return d("div",{className:ee,children:[D?n("a",{className:"app-shell__skip-link",href:`#${C}`,children:J}):null,c?n("div",{className:"app-shell__mobile-toolbar-wrap",children:n(ce,{className:"app-shell__mobile-toolbar",left:n(re,{appearance:"text",icon:"List",label:r?"Close navigation menu":"Open navigation menu",layout:"icon-only","aria-label":r?"Close navigation menu":"Open navigation menu",onClick:V}),center:n(pe,{brand:K,symbol:!0}),right:n(se,{placement:"bottom-end",items:Q,trigger:n("button",{type:"button",className:"app-shell__mobile-avatar-trigger","aria-label":`${f} account menu`,children:n(ie,{src:G,initials:q,alt:f?`${f} avatar`:"User avatar",size:"default"})})})})}):null,d("div",{className:"app-shell__body",children:[c?n("aside",{className:"app-shell__sidebar","aria-label":"Primary",onClickCapture:W,children:b}):null,d("div",{className:"app-shell__main",children:[d("main",{className:"app-shell__content",id:C,tabIndex:-1,children:[Z?n("aside",{className:"app-shell__listview",children:v}):null,n("section",{className:"app-shell__main-content",children:w}),U?n("aside",{className:"app-shell__side-panel",children:_}):null]}),s.footer&&u(k)?k:null]})]}),c?n("button",{type:"button",className:"app-shell__mobile-backdrop",onClick:p,"aria-label":"Close navigation menu"}):null]})}const i=de;i.Menu=F;i.Content=P;i.Listview=x;i.Main=E;i.SidePanel=j;i.Footer=I;export{i as AppShell};