@sikt/sds-header 3.0.5 → 3.1.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 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
+
+- **deps:** change peer deps clsx to ^2.1.0 ([9eb76f1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9eb76f1207a2ec8d19fda646c9bc26d5922b1839))
+- **deps:** correct deps on @sikt/sds-tokens ([b47f8a4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b47f8a4d27e99dcc731036ccf2b7b58a27d88da6))
+- **deps:** peer deps react@19.0.0 ([17352e2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/17352e291153f79c66a9de317ca42820159aee8a))
+- **deps:** update @sikt/sds-button@4.0.1 ([06089af](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/06089afbc2cbef6e46d98c8767f1ea71b1d14b54))
+- **deps:** update @sikt/sds-core@4.1.1 & @sikt/sds-icons@2.0.2 ([09e97cf](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/09e97cfe35780cc239ae2b7f55f4e793ec72e479))
+- **deps:** update @sikt/sds-logo@2.0.1 ([286fa70](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/286fa709e1be8a67a9459123296956d042e766a6))
+- package json exports ([b62fed7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b62fed7bfa459c618c016f39c960dffda037155f))
+
 ## [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

package/dist/index.css

@@ -1,4 +1,4 @@
-/* header.pcss */
+/* src/header.pcss */
 .sds-header {
   align-items: center;
   position: relative;
@@ -33,7 +33,6 @@
 }
 .sds-header__header-item--last-item {
   width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   justify-self: end;
 }
@@ -46,7 +45,6 @@
   grid-column: -2 / -1;
   justify-self: end;
   width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   margin: var(--sds-focus-outline-width) 0;
 }
@@ -93,18 +91,17 @@
   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;
   color: inherit;
   text-decoration: none;
   width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
-/* header-nav.pcss */
+/* src/header-nav.pcss */
 .sds-header__nav-list {
   height: 100%;
   list-style-type: none;
@@ -115,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);
@@ -149,16 +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);
-    margin-bottom: calc(var(--tab-list-border-bottom) * -1);
-    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":["../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":[]}
+{"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("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
+"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":["../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"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBa,IAAA,MAAA,GAAS,CAAC,EASJ,KAAA;AATI,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAa,GAAA,MAAA;AAAA,IACb,YAAe,GAAA,mBAAA;AAAA,IACf,QAAA;AAAA,IACA;AAAA,GA9BF,GAuBuB,EAQlB,EAAA,IAAA,GAAA,SAAA,CARkB,EAQlB,EAAA;AAAA,IAPH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,WAAc,GAAA,QAAA,mBACjBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,kDAAA,EACb,QACH,EAAA,QAAA,EAAA,CAAA,mBAECA,cAAA,CAAAC,YAAA,EAAA,EAAK,OAAQ,EAAA,SAAA,EAAU,WAAU,kBAAmB,EAAA,CAAA;AAGvD,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAACH,cAAA,CAAAI,wBAAA,EAAA,EAAiB,WAAW,EAAA,IAAA,EAAC,SAAU,EAAA,uBAAA,EACtC,QAAC,kBAAAJ,cAAA,CAAAK,YAAA,EAAA,EAAK,IAAM,EAAA,GAAA,CAAI,MAAe,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,YAAA,EAAa,CAC9C,EAAA,CAAA;AAAA,IACC,OAAA;AAAA,oBACAL,cAAA,CAAA,QAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAO,SAAW,EAAAM,SAAA,CAAK,YAAc,EAAA,SAAS,CAAO,EAAA,EAAA,IAAA,CAAA,EAArD,EACC,QAAA,kBAAAJ,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qBACZ,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA,kCACEG,YAAK,EAAA,EAAA,IAAA,EAAM,UAAU,SAAU,EAAA,uBAAA,EAC7B,uBACH,CAEA,GAAA,WAAA;AAAA,MAGD;AAAA,KAAA,EACH,CACF,EAAA,CAAA;AAAA,GACF,EAAA,CAAA;AAEJ;AC1CA,IAAM,kBAAA,GAAqB,CAAC,KAAoC,KAAA;AAC9D,EAAA,OAAOE,mBAAa,KAAO,EAAA;AAAA,IACzB,SAAWD,EAAAA,SAAAA,CAAK,sBAAwB,EAAA,KAAA,CAAM,MAAM,SAAS;AAAA,GAC9D,CAAA;AACH,CAAA;AAEa,IAAA,SAAA,GAAY,CAAC,EAAqD,KAAA;AAArD,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,YAAU,SA1BtC,EAAA,GA0B0B,IAA0B,IAA1B,GAAA,SAAA,CAAA,EAAA,EAA0B,CAAxB,UAAU,EAAA,WAAA,CAAA,CAAA;AACpC,EAAA,uBACEN,cAAC,CAAA,KAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAI,WAAWM,SAAK,CAAA,iBAAA,EAAmB,SAAS,CAAO,EAAA,EAAA,IAAA,CAAA,EAAvD,EACC,QAAAN,kBAAAA,cAAAA,CAAC,QAAG,SAAU,EAAA,sBAAA,EACX,yBAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AACjC,IAAI,IAAAQ,oBAAA,CAAe,KAAK,CAAG,EAAA;AACzB,MAAA,uBACER,cAAC,CAAA,IAAA,EAAA,EAAG,WAAU,sBACX,EAAA,QAAA,EAAA,kBAAA,CAAmB,KAAiC,CACvD,EAAA,CAAA;AAAA;AAEJ,GACD,GACH,CACF,EAAA,CAAA,CAAA;AAEJ;ACvBA,IAAM,kBAAkBS,mBAGrB,CAAA;AAAA,EACD,QAAU,EAAA,KAAA;AAAA;AAAA,EAEV,aAAa,MAAM;AAAA;AACrB,CAAC,CAAA;AASY,IAAA,qBAAA,GAAwB,CAAC,EAOJ,KAAA;AAPI,EACpC,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,YAAe,GAAA,KAAA;AAAA,IACf,iBAAoB,GAAA,cAAA;AAAA,IACpB,kBAAqB,GAAA,WAAA;AAAA,IACrB,cAAiB,GAAA;AAAA,GAxCnB,GAmCsC,EAMjC,EAAA,IAAA,GAAA,SAAA,CANiC,EAMjC,EAAA;AAAA,IALH,UAAA;AAAA,IACA,cAAA;AAAA,IACA,mBAAA;AAAA,IACA,oBAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,SAASC,WAAM,EAAA;AACrB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,YAAY,CAAA;AAErD,EAAA,SAAS,UAAa,GAAA;AACpB,IAAA,WAAA,CAAY,CAAC,QAAQ,CAAA;AAAA;AAGvB,EAAA,SAAS,SAAY,GAAA;AACnB,IAAA,WAAA,CAAY,KAAK,CAAA;AAAA;AAGnB,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,IAAK,CAAA,KAAA,CAAM,QAAW,GAAA,QAAA,GAAW,QAAW,GAAA,OAAA;AAErD,IAAM,MAAA,iBAAA,GAAoB,CAAC,CAAqB,KAAA;AAC9C,MAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,QAAU,SAAA,EAAA;AAAA;AACZ,KACF;AAEA,IAAM,MAAA,cAAA,GAAiB,CAAC,CAAkB,KAAA;AACxC,MAAA,IACE,CAAE,CAAA,MAAA,YAAkB,iBACpB,IAAA,CAAA,CAAE,kBAAkB,iBACpB,EAAA;AACA,QAAU,SAAA,EAAA;AAAA;AACZ,KACF;AAEA,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAU,SAAA,EAAA;AAAA,KACZ;AAEA,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,MAAM,gBAAgB,QAAS,CAAA,cAAA;AAAA,QAC7B;AAAA,OACF;AACA,MAAA,IAAI,aAAe,EAAA;AACjB,QAAc,aAAA,CAAA,gBAAA,CAAiB,SAAS,cAAc,CAAA;AACtD,QAAc,aAAA,CAAA,gBAAA,CAAiB,UAAU,eAAe,CAAA;AAAA;AAE1D,MAAO,MAAA,CAAA,gBAAA,CAAiB,WAAW,iBAAiB,CAAA;AAAA;AAEtD,IAAA,OAAO,MAAM;AACX,MAAA,MAAM,gBAAgB,QAAS,CAAA,cAAA;AAAA,QAC7B;AAAA,OACF;AACA,MAAA,IAAI,aAAe,EAAA;AACjB,QAAc,aAAA,CAAA,mBAAA,CAAoB,SAAS,cAAc,CAAA;AACzD,QAAc,aAAA,CAAA,mBAAA,CAAoB,UAAU,eAAe,CAAA;AAAA;AAE7D,MAAO,MAAA,CAAA,mBAAA,CAAoB,WAAW,iBAAiB,CAAA;AAAA,KACzD;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,YAAY,CAAA;AAAA,GAC1B,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EACE,uBAAAV,gBAAC,eAAgB,CAAA,QAAA,EAAhB,EAAyB,KAAO,EAAA,EAAE,QAAU,EAAA,WAAA,EAE1C,EAAA,QAAA,EAAA;AAAA,IAAAW,cAAS,CAAA,GAAA,CAAI,QAAU,EAAA,CAAC,OAAO,KAAU,KAAA;AACxC,MACEL,OAAAA,oBAAAA,CAAe,KAAK,CACpBD,IAAAA,kBAAAA;AAAA,QACE,KAAA;AAAA,QAGA;AAAA,UACE,SAAWD,EAAAA,SAAAA;AAAA,YACT,yBAAA;AAAA,YACA,KAAQ,GAAA,CAAA,KAAMO,cAAS,CAAA,KAAA,CAAM,QAAQ,CACnC,IAAA;AAAA;AACJ;AACF,OACF;AAAA,KAEH,CAAA;AAAA,oBACDb,cAAAA;AAAA,MAACc,gBAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,aAAA;AAAA,QACR,IAAA,EAAM,2BAAWd,cAAAA,CAACe,uBAAW,CAAK,mBAAAf,eAACgB,iBAAS,EAAA,EAAA,CAAA;AAAA,QAC5C,WAAA,EAAa,WAAW,OAAU,GAAA,MAAA;AAAA,QAClC,OAAS,EAAA,UAAA;AAAA,QACT,YAAA,EAAY,WAAW,kBAAqB,GAAA,iBAAA;AAAA,QAC5C,eAAe,EAAA,MAAA;AAAA,QACf,eAAe,EAAA,QAAA;AAAA,QACf,SAAU,EAAA,gCAAA;AAAA,QAET,QAAY,EAAA,QAAA,IAAA;AAAA;AAAA,KACf;AAAA,oBACAhB,cAAAA;AAAA,MAAC,KAAA;AAAA,MAAA,aAAA,CAAA,cAAA,CAAA;AAAA,QACC,SAAWM,EAAAA,SAAAA;AAAA,UACT,kCAAA;AAAA,UACA,QAAY,IAAA;AAAA,SACd;AAAA,QACA,eAAa,CAAC,QAAA;AAAA,QACd,EAAI,EAAA;AAAA,OAAA,EACA,IAPL,CAAA,EAAA;AAAA,QASC,QAAAN,kBAAAA,cAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAG,EAAA,wCAAA;AAAA,YACH,SAAU,EAAA,8BAAA;AAAA,YAGT;AAAA;AAAA;AACH,OAAA;AAAA;AACF,GACF,EAAA,CAAA;AAEJ","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 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
+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":["../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"]}
+{"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,9 +1,29 @@
 {
   "name": "@sikt/sds-header",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "license": "UNLICENSED",
+  "homepage": "https://designsystem.sikt.no/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.sikt.no/designsystem/sds-komponentbibliotek.git"
+  },
+  "type": "commonjs",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "style": "./dist/index.css",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./dist/*": "./dist/*"
+  },
   "types": "dist/index.d.ts",
   "style": "dist/index.css",
   "files": [
@@ -15,17 +35,19 @@
     "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"
+    "@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",
-    "@types/react-dom": "^18.0.0",
-    "clsx": "^1.0.0 || ^2.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "clsx": "^2.1.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@sikt/sds-tokens": "^3.0.0"
   }
 }