@helsenorge/designsystem-react 15.7.2 → 16.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/UNSAFE_Table/TableCaption.tsx","../../../src/components/UNSAFE_Table/resourceHelper.ts","../../../src/components/UNSAFE_Table/UNSAFE_Table.tsx","../../../src/components/UNSAFE_Table/useTableExpandedRows.ts","../../../src/components/UNSAFE_Table/useTableShowMore.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface TableCaptionProps {\n  /** Unique ID. Can be used with aria-labelledby, e.g. for the scroll container. */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the caption. */\n  children: React.ReactNode;\n}\n\nexport const TableCaption: React.FC<TableCaptionProps> = ({ id, className, children }) => (\n  <caption id={id} className={classNames(styles['table-caption'], className)}>\n    {children}\n  </caption>\n);\n\nexport default TableCaption;\n","import type { HNDesignsystemTable } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.Table.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTable => {\n  switch (language) {\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useId, useMemo, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TableContextValue } from './TableContext';\nimport type { HNDesignsystemTable } from '../../resources/Resources';\n\nimport { ResponsiveTableVariant, defaultConfig, TableColors, TableSizes } from './constants';\nimport { getResources } from './resourceHelper';\nimport TableCaption from './TableCaption';\nimport { TableContext } from './TableContext';\nimport {\n  getAvailableWidth,\n  getColumnHeadingTexts,\n  getHiddenColumns,\n  getBreakpointClass,\n  getCenteredOverflowTableStyle,\n  getCurrentConfig,\n  omitProps,\n} from './utils';\nimport { LanguageLocales } from '../../constants';\nimport { useBreakpoint, type Breakpoint } from '../../hooks/useBreakpoint';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSynchronousResizeObserver } from '../../hooks/useSynchronousResizeObserver';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface UNSAFE_TableProps extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Description of the table for screen readers. Rendered as a visually hidden caption and used to label the scroll container. */\n  caption: string;\n  /** Sets the content of the table. Use TableHead and UNSAFE_TableBody */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Header category for styling. Default: normal */\n  color?: TableColors;\n  /** Unique ID */\n  id?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTable>;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  size?: TableSizes;\n  /** Width of the head column in percentage in the stack variant. When not set, the column follows the widest heading in the table, but wraps (minimum 30%) when the content needs the space. */\n  stackHeadWidth?: number;\n  /** Id used for testing */\n  testId?: string;\n  /** Applies zebra stripes to every other row. Default: false */\n  zebraStripes?: boolean;\n}\n\nexport const UNSAFE_Table: React.FC<UNSAFE_TableProps> = ({\n  breakpointConfig = defaultConfig,\n  caption,\n  children,\n  className,\n  color,\n  id,\n  resources,\n  size = TableSizes.normal,\n  stackHeadWidth,\n  testId,\n  zebraStripes = false,\n  ...rest\n}) => {\n  const captionElementId = useId();\n\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(document.documentElement.clientWidth || window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemTable = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const currentConfig = useMemo(\n    () => getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth),\n    [breakpointConfig, breakpoint, tableWidth, windowWidth]\n  );\n\n  useSynchronousResizeObserver(\n    tableRef,\n    (tableElement, parentElement) => {\n      if (currentConfig?.variant !== ResponsiveTableVariant.stack) {\n        setTableWidth(tableElement.getBoundingClientRect().width);\n      }\n      const parentStyle = getComputedStyle(parentElement);\n      const horizontalSpacing = [\n        parentStyle.paddingLeft,\n        parentStyle.paddingRight,\n        parentStyle.borderLeftWidth,\n        parentStyle.borderRightWidth,\n      ].reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);\n      setParentWidth(Math.max(0, parentElement.getBoundingClientRect().width - horizontalSpacing));\n      setWindowWidth(getAvailableWidth(parentElement));\n    },\n    [currentConfig?.variant]\n  );\n\n  useLayoutEvent(\n    () => {\n      if (tableRef.current?.parentElement) {\n        setWindowWidth(getAvailableWidth(tableRef.current.parentElement));\n      }\n    },\n    ['resize'],\n    100\n  );\n\n  const tableStyle: React.CSSProperties | undefined =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow || stackHeadWidth !== undefined\n      ? {\n          ...(currentConfig?.variant === ResponsiveTableVariant.centeredoverflow\n            ? getCenteredOverflowTableStyle(parentWidth, tableWidth)\n            : undefined),\n          ...(stackHeadWidth !== undefined ? { '--table-stack-columns': `${stackHeadWidth}% minmax(0, 1fr)` } : undefined),\n        }\n      : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n  const domRest = omitProps(rest as Record<string, unknown>, ['breakpoint', 'variant', 'fallbackVariant', 'headerCategory']);\n\n  const hiddenColumns = useMemo(() => getHiddenColumns(children), [children]);\n  const headingTexts = useMemo(() => getColumnHeadingTexts(children), [children]);\n\n  const tableContext = useMemo<TableContextValue>(\n    () => ({\n      variant: currentConfig?.variant ?? ResponsiveTableVariant.normal,\n      color: color ?? TableColors.normal,\n      size,\n      zebraStripes,\n      hiddenColumns,\n      headingTexts,\n      resources: mergedResources,\n    }),\n    [currentConfig?.variant, color, size, zebraStripes, hiddenColumns, headingTexts]\n  );\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} ref={tableRef} style={tableStyle} {...domRest}>\n      <TableCaption id={captionElementId}>{caption}</TableCaption>\n      {children}\n    </table>\n  );\n\n  return (\n    <TableContext.Provider value={tableContext}>\n      {currentConfig?.variant === ResponsiveTableVariant.horizontalscroll ? (\n        <HorizontalScroll testId=\"horizontal-scroll\" aria-labelledby={captionElementId}>\n          {table}\n        </HorizontalScroll>\n      ) : (\n        table\n      )}\n    </TableContext.Provider>\n  );\n};\n\nexport default UNSAFE_Table;\n","import { useState } from 'react';\n\nexport interface UseTableExpandedRowsReturn {\n  /** Current expanded state per row key */\n  expandedRows: Record<string, boolean>;\n  /** Whether a row is expanded */\n  isExpanded: (rowKey: string) => boolean;\n  /** Toggle the expanded state of a row */\n  toggleExpanded: (rowKey: string) => void;\n  /** Collapse all rows, e.g. when the table is re-sorted */\n  collapseAll: () => void;\n}\n\n/** Expanded state per row for tables with expandable rows (UNSAFE_TableRow expandedContent/hideBehindExpander). */\nexport const useTableExpandedRows = (): UseTableExpandedRowsReturn => {\n  const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({});\n\n  const isExpanded = (rowKey: string): boolean => !!expandedRows[rowKey];\n\n  const toggleExpanded = (rowKey: string): void => {\n    setExpandedRows(prev => ({ ...prev, [rowKey]: !prev[rowKey] }));\n  };\n\n  const collapseAll = (): void => {\n    setExpandedRows({});\n  };\n\n  return { expandedRows, isExpanded, toggleExpanded, collapseAll };\n};\n","import { useEffect, useMemo, useRef, useState } from 'react';\n\nexport interface UseTableShowMoreOptions<TData> {\n  /** All rows */\n  data: TData[];\n  /** Number of rows to show initially and to reveal per showMore(). Shows all rows when not set. */\n  pageSize?: number;\n}\n\nexport interface UseTableShowMoreReturn<TData, TElement extends HTMLElement> {\n  /** The rows that are currently visible */\n  visibleData: TData[];\n  /** Whether there are more rows to show */\n  hasMore: boolean;\n  /** Reveal the next page of rows */\n  showMore: () => void;\n  /** Reset to the initial number of visible rows */\n  reset: () => void;\n  /** Index of the first row revealed by the last showMore() call */\n  newRowsStartIndex?: number;\n  /**\n   * Attach to a focusable element in the first newly revealed row (index === newRowsStartIndex).\n   * The element receives focus when the last page is revealed and the show more button disappears.\n   */\n  firstNewRowRef: React.RefObject<TElement | null>;\n}\n\n/** Progressive disclosure (\"show more\") of table rows, with focus management when the show more button disappears. */\nexport const useTableShowMore = <TData, TElement extends HTMLElement = HTMLElement>({\n  data,\n  pageSize,\n}: UseTableShowMoreOptions<TData>): UseTableShowMoreReturn<TData, TElement> => {\n  const [visibleCount, setVisibleCount] = useState(pageSize);\n  const [newRowsStartIndex, setNewRowsStartIndex] = useState<number>();\n  const firstNewRowRef = useRef<TElement>(null);\n  const shouldFocusNewRow = useRef(false);\n\n  const visibleData = useMemo(() => (visibleCount === undefined ? data : data.slice(0, visibleCount)), [data, visibleCount]);\n  const hasMore = visibleCount !== undefined && visibleCount < data.length;\n\n  const showMore = (): void => {\n    if (visibleCount === undefined || pageSize === undefined) {\n      return;\n    }\n    const newCount = Math.min(visibleCount + pageSize, data.length);\n    // Flytt fokus når \"vis mer\"-knappen forsvinner, slik at fokus ikke går tapt\n    shouldFocusNewRow.current = newCount >= data.length;\n    setNewRowsStartIndex(visibleCount);\n    setVisibleCount(newCount);\n  };\n\n  useEffect(() => {\n    if (shouldFocusNewRow.current) {\n      shouldFocusNewRow.current = false;\n      firstNewRowRef.current?.focus();\n    }\n  }, [visibleCount]);\n\n  const reset = (): void => {\n    setVisibleCount(pageSize);\n    setNewRowsStartIndex(undefined);\n  };\n\n  return { visibleData, hasMore, showMore, reset, newRowsStartIndex, firstNewRowRef };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAaA,IAAa,gBAA6C,EAAE,IAAI,WAAW,eACzE,oBAAC,WAAD;CAAa;CAAI,WAAW,WAAW,OAAO,kBAAkB,SAAS;CACtE;AACM,CAAA;;;ACXX,IAAa,gBAAgB,aAAmD;CAC9E,QAAQ,UAAR;EACE,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;ACoDA,IAAa,gBAA6C,EACxD,mBAAmB,eACnB,SACA,UACA,WACA,OACA,IACA,WACA,OAAO,WAAW,QAClB,gBACA,QACA,eAAe,OACf,GAAG,WACC;CACJ,MAAM,mBAAmB,MAAM;CAE/B,MAAM,CAAC,YAAY,iBAAiB,SAAiB,CAAC;CACtD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,CAAC;CACxD,MAAM,CAAC,aAAa,kBAAkB,SAAS,SAAS,gBAAgB,eAAe,OAAO,UAAU;CACxG,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,aAAa,cAAc;CAEjC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAE3E,MAAM,kBAAuC;EAC3C,GAFuB,aAAa,QAEjC;EACH,GAAG;CACL;CAEA,MAAM,gBAAgB,cACd,iBAAiB,kBAAkB,YAAY,YAAY,WAAW,GAC5E;EAAC;EAAkB;EAAY;EAAY;CAAW,CACxD;CAEA,6BACE,WACC,cAAc,kBAAkB;EAC/B,IAAI,eAAe,YAAY,uBAAuB,OACpD,cAAc,aAAa,sBAAsB,CAAC,CAAC,KAAK;EAE1D,MAAM,cAAc,iBAAiB,aAAa;EAClD,MAAM,oBAAoB;GACxB,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ,YAAY;EACd,CAAC,CAAC,QAAQ,OAAO,UAAU,SAAS,OAAO,WAAW,KAAK,KAAK,IAAI,CAAC;EACrE,eAAe,KAAK,IAAI,GAAG,cAAc,sBAAsB,CAAC,CAAC,QAAQ,iBAAiB,CAAC;EAC3F,eAAe,kBAAkB,aAAa,CAAC;CACjD,GACA,CAAC,eAAe,OAAO,CACzB;CAEA,qBACQ;EACJ,IAAI,SAAS,SAAS,eACpB,eAAe,kBAAkB,SAAS,QAAQ,aAAa,CAAC;CAEpE,GACA,CAAC,QAAQ,GACT,GACF;CAEA,MAAM,aACJ,eAAe,YAAY,uBAAuB,oBAAoB,mBAAmB,KAAA,IACrF;EACE,GAAI,eAAe,YAAY,uBAAuB,mBAClD,8BAA8B,aAAa,UAAU,IACrD,KAAA;EACJ,GAAI,mBAAmB,KAAA,IAAY,EAAE,yBAAyB,GAAG,eAAe,kBAAkB,IAAI,KAAA;CACxG,IACA,KAAA;CAEN,MAAM,kBAAkB,mBAAmB,aAAa;CACxD,MAAM,aAAa,WAAW,OAAO,OAAO,iBAAiB,SAAS;CACtE,MAAM,UAAU,UAAU,MAAiC;EAAC;EAAc;EAAW;EAAmB;CAAgB,CAAC;CAEzH,MAAM,gBAAgB,cAAc,iBAAiB,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAC1E,MAAM,eAAe,cAAc,sBAAsB,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAE9E,MAAM,eAAe,eACZ;EACL,SAAS,eAAe,WAAW,uBAAuB;EAC1D,OAAO,SAAS,YAAY;EAC5B;EACA;EACA;EACA;EACA,WAAW;CACb,IACA;EAAC,eAAe;EAAS;EAAO;EAAM;EAAc;EAAe;CAAY,CACjF;CAEA,MAAM,QACJ,qBAAC,SAAD;EAAO,WAAW;EAAgB;EAAI,eAAa;EAAQ,KAAK;EAAU,OAAO;EAAY,GAAI;EAAjG,UAAA,CACE,oBAAC,cAAD;GAAc,IAAI;GAAmB,UAAA;EAAsB,CAAA,GAC1D,QACI;;CAGT,OACE,oBAAC,aAAa,UAAd;EAAuB,OAAO;EAC3B,UAAA,eAAe,YAAY,uBAAuB,mBACjD,oBAAC,0BAAD;GAAkB,QAAO;GAAoB,mBAAiB;GAC3D,UAAA;EACe,CAAA,IAElB;CAEmB,CAAA;AAE3B;;;;AChKA,IAAa,6BAAyD;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAkC,CAAC,CAAC;CAE5E,MAAM,cAAc,WAA4B,CAAC,CAAC,aAAa;CAE/D,MAAM,kBAAkB,WAAyB;EAC/C,iBAAgB,UAAS;GAAE,GAAG;IAAO,SAAS,CAAC,KAAK;EAAQ,EAAE;CAChE;CAEA,MAAM,oBAA0B;EAC9B,gBAAgB,CAAC,CAAC;CACpB;CAEA,OAAO;EAAE;EAAc;EAAY;EAAgB;CAAY;AACjE;;;;ACAA,IAAa,oBAAuE,EAClF,MACA,eAC6E;CAC7E,MAAM,CAAC,cAAc,mBAAmB,SAAS,QAAQ;CACzD,MAAM,CAAC,mBAAmB,wBAAwB,SAAiB;CACnE,MAAM,iBAAiB,OAAiB,IAAI;CAC5C,MAAM,oBAAoB,OAAO,KAAK;CAEtC,MAAM,cAAc,cAAe,iBAAiB,KAAA,IAAY,OAAO,KAAK,MAAM,GAAG,YAAY,GAAI,CAAC,MAAM,YAAY,CAAC;CACzH,MAAM,UAAU,iBAAiB,KAAA,KAAa,eAAe,KAAK;CAElE,MAAM,iBAAuB;EAC3B,IAAI,iBAAiB,KAAA,KAAa,aAAa,KAAA,GAC7C;EAEF,MAAM,WAAW,KAAK,IAAI,eAAe,UAAU,KAAK,MAAM;EAE9D,kBAAkB,UAAU,YAAY,KAAK;EAC7C,qBAAqB,YAAY;EACjC,gBAAgB,QAAQ;CAC1B;CAEA,gBAAgB;EACd,IAAI,kBAAkB,SAAS;GAC7B,kBAAkB,UAAU;GAC5B,eAAe,SAAS,MAAM;EAChC;CACF,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,cAAoB;EACxB,gBAAgB,QAAQ;EACxB,qBAAqB,KAAA,CAAS;CAChC;CAEA,OAAO;EAAE;EAAa;EAAS;EAAU;EAAO;EAAmB;CAAe;AACpF"}

package/lib/components/UNSAFE_Table/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { HNDesignsystemTable } from '../../resources/Resources';
+import { LanguageLocales } from '../../constants';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemTable;

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

@@ -0,0 +1,621 @@
+@use 'sass:map';
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/screen-reader' as sr;
+@import '../../scss/breakpoints';
+@import '../../scss/grid';
+
+$table-border: 1px solid var(--color-base-neutral-border-normal);
+$expanded-row-shadow: inset 3px 0 var(--color-base-neutral-border-normal);
+$zebra-background: var(--color-base-neutral-background-light);
+$zebra-cell-hover: var(--color-action-background-light-plus1-hover);
+$zebra-cell-active: var(--color-action-background-light-plus1-active);
+
+.table-caption {
+  @include sr.sr-only;
+}
+
+.table__cell {
+  @include fonts.table-cell;
+
+  height: 2.6875rem;
+  padding: var(--core-space-2xs) var(--core-space-xs);
+  border: 0 solid var(--color-base-neutral-border-normal);
+  border-width: 1px 0 0 1px;
+  vertical-align: top;
+  text-align: left;
+
+  &--transparent {
+    background: transparent;
+  }
+
+  &--center {
+    text-align: center;
+  }
+
+  &--right {
+    text-align: right;
+  }
+
+  &--nowrap {
+    white-space: nowrap;
+  }
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    height: 2.6875rem;
+    padding: var(--core-space-s);
+  }
+
+  &--compact {
+    height: 1.75rem;
+    padding: var(--core-space-3xs);
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      height: 2.375rem;
+      padding: var(--core-space-3xs);
+    }
+  }
+}
+
+// På cellen, innenfor kantlinjen, slik at den er like bred som skyggen på expander-knappen i raden over
+.table__expanded-row--expanded > .table__cell {
+  box-shadow: $expanded-row-shadow;
+}
+
+// Krymper Button sitt indre element slik at Button sin egen fokusmarkering legger seg rundt knappen og ikke hele cellen.
+@mixin table-button-content-reset {
+  width: auto;
+  background: none;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    margin-top: 0.19rem;
+  }
+}
+
+@mixin table-button-content-no-hover-fill {
+  &:hover,
+  &:active {
+    background: none;
+  }
+}
+
+@mixin centeredoverflow {
+  position: relative;
+}
+
+@mixin stack {
+  display: block;
+  clear: both;
+  border-width: 0;
+
+  .table__head {
+    display: none;
+  }
+
+  .table__head-cell {
+    display: block;
+  }
+
+  .table-body {
+    display: grid;
+    grid-template-columns: var(--table-stack-columns, minmax(30%, max-content) minmax(30%, auto));
+  }
+
+  .table__row {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    padding: 0;
+  }
+
+  .table__cell {
+    position: relative;
+    grid-column: 1 / -1;
+    align-items: baseline;
+    box-sizing: border-box;
+    display: block;
+    height: auto;
+    padding: var(--core-space-2xs) var(--core-space-xs);
+    float: none;
+    clear: both;
+    width: 100%;
+    border-width: 0 1px;
+    outline: 0;
+
+    &--stacked {
+      // Arver kolonnesporene fra .table-body
+      // slik at ledetekstkolonnen er like bred i alle rader
+      display: grid;
+      grid-template-columns: subgrid;
+
+      &:nth-child(1 of .table__cell--stacked) {
+        padding-block-start: var(--core-space-xs);
+      }
+
+      &:nth-last-child(1 of .table__cell--stacked) {
+        padding-block-end: var(--core-space-xs);
+      }
+    }
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding: var(--core-space-xs);
+    }
+
+    &--compact {
+      padding-block: var(--core-space-3xs);
+
+      &:nth-child(1 of .table__cell--compact):not(.table__cell-pop-menu, .table__expander-cell-mobile) {
+        padding-block-start: var(--core-space-2xs);
+      }
+
+      &:nth-last-child(1 of .table__cell--compact):not(.table__cell-pop-menu, .table__expander-cell-mobile) {
+        padding-block-end: var(--core-space-2xs);
+      }
+    }
+
+    &--center {
+      text-align: left;
+    }
+
+    &--right {
+      text-align: left;
+    }
+
+    &:not(.expandable-container) {
+      font-weight: 400;
+    }
+
+    > .table__cell-heading-text {
+      @include fonts.table-header-stack;
+
+      display: block;
+      box-sizing: border-box;
+      padding-right: var(--core-space-xs);
+      overflow-wrap: break-word;
+    }
+
+    > .table__cell-content {
+      min-width: 0;
+      overflow-wrap: break-word;
+    }
+  }
+
+  // Celler markert med hideBehindExpander vises i den utvidbare raden i stedet
+  .table__cell--behind-expander {
+    display: none;
+  }
+
+  .table__cell-expander {
+    display: none;
+  }
+
+  .table__expander-cell-mobile,
+  .table__cell-pop-menu {
+    display: block;
+    float: none;
+    clear: both;
+    grid-column: 1 / -1;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .table__expander-cell-mobile {
+    height: auto;
+    border-bottom: $table-border;
+
+    &--expanded {
+      border-bottom: 0;
+    }
+
+    .table__expander-trigger {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
+  .table__cell-pop-menu {
+    height: auto;
+
+    .table__pop-menu {
+      position: static;
+      display: flex;
+
+      .table__pop-menu__trigger {
+        height: auto;
+        justify-content: flex-start;
+      }
+
+      .table__pop-menu__content {
+        width: 100%;
+      }
+    }
+  }
+
+  .table__expanded-row > .table__cell {
+    height: auto;
+    text-align: left;
+    padding: 0.75rem;
+  }
+
+  .table__row--expanded > .table__cell {
+    border-left: $table-border;
+    box-shadow: $expanded-row-shadow;
+  }
+
+  .table__expanded-row--expanded {
+    box-shadow: none;
+
+    > .table__cell {
+      border-left: $table-border;
+      box-shadow: $expanded-row-shadow;
+    }
+  }
+
+  .table__cell:first-child {
+    border-top: $table-border;
+  }
+
+  .table__expanded-row {
+    display: none;
+
+    &--expanded {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-column: 1 / -1;
+      border-bottom: $table-border;
+
+      > .table__cell:first-child {
+        border-top: 0;
+      }
+    }
+  }
+
+  .table__row:last-child .table__cell:last-child {
+    border-bottom: $table-border;
+  }
+
+  .table__row--expandable + .table__row > .table__cell:first-child {
+    border-top: 0;
+  }
+
+  .table__row--expanded .table__expander-trigger,
+  .table__row--expanded .table__cell-pop-menu > .table__pop-menu .table__pop-menu__trigger {
+    box-shadow: $expanded-row-shadow;
+  }
+
+  // UNSAFE_TableDetail i utvidet rad: samme kolonnebredder som resten av tabellen
+  .table__expanded-row > td.table__expanded-row__cell:has(> .table__detail) {
+    display: grid;
+    grid-template-columns: subgrid;
+    padding: 0;
+
+    > .table__cell {
+      border: 0;
+    }
+
+    > :not(.table__detail, button) {
+      grid-column: 1 / -1;
+
+      // Innholdet skal ikke påvirke kolonnebreddene som resten av tabellen bruker
+      contain: inline-size;
+      padding: 0 0.75rem;
+    }
+
+    > button {
+      grid-column: 1 / -1;
+      justify-self: start;
+      margin: 0 var(--core-space-xs);
+
+      &:last-child {
+        margin: var(--core-space-xs);
+      }
+    }
+  }
+
+  .table__row--expandable + .table__expanded-row + .table__row > .table__cell:first-child {
+    border-top: 0;
+  }
+
+  .table-body > .table__row--expandable:first-child {
+    border-top: $table-border;
+  }
+
+  .table-body > .table__row--expandable:first-child > .table__cell:first-child {
+    border-top: 0;
+  }
+
+  .table-body--zebra > .table__row:nth-child(even of .table__row:not(.table__row--expanded)) > .table__cell {
+    background: $zebra-background;
+  }
+
+  select {
+    max-width: 100%;
+  }
+}
+
+.table {
+  width: 100%;
+
+  // Separate i stedet for collapse: sammenslåtte borders deles i halve piksler og kan bli 2px på enkelte skjermer
+  border-collapse: separate;
+  border-spacing: 0;
+
+  // Høyre og nederste linje tegnes av tabellen, så de ikke avhenger av hvilken celle som er sist
+  border: 0 solid var(--color-base-neutral-border-normal);
+  border-width: 0 1px 1px 0;
+
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    &--centeredoverflow-#{$breakpoint} {
+      @include media-breakpoint-down($breakpoint) {
+        @include centeredoverflow;
+      }
+    }
+
+    &--stack-#{$breakpoint} {
+      @include media-breakpoint-down($breakpoint) {
+        @include stack;
+      }
+    }
+  }
+
+  &__expander-cell-mobile {
+    position: relative;
+    display: none;
+  }
+}
+
+.table__head-cell {
+  height: 2.6875rem;
+  padding: var(--core-space-2xs) var(--core-space-xs);
+  background: var(--color-base-neutral-background-light);
+  border: 0 solid var(--color-base-neutral-border-normal);
+  border-width: 1px 0 0 1px;
+  text-align: left;
+  vertical-align: bottom;
+
+  @include fonts.table-header;
+
+  &--transparent {
+    background: transparent;
+  }
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    height: 2.6875rem;
+    padding: var(--core-space-s);
+  }
+
+  &--compact {
+    height: 1.75rem;
+    padding: var(--core-space-3xs);
+    vertical-align: top;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      height: 2.6875rem;
+    }
+  }
+}
+
+.table__cell-heading-text {
+  display: none;
+}
+
+.table__cell-expander,
+.table__cell-pop-menu {
+  position: relative;
+  padding: 0;
+  width: 2.75rem;
+  min-width: 2.75rem;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    width: 3.375rem;
+    min-width: 3.375rem;
+  }
+
+  &:where(.table__cell--compact) {
+    height: 2.75rem;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      height: 2.75rem;
+    }
+  }
+}
+
+.table__expander-button {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-action-background-light-hover);
+  }
+
+  &:active {
+    background: var(--color-action-background-light-active);
+  }
+}
+
+.table__expander-button__content {
+  @include table-button-content-reset;
+  @include table-button-content-no-hover-fill;
+}
+
+.table__expander-trigger {
+  &:hover {
+    background: var(--color-action-background-light-hover);
+  }
+
+  &:active {
+    background: var(--color-action-background-light-active);
+  }
+}
+
+.table__expander-trigger__content {
+  background: none;
+
+  @include table-button-content-no-hover-fill;
+}
+
+.table__pop-menu {
+  position: absolute;
+  inset: 0;
+
+  // Trekkerknappen skal fylle hele cellen, overstyrer Button-stilene
+  .table__pop-menu__trigger {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    padding: 0;
+    border-radius: 0;
+    align-items: flex-start;
+    justify-content: center;
+
+    &:hover {
+      background: var(--color-action-background-light-hover);
+      box-shadow: none;
+    }
+
+    &:active {
+      background: var(--color-action-background-light-active);
+    }
+  }
+
+  .table__pop-menu__content {
+    @include table-button-content-reset;
+  }
+}
+
+.table__row {
+  background: var(--color-action-background-light-normal);
+
+  &--transparent {
+    background: transparent;
+  }
+
+  &--expanded {
+    background: var(--color-action-background-light-plus2-normal);
+
+    .table__expander-button,
+    .table__expander-trigger {
+      box-shadow: $expanded-row-shadow;
+    }
+
+    .table__expander-button:hover,
+    .table__expander-trigger:hover {
+      background: var(--color-action-background-light-plus2-hover);
+      box-shadow: $expanded-row-shadow;
+    }
+
+    .table__expander-button:active,
+    .table__expander-trigger:active {
+      background: var(--color-action-background-light-plus2-active);
+      box-shadow: $expanded-row-shadow;
+    }
+
+    .table__pop-menu .table__pop-menu__trigger:hover {
+      background: var(--color-action-background-light-plus2-hover);
+    }
+
+    .table__pop-menu .table__pop-menu__trigger:active {
+      background: var(--color-action-background-light-plus2-active);
+    }
+  }
+}
+
+.table__cell-expander:focus-within,
+.table__cell-pop-menu:focus-within,
+.table__expander-cell-mobile:focus-within {
+  z-index: 1;
+}
+
+.table-body--zebra {
+  > .table__row:nth-child(even of .table__row:not(.table__row--expanded)) {
+    background: $zebra-background;
+
+    > .table__cell-expander,
+    > .table__cell-pop-menu,
+    > .table__expander-cell-mobile {
+      background: $zebra-background;
+    }
+
+    .table__expander-button:hover,
+    .table__expander-trigger:hover,
+    .table__pop-menu .table__pop-menu__trigger:hover {
+      background: $zebra-cell-hover;
+    }
+
+    .table__expander-button:active,
+    .table__expander-trigger:active,
+    .table__pop-menu .table__pop-menu__trigger:active {
+      background: $zebra-cell-active;
+    }
+  }
+}
+
+// Vises kun i stack-visning
+.table__detail {
+  display: none;
+}
+
+.table__expanded-row {
+  display: none;
+
+  &--expanded {
+    display: table-row;
+    background: var(--color-base-blueberry-background-light);
+  }
+
+  // Skjul-knappen ligger alltid på egen linje, også når innholdet inneholder knapper
+  &__cell > button:last-child {
+    display: flex;
+    width: fit-content;
+    margin-top: var(--core-space-xs);
+  }
+
+  // Kolonner bak expander vises i selve raden utenfor stack-visning
+  &--stack-only {
+    display: none;
+  }
+
+  &-details {
+    margin: 0;
+
+    dt {
+      font-weight: 600;
+    }
+
+    dd {
+      margin: 0 0 var(--core-space-2xs);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &-container {
+    padding: 0.5rem;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      &--open {
+        border-bottom: 1px solid var(--color-base-neutral-border-normal);
+      }
+    }
+  }
+
+  &__cell {
+    padding: var(--core-space-s);
+  }
+}