@helsenorge/designsystem-react 15.7.2 → 16.1.0

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

@@ -3,7 +3,6 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 .toggle-container {
   $toggle-container: &;
@@ -92,7 +91,7 @@
     word-break: break-all;
 
     &--checked {
-      color: var(--color-action-text-onlight);
+      color: var(--color-action-text-dark-normal);
     }
 
     #{$toggle-container}--disabled & {
@@ -118,12 +117,12 @@
     display: inline-block;
     width: 2.75rem;
     height: 1.75rem;
-    background-color: var(--color-base-background-white);
+    background-color: var(--color-base-background-light);
     border-radius: 60px;
-    border: 2px solid var(--color-base-border-onlight-emphasized);
+    border: 2px solid var(--color-base-emphasized-border-dark);
 
     #{$toggle-container}--disabled & {
-      color: var(--color-disabled-border);
+      color: var(--color-disabled-border-dark);
       border-style: dashed;
     }
 
@@ -142,7 +141,7 @@
       height: 1.125rem;
       left: 3px;
       bottom: 3px;
-      background-color: var(--brandcolor-neutral-dark);
+      background-color: var(--brand-color-neutral-dark);
       border-radius: 50%;
       display: flex;
       align-items: center;
@@ -154,7 +153,7 @@
 
       &__icon {
         opacity: 0;
-        stroke: var(--color-action-graphics-onlight);
+        stroke: var(--color-action-graphics-dark-normal);
 
         #{$toggle-container}--disabled & {
           stroke: var(--core-color-white);
@@ -170,8 +169,8 @@
     height: 0;
 
     &:focus-visible + .toggle-container__toggle {
-      border-color: var(--color-action-border-onlight-focus);
-      outline: 2px solid var(--color-action-border-onlight-focus);
+      border-color: var(--color-action-border-dark-focus);
+      outline: 2px solid var(--color-action-border-dark-focus);
 
       &::after {
         content: '';
@@ -179,7 +178,7 @@
         width: 100%;
         height: 100%;
         border-radius: 60px;
-        border: 1px solid var(--color-action-border-ondark-focus);
+        border: 1px solid var(--color-action-border-light-focus);
       }
     }
   }

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

@@ -0,0 +1,9 @@
+interface StackedCellContentProps {
+    /** Heading shown before the content in the stack variant */
+    headingText?: string;
+    /** The content */
+    children?: React.ReactNode;
+}
+/** Heading + content as rendered in a stacked cell. Shared by UNSAFE_TableCell and UNSAFE_TableDetail. */
+export declare const StackedCellContent: React.FC<StackedCellContentProps>;
+export default StackedCellContent;

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

@@ -0,0 +1,10 @@
+export interface TableCaptionProps {
+    /** Unique ID. Can be used with aria-labelledby, e.g. for the scroll container. */
+    id?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the caption. */
+    children: React.ReactNode;
+}
+export declare const TableCaption: React.FC<TableCaptionProps>;
+export default TableCaption;

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

@@ -0,0 +1,22 @@
+import { HNDesignsystemTable } from '../../resources/Resources';
+import { ResponsiveTableVariant, TableColors, TableSizes } from './constants';
+export interface TableContextValue {
+    /** Resolved responsive variant for the current breakpoint. */
+    variant: keyof typeof ResponsiveTableVariant;
+    /** Header category for styling. */
+    color: TableColors;
+    /** For display with less space. */
+    size: TableSizes;
+    /** Whether zebra stripes are enabled. Applied by UNSAFE_TableBody, which can also override it. */
+    zebraStripes: boolean;
+    /** Indexes of the columns marked with hideBehindExpander on their UNSAFE_TableHeadCell. */
+    hiddenColumns: number[];
+    /** Text of each column's UNSAFE_TableHeadCell, used as the default heading of cells in the stack variant. */
+    headingTexts: string[];
+    /** Resource texts of the Table. */
+    resources: HNDesignsystemTable;
+}
+/** Table-wide configuration provided by UNSAFE_Table. */
+export declare const TableContext: import('react').Context<TableContextValue>;
+/** Heading of the column a cell belongs to. Provided per cell by UNSAFE_TableRow. */
+export declare const CellHeadingContext: import('react').Context<string>;

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

@@ -0,0 +1,37 @@
+import { HNDesignsystemTable } from '../../resources/Resources';
+import { ResponsiveTableVariant, TableColors, TableSizes } from './constants';
+import { Breakpoint } from '../../hooks/useBreakpoint';
+export interface BreakpointConfig {
+    /** Breakpoint at which responsive behaviour will be applied. The table component uses a "desktop first" approach. */
+    breakpoint: keyof typeof Breakpoint;
+    /** Desired behaviour on this breakpoint and all smaller screens. */
+    variant: keyof typeof ResponsiveTableVariant;
+    /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */
+    fallbackVariant?: keyof typeof ResponsiveTableVariant;
+}
+export interface UNSAFE_TableProps extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {
+    /** Customize how the table behaves on various screen widths */
+    breakpointConfig?: BreakpointConfig | BreakpointConfig[];
+    /** Description of the table for screen readers. Rendered as a visually hidden caption and used to label the scroll container. */
+    caption: string;
+    /** Sets the content of the table. Use TableHead and UNSAFE_TableBody */
+    children: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Header category for styling. Default: normal */
+    color?: TableColors;
+    /** Unique ID */
+    id?: string;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemTable>;
+    /** For display with less space. Discouraged to use together with interactive elements. */
+    size?: TableSizes;
+    /** 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. */
+    stackHeadWidth?: number;
+    /** Id used for testing */
+    testId?: string;
+    /** Applies zebra stripes to every other row. Default: false */
+    zebraStripes?: boolean;
+}
+export declare const UNSAFE_Table: React.FC<UNSAFE_TableProps>;
+export default UNSAFE_Table;

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

@@ -0,0 +1,10 @@
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the table body. Use TableRows */
+    children?: React.ReactNode;
+    /** Applies zebra stripes to every other row. Overrides the value from UNSAFE_Table. */
+    zebraStripes?: boolean;
+}
+export declare const UNSAFE_TableBody: React.FC<Props>;
+export default UNSAFE_TableBody;

package/lib/components/UNSAFE_Table/UNSAFE_TableBody/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableBody } from './UNSAFE_TableBody';
+export * from './UNSAFE_TableBody';
+export default UNSAFE_TableBody;

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

@@ -0,0 +1,2 @@
+import { n as UNSAFE_TableBody, t as UNSAFE_TableBody_default } from "../../../UNSAFE_TableBody.js";
+export { UNSAFE_TableBody, UNSAFE_TableBody_default as default };

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

@@ -0,0 +1,15 @@
+import { TextAlign } from '../constants';
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {
+    /**  text align in cell */
+    textAlign?: TextAlign;
+    /**  nowrap for white space */
+    nowrap?: boolean;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the table cell */
+    children?: React.ReactNode;
+    /** For test purposes */
+    testId?: string;
+}
+export declare const UNSAFE_TableCell: React.FC<Props>;
+export default UNSAFE_TableCell;

package/lib/components/UNSAFE_Table/UNSAFE_TableCell/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableCell } from './UNSAFE_TableCell';
+export * from './UNSAFE_TableCell';
+export default UNSAFE_TableCell;

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

@@ -0,0 +1,7 @@
+import { t as UNSAFE_TableCell } from "../../../UNSAFE_TableCell.js";
+//#region src/components/UNSAFE_Table/UNSAFE_TableCell/index.ts
+var UNSAFE_TableCell_default = UNSAFE_TableCell;
+//#endregion
+export { UNSAFE_TableCell, UNSAFE_TableCell_default as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/UNSAFE_Table/UNSAFE_TableCell/index.ts"],"sourcesContent":["import UNSAFE_TableCell from './UNSAFE_TableCell';\nexport * from './UNSAFE_TableCell';\nexport default UNSAFE_TableCell;\n"],"mappings":";;AAEA,IAAA,2BAAe"}

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

@@ -0,0 +1,12 @@
+export interface Props {
+    /** Heading shown before the content */
+    headingText: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** The content, typically the value of a column hidden with hideBehindExpander */
+    children?: React.ReactNode;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const UNSAFE_TableDetail: React.FC<Props>;
+export default UNSAFE_TableDetail;

package/lib/components/UNSAFE_Table/UNSAFE_TableDetail/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableDetail } from './UNSAFE_TableDetail';
+export * from './UNSAFE_TableDetail';
+export default UNSAFE_TableDetail;

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

@@ -0,0 +1,7 @@
+import { t as UNSAFE_TableDetail } from "../../../UNSAFE_TableDetail.js";
+//#region src/components/UNSAFE_Table/UNSAFE_TableDetail/index.ts
+var UNSAFE_TableDetail_default = UNSAFE_TableDetail;
+//#endregion
+export { UNSAFE_TableDetail, UNSAFE_TableDetail_default as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/UNSAFE_Table/UNSAFE_TableDetail/index.ts"],"sourcesContent":["import UNSAFE_TableDetail from './UNSAFE_TableDetail';\nexport * from './UNSAFE_TableDetail';\nexport default UNSAFE_TableDetail;\n"],"mappings":";;AAEA,IAAA,6BAAe"}

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface Props {
+    /** Row is expanded. */
+    expanded: boolean;
+    /** When hide button inside expanded row is clicked. */
+    toggleClick: () => void;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the expanded row.  */
+    children: React.ReactNode;
+    /** Only display the expanded row in the stack variant. */
+    stackOnly?: boolean;
+    /** Row id. For use with aria-controls. */
+    id?: string;
+}
+export declare const UNSAFE_TableExpandedRow: ({ expanded, toggleClick, children, className, stackOnly, id }: Props) => React.JSX.Element;
+export default UNSAFE_TableExpandedRow;

package/lib/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableExpandedRow } from './UNSAFE_TableExpandedRow';
+export * from './UNSAFE_TableExpandedRow';
+export default UNSAFE_TableExpandedRow;

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

@@ -0,0 +1,7 @@
+import { t as UNSAFE_TableExpandedRow } from "../../../UNSAFE_TableExpandedRow.js";
+//#region src/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.ts
+var UNSAFE_TableExpandedRow_default = UNSAFE_TableExpandedRow;
+//#endregion
+export { UNSAFE_TableExpandedRow, UNSAFE_TableExpandedRow_default as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.ts"],"sourcesContent":["import UNSAFE_TableExpandedRow from './UNSAFE_TableExpandedRow';\nexport * from './UNSAFE_TableExpandedRow';\nexport default UNSAFE_TableExpandedRow;\n"],"mappings":";;AAEA,IAAA,kCAAe"}

package/lib/components/UNSAFE_Table/UNSAFE_TableExpanderCell/UNSAFE_TableExpanderCellMobile.d.ts

@@ -0,0 +1,4 @@
+import { Props } from '../UNSAFE_TableRow/UNSAFE_TableRow';
+type UNSAFE_TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'expandableRowId'>;
+declare const UNSAFE_TableExpanderCellMobile: React.FC<UNSAFE_TableExpanderCellMobileProps>;
+export default UNSAFE_TableExpanderCellMobile;

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

@@ -0,0 +1,8 @@
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the thead. Add table rows  */
+    children: React.ReactNode;
+}
+export declare const UNSAFE_TableHead: React.FC<Props>;
+export default UNSAFE_TableHead;

package/lib/components/UNSAFE_Table/UNSAFE_TableHead/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableHead } from './UNSAFE_TableHead';
+export * from './UNSAFE_TableHead';
+export default UNSAFE_TableHead;

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

@@ -0,0 +1,7 @@
+import { t as UNSAFE_TableHead } from "../../../UNSAFE_TableHead.js";
+//#region src/components/UNSAFE_Table/UNSAFE_TableHead/index.ts
+var UNSAFE_TableHead_default = UNSAFE_TableHead;
+//#endregion
+export { UNSAFE_TableHead, UNSAFE_TableHead_default as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/UNSAFE_Table/UNSAFE_TableHead/index.ts"],"sourcesContent":["import UNSAFE_TableHead from './UNSAFE_TableHead';\nexport * from './UNSAFE_TableHead';\nexport default UNSAFE_TableHead;\n"],"mappings":";;AAEA,IAAA,2BAAe"}

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

@@ -0,0 +1,15 @@
+import { SortDirection } from '../constants';
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {
+    /** Sort direction  */
+    sortDir?: SortDirection;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the td element.  */
+    children?: React.ReactNode;
+    /** Sets the width of the column, e.g. '10rem', '25%' or a number of pixels. Ignored in the stack variant. */
+    width?: string | number;
+    /** In the stack variant, hides the cells of this column and shows the column heading + content in an automatically rendered expanded row. */
+    hideBehindExpander?: boolean;
+}
+export declare const UNSAFE_TableHeadCell: React.FC<Props>;
+export default UNSAFE_TableHeadCell;

package/lib/components/UNSAFE_Table/UNSAFE_TableHeadCell/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableHeadCell } from './UNSAFE_TableHeadCell';
+export * from './UNSAFE_TableHeadCell';
+export default UNSAFE_TableHeadCell;

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

@@ -0,0 +1,2 @@
+import { n as UNSAFE_TableHeadCell, t as UNSAFE_TableHeadCell_default } from "../../../UNSAFE_TableHeadCell.js";
+export { UNSAFE_TableHeadCell, UNSAFE_TableHeadCell_default as default };

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { PopMenuProps } from '../../PopMenu';
+export interface UNSAFE_TablePopMenuCellProps {
+    /** PopMenu shown inside the cell. Fills the entire cell. */
+    children: React.ReactElement<PopMenuProps>;
+}
+declare const UNSAFE_TablePopMenuCell: React.FC<UNSAFE_TablePopMenuCellProps>;
+export default UNSAFE_TablePopMenuCell;

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { PopMenuProps } from '../../PopMenu';
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {
+    /** 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. */
+    expandedContent?: React.ReactNode;
+    /** Sets if expanded row is expanded */
+    expanded?: boolean;
+    /** Id of the expanded row this row controls. For use with aria-controls on the expander button. */
+    expandableRowId?: string;
+    /** When hide/show button for expanded row is clicked. */
+    onClick?: () => void;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the cells of the table row element.  */
+    children?: React.ReactNode;
+    /** 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. */
+    popMenu?: React.ReactElement<PopMenuProps>;
+}
+export declare const UNSAFE_TableRow: React.FC<Props>;
+export default UNSAFE_TableRow;

package/lib/components/UNSAFE_Table/UNSAFE_TableRow/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableRow } from './UNSAFE_TableRow';
+export * from './UNSAFE_TableRow';
+export default UNSAFE_TableRow;

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

@@ -0,0 +1,2 @@
+import { n as UNSAFE_TableRow, t as UNSAFE_TableRow_default } from "../../../UNSAFE_TableRow.js";
+export { UNSAFE_TableRow, UNSAFE_TableRow_default as default };

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

@@ -0,0 +1,29 @@
+import { BreakpointConfig } from './UNSAFE_Table';
+export declare enum SortDirection {
+    asc = "asc",
+    desc = "desc"
+}
+export declare enum TableColors {
+    normal = "normal",
+    transparent = "transparent"
+}
+export declare enum TextAlign {
+    left = "left",
+    center = "center",
+    right = "right"
+}
+export declare enum ResponsiveTableVariant {
+    /** Normal table grid */
+    normal = "normal",
+    /** Collapse to two columns. */
+    stack = "stack",
+    /** Overflow parent container to the left and right while remaining centered horizontally. */
+    centeredoverflow = "centeredoverflow",
+    /** Show horizontal scrollbar when table is too big for the screen. */
+    horizontalscroll = "horizontalscroll"
+}
+export declare enum TableSizes {
+    normal = "normal",
+    compact = "compact"
+}
+export declare const defaultConfig: BreakpointConfig[];

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

@@ -0,0 +1,19 @@
+export { TableCaption } from './TableCaption';
+export * from './UNSAFE_Table';
+export * from './TableCaption';
+export * from './useTableExpandedRows';
+export * from './useTableShowMore';
+export * from '../../hooks/useSort';
+export { UNSAFE_TableRow } from './UNSAFE_TableRow';
+export type { Props as UNSAFE_TableRowProps } from './UNSAFE_TableRow';
+export { UNSAFE_TableCell } from './UNSAFE_TableCell';
+export type { Props as UNSAFE_TableCellProps } from './UNSAFE_TableCell';
+export { UNSAFE_TableBody } from './UNSAFE_TableBody';
+export type { Props as UNSAFE_TableBodyProps } from './UNSAFE_TableBody';
+export { UNSAFE_TableHeadCell } from './UNSAFE_TableHeadCell';
+export type { Props as UNSAFE_TableHeadCellProps } from './UNSAFE_TableHeadCell';
+export { UNSAFE_TableHead } from './UNSAFE_TableHead';
+export type { Props as UNSAFE_TableHeadProps } from './UNSAFE_TableHead';
+export { SortDirection, TableColors, TableSizes, TextAlign, ResponsiveTableVariant, defaultConfig } from './constants';
+export type { BreakpointConfig } from './UNSAFE_Table';
+export { UNSAFE_Table as default } from './UNSAFE_Table';

package/lib/components/UNSAFE_Table/index.js

@@ -0,0 +1,182 @@
+import { LanguageLocales } from "../../constants.js";
+import { useLanguage } from "../../hooks/useLanguage.js";
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+import { useLayoutEvent } from "../../hooks/useLayoutEvent.js";
+import { t as HorizontalScroll_default } from "../../HorizontalScroll.js";
+import { a as TextAlign, i as TableSizes, n as SortDirection, o as defaultConfig, r as TableColors, t as ResponsiveTableVariant } from "../../constants3.js";
+import { n as TableContext, r as HN_Designsystem_Table_nb_NO_default } from "../../TableContext.js";
+import { t as UNSAFE_TableHead } from "../../UNSAFE_TableHead.js";
+import { a as getCenteredOverflowTableStyle, c as getHiddenColumns, i as getBreakpointClass, l as omitProps, n as UNSAFE_TableHeadCell, o as getColumnHeadingTexts, r as getAvailableWidth, s as getCurrentConfig } from "../../UNSAFE_TableHeadCell.js";
+import { useSynchronousResizeObserver } from "../../hooks/useSynchronousResizeObserver.js";
+import { useSort } from "../../hooks/useSort.js";
+import { t as UNSAFE_TableCell } from "../../UNSAFE_TableCell.js";
+import { n as UNSAFE_TableRow } from "../../UNSAFE_TableRow.js";
+import "./UNSAFE_TableCell/index.js";
+import { n as UNSAFE_TableBody } from "../../UNSAFE_TableBody.js";
+import "./UNSAFE_TableHead/index.js";
+import classNames from "classnames";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+//#region src/components/UNSAFE_Table/TableCaption.tsx
+var TableCaption = ({ id, className, children }) => /* @__PURE__ */ jsx("caption", {
+	id,
+	className: classNames(styles["table-caption"], className),
+	children
+});
+//#endregion
+//#region src/components/UNSAFE_Table/resourceHelper.ts
+var getResources = (language) => {
+	switch (language) {
+		case LanguageLocales.NORWEGIAN:
+		default: return HN_Designsystem_Table_nb_NO_default;
+	}
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_Table.tsx
+var UNSAFE_Table = ({ breakpointConfig = defaultConfig, caption, children, className, color, id, resources, size = TableSizes.normal, stackHeadWidth, testId, zebraStripes = false, ...rest }) => {
+	const captionElementId = useId();
+	const [tableWidth, setTableWidth] = useState(0);
+	const [parentWidth, setParentWidth] = useState(0);
+	const [windowWidth, setWindowWidth] = useState(document.documentElement.clientWidth || window.innerWidth);
+	const tableRef = useRef(null);
+	const breakpoint = useBreakpoint();
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const mergedResources = {
+		...getResources(language),
+		...resources
+	};
+	const currentConfig = useMemo(() => getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth), [
+		breakpointConfig,
+		breakpoint,
+		tableWidth,
+		windowWidth
+	]);
+	useSynchronousResizeObserver(tableRef, (tableElement, parentElement) => {
+		if (currentConfig?.variant !== ResponsiveTableVariant.stack) setTableWidth(tableElement.getBoundingClientRect().width);
+		const parentStyle = getComputedStyle(parentElement);
+		const horizontalSpacing = [
+			parentStyle.paddingLeft,
+			parentStyle.paddingRight,
+			parentStyle.borderLeftWidth,
+			parentStyle.borderRightWidth
+		].reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);
+		setParentWidth(Math.max(0, parentElement.getBoundingClientRect().width - horizontalSpacing));
+		setWindowWidth(getAvailableWidth(parentElement));
+	}, [currentConfig?.variant]);
+	useLayoutEvent(() => {
+		if (tableRef.current?.parentElement) setWindowWidth(getAvailableWidth(tableRef.current.parentElement));
+	}, ["resize"], 100);
+	const tableStyle = currentConfig?.variant === ResponsiveTableVariant.centeredoverflow || stackHeadWidth !== void 0 ? {
+		...currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : void 0,
+		...stackHeadWidth !== void 0 ? { "--table-stack-columns": `${stackHeadWidth}% minmax(0, 1fr)` } : void 0
+	} : void 0;
+	const breakpointClass = getBreakpointClass(currentConfig);
+	const tableClass = classNames(styles.table, breakpointClass, className);
+	const domRest = omitProps(rest, [
+		"breakpoint",
+		"variant",
+		"fallbackVariant",
+		"headerCategory"
+	]);
+	const hiddenColumns = useMemo(() => getHiddenColumns(children), [children]);
+	const headingTexts = useMemo(() => getColumnHeadingTexts(children), [children]);
+	const tableContext = useMemo(() => ({
+		variant: currentConfig?.variant ?? ResponsiveTableVariant.normal,
+		color: color ?? TableColors.normal,
+		size,
+		zebraStripes,
+		hiddenColumns,
+		headingTexts,
+		resources: mergedResources
+	}), [
+		currentConfig?.variant,
+		color,
+		size,
+		zebraStripes,
+		hiddenColumns,
+		headingTexts
+	]);
+	const table = /* @__PURE__ */ jsxs("table", {
+		className: tableClass,
+		id,
+		"data-testid": testId,
+		ref: tableRef,
+		style: tableStyle,
+		...domRest,
+		children: [/* @__PURE__ */ jsx(TableCaption, {
+			id: captionElementId,
+			children: caption
+		}), children]
+	});
+	return /* @__PURE__ */ jsx(TableContext.Provider, {
+		value: tableContext,
+		children: currentConfig?.variant === ResponsiveTableVariant.horizontalscroll ? /* @__PURE__ */ jsx(HorizontalScroll_default, {
+			testId: "horizontal-scroll",
+			"aria-labelledby": captionElementId,
+			children: table
+		}) : table
+	});
+};
+//#endregion
+//#region src/components/UNSAFE_Table/useTableExpandedRows.ts
+/** Expanded state per row for tables with expandable rows (UNSAFE_TableRow expandedContent/hideBehindExpander). */
+var useTableExpandedRows = () => {
+	const [expandedRows, setExpandedRows] = useState({});
+	const isExpanded = (rowKey) => !!expandedRows[rowKey];
+	const toggleExpanded = (rowKey) => {
+		setExpandedRows((prev) => ({
+			...prev,
+			[rowKey]: !prev[rowKey]
+		}));
+	};
+	const collapseAll = () => {
+		setExpandedRows({});
+	};
+	return {
+		expandedRows,
+		isExpanded,
+		toggleExpanded,
+		collapseAll
+	};
+};
+//#endregion
+//#region src/components/UNSAFE_Table/useTableShowMore.ts
+/** Progressive disclosure ("show more") of table rows, with focus management when the show more button disappears. */
+var useTableShowMore = ({ data, pageSize }) => {
+	const [visibleCount, setVisibleCount] = useState(pageSize);
+	const [newRowsStartIndex, setNewRowsStartIndex] = useState();
+	const firstNewRowRef = useRef(null);
+	const shouldFocusNewRow = useRef(false);
+	const visibleData = useMemo(() => visibleCount === void 0 ? data : data.slice(0, visibleCount), [data, visibleCount]);
+	const hasMore = visibleCount !== void 0 && visibleCount < data.length;
+	const showMore = () => {
+		if (visibleCount === void 0 || pageSize === void 0) return;
+		const newCount = Math.min(visibleCount + pageSize, data.length);
+		shouldFocusNewRow.current = newCount >= data.length;
+		setNewRowsStartIndex(visibleCount);
+		setVisibleCount(newCount);
+	};
+	useEffect(() => {
+		if (shouldFocusNewRow.current) {
+			shouldFocusNewRow.current = false;
+			firstNewRowRef.current?.focus();
+		}
+	}, [visibleCount]);
+	const reset = () => {
+		setVisibleCount(pageSize);
+		setNewRowsStartIndex(void 0);
+	};
+	return {
+		visibleData,
+		hasMore,
+		showMore,
+		reset,
+		newRowsStartIndex,
+		firstNewRowRef
+	};
+};
+//#endregion
+export { ResponsiveTableVariant, SortDirection, TableCaption, TableColors, TableSizes, TextAlign, UNSAFE_Table, UNSAFE_Table as default, UNSAFE_TableBody, UNSAFE_TableCell, UNSAFE_TableHead, UNSAFE_TableHeadCell, UNSAFE_TableRow, defaultConfig, useSort, useTableExpandedRows, useTableShowMore };
+
+//# sourceMappingURL=index.js.map