@sikt/sds-header 3.1.0 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/index.css +4 -2
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
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
4
|
|
|
5
|
+
## [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)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **header:** logo text typography ([3f68a63](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/3f68a636b416096ffb39baa2d2c40f1a6bbf6e4c))
|
|
10
|
+
|
|
5
11
|
## [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)
|
|
6
12
|
|
|
7
13
|
### Features
|
package/dist/index.css
CHANGED
|
@@ -145,6 +145,8 @@
|
|
|
145
145
|
}
|
|
146
146
|
@media (width >= 720px) {
|
|
147
147
|
.sds-header__nav-link {
|
|
148
|
+
--tab-hover-background-color: var( --sds-color-interaction-primary-transparent-highlight );
|
|
149
|
+
--tab-active-background-color: var( --sds-color-interaction-primary-transparent-pressed );
|
|
148
150
|
align-items: center;
|
|
149
151
|
border: 0 none;
|
|
150
152
|
border-bottom: var(--sds-space-border-weight-bold) solid transparent;
|
|
@@ -168,10 +170,10 @@
|
|
|
168
170
|
}
|
|
169
171
|
.sds-header__nav-link:hover,
|
|
170
172
|
.sds-header__nav-link:focus-visible {
|
|
171
|
-
background-color: var(
|
|
173
|
+
background-color: var(--tab-hover-background-color);
|
|
172
174
|
}
|
|
173
175
|
.sds-header__nav-link:active {
|
|
174
|
-
background-color: var(
|
|
176
|
+
background-color: var(--tab-active-background-color);
|
|
175
177
|
border-color: var(--sds-color-interaction-primary-strong-pressed);
|
|
176
178
|
}
|
|
177
179
|
.sds-header__nav-link:focus-visible {
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/header.pcss","../src/header-nav.pcss"],"sourcesContent":[".sds-header {\n align-items: center;\n position: relative;\n background-color: var(--sds-color-layout-background-primary);\n\n --header-height: 48px;\n}\n\n
|
|
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":[]}
|
package/dist/index.js
CHANGED
|
@@ -1 +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},
|
|
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
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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--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"]}
|
|
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"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{ScreenReaderOnly as e,Link as r}from"@sikt/sds-core";import{Logo as
|
|
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
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +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--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"]}
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-header",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.1",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -48,6 +48,6 @@
|
|
|
48
48
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@sikt/sds-tokens": "^
|
|
51
|
+
"@sikt/sds-tokens": "^5.0.0"
|
|
52
52
|
}
|
|
53
53
|
}
|