@helsenorge/designsystem-react 6.5.0 → 7.0.0-beta.2

package/components/ExpanderList/ExpanderList.js

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

package/components/ExpanderList/ExpanderList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderList.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}\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  }\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  } = 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  const isJsxTitle = typeof title === 'object';\n\n  const itemClasses = classNames(className, {\n    [expanderListStyles['expander-list__item--' + variant]]: variant,\n    [expanderListStyles['expander-list__item--jsx']]: isJsxTitle,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\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--jsx']]: isJsxTitle,\n    [expanderListStyles['expander-list-link--sticky']]: isSticky && !isLeavingWindow,\n    [expanderListStyles['expander-list-link--absolute']]: isSticky && isLeavingWindow,\n  });\n\n  const renderContent = () => {\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.ExpanderTrigger : 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  } = 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) => `${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          });\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","isExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","renderContent","mainContentClasses","mergeRefs","AnalyticsId","ZIndex","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","accordion","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","expanderListClasses","event","prevState","getExpanderId","index","useEffect","isElementInViewport","newActiveExpander","child","acc","ExpanderList$1"],"mappings":"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"}
+{"version":3,"file":"ExpanderList.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}\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  }\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  } = 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 = () => {\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.ExpanderTrigger : 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  } = 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) => `${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          });\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","isExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","itemClasses","classNames","expanderListStyles","expanderClasses","renderContent","mainContentClasses","mergeRefs","AnalyticsId","ZIndex","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","accordion","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","expanderListClasses","event","prevState","getExpanderId","index","useEffect","isElementInViewport","newActiveExpander","child","acc","ExpanderList$1"],"mappings":"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"}

package/components/ExpanderList/ExpanderList.stories.d.ts

@@ -0,0 +1,57 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("./ExpanderList").ExpanderListCompound;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        renderChildrenWhenClosed: false;
+        accordion: false;
+        childPadding: true;
+        color: "blueberry";
+        sticky: false;
+        large: false;
+    };
+    argTypes: {
+        renderChildrenWhenClosed: {
+            control: string;
+        };
+        accordion: {
+            control: string;
+        };
+        childPadding: {
+            control: string;
+        };
+        color: {
+            control: string;
+            options: import("./ExpanderList").ExpanderListColors[];
+        };
+        sticky: {
+            control: string;
+        };
+        large: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const VariantLine: Story;
+export declare const VariantOutline: Story;
+export declare const VariantFill: Story;
+export declare const WithListHeaderComp: Story;
+export declare const WithAvatarAndBadge: Story;
+export declare const MultipleOpenExpanders: Story;
+export declare const WithIcon: Story;
+export declare const WithLinkList: Story;
+export declare const AsAccordion: Story;
+export declare const WithCallback: Story;
+export declare const InteractiveChildren: Story;
+export declare const JsxTitle: Story;

package/components/ExpanderList/index.d.ts

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

package/components/FormExample/FormExample.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FormSize } from '../../constants';
-interface FormExampleProps {
+export interface FormExampleProps {
     exampleType: FormExampleVariants;
     size?: keyof typeof FormSize;
 }
@@ -14,4 +14,3 @@ export declare enum FormExampleVariants {
 }
 export declare const FormExample: (props: FormExampleProps) => JSX.Element;
 export default FormExample;
-//# sourceMappingURL=FormExample.d.ts.map

package/components/FormExample/FormExample.js

@@ -1,20 +1,20 @@
 import e from "react";
-import { useForm as R } from "react-hook-form";
-import { isTest as H } from "../../utils/environment.js";
-import $ from "../Button/Button.js";
+import { useForm as H } from "react-hook-form";
+import { isTest as L } from "../../utils/environment.js";
+import B from "../Button/Button.js";
 import a from "../Checkbox/Checkbox.js";
-import c from "../FormGroup/FormGroup.js";
-import B, { FormLayoutColumns as F } from "../FormLayout/FormLayout.js";
-import y from "../Icons/Hospital.js";
+import m from "../FormGroup/FormGroup.js";
+import F, { FormLayoutColumns as G } from "../FormLayout/FormLayout.js";
+import S from "../Icons/Hospital.js";
 import D from "../Input/Input.js";
 import i from "../Label/Label.js";
 import x from "../RadioButton/RadioButton.js";
 import z from "../Select/Select.js";
-import G from "../Spacer/Spacer.js";
+import V from "../Spacer/Spacer.js";
 import I from "../Textarea/Textarea.js";
-import V from "../Validation/Validation.js";
-var _ = /* @__PURE__ */ ((r) => (r.formgroup = "formgroup", r.checkbox = "checkbox", r.radiobutton = "radiobutton", r.textarea = "textarea", r.input = "input", r.select = "select", r))(_ || {});
-const j = (r) => {
+import _ from "../Validation/Validation.js";
+var j = /* @__PURE__ */ ((r) => (r.formgroup = "formgroup", r.checkbox = "checkbox", r.radiobutton = "radiobutton", r.textarea = "textarea", r.input = "input", r.select = "select", r))(j || {});
+const $ = (r) => {
   const {
     exampleType: s = "formgroup"
     /* formgroup */
@@ -22,21 +22,13 @@ const j = (r) => {
     register: l,
     handleSubmit: O,
     formState: { errors: t }
-  } = R(), u = /* @__PURE__ */ new Date();
-  u.setHours(0), u.setMinutes(0), u.setSeconds(0);
-  const m = /* @__PURE__ */ new Date();
-  m.setDate(u.getDate() - 5), m.setHours(6), m.setMinutes(10), m.setSeconds(0);
-  const d = /* @__PURE__ */ new Date();
-  d.setDate(u.getDate() + 5), d.setHours(22), d.setMinutes(0), d.setSeconds(0);
-  const b = "field1", g = "field2", f = "field3", E = "field4", k = "field5", v = "field6", C = t.field1 || t.field2 || t.field3 || t.field4 || t.field5 || t.field6 || t.field7 || t.field8 || t.field9, o = "Du må velge et alternativ", q = "Du må velge to alternativ", h = "Det kan ikke legges inn mer enn 40 tegn", T = "Du må skrive noe her", w = 'Du må velge "Option 2"';
-  `${m.toLocaleDateString("nb")}${d.toLocaleDateString("nb")}`, `${m.toLocaleTimeString("nb", {
-    hour: "2-digit",
-    minute: "2-digit"
-  })}${d.toLocaleTimeString("nb", {
-    hour: "2-digit",
-    minute: "2-digit"
-  })}`;
-  const p = (n) => n.length >= 2 || q, S = (n) => n.toString() === "Option 2" || w, L = () => {
+  } = H(), d = /* @__PURE__ */ new Date();
+  d.setHours(0), d.setMinutes(0), d.setSeconds(0);
+  const c = /* @__PURE__ */ new Date();
+  c.setDate(d.getDate() - 5), c.setHours(6), c.setMinutes(10), c.setSeconds(0);
+  const u = /* @__PURE__ */ new Date();
+  u.setDate(d.getDate() + 5), u.setHours(22), u.setMinutes(0), u.setSeconds(0);
+  const f = "field1", p = "field2", b = "field3", k = "field4", g = "field5", v = "field6", C = t.field1 || t.field2 || t.field3 || t.field4 || t.field5 || t.field6 || t.field7 || t.field8 || t.field9, o = "Du må velge et alternativ", q = "Du må velge to alternativ", h = "Det kan ikke legges inn mer enn 40 tegn", T = "Du må skrive noe her", w = 'Du må velge "Option 2"', E = (n) => n.length >= 2 || q, y = (n) => n.toString() === "Option 2" || w, M = () => {
     if (s === "formgroup") {
       const n = [
         /* @__PURE__ */ e.createElement(
@@ -45,7 +37,7 @@ const j = (r) => {
             key: 0,
             inputId: "checkbox1",
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 1" }] }),
-            ...l(b, { required: o })
+            ...l(f, { required: o })
           }
         ),
         /* @__PURE__ */ e.createElement(
@@ -54,7 +46,7 @@ const j = (r) => {
             key: 1,
             inputId: "checkbox2",
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 2" }] }),
-            ...l(b, { required: o })
+            ...l(f, { required: o })
           }
         ),
         /* @__PURE__ */ e.createElement(
@@ -63,13 +55,13 @@ const j = (r) => {
             key: 2,
             inputId: "checkbox3",
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 3" }] }),
-            ...l(b, { required: o })
+            ...l(f, { required: o })
           }
         )
       ];
       return [
         /* @__PURE__ */ e.createElement(
-          c,
+          m,
           {
             key: 0,
             title: "Gruppe tittel",
@@ -77,53 +69,53 @@ const j = (r) => {
             error: t.field1 ? t.field1.message : void 0,
             size: r.size
           },
-          /* @__PURE__ */ e.createElement(B, { maxColumns: F.two }, n.map((M) => M))
+          /* @__PURE__ */ e.createElement(F, { maxColumns: G.two }, n.map((R) => R))
         ),
-        /* @__PURE__ */ e.createElement(c, { key: 1, legend: "Velg minst to", error: t.field2 ? t.field2.message : void 0, size: r.size }, /* @__PURE__ */ e.createElement(
+        /* @__PURE__ */ e.createElement(m, { key: 1, legend: "Velg minst to", error: t.field2 ? t.field2.message : void 0, size: r.size }, /* @__PURE__ */ e.createElement(
           a,
           {
             inputId: "checkbox4",
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 4" }] }),
-            ...l(g, { validate: p })
+            ...l(p, { validate: E })
           }
         ), /* @__PURE__ */ e.createElement(
           a,
           {
             inputId: "checkbox5",
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 5" }] }),
-            ...l(g, { validate: p })
+            ...l(p, { validate: E })
           }
         ), /* @__PURE__ */ e.createElement(
           a,
           {
             inputId: "checkbox6",
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 6" }] }),
-            ...l(g, { validate: p })
+            ...l(p, { validate: E })
           }
         )),
-        /* @__PURE__ */ e.createElement(c, { key: 2, legend: "Velg en", error: t.field3 ? t.field3.message : void 0, size: r.size }, /* @__PURE__ */ e.createElement(
+        /* @__PURE__ */ e.createElement(m, { key: 2, legend: "Velg en", error: t.field3 ? t.field3.message : void 0, size: r.size }, /* @__PURE__ */ e.createElement(
           x,
           {
             inputId: "radiobutton1",
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 1" }] }),
-            ...l(f, { required: o })
+            ...l(b, { required: o })
           }
         ), /* @__PURE__ */ e.createElement(
           x,
           {
             inputId: "radiobutton2",
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 2" }] }),
-            ...l(f, { required: o })
+            ...l(b, { required: o })
           }
         ), /* @__PURE__ */ e.createElement(
           x,
           {
             inputId: "radiobutton3",
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 3" }] }),
-            ...l(f, { required: o })
+            ...l(b, { required: o })
           }
         )),
-        /* @__PURE__ */ e.createElement(c, { key: 3, error: t.field4 ? t.field4.message : void 0 }, /* @__PURE__ */ e.createElement(
+        /* @__PURE__ */ e.createElement(m, { key: 3, error: t.field4 ? t.field4.message : void 0 }, /* @__PURE__ */ e.createElement(
           I,
           {
             defaultValue: `Dette er en test 
@@ -138,23 +130,23 @@ const j = (r) => {
             minRows: 5,
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv din historie her", type: "semibold" }] }),
             textareaId: "textarea1",
-            ...l(E, { maxLength: { value: 40, message: h } })
+            ...l(k, { maxLength: { value: 40, message: h } })
           }
         )),
-        /* @__PURE__ */ e.createElement(c, { key: 4, size: r.size, error: t.field5 ? t.field5.message : void 0 }, /* @__PURE__ */ e.createElement(
+        /* @__PURE__ */ e.createElement(m, { key: 4, size: r.size, error: t.field5 ? t.field5.message : void 0 }, /* @__PURE__ */ e.createElement(
           D,
           {
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
             placeholder: "Skriv noe!",
-            icon: y,
-            ...l(k, { required: T })
+            icon: S,
+            ...l(g, { required: T })
           }
         )),
-        /* @__PURE__ */ e.createElement(c, { key: 5, size: r.size, error: t.field6 ? t.field6.message : void 0 }, /* @__PURE__ */ e.createElement(
+        /* @__PURE__ */ e.createElement(m, { key: 5, size: r.size, error: t.field6 ? t.field6.message : void 0 }, /* @__PURE__ */ e.createElement(
           z,
           {
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
-            ...l(v, { validate: S })
+            ...l(v, { validate: y })
           },
           /* @__PURE__ */ e.createElement("option", { value: "Option 1" }, "Option 1"),
           /* @__PURE__ */ e.createElement("option", { value: "Option 2" }, "Option 2"),
@@ -170,7 +162,7 @@ const j = (r) => {
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 1" }] }),
             errorText: t.field1 ? t.field1.message : void 0,
             size: r.size,
-            ...l(b, { required: o })
+            ...l(f, { required: o })
           }
         );
       if (s === "radiobutton")
@@ -181,7 +173,7 @@ const j = (r) => {
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 1" }] }),
             errorText: t.field3 ? t.field3.message : void 0,
             size: r.size,
-            ...l(f, { required: o })
+            ...l(b, { required: o })
           }
         );
       if (s === "textarea")
@@ -199,7 +191,7 @@ const j = (r) => {
             errorText: t.field4 ? t.field4.message : void 0,
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv din historie her", type: "semibold" }] }),
             textareaId: "textarea1",
-            ...l(E, { maxLength: { value: 40, message: h } })
+            ...l(k, { maxLength: { value: 40, message: h } })
           }
         );
       if (s === "input")
@@ -210,8 +202,8 @@ const j = (r) => {
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
             placeholder: "Skriv noe!",
             errorText: t.field5 ? t.field5.message : void 0,
-            icon: y,
-            ...l(k, { required: T })
+            icon: S,
+            ...l(g, { required: T })
           }
         );
       if (s === "select")
@@ -220,7 +212,7 @@ const j = (r) => {
           {
             errorText: t.field6 ? t.field6.message : void 0,
             label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
-            ...l(v, { validate: S })
+            ...l(v, { validate: y })
           },
           /* @__PURE__ */ e.createElement("option", { value: "Option 1" }, "Option 1"),
           /* @__PURE__ */ e.createElement("option", { value: "Option 2" }, "Option 2"),
@@ -233,17 +225,17 @@ const j = (r) => {
     {
       noValidate: !0,
       onSubmit: O((n) => {
-        !H() && console.log(n);
+        !L() && console.log(n);
       })
     },
-    /* @__PURE__ */ e.createElement(V, { size: r.size, errorSummary: C ? "Sjekk at alt er riktig utfylt" : void 0 }, L()),
-    /* @__PURE__ */ e.createElement(G, null),
-    /* @__PURE__ */ e.createElement($, { type: "submit" }, "Send inn")
+    /* @__PURE__ */ e.createElement(_, { size: r.size, errorSummary: C ? "Sjekk at alt er riktig utfylt" : void 0 }, M()),
+    /* @__PURE__ */ e.createElement(V, null),
+    /* @__PURE__ */ e.createElement(B, { type: "submit" }, "Send inn")
   );
-}, ie = j;
+}, ie = $;
 export {
-  j as FormExample,
-  _ as FormExampleVariants,
+  $ as FormExample,
+  j as FormExampleVariants,
   ie as default
 };
 //# sourceMappingURL=FormExample.js.map