@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/components/ExpanderList/ExpanderList.test.d.ts

@@ -1 +0,0 @@
-import '../../__mocks__/uuid';

package/components/ExpanderList/index.d.ts

@@ -1,3 +1,3 @@
-import ExpanderList from './ExpanderList';
+import { default as ExpanderList } from './ExpanderList';
 export * from './ExpanderList';
 export default ExpanderList;

package/components/ExpanderList/index.js

@@ -1,134 +1,164 @@
-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) => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useState, useEffect } from "react";
+import classNames from "classnames";
+import { AnalyticsId, ZIndex } from "../../constants.js";
+import { useExpand } from "../../hooks/useExpand.js";
+import { useHover } from "../../hooks/useHover.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { mergeRefs } from "../../utils/refs.js";
+import { isElementInViewport } from "../../utils/viewport.js";
+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 {
-    id: f,
-    children: g,
-    padding: C = !0,
-    color: r = "neutral",
-    className: h = "",
-    icon: y,
-    large: p = !1,
-    title: N,
-    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)
+    id,
+    children,
+    padding = true,
+    color = "neutral",
+    className = "",
+    icon,
+    large = false,
+    title,
+    titleHtmlMarkup = "span",
+    expanded = false,
+    testId,
+    handleExpanderClick,
+    onExpand,
+    renderChildrenWhenClosed,
+    variant = "line",
+    zIndex
+  } = props;
+  const [isExpanded] = useExpand(expanded, onExpand);
+  const expanderRef = useRef(null);
+  const triggerRef = useRef(null);
+  const { isHovered } = useHover(triggerRef);
+  const isFill = variant === "fill";
+  const isFillNegative = variant === "fill-negative";
+  const isOutline = variant === "outline";
+  const isLine = variant === "line";
+  const itemClasses = classNames(className, expanderListStyles["expander-list__item"], {
+    [expanderListStyles[`expander-list__item--fill`]]: isFill,
+    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,
+    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,
+    [expanderListStyles["expander-list__item--outline"]]: isOutline,
+    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,
+    [expanderListStyles["expander-list__item--line"]]: isLine,
+    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine
+  });
+  const expanderClasses = classNames(expanderListStyles["expander-list-link"], expanderListStyles[`expander-list-link--${color}`], {
+    [expanderListStyles[`expander-list-link--fill`]]: isFill,
+    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,
+    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,
+    [expanderListStyles["expander-list-link--outline"]]: isOutline,
+    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,
+    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,
+    [expanderListStyles["expander-list-link--closed"]]: !isExpanded,
+    [expanderListStyles["expander-list-link--open"]]: isExpanded,
+    [expanderListStyles["expander-list-link--large"]]: large
+  });
+  const renderContent = () => {
+    if (!renderChildrenWhenClosed && !isExpanded) {
       return null;
-    const D = _(
-      e["expander-list-link__main-content"],
-      l && e["expander-list-link__main-content--expanded"],
-      C ? e["expander-list-link__main-content--padding"] : ""
+    }
+    const mainContentClasses = classNames(
+      expanderListStyles["expander-list-link__main-content"],
+      isExpanded && expanderListStyles["expander-list-link__main-content--expanded"],
+      padding ? expanderListStyles["expander-list-link__main-content--padding"] : ""
     );
-    return /* @__PURE__ */ H("div", { className: D, children: g });
+    return /* @__PURE__ */ jsx("div", { className: mainContentClasses, children });
   };
-  return /* @__PURE__ */ M("li", { className: T, ref: B([k, E]), children: [
-    /* @__PURE__ */ H(
+  return /* @__PURE__ */ jsxs("li", { className: itemClasses, ref: mergeRefs([ref, expanderRef]), children: [
+    /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        id: f,
-        onClick: u,
-        "data-testid": x,
-        "data-analyticsid": j.ExpanderListExpander,
-        className: U,
-        ref: t,
-        "aria-expanded": l,
+        id,
+        onClick: handleExpanderClick,
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.ExpanderListExpander,
+        className: expanderClasses,
+        ref: triggerRef,
+        "aria-expanded": isExpanded,
         style: {
-          zIndex: i ? R : void 0
+          zIndex: isHovered ? zIndex : void 0
         },
-        children: Q(N, $, i, p ? "large" : "medium", l ? K : J, y)
+        children: renderListHeader(title, titleHtmlMarkup, isHovered, large ? "large" : "medium", isExpanded ? ChevronUp : ChevronDown, icon)
       }
     ),
-    W()
+    renderContent()
   ] });
-}), b = (o) => c.isValidElement(o) && o.type === v, F = c.forwardRef((o, k) => {
+});
+const isExpanderComponent = (element) => React.isValidElement(element) && element.type === Expander;
+const ExpanderList = React.forwardRef((props, ref) => {
   const {
-    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);
+    children,
+    childPadding = true,
+    large,
+    renderChildrenWhenClosed = false,
+    color,
+    className = "",
+    accordion = false,
+    testId,
+    variant,
+    zIndex = ZIndex.ExpanderTrigger
+  } = props;
+  const [activeExpander, setActiveExpander] = useState();
+  const [latestExpander, setLatestExpander] = useState();
+  const uuid = useUuid();
+  const expanderListClasses = classNames(expanderListStyles["expander-list"], className);
+  function handleExpanderClick(event, id) {
+    setActiveExpander((prevState) => accordion ? { [id]: !(prevState == null ? void 0 : prevState[id]) } : { ...prevState, [id]: !(prevState == null ? void 0 : prevState[id]) });
+    setLatestExpander(event.currentTarget);
   }
-  const E = (t) => `${d}-${t}`;
-  return V(() => {
-    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
+  const getExpanderId = (index) => `${uuid}-${index}`;
+  useEffect(() => {
+    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {
+      latestExpander.scrollIntoView();
+    }
+  }, [accordion, latestExpander]);
+  useEffect(() => {
+    var _a;
+    const newActiveExpander = (_a = React.Children.map(children, (child) => {
+      if (isExpanderComponent(child)) {
+        return child;
+      }
+    })) == null ? void 0 : _a.reduce((acc, child, index) => {
+      if (typeof child.props.expanded !== "undefined") {
+        acc[getExpanderId(index)] = child.props.expanded;
+      }
+      return acc;
+    }, {});
+    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) => {
+    if (isExpanderComponent(child)) {
+      const id = getExpanderId(index);
+      const expanded = activeExpander == null ? void 0 : activeExpander[id];
+      return React.cloneElement(child, {
+        id,
+        key: index,
+        expanded,
+        padding: childPadding,
+        color,
+        large,
+        "aria-expanded": expanded,
+        className: expanderListStyles["expander-list__item"],
+        handleExpanderClick: (event) => handleExpanderClick(event, `${uuid}-${index}`),
+        renderChildrenWhenClosed,
+        variant,
+        zIndex
       });
     }
-    return t;
+    return child;
   }) });
 });
-F.displayName = "ExpanderList";
-F.Expander = v;
-v.displayName = "ExpanderList.Expander";
+ExpanderList.displayName = "ExpanderList";
+ExpanderList.Expander = Expander;
+Expander.displayName = "ExpanderList.Expander";
 export {
-  F as ExpanderList,
-  F as default
+  ExpanderList,
+  ExpanderList 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 { 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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"}
+{"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":[],"mappings":"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"}

package/components/EyebrowHeader/EyebrowHeader.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import Title from '../Title';
+import { default as React } from 'react';
+import { default as Title } from '../Title';
 export interface SubtitleProps {
     children?: React.ReactNode;
 }

package/components/EyebrowHeader/index.d.ts

@@ -1,3 +1,3 @@
-import EyebrowHeader from './EyebrowHeader';
+import { default as EyebrowHeader } from './EyebrowHeader';
 export * from './EyebrowHeader';
 export default EyebrowHeader;

package/components/EyebrowHeader/index.js

@@ -1,12 +1,15 @@
-import { jsx as r } from "react/jsx-runtime";
-import { AnalyticsId as i } from "../../constants.js";
-import { T as a } from "../../Title.js";
-import d from "./styles.module.scss";
-const l = (e) => /* @__PURE__ */ r("p", { className: d.subtitle, children: e.children }), t = (e) => /* @__PURE__ */ r("div", { "data-testid": e.testId, "data-analyticsid": i.EyebrowHeader, children: e.children });
-t.Subtitle = l;
-t.Title = a;
-t.displayName = "EyebrowHeader";
+import { jsx } from "react/jsx-runtime";
+import { AnalyticsId } from "../../constants.js";
+import { T as Title } from "../../Title.js";
+import styles from "./styles.module.scss";
+const Subtitle = (props) => {
+  return /* @__PURE__ */ jsx("p", { className: styles.subtitle, children: props.children });
+};
+const EyebrowHeader = (props) => /* @__PURE__ */ jsx("div", { "data-testid": props.testId, "data-analyticsid": AnalyticsId.EyebrowHeader, children: props.children });
+EyebrowHeader.Subtitle = Subtitle;
+EyebrowHeader.Title = Title;
+EyebrowHeader.displayName = "EyebrowHeader";
 export {
-  t as default
+  EyebrowHeader as default
 };
 //# sourceMappingURL=index.js.map

package/components/EyebrowHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/EyebrowHeader/EyebrowHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface SubtitleProps {\n  children?: React.ReactNode;\n}\n\nconst Subtitle: React.FC<SubtitleProps> = props => {\n  return <p className={styles.subtitle}>{props.children}</p>;\n};\n\nexport interface EyebrowHeaderProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface EyebrowHeaderType extends React.FC<EyebrowHeaderProps> {\n  Subtitle: typeof Subtitle;\n  Title: typeof Title;\n}\n\nconst EyebrowHeader = ((props: EyebrowHeaderProps): React.JSX.Element => (\n  <div data-testid={props.testId} data-analyticsid={AnalyticsId.EyebrowHeader}>\n    {props.children}\n  </div>\n)) as EyebrowHeaderType;\n\nEyebrowHeader.Subtitle = Subtitle;\nEyebrowHeader.Title = Title;\nEyebrowHeader.displayName = 'EyebrowHeader';\n\nexport default EyebrowHeader;\n"],"names":["Subtitle","props","styles","EyebrowHeader","jsx","AnalyticsId","Title"],"mappings":";;;;AAWA,MAAMA,IAAoC,CAASC,wBACzC,KAAE,EAAA,WAAWC,EAAO,UAAW,YAAM,SAAS,CAAA,GAclDC,IAAiB,CAACF,MACtB,gBAAAG,EAAC,OAAI,EAAA,eAAaH,EAAM,QAAQ,oBAAkBI,EAAY,eAC3D,UAAAJ,EAAM,SACT,CAAA;AAGFE,EAAc,WAAWH;AACzBG,EAAc,QAAQG;AACtBH,EAAc,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/EyebrowHeader/EyebrowHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface SubtitleProps {\n  children?: React.ReactNode;\n}\n\nconst Subtitle: React.FC<SubtitleProps> = props => {\n  return <p className={styles.subtitle}>{props.children}</p>;\n};\n\nexport interface EyebrowHeaderProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface EyebrowHeaderType extends React.FC<EyebrowHeaderProps> {\n  Subtitle: typeof Subtitle;\n  Title: typeof Title;\n}\n\nconst EyebrowHeader = ((props: EyebrowHeaderProps): React.JSX.Element => (\n  <div data-testid={props.testId} data-analyticsid={AnalyticsId.EyebrowHeader}>\n    {props.children}\n  </div>\n)) as EyebrowHeaderType;\n\nEyebrowHeader.Subtitle = Subtitle;\nEyebrowHeader.Title = Title;\nEyebrowHeader.displayName = 'EyebrowHeader';\n\nexport default EyebrowHeader;\n"],"names":[],"mappings":";;;;AAWA,MAAM,WAAoC,CAAS,UAAA;AACjD,6BAAQ,KAAE,EAAA,WAAW,OAAO,UAAW,gBAAM,UAAS;AACxD;AAaA,MAAM,gBAAiB,CAAC,UACtB,oBAAC,OAAI,EAAA,eAAa,MAAM,QAAQ,oBAAkB,YAAY,eAC3D,UAAA,MAAM,SACT,CAAA;AAGF,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,cAAc;"}

package/components/FormGroup/FormGroup.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { FormOnColor, FormSize } from '../../constants';
 export type FormGroupTags = 'fieldset' | 'div';
 export interface FormGroupProps {

package/components/FormGroup/index.d.ts

@@ -1,3 +1,3 @@
-import FormGroup from './FormGroup';
+import { default as FormGroup } from './FormGroup';
 export * from './FormGroup';
 export default FormGroup;

package/components/FormGroup/index.js

@@ -1,6 +1,6 @@
-import { F as r } from "../../FormGroup.js";
+import { F as FormGroup } from "../../FormGroup.js";
 export {
-  r as FormGroup,
-  r as default
+  FormGroup,
+  FormGroup as default
 };
 //# sourceMappingURL=index.js.map

package/components/FormLayout/FormLayout.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { FormSize } from '../../constants';
 export declare enum FormLayoutColumns {
     one = "one",

package/components/FormLayout/index.d.ts

@@ -1,3 +1,3 @@
-import FormLayout from './FormLayout';
+import { default as FormLayout } from './FormLayout';
 export * from './FormLayout';
 export default FormLayout;

package/components/FormLayout/index.js

@@ -1,8 +1,8 @@
-import { F as a } from "../../FormLayout.js";
-import { a as t } from "../../FormLayout.js";
+import { F as FormLayout } from "../../FormLayout.js";
+import { a } from "../../FormLayout.js";
 export {
-  a as FormLayout,
-  t as FormLayoutColumns,
-  a as default
+  FormLayout,
+  a as FormLayoutColumns,
+  FormLayout as default
 };
 //# sourceMappingURL=index.js.map

package/components/HelpBubble/HelpBubble.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { AnchorLinkTargets } from '../AnchorLink';
 import { PopOverProps, PopOverVariant } from '../PopOver';
 export declare const HelpBubbleVariant: typeof PopOverVariant;

package/components/HelpBubble/index.d.ts

@@ -1,3 +1,3 @@
-import HelpBubble from './HelpBubble';
+import { default as HelpBubble } from './HelpBubble';
 export * from './HelpBubble';
 export default HelpBubble;

package/components/HelpBubble/index.js

@@ -1,7 +1,7 @@
-import { H as e } from "../../HelpBubble.js";
-import { a as o } from "../../HelpBubble.js";
+import { H as HelpBubble } from "../../HelpBubble.js";
+import { a } from "../../HelpBubble.js";
 export {
-  o as HelpBubbleVariant,
-  e as default
+  a as HelpBubbleVariant,
+  HelpBubble as default
 };
 //# sourceMappingURL=index.js.map

package/components/HelpPanel/HelpPanel.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { HighlightPanelSize } from '../HighlightPanel';
 export interface HelpPanelProps {
     /** What's in the box? */

package/components/HelpPanel/index.d.ts

@@ -1,3 +1,3 @@
-import HelpPanel from './HelpPanel';
+import { default as HelpPanel } from './HelpPanel';
 export * from './HelpPanel';
 export default HelpPanel;

package/components/HelpPanel/index.js

@@ -1,21 +1,23 @@
-import { jsx as p } from "react/jsx-runtime";
-import s from "classnames";
-import { H as t } from "../../HighlightPanel.js";
-import n from "../Icons/HandWaving.js";
-import e from "./styles.module.scss";
-const H = ({ className: r, testId: l, size: a, children: o, title: m }) => /* @__PURE__ */ p(
-  t,
-  {
-    className: s(r, { [e["help-panel"]]: a === "fluid" }),
-    contentWrapperClassName: e["help-panel"],
-    testId: l,
-    size: a,
-    svgIcon: n,
-    title: m,
-    children: o
-  }
-);
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { H as HighlightPanel } from "../../HighlightPanel.js";
+import HandWaving from "../Icons/HandWaving.js";
+import styles from "./styles.module.scss";
+const HelpPanel = ({ className, testId, size, children, title }) => {
+  return /* @__PURE__ */ jsx(
+    HighlightPanel,
+    {
+      className: classNames(className, { [styles["help-panel"]]: size === "fluid" }),
+      contentWrapperClassName: styles["help-panel"],
+      testId,
+      size,
+      svgIcon: HandWaving,
+      title,
+      children
+    }
+  );
+};
 export {
-  H as default
+  HelpPanel as default
 };
 //# sourceMappingURL=index.js.map

package/components/HelpPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightPanel, { HighlightPanelSize } from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  return (\n    <HighlightPanel\n      className={classNames(className, { [styles['help-panel']]: size === 'fluid' })}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","jsx","HighlightPanel","classNames","styles","HandWaving"],"mappings":";;;;;AAsBM,MAAAA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAE9E,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWP,GAAW,EAAE,CAACQ,EAAO,YAAY,CAAC,GAAGN,MAAS,SAAS;AAAA,IAC7E,yBAAyBM,EAAO,YAAY;AAAA,IAC5C,QAAAP;AAAA,IACA,MAAAC;AAAA,IACA,SAASO;AAAA,IACT,OAAAL;AAAA,IAEC,UAAAD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightPanel, { HighlightPanelSize } from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  return (\n    <HighlightPanel\n      className={classNames(className, { [styles['help-panel']]: size === 'fluid' })}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n"],"names":[],"mappings":";;;;;AAsBM,MAAA,YAAsC,CAAC,EAAE,WAAW,QAAQ,MAAM,UAAU,YAAY;AAE1F,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,WAAW,EAAE,CAAC,OAAO,YAAY,CAAC,GAAG,SAAS,SAAS;AAAA,MAC7E,yBAAyB,OAAO,YAAY;AAAA,MAC5C;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MAEC;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/components/HelpQuestion/HelpQuestion.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {
     /**
      * Help question contents

package/components/HelpQuestion/index.d.ts

@@ -1,3 +1,3 @@
-import HelpQuestion from './HelpQuestion';
+import { default as HelpQuestion } from './HelpQuestion';
 export * from './HelpQuestion';
 export default HelpQuestion;