@digdir/designsystemet-react 1.0.0-next.47 → 1.0.0-next.49

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

@@ -5,7 +5,12 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { useSynchronizedAnimation } from '../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
 
-/**  Spinner component used for indicating busy or indeterminate loading */
+/**
+ * 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');

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;
+        // Handle custom filter
+        if (filter !== false) {
+            let index = 0;
+            for (const option of list.children) {
+                // Skip <datalist> children that are not <option>
+                if ('value' in option)
+                    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,45 @@
+'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 }));
+});
+const setReactInputValue = (input, value) => {
+    const previousValue = input.value;
+    input.value = value;
+    const tracker = input._valueTracker;
+    if (typeof tracker !== 'undefined') {
+        tracker.setValue(previousValue);
+    }
+    //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+};
+
+export { SuggestionClear, setReactInputValue };

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+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({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    return (jsx(Component, { "aria-disabled": 'true', ref: ref, role: 'option', tabIndex: 0, ...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

@@ -7,6 +7,7 @@ import { Label } from '../Label/Label.js';
 
 /**
  * Switch used to toggle options.
+ *
  * @example
  * <Switch label="I agree" value="agree" />
  */

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

@@ -3,6 +3,31 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * 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 }));
 });

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

@@ -2,6 +2,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * 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 });
 });

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

@@ -2,6 +2,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * 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 });
 });

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

@@ -2,6 +2,17 @@
 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 });
 });

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

@@ -2,6 +2,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * 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 });
 });

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

@@ -2,6 +2,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * 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 }));
 });

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

@@ -2,6 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * 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 });
 });

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

@@ -7,6 +7,31 @@ import { TableHead } from './TableHead.js';
 import { TableHeaderCell } from './TableHeaderCell.js';
 import { TableRow } from './TableRow.js';
 
+/**
+ * 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, {
     Head: TableHead,
     Body: TableBody,

package/dist/esm/components/Tabs/Tabs.js

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useState } from 'react';
+import { forwardRef, createContext, useState } from 'react';
 
 const Context = createContext({});
 /**
  * Display a group of tabs that can be toggled between.
+ *
  * @example
- * ```tsx
  * <Tabs onChange={(value) => console.log(value)}>
  *   <Tabs.List>
  *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
@@ -18,7 +18,6 @@ const Context = createContext({});
  *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
- * ```
  */
 const Tabs = forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
     const isControlled = value !== undefined;

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

@@ -6,13 +6,12 @@ import { RovingFocusRoot } from '../../utilities/RovingFocus/RovingFocusRoot.js'
 
 /**
  * The container for all `Tab` components.
+ *
  * @example
- * ```tsx
  * <Tabs.List>
  *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
  *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
  * </Tabs.List>
- * ```
  */
 const TabsList = forwardRef(function TabsList({ children, ...rest }, ref) {
     const { value } = useContext(Context);

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

@@ -6,10 +6,9 @@ import { Context } from './Tabs.js';
 
 /**
  * A single content item in a Tabs component.
+ *
  * @example
- * ```tsx
  * <Tabs.Panel value='1'>content 1</Tabs.Panel>
- * ```
  */
 const TabsPanel = forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
     const { value: tabsValue } = useContext(Context);

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

@@ -6,6 +6,7 @@ import { Context } from './Tabs.js';
 
 /**
  * A single item in a Tabs component.
+ *
  * @example
  * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
  */

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

@@ -6,8 +6,8 @@ import { TabsTab } from './TabsTab.js';
 
 /**
  * Display a group of tabs that can be toggled between.
+ *
  * @example
- * ```tsx
  * <Tabs onChange={(value) => console.log(value)}>
  *   <Tabs.List>
  *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
@@ -18,7 +18,6 @@ import { TabsTab } from './TabsTab.js';
  *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
- * ```
  */
 const Tabs = Object.assign(Tabs$1, {
     List: TabsList,

package/dist/esm/components/Tag/Tag.js

@@ -4,9 +4,10 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 /**
- * Use `Tag` to display a small piece of information.
+ * Use `Tag` to display categories or statuses.
+ *
  * @example
- * <Tag>Success</Tag>
+ * <Tag>Melk</Tag>
  */
 const Tag = forwardRef(function Tag({ className, ...rest }, ref) {
     return jsx("span", { className: cl('ds-tag', className), ref: ref, ...rest });

package/dist/esm/components/Textarea/Textarea.js

@@ -3,12 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
-/** Textarea field
+/**
+ * Native HTML textarea element.
  *
  * @example
- * ```tsx
  * <Textarea />
- * ```
  */
 const Textarea = forwardRef(function Textarea({ className, ...rest }, ref) {
     return (jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));

package/dist/esm/components/Textfield/Textfield.js

@@ -2,11 +2,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Field } from '../Field/index.js';
+import { Label } from '../Label/Label.js';
 import { FieldDescription } from '../Field/FieldDescription.js';
 import { FieldAffixes, FieldAffix } from '../Field/FieldAffix.js';
 import { Textarea } from '../Textarea/Textarea.js';
 import { Input } from '../Input/Input.js';
-import { Label } from '../Label/Label.js';
 import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
 
 /**
@@ -16,9 +16,7 @@ import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
  *
  * Rest props are passed to the `Input` or `Textarea` component.
  * @example
- * ```tsx
  * <Textfield label="Textfield label">
- * ```
  */
 const Textfield = forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
     return (jsxs(Field, { className: className, "data-size": size, style: style, children: [!!label && jsx(Label, { children: label }), !!description && jsx(FieldDescription, { children: description }), jsxs(FieldAffixes, { children: [prefix === undefined || jsx(FieldAffix, { children: prefix }), multiline === true ? (jsx(Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsx(Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsx(FieldAffix, { children: suffix })] }), !!error && jsx(ValidationMessage, { children: error }), !!counter && (jsx(Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));

package/dist/esm/components/ToggleGroup/ToggleGroup.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useId, useState } from 'react';
+import { forwardRef, useId, useState, createContext } from 'react';
 import { RovingFocusRoot } from '../../utilities/RovingFocus/RovingFocusRoot.js';
 
 const ToggleGroupContext = createContext({});
 /**
  * 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>

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

@@ -4,17 +4,17 @@ import { ToggleGroupItem } from './ToggleGroupItem.js';
 
 /**
  * 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 = ToggleGroup$1;
-ToggleGroup.Item = ToggleGroupItem;
+const ToggleGroup = Object.assign(ToggleGroup$1, {
+    Item: ToggleGroupItem,
+});
 ToggleGroup.Item.displayName = 'ToggleGroup.Item';
 
 export { ToggleGroup, ToggleGroupItem };

package/dist/esm/components/Tooltip/Tooltip.js

@@ -3,11 +3,12 @@ import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
 import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { forwardRef, useId, useState, useRef, useEffect, Fragment } from 'react';
+import { forwardRef, useId, useState, useRef, useEffect, Fragment, version } from 'react';
 import { useMergeRefs } from '@floating-ui/react';
 
 /**
  * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
  * @example
  * <Tooltip content='This is a tooltip'>
  *  <button>Hover me</button>
@@ -80,10 +81,13 @@ const Tooltip = forwardRef(function Tooltip({ id, children, content, placement =
         console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
         return null;
     }
-    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, popovertarget: id ?? randomTooltipId, 
-                // We set this to not close on click, since it should always show on hover
-                // @ts-ignore @types/react-dom does not understand popovertargetaction yet
-                popovertargetaction: 'show', onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsx("div", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, 
+    const popoverProps = {
+        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: id ?? randomTooltipId,
+        [version.startsWith('19')
+            ? 'popoverTargetAction'
+            : 'popovertargetaction']: 'show',
+    };
+    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsx("div", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, 
                 // @ts-ignore @types/react-dom does not understand popover yet
                 popover: 'manual', ...rest, children: content })] }));
 });

package/dist/esm/components/ValidationMessage/ValidationMessage.js

@@ -4,7 +4,12 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
-/** Use `ValidationMessage` to display validation text */
+/**
+ * Use `ValidationMessage` to display validation text
+ *
+ * @example
+ * <ValidationMessage>This is a danger validation message</ValidationMessage>
+ */
 const ValidationMessage = forwardRef(function ValidationMessage({ className, asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'p';
     return (jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, ...rest }));