@helsenorge/designsystem-react 16.0.0 → 16.1.0

package/lib/UNSAFE_TableHeadCell.js

@@ -0,0 +1,182 @@
+import { Breakpoint } from "./hooks/useBreakpoint.js";
+import { isTouchDevice } from "./utils/device.js";
+import { i as TableSizes, n as SortDirection, r as TableColors, t as ResponsiveTableVariant } from "./constants3.js";
+import { n as TableContext } from "./TableContext.js";
+import { t as UNSAFE_TableHead } from "./UNSAFE_TableHead.js";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/utils.ts
+/**
+* Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint
+* @param config Konfigurasjon for responsiv oppførsel
+* @returns true om breakpoint bruker CSS
+*/
+var configUsesCss = (config) => config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.stack;
+/**
+* Lag klassenavn for CSS-config
+* @param config Konfigurasjon for responsiv oppførsel
+* @returns CSS-klassenavn
+*/
+var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "stack" ? styles[`table--${config.variant}-${config.breakpoint}`] : "";
+/**
+* Sorter konfigurasjon etter breakpoints, fra minste til største
+* @param a Konfigurasjon for responsiv oppførsel
+* @param b Konfigurasjon for responsiv oppførsel
+* @returns Sortert liste
+*/
+var sortByBreakpointsAscending = (a, b) => Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];
+/**
+* Sjekk om en konfigurasjon skal brukes for nåværende breakpoint
+* @param a Konfigurasjon for responsiv oppførsel
+* @param breakpoint Nåværende breakpoint
+* @returns true dersom config skal brukes for breakpointet
+*/
+var isValidForCurrentBreakpoint = (config, breakpoint) => Breakpoint[config.breakpoint] >= breakpoint;
+/**
+* Finn konfigurasjon for nåværende breakpoint
+* @param config Konfigurasjon for responsiv oppførsel
+* @param breakpoint Nåværende breakpoint
+* @returns Konfigurasjon for responsiv oppførsel
+*/
+var getConfigForBreakpoint = (config, breakpoint) => {
+	if (Array.isArray(config)) return [...config].sort(sortByBreakpointsAscending).find((x) => isValidForCurrentBreakpoint(x, breakpoint));
+	else if (config && isValidForCurrentBreakpoint(config, breakpoint)) return config;
+};
+/**
+* Finn konfigurasjon for nåværende breakpoint og tabellbredde
+* @param config Konfigurasjon for responsiv oppførsel
+* @param breakpoint Nåværende breakpoint
+* @param tableWidth Bredde på tabell i px
+* @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant
+*/
+var getCurrentConfig = (config, breakpoint, tableWidth, windowWidth) => {
+	const breakpointConfig = getConfigForBreakpoint(config, breakpoint);
+	const canUseHorizontalScroll = isTouchDevice();
+	const canUseCenteredOverflow = tableWidth <= windowWidth;
+	const needsFallback = !canUseCenteredOverflow && (breakpointConfig?.variant === ResponsiveTableVariant.normal || breakpointConfig?.variant === ResponsiveTableVariant.centeredoverflow);
+	if (!breakpointConfig) return;
+	if (needsFallback && breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll) return {
+		variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.normal,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	if (needsFallback && breakpointConfig.fallbackVariant !== breakpointConfig.variant) return {
+		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.normal,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow) return {
+		variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.normal,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll) return {
+		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.normal,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	return breakpointConfig;
+};
+/** Attributt som overordnede komponenter setter for å si at tabeller inni ikke skal flyte utenfor dem. */
+var OVERFLOW_BOUNDARY_SELECTOR = "[data-overflow-boundary]";
+/**
+* Finn bredden tabellen kan bruke. Innholdsbredden til nærmeste overordnede element merket med data-overflow-boundary,
+* eller skjermbredden om ingen er merket.
+* @param element Elementet det søkes fra, vanligvis tabellens overordnede element
+* @returns Tilgjengelig bredde i px
+*/
+var getAvailableWidth = (element) => {
+	const boundary = element.closest(OVERFLOW_BOUNDARY_SELECTOR);
+	if (!boundary) return document.documentElement.clientWidth || window.innerWidth;
+	const style = getComputedStyle(boundary);
+	const spacing = [
+		style.paddingLeft,
+		style.paddingRight,
+		style.borderLeftWidth,
+		style.borderRightWidth
+	].reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);
+	return Math.max(0, boundary.getBoundingClientRect().width - spacing);
+};
+/**
+* Finn klassenavn for responsiv oppførsel
+* @param config Konfigurasjon for responsiv oppførsel
+* @returns Klassenavn
+*/
+var getBreakpointClass = (config) => config && configUsesCss(config) ? mapConfigToClass(config) : void 0;
+/**
+* Finn riktig posisjon for horisontal sentrering av tabell som skal vises "centeredoverflow"
+* @param parentWidth Bredde på element som tabellen ligger i
+* @param tableWidth Bredde på tabellen
+* @returns Styling som posisjonerer tabellen riktig
+*/
+var getCenteredOverflowTableStyle = (parentWidth, tableWidth) => {
+	if (parentWidth >= tableWidth) return;
+	return { left: `${(parentWidth - tableWidth) / 2}px` };
+};
+/**
+* Create a shallow copy of an object with specific keys omitted.
+*/
+var omitProps = (obj, keys) => {
+	const clone = { ...obj };
+	for (const k of keys) delete clone[k];
+	return clone;
+};
+/**
+* Finn indeksene til kolonnene som er markert med hideBehindExpander i første rad i UNSAFE_TableHead.
+* @param children Innholdet i UNSAFE_Table
+* @returns Kolonneindekser som skjules bak expander i stack-varianten
+*/
+var getHiddenColumns = (children) => {
+	const head = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.type === UNSAFE_TableHead);
+	const headRow = React.Children.toArray(head?.props.children).find(React.isValidElement);
+	return React.Children.toArray(headRow?.props.children).flatMap((cell, index) => React.isValidElement(cell) && cell.props.hideBehindExpander ? [index] : []);
+};
+var getTextContent = (node) => {
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (React.isValidElement(node)) return getTextContent(node.props.children);
+	return React.Children.toArray(node).map(getTextContent).join("");
+};
+/**
+* Finn teksten i hver kolonne i første rad i UNSAFE_TableHead. Brukes som overskrift i cellene i stack-varianten.
+* @param children Innholdet i UNSAFE_Table
+* @returns Overskrift per kolonneindeks, tom streng for kolonner uten tekst
+*/
+var getColumnHeadingTexts = (children) => {
+	const head = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.type === UNSAFE_TableHead);
+	const headRow = React.Children.toArray(head?.props.children).find(React.isValidElement);
+	return React.Children.toArray(headRow?.props.children).map((cell) => React.isValidElement(cell) ? getTextContent(cell.props.children).trim() : "");
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableHeadCell/UNSAFE_TableHeadCell.tsx
+var UNSAFE_TableHeadCell = ({ className, children, sortDir, scope = "col", width, ...rest }) => {
+	const { color, size } = useContext(TableContext);
+	const tableHeadCellDefaultClass = classNames(styles["table__head-cell"], className, {
+		[styles["table__head-cell--transparent"]]: color === TableColors.transparent,
+		[styles["table__head-cell--compact"]]: size === TableSizes.compact
+	});
+	const getSortDirection = () => {
+		if (sortDir === void 0) return;
+		switch (sortDir) {
+			case SortDirection.asc: return "ascending";
+			case SortDirection.desc: return "descending";
+		}
+	};
+	const style = width !== void 0 ? { width } : void 0;
+	if (!children) return /* @__PURE__ */ jsx("td", {
+		className: tableHeadCellDefaultClass,
+		style
+	});
+	return /* @__PURE__ */ jsx("th", {
+		scope,
+		className: tableHeadCellDefaultClass,
+		style,
+		"aria-sort": getSortDirection(),
+		...omitProps(rest, ["hideBehindExpander"]),
+		children
+	});
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableHeadCell/index.ts
+var UNSAFE_TableHeadCell_default = UNSAFE_TableHeadCell;
+//#endregion
+export { getCenteredOverflowTableStyle as a, getHiddenColumns as c, getBreakpointClass as i, omitProps as l, UNSAFE_TableHeadCell as n, getColumnHeadingTexts as o, getAvailableWidth as r, getCurrentConfig as s, UNSAFE_TableHeadCell_default as t };
+
+//# sourceMappingURL=UNSAFE_TableHeadCell.js.map

package/lib/UNSAFE_TableHeadCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableHeadCell.js","names":[],"sources":["../src/components/UNSAFE_Table/utils.ts","../src/components/UNSAFE_Table/UNSAFE_TableHeadCell/UNSAFE_TableHeadCell.tsx","../src/components/UNSAFE_Table/UNSAFE_TableHeadCell/index.ts"],"sourcesContent":["import React from 'react';\n\nimport type { BreakpointConfig } from './UNSAFE_Table';\nimport type { Props as TableHeadCellProps } from './UNSAFE_TableHeadCell/UNSAFE_TableHeadCell';\n\nimport { ResponsiveTableVariant } from './constants';\nimport UNSAFE_TableHead from './UNSAFE_TableHead/UNSAFE_TableHead';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.stack;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'stack' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra minste til største\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsAscending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    return [...config].sort(sortByBreakpointsAscending).find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n  const needsFallback =\n    !canUseCenteredOverflow &&\n    (breakpointConfig?.variant === ResponsiveTableVariant.normal || breakpointConfig?.variant === ResponsiveTableVariant.centeredoverflow);\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (needsFallback && breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.normal,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (needsFallback && breakpointConfig.fallbackVariant !== breakpointConfig.variant) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.normal,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.normal,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.normal,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/** Attributt som overordnede komponenter setter for å si at tabeller inni ikke skal flyte utenfor dem. */\nconst OVERFLOW_BOUNDARY_SELECTOR = '[data-overflow-boundary]';\n\n/**\n * Finn bredden tabellen kan bruke. Innholdsbredden til nærmeste overordnede element merket med data-overflow-boundary,\n * eller skjermbredden om ingen er merket.\n * @param element Elementet det søkes fra, vanligvis tabellens overordnede element\n * @returns Tilgjengelig bredde i px\n */\nexport const getAvailableWidth = (element: HTMLElement): number => {\n  const boundary = element.closest<HTMLElement>(OVERFLOW_BOUNDARY_SELECTOR);\n  if (!boundary) {\n    return document.documentElement.clientWidth || window.innerWidth;\n  }\n  const style = getComputedStyle(boundary);\n  const spacing = [style.paddingLeft, style.paddingRight, style.borderLeftWidth, style.borderRightWidth].reduce(\n    (total, value) => total + (Number.parseFloat(value) || 0),\n    0\n  );\n  return Math.max(0, boundary.getBoundingClientRect().width - spacing);\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  return { left: `${(parentWidth - tableWidth) / 2}px` };\n};\n\n/**\n * Create a shallow copy of an object with specific keys omitted.\n */\nexport const omitProps = <T extends Record<PropertyKey, unknown>>(obj: T, keys: Array<keyof T>): Partial<T> => {\n  const clone: Partial<T> = { ...obj };\n  for (const k of keys) {\n    delete clone[k];\n  }\n  return clone;\n};\n\n/**\n * Finn indeksene til kolonnene som er markert med hideBehindExpander i første rad i UNSAFE_TableHead.\n * @param children Innholdet i UNSAFE_Table\n * @returns Kolonneindekser som skjules bak expander i stack-varianten\n */\nexport const getHiddenColumns = (children: React.ReactNode): number[] => {\n  const head = React.Children.toArray(children).find(\n    (child): child is React.ReactElement<{ children?: React.ReactNode }> => React.isValidElement(child) && child.type === UNSAFE_TableHead\n  );\n  const headRow = React.Children.toArray(head?.props.children).find(React.isValidElement) as\n    React.ReactElement<{ children?: React.ReactNode }> | undefined;\n\n  return React.Children.toArray(headRow?.props.children).flatMap((cell, index) =>\n    React.isValidElement<TableHeadCellProps>(cell) && cell.props.hideBehindExpander ? [index] : []\n  );\n};\n\nconst getTextContent = (node: React.ReactNode): string => {\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node);\n  }\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getTextContent(node.props.children);\n  }\n  return React.Children.toArray(node).map(getTextContent).join('');\n};\n\n/**\n * Finn teksten i hver kolonne i første rad i UNSAFE_TableHead. Brukes som overskrift i cellene i stack-varianten.\n * @param children Innholdet i UNSAFE_Table\n * @returns Overskrift per kolonneindeks, tom streng for kolonner uten tekst\n */\nexport const getColumnHeadingTexts = (children: React.ReactNode): string[] => {\n  const head = React.Children.toArray(children).find(\n    (child): child is React.ReactElement<{ children?: React.ReactNode }> => React.isValidElement(child) && child.type === UNSAFE_TableHead\n  );\n  const headRow = React.Children.toArray(head?.props.children).find(React.isValidElement) as\n    React.ReactElement<{ children?: React.ReactNode }> | undefined;\n\n  return React.Children.toArray(headRow?.props.children).map(cell =>\n    React.isValidElement<TableHeadCellProps>(cell) ? getTextContent(cell.props.children).trim() : ''\n  );\n};\n","import { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TableSizes, SortDirection, TableColors } from '../constants';\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\nimport { omitProps } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** Sets the width of the column, e.g. '10rem', '25%' or a number of pixels. Ignored in the stack variant. */\n  width?: string | number;\n  /** In the stack variant, hides the cells of this column and shows the column heading + content in an automatically rendered expanded row. */\n  hideBehindExpander?: boolean;\n}\n\nexport const UNSAFE_TableHeadCell: React.FC<Props> = ({ className, children, sortDir, scope = 'col', width, ...rest }) => {\n  const { color, size } = useContext(TableContext);\n  const tableHeadCellDefaultClass = classNames(styles['table__head-cell'], className, {\n    [styles['table__head-cell--transparent']]: color === TableColors.transparent,\n    [styles['table__head-cell--compact']]: size === TableSizes.compact,\n  });\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    if (sortDir === undefined) {\n      return undefined;\n    }\n\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  const style = width !== undefined ? { width } : undefined;\n\n  if (!children) {\n    return <td className={tableHeadCellDefaultClass} style={style} />;\n  }\n\n  return (\n    <th\n      scope={scope}\n      className={tableHeadCellDefaultClass}\n      style={style}\n      aria-sort={getSortDirection()}\n      {...(omitProps(rest, ['hideBehindExpander']) as React.ComponentPropsWithoutRef<'th'>)}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport default UNSAFE_TableHeadCell;\n","import UNSAFE_TableHeadCell from './UNSAFE_TableHeadCell';\nexport * from './UNSAFE_TableHeadCell';\nexport default UNSAFE_TableHeadCell;\n"],"mappings":"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"}

package/lib/UNSAFE_TableRow.js

@@ -0,0 +1,130 @@
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { t as Icon_default } from "./Icon.js";
+import { t as Button_default } from "./Button.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import { i as TableSizes, r as TableColors, t as ResponsiveTableVariant } from "./constants3.js";
+import { n as TableContext, t as CellHeadingContext } from "./TableContext.js";
+import { t as UNSAFE_TableCell } from "./UNSAFE_TableCell.js";
+import { t as UNSAFE_TableDetail } from "./UNSAFE_TableDetail.js";
+import { t as UNSAFE_TableExpandedRow } from "./UNSAFE_TableExpandedRow.js";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableExpanderCell/UNSAFE_TableExpanderCellMobile.tsx
+var UNSAFE_TableExpanderCellMobile = ({ expanded, onClick, expandableRowId }) => {
+	const { size, resources } = useContext(TableContext);
+	const cellClass = classNames(styles.table__cell, styles["table__expander-cell-mobile"], { [styles["table__cell--compact"]]: size === TableSizes.compact });
+	return /* @__PURE__ */ jsx("td", {
+		className: cellClass,
+		children: /* @__PURE__ */ jsxs(Button_default, {
+			"aria-expanded": expanded,
+			"aria-controls": expandableRowId,
+			variant: "borderless",
+			onClick,
+			wrapperClassName: styles["table__expander-trigger"],
+			className: styles["table__expander-trigger__content"],
+			children: [
+				/* @__PURE__ */ jsx(Icon_default, { svgIcon: expanded ? ChevronUp : ChevronDown }),
+				" ",
+				expanded ? resources.collapseRowButton : resources.expandRowButton
+			]
+		})
+	});
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TablePopMenuCell/UNSAFE_TablePopMenuCell.tsx
+var UNSAFE_TablePopMenuCell = ({ children }) => {
+	const { variant, size } = useContext(TableContext);
+	const cellClass = classNames(styles["table__cell"], styles["table__cell-pop-menu"], { [styles["table__cell--compact"]]: size === TableSizes.compact });
+	const { labelText, openButtonAriaLabel, closeButtonAriaLabel } = children.props;
+	const hideLabelText = labelText !== void 0 && variant !== ResponsiveTableVariant.stack;
+	return /* @__PURE__ */ jsx("td", {
+		className: cellClass,
+		children: React.cloneElement(children, {
+			popMenuClassName: classNames(styles["table__pop-menu"], children.props.popMenuClassName),
+			triggerClassName: classNames(styles["table__pop-menu__trigger"], children.props.triggerClassName),
+			triggerContentClassName: classNames(styles["table__pop-menu__content"], children.props.triggerContentClassName),
+			...hideLabelText && {
+				labelText: void 0,
+				openButtonAriaLabel: openButtonAriaLabel ?? labelText,
+				closeButtonAriaLabel: closeButtonAriaLabel ?? labelText
+			}
+		})
+	});
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableRow/UNSAFE_TableRow.tsx
+var UNSAFE_TableRow = ({ expandedContent, expanded, expandableRowId, onClick, className, children, popMenu, ...rest }) => {
+	const { color, size, hiddenColumns, headingTexts, variant, resources } = useContext(TableContext);
+	const expandable = expandedContent ? true : hiddenColumns.length > 0 ? "stack" : void 0;
+	const isExpandedVisible = !!expanded && (expandable !== "stack" || variant === ResponsiveTableVariant.stack);
+	const { refObject, isHovered, isActive } = usePseudoClasses();
+	const tableRowClass = classNames(styles["table__row"], {
+		[styles["table__row--transparent"]]: color === TableColors.transparent,
+		[styles["table__row--expandable"]]: expandable,
+		[styles["table__row--expanded"]]: isExpandedVisible
+	}, className);
+	const expanderCellClass = classNames(styles["table__cell"], styles["table__cell-expander"], { [styles["table__cell--compact"]]: size === TableSizes.compact });
+	const indexOffset = expandable === true ? 1 : 0;
+	const isHidden = (index) => hiddenColumns.includes(index + indexOffset);
+	const withHeading = (child, index) => React.isValidElement(child) && child.type === UNSAFE_TableCell ? /* @__PURE__ */ jsx(CellHeadingContext.Provider, {
+		value: headingTexts[index + indexOffset] ?? "",
+		children: child
+	}, child.key) : child;
+	const childArray = React.Children.toArray(children);
+	const cells = childArray.map((child, index) => withHeading(React.isValidElement(child) && isHidden(index) ? React.cloneElement(child, { className: classNames(child.props.className, styles["table__cell--behind-expander"]) }) : child, index));
+	const hiddenCells = childArray.flatMap((child, index) => React.isValidElement(child) && isHidden(index) ? [{
+		cell: child,
+		heading: headingTexts[index + indexOffset] ?? ""
+	}] : []);
+	const row = /* @__PURE__ */ jsxs("tr", {
+		className: tableRowClass,
+		...rest,
+		ref: refObject,
+		children: [
+			expandable === true && /* @__PURE__ */ jsx("td", {
+				className: expanderCellClass,
+				children: /* @__PURE__ */ jsx(Button_default, {
+					variant: "borderless",
+					wrapperClassName: styles["table__expander-button"],
+					className: styles["table__expander-button__content"],
+					"aria-expanded": expanded,
+					"aria-controls": expandableRowId,
+					ariaLabel: expanded ? resources.collapseRowButton : resources.expandRowButton,
+					onClick,
+					children: /* @__PURE__ */ jsx(Icon_default, {
+						color: isActive ? "var(--color-action-graphics-dark-active)" : isHovered ? "var(--color-action-graphics-dark-hover)" : "var(--color-action-graphics-dark-normal)",
+						svgIcon: expanded ? ChevronUp : ChevronDown
+					})
+				})
+			}),
+			cells,
+			popMenu && /* @__PURE__ */ jsx(UNSAFE_TablePopMenuCell, { children: popMenu }),
+			expandable && /* @__PURE__ */ jsx(UNSAFE_TableExpanderCellMobile, {
+				expanded,
+				onClick,
+				expandableRowId
+			})
+		]
+	}, "row");
+	if (!(!!expandable && (!!expandedContent || hiddenCells.length > 0))) return row;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [row, /* @__PURE__ */ jsxs(UNSAFE_TableExpandedRow, {
+		stackOnly: !expandedContent,
+		id: expandableRowId,
+		expanded: !!expanded,
+		toggleClick: () => onClick?.(),
+		children: [hiddenCells.map(({ cell, heading }, index) => /* @__PURE__ */ jsx(UNSAFE_TableDetail, {
+			headingText: heading,
+			children: cell.props.children
+		}, cell.key ?? index)), expandedContent]
+	}, "expanded-row")] });
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableRow/index.ts
+var UNSAFE_TableRow_default = UNSAFE_TableRow;
+//#endregion
+export { UNSAFE_TableRow as n, UNSAFE_TableRow_default as t };
+
+//# sourceMappingURL=UNSAFE_TableRow.js.map

package/lib/UNSAFE_TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableRow.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableExpanderCell/UNSAFE_TableExpanderCellMobile.tsx","../src/components/UNSAFE_Table/UNSAFE_TablePopMenuCell/UNSAFE_TablePopMenuCell.tsx","../src/components/UNSAFE_Table/UNSAFE_TableRow/UNSAFE_TableRow.tsx","../src/components/UNSAFE_Table/UNSAFE_TableRow/index.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { Props } from '../UNSAFE_TableRow/UNSAFE_TableRow';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { TableSizes } from '../constants';\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\ntype UNSAFE_TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'expandableRowId'>;\n\nconst UNSAFE_TableExpanderCellMobile: React.FC<UNSAFE_TableExpanderCellMobileProps> = ({ expanded, onClick, expandableRowId }) => {\n  const { size, resources } = useContext(TableContext);\n  const cellClass = classNames(styles.table__cell, styles['table__expander-cell-mobile'], {\n    [styles['table__cell--compact']]: size === TableSizes.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        variant=\"borderless\"\n        onClick={onClick}\n        wrapperClassName={styles['table__expander-trigger']}\n        className={styles['table__expander-trigger__content']}\n      >\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? resources.collapseRowButton : resources.expandRowButton}\n      </Button>\n    </td>\n  );\n};\n\nexport default UNSAFE_TableExpanderCellMobile;\n","import React, { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PopMenuProps } from '../../PopMenu';\n\nimport { ResponsiveTableVariant, TableSizes } from '../constants';\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface UNSAFE_TablePopMenuCellProps {\n  /** PopMenu shown inside the cell. Fills the entire cell. */\n  children: React.ReactElement<PopMenuProps>;\n}\n\nconst UNSAFE_TablePopMenuCell: React.FC<UNSAFE_TablePopMenuCellProps> = ({ children }) => {\n  const { variant, size } = useContext(TableContext);\n  const cellClass = classNames(styles['table__cell'], styles['table__cell-pop-menu'], {\n    [styles['table__cell--compact']]: size === TableSizes.compact,\n  });\n\n  const { labelText, openButtonAriaLabel, closeButtonAriaLabel } = children.props;\n  // Kun stack-varianten har plass til synlig ledetekst; ellers blir den skjult tekst for skjermlesere\n  const hideLabelText = labelText !== undefined && variant !== ResponsiveTableVariant.stack;\n\n  return (\n    <td className={cellClass}>\n      {React.cloneElement(children, {\n        popMenuClassName: classNames(styles['table__pop-menu'], children.props.popMenuClassName),\n        triggerClassName: classNames(styles['table__pop-menu__trigger'], children.props.triggerClassName),\n        triggerContentClassName: classNames(styles['table__pop-menu__content'], children.props.triggerContentClassName),\n        ...(hideLabelText && {\n          labelText: undefined,\n          openButtonAriaLabel: openButtonAriaLabel ?? labelText,\n          closeButtonAriaLabel: closeButtonAriaLabel ?? labelText,\n        }),\n      })}\n    </td>\n  );\n};\n\nexport default UNSAFE_TablePopMenuCell;\n","import React, { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PopMenuProps } from '../../PopMenu';\nimport type { Props as TableCellProps } from '../UNSAFE_TableCell/UNSAFE_TableCell';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ResponsiveTableVariant, TableColors, TableSizes } from '../constants';\nimport styles from '../styles.module.scss';\nimport { CellHeadingContext, TableContext } from '../TableContext';\nimport UNSAFE_TableCell from '../UNSAFE_TableCell/UNSAFE_TableCell';\nimport UNSAFE_TableDetail from '../UNSAFE_TableDetail/UNSAFE_TableDetail';\nimport UNSAFE_TableExpandedRow from '../UNSAFE_TableExpandedRow/UNSAFE_TableExpandedRow';\nimport UNSAFE_TableExpanderCellMobile from '../UNSAFE_TableExpanderCell/UNSAFE_TableExpanderCellMobile';\nimport UNSAFE_TablePopMenuCell from '../UNSAFE_TablePopMenuCell/UNSAFE_TablePopMenuCell';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Content to be rendered in an expandable row. Make sure to add an empty TableHeadCell to the beginning of the Table. This content renders below the column content with hideBehindExpander set in the stack variant. */\n  expandedContent?: React.ReactNode;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** Id of the expanded row this row controls. For use with aria-controls on the expander button. */\n  expandableRowId?: string;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** PopMenu rendered in an extra cell as the last cell in the row. Fills the entire cell. Outside the stack variant labelText is hidden and used as aria-label instead. */\n  popMenu?: React.ReactElement<PopMenuProps>;\n}\n\nexport const UNSAFE_TableRow: React.FC<Props> = ({\n  expandedContent,\n  expanded,\n  expandableRowId,\n  onClick,\n  className,\n  children,\n  popMenu,\n  ...rest\n}) => {\n  const { color, size, hiddenColumns, headingTexts, variant, resources } = useContext(TableContext);\n  const expandable = expandedContent ? true : hiddenColumns.length > 0 ? 'stack' : undefined;\n  const isExpandedVisible = !!expanded && (expandable !== 'stack' || variant === ResponsiveTableVariant.stack);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLTableRowElement>();\n  const tableRowClass = classNames(\n    styles['table__row'],\n    {\n      [styles['table__row--transparent']]: color === TableColors.transparent,\n      [styles['table__row--expandable']]: expandable,\n      [styles['table__row--expanded']]: isExpandedVisible,\n    },\n    className\n  );\n\n  const expanderCellClass = classNames(styles['table__cell'], styles['table__cell-expander'], {\n    [styles['table__cell--compact']]: size === TableSizes.compact,\n  });\n\n  // Tar hensyn til en hidden expander cell for visning i normal variant\n  const indexOffset = expandable === true ? 1 : 0;\n  const isHidden = (index: number): boolean => hiddenColumns.includes(index + indexOffset);\n\n  // Gir hver celle teksten fra kolonnens headText, som vises foran innholdet i stack-varianten\n  const withHeading = (child: React.ReactNode, index: number): React.ReactNode =>\n    React.isValidElement(child) && child.type === UNSAFE_TableCell ? (\n      <CellHeadingContext.Provider key={child.key} value={headingTexts[index + indexOffset] ?? ''}>\n        {child}\n      </CellHeadingContext.Provider>\n    ) : (\n      child\n    );\n\n  const childArray = React.Children.toArray(children);\n  const cells = childArray.map((child, index) =>\n    withHeading(\n      React.isValidElement<TableCellProps>(child) && isHidden(index)\n        ? React.cloneElement(child, { className: classNames(child.props.className, styles['table__cell--behind-expander']) })\n        : child,\n      index\n    )\n  );\n  const hiddenCells = childArray.flatMap((child, index) =>\n    React.isValidElement<TableCellProps>(child) && isHidden(index)\n      ? [{ cell: child, heading: headingTexts[index + indexOffset] ?? '' }]\n      : []\n  );\n\n  const row = (\n    <tr key=\"row\" className={tableRowClass} {...rest} ref={refObject}>\n      {expandable === true && (\n        <td className={expanderCellClass}>\n          <Button\n            variant=\"borderless\"\n            wrapperClassName={styles['table__expander-button']}\n            className={styles['table__expander-button__content']}\n            aria-expanded={expanded}\n            aria-controls={expandableRowId}\n            ariaLabel={expanded ? resources.collapseRowButton : resources.expandRowButton}\n            onClick={onClick}\n          >\n            <Icon\n              color={\n                isActive\n                  ? 'var(--color-action-graphics-dark-active)'\n                  : isHovered\n                    ? 'var(--color-action-graphics-dark-hover)'\n                    : 'var(--color-action-graphics-dark-normal)'\n              }\n              svgIcon={expanded ? ChevronUp : ChevronDown}\n            />\n          </Button>\n        </td>\n      )}\n      {cells}\n      {popMenu && <UNSAFE_TablePopMenuCell>{popMenu}</UNSAFE_TablePopMenuCell>}\n      {expandable && <UNSAFE_TableExpanderCellMobile expanded={expanded} onClick={onClick} expandableRowId={expandableRowId} />}\n    </tr>\n  );\n\n  const hasAutomaticExpandedRow = !!expandable && (!!expandedContent || hiddenCells.length > 0);\n  if (!hasAutomaticExpandedRow) {\n    return row;\n  }\n\n  return (\n    <>\n      {row}\n      <UNSAFE_TableExpandedRow\n        key=\"expanded-row\"\n        stackOnly={!expandedContent}\n        id={expandableRowId}\n        expanded={!!expanded}\n        toggleClick={(): void => onClick?.()}\n      >\n        {hiddenCells.map(({ cell, heading }, index) => (\n          <UNSAFE_TableDetail key={cell.key ?? index} headingText={heading}>\n            {cell.props.children}\n          </UNSAFE_TableDetail>\n        ))}\n        {expandedContent}\n      </UNSAFE_TableExpandedRow>\n    </>\n  );\n};\n\nexport default UNSAFE_TableRow;\n","import UNSAFE_TableRow from './UNSAFE_TableRow';\nexport * from './UNSAFE_TableRow';\nexport default UNSAFE_TableRow;\n"],"mappings":"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"}

package/lib/__mocks__/ResizeObserver.js

@@ -4,7 +4,10 @@ var ResizeObserver = class {
 	unobserve() {}
 	disconnect() {}
 };
-Object.defineProperty(window, "ResizeObserver", { value: ResizeObserver });
+Object.defineProperty(window, "ResizeObserver", {
+	value: ResizeObserver,
+	configurable: true
+});
 //#endregion
 export { ResizeObserver as default };
 

package/lib/__mocks__/ResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeObserver.js","names":[],"sources":["../../src/__mocks__/ResizeObserver.ts"],"sourcesContent":["class ResizeObserver {\n  observe(): void {\n    // do nothing\n  }\n  unobserve(): void {\n    // do nothing\n  }\n  disconnect(): void {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'ResizeObserver', {\n  value: ResizeObserver,\n});\n\nexport default ResizeObserver;\n"],"mappings":";AAAA,IAAM,iBAAN,MAAqB;CACnB,UAAgB,CAEhB;CACA,YAAkB,CAElB;CACA,aAAmB,CAEnB;AACF;AAEA,OAAO,eAAe,QAAQ,kBAAkB,EAC9C,OAAO,eACT,CAAC"}
+{"version":3,"file":"ResizeObserver.js","names":[],"sources":["../../src/__mocks__/ResizeObserver.ts"],"sourcesContent":["class ResizeObserver {\n  observe(): void {\n    // do nothing\n  }\n  unobserve(): void {\n    // do nothing\n  }\n  disconnect(): void {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'ResizeObserver', {\n  value: ResizeObserver,\n  configurable: true,\n});\n\nexport default ResizeObserver;\n"],"mappings":";AAAA,IAAM,iBAAN,MAAqB;CACnB,UAAgB,CAEhB;CACA,YAAkB,CAElB;CACA,aAAmB,CAEnB;AACF;AAEA,OAAO,eAAe,QAAQ,kBAAkB;CAC9C,OAAO;CACP,cAAc;AAChB,CAAC"}

package/lib/components/Duolist/styles.module.scss

@@ -117,13 +117,9 @@
     }
   }
 
-  &--no-padding#{&}--collapsed,
-  &--no-padding#{&}--not-collapsed {
-    dt,
-    dd {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
+  &--no-padding {
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   &--non-formatted {

package/lib/components/ExpanderHierarchy/index.js

@@ -69,6 +69,7 @@ var Expander = ({ title, htmlMarkup = "h2", level = 1, print, expanded = false,
 			children: title
 		}), /* @__PURE__ */ jsx("div", {
 			className: contentClasses,
+			"data-overflow-boundary": true,
 			children: React.Children.map(children, (child) => isComponent(child, ExpanderHierarchy) ? React.cloneElement(child, {
 				htmlMarkup: getHeadingTag(htmlMarkup),
 				level: level + 1,

package/lib/components/ExpanderHierarchy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx","../../../src/components/ExpanderHierarchy/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={refObject}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** ref that is placed on the li element */\n  ref?: React.RefObject<HTMLLIElement | null>;\n}\n\nexport type ExpanderType = typeof Expander;\n\nconst Expander: React.FC<ExpanderProps> = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n  className,\n  ref,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    (level === 1 || level === 2) && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={classNames(styles.expander, className)} ref={ref}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderProps, ExpanderType } from './Expander';\nimport type { HeadingTags } from './utils';\n\nimport Expander from './Expander';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    level === 2 && styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n","import ExpanderHierarchy from './ExpanderHierarchy';\nexport * from './ExpanderHierarchy';\nexport * from './utils';\nexport default ExpanderHierarchy;\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAM,kBAAiD,EAAE,aAAa,MAAM,QAAQ,GAAG,OAAO,UAAU,UAAU,UAAU,aAAa;CACvI,MAAM,EAAE,WAAW,cAAc,iBAAoC;CACrE,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,QAAQ;CAEhE,MAAM,oBAA0B;EAC9B,cAAc,CAAC,UAAU;CAC3B;CAEA,MAAM,YAAY;CAElB,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,KAAK,OAAO,kCACpB,SAAS,OAAO,0BAClB;CAEA,MAAM,eAAe,WACnB,OAAO,kBACN,UAAU,KAAK,UAAU,KAAK,UAAU,MAAM,OAAO,oBAAoB,UAC1E,QAAQ,KAAK,OAAO,iCACpB,cAAc,OAAO,8BACrB,SAAS,OAAO,yBAClB;CAEA,MAAM,cAAc,WAClB,OAAO,gBACP,QAAQ,KAAK,OAAO,gCACpB,QAAQ,KAAK,OAAO,8BACtB;CAEA,OACE,oBAAC,WAAD;EAAW,WAAW;EACpB,UAAA,qBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAa;GACb,oBAAkB,YAAY;GAPhC,UAAA,CASG,UACD,oBAAC,cAAD;IAAM,SAAS,aAAa,YAAY;IAAwB;IAAW,WAAW;IAAa,MAAM,SAAS;GAAS,CAAA,CACrH;;CACC,CAAA;AAEf;;;AChEA,IAAa,iBAAiB,eAA0C;CACtE,QAAQ,YAAR;EACE,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,SACE,OAAO;CACX;AACF;;;ACeA,IAAM,YAAqC,EACzC,OACA,aAAa,MACb,QAAQ,GACR,OACA,WAAW,OACX,UACA,UACA,QACA,WACA,UACmB;CACnB,MAAM,iBAAiB,WACrB,OAAO,oBACN,UAAU,KAAK,UAAU,MAAM,OAAO,sBAAsB,UAC7D,QAAQ,KAAK,OAAO,iCACtB;CAEA,OACE,qBAAC,MAAD;EAAI,WAAW,WAAW,OAAO,UAAU,SAAS;EAAQ;EAA5D,UAAA,CACE,oBAAC,gBAAD;GAA4B;GAAmB;GAAc;GAAiB;GAAoB;GAAkB;GACjH,UAAA;EACa,CAAA,GAChB,oBAAC,OAAD;GAAK,WAAW;GACb,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,YAAoC,OAAO,iBAAiB,IACxD,MAAM,aAAa,OAAO;IAAE,YAAY,cAAc,UAAU;IAAG,OAAO,QAAQ;IAAG;GAAM,CAAC,IAC5F,KACN;EACG,CAAA,CACH;;AAER;;;AChCA,IAAM,qBAAgD,EACpD,aAAa,MACb,QAAQ,GACR,OACA,UACA,aAC4B;CAC5B,MAAM,cAAc,WAClB,SAAO,mBACP,UAAU,KAAK,SAAO,sBAAsB,UAC5C,QAAQ,KAAK,SAAO,iCACtB;CAEA,OACE,oBAAC,MAAD;EAAI,WAAW;EAAa,eAAa;EAAQ,oBAAkB,YAAY;EAC5E,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,YAA2B,OAAO,QAAQ,IAAI,MAAM,aAAa,OAAO;GAAE;GAAY;GAAO;EAAM,CAAC,IAAI,KAC1G;CACE,CAAA;AAER;AAEA,kBAAkB,WAAW;;;ACnD7B,IAAA,4BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx","../../../src/components/ExpanderHierarchy/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={refObject}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** ref that is placed on the li element */\n  ref?: React.RefObject<HTMLLIElement | null>;\n}\n\nexport type ExpanderType = typeof Expander;\n\nconst Expander: React.FC<ExpanderProps> = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n  className,\n  ref,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    (level === 1 || level === 2) && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={classNames(styles.expander, className)} ref={ref}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses} data-overflow-boundary>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderProps, ExpanderType } from './Expander';\nimport type { HeadingTags } from './utils';\n\nimport Expander from './Expander';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    level === 2 && styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n","import ExpanderHierarchy from './ExpanderHierarchy';\nexport * from './ExpanderHierarchy';\nexport * from './utils';\nexport default ExpanderHierarchy;\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAM,kBAAiD,EAAE,aAAa,MAAM,QAAQ,GAAG,OAAO,UAAU,UAAU,UAAU,aAAa;CACvI,MAAM,EAAE,WAAW,cAAc,iBAAoC;CACrE,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,QAAQ;CAEhE,MAAM,oBAA0B;EAC9B,cAAc,CAAC,UAAU;CAC3B;CAEA,MAAM,YAAY;CAElB,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,KAAK,OAAO,kCACpB,SAAS,OAAO,0BAClB;CAEA,MAAM,eAAe,WACnB,OAAO,kBACN,UAAU,KAAK,UAAU,KAAK,UAAU,MAAM,OAAO,oBAAoB,UAC1E,QAAQ,KAAK,OAAO,iCACpB,cAAc,OAAO,8BACrB,SAAS,OAAO,yBAClB;CAEA,MAAM,cAAc,WAClB,OAAO,gBACP,QAAQ,KAAK,OAAO,gCACpB,QAAQ,KAAK,OAAO,8BACtB;CAEA,OACE,oBAAC,WAAD;EAAW,WAAW;EACpB,UAAA,qBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAa;GACb,oBAAkB,YAAY;GAPhC,UAAA,CASG,UACD,oBAAC,cAAD;IAAM,SAAS,aAAa,YAAY;IAAwB;IAAW,WAAW;IAAa,MAAM,SAAS;GAAS,CAAA,CACrH;;CACC,CAAA;AAEf;;;AChEA,IAAa,iBAAiB,eAA0C;CACtE,QAAQ,YAAR;EACE,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,SACE,OAAO;CACX;AACF;;;ACeA,IAAM,YAAqC,EACzC,OACA,aAAa,MACb,QAAQ,GACR,OACA,WAAW,OACX,UACA,UACA,QACA,WACA,UACmB;CACnB,MAAM,iBAAiB,WACrB,OAAO,oBACN,UAAU,KAAK,UAAU,MAAM,OAAO,sBAAsB,UAC7D,QAAQ,KAAK,OAAO,iCACtB;CAEA,OACE,qBAAC,MAAD;EAAI,WAAW,WAAW,OAAO,UAAU,SAAS;EAAQ;EAA5D,UAAA,CACE,oBAAC,gBAAD;GAA4B;GAAmB;GAAc;GAAiB;GAAoB;GAAkB;GACjH,UAAA;EACa,CAAA,GAChB,oBAAC,OAAD;GAAK,WAAW;GAAgB,0BAAA;GAC7B,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,YAAoC,OAAO,iBAAiB,IACxD,MAAM,aAAa,OAAO;IAAE,YAAY,cAAc,UAAU;IAAG,OAAO,QAAQ;IAAG;GAAM,CAAC,IAC5F,KACN;EACG,CAAA,CACH;;AAER;;;AChCA,IAAM,qBAAgD,EACpD,aAAa,MACb,QAAQ,GACR,OACA,UACA,aAC4B;CAC5B,MAAM,cAAc,WAClB,SAAO,mBACP,UAAU,KAAK,SAAO,sBAAsB,UAC5C,QAAQ,KAAK,SAAO,iCACtB;CAEA,OACE,oBAAC,MAAD;EAAI,WAAW;EAAa,eAAa;EAAQ,oBAAkB,YAAY;EAC5E,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,YAA2B,OAAO,QAAQ,IAAI,MAAM,aAAa,OAAO;GAAE;GAAY;GAAO;EAAM,CAAC,IAAI,KAC1G;CACE,CAAA;AAER;AAEA,kBAAkB,WAAW;;;ACnD7B,IAAA,4BAAe"}

package/lib/components/ExpanderList/index.js

@@ -56,6 +56,7 @@ var Expander = (props) => {
 		return /* @__PURE__ */ jsx("div", {
 			className: mainContentClasses,
 			"data-state": isExpanded ? "open" : "closed",
+			"data-overflow-boundary": true,
 			children: /* @__PURE__ */ jsx(Highlighter_default, {
 				searchText: highlightText,
 				children

package/lib/components/ExpanderList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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 type { PaletteNames } from '../../theme/palette';\nimport type { ElementHeaderType } from '../ElementHeader/ElementHeader';\nimport type { ListEditModeItemProps } from '../ListEditMode';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ListEditModeItem from '../ListEditMode';\nimport { listEditModeWrapperClassnames } from '../ListEditMode/constants';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.FC<ExpanderProps> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.FC<ExpanderListProps> {\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  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\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: React.ReactElement | 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    /** Ref passed to the li element */\n    ref?: React.Ref<HTMLLIElement | null>;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Expander: ExpanderType = (props: ExpanderProps) => {\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    ref,\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    <>\n      {editMode ? (\n        <div className={itemClasses}>\n          {status !== 'none' && <div className={statusMarkerClasses}></div>}\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' : 'normal',\n              parentType: 'expanderlist',\n              chevronIcon: undefined,\n              icon,\n              highlightText,\n            })}\n          </div>\n        </div>\n      ) : (\n        <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n          {status !== 'none' && <div className={statusMarkerClasses}></div>}\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' : 'normal',\n              parentType: 'expanderlist',\n              chevronIcon: isExpanded ? ChevronUp : ChevronDown,\n              icon,\n              highlightText,\n            })}\n          </button>\n          {renderContent()}\n        </li>\n      )}\n    </>\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\nconst ExpanderListComponent: React.FC<ExpanderListProps> = (props: ExpanderListProps) => {\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    ref,\n  } = props;\n  const [prevChildren, setPrevChildren] = useState(children);\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  const getExpanderStateFromChildren = (): ActiveExpander | undefined => {\n    return 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\n  if (children !== prevChildren) {\n    setPrevChildren(children);\n    const newActiveExpander = getExpanderStateFromChildren();\n    if (newActiveExpander) {\n      setActiveExpander({ ...activeExpander, ...newActiveExpander });\n    }\n  }\n\n  if (activeExpander === undefined) {\n    const initialState = getExpanderStateFromChildren();\n    if (initialState && Object.keys(initialState).length > 0) {\n      setActiveExpander(initialState);\n    }\n  }\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          const childProps = child.props;\n          const sharedProps = {\n            padding: childProps.padding ?? childPadding,\n            color: childProps.color ?? color,\n            large: childProps.large ?? large,\n            className: classNames(expanderListStyles['expander-list__item'], childProps.className),\n            variant: childProps.variant ?? variant,\n            zIndex: childProps.zIndex ?? zIndex,\n            highlightText: highlightTextChild,\n          };\n\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={childProps.onDelete}>\n                {React.cloneElement(child, {\n                  ...sharedProps,\n                  id,\n                  key: index,\n                  expanded,\n                  'aria-expanded': false,\n                  renderChildrenWhenClosed: false,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n              ...sharedProps,\n              id,\n              key: index,\n              expanded,\n              'aria-expanded': expanded,\n              handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => {\n                childProps.handleExpanderClick?.(event);\n                handleExpanderClick(event, id);\n              },\n              renderChildrenWhenClosed: childProps.renderChildrenWhenClosed ?? renderChildrenWhenClosed,\n            });\n          }\n        }\n        return child;\n      })}\n    </ul>\n  );\n};\n\nconst ExpanderList = ExpanderListComponent 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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"}
+{"version":3,"file":"index.js","names":[],"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 type { PaletteNames } from '../../theme/palette';\nimport type { ElementHeaderType } from '../ElementHeader/ElementHeader';\nimport type { ListEditModeItemProps } from '../ListEditMode';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ListEditModeItem from '../ListEditMode';\nimport { listEditModeWrapperClassnames } from '../ListEditMode/constants';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.FC<ExpanderProps> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.FC<ExpanderListProps> {\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  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\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: React.ReactElement | 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    /** Ref passed to the li element */\n    ref?: React.Ref<HTMLLIElement | null>;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Expander: ExpanderType = (props: ExpanderProps) => {\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    ref,\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'} data-overflow-boundary>\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    <>\n      {editMode ? (\n        <div className={itemClasses}>\n          {status !== 'none' && <div className={statusMarkerClasses}></div>}\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' : 'normal',\n              parentType: 'expanderlist',\n              chevronIcon: undefined,\n              icon,\n              highlightText,\n            })}\n          </div>\n        </div>\n      ) : (\n        <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n          {status !== 'none' && <div className={statusMarkerClasses}></div>}\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' : 'normal',\n              parentType: 'expanderlist',\n              chevronIcon: isExpanded ? ChevronUp : ChevronDown,\n              icon,\n              highlightText,\n            })}\n          </button>\n          {renderContent()}\n        </li>\n      )}\n    </>\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\nconst ExpanderListComponent: React.FC<ExpanderListProps> = (props: ExpanderListProps) => {\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    ref,\n  } = props;\n  const [prevChildren, setPrevChildren] = useState(children);\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  const getExpanderStateFromChildren = (): ActiveExpander | undefined => {\n    return 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\n  if (children !== prevChildren) {\n    setPrevChildren(children);\n    const newActiveExpander = getExpanderStateFromChildren();\n    if (newActiveExpander) {\n      setActiveExpander({ ...activeExpander, ...newActiveExpander });\n    }\n  }\n\n  if (activeExpander === undefined) {\n    const initialState = getExpanderStateFromChildren();\n    if (initialState && Object.keys(initialState).length > 0) {\n      setActiveExpander(initialState);\n    }\n  }\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          const childProps = child.props;\n          const sharedProps = {\n            padding: childProps.padding ?? childPadding,\n            color: childProps.color ?? color,\n            large: childProps.large ?? large,\n            className: classNames(expanderListStyles['expander-list__item'], childProps.className),\n            variant: childProps.variant ?? variant,\n            zIndex: childProps.zIndex ?? zIndex,\n            highlightText: highlightTextChild,\n          };\n\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={childProps.onDelete}>\n                {React.cloneElement(child, {\n                  ...sharedProps,\n                  id,\n                  key: index,\n                  expanded,\n                  'aria-expanded': false,\n                  renderChildrenWhenClosed: false,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n              ...sharedProps,\n              id,\n              key: index,\n              expanded,\n              'aria-expanded': expanded,\n              handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => {\n                childProps.handleExpanderClick?.(event);\n                handleExpanderClick(event, id);\n              },\n              renderChildrenWhenClosed: childProps.renderChildrenWhenClosed ?? renderChildrenWhenClosed,\n            });\n          }\n        }\n        return child;\n      })}\n    </ul>\n  );\n};\n\nconst ExpanderList = ExpanderListComponent 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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"}

package/lib/components/ExpanderList/styles.module.scss

@@ -456,6 +456,7 @@
     padding: 0;
     display: none;
     grid-area: content;
+    min-width: 0;
     padding-left: var(--statusmarker-left-space);
 
     @media print {

package/lib/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -1,10 +1,6 @@
 import { AriaLabelAttributes } from '../../utils/accessibility';
 interface HorizontalScrollProps {
     children?: React.ReactNode;
-    /**
-     * Bredden på elementet som potensielt vil scrolle horisontalt i px
-     */
-    childWidth: number;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/lib/components/HorizontalScroll/styles.module.scss

@@ -14,15 +14,12 @@ $gradient:
 
   &__viewport {
     display: flex;
+    overflow: auto hidden;
 
     &:focus-visible {
       outline: spacers.getSpacer(4xs) solid palette.$black;
       outline-offset: -1px;
     }
-
-    &--overflow {
-      overflow: auto hidden;
-    }
   }
 
   &__indicator {