@norges-domstoler/dds-components 10.0.1 → 10.1.0

package/dist/components/ProgressTracker/ProgressTracker.tokens.js

@@ -2,7 +2,6 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var colors = ddsBaseTokens.colors,
   spacing = ddsBaseTokens.spacing;
-  ddsBaseTokens.font;
 var typographyTypes = {
   number: 'bodySans01',
   label: 'bodySans03'

package/dist/components/Search/Search.js

@@ -107,7 +107,7 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
     type: 'search',
     id: uniqueId,
     'aria-describedby': spaceSeparatedIdListGenerator([tip ? tipId : undefined, context.suggestions ? suggestionsDescriptionId : undefined, ariaDescribedby]),
-    value: context.inputValue !== undefined ? context.inputValue : value ? value : '',
+    value: context.inputValue !== undefined ? context.inputValue : value,
     onChange: handleChange,
     autoComplete: 'off'
   });

package/dist/components/Search/SearchAutocompleteWrapper.js

@@ -48,7 +48,7 @@ var SearchAutocompleteWrapper = function SearchAutocompleteWrapper(props) {
   };
   var handleChange = function handleChange(e) {
     var query = e.target.value;
-    setInputValue(query);
+    handleSetInputValue(query);
     var finalSuggestions = [];
     if (query.length >= queryLength) {
       if (data) {
@@ -82,10 +82,13 @@ var SearchAutocompleteWrapper = function SearchAutocompleteWrapper(props) {
   };
   var handleSuggestionClick = function handleSuggestionClick(e) {
     setSuggestions([]);
-    setInputValue(e.target.innerText);
+    handleSetInputValue(e.target.innerText);
     onSuggestionSelection && onSuggestionSelection();
     closeSuggestions();
   };
+  var handleSetInputValue = function handleSetInputValue(value) {
+    setInputValue(value || '');
+  };
   var inputRef = useRef(null);
   var suggestionsRef = useRef(null);
   useOnClickOutside([inputRef.current, suggestionsRef.current], function () {

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,37 @@
+import { stackTokens } from './Stack.tokens';
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type Align = 'stretch' | 'center' | 'flex-start' | 'flex-end';
+declare type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
+export interface StackStyleProps {
+    /**
+     * Hvilken retning elementene skal plasseres i.
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * CSS `align-items`.
+     * @default 'center'
+     */
+    align?: Align;
+    /**
+     * CSS `justify-content`.
+     * @default 'flex-start'
+     */
+    justify?: Justify;
+    /**
+     * Hvilken spacing token som skal brukes som CSS `gap`.
+     * @default 0
+     */
+    gap?: keyof typeof stackTokens.gap | 0;
+}
+export declare type StackProps = BaseComponentPropsWithChildren<HTMLDivElement, Omit<StackStyleProps, 'direction'>>;
+export declare const HStack: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Omit<StackStyleProps, "direction"> & {
+    children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const VStack: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Omit<StackStyleProps, "direction"> & {
+    children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Stack/Stack.js

@@ -0,0 +1,46 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { stackTokens } from './Stack.tokens.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Stack = styled.div.withConfig({
+  displayName: "Stack",
+  componentId: "sc-1a1z9ks-0"
+})(["display:flex;flex-direction:", ";align-items:", ";justify-content:", ";gap:", ";"], function (_ref) {
+  var direction = _ref.direction;
+  return direction === 'horizontal' ? 'row' : 'column';
+}, function (props) {
+  return props.align;
+}, function (props) {
+  return props.justify;
+}, function (props) {
+  return props.gap === undefined || props.gap === 0 ? '0' : stackTokens.gap[props.gap];
+});
+Stack.defaultProps = {
+  align: 'center',
+  justify: 'flex-start'
+};
+var HStack = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var id = _a.id,
+    className = _a.className,
+    htmlProps = _a.htmlProps,
+    rest = __rest(_a, ["id", "className", "htmlProps"]);
+  return jsx(Stack, Object.assign({
+    direction: "horizontal",
+    ref: ref
+  }, getBaseHTMLProps(id, className, htmlProps, rest)));
+});
+var VStack = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var id = _a.id,
+    className = _a.className,
+    htmlProps = _a.htmlProps,
+    rest = __rest(_a, ["id", "className", "htmlProps"]);
+  return jsx(Stack, Object.assign({
+    direction: "vertical",
+    ref: ref
+  }, getBaseHTMLProps(id, className, htmlProps, rest)));
+});
+
+export { HStack, VStack };

package/dist/components/Stack/Stack.stories.d.ts

@@ -0,0 +1,10 @@
+import { ComponentMeta } from '@storybook/react';
+import { StackProps } from './Stack';
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & Omit<import("./Stack").StackStyleProps, "direction"> & {
+    children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>>;
+export default _default;
+export declare const VStackOverview: (args: StackProps) => JSX.Element;
+export declare const HStackOverview: (args: StackProps) => JSX.Element;

package/dist/components/Stack/Stack.tokens.d.ts

@@ -0,0 +1,20 @@
+export declare const stackTokens: {
+    gap: {
+        'local-x0.125': string;
+        'local-x0.25': string;
+        'local-x0.5': string;
+        'local-x0.75': string;
+        'local-x1': string;
+        'local-x1.5': string;
+        'local-x2': string;
+        'local-x2.5': string;
+        'local-x3': string;
+        'layout-x1': string;
+        'layout-x1.5': string;
+        'layout-x2': string;
+        'layout-x3': string;
+        'layout-x4': string;
+        'layout-x6': string;
+        'layout-x10': string;
+    };
+};

package/dist/components/Stack/Stack.tokens.js

@@ -0,0 +1,26 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var spacing = ddsBaseTokens.spacing;
+var gapTokens = {
+  'local-x0.125': spacing.SizesDdsSpacingLocalX0125,
+  'local-x0.25': spacing.SizesDdsSpacingLocalX025,
+  'local-x0.5': spacing.SizesDdsSpacingLocalX05,
+  'local-x0.75': spacing.SizesDdsSpacingLocalX075,
+  'local-x1': spacing.SizesDdsSpacingLocalX1,
+  'local-x1.5': spacing.SizesDdsSpacingLocalX15,
+  'local-x2': spacing.SizesDdsSpacingLocalX2,
+  'local-x2.5': spacing.SizesDdsSpacingLocalX25,
+  'local-x3': spacing.SizesDdsSpacingLocalX3,
+  'layout-x1': spacing.SizesDdsSpacingLayoutX1,
+  'layout-x1.5': spacing.SizesDdsSpacingLayoutX15,
+  'layout-x2': spacing.SizesDdsSpacingLayoutX2,
+  'layout-x3': spacing.SizesDdsSpacingLayoutX3,
+  'layout-x4': spacing.SizesDdsSpacingLayoutX4,
+  'layout-x6': spacing.SizesDdsSpacingLayoutX6,
+  'layout-x10': spacing.SizesDdsSpacingLayoutX10
+};
+var stackTokens = {
+  gap: gapTokens
+};
+
+export { stackTokens };

package/dist/components/Stack/index.d.ts

@@ -0,0 +1 @@
+export * from './Stack';

package/dist/components/Table/Cell.d.ts

@@ -1,10 +1,15 @@
 import { ThHTMLAttributes, TdHTMLAttributes } from 'react';
 export declare type TableCellType = 'data' | 'head';
 export declare type TableCellLayout = 'left' | 'right' | 'center' | 'text and icon';
+export declare type CollapsibleProps = {
+    isCollapsibleChild?: boolean;
+};
 export declare type TableCellProps = {
     /**Type celle. Returnerer enten `<td>` eller `<th>`. */
     type?: TableCellType;
     /**Layout av innholdet i cellen. 'tekst and icon' legger `gap` mellom barna og andre barnet i cellen.  */
     layout?: TableCellLayout;
+    /** Props ved bruk av `<CollapsibleRow>`. **OBS!** settes automatisk av forelder. */
+    collapsibleProps?: CollapsibleProps;
 } & (TdHTMLAttributes<HTMLTableCellElement> | ThHTMLAttributes<HTMLTableCellElement>);
 export declare const Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/Table/Cell.js

@@ -2,10 +2,14 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import '../DescriptionList/DescriptionList.js';
+import '../DescriptionList/DescriptionListTerm.js';
+import { DescriptionListDesc } from '../DescriptionList/DescriptionListDesc.js';
+import '../DescriptionList/DescriptionListGroup.js';
 import { tableTokens } from './Table.tokens.js';
 
 var cell = tableTokens.cell;
-var layoutStyle = function layoutStyle(layout) {
+var getLayoutStyle = function getLayoutStyle(layout) {
   switch (layout) {
     case 'center':
       return css(["justify-content:center;"]);
@@ -30,7 +34,7 @@ var InnerCell = styled.div.withConfig({
   componentId: "sc-ghfpfs-1"
 })(["display:flex;align-items:center;", ""], function (_ref2) {
   var layout = _ref2.layout;
-  return layoutStyle(layout);
+  return getLayoutStyle(layout);
 });
 var getTableCellType = function getTableCellType(type) {
   switch (type) {
@@ -47,8 +51,11 @@ var Cell = /*#__PURE__*/forwardRef(function (_a, ref) {
     type = _a$type === void 0 ? 'data' : _a$type,
     _a$layout = _a.layout,
     layout = _a$layout === void 0 ? 'left' : _a$layout,
-    rest = __rest(_a, ["children", "type", "layout"]);
+    collapsibleProps = _a.collapsibleProps,
+    rest = __rest(_a, ["children", "type", "layout", "collapsibleProps"]);
   var as = getTableCellType(type);
+  var _ref3 = collapsibleProps || {},
+    isCollapsibleChild = _ref3.isCollapsibleChild;
   var cellProps = Object.assign({
     as: as,
     type: type
@@ -56,7 +63,9 @@ var Cell = /*#__PURE__*/forwardRef(function (_a, ref) {
   var innerCellProps = {
     layout: layout
   };
-  return jsx(StyledCell, Object.assign({
+  return isCollapsibleChild ? jsx(DescriptionListDesc, {
+    children: children
+  }) : jsx(StyledCell, Object.assign({
     ref: ref
   }, cellProps, {
     children: jsx(InnerCell, Object.assign({}, innerCellProps, {

package/dist/components/Table/Row.d.ts

@@ -1,23 +1,6 @@
-import { HTMLAttributes } from 'react';
-export declare type TableRowType = 'body' | 'head';
-export declare type RowMode = 'normal' | 'sum';
-export declare type TableRowProps = {
-    /**Spesifiserer om raden skal brukes i `<head>` eller `<body>`-seksjonen. */
-    type?: TableRowType;
-    /**Custom modus for rader som har ytterligere semantisk betydning (f.eks. summeringsrad), definerer kun styling. Ved bruk av sum må `<Cell>` med tall i høyrestilles vha layout prop.  */
-    mode?: RowMode;
-    /**Spesifiserer om raden har blitt valgt/markert. */
-    selected?: boolean;
-    /**Spesifiserer om raden skal ha hover styling. Brukes hovedsakelig på klikkbare rader. */
-    hoverable?: boolean;
-} & HTMLAttributes<HTMLTableRowElement>;
 export declare const Row: import("react").ForwardRefExoticComponent<{
-    /**Spesifiserer om raden skal brukes i `<head>` eller `<body>`-seksjonen. */
-    type?: TableRowType | undefined;
-    /**Custom modus for rader som har ytterligere semantisk betydning (f.eks. summeringsrad), definerer kun styling. Ved bruk av sum må `<Cell>` med tall i høyrestilles vha layout prop.  */
-    mode?: RowMode | undefined;
-    /**Spesifiserer om raden har blitt valgt/markert. */
+    type?: import("./Table.types").TableRowType | undefined;
+    mode?: import("./Table.types").RowMode | undefined;
     selected?: boolean | undefined;
-    /**Spesifiserer om raden skal ha hover styling. Brukes hovedsakelig på klikkbare rader. */
     hoverable?: boolean | undefined;
-} & HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
+} & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/components/Table/Row.js

@@ -1,32 +1,8 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { focusVisibleInset } from '../../helpers/styling/focusVisible.js';
-import '../../helpers/styling/hover.js';
-import '../../helpers/styling/focus.js';
-import '../../helpers/styling/danger.js';
-import '../../helpers/styling/selection.js';
-import { getFontStyling, defaultTypographyType } from '../Typography/Typography.utils.js';
-import { tableTokens } from './Table.tokens.js';
+import { StyledRow } from './Table.styles.js';
 
-var row = tableTokens.row;
-var bodyStyles = function bodyStyles(mode, selected) {
-  return css(["", " ", ""], mode === 'sum' && css(["font-weight:600;border-top:", ";border-bottom:", ";background-color:", ";"], row.body.mode.sum.borderTop, row.body.mode.sum.borderBottom, row.body.mode.sum.backgroundColor), selected && css(["background-color:", ";"], row.body.selected.backgroundColor));
-};
-var StyledRow = styled.tr.withConfig({
-  displayName: "Row__StyledRow",
-  componentId: "sc-15vvjkk-0"
-})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " ", " ", ""], getFontStyling(defaultTypographyType, true), function (_ref) {
-  var type = _ref.type;
-  return type === 'head' && css(["font-weight:600;text-align:left;"]);
-}, function (_ref2) {
-  var type = _ref2.type,
-    mode = _ref2.mode,
-    selected = _ref2.selected,
-    hoverable = _ref2.hoverable;
-  return type === 'body' && css(["&:nth-of-type(even){background-color:", ";", "}&:nth-of-type(odd){background-color:", ";", "}", " &:focus-visible,&.focus-visible{", "}"], row.body.even.backgroundColor, bodyStyles(mode, selected), row.body.odd.backgroundColor, bodyStyles(mode, selected), hoverable && css(["&:hover{background-color:", ";}"], row.body.hover.backgroundColor), focusVisibleInset);
-});
 var Row = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$type = _a.type,
     type = _a$type === void 0 ? 'body' : _a$type,

package/dist/components/Table/Table.d.ts

@@ -1,18 +1,6 @@
-import { HTMLAttributes } from 'react';
-export declare type TableDensity = 'normal' | 'compact';
-export declare type TableProps = {
-    /**Spesifiserer hvor romslige cellene i tabellen skal være. */
-    density?: TableDensity;
-    /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
-    stickyHeader?: boolean;
-    /**Legger skillelinjer mellom radene. */
-    withDividers?: boolean;
-} & HTMLAttributes<HTMLTableElement>;
+import { TableDensity } from './Table.types';
 export declare const Table: import("react").ForwardRefExoticComponent<{
-    /**Spesifiserer hvor romslige cellene i tabellen skal være. */
     density?: TableDensity | undefined;
-    /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
     stickyHeader?: boolean | undefined;
-    /**Legger skillelinjer mellom radene. */
     withDividers?: boolean | undefined;
-} & HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;
+} & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;

package/dist/components/Table/Table.js

@@ -22,7 +22,7 @@ var StyledTable = styled.table.withConfig({
   return css(["td,th{padding:", ";}"], cell.density[density].padding);
 }, function (_ref2) {
   var stickyHeader = _ref2.stickyHeader;
-  return stickyHeader && css(["tr[type='head']{th[type='head']{position:sticky;top:0;}}"]);
+  return stickyHeader && css(["tr[type='head']{th[type='head']{position:sticky;top:0;z-index:50;}}"]);
 }, function (_ref3) {
   var withDividers = _ref3.withDividers;
   return withDividers && css(["tr[type='body']{border-bottom:", ";}"], row.body.withDividers.borderBottom);

package/dist/components/Table/Table.stories.d.ts

@@ -2,7 +2,7 @@ import { TableProps, SortOrder } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        density?: import("./Table").TableDensity | undefined;
+        density?: import("./Table.types").TableDensity | undefined;
         stickyHeader?: boolean | undefined;
         withDividers?: boolean | undefined;
     } & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>> & {
@@ -11,8 +11,8 @@ declare const _default: {
         Body: import("react").ForwardRefExoticComponent<import("./Body").TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
         Foot: import("react").ForwardRefExoticComponent<import("./Foot").TableFootProps & import("react").RefAttributes<HTMLTableSectionElement>>;
         Row: import("react").ForwardRefExoticComponent<{
-            type?: import("./Row").TableRowType | undefined;
-            mode?: import("./Row").RowMode | undefined;
+            type?: import("./Table.types").TableRowType | undefined;
+            mode?: import("./Table.types").RowMode | undefined;
             selected?: boolean | undefined;
             hoverable?: boolean | undefined;
         } & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
@@ -38,7 +38,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: (args: TableProps) => JSX.Element;
-export declare const withDividers: (args: TableProps) => JSX.Element;
+export declare const WithDividers: (args: TableProps) => JSX.Element;
 export declare const Focusable: (args: TableProps) => JSX.Element;
 export declare const Compact: (args: TableProps) => JSX.Element;
 export declare const StickyHeader: (args: TableProps) => JSX.Element;

package/dist/components/Table/Table.styles.d.ts

@@ -0,0 +1,10 @@
+import { RowMode, TableRowType } from './Table.types';
+export declare const bodyRowStyles: (mode?: RowMode, selected?: boolean) => import("styled-components").FlattenSimpleInterpolation;
+declare type StyledProps = {
+    type: TableRowType;
+    mode?: RowMode;
+    selected?: boolean;
+    hoverable?: boolean;
+};
+export declare const StyledRow: import("styled-components").StyledComponent<"tr", any, StyledProps, never>;
+export {};

package/dist/components/Table/Table.styles.js

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+import { tableTokens } from './Table.tokens.js';
+import { focusVisibleInset } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import '../../helpers/styling/selection.js';
+import { getFontStyling, defaultTypographyType } from '../Typography/Typography.utils.js';
+
+var row = tableTokens.row;
+var bodyRowStyles = function bodyRowStyles(mode, selected) {
+  return css(["", " ", ""], mode === 'sum' && css(["font-weight:600;border-top:", ";border-bottom:", ";background-color:", ";"], row.body.mode.sum.borderTop, row.body.mode.sum.borderBottom, row.body.mode.sum.backgroundColor), selected && css(["background-color:", ";"], row.body.selected.backgroundColor));
+};
+var StyledRow = styled.tr.withConfig({
+  displayName: "Tablestyles__StyledRow",
+  componentId: "sc-1b057ci-0"
+})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " ", " ", ""], getFontStyling(defaultTypographyType, true), function (_ref) {
+  var type = _ref.type;
+  return type === 'head' && css(["font-weight:600;text-align:left;"]);
+}, function (_ref2) {
+  var type = _ref2.type,
+    mode = _ref2.mode,
+    selected = _ref2.selected,
+    hoverable = _ref2.hoverable;
+  return type === 'body' && css(["&:nth-of-type(even){background-color:", ";", "}&:nth-of-type(odd){background-color:", ";", "}", " &:focus-visible,&.focus-visible{", "}"], row.body.even.backgroundColor, bodyRowStyles(mode, selected), row.body.odd.backgroundColor, bodyRowStyles(mode, selected), hoverable && css(["&:hover{background-color:", ";}"], row.body.hover.backgroundColor), focusVisibleInset);
+});
+
+export { StyledRow, bodyRowStyles };

package/dist/components/Table/Table.tokens.d.ts

@@ -50,4 +50,9 @@ export declare const tableTokens: {
             };
         };
     };
+    collapseButton: {
+        height: string;
+        width: string;
+        borderRadius: string;
+    };
 };

package/dist/components/Table/Table.tokens.js

@@ -2,7 +2,9 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var colors = ddsBaseTokens.colors,
   border = ddsBaseTokens.border,
-  spacing = ddsBaseTokens.spacing;
+  spacing = ddsBaseTokens.spacing,
+  iconSizes = ddsBaseTokens.iconSizes,
+  borderRadius = ddsBaseTokens.borderRadius;
 var row = {
   body: {
     odd: {
@@ -54,9 +56,15 @@ var cell = {
     }
   }
 };
+var collapseButton = {
+  height: iconSizes.DdsIconsizeMedium,
+  width: iconSizes.DdsIconsizeMedium,
+  borderRadius: borderRadius.RadiiDdsBorderRadius1Radius
+};
 var tableTokens = {
   row: row,
-  cell: cell
+  cell: cell,
+  collapseButton: collapseButton
 };
 
 export { tableTokens };

package/dist/components/Table/Table.types.d.ts

@@ -0,0 +1,37 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export declare type TableDensity = 'normal' | 'compact';
+export declare type TableProps = {
+    /**Spesifiserer hvor romslige cellene i tabellen skal være. */
+    density?: TableDensity;
+    /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
+    stickyHeader?: boolean;
+    /**Legger skillelinjer mellom radene. */
+    withDividers?: boolean;
+} & HTMLAttributes<HTMLTableElement>;
+export declare type HeaderValues = {
+    key: string;
+    content: ReactNode;
+}[];
+export declare type CollapsibleTableProps = {
+    /**Om tabellen skal kollapse. */
+    isCollapsed?: boolean;
+    /**Innhold i headere (`content`) og deres `key`. `headerValues.content` må være den samme som faktisk innhold i `<Table.Cell type='head'>`. */
+    headerValues: HeaderValues;
+    /**
+     * Indeksen(e) til kolonnen(e) som skal synes når tabellen er kollapset. Rekkefølgen i array avgjør rekkefølgen i render.
+     * @default [0]
+     *  */
+    definingColumnIndex?: number[];
+} & TableProps;
+export declare type TableRowType = 'body' | 'head';
+export declare type RowMode = 'normal' | 'sum';
+export declare type TableRowProps = {
+    /**Spesifiserer om raden skal brukes i `<head>` eller `<body>`-seksjonen. */
+    type?: TableRowType;
+    /**Custom modus for rader som har ytterligere semantisk betydning (f.eks. summeringsrad), definerer kun styling. Ved bruk av sum må `<Cell>` med tall i høyrestilles vha layout prop.  */
+    mode?: RowMode;
+    /**Spesifiserer om raden har blitt valgt/markert. */
+    selected?: boolean;
+    /**Spesifiserer om raden skal ha hover styling. Brukes hovedsakelig på klikkbare rader. */
+    hoverable?: boolean;
+} & HTMLAttributes<HTMLTableRowElement>;

package/dist/components/Table/collapsible/CollapsibleRow.d.ts

@@ -0,0 +1,6 @@
+export declare const CollapsibleRow: import("react").ForwardRefExoticComponent<{
+    type?: import("../Table.types").TableRowType | undefined;
+    mode?: import("../Table.types").RowMode | undefined;
+    selected?: boolean | undefined;
+    hoverable?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;