@digdir/designsystemet-react 1.0.0-next.35 → 1.0.0-next.37

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
+
+const label = (text, count) => text.replace('%d', Math.abs(count).toString());
+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 onInput = ({ target }) => {
+            if (target instanceof HTMLInputElement ||
+                target instanceof HTMLTextAreaElement) {
+                setCount(target.value.length);
+            }
+        };
+        const field = counterRef.current?.closest('.ds-field');
+        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) }), jsxRuntime.jsx(ValidationMessage.ValidationMessage, { error: hasExceededLimit, ref: ref, ...rest, children: label(hasExceededLimit ? over : under, remainder) })] }));
+});
+
+exports.FieldCounter = FieldCounter;

package/dist/cjs/components/form/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/form/Field/fieldObserver.js

@@ -0,0 +1,97 @@
+'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) => '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;

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

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var Field$1 = require('./Field.js');
+var FieldAffix = require('./FieldAffix.js');
+var FieldCounter = require('./FieldCounter.js');
+var FieldDescription = require('./FieldDescription.js');
+
+/**
+ * @example
+ * <Field>
+ *  <Label>Label text</Label>
+ *  <Field.Description>Description</Field.Description>
+ *  <Input />
+ *  <ValidationMessage>Validation message</ValidationMessage>
+ * </Field>
+ */
+const Field = Object.assign(Field$1.Field, {
+    Description: FieldDescription.FieldDescription,
+    Affixes: FieldAffix.FieldAffixes,
+    Affix: FieldAffix.FieldAffix,
+    Counter: FieldCounter.FieldCounter,
+});
+Field.Description.displayName = 'Field.Description';
+Field.Affixes.displayName = 'Field.Affixes';
+Field.Affix.displayName = 'Field.Affix';
+Field.Counter.displayName = 'Field.Counter';
+
+exports.FieldAffix = FieldAffix.FieldAffix;
+exports.FieldAffixes = FieldAffix.FieldAffixes;
+exports.FieldCounter = FieldCounter.FieldCounter;
+exports.FieldDescription = FieldDescription.FieldDescription;
+exports.Field = Field;

package/dist/cjs/components/form/Fieldset/Fieldset.js

@@ -4,23 +4,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-var useFormField = require('../useFormField.js');
-var FieldsetContext = require('./FieldsetContext.js');
-var Label = require('../../Label/Label.js');
-var Paragraph = require('../../Paragraph/Paragraph.js');
-var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
-const Fieldset = react.forwardRef(function Fieldset(props, ref) {
-    const { children, legend, description, error, hideLegend, className, ...rest } = props;
-    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
-    const { inputProps, size, readOnly, errorId, hasError, descriptionId } = useFormField.useFormField(props, 'fieldset');
-    return (jsxRuntime.jsx(FieldsetContext.FieldsetContext.Provider, { value: {
-            disabled: props?.disabled,
-            error: error ?? fieldset?.error,
-            errorId: hasError ? errorId : undefined,
-            readOnly,
-            size,
-        }, children: jsxRuntime.jsxs("fieldset", { "aria-describedby": inputProps['aria-describedby'], "aria-invalid": inputProps['aria-invalid'], className: cl('ds-fieldset', className), "data-hidelegend": hideLegend || undefined, "data-readonly": readOnly || undefined, disabled: props?.disabled, ref: ref, ...rest, children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("legend", { children: legend }) }), !!description && (jsxRuntime.jsx(Paragraph.Paragraph, { id: descriptionId, size: size, variant: 'short', children: description })), children, jsxRuntime.jsx("div", { "aria-live": 'polite', "aria-relevant": 'additions removals', id: errorId, children: hasError && (jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: error })) })] }) }));
+const Fieldset = react.forwardRef(function Fieldset({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
 });
 
 exports.Fieldset = Fieldset;

package/dist/cjs/components/form/Fieldset/FieldsetDescription.js

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

package/dist/cjs/components/form/Fieldset/FieldsetLegend.js

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

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var Fieldset$1 = require('./Fieldset.js');
+var FieldsetDescription = require('./FieldsetDescription.js');
+var FieldsetLegend = require('./FieldsetLegend.js');
+
+/**
+ * @example
+ * <Fieldset>
+ *  <Fieldset.Legend>Legend text</Fieldset.Legend>
+ *  <Fieldset.Description>Description text</Fieldset.Description>
+ *  ...input components
+ * </Fieldset>
+ */
+const Fieldset = Object.assign(Fieldset$1.Fieldset, {
+    Legend: FieldsetLegend.FieldsetLegend,
+    Description: FieldsetDescription.FieldsetDescription,
+});
+Fieldset.Legend.displayName = 'Fieldset.Legend';
+Fieldset.Description.displayName = 'Fieldset.Description';
+
+exports.FieldsetDescription = FieldsetDescription.FieldsetDescription;
+exports.FieldsetLegend = FieldsetLegend.FieldsetLegend;
+exports.Fieldset = Fieldset;

package/dist/cjs/components/form/Input/Input.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/** Input field
+ *
+ * @example
+ * ```tsx
+ * <Input />
+ * ```
+ */
+const Input = react.forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
+    return (jsxRuntime.jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for checkbox / radio / switch
+            onClick?.(event);
+        }, ...rest }));
+});
+
+exports.Input = Input;

package/dist/cjs/components/form/Radio/Radio.js

@@ -2,18 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var cl = require('clsx/lite');
 var react = require('react');
-var useRadio = require('./useRadio.js');
-var Paragraph = require('../../Paragraph/Paragraph.js');
-var omit = require('../../../utilities/omit/omit.js');
+var index = require('../Field/index.js');
+var Input = require('../Input/Input.js');
 var Label = require('../../Label/Label.js');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
-const Radio = react.forwardRef((props, ref) => {
-    const { children, description, className, style, ...rest } = props;
-    const { inputProps, descriptionId, hasError, size = 'md', readOnly, } = useRadio.useRadio(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: cl('ds-radio', `ds-radio--${size}`, hasError && `ds-radio--error`, readOnly && `ds-radio--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: 'ds-radio__input', disabled: inputProps.disabled, ref: ref, ...omit.omit(['size', 'error'], rest), ...inputProps }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: cl('ds-radio__label'), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: 'ds-radio__description', children: description }) }))] }))] }) }));
+/**
+ * Radio used to select multiple options.
+ * @example
+ * <Radio label="I agree" value="agree" />
+ */
+const Radio = react.forwardRef(function Radio({ 'data-size': size, children, label, description, validation, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { "data-size": size, children: [jsxRuntime.jsx(Input.Input, { type: 'radio', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!validation && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: validation })] }));
 });
-Radio.displayName = 'Radio';
 
 exports.Radio = Radio;

package/dist/cjs/components/form/Search/Search.js

@@ -2,48 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
-var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
 var react = require('react');
-var Button = require('../../Button/Button.js');
-var useSearch = require('./useSearch.js');
-var Paragraph = require('../../Paragraph/Paragraph.js');
-var Label = require('../../Label/Label.js');
-var omit = require('../../../utilities/omit/omit.js');
 
-/** Search field
- *
- * @example
- * ```tsx
- * <Search label="Search" label">
- * ```
- */
-const Search = react.forwardRef((props, ref) => {
-    const { label, style, hideLabel = true, variant = 'simple', searchButtonLabel = 'Søk', clearButtonLabel = 'Tøm', defaultValue, value, onChange, onClear, disabled, onSearchClick, htmlSize = 27, className, ...rest } = props;
-    const { inputProps, size = 'md' } = useSearch.useSearch(props);
-    const inputRef = react.useRef();
-    const mergedRef = react$1.useMergeRefs([ref, inputRef]);
-    const [internalValue, setInternalValue] = react.useState(defaultValue ?? '');
-    const handleChange = react.useCallback((e) => {
-        const newValue = e.target.value;
-        value === undefined && setInternalValue(newValue);
-        onChange?.(e);
-    }, [onChange, value]);
-    const handleClear = () => {
-        onClear?.(internalValue);
-        setInternalValue('');
-        inputRef?.current?.focus();
-    };
-    const handleSearchClick = () => {
-        onSearchClick?.((value ?? internalValue).toString());
-    };
-    const isSimple = variant === 'simple';
-    const showClearButton = Boolean(value ?? internalValue) && !disabled;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: cl('ds-search', inputProps.disabled && 'ds-search--disabled', `ds-search--${size}`, className), children: [label && (jsxRuntime.jsx(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: cl('ds-search__label', hideLabel && 'ds-sr-only'), children: jsxRuntime.jsx("span", { children: label }) })), jsxRuntime.jsxs("div", { className: 'ds-search__field', children: [jsxRuntime.jsxs("div", { className: cl('ds-search__field', `ds-search--${size}`), children: [isSimple && (jsxRuntime.jsx(akselIcons.MagnifyingGlassIcon, { className: 'ds-search__icon', "aria-hidden": true })), jsxRuntime.jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: cl('ds-search__input', `ds-focus`, isSimple
-                                        ? 'ds-search__input--simple'
-                                        : 'ds-search__input--with-search-button'), ...omit.omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxRuntime.jsxs("button", { className: cl('ds-search__clear-button', `ds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `ds-sr-only`, children: clearButtonLabel }), jsxRuntime.jsx(akselIcons.XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsxRuntime.jsx(Button.Button, { className: 'ds-search__search-button', size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] })] }) }));
+const Search = react.forwardRef(function Search({ className, ...rest }, ref) {
+    return jsxRuntime.jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
 });
-Search.displayName = 'Search';
 
 exports.Search = Search;

package/dist/cjs/components/form/Search/SearchButton.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 SearchButton = react.forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
+    return (jsxRuntime.jsx(Button.Button, { ref: ref, type: 'submit', ...rest, children: children }));
+});
+
+exports.SearchButton = SearchButton;

package/dist/cjs/components/form/Search/SearchClear.js

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var utilities = require('../Combobox/utilities.js');
+var Button = require('../../Button/Button.js');
+
+const SearchClear = react.forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+    const handleClear = (e) => {
+        const target = e.target;
+        let input = null;
+        if (target instanceof HTMLElement)
+            input = target.closest('.ds-search')?.querySelector('input');
+        if (!input)
+            throw new Error('Input is missing');
+        /* narrow type to make TS happy */
+        if (!(input instanceof HTMLInputElement))
+            throw new Error('Input is not an input element');
+        e.preventDefault();
+        utilities.setReactInputValue(input, '');
+        input.focus();
+        onClick?.(e);
+    };
+    return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+
+exports.SearchClear = SearchClear;

package/dist/cjs/components/form/Search/SearchInput.js

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Input = require('../Input/Input.js');
+
+const SearchInput = react.forwardRef(function SearchInput({ ...rest }, ref) {
+    return (jsxRuntime.jsx(Input.Input, { ref: ref, type: 'search', 
+        /* We need an empty placeholder for the clear button to be able to show/hide */
+        placeholder: '', ...rest }));
+});
+
+exports.SearchInput = SearchInput;

package/dist/cjs/components/form/Search/index.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var Search$1 = require('./Search.js');
+var SearchButton = require('./SearchButton.js');
+var SearchClear = require('./SearchClear.js');
+var SearchInput = require('./SearchInput.js');
+
+/**
+ * Search field
+ *
+ * @example
+ * ```tsx
+ * <Search>
+ *  <Search.Input aria-label='Søk' />
+ *  <Search.Clear />
+ *  <Search.Button />
+ * </Search>
+ * ```
+ */
+const Search = Object.assign(Search$1.Search, {
+    Clear: SearchClear.SearchClear,
+    Button: SearchButton.SearchButton,
+    Input: SearchInput.SearchInput,
+});
+Search.Clear.displayName = 'Search.Clear';
+Search.Button.displayName = 'Search.Button';
+Search.Input.displayName = 'Search.Input';
+
+exports.SearchButton = SearchButton.SearchButton;
+exports.SearchClear = SearchClear.SearchClear;
+exports.SearchInput = SearchInput.SearchInput;
+exports.Search = Search;

package/dist/cjs/components/form/Select/Select.js

@@ -2,19 +2,21 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
 var react = require('react');
-var useSelect = require('./useSelect.js');
-var Paragraph = require('../../Paragraph/Paragraph.js');
-var Label = require('../../Label/Label.js');
-var omit = require('../../../utilities/omit/omit.js');
-var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
-const Select = react.forwardRef(function Select(props, ref) {
-    const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useSelect.useSelect(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: cl('ds-select--container', readOnly && 'ds-select--readonly', error && 'ds-select--error'), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: cl('ds-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-select__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: cl(`ds-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("div", { className: 'ds-select__wrapper', children: jsxRuntime.jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: cl('ds-select', `ds-select--${size}`, `ds-focus`, props.multiple && 'ds-select--multiple', className), ...omit.omit(['size', 'error', 'errorId'], rest), ...omit.omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsxRuntime.jsx("div", { id: errorId, className: 'ds-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: error }) }))] }) }));
+const Select = react.forwardRef(function Select({ className, onKeyDown, onMouseDown, ...rest }, ref) {
+    return (jsxRuntime.jsx("select", { className: cl('ds-input', className), ref: ref, onKeyDown: (event) => {
+            if (event.key === 'Tab')
+                return;
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for select
+            onKeyDown?.(event);
+        }, onMouseDown: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for select
+            onMouseDown?.(event);
+        }, ...rest }));
 });
 
 exports.Select = Select;

package/dist/cjs/components/form/Select/index.js

@@ -5,9 +5,10 @@ var Select$1 = require('./Select.js');
 var SelectOptgroup = require('./SelectOptgroup.js');
 var SelectOption = require('./SelectOption.js');
 
-const Select = Select$1.Select;
-Select.Option = SelectOption.SelectOption;
-Select.Optgroup = SelectOptgroup.SelectOptgroup;
+const Select = Object.assign(Select$1.Select, {
+    Option: SelectOption.SelectOption,
+    Optgroup: SelectOptgroup.SelectOptgroup,
+});
 Select.Option.displayName = 'Select.Option';
 Select.Optgroup.displayName = 'Select.Optgroup';
 

package/dist/cjs/components/form/Switch/Switch.js

@@ -2,19 +2,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-var cl = require('clsx/lite');
 var react = require('react');
-var useSwitch = require('./useSwitch.js');
-var Paragraph = require('../../Paragraph/Paragraph.js');
-var omit = require('../../../utilities/omit/omit.js');
+var index = require('../Field/index.js');
+var Input = require('../Input/Input.js');
 var Label = require('../../Label/Label.js');
 
-const Switch = react.forwardRef((props, ref) => {
-    const { children, description, position = 'left', className, ...rest } = props;
-    const { inputProps, descriptionId, size = 'md', readOnly, } = useSwitch.useSwitch(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, ...(inputProps.disabled && { 'aria-disabled': true }), children: jsxRuntime.jsxs("div", { className: cl(`ds-switch`, `ds-switch--${size}`, inputProps.disabled && `ds-switch--disabled`, readOnly && `ds-switch--readonly`, className), children: [jsxRuntime.jsx("input", { className: `ds-switch__input`, disabled: inputProps.disabled, ref: ref, ...omit.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsxs(Label.Label, { className: cl(`ds-switch__label`, position === 'right' && `ds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsxRuntime.jsx("span", { className: `ds-switch__track`, children: jsxRuntime.jsx("span", { className: `ds-switch__thumb` }) }), readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: `ds-switch__readonly__icon` })), children && jsxRuntime.jsx("span", { children: children })] }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `ds-switch__description`, children: description }) }))] }) }));
+/**
+ * Switch used to toggle options.
+ * @example
+ * <Switch label="I agree" value="agree" />
+ */
+const Switch = react.forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-position": position, "data-size": size, style: style, children: [jsxRuntime.jsx(Input.Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description })] }));
 });
-Switch.displayName = 'Switch';
 
 exports.Switch = Switch;

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

@@ -2,35 +2,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
 var react = require('react');
-var CharacterCounter = require('../CharacterCounter.js');
-var useTextarea = require('./useTextarea.js');
-var Paragraph = require('../../Paragraph/Paragraph.js');
-var Label = require('../../Label/Label.js');
-var omit = require('../../../utilities/omit/omit.js');
-var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
 /** Textarea field
  *
  * @example
  * ```tsx
- * <Textarea label="Textarea label">
+ * <Textarea />
  * ```
  */
-const Textarea = react.forwardRef((props, ref) => {
-    const { label, description, style, characterLimit, hideLabel, className, ...rest } = props;
-    const { textareaProps, descriptionId, hasError, errorId, size = 'md', readOnly, } = useTextarea.useTextarea(props);
-    const [value, setValue] = react.useState(props.defaultValue);
-    const characterLimitId = `${textareaProps.id}-charactercount}`;
-    const hasCharacterLimit = characterLimit != null;
-    const describedBy = cl(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: cl('ds-textarea', `ds-textarea--${size}`, hasError && `ds-textarea--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: cl('ds-textarea__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textarea__readonly-icon' })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: cl('ds-textarea__description', hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("textarea", { className: cl('ds-textarea__input', `ds-focus`), ref: ref, "aria-describedby": describedBy, disabled: textareaProps.disabled, readOnly: readOnly, ...omit.omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
-                        textareaProps?.onChange?.(e);
-                        setValue(e.target.value);
-                    } }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: value ? value.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: 'ds-textarea__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && (jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: props.error })) })] }) }));
+const Textarea = react.forwardRef(function Textarea({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));
 });
-Textarea.displayName = 'Textarea';
 
 exports.Textarea = Textarea;

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

@@ -2,35 +2,28 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-var cl = require('clsx/lite');
 var react = require('react');
-var CharacterCounter = require('../CharacterCounter.js');
-var useTextfield = require('./useTextfield.js');
-var Paragraph = require('../../Paragraph/Paragraph.js');
+var index = require('../Field/index.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 Label = require('../../Label/Label.js');
-var omit = require('../../../utilities/omit/omit.js');
 var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
-/** Text input field
+/**
+ *  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
  * ```tsx
  * <Textfield label="Textfield label">
  * ```
  */
-const Textfield = react.forwardRef((props, ref) => {
-    const { label, description, suffix, prefix, style, characterLimit, hideLabel, type = 'text', htmlSize = 20, className, ...rest } = props;
-    const { inputProps, descriptionId, hasError, errorId, size = 'md', readOnly, } = useTextfield.useTextfield(props);
-    const [inputValue, setInputValue] = react.useState(props.value || props.defaultValue);
-    const characterLimitId = `textfield-charactercount-${react.useId()}`;
-    const hasCharacterLimit = characterLimit != null;
-    const describedBy = cl(inputProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: cl(`ds-textfield`, `ds-textfield--${size}`, readOnly && `ds-textfield--readonly`, hasError && `ds-textfield--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: cl(`ds-textfield__label`, hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textfield__readonly__icon' })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: cl(`ds-textfield__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsxs("div", { className: 'ds-textfield__field', children: [prefix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, variant: 'short', children: jsxRuntime.jsx("div", { className: cl(`ds-textfield__adornment`, `ds-textfield__prefix`), "aria-hidden": 'true', children: prefix }) })), jsxRuntime.jsx("input", { className: cl(`ds-textfield__input`, `ds-focus`, prefix && `ds-textfield__input--with-prefix`, suffix && `ds-textfield__input--with-suffix`), ref: ref, type: type, disabled: inputProps.disabled, "aria-describedby": describedBy, size: htmlSize, ...omit.omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
-                                inputProps?.onChange?.(e);
-                                setInputValue(e.target.value);
-                            } }), suffix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, variant: 'short', children: jsxRuntime.jsx("div", { className: cl(`ds-textfield__adornment`, `ds-textfield__suffix`), "aria-hidden": 'true', children: suffix }) }))] }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: inputValue ? inputValue.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: 'ds-textfield__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && (jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: props.error })) })] }) }));
+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) }))] }));
 });
-Textfield.displayName = 'Textfield';
 
 exports.Textfield = Textfield;