@helsenorge/designsystem-react 8.6.0 → 9.0.0-beta.1

package/components/Dropdown/index.js.map

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

package/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
+export interface ErrorWrapperClassNameProps {
+    errorWrapperClassName?: string;
+}
 export interface ErrorWrapperProps {
     /** Form component */
     children?: React.ReactNode;

package/components/ExpanderList/ExpanderList.d.ts

@@ -2,14 +2,14 @@ import React from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { ListHeaderType } from '../ListHeader/ListHeader';
 import { TitleTags } from '../Title';
-export type ExpanderListColors = PaletteNames;
+export type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;
 export interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {
     ListHeader?: ListHeaderType;
 }
 export interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {
     Expander: ExpanderType;
 }
-export type ExpanderListVariant = 'line' | 'outline' | 'fill';
+export type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';
 interface ExpanderListProps {
     /** Toggles accordion functionality for the expanders. */
     accordion?: boolean;
@@ -19,14 +19,12 @@ interface ExpanderListProps {
     childPadding?: boolean;
     /** Adds custom classes to the element. */
     className?: string;
-    /** Changes the link list background color on hover. */
+    /** Changes the colors of the list. */
     color?: ExpanderListColors;
     /** Changes the font size. */
     large?: boolean;
     /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */
     renderChildrenWhenClosed?: boolean;
-    /** Stick expander trigger to top of screen while scrolling down */
-    sticky?: boolean;
     /** Sets the data-testid attribute. */
     testId?: string;
     /** Sets visual priority */
@@ -53,6 +51,6 @@ type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
     onExpand?: (isExpanded: boolean) => void;
     /** Overrides the default z-index of the expander header */
     zIndex?: number;
-}> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;
+}> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;
 export declare const ExpanderList: ExpanderListCompound;
 export default ExpanderList;

package/components/ExpanderList/index.js

@@ -1,142 +1,134 @@
-import { jsxs as Z, jsx as W } from "react/jsx-runtime";
-import m, { useRef as A, useState as T, useEffect as V } from "react";
-import C from "classnames";
-import { AnalyticsId as v, ZIndex as q } from "../../constants.js";
-import { useExpand as B } from "../../hooks/useExpand.js";
-import { useHover as F } from "../../hooks/useHover.js";
-import { useSticky as G } from "../../hooks/useSticky.js";
-import { useUuid as J } from "../../hooks/useUuid.js";
-import { mergeRefs as K } from "../../utils/refs.js";
-import { isElementInViewport as Q } from "../../utils/viewport.js";
-import X from "../Icons/ChevronDown.js";
-import Y from "../Icons/ChevronUp.js";
-import { r as S } from "../../ListHeader.js";
-import s from "./styles.module.scss";
-const b = m.forwardRef((d, g) => {
+import { jsxs as M, jsx as H } from "react/jsx-runtime";
+import c, { useRef as z, useState as A, useEffect as V } from "react";
+import _ from "classnames";
+import { AnalyticsId as j, ZIndex as O } from "../../constants.js";
+import { useExpand as P } from "../../hooks/useExpand.js";
+import { useHover as Z } from "../../hooks/useHover.js";
+import { useUuid as q } from "../../hooks/useUuid.js";
+import { mergeRefs as B } from "../../utils/refs.js";
+import { isElementInViewport as G } from "../../utils/viewport.js";
+import J from "../Icons/ChevronDown.js";
+import K from "../Icons/ChevronUp.js";
+import { r as Q } from "../../ListHeader.js";
+import e from "./styles.module.scss";
+const v = c.forwardRef((o, k) => {
   const {
-    id: x,
-    children: y,
-    padding: h = !0,
-    color: E = "neutral",
-    className: I = "",
-    icon: L,
-    large: l = !1,
+    id: f,
+    children: g,
+    padding: C = !0,
+    color: r = "neutral",
+    className: h = "",
+    icon: y,
+    large: p = !1,
     title: N,
-    titleHtmlMarkup: _ = "span",
-    expanded: w = !1,
-    sticky: $,
-    testId: o,
-    handleExpanderClick: k,
-    onExpand: p,
-    renderChildrenWhenClosed: R,
-    variant: a = "line",
-    zIndex: H
-  } = d, [i] = B(w, p), f = A(null), t = A(null), { isHovered: n } = F(t), { isOutsideWindow: e, isLeavingWindow: r, offsetHeight: c, contentWidth: z } = G(f, t), u = $ && i && e, D = C(
-    I,
-    (a === "line" || a === "outline") && s[`expander-list__item--${a}`]
-  ), M = C(
-    s["expander-list-link"],
-    E !== "black" && s[`expander-list-link--${E}`],
-    {
-      [s["expander-list-link--fill"]]: a === "fill",
-      [s["expander-list-link--closed"]]: !i,
-      [s["expander-list-link--large"]]: l,
-      [s["expander-list-link--sticky"]]: u && !r,
-      [s["expander-list-link--absolute"]]: u && r
-    }
-  ), O = () => {
-    if (!R && !i)
+    titleHtmlMarkup: $ = "span",
+    expanded: I = !1,
+    testId: x,
+    handleExpanderClick: u,
+    onExpand: m,
+    renderChildrenWhenClosed: L,
+    variant: d = "line",
+    zIndex: R
+  } = o, [l] = P(I, m), E = z(null), t = z(null), { isHovered: i } = Z(t), n = d === "fill", s = d === "fill-negative", a = d === "outline", w = d === "line", T = _(h, e["expander-list__item"], {
+    [e["expander-list__item--fill"]]: n,
+    [e[`expander-list__item--fill--${r}`]]: n,
+    [e["expander-list__item--fill-negative"]]: s,
+    [e["expander-list__item--outline"]]: a,
+    [e[`expander-list__item--outline--${r}`]]: a,
+    [e["expander-list__item--line"]]: w,
+    [e[`expander-list__item--line--${r}`]]: w
+  }), U = _(e["expander-list-link"], e[`expander-list-link--${r}`], {
+    [e["expander-list-link--fill"]]: n,
+    [e[`expander-list-link--fill--${r}`]]: n,
+    [e["expander-list-link--fill-negative"]]: s,
+    [e["expander-list-link--outline"]]: a,
+    [e[`expander-list-link--outline--${r}`]]: a,
+    [e[`expander-list-link--line--${r}`]]: w,
+    [e["expander-list-link--closed"]]: !l,
+    [e["expander-list-link--open"]]: l,
+    [e["expander-list-link--large"]]: p
+  }), W = () => {
+    if (!L && !l)
       return null;
-    const P = C(
-      s["expander-list-link__main-content"],
-      i && s["expander-list-link__main-content--expanded"],
-      h ? s["expander-list-link__main-content--padding"] : ""
+    const D = _(
+      e["expander-list-link__main-content"],
+      l && e["expander-list-link__main-content--expanded"],
+      C ? e["expander-list-link__main-content--padding"] : ""
     );
-    return /* @__PURE__ */ W("div", { className: P, children: y });
+    return /* @__PURE__ */ H("div", { className: D, children: g });
   };
-  return /* @__PURE__ */ Z(
-    "li",
-    {
-      className: D,
-      ref: K([g, f]),
-      style: { paddingTop: u && c ? `${c}px` : void 0 },
-      children: [
-        /* @__PURE__ */ W(
-          "button",
-          {
-            type: "button",
-            id: x,
-            onClick: k,
-            "data-testid": o,
-            "data-analyticsid": v.ExpanderListExpander,
-            className: M,
-            ref: t,
-            "aria-expanded": i,
-            style: {
-              zIndex: n || u ? H : void 0,
-              width: u && z ? `${z}px` : void 0
-            },
-            children: S(N, _, n, l ? "large" : "medium", i ? Y : X, L)
-          }
-        ),
-        O()
-      ]
-    }
-  );
-}), j = (d) => m.isValidElement(d) && d.type === b, U = m.forwardRef((d, g) => {
+  return /* @__PURE__ */ M("li", { className: T, ref: B([k, E]), children: [
+    /* @__PURE__ */ H(
+      "button",
+      {
+        type: "button",
+        id: f,
+        onClick: u,
+        "data-testid": x,
+        "data-analyticsid": j.ExpanderListExpander,
+        className: U,
+        ref: t,
+        "aria-expanded": l,
+        style: {
+          zIndex: i ? R : void 0
+        },
+        children: Q(N, $, i, p ? "large" : "medium", l ? K : J, y)
+      }
+    ),
+    W()
+  ] });
+}), b = (o) => c.isValidElement(o) && o.type === v, F = c.forwardRef((o, k) => {
   const {
-    children: x,
-    childPadding: y = !0,
-    large: h,
-    renderChildrenWhenClosed: E = !1,
-    color: I,
-    className: L = "",
-    accordion: l = !1,
-    sticky: N = !1,
-    testId: _,
-    variant: w,
-    zIndex: $ = q.ExpanderTrigger
-  } = d, [o, k] = T(), [p, R] = T(), a = J(), H = C(s["expander-list"], L);
-  function i(t, n) {
-    k((e) => l ? { [n]: !(e != null && e[n]) } : { ...e, [n]: !(e != null && e[n]) }), R(t.currentTarget);
+    children: f,
+    childPadding: g = !0,
+    large: C,
+    renderChildrenWhenClosed: r = !1,
+    color: h,
+    className: y = "",
+    accordion: p = !1,
+    testId: N,
+    variant: $,
+    zIndex: I = O.ExpanderTrigger
+  } = o, [x, u] = A(), [m, L] = A(), d = q(), R = _(e["expander-list"], y);
+  function l(t, i) {
+    u((n) => p ? { [i]: !(n != null && n[i]) } : { ...n, [i]: !(n != null && n[i]) }), L(t.currentTarget);
   }
-  const f = (t) => `${a}-${t}`;
+  const E = (t) => `${d}-${t}`;
   return V(() => {
-    l && p && !Q(p) && p.scrollIntoView();
-  }, [l, p]), V(() => {
-    var n;
-    const t = (n = m.Children.map(x, (e) => {
-      if (j(e))
-        return e;
-    })) == null ? void 0 : n.reduce((e, r, c) => (typeof r.props.expanded < "u" && (e[f(c)] = r.props.expanded), e), {});
-    k({ ...o, ...t });
-  }, [x]), /* @__PURE__ */ W("ul", { className: H, ref: g, "data-testid": _, "data-analyticsid": v.ExpanderList, children: m.Children.map(x, (t, n) => {
-    if (j(t)) {
-      const e = f(n), r = o == null ? void 0 : o[e];
-      return m.cloneElement(t, {
-        id: e,
-        key: n,
-        expanded: r,
-        padding: y,
-        color: I,
-        large: h,
-        sticky: N,
-        "aria-expanded": r,
-        className: s["expander-list__item"],
-        handleExpanderClick: (c) => i(c, `${a}-${n}`),
-        renderChildrenWhenClosed: E,
-        variant: w,
-        zIndex: $
+    p && m && !G(m) && m.scrollIntoView();
+  }, [p, m]), V(() => {
+    var i;
+    const t = (i = c.Children.map(f, (n) => {
+      if (b(n))
+        return n;
+    })) == null ? void 0 : i.reduce((n, s, a) => (typeof s.props.expanded < "u" && (n[E(a)] = s.props.expanded), n), {});
+    u({ ...x, ...t });
+  }, [f]), /* @__PURE__ */ H("ul", { className: R, ref: k, "data-testid": N, "data-analyticsid": j.ExpanderList, children: c.Children.map(f, (t, i) => {
+    if (b(t)) {
+      const n = E(i), s = x == null ? void 0 : x[n];
+      return c.cloneElement(t, {
+        id: n,
+        key: i,
+        expanded: s,
+        padding: g,
+        color: h,
+        large: C,
+        "aria-expanded": s,
+        className: e["expander-list__item"],
+        handleExpanderClick: (a) => l(a, `${d}-${i}`),
+        renderChildrenWhenClosed: r,
+        variant: $,
+        zIndex: I
       });
     }
     return t;
   }) });
 });
-U.displayName = "ExpanderList";
-U.Expander = b;
-b.displayName = "ExpanderList.Expander";
+F.displayName = "ExpanderList";
+F.Expander = v;
+v.displayName = "ExpanderList.Expander";
 export {
-  U as ExpanderList,
-  U as default
+  F as ExpanderList,
+  F as default
 };
 //# sourceMappingURL=index.js.map

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, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\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 = PaletteNames;\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';\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 link list background color on hover. */\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  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: 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' | 'sticky' | '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    sticky,\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 { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const itemClasses = classNames(\n    className,\n    (variant === 'line' || variant === 'outline') && expanderListStyles[`expander-list__item--${variant}`]\n  );\n\n  const expanderClasses = classNames(\n    expanderListStyles['expander-list-link'],\n    color !== 'black' && expanderListStyles[`expander-list-link--${color}`],\n    {\n      [expanderListStyles['expander-list-link--fill']]: variant === 'fill',\n      [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n      [expanderListStyles['expander-list-link--large']]: large,\n      [expanderListStyles['expander-list-link--sticky']]: isSticky && !isLeavingWindow,\n      [expanderListStyles['expander-list-link--absolute']]: isSticky && isLeavingWindow,\n    }\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\n      className={itemClasses}\n      ref={mergeRefs([ref, expanderRef])}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\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: isHovered || isSticky ? zIndex : undefined,\n          width: isSticky && contentWidth ? `${contentWidth}px` : 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    sticky = false,\n    testId,\n    variant,\n    zIndex = ZIndex.ExpanderTrigger,\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            sticky,\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":["Expander","React","props","ref","id","children","padding","color","className","icon","large","title","titleHtmlMarkup","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","variant","zIndex","isExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","itemClasses","classNames","expanderListStyles","expanderClasses","renderContent","mainContentClasses","jsx","jsxs","mergeRefs","AnalyticsId","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","accordion","ZIndex","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","expanderListClasses","event","prevState","getExpanderId","index","useEffect","isElementInViewport","newActiveExpander","_a","child","acc"],"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, ZIndex } 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: isHovered ? 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 = ZIndex.ExpanderTrigger,\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":["Expander","React","props","ref","id","children","padding","color","className","icon","large","title","titleHtmlMarkup","expanded","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","variant","zIndex","isExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isFill","isFillNegative","isOutline","isLine","itemClasses","classNames","expanderListStyles","expanderClasses","renderContent","mainContentClasses","jsx","jsxs","mergeRefs","AnalyticsId","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","accordion","ZIndex","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","expanderListClasses","event","prevState","getExpanderId","index","useEffect","isElementInViewport","newActiveExpander","_a","child","acc"],"mappings":"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"}