@sikt/sds-header 3.1.1 → 4.0.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.
 
+## [4.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@4.0.0...@sikt/sds-header@4.0.1) (2025-10-17)
+
+### Bug Fixes
+
+- **deps:** update @sikt/sds-logo@2.2.2 ([69c79be](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/69c79bed42ec166e5ef50a00812f8b493d08cef0))
+- **logo:** correct color ([52d66f1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/52d66f1c6453a6d5e03a7efdef3a50c7a6371a84))
+
+## [4.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@3.1.1...@sikt/sds-header@4.0.0) (2025-10-06)
+
+### ⚠ BREAKING CHANGES
+
+- **header:** remove header nav & collapsible menu
+
+### Features
+
+- **header:** add application status slot ([222bdd8](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/222bdd802e99d96eed1d872fd6b0c009fa6baff3))
+- **header:** add slots for left & right content ([948307f](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/948307fda27ee0fd610e4d2941cf029b7d6741fa))
+- **header:** remove header nav & collapsible menu ([e76ba09](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/e76ba09d3d5147276a6c5208978800c4301b0f8b))
+
 ## [3.1.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@3.1.0...@sikt/sds-header@3.1.1) (2025-07-08)
 
 ### Bug Fixes

package/dist/index.css

@@ -1,8 +1,9 @@
 /* src/header.pcss */
 .sds-header {
   align-items: center;
-  position: relative;
   background-color: var(--sds-color-layout-background-primary);
+  color: var(--sds-color-text-primary);
+  position: relative;
   --header-height: 48px;
 }
 @media (width >= 720px) {
@@ -15,170 +16,56 @@
     --header-height: 72px ;
   }
 }
-.sds-header__content {
-  min-height: var(--header-height);
-  padding: 0 var(--sds-space-padding-medium);
-  display: grid;
-  grid-gap: 0 var(--sds-space-padding-small);
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-}
-.sds-header__header-item {
-  display: none;
-}
-@media (width >= 720px) {
-  .sds-header__header-item {
-    display: unset;
-  }
-}
-.sds-header__header-item--last-item {
-  width: -webkit-fit-content;
-  width: fit-content;
-  justify-self: end;
-}
 .sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {
   background-color: var(--sds-color-layout-background-primary);
   position: absolute;
   z-index: 1;
 }
-.sds-header-collapsible__button {
-  grid-column: -2 / -1;
-  justify-self: end;
+.sds-header__logo-link {
+  background-color: unset;
+  color: inherit;
+  text-decoration: none;
   width: -webkit-fit-content;
   width: fit-content;
-  margin: var(--sds-focus-outline-width) 0;
 }
-@media (width >= 720px) {
-  .sds-header-collapsible__button.sds-button {
-    display: none;
-  }
-}
-.sds-header-collapsible__menu {
-  display: none;
-  gap: var(--sds-space-gap-medium);
-  flex-direction: column;
-  overflow: auto;
-  width: 100%;
-  border-top: var(--sds-space-border-weight-thin) solid var(--sds-color-interaction-primary-strong-default);
-  padding: var(--sds-space-padding-medium);
-}
-.sds-header-collapsible__menu .sds-header__nav-list {
-  display: flex;
-  flex-direction: column;
-}
-.sds-header-collapsible__dropdown {
-  position: absolute;
-  top: calc(var(--header-height) + 2 * var(--sds-focus-outline-width));
-  left: 0;
-  background-color: var(--sds-color-layout-background-primary);
-  z-index: calc(var(--sds-base-zindex-drawer) + 1);
-  height: 100vh;
-  width: 100%;
-  max-height: 0;
-  transition: max-height 0.25s ease;
-  overflow: hidden;
-  grid-column: 1 / -1;
+.sds-header__logo-link:active,
+.sds-header__logo-link:focus-visible,
+.sds-header__logo-link:hover {
+  background-color: unset;
 }
-.sds-header-collapsible__dropdown--open {
-  max-height: calc(100vh - var(--header-height));
+.sds-header__content {
+  align-items: center;
+  display: grid;
+  gap: 0 var(--sds-space-padding-small);
+  grid-template-columns: 1fr auto;
+  min-height: var(--header-height);
+  padding: 0 var(--sds-space-padding-medium);
 }
-@media (width >= 720px) {
-  .sds-header-collapsible__dropdown {
-    display: none;
+@media (width >= 1024px) {
+  .sds-header__content {
+    grid-template-columns: 1fr auto 1fr;
   }
 }
-.sds-header-collapsible__dropdown.sds-header-collapsible__dropdown--open .sds-header-collapsible__menu {
+.sds-header__content-left {
+  align-items: center;
   display: flex;
+  flex-direction: row-reverse;
+  gap: var(--sds-space-padding-small);
+  justify-self: start;
 }
-.sds-header .sds-header__logo {
-  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: fit-content;
-}
-
-/* src/header-nav.pcss */
-.sds-header__nav-list {
-  height: 100%;
-  list-style-type: none;
-  margin: 0;
+.sds-header__content-left .sds-header__logo-link:has(+ .sds-header__content-left-item) {
+  border-left: 1px solid #737373;
+  padding-left: var(--sds-space-padding-small);
 }
-@media (width >= 720px) {
-  .sds-header__nav-item {
-    display: inline-flex;
-  }
-}
-.sds-header__nav-link {
-  text-decoration: none;
+.sds-header__content-mid {
+  display: none;
 }
-@media (width < 720px) {
-  .sds-header__nav-link {
-    align-items: center;
-    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-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-color: var( --sds-color-interaction-neutral-transparent-highlight );
-  }
-  .sds-header__nav-link:active {
-    background-color: var( --sds-color-interaction-neutral-transparent-pressed );
-  }
-  .sds-header__nav-link:focus-visible {
-    outline: var(--sds-focus-outline);
+@media (width >= 1024px) {
+  .sds-header__content-mid {
+    display: unset;
   }
 }
-@media (width >= 720px) {
-  .sds-header__nav-link {
-    --tab-hover-background-color: var( --sds-color-interaction-primary-transparent-highlight );
-    --tab-active-background-color: var( --sds-color-interaction-primary-transparent-pressed );
-    align-items: center;
-    border: 0 none;
-    border-bottom: var(--sds-space-border-weight-bold) solid transparent;
-    color: var(--sds-color-text-primary);
-    display: flex;
-    gap: var(--sds-space-gap-small);
-    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);
-  }
-  .sds-header__nav-link-icon {
-    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] {
-    border-color: var(--sds-color-interaction-primary-strong-default);
-  }
-  .sds-header__nav-link:hover,
-  .sds-header__nav-link:focus-visible {
-    background-color: var(--tab-hover-background-color);
-  }
-  .sds-header__nav-link:active {
-    background-color: var(--tab-active-background-color);
-    border-color: var(--sds-color-interaction-primary-strong-pressed);
-  }
-  .sds-header__nav-link:focus-visible {
-    outline: var(--sds-focus-outline);
-    outline-offset: 0;
-  }
+.sds-header__content-right {
+  justify-self: flex-end;
 }
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/header.pcss","../src/header-nav.pcss"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n.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) {\n\n.sds-header {\n    --header-height: 56px\n}\n  }\n\n@media (width >= 1024px) {\n\n.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","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n.sds-header__nav-list {\n    height: 100%;\n    list-style-type: none;\n    margin: 0;\n  }\n\n@media (width >= 720px) {\n\n.sds-header__nav-item {\n      display: inline-flex\n  }\n    }\n\n.sds-header__nav-link {\n    text-decoration: none;\n  }\n\n@media (width < 720px) {\n\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\n@media (width >= 720px) {\n\n.sds-header__nav-link {\n      --tab-hover-background-color: var(\n        --sds-color-interaction-primary-transparent-highlight\n      );\n      --tab-active-background-color: var(\n        --sds-color-interaction-primary-transparent-pressed\n      );\n\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(--tab-hover-background-color);\n      }\n\n      .sds-header__nav-link:active {\n        background-color: var(--tab-active-background-color);\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"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n.sds-header {\n  align-items: center;\n  background-color: var(--sds-color-layout-background-primary);\n  color: var(--sds-color-text-primary);\n  position: relative;\n\n  --header-height: 48px;\n}\n\n@media (width >= 720px) {\n\n.sds-header {\n    --header-height: 56px\n}\n  }\n\n@media (width >= 1024px) {\n\n.sds-header {\n    --header-height: 72px\n}\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__logo-link {\n      background-color: unset;\n      color: inherit;\n      text-decoration: none;\n      width: -webkit-fit-content;\n      width: fit-content;\n    }\n\n.sds-header__logo-link:active,\n      .sds-header__logo-link:focus-visible,\n      .sds-header__logo-link:hover {\n        background-color: unset;\n      }\n\n.sds-header__content {\n    align-items: center;\n    display: grid;\n    gap: 0 var(--sds-space-padding-small);\n    grid-template-columns: 1fr auto;\n    min-height: var(--header-height);\n    padding: 0 var(--sds-space-padding-medium);\n  }\n\n@media (width >= 1024px) {\n\n.sds-header__content {\n      grid-template-columns: 1fr auto 1fr\n  }\n    }\n\n.sds-header__content-left {\n      align-items: center;\n      display: flex;\n      flex-direction: row-reverse;\n      gap: var(--sds-space-padding-small);\n      justify-self: start;\n    }\n\n.sds-header__content-left .sds-header__logo-link:has(+ .sds-header__content-left-item) {\n          border-left: 1px solid #737373;\n          padding-left: var(--sds-space-padding-small);\n        }\n\n.sds-header__content-mid {\n      display: none;\n    }\n\n@media (width >= 1024px) {\n\n.sds-header__content-mid {\n        display: unset\n    }\n      }\n\n.sds-header__content-right {\n      justify-self: flex-end;\n    }\n"],"mappings":";AAIA,CAAC;AACC,eAAa;AACb,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACX,YAAU;AAEV,mBAAiB;AACnB;AAEA,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GAXC;AAYG,qBAAiB;AACrB;AACE;AAEF,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GAlBC;AAmBG,qBAAiB;AACrB;AACE;AAEF,CAAC,qBAAqB,CAAC,iCAAiC;AACpD,oBAAkB,IAAI;AACtB,YAAU;AACV,WAAS;AACX;AAEF,CAAC;AACK,oBAAkB;AAClB,SAAO;AACP,mBAAiB;AACjB,SAAO;AACP,SAAO;AACT;AAEJ,CARC,qBAQqB;AAChB,CATL,qBAS2B;AACtB,CAVL,qBAU2B;AACpB,oBAAkB;AACpB;AAEN,CAAC;AACG,eAAa;AACb,WAAS;AACT,OAAK,EAAE,IAAI;AACX,yBAAuB,IAAI;AAC3B,cAAY,IAAI;AAChB,WAAS,EAAE,IAAI;AACjB;AAEF,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GAXC;AAYK,2BAAuB,IAAI,KAAK;AACpC;AACE;AAEJ,CAAC;AACK,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,gBAAc;AAChB;AAEJ,CARC,yBAQyB,CAtCzB,qBAsC+C,KAAK,EAAE,CAAC;AAC9C,eAAa,IAAI,MAAM;AACvB,gBAAc,IAAI;AACpB;AAER,CAAC;AACK,WAAS;AACX;AAEJ,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GANC;AAOO,aAAS;AACb;AACE;AAEN,CAAC;AACK,gBAAc;AAChB;","names":[]}

package/dist/index.d.mts

@@ -5,26 +5,14 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
     className?: string;
     children?: ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>> | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];
     topSlot?: ReactNode;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    applicationStatus?: ReactNode;
     skipLinkId?: string;
     skipLinkText?: string;
     logoHref?: string;
     logoText?: string;
 }
-declare const Header: ({ children, topSlot, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => react_jsx_runtime.JSX.Element;
+declare const Header: ({ children, topSlot, leftSlot, rightSlot, applicationStatus, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
-interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
-    children: ReactNode;
-    className?: string;
-}
-declare const HeaderNav: ({ children, className, ...rest }: HeaderNavProps) => react_jsx_runtime.JSX.Element;
-
-interface HeaderCollapsibleMenuProps {
-    children: ReactNode;
-    dropdownOpen?: boolean;
-    ariaLabelOpenMenu?: string;
-    ariaLabelCloseMenu?: string;
-    ariaLabelClose?: string;
-}
-declare const HeaderCollapsibleMenu: ({ children, dropdownOpen, ariaLabelOpenMenu, ariaLabelCloseMenu, ariaLabelClose, ...rest }: HeaderCollapsibleMenuProps) => react_jsx_runtime.JSX.Element;
-
-export { Header, HeaderCollapsibleMenu, type HeaderCollapsibleMenuProps, HeaderNav, type HeaderNavProps, type HeaderProps };
+export { Header, type HeaderProps };

package/dist/index.d.ts

@@ -5,26 +5,14 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
     className?: string;
     children?: ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>> | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];
     topSlot?: ReactNode;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    applicationStatus?: ReactNode;
     skipLinkId?: string;
     skipLinkText?: string;
     logoHref?: string;
     logoText?: string;
 }
-declare const Header: ({ children, topSlot, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => react_jsx_runtime.JSX.Element;
+declare const Header: ({ children, topSlot, leftSlot, rightSlot, applicationStatus, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
-interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
-    children: ReactNode;
-    className?: string;
-}
-declare const HeaderNav: ({ children, className, ...rest }: HeaderNavProps) => react_jsx_runtime.JSX.Element;
-
-interface HeaderCollapsibleMenuProps {
-    children: ReactNode;
-    dropdownOpen?: boolean;
-    ariaLabelOpenMenu?: string;
-    ariaLabelCloseMenu?: string;
-    ariaLabelClose?: string;
-}
-declare const HeaderCollapsibleMenu: ({ children, dropdownOpen, ariaLabelOpenMenu, ariaLabelCloseMenu, ariaLabelClose, ...rest }: HeaderCollapsibleMenuProps) => react_jsx_runtime.JSX.Element;
-
-export { Header, HeaderCollapsibleMenu, type HeaderCollapsibleMenuProps, HeaderNav, type HeaderNavProps, type HeaderProps };
+export { Header, type HeaderProps };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("@sikt/sds-core"),s=require("@sikt/sds-logo"),n=require("clsx/lite"),r=require("react/jsx-runtime"),a=require("react"),l=require("@sikt/sds-button"),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},x=(e,s)=>d(e,o(s)),b=(e,s)=>{var n={};for(var r in e)m.call(e,r)&&s.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&c)for(var r of c(e))s.indexOf(r)<0&&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=b(l,["children","topSlot","className","skipLinkId","skipLinkText","logoHref","logoText"]);const _=p?r.jsx("span",{className:"sds-header__logo-text sds-typography-body--xl",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",x(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=b(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",x(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=b(s,["children","className"]);return r.jsx("nav",x(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
+"use strict";var e=require("@sikt/sds-core"),r=require("@sikt/sds-logo"),s=require("clsx/lite"),t=require("react/jsx-runtime"),l=Object.defineProperty,i=Object.defineProperties,a=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,d=(e,r,s)=>r in e?l(e,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[r]=s,h=(e,r)=>{for(var s in r||(r={}))o.call(r,s)&&d(e,s,r[s]);if(n)for(var s of n(r))c.call(r,s)&&d(e,s,r[s]);return e};exports.Header=l=>{var d=l,{children:p,topSlot:f,leftSlot:x,rightSlot:m,applicationStatus:j,className:u,skipLinkId:k="main",skipLinkText:_="Gå til innhold",logoHref:g,logoText:v="Sikt"}=d,b=((e,r)=>{var s={};for(var t in e)o.call(e,t)&&r.indexOf(t)<0&&(s[t]=e[t]);if(null!=e&&n)for(var t of n(e))r.indexOf(t)<0&&c.call(e,t)&&(s[t]=e[t]);return s})(d,["children","topSlot","leftSlot","rightSlot","applicationStatus","className","skipLinkId","skipLinkText","logoHref","logoText"]);const N=t.jsx(r.Logo,{productName:v,className:"sds-header__logo"});return t.jsxs(t.Fragment,{children:[t.jsx(e.ScreenReaderOnly,{isFocusable:!0,className:"sds-header__skip-link",children:t.jsx(e.Link,{href:"#".concat(k),children:_})}),f,t.jsx("header",(O=h({className:s.clsx("sds-header",u)},b),S={children:t.jsxs("div",{className:"sds-header__content",children:[t.jsxs("div",{className:"sds-header__content-left",children:[g?t.jsx(e.Link,{href:g,className:"sds-header__logo-link",children:N}):N,x&&t.jsx("div",{className:"sds-header__content-left-item",children:x})]}),p&&t.jsx("div",{className:"sds-header__content-mid",children:p}),m&&t.jsx("div",{className:"sds-header__content-right",children:m})]})},i(O,a(S)))),j]});var O,S};//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Header.tsx","../src/HeaderNav.tsx","../src/HeaderCollapsibleMenu.tsx"],"names":["jsx","Logo","jsxs","Fragment","ScreenReaderOnly","Link","clsx","cloneElement","isValidElement","createContext","useId","useState","useEffect","Children","Button","CancelIcon","MenuIcon"],"mappings":"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","file":"index.js","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  children?:\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n  topSlot?: ReactNode;\n  skipLinkId?: string;\n  skipLinkText?: string;\n  logoHref?: string;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  topSlot,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoHref,\n  logoText,\n  ...rest\n}: HeaderProps) => {\n  const logoElement = logoText ? (\n    <span className=\"sds-header__logo-text sds-typography-body--xl\">\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"]}
+{"version":3,"sources":["../src/Header.tsx"],"names":["jsx","Logo","jsxs","Fragment","ScreenReaderOnly","Link","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ba,IAAA,MAAA,GAAS,CAAC,EAYJ,KAAA;AAZI,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAa,GAAA,MAAA;AAAA,IACb,YAAe,GAAA,mBAAA;AAAA,IACf,QAAA;AAAA,IACA,QAAW,GAAA;AAAA,GApCb,GA0BuB,EAWlB,EAAA,IAAA,GAAA,SAAA,CAXkB,EAWlB,EAAA;AAAA,IAVH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,8BACHA,cAAA,CAAAC,YAAA,EAAA,EAAK,WAAa,EAAA,QAAA,EAAU,WAAU,kBAAmB,EAAA,CAAA;AAG5D,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,qBACb,EAAA,QAAA,EAAA;AAAA,sBAACA,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,0BACZ,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA,kCACEG,YAAK,EAAA,EAAA,IAAA,EAAM,UAAU,SAAU,EAAA,uBAAA,EAC7B,uBACH,CAEA,GAAA,WAAA;AAAA,QAED,QACC,oBAAAL,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAS,EAAA,QAAA,EAAA;AAAA,OAE7D,EAAA,CAAA;AAAA,MACC,QACC,oBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,2BAA2B,QAAS,EAAA,CAAA;AAAA,MAEpD,SACC,oBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,6BAA6B,QAAU,EAAA,SAAA,EAAA;AAAA,KAAA,EAE1D,CACF,EAAA,CAAA,CAAA;AAAA,IACC;AAAA,GACH,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  leftSlot?: ReactNode;\n  rightSlot?: ReactNode;\n  applicationStatus?: ReactNode;\n  skipLinkId?: string;\n  skipLinkText?: string;\n  logoHref?: string;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  topSlot,\n  leftSlot,\n  rightSlot,\n  applicationStatus,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoHref,\n  logoText = \"Sikt\",\n  ...rest\n}: HeaderProps) => {\n  const logoElement = (\n    <Logo productName={logoText} 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          <div className=\"sds-header__content-left\">\n            {logoHref ? (\n              <Link href={logoHref} className=\"sds-header__logo-link\">\n                {logoElement}\n              </Link>\n            ) : (\n              logoElement\n            )}\n            {leftSlot && (\n              <div className=\"sds-header__content-left-item\">{leftSlot}</div>\n            )}\n          </div>\n          {children && (\n            <div className=\"sds-header__content-mid\">{children}</div>\n          )}\n          {rightSlot && (\n            <div className=\"sds-header__content-right\">{rightSlot}</div>\n          )}\n        </div>\n      </header>\n      {applicationStatus}\n    </>\n  );\n};\n"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{ScreenReaderOnly as e,Link as r}from"@sikt/sds-core";import{Logo as n}from"@sikt/sds-logo";import{clsx as a}from"clsx/lite";import{jsxs as s,Fragment as l,jsx as 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,n)=>r in e?v(e,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[r]=n,g=(e,r)=>{for(var n in r||(r={}))L.call(r,n)&&O(e,n,r[n]);if(y)for(var n of y(r))N.call(r,n)&&O(e,n,r[n]);return e},w=(e,r)=>f(e,k(r)),x=(e,r)=>{var n={};for(var a in e)L.call(e,a)&&r.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&y)for(var a of y(e))r.indexOf(a)<0&&N.call(e,a)&&(n[a]=e[a]);return n},E=i=>{var o=i,{children:d,topSlot:c,className:m,skipLinkId:p="main",skipLinkText:h="Gå til innhold",logoHref:u,logoText:_}=o,b=x(o,["children","topSlot","className","skipLinkId","skipLinkText","logoHref","logoText"]);const v=_?t("span",{className:"sds-header__logo-text sds-typography-body--xl",children:_}):t(n,{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:a("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:a("sds-header__nav-link",e.props.className)}),j=e=>{var r=e,{children:n,className:s}=r,l=x(r,["children","className"]);return t("nav",w(g({className:a("sds-header__nav",s)},l),{children:t("ul",{className:"sds-header__nav-list",children:o.map(n,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:n,dropdownOpen:l=!1,ariaLabelOpenMenu:i="Åpne meny",ariaLabelCloseMenu:v="Lukk meny",ariaLabelClose:f="Lukk"}=r,k=x(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()},n=()=>{O()};if(L){const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.addEventListener("click",r),a.addEventListener("submit",n)),window.addEventListener("keydown",e)}return()=>{const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.removeEventListener("click",r),a.removeEventListener("submit",n)),window.removeEventListener("keydown",e)}},[L]),p(()=>{N(l)},[l]),s(P.Provider,{value:{menuOpen:L,setMenuOpen:N},children:[o.map(n,(e,r)=>d(e)&&h(e,{className:a("sds-header__header-item",r+1===o.count(n)&&"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:a("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:n})}))]})};export{E as Header,T as HeaderCollapsibleMenu,j as HeaderNav};//# sourceMappingURL=index.mjs.map
+import{ScreenReaderOnly as e,Link as r}from"@sikt/sds-core";import{Logo as t}from"@sikt/sds-logo";import{clsx as l}from"clsx/lite";import{jsxs as s,Fragment as i,jsx as o}from"react/jsx-runtime";var a=Object.defineProperty,n=Object.defineProperties,c=Object.getOwnPropertyDescriptors,d=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,m=(e,r,t)=>r in e?a(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))h.call(r,t)&&m(e,t,r[t]);if(d)for(var t of d(r))p.call(r,t)&&m(e,t,r[t]);return e},_=a=>{var m=a,{children:_,topSlot:k,leftSlot:v,rightSlot:g,applicationStatus:u,className:b,skipLinkId:N="main",skipLinkText:O="Gå til innhold",logoHref:S,logoText:x="Sikt"}=m,y=((e,r)=>{var t={};for(var l in e)h.call(e,l)&&r.indexOf(l)<0&&(t[l]=e[l]);if(null!=e&&d)for(var l of d(e))r.indexOf(l)<0&&p.call(e,l)&&(t[l]=e[l]);return t})(m,["children","topSlot","leftSlot","rightSlot","applicationStatus","className","skipLinkId","skipLinkText","logoHref","logoText"]);const j=o(t,{productName:x,className:"sds-header__logo"});return s(i,{children:[o(e,{isFocusable:!0,className:"sds-header__skip-link",children:o(r,{href:"#".concat(N),children:O})}),k,o("header",(P=f({className:l("sds-header",b)},y),w={children:s("div",{className:"sds-header__content",children:[s("div",{className:"sds-header__content-left",children:[S?o(r,{href:S,className:"sds-header__logo-link",children:j}):j,v&&o("div",{className:"sds-header__content-left-item",children:v})]}),_&&o("div",{className:"sds-header__content-mid",children:_}),g&&o("div",{className:"sds-header__content-right",children:g})]})},n(P,c(w)))),u]});var P,w};export{_ as Header};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Header.tsx","../src/HeaderNav.tsx","../src/HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","jsxs","Children","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--xl\">\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"]}
+{"version":3,"sources":["../src/Header.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ba,IAAA,MAAA,GAAS,CAAC,EAYJ,KAAA;AAZI,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAa,GAAA,MAAA;AAAA,IACb,YAAe,GAAA,mBAAA;AAAA,IACf,QAAA;AAAA,IACA,QAAW,GAAA;AAAA,GApCb,GA0BuB,EAWlB,EAAA,IAAA,GAAA,SAAA,CAXkB,EAWlB,EAAA;AAAA,IAVH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,8BACH,GAAA,CAAA,IAAA,EAAA,EAAK,WAAa,EAAA,QAAA,EAAU,WAAU,kBAAmB,EAAA,CAAA;AAG5D,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,gBAAA,EAAA,EAAiB,WAAW,EAAA,IAAA,EAAC,SAAU,EAAA,uBAAA,EACtC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,GAAA,CAAI,MAAe,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,YAAA,EAAa,CAC9C,EAAA,CAAA;AAAA,IACC,OAAA;AAAA,oBACA,GAAA,CAAA,QAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAO,SAAW,EAAA,IAAA,CAAK,YAAc,EAAA,SAAS,CAAO,EAAA,EAAA,IAAA,CAAA,EAArD,EACC,QAAA,kBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qBACb,EAAA,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,0BACZ,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA,uBACE,IAAK,EAAA,EAAA,IAAA,EAAM,UAAU,SAAU,EAAA,uBAAA,EAC7B,uBACH,CAEA,GAAA,WAAA;AAAA,QAED,QACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAS,EAAA,QAAA,EAAA;AAAA,OAE7D,EAAA,CAAA;AAAA,MACC,QACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,2BAA2B,QAAS,EAAA,CAAA;AAAA,MAEpD,SACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,6BAA6B,QAAU,EAAA,SAAA,EAAA;AAAA,KAAA,EAE1D,CACF,EAAA,CAAA,CAAA;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ","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  leftSlot?: ReactNode;\n  rightSlot?: ReactNode;\n  applicationStatus?: ReactNode;\n  skipLinkId?: string;\n  skipLinkText?: string;\n  logoHref?: string;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  topSlot,\n  leftSlot,\n  rightSlot,\n  applicationStatus,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoHref,\n  logoText = \"Sikt\",\n  ...rest\n}: HeaderProps) => {\n  const logoElement = (\n    <Logo productName={logoText} 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          <div className=\"sds-header__content-left\">\n            {logoHref ? (\n              <Link href={logoHref} className=\"sds-header__logo-link\">\n                {logoElement}\n              </Link>\n            ) : (\n              logoElement\n            )}\n            {leftSlot && (\n              <div className=\"sds-header__content-left-item\">{leftSlot}</div>\n            )}\n          </div>\n          {children && (\n            <div className=\"sds-header__content-mid\">{children}</div>\n          )}\n          {rightSlot && (\n            <div className=\"sds-header__content-right\">{rightSlot}</div>\n          )}\n        </div>\n      </header>\n      {applicationStatus}\n    </>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-header",
-  "version": "3.1.1",
+  "version": "4.0.1",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {
@@ -38,7 +38,7 @@
     "@sikt/sds-button": "^4.2.0",
     "@sikt/sds-core": "^4.6.0",
     "@sikt/sds-icons": "^3.0.0",
-    "@sikt/sds-logo": "^2.1.0"
+    "@sikt/sds-logo": "^2.2.2"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",