@helsenorge/designsystem-react 3.0.1 → 3.1.0

package/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from './PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Closes popover on click outside the bubble. */\n  closeOnClickOutside?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={bubbleStyle}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={arrowStyle} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["BUBBLE_WIDTH_PX","WINDOW_MARGIN_PX","BUBBLE_VERTICAL_OFFSET_PX","ARROW_WIDTH_PX","ARROW_VERTICAL_OFFSET_PX","ARROW_HORIZONTAL_MARGIN_PX","getVerticalPosition","controllerSize","bubbleSize","variant","PopOverVariant","getControllerLeftCenterPx","getControllerRightCenterPx","getBubbleLeftPx","getBubbleRightPx","getBubbleLeftVisible","getBubbleRightIsVisible","getHorizontalPosition","getBubbleAbovePx","getBubbleBelowPx","getBubbleWidth","getBubbleFitsInWindow","getArrowTopxPx","getArrowLeftPx","getArrowRightPx","getBubblePosition","horizontalPosition","verticalPosition","getBubbleStyle","bubblePosition","bubbleWidth","getArrowStyle","bubbleStyle","leftPx","rightPx","minLeftPx","minRightPx","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","role","testId","arrowClassName","bubbleRef","useRef","arrowRef","useSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","arrowClasses","arrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":"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"}
+{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from './PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={bubbleStyle}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={arrowStyle} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["BUBBLE_WIDTH_PX","WINDOW_MARGIN_PX","BUBBLE_VERTICAL_OFFSET_PX","ARROW_WIDTH_PX","ARROW_VERTICAL_OFFSET_PX","ARROW_HORIZONTAL_MARGIN_PX","getVerticalPosition","controllerSize","bubbleSize","variant","PopOverVariant","getControllerLeftCenterPx","getControllerRightCenterPx","getBubbleLeftPx","getBubbleRightPx","getBubbleLeftVisible","getBubbleRightIsVisible","getHorizontalPosition","getBubbleAbovePx","getBubbleBelowPx","getBubbleWidth","getBubbleFitsInWindow","getArrowTopxPx","getArrowLeftPx","getArrowRightPx","getBubblePosition","horizontalPosition","verticalPosition","getBubbleStyle","bubblePosition","bubbleWidth","getArrowStyle","bubbleStyle","leftPx","rightPx","minLeftPx","minRightPx","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","role","testId","arrowClassName","bubbleRef","useRef","arrowRef","useSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","arrowClasses","arrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":"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"}

package/components/PopMenu/PopMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopMenu.d.ts","sourceRoot":"","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKtD,oBAAY,cAAc;IACxB,OAAO,aAAa;IACpB,MAAM,YAAY;IAClB,WAAW,iBAAiB;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5C,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4E1C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"PopMenu.d.ts","sourceRoot":"","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKtD,oBAAY,cAAc;IACxB,OAAO,aAAa;IACpB,MAAM,YAAY;IAClB,WAAW,iBAAiB;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5C,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA2E1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/PopMenu/styles.module.scss

@@ -134,5 +134,5 @@ html :focus > .pop-menu-button {
 }
 
 .pop-menu__pop-over-arrow {
-  filter: drop-shadow(0 -0.185rem 0 rgb(24 128 151));
+  --drop-shadow-color: rgb(24 128 151);
 }

package/components/PopOver/PopOver.d.ts

@@ -24,8 +24,6 @@ export interface PopOverProps {
     variant?: keyof typeof PopOverVariant;
     /** Sets role of the PopOver element */
     role?: PopOverRole;
-    /** Closes popover on click outside the bubble. */
-    closeOnClickOutside?: boolean;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/PopOver/PopOver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.d.ts","sourceRoot":"","sources":["../../../src/components/PopOver/PopOver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAc3D,oBAAY,cAAc;IACxB,iBAAiB,sBAAsB;IACvC,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AAEpC,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sHAAsH;IACtH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,qDAAqD;IACrD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,uCAAuC;IACvC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,OAAO,qGA2DX,CAAC;AAIH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"PopOver.d.ts","sourceRoot":"","sources":["../../../src/components/PopOver/PopOver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAc3D,oBAAY,cAAc;IACxB,iBAAiB,sBAAsB;IACvC,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AAEpC,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sHAAsH;IACtH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,qDAAqD;IACrD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,uCAAuC;IACvC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,OAAO,qGA2DX,CAAC;AAIH,eAAe,OAAO,CAAC"}

package/components/PopOver/componentdata.json

@@ -1 +1 @@
-{"props":{"id":{"defaultValue":null,"description":"Id of the PopOver","name":"id","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements.","name":"children","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":true,"type":{"name":"ReactNode"}},"controllerRef":{"defaultValue":null,"description":"Ref for the element the PopOver is placed upon","name":"controllerRef","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":true,"type":{"name":"RefObject<HTMLElement | SVGSVGElement>"}},"popOverRef":{"defaultValue":null,"description":"Ref for the element the PopOver is placed upon","name":"popOverRef","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"RefObject<HTMLDivElement>"}},"show":{"defaultValue":null,"description":"Show the popover. Only applies when role=tooltip. Default: false.","name":"show","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"boolean"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"arrowClassName":{"defaultValue":null,"description":"Adds custom classes to the arrow element.","name":"arrowClassName","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Determines the placement of the popover. Default: automatic positioning.","name":"variant","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"enum","raw":"\"positionautomatic\" | \"positionbelow\" | \"positionabove\"","value":[{"value":"\"positionautomatic\""},{"value":"\"positionbelow\""},{"value":"\"positionabove\""}]}},"role":{"defaultValue":null,"description":"Sets role of the PopOver element","name":"role","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"enum","raw":"\"tooltip\"","value":[{"value":"\"tooltip\""}]}},"closeOnClickOutside":{"defaultValue":null,"description":"Closes popover on click outside the bubble.","name":"closeOnClickOutside","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"id":{"defaultValue":null,"description":"Id of the PopOver","name":"id","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements.","name":"children","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":true,"type":{"name":"ReactNode"}},"controllerRef":{"defaultValue":null,"description":"Ref for the element the PopOver is placed upon","name":"controllerRef","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":true,"type":{"name":"RefObject<HTMLElement | SVGSVGElement>"}},"popOverRef":{"defaultValue":null,"description":"Ref for the element the PopOver is placed upon","name":"popOverRef","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"RefObject<HTMLDivElement>"}},"show":{"defaultValue":null,"description":"Show the popover. Only applies when role=tooltip. Default: false.","name":"show","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"boolean"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"arrowClassName":{"defaultValue":null,"description":"Adds custom classes to the arrow element.","name":"arrowClassName","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Determines the placement of the popover. Default: automatic positioning.","name":"variant","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"enum","raw":"\"positionautomatic\" | \"positionbelow\" | \"positionabove\"","value":[{"value":"\"positionautomatic\""},{"value":"\"positionbelow\""},{"value":"\"positionabove\""}]}},"role":{"defaultValue":null,"description":"Sets role of the PopOver element","name":"role","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"enum","raw":"\"tooltip\"","value":[{"value":"\"tooltip\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"},"declarations":[{"fileName":"src/components/PopOver/PopOver.tsx","name":"PopOverProps"}],"required":false,"type":{"name":"string"}}}}

package/components/PopOver/styles.module.scss

@@ -42,6 +42,8 @@
   }
 
   &__arrow {
+    --drop-shadow-color: #{$plum600};
+
     width: 0;
     height: 0;
     position: fixed;
@@ -52,15 +54,15 @@
     &--over {
       border-width: 0.625rem;
       border-bottom-color: $white;
-      filter: drop-shadow($plum600 0 0.125rem 0.375rem 0.125rem);
-      filter: drop-shadow(0 -0.185rem 0 $plum600);
+      filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
+      filter: drop-shadow(0 -0.185rem 0 var(--drop-shadow-color));
     }
 
     &--under {
       border-width: 0.625rem;
       border-top-color: $white;
-      filter: drop-shadow($plum600 0 0.125rem 0.375rem 0.125rem);
-      filter: drop-shadow(0 0.2rem 0 $plum600);
+      filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
+      filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
     }
   }
 }

package/components/Step/Step.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ButtonProps } from '../Button';
+import { StepperProps } from '../Stepper';
+interface StepProps {
+    /** Stepper viser fremdriften */
+    stepper?: React.ReactElement<StepperProps>;
+    /** Innhold i steget */
+    children: React.ReactNode;
+    /** Knapp for å gå tilbake. Vises med "outline" variant. */
+    backButton?: React.ReactElement<ButtonProps>;
+    /** Knapp for å gå videre. Vises med "fill" variant. */
+    forwardButton?: React.ReactElement<ButtonProps>;
+    /** Ekstra knapper. Valgfritt utseende. */
+    additionalButtons?: React.ReactElement<ButtonProps>[];
+    /** Knapp for å avbryte eller fortsette senere. Vises med "borderless" variant. */
+    cancelButton?: React.ReactElement<ButtonProps>;
+}
+declare const Step: React.FC<StepProps>;
+export default Step;
+//# sourceMappingURL=Step.d.ts.map

package/components/Step/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Step/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1C,UAAU,SAAS;IACjB,gCAAgC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC7C,uDAAuD;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAChD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IACtD,kFAAkF;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiC7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/Step/componentdata.json

@@ -0,0 +1 @@
+{"props":{"stepper":{"defaultValue":null,"description":"Stepper viser fremdriften","name":"stepper","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<StepperProps, string | JSXElementConstructor<any>>"}},"children":{"defaultValue":null,"description":"Innhold i steget","name":"children","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"backButton":{"defaultValue":null,"description":"Knapp for å gå tilbake. Vises med \"outline\" variant.","name":"backButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"forwardButton":{"defaultValue":null,"description":"Knapp for å gå videre. Vises med \"fill\" variant.","name":"forwardButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"additionalButtons":{"defaultValue":null,"description":"Ekstra knapper. Valgfritt utseende.","name":"additionalButtons","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>[]"}},"cancelButton":{"defaultValue":null,"description":"Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant.","name":"cancelButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}}}}

package/components/Step/index.d.ts

@@ -0,0 +1,4 @@
+import Step from './Step';
+export * from './Step';
+export default Step;
+//# sourceMappingURL=index.d.ts.map

package/components/Step/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Step/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,eAAe,IAAI,CAAC"}

package/components/Step/index.js

@@ -0,0 +1,2 @@
+import e from"react";import s from"classnames";import t from"./styles.module.scss";const _=({stepper:n,children:p,backButton:a,forwardButton:l,additionalButtons:m,cancelButton:r})=>e.createElement(e.Fragment,null,n&&e.createElement("div",{className:t.step__stepper},n),e.createElement("div",{className:t.step__content},p),e.createElement("div",{className:t.step__navigation},(a||l)&&e.createElement("div",{className:s(t.step__buttons,t["step__buttons--navigation"])},a&&e.cloneElement(a,{variant:"outline",wrapperClassName:s(t["step__button--back"])}),l&&e.cloneElement(l,{variant:"fill",wrapperClassName:s(t["step__button--forward"])})),m&&e.createElement("div",{className:s(t.step__buttons,t["step__buttons--additional"])},m),r&&e.createElement("div",{className:t.step__buttons},e.cloneElement(r,{variant:"borderless"})))),v=_;export{v as default};
+//# sourceMappingURL=index.js.map

package/components/Step/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { ButtonProps } from '../Button';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\ninterface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n}\n\nconst Step: React.FC<StepProps> = ({ stepper, children, backButton, forwardButton, additionalButtons, cancelButton }) => {\n  return (\n    <>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      <div className={styles.step__navigation}>\n        {(backButton || forwardButton) && (\n          <div className={classNames(styles.step__buttons, styles['step__buttons--navigation'])}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['step__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['step__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.step__buttons, styles['step__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.step__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","React","styles","classNames","Step$1"],"mappings":"mFAwBA,MAAMA,EAA4B,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,kBAAAC,EAAmB,aAAAC,qCAG/FL,GAAWM,EAAA,cAAC,MAAI,CAAA,UAAWC,EAAO,eAAgBP,CAAQ,EAC3DM,EAAA,cAAC,OAAI,UAAWC,EAAO,aAAgB,EAAAN,CAAS,EAC/CK,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,mBACnBL,GAAcC,IACbG,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAWD,EAAO,cAAeA,EAAO,2BAA2B,CAAC,CAAA,EACjFL,GACCI,EAAM,aAAaJ,EAAY,CAC7B,QAAS,UACT,iBAAkBM,EAAWD,EAAO,oBAAoB,CAAC,CAC1D,CAAA,EACFJ,GACCG,EAAM,aAAaH,EAAe,CAChC,QAAS,OACT,iBAAkBK,EAAWD,EAAO,uBAAuB,CAAC,CAC7D,CAAA,CACL,EAEDH,GACCE,EAAA,cAAC,OAAI,UAAWE,EAAWD,EAAO,cAAeA,EAAO,2BAA2B,CAAC,GAAIH,CAAkB,EAE3GC,GACEC,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,aAAA,EACpBD,EAAM,aAAaD,EAAc,CAChC,QAAS,YAAA,CACV,CACH,CAEJ,CACF,EAIJI,EAAeV"}

package/components/Step/styles.module.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/screen-reader';
+
+.step {
+  &__stepper {
+    margin-bottom: getSpacer(m);
+  }
+
+  &__content {
+    margin-bottom: getSpacer(m);
+  }
+
+  &__navigation {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: getSpacer(l);
+    row-gap: getSpacer(m);
+  }
+
+  &__buttons {
+    display: flex;
+    gap: getSpacer(s);
+
+    @media (max-width: map.get($grid-max-breakpoints, xs)) {
+      width: 100%;
+    }
+
+    &--additional {
+      flex-wrap: wrap;
+    }
+  }
+
+  &__button {
+    &--back,
+    &--forward {
+      @media (max-width: map.get($grid-max-breakpoints, xs)) {
+        width: 50%;
+      }
+    }
+  }
+}

package/components/Step/styles.module.scss.d.ts

@@ -0,0 +1,15 @@
+export type Styles = {
+  'step__button--back': string;
+  'step__button--forward': string;
+  step__buttons: string;
+  'step__buttons--additional': string;
+  step__content: string;
+  step__navigation: string;
+  step__stepper: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Stepper/styles.module.scss

@@ -14,7 +14,7 @@
   }
 }
 
-$transition: 0.4s linear 0s;
+$transition: 0.4s ease-in-out 0s;
 
 /**
  * Bredde og høyde på markør

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
   "homepage": "https://helsenorge.design",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {

package/utils/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/utils/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,eAAO,MAAM,WAAW,eACb,EAAE,GAAG,IAAI,GAAG,SAAS,uJAEwF,CAAC;AAEzH,eAAO,MAAM,uBAAuB,eAAgB,EAAE,GAAG,IAAI,GAAG,SAAS,yGAEsC,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/utils/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,eAAO,MAAM,WAAW,eACb,EAAE,GAAG,IAAI,GAAG,SAAS,uJAEwF,CAAC;AAEzH,eAAO,MAAM,uBAAuB,eAAgB,EAAE,GAAG,IAAI,GAAG,SAAS,yGACpB,CAAC"}

package/utils/component.js

@@ -1,2 +1,2 @@
-import t from"react";const n=(o,i)=>t.isValidElement(o)&&o.type===i,r=o=>t.isValidElement(o)&&Object.prototype.hasOwnProperty.call(o.props,"children");export{n as isComponent,r as isComponentWithChildren};
+import i from"react";const e=(t,o)=>i.isValidElement(t)&&t.type===o,s=t=>i.isValidElement(t);export{e as isComponent,s as isComponentWithChildren};
 //# sourceMappingURL=component.js.map

package/utils/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/utils/component.ts"],"sourcesContent":["import React, { PropsWithChildren } from 'react';\n\nexport const isComponent = <T>(\n  element: {} | null | undefined,\n  type: React.ForwardRefExoticComponent<T> | React.FunctionComponent<T>\n): element is React.ReactElement<T> => React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n\nexport const isComponentWithChildren = <T>(element: {} | null | undefined): element is React.ReactElement<PropsWithChildren<T>> =>\n  React.isValidElement<PropsWithChildren<T>>(element) &&\n  Object.prototype.hasOwnProperty.call((element as React.ReactElement<PropsWithChildren<T>>).props, 'children');\n"],"names":["isComponent","element","type","React","isComponentWithChildren"],"mappings":"qBAEa,MAAAA,EAAc,CACzBC,EACAC,IACqCC,EAAM,eAAkBF,CAAO,GAAMA,EAA+B,OAASC,EAEvGE,EAA8BH,GACzCE,EAAM,eAAqCF,CAAO,GAClD,OAAO,UAAU,eAAe,KAAMA,EAAqD,MAAO,UAAU"}
+{"version":3,"file":"component.js","sources":["../../src/utils/component.ts"],"sourcesContent":["import React, { PropsWithChildren } from 'react';\n\nexport const isComponent = <T>(\n  element: {} | null | undefined,\n  type: React.ForwardRefExoticComponent<T> | React.FunctionComponent<T>\n): element is React.ReactElement<T> => React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n\nexport const isComponentWithChildren = <T>(element: {} | null | undefined): element is React.ReactElement<PropsWithChildren<T>> =>\n  React.isValidElement<PropsWithChildren<T>>(element);\n"],"names":["isComponent","element","type","React","isComponentWithChildren"],"mappings":"qBAEa,MAAAA,EAAc,CACzBC,EACAC,IACqCC,EAAM,eAAkBF,CAAO,GAAMA,EAA+B,OAASC,EAEvGE,EAA8BH,GACzCE,EAAM,eAAqCF,CAAO"}