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

package/dist/cjs/components/Table/index.js

@@ -2,28 +2,58 @@
 'use strict';
 
 var Table$1 = require('./Table.js');
-var TableHead = require('./TableHead.js');
 var TableBody = require('./TableBody.js');
-var TableRow = require('./TableRow.js');
 var TableCell = require('./TableCell.js');
+var TableFoot = require('./TableFoot.js');
+var TableHead = require('./TableHead.js');
 var TableHeaderCell = require('./TableHeaderCell.js');
+var TableRow = require('./TableRow.js');
 
-const Table = Table$1.Table;
-Table.Head = TableHead.TableHead;
-Table.Body = TableBody.TableBody;
-Table.Row = TableRow.TableRow;
-Table.Cell = TableCell.TableCell;
-Table.HeaderCell = TableHeaderCell.TableHeaderCell;
+/**
+ * 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 = Object.assign(Table$1.Table, {
+    Head: TableHead.TableHead,
+    Body: TableBody.TableBody,
+    Row: TableRow.TableRow,
+    Cell: TableCell.TableCell,
+    HeaderCell: TableHeaderCell.TableHeaderCell,
+    Foot: TableFoot.TableFoot,
+});
 Table.displayName = 'Table';
 Table.Head.displayName = 'Table.Head';
 Table.Body.displayName = 'Table.Body';
 Table.Row.displayName = 'Table.Row';
 Table.Cell.displayName = 'Table.Cell';
 Table.HeaderCell.displayName = 'Table.HeaderCell';
+Table.Foot.displayName = 'Table.Foot';
 
-exports.TableHead = TableHead.TableHead;
 exports.TableBody = TableBody.TableBody;
-exports.TableRow = TableRow.TableRow;
 exports.TableCell = TableCell.TableCell;
+exports.TableFoot = TableFoot.TableFoot;
+exports.TableHead = TableHead.TableHead;
 exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
+exports.TableRow = TableRow.TableRow;
 exports.Table = Table;

package/dist/cjs/components/Tabs/Tabs.js

@@ -2,13 +2,28 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const TabsContext = React.createContext({});
-const Tabs = React.forwardRef(({ size = 'md', children, value, defaultValue, className, onChange, ...rest }, ref) => {
+const Context = react.createContext({});
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const Tabs = react.forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
     const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
     let onValueChange = onChange;
     if (!isControlled) {
         onValueChange = (newValue) => {
@@ -17,14 +32,12 @@ const Tabs = React.forwardRef(({ size = 'md', children, value, defaultValue, cla
         };
         value = uncontrolledValue;
     }
-    return (jsxRuntime.jsx(TabsContext.Provider, { value: {
+    return (jsxRuntime.jsx(Context.Provider, { value: {
             value,
             defaultValue,
             onChange: onValueChange,
-            size,
-        }, children: jsxRuntime.jsx("div", { className: lite.clsx(`ds-tabs--${size}`, className), ref: ref, ...rest, children: children }) }));
+        }, children: jsxRuntime.jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
 });
-Tabs.displayName = 'Tabs';
 
+exports.Context = Context;
 exports.Tabs = Tabs;
-exports.TabsContext = TabsContext;

package/dist/cjs/components/Tabs/TabsList.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Tabs = require('./Tabs.js');
+var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.js');
+
+/**
+ * The container for all `Tab` components.
+ *
+ * @example
+ * <Tabs.List>
+ *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ * </Tabs.List>
+ */
+const TabsList = react.forwardRef(function TabsList({ children, ...rest }, ref) {
+    const { value } = react.useContext(Tabs.Context);
+    return (jsxRuntime.jsx(RovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
+});
+
+exports.TabsList = TabsList;

package/dist/cjs/components/Tabs/TabsPanel.js

@@ -0,0 +1,31 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var react$1 = require('@floating-ui/react');
+var Tabs = require('./Tabs.js');
+
+/**
+ * A single content item in a Tabs component.
+ *
+ * @example
+ * <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ */
+const TabsPanel = react.forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
+    const { value: tabsValue } = react.useContext(Tabs.Context);
+    const active = value === tabsValue;
+    const [hasTabbableElement, setHasTabbableElement] = react.useState(false);
+    const internalRef = react.useRef(null);
+    const mergedRef = react$1.useMergeRefs([ref, internalRef]);
+    /* Check if the panel has any tabbable elements */
+    react.useEffect(() => {
+        if (!internalRef.current)
+            return;
+        const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        setHasTabbableElement(tabbableElements.length > 0);
+    }, [children]);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: children })) }));
+});
+
+exports.TabsPanel = TabsPanel;

package/dist/cjs/components/Tabs/TabsTab.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var RovingFocusItem = require('../../utilities/RovingFocus/RovingFocusItem.js');
+var Tabs = require('./Tabs.js');
+
+/**
+ * A single item in a Tabs component.
+ *
+ * @example
+ * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ */
+const TabsTab = react.forwardRef(function TabsTab({ value, id, ...rest }, ref) {
+    const tabs = react.useContext(Tabs.Context);
+    const buttonId = id ?? `tab-${react.useId()}`;
+    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...rest, "aria-selected": tabs.value === value, id: buttonId, onClick: () => tabs.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
+});
+
+exports.TabsTab = TabsTab;

package/dist/cjs/components/Tabs/index.js

@@ -2,19 +2,35 @@
 'use strict';
 
 var Tabs$1 = require('./Tabs.js');
-var Tab = require('./Tab.js');
-var TabList = require('./TabList.js');
-var TabContent = require('./TabContent.js');
+var TabsList = require('./TabsList.js');
+var TabsPanel = require('./TabsPanel.js');
+var TabsTab = require('./TabsTab.js');
 
-const Tabs = Tabs$1.Tabs;
-Tabs.Tab = Tab.Tab;
-Tabs.List = TabList.TabList;
-Tabs.Content = TabContent.TabContent;
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const Tabs = Object.assign(Tabs$1.Tabs, {
+    List: TabsList.TabsList,
+    Tab: TabsTab.TabsTab,
+    Panel: TabsPanel.TabsPanel,
+});
 Tabs.Tab.displayName = 'Tabs.Tab';
 Tabs.List.displayName = 'Tabs.List';
-Tabs.Content.displayName = 'Tabs.Content';
+Tabs.Panel.displayName = 'Tabs.Panel';
 
-exports.Tab = Tab.Tab;
-exports.TabList = TabList.TabList;
-exports.TabContent = TabContent.TabContent;
+exports.TabsList = TabsList.TabsList;
+exports.TabsPanel = TabsPanel.TabsPanel;
+exports.TabsTab = TabsTab.TabsTab;
 exports.Tabs = Tabs;

package/dist/cjs/components/Tag/Tag.js

@@ -2,13 +2,17 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const Tag = React.forwardRef(({ size = 'md', color = 'neutral', children, className, ...rest }, ref) => {
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("span", { className: lite.clsx('ds-tag', `ds-tag--${color}`, `ds-tag--${size}`, className), ref: ref, ...rest, children: children }) }));
+/**
+ * Use `Tag` to display categories or statuses.
+ *
+ * @example
+ * <Tag>Melk</Tag>
+ */
+const Tag = react.forwardRef(function Tag({ className, ...rest }, ref) {
+    return jsxRuntime.jsx("span", { className: cl('ds-tag', className), ref: ref, ...rest });
 });
-Tag.displayName = 'Tag';
 
 exports.Tag = Tag;

package/dist/cjs/components/Textarea/Textarea.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Native HTML textarea element.
+ *
+ * @example
+ * <Textarea />
+ */
+const Textarea = react.forwardRef(function Textarea({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));
+});
+
+exports.Textarea = Textarea;

package/dist/cjs/components/Textfield/Textfield.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../Field/index.js');
+var Label = require('../Label/Label.js');
+var FieldDescription = require('../Field/FieldDescription.js');
+var FieldAffix = require('../Field/FieldAffix.js');
+var Textarea = require('../Textarea/Textarea.js');
+var Input = require('../Input/Input.js');
+var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
+
+/**
+ *  Composed text input component using `Field`
+ *
+ * `classname` & `style` are passed to the wrapper elements.
+ *
+ * Rest props are passed to the `Input` or `Textarea` component.
+ * @example
+ * <Textfield label="Textfield label">
+ */
+const Textfield = react.forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-size": size, style: style, children: [!!label && jsxRuntime.jsx(Label.Label, { children: label }), !!description && jsxRuntime.jsx(FieldDescription.FieldDescription, { children: description }), jsxRuntime.jsxs(FieldAffix.FieldAffixes, { children: [prefix === undefined || jsxRuntime.jsx(FieldAffix.FieldAffix, { children: prefix }), multiline === true ? (jsxRuntime.jsx(Textarea.Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsxRuntime.jsx(Input.Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsxRuntime.jsx(FieldAffix.FieldAffix, { children: suffix })] }), !!error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: error }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
+});
+
+exports.Textfield = Textfield;

package/dist/cjs/components/ToggleGroup/ToggleGroup.js

@@ -2,25 +2,25 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var RovingTabindexRoot = require('../../utilities/RovingTabIndex/RovingTabindexRoot.js');
+var cl = require('clsx/lite');
+var react = require('react');
+var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.js');
 
-const ToggleGroupContext = React.createContext({});
-/** `ToggleGroup` component.
+const ToggleGroupContext = react.createContext({});
+/**
+ * Display a group of buttons that can be toggled between.
+ *
  * @example
- * ```tsx
  * <ToggleGroup onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
- * ```
  */
-const ToggleGroup = React.forwardRef(({ size = 'md', children, value, defaultValue, onChange, name, className, ...rest }, ref) => {
-    const nameId = React.useId();
+const ToggleGroup = react.forwardRef(function ToggleGroup({ children, value, defaultValue, onChange, name, className, ...rest }, ref) {
+    const nameId = react.useId();
     const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
     let onValueChange = onChange;
     if (!isControlled) {
         onValueChange = (newValue) => {
@@ -29,15 +29,13 @@ const ToggleGroup = React.forwardRef(({ size = 'md', children, value, defaultVal
         };
         value = uncontrolledValue;
     }
-    return (jsxRuntime.jsx("div", { className: lite.clsx('ds-togglegroup', className), ref: ref, ...rest, children: jsxRuntime.jsxs(ToggleGroupContext.Provider, { value: {
-                value,
-                defaultValue,
-                name: name ?? `togglegroup-name-${nameId}`,
-                onChange: onValueChange,
-                size,
-            }, children: [name && (jsxRuntime.jsx("input", { className: 'ds-togglegroup__input', name: name, value: value })), jsxRuntime.jsx(RovingTabindexRoot.RovingTabindexRoot, { asChild: true, valueId: value, children: jsxRuntime.jsx("div", { className: 'ds-togglegroup__content', role: 'radiogroup', children: children }) })] }) }));
+    return (jsxRuntime.jsx(ToggleGroupContext.Provider, { value: {
+            value,
+            defaultValue,
+            name: name ?? `togglegroup-name-${nameId}`,
+            onChange: onValueChange,
+        }, children: jsxRuntime.jsx(RovingFocusRoot.RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxRuntime.jsxs("div", { className: cl('ds-togglegroup', className), role: 'radiogroup', ref: ref, ...rest, children: [name && jsxRuntime.jsx("input", { type: 'hidden', name: name, value: value }), children] }) }) }));
 });
-ToggleGroup.displayName = 'ToggleGroup';
 
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleGroupContext = ToggleGroupContext;

package/dist/cjs/components/ToggleGroup/ToggleGroupItem.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var RovingFocusItem = require('../../utilities/RovingFocus/RovingFocusItem.js');
+var Button = require('../Button/Button.js');
+var useToggleGroupitem = require('./useToggleGroupitem.js');
+
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ */
+const ToggleGroupItem = react.forwardRef(function ToggleGroupItem(rest, ref) {
+    const { active, buttonProps, value } = useToggleGroupitem.useToggleGroupItem(rest);
+    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(Button.Button, { variant: active ? 'primary' : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+});
+
+exports.ToggleGroupItem = ToggleGroupItem;

package/dist/cjs/components/ToggleGroup/index.js

@@ -2,10 +2,21 @@
 'use strict';
 
 var ToggleGroup$1 = require('./ToggleGroup.js');
-var ToggleGroupItem = require('./ToggleGroupItem/ToggleGroupItem.js');
+var ToggleGroupItem = require('./ToggleGroupItem.js');
 
-const ToggleGroup = ToggleGroup$1.ToggleGroup;
-ToggleGroup.Item = ToggleGroupItem.ToggleGroupItem;
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+const ToggleGroup = Object.assign(ToggleGroup$1.ToggleGroup, {
+    Item: ToggleGroupItem.ToggleGroupItem,
+});
 ToggleGroup.Item.displayName = 'ToggleGroup.Item';
 
 exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;

package/dist/cjs/components/ToggleGroup/useToggleGroupitem.js

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var ToggleGroup = require('./ToggleGroup.js');
+
+/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
+const useToggleGroupItem = (props) => {
+    const { ...rest } = props;
+    const genValue = react.useId();
+    const toggleGroup = react.useContext(ToggleGroup.ToggleGroupContext);
+    const value = props.value ?? genValue;
+    const active = toggleGroup.value === value;
+    const buttonId = `togglegroup-item-${react.useId()}`;
+    return {
+        ...rest,
+        active: active,
+        value,
+        buttonProps: {
+            id: buttonId,
+            'aria-checked': active,
+            'aria-current': active,
+            role: 'radio',
+            name: toggleGroup.name,
+            onClick: () => {
+                toggleGroup.onChange?.(value);
+            },
+        },
+    };
+};
+
+exports.useToggleGroupItem = useToggleGroupItem;