@helsenorge/designsystem-react 10.6.2 → 10.7.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [10.7.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.6.3&targetVersion=GTv10.7.0) (2025-04-10)
+
+
+### Features
+
+* **dropdown:**  legg til språkhåndtering ([e54e4e8](https://github.com/helsenorge/designsystem/commit/e54e4e8a3abf2fb44fc9e39ba77bb344b61ecee5)), closes [#349329](https://github.com/helsenorge/designsystem/issues/349329)
+
+
+### Bug Fixes
+
+* **lightbox:**  zoom pan og zindex fikser ([ffc268d](https://github.com/helsenorge/designsystem/commit/ffc268d607b3ce7c613b0db5e20db4b2c6c1e18d)), closes [#342790](https://github.com/helsenorge/designsystem/issues/342790)
+
+## [10.6.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.6.2&targetVersion=GTv10.6.3) (2025-03-20)
+
+
+### Bug Fixes
+
+*  nedre focus outline forsvinner ([5124290](https://github.com/helsenorge/designsystem/commit/51242909087003fbe390c89e2360681d4500ebe1)), closes [#347177](https://github.com/helsenorge/designsystem/issues/347177)
+*  useBreakpoint kaller ikke window.matchMedia ved server side rendering ([00b7926](https://github.com/helsenorge/designsystem/commit/00b792639a436a876a2a9f3ecdf2679b52304f54)), closes [#347898](https://github.com/helsenorge/designsystem/issues/347898)
+
+## [10.6.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.6.1&targetVersion=GTv10.6.2) (2025-03-14)
+
+
+### Reverts
+
+*  tar i bruk sass use" ([b4fc044](https://github.com/helsenorge/designsystem/commit/b4fc044c68aee56fdbe4ad93f8397f87bae5a0c3))
+
 ## [10.6.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.6.0&targetVersion=GTv10.6.1) (2025-03-14)
 
 

package/components/Drawer/index.js

@@ -236,7 +236,7 @@ const InnerDrawer = (props) => {
     title,
     titleHtmlMarkup = "h3",
     titleId = uuid(),
-    zIndex = ZIndex.Modal
+    zIndex = ZIndex.OverlayScreen
   } = props;
   const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });
   const overlayRef = useRef(null);

package/components/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/PresenceContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/utils.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs","../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\nimport { createContext } from 'react';\n\nconst LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst PresenceContext = createContext(null);\n\nexport { PresenceContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst MotionConfigContext = createContext({\n    transformPagePoint: (p) => p,\n    isStatic: false,\n    reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useRef, useContext, useInsertionEffect } from 'react';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component {\n    getSnapshotBeforeUpdate(prevProps) {\n        const element = this.props.childRef.current;\n        if (element && prevProps.isPresent && !this.props.isPresent) {\n            const size = this.props.sizeRef.current;\n            size.height = element.offsetHeight || 0;\n            size.width = element.offsetWidth || 0;\n            size.top = element.offsetTop;\n            size.left = element.offsetLeft;\n        }\n        return null;\n    }\n    /**\n     * Required with getSnapshotBeforeUpdate to stop React complaining.\n     */\n    componentDidUpdate() { }\n    render() {\n        return this.props.children;\n    }\n}\nfunction PopChild({ children, isPresent }) {\n    const id = useId();\n    const ref = useRef(null);\n    const size = useRef({\n        width: 0,\n        height: 0,\n        top: 0,\n        left: 0,\n    });\n    const { nonce } = useContext(MotionConfigContext);\n    /**\n     * We create and inject a style block so we can apply this explicit\n     * sizing in a non-destructive manner by just deleting the style block.\n     *\n     * We can't apply size via render as the measurement happens\n     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n     * styles directly on the DOM node, we might be overwriting\n     * styles set via the style prop.\n     */\n    useInsertionEffect(() => {\n        const { width, height, top, left } = size.current;\n        if (isPresent || !ref.current || !width || !height)\n            return;\n        ref.current.dataset.motionPopId = id;\n        const style = document.createElement(\"style\");\n        if (nonce)\n            style.nonce = nonce;\n        document.head.appendChild(style);\n        if (style.sheet) {\n            style.sheet.insertRule(`\n          [data-motion-pop-id=\"${id}\"] {\n            position: absolute !important;\n            width: ${width}px !important;\n            height: ${height}px !important;\n            top: ${top}px !important;\n            left: ${left}px !important;\n          }\n        `);\n        }\n        return () => {\n            document.head.removeChild(style);\n        };\n    }, [isPresent]);\n    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));\n}\n\nexport { PopChild };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useCallback, useMemo } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PopChild } from './PopChild.mjs';\n\nconst PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {\n    const presenceChildren = useConstant(newChildrenMap);\n    const id = useId();\n    const memoizedOnExitComplete = useCallback((childId) => {\n        presenceChildren.set(childId, true);\n        for (const isComplete of presenceChildren.values()) {\n            if (!isComplete)\n                return; // can stop searching when any is incomplete\n        }\n        onExitComplete && onExitComplete();\n    }, [presenceChildren, onExitComplete]);\n    const context = useMemo(() => ({\n        id,\n        initial,\n        isPresent,\n        custom,\n        onExitComplete: memoizedOnExitComplete,\n        register: (childId) => {\n            presenceChildren.set(childId, false);\n            return () => presenceChildren.delete(childId);\n        },\n    }), \n    /**\n     * If the presence of a child affects the layout of the components around it,\n     * we want to make a new context value to ensure they get re-rendered\n     * so they can detect that layout change.\n     */\n    presenceAffectsLayout\n        ? [Math.random(), memoizedOnExitComplete]\n        : [isPresent, memoizedOnExitComplete]);\n    useMemo(() => {\n        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));\n    }, [isPresent]);\n    /**\n     * If there's no `motion` components to fire exit animations, we want to remove this\n     * component immediately.\n     */\n    React.useEffect(() => {\n        !isPresent &&\n            !presenceChildren.size &&\n            onExitComplete &&\n            onExitComplete();\n    }, [isPresent]);\n    if (mode === \"popLayout\") {\n        children = jsx(PopChild, { isPresent: isPresent, children: children });\n    }\n    return (jsx(PresenceContext.Provider, { value: context, children: children }));\n};\nfunction newChildrenMap() {\n    return new Map();\n}\n\nexport { PresenceChild };\n","import { useContext, useId, useEffect, useCallback } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const [isPresent, safeToRemove] = usePresence()\n *\n *   useEffect(() => {\n *     !isPresent && setTimeout(safeToRemove, 1000)\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence(subscribe = true) {\n    const context = useContext(PresenceContext);\n    if (context === null)\n        return [true, null];\n    const { isPresent, onExitComplete, register } = context;\n    // It's safe to call the following hooks conditionally (after an early return) because the context will always\n    // either be null or non-null for the lifespan of the component.\n    const id = useId();\n    useEffect(() => {\n        if (subscribe)\n            register(id);\n    }, [subscribe]);\n    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);\n    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const isPresent = useIsPresent()\n *\n *   useEffect(() => {\n *     !isPresent && console.log(\"I've been removed!\")\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n    return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n    return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","import { Children, isValidElement } from 'react';\n\nconst getChildKey = (child) => child.key || \"\";\nfunction onlyElements(children) {\n    const filtered = [];\n    // We use forEach here instead of map as map mutates the component key by preprending `.$`\n    Children.forEach(children, (child) => {\n        if (isValidElement(child))\n            filtered.push(child);\n    });\n    return filtered;\n}\n\nexport { getChildKey, onlyElements };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","\"use client\";\nimport { jsx, Fragment } from 'react/jsx-runtime';\nimport { useMemo, useRef, useState, useContext } from 'react';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PresenceChild } from './PresenceChild.mjs';\nimport { usePresence } from './use-presence.mjs';\nimport { onlyElements, getChildKey } from './utils.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n *   <AnimatePresence>\n *     {items.map(item => (\n *       <motion.div\n *         key={item.id}\n *         initial={{ opacity: 0 }}\n *         animate={{ opacity: 1 }}\n *         exit={{ opacity: 0 }}\n *       />\n *     ))}\n *   </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nconst AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = \"sync\", propagate = false, }) => {\n    const [isParentPresent, safeToRemove] = usePresence(propagate);\n    /**\n     * Filter any children that aren't ReactElements. We can only track components\n     * between renders with a props.key.\n     */\n    const presentChildren = useMemo(() => onlyElements(children), [children]);\n    /**\n     * Track the keys of the currently rendered children. This is used to\n     * determine which children are exiting.\n     */\n    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);\n    /**\n     * If `initial={false}` we only want to pass this to components in the first render.\n     */\n    const isInitialRender = useRef(true);\n    /**\n     * A ref containing the currently present children. When all exit animations\n     * are complete, we use this to re-render the component with the latest children\n     * *committed* rather than the latest children *rendered*.\n     */\n    const pendingPresentChildren = useRef(presentChildren);\n    /**\n     * Track which exiting children have finished animating out.\n     */\n    const exitComplete = useConstant(() => new Map());\n    /**\n     * Save children to render as React state. To ensure this component is concurrent-safe,\n     * we check for exiting children via an effect.\n     */\n    const [diffedChildren, setDiffedChildren] = useState(presentChildren);\n    const [renderedChildren, setRenderedChildren] = useState(presentChildren);\n    useIsomorphicLayoutEffect(() => {\n        isInitialRender.current = false;\n        pendingPresentChildren.current = presentChildren;\n        /**\n         * Update complete status of exiting children.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const key = getChildKey(renderedChildren[i]);\n            if (!presentKeys.includes(key)) {\n                if (exitComplete.get(key) !== true) {\n                    exitComplete.set(key, false);\n                }\n            }\n            else {\n                exitComplete.delete(key);\n            }\n        }\n    }, [renderedChildren, presentKeys.length, presentKeys.join(\"-\")]);\n    const exitingChildren = [];\n    if (presentChildren !== diffedChildren) {\n        let nextChildren = [...presentChildren];\n        /**\n         * Loop through all the currently rendered components and decide which\n         * are exiting.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const child = renderedChildren[i];\n            const key = getChildKey(child);\n            if (!presentKeys.includes(key)) {\n                nextChildren.splice(i, 0, child);\n                exitingChildren.push(child);\n            }\n        }\n        /**\n         * If we're in \"wait\" mode, and we have exiting children, we want to\n         * only render these until they've all exited.\n         */\n        if (mode === \"wait\" && exitingChildren.length) {\n            nextChildren = exitingChildren;\n        }\n        setRenderedChildren(onlyElements(nextChildren));\n        setDiffedChildren(presentChildren);\n        /**\n         * Early return to ensure once we've set state with the latest diffed\n         * children, we can immediately re-render.\n         */\n        return;\n    }\n    if (process.env.NODE_ENV !== \"production\" &&\n        mode === \"wait\" &&\n        renderedChildren.length > 1) {\n        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`);\n    }\n    /**\n     * If we've been provided a forceRender function by the LayoutGroupContext,\n     * we can use it to force a re-render amongst all surrounding components once\n     * all components have finished animating out.\n     */\n    const { forceRender } = useContext(LayoutGroupContext);\n    return (jsx(Fragment, { children: renderedChildren.map((child) => {\n            const key = getChildKey(child);\n            const isPresent = propagate && !isParentPresent\n                ? false\n                : presentChildren === renderedChildren ||\n                    presentKeys.includes(key);\n            const onExit = () => {\n                if (exitComplete.has(key)) {\n                    exitComplete.set(key, true);\n                }\n                else {\n                    return;\n                }\n                let isEveryExitComplete = true;\n                exitComplete.forEach((isExitComplete) => {\n                    if (!isExitComplete)\n                        isEveryExitComplete = false;\n                });\n                if (isEveryExitComplete) {\n                    forceRender === null || forceRender === void 0 ? void 0 : forceRender();\n                    setRenderedChildren(pendingPresentChildren.current);\n                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());\n                    onExitComplete && onExitComplete();\n                }\n            };\n            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial\n                    ? undefined\n                    : false, custom: isPresent ? undefined : custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, children: child }, key));\n        }) }));\n};\n\nexport { AnimatePresence };\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport { AnalyticsId, KeyboardEventKey, ZIndex } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title, { TitleTags } 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  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\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  /** 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}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    ariaLabelCloseBtn,\n    children,\n    desktopDirection = 'left',\n    footerContent,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.Modal,\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  const breakpoint = useBreakpoint();\n  const isMobile = breakpoint < breakpoints.md;\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    onRequestClose && onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, []);\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  useEffect(() => {}, [isPresent]);\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            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            safeToRemove && safeToRemove();\n          },\n        }\n      );\n    }\n  };\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={styles.drawer__header}>\n            <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n              {title}\n            </Title>\n            <Close ariaLabel={ariaLabelCloseBtn} onClick={onRequestClose} small={isMobile} />\n          </div>\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            {children}\n          </div>\n        </div>\n        <div className={styles.drawer__footer}>\n          {footerContent ? (\n            footerContent\n          ) : (\n            <>\n              {primaryActionText && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n              {secondaryActionText && (\n                <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                  {secondaryActionText}\n                </Button>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n"],"names":[],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}
+{"version":3,"file":"index.js","sources":["../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/PresenceContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/utils.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs","../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\nimport { createContext } from 'react';\n\nconst LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst PresenceContext = createContext(null);\n\nexport { PresenceContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst MotionConfigContext = createContext({\n    transformPagePoint: (p) => p,\n    isStatic: false,\n    reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useRef, useContext, useInsertionEffect } from 'react';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component {\n    getSnapshotBeforeUpdate(prevProps) {\n        const element = this.props.childRef.current;\n        if (element && prevProps.isPresent && !this.props.isPresent) {\n            const size = this.props.sizeRef.current;\n            size.height = element.offsetHeight || 0;\n            size.width = element.offsetWidth || 0;\n            size.top = element.offsetTop;\n            size.left = element.offsetLeft;\n        }\n        return null;\n    }\n    /**\n     * Required with getSnapshotBeforeUpdate to stop React complaining.\n     */\n    componentDidUpdate() { }\n    render() {\n        return this.props.children;\n    }\n}\nfunction PopChild({ children, isPresent }) {\n    const id = useId();\n    const ref = useRef(null);\n    const size = useRef({\n        width: 0,\n        height: 0,\n        top: 0,\n        left: 0,\n    });\n    const { nonce } = useContext(MotionConfigContext);\n    /**\n     * We create and inject a style block so we can apply this explicit\n     * sizing in a non-destructive manner by just deleting the style block.\n     *\n     * We can't apply size via render as the measurement happens\n     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n     * styles directly on the DOM node, we might be overwriting\n     * styles set via the style prop.\n     */\n    useInsertionEffect(() => {\n        const { width, height, top, left } = size.current;\n        if (isPresent || !ref.current || !width || !height)\n            return;\n        ref.current.dataset.motionPopId = id;\n        const style = document.createElement(\"style\");\n        if (nonce)\n            style.nonce = nonce;\n        document.head.appendChild(style);\n        if (style.sheet) {\n            style.sheet.insertRule(`\n          [data-motion-pop-id=\"${id}\"] {\n            position: absolute !important;\n            width: ${width}px !important;\n            height: ${height}px !important;\n            top: ${top}px !important;\n            left: ${left}px !important;\n          }\n        `);\n        }\n        return () => {\n            document.head.removeChild(style);\n        };\n    }, [isPresent]);\n    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));\n}\n\nexport { PopChild };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useCallback, useMemo } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PopChild } from './PopChild.mjs';\n\nconst PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {\n    const presenceChildren = useConstant(newChildrenMap);\n    const id = useId();\n    const memoizedOnExitComplete = useCallback((childId) => {\n        presenceChildren.set(childId, true);\n        for (const isComplete of presenceChildren.values()) {\n            if (!isComplete)\n                return; // can stop searching when any is incomplete\n        }\n        onExitComplete && onExitComplete();\n    }, [presenceChildren, onExitComplete]);\n    const context = useMemo(() => ({\n        id,\n        initial,\n        isPresent,\n        custom,\n        onExitComplete: memoizedOnExitComplete,\n        register: (childId) => {\n            presenceChildren.set(childId, false);\n            return () => presenceChildren.delete(childId);\n        },\n    }), \n    /**\n     * If the presence of a child affects the layout of the components around it,\n     * we want to make a new context value to ensure they get re-rendered\n     * so they can detect that layout change.\n     */\n    presenceAffectsLayout\n        ? [Math.random(), memoizedOnExitComplete]\n        : [isPresent, memoizedOnExitComplete]);\n    useMemo(() => {\n        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));\n    }, [isPresent]);\n    /**\n     * If there's no `motion` components to fire exit animations, we want to remove this\n     * component immediately.\n     */\n    React.useEffect(() => {\n        !isPresent &&\n            !presenceChildren.size &&\n            onExitComplete &&\n            onExitComplete();\n    }, [isPresent]);\n    if (mode === \"popLayout\") {\n        children = jsx(PopChild, { isPresent: isPresent, children: children });\n    }\n    return (jsx(PresenceContext.Provider, { value: context, children: children }));\n};\nfunction newChildrenMap() {\n    return new Map();\n}\n\nexport { PresenceChild };\n","import { useContext, useId, useEffect, useCallback } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const [isPresent, safeToRemove] = usePresence()\n *\n *   useEffect(() => {\n *     !isPresent && setTimeout(safeToRemove, 1000)\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence(subscribe = true) {\n    const context = useContext(PresenceContext);\n    if (context === null)\n        return [true, null];\n    const { isPresent, onExitComplete, register } = context;\n    // It's safe to call the following hooks conditionally (after an early return) because the context will always\n    // either be null or non-null for the lifespan of the component.\n    const id = useId();\n    useEffect(() => {\n        if (subscribe)\n            register(id);\n    }, [subscribe]);\n    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);\n    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const isPresent = useIsPresent()\n *\n *   useEffect(() => {\n *     !isPresent && console.log(\"I've been removed!\")\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n    return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n    return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","import { Children, isValidElement } from 'react';\n\nconst getChildKey = (child) => child.key || \"\";\nfunction onlyElements(children) {\n    const filtered = [];\n    // We use forEach here instead of map as map mutates the component key by preprending `.$`\n    Children.forEach(children, (child) => {\n        if (isValidElement(child))\n            filtered.push(child);\n    });\n    return filtered;\n}\n\nexport { getChildKey, onlyElements };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","\"use client\";\nimport { jsx, Fragment } from 'react/jsx-runtime';\nimport { useMemo, useRef, useState, useContext } from 'react';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PresenceChild } from './PresenceChild.mjs';\nimport { usePresence } from './use-presence.mjs';\nimport { onlyElements, getChildKey } from './utils.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n *   <AnimatePresence>\n *     {items.map(item => (\n *       <motion.div\n *         key={item.id}\n *         initial={{ opacity: 0 }}\n *         animate={{ opacity: 1 }}\n *         exit={{ opacity: 0 }}\n *       />\n *     ))}\n *   </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nconst AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = \"sync\", propagate = false, }) => {\n    const [isParentPresent, safeToRemove] = usePresence(propagate);\n    /**\n     * Filter any children that aren't ReactElements. We can only track components\n     * between renders with a props.key.\n     */\n    const presentChildren = useMemo(() => onlyElements(children), [children]);\n    /**\n     * Track the keys of the currently rendered children. This is used to\n     * determine which children are exiting.\n     */\n    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);\n    /**\n     * If `initial={false}` we only want to pass this to components in the first render.\n     */\n    const isInitialRender = useRef(true);\n    /**\n     * A ref containing the currently present children. When all exit animations\n     * are complete, we use this to re-render the component with the latest children\n     * *committed* rather than the latest children *rendered*.\n     */\n    const pendingPresentChildren = useRef(presentChildren);\n    /**\n     * Track which exiting children have finished animating out.\n     */\n    const exitComplete = useConstant(() => new Map());\n    /**\n     * Save children to render as React state. To ensure this component is concurrent-safe,\n     * we check for exiting children via an effect.\n     */\n    const [diffedChildren, setDiffedChildren] = useState(presentChildren);\n    const [renderedChildren, setRenderedChildren] = useState(presentChildren);\n    useIsomorphicLayoutEffect(() => {\n        isInitialRender.current = false;\n        pendingPresentChildren.current = presentChildren;\n        /**\n         * Update complete status of exiting children.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const key = getChildKey(renderedChildren[i]);\n            if (!presentKeys.includes(key)) {\n                if (exitComplete.get(key) !== true) {\n                    exitComplete.set(key, false);\n                }\n            }\n            else {\n                exitComplete.delete(key);\n            }\n        }\n    }, [renderedChildren, presentKeys.length, presentKeys.join(\"-\")]);\n    const exitingChildren = [];\n    if (presentChildren !== diffedChildren) {\n        let nextChildren = [...presentChildren];\n        /**\n         * Loop through all the currently rendered components and decide which\n         * are exiting.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const child = renderedChildren[i];\n            const key = getChildKey(child);\n            if (!presentKeys.includes(key)) {\n                nextChildren.splice(i, 0, child);\n                exitingChildren.push(child);\n            }\n        }\n        /**\n         * If we're in \"wait\" mode, and we have exiting children, we want to\n         * only render these until they've all exited.\n         */\n        if (mode === \"wait\" && exitingChildren.length) {\n            nextChildren = exitingChildren;\n        }\n        setRenderedChildren(onlyElements(nextChildren));\n        setDiffedChildren(presentChildren);\n        /**\n         * Early return to ensure once we've set state with the latest diffed\n         * children, we can immediately re-render.\n         */\n        return;\n    }\n    if (process.env.NODE_ENV !== \"production\" &&\n        mode === \"wait\" &&\n        renderedChildren.length > 1) {\n        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`);\n    }\n    /**\n     * If we've been provided a forceRender function by the LayoutGroupContext,\n     * we can use it to force a re-render amongst all surrounding components once\n     * all components have finished animating out.\n     */\n    const { forceRender } = useContext(LayoutGroupContext);\n    return (jsx(Fragment, { children: renderedChildren.map((child) => {\n            const key = getChildKey(child);\n            const isPresent = propagate && !isParentPresent\n                ? false\n                : presentChildren === renderedChildren ||\n                    presentKeys.includes(key);\n            const onExit = () => {\n                if (exitComplete.has(key)) {\n                    exitComplete.set(key, true);\n                }\n                else {\n                    return;\n                }\n                let isEveryExitComplete = true;\n                exitComplete.forEach((isExitComplete) => {\n                    if (!isExitComplete)\n                        isEveryExitComplete = false;\n                });\n                if (isEveryExitComplete) {\n                    forceRender === null || forceRender === void 0 ? void 0 : forceRender();\n                    setRenderedChildren(pendingPresentChildren.current);\n                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());\n                    onExitComplete && onExitComplete();\n                }\n            };\n            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial\n                    ? undefined\n                    : false, custom: isPresent ? undefined : custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, children: child }, key));\n        }) }));\n};\n\nexport { AnimatePresence };\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport { AnalyticsId, KeyboardEventKey, ZIndex } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title, { TitleTags } 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  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\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  /** 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}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    ariaLabelCloseBtn,\n    children,\n    desktopDirection = 'left',\n    footerContent,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\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  const breakpoint = useBreakpoint();\n  const isMobile = breakpoint < breakpoints.md;\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    onRequestClose && onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, []);\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  useEffect(() => {}, [isPresent]);\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            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            safeToRemove && safeToRemove();\n          },\n        }\n      );\n    }\n  };\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={styles.drawer__header}>\n            <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n              {title}\n            </Title>\n            <Close ariaLabel={ariaLabelCloseBtn} onClick={onRequestClose} small={isMobile} />\n          </div>\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            {children}\n          </div>\n        </div>\n        <div className={styles.drawer__footer}>\n          {footerContent ? (\n            footerContent\n          ) : (\n            <>\n              {primaryActionText && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n              {secondaryActionText && (\n                <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                  {secondaryActionText}\n                </Button>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n"],"names":[],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}

package/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { HNDesignsystemDropdown } from '../../resources/Resources';
 export declare enum DropdownOnColor {
     onwhite = "onwhite",
     ongrey = "ongrey",
@@ -12,7 +13,7 @@ export interface DropdownProps {
     placeholder: string;
     /** Sets the dropdown content */
     children: React.ReactNode;
-    /** Close button text */
+    /** @deprecated Close button text */
     closeText?: string;
     /** Minimum width for the dropdown in pixels. Does not affect trigger button */
     dropdownMinWidth?: number;
@@ -34,6 +35,8 @@ export interface DropdownProps {
     testId?: string;
     /** Overrides the default z-index of the DropDownContent */
     zIndex?: number;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemDropdown>;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

package/components/Dropdown/index.js

@@ -8,8 +8,9 @@ import { useToggle } from "../../hooks/useToggle.js";
 import { useKeyboardEvent } from "../../hooks/useKeyboardEvent.js";
 import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
 import { useUuid } from "../../hooks/useUuid.js";
-import { ZIndex, KeyboardEventKey, AnalyticsId, IconSize } from "../../constants.js";
+import { LanguageLocales, ZIndex, KeyboardEventKey, AnalyticsId, IconSize } from "../../constants.js";
 import { isComponent } from "../../utils/component.js";
+import { useLanguage } from "../../utils/language.js";
 import { mergeRefs } from "../../utils/refs.js";
 import { B as Button } from "../../Button.js";
 import { C as Checkbox } from "../../Checkbox.js";
@@ -17,6 +18,23 @@ import { I as Icon } from "../../Icon.js";
 import PlusSmall from "../Icons/PlusSmall.js";
 import { R as RadioButton } from "../../RadioButton.js";
 import styles from "./styles.module.scss";
+const closeText$1 = "Close";
+const enGB = {
+  closeText: closeText$1
+};
+const closeText = "Lukk";
+const nbNO = {
+  closeText
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
 var DropdownOnColor = /* @__PURE__ */ ((DropdownOnColor2) => {
   DropdownOnColor2["onwhite"] = "onwhite";
   DropdownOnColor2["ongrey"] = "ongrey";
@@ -28,7 +46,6 @@ const Dropdown = (props) => {
   const {
     label,
     placeholder,
-    closeText = "Lukk",
     noCloseButton = false,
     onToggle,
     dropdownMinWidth,
@@ -39,7 +56,8 @@ const Dropdown = (props) => {
     fluid = false,
     testId,
     disabled,
-    zIndex = ZIndex.PopOver
+    zIndex = ZIndex.PopOver,
+    resources
   } = props;
   const dropdownRef = useRef(null);
   const optionsRef = useRef(null);
@@ -51,6 +69,13 @@ const Dropdown = (props) => {
   const labelId = useUuid();
   const toggleLabelId = useUuid();
   const optionIdPrefix = useUuid();
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources,
+    closeText: props.closeText ?? (resources == null ? void 0 : resources.closeText) ?? defaultResources.closeText
+  };
   const handleOpen = (isKeyboard) => {
     openedByKeyboard.current = isKeyboard;
     toggleIsOpen();
@@ -173,7 +198,7 @@ const Dropdown = (props) => {
           children: renderChildren
         }
       ),
-      !noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.dropdown__close, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, "aria-expanded": isOpen, children: closeText }) })
+      !noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.dropdown__close, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, "aria-expanded": isOpen, children: mergedResources.closeText }) })
     ] })
   ] });
 };

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      inputRefList.current\n        ?.find((inputRef, index) => {\n          if (inputRef.current && !inputRef.current.hasAttribute('disabled')) {\n            setCurrentIndex(index);\n            return true;\n          }\n        })\n        ?.current?.focus();\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const role = isComponent<RadioButtonProps>(child, RadioButton)\n      ? 'menuitemradio'\n      : isComponent<CheckboxProps>(child, Checkbox)\n        ? 'menuitemcheckbox'\n        : 'menuitem';\n\n    return (\n      <li className={styles.dropdown__input} role={role} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"menu\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor","React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\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, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { isComponent } from '../../utils/component';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** @deprecated Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n    closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n  };\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      inputRefList.current\n        ?.find((inputRef, index) => {\n          if (inputRef.current && !inputRef.current.hasAttribute('disabled')) {\n            setCurrentIndex(index);\n            return true;\n          }\n        })\n        ?.current?.focus();\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const role = isComponent<RadioButtonProps>(child, RadioButton)\n      ? 'menuitemradio'\n      : isComponent<CheckboxProps>(child, Checkbox)\n        ? 'menuitemcheckbox'\n        : 'menuitem';\n\n    return (\n      <li className={styles.dropdown__input} role={role} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"menu\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {mergedResources.closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor","React"],"mappings":"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"}

package/components/Dropdown/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { LanguageLocales } from '../../constants';
+import { HNDesignsystemDropdown } from '../../resources/Resources';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemDropdown;

package/components/ExpanderList/index.js

@@ -3,7 +3,7 @@ import React__default, { useState, useEffect, useRef } from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "../../constants.js";
 import { useExpand } from "../../hooks/useExpand.js";
-import { useHover } from "../../hooks/useHover.js";
+import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
 import { useUuid } from "../../hooks/useUuid.js";
 import { mergeRefs } from "../../utils/refs.js";
 import { isElementInViewport } from "../../utils/viewport.js";
@@ -28,12 +28,12 @@ const Expander = React__default.forwardRef((props, ref) => {
     onExpand,
     renderChildrenWhenClosed,
     variant = "line",
-    zIndex
+    zIndex = 0
   } = props;
   const [isExpanded] = useExpand(expanded, onExpand);
   const expanderRef = useRef(null);
   const triggerRef = useRef(null);
-  const { isHovered } = useHover(triggerRef);
+  const { isHovered, isFocused } = usePseudoClasses(triggerRef);
   const isFill = variant === "fill";
   const isFillNegative = variant === "fill-negative";
   const isOutline = variant === "outline";
@@ -82,9 +82,16 @@ const Expander = React__default.forwardRef((props, ref) => {
         ref: triggerRef,
         "aria-expanded": isExpanded,
         style: {
-          zIndex: zIndex ?? void 0
+          zIndex: isFocused ? zIndex + 1 : zIndex
         },
-        children: renderListHeader(title, titleHtmlMarkup, isHovered, large ? "large" : "medium", isExpanded ? ChevronUp : ChevronDown, icon)
+        children: renderListHeader(
+          title,
+          titleHtmlMarkup,
+          isHovered || isFocused,
+          large ? "large" : "medium",
+          isExpanded ? ChevronUp : ChevronDown,
+          icon
+        )
       }
     ),
     renderContent()

package/components/ExpanderList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the colors of the list. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n    /** Overrides the default z-index of the expander header */\n    zIndex?: number;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n    zIndex,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n    [expanderListStyles[`expander-list__item--fill`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list__item--outline']]: isOutline,\n    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n    [expanderListStyles['expander-list__item--line']]: isLine,\n    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list-link--outline']]: isOutline,\n    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: zIndex ?? undefined,\n        }}\n      >\n        {renderListHeader(title, titleHtmlMarkup, isHovered, large ? 'large' : 'medium', isExpanded ? ChevronUp : ChevronDown, icon)}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  const getExpanderId = (index: number): string => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    const newActiveExpander = React.Children.map(children, child => {\n      if (isExpanderComponent(child)) {\n        return child;\n      }\n    })?.reduce((acc, child, index) => {\n      // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n      if (typeof child.props.expanded !== 'undefined') {\n        acc[getExpanderId(index)] = child.props.expanded;\n      }\n      return acc;\n    }, {} as ActiveExpander);\n\n    setActiveExpander({ ...activeExpander, ...newActiveExpander });\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            'aria-expanded': expanded,\n            className: expanderListStyles['expander-list__item'],\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n            zIndex: zIndex,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the colors of the list. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n    /** Overrides the default z-index of the expander header */\n    zIndex?: number;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n    zIndex = 0,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered, isFocused } = usePseudoClasses(triggerRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n    [expanderListStyles[`expander-list__item--fill`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list__item--outline']]: isOutline,\n    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n    [expanderListStyles['expander-list__item--line']]: isLine,\n    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list-link--outline']]: isOutline,\n    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: isFocused ? zIndex + 1 : zIndex,\n        }}\n      >\n        {renderListHeader(\n          title,\n          titleHtmlMarkup,\n          isHovered || isFocused,\n          large ? 'large' : 'medium',\n          isExpanded ? ChevronUp : ChevronDown,\n          icon\n        )}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: unknown | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  const getExpanderId = (index: number): string => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    const newActiveExpander = React.Children.map(children, child => {\n      if (isExpanderComponent(child)) {\n        return child;\n      }\n    })?.reduce((acc, child, index) => {\n      // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n      if (typeof child.props.expanded !== 'undefined') {\n        acc[getExpanderId(index)] = child.props.expanded;\n      }\n      return acc;\n    }, {} as ActiveExpander);\n\n    setActiveExpander({ ...activeExpander, ...newActiveExpander });\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            'aria-expanded': expanded,\n            className: expanderListStyles['expander-list__item'],\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n            zIndex: zIndex,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["React"],"mappings":"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"}

package/components/Modal/index.js

@@ -7,6 +7,7 @@ import { useIsVisible } from "../../hooks/useIsVisible.js";
 import { useReturnFocusOnUnmount } from "../../hooks/useReturnFocusOnUnmount.js";
 import { palette } from "../../theme/palette.js";
 import { getAriaLabelAttributes } from "../../utils/accessibility.js";
+import { disableBodyScroll, enableBodyScroll } from "../../utils/scroll.js";
 import { u as uuid } from "../../uuid.js";
 import { B as Button } from "../../Button.js";
 import { C as Close } from "../../Close.js";
@@ -60,7 +61,7 @@ const Modal = (props) => {
     titleId = uuid(),
     className = "",
     size = "large",
-    zIndex = ZIndex.Modal
+    zIndex = ZIndex.OverlayScreen
   } = props;
   const topContent = React__default.useRef(null);
   const modalContentRef = React__default.useRef(null);
@@ -83,12 +84,6 @@ const Modal = (props) => {
       props.onClose();
     }
   }
-  function disableBodyScroll() {
-    document.body.style.overflow = "hidden";
-  }
-  function enableBodyScroll() {
-    document.body.style.removeProperty("overflow");
-  }
   const imageView = variant === "image";
   const overlayRef = React__default.useRef(null);
   const showActions = props.secondaryButtonText && ((_a = props.secondaryButtonText) == null ? void 0 : _a.length) > 0 || props.onSuccess;

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.Modal,\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role=\"dialog\" aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","React","_a","cn"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\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, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.OverlayScreen,\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role=\"dialog\" aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","React","_a","cn"],"mappings":"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"}

package/constants.d.ts

@@ -7,9 +7,8 @@ export declare enum IconSize {
     XLarge = 130
 }
 export declare enum ZIndex {
-    Modal = 1300000,
+    OverlayScreen = 1300000,
     PopOver = 11000,
-    OverlayScreen = 9999,
     LightBoxButtons = 1000
 }
 export declare const AVERAGE_CHARACTER_WIDTH_PX = 12;

package/constants.js

@@ -8,9 +8,8 @@ var IconSize = /* @__PURE__ */ ((IconSize2) => {
   return IconSize2;
 })(IconSize || {});
 var ZIndex = /* @__PURE__ */ ((ZIndex2) => {
-  ZIndex2[ZIndex2["Modal"] = 13e5] = "Modal";
+  ZIndex2[ZIndex2["OverlayScreen"] = 13e5] = "OverlayScreen";
   ZIndex2[ZIndex2["PopOver"] = 11e3] = "PopOver";
-  ZIndex2[ZIndex2["OverlayScreen"] = 9999] = "OverlayScreen";
   ZIndex2[ZIndex2["LightBoxButtons"] = 1e3] = "LightBoxButtons";
   return ZIndex2;
 })(ZIndex || {});

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  PopOver = 11000,\n  OverlayScreen = 9999,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}

package/hooks/useBreakpoint.js

@@ -20,7 +20,9 @@ function getCurrentBreakpoint() {
   return (matched == null ? void 0 : matched.breakpoint) ?? Breakpoint.xxs;
 }
 const useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState(() => getCurrentBreakpoint());
+  const [breakpoint, setBreakpoint] = useState(
+    typeof window.matchMedia !== "undefined" ? getCurrentBreakpoint() : Breakpoint.xxs
+  );
   useEffect(() => {
     const handleMediaQueryEvent = (event) => {
       switch (event.media) {

package/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(() => getCurrentBreakpoint());\n\n  useEffect(() => {\n    const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {\n      switch (event.media) {\n        case screen.xl:\n          setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);\n          return;\n        case screen.lg:\n          setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);\n          return;\n        case screen.md:\n          setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);\n          return;\n        case screen.sm:\n          setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);\n          return;\n        case screen.xs:\n          setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);\n          return;\n        default:\n          setBreakpoint(Breakpoint.xxs);\n      }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {\n      const mq = window.matchMedia(mediaQuery);\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleMediaQueryEvent);\n      } else if (mq.addListener) {\n        mq.addListener(handleMediaQueryEvent);\n      }\n      return mq;\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleMediaQueryEvent);\n        } else if (mq.removeListener) {\n          mq.removeListener(handleMediaQueryEvent);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,WAAA;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAClC;AAAA,EAAA,CACD;AAEH,QAAM,UAAU,eAAe,KAAK,CAAS,UAAA,MAAM,GAAG,OAAO;AACtD,UAAA,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB,MAAM,sBAAsB;AAErF,YAAU,MAAM;AACR,UAAA,wBAAwB,CAAC,UAAqC;AAClE,cAAQ,MAAM,OAAO;AAAA,QACnB,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,GAAG;AAC5D;AAAA,QACF;AACE,wBAAc,WAAW,GAAG;AAAA,MAAA;AAAA,IAElC;AAGM,UAAA,iBAAiB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,UAAU,MAAM;AACnE,YAAA,KAAK,OAAO,WAAW,UAAU;AAGvC,UAAI,GAAG,kBAAkB;AACpB,WAAA,iBAAiB,UAAU,qBAAqB;AAAA,MAAA,WAC1C,GAAG,aAAa;AACzB,WAAG,YAAY,qBAAqB;AAAA,MAAA;AAE/B,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAM,OAAA;AAC3B,YAAI,GAAG,qBAAqB;AACvB,aAAA,oBAAoB,UAAU,qBAAqB;AAAA,QAAA,WAC7C,GAAG,gBAAgB;AAC5B,aAAG,eAAe,qBAAqB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}
+{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(\n    typeof window.matchMedia !== 'undefined' ? getCurrentBreakpoint() : Breakpoint.xxs\n  );\n\n  useEffect(() => {\n    const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {\n      switch (event.media) {\n        case screen.xl:\n          setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);\n          return;\n        case screen.lg:\n          setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);\n          return;\n        case screen.md:\n          setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);\n          return;\n        case screen.sm:\n          setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);\n          return;\n        case screen.xs:\n          setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);\n          return;\n        default:\n          setBreakpoint(Breakpoint.xxs);\n      }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {\n      const mq = window.matchMedia(mediaQuery);\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleMediaQueryEvent);\n      } else if (mq.addListener) {\n        mq.addListener(handleMediaQueryEvent);\n      }\n      return mq;\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleMediaQueryEvent);\n        } else if (mq.removeListener) {\n          mq.removeListener(handleMediaQueryEvent);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,WAAA;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAClC;AAAA,EAAA,CACD;AAEH,QAAM,UAAU,eAAe,KAAK,CAAS,UAAA,MAAM,GAAG,OAAO;AACtD,UAAA,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AACvC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,OAAO,OAAO,eAAe,cAAc,qBAAA,IAAyB,WAAW;AAAA,EACjF;AAEA,YAAU,MAAM;AACR,UAAA,wBAAwB,CAAC,UAAqC;AAClE,cAAQ,MAAM,OAAO;AAAA,QACnB,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,GAAG;AAC5D;AAAA,QACF;AACE,wBAAc,WAAW,GAAG;AAAA,MAAA;AAAA,IAElC;AAGM,UAAA,iBAAiB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,UAAU,MAAM;AACnE,YAAA,KAAK,OAAO,WAAW,UAAU;AAGvC,UAAI,GAAG,kBAAkB;AACpB,WAAA,iBAAiB,UAAU,qBAAqB;AAAA,MAAA,WAC1C,GAAG,aAAa;AACzB,WAAG,YAAY,qBAAqB;AAAA,MAAA;AAE/B,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAM,OAAA;AAC3B,YAAI,GAAG,qBAAqB;AACvB,aAAA,oBAAoB,UAAU,qBAAqB;AAAA,QAAA,WAC7C,GAAG,gBAAgB;AAC5B,aAAG,eAAe,qBAAqB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "10.6.2",
+  "version": "10.7.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/resources/HN.Designsystem.Dropdown.en-GB.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "closeText": "Close"
+}
+;
+
+export default _default;

package/resources/HN.Designsystem.Dropdown.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "closeText": "Lukk"
+}
+;
+
+export default _default;

package/utils/scroll.d.ts

@@ -0,0 +1,2 @@
+export declare const disableBodyScroll: () => void;
+export declare const enableBodyScroll: () => void;

package/utils/scroll.js

@@ -0,0 +1,11 @@
+const disableBodyScroll = () => {
+  document.body.style.overflow = "hidden";
+};
+const enableBodyScroll = () => {
+  document.body.style.removeProperty("overflow");
+};
+export {
+  disableBodyScroll,
+  enableBodyScroll
+};
+//# sourceMappingURL=scroll.js.map

package/utils/scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.js","sources":["../../src/utils/scroll.ts"],"sourcesContent":["export const disableBodyScroll = (): void => {\n  document.body.style.overflow = 'hidden';\n};\n\nexport const enableBodyScroll = (): void => {\n  document.body.style.removeProperty('overflow');\n};\n"],"names":[],"mappings":"AAAO,MAAM,oBAAoB,MAAY;AAClC,WAAA,KAAK,MAAM,WAAW;AACjC;AAEO,MAAM,mBAAmB,MAAY;AACjC,WAAA,KAAK,MAAM,eAAe,UAAU;AAC/C;"}