@julseb-lib/react 0.0.9 → 0.0.10

package/dist/index.es.js

@@ -19913,49 +19913,51 @@ function _1({
   isOpen: a,
   children: h,
   links: d,
-  headerHeight: f,
-  variant: i,
-  navMobileVariant: r,
-  burgerPosition: s,
-  burgerRef: o,
-  handleClose: p
+  nav: f,
+  headerHeight: i,
+  variant: r,
+  navMobileVariant: s,
+  burgerPosition: o,
+  burgerRef: p,
+  handleClose: z
 }) {
-  const z = u3(600), M = o2(null);
-  K2(M, (x) => {
-    var $;
-    ($ = o == null ? void 0 : o.current) != null && $.contains(x.target) || p();
+  const M = u3(600), g = o2(null);
+  K2(g, ($) => {
+    var A;
+    (A = p == null ? void 0 : p.current) != null && A.contains($.target) || z();
   });
-  const g = d || h, v = z && e ? 32 : 0, H = d ? d.length * 24 + ([...g, v].length - 1) * 12 : 56, w = v + H;
+  const v = d || h, H = M && e ? 32 : 0, w = d ? d.length * 24 + ([...v, H].length - 1) * 12 : 56, x = H + w;
   return /* @__PURE__ */ t.jsxs(
     C6,
     {
       "data-testid": l && `${l}.HeaderNav`,
-      ref: M,
+      ref: g,
       className: T({ HeaderNav: c }, { Open: a }),
-      $headerHeight: f,
-      $variant: i,
-      $burgerPosition: s,
-      $navMobileVariant: r,
-      $navHeight: w,
+      $headerHeight: i,
+      $variant: r,
+      $burgerPosition: o,
+      $navMobileVariant: s,
+      $navHeight: x,
       children: [
-        z && e && /* @__PURE__ */ t.jsx(
+        M && e && /* @__PURE__ */ t.jsx(
           z3,
           {
             ...e,
             "data-testid": l,
             className: c,
-            handleClose: p
+            handleClose: z
           }
         ),
-        d ? d.map((x) => /* @__PURE__ */ t.jsx(
+        d ? d.map(($) => /* @__PURE__ */ t.jsx(
           md,
           {
             "data-testid": l,
             className: c,
-            link: x
+            link: $
           },
           J()
         )) : null,
+        f && f,
         h && h
       ]
     }
@@ -20719,7 +20721,7 @@ function Ei({
       }
     ),
     c ? /* @__PURE__ */ t.jsx(Kh, { ...e }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      d && /* @__PURE__ */ t.jsx(od, { ...d, children: (d == null ? void 0 : d.nav) && (d == null ? void 0 : d.nav) }),
+      d && /* @__PURE__ */ t.jsx(od, { ...d }),
       i ? l : /* @__PURE__ */ t.jsx(bc, { className: "wrapper", ...r, children: s === "single" ? /* @__PURE__ */ t.jsx(
         uc,
         {

package/dist/index.umd.js

@@ -3645,7 +3645,7 @@ React keys must be passed directly to JSX without using spread:
     @media ${N.MOBILE} {
         max-width: 100%;
     }
-`;I([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=V=>R(V.target.value),$=()=>R(""),_=V=>{V.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:_,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,P=[($==null?void 0:$.height)||30,32,35].sort(),q=P[P.length-1]+16*2,[K,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},l2={"data-testid":l,className:t,search:o,isOpen:A,handleClose:R,links:v,children:e,headerHeight:q,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:K},{Open:A}),$burgerPosition:f,$headerHeight:q,$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,{...l2}),!L&&i==="right"&&a.jsx(C3,{...f2}),f==="right"&&a.jsx(w6,{...Q}),i==="right"&&a.jsx(u6,{...l2}),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`
+`;I([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=V=>R(V.target.value),$=()=>R(""),_=V=>{V.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:_,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,nav:f,headerHeight:i,variant:r,navMobileVariant:o,burgerPosition:z,burgerRef:p,handleClose:v}){const k=u0(600),b=n.useRef(null);_2(b,R=>{var L;(L=p==null?void 0:p.current)!=null&&L.contains(R.target)||v()});const g=d||h,A=k&&e?32:0,H=d?d.length*24+([...g,A].length-1)*12:56,y=A+H;return a.jsxs(g6,{"data-testid":l&&`${l}.HeaderNav`,ref:b,className:O({HeaderNav:c},{Open:t}),$headerHeight:i,$variant:r,$burgerPosition:z,$navMobileVariant:o,$navHeight:y,children:[k&&e&&a.jsx(C3,{...e,"data-testid":l,className:c,handleClose:v}),d?d.map(R=>a.jsx(R9,{"data-testid":l,className:c,link:R},C.uuid())):null,f&&f,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,P=[($==null?void 0:$.height)||30,32,35].sort(),q=P[P.length-1]+16*2,[K,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},l2={"data-testid":l,className:t,search:o,isOpen:A,handleClose:R,links:v,children:e,headerHeight:q,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:K},{Open:A}),$burgerPosition:f,$headerHeight:q,$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,{...l2}),!L&&i==="right"&&a.jsx(C3,{...f2}),f==="right"&&a.jsx(w6,{...Q}),i==="right"&&a.jsx(u6,{...l2}),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;
@@ -3842,7 +3842,7 @@ React keys must be passed directly to JSX without using spread:
                         right: 0;
                     }
                 `;default:return null}}}
-`;I([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`
+`;I([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`
     ${({$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

@@ -16,6 +16,7 @@ export function HeaderNav({
     isOpen,
     children,
     links,
+    nav,
     headerHeight,
     variant,
     navMobileVariant,
@@ -73,6 +74,8 @@ export function HeaderNav({
                   ))
                 : null}
 
+            {nav && (nav as any)}
+
             {children && children}
         </Nav>
     )

package/dist/lib/components/Header/subtypes.ts

@@ -15,6 +15,7 @@ export interface ILibHeaderNav
         | "search"
         | "children"
         | "links"
+        | "nav"
         | "variant"
         | "navMobileVariant"
         | "burgerPosition"

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

@@ -1,5 +1,6 @@
 /*=============================================== Header types ===============================================*/
 
+import type { FC } from "react"
 import type {
     LibComponentBase,
     LibHeaderPosition,
@@ -56,12 +57,20 @@ type HeaderPosition = HeaderNotFixed | HeaderFixed
 
 type HeaderWithLinks = HeaderPosition & {
     links: Array<LibHeaderLink>
+    nav?: never
+    children?: never
+}
+
+type HeaderWithNav = HeaderPosition & {
+    links?: never
+    nav: JSX.Element | FC | ReactChildren
     children?: never
 }
 
 type HeaderWithChildren = HeaderPosition & {
     links?: never
+    nav?: never
     children?: ReactChildren
 }
 
-export type ILibHeader = HeaderWithLinks | HeaderWithChildren
+export type ILibHeader = HeaderWithLinks | HeaderWithNav | HeaderWithChildren

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

@@ -57,9 +57,7 @@ export function PageLayout({
             ) : (
                 <>
                     {header && (
-                        <Header {...(header as any)}>
-                            {header?.nav && header?.nav}
-                        </Header>
+                        <Header {...(header as any)} />
                     )}
 
                     {!noWrapper ? (

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"> & { nav?: JSX.Element }
+    header?: Omit<ILibHeader, "children">
     footer?: Omit<ILibFooter, "children">
 }
 

package/package.json

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