@helsenorge/designsystem-react 15.7.2 → 16.1.0

package/lib/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":[],"sources":["../src/components/Toggle/constants.ts","../src/components/Toggle/Toggle.tsx","../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics)'\n    : checkedState\n      ? 'var(--color-action-graphics-ondark)'\n      : 'var(--core-color-neutral-700)';\n\n  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n    setCheckedState(checked);\n  }\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":[],"sources":["../src/components/Toggle/constants.ts","../src/components/Toggle/Toggle.tsx","../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics-dark)'\n    : checkedState\n      ? 'var(--color-action-graphics-light-normal)'\n      : 'var(--core-color-neutral-700)';\n\n  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n    setCheckedState(checked);\n  }\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-dark-hover)' : 'var(--color-action-graphics-dark-normal)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}

package/lib/UNSAFE_TableBody.js

@@ -0,0 +1,22 @@
+import { n as TableContext } from "./TableContext.js";
+import classNames from "classnames";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableBody/UNSAFE_TableBody.tsx
+var UNSAFE_TableBody = ({ className, children, zebraStripes, ...rest }) => {
+	const { zebraStripes: inheritedZebraStripes } = useContext(TableContext);
+	const tableBodyClasses = classNames(styles["table-body"], { [styles["table-body--zebra"]]: zebraStripes ?? inheritedZebraStripes }, className);
+	return /* @__PURE__ */ jsx("tbody", {
+		className: tableBodyClasses,
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableBody/index.ts
+var UNSAFE_TableBody_default = UNSAFE_TableBody;
+//#endregion
+export { UNSAFE_TableBody as n, UNSAFE_TableBody_default as t };
+
+//# sourceMappingURL=UNSAFE_TableBody.js.map

package/lib/UNSAFE_TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableBody.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableBody/UNSAFE_TableBody.tsx","../src/components/UNSAFE_Table/UNSAFE_TableBody/index.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** Applies zebra stripes to every other row. Overrides the value from UNSAFE_Table. */\n  zebraStripes?: boolean;\n}\n\nexport const UNSAFE_TableBody: React.FC<Props> = ({ className, children, zebraStripes, ...rest }) => {\n  const { zebraStripes: inheritedZebraStripes } = useContext(TableContext);\n  const tableBodyClasses = classNames(\n    styles['table-body'],\n    { [styles['table-body--zebra']]: zebraStripes ?? inheritedZebraStripes },\n    className\n  );\n\n  return (\n    <tbody className={tableBodyClasses} {...rest}>\n      {children}\n    </tbody>\n  );\n};\n\nexport default UNSAFE_TableBody;\n","import UNSAFE_TableBody from './UNSAFE_TableBody';\nexport * from './UNSAFE_TableBody';\nexport default UNSAFE_TableBody;\n"],"mappings":";;;;;;AAgBA,IAAa,oBAAqC,EAAE,WAAW,UAAU,cAAc,GAAG,WAAW;CACnG,MAAM,EAAE,cAAc,0BAA0B,WAAW,YAAY;CACvE,MAAM,mBAAmB,WACvB,OAAO,eACP,GAAG,OAAO,uBAAuB,gBAAgB,sBAAsB,GACvE,SACF;CAEA,OACE,oBAAC,SAAD;EAAO,WAAW;EAAkB,GAAI;EACrC;CACI,CAAA;AAEX;;;AC3BA,IAAA,2BAAe"}

package/lib/UNSAFE_TableCell.js

@@ -0,0 +1,26 @@
+import { a as TextAlign, i as TableSizes, r as TableColors } from "./constants3.js";
+import { n as TableContext, t as CellHeadingContext } from "./TableContext.js";
+import { t as StackedCellContent } from "./StackedCellContent.js";
+import classNames from "classnames";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableCell/UNSAFE_TableCell.tsx
+var UNSAFE_TableCell = ({ nowrap = false, textAlign = TextAlign.left, children, className, testId, ...rest }) => {
+	const { color, size } = useContext(TableContext);
+	const heading = useContext(CellHeadingContext);
+	const tableCellClass = classNames(styles["table__cell"], { [styles["table__cell--stacked"]]: !!heading }, { [styles["table__cell--transparent"]]: color === TableColors.transparent }, { [styles["table__cell--compact"]]: size === TableSizes.compact }, { [styles["table__cell--nowrap"]]: nowrap }, { [styles["table__cell--center"]]: textAlign === "center" }, { [styles["table__cell--right"]]: textAlign === "right" }, className);
+	return /* @__PURE__ */ jsx("td", {
+		className: tableCellClass,
+		"data-testid": testId,
+		...rest,
+		children: /* @__PURE__ */ jsx(StackedCellContent, {
+			headingText: heading,
+			children
+		})
+	});
+};
+//#endregion
+export { UNSAFE_TableCell as t };
+
+//# sourceMappingURL=UNSAFE_TableCell.js.map

package/lib/UNSAFE_TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableCell.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableCell/UNSAFE_TableCell.tsx"],"sourcesContent":["import { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TableColors, TableSizes, TextAlign } from '../constants';\nimport StackedCellContent from '../StackedCellContent';\nimport styles from '../styles.module.scss';\nimport { CellHeadingContext, TableContext } from '../TableContext';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children?: React.ReactNode;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const UNSAFE_TableCell: React.FC<Props> = ({ nowrap = false, textAlign = TextAlign.left, children, className, testId, ...rest }) => {\n  const { color, size } = useContext(TableContext);\n  const heading = useContext(CellHeadingContext);\n  const tableCellClass = classNames(\n    styles['table__cell'],\n    { [styles['table__cell--stacked']]: !!heading },\n    { [styles['table__cell--transparent']]: color === TableColors.transparent },\n    { [styles['table__cell--compact']]: size === TableSizes.compact },\n    { [styles['table__cell--nowrap']]: nowrap },\n    { [styles['table__cell--center']]: textAlign === 'center' },\n    { [styles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-testid={testId} {...rest}>\n      <StackedCellContent headingText={heading}>{children}</StackedCellContent>\n    </td>\n  );\n};\n\nexport default UNSAFE_TableCell;\n"],"mappings":";;;;;;;;AAsBA,IAAa,oBAAqC,EAAE,SAAS,OAAO,YAAY,UAAU,MAAM,UAAU,WAAW,QAAQ,GAAG,WAAW;CACzI,MAAM,EAAE,OAAO,SAAS,WAAW,YAAY;CAC/C,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,iBAAiB,WACrB,OAAO,gBACP,GAAG,OAAO,0BAA0B,CAAC,CAAC,QAAQ,GAC9C,GAAG,OAAO,8BAA8B,UAAU,YAAY,YAAY,GAC1E,GAAG,OAAO,0BAA0B,SAAS,WAAW,QAAQ,GAChE,GAAG,OAAO,yBAAyB,OAAO,GAC1C,GAAG,OAAO,yBAAyB,cAAc,SAAS,GAC1D,GAAG,OAAO,wBAAwB,cAAc,QAAQ,GACxD,SACF;CAEA,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB,eAAa;EAAQ,GAAI;EACtD,UAAA,oBAAC,oBAAD;GAAoB,aAAa;GAAU;EAA6B,CAAA;CACtE,CAAA;AAER"}

package/lib/UNSAFE_TableDetail.js

@@ -0,0 +1,17 @@
+import { t as StackedCellContent } from "./StackedCellContent.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableDetail/UNSAFE_TableDetail.tsx
+var UNSAFE_TableDetail = ({ headingText, className, children, testId }) => /* @__PURE__ */ jsx("div", {
+	className: classNames(styles["table__cell"], styles["table__cell--stacked"], styles["table__detail"], className),
+	"data-testid": testId,
+	children: /* @__PURE__ */ jsx(StackedCellContent, {
+		headingText,
+		children
+	})
+});
+//#endregion
+export { UNSAFE_TableDetail as t };
+
+//# sourceMappingURL=UNSAFE_TableDetail.js.map

package/lib/UNSAFE_TableDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableDetail.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableDetail/UNSAFE_TableDetail.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport StackedCellContent from '../StackedCellContent';\nimport styles from '../styles.module.scss';\n\nexport interface Props {\n  /** Heading shown before the content */\n  headingText: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The content, typically the value of a column hidden with hideBehindExpander */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const UNSAFE_TableDetail: React.FC<Props> = ({ headingText, className, children, testId }) => (\n  <div\n    className={classNames(styles['table__cell'], styles['table__cell--stacked'], styles['table__detail'], className)}\n    data-testid={testId}\n  >\n    <StackedCellContent headingText={headingText}>{children}</StackedCellContent>\n  </div>\n);\n\nexport default UNSAFE_TableDetail;\n"],"mappings":";;;;;AAgBA,IAAa,sBAAuC,EAAE,aAAa,WAAW,UAAU,aACtF,oBAAC,OAAD;CACE,WAAW,WAAW,OAAO,gBAAgB,OAAO,yBAAyB,OAAO,kBAAkB,SAAS;CAC/G,eAAa;CAEb,UAAA,oBAAC,oBAAD;EAAiC;EAAc;CAA6B,CAAA;AACzE,CAAA"}

package/lib/UNSAFE_TableExpandedRow.js

@@ -0,0 +1,46 @@
+import { t as Icon_default } from "./Icon.js";
+import { t as Button_default } from "./Button.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import { i as TableSizes } from "./constants3.js";
+import { n as TableContext } from "./TableContext.js";
+import classNames from "classnames";
+import React, { useContext, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableExpandedRow/UNSAFE_TableExpandedRow.tsx
+var UNSAFE_TableExpandedRow = ({ expanded, toggleClick, children, className, stackOnly, id }) => {
+	const { size, resources } = useContext(TableContext);
+	const rowRef = useRef(null);
+	const [colSpan, setColSpan] = useState(1);
+	useLayoutEffect(() => {
+		const previousRow = rowRef.current?.previousElementSibling;
+		if (!previousRow) return;
+		const count = Array.from(previousRow.children).reduce((sum, cell) => sum + (cell.colSpan || 1), 0);
+		setColSpan(count);
+	});
+	const tableRowClass = classNames(styles["table__expanded-row"], {
+		[styles["table__expanded-row--expanded"]]: expanded,
+		[styles["table__expanded-row--stack-only"]]: stackOnly
+	}, className);
+	const tableCellClass = classNames(styles["table__cell"], styles["table__expanded-row__cell"], className, { [styles["table__cell--compact"]]: size === TableSizes.compact });
+	return /* @__PURE__ */ jsx("tr", {
+		ref: rowRef,
+		className: tableRowClass,
+		id,
+		children: /* @__PURE__ */ jsxs("td", {
+			colSpan,
+			className: tableCellClass,
+			children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child)), /* @__PURE__ */ jsxs(Button_default, {
+				variant: "borderless",
+				onClick: toggleClick,
+				"aria-expanded": expanded,
+				tabIndex: expanded ? 0 : -1,
+				children: [resources.collapseRowButton, /* @__PURE__ */ jsx(Icon_default, { svgIcon: ChevronUp })]
+			})]
+		})
+	});
+};
+//#endregion
+export { UNSAFE_TableExpandedRow as t };
+
+//# sourceMappingURL=UNSAFE_TableExpandedRow.js.map

package/lib/UNSAFE_TableExpandedRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableExpandedRow.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableExpandedRow/UNSAFE_TableExpandedRow.tsx"],"sourcesContent":["import React, { useContext, useLayoutEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { TableSizes } from '../constants';\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n  /** Only display the expanded row in the stack variant. */\n  stackOnly?: boolean;\n  /** Row id. For use with aria-controls. */\n  id?: string;\n}\n\nexport const UNSAFE_TableExpandedRow = ({ expanded, toggleClick, children, className, stackOnly, id }: Props): React.JSX.Element => {\n  const { size, resources } = useContext(TableContext);\n  const rowRef = useRef<HTMLTableRowElement>(null);\n  const [colSpan, setColSpan] = useState(1);\n\n  // Spenner over alle kolonnene i raden over\n  useLayoutEffect(() => {\n    const previousRow = rowRef.current?.previousElementSibling;\n    if (!previousRow) {\n      return;\n    }\n\n    const count = Array.from(previousRow.children).reduce((sum, cell) => sum + ((cell as HTMLTableCellElement).colSpan || 1), 0);\n    setColSpan(count);\n  });\n  const tableRowClass = classNames(\n    styles['table__expanded-row'],\n    {\n      [styles['table__expanded-row--expanded']]: expanded,\n      [styles['table__expanded-row--stack-only']]: stackOnly,\n    },\n    className\n  );\n  const tableCellClass = classNames(styles['table__cell'], styles['table__expanded-row__cell'], className, {\n    [styles['table__cell--compact']]: size === TableSizes.compact,\n  });\n\n  return (\n    <tr ref={rowRef} className={tableRowClass} id={id}>\n      <td colSpan={colSpan} className={tableCellClass}>\n        {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n        <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n          {resources.collapseRowButton}\n          <Icon svgIcon={ChevronUp} />\n        </Button>\n      </td>\n    </tr>\n  );\n};\n\nexport default UNSAFE_TableExpandedRow;\n"],"mappings":";;;;;;;;;;AA0BA,IAAa,2BAA2B,EAAE,UAAU,aAAa,UAAU,WAAW,WAAW,SAAmC;CAClI,MAAM,EAAE,MAAM,cAAc,WAAW,YAAY;CACnD,MAAM,SAAS,OAA4B,IAAI;CAC/C,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC;CAGxC,sBAAsB;EACpB,MAAM,cAAc,OAAO,SAAS;EACpC,IAAI,CAAC,aACH;EAGF,MAAM,QAAQ,MAAM,KAAK,YAAY,QAAQ,CAAC,CAAC,QAAQ,KAAK,SAAS,OAAQ,KAA8B,WAAW,IAAI,CAAC;EAC3H,WAAW,KAAK;CAClB,CAAC;CACD,MAAM,gBAAgB,WACpB,OAAO,wBACP;GACG,OAAO,mCAAmC;GAC1C,OAAO,qCAAqC;CAC/C,GACA,SACF;CACA,MAAM,iBAAiB,WAAW,OAAO,gBAAgB,OAAO,8BAA8B,WAAW,GACtG,OAAO,0BAA0B,SAAS,WAAW,QACxD,CAAC;CAED,OACE,oBAAC,MAAD;EAAI,KAAK;EAAQ,WAAW;EAAmB;EAC7C,UAAA,qBAAC,MAAD;GAAa;GAAS,WAAW;GAAjC,UAAA,CACG,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,KAAK,KAAK,MAAM,aAAa,KAAK,CAAC,GAC/F,qBAAC,gBAAD;IAAQ,SAAS;IAAc,SAAS;IAAa,iBAAe;IAAU,UAAU,WAAW,IAAI;IAAvG,UAAA,CACG,UAAU,mBACX,oBAAC,cAAD,EAAM,SAAS,UAAY,CAAA,CACrB;GACN,CAAA,CAAA;;CACF,CAAA;AAER"}

package/lib/UNSAFE_TableHead.js

@@ -0,0 +1,25 @@
+import { n as TableContext } from "./TableContext.js";
+import classNames from "classnames";
+import { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableHead/UNSAFE_TableHead.tsx
+var UNSAFE_TableHead = ({ children, className, ...rest }) => {
+	const tableContext = useContext(TableContext);
+	const headContext = useMemo(() => ({
+		...tableContext,
+		hiddenColumns: []
+	}), [tableContext]);
+	return /* @__PURE__ */ jsx(TableContext.Provider, {
+		value: headContext,
+		children: /* @__PURE__ */ jsx("thead", {
+			className: classNames(styles.table__head, className),
+			...rest,
+			children
+		})
+	});
+};
+//#endregion
+export { UNSAFE_TableHead as t };
+
+//# sourceMappingURL=UNSAFE_TableHead.js.map

package/lib/UNSAFE_TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableHead.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableHead/UNSAFE_TableHead.tsx"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport classNames from 'classnames';\n\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n}\n\nexport const UNSAFE_TableHead: React.FC<Props> = ({ children, className, ...rest }) => {\n  const tableContext = useContext(TableContext);\n  // Radene i hodet skal ikke skjule kolonner eller få expander\n  const headContext = useMemo(() => ({ ...tableContext, hiddenColumns: [] }), [tableContext]);\n\n  return (\n    <TableContext.Provider value={headContext}>\n      <thead className={classNames(styles.table__head, className)} {...rest}>\n        {children}\n      </thead>\n    </TableContext.Provider>\n  );\n};\n\nexport default UNSAFE_TableHead;\n"],"mappings":";;;;;;AAcA,IAAa,oBAAqC,EAAE,UAAU,WAAW,GAAG,WAAW;CACrF,MAAM,eAAe,WAAW,YAAY;CAE5C,MAAM,cAAc,eAAe;EAAE,GAAG;EAAc,eAAe,CAAC;CAAE,IAAI,CAAC,YAAY,CAAC;CAE1F,OACE,oBAAC,aAAa,UAAd;EAAuB,OAAO;EAC5B,UAAA,oBAAC,SAAD;GAAO,WAAW,WAAW,OAAO,aAAa,SAAS;GAAG,GAAI;GAC9D;EACI,CAAA;CACc,CAAA;AAE3B"}

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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"}