@helsenorge/designsystem-react 13.0.0-beta.2 → 13.0.0-beta.4

package/components/ExpanderList/index.js

@@ -1,218 +1,243 @@
+import "../../uuid.js";
+import "../../environment.js";
+import { n as AnalyticsId } from "../../constants2.js";
+import { t as usePseudoClasses } from "../../usePseudoClasses.js";
+import "../../grid.js";
+import "../../palette.js";
+import "../../spacers.js";
+import "../../theme.js";
+import "../../color.js";
+import "../../spacing.js";
+import "../../currys.js";
+import "../../Icon.js";
+import { n as mergeRefs } from "../../refs.js";
+import "../../Check.js";
+import "../../Avatar.js";
+import "../../CheckFill.js";
+import "../../ErrorSignFill.js";
+import "../../InfoSignFill.js";
+import "../../TriangleX.js";
+import "../../NotificationBadge.js";
+import "../../Badge.js";
+import "../../_rolldown_dynamic_import_helper.js";
+import "../../useIsServerSide.js";
+import "../../LazyIcon.js";
+import "../../component.js";
+import "../../useBreakpoint.js";
+import "../../Spacer.js";
+import "../../useElementList.js";
+import "../../useFocusableElements.js";
+import "../../useFocusToggle.js";
+import "../../focus.js";
+import "../../useFocusTrap.js";
+import "../../useIntersectionObserver.js";
+import "../../useIsVisible.js";
+import "../../debounce.js";
+import "../../useLayoutEvent.js";
+import "../../usePrevious.js";
+import "../../useSize.js";
+import "../../useResizeObserver.js";
+import "../../useToggle.js";
+import "../../useKeyboardEvent.js";
+import "../../useOutsideEvent.js";
+import "../../mobile.js";
+import "../../src.js";
+import "../../StatusDot.js";
+import "../../X.js";
+import { t as ChevronDown_default } from "../../ChevronDown.js";
+import { t as ChevronUp_default } from "../../ChevronUp.js";
+import "../../Duolist.js";
+import { t as Highlighter_default } from "../../Highlighter.js";
+import "../../ElementHeaderText.js";
+import "../../StatusDotList.js";
+import { i as renderElementHeader } from "../../ElementHeader.js";
+import { t as useExpand } from "../../useExpand.js";
+import { t as isElementInViewport } from "../../viewport.js";
+import { i as listEditModeWrapperClassnames, t as ListEditMode_default } from "../../ListEditMode.js";
+import React, { useEffect, useId, useRef, useState } from "react";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useState, useId, useEffect, useRef } from "react";
-import classNames from "classnames";
-import { AnalyticsId } from "../../constants.js";
-import { useExpand } from "../../hooks/useExpand.js";
-import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
-import { mergeRefs } from "../../utils/refs.js";
-import { isElementInViewport } from "../../utils/viewport.js";
-import { r as renderElementHeader } from "../../ElementHeader.js";
-import { H as Highlighter } from "../../Highlighter.js";
-import ChevronDown from "../Icons/ChevronDown.js";
-import ChevronUp from "../Icons/ChevronUp.js";
-import { l as listEditModeWrapperClassnames, L as ListEditModeItem } from "../../ListEditMode.js";
 import expanderListStyles from "./styles.module.scss";
-const Expander = React__default.forwardRef((props, ref) => {
-  const {
-    id,
-    children,
-    padding = true,
-    color = "neutral",
-    className = "",
-    icon,
-    large = false,
-    title,
-    titleHtmlMarkup = "span",
-    expanded = false,
-    testId,
-    handleExpanderClick,
-    onExpand,
-    renderChildrenWhenClosed,
-    variant = "line",
-    zIndex = 0,
-    highlightText,
-    status = "none",
-    editMode = false
-  } = props;
-  const [isExpanded] = useExpand(expanded, onExpand);
-  const expanderRef = useRef(null);
-  const triggerRef = useRef(null);
-  const { isHovered, isFocused } = usePseudoClasses(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--fill-negative--${color}`]]: 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,
-    [expanderListStyles[`expander-list__item--new`]]: status === "new"
-  });
-  const expanderClasses = classNames(expanderListStyles["expander-list-link"], expanderListStyles[`expander-list-link--${color}`], {
-    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,
-    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,
-    [expanderListStyles[`expander-list-link--fill-negative--${color}`]]: 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--open"]]: isExpanded,
-    [expanderListStyles["expander-list-link--large"]]: large,
-    [expanderListStyles[`expander-list-link--new`]]: status === "new"
-  });
-  const renderContent = () => {
-    if (!renderChildrenWhenClosed && !isExpanded) {
-      return null;
-    }
-    const mainContentClasses = classNames(expanderListStyles["expander-list-link__main-content"], {
-      [expanderListStyles["expander-list-link__main-content--expanded"]]: isExpanded,
-      [expanderListStyles["expander-list-link__main-content--padding"]]: padding,
-      [expanderListStyles[`expander-list-link__main-content--outline--${color}`]]: isOutline,
-      [expanderListStyles[`expander-list-link__main-content--new`]]: status === "new"
-    });
-    return /* @__PURE__ */ jsx("div", { className: mainContentClasses, "data-state": isExpanded ? "open" : "closed", children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children }) });
-  };
-  const statusMarkerClasses = classNames(expanderListStyles["expander-list__item__status-marker"], {
-    [expanderListStyles["expander-list__item__status-marker--new"]]: status === "new"
-  });
-  return /* @__PURE__ */ jsxs("li", { className: itemClasses, ref: mergeRefs([ref, expanderRef]), children: [
-    status !== "none" && /* @__PURE__ */ jsx("div", { className: statusMarkerClasses }),
-    editMode ? /* @__PURE__ */ jsx("div", { id, "data-testid": testId, "data-analyticsid": AnalyticsId.ExpanderListExpander, className: expanderClasses, children: renderElementHeader(title, {
-      titleHtmlMarkup,
-      isHovered: false,
-      size: large ? "large" : "medium",
-      parentType: "expanderlist",
-      chevronIcon: void 0,
-      icon,
-      highlightText
-    }) }) : /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        id,
-        onClick: handleExpanderClick,
-        "data-testid": testId,
-        "data-analyticsid": AnalyticsId.ExpanderListExpander,
-        className: expanderClasses,
-        ref: triggerRef,
-        "aria-expanded": isExpanded,
-        style: {
-          zIndex: isFocused ? zIndex + 1 : zIndex
-        },
-        children: renderElementHeader(title, {
-          titleHtmlMarkup,
-          isHovered: isHovered || isFocused,
-          size: large ? "large" : "medium",
-          parentType: "expanderlist",
-          chevronIcon: isExpanded ? ChevronUp : ChevronDown,
-          icon,
-          highlightText
-        })
-      }
-    ),
-    !editMode && renderContent()
-  ] });
+const Expander = React.forwardRef((props, ref) => {
+	const { id, children, padding = true, color = "neutral", className = "", icon, large = false, title, titleHtmlMarkup = "span", expanded = false, testId, handleExpanderClick, onExpand, renderChildrenWhenClosed, variant = "line", zIndex = 0, highlightText, status = "none", editMode = false } = props;
+	const [isExpanded] = useExpand(expanded, onExpand);
+	const expanderRef = useRef(null);
+	const triggerRef = useRef(null);
+	const { isHovered, isFocused } = usePseudoClasses(triggerRef);
+	const isFill = variant === "fill";
+	const isFillNegative = variant === "fill-negative";
+	const isOutline = variant === "outline";
+	const isLine = variant === "line";
+	const itemClasses = cn(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--fill-negative--${color}`]]: 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,
+		[expanderListStyles[`expander-list__item--new`]]: status === "new"
+	});
+	const expanderClasses = cn(expanderListStyles["expander-list-link"], expanderListStyles[`expander-list-link--${color}`], {
+		[expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,
+		[expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,
+		[expanderListStyles[`expander-list-link--fill-negative--${color}`]]: 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--open"]]: isExpanded,
+		[expanderListStyles["expander-list-link--large"]]: large,
+		[expanderListStyles[`expander-list-link--new`]]: status === "new"
+	});
+	const renderContent = () => {
+		if (!renderChildrenWhenClosed && !isExpanded) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn(expanderListStyles["expander-list-link__main-content"], {
+				[expanderListStyles["expander-list-link__main-content--expanded"]]: isExpanded,
+				[expanderListStyles["expander-list-link__main-content--padding"]]: padding,
+				[expanderListStyles[`expander-list-link__main-content--outline--${color}`]]: isOutline,
+				[expanderListStyles[`expander-list-link__main-content--new`]]: status === "new"
+			}),
+			"data-state": isExpanded ? "open" : "closed",
+			children: /* @__PURE__ */ jsx(Highlighter_default, {
+				searchText: highlightText,
+				children
+			})
+		});
+	};
+	const statusMarkerClasses = cn(expanderListStyles["expander-list__item__status-marker"], { [expanderListStyles["expander-list__item__status-marker--new"]]: status === "new" });
+	return /* @__PURE__ */ jsxs("li", {
+		className: itemClasses,
+		ref: mergeRefs([ref, expanderRef]),
+		children: [
+			status !== "none" && /* @__PURE__ */ jsx("div", { className: statusMarkerClasses }),
+			editMode ? /* @__PURE__ */ jsx("div", {
+				id,
+				"data-testid": testId,
+				"data-analyticsid": AnalyticsId.ExpanderListExpander,
+				className: expanderClasses,
+				children: renderElementHeader(title, {
+					titleHtmlMarkup,
+					isHovered: false,
+					size: large ? "large" : "medium",
+					parentType: "expanderlist",
+					chevronIcon: void 0,
+					icon,
+					highlightText
+				})
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				id,
+				onClick: handleExpanderClick,
+				"data-testid": testId,
+				"data-analyticsid": AnalyticsId.ExpanderListExpander,
+				className: expanderClasses,
+				ref: triggerRef,
+				"aria-expanded": isExpanded,
+				style: { zIndex: isFocused ? zIndex + 1 : zIndex },
+				children: renderElementHeader(title, {
+					titleHtmlMarkup,
+					isHovered: isHovered || isFocused,
+					size: large ? "large" : "medium",
+					parentType: "expanderlist",
+					chevronIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
+					icon,
+					highlightText
+				})
+			}),
+			!editMode && renderContent()
+		]
+	});
 });
-const isExpanderComponent = (element) => React__default.isValidElement(element) && element.type === Expander;
-const ExpanderList = React__default.forwardRef((props, ref) => {
-  const {
-    children,
-    childPadding = true,
-    large,
-    renderChildrenWhenClosed = false,
-    color = "white",
-    className = "",
-    accordion = false,
-    testId,
-    variant,
-    zIndex,
-    highlightText,
-    editMode = false
-  } = props;
-  const [activeExpander, setActiveExpander] = useState();
-  const [latestExpander, setLatestExpander] = useState();
-  const expanderIdBase = useId();
-  const expanderListClasses = classNames(expanderListStyles["expander-list"], className, {
-    [expanderListStyles[`expander-list--outline--${color}`]]: variant === "outline",
-    [expanderListStyles[`expander-list--fill`]]: variant === "fill" || variant === "fill-negative",
-    [listEditModeWrapperClassnames]: editMode
-  });
-  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 getExpanderId = (index) => `${expanderIdBase}-${index}`;
-  useEffect(() => {
-    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {
-      latestExpander.scrollIntoView();
-    }
-  }, [accordion, latestExpander]);
-  useEffect(() => {
-    var _a;
-    const newActiveExpander = (_a = React__default.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__default.Children.map(children, (child, index) => {
-    if (isExpanderComponent(child)) {
-      const id = getExpanderId(index);
-      const expanded = activeExpander == null ? void 0 : activeExpander[id];
-      const highlightTextChild = child.props.highlightText || highlightText;
-      if (editMode) {
-        return /* @__PURE__ */ jsx(ListEditModeItem, { color, variant, onDelete: child.props.onDelete, children: React__default.cloneElement(child, {
-          id,
-          key: index,
-          expanded,
-          padding: childPadding,
-          color,
-          large,
-          "aria-expanded": false,
-          className: expanderListStyles["expander-list__item"],
-          renderChildrenWhenClosed: false,
-          variant,
-          zIndex,
-          highlightText: highlightTextChild,
-          editMode: true
-        }) });
-      } else {
-        return React__default.cloneElement(child, {
-          id,
-          key: index,
-          expanded,
-          padding: childPadding,
-          color,
-          large,
-          "aria-expanded": expanded,
-          className: expanderListStyles["expander-list__item"],
-          handleExpanderClick: (event) => handleExpanderClick(event, `${expanderIdBase}-${index}`),
-          renderChildrenWhenClosed,
-          variant,
-          zIndex,
-          highlightText: highlightTextChild
-        });
-      }
-    }
-    return child;
-  }) });
+var isExpanderComponent = (element) => React.isValidElement(element) && element.type === Expander;
+const ExpanderList = React.forwardRef((props, ref) => {
+	const { children, childPadding = true, large, renderChildrenWhenClosed = false, color = "white", className = "", accordion = false, testId, variant, zIndex, highlightText, editMode = false } = props;
+	const [activeExpander, setActiveExpander] = useState();
+	const [latestExpander, setLatestExpander] = useState();
+	const expanderIdBase = useId();
+	const expanderListClasses = cn(expanderListStyles["expander-list"], className, {
+		[expanderListStyles[`expander-list--outline--${color}`]]: variant === "outline",
+		[expanderListStyles[`expander-list--fill`]]: variant === "fill" || variant === "fill-negative",
+		[listEditModeWrapperClassnames]: editMode
+	});
+	function handleExpanderClick(event, id) {
+		setActiveExpander((prevState) => accordion ? { [id]: !prevState?.[id] } : {
+			...prevState,
+			[id]: !prevState?.[id]
+		});
+		setLatestExpander(event.currentTarget);
+	}
+	const getExpanderId = (index) => `${expanderIdBase}-${index}`;
+	useEffect(() => {
+		if (accordion && latestExpander && !isElementInViewport(latestExpander)) latestExpander.scrollIntoView();
+	}, [accordion, latestExpander]);
+	useEffect(() => {
+		const newActiveExpander = React.Children.map(children, (child) => {
+			if (isExpanderComponent(child)) return child;
+		})?.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?.[id];
+				const highlightTextChild = child.props.highlightText || highlightText;
+				if (editMode) return /* @__PURE__ */ jsx(ListEditMode_default, {
+					color,
+					variant,
+					onDelete: child.props.onDelete,
+					children: React.cloneElement(child, {
+						id,
+						key: index,
+						expanded,
+						padding: childPadding,
+						color,
+						large,
+						"aria-expanded": false,
+						className: expanderListStyles["expander-list__item"],
+						renderChildrenWhenClosed: false,
+						variant,
+						zIndex,
+						highlightText: highlightTextChild,
+						editMode: true
+					})
+				});
+				else return React.cloneElement(child, {
+					id,
+					key: index,
+					expanded,
+					padding: childPadding,
+					color,
+					large,
+					"aria-expanded": expanded,
+					className: expanderListStyles["expander-list__item"],
+					handleExpanderClick: (event) => handleExpanderClick(event, `${expanderIdBase}-${index}`),
+					renderChildrenWhenClosed,
+					variant,
+					zIndex,
+					highlightText: highlightTextChild
+				});
+			}
+			return child;
+		})
+	});
 });
 ExpanderList.displayName = "ExpanderList";
 ExpanderList.Expander = Expander;
 Expander.displayName = "ExpanderList.Expander";
-export {
-  Expander,
-  ExpanderList,
-  ExpanderList as default
-};
-//# sourceMappingURL=index.js.map
+var ExpanderList_default = ExpanderList;
+export { Expander, ExpanderList, ExpanderList_default 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, useId, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\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  ElementHeader?: ElementHeaderType;\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\nexport type ExpanderListStatus = 'none' | 'new';\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  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\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    /** Highlights text in title and content. Override if different from list. */\n    highlightText?: string;\n    /** Displays a status on the left side: default none */\n    status?: ExpanderListStatus;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const 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 = 0,\n    highlightText,\n    status = 'none',\n    editMode = false,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered, isFocused } = usePseudoClasses(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--fill-negative--${color}`]]: 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    [expanderListStyles[`expander-list__item--new`]]: status === 'new',\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles[`expander-list-link--fill-negative--${color}`]]: 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--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles[`expander-list-link--new`]]: status === 'new',\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(expanderListStyles['expander-list-link__main-content'], {\n      [expanderListStyles['expander-list-link__main-content--expanded']]: isExpanded,\n      [expanderListStyles['expander-list-link__main-content--padding']]: padding,\n      [expanderListStyles[`expander-list-link__main-content--outline--${color}`]]: isOutline,\n      [expanderListStyles[`expander-list-link__main-content--new`]]: status === 'new',\n    });\n\n    return (\n      <div className={mainContentClasses} data-state={isExpanded ? 'open' : 'closed'}>\n        <Highlighter searchText={highlightText}>{children}</Highlighter>\n      </div>\n    );\n  };\n\n  const statusMarkerClasses = classNames(expanderListStyles['expander-list__item__status-marker'], {\n    [expanderListStyles['expander-list__item__status-marker--new']]: status === 'new',\n  });\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n      {status !== 'none' && <div className={statusMarkerClasses}></div>}\n      {editMode ? (\n        <div id={id} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderListExpander} className={expanderClasses}>\n          {renderElementHeader(title, {\n            titleHtmlMarkup,\n            isHovered: false,\n            size: large ? 'large' : 'medium',\n            parentType: 'expanderlist',\n            chevronIcon: undefined,\n            icon,\n            highlightText,\n          })}\n        </div>\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: isFocused ? zIndex + 1 : zIndex,\n          }}\n        >\n          {renderElementHeader(title, {\n            titleHtmlMarkup,\n            isHovered: isHovered || isFocused,\n            size: large ? 'large' : 'medium',\n            parentType: 'expanderlist',\n            chevronIcon: isExpanded ? ChevronUp : ChevronDown,\n            icon,\n            highlightText,\n          })}\n        </button>\n      )}\n      {!editMode && renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: unknown | 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 = 'white',\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n    highlightText,\n    editMode = false,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const expanderIdBase = useId();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className, {\n    [expanderListStyles[`expander-list--outline--${color}`]]: variant === 'outline',\n    [expanderListStyles[`expander-list--fill`]]: variant === 'fill' || variant === 'fill-negative',\n    [listEditModeWrapperClassnames]: editMode,\n  });\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 => `${expanderIdBase}-${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          const highlightTextChild: string | undefined = child.props.highlightText || highlightText;\n\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={child.props.onDelete}>\n                {React.cloneElement(child, {\n                  id,\n                  key: index,\n                  expanded,\n                  padding: childPadding,\n                  color,\n                  large,\n                  'aria-expanded': false,\n                  className: expanderListStyles['expander-list__item'],\n                  renderChildrenWhenClosed: false,\n                  variant,\n                  zIndex: zIndex,\n                  highlightText: highlightTextChild,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\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, `${expanderIdBase}-${index}`),\n              renderChildrenWhenClosed,\n              variant,\n              zIndex: zIndex,\n              highlightText: highlightTextChild,\n            });\n          }\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Expander: ExpanderType","highlightTextChild: string | undefined"],"sources":["../../../src/components/ExpanderList/ExpanderList.tsx","../../../src/components/ExpanderList/index.ts"],"sourcesContent":["import React, { useEffect, useId, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\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  ElementHeader?: ElementHeaderType;\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\nexport type ExpanderListStatus = 'none' | 'new';\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  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\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    /** Highlights text in title and content. Override if different from list. */\n    highlightText?: string;\n    /** Displays a status on the left side: default none */\n    status?: ExpanderListStatus;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const 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 = 0,\n    highlightText,\n    status = 'none',\n    editMode = false,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered, isFocused } = usePseudoClasses(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--fill-negative--${color}`]]: 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    [expanderListStyles[`expander-list__item--new`]]: status === 'new',\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles[`expander-list-link--fill-negative--${color}`]]: 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--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles[`expander-list-link--new`]]: status === 'new',\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(expanderListStyles['expander-list-link__main-content'], {\n      [expanderListStyles['expander-list-link__main-content--expanded']]: isExpanded,\n      [expanderListStyles['expander-list-link__main-content--padding']]: padding,\n      [expanderListStyles[`expander-list-link__main-content--outline--${color}`]]: isOutline,\n      [expanderListStyles[`expander-list-link__main-content--new`]]: status === 'new',\n    });\n\n    return (\n      <div className={mainContentClasses} data-state={isExpanded ? 'open' : 'closed'}>\n        <Highlighter searchText={highlightText}>{children}</Highlighter>\n      </div>\n    );\n  };\n\n  const statusMarkerClasses = classNames(expanderListStyles['expander-list__item__status-marker'], {\n    [expanderListStyles['expander-list__item__status-marker--new']]: status === 'new',\n  });\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n      {status !== 'none' && <div className={statusMarkerClasses}></div>}\n      {editMode ? (\n        <div id={id} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderListExpander} className={expanderClasses}>\n          {renderElementHeader(title, {\n            titleHtmlMarkup,\n            isHovered: false,\n            size: large ? 'large' : 'medium',\n            parentType: 'expanderlist',\n            chevronIcon: undefined,\n            icon,\n            highlightText,\n          })}\n        </div>\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: isFocused ? zIndex + 1 : zIndex,\n          }}\n        >\n          {renderElementHeader(title, {\n            titleHtmlMarkup,\n            isHovered: isHovered || isFocused,\n            size: large ? 'large' : 'medium',\n            parentType: 'expanderlist',\n            chevronIcon: isExpanded ? ChevronUp : ChevronDown,\n            icon,\n            highlightText,\n          })}\n        </button>\n      )}\n      {!editMode && renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: unknown | 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 = 'white',\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n    highlightText,\n    editMode = false,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const expanderIdBase = useId();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className, {\n    [expanderListStyles[`expander-list--outline--${color}`]]: variant === 'outline',\n    [expanderListStyles[`expander-list--fill`]]: variant === 'fill' || variant === 'fill-negative',\n    [listEditModeWrapperClassnames]: editMode,\n  });\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 => `${expanderIdBase}-${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          const highlightTextChild: string | undefined = child.props.highlightText || highlightText;\n\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={child.props.onDelete}>\n                {React.cloneElement(child, {\n                  id,\n                  key: index,\n                  expanded,\n                  padding: childPadding,\n                  color,\n                  large,\n                  'aria-expanded': false,\n                  className: expanderListStyles['expander-list__item'],\n                  renderChildrenWhenClosed: false,\n                  variant,\n                  zIndex: zIndex,\n                  highlightText: highlightTextChild,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\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, `${expanderIdBase}-${index}`),\n              renderChildrenWhenClosed,\n              variant,\n              zIndex: zIndex,\n              highlightText: highlightTextChild,\n            });\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","import ExpanderList from './ExpanderList';\nexport * from './ExpanderList';\nexport default ExpanderList;\n"],"mappings":"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"}