@sikt/sds-header 3.0.3 → 3.0.5

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Changelog
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+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.0.5](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@3.0.4...@sikt/sds-header@3.0.5) (2024-04-10)
+
+### Bug Fixes
+
+- **deps:** update sds-icons ([8a3e1ae](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8a3e1ae229148b84f603089337b8a8f54d23fe39))
+
+### [3.0.4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@3.0.3...@sikt/sds-header@3.0.4) (2024-04-09)
+
+### Bug Fixes
+
+- **header:** add missing deps sds-icons & button ([1e7d6d4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/1e7d6d4a78ed5356173d28089f706ee85c847d05))
+- **header:** remove obsolete clickable area of logo link ([558221c](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/558221cbcfaf06edbeb3a92478a5540d4fcafd10))
 
 ### [3.0.3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@3.0.2...@sikt/sds-header@3.0.3) (2024-01-03)
 

package/dist/index.css

@@ -99,6 +99,9 @@
   background-color: unset;
   color: inherit;
   text-decoration: none;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
 /* header-nav.pcss */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../header.pcss","../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: -moz-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: -moz-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    }\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      margin-bottom: calc(var(--tab-list-border-bottom) * -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":["../header.pcss","../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: -moz-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: -moz-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: -moz-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      margin-bottom: calc(var(--tab-list-border-bottom) * -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":[]}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'react';
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
     className?: string;
@@ -18,7 +18,7 @@ interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
 declare const HeaderNav: ({ children, className, ...rest }: HeaderNavProps) => react_jsx_runtime.JSX.Element;
 
 interface HeaderCollapsibleMenuProps {
-    children: React.ReactNode;
+    children: ReactNode;
     dropdownOpen?: boolean;
     ariaLabelOpenMenu?: string;
     ariaLabelCloseMenu?: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'react';
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
     className?: string;
@@ -18,7 +18,7 @@ interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
 declare const HeaderNav: ({ children, className, ...rest }: HeaderNavProps) => react_jsx_runtime.JSX.Element;
 
 interface HeaderCollapsibleMenuProps {
-    children: React.ReactNode;
+    children: ReactNode;
     dropdownOpen?: boolean;
     ariaLabelOpenMenu?: string;
     ariaLabelCloseMenu?: string;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("clsx"),s=require("@sikt/sds-core"),a=require("@sikt/sds-logo"),n=require("react/jsx-runtime"),l=require("react");function t(e){return e&&e.__esModule?e:{default:e}}var r=t(e),d=({variant:e="subtle",size:s="default",children:a,className:l,onClick:t,icon:d,iconVariant:i="right",...o})=>{const c="string"==typeof a?a:void 0;return n.jsxs("button",{className:r.default("sds-button","sds-button--".concat(e),"default"!==s&&"sds-button--".concat(s),l),onClick:t,"aria-label":"only"===i?c:void 0,...o,children:[d&&("left"===i||"only"===i)&&n.jsx("span",{className:"sds-button__icon",children:d}),(!d||"only"!==i)&&n.jsx("span",{className:"sds-button__label",children:a}),d&&"right"===i&&n.jsx("span",{className:"sds-button__icon",children:d})]})};l.forwardRef((({variant:e="subtle",size:s="default",children:a,className:l,href:t,icon:d,iconVariant:i="right",...o},c)=>{const u="string"==typeof a?a:void 0;return n.jsxs("a",{ref:c,className:r.default("sds-button-link","sds-button","sds-button--".concat(e),"default"!==s&&"sds-button--".concat(s),l),href:t,"aria-label":"only"===i?u:void 0,...o,children:[d&&("left"===i||"only"===i)&&n.jsx("span",{className:"sds-button__icon",children:d}),(!d||"only"!==i)&&n.jsx("span",{className:"sds-button__label",children:a}),d&&"right"===i&&n.jsx("span",{className:"sds-button__icon",children:d})]})})).displayName="ButtonLink";var i=({className:e,...s})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 256 256",className:r.default("sds-icon",e),"aria-hidden":"true",...s,children:n.jsx("path",{d:"M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8ZM40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16Zm176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16Z"})}),o=({className:e,...s})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 256 256",className:r.default("sds-icon",e),"aria-hidden":"true",...s,children:n.jsx("path",{d:"M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"})}),c=l.createContext({menuOpen:!1,setMenuOpen:()=>{}});exports.Header=({children:e,className:l,skipLinkId:t="main",skipLinkText:d="Gå til innhold",logoHref:i,logoText:o,...c})=>{const u=o?n.jsx("span",{className:"sds-header__logo-text sds-typography-body--large",children:o}):n.jsx(a.Logo,{variant:"primary",className:"sds-header__logo"});return n.jsxs(n.Fragment,{children:[n.jsx(s.ScreenReaderOnly,{isFocusable:!0,className:"sds-header__skip-link",children:n.jsx(s.Link,{href:"#".concat(t),children:d})}),n.jsx("header",{className:r.default("sds-header",l),...c,children:n.jsxs("div",{className:"sds-header__content",children:[i?n.jsx(s.Link,{href:i,className:"sds-header__logo-link",children:u}):u,e]})})]})},exports.HeaderCollapsibleMenu=({children:e,dropdownOpen:s=!1,ariaLabelOpenMenu:a="Åpne meny",ariaLabelCloseMenu:t="Lukk meny",ariaLabelClose:u="Lukk",...h})=>{const m=l.useId(),[_,p]=l.useState(s);function x(){p(!1)}return l.useEffect((()=>{document.body.style.overflow=_?"hidden":"unset";const e=e=>{"Escape"===e.key&&x()},s=e=>{(e.target instanceof HTMLAnchorElement||e.target instanceof HTMLButtonElement)&&x()},a=()=>{x()};if(_){const n=document.getElementById("sds-header-collapsible__mobile-content");n&&(n.addEventListener("click",s),n.addEventListener("submit",a)),window.addEventListener("keydown",e)}return()=>{const n=document.getElementById("sds-header-collapsible__mobile-content");n&&(n.removeEventListener("click",s),n.removeEventListener("submit",a)),window.removeEventListener("keydown",e)}}),[_]),l.useEffect((()=>{p(s)}),[s]),n.jsxs(c.Provider,{value:{menuOpen:_,setMenuOpen:p},children:[l.Children.map(e,((s,a)=>n.jsx(n.Fragment,{children:l.cloneElement(s,{className:r.default("sds-header__header-item",a+1===l.Children.count(e)&&"sds-header__header-item--last-item")})}))),n.jsx(d,{variant:"transparent",icon:_?n.jsx(o,{}):n.jsx(i,{}),iconVariant:_?"right":"only",onClick:function(){p(!_)},"aria-label":_?t:a,"aria-controls":m,"aria-expanded":_,className:"sds-header-collapsible__button",children:_&&u}),n.jsx("div",{className:r.default("sds-header-collapsible__dropdown",_&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!_,id:m,...h,children:n.jsx("div",{id:"sds-header-collapsible__mobile-content",className:"sds-header-collapsible__menu",children:e})})]})},exports.HeaderNav=({children:e,className:s,...a})=>n.jsx("nav",{className:r.default("sds-header__nav",s),...a,children:n.jsx("ul",{className:"sds-header__nav-list",children:l.Children.map(e,(e=>{if(l.isValidElement(e))return n.jsx("li",{className:"sds-header__nav-item",children:l.cloneElement(e,{className:r.default("sds-header__nav-link",e.props.className)})})}))})});//# sourceMappingURL=index.js.map
+"use strict";var e=require("clsx"),s=require("@sikt/sds-core"),n=require("@sikt/sds-logo"),a=require("react/jsx-runtime"),r=require("react"),d=require("@sikt/sds-button"),l=require("@sikt/sds-icons");function t(e){return e&&e.__esModule?e:{default:e}}var i=t(e),o=e=>r.cloneElement(e,{className:i.default("sds-header__nav-link",e.props.className)}),c=r.createContext({menuOpen:!1,setMenuOpen:()=>{}});exports.Header=({children:e,className:r,skipLinkId:d="main",skipLinkText:l="Gå til innhold",logoHref:t,logoText:o,...c})=>{const u=o?a.jsx("span",{className:"sds-header__logo-text sds-typography-body--large",children:o}):a.jsx(n.Logo,{variant:"primary",className:"sds-header__logo"});return a.jsxs(a.Fragment,{children:[a.jsx(s.ScreenReaderOnly,{isFocusable:!0,className:"sds-header__skip-link",children:a.jsx(s.Link,{href:"#".concat(d),children:l})}),a.jsx("header",{className:i.default("sds-header",r),...c,children:a.jsxs("div",{className:"sds-header__content",children:[t?a.jsx(s.Link,{href:t,className:"sds-header__logo-link",children:u}):u,e]})})]})},exports.HeaderCollapsibleMenu=({children:e,dropdownOpen:s=!1,ariaLabelOpenMenu:n="Åpne meny",ariaLabelCloseMenu:t="Lukk meny",ariaLabelClose:o="Lukk",...u})=>{const h=r.useId(),[m,_]=r.useState(s);function p(){_(!1)}return r.useEffect((()=>{document.body.style.overflow=m?"hidden":"unset";const e=e=>{"Escape"===e.key&&p()},s=e=>{(e.target instanceof HTMLAnchorElement||e.target instanceof HTMLButtonElement)&&p()},n=()=>{p()};if(m){const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.addEventListener("click",s),a.addEventListener("submit",n)),window.addEventListener("keydown",e)}return()=>{const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.removeEventListener("click",s),a.removeEventListener("submit",n)),window.removeEventListener("keydown",e)}}),[m]),r.useEffect((()=>{_(s)}),[s]),a.jsxs(c.Provider,{value:{menuOpen:m,setMenuOpen:_},children:[r.Children.map(e,((s,n)=>a.jsx(a.Fragment,{children:r.cloneElement(s,{className:i.default("sds-header__header-item",n+1===r.Children.count(e)&&"sds-header__header-item--last-item")})}))),a.jsx(d.Button,{variant:"transparent",icon:m?a.jsx(l.XIcon,{}):a.jsx(l.ListIcon,{}),iconVariant:m?"right":"only",onClick:function(){_(!m)},"aria-label":m?t:n,"aria-controls":h,"aria-expanded":m,className:"sds-header-collapsible__button",children:m&&o}),a.jsx("div",{className:i.default("sds-header-collapsible__dropdown",m&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!m,id:h,...u,children:a.jsx("div",{id:"sds-header-collapsible__mobile-content",className:"sds-header-collapsible__menu",children:e})})]})},exports.HeaderNav=({children:e,className:s,...n})=>a.jsx("nav",{className:i.default("sds-header__nav",s),...n,children:a.jsx("ul",{className:"sds-header__nav-list",children:r.Children.map(e,(e=>{if(r.isValidElement(e))return a.jsx("li",{className:"sds-header__nav-item",children:o(e)})}))})});//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","Children","cloneElement","Fragment","jsxs"],"mappings":";AAKA,OAAO,UAAU;AACjB,SAAS,MAAM,wBAAwB;AACvC,SAAS,YAAY;AAwBjB,SAQA,UARA,KAaI,YAbJ;AAVG,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,cAAc,WAClB,oBAAC,UAAK,WAAU,oDACb,oBACH,IAEA,oBAAC,QAAK,SAAS,WAAW,WAAU,oBAAmB;AAGzD,SACE,iCACE;AAAA,wBAAC,oBAAiB,aAAW,MAAC,WAAU,yBACtC,8BAAC,QAAK,MAAM,IAAI,oBAAe,wBAAa,GAC9C;AAAA,IACA,oBAAC,YAAO,WAAW,KAAK,cAAc,SAAS,GAAI,GAAG,MACpD,+BAAC,SAAI,WAAU,uBACZ;AAAA,iBACC,oBAAC,QAAK,MAAM,UAAU,WAAU,yBAC7B,uBACH,IAEA;AAAA,MAGD;AAAA,OACH,GACF;AAAA,KACF;AAEJ;;;AC1DA;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AAEP,OAAOA,WAAU;AAcH,gBAAAC,YAAA;AAPP,IAAM,YAAY,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,MAAsB;AAC7E,SACE,gBAAAA,KAAC,SAAI,WAAWD,MAAK,mBAAmB,SAAS,GAAI,GAAG,MACtD,0BAAAC,KAAC,QAAG,WAAU,wBACX,mBAAS,IAAI,UAAU,CAAC,UAAU;AACjC,QAAI,eAAe,KAAK,GAAG;AACzB,aACE,gBAAAA,KAAC,QAAG,WAAU,wBACX,uBAAa,OAAuB;AAAA,QACnC,WAAWD;AAAA,UACT;AAAA,UACA,MAAM,MAAM;AAAA,QACd;AAAA,MACF,CAAC,GACH;AAAA,IAEJ;AAAA,EACF,CAAC,GACH,GACF;AAEJ;;;;;;;;;;;;;;;;;;;;;;;ACnCA,OAAOA,WAAU;AACjB;AAAA,EACE,YAAAE;AAAA,EAEA,gBAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAqFH,SAIM,YAAAC,WAAA,OAAAH,MAJN,QAAAI,aAAA;AAnFJ,IAAM,kBAAkB,cAGrB;AAAA,EACD,UAAU;AAAA,EACV,aAAa,MAAM;AAAA,EAAC;AACtB,CAAC;AASM,IAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,GAAG;AACL,MAAkC;AAChC,QAAM,SAAS,MAAM;AACrB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,YAAY;AAErD,WAAS,aAAa;AACpB,gBAAY,CAAC,QAAQ;AAAA,EACvB;AAEA,WAAS,YAAY;AACnB,gBAAY,KAAK;AAAA,EACnB;AAEA,YAAU,MAAM;AACd,aAAS,KAAK,MAAM,WAAW,WAAW,WAAW;AAErD,UAAM,oBAAoB,CAAC,MAAqB;AAC9C,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU;AAAA,MACZ;AAAA,IACF;AAEA,UAAM,iBAAiB,CAAC,MAAkB;AACxC,UACE,EAAE,kBAAkB,qBACpB,EAAE,kBAAkB,mBACpB;AACA,kBAAU;AAAA,MACZ;AAAA,IACF;AAEA,UAAM,kBAAkB,MAAM;AAC5B,gBAAU;AAAA,IACZ;AAEA,QAAI,UAAU;AACZ,YAAM,gBAAgB,SAAS;AAAA,QAC7B;AAAA,MACF;AACA,UAAI,eAAe;AACjB,sBAAc,iBAAiB,SAAS,cAAc;AACtD,sBAAc,iBAAiB,UAAU,eAAe;AAAA,MAC1D;AACA,aAAO,iBAAiB,WAAW,iBAAiB;AAAA,IACtD;AACA,WAAO,MAAM;AACX,YAAM,gBAAgB,SAAS;AAAA,QAC7B;AAAA,MACF;AACA,UAAI,eAAe;AACjB,sBAAc,oBAAoB,SAAS,cAAc;AACzD,sBAAc,oBAAoB,UAAU,eAAe;AAAA,MAC7D;AACA,aAAO,oBAAoB,WAAW,iBAAiB;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACd,gBAAY,YAAY;AAAA,EAC1B,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE,gBAAAA,MAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,YAAY,GAEtD;AAAA,IAAAH,UAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AACxC,aACE,gBAAAD,KAAAG,WAAA,EACG,UAAAD,cAAa,OAAuB;AAAA,QACnC,WAAWH;AAAA,UACT;AAAA,UACA,QAAQ,MAAME,UAAS,MAAM,QAAQ,KACnC;AAAA,QACJ;AAAA,MACF,CAAC,GACH;AAAA,IAEJ,CAAC;AAAA,IACD,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAM,WAAW,gBAAAA,KAAC,MAAM,IAAK,gBAAAA,KAAC,KAAS;AAAA,QACvC,aAAa,WAAW,UAAU;AAAA,QAClC,SAAS;AAAA,QACT,cAAY,WAAW,qBAAqB;AAAA,QAC5C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,WAAU;AAAA,QAET,sBAAY;AAAA;AAAA,IACf;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QACA,eAAa,CAAC;AAAA,QACd,IAAI;AAAA,QACH,GAAG;AAAA,QAEJ,0BAAAC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YAGT;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,KACF;AAEJ","sourcesContent":["import React, {\n  AnchorHTMLAttributes,\n  HTMLAttributes,\n  ReactElement,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\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 React, {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\nimport clsx from \"clsx\";\n\nexport interface HeaderNavProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  className?: string;\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                {cloneElement(child as ReactElement, {\n                  className: clsx(\n                    \"sds-header__nav-link\",\n                    child.props.className,\n                  ),\n                })}\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\";\nimport React, {\n  Children,\n  ReactElement,\n  cloneElement,\n  createContext,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\n\nconst MenuOpenContext = createContext<{\n  menuOpen: boolean;\n  setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}>({\n  menuOpen: false,\n  setMenuOpen: () => {},\n});\nexport interface HeaderCollapsibleMenuProps {\n  children: React.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":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","Children","cloneElement","Fragment","jsxs"],"mappings":"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","sourcesContent":["import { AnchorHTMLAttributes, HTMLAttributes, ReactElement } from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\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 {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\nimport clsx from \"clsx\";\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\";\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"]}

package/dist/index.mjs

@@ -1 +1 @@
-import e from"clsx";import{ScreenReaderOnly as s,Link as a}from"@sikt/sds-core";import{Logo as n}from"@sikt/sds-logo";import{jsxs as l,jsx as t,Fragment as i}from"react/jsx-runtime";import{forwardRef as r,createContext as d,Children as o,isValidElement as c,cloneElement as h,useId as m,useState as u,useEffect as p}from"react";var _=({children:r,className:d,skipLinkId:o="main",skipLinkText:c="Gå til innhold",logoHref:h,logoText:m,...u})=>{const p=m?t("span",{className:"sds-header__logo-text sds-typography-body--large",children:m}):t(n,{variant:"primary",className:"sds-header__logo"});return l(i,{children:[t(s,{isFocusable:!0,className:"sds-header__skip-link",children:t(a,{href:"#".concat(o),children:c})}),t("header",{className:e("sds-header",d),...u,children:l("div",{className:"sds-header__content",children:[h?t(a,{href:h,className:"sds-header__logo-link",children:p}):p,r]})})]})},b=({children:s,className:a,...n})=>t("nav",{className:e("sds-header__nav",a),...n,children:t("ul",{className:"sds-header__nav-list",children:o.map(s,(s=>{if(c(s))return t("li",{className:"sds-header__nav-item",children:h(s,{className:e("sds-header__nav-link",s.props.className)})})}))})}),v=({variant:s="subtle",size:a="default",children:n,className:i,onClick:r,icon:d,iconVariant:o="right",...c})=>{const h="string"==typeof n?n:void 0;return l("button",{className:e("sds-button","sds-button--".concat(s),"default"!==a&&"sds-button--".concat(a),i),onClick:r,"aria-label":"only"===o?h:void 0,...c,children:[d&&("left"===o||"only"===o)&&t("span",{className:"sds-button__icon",children:d}),(!d||"only"!==o)&&t("span",{className:"sds-button__label",children:n}),d&&"right"===o&&t("span",{className:"sds-button__icon",children:d})]})};r((({variant:s="subtle",size:a="default",children:n,className:i,href:r,icon:d,iconVariant:o="right",...c},h)=>{const m="string"==typeof n?n:void 0;return l("a",{ref:h,className:e("sds-button-link","sds-button","sds-button--".concat(s),"default"!==a&&"sds-button--".concat(a),i),href:r,"aria-label":"only"===o?m:void 0,...c,children:[d&&("left"===o||"only"===o)&&t("span",{className:"sds-button__icon",children:d}),(!d||"only"!==o)&&t("span",{className:"sds-button__label",children:n}),d&&"right"===o&&t("span",{className:"sds-button__icon",children:d})]})})).displayName="ButtonLink";var N=({className:s,...a})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 256 256",className:e("sds-icon",s),"aria-hidden":"true",...a,children:t("path",{d:"M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8ZM40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16Zm176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16Z"})}),f=({className:s,...a})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 256 256",className:e("sds-icon",s),"aria-hidden":"true",...a,children:t("path",{d:"M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"})}),g=d({menuOpen:!1,setMenuOpen:()=>{}}),k=({children:s,dropdownOpen:a=!1,ariaLabelOpenMenu:n="Åpne meny",ariaLabelCloseMenu:r="Lukk meny",ariaLabelClose:d="Lukk",...c})=>{const _=m(),[b,k]=u(a);function y(){k(!1)}return p((()=>{document.body.style.overflow=b?"hidden":"unset";const e=e=>{"Escape"===e.key&&y()},s=e=>{(e.target instanceof HTMLAnchorElement||e.target instanceof HTMLButtonElement)&&y()},a=()=>{y()};if(b){const n=document.getElementById("sds-header-collapsible__mobile-content");n&&(n.addEventListener("click",s),n.addEventListener("submit",a)),window.addEventListener("keydown",e)}return()=>{const n=document.getElementById("sds-header-collapsible__mobile-content");n&&(n.removeEventListener("click",s),n.removeEventListener("submit",a)),window.removeEventListener("keydown",e)}}),[b]),p((()=>{k(a)}),[a]),l(g.Provider,{value:{menuOpen:b,setMenuOpen:k},children:[o.map(s,((a,n)=>t(i,{children:h(a,{className:e("sds-header__header-item",n+1===o.count(s)&&"sds-header__header-item--last-item")})}))),t(v,{variant:"transparent",icon:t(b?f:N,{}),iconVariant:b?"right":"only",onClick:function(){k(!b)},"aria-label":b?r:n,"aria-controls":_,"aria-expanded":b,className:"sds-header-collapsible__button",children:b&&d}),t("div",{className:e("sds-header-collapsible__dropdown",b&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!b,id:_,...c,children:t("div",{id:"sds-header-collapsible__mobile-content",className:"sds-header-collapsible__menu",children:s})})]})};export{_ as Header,k as HeaderCollapsibleMenu,b as HeaderNav};//# sourceMappingURL=index.mjs.map
+import e from"clsx";import{ScreenReaderOnly as s,Link as n}from"@sikt/sds-core";import{Logo as a}from"@sikt/sds-logo";import{jsxs as r,Fragment as d,jsx as i}from"react/jsx-runtime";import{createContext as l,Children as t,isValidElement as o,useId as c,useState as m,useEffect as h,cloneElement as p}from"react";import{Button as _}from"@sikt/sds-button";import{XIcon as u,ListIcon as v}from"@sikt/sds-icons";var k=({children:l,className:t,skipLinkId:o="main",skipLinkText:c="Gå til innhold",logoHref:m,logoText:h,...p})=>{const _=h?i("span",{className:"sds-header__logo-text sds-typography-body--large",children:h}):i(a,{variant:"primary",className:"sds-header__logo"});return r(d,{children:[i(s,{isFocusable:!0,className:"sds-header__skip-link",children:i(n,{href:"#".concat(o),children:c})}),i("header",{className:e("sds-header",t),...p,children:r("div",{className:"sds-header__content",children:[m?i(n,{href:m,className:"sds-header__logo-link",children:_}):_,l]})})]})},b=s=>p(s,{className:e("sds-header__nav-link",s.props.className)}),f=({children:s,className:n,...a})=>i("nav",{className:e("sds-header__nav",n),...a,children:i("ul",{className:"sds-header__nav-list",children:t.map(s,(e=>{if(o(e))return i("li",{className:"sds-header__nav-item",children:b(e)})}))})}),N=l({menuOpen:!1,setMenuOpen:()=>{}}),L=({children:s,dropdownOpen:n=!1,ariaLabelOpenMenu:a="Åpne meny",ariaLabelCloseMenu:l="Lukk meny",ariaLabelClose:o="Lukk",...k})=>{const b=c(),[f,L]=m(n);function y(){L(!1)}return h((()=>{document.body.style.overflow=f?"hidden":"unset";const e=e=>{"Escape"===e.key&&y()},s=e=>{(e.target instanceof HTMLAnchorElement||e.target instanceof HTMLButtonElement)&&y()},n=()=>{y()};if(f){const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.addEventListener("click",s),a.addEventListener("submit",n)),window.addEventListener("keydown",e)}return()=>{const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.removeEventListener("click",s),a.removeEventListener("submit",n)),window.removeEventListener("keydown",e)}}),[f]),h((()=>{L(n)}),[n]),r(N.Provider,{value:{menuOpen:f,setMenuOpen:L},children:[t.map(s,((n,a)=>i(d,{children:p(n,{className:e("sds-header__header-item",a+1===t.count(s)&&"sds-header__header-item--last-item")})}))),i(_,{variant:"transparent",icon:i(f?u:v,{}),iconVariant:f?"right":"only",onClick:function(){L(!f)},"aria-label":f?l:a,"aria-controls":b,"aria-expanded":f,className:"sds-header-collapsible__button",children:f&&o}),i("div",{className:e("sds-header-collapsible__dropdown",f&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!f,id:b,...k,children:i("div",{id:"sds-header-collapsible__mobile-content",className:"sds-header-collapsible__menu",children:s})})]})};export{k as Header,L as HeaderCollapsibleMenu,f as HeaderNav};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","Children","cloneElement","Fragment","jsxs"],"mappings":"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","sourcesContent":["import React, {\n  AnchorHTMLAttributes,\n  HTMLAttributes,\n  ReactElement,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\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 React, {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\nimport clsx from \"clsx\";\n\nexport interface HeaderNavProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  className?: string;\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                {cloneElement(child as ReactElement, {\n                  className: clsx(\n                    \"sds-header__nav-link\",\n                    child.props.className,\n                  ),\n                })}\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\";\nimport React, {\n  Children,\n  ReactElement,\n  cloneElement,\n  createContext,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\n\nconst MenuOpenContext = createContext<{\n  menuOpen: boolean;\n  setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}>({\n  menuOpen: false,\n  setMenuOpen: () => {},\n});\nexport interface HeaderCollapsibleMenuProps {\n  children: React.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":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","Children","cloneElement","Fragment","jsxs"],"mappings":";AACA,OAAO,UAAU;AACjB,SAAS,MAAM,wBAAwB;AACvC,SAAS,YAAY;AAwBjB,SAQA,UARA,KAaI,YAbJ;AAVG,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,cAAc,WAClB,oBAAC,UAAK,WAAU,oDACb,oBACH,IAEA,oBAAC,QAAK,SAAQ,WAAU,WAAU,oBAAmB;AAGvD,SACE,iCACE;AAAA,wBAAC,oBAAiB,aAAW,MAAC,WAAU,yBACtC,8BAAC,QAAK,MAAM,IAAI,oBAAe,wBAAa,GAC9C;AAAA,IACA,oBAAC,YAAO,WAAW,KAAK,cAAc,SAAS,GAAI,GAAG,MACpD,+BAAC,SAAI,WAAU,uBACZ;AAAA,iBACC,oBAAC,QAAK,MAAM,UAAU,WAAU,yBAC7B,uBACH,IAEA;AAAA,MAGD;AAAA,OACH,GACF;AAAA,KACF;AAEJ;;;ACtDA;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AAEP,OAAOA,WAAU;AAwBH,gBAAAC,YAAA;AAbd,IAAM,qBAAqB,CAAC,UAAoC;AAC9D,SAAO,aAAa,OAAO;AAAA,IACzB,WAAWD,MAAK,wBAAwB,MAAM,MAAM,SAAS;AAAA,EAC/D,CAAC;AACH;AAEO,IAAM,YAAY,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,MAAsB;AAC7E,SACE,gBAAAC,KAAC,SAAI,WAAWD,MAAK,mBAAmB,SAAS,GAAI,GAAG,MACtD,0BAAAC,KAAC,QAAG,WAAU,wBACX,mBAAS,IAAI,UAAU,CAAC,UAAU;AACjC,QAAI,eAAe,KAAK,GAAG;AACzB,aACE,gBAAAA,KAAC,QAAG,WAAU,wBACX,6BAAmB,KAAiC,GACvD;AAAA,IAEJ;AAAA,EACF,CAAC,GACH,GACF;AAEJ;;;AC1CA,SAAS,cAAc;AACvB,SAAS,UAAU,aAAa;AAChC,OAAOD,WAAU;AACjB;AAAA,EACE,YAAAE;AAAA,EAKA,gBAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAsFH,SAIM,YAAAC,WAAA,OAAAH,MAJN,QAAAI,aAAA;AApFJ,IAAM,kBAAkB,cAGrB;AAAA,EACD,UAAU;AAAA;AAAA,EAEV,aAAa,MAAM;AAAA,EAAC;AACtB,CAAC;AASM,IAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,GAAG;AACL,MAAkC;AAChC,QAAM,SAAS,MAAM;AACrB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,YAAY;AAErD,WAAS,aAAa;AACpB,gBAAY,CAAC,QAAQ;AAAA,EACvB;AAEA,WAAS,YAAY;AACnB,gBAAY,KAAK;AAAA,EACnB;AAEA,YAAU,MAAM;AACd,aAAS,KAAK,MAAM,WAAW,WAAW,WAAW;AAErD,UAAM,oBAAoB,CAAC,MAAqB;AAC9C,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU;AAAA,MACZ;AAAA,IACF;AAEA,UAAM,iBAAiB,CAAC,MAAkB;AACxC,UACE,EAAE,kBAAkB,qBACpB,EAAE,kBAAkB,mBACpB;AACA,kBAAU;AAAA,MACZ;AAAA,IACF;AAEA,UAAM,kBAAkB,MAAM;AAC5B,gBAAU;AAAA,IACZ;AAEA,QAAI,UAAU;AACZ,YAAM,gBAAgB,SAAS;AAAA,QAC7B;AAAA,MACF;AACA,UAAI,eAAe;AACjB,sBAAc,iBAAiB,SAAS,cAAc;AACtD,sBAAc,iBAAiB,UAAU,eAAe;AAAA,MAC1D;AACA,aAAO,iBAAiB,WAAW,iBAAiB;AAAA,IACtD;AACA,WAAO,MAAM;AACX,YAAM,gBAAgB,SAAS;AAAA,QAC7B;AAAA,MACF;AACA,UAAI,eAAe;AACjB,sBAAc,oBAAoB,SAAS,cAAc;AACzD,sBAAc,oBAAoB,UAAU,eAAe;AAAA,MAC7D;AACA,aAAO,oBAAoB,WAAW,iBAAiB;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACd,gBAAY,YAAY;AAAA,EAC1B,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE,gBAAAA,MAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,YAAY,GAEtD;AAAA,IAAAH,UAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AACxC,aACE,gBAAAD,KAAAG,WAAA,EACG,UAAAD,cAAa,OAAuB;AAAA,QACnC,WAAWH;AAAA,UACT;AAAA,UACA,QAAQ,MAAME,UAAS,MAAM,QAAQ,KACnC;AAAA,QACJ;AAAA,MACF,CAAC,GACH;AAAA,IAEJ,CAAC;AAAA,IACD,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAM,WAAW,gBAAAA,KAAC,SAAM,IAAK,gBAAAA,KAAC,YAAS;AAAA,QACvC,aAAa,WAAW,UAAU;AAAA,QAClC,SAAS;AAAA,QACT,cAAY,WAAW,qBAAqB;AAAA,QAC5C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,WAAU;AAAA,QAET,sBAAY;AAAA;AAAA,IACf;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QACA,eAAa,CAAC;AAAA,QACd,IAAI;AAAA,QACH,GAAG;AAAA,QAEJ,0BAAAC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YAGT;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,KACF;AAEJ","sourcesContent":["import { AnchorHTMLAttributes, HTMLAttributes, ReactElement } from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\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 {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\nimport clsx from \"clsx\";\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\";\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-header",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "license": "UNLICENSED",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -15,7 +15,9 @@
     "build": "tsup"
   },
   "dependencies": {
+    "@sikt/sds-button": "^3.1.1",
     "@sikt/sds-core": "^3.0.0",
+    "@sikt/sds-icons": "^2.0.1",
     "@sikt/sds-logo": "^2.0.0",
     "@sikt/sds-tokens": "^1.0.0"
   },