@helsenorge/designsystem-react 14.5.1 → 14.7.0

package/lib/CHANGELOG.md

@@ -1,4 +1,28 @@
 
+## [14.7.0](https://github.com/helsenorge/designsystem/compare/v14.6.0...v14.7.0) (2026-05-04)
+
+### Features
+
+* **filter:**  nytt filter ([ab9bf11](https://github.com/helsenorge/designsystem/commit/ab9bf11a0842201c19a26f776cd38a4bc214f9bb)), closes [#372994](https://github.com/helsenorge/designsystem/issues/372994) [#372995](https://github.com/helsenorge/designsystem/issues/372995) [#374423](https://github.com/helsenorge/designsystem/issues/374423) [#375591](https://github.com/helsenorge/designsystem/issues/375591)
+
+### Bug Fixes
+
+* **dateandtime:**  wrapper med liten skjermbredde ([96e0c0a](https://github.com/helsenorge/designsystem/commit/96e0c0a56478fa1a4d7e41b8a6d7e5433fb05957)), closes [#377123](https://github.com/helsenorge/designsystem/issues/377123)
+
+## [14.6.0](https://github.com/helsenorge/designsystem/compare/v14.5.1...v14.6.0) (2026-04-30)
+
+### Features
+
+* **highlighter:**  legg til semibold ([5df732d](https://github.com/helsenorge/designsystem/commit/5df732d9d931794a8413682b10b00852bcd806e4)), closes [#376890](https://github.com/helsenorge/designsystem/issues/376890)
+* **icon:**  nytt ikon for html file ([50ceb7c](https://github.com/helsenorge/designsystem/commit/50ceb7cb48247ed38ad73bd702f7a768f7eb5d5a)), closes [#376670](https://github.com/helsenorge/designsystem/issues/376670)
+* **lightbox:**  legg på dropshadow på knapper ved hover og focus ([35e6f97](https://github.com/helsenorge/designsystem/commit/35e6f97dca8c164466f3e17e39ddcf90382b07b6)), closes [#376430](https://github.com/helsenorge/designsystem/issues/376430)
+* **notificationpanel:**  legg til mulighet for role none ([ce1d030](https://github.com/helsenorge/designsystem/commit/ce1d0302266b52ec1fe55abae80c51c12a25cd24)), closes [#375231](https://github.com/helsenorge/designsystem/issues/375231)
+
+### Bug Fixes
+
+* **datepicker:**  legg på bakgrunnsfarge ([6d2857b](https://github.com/helsenorge/designsystem/commit/6d2857b3dad47bb11862a157eae573e92633e714)), closes [#376737](https://github.com/helsenorge/designsystem/issues/376737)
+* **dropdown:**  ikke ha hoverstyling på disabled trigger ([0861b10](https://github.com/helsenorge/designsystem/commit/0861b10b3a828062e2ecf7bb923aac14ecc61da0)), closes [#373943](https://github.com/helsenorge/designsystem/issues/373943)
+
 ## [14.5.1](https://github.com/helsenorge/designsystem/compare/v14.5.0...v14.5.1) (2026-04-24)
 
 ### Bug Fixes

package/lib/Drawer.js

@@ -1,5 +1,6 @@
 import { n as uuid_default } from "./uuid.js";
 import { c as ZIndex, n as AnalyticsId, o as KeyboardEventKey, s as LanguageLocales } from "./constants2.js";
+import { t as Icon_default } from "./Icon.js";
 import { n as useLanguage } from "./useLanguage.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { t as Button_default } from "./Button.js";
@@ -11,6 +12,7 @@ import { t as useOutsideEvent } from "./useOutsideEvent.js";
 import { t as Close_default } from "./Close.js";
 import { t as useReturnFocusOnUnmount } from "./useReturnFocusOnUnmount.js";
 import { n as enableBodyScroll, t as disableBodyScroll } from "./scroll.js";
+import { t as ChevronLeft_default } from "./ChevronLeft.js";
 import { t as Title_default } from "./Title2.js";
 import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
@@ -25,9 +27,14 @@ var HN_Designsystem_Drawer_nb_NO_default = {
 	ariaLabelBackButton: "Gå tilbake",
 	ariaLabelCloseBtn: "Lukk"
 };
+var HN_Designsystem_Drawer_nn_NO_default = {
+	ariaLabelCloseBtn: "Lukk",
+	ariaLabelBackButton: "Gå tilbake"
+};
 const getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_Drawer_en_GB_default;
+		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_Drawer_nn_NO_default;
 		case LanguageLocales.NORWEGIAN:
 		default: return HN_Designsystem_Drawer_nb_NO_default;
 	}
@@ -41,7 +48,7 @@ var Drawer = (props) => {
 	}) });
 };
 var InnerDrawer = (props) => {
-	const { ariaLabel, ariaLabelledBy, children, closeColor = "blueberry", desktopDirection = "left", footerContent, headerClasses, noCloseButton = false, onPrimaryAction, onRequestClose, onSecondaryAction, primaryActionText, secondaryActionText, title, titleHtmlMarkup = "h3", titleId = uuid_default(), zIndex = ZIndex.OverlayScreen, resources, isMobile } = props;
+	const { ariaLabel, ariaLabelledBy, children, closeColor = "blueberry", desktopDirection = "left", footerContent, headerClasses, noCloseButton = false, onPrimaryAction, onRequestClose, onSecondaryAction, primaryActionText, secondaryActionText, title, titleHtmlMarkup = "h3", titleId = uuid_default(), zIndex = ZIndex.OverlayScreen, resources, isMobile, withBackButton, onRequestBack, contentClassName } = props;
 	const ariaLabelAttributes = getAriaLabelAttributes({
 		label: ariaLabel,
 		id: ariaLabelledBy,
@@ -54,6 +61,7 @@ var InnerDrawer = (props) => {
 	const bottomContent = useRef(null);
 	const headerRef = useRef(null);
 	const footerRef = useRef(null);
+	const titleRef = useRef(null);
 	const [scope, animate] = useAnimate();
 	const [isPresent, safeToRemove] = usePresence();
 	const [headerHeight, setHeaderHeight] = React.useState(0);
@@ -143,6 +151,9 @@ var InnerDrawer = (props) => {
 	const handleCTA = (callback) => {
 		if (callback) callback();
 	};
+	useEffect(() => {
+		titleRef.current?.focus();
+	}, [title]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: styles.drawer,
 		ref: scope,
@@ -165,18 +176,30 @@ var InnerDrawer = (props) => {
 					/* @__PURE__ */ jsxs("div", {
 						className: headerStyling,
 						ref: headerRef,
-						children: [/* @__PURE__ */ jsx(Title_default, {
-							id: ariaLabelAttributes?.["aria-labelledby"],
-							className: styles["drawer__header__title"],
-							htmlMarkup: titleHtmlMarkup,
-							appearance: "title3",
-							children: title
-						}), !noCloseButton && onRequestClose != void 0 && /* @__PURE__ */ jsx(Close_default, {
-							ariaLabel: mergedResources.ariaLabelCloseBtn,
-							color: closeColor,
-							onClick: onRequestClose,
-							className: styles["drawer__header__close-button"]
-						})]
+						children: [
+							/* @__PURE__ */ jsx(Title_default, {
+								id: ariaLabelAttributes?.["aria-labelledby"],
+								className: styles["drawer__header__title"],
+								htmlMarkup: titleHtmlMarkup,
+								appearance: "title3",
+								ref: titleRef,
+								tabIndex: -1,
+								children: title
+							}),
+							withBackButton && onRequestBack !== void 0 && /* @__PURE__ */ jsx(Button_default, {
+								ariaLabel: mergedResources.ariaLabelBackButton,
+								onClick: onRequestBack,
+								variant: "borderless",
+								wrapperClassName: styles["drawer__header__back-button"],
+								children: /* @__PURE__ */ jsx(Icon_default, { svgIcon: ChevronLeft_default })
+							}),
+							!noCloseButton && onRequestClose != void 0 && /* @__PURE__ */ jsx(Close_default, {
+								ariaLabel: mergedResources.ariaLabelCloseBtn,
+								color: closeColor,
+								onClick: onRequestClose,
+								className: styles["drawer__header__close-button"]
+							})
+						]
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--top"]),
@@ -186,7 +209,7 @@ var InnerDrawer = (props) => {
 						}
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: styles.drawer__content,
+						className: classNames(styles.drawer__content, contentClassName),
 						tabIndex: contentIsScrollable ? 0 : void 0,
 						role: contentIsScrollable ? "region" : void 0,
 						...contentIsScrollable ? ariaLabelAttributes : {},

package/lib/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelBackButton\": \"Go back\",\n  \"ariaLabelCloseBtn\": \"Close\"\n}\n","{\n  \"ariaLabelBackButton\": \"Gå tilbake\",\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses);\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            <Title\n              id={ariaLabelAttributes?.['aria-labelledby']}\n              className={styles['drawer__header__title']}\n              htmlMarkup={titleHtmlMarkup}\n              appearance=\"title3\"\n            >\n              {title}\n            </Title>\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={styles.drawer__content}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div className={styles['drawer__content__children']}>{children}</div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer} ref={footerRef}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelBackButton\": \"Go back\",\n  \"ariaLabelCloseBtn\": \"Close\"\n}\n","{\n  \"ariaLabelBackButton\": \"Gå tilbake\",\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\",\n  \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n  /** Shows a back button to the left of title */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets classname for content part in Drawer */\n  contentClassName?: string;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n    withBackButton,\n    onRequestBack,\n    contentClassName,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses);\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  useEffect(() => {\n    titleRef.current?.focus();\n  }, [title]);\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            <Title\n              id={ariaLabelAttributes?.['aria-labelledby']}\n              className={styles['drawer__header__title']}\n              htmlMarkup={titleHtmlMarkup}\n              appearance=\"title3\"\n              ref={titleRef}\n              tabIndex={-1}\n            >\n              {title}\n            </Title>\n            {withBackButton && onRequestBack !== undefined && (\n              <Button\n                ariaLabel={mergedResources.ariaLabelBackButton}\n                onClick={onRequestBack}\n                variant=\"borderless\"\n                wrapperClassName={styles['drawer__header__back-button']}\n              >\n                <Icon svgIcon={ChevronLeft} />\n              </Button>\n            )}\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={classNames(styles.drawer__content, contentClassName)}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div className={styles['drawer__content__children']}>{children}</div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer} ref={footerRef}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}

package/lib/Select.js

@@ -16,7 +16,7 @@ var getIconColor = (invalid, disabled) => {
 	return disabled ? getColor("neutral", 500) : getColor(invalid ? "cherry" : "blueberry", 600);
 };
 const Select = (props) => {
-	const { className, children, concept = "normal", disabled, error, errorText, errorTextId: errorTextIdProp, selectId: selectIdProp, errorWrapperClassName, label, name = props.selectId, onColor = FormOnColor.onwhite, testId, width, required, value, defaultValue, autoComplete = "off", wrapperClassName, ref, ...rest } = props;
+	const { className, children, concept = "normal", disabled, error, errorText, errorTextId: errorTextIdProp, selectId: selectIdProp, errorWrapperClassName, label, name = props.selectId, onColor = FormOnColor.onwhite, testId, width, required, value, defaultValue, autoComplete = "off", wrapperClassName, ref, labelClassName, ...rest } = props;
 	const selectId = useIdWithFallback(selectIdProp);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const onBlueberry = onColor === "onblueberry";
@@ -46,7 +46,8 @@ const Select = (props) => {
 			children: [renderLabel({
 				label,
 				inputId: selectId,
-				onColor
+				onColor,
+				className: labelClassName
 			}), /* @__PURE__ */ jsxs("div", {
 				className: selectInnerWrapperClasses,
 				"data-testid": testId + "-inner-wrapper",

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["Select: React.FC<SelectProps>"],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label/utils';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n  /** Ref passed to the select element */\n  ref?: React.Ref<HTMLSelectElement | null>;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select: React.FC<SelectProps> = props => {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    selectId: selectIdProp,\n    errorWrapperClassName,\n    label,\n    name = props.selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ref,\n    ...rest\n  } = props;\n\n  const selectId = useIdWithFallback(selectIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel({ label: label, inputId: selectId, onColor: onColor as FormOnColor })}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={selectId}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;AAsDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAaA,UAAgC,UAAS;CACpD,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,aAAa,iBACb,UAAU,cACV,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,kBACA,KACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,aAAa;CAChD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,SAAS;CACnD,MAAM,WAAW,QAAQ,kBAAkB,MAAM,GAAG,KAAA;CAEpD,MAAM,4BAA4B,WAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,WAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,WAAW,aAAa,mBAAmB,iBAAiB;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY;IAAS;IAAO,SAAS;IAAmB;IAAwB,CAAC,EAClF,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,YAAY;KACxD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;MACM,CAAA;KACL,CAAA;IACF;GACO;;AChJnB,IAAA,mBDoJe"}
+{"version":3,"file":"Select.js","names":["Select: React.FC<SelectProps>"],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label/utils';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Adds custom classes to the label wrapper */\n  labelClassName?: string;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n  /** Ref passed to the select element */\n  ref?: React.Ref<HTMLSelectElement | null>;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select: React.FC<SelectProps> = props => {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    selectId: selectIdProp,\n    errorWrapperClassName,\n    label,\n    name = props.selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ref,\n    labelClassName,\n    ...rest\n  } = props;\n\n  const selectId = useIdWithFallback(selectIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel({ label: label, inputId: selectId, onColor: onColor as FormOnColor, className: labelClassName })}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={selectId}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;AAwDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAaA,UAAgC,UAAS;CACpD,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,aAAa,iBACb,UAAU,cACV,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,kBACA,KACA,gBACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,aAAa;CAChD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,SAAS;CACnD,MAAM,WAAW,QAAQ,kBAAkB,MAAM,GAAG,KAAA;CAEpD,MAAM,4BAA4B,WAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,WAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,WAAW,aAAa,mBAAmB,iBAAiB;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY;IAAS;IAAO,SAAS;IAAmB;IAAwB,WAAW;IAAgB,CAAC,EAC7G,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,YAAY;KACxD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;MACM,CAAA;KACL,CAAA;IACF;GACO;;ACnJnB,IAAA,mBDuJe"}

package/lib/Title.js

@@ -6,7 +6,7 @@ const instanceOfTitleMargin = (margin) => {
 	return Object.prototype.hasOwnProperty.call(margin, "marginTop") && Object.prototype.hasOwnProperty.call(margin, "marginBottom");
 };
 const Title = (props) => {
-	const { id, children, className, htmlMarkup = "h1", appearance = "title1", margin = 0, testId, ref } = props;
+	const { id, children, className, htmlMarkup = "h1", appearance = "title1", margin = 0, tabIndex, testId, ref } = props;
 	return /* @__PURE__ */ jsx(htmlMarkup, {
 		id,
 		className: classNames(titleStyles.title, {
@@ -28,6 +28,7 @@ const Title = (props) => {
 		ref,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.Title,
+		tabIndex,
 		children
 	});
 };

package/lib/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","names":["Title: React.FC<TitleProps>"],"sources":["../src/components/Title/utils.ts","../src/components/Title/Title.tsx"],"sourcesContent":["import type { TitleMargin } from './Title';\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n","import classNames from 'classnames';\n\nimport { instanceOfTitleMargin } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the heading element */\n  ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport const Title: React.FC<TitleProps> = (props: TitleProps) => {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId, ref } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n      [titleStyles['title--title6']]: appearance === 'title6',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n};\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport default Title;\n"],"mappings":";;;;AAEA,MAAa,yBAAyB,WAA2C;AAC/E,QAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,IAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,eAAe;;ACyBlI,MAAaA,SAA+B,UAAsB;CAChE,MAAM,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,QAAQ,QAAQ;AAoBvG,QACE,oBAPgB,YAOf;EAAc;EAAI,WApBA,WACnB,YAAY,OACZ;IACG,YAAY,oBAAoB,eAAe;IAC/C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;GAChD,EACD,UACD;EAQ6C,OAL1B,sBAAsB,OAAO,GAC7C;GAAE,WAAW,GAAG,OAAO,UAAU;GAAM,cAAc,GAAG,OAAO,aAAa;GAAM,GAClF;GAAE,WAAW,GAAG,OAAO;GAAM,cAAc,GAAG,OAAO;GAAM;EAGQ;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAC1H;GACS;;AAShB,IAAA,gBAAe"}
+{"version":3,"file":"Title.js","names":["Title: React.FC<TitleProps>"],"sources":["../src/components/Title/utils.ts","../src/components/Title/Title.tsx"],"sourcesContent":["import type { TitleMargin } from './Title';\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n","import classNames from 'classnames';\n\nimport { instanceOfTitleMargin } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the tabIndex. Use this with caution. */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the heading element */\n  ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport const Title: React.FC<TitleProps> = (props: TitleProps) => {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, tabIndex, testId, ref } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n      [titleStyles['title--title6']]: appearance === 'title6',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag\n      id={id}\n      className={titleClasses}\n      style={inlineStyle}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Title}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </CustomTag>\n  );\n};\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport default Title;\n"],"mappings":";;;;AAEA,MAAa,yBAAyB,WAA2C;AAC/E,QAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,IAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,eAAe;;AC2BlI,MAAaA,SAA+B,UAAsB;CAChE,MAAM,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,UAAU,QAAQ,QAAQ;AAoBjH,QACE,oBAPgB,YAOf;EACK;EACJ,WAtBiB,WACnB,YAAY,OACZ;IACG,YAAY,oBAAoB,eAAe;IAC/C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;GAChD,EACD,UACD;EAWG,OARgB,sBAAsB,OAAO,GAC7C;GAAE,WAAW,GAAG,OAAO,UAAU;GAAM,cAAc,GAAG,OAAO,aAAa;GAAM,GAClF;GAAE,WAAW,GAAG,OAAO;GAAM,cAAc,GAAG,OAAO;GAAM;EAOtD;EACL,eAAa;EACb,oBAAkB,YAAY;EACpB;EAET;GACS;;AAShB,IAAA,gBAAe"}

package/lib/components/Drawer/Drawer.d.ts

@@ -45,6 +45,12 @@ export interface InnerDrawerProps {
     resources?: Partial<HNDesignsystemDrawer>;
     /** Sets mobile styling and animation from outer level Drawer */
     isMobile?: boolean;
+    /** Shows a back button to the left of title */
+    withBackButton?: boolean;
+    /** Callback for the back button */
+    onRequestBack?: () => void;
+    /** Sets classname for content part in Drawer */
+    contentClassName?: string;
 }
 declare const Drawer: React.FC<DrawerProps>;
 export default Drawer;

package/lib/components/Drawer/styles.module.scss

@@ -84,11 +84,30 @@
 
     &__title {
       margin-top: 0.5rem !important;
+
+      &:focus,
+      &:focus-visible {
+        outline: none;
+      }
     }
 
     &__close-button {
       align-self: flex-start;
     }
+
+    &__back-button {
+      // Moves the button visually to the left but keeps it in the DOM order for screen readers and keyboard navigation
+      order: -1;
+
+      // Temporary fix for the back button, until we decide if we want to implement this more properly
+      width: 48px;
+      height: 48px;
+
+      svg {
+        width: 48px;
+        height: 48px;
+      }
+    }
   }
 
   &__content {

package/lib/components/Drawer/styles.module.scss.d.ts

@@ -11,6 +11,7 @@ export type Styles = {
   'drawer__content__shadow--top': string;
   drawer__footer: string;
   drawer__header: string;
+  'drawer__header__back-button': string;
   'drawer__header__close-button': string;
   drawer__header__title: string;
   drawer__overlay: string;

package/lib/components/Dropdown/styles.module.scss

@@ -24,11 +24,11 @@
     border-color: var(--color-base-border-onlight-emphasized);
     background-color: var(--core-color-white);
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-color: var(--color-base-background-neutral);
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: var(--core-color-neutral-100);
     }
 
@@ -65,11 +65,11 @@
     &--borderless {
       background-color: transparent;
 
-      &:hover {
+      &:hover:not(:disabled) {
         background-color: var(--core-color-neutral-100);
       }
 
-      &:active {
+      &:active:not(:disabled) {
         background-color: var(--core-color-neutral-200);
       }
     }

package/lib/components/Filter/DrawerNavigation/DrawerNavigation.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+export interface DrawerViewProps<ViewId extends string = string> {
+    /** Id for the view. Important for navigation */
+    id: ViewId;
+    /** Title used for Drawer in current view */
+    title: string;
+    /** Mark this view as the home/default view */
+    home?: boolean;
+    /** Content inside the drawer for this view */
+    children: React.ReactNode;
+    /** Default onClose callback for drawer. Will override onCloseButton on parent */
+    onCloseButton?: () => void;
+    /** Content sent to footer section of Drawer. Will override footer on parent */
+    footer?: React.ReactNode;
+    /** Classname set on the content inside Drawer */
+    drawerContentClassname?: string;
+}
+declare function DrawerView<ViewId extends string>(_props: DrawerViewProps<ViewId>): React.ReactNode;
+export interface DrawerNavigationProps {
+    /** Views and other children components inside the Drawer navigation. Views are put in stack */
+    children: React.ReactNode;
+    /** Is drawer open or closed */
+    isOpen: boolean;
+    /** Navigate to this view when the drawer opens. Defaults to home view. */
+    initialView?: string;
+    /** Default onClose callback for drawer. View onCloseButton callback will override this. */
+    onCloseButton?: () => void;
+    /** Content sent to footer section of Drawer. View footer will override this */
+    footer?: React.ReactNode;
+}
+declare function DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }: DrawerNavigationProps): React.ReactNode;
+declare namespace DrawerNavigation {
+    var View: typeof DrawerView;
+}
+export default DrawerNavigation;

package/lib/components/Filter/DrawerNavigation/FinnFastlegeFlyt.example.d.ts

@@ -0,0 +1,2 @@
+declare const FinnFastlegeFlytExample: () => React.ReactNode;
+export default FinnFastlegeFlytExample;

package/lib/components/Filter/DrawerNavigation/FinnFastlegeFlyt.module.scss

@@ -0,0 +1,15 @@
+.toggle {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.checkboxes-under-toggle {
+  padding-left: 1.5rem;
+}
+
+.modal-buttons {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+  gap: 1rem;
+}

package/lib/components/Filter/DrawerNavigation/FinnFastlegeFlyt.module.scss.d.ts

@@ -0,0 +1,11 @@
+export type Styles = {
+  'checkboxes-under-toggle': string;
+  'modal-buttons': string;
+  toggle: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Filter/DrawerNavigation/index.d.ts

@@ -0,0 +1,4 @@
+import { default as DrawerNavigation } from './DrawerNavigation';
+export * from './DrawerNavigation';
+export * from './useDrawerNavigation';
+export default DrawerNavigation;

package/lib/components/Filter/DrawerNavigation/index.js

@@ -0,0 +1,81 @@
+import { t as Drawer_default } from "../../../Drawer.js";
+import { Children, createContext, isValidElement, useCallback, useContext, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const DrawerNavigationContext = createContext(null);
+function useDrawerNavigation() {
+	const context = useContext(DrawerNavigationContext);
+	if (!context) throw new Error("useDrawerNavigation must be used inside a <DrawerNavigation> component");
+	return context;
+}
+function DrawerView(_props) {
+	return null;
+}
+function parseChildren(children) {
+	const views = [];
+	const other = [];
+	Children.forEach(children, (child) => {
+		if (isValidElement(child) && child.type === DrawerView) views.push({
+			id: child.props.id,
+			title: child.props.title,
+			home: child.props.home,
+			children: child.props.children,
+			onCloseButton: child.props.onCloseButton,
+			footer: child.props.footer,
+			drawerContentClassname: child.props.drawerContentClassname
+		});
+		else other.push(child);
+	});
+	return {
+		views,
+		other
+	};
+}
+function DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }) {
+	const { views, other } = useMemo(() => parseChildren(children), [children]);
+	const homeView = views.find((v) => v.home) ?? views[0];
+	const [viewStack, setViewStack] = useState([homeView?.id]);
+	const goToView = useCallback((id) => {
+		if (views.some((v) => v.id === id)) setViewStack((stack) => [...stack, id]);
+	}, [views]);
+	const goBack = useCallback(() => {
+		setViewStack((stack) => stack.length > 1 ? stack.slice(0, -1) : stack);
+	}, []);
+	const goToViewAndClearStack = useCallback((id) => {
+		if (views.some((v) => v.id === id)) setViewStack(id === homeView?.id ? [homeView.id] : [homeView?.id, id]);
+	}, [views, homeView]);
+	const currentViewId = viewStack[viewStack.length - 1];
+	const currentView = views.find((v) => v.id === currentViewId);
+	const navigate = useMemo(() => ({
+		goBack,
+		goToView,
+		goToViewAndClearStack
+	}), [
+		goBack,
+		goToView,
+		goToViewAndClearStack
+	]);
+	const [prevIsOpen, setPrevIsOpen] = useState(isOpen);
+	if (prevIsOpen !== isOpen) {
+		setPrevIsOpen(isOpen);
+		if (!isOpen) setViewStack([homeView?.id]);
+		else if (initialView && views.some((v) => v.id === initialView)) setViewStack(initialView === homeView?.id ? [homeView.id] : [homeView?.id, initialView]);
+	}
+	return /* @__PURE__ */ jsxs(DrawerNavigationContext.Provider, {
+		value: navigate,
+		children: [/* @__PURE__ */ jsx(Drawer_default, {
+			isOpen,
+			title: currentView?.title ?? "Filter",
+			withBackButton: viewStack.length > 1,
+			onRequestBack: goBack,
+			onRequestClose: currentView?.onCloseButton ?? onCloseButton,
+			footerContent: currentView?.footer ?? footer,
+			contentClassName: currentView?.drawerContentClassname,
+			children: currentView?.children
+		}), other]
+	});
+}
+DrawerNavigation.View = DrawerView;
+var DrawerNavigation_default = DrawerNavigation;
+export { DrawerNavigationContext, DrawerNavigation_default as default, useDrawerNavigation };
+
+//# sourceMappingURL=index.js.map

package/lib/components/Filter/DrawerNavigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["views: DrawerViewProps[]","other: React.ReactNode[]"],"sources":["../../../../src/components/Filter/DrawerNavigation/useDrawerNavigation.ts","../../../../src/components/Filter/DrawerNavigation/DrawerNavigation.tsx","../../../../src/components/Filter/DrawerNavigation/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface NavigateProps<ViewId extends string = string> {\n  goToView: (id: ViewId) => void;\n  goBack: () => void;\n  goToViewAndClearStack: (id: ViewId) => void;\n}\n\nexport const DrawerNavigationContext = createContext<NavigateProps | null>(null);\n\nexport function useDrawerNavigation<ViewId extends string = string>(): NavigateProps<ViewId> {\n  const context = useContext(DrawerNavigationContext);\n  if (!context) {\n    throw new Error('useDrawerNavigation must be used inside a <DrawerNavigation> component');\n  }\n  return context as NavigateProps<ViewId>;\n}\n","import type React from 'react';\nimport { Children, isValidElement, useCallback, useMemo, useState } from 'react';\n\nimport { type NavigateProps, DrawerNavigationContext } from './useDrawerNavigation';\nimport Drawer from '../../Drawer';\n\nexport interface DrawerViewProps<ViewId extends string = string> {\n  /** Id for the view. Important for navigation */\n  id: ViewId;\n  /** Title used for Drawer in current view */\n  title: string;\n  /** Mark this view as the home/default view */\n  home?: boolean;\n  /** Content inside the drawer for this view */\n  children: React.ReactNode;\n  /** Default onClose callback for drawer. Will override onCloseButton on parent */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. Will override footer on parent */\n  footer?: React.ReactNode;\n  /** Classname set on the content inside Drawer */\n  drawerContentClassname?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction DrawerView<ViewId extends string>(_props: DrawerViewProps<ViewId>): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nexport interface DrawerNavigationProps {\n  /** Views and other children components inside the Drawer navigation. Views are put in stack */\n  children: React.ReactNode;\n  /** Is drawer open or closed */\n  isOpen: boolean;\n  /** Navigate to this view when the drawer opens. Defaults to home view. */\n  initialView?: string;\n  /** Default onClose callback for drawer. View onCloseButton callback will override this. */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. View footer will override this */\n  footer?: React.ReactNode;\n}\n\nfunction parseChildren(children: React.ReactNode): { views: DrawerViewProps[]; other: React.ReactNode[] } {\n  const views: DrawerViewProps[] = [];\n  const other: React.ReactNode[] = [];\n  Children.forEach(children, child => {\n    if (isValidElement<DrawerViewProps>(child) && child.type === DrawerView) {\n      views.push({\n        id: child.props.id,\n        title: child.props.title,\n        home: child.props.home,\n        children: child.props.children,\n        onCloseButton: child.props.onCloseButton,\n        footer: child.props.footer,\n        drawerContentClassname: child.props.drawerContentClassname,\n      });\n    } else {\n      /** Added possibility of other children to support Modals that need navigation context */\n      other.push(child);\n    }\n  });\n  return { views, other };\n}\n\nfunction DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }: DrawerNavigationProps): React.ReactNode {\n  const { views, other } = useMemo(() => parseChildren(children), [children]);\n\n  const homeView = views.find(v => v.home) ?? views[0];\n  const [viewStack, setViewStack] = useState<string[]>([homeView?.id]);\n\n  const goToView = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(stack => [...stack, id]);\n      }\n    },\n    [views]\n  );\n\n  const goBack = useCallback((): void => {\n    setViewStack(stack => (stack.length > 1 ? stack.slice(0, -1) : stack));\n  }, []);\n\n  const goToViewAndClearStack = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(id === homeView?.id ? [homeView.id] : [homeView?.id, id]);\n      }\n    },\n    [views, homeView]\n  );\n\n  const currentViewId = viewStack[viewStack.length - 1];\n  const currentView = views.find(v => v.id === currentViewId);\n\n  const navigate = useMemo<NavigateProps>(() => ({ goBack, goToView, goToViewAndClearStack }), [goBack, goToView, goToViewAndClearStack]);\n\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setViewStack([homeView?.id]);\n    } else if (initialView && views.some(v => v.id === initialView)) {\n      setViewStack(initialView === homeView?.id ? [homeView.id] : [homeView?.id, initialView]);\n    }\n  }\n\n  return (\n    <DrawerNavigationContext.Provider value={navigate}>\n      <Drawer\n        isOpen={isOpen}\n        title={currentView?.title ?? 'Filter'}\n        withBackButton={viewStack.length > 1}\n        onRequestBack={goBack}\n        onRequestClose={currentView?.onCloseButton ?? onCloseButton}\n        footerContent={currentView?.footer ?? footer}\n        contentClassName={currentView?.drawerContentClassname}\n      >\n        {currentView?.children}\n      </Drawer>\n      {other}\n    </DrawerNavigationContext.Provider>\n  );\n}\n\nDrawerNavigation.View = DrawerView;\n\nexport default DrawerNavigation;\n","import DrawerNavigation from './DrawerNavigation';\nexport * from './DrawerNavigation';\nexport * from './useDrawerNavigation';\nexport default DrawerNavigation;\n"],"mappings":";;;AAQA,MAAa,0BAA0B,cAAoC,KAAK;AAEhF,SAAgB,sBAA6E;CAC3F,MAAM,UAAU,WAAW,wBAAwB;AACnD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,yEAAyE;AAE3F,QAAO;;ACST,SAAS,WAAkC,QAAkD;AAE3F,QAAO;;AAgBT,SAAS,cAAc,UAAmF;CACxG,MAAMA,QAA2B,EAAE;CACnC,MAAMC,QAA2B,EAAE;AACnC,UAAS,QAAQ,WAAU,UAAS;AAClC,MAAI,eAAgC,MAAM,IAAI,MAAM,SAAS,WAC3D,OAAM,KAAK;GACT,IAAI,MAAM,MAAM;GAChB,OAAO,MAAM,MAAM;GACnB,MAAM,MAAM,MAAM;GAClB,UAAU,MAAM,MAAM;GACtB,eAAe,MAAM,MAAM;GAC3B,QAAQ,MAAM,MAAM;GACpB,wBAAwB,MAAM,MAAM;GACrC,CAAC;MAGF,OAAM,KAAK,MAAM;GAEnB;AACF,QAAO;EAAE;EAAO;EAAO;;AAGzB,SAAS,iBAAiB,EAAE,UAAU,QAAQ,aAAa,eAAe,UAAkD;CAC1H,MAAM,EAAE,OAAO,UAAU,cAAc,cAAc,SAAS,EAAE,CAAC,SAAS,CAAC;CAE3E,MAAM,WAAW,MAAM,MAAK,MAAK,EAAE,KAAK,IAAI,MAAM;CAClD,MAAM,CAAC,WAAW,gBAAgB,SAAmB,CAAC,UAAU,GAAG,CAAC;CAEpE,MAAM,WAAW,aACd,OAAqB;AACpB,MAAI,MAAM,MAAK,MAAK,EAAE,OAAO,GAAG,CAC9B,eAAa,UAAS,CAAC,GAAG,OAAO,GAAG,CAAC;IAGzC,CAAC,MAAM,CACR;CAED,MAAM,SAAS,kBAAwB;AACrC,gBAAa,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,GAAG,GAAG,MAAO;IACrE,EAAE,CAAC;CAEN,MAAM,wBAAwB,aAC3B,OAAqB;AACpB,MAAI,MAAM,MAAK,MAAK,EAAE,OAAO,GAAG,CAC9B,cAAa,OAAO,UAAU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC;IAG1E,CAAC,OAAO,SAAS,CAClB;CAED,MAAM,gBAAgB,UAAU,UAAU,SAAS;CACnD,MAAM,cAAc,MAAM,MAAK,MAAK,EAAE,OAAO,cAAc;CAE3D,MAAM,WAAW,eAA8B;EAAE;EAAQ;EAAU;EAAuB,GAAG;EAAC;EAAQ;EAAU;EAAsB,CAAC;CAEvI,MAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO;AACpD,KAAI,eAAe,QAAQ;AACzB,gBAAc,OAAO;AACrB,MAAI,CAAC,OACH,cAAa,CAAC,UAAU,GAAG,CAAC;WACnB,eAAe,MAAM,MAAK,MAAK,EAAE,OAAO,YAAY,CAC7D,cAAa,gBAAgB,UAAU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,IAAI,YAAY,CAAC;;AAI5F,QACE,qBAAC,wBAAwB,UAAA;EAAS,OAAO;aACvC,oBAAC,gBAAA;GACS;GACR,OAAO,aAAa,SAAS;GAC7B,gBAAgB,UAAU,SAAS;GACnC,eAAe;GACf,gBAAgB,aAAa,iBAAiB;GAC9C,eAAe,aAAa,UAAU;GACtC,kBAAkB,aAAa;aAE9B,aAAa;IACP,EACR,MAAA;GACgC;;AAIvC,iBAAiB,OAAO;AC1HxB,IAAA,2BD4He"}

package/lib/components/Filter/DrawerNavigation/useDrawerNavigation.d.ts

@@ -0,0 +1,7 @@
+export interface NavigateProps<ViewId extends string = string> {
+    goToView: (id: ViewId) => void;
+    goBack: () => void;
+    goToViewAndClearStack: (id: ViewId) => void;
+}
+export declare const DrawerNavigationContext: import('react').Context<NavigateProps<string> | null>;
+export declare function useDrawerNavigation<ViewId extends string = string>(): NavigateProps<ViewId>;

package/lib/components/Filter/FilterButton/FilterButton.d.ts

@@ -0,0 +1,7 @@
+import { HNDesignsystemFilter } from '../../../resources/Resources';
+export interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Texts if overriding SOT */
+    resources?: Partial<HNDesignsystemFilter>;
+}
+declare const FilterButton: React.FC<FilterButtonProps>;
+export default FilterButton;