@helsenorge/designsystem-react 16.0.0 → 16.2.0

package/lib/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","names":[],"sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\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 { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { PopOverVariant } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport type PopOverRole = 'tooltip' | 'dialog' | 'group';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\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 | null>;\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  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLDivElement | SVGSVGElement | HTMLElement | null>;\n}\n\nconst PopOver: React.FC<PopOverProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n    ref,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context, middlewareData } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const isVisible = show && !middlewareData.hide?.referenceHidden;\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: isVisible ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-dark)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n};\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n","import PopOver from './PopOver';\nexport { PopOverVariant } from './utils';\nexport * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;;AAEA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,uBAAA;CACA,eAAA,mBAAA;CACA,eAAA,mBAAA;;AACF,EAAA,CAAA,CAAA;;;ACsDA,IAAM,WAAkC,UAAS;CAC/C,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,WACA,QACE;CAEJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;CAAiB,CAAC;CAE7F,MAAM,gBAAgB,cAAc,YAAY,eAAe,gBAAgB,QAAQ;CAEvF,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,EAAE,MAAM,gBAAgB,SAAS,mBAAmB,YAAY;EACpE,YAAY;GAAC,OAAO,EAAE;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,EAAE,CAAC;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,SAAS,CAAC;EAAC;EAC5F,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,cAAc,QAC3B;CACF,CAAC;CAED,MAAM,QAAQ,SAAS,OAAO;CAC9B,MAAM,UAAU,WAAW,OAAO;CAElC,MAAM,EAAE,qBAAqB,gBAAgB,CAAC,OAAO,OAAO,CAAC;CAE7D,MAAM,YAAY,QAAQ,CAAC,eAAe,MAAM;CAEhD,MAAM,YAAY,aAA0C,CAAC,KAAK,aAAa,GAAG,CAAC;CAEnF,OACE,oBAAC,sBAAD;EAA+B;EAAS,OAAO;EAC7C,UAAA,qBAAC,OAAD;GACM;GACJ,KAAK;GACL,OAAO;IAAE,GAAG;IAAgB,YAAY,YAAY,YAAY;IAAkB;GAAO;GACzF,WAAW,WAAW,OAAO,SAAS,SAAS;GAC/C,GAAI,iBAAiB;GACf;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,GAAI;GATN,UAAA,CAWG,UACD,oBAAC,eAAD;IACE,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;GACd,CAAA,CACE;;CACe,CAAA;AAE1B;AAEA,QAAQ,cAAc;;;AC5HtB,IAAA,kBAAe"}
+{"version":3,"file":"PopOver.js","names":[],"sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\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 { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { PopOverVariant } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport type PopOverRole = 'tooltip' | 'dialog' | 'group';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\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 | null>;\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  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLDivElement | SVGSVGElement | HTMLElement | null>;\n}\n\nconst PopOver: React.FC<PopOverProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n    ref,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: show ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-dark)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n};\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n","import PopOver from './PopOver';\nexport { PopOverVariant } from './utils';\nexport * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;;AAEA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,uBAAA;CACA,eAAA,mBAAA;CACA,eAAA,mBAAA;;AACF,EAAA,CAAA,CAAA;;;ACsDA,IAAM,WAAkC,UAAS;CAC/C,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,WACA,QACE;CAEJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;CAAiB,CAAC;CAE7F,MAAM,gBAAgB,cAAc,YAAY,eAAe,gBAAgB,QAAQ;CAEvF,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,EAAE,MAAM,gBAAgB,YAAY,YAAY;EACpD,YAAY;GAAC,OAAO,EAAE;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,EAAE,CAAC;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,SAAS,CAAC;EAAC;EAC5F,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,cAAc,QAC3B;CACF,CAAC;CAED,MAAM,QAAQ,SAAS,OAAO;CAC9B,MAAM,UAAU,WAAW,OAAO;CAElC,MAAM,EAAE,qBAAqB,gBAAgB,CAAC,OAAO,OAAO,CAAC;CAE7D,MAAM,YAAY,aAA0C,CAAC,KAAK,aAAa,GAAG,CAAC;CAEnF,OACE,oBAAC,sBAAD;EAA+B;EAAS,OAAO;EAC7C,UAAA,qBAAC,OAAD;GACM;GACJ,KAAK;GACL,OAAO;IAAE,GAAG;IAAgB,YAAY,OAAO,YAAY;IAAkB;GAAO;GACpF,WAAW,WAAW,OAAO,SAAS,SAAS;GAC/C,GAAI,iBAAiB;GACf;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,GAAI;GATN,UAAA,CAWG,UACD,oBAAC,eAAD;IACE,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;GACd,CAAA,CACE;;CACe,CAAA;AAE1B;AAEA,QAAQ,cAAc;;;AC1HtB,IAAA,kBAAe"}

package/lib/Radio.js

@@ -70,8 +70,6 @@ var Radio = (props) => {
 				inputId,
 				onColor,
 				labelClassName: radioLabelClasses,
-				sublabelWrapperClassName: radioStyles["radio-sublabel-wrapper"],
-				large: isLarge,
 				afterLabelChildrenClassName: radioStyles["radio-afterlabelchildren-wrapper"]
 			})
 		})

package/lib/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":[],"sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport RadioMarker from './RadioMarker/RadioMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioStyles from './styles.module.scss';\n\nexport interface RadioProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radio - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radio */\n  inputId?: string;\n  /** Changes the visuals of the radio */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radio. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radio - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Radio: React.FC<RadioProps> = props => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioWrapperClasses = classNames(radioStyles['radio-wrapper'], {\n    [radioStyles['radio-wrapper__large']]: isLarge,\n    [radioStyles['radio-wrapper__large--invalid']]: isLarge && onCherry,\n    [radioStyles['radio-wrapper__large--on-blueberry']]: isLarge && onBlueberry,\n  });\n  const radioLabelClasses = classNames(\n    radioStyles['radio-label'],\n    {\n      [radioStyles['radio-label--disabled']]: disabled,\n      [radioStyles['radio-label--on-dark']]: onDark,\n      [radioStyles['radio-label--invalid']]: invalid,\n      [radioStyles['radio-label__large']]: isLarge,\n      [radioStyles['radio-label__large--disabled']]: isLarge && disabled,\n      [radioStyles['radio-label__large--on-grey']]: isLarge && onGrey,\n      [radioStyles['radio-label__large--on-blueberry']]: isLarge && onBlueberry,\n      [radioStyles['radio-label__large--invalid']]: isLarge && onCherry,\n    },\n    labelClassNames\n  );\n  const radioClasses = classNames(radioStyles['radio'], className);\n\n  const getLabelContent = (): React.ReactNode => (\n    <span className={radioStyles['radio__marker-wrapper']}>\n      <input\n        {...rest}\n        id={inputId}\n        name={name}\n        className={radioClasses}\n        type=\"radio\"\n        disabled={disabled}\n        value={value}\n        ref={ref}\n        defaultChecked={defaultChecked}\n        aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        required={required}\n        onChange={onChange}\n      />\n      <RadioMarker disabled={disabled} error={invalid} onColor={onColor} size={size} />\n    </span>\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Radio} className={radioWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioLabelClasses,\n          sublabelWrapperClassName: radioStyles['radio-sublabel-wrapper'],\n          large: isLarge,\n          afterLabelChildrenClassName: radioStyles['radio-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AA6CA,IAAa,SAA8B,UAAS;CAClD,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAElC,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,sBAAsB,WAAW,YAAY,kBAAkB;GAClE,YAAY,0BAA0B;GACtC,YAAY,mCAAmC,WAAW;GAC1D,YAAY,wCAAwC,WAAW;CAClE,CAAC;CACD,MAAM,oBAAoB,WACxB,YAAY,gBACZ;GACG,YAAY,2BAA2B;GACvC,YAAY,0BAA0B;GACtC,YAAY,0BAA0B;GACtC,YAAY,wBAAwB;GACpC,YAAY,kCAAkC,WAAW;GACzD,YAAY,iCAAiC,WAAW;GACxD,YAAY,sCAAsC,WAAW;GAC7D,YAAY,iCAAiC,WAAW;CAC3D,GACA,eACF;CACA,MAAM,eAAe,WAAW,YAAY,UAAU,SAAS;CAE/D,MAAM,wBACJ,qBAAC,QAAD;EAAM,WAAW,YAAY;EAA7B,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACK;GACH;GACF;GACW;GAChB,oBAAkB,mBAAmB,OAAO,WAAW;GAC7C;GACA;EACX,CAAA,GACD,oBAAC,aAAD;GAAuB;GAAU,OAAO;GAAkB;GAAe;EAAO,CAAA,CAC5E;;CAGR,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAO,WAAW;GACvE,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,0BAA0B,YAAY;IACtC,OAAO;IACP,6BAA6B,YAAY;GAC3C,CAAC;EACE,CAAA;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Radio.js","names":[],"sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport RadioMarker from './RadioMarker/RadioMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioStyles from './styles.module.scss';\n\nexport interface RadioProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radio - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radio */\n  inputId?: string;\n  /** Changes the visuals of the radio */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radio. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radio - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Radio: React.FC<RadioProps> = props => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioWrapperClasses = classNames(radioStyles['radio-wrapper'], {\n    [radioStyles['radio-wrapper__large']]: isLarge,\n    [radioStyles['radio-wrapper__large--invalid']]: isLarge && onCherry,\n    [radioStyles['radio-wrapper__large--on-blueberry']]: isLarge && onBlueberry,\n  });\n  const radioLabelClasses = classNames(\n    radioStyles['radio-label'],\n    {\n      [radioStyles['radio-label--disabled']]: disabled,\n      [radioStyles['radio-label--on-dark']]: onDark,\n      [radioStyles['radio-label--invalid']]: invalid,\n      [radioStyles['radio-label__large']]: isLarge,\n      [radioStyles['radio-label__large--disabled']]: isLarge && disabled,\n      [radioStyles['radio-label__large--on-grey']]: isLarge && onGrey,\n      [radioStyles['radio-label__large--on-blueberry']]: isLarge && onBlueberry,\n      [radioStyles['radio-label__large--invalid']]: isLarge && onCherry,\n    },\n    labelClassNames\n  );\n  const radioClasses = classNames(radioStyles['radio'], className);\n\n  const getLabelContent = (): React.ReactNode => (\n    <span className={radioStyles['radio__marker-wrapper']}>\n      <input\n        {...rest}\n        id={inputId}\n        name={name}\n        className={radioClasses}\n        type=\"radio\"\n        disabled={disabled}\n        value={value}\n        ref={ref}\n        defaultChecked={defaultChecked}\n        aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        required={required}\n        onChange={onChange}\n      />\n      <RadioMarker disabled={disabled} error={invalid} onColor={onColor} size={size} />\n    </span>\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Radio} className={radioWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioLabelClasses,\n          afterLabelChildrenClassName: radioStyles['radio-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AA6CA,IAAa,SAA8B,UAAS;CAClD,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAElC,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,sBAAsB,WAAW,YAAY,kBAAkB;GAClE,YAAY,0BAA0B;GACtC,YAAY,mCAAmC,WAAW;GAC1D,YAAY,wCAAwC,WAAW;CAClE,CAAC;CACD,MAAM,oBAAoB,WACxB,YAAY,gBACZ;GACG,YAAY,2BAA2B;GACvC,YAAY,0BAA0B;GACtC,YAAY,0BAA0B;GACtC,YAAY,wBAAwB;GACpC,YAAY,kCAAkC,WAAW;GACzD,YAAY,iCAAiC,WAAW;GACxD,YAAY,sCAAsC,WAAW;GAC7D,YAAY,iCAAiC,WAAW;CAC3D,GACA,eACF;CACA,MAAM,eAAe,WAAW,YAAY,UAAU,SAAS;CAE/D,MAAM,wBACJ,qBAAC,QAAD;EAAM,WAAW,YAAY;EAA7B,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACK;GACH;GACF;GACW;GAChB,oBAAkB,mBAAmB,OAAO,WAAW;GAC7C;GACA;EACX,CAAA,GACD,oBAAC,aAAD;GAAuB;GAAU,OAAO;GAAkB;GAAe;EAAO,CAAA,CAC5E;;CAGR,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAO,WAAW;GACvE,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,6BAA6B,YAAY;GAC3C,CAAC;EACE,CAAA;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}

package/lib/StackedCellContent.js

@@ -0,0 +1,15 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/StackedCellContent.tsx
+/** Heading + content as rendered in a stacked cell. Shared by UNSAFE_TableCell and UNSAFE_TableDetail. */
+var StackedCellContent = ({ headingText, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [headingText && /* @__PURE__ */ jsx("span", {
+	className: styles["table__cell-heading-text"],
+	children: headingText
+}), /* @__PURE__ */ jsx("span", {
+	className: styles["table__cell-content"],
+	children
+})] });
+//#endregion
+export { StackedCellContent as t };
+
+//# sourceMappingURL=StackedCellContent.js.map

package/lib/StackedCellContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedCellContent.js","names":[],"sources":["../src/components/UNSAFE_Table/StackedCellContent.tsx"],"sourcesContent":["import styles from './styles.module.scss';\n\ninterface StackedCellContentProps {\n  /** Heading shown before the content in the stack variant */\n  headingText?: string;\n  /** The content */\n  children?: React.ReactNode;\n}\n\n/** Heading + content as rendered in a stacked cell. Shared by UNSAFE_TableCell and UNSAFE_TableDetail. */\nexport const StackedCellContent: React.FC<StackedCellContentProps> = ({ headingText, children }) => (\n  <>\n    {headingText && <span className={styles['table__cell-heading-text']}>{headingText}</span>}\n    <span className={styles['table__cell-content']}>{children}</span>\n  </>\n);\n\nexport default StackedCellContent;\n"],"mappings":";;;;AAUA,IAAa,sBAAyD,EAAE,aAAa,eACnF,qBAAA,UAAA,EAAA,UAAA,CACG,eAAe,oBAAC,QAAD;CAAM,WAAW,OAAO;CAA8B,UAAA;AAAkB,CAAA,GACxF,oBAAC,QAAD;CAAM,WAAW,OAAO;CAAyB;AAAe,CAAA,CAChE,EAAA,CAAA"}

package/lib/TabPanel.js

@@ -9,6 +9,7 @@ var TabPanel = (props) => {
 		ref,
 		className: tabPanelClasses,
 		style,
+		"data-overflow-boundary": true,
 		children: /* @__PURE__ */ jsx("div", { children })
 	});
 };

package/lib/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":[],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n  const { children, color = 'white', isFirst = false, style, ref } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div>{children}</div>\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport * from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;;AAeA,IAAM,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;CAEnE,MAAM,kBAAkB,WAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,QAChC,CAAC;CAED,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW;EAAwB;EAChD,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;AAET;AAEA,SAAS,cAAc;;;AC3BvB,IAAA,mBAAe"}
+{"version":3,"file":"TabPanel.js","names":[],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n  const { children, color = 'white', isFirst = false, style, ref } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style} data-overflow-boundary>\n      <div>{children}</div>\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport * from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;;AAeA,IAAM,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;CAEnE,MAAM,kBAAkB,WAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,QAChC,CAAC;CAED,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW;EAAwB;EAAO,0BAAA;EACvD,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;AAET;AAEA,SAAS,cAAc;;;AC3BvB,IAAA,mBAAe"}

package/lib/TableContext.js

@@ -0,0 +1,26 @@
+import { i as TableSizes, r as TableColors, t as ResponsiveTableVariant } from "./constants3.js";
+import { createContext } from "react";
+var HN_Designsystem_Table_nb_NO_default = {
+	showMoreButton: "Vis mer",
+	menuHeadCell: "Valg",
+	expandRowButton: "Vis detaljer",
+	collapseRowButton: "Skjul detaljer"
+};
+//#endregion
+//#region src/components/UNSAFE_Table/TableContext.ts
+/** Table-wide configuration provided by UNSAFE_Table. */
+var TableContext = createContext({
+	variant: ResponsiveTableVariant.normal,
+	color: TableColors.normal,
+	size: TableSizes.normal,
+	zebraStripes: false,
+	hiddenColumns: [],
+	headingTexts: [],
+	resources: HN_Designsystem_Table_nb_NO_default
+});
+/** Heading of the column a cell belongs to. Provided per cell by UNSAFE_TableRow. */
+var CellHeadingContext = createContext("");
+//#endregion
+export { TableContext as n, HN_Designsystem_Table_nb_NO_default as r, CellHeadingContext as t };
+
+//# sourceMappingURL=TableContext.js.map

package/lib/TableContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableContext.js","names":[],"sources":["../src/resources/HN.Designsystem.Table.nb-NO.json","../src/components/UNSAFE_Table/TableContext.ts"],"sourcesContent":["{\n  \"showMoreButton\": \"Vis mer\",\n  \"menuHeadCell\": \"Valg\",\n  \"expandRowButton\": \"Vis detaljer\",\n  \"collapseRowButton\": \"Skjul detaljer\"\n}\n","import { createContext } from 'react';\n\nimport type { HNDesignsystemTable } from '../../resources/Resources';\n\nimport { ResponsiveTableVariant, TableColors, TableSizes } from './constants';\nimport nbNO from '../../resources/HN.Designsystem.Table.nb-NO.json';\n\nexport interface TableContextValue {\n  /** Resolved responsive variant for the current breakpoint. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** Header category for styling. */\n  color: TableColors;\n  /** For display with less space. */\n  size: TableSizes;\n  /** Whether zebra stripes are enabled. Applied by UNSAFE_TableBody, which can also override it. */\n  zebraStripes: boolean;\n  /** Indexes of the columns marked with hideBehindExpander on their UNSAFE_TableHeadCell. */\n  hiddenColumns: number[];\n  /** Text of each column's UNSAFE_TableHeadCell, used as the default heading of cells in the stack variant. */\n  headingTexts: string[];\n  /** Resource texts of the Table. */\n  resources: HNDesignsystemTable;\n}\n\n/** Table-wide configuration provided by UNSAFE_Table. */\nexport const TableContext = createContext<TableContextValue>({\n  variant: ResponsiveTableVariant.normal,\n  color: TableColors.normal,\n  size: TableSizes.normal,\n  zebraStripes: false,\n  hiddenColumns: [],\n  headingTexts: [],\n  resources: nbNO,\n});\n\n/** Heading of the column a cell belongs to. Provided per cell by UNSAFE_TableRow. */\nexport const CellHeadingContext = createContext<string>('');\n"],"mappings":";;;;;;;;;;;ACyBA,IAAa,eAAe,cAAiC;CAC3D,SAAS,uBAAuB;CAChC,OAAO,YAAY;CACnB,MAAM,WAAW;CACjB,cAAc;CACd,eAAe,CAAC;CAChB,cAAc,CAAC;CACf,WAAW;AACb,CAAC;;AAGD,IAAa,qBAAqB,cAAsB,EAAE"}

package/lib/UNSAFE_TableBody.js

@@ -0,0 +1,22 @@
+import { n as TableContext } from "./TableContext.js";
+import classNames from "classnames";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableBody/UNSAFE_TableBody.tsx
+var UNSAFE_TableBody = ({ className, children, zebraStripes, ...rest }) => {
+	const { zebraStripes: inheritedZebraStripes } = useContext(TableContext);
+	const tableBodyClasses = classNames(styles["table-body"], { [styles["table-body--zebra"]]: zebraStripes ?? inheritedZebraStripes }, className);
+	return /* @__PURE__ */ jsx("tbody", {
+		className: tableBodyClasses,
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableBody/index.ts
+var UNSAFE_TableBody_default = UNSAFE_TableBody;
+//#endregion
+export { UNSAFE_TableBody as n, UNSAFE_TableBody_default as t };
+
+//# sourceMappingURL=UNSAFE_TableBody.js.map

package/lib/UNSAFE_TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableBody.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableBody/UNSAFE_TableBody.tsx","../src/components/UNSAFE_Table/UNSAFE_TableBody/index.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** Applies zebra stripes to every other row. Overrides the value from UNSAFE_Table. */\n  zebraStripes?: boolean;\n}\n\nexport const UNSAFE_TableBody: React.FC<Props> = ({ className, children, zebraStripes, ...rest }) => {\n  const { zebraStripes: inheritedZebraStripes } = useContext(TableContext);\n  const tableBodyClasses = classNames(\n    styles['table-body'],\n    { [styles['table-body--zebra']]: zebraStripes ?? inheritedZebraStripes },\n    className\n  );\n\n  return (\n    <tbody className={tableBodyClasses} {...rest}>\n      {children}\n    </tbody>\n  );\n};\n\nexport default UNSAFE_TableBody;\n","import UNSAFE_TableBody from './UNSAFE_TableBody';\nexport * from './UNSAFE_TableBody';\nexport default UNSAFE_TableBody;\n"],"mappings":";;;;;;AAgBA,IAAa,oBAAqC,EAAE,WAAW,UAAU,cAAc,GAAG,WAAW;CACnG,MAAM,EAAE,cAAc,0BAA0B,WAAW,YAAY;CACvE,MAAM,mBAAmB,WACvB,OAAO,eACP,GAAG,OAAO,uBAAuB,gBAAgB,sBAAsB,GACvE,SACF;CAEA,OACE,oBAAC,SAAD;EAAO,WAAW;EAAkB,GAAI;EACrC;CACI,CAAA;AAEX;;;AC3BA,IAAA,2BAAe"}

package/lib/UNSAFE_TableCell.js

@@ -0,0 +1,26 @@
+import { a as TextAlign, i as TableSizes, r as TableColors } from "./constants3.js";
+import { n as TableContext, t as CellHeadingContext } from "./TableContext.js";
+import { t as StackedCellContent } from "./StackedCellContent.js";
+import classNames from "classnames";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableCell/UNSAFE_TableCell.tsx
+var UNSAFE_TableCell = ({ nowrap = false, textAlign = TextAlign.left, children, className, testId, ...rest }) => {
+	const { color, size } = useContext(TableContext);
+	const heading = useContext(CellHeadingContext);
+	const tableCellClass = classNames(styles["table__cell"], { [styles["table__cell--stacked"]]: !!heading }, { [styles["table__cell--transparent"]]: color === TableColors.transparent }, { [styles["table__cell--compact"]]: size === TableSizes.compact }, { [styles["table__cell--nowrap"]]: nowrap }, { [styles["table__cell--center"]]: textAlign === "center" }, { [styles["table__cell--right"]]: textAlign === "right" }, className);
+	return /* @__PURE__ */ jsx("td", {
+		className: tableCellClass,
+		"data-testid": testId,
+		...rest,
+		children: /* @__PURE__ */ jsx(StackedCellContent, {
+			headingText: heading,
+			children
+		})
+	});
+};
+//#endregion
+export { UNSAFE_TableCell as t };
+
+//# sourceMappingURL=UNSAFE_TableCell.js.map

package/lib/UNSAFE_TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableCell.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableCell/UNSAFE_TableCell.tsx"],"sourcesContent":["import { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TableColors, TableSizes, TextAlign } from '../constants';\nimport StackedCellContent from '../StackedCellContent';\nimport styles from '../styles.module.scss';\nimport { CellHeadingContext, TableContext } from '../TableContext';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children?: React.ReactNode;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const UNSAFE_TableCell: React.FC<Props> = ({ nowrap = false, textAlign = TextAlign.left, children, className, testId, ...rest }) => {\n  const { color, size } = useContext(TableContext);\n  const heading = useContext(CellHeadingContext);\n  const tableCellClass = classNames(\n    styles['table__cell'],\n    { [styles['table__cell--stacked']]: !!heading },\n    { [styles['table__cell--transparent']]: color === TableColors.transparent },\n    { [styles['table__cell--compact']]: size === TableSizes.compact },\n    { [styles['table__cell--nowrap']]: nowrap },\n    { [styles['table__cell--center']]: textAlign === 'center' },\n    { [styles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-testid={testId} {...rest}>\n      <StackedCellContent headingText={heading}>{children}</StackedCellContent>\n    </td>\n  );\n};\n\nexport default UNSAFE_TableCell;\n"],"mappings":";;;;;;;;AAsBA,IAAa,oBAAqC,EAAE,SAAS,OAAO,YAAY,UAAU,MAAM,UAAU,WAAW,QAAQ,GAAG,WAAW;CACzI,MAAM,EAAE,OAAO,SAAS,WAAW,YAAY;CAC/C,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,iBAAiB,WACrB,OAAO,gBACP,GAAG,OAAO,0BAA0B,CAAC,CAAC,QAAQ,GAC9C,GAAG,OAAO,8BAA8B,UAAU,YAAY,YAAY,GAC1E,GAAG,OAAO,0BAA0B,SAAS,WAAW,QAAQ,GAChE,GAAG,OAAO,yBAAyB,OAAO,GAC1C,GAAG,OAAO,yBAAyB,cAAc,SAAS,GAC1D,GAAG,OAAO,wBAAwB,cAAc,QAAQ,GACxD,SACF;CAEA,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB,eAAa;EAAQ,GAAI;EACtD,UAAA,oBAAC,oBAAD;GAAoB,aAAa;GAAU;EAA6B,CAAA;CACtE,CAAA;AAER"}

package/lib/UNSAFE_TableDetail.js

@@ -0,0 +1,17 @@
+import { t as StackedCellContent } from "./StackedCellContent.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableDetail/UNSAFE_TableDetail.tsx
+var UNSAFE_TableDetail = ({ headingText, className, children, testId }) => /* @__PURE__ */ jsx("div", {
+	className: classNames(styles["table__cell"], styles["table__cell--stacked"], styles["table__detail"], className),
+	"data-testid": testId,
+	children: /* @__PURE__ */ jsx(StackedCellContent, {
+		headingText,
+		children
+	})
+});
+//#endregion
+export { UNSAFE_TableDetail as t };
+
+//# sourceMappingURL=UNSAFE_TableDetail.js.map

package/lib/UNSAFE_TableDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableDetail.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableDetail/UNSAFE_TableDetail.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport StackedCellContent from '../StackedCellContent';\nimport styles from '../styles.module.scss';\n\nexport interface Props {\n  /** Heading shown before the content */\n  headingText: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The content, typically the value of a column hidden with hideBehindExpander */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const UNSAFE_TableDetail: React.FC<Props> = ({ headingText, className, children, testId }) => (\n  <div\n    className={classNames(styles['table__cell'], styles['table__cell--stacked'], styles['table__detail'], className)}\n    data-testid={testId}\n  >\n    <StackedCellContent headingText={headingText}>{children}</StackedCellContent>\n  </div>\n);\n\nexport default UNSAFE_TableDetail;\n"],"mappings":";;;;;AAgBA,IAAa,sBAAuC,EAAE,aAAa,WAAW,UAAU,aACtF,oBAAC,OAAD;CACE,WAAW,WAAW,OAAO,gBAAgB,OAAO,yBAAyB,OAAO,kBAAkB,SAAS;CAC/G,eAAa;CAEb,UAAA,oBAAC,oBAAD;EAAiC;EAAc;CAA6B,CAAA;AACzE,CAAA"}

package/lib/UNSAFE_TableExpandedRow.js

@@ -0,0 +1,46 @@
+import { t as Icon_default } from "./Icon.js";
+import { t as Button_default } from "./Button.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import { i as TableSizes } from "./constants3.js";
+import { n as TableContext } from "./TableContext.js";
+import classNames from "classnames";
+import React, { useContext, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableExpandedRow/UNSAFE_TableExpandedRow.tsx
+var UNSAFE_TableExpandedRow = ({ expanded, toggleClick, children, className, stackOnly, id }) => {
+	const { size, resources } = useContext(TableContext);
+	const rowRef = useRef(null);
+	const [colSpan, setColSpan] = useState(1);
+	useLayoutEffect(() => {
+		const previousRow = rowRef.current?.previousElementSibling;
+		if (!previousRow) return;
+		const count = Array.from(previousRow.children).reduce((sum, cell) => sum + (cell.colSpan || 1), 0);
+		setColSpan(count);
+	});
+	const tableRowClass = classNames(styles["table__expanded-row"], {
+		[styles["table__expanded-row--expanded"]]: expanded,
+		[styles["table__expanded-row--stack-only"]]: stackOnly
+	}, className);
+	const tableCellClass = classNames(styles["table__cell"], styles["table__expanded-row__cell"], className, { [styles["table__cell--compact"]]: size === TableSizes.compact });
+	return /* @__PURE__ */ jsx("tr", {
+		ref: rowRef,
+		className: tableRowClass,
+		id,
+		children: /* @__PURE__ */ jsxs("td", {
+			colSpan,
+			className: tableCellClass,
+			children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child)), /* @__PURE__ */ jsxs(Button_default, {
+				variant: "borderless",
+				onClick: toggleClick,
+				"aria-expanded": expanded,
+				tabIndex: expanded ? 0 : -1,
+				children: [resources.collapseRowButton, /* @__PURE__ */ jsx(Icon_default, { svgIcon: ChevronUp })]
+			})]
+		})
+	});
+};
+//#endregion
+export { UNSAFE_TableExpandedRow as t };
+
+//# sourceMappingURL=UNSAFE_TableExpandedRow.js.map

package/lib/UNSAFE_TableExpandedRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableExpandedRow.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableExpandedRow/UNSAFE_TableExpandedRow.tsx"],"sourcesContent":["import React, { useContext, useLayoutEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { TableSizes } from '../constants';\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n  /** Only display the expanded row in the stack variant. */\n  stackOnly?: boolean;\n  /** Row id. For use with aria-controls. */\n  id?: string;\n}\n\nexport const UNSAFE_TableExpandedRow = ({ expanded, toggleClick, children, className, stackOnly, id }: Props): React.JSX.Element => {\n  const { size, resources } = useContext(TableContext);\n  const rowRef = useRef<HTMLTableRowElement>(null);\n  const [colSpan, setColSpan] = useState(1);\n\n  // Spenner over alle kolonnene i raden over\n  useLayoutEffect(() => {\n    const previousRow = rowRef.current?.previousElementSibling;\n    if (!previousRow) {\n      return;\n    }\n\n    const count = Array.from(previousRow.children).reduce((sum, cell) => sum + ((cell as HTMLTableCellElement).colSpan || 1), 0);\n    setColSpan(count);\n  });\n  const tableRowClass = classNames(\n    styles['table__expanded-row'],\n    {\n      [styles['table__expanded-row--expanded']]: expanded,\n      [styles['table__expanded-row--stack-only']]: stackOnly,\n    },\n    className\n  );\n  const tableCellClass = classNames(styles['table__cell'], styles['table__expanded-row__cell'], className, {\n    [styles['table__cell--compact']]: size === TableSizes.compact,\n  });\n\n  return (\n    <tr ref={rowRef} className={tableRowClass} id={id}>\n      <td colSpan={colSpan} className={tableCellClass}>\n        {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n        <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n          {resources.collapseRowButton}\n          <Icon svgIcon={ChevronUp} />\n        </Button>\n      </td>\n    </tr>\n  );\n};\n\nexport default UNSAFE_TableExpandedRow;\n"],"mappings":";;;;;;;;;;AA0BA,IAAa,2BAA2B,EAAE,UAAU,aAAa,UAAU,WAAW,WAAW,SAAmC;CAClI,MAAM,EAAE,MAAM,cAAc,WAAW,YAAY;CACnD,MAAM,SAAS,OAA4B,IAAI;CAC/C,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC;CAGxC,sBAAsB;EACpB,MAAM,cAAc,OAAO,SAAS;EACpC,IAAI,CAAC,aACH;EAGF,MAAM,QAAQ,MAAM,KAAK,YAAY,QAAQ,CAAC,CAAC,QAAQ,KAAK,SAAS,OAAQ,KAA8B,WAAW,IAAI,CAAC;EAC3H,WAAW,KAAK;CAClB,CAAC;CACD,MAAM,gBAAgB,WACpB,OAAO,wBACP;GACG,OAAO,mCAAmC;GAC1C,OAAO,qCAAqC;CAC/C,GACA,SACF;CACA,MAAM,iBAAiB,WAAW,OAAO,gBAAgB,OAAO,8BAA8B,WAAW,GACtG,OAAO,0BAA0B,SAAS,WAAW,QACxD,CAAC;CAED,OACE,oBAAC,MAAD;EAAI,KAAK;EAAQ,WAAW;EAAmB;EAC7C,UAAA,qBAAC,MAAD;GAAa;GAAS,WAAW;GAAjC,UAAA,CACG,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,KAAK,KAAK,MAAM,aAAa,KAAK,CAAC,GAC/F,qBAAC,gBAAD;IAAQ,SAAS;IAAc,SAAS;IAAa,iBAAe;IAAU,UAAU,WAAW,IAAI;IAAvG,UAAA,CACG,UAAU,mBACX,oBAAC,cAAD,EAAM,SAAS,UAAY,CAAA,CACrB;GACN,CAAA,CAAA;;CACF,CAAA;AAER"}

package/lib/UNSAFE_TableHead.js

@@ -0,0 +1,25 @@
+import { n as TableContext } from "./TableContext.js";
+import classNames from "classnames";
+import { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableHead/UNSAFE_TableHead.tsx
+var UNSAFE_TableHead = ({ children, className, ...rest }) => {
+	const tableContext = useContext(TableContext);
+	const headContext = useMemo(() => ({
+		...tableContext,
+		hiddenColumns: []
+	}), [tableContext]);
+	return /* @__PURE__ */ jsx(TableContext.Provider, {
+		value: headContext,
+		children: /* @__PURE__ */ jsx("thead", {
+			className: classNames(styles.table__head, className),
+			...rest,
+			children
+		})
+	});
+};
+//#endregion
+export { UNSAFE_TableHead as t };
+
+//# sourceMappingURL=UNSAFE_TableHead.js.map

package/lib/UNSAFE_TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableHead.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableHead/UNSAFE_TableHead.tsx"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport classNames from 'classnames';\n\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n}\n\nexport const UNSAFE_TableHead: React.FC<Props> = ({ children, className, ...rest }) => {\n  const tableContext = useContext(TableContext);\n  // Radene i hodet skal ikke skjule kolonner eller få expander\n  const headContext = useMemo(() => ({ ...tableContext, hiddenColumns: [] }), [tableContext]);\n\n  return (\n    <TableContext.Provider value={headContext}>\n      <thead className={classNames(styles.table__head, className)} {...rest}>\n        {children}\n      </thead>\n    </TableContext.Provider>\n  );\n};\n\nexport default UNSAFE_TableHead;\n"],"mappings":";;;;;;AAcA,IAAa,oBAAqC,EAAE,UAAU,WAAW,GAAG,WAAW;CACrF,MAAM,eAAe,WAAW,YAAY;CAE5C,MAAM,cAAc,eAAe;EAAE,GAAG;EAAc,eAAe,CAAC;CAAE,IAAI,CAAC,YAAY,CAAC;CAE1F,OACE,oBAAC,aAAa,UAAd;EAAuB,OAAO;EAC5B,UAAA,oBAAC,SAAD;GAAO,WAAW,WAAW,OAAO,aAAa,SAAS;GAAG,GAAI;GAC9D;EACI,CAAA;CACc,CAAA;AAE3B"}

package/lib/UNSAFE_TableHeadCell.js

@@ -0,0 +1,182 @@
+import { Breakpoint } from "./hooks/useBreakpoint.js";
+import { isTouchDevice } from "./utils/device.js";
+import { i as TableSizes, n as SortDirection, r as TableColors, t as ResponsiveTableVariant } from "./constants3.js";
+import { n as TableContext } from "./TableContext.js";
+import { t as UNSAFE_TableHead } from "./UNSAFE_TableHead.js";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/utils.ts
+/**
+* Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint
+* @param config Konfigurasjon for responsiv oppførsel
+* @returns true om breakpoint bruker CSS
+*/
+var configUsesCss = (config) => config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.stack;
+/**
+* Lag klassenavn for CSS-config
+* @param config Konfigurasjon for responsiv oppførsel
+* @returns CSS-klassenavn
+*/
+var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "stack" ? styles[`table--${config.variant}-${config.breakpoint}`] : "";
+/**
+* Sorter konfigurasjon etter breakpoints, fra minste til største
+* @param a Konfigurasjon for responsiv oppførsel
+* @param b Konfigurasjon for responsiv oppførsel
+* @returns Sortert liste
+*/
+var sortByBreakpointsAscending = (a, b) => Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];
+/**
+* Sjekk om en konfigurasjon skal brukes for nåværende breakpoint
+* @param a Konfigurasjon for responsiv oppførsel
+* @param breakpoint Nåværende breakpoint
+* @returns true dersom config skal brukes for breakpointet
+*/
+var isValidForCurrentBreakpoint = (config, breakpoint) => Breakpoint[config.breakpoint] >= breakpoint;
+/**
+* Finn konfigurasjon for nåværende breakpoint
+* @param config Konfigurasjon for responsiv oppførsel
+* @param breakpoint Nåværende breakpoint
+* @returns Konfigurasjon for responsiv oppførsel
+*/
+var getConfigForBreakpoint = (config, breakpoint) => {
+	if (Array.isArray(config)) return [...config].sort(sortByBreakpointsAscending).find((x) => isValidForCurrentBreakpoint(x, breakpoint));
+	else if (config && isValidForCurrentBreakpoint(config, breakpoint)) return config;
+};
+/**
+* Finn konfigurasjon for nåværende breakpoint og tabellbredde
+* @param config Konfigurasjon for responsiv oppførsel
+* @param breakpoint Nåværende breakpoint
+* @param tableWidth Bredde på tabell i px
+* @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant
+*/
+var getCurrentConfig = (config, breakpoint, tableWidth, windowWidth) => {
+	const breakpointConfig = getConfigForBreakpoint(config, breakpoint);
+	const canUseHorizontalScroll = isTouchDevice();
+	const canUseCenteredOverflow = tableWidth <= windowWidth;
+	const needsFallback = !canUseCenteredOverflow && (breakpointConfig?.variant === ResponsiveTableVariant.normal || breakpointConfig?.variant === ResponsiveTableVariant.centeredoverflow);
+	if (!breakpointConfig) return;
+	if (needsFallback && breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll) return {
+		variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.normal,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	if (needsFallback && breakpointConfig.fallbackVariant !== breakpointConfig.variant) return {
+		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.normal,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow) return {
+		variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.normal,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll) return {
+		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.normal,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	return breakpointConfig;
+};
+/** Attributt som overordnede komponenter setter for å si at tabeller inni ikke skal flyte utenfor dem. */
+var OVERFLOW_BOUNDARY_SELECTOR = "[data-overflow-boundary]";
+/**
+* Finn bredden tabellen kan bruke. Innholdsbredden til nærmeste overordnede element merket med data-overflow-boundary,
+* eller skjermbredden om ingen er merket.
+* @param element Elementet det søkes fra, vanligvis tabellens overordnede element
+* @returns Tilgjengelig bredde i px
+*/
+var getAvailableWidth = (element) => {
+	const boundary = element.closest(OVERFLOW_BOUNDARY_SELECTOR);
+	if (!boundary) return document.documentElement.clientWidth || window.innerWidth;
+	const style = getComputedStyle(boundary);
+	const spacing = [
+		style.paddingLeft,
+		style.paddingRight,
+		style.borderLeftWidth,
+		style.borderRightWidth
+	].reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);
+	return Math.max(0, boundary.getBoundingClientRect().width - spacing);
+};
+/**
+* Finn klassenavn for responsiv oppførsel
+* @param config Konfigurasjon for responsiv oppførsel
+* @returns Klassenavn
+*/
+var getBreakpointClass = (config) => config && configUsesCss(config) ? mapConfigToClass(config) : void 0;
+/**
+* Finn riktig posisjon for horisontal sentrering av tabell som skal vises "centeredoverflow"
+* @param parentWidth Bredde på element som tabellen ligger i
+* @param tableWidth Bredde på tabellen
+* @returns Styling som posisjonerer tabellen riktig
+*/
+var getCenteredOverflowTableStyle = (parentWidth, tableWidth) => {
+	if (parentWidth >= tableWidth) return;
+	return { left: `${(parentWidth - tableWidth) / 2}px` };
+};
+/**
+* Create a shallow copy of an object with specific keys omitted.
+*/
+var omitProps = (obj, keys) => {
+	const clone = { ...obj };
+	for (const k of keys) delete clone[k];
+	return clone;
+};
+/**
+* Finn indeksene til kolonnene som er markert med hideBehindExpander i første rad i UNSAFE_TableHead.
+* @param children Innholdet i UNSAFE_Table
+* @returns Kolonneindekser som skjules bak expander i stack-varianten
+*/
+var getHiddenColumns = (children) => {
+	const head = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.type === UNSAFE_TableHead);
+	const headRow = React.Children.toArray(head?.props.children).find(React.isValidElement);
+	return React.Children.toArray(headRow?.props.children).flatMap((cell, index) => React.isValidElement(cell) && cell.props.hideBehindExpander ? [index] : []);
+};
+var getTextContent = (node) => {
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (React.isValidElement(node)) return getTextContent(node.props.children);
+	return React.Children.toArray(node).map(getTextContent).join("");
+};
+/**
+* Finn teksten i hver kolonne i første rad i UNSAFE_TableHead. Brukes som overskrift i cellene i stack-varianten.
+* @param children Innholdet i UNSAFE_Table
+* @returns Overskrift per kolonneindeks, tom streng for kolonner uten tekst
+*/
+var getColumnHeadingTexts = (children) => {
+	const head = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.type === UNSAFE_TableHead);
+	const headRow = React.Children.toArray(head?.props.children).find(React.isValidElement);
+	return React.Children.toArray(headRow?.props.children).map((cell) => React.isValidElement(cell) ? getTextContent(cell.props.children).trim() : "");
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableHeadCell/UNSAFE_TableHeadCell.tsx
+var UNSAFE_TableHeadCell = ({ className, children, sortDir, scope = "col", width, ...rest }) => {
+	const { color, size } = useContext(TableContext);
+	const tableHeadCellDefaultClass = classNames(styles["table__head-cell"], className, {
+		[styles["table__head-cell--transparent"]]: color === TableColors.transparent,
+		[styles["table__head-cell--compact"]]: size === TableSizes.compact
+	});
+	const getSortDirection = () => {
+		if (sortDir === void 0) return;
+		switch (sortDir) {
+			case SortDirection.asc: return "ascending";
+			case SortDirection.desc: return "descending";
+		}
+	};
+	const style = width !== void 0 ? { width } : void 0;
+	if (!children) return /* @__PURE__ */ jsx("td", {
+		className: tableHeadCellDefaultClass,
+		style
+	});
+	return /* @__PURE__ */ jsx("th", {
+		scope,
+		className: tableHeadCellDefaultClass,
+		style,
+		"aria-sort": getSortDirection(),
+		...omitProps(rest, ["hideBehindExpander"]),
+		children
+	});
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableHeadCell/index.ts
+var UNSAFE_TableHeadCell_default = UNSAFE_TableHeadCell;
+//#endregion
+export { getCenteredOverflowTableStyle as a, getHiddenColumns as c, getBreakpointClass as i, omitProps as l, UNSAFE_TableHeadCell as n, getColumnHeadingTexts as o, getAvailableWidth as r, getCurrentConfig as s, UNSAFE_TableHeadCell_default as t };
+
+//# sourceMappingURL=UNSAFE_TableHeadCell.js.map

package/lib/UNSAFE_TableHeadCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableHeadCell.js","names":[],"sources":["../src/components/UNSAFE_Table/utils.ts","../src/components/UNSAFE_Table/UNSAFE_TableHeadCell/UNSAFE_TableHeadCell.tsx","../src/components/UNSAFE_Table/UNSAFE_TableHeadCell/index.ts"],"sourcesContent":["import React from 'react';\n\nimport type { BreakpointConfig } from './UNSAFE_Table';\nimport type { Props as TableHeadCellProps } from './UNSAFE_TableHeadCell/UNSAFE_TableHeadCell';\n\nimport { ResponsiveTableVariant } from './constants';\nimport UNSAFE_TableHead from './UNSAFE_TableHead/UNSAFE_TableHead';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.stack;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'stack' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra minste til største\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsAscending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    return [...config].sort(sortByBreakpointsAscending).find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n  const needsFallback =\n    !canUseCenteredOverflow &&\n    (breakpointConfig?.variant === ResponsiveTableVariant.normal || breakpointConfig?.variant === ResponsiveTableVariant.centeredoverflow);\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (needsFallback && breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.normal,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (needsFallback && breakpointConfig.fallbackVariant !== breakpointConfig.variant) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.normal,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.normal,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.normal,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/** Attributt som overordnede komponenter setter for å si at tabeller inni ikke skal flyte utenfor dem. */\nconst OVERFLOW_BOUNDARY_SELECTOR = '[data-overflow-boundary]';\n\n/**\n * Finn bredden tabellen kan bruke. Innholdsbredden til nærmeste overordnede element merket med data-overflow-boundary,\n * eller skjermbredden om ingen er merket.\n * @param element Elementet det søkes fra, vanligvis tabellens overordnede element\n * @returns Tilgjengelig bredde i px\n */\nexport const getAvailableWidth = (element: HTMLElement): number => {\n  const boundary = element.closest<HTMLElement>(OVERFLOW_BOUNDARY_SELECTOR);\n  if (!boundary) {\n    return document.documentElement.clientWidth || window.innerWidth;\n  }\n  const style = getComputedStyle(boundary);\n  const spacing = [style.paddingLeft, style.paddingRight, style.borderLeftWidth, style.borderRightWidth].reduce(\n    (total, value) => total + (Number.parseFloat(value) || 0),\n    0\n  );\n  return Math.max(0, boundary.getBoundingClientRect().width - spacing);\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  return { left: `${(parentWidth - tableWidth) / 2}px` };\n};\n\n/**\n * Create a shallow copy of an object with specific keys omitted.\n */\nexport const omitProps = <T extends Record<PropertyKey, unknown>>(obj: T, keys: Array<keyof T>): Partial<T> => {\n  const clone: Partial<T> = { ...obj };\n  for (const k of keys) {\n    delete clone[k];\n  }\n  return clone;\n};\n\n/**\n * Finn indeksene til kolonnene som er markert med hideBehindExpander i første rad i UNSAFE_TableHead.\n * @param children Innholdet i UNSAFE_Table\n * @returns Kolonneindekser som skjules bak expander i stack-varianten\n */\nexport const getHiddenColumns = (children: React.ReactNode): number[] => {\n  const head = React.Children.toArray(children).find(\n    (child): child is React.ReactElement<{ children?: React.ReactNode }> => React.isValidElement(child) && child.type === UNSAFE_TableHead\n  );\n  const headRow = React.Children.toArray(head?.props.children).find(React.isValidElement) as\n    React.ReactElement<{ children?: React.ReactNode }> | undefined;\n\n  return React.Children.toArray(headRow?.props.children).flatMap((cell, index) =>\n    React.isValidElement<TableHeadCellProps>(cell) && cell.props.hideBehindExpander ? [index] : []\n  );\n};\n\nconst getTextContent = (node: React.ReactNode): string => {\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node);\n  }\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getTextContent(node.props.children);\n  }\n  return React.Children.toArray(node).map(getTextContent).join('');\n};\n\n/**\n * Finn teksten i hver kolonne i første rad i UNSAFE_TableHead. Brukes som overskrift i cellene i stack-varianten.\n * @param children Innholdet i UNSAFE_Table\n * @returns Overskrift per kolonneindeks, tom streng for kolonner uten tekst\n */\nexport const getColumnHeadingTexts = (children: React.ReactNode): string[] => {\n  const head = React.Children.toArray(children).find(\n    (child): child is React.ReactElement<{ children?: React.ReactNode }> => React.isValidElement(child) && child.type === UNSAFE_TableHead\n  );\n  const headRow = React.Children.toArray(head?.props.children).find(React.isValidElement) as\n    React.ReactElement<{ children?: React.ReactNode }> | undefined;\n\n  return React.Children.toArray(headRow?.props.children).map(cell =>\n    React.isValidElement<TableHeadCellProps>(cell) ? getTextContent(cell.props.children).trim() : ''\n  );\n};\n","import { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TableSizes, SortDirection, TableColors } from '../constants';\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\nimport { omitProps } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** Sets the width of the column, e.g. '10rem', '25%' or a number of pixels. Ignored in the stack variant. */\n  width?: string | number;\n  /** In the stack variant, hides the cells of this column and shows the column heading + content in an automatically rendered expanded row. */\n  hideBehindExpander?: boolean;\n}\n\nexport const UNSAFE_TableHeadCell: React.FC<Props> = ({ className, children, sortDir, scope = 'col', width, ...rest }) => {\n  const { color, size } = useContext(TableContext);\n  const tableHeadCellDefaultClass = classNames(styles['table__head-cell'], className, {\n    [styles['table__head-cell--transparent']]: color === TableColors.transparent,\n    [styles['table__head-cell--compact']]: size === TableSizes.compact,\n  });\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    if (sortDir === undefined) {\n      return undefined;\n    }\n\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  const style = width !== undefined ? { width } : undefined;\n\n  if (!children) {\n    return <td className={tableHeadCellDefaultClass} style={style} />;\n  }\n\n  return (\n    <th\n      scope={scope}\n      className={tableHeadCellDefaultClass}\n      style={style}\n      aria-sort={getSortDirection()}\n      {...(omitProps(rest, ['hideBehindExpander']) as React.ComponentPropsWithoutRef<'th'>)}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport default UNSAFE_TableHeadCell;\n","import UNSAFE_TableHeadCell from './UNSAFE_TableHeadCell';\nexport * from './UNSAFE_TableHeadCell';\nexport default UNSAFE_TableHeadCell;\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,IAAM,iBAAiB,WACrB,OAAO,YAAY,uBAAuB,oBAAoB,OAAO,YAAY,uBAAuB;;;;;;AAO1G,IAAM,oBAAoB,WACxB,OAAO,YAAY,sBAAsB,OAAO,YAAY,UAAU,OAAO,UAAU,OAAO,QAAQ,GAAG,OAAO,gBAAgB;;;;;;;AAQlI,IAAM,8BAA8B,GAAqB,MACvD,WAAW,EAAE,cAAc,WAAW,EAAE;;;;;;;AAQ1C,IAAM,+BAA+B,QAA0B,eAC7D,WAAW,OAAO,eAAe;;;;;;;AAQnC,IAAM,0BAA0B,QAA+C,eAAyD;CACtI,IAAI,MAAM,QAAQ,MAAM,GACtB,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,KAAK,0BAA0B,CAAC,CAAC,MAAK,MAAK,4BAA4B,GAAG,UAAU,CAAC;MACnG,IAAI,UAAU,4BAA4B,QAAQ,UAAU,GACjE,OAAO;AAEX;;;;;;;;AASA,IAAa,oBACX,QACA,YACA,YACA,gBAC0D;CAC1D,MAAM,mBAAmB,uBAAuB,QAAQ,UAAU;CAClE,MAAM,yBAAyB,cAAc;CAC7C,MAAM,yBAAyB,cAAc;CAC7C,MAAM,gBACJ,CAAC,2BACA,kBAAkB,YAAY,uBAAuB,UAAU,kBAAkB,YAAY,uBAAuB;CAEvH,IAAI,CAAC,kBACH;CAGF,IAAI,iBAAiB,iBAAiB,oBAAoB,uBAAuB,kBAC/E,OAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;CAC/B;CAGF,IAAI,iBAAiB,iBAAiB,oBAAoB,iBAAiB,SACzE,OAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;CAC/B;CAGF,IACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAE5D,OAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;CAC/B;CAGF,IACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAE5D,OAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;CAC/B;CAGF,OAAO;AACT;;AAGA,IAAM,6BAA6B;;;;;;;AAQnC,IAAa,qBAAqB,YAAiC;CACjE,MAAM,WAAW,QAAQ,QAAqB,0BAA0B;CACxE,IAAI,CAAC,UACH,OAAO,SAAS,gBAAgB,eAAe,OAAO;CAExD,MAAM,QAAQ,iBAAiB,QAAQ;CACvC,MAAM,UAAU;EAAC,MAAM;EAAa,MAAM;EAAc,MAAM;EAAiB,MAAM;CAAgB,CAAC,CAAC,QACpG,OAAO,UAAU,SAAS,OAAO,WAAW,KAAK,KAAK,IACvD,CACF;CACA,OAAO,KAAK,IAAI,GAAG,SAAS,sBAAsB,CAAC,CAAC,QAAQ,OAAO;AACrE;;;;;;AAOA,IAAa,sBAAsB,WACjC,UAAU,cAAc,MAAM,IAAI,iBAAiB,MAAM,IAAI,KAAA;;;;;;;AAQ/D,IAAa,iCAAiC,aAAqB,eAAwD;CACzH,IAAI,eAAe,YACjB;CAGF,OAAO,EAAE,MAAM,IAAI,cAAc,cAAc,EAAE,IAAI;AACvD;;;;AAKA,IAAa,aAAqD,KAAQ,SAAqC;CAC7G,MAAM,QAAoB,EAAE,GAAG,IAAI;CACnC,KAAK,MAAM,KAAK,MACd,OAAO,MAAM;CAEf,OAAO;AACT;;;;;;AAOA,IAAa,oBAAoB,aAAwC;CACvE,MAAM,OAAO,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAC3C,UAAuE,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,gBACxH;CACA,MAAM,UAAU,MAAM,SAAS,QAAQ,MAAM,MAAM,QAAQ,CAAC,CAAC,KAAK,MAAM,cAAc;CAGtF,OAAO,MAAM,SAAS,QAAQ,SAAS,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,UACpE,MAAM,eAAmC,IAAI,KAAK,KAAK,MAAM,qBAAqB,CAAC,KAAK,IAAI,CAAC,CAC/F;AACF;AAEA,IAAM,kBAAkB,SAAkC;CACxD,IAAI,OAAO,SAAS,YAAY,OAAO,SAAS,UAC9C,OAAO,OAAO,IAAI;CAEpB,IAAI,MAAM,eAA+C,IAAI,GAC3D,OAAO,eAAe,KAAK,MAAM,QAAQ;CAE3C,OAAO,MAAM,SAAS,QAAQ,IAAI,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,KAAK,EAAE;AACjE;;;;;;AAOA,IAAa,yBAAyB,aAAwC;CAC5E,MAAM,OAAO,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAC3C,UAAuE,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,gBACxH;CACA,MAAM,UAAU,MAAM,SAAS,QAAQ,MAAM,MAAM,QAAQ,CAAC,CAAC,KAAK,MAAM,cAAc;CAGtF,OAAO,MAAM,SAAS,QAAQ,SAAS,MAAM,QAAQ,CAAC,CAAC,KAAI,SACzD,MAAM,eAAmC,IAAI,IAAI,eAAe,KAAK,MAAM,QAAQ,CAAC,CAAC,KAAK,IAAI,EAChG;AACF;;;ACtMA,IAAa,wBAAyC,EAAE,WAAW,UAAU,SAAS,QAAQ,OAAO,OAAO,GAAG,WAAW;CACxH,MAAM,EAAE,OAAO,SAAS,WAAW,YAAY;CAC/C,MAAM,4BAA4B,WAAW,OAAO,qBAAqB,WAAW;GACjF,OAAO,mCAAmC,UAAU,YAAY;GAChE,OAAO,+BAA+B,SAAS,WAAW;CAC7D,CAAC;CAED,MAAM,yBAA4D;EAChE,IAAI,YAAY,KAAA,GACd;EAGF,QAAQ,SAAR;GACE,KAAK,cAAc,KACjB,OAAO;GACT,KAAK,cAAc,MACjB,OAAO;EACX;CACF;CAEA,MAAM,QAAQ,UAAU,KAAA,IAAY,EAAE,MAAM,IAAI,KAAA;CAEhD,IAAI,CAAC,UACH,OAAO,oBAAC,MAAD;EAAI,WAAW;EAAkC;CAAQ,CAAA;CAGlE,OACE,oBAAC,MAAD;EACS;EACP,WAAW;EACJ;EACP,aAAW,iBAAiB;EAC5B,GAAK,UAAU,MAAM,CAAC,oBAAoB,CAAC;EAE1C;CACC,CAAA;AAER;;;ACzDA,IAAA,+BAAe"}