@helsenorge/designsystem-react 10.1.0 → 10.3.0

package/components/Expander/styles.module.scss

@@ -1,11 +1,11 @@
 /* stylelint-disable no-descending-specificity */
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../Button/styles.module' as button;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
-@import '../Button/styles.module';
 
 .expander {
   position: initial;
@@ -16,7 +16,7 @@
   }
 
   @media print {
-    border: 1px solid $black;
+    border: 1px solid palette.$black;
   }
 
   &__icon {
@@ -24,27 +24,27 @@
     align-items: center;
 
     &--left {
-      margin-right: getSpacer(2xs);
+      margin-right: spacers.getSpacer(2xs);
     }
 
     &--right {
       margin-left: auto;
-      padding-left: getSpacer(2xs);
+      padding-left: spacers.getSpacer(2xs);
     }
   }
 
   &__button {
     position: relative;
-    padding-right: getSpacer(s);
+    padding-right: spacers.getSpacer(s);
     text-align: left;
 
     &--expanded {
-      @include outline-borderless-hover;
+      @include button.outline-borderless-hover;
     }
   }
 
   &__button &__button__text {
-    @include outline-borderless-text-hover;
+    @include button.outline-borderless-text-hover;
   }
 
   &__trigger {
@@ -55,31 +55,31 @@
     align-items: center;
     border: none;
     outline: none;
-    font-size: $font-size-sm;
-    line-height: $lineheight-size-sm;
+    font-size: font-settings.$font-size-sm;
+    line-height: font-settings.$lineheight-size-sm;
     font-weight: 600;
     text-align: left;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      font-size: $font-size-md;
-      line-height: $lineheight-size-md;
+      font-size: font-settings.$font-size-md;
+      line-height: font-settings.$lineheight-size-md;
     }
 
     &--large {
       width: 100%;
-      padding: getSpacer(xs) getSpacer(2xs) getSpacer(xs) getSpacer(s);
+      padding: spacers.getSpacer(xs) spacers.getSpacer(2xs) spacers.getSpacer(xs) spacers.getSpacer(s);
       cursor: pointer;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(l);
+        padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(l);
       }
     }
 
     &--icon {
-      padding-left: getSpacer(2xs);
+      padding-left: spacers.getSpacer(2xs);
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding-left: getSpacer(s);
+        padding-left: spacers.getSpacer(s);
       }
     }
 
@@ -87,22 +87,22 @@
 
     @each $color in $colors {
       &--#{$color} {
-        background-color: map.get($palette-map, #{$color}50);
+        background-color: map.get(palette.$palette-map, #{$color}50);
 
         &:hover {
-          background-color: map.get($palette-map, #{$color}100);
+          background-color: map.get(palette.$palette-map, #{$color}100);
         }
 
         &:focus {
           box-shadow:
-            0 0 0 1.5px $neutral600,
-            inset 0 0 0 1.5px $neutral600;
+            0 0 0 1.5px palette.$neutral600,
+            inset 0 0 0 1.5px palette.$neutral600;
         }
         &#{$trigger}--expanded {
-          background-color: map.get($palette-map, #{$color}100);
+          background-color: map.get(palette.$palette-map, #{$color}100);
 
           &:hover {
-            background-color: map.get($palette-map, #{$color}200);
+            background-color: map.get(palette.$palette-map, #{$color}200);
           }
         }
       }
@@ -110,25 +110,25 @@
 
     // Hvit bakgrunn har egne regler for bakgrunnsfarge, hover og fokus
     &--white {
-      background-color: $white;
+      background-color: palette.$white;
 
       &:hover {
-        background-color: $neutral100;
+        background-color: palette.$neutral100;
       }
 
       &:focus {
         box-shadow:
-          0 0 0 1.5px $neutral600,
-          inset 0 0 0 1.5px $neutral600;
+          0 0 0 1.5px palette.$neutral600,
+          inset 0 0 0 1.5px palette.$neutral600;
       }
       &#{$trigger}--expanded {
-        box-shadow: inset 0 0 0 6px $neutral100;
+        box-shadow: inset 0 0 0 6px palette.$neutral100;
 
         &:focus {
           box-shadow:
-            0 0 0 1.5px $neutral600,
-            inset 0 0 0 1.5px $neutral600,
-            inset 0 0 0 6px $neutral100;
+            0 0 0 1.5px palette.$neutral600,
+            inset 0 0 0 1.5px palette.$neutral600,
+            inset 0 0 0 6px palette.$neutral100;
         }
       }
     }
@@ -136,7 +136,7 @@
 
   &__button-container {
     &--sticky {
-      background-color: $white;
+      background-color: palette.$white;
     }
   }
 
@@ -163,15 +163,15 @@
     }
 
     &--small {
-      margin-top: getSpacer(s);
+      margin-top: spacers.getSpacer(s);
     }
     &--small#{&}--sticky {
       margin-top: 1.25rem;
     }
 
     &--nested-line {
-      padding-left: getSpacer(s);
-      border-left: solid 3px $neutral200;
+      padding-left: spacers.getSpacer(s);
+      border-left: solid 3px palette.$neutral200;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
         margin-left: calc(38px / 2 - 1px); // Halvparten av chevron-ikonets bredde minus halve bredden på border
@@ -182,10 +182,10 @@
     }
 
     &--large {
-      padding: getSpacer(s) getSpacer(m) getSpacer(l) getSpacer(s);
+      padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(m) getSpacer(l) getSpacer(xl);
+        padding: spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(xl);
       }
       &#{$content}--icon {
         @media (min-width: map.get($grid-breakpoints, md)) {
@@ -195,31 +195,31 @@
     }
 
     &--neutral {
-      background-color: $neutral50;
+      background-color: palette.$neutral50;
     }
 
     &--blueberry {
-      background-color: $blueberry50;
+      background-color: palette.$blueberry50;
     }
 
     &--cherry {
-      background-color: $cherry50;
+      background-color: palette.$cherry50;
     }
 
     &--kiwi {
-      background-color: $kiwi50;
+      background-color: palette.$kiwi50;
     }
 
     &--banana {
-      background-color: $banana50;
+      background-color: palette.$banana50;
     }
 
     &--plum {
-      background-color: $plum50;
+      background-color: palette.$plum50;
     }
 
     &--white {
-      background-color: $white;
+      background-color: palette.$white;
     }
   }
 }

package/components/ExpanderHierarchy/expander.module.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/spacers';
-@import '../../scss/font-mixins';
+@use '../../scss/palette' as palette;
+@use '../../scss/spacers' as spacers;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as *;
 
 .expander {
   $item: &;
 
   &:first-of-type {
-    border-top: 1px solid $neutral500;
+    border-top: 1px solid palette.$neutral500;
   }
 
   &__button {
@@ -20,41 +20,41 @@
     width: 100%;
     cursor: pointer;
     background-color: transparent;
-    border-bottom: 1px solid $neutral500;
-    padding: getSpacer(xs) 0;
+    border-bottom: 1px solid palette.$neutral500;
+    padding: spacers.getSpacer(xs) 0;
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       flex-direction: row-reverse;
       justify-content: start;
-      padding: getSpacer(s) getSpacer(s) getSpacer(s) getSpacer(2xs);
+      padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(2xs);
     }
 
     &:hover,
     &:focus {
-      background-color: $neutral100;
+      background-color: palette.$neutral100;
     }
 
     &:focus {
       text-decoration: underline;
-      outline: getSpacer(4xs) solid $black;
+      outline: spacers.getSpacer(4xs) solid palette.$black;
     }
 
     &[aria-expanded='true'] {
-      background-color: $neutral100;
+      background-color: palette.$neutral100;
       border-bottom: none;
     }
 
     @media print {
       &--print {
-        background-color: $neutral100;
+        background-color: palette.$neutral100;
       }
     }
 
     &--2-and-lower {
-      padding: getSpacer(2xs) 0;
+      padding: spacers.getSpacer(2xs) 0;
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding: getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(2xs);
+        padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(2xs);
       }
     }
   }
@@ -63,19 +63,19 @@
     margin: 0;
 
     &--1 {
-      @include title2;
+      @include fonts.title2;
     }
 
     &--2 {
-      @include title3;
+      @include fonts.title3;
     }
 
     &--3 {
-      @include title4;
+      @include fonts.title4;
     }
 
     &--4-and-lower {
-      @include title5;
+      @include fonts.title5;
     }
 
     &--expanded {
@@ -95,44 +95,44 @@
 
   &__content {
     display: none;
-    border-bottom: 1px solid $neutral500;
-    padding-top: getSpacer(m);
-    padding-left: getSpacer(2xs);
-    padding-bottom: getSpacer(m);
+    border-bottom: 1px solid palette.$neutral500;
+    padding-top: spacers.getSpacer(m);
+    padding-left: spacers.getSpacer(2xs);
+    padding-bottom: spacers.getSpacer(m);
 
     &--1 {
-      padding-top: getSpacer(xl);
+      padding-top: spacers.getSpacer(xl);
     }
 
     &--1,
     &--2 {
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: getSpacer(2xl);
+        padding-left: spacers.getSpacer(2xl);
       }
     }
 
     &--3-and-lower {
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: getSpacer(xl);
+        padding-left: spacers.getSpacer(xl);
       }
     }
   }
 
   &__icon {
-    margin-left: getSpacer(s);
+    margin-left: spacers.getSpacer(s);
 
     &--2-and-lower {
-      margin-left: getSpacer(xs);
+      margin-left: spacers.getSpacer(xs);
     }
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       margin-left: 0;
-      margin-right: getSpacer(s);
+      margin-right: spacers.getSpacer(s);
     }
 
     &--3-and-lower {
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        margin-right: getSpacer(xs);
+        margin-right: spacers.getSpacer(xs);
       }
     }
   }

package/components/ExpanderHierarchy/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId, IconSize } from "../../constants.js";
 import { useExpand } from "../../hooks/useExpand.js";
@@ -84,9 +84,9 @@ const Expander = ({
   );
   return /* @__PURE__ */ jsxs("li", { className: styles.expander, children: [
     /* @__PURE__ */ jsx(ExpanderButton, { htmlMarkup, level, print, expanded, onExpand, testId, children: title }),
-    /* @__PURE__ */ jsx("div", { className: contentClasses, children: React.Children.map(
+    /* @__PURE__ */ jsx("div", { className: contentClasses, children: React__default.Children.map(
       children,
-      (child) => isComponent(child, ExpanderHierarchy) ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print }) : child
+      (child) => isComponent(child, ExpanderHierarchy) ? React__default.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print }) : child
     ) })
   ] });
 };
@@ -102,9 +102,9 @@ const ExpanderHierarchy = ({
     level === 2 && styles$1[`expanderhierarchy--${level}`],
     level > 2 && styles$1[`expanderhierarchy--3-and-lower`]
   );
-  return /* @__PURE__ */ jsx("ul", { className: listClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.ExpanderHierarchy, children: React.Children.map(
+  return /* @__PURE__ */ jsx("ul", { className: listClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.ExpanderHierarchy, children: React__default.Children.map(
     children,
-    (child) => isComponent(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child
+    (child) => isComponent(child, Expander) ? React__default.cloneElement(child, { htmlMarkup, level, print }) : child
   ) });
 };
 ExpanderHierarchy.Expander = Expander;

package/components/ExpanderHierarchy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={hoverRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy, { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nexport type ExpanderType = React.FC<ExpanderProps>;\n\nconst Expander: ExpanderType = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    (level === 1 || level === 2) && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={styles.expander}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Expander, { ExpanderProps, ExpanderType } from './Expander';\nimport { HeadingTags } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    level === 2 && styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n"],"names":["styles"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={hoverRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy, { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nexport type ExpanderType = React.FC<ExpanderProps>;\n\nconst Expander: ExpanderType = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    (level === 1 || level === 2) && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={styles.expander}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Expander, { ExpanderProps, ExpanderType } from './Expander';\nimport { HeadingTags } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    level === 2 && styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n"],"names":["React","styles"],"mappings":"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"}

package/components/ExpanderHierarchy/styles.module.scss

@@ -1,6 +1,5 @@
-@import '../../scss/palette';
-@import '../../scss/spacers';
-@import '../../scss/font-mixins';
+@use '../../scss/palette' as palette;
+@use '../../scss/spacers' as spacers;
 
 .expanderhierarchy {
   list-style: none;
@@ -8,10 +7,10 @@
   margin: 0;
 
   &--2 {
-    margin-top: getSpacer(xl);
+    margin-top: spacers.getSpacer(xl);
   }
 
   &--3-and-lower {
-    margin-top: getSpacer(m);
+    margin-top: spacers.getSpacer(m);
   }
 }

package/components/ExpanderList/index.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useRef, useState, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useState, useEffect, useRef } from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "../../constants.js";
 import { useExpand } from "../../hooks/useExpand.js";
@@ -11,7 +11,7 @@ import ChevronDown from "../Icons/ChevronDown.js";
 import ChevronUp from "../Icons/ChevronUp.js";
 import { r as renderListHeader } from "../../ListHeader.js";
 import expanderListStyles from "./styles.module.scss";
-const Expander = React.forwardRef((props, ref) => {
+const Expander = React__default.forwardRef((props, ref) => {
   const {
     id,
     children,
@@ -90,8 +90,8 @@ const Expander = React.forwardRef((props, ref) => {
     renderContent()
   ] });
 });
-const isExpanderComponent = (element) => React.isValidElement(element) && element.type === Expander;
-const ExpanderList = React.forwardRef((props, ref) => {
+const isExpanderComponent = (element) => React__default.isValidElement(element) && element.type === Expander;
+const ExpanderList = React__default.forwardRef((props, ref) => {
   const {
     children,
     childPadding = true,
@@ -120,7 +120,7 @@ const ExpanderList = React.forwardRef((props, ref) => {
   }, [accordion, latestExpander]);
   useEffect(() => {
     var _a;
-    const newActiveExpander = (_a = React.Children.map(children, (child) => {
+    const newActiveExpander = (_a = React__default.Children.map(children, (child) => {
       if (isExpanderComponent(child)) {
         return child;
       }
@@ -132,11 +132,11 @@ const ExpanderList = React.forwardRef((props, ref) => {
     }, {});
     setActiveExpander({ ...activeExpander, ...newActiveExpander });
   }, [children]);
-  return /* @__PURE__ */ jsx("ul", { className: expanderListClasses, ref, "data-testid": testId, "data-analyticsid": AnalyticsId.ExpanderList, children: React.Children.map(children, (child, index) => {
+  return /* @__PURE__ */ jsx("ul", { className: expanderListClasses, ref, "data-testid": testId, "data-analyticsid": AnalyticsId.ExpanderList, children: React__default.Children.map(children, (child, index) => {
     if (isExpanderComponent(child)) {
       const id = getExpanderId(index);
       const expanded = activeExpander == null ? void 0 : activeExpander[id];
-      return React.cloneElement(child, {
+      return React__default.cloneElement(child, {
         id,
         key: index,
         expanded,

package/components/ExpanderList/index.js.map

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