@julseb-lib/react 0.0.2 → 0.0.4

package/dist/index.umd.js

@@ -3642,7 +3642,7 @@ React keys must be passed directly to JSX without using spread:
     @media ${N.MOBILE} {
         max-width: 100%;
     }
-`;_([H3,f0,r0,M6,g6,k6,b6]);const w6=n.forwardRef(({"data-testid":l,className:c,isOpen:e,navMobileVariant:t,variant:h,burgerColor:d,handleOpen:f,handleClose:i},r)=>{const o=()=>d?typeof d=="string"?d:e?d.open:d.closed:t==="drawer"&&e||h==="primary"||t==="full"||t==="top"&&e&&h==="transparent"?"white":"primary";return a.jsx(r0,{"data-testid":l&&`${l}.HeaderBurger`,ref:r,className:c&&"HeaderBurger",isOpen:e,onClick:()=>{e?i():f()},width:32,height:24,color:o()})});function C3({"data-testid":l,className:c,search:e,handleClose:t}){if(!e)return null;const{maxWidth:h,placeholder:d,iconLeft:f,iconLeftSize:i,iconClear:r,iconClearSize:o,iconBaseUrl:z,inputBackground:p,inputVariant:v,keyboardShortcut:k,showKeys:b,pathname:g,queries:A}=e,H=z2.useNavigate(),[y,R]=n.useState(""),L=D=>R(D.target.value),$=()=>R(""),I=D=>{D.preventDefault(),H({pathname:g,search:z2.createSearchParams({query:y,...Object.fromEntries(A||[])}).toString()}),R(""),t()};return a.jsx(b6,{"data-testid":l&&`${l}.HeaderSearch`,className:c&&"HeaderSearch",onSubmit:I,role:"search",$maxWidth:h,children:a.jsx(m3,{"data-testid":l&&`${l}.SearchInput`,className:c&&"SearchInput",type:"search",clearSearch:$,onChange:L,value:y,placeholder:d,icon:f,iconSize:i,iconClear:r,iconClearSize:o,inputBackground:p,inputVariant:v,focusKeys:k,showKeys:b,iconBaseUrl:z})})}function R9({"data-testid":l,link:c,className:e}){return c.to?a.jsx(z2.NavLink,{"data-testid":c["data-testid"]||l&&`${l}.NavLink`,className:c.className||e&&"NavLink",id:c.id,ref:c.ref,to:c.to,end:c.end,target:c.blank?"_blank":void 0,rel:c.blank?"noreferrer noopener":void 0,children:c.text}):c.href?a.jsx("a",{"data-testid":c["data-testid"]||l&&`${l}.NavLink`,className:c.className||e&&"NavLink",id:c.id,ref:c.ref,href:c.href,target:c.blank?"_blank":void 0,rel:c.blank?"noreferrer noopener":void 0,children:c.text}):c.onClick?a.jsx("button",{"data-testid":c["data-testid"]||l&&`${l}.NavButton`,className:c.className||e&&"NavButton",id:c.id,ref:c.ref,onClick:c.onClick,disabled:c.disabled,children:c.text}):null}function u6({"data-testid":l,className:c,search:e,isOpen:t,children:h,links:d,headerHeight:f,variant:i,navMobileVariant:r,burgerPosition:o,burgerRef:z,handleClose:p}){const v=u0(600),k=n.useRef(null);_2(k,y=>{var R;(R=z==null?void 0:z.current)!=null&&R.contains(y.target)||p()});const b=d||h,g=v&&e?32:0,A=b.length*24+([...b,g].length-1)*12,H=g+A;return a.jsxs(g6,{"data-testid":l&&`${l}.HeaderNav`,ref:k,className:O({HeaderNav:c},{Open:t}),$headerHeight:f,$variant:i,$burgerPosition:o,$navMobileVariant:r,$navHeight:H,children:[v&&e&&a.jsx(C3,{...e,"data-testid":l,className:c,handleClose:p}),d&&d.map(y=>a.jsx(R9,{"data-testid":l,className:c,link:y},C.uuid())),h&&h]})}function L9({"data-testid":l,className:c,logo:e,children:t,isOpen:h}){const{to:d="/",href:f,img:i,imgOpen:r,alt:o="Logo",width:z=100,height:p=30}=e;if(i){const v={"data-testid":l&&`${l}.HeaderLogo.Img`,className:c&&"HeaderLogoImg",src:r&&h?r:i,alt:o,width:z,height:p};return f?a.jsx("a",{href:f,"data-testid":l&&`${l}.HeaderLogo`,className:c&&"HeaderLogo",children:a.jsx(H3,{...v})}):a.jsx(z2.Link,{"data-testid":l&&`${l}.HeaderLogo`,className:c&&"HeaderLogo",to:d,children:a.jsx(H3,{...v})})}return a.jsx(f0,{"data-testid":l&&`${l}.HeaderLogo`,as:f?"a":z2.Link,className:c&&"HeaderLogo",to:d,href:f,translate:"no",children:t})}const x6=n.forwardRef(({"data-testid":l,as:c,children:e,className:t,logo:h,variant:d="primary",burgerPosition:f="right",navDesktopVariant:i="right",navMobileVariant:r="drawer",search:o,position:z="relative",hideOnScroll:p,links:v,enableScrollingOpen:k,...b},g)=>{const[A,H]=n.useState(!1),y=()=>{k||C.disableScroll(),H(!0)},R=()=>{k||C.enableScroll(),setTimeout(()=>H(!1),10)},L=u0(600),$=typeof h=="object"?h:void 0,Y=[($==null?void 0:$.height)||30,32,35].sort(),c2=Y[Y.length-1]+16*2,[X,F]=n.useState(!1),U=typeof p=="boolean"?400:p;n.useEffect(()=>{U&&(window.pageYOffset>=U?F(!0):F(!1),window.addEventListener("scroll",()=>{window.pageYOffset>=U?F(!0):F(!1)}))},[U]);const G=n.useRef(null);J2("Escape",()=>{A&&R()});const Q={"data-testid":l,className:t,isOpen:A,navMobileVariant:r,variant:d,ref:G,handleOpen:y,handleClose:R},q={"data-testid":l,className:t,search:o,isOpen:A,handleClose:R,links:v,children:e,headerHeight:c2,variant:d,navMobileVariant:r,burgerPosition:f,burgerRef:G},f2={"data-testid":l,className:t,search:o,handleClose:R};return a.jsxs(M6,{"data-testid":l,ref:g,as:c,className:O(t,{Hidden:X},{Open:A}),$burgerPosition:f,$headerHeight:c2,$position:z,$variant:d,...b,children:[f==="left"&&a.jsx(w6,{...Q}),a.jsx(L9,{"data-testid":l,className:t,logo:h,isOpen:A,children:typeof h=="object"?h.text:h}),i==="left"&&a.jsx(u6,{...q}),!L&&i==="right"&&a.jsx(C3,{...f2}),f==="right"&&a.jsx(w6,{...Q}),i==="right"&&a.jsx(u6,{...q}),L&&r==="drawer"&&a.jsx(k6,{onClick:()=>H(!1),className:O({HeaderOverlay:t},{Visible:A})}),!L&&i==="left"&&a.jsx(C3,{...f2})]})}),D2=48,H6=m.nav`
+`;_([H3,f0,r0,M6,g6,k6,b6]);const w6=n.forwardRef(({"data-testid":l,className:c,isOpen:e,navMobileVariant:t,variant:h,burgerColor:d,handleOpen:f,handleClose:i},r)=>{const o=()=>d?typeof d=="string"?d:e?d.open:d.closed:t==="drawer"&&e||h==="primary"||t==="full"||t==="top"&&e&&h==="transparent"?"white":"primary";return a.jsx(r0,{"data-testid":l&&`${l}.HeaderBurger`,ref:r,className:c&&"HeaderBurger",isOpen:e,onClick:()=>{e?i():f()},width:32,height:24,color:o()})});function C3({"data-testid":l,className:c,search:e,handleClose:t}){if(!e)return null;const{maxWidth:h,placeholder:d,iconLeft:f,iconLeftSize:i,iconClear:r,iconClearSize:o,iconBaseUrl:z,inputBackground:p,inputVariant:v,keyboardShortcut:k,showKeys:b,pathname:g,queries:A}=e,H=z2.useNavigate(),[y,R]=n.useState(""),L=D=>R(D.target.value),$=()=>R(""),I=D=>{D.preventDefault(),H({pathname:g,search:z2.createSearchParams({query:y,...Object.fromEntries(A||[])}).toString()}),R(""),t()};return a.jsx(b6,{"data-testid":l&&`${l}.HeaderSearch`,className:c&&"HeaderSearch",onSubmit:I,role:"search",$maxWidth:h,children:a.jsx(m3,{"data-testid":l&&`${l}.SearchInput`,className:c&&"SearchInput",type:"search",clearSearch:$,onChange:L,value:y,placeholder:d,icon:f,iconSize:i,iconClear:r,iconClearSize:o,inputBackground:p,inputVariant:v,focusKeys:k,showKeys:b,iconBaseUrl:z})})}function R9({"data-testid":l,link:c,className:e}){return c.to?a.jsx(z2.NavLink,{"data-testid":c["data-testid"]||l&&`${l}.NavLink`,className:c.className||e&&"NavLink",id:c.id,ref:c.ref,to:c.to,end:c.end,target:c.blank?"_blank":void 0,rel:c.blank?"noreferrer noopener":void 0,children:c.text}):c.href?a.jsx("a",{"data-testid":c["data-testid"]||l&&`${l}.NavLink`,className:c.className||e&&"NavLink",id:c.id,ref:c.ref,href:c.href,target:c.blank?"_blank":void 0,rel:c.blank?"noreferrer noopener":void 0,children:c.text}):c.onClick?a.jsx("button",{"data-testid":c["data-testid"]||l&&`${l}.NavButton`,className:c.className||e&&"NavButton",id:c.id,ref:c.ref,onClick:c.onClick,disabled:c.disabled,children:c.text}):null}function u6({"data-testid":l,className:c,search:e,isOpen:t,children:h,links:d,headerHeight:f,variant:i,navMobileVariant:r,burgerPosition:o,burgerRef:z,handleClose:p}){const v=u0(600),k=n.useRef(null);_2(k,y=>{var R;(R=z==null?void 0:z.current)!=null&&R.contains(y.target)||p()});const b=d||h,g=v&&e?32:0,A=d?d.length*24+([...b,g].length-1)*12:56,H=g+A;return a.jsxs(g6,{"data-testid":l&&`${l}.HeaderNav`,ref:k,className:O({HeaderNav:c},{Open:t}),$headerHeight:f,$variant:i,$burgerPosition:o,$navMobileVariant:r,$navHeight:H,children:[v&&e&&a.jsx(C3,{...e,"data-testid":l,className:c,handleClose:p}),d?d.map(y=>a.jsx(R9,{"data-testid":l,className:c,link:y},C.uuid())):null,h&&h]})}function L9({"data-testid":l,className:c,logo:e,children:t,isOpen:h}){const{to:d="/",href:f,img:i,imgOpen:r,alt:o="Logo",width:z=100,height:p=30}=e;if(i){const v={"data-testid":l&&`${l}.HeaderLogo.Img`,className:c&&"HeaderLogoImg",src:r&&h?r:i,alt:o,width:z,height:p};return f?a.jsx("a",{href:f,"data-testid":l&&`${l}.HeaderLogo`,className:c&&"HeaderLogo",children:a.jsx(H3,{...v})}):a.jsx(z2.Link,{"data-testid":l&&`${l}.HeaderLogo`,className:c&&"HeaderLogo",to:d,children:a.jsx(H3,{...v})})}return a.jsx(f0,{"data-testid":l&&`${l}.HeaderLogo`,as:f?"a":z2.Link,className:c&&"HeaderLogo",to:d,href:f,translate:"no",children:t})}const x6=n.forwardRef(({"data-testid":l,as:c,children:e,className:t,logo:h,variant:d="primary",burgerPosition:f="right",navDesktopVariant:i="right",navMobileVariant:r="drawer",search:o,position:z="relative",hideOnScroll:p,links:v,enableScrollingOpen:k,...b},g)=>{const[A,H]=n.useState(!1),y=()=>{k||C.disableScroll(),H(!0)},R=()=>{k||C.enableScroll(),setTimeout(()=>H(!1),10)},L=u0(600),$=typeof h=="object"?h:void 0,Y=[($==null?void 0:$.height)||30,32,35].sort(),c2=Y[Y.length-1]+16*2,[X,F]=n.useState(!1),U=typeof p=="boolean"?400:p;n.useEffect(()=>{U&&(window.pageYOffset>=U?F(!0):F(!1),window.addEventListener("scroll",()=>{window.pageYOffset>=U?F(!0):F(!1)}))},[U]);const G=n.useRef(null);J2("Escape",()=>{A&&R()});const Q={"data-testid":l,className:t,isOpen:A,navMobileVariant:r,variant:d,ref:G,handleOpen:y,handleClose:R},q={"data-testid":l,className:t,search:o,isOpen:A,handleClose:R,links:v,children:e,headerHeight:c2,variant:d,navMobileVariant:r,burgerPosition:f,burgerRef:G},f2={"data-testid":l,className:t,search:o,handleClose:R};return a.jsxs(M6,{"data-testid":l,ref:g,as:c,className:O(t,{Hidden:X},{Open:A}),$burgerPosition:f,$headerHeight:c2,$position:z,$variant:d,...b,children:[f==="left"&&a.jsx(w6,{...Q}),a.jsx(L9,{"data-testid":l,className:t,logo:h,isOpen:A,children:typeof h=="object"?h.text:h}),i==="left"&&a.jsx(u6,{...q}),!L&&i==="right"&&a.jsx(C3,{...f2}),f==="right"&&a.jsx(w6,{...Q}),i==="right"&&a.jsx(u6,{...q}),L&&r==="drawer"&&a.jsx(k6,{onClick:()=>H(!1),className:O({HeaderOverlay:t},{Visible:A})}),!L&&i==="left"&&a.jsx(C3,{...f2})]})}),D2=48,H6=m.nav`
     ${s.Position};
     width: ${D2}px;
     height: ${D2}px;
@@ -3839,7 +3839,7 @@ React keys must be passed directly to JSX without using spread:
                         right: 0;
                     }
                 `;default:return null}}}
-`;_([V6,D6,T6]);const I9=n.forwardRef(({"data-testid":l,as:c,children:e,className:t,isOpen:h,setIsOpen:d,enableScrollingOpen:f,disableEsc:i,backgroundColor:r="primary",contentColor:o="background",linksColor:z="background",gap:p="s",width:v="30vw",zIndex:k=998,overlayColor:b="black-80",position:g="right",padding:A="l",...H},y)=>{n.useEffect(()=>{h&&!f?C.disableScroll():C.enableScroll()},[h]);const R=()=>{d(!1),C.enableScroll()};return J2("Escape",()=>{!i&&h&&R()}),a.jsxs(V6,{"data-testid":l,ref:y,as:c,className:O(t,{Open:h}),$zIndex:k,...H,children:[a.jsx(D6,{"data-testid":l&&`${l}.Overlay`,onClick:R,className:O({DrawerOverlay:t},{Open:h}),$overlayColor:b}),a.jsx(T6,{"data-testid":l&&`${l}.Content`,className:O({DrawerContent:t},{Open:h}),$gap:p,$backgroundColor:r,$contentColor:o,$linksColor:z,$width:v,$position:g,$padding:A,children:e})]})});function N9({children:l,isLoading:c,pageLoading:e,titleLoading:t,helmet:h,header:d,footer:f,noWrapper:i,wrapper:r,template:o="single",main:z,mainMinHeight:p="85vh"}){return a.jsxs(a.Fragment,{children:[h&&a.jsx(N6,{...h,title:c&&t?t:h.title}),c?a.jsx(P5,{...e}):a.jsxs(a.Fragment,{children:[d&&a.jsx(x6,{...d}),i?l:a.jsx(N1,{className:"wrapper",...r,children:o==="single"?a.jsx(D1,{className:"main",minHeight:p,...z,children:l}):l}),f&&a.jsx(I6,{...f})]}),a.jsx(E6,{})]})}const G6=m.div`
+`;_([V6,D6,T6]);const I9=n.forwardRef(({"data-testid":l,as:c,children:e,className:t,isOpen:h,setIsOpen:d,enableScrollingOpen:f,disableEsc:i,backgroundColor:r="primary",contentColor:o="background",linksColor:z="background",gap:p="s",width:v="30vw",zIndex:k=998,overlayColor:b="black-80",position:g="right",padding:A="l",...H},y)=>{n.useEffect(()=>{h&&!f?C.disableScroll():C.enableScroll()},[h]);const R=()=>{d(!1),C.enableScroll()};return J2("Escape",()=>{!i&&h&&R()}),a.jsxs(V6,{"data-testid":l,ref:y,as:c,className:O(t,{Open:h}),$zIndex:k,...H,children:[a.jsx(D6,{"data-testid":l&&`${l}.Overlay`,onClick:R,className:O({DrawerOverlay:t},{Open:h}),$overlayColor:b}),a.jsx(T6,{"data-testid":l&&`${l}.Content`,className:O({DrawerContent:t},{Open:h}),$gap:p,$backgroundColor:r,$contentColor:o,$linksColor:z,$width:v,$position:g,$padding:A,children:e})]})});function N9({children:l,isLoading:c,pageLoading:e,titleLoading:t,helmet:h,header:d,footer:f,noWrapper:i,wrapper:r,template:o="single",main:z,mainMinHeight:p="85vh"}){return a.jsxs(a.Fragment,{children:[h&&a.jsx(N6,{...h,title:c&&t?t:h.title}),c?a.jsx(P5,{...e}):a.jsxs(a.Fragment,{children:[d&&a.jsx(x6,{...d,children:(d==null?void 0:d.nav)&&(d==null?void 0:d.nav)}),i?l:a.jsx(N1,{className:"wrapper",...r,children:o==="single"?a.jsx(D1,{className:"main",minHeight:p,...z,children:l}):l}),f&&a.jsx(I6,{...f})]}),a.jsx(E6,{})]})}const G6=m.div`
     ${({$gap:l})=>s.Flexbox({$flexDirection:"column",$alignItems:"stretch",$gap:l})}
     ${({$border:l})=>s.Border(l)};
     ${({$padding:l})=>s.Padding(l)};

package/dist/lib/components/Header/HeaderNav.tsx

@@ -36,8 +36,9 @@ export function HeaderNav({
 
     const searchHeight = isMobile && !!search ? 32 : 0
 
-    const linksHeight =
-        valueArr.length * 24 + ([...valueArr, searchHeight].length - 1) * 12
+    const linksHeight = links
+        ? links.length * 24 + ([...valueArr, searchHeight].length - 1) * 12
+        : 56
 
     const navHeight = searchHeight + linksHeight
 
@@ -61,15 +62,16 @@ export function HeaderNav({
                 />
             )}
 
-            {links &&
-                links.map(link => (
-                    <HeaderNavLink
-                        data-testid={testid}
-                        className={className}
-                        link={link}
-                        key={uuid()}
-                    />
-                ))}
+            {links
+                ? links.map(link => (
+                      <HeaderNavLink
+                          data-testid={testid}
+                          className={className}
+                          link={link}
+                          key={uuid()}
+                      />
+                  ))
+                : null}
 
             {children && children}
         </Nav>

package/dist/lib/components/PageLayout/PageLayout.tsx

@@ -19,7 +19,7 @@ import type { ILibPageLayout } from "./types"
  * @prop titleLoading?: string
  * @prop pageLoading?: ILibPageLoading => imported from PageLoading component
  * @prop helmet?: ILibHelmet => imported from Helmet component
- * @prop header?: ILibHeader => imported from Header component
+ * @prop header?: ILibHeader & { nav?: JSX.Element } => imported from Header component
  * @prop footer?: ILibFooter => imported from Footer component
  * @prop wrapper?: ILibWrapper => imported from Wrapper component, only if noWrapper is not set to true
  * @prop noWrapper?: false
@@ -56,7 +56,11 @@ export function PageLayout({
                 <PageLoading {...pageLoading} />
             ) : (
                 <>
-                    {header && <Header {...(header as any)} />}
+                    {header && (
+                        <Header {...(header as any)}>
+                            {header?.nav && header?.nav}
+                        </Header>
+                    )}
 
                     {!noWrapper ? (
                         <Wrapper className="wrapper" {...wrapper}>

package/dist/lib/components/PageLayout/types.ts

@@ -14,7 +14,7 @@ interface ILibPageLayoutBase {
     pageLoading?: ILibPageLoading
     titleLoading?: string
     helmet?: Omit<ILibHelmet, "children">
-    header?: Omit<ILibHeader, "children">
+    header?: Omit<ILibHeader, "children"> & { nav?: JSX.Element }
     footer?: Omit<ILibFooter, "children">
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@julseb-lib/react",
-    "version": "0.0.2",
+    "version": "0.0.4",
     "type": "module",
     "license": "MIT",
     "scripts": {