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

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

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+var Dialog$1 = require('./Dialog.js');
+var DialogBlock = require('./DialogBlock.js');
+var DialogTrigger = require('./DialogTrigger.js');
+var DialogTriggerContext = require('./DialogTriggerContext.js');
+
+/**
+ * Dialog component, used to display a Dialog dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const Dialog = Object.assign(Dialog$1.Dialog, {
+    Block: DialogBlock.DialogBlock,
+    TriggerContext: DialogTriggerContext.DialogTriggerContext,
+    Trigger: DialogTrigger.DialogTrigger,
+});
+Dialog.Block.displayName = 'Dialog.Block';
+Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
+Dialog.Trigger.displayName = 'Dialog.Trigger';
+
+exports.DialogBlock = DialogBlock.DialogBlock;
+exports.DialogTrigger = DialogTrigger.DialogTrigger;
+exports.DialogTriggerContext = DialogTriggerContext.DialogTriggerContext;
+exports.Dialog = Dialog;

package/dist/cjs/components/Divider/Divider.js

@@ -2,13 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const Divider = React.forwardRef(({ color = 'default', className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("hr", { className: lite.clsx('ds-divider', `ds-divider--${color}`, className), ref: ref, ...rest }));
+/**
+ * Divider component, used to separate content. Uses `hr` element.
+ *
+ * @example
+ * <Divider />
+ */
+const Divider = react.forwardRef(function Divider({ className, ...rest }, ref) {
+    return (
+    // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is
+    jsxRuntime.jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
 });
-Divider.displayName = 'Divider';
-Divider.displayName = 'Divider';
 
 exports.Divider = Divider;

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var index = require('../Popover/index.js');
+
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example with TriggerContext
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-dropdown">Trigger</Button>
+ * <Dropdown id="my-dropdown">
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *   <Dropdown.List>
+ *     <Dropdown.Item>
+ *       <Dropdown.Button>Item</Dropdown.Button>
+ *     </Dropdown.Item>
+ *   </Dropdown.List>
+ * </Dropdown>
+ */
+const Dropdown = react.forwardRef(function DropdownContent({ placement = 'bottom-end', className, ...rest }, ref) {
+    return (jsxRuntime.jsx(index.Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
+});
+
+exports.Dropdown = Dropdown;

package/dist/cjs/components/Dropdown/DropdownButton.js

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Button = require('../Button/Button.js');
+
+const DropdownButton = react.forwardRef(function DropdownButton({ className, ...rest }, ref) {
+    return jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', ...rest });
+});
+
+exports.DropdownButton = DropdownButton;

package/dist/cjs/components/Dropdown/DropdownHeading.js

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Heading = require('../Heading/Heading.js');
+
+const DropdownHeading = react.forwardRef(function DropdownHeading({ className, ...rest }, ref) {
+    return jsxRuntime.jsx(Heading.Heading, { ref: ref, ...rest });
+});
+
+exports.DropdownHeading = DropdownHeading;

package/dist/cjs/components/Dropdown/DropdownItem.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const DropdownItem = react.forwardRef(function DropdownItem({ className, ...rest }, ref) {
+    return jsxRuntime.jsx("li", { ref: ref, ...rest });
+});
+
+exports.DropdownItem = DropdownItem;

package/dist/cjs/components/Dropdown/DropdownList.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const DropdownList = react.forwardRef(function DropdownList({ className, ...rest }, ref) {
+    return jsxRuntime.jsx("ul", { ref: ref, ...rest });
+});
+
+exports.DropdownList = DropdownList;

package/dist/cjs/components/Dropdown/DropdownTrigger.js

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../Popover/index.js');
+var PopoverTrigger = require('../Popover/PopoverTrigger.js');
+
+const DropdownTrigger = react.forwardRef(function DropdownTrigger({ asChild, ...rest }, ref) {
+    return jsxRuntime.jsx(PopoverTrigger.PopoverTrigger, { ref: ref, ...rest });
+});
+
+exports.DropdownTrigger = DropdownTrigger;

package/dist/cjs/components/Dropdown/DropdownTriggerContext.js

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../Popover/index.js');
+var PopoverTriggerContext = require('../Popover/PopoverTriggerContext.js');
+
+/**
+ * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
+ * @example
+ * <Dropdown.TriggerContext>
+ *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ *  <Dropdown>
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *    <Dropdown.List>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
+ *    </Dropdown.List>
+ *  </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
+const DropdownTriggerContext = ({ children, }) => {
+    return jsxRuntime.jsx(PopoverTriggerContext.PopoverTriggerContext, { children: children });
+};
+DropdownTriggerContext.displayName = 'DropdownTriggerContext';
+
+exports.DropdownTriggerContext = DropdownTriggerContext;

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

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+var Dropdown$1 = require('./Dropdown.js');
+var DropdownButton = require('./DropdownButton.js');
+var DropdownHeading = require('./DropdownHeading.js');
+var DropdownItem = require('./DropdownItem.js');
+var DropdownList = require('./DropdownList.js');
+var DropdownTrigger = require('./DropdownTrigger.js');
+var DropdownTriggerContext = require('./DropdownTriggerContext.js');
+
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
+const Dropdown = Object.assign(Dropdown$1.Dropdown, {
+    TriggerContext: DropdownTriggerContext.DropdownTriggerContext,
+    Heading: DropdownHeading.DropdownHeading,
+    List: DropdownList.DropdownList,
+    Item: DropdownItem.DropdownItem,
+    Button: DropdownButton.DropdownButton,
+    Trigger: DropdownTrigger.DropdownTrigger,
+});
+Dropdown.TriggerContext.displayName = 'Dropdown.TriggerContext';
+Dropdown.List.displayName = 'Dropdown.List';
+Dropdown.Heading.displayName = 'Dropdown.Heading';
+Dropdown.Item.displayName = 'Dropdown.Item';
+Dropdown.Button.displayName = 'Dropdown.Button';
+Dropdown.Trigger.displayName = 'Dropdown.Trigger';
+
+exports.DropdownButton = DropdownButton.DropdownButton;
+exports.DropdownHeading = DropdownHeading.DropdownHeading;
+exports.DropdownItem = DropdownItem.DropdownItem;
+exports.DropdownList = DropdownList.DropdownList;
+exports.DropdownTrigger = DropdownTrigger.DropdownTrigger;
+exports.DropdownTriggerContext = DropdownTriggerContext.DropdownTriggerContext;
+exports.Dropdown = Dropdown;

package/dist/cjs/components/ErrorSummary/ErrorSummary.js

@@ -0,0 +1,37 @@
+'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 ErrorSummaryContext = react.createContext({
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
+const ErrorSummary = react.forwardRef(function ErrorSummary({ asChild, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', className, ...rest }, ref) {
+    const randomId = react.useId();
+    const [headingId, setHeadingId] = react.useState(randomId);
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsxRuntime.jsx(Component, { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
+});
+
+exports.ErrorSummary = ErrorSummary;
+exports.ErrorSummaryContext = ErrorSummaryContext;

package/dist/cjs/components/ErrorSummary/ErrorSummaryHeading.js

@@ -2,19 +2,17 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index = require('../List/index.js');
-var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
+var react = require('react');
+var ErrorSummary = require('./ErrorSummary.js');
+var Heading = require('../Heading/Heading.js');
 
-const ErrorSummaryHeading = ({ id, ...rest }) => {
-    const { headingId, setHeadingId } = React.useContext(ErrorSummaryRoot.ErrorSummaryContext);
-    React.useEffect(() => {
-        if (id && headingId !== id) {
+const ErrorSummaryHeading = react.forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
+    const { headingId, setHeadingId } = react.useContext(ErrorSummary.ErrorSummaryContext);
+    react.useEffect(() => {
+        if (id && headingId !== id)
             setHeadingId(id);
-        }
     }, [headingId, id, setHeadingId]);
-    return (jsxRuntime.jsx(index.List.Heading, { ...rest, id: headingId, className: 'ds-error-summary__heading' }));
-};
-ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';
+    return jsxRuntime.jsx(Heading.Heading, { id: headingId, ref: ref, ...rest });
+});
 
 exports.ErrorSummaryHeading = ErrorSummaryHeading;

package/dist/cjs/components/ErrorSummary/ErrorSummaryItem.js

@@ -2,12 +2,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../List/index.js');
-var Link = require('../Link/Link.js');
+var react = require('react');
+require('../List/index.js');
+var ListItem = require('../List/ListItem.js');
 
-const ErrorSummaryItem = ({ href, asChild, children, ...rest }) => {
-    return (jsxRuntime.jsx(index.List.Item, { ...rest, children: jsxRuntime.jsx(Link.Link, { href: href, asChild: asChild, children: children }) }));
-};
-ErrorSummaryItem.displayName = 'ErrorSummaryItem';
+/**
+ * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
+ *
+ * @example
+ * <ErrorSummary.Item href='#'>Link to error</ErrorSummary.Item>
+ */
+const ErrorSummaryItem = react.forwardRef(function ErrorSummaryItem({ ...rest }, ref) {
+    return jsxRuntime.jsx(ListItem.ListItem, { ref: ref, ...rest });
+});
 
 exports.ErrorSummaryItem = ErrorSummaryItem;

package/dist/cjs/components/ErrorSummary/ErrorSummaryLink.js

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Link = require('../Link/Link.js');
+
+/**
+ * Link component used in ErrorSummary.
+ */
+const ErrorSummaryLink = react.forwardRef(function ErrorSummaryLink({ ...rest }, ref) {
+    return jsxRuntime.jsx(Link.Link, { ref: ref, "data-color": 'neutral', ...rest });
+});
+
+exports.ErrorSummaryLink = ErrorSummaryLink;

package/dist/cjs/components/ErrorSummary/ErrorSummaryList.js

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var index = require('../List/index.js');
 
-function ErrorSummaryList({ ...rest }) {
-    return jsxRuntime.jsx(index.List.Unordered, { ...rest });
-}
-ErrorSummaryList.displayName = 'ErrorSummaryList';
+const ErrorSummaryList = react.forwardRef(function ErrorSummaryList({ ...rest }, ref) {
+    return jsxRuntime.jsx(index.List.Unordered, { ...rest, ref: ref });
+});
 
-module.exports = ErrorSummaryList;
+exports.ErrorSummaryList = ErrorSummaryList;

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

@@ -1,23 +1,41 @@
 'use client';
 'use strict';
 
-var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
+var ErrorSummary$1 = require('./ErrorSummary.js');
 var ErrorSummaryHeading = require('./ErrorSummaryHeading.js');
 var ErrorSummaryItem = require('./ErrorSummaryItem.js');
+var ErrorSummaryLink = require('./ErrorSummaryLink.js');
 var ErrorSummaryList = require('./ErrorSummaryList.js');
 
-const ErrorSummary = {};
-ErrorSummary.Root = ErrorSummaryRoot.ErrorSummaryRoot;
-ErrorSummary.Item = ErrorSummaryItem.ErrorSummaryItem;
-ErrorSummary.Heading = ErrorSummaryHeading.ErrorSummaryHeading;
-ErrorSummary.List = ErrorSummaryList;
-ErrorSummary.Root.displayName = 'ErrorSummary.Root';
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
+const ErrorSummary = Object.assign(ErrorSummary$1.ErrorSummary, {
+    Heading: ErrorSummaryHeading.ErrorSummaryHeading,
+    Item: ErrorSummaryItem.ErrorSummaryItem,
+    List: ErrorSummaryList.ErrorSummaryList,
+    Link: ErrorSummaryLink.ErrorSummaryLink,
+});
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
+ErrorSummary.Link.displayName = 'ErrorSummary.Link';
 
-exports.ErrorSummaryRoot = ErrorSummaryRoot.ErrorSummaryRoot;
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
-exports.ErrorSummaryList = ErrorSummaryList;
+exports.ErrorSummaryLink = ErrorSummaryLink.ErrorSummaryLink;
+exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
 exports.ErrorSummary = ErrorSummary;

package/dist/cjs/components/Field/Field.js

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var cl = require('clsx/lite');
+var react = require('react');
+var fieldObserver = require('./fieldObserver.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, ...rest }, ref) {
+    const fieldRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([fieldRef, ref]);
+    react.useEffect(() => fieldObserver.fieldObserver(fieldRef.current), []);
+    return (jsxRuntime.jsx("div", { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
+});
+
+exports.Field = Field;

package/dist/cjs/components/Field/FieldAffix.js

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * FieldAffixes component, used to wrap a form field.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
+const FieldAffixes = react.forwardRef(function FieldAffixes({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("div", { className: cl('ds-field-affixes', className), ref: ref, ...rest }));
+});
+/**
+ * FieldAffix component, used to wrap a form field.
+ * Use together with Field.Affixes.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
+const FieldAffix = react.forwardRef(function FieldAffix({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-field-affix', className), "aria-hidden": 'true', ref: ref, ...rest }));
+});
+
+exports.FieldAffix = FieldAffix;
+exports.FieldAffixes = FieldAffixes;

package/dist/cjs/components/Field/FieldCounter.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var fieldObserver = require('./fieldObserver.js');
+var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
+var Paragraph = require('../Paragraph/Paragraph.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', ...rest }, ref) {
+    const [count, setCount] = react.useState(0);
+    const counterRef = react.useRef(null);
+    const hasExceededLimit = count > limit;
+    const remainder = limit - count;
+    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
+        field?.addEventListener('input', onInput);
+        return () => field?.removeEventListener('input', onInput);
+    }, [setCount]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsxRuntime.jsx(ValidationMessage.ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
+});
+
+exports.FieldCounter = FieldCounter;

package/dist/cjs/components/Field/FieldDescription.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+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/fieldObserver.js

@@ -0,0 +1,102 @@
+'use client';
+'use strict';
+
+function fieldObserver(fieldElement) {
+    if (!fieldElement)
+        return;
+    const elements = new Map();
+    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)) {
+                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, 'aria-disabled', null); // Reset disabled state
+                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
+                elements.delete(el);
+            }
+        }
+        // Connect elements
+        const describedbyIds = [describedby]; // Keep original aria-describedby
+        const inputId = input?.id || uuid;
+        const isDisabled = input?.hasAttribute('disabled') ||
+            input?.getAttribute('aria-disabled') === 'true';
+        for (const [el, value] of elements) {
+            const descriptionType = el.getAttribute('data-field');
+            const id = descriptionType ? `${inputId}:${descriptionType}` : inputId;
+            setAttr(el, 'aria-disabled', isDisabled ? 'true' : null); // Forward inputs disabled state to related elements to make axe tests happy
+            if (!value)
+                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
+            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;