@digdir/designsystemet-react 1.0.0-rc.9 → 1.0.0

package/dist/esm/components/Select/SelectOptgroup.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+/**
+ * SelectOptgroup component, used to display a native optgroup within a select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Optgroup label='Group 1'>
+ *     <Select.Option value='1'>Option 1</Select.Option>
+ *     <Select.Option value='2'>Option 2</Select.Option>
+ *   </Select.Optgroup>
+ * </Select>
+ */
+const SelectOptgroup = forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'optgroup';
+    return jsx(Component, { ...rest, ref: ref });
+});
+
+export { SelectOptgroup };

package/dist/esm/components/Select/SelectOption.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+/**
+ * SelectOption component, used to display a native option within a select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
+const SelectOption = forwardRef(function SelectOption({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'option';
+    return jsx(Component, { ...rest, ref: ref });
+});
+
+export { SelectOption };

package/dist/esm/components/Select/index.js

@@ -0,0 +1,22 @@
+'use client';
+import { Select as Select$1 } from './Select.js';
+import { SelectOptgroup } from './SelectOptgroup.js';
+import { SelectOption } from './SelectOption.js';
+
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
+const Select = Object.assign(Select$1, {
+    Option: SelectOption,
+    Optgroup: SelectOptgroup,
+});
+Select.Option.displayName = 'Select.Option';
+Select.Optgroup.displayName = 'Select.Optgroup';
+
+export { Select, SelectOptgroup, SelectOption };

package/dist/esm/components/Skeleton/Skeleton.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+import { useSynchronizedAnimation } from '../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
+
+/**
+ * Skeleton is used to represent a draft of page while the content loads.
+ *
+ * @example
+ * <Skeleton variant="circle" />
+ * <Skeleton variant="text" />
+ * <Skeleton variant="rectangle" />
+ */
+const Skeleton = forwardRef(function Skeleton({ asChild, className, height, style, variant = 'rectangle', width, ...rest }, ref) {
+    const Component = asChild ? Slot : 'span';
+    const isText = variant === 'text';
+    const animationRef = useSynchronizedAnimation('ds-skeleton-opacity-fade');
+    const mergedRefs = useMergeRefs([animationRef, ref]);
+    return (jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-text": isText ? '-'.repeat(Number(width) || 1) : undefined, "data-variant": variant, ref: mergedRefs, style: isText ? style : { width, height, ...style }, ...rest }));
+});
+
+export { Skeleton };

package/dist/esm/components/SkipLink/SkipLink.js

@@ -1,10 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
 
-const SkipLink = ({ href, children, className, ...rest }) => {
-    return (jsx("a", { href: href, className: clsx(`ds-sr-only`, 'ds-skiplink', className), ...rest, children: jsx("p", { className: 'ds-skiplink__content', children: children }) }));
-};
-SkipLink.displayName = 'SkipLink';
+/**
+ * SkipLink component, used to display a skip link within the page.
+ * Place it at the top of the page to allow users to skip to the main content.
+ *
+ * @example
+ * <SkipLink href='#main-content'>Skip to main content</SkipLink>
+ */
+const SkipLink = forwardRef(function SkipLink({ children, className, ...rest }, ref) {
+    return (jsx("a", { className: cl('ds-skiplink', className), ...rest, ref: ref, children: children }));
+});
 
 export { SkipLink };

package/dist/esm/components/Spinner/Spinner.js

@@ -1,22 +1,21 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { useSynchronizedAnimation } from '../../hooks/useSynchronizedAnimation.js';
+import { useMergeRefs } from '@floating-ui/react';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+import { useSynchronizedAnimation } from '../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
 
-const sizeMap = {
-    '2xs': 13,
-    xs: 20,
-    sm: 27,
-    md: 40,
-    lg: 56,
-    xl: 79,
-};
-/**  Spinner component used for indicating busy or indeterminate loading */
-const Spinner = ({ title, color = 'neutral', size = 'md', className, style, ...rest }) => {
+/**
+ * Spinner component used for indicating busy or indeterminate loading.
+ *
+ * @example
+ * <Spinner aria-label='Loading users...' />
+ */
+const Spinner = forwardRef(function Spinner({ 'aria-label': ariaLabel, className, ...rest }, ref) {
     const svgRef = useSynchronizedAnimation('ds-spinner-rotate-animation');
     const strokeRef = useSynchronizedAnimation('ds-spinner-stroke-animation');
-    return (jsxs("svg", { className: clsx('ds-spinner', `ds-spinner--${color}`, className), style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsx("title", { children: title }), jsx("circle", { className: clsx('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: clsx(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
-};
-Spinner.displayName = 'Spinner';
+    const mergedRefs = useMergeRefs([svgRef, ref]);
+    return (jsxs("svg", { "aria-label": ariaLabel, className: cl('ds-spinner', className), ref: mergedRefs, role: 'img', viewBox: '0 0 50 50', ...rest, children: [jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+});
 
 export { Spinner };

package/dist/esm/components/Suggestion/Suggestion.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { getDatalistValue, syncDatalistState } from '@u-elements/u-datalist';
+import cl from 'clsx/lite';
+import { forwardRef, createContext, useState, useId, useRef, useCallback } from 'react';
+
+const SuggestionContext = createContext({});
+/**
+ * A component that provides a suggestion list for an input field.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List>
+ *     <Suggestion.Empty>Tomt</Suggestion.Empty>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
+const Suggestion = forwardRef(function Suggestion({ className, filter = true, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    const [listId, setListId] = useState(useId());
+    const inputRef = useRef(null);
+    const handleFilter = useCallback((input) => {
+        const list = input?.list;
+        // Let <datalist> handle filtering if filter is true
+        if (filter === true || !list)
+            return;
+        console.log(list);
+        // Handle custom filter
+        if (filter !== false) {
+            let index = 0;
+            for (const option of list.getElementsByTagName('u-option')) {
+                if (!option.hasAttribute('data-empty'))
+                    option.disabled = !filter({
+                        index: index++, // Increment index for each <option>
+                        input,
+                        optionElement: option,
+                        text: option.text,
+                        value: getDatalistValue(option),
+                    });
+            }
+        }
+        syncDatalistState(input); // Sync the datalist state if filter is custom or false
+    }, [filter]);
+    return (jsx(SuggestionContext.Provider, { value: { inputRef, listId, setListId, handleFilter }, children: jsx(Component, { className: cl('ds-suggestion', className), ref: ref, ...rest }) }));
+});
+
+export { Suggestion, SuggestionContext };

package/dist/esm/components/Suggestion/SuggestionClear.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { SuggestionContext } from './Suggestion.js';
+import { Button } from '../Button/Button.js';
+
+/**
+ * Component that provides a clear button for the suggestion input.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+    const { inputRef } = useContext(SuggestionContext); //, handleValueChange
+    const handleClear = (event) => {
+        if (!inputRef?.current)
+            throw new Error('Input is missing');
+        /* narrow type to make TS happy */
+        if (!(inputRef?.current instanceof HTMLInputElement))
+            throw new Error('Input is not an input element');
+        event.preventDefault();
+        setReactInputValue(inputRef.current, '');
+        inputRef.current.focus();
+        onClick?.(event);
+    };
+    return (jsx(Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+// Copied from https://github.com/facebook/react/issues/11488#issuecomment-1300987446
+const setReactInputValue = (input, value) => {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+    if (nativeInputValueSetter) {
+        nativeInputValueSetter.call(input, value);
+    }
+    else {
+        throw new Error('Unable to find the native input value setter');
+    }
+    const inputEvent = new Event('input', { bubbles: true });
+    const changeEvent = new Event('change', { bubbles: true });
+    input.dispatchEvent(inputEvent);
+    input.dispatchEvent(changeEvent);
+};
+
+export { SuggestionClear, setReactInputValue };

package/dist/esm/components/Suggestion/SuggestionEmpty.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * Component that provides an empty suggestion list.
+ *
+ * Place as a descendant of `Suggestion.List`
+ *
+ * @example
+ * <Suggestion.List>
+ *   <Suggestion.Empty>Tomt</Suggestion.Empty>
+ * </Suggestion.List>
+ */
+const SuggestionEmpty = forwardRef(function SuggestionEmpty(rest, ref) {
+    return (
+    // biome-ignore lint/a11y/noInteractiveElementToNoninteractiveRole: Empty option shoult not be interactive
+    jsx("u-option", { "data-empty": true, role: 'none', ref: ref, ...rest }));
+});
+
+export { SuggestionEmpty };

package/dist/esm/components/Suggestion/SuggestionInput.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { getDatalistValue, isDatalistClick } from '@u-elements/u-datalist';
+import { forwardRef, useContext, useCallback, useEffect } from 'react';
+import { SuggestionContext } from './Suggestion.js';
+import { Input } from '../Input/Input.js';
+
+/**
+ * Component that provides an input field for the suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+const SuggestionInput = forwardRef(function SuggestionList({ value, onInput, ...rest }, ref) {
+    const { listId, inputRef, handleFilter } = useContext(SuggestionContext);
+    const mergedRefs = useMergeRefs([inputRef, ref]);
+    const updateSelected = useCallback(() => {
+        const { list, value } = inputRef?.current || {};
+        for (const option of list?.options || []) {
+            option.selected = getDatalistValue(option) === value;
+        }
+    }, []);
+    // Update also if controlled value
+    useEffect(() => {
+        updateSelected();
+        handleFilter?.(inputRef?.current);
+    }, [value]);
+    return (jsx(Input, { ref: mergedRefs, list: listId, value: value, onInput: (event) => {
+            onInput?.(event); // Should run first
+            updateSelected();
+            if (!isDatalistClick(event.nativeEvent))
+                handleFilter?.(inputRef?.current);
+        }, placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
+        , ...rest }));
+});
+
+export { SuggestionInput };

package/dist/esm/components/Suggestion/SuggestionList.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useEffect } from 'react';
+import '@u-elements/u-datalist';
+import { SuggestionContext } from './Suggestion.js';
+
+/**
+ * Component that provides a suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
+    const { inputRef, listId, setListId, handleFilter } = useContext(SuggestionContext);
+    useEffect(() => handleFilter?.(inputRef?.current)); // Must run on every render
+    useEffect(() => {
+        if (id && listId !== id)
+            setListId?.(id);
+    }, [listId, id, setListId]);
+    return (jsx("u-datalist", { "data-sr-singular": singular, "data-sr-plural": plural, class: className, id: listId, ref: ref, ...rest }));
+});
+
+export { SuggestionList };

package/dist/esm/components/Suggestion/SuggestionOption.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '@u-elements/u-datalist';
+
+const SuggestionOption = forwardRef(function SuggestionOption({ className, ...rest }, ref) {
+    return (jsx("u-option", { class: className, ref: ref, ...rest }));
+});
+
+export { SuggestionOption };

package/dist/esm/components/Suggestion/index.js

@@ -0,0 +1,37 @@
+'use client';
+import { Suggestion } from './Suggestion.js';
+import { SuggestionClear } from './SuggestionClear.js';
+import { SuggestionEmpty } from './SuggestionEmpty.js';
+import { SuggestionInput } from './SuggestionInput.js';
+import { SuggestionList } from './SuggestionList.js';
+import { SuggestionOption } from './SuggestionOption.js';
+
+/**
+ * A component that provides a suggestion list for an input field.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List>
+ *     <Suggestion.Empty>Tomt</Suggestion.Empty>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
+const EXPERIMENTAL_Suggestion = Object.assign(Suggestion, {
+    List: SuggestionList,
+    Input: SuggestionInput,
+    Empty: SuggestionEmpty,
+    Option: SuggestionOption,
+    Clear: SuggestionClear,
+});
+EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
+EXPERIMENTAL_Suggestion.List.displayName = 'EXPERIMENTAL_Suggestion.List';
+EXPERIMENTAL_Suggestion.Input.displayName = 'EXPERIMENTAL_Suggestion.Input';
+EXPERIMENTAL_Suggestion.Empty.displayName = 'EXPERIMENTAL_Suggestion.Empty';
+EXPERIMENTAL_Suggestion.Option.displayName = 'EXPERIMENTAL_Suggestion.Option';
+EXPERIMENTAL_Suggestion.Clear.displayName = 'EXPERIMENTAL_Suggestion.Clear';
+
+export { EXPERIMENTAL_Suggestion, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption };

package/dist/esm/components/Switch/Switch.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Field } from '../Field/index.js';
+import { Input } from '../Input/Input.js';
+import { Label } from '../Label/Label.js';
+
+/**
+ * Switch used to toggle options.
+ *
+ * @example
+ * <Switch label="I agree" value="agree" />
+ */
+const Switch = forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, ...rest }, ref) {
+    return (jsxs(Field, { className: className, "data-position": position, "data-size": size, style: style, children: [jsx(Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description })] }));
+});
+
+export { Switch };

package/dist/esm/components/Table/Table.js

@@ -1,12 +1,35 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
 
-const Table = React.forwardRef(({ zebra = false, stickyHeader = false, border = false, size = 'md', className, children, ...rest }, ref) => {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { ref: ref, className: clsx('ds-table', `ds-table--${size}`, zebra && 'ds-table--zebra', stickyHeader && 'ds-table--sticky-header', border && 'ds-table--border', className), ...rest, children: children }) }));
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
+const Table = forwardRef(function Table({ zebra = false, stickyHeader = false, border = false, hover = false, className, children, ...rest }, ref) {
+    return (jsx("table", { className: cl('ds-table', className), "data-border": border || undefined, "data-hover": hover || undefined, "data-sticky-header": stickyHeader || undefined, "data-zebra": zebra || undefined, ref: ref, ...rest, children: children }));
 });
-Table.displayName = 'Table';
 
 export { Table };

package/dist/esm/components/Table/TableBody.js

@@ -1,10 +1,20 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
+import { forwardRef } from 'react';
 
-const TableBody = React.forwardRef(({ children, ...rest }, ref) => {
-    return (jsx("tbody", { ref: ref, ...rest, children: children }));
+/**
+ * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
+ *
+ * @example
+ * <Table.Body>
+ *   <Table.Row>
+ *     <Table.Cell>John</Table.Cell>
+ *     <Table.Cell>25</Table.Cell>
+ *   </Table.Row>
+ * </Table.Body>
+ */
+const TableBody = forwardRef(function TableBody(rest, ref) {
+    return jsx("tbody", { ref: ref, ...rest });
 });
-TableBody.displayName = 'TableBody';
 
 export { TableBody };

package/dist/esm/components/Table/TableCell.js

@@ -1,11 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
 
-const TableCell = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("td", { ref: ref, className: clsx('ds-table__cell', className), ...rest, children: children }));
+/**
+ * TableCell component, used to display the cells of a table. Renders a native HTML td element.
+ *
+ * @example
+ * <Table.Cell>John</Table.Cell>
+ */
+const TableCell = forwardRef(function TableCell(rest, ref) {
+    return jsx("td", { ref: ref, ...rest });
 });
-TableCell.displayName = 'TableCell';
 
 export { TableCell };

package/dist/esm/components/Table/TableFoot.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
+ *
+ * @example
+ * <Table.Foot>
+ *   <Table.Row>
+ *     <Table.Cell>Total</Table.Cell>
+ *     <Table.Cell>2</Table.Cell>
+ *   </Table.Row>
+ * </Table.Foot>
+ */
+const TableFoot = forwardRef(function TableFoot(rest, ref) {
+    return jsx("tfoot", { ref: ref, ...rest });
+});
+
+export { TableFoot };

package/dist/esm/components/Table/TableHead.js

@@ -1,11 +1,20 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
 
-const TableHead = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("thead", { ref: ref, className: clsx('ds-table__head', className), ...rest, children: children }));
+/**
+ * TableHead component, used to display the header of a table. Renders a native HTML thead element.
+ *
+ * @example
+ * <Table.Head>
+ *   <Table.Row>
+ *     <Table.HeaderCell>Name</Table.HeaderCell>
+ *     <Table.HeaderCell>Age</Table.HeaderCell>
+ *   </Table.Row>
+ * </Table.Head>
+ */
+const TableHead = forwardRef(function TableHead(rest, ref) {
+    return jsx("thead", { ref: ref, ...rest });
 });
-TableHead.displayName = 'TableHead';
 
 export { TableHead };

package/dist/esm/components/Table/TableHeaderCell.js

@@ -1,17 +1,15 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@navikt/aksel-icons';
-import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 
-const SORT_ICON = {
-    ascending: jsx(ChevronUpIcon, {}),
-    descending: jsx(ChevronDownIcon, {}),
-};
-const TableHeaderCell = React.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
-    const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsx(ChevronUpDownIcon, {}));
-    return (jsxs("th", { className: clsx('ds-table__header__cell', sortable && 'ds-table__header__cell--sortable', sort && `ds-table__header__cell--sorted`, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: `ds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+/**
+ * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
+ *
+ * @example
+ * <Table.HeaderCell>Name</Table.HeaderCell>
+ */
+const TableHeaderCell = forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
+    return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsx("button", { type: 'button', children: children }) : children }));
 });
-TableHeaderCell.displayName = 'TableHeaderCell';
 
 export { TableHeaderCell };

package/dist/esm/components/Table/TableRow.js

@@ -1,11 +1,18 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
 
-const TableRow = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("tr", { className: clsx('ds-table__row', className), ref: ref, ...rest, children: children }));
+/**
+ * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
+ *
+ * @example
+ * <Table.Row>
+ *   <Table.Cell>John</Table.Cell>
+ *   <Table.Cell>25</Table.Cell>
+ * </Table.Row>
+ */
+const TableRow = forwardRef(function TableRow(rest, ref) {
+    return jsx("tr", { ref: ref, ...rest });
 });
-TableRow.displayName = 'TableRow';
 
 export { TableRow };