@digdir/designsystemet-react 0.0.0-next-20250603060245 → 0.0.0-react-side-effects-20260113071010

package/dist/cjs/components/field/field-counter.js

@@ -0,0 +1,60 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+require('../../utilities/roving-focus/roving-focus-item.js');
+require('../../utilities/roving-focus/roving-focus-root.js');
+var paragraph = require('../paragraph/paragraph.js');
+var validationMessage = require('../validation-message/validation-message.js');
+var fieldObserver = require('./field-observer.js');
+
+const label = (text, count) => text.replace('%d', Math.abs(count).toString());
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
+const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', hint = 'Maks %d tegn tillatt.', ...rest }, ref) {
+    const [count, setCount] = react.useState(0);
+    const [liveRegionText, setLiveRegionText] = react.useState('');
+    const fieldInputRef = react.useRef(null);
+    const counterRef = react.useRef(null);
+    const hasExceededLimit = count > limit;
+    const remainder = limit - count;
+    const debouncedSetLiveRegionText = useDebounceCallback.useDebounceCallback((text) => setLiveRegionText(text), 1200);
+    // Listen to native input events (user typing) to update the counter in real time
+    react.useEffect(() => {
+        const field = counterRef.current?.closest('.ds-field');
+        const input = Array.from(field?.getElementsByTagName('*') || []).find(fieldObserver.isInputLike);
+        const onInput = ({ target }) => {
+            if (fieldObserver.isInputLike(target))
+                setCount(target.value.length);
+        };
+        if (input)
+            onInput({ target: input }); // Initial setup
+        fieldInputRef.current = input;
+        field?.addEventListener('input', onInput);
+        return () => field?.removeEventListener('input', onInput);
+    }, []);
+    /* React does not dispatch a native input event when the value prop changes externally.
+    Since the parent re-renders this component when value changes, we can sync on render. */
+    react.useEffect(() => {
+        if (fieldInputRef.current) {
+            const valueLength = fieldInputRef.current.value.length;
+            setCount((prev) => (prev === valueLength ? prev : valueLength));
+        }
+    });
+    // Update live region text when count or limit changes
+    react.useEffect(() => {
+        debouncedSetLiveRegionText(label(hasExceededLimit ? over : under, remainder));
+    }, [count, limit, over, under, hasExceededLimit, remainder]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: liveRegionText }), hasExceededLimit ? (jsxRuntime.jsx(validationMessage.ValidationMessage, { ref: ref, ...rest, "aria-hidden": 'true', "data-field": null, children: label(over, remainder) })) : (jsxRuntime.jsx(paragraph.Paragraph, { ref: ref, ...rest, "aria-hidden": 'true', children: label(under, remainder) })), jsxRuntime.jsx("div", { className: 'ds-sr-only', "aria-hidden": 'true', "data-field": 'description', children: label(hint, limit) })] }));
+});
+
+exports.FieldCounter = FieldCounter;

package/dist/cjs/components/field/field-description.js

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * Field description component, used to provide additional information below the input.
+ *
+ * @example
+ * <FieldDescription>Additional information</FieldDescription>
+ */
+const FieldDescription = react.forwardRef(function FieldDescription(rest, ref) {
+    return jsxRuntime.jsx("div", { "data-field": 'description', ref: ref, ...rest });
+});
+
+exports.FieldDescription = FieldDescription;

package/dist/cjs/components/field/field-observer.js

@@ -0,0 +1,112 @@
+'use client';
+'use strict';
+
+function fieldObserver(fieldElement) {
+    if (!fieldElement)
+        return;
+    const elements = new Map();
+    const typeCounter = new Map(); // Track count for each data-field type
+    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+    let input = null;
+    let describedby = '';
+    const process = (mutations) => {
+        const changed = [];
+        const removed = [];
+        // Merge MutationRecords
+        for (const mutation of mutations) {
+            if (mutation.attributeName)
+                changed.push(mutation.target ?? fieldElement);
+            changed.push(...(mutation.addedNodes || []));
+            removed.push(...(mutation.removedNodes || []));
+        }
+        // Register elements
+        for (const el of changed) {
+            if (!isElement(el))
+                continue;
+            if (isLabel(el))
+                elements.set(el, el.htmlFor);
+            else if (el.hasAttribute('data-field'))
+                elements.set(el, el.id);
+            else if (isInputLike(el) && !el.hidden) {
+                input = el;
+                describedby = el.getAttribute('aria-describedby') || '';
+            }
+        }
+        // Reset removed elements
+        for (const el of removed) {
+            if (!isElement(el))
+                continue;
+            if (input === el)
+                input = null;
+            if (elements.has(el)) {
+                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
+                elements.delete(el);
+            }
+        }
+        // Connect elements
+        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
+        const inputId = input?.id || uuid;
+        // Reset type counters since we reprocess all elements
+        typeCounter.clear();
+        for (const [el, value] of elements) {
+            const descriptionType = el.getAttribute('data-field');
+            let id;
+            if (descriptionType) {
+                // Increment type counter for this type
+                const count = (typeCounter.get(descriptionType) || 0) + 1;
+                typeCounter.set(descriptionType, count);
+                id = `${inputId}:${descriptionType}:${count}`;
+            }
+            else {
+                id = inputId;
+            }
+            if (!value)
+                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
+            if (!describedbyIds.includes(el.id)) {
+                if (descriptionType === 'validation')
+                    describedbyIds.unshift(el.id); // Validations to the front
+                else if (descriptionType)
+                    describedbyIds.push(el.id); // Other descriptions to the back
+            }
+        }
+        setAttr(input, 'id', inputId);
+        setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());
+    };
+    const observer = createOptimizedMutationObserver(process);
+    observer.observe(fieldElement, {
+        attributeFilter: ['id', 'for', 'aria-describedby'],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
+    observer.takeRecords(); // Clear initial setup queue
+    return () => observer.disconnect();
+}
+// Utilities
+const isElement = (node) => node instanceof Element;
+const isLabel = (node) => node instanceof HTMLLabelElement;
+const isInputLike = (node) => node instanceof HTMLElement &&
+    'validity' in node &&
+    !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
+const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
+// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
+function createOptimizedMutationObserver(callback) {
+    const queue = [];
+    const observer = new MutationObserver((mutations) => {
+        if (!queue.length)
+            requestAnimationFrame(process);
+        queue.push(...mutations);
+    });
+    const process = () => {
+        callback(queue, observer);
+        queue.length = 0; // Reset queue
+        observer.takeRecords(); // Clear queue due to DOM changes in callback
+    };
+    return observer;
+}
+
+exports.fieldObserver = fieldObserver;
+exports.isElement = isElement;
+exports.isInputLike = isInputLike;
+exports.isLabel = isLabel;

package/dist/cjs/components/field/field.js

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+var fieldObserver = require('./field-observer.js');
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const Field = react.forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const fieldRef = react.useRef(null);
+    const mergedRefs = useMergeRefs.useMergeRefs([fieldRef, ref]);
+    react.useEffect(() => fieldObserver.fieldObserver(fieldRef.current), []);
+    return (jsxRuntime.jsx(Component, { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
+});
+
+exports.Field = Field;

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

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+var field = require('./field.js');
+var fieldAffix = require('./field-affix.js');
+var fieldCounter = require('./field-counter.js');
+var fieldDescription = require('./field-description.js');
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const FieldComponent = Object.assign(field.Field, {
+    Description: fieldDescription.FieldDescription,
+    Affixes: fieldAffix.FieldAffixes,
+    Affix: fieldAffix.FieldAffix,
+    Counter: fieldCounter.FieldCounter,
+});
+FieldComponent.Description.displayName = 'Field.Description';
+FieldComponent.Affixes.displayName = 'Field.Affixes';
+FieldComponent.Affix.displayName = 'Field.Affix';
+FieldComponent.Counter.displayName = 'Field.Counter';
+
+exports.FieldAffix = fieldAffix.FieldAffix;
+exports.FieldAffixes = fieldAffix.FieldAffixes;
+exports.FieldCounter = fieldCounter.FieldCounter;
+exports.FieldDescription = fieldDescription.FieldDescription;
+exports.Field = FieldComponent;

package/dist/cjs/components/fieldset/fieldset-description.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var paragraph = require('../paragraph/paragraph.js');
+
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <FieldsetDescription>
+ *   Gi en kort beskrivelse i begge feltene
+ * </FieldsetDescription>
+ */
+const FieldsetDescription = react.forwardRef(function FieldsetDescription(rest, ref) {
+    return jsxRuntime.jsx(paragraph.Paragraph, { ref: ref, ...rest });
+});
+
+exports.FieldsetDescription = FieldsetDescription;

package/dist/cjs/components/fieldset/fieldset-legend.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var label = require('../label/label.js');
+
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <FieldsetLegend>Skriv inn dine svar</FieldsetLegend>
+ */
+const FieldsetLegend = react.forwardRef(function FieldsetLegend(rest, ref) {
+    return (jsxRuntime.jsx(label.Label, { asChild: true, children: jsxRuntime.jsx("legend", { ref: ref, ...rest }) }));
+});
+
+exports.FieldsetLegend = FieldsetLegend;

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

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var fieldset = require('./fieldset.js');
+var fieldsetDescription = require('./fieldset-description.js');
+var fieldsetLegend = require('./fieldset-legend.js');
+
+/**
+ * Fieldset component, used to wrap a form field.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const FieldsetComponent = Object.assign(fieldset.Fieldset, {
+    Legend: fieldsetLegend.FieldsetLegend,
+    Description: fieldsetDescription.FieldsetDescription,
+});
+FieldsetComponent.Legend.displayName = 'Fieldset.Legend';
+FieldsetComponent.Description.displayName = 'Fieldset.Description';
+
+exports.FieldsetDescription = fieldsetDescription.FieldsetDescription;
+exports.FieldsetLegend = fieldsetLegend.FieldsetLegend;
+exports.Fieldset = FieldsetComponent;

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+var listItem = require('./list-item.js');
+var lists = require('./lists.js');
+
+const ListComponent = {
+    Item: listItem.ListItem,
+    Ordered: lists.ListOrdered,
+    Unordered: lists.ListUnordered,
+};
+ListComponent.Item.displayName = 'List.Item';
+ListComponent.Ordered.displayName = 'List.Ordered';
+ListComponent.Unordered.displayName = 'List.Unordered';
+
+exports.ListItem = listItem.ListItem;
+exports.ListOrdered = lists.ListOrdered;
+exports.ListUnordered = lists.ListUnordered;
+exports.List = ListComponent;

package/dist/cjs/components/list/list-item.js

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+/**
+ * Component that provides a list item.
+ *
+ * @example
+ * <List.Item>Item</List.Item>
+ */
+const ListItem = react.forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'li';
+    return jsxRuntime.jsx(Component, { ...rest, ref: ref });
+});
+
+exports.ListItem = ListItem;

package/dist/cjs/components/list/lists.js

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const render = (tagName, { asChild, className, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : tagName;
+    return jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
+};
+/**
+ * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
+ *
+ * @example
+ * <ListUnordered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListUnordered>
+ */
+const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
+    return render('ul', props, ref);
+});
+/**
+ * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
+ *
+ * @example
+ * <ListOrdered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListOrdered>
+ */
+const ListOrdered = react.forwardRef(function ListOrdered(props, ref) {
+    return render('ol', props, ref);
+});
+
+exports.ListOrdered = ListOrdered;
+exports.ListUnordered = ListUnordered;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var pagination = require('./pagination.js');
+var paginationButton = require('./pagination-button.js');
+var paginationItem = require('./pagination-item.js');
+var paginationList = require('./pagination-list.js');
+
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const PaginationComponent = Object.assign(pagination.Pagination, {
+    List: paginationList.PaginationList,
+    Item: paginationItem.PaginationItem,
+    Button: paginationButton.PaginationButton,
+});
+PaginationComponent.List.displayName = 'Pagination.List';
+PaginationComponent.Item.displayName = 'Pagination.Item';
+PaginationComponent.Button.displayName = 'Pagination.Button';
+
+exports.PaginationButton = paginationButton.PaginationButton;
+exports.PaginationItem = paginationItem.PaginationItem;
+exports.PaginationList = paginationList.PaginationList;
+exports.Pagination = PaginationComponent;

package/dist/cjs/components/pagination/pagination-button.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var button = require('../button/button.js');
+
+/**
+ * PaginationButton component, use within a Pagination.Item.
+ *
+ * @example
+ * <PaginationItem>
+ *   <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ * </PaginationItem>
+ */
+const PaginationButton = react.forwardRef(function PaginationButton(rest, ref) {
+    return jsxRuntime.jsx(button.Button, { ref: ref, ...rest });
+});
+
+exports.PaginationButton = PaginationButton;

package/dist/cjs/components/pagination/pagination-item.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+/**
+ * PaginationItem component, use within a Pagination.List.
+ *
+ * @example
+ * <PaginationList>
+ *   <PaginationItem>
+ *     <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *   </PaginationItem>
+ * </PaginationList>
+ */
+const PaginationItem = react.forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'li';
+    return jsxRuntime.jsx(Component, { ref: ref, ...rest });
+});
+
+exports.PaginationItem = PaginationItem;

package/dist/cjs/components/pagination/pagination-list.js

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <PaginationList>
+ *     <PaginationItem>
+ *       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *     </PaginationItem>
+ *   </PaginationList>
+ * </Pagination>
+ */
+const PaginationList = react.forwardRef(function PaginationList({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'ul';
+    return jsxRuntime.jsx(Component, { ref: ref, ...rest });
+});
+
+exports.PaginationList = PaginationList;

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var popover = require('./popover.js');
+var popoverTrigger = require('./popover-trigger.js');
+var popoverTriggerContext = require('./popover-trigger-context.js');
+
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const PopoverComponent = Object.assign(popover.Popover, {
+    TriggerContext: popoverTriggerContext.PopoverTriggerContext,
+    Trigger: popoverTrigger.PopoverTrigger,
+});
+PopoverComponent.TriggerContext.displayName = 'Popover.TriggerContext';
+PopoverComponent.Trigger.displayName = 'Popover.Trigger';
+
+exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
+exports.PopoverTriggerContext = popoverTriggerContext.PopoverTriggerContext;
+exports.Popover = PopoverComponent;

package/dist/cjs/components/popover/popover-trigger-context.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+ *
+ * @example
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ */
+const PopoverTriggerContext = ({ children, }) => {
+    const randomPopoverId = react.useId();
+    const [popoverId, setPopoverId] = react.useState(randomPopoverId);
+    return (jsxRuntime.jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
+};
+PopoverTriggerContext.displayName = 'PopoverTriggerContext';
+const Context = react.createContext({});
+
+exports.Context = Context;
+exports.PopoverTriggerContext = PopoverTriggerContext;

package/dist/cjs/components/popover/popover-trigger.js

@@ -0,0 +1,45 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var button = require('../button/button.js');
+var popoverTriggerContext = require('./popover-trigger-context.js');
+
+/**
+ * PopoverTrigger component, used to trigger a popover.
+ *
+ * @example
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ *
+ * @example inline
+ * <PopoverTriggerContext>
+ *   <Paragraph>
+ *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
+ *   </Paragraph>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ */
+const PopoverTrigger = react.forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
+    const { popoverId } = react.useContext(popoverTriggerContext.Context);
+    const Component = asChild ? reactSlot.Slot : inline ? 'button' : button.Button;
+    const popoverProps = Object.assign({
+        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: popoverId,
+        ...(inline
+            ? {
+                'data-popover': 'inline',
+            }
+            : {}),
+    }, rest);
+    return jsxRuntime.jsx(Component, { ref: ref, ...popoverProps });
+});
+
+exports.PopoverTrigger = PopoverTrigger;