@sikt/sds-header 3.0.6 → 3.1.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [3.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@3.0.6...@sikt/sds-header@3.1.0) (2025-05-21)
+
+### Features
+
+- add a top slot for content between skip link & header ([a44ff5f](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/a44ff5f4a7d0b45f0df2b7b362990773e535a20d))
+- **header:** update with new typography ([562b959](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/562b95991fe1b33a2f521db3f0931ceea614b7b4))
+
+### Bug Fixes
+
+- **deps:** update @sikt/sds-button & @sikt/sds-logo ([5d31cd9](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/5d31cd9ade923a9d51f5a0efdcb10ca6e08ea452))
+- **deps:** update @sikt/sds-core ([f1f7023](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f1f7023a7e77980ef15993b0bdac76bff254b651))
+- **deps:** update @sikt/sds-core to 4.4.0 ([9dd6147](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9dd6147cd902975653f03b29db9f580ec19c261c))
+
 ## [3.0.6](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@3.0.5...@sikt/sds-header@3.0.6) (2024-11-20)
 
 ### Bug Fixes

package/dist/index.css

@@ -91,7 +91,7 @@
   display: flex;
 }
 .sds-header .sds-header__logo {
-  font-size: var(--sds-base-size-relative-m);
+  font-size: var(--sds-typography-fontsize-700);
 }
 .sds-header .sds-header__logo-link {
   background-color: unset;
@@ -112,29 +112,32 @@
     display: inline-flex;
   }
 }
+.sds-header__nav-link {
+  text-decoration: none;
+}
 @media (width < 720px) {
   .sds-header__nav-link {
     align-items: center;
-    background-color: transparent;
+    background-color: var( --sds-color-interaction-neutral-transparent-default );
     border: 0 none;
     border-radius: var(--sds-space-border-radius-small);
     color: var(--sds-color-text-primary);
     cursor: pointer;
     display: flex;
     gap: var(--sds-space-gap-small);
-    font-size: var(--sds-typography-body-fontsize-large);
-    font-weight: var(--sds-typography-weight-regular);
-    line-height: var(--sds-typography-body-lineheight-large);
+    font-size: var(--sds-typography-body-default-fontsize);
+    font-weight: var(--sds-typography-body-default-fontweight);
+    line-height: var(--sds-typography-body-default-lineheight);
     padding: var(--sds-space-padding-small);
     text-decoration: none;
     width: 100%;
   }
   .sds-header__nav-link:hover,
   .sds-header__nav-link:focus-visible {
-    background: var(--sds-color-interaction-primary-transparent-highlight);
+    background-color: var( --sds-color-interaction-neutral-transparent-highlight );
   }
   .sds-header__nav-link:active {
-    background: var(--sds-color-interaction-primary-transparent-pressed);
+    background-color: var( --sds-color-interaction-neutral-transparent-pressed );
   }
   .sds-header__nav-link:focus-visible {
     outline: var(--sds-focus-outline);
@@ -146,15 +149,18 @@
     border: 0 none;
     border-bottom: var(--sds-space-border-weight-bold) solid transparent;
     color: var(--sds-color-text-primary);
-    display: inline-flex;
+    display: flex;
     gap: var(--sds-space-gap-small);
-    font-size: var(--sds-typography-body-fontsize-large);
-    line-height: var(--sds-typography-body-lineheight-large);
+    font-size: var(--sds-typography-label-l-fontsize);
+    font-weight: var(--sds-typography-label-l-fontweight);
+    line-height: var(--sds-typography-label-l-lineheight);
     padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);
-    text-decoration: none;
   }
   .sds-header__nav-link-icon {
-    font-size: var(--sds-base-size-m);
+    align-items: center;
+    display: flex;
+    font-size: var(--sds-typography-fontsize-700);
+    justify-content: center;
   }
   .sds-header__nav-link--selected,
   .sds-header__nav-link[aria-current=page] {

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/header.pcss","../src/header-nav.pcss"],"sourcesContent":[".sds-header {\n  align-items: center;\n  position: relative;\n  background-color: var(--sds-color-layout-background-primary);\n\n  --header-height: 48px;\n}\n\n  @media (width >= 720px) {.sds-header {\n    --header-height: 56px\n}\n  }\n\n  @media (width >= 1024px) {.sds-header {\n    --header-height: 72px\n}\n  }\n\n  .sds-header__content {\n    min-height: var(--header-height);\n    padding: 0 var(--sds-space-padding-medium);\n    display: grid;\n    grid-gap: 0 var(--sds-space-padding-small);\n    grid-template-columns: 1fr auto 1fr;\n    align-items: center;\n  }\n\n  .sds-header__header-item {\n    display: none;\n  }\n\n  @media (width >= 720px) {\n\n  .sds-header__header-item {\n      display: unset\n  }\n    }\n\n  .sds-header__header-item--last-item {\n      width: -webkit-fit-content;\n      width: fit-content;\n      justify-self: end;\n    }\n\n  .sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {\n    background-color: var(--sds-color-layout-background-primary);\n    position: absolute;\n    z-index: 1;\n  }\n\n  .sds-header-collapsible__button {\n      grid-column: -2 / -1;\n      justify-self: end;\n      width: -webkit-fit-content;\n      width: fit-content;\n      margin: var(--sds-focus-outline-width) 0;\n    }\n\n  @media (width >= 720px) {\n\n  .sds-header-collapsible__button.sds-button {\n          display: none\n      }\n        }\n\n  .sds-header-collapsible__menu {\n      display: none;\n      gap: var(--sds-space-gap-medium);\n      flex-direction: column;\n      overflow: auto;\n      width: 100%;\n      border-top: var(--sds-space-border-weight-thin) solid\n        var(--sds-color-interaction-primary-strong-default);\n      padding: var(--sds-space-padding-medium);\n    }\n\n  .sds-header-collapsible__menu .sds-header__nav-list {\n        display: flex;\n        flex-direction: column;\n      }\n\n  .sds-header-collapsible__dropdown {\n      position: absolute;\n      top: calc(var(--header-height) + 2 * var(--sds-focus-outline-width));\n      left: 0;\n      background-color: var(--sds-color-layout-background-primary);\n      z-index: calc(var(--sds-base-zindex-drawer) + 1);\n      height: 100vh;\n      width: 100%;\n      max-height: 0;\n      transition: max-height 0.25s ease;\n      overflow: hidden;\n      grid-column: 1 / -1;\n    }\n\n  .sds-header-collapsible__dropdown--open {\n        max-height: calc(100vh - var(--header-height));\n      }\n\n  @media (width >= 720px) {\n\n  .sds-header-collapsible__dropdown {\n        display: none\n    }\n      }\n\n  .sds-header-collapsible__dropdown.sds-header-collapsible__dropdown--open .sds-header-collapsible__menu {\n          display: flex;\n        }\n\n  .sds-header .sds-header__logo {\n    font-size: var(--sds-base-size-relative-m);\n  }\n\n  .sds-header .sds-header__logo-link {\n      background-color: unset;\n      color: inherit;\n      text-decoration: none;\n      width: -webkit-fit-content;\n      width: fit-content;\n    }\n",".sds-header__nav-list {\n    height: 100%;\n    list-style-type: none;\n    margin: 0;\n  }\n  @media (width >= 720px) {\n  .sds-header__nav-item {\n      display: inline-flex\n  }\n    }\n  @media (width < 720px) {\n  .sds-header__nav-link {\n      /* TODO: import this from Drawer component */\n      align-items: center;\n      background-color: transparent;\n      border: 0 none;\n      border-radius: var(--sds-space-border-radius-small);\n      color: var(--sds-color-text-primary);\n      cursor: pointer;\n      display: flex;\n      gap: var(--sds-space-gap-small);\n      font-size: var(--sds-typography-body-fontsize-large);\n      font-weight: var(--sds-typography-weight-regular);\n      line-height: var(--sds-typography-body-lineheight-large);\n      padding: var(--sds-space-padding-small);\n      text-decoration: none;\n      width: 100%\n  }\n\n      .sds-header__nav-link:hover,\n      .sds-header__nav-link:focus-visible {\n        background: var(--sds-color-interaction-primary-transparent-highlight);\n      }\n\n      .sds-header__nav-link:active {\n        background: var(--sds-color-interaction-primary-transparent-pressed);\n      }\n\n      .sds-header__nav-link:focus-visible {\n        outline: var(--sds-focus-outline);\n      }\n    }\n  @media (width >= 720px) {\n  .sds-header__nav-link {\n      /* TODO: import this from Tabs component */\n      align-items: center;\n      border: 0 none;\n      border-bottom: var(--sds-space-border-weight-bold) solid transparent;\n      color: var(--sds-color-text-primary);\n      display: inline-flex;\n      gap: var(--sds-space-gap-small);\n      font-size: var(--sds-typography-body-fontsize-large);\n      line-height: var(--sds-typography-body-lineheight-large);\n      padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);\n\n      /* margin-bottom: calc(var(--sds-space-border-weight-regular) * -1); */\n      text-decoration: none\n  }\n\n      .sds-header__nav-link-icon {\n        font-size: var(--sds-base-size-m);\n      }\n\n      .sds-header__nav-link--selected,\n      .sds-header__nav-link[aria-current=\"page\"] {\n        border-color: var(--sds-color-interaction-primary-strong-default);\n      }\n\n      .sds-header__nav-link:hover,\n      .sds-header__nav-link:focus-visible {\n        background-color: var(\n          --sds-color-interaction-primary-transparent-highlight\n        );\n      }\n\n      .sds-header__nav-link:active {\n        background-color: var(\n          --sds-color-interaction-primary-transparent-pressed\n        );\n        border-color: var(--sds-color-interaction-primary-strong-pressed);\n      }\n\n      .sds-header__nav-link:focus-visible {\n        outline: var(--sds-focus-outline);\n        outline-offset: 0;\n      }\n    }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/header.pcss","../src/header-nav.pcss"],"sourcesContent":[".sds-header {\n  align-items: center;\n  position: relative;\n  background-color: var(--sds-color-layout-background-primary);\n\n  --header-height: 48px;\n}\n\n  @media (width >= 720px) {.sds-header {\n    --header-height: 56px\n}\n  }\n\n  @media (width >= 1024px) {.sds-header {\n    --header-height: 72px\n}\n  }\n\n  .sds-header__content {\n    min-height: var(--header-height);\n    padding: 0 var(--sds-space-padding-medium);\n    display: grid;\n    grid-gap: 0 var(--sds-space-padding-small);\n    grid-template-columns: 1fr auto 1fr;\n    align-items: center;\n  }\n\n  .sds-header__header-item {\n    display: none;\n  }\n\n  @media (width >= 720px) {\n\n  .sds-header__header-item {\n      display: unset\n  }\n    }\n\n  .sds-header__header-item--last-item {\n      width: -webkit-fit-content;\n      width: fit-content;\n      justify-self: end;\n    }\n\n  .sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {\n    background-color: var(--sds-color-layout-background-primary);\n    position: absolute;\n    z-index: 1;\n  }\n\n  .sds-header-collapsible__button {\n      grid-column: -2 / -1;\n      justify-self: end;\n      width: -webkit-fit-content;\n      width: fit-content;\n      margin: var(--sds-focus-outline-width) 0;\n    }\n\n  @media (width >= 720px) {\n\n  .sds-header-collapsible__button.sds-button {\n          display: none\n      }\n        }\n\n  .sds-header-collapsible__menu {\n      display: none;\n      gap: var(--sds-space-gap-medium);\n      flex-direction: column;\n      overflow: auto;\n      width: 100%;\n      border-top: var(--sds-space-border-weight-thin) solid\n        var(--sds-color-interaction-primary-strong-default);\n      padding: var(--sds-space-padding-medium);\n    }\n\n  .sds-header-collapsible__menu .sds-header__nav-list {\n        display: flex;\n        flex-direction: column;\n      }\n\n  .sds-header-collapsible__dropdown {\n      position: absolute;\n      top: calc(var(--header-height) + 2 * var(--sds-focus-outline-width));\n      left: 0;\n      background-color: var(--sds-color-layout-background-primary);\n      z-index: calc(var(--sds-base-zindex-drawer) + 1);\n      height: 100vh;\n      width: 100%;\n      max-height: 0;\n      transition: max-height 0.25s ease;\n      overflow: hidden;\n      grid-column: 1 / -1;\n    }\n\n  .sds-header-collapsible__dropdown--open {\n        max-height: calc(100vh - var(--header-height));\n      }\n\n  @media (width >= 720px) {\n\n  .sds-header-collapsible__dropdown {\n        display: none\n    }\n      }\n\n  .sds-header-collapsible__dropdown.sds-header-collapsible__dropdown--open .sds-header-collapsible__menu {\n          display: flex;\n        }\n\n  .sds-header .sds-header__logo {\n    font-size: var(--sds-typography-fontsize-700);\n  }\n\n  .sds-header .sds-header__logo-link {\n      background-color: unset;\n      color: inherit;\n      text-decoration: none;\n      width: -webkit-fit-content;\n      width: fit-content;\n    }\n",".sds-header__nav-list {\n    height: 100%;\n    list-style-type: none;\n    margin: 0;\n  }\n  @media (width >= 720px) {\n  .sds-header__nav-item {\n      display: inline-flex\n  }\n    }\n  .sds-header__nav-link {\n    text-decoration: none;\n  }\n  @media (width < 720px) {\n  .sds-header__nav-link {\n      /* TODO: import this from Drawer component */\n      align-items: center;\n      background-color: var(\n        --sds-color-interaction-neutral-transparent-default\n      );\n      border: 0 none;\n      border-radius: var(--sds-space-border-radius-small);\n      color: var(--sds-color-text-primary);\n      cursor: pointer;\n      display: flex;\n      gap: var(--sds-space-gap-small);\n      font-size: var(--sds-typography-body-default-fontsize);\n      font-weight: var(--sds-typography-body-default-fontweight);\n      line-height: var(--sds-typography-body-default-lineheight);\n      padding: var(--sds-space-padding-small);\n      text-decoration: none;\n      width: 100%\n  }\n\n      .sds-header__nav-link:hover,\n      .sds-header__nav-link:focus-visible {\n        background-color: var(\n          --sds-color-interaction-neutral-transparent-highlight\n        );\n      }\n\n      .sds-header__nav-link:active {\n        background-color: var(\n          --sds-color-interaction-neutral-transparent-pressed\n        );\n      }\n\n      .sds-header__nav-link:focus-visible {\n        outline: var(--sds-focus-outline);\n      }\n    }\n  @media (width >= 720px) {\n  .sds-header__nav-link {\n      /* TODO: import this from Tabs component */\n      align-items: center;\n      border: 0 none;\n      border-bottom: var(--sds-space-border-weight-bold) solid transparent;\n      color: var(--sds-color-text-primary);\n      display: flex;\n      gap: var(--sds-space-gap-small);\n      font-size: var(--sds-typography-label-l-fontsize);\n      font-weight: var(--sds-typography-label-l-fontweight);\n      line-height: var(--sds-typography-label-l-lineheight);\n      padding: var(--sds-space-padding-medium) var(--sds-space-padding-small)\n\n      /* margin-bottom: calc(var(--sds-space-border-weight-regular) * -1); */\n  }\n\n      .sds-header__nav-link-icon {\n        align-items: center;\n        display: flex;\n        font-size: var(--sds-typography-fontsize-700);\n        justify-content: center;\n      }\n\n      .sds-header__nav-link--selected,\n      .sds-header__nav-link[aria-current=\"page\"] {\n        border-color: var(--sds-color-interaction-primary-strong-default);\n      }\n\n      .sds-header__nav-link:hover,\n      .sds-header__nav-link:focus-visible {\n        background-color: var(\n          --sds-color-interaction-primary-transparent-highlight\n        );\n      }\n\n      .sds-header__nav-link:active {\n        background-color: var(\n          --sds-color-interaction-primary-transparent-pressed\n        );\n        border-color: var(--sds-color-interaction-primary-strong-pressed);\n      }\n\n      .sds-header__nav-link:focus-visible {\n        outline: var(--sds-focus-outline);\n        outline-offset: 0;\n      }\n    }\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -4,12 +4,13 @@ import { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'r
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
     className?: string;
     children?: ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>> | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];
+    topSlot?: ReactNode;
     skipLinkId?: string;
     skipLinkText?: string;
     logoHref?: string;
     logoText?: string;
 }
-declare const Header: ({ children, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => react_jsx_runtime.JSX.Element;
+declare const Header: ({ children, topSlot, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
 interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;

package/dist/index.d.ts

@@ -4,12 +4,13 @@ import { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'r
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
     className?: string;
     children?: ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>> | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];
+    topSlot?: ReactNode;
     skipLinkId?: string;
     skipLinkText?: string;
     logoHref?: string;
     logoText?: string;
 }
-declare const Header: ({ children, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => react_jsx_runtime.JSX.Element;
+declare const Header: ({ children, topSlot, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
 interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("@sikt/sds-core"),s=require("@sikt/sds-logo"),n=require("clsx/lite"),r=require("react/jsx-runtime"),a=require("react"),l=require("@sikt/sds-button"),i=require("@sikt/sds-icons"),t=Object.defineProperty,d=Object.defineProperties,o=Object.getOwnPropertyDescriptors,c=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,p=(e,s,n)=>s in e?t(e,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[s]=n,u=(e,s)=>{for(var n in s||(s={}))m.call(s,n)&&p(e,n,s[n]);if(c)for(var n of c(s))h.call(s,n)&&p(e,n,s[n]);return e},x=(e,s)=>d(e,o(s)),b=(e,s)=>{var n={};for(var r in e)m.call(e,r)&&s.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&c)for(var r of c(e))s.indexOf(r)<0&&h.call(e,r)&&(n[r]=e[r]);return n},_=e=>a.cloneElement(e,{className:n.clsx("sds-header__nav-link",e.props.className)}),v=a.createContext({menuOpen:!1,setMenuOpen:()=>{}});exports.Header=a=>{var l=a,{children:i,className:t,skipLinkId:d="main",skipLinkText:o="Gå til innhold",logoHref:c,logoText:m}=l,h=b(l,["children","className","skipLinkId","skipLinkText","logoHref","logoText"]);const p=m?r.jsx("span",{className:"sds-header__logo-text sds-typography-body--large",children:m}):r.jsx(s.Logo,{variant:"primary",className:"sds-header__logo"});return r.jsxs(r.Fragment,{children:[r.jsx(e.ScreenReaderOnly,{isFocusable:!0,className:"sds-header__skip-link",children:r.jsx(e.Link,{href:"#".concat(d),children:o})}),r.jsx("header",x(u({className:n.clsx("sds-header",t)},h),{children:r.jsxs("div",{className:"sds-header__content",children:[c?r.jsx(e.Link,{href:c,className:"sds-header__logo-link",children:p}):p,i]})}))]})},exports.HeaderCollapsibleMenu=e=>{var s=e,{children:t,dropdownOpen:d=!1,ariaLabelOpenMenu:o="Åpne meny",ariaLabelCloseMenu:c="Lukk meny",ariaLabelClose:m="Lukk"}=s,h=b(s,["children","dropdownOpen","ariaLabelOpenMenu","ariaLabelCloseMenu","ariaLabelClose"]);const p=a.useId(),[_,f]=a.useState(d);function k(){f(!1)}return a.useEffect((()=>{document.body.style.overflow=_?"hidden":"unset";const e=e=>{"Escape"===e.key&&k()},s=e=>{(e.target instanceof HTMLAnchorElement||e.target instanceof HTMLButtonElement)&&k()},n=()=>{k()};if(_){const r=document.getElementById("sds-header-collapsible__mobile-content");r&&(r.addEventListener("click",s),r.addEventListener("submit",n)),window.addEventListener("keydown",e)}return()=>{const r=document.getElementById("sds-header-collapsible__mobile-content");r&&(r.removeEventListener("click",s),r.removeEventListener("submit",n)),window.removeEventListener("keydown",e)}}),[_]),a.useEffect((()=>{f(d)}),[d]),r.jsxs(v.Provider,{value:{menuOpen:_,setMenuOpen:f},children:[a.Children.map(t,((e,s)=>r.jsx(r.Fragment,{children:a.cloneElement(e,{className:n.clsx("sds-header__header-item",s+1===a.Children.count(t)&&"sds-header__header-item--last-item")})}))),r.jsx(l.Button,{variant:"transparent",icon:_?r.jsx(i.XIcon,{}):r.jsx(i.ListIcon,{}),iconVariant:_?"right":"only",onClick:function(){f(!_)},"aria-label":_?c:o,"aria-controls":p,"aria-expanded":_,className:"sds-header-collapsible__button",children:_&&m}),r.jsx("div",x(u({className:n.clsx("sds-header-collapsible__dropdown",_&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!_,id:p},h),{children:r.jsx("div",{id:"sds-header-collapsible__mobile-content",className:"sds-header-collapsible__menu",children:t})}))]})},exports.HeaderNav=e=>{var s=e,{children:l,className:i}=s,t=b(s,["children","className"]);return r.jsx("nav",x(u({className:n.clsx("sds-header__nav",i)},t),{children:r.jsx("ul",{className:"sds-header__nav-list",children:a.Children.map(l,(e=>{if(a.isValidElement(e))return r.jsx("li",{className:"sds-header__nav-item",children:_(e)})}))})}))};//# sourceMappingURL=index.js.map
+"use strict";var e=require("@sikt/sds-core"),s=require("@sikt/sds-logo"),n=require("clsx/lite"),r=require("react/jsx-runtime"),a=require("react"),l=require("@sikt/sds-button"),t=require("@sikt/sds-icons"),i=Object.defineProperty,d=Object.defineProperties,o=Object.getOwnPropertyDescriptors,c=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,h=(e,s,n)=>s in e?i(e,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[s]=n,u=(e,s)=>{for(var n in s||(s={}))m.call(s,n)&&h(e,n,s[n]);if(c)for(var n of c(s))p.call(s,n)&&h(e,n,s[n]);return e},b=(e,s)=>d(e,o(s)),x=(e,s)=>{var n={};for(var r in e)m.call(e,r)&&s.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&c)for(var r of c(e))s.indexOf(r)<0&&p.call(e,r)&&(n[r]=e[r]);return n},_=e=>a.cloneElement(e,{className:n.clsx("sds-header__nav-link",e.props.className)}),v=a.createContext({menuOpen:!1,setMenuOpen:()=>{}});exports.Header=a=>{var l=a,{children:t,topSlot:i,className:d,skipLinkId:o="main",skipLinkText:c="Gå til innhold",logoHref:m,logoText:p}=l,h=x(l,["children","topSlot","className","skipLinkId","skipLinkText","logoHref","logoText"]);const _=p?r.jsx("span",{className:"sds-header__logo-text sds-typography-body--large",children:p}):r.jsx(s.Logo,{variant:"primary",className:"sds-header__logo"});return r.jsxs(r.Fragment,{children:[r.jsx(e.ScreenReaderOnly,{isFocusable:!0,className:"sds-header__skip-link",children:r.jsx(e.Link,{href:"#".concat(o),children:c})}),i,r.jsx("header",b(u({className:n.clsx("sds-header",d)},h),{children:r.jsxs("div",{className:"sds-header__content",children:[m?r.jsx(e.Link,{href:m,className:"sds-header__logo-link",children:_}):_,t]})}))]})},exports.HeaderCollapsibleMenu=e=>{var s=e,{children:i,dropdownOpen:d=!1,ariaLabelOpenMenu:o="Åpne meny",ariaLabelCloseMenu:c="Lukk meny",ariaLabelClose:m="Lukk"}=s,p=x(s,["children","dropdownOpen","ariaLabelOpenMenu","ariaLabelCloseMenu","ariaLabelClose"]);const h=a.useId(),[_,f]=a.useState(d);function k(){f(!1)}return a.useEffect((()=>{document.body.style.overflow=_?"hidden":"unset";const e=e=>{"Escape"===e.key&&k()},s=e=>{(e.target instanceof HTMLAnchorElement||e.target instanceof HTMLButtonElement)&&k()},n=()=>{k()};if(_){const r=document.getElementById("sds-header-collapsible__mobile-content");r&&(r.addEventListener("click",s),r.addEventListener("submit",n)),window.addEventListener("keydown",e)}return()=>{const r=document.getElementById("sds-header-collapsible__mobile-content");r&&(r.removeEventListener("click",s),r.removeEventListener("submit",n)),window.removeEventListener("keydown",e)}}),[_]),a.useEffect((()=>{f(d)}),[d]),r.jsxs(v.Provider,{value:{menuOpen:_,setMenuOpen:f},children:[a.Children.map(i,((e,s)=>a.isValidElement(e)&&a.cloneElement(e,{className:n.clsx("sds-header__header-item",s+1===a.Children.count(i)&&"sds-header__header-item--last-item")}))),r.jsx(l.Button,{variant:"transparent",icon:_?r.jsx(t.CancelIcon,{}):r.jsx(t.MenuIcon,{}),iconVariant:_?"right":"only",onClick:function(){f(!_)},"aria-label":_?c:o,"aria-controls":h,"aria-expanded":_,className:"sds-header-collapsible__button",children:_&&m}),r.jsx("div",b(u({className:n.clsx("sds-header-collapsible__dropdown",_&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!_,id:h},p),{children:r.jsx("div",{id:"sds-header-collapsible__mobile-content",className:"sds-header-collapsible__menu",children:i})}))]})},exports.HeaderNav=e=>{var s=e,{children:l,className:t}=s,i=x(s,["children","className"]);return r.jsx("nav",b(u({className:n.clsx("sds-header__nav",t)},i),{children:r.jsx("ul",{className:"sds-header__nav-list",children:a.Children.map(l,(e=>{if(a.isValidElement(e))return r.jsx("li",{className:"sds-header__nav-item",children:_(e)})}))})}))};//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Header.tsx","../src/HeaderNav.tsx","../src/HeaderCollapsibleMenu.tsx"],"names":["jsx","Logo","jsxs","Fragment","ScreenReaderOnly","Link","clsx","cloneElement","isValidElement","createContext","useId","useState","useEffect","Children","Button","XIcon","ListIcon"],"mappings":"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","file":"index.js","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport { AnchorHTMLAttributes, HTMLAttributes, ReactElement } from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  children?:\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n  skipLinkId?: string;\n  skipLinkText?: string;\n  logoHref?: string;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoHref,\n  logoText,\n  ...rest\n}: HeaderProps) => {\n  const logoElement = logoText ? (\n    <span className=\"sds-header__logo-text sds-typography-body--large\">\n      {logoText}\n    </span>\n  ) : (\n    <Logo variant=\"primary\" className=\"sds-header__logo\" />\n  );\n\n  return (\n    <>\n      <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n        <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n      </ScreenReaderOnly>\n      <header className={clsx(\"sds-header\", className)} {...rest}>\n        <div className=\"sds-header__content\">\n          {logoHref ? (\n            <Link href={logoHref} className=\"sds-header__logo-link\">\n              {logoElement}\n            </Link>\n          ) : (\n            logoElement\n          )}\n\n          {children}\n        </div>\n      </header>\n    </>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\n\nexport interface HeaderNavProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  className?: string;\n}\n\ninterface ChildProps {\n  className?: string;\n}\n\nconst addClassToChildren = (child: ReactElement<ChildProps>) => {\n  return cloneElement(child, {\n    className: clsx(\"sds-header__nav-link\", child.props.className),\n  });\n};\n\nexport const HeaderNav = ({ children, className, ...rest }: HeaderNavProps) => {\n  return (\n    <nav className={clsx(\"sds-header__nav\", className)} {...rest}>\n      <ul className=\"sds-header__nav-list\">\n        {Children.map(children, (child) => {\n          if (isValidElement(child)) {\n            return (\n              <li className=\"sds-header__nav-item\">\n                {addClassToChildren(child as ReactElement<ChildProps>)}\n              </li>\n            );\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ListIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  Dispatch,\n  ReactElement,\n  ReactNode,\n  SetStateAction,\n  cloneElement,\n  createContext,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\n\nconst MenuOpenContext = createContext<{\n  menuOpen: boolean;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}>({\n  menuOpen: false,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  setMenuOpen: () => {},\n});\nexport interface HeaderCollapsibleMenuProps {\n  children: ReactNode;\n  dropdownOpen?: boolean;\n  ariaLabelOpenMenu?: string;\n  ariaLabelCloseMenu?: string;\n  ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n  children,\n  dropdownOpen = false,\n  ariaLabelOpenMenu = \"Åpne meny\",\n  ariaLabelCloseMenu = \"Lukk meny\",\n  ariaLabelClose = \"Lukk\",\n  ...rest\n}: HeaderCollapsibleMenuProps) => {\n  const menuId = useId();\n  const [menuOpen, setMenuOpen] = useState(dropdownOpen);\n\n  function toggleMenu() {\n    setMenuOpen(!menuOpen);\n  }\n\n  function closeMenu() {\n    setMenuOpen(false);\n  }\n\n  useEffect(() => {\n    document.body.style.overflow = menuOpen ? \"hidden\" : \"unset\";\n\n    const closeWithKeyboard = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        closeMenu();\n      }\n    };\n\n    const closeWithClick = (e: MouseEvent) => {\n      if (\n        e.target instanceof HTMLAnchorElement ||\n        e.target instanceof HTMLButtonElement\n      ) {\n        closeMenu();\n      }\n    };\n\n    const closeWithSubmit = () => {\n      closeMenu();\n    };\n\n    if (menuOpen) {\n      const mobileContent = document.getElementById(\n        \"sds-header-collapsible__mobile-content\",\n      );\n      if (mobileContent) {\n        mobileContent.addEventListener(\"click\", closeWithClick);\n        mobileContent.addEventListener(\"submit\", closeWithSubmit);\n      }\n      window.addEventListener(\"keydown\", closeWithKeyboard);\n    }\n    return () => {\n      const mobileContent = document.getElementById(\n        \"sds-header-collapsible__mobile-content\",\n      );\n      if (mobileContent) {\n        mobileContent.removeEventListener(\"click\", closeWithClick);\n        mobileContent.removeEventListener(\"submit\", closeWithSubmit);\n      }\n      window.removeEventListener(\"keydown\", closeWithKeyboard);\n    };\n  }, [menuOpen]);\n\n  useEffect(() => {\n    setMenuOpen(dropdownOpen);\n  }, [dropdownOpen]);\n\n  return (\n    <MenuOpenContext.Provider value={{ menuOpen, setMenuOpen }}>\n      {/* INFO: The desktop mode content of the header */}\n      {Children.map(children, (child, index) => {\n        return (\n          <>\n            {cloneElement(child as ReactElement, {\n              className: clsx(\n                \"sds-header__header-item\",\n                index + 1 === Children.count(children) &&\n                  \"sds-header__header-item--last-item\",\n              ),\n            })}\n          </>\n        );\n      })}\n      <Button\n        variant=\"transparent\"\n        icon={menuOpen ? <XIcon /> : <ListIcon />}\n        iconVariant={menuOpen ? \"right\" : \"only\"}\n        onClick={toggleMenu}\n        aria-label={menuOpen ? ariaLabelCloseMenu : ariaLabelOpenMenu}\n        aria-controls={menuId}\n        aria-expanded={menuOpen}\n        className=\"sds-header-collapsible__button\"\n      >\n        {menuOpen && ariaLabelClose}\n      </Button>\n      <div\n        className={clsx(\n          \"sds-header-collapsible__dropdown\",\n          menuOpen && \"sds-header-collapsible__dropdown--open\",\n        )}\n        aria-hidden={!menuOpen}\n        id={menuId}\n        {...rest}\n      >\n        <div\n          id=\"sds-header-collapsible__mobile-content\"\n          className=\"sds-header-collapsible__menu\"\n        >\n          {/* INFO: The mobile mode content of the header */}\n          {children}\n        </div>\n      </div>\n    </MenuOpenContext.Provider>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Header.tsx","../src/HeaderNav.tsx","../src/HeaderCollapsibleMenu.tsx"],"names":["jsx","Logo","jsxs","Fragment","ScreenReaderOnly","Link","clsx","cloneElement","isValidElement","createContext","useId","useState","useEffect","Children","Button","CancelIcon","MenuIcon"],"mappings":"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","file":"index.js","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  children?:\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n  topSlot?: ReactNode;\n  skipLinkId?: string;\n  skipLinkText?: string;\n  logoHref?: string;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  topSlot,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoHref,\n  logoText,\n  ...rest\n}: HeaderProps) => {\n  const logoElement = logoText ? (\n    <span className=\"sds-header__logo-text sds-typography-body--large\">\n      {logoText}\n    </span>\n  ) : (\n    <Logo variant=\"primary\" className=\"sds-header__logo\" />\n  );\n\n  return (\n    <>\n      <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n        <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n      </ScreenReaderOnly>\n      {topSlot}\n      <header className={clsx(\"sds-header\", className)} {...rest}>\n        <div className=\"sds-header__content\">\n          {logoHref ? (\n            <Link href={logoHref} className=\"sds-header__logo-link\">\n              {logoElement}\n            </Link>\n          ) : (\n            logoElement\n          )}\n\n          {children}\n        </div>\n      </header>\n    </>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\n\nexport interface HeaderNavProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  className?: string;\n}\n\ninterface ChildProps {\n  className?: string;\n}\n\nconst addClassToChildren = (child: ReactElement<ChildProps>) => {\n  return cloneElement(child, {\n    className: clsx(\"sds-header__nav-link\", child.props.className),\n  });\n};\n\nexport const HeaderNav = ({ children, className, ...rest }: HeaderNavProps) => {\n  return (\n    <nav className={clsx(\"sds-header__nav\", className)} {...rest}>\n      <ul className=\"sds-header__nav-list\">\n        {Children.map(children, (child) => {\n          if (isValidElement(child)) {\n            return (\n              <li className=\"sds-header__nav-item\">\n                {addClassToChildren(child as ReactElement<ChildProps>)}\n              </li>\n            );\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { MenuIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  Dispatch,\n  ReactElement,\n  ReactNode,\n  SetStateAction,\n  cloneElement,\n  createContext,\n  useEffect,\n  useId,\n  useState,\n  isValidElement,\n  PropsWithChildren,\n  AnchorHTMLAttributes,\n} from \"react\";\n\nconst MenuOpenContext = createContext<{\n  menuOpen: boolean;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}>({\n  menuOpen: false,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  setMenuOpen: () => {},\n});\nexport interface HeaderCollapsibleMenuProps {\n  children: ReactNode;\n  dropdownOpen?: boolean;\n  ariaLabelOpenMenu?: string;\n  ariaLabelCloseMenu?: string;\n  ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n  children,\n  dropdownOpen = false,\n  ariaLabelOpenMenu = \"Åpne meny\",\n  ariaLabelCloseMenu = \"Lukk meny\",\n  ariaLabelClose = \"Lukk\",\n  ...rest\n}: HeaderCollapsibleMenuProps) => {\n  const menuId = useId();\n  const [menuOpen, setMenuOpen] = useState(dropdownOpen);\n\n  function toggleMenu() {\n    setMenuOpen(!menuOpen);\n  }\n\n  function closeMenu() {\n    setMenuOpen(false);\n  }\n\n  useEffect(() => {\n    document.body.style.overflow = menuOpen ? \"hidden\" : \"unset\";\n\n    const closeWithKeyboard = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        closeMenu();\n      }\n    };\n\n    const closeWithClick = (e: MouseEvent) => {\n      if (\n        e.target instanceof HTMLAnchorElement ||\n        e.target instanceof HTMLButtonElement\n      ) {\n        closeMenu();\n      }\n    };\n\n    const closeWithSubmit = () => {\n      closeMenu();\n    };\n\n    if (menuOpen) {\n      const mobileContent = document.getElementById(\n        \"sds-header-collapsible__mobile-content\",\n      );\n      if (mobileContent) {\n        mobileContent.addEventListener(\"click\", closeWithClick);\n        mobileContent.addEventListener(\"submit\", closeWithSubmit);\n      }\n      window.addEventListener(\"keydown\", closeWithKeyboard);\n    }\n    return () => {\n      const mobileContent = document.getElementById(\n        \"sds-header-collapsible__mobile-content\",\n      );\n      if (mobileContent) {\n        mobileContent.removeEventListener(\"click\", closeWithClick);\n        mobileContent.removeEventListener(\"submit\", closeWithSubmit);\n      }\n      window.removeEventListener(\"keydown\", closeWithKeyboard);\n    };\n  }, [menuOpen]);\n\n  useEffect(() => {\n    setMenuOpen(dropdownOpen);\n  }, [dropdownOpen]);\n\n  return (\n    <MenuOpenContext.Provider value={{ menuOpen, setMenuOpen }}>\n      {/* INFO: The desktop mode content of the header */}\n      {Children.map(children, (child, index) => {\n        return (\n          isValidElement(child) &&\n          cloneElement(\n            child as ReactElement<\n              PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>\n            >,\n            {\n              className: clsx(\n                \"sds-header__header-item\",\n                index + 1 === Children.count(children) &&\n                  \"sds-header__header-item--last-item\",\n              ),\n            },\n          )\n        );\n      })}\n      <Button\n        variant=\"transparent\"\n        icon={menuOpen ? <CancelIcon /> : <MenuIcon />}\n        iconVariant={menuOpen ? \"right\" : \"only\"}\n        onClick={toggleMenu}\n        aria-label={menuOpen ? ariaLabelCloseMenu : ariaLabelOpenMenu}\n        aria-controls={menuId}\n        aria-expanded={menuOpen}\n        className=\"sds-header-collapsible__button\"\n      >\n        {menuOpen && ariaLabelClose}\n      </Button>\n      <div\n        className={clsx(\n          \"sds-header-collapsible__dropdown\",\n          menuOpen && \"sds-header-collapsible__dropdown--open\",\n        )}\n        aria-hidden={!menuOpen}\n        id={menuId}\n        {...rest}\n      >\n        <div\n          id=\"sds-header-collapsible__mobile-content\"\n          className=\"sds-header-collapsible__menu\"\n        >\n          {/* INFO: The mobile mode content of the header */}\n          {children}\n        </div>\n      </div>\n    </MenuOpenContext.Provider>\n  );\n};\n"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{ScreenReaderOnly as e,Link as r}from"@sikt/sds-core";import{Logo as n}from"@sikt/sds-logo";import{clsx as a}from"clsx/lite";import{jsxs as s,Fragment as l,jsx as i}from"react/jsx-runtime";import{createContext as t,Children as o,isValidElement as d,useId as c,useState as m,useEffect as p,cloneElement as h}from"react";import{Button as u}from"@sikt/sds-button";import{XIcon as _,ListIcon as b}from"@sikt/sds-icons";var v=Object.defineProperty,f=Object.defineProperties,k=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertySymbols,L=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable,O=(e,r,n)=>r in e?v(e,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[r]=n,g=(e,r)=>{for(var n in r||(r={}))L.call(r,n)&&O(e,n,r[n]);if(y)for(var n of y(r))N.call(r,n)&&O(e,n,r[n]);return e},w=(e,r)=>f(e,k(r)),E=(e,r)=>{var n={};for(var a in e)L.call(e,a)&&r.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&y)for(var a of y(e))r.indexOf(a)<0&&N.call(e,a)&&(n[a]=e[a]);return n},x=t=>{var o=t,{children:d,className:c,skipLinkId:m="main",skipLinkText:p="Gå til innhold",logoHref:h,logoText:u}=o,_=E(o,["children","className","skipLinkId","skipLinkText","logoHref","logoText"]);const b=u?i("span",{className:"sds-header__logo-text sds-typography-body--large",children:u}):i(n,{variant:"primary",className:"sds-header__logo"});return s(l,{children:[i(e,{isFocusable:!0,className:"sds-header__skip-link",children:i(r,{href:"#".concat(m),children:p})}),i("header",w(g({className:a("sds-header",c)},_),{children:s("div",{className:"sds-header__content",children:[h?i(r,{href:h,className:"sds-header__logo-link",children:b}):b,d]})}))]})},M=e=>h(e,{className:a("sds-header__nav-link",e.props.className)}),j=e=>{var r=e,{children:n,className:s}=r,l=E(r,["children","className"]);return i("nav",w(g({className:a("sds-header__nav",s)},l),{children:i("ul",{className:"sds-header__nav-list",children:o.map(n,(e=>{if(d(e))return i("li",{className:"sds-header__nav-item",children:M(e)})}))})}))},P=t({menuOpen:!1,setMenuOpen:()=>{}}),T=e=>{var r=e,{children:n,dropdownOpen:t=!1,ariaLabelOpenMenu:d="Åpne meny",ariaLabelCloseMenu:v="Lukk meny",ariaLabelClose:f="Lukk"}=r,k=E(r,["children","dropdownOpen","ariaLabelOpenMenu","ariaLabelCloseMenu","ariaLabelClose"]);const y=c(),[L,N]=m(t);function O(){N(!1)}return p((()=>{document.body.style.overflow=L?"hidden":"unset";const e=e=>{"Escape"===e.key&&O()},r=e=>{(e.target instanceof HTMLAnchorElement||e.target instanceof HTMLButtonElement)&&O()},n=()=>{O()};if(L){const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.addEventListener("click",r),a.addEventListener("submit",n)),window.addEventListener("keydown",e)}return()=>{const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.removeEventListener("click",r),a.removeEventListener("submit",n)),window.removeEventListener("keydown",e)}}),[L]),p((()=>{N(t)}),[t]),s(P.Provider,{value:{menuOpen:L,setMenuOpen:N},children:[o.map(n,((e,r)=>i(l,{children:h(e,{className:a("sds-header__header-item",r+1===o.count(n)&&"sds-header__header-item--last-item")})}))),i(u,{variant:"transparent",icon:i(L?_:b,{}),iconVariant:L?"right":"only",onClick:function(){N(!L)},"aria-label":L?v:d,"aria-controls":y,"aria-expanded":L,className:"sds-header-collapsible__button",children:L&&f}),i("div",w(g({className:a("sds-header-collapsible__dropdown",L&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!L,id:y},k),{children:i("div",{id:"sds-header-collapsible__mobile-content",className:"sds-header-collapsible__menu",children:n})}))]})};export{x as Header,T as HeaderCollapsibleMenu,j as HeaderNav};//# sourceMappingURL=index.mjs.map
+import{ScreenReaderOnly as e,Link as r}from"@sikt/sds-core";import{Logo as a}from"@sikt/sds-logo";import{clsx as n}from"clsx/lite";import{jsxs as s,Fragment as l,jsx as t}from"react/jsx-runtime";import{createContext as i,Children as o,isValidElement as d,useId as c,useState as m,useEffect as p,cloneElement as h}from"react";import{Button as u}from"@sikt/sds-button";import{CancelIcon as _,MenuIcon as b}from"@sikt/sds-icons";var v=Object.defineProperty,f=Object.defineProperties,k=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertySymbols,L=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable,O=(e,r,a)=>r in e?v(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,g=(e,r)=>{for(var a in r||(r={}))L.call(r,a)&&O(e,a,r[a]);if(y)for(var a of y(r))N.call(r,a)&&O(e,a,r[a]);return e},w=(e,r)=>f(e,k(r)),E=(e,r)=>{var a={};for(var n in e)L.call(e,n)&&r.indexOf(n)<0&&(a[n]=e[n]);if(null!=e&&y)for(var n of y(e))r.indexOf(n)<0&&N.call(e,n)&&(a[n]=e[n]);return a},x=i=>{var o=i,{children:d,topSlot:c,className:m,skipLinkId:p="main",skipLinkText:h="Gå til innhold",logoHref:u,logoText:_}=o,b=E(o,["children","topSlot","className","skipLinkId","skipLinkText","logoHref","logoText"]);const v=_?t("span",{className:"sds-header__logo-text sds-typography-body--large",children:_}):t(a,{variant:"primary",className:"sds-header__logo"});return s(l,{children:[t(e,{isFocusable:!0,className:"sds-header__skip-link",children:t(r,{href:"#".concat(p),children:h})}),c,t("header",w(g({className:n("sds-header",m)},b),{children:s("div",{className:"sds-header__content",children:[u?t(r,{href:u,className:"sds-header__logo-link",children:v}):v,d]})}))]})},M=e=>h(e,{className:n("sds-header__nav-link",e.props.className)}),j=e=>{var r=e,{children:a,className:s}=r,l=E(r,["children","className"]);return t("nav",w(g({className:n("sds-header__nav",s)},l),{children:t("ul",{className:"sds-header__nav-list",children:o.map(a,(e=>{if(d(e))return t("li",{className:"sds-header__nav-item",children:M(e)})}))})}))},P=i({menuOpen:!1,setMenuOpen:()=>{}}),T=e=>{var r=e,{children:a,dropdownOpen:l=!1,ariaLabelOpenMenu:i="Åpne meny",ariaLabelCloseMenu:v="Lukk meny",ariaLabelClose:f="Lukk"}=r,k=E(r,["children","dropdownOpen","ariaLabelOpenMenu","ariaLabelCloseMenu","ariaLabelClose"]);const y=c(),[L,N]=m(l);function O(){N(!1)}return p((()=>{document.body.style.overflow=L?"hidden":"unset";const e=e=>{"Escape"===e.key&&O()},r=e=>{(e.target instanceof HTMLAnchorElement||e.target instanceof HTMLButtonElement)&&O()},a=()=>{O()};if(L){const n=document.getElementById("sds-header-collapsible__mobile-content");n&&(n.addEventListener("click",r),n.addEventListener("submit",a)),window.addEventListener("keydown",e)}return()=>{const n=document.getElementById("sds-header-collapsible__mobile-content");n&&(n.removeEventListener("click",r),n.removeEventListener("submit",a)),window.removeEventListener("keydown",e)}}),[L]),p((()=>{N(l)}),[l]),s(P.Provider,{value:{menuOpen:L,setMenuOpen:N},children:[o.map(a,((e,r)=>d(e)&&h(e,{className:n("sds-header__header-item",r+1===o.count(a)&&"sds-header__header-item--last-item")}))),t(u,{variant:"transparent",icon:t(L?_:b,{}),iconVariant:L?"right":"only",onClick:function(){N(!L)},"aria-label":L?v:i,"aria-controls":y,"aria-expanded":L,className:"sds-header-collapsible__button",children:L&&f}),t("div",w(g({className:n("sds-header-collapsible__dropdown",L&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!L,id:y},k),{children:t("div",{id:"sds-header-collapsible__mobile-content",className:"sds-header-collapsible__menu",children:a})}))]})};export{x as Header,T as HeaderCollapsibleMenu,j as HeaderNav};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Header.tsx","../src/HeaderNav.tsx","../src/HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","jsxs","Children","Fragment","cloneElement"],"mappings":"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","file":"index.mjs","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport { AnchorHTMLAttributes, HTMLAttributes, ReactElement } from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  children?:\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n  skipLinkId?: string;\n  skipLinkText?: string;\n  logoHref?: string;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoHref,\n  logoText,\n  ...rest\n}: HeaderProps) => {\n  const logoElement = logoText ? (\n    <span className=\"sds-header__logo-text sds-typography-body--large\">\n      {logoText}\n    </span>\n  ) : (\n    <Logo variant=\"primary\" className=\"sds-header__logo\" />\n  );\n\n  return (\n    <>\n      <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n        <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n      </ScreenReaderOnly>\n      <header className={clsx(\"sds-header\", className)} {...rest}>\n        <div className=\"sds-header__content\">\n          {logoHref ? (\n            <Link href={logoHref} className=\"sds-header__logo-link\">\n              {logoElement}\n            </Link>\n          ) : (\n            logoElement\n          )}\n\n          {children}\n        </div>\n      </header>\n    </>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\n\nexport interface HeaderNavProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  className?: string;\n}\n\ninterface ChildProps {\n  className?: string;\n}\n\nconst addClassToChildren = (child: ReactElement<ChildProps>) => {\n  return cloneElement(child, {\n    className: clsx(\"sds-header__nav-link\", child.props.className),\n  });\n};\n\nexport const HeaderNav = ({ children, className, ...rest }: HeaderNavProps) => {\n  return (\n    <nav className={clsx(\"sds-header__nav\", className)} {...rest}>\n      <ul className=\"sds-header__nav-list\">\n        {Children.map(children, (child) => {\n          if (isValidElement(child)) {\n            return (\n              <li className=\"sds-header__nav-item\">\n                {addClassToChildren(child as ReactElement<ChildProps>)}\n              </li>\n            );\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ListIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  Dispatch,\n  ReactElement,\n  ReactNode,\n  SetStateAction,\n  cloneElement,\n  createContext,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\n\nconst MenuOpenContext = createContext<{\n  menuOpen: boolean;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}>({\n  menuOpen: false,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  setMenuOpen: () => {},\n});\nexport interface HeaderCollapsibleMenuProps {\n  children: ReactNode;\n  dropdownOpen?: boolean;\n  ariaLabelOpenMenu?: string;\n  ariaLabelCloseMenu?: string;\n  ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n  children,\n  dropdownOpen = false,\n  ariaLabelOpenMenu = \"Åpne meny\",\n  ariaLabelCloseMenu = \"Lukk meny\",\n  ariaLabelClose = \"Lukk\",\n  ...rest\n}: HeaderCollapsibleMenuProps) => {\n  const menuId = useId();\n  const [menuOpen, setMenuOpen] = useState(dropdownOpen);\n\n  function toggleMenu() {\n    setMenuOpen(!menuOpen);\n  }\n\n  function closeMenu() {\n    setMenuOpen(false);\n  }\n\n  useEffect(() => {\n    document.body.style.overflow = menuOpen ? \"hidden\" : \"unset\";\n\n    const closeWithKeyboard = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        closeMenu();\n      }\n    };\n\n    const closeWithClick = (e: MouseEvent) => {\n      if (\n        e.target instanceof HTMLAnchorElement ||\n        e.target instanceof HTMLButtonElement\n      ) {\n        closeMenu();\n      }\n    };\n\n    const closeWithSubmit = () => {\n      closeMenu();\n    };\n\n    if (menuOpen) {\n      const mobileContent = document.getElementById(\n        \"sds-header-collapsible__mobile-content\",\n      );\n      if (mobileContent) {\n        mobileContent.addEventListener(\"click\", closeWithClick);\n        mobileContent.addEventListener(\"submit\", closeWithSubmit);\n      }\n      window.addEventListener(\"keydown\", closeWithKeyboard);\n    }\n    return () => {\n      const mobileContent = document.getElementById(\n        \"sds-header-collapsible__mobile-content\",\n      );\n      if (mobileContent) {\n        mobileContent.removeEventListener(\"click\", closeWithClick);\n        mobileContent.removeEventListener(\"submit\", closeWithSubmit);\n      }\n      window.removeEventListener(\"keydown\", closeWithKeyboard);\n    };\n  }, [menuOpen]);\n\n  useEffect(() => {\n    setMenuOpen(dropdownOpen);\n  }, [dropdownOpen]);\n\n  return (\n    <MenuOpenContext.Provider value={{ menuOpen, setMenuOpen }}>\n      {/* INFO: The desktop mode content of the header */}\n      {Children.map(children, (child, index) => {\n        return (\n          <>\n            {cloneElement(child as ReactElement, {\n              className: clsx(\n                \"sds-header__header-item\",\n                index + 1 === Children.count(children) &&\n                  \"sds-header__header-item--last-item\",\n              ),\n            })}\n          </>\n        );\n      })}\n      <Button\n        variant=\"transparent\"\n        icon={menuOpen ? <XIcon /> : <ListIcon />}\n        iconVariant={menuOpen ? \"right\" : \"only\"}\n        onClick={toggleMenu}\n        aria-label={menuOpen ? ariaLabelCloseMenu : ariaLabelOpenMenu}\n        aria-controls={menuId}\n        aria-expanded={menuOpen}\n        className=\"sds-header-collapsible__button\"\n      >\n        {menuOpen && ariaLabelClose}\n      </Button>\n      <div\n        className={clsx(\n          \"sds-header-collapsible__dropdown\",\n          menuOpen && \"sds-header-collapsible__dropdown--open\",\n        )}\n        aria-hidden={!menuOpen}\n        id={menuId}\n        {...rest}\n      >\n        <div\n          id=\"sds-header-collapsible__mobile-content\"\n          className=\"sds-header-collapsible__menu\"\n        >\n          {/* INFO: The mobile mode content of the header */}\n          {children}\n        </div>\n      </div>\n    </MenuOpenContext.Provider>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Header.tsx","../src/HeaderNav.tsx","../src/HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","jsxs","Children","isValidElement","cloneElement"],"mappings":"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","file":"index.mjs","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  children?:\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n  topSlot?: ReactNode;\n  skipLinkId?: string;\n  skipLinkText?: string;\n  logoHref?: string;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  topSlot,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoHref,\n  logoText,\n  ...rest\n}: HeaderProps) => {\n  const logoElement = logoText ? (\n    <span className=\"sds-header__logo-text sds-typography-body--large\">\n      {logoText}\n    </span>\n  ) : (\n    <Logo variant=\"primary\" className=\"sds-header__logo\" />\n  );\n\n  return (\n    <>\n      <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n        <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n      </ScreenReaderOnly>\n      {topSlot}\n      <header className={clsx(\"sds-header\", className)} {...rest}>\n        <div className=\"sds-header__content\">\n          {logoHref ? (\n            <Link href={logoHref} className=\"sds-header__logo-link\">\n              {logoElement}\n            </Link>\n          ) : (\n            logoElement\n          )}\n\n          {children}\n        </div>\n      </header>\n    </>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\n\nexport interface HeaderNavProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  className?: string;\n}\n\ninterface ChildProps {\n  className?: string;\n}\n\nconst addClassToChildren = (child: ReactElement<ChildProps>) => {\n  return cloneElement(child, {\n    className: clsx(\"sds-header__nav-link\", child.props.className),\n  });\n};\n\nexport const HeaderNav = ({ children, className, ...rest }: HeaderNavProps) => {\n  return (\n    <nav className={clsx(\"sds-header__nav\", className)} {...rest}>\n      <ul className=\"sds-header__nav-list\">\n        {Children.map(children, (child) => {\n          if (isValidElement(child)) {\n            return (\n              <li className=\"sds-header__nav-item\">\n                {addClassToChildren(child as ReactElement<ChildProps>)}\n              </li>\n            );\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { MenuIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  Dispatch,\n  ReactElement,\n  ReactNode,\n  SetStateAction,\n  cloneElement,\n  createContext,\n  useEffect,\n  useId,\n  useState,\n  isValidElement,\n  PropsWithChildren,\n  AnchorHTMLAttributes,\n} from \"react\";\n\nconst MenuOpenContext = createContext<{\n  menuOpen: boolean;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}>({\n  menuOpen: false,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  setMenuOpen: () => {},\n});\nexport interface HeaderCollapsibleMenuProps {\n  children: ReactNode;\n  dropdownOpen?: boolean;\n  ariaLabelOpenMenu?: string;\n  ariaLabelCloseMenu?: string;\n  ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n  children,\n  dropdownOpen = false,\n  ariaLabelOpenMenu = \"Åpne meny\",\n  ariaLabelCloseMenu = \"Lukk meny\",\n  ariaLabelClose = \"Lukk\",\n  ...rest\n}: HeaderCollapsibleMenuProps) => {\n  const menuId = useId();\n  const [menuOpen, setMenuOpen] = useState(dropdownOpen);\n\n  function toggleMenu() {\n    setMenuOpen(!menuOpen);\n  }\n\n  function closeMenu() {\n    setMenuOpen(false);\n  }\n\n  useEffect(() => {\n    document.body.style.overflow = menuOpen ? \"hidden\" : \"unset\";\n\n    const closeWithKeyboard = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        closeMenu();\n      }\n    };\n\n    const closeWithClick = (e: MouseEvent) => {\n      if (\n        e.target instanceof HTMLAnchorElement ||\n        e.target instanceof HTMLButtonElement\n      ) {\n        closeMenu();\n      }\n    };\n\n    const closeWithSubmit = () => {\n      closeMenu();\n    };\n\n    if (menuOpen) {\n      const mobileContent = document.getElementById(\n        \"sds-header-collapsible__mobile-content\",\n      );\n      if (mobileContent) {\n        mobileContent.addEventListener(\"click\", closeWithClick);\n        mobileContent.addEventListener(\"submit\", closeWithSubmit);\n      }\n      window.addEventListener(\"keydown\", closeWithKeyboard);\n    }\n    return () => {\n      const mobileContent = document.getElementById(\n        \"sds-header-collapsible__mobile-content\",\n      );\n      if (mobileContent) {\n        mobileContent.removeEventListener(\"click\", closeWithClick);\n        mobileContent.removeEventListener(\"submit\", closeWithSubmit);\n      }\n      window.removeEventListener(\"keydown\", closeWithKeyboard);\n    };\n  }, [menuOpen]);\n\n  useEffect(() => {\n    setMenuOpen(dropdownOpen);\n  }, [dropdownOpen]);\n\n  return (\n    <MenuOpenContext.Provider value={{ menuOpen, setMenuOpen }}>\n      {/* INFO: The desktop mode content of the header */}\n      {Children.map(children, (child, index) => {\n        return (\n          isValidElement(child) &&\n          cloneElement(\n            child as ReactElement<\n              PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>\n            >,\n            {\n              className: clsx(\n                \"sds-header__header-item\",\n                index + 1 === Children.count(children) &&\n                  \"sds-header__header-item--last-item\",\n              ),\n            },\n          )\n        );\n      })}\n      <Button\n        variant=\"transparent\"\n        icon={menuOpen ? <CancelIcon /> : <MenuIcon />}\n        iconVariant={menuOpen ? \"right\" : \"only\"}\n        onClick={toggleMenu}\n        aria-label={menuOpen ? ariaLabelCloseMenu : ariaLabelOpenMenu}\n        aria-controls={menuId}\n        aria-expanded={menuOpen}\n        className=\"sds-header-collapsible__button\"\n      >\n        {menuOpen && ariaLabelClose}\n      </Button>\n      <div\n        className={clsx(\n          \"sds-header-collapsible__dropdown\",\n          menuOpen && \"sds-header-collapsible__dropdown--open\",\n        )}\n        aria-hidden={!menuOpen}\n        id={menuId}\n        {...rest}\n      >\n        <div\n          id=\"sds-header-collapsible__mobile-content\"\n          className=\"sds-header-collapsible__menu\"\n        >\n          {/* INFO: The mobile mode content of the header */}\n          {children}\n        </div>\n      </div>\n    </MenuOpenContext.Provider>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-header",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {
@@ -35,10 +35,10 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@sikt/sds-button": "^4.0.1",
-    "@sikt/sds-core": "^4.1.1",
-    "@sikt/sds-icons": "^2.0.2",
-    "@sikt/sds-logo": "^2.0.1"
+    "@sikt/sds-button": "^4.2.0",
+    "@sikt/sds-core": "^4.6.0",
+    "@sikt/sds-icons": "^3.0.0",
+    "@sikt/sds-logo": "^2.1.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",
@@ -48,6 +48,6 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@sikt/sds-tokens": "^2.1.0"
+    "@sikt/sds-tokens": "^3.0.0"
   }
 }