@digdir/designsystemet-react 1.0.0-next.32 → 1.0.0-next.34

package/dist/cjs/components/form/Combobox/internal/ComboboxLabel.js

@@ -3,12 +3,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../../node_modules/clsx/dist/lite.js');
+var cl = require('clsx/lite');
 var Label = require('../../../Typography/Label/Label.js');
 var Paragraph = require('../../../Typography/Paragraph/Paragraph.js');
 
 const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: lite.clsx('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: formFieldProps.descriptionId, className: lite.clsx('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: cl('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: formFieldProps.descriptionId, className: cl('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
 };
 ComboboxLabel.displayName = 'ComboboxLabel';
 

package/dist/cjs/components/form/Combobox/useCombobox.js

@@ -1,18 +1,19 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
+var Option = require('./Option/Option.js');
 var utilities = require('./utilities.js');
 
 const isOption = (option) => !!option;
 function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
     return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
 }, initialValue, }) {
-    const filterCallback = React.useCallback(filter, [filter]);
-    const { optionsChildren, customIds, restChildren, interactiveChildren } = React.useMemo(() => {
-        const allChildren = React.Children.toArray(children);
+    const filterCallback = react.useCallback(filter, [filter]);
+    const { optionsChildren, customIds, restChildren, interactiveChildren } = react.useMemo(() => {
+        const allChildren = react.Children.toArray(children);
         const result = allChildren.reduce((acc, child) => {
-            if (utilities.isComboboxOption(child)) {
+            if (Option.isComboboxOption(child)) {
                 acc.optionsChildren.push(child);
             }
             else {
@@ -35,7 +36,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         });
         return result;
     }, [children]);
-    const options = React.useMemo(() => {
+    const options = react.useMemo(() => {
         const values = [];
         const allOptions = {};
         optionsChildren.map((child) => {
@@ -44,7 +45,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
             if (!props.displayValue) {
                 let childrenLabel = '';
                 // go over children and find all strings
-                React.Children.forEach(props.children, (child) => {
+                react.Children.forEach(props.children, (child) => {
                     if (typeof child === 'string') {
                         childrenLabel += child;
                     }
@@ -67,7 +68,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         });
         return allOptions;
     }, [optionsChildren]);
-    const preSelectedOptions = React.useMemo(() => (initialValue?.map((key) => {
+    const preSelectedOptions = react.useMemo(() => (initialValue?.map((key) => {
         return utilities.prefix(key);
     }) || []).reduce((acc, value) => {
         const option = options[value];
@@ -76,8 +77,8 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         }
         return acc;
     }, {}), [initialValue, options]);
-    const [selectedOptions, setSelectedOptions] = React.useState(preSelectedOptions);
-    const { filteredOptions, filteredOptionsChildren } = React.useMemo(() => {
+    const [selectedOptions, setSelectedOptions] = react.useState(preSelectedOptions);
+    const { filteredOptions, filteredOptionsChildren } = react.useMemo(() => {
         const filteredOptions = [];
         const filteredOptionsChildren = Object.keys(options)
             .map((option, index) => {

package/dist/cjs/components/form/Combobox/useFloatingCombobox.js

@@ -1,24 +1,22 @@
 'use client';
 'use strict';
 
-var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var React = require('react');
-var ReactDOM = require('react-dom');
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+var reactDom = require('react-dom');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
-var floatingUi_dom = require('../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
-var floatingUi_reactDom = require('../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 
 const useFloatingCombobox = ({ listRef }) => {
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = react.useState(false);
     const { activeIndex } = ComboboxIdContext.useComboboxId();
     const dispatch = ComboboxIdContext.useComboboxIdDispatch();
     // floating UI
-    const { refs, floatingStyles, context } = floatingUi_react.useFloating({
+    const { refs, floatingStyles, context } = react$1.useFloating({
         open,
         onOpenChange: (newOpen) => {
             if (!newOpen)
                 dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
-            ReactDOM.flushSync(() => {
+            reactDom.flushSync(() => {
                 if (refs.floating.current && !newOpen) {
                     refs.floating.current.scrollTop = 0;
                 }
@@ -28,14 +26,14 @@ const useFloatingCombobox = ({ listRef }) => {
             });
         },
         whileElementsMounted: (reference, floating, update) => {
-            floatingUi_dom.autoUpdate(reference, floating, update);
+            react$1.autoUpdate(reference, floating, update);
             return () => {
                 floating.scrollTop = 0;
             };
         },
         middleware: [
-            floatingUi_reactDom.flip({ padding: 10 }),
-            floatingUi_reactDom.size({
+            react$1.flip({ padding: 10 }),
+            react$1.size({
                 apply({ rects, elements }) {
                     requestAnimationFrame(() => {
                         Object.assign(elements.floating.style, {
@@ -45,12 +43,12 @@ const useFloatingCombobox = ({ listRef }) => {
                     });
                 },
             }),
-            floatingUi_reactDom.offset(10),
+            react$1.offset(10),
         ],
     });
-    const role = floatingUi_react.useRole(context, { role: 'listbox' });
-    const dismiss = floatingUi_react.useDismiss(context);
-    const listNav = floatingUi_react.useListNavigation(context, {
+    const role = react$1.useRole(context, { role: 'listbox' });
+    const dismiss = react$1.useDismiss(context);
+    const listNav = react$1.useListNavigation(context, {
         listRef,
         activeIndex,
         virtual: true,
@@ -61,7 +59,7 @@ const useFloatingCombobox = ({ listRef }) => {
             dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index || 0 });
         },
     });
-    const { getReferenceProps, getFloatingProps, getItemProps } = floatingUi_react.useInteractions([role, dismiss, listNav]);
+    const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([role, dismiss, listNav]);
     return {
         open,
         setOpen,

package/dist/cjs/components/form/Combobox/utilities.js

@@ -1,15 +1,11 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var Custom = require('./Custom.js');
-var Option = require('./Option/Option.js');
 
-function isComboboxOption(child) {
-    return React.isValidElement(child) && child.type === Option.ComboboxOption;
-}
 function isComboboxCustom(child) {
-    return React.isValidElement(child) && child.type === Custom.ComboboxCustom;
+    return react.isValidElement(child) && child.type === Custom.ComboboxCustom;
 }
 function isInteractiveComboboxCustom(child) {
     return isComboboxCustom(child) && child.props.interactive === true;
@@ -38,7 +34,6 @@ const setReactInputValue = (input, value) => {
 };
 
 exports.isComboboxCustom = isComboboxCustom;
-exports.isComboboxOption = isComboboxOption;
 exports.isInteractiveComboboxCustom = isInteractiveComboboxCustom;
 exports.prefix = prefix;
 exports.removePrefix = removePrefix;

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

@@ -2,27 +2,25 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
+var useFormField = require('../useFormField.js');
 var FieldsetContext = require('./FieldsetContext.js');
-var useFieldset = require('./useFieldset.js');
 var Label = require('../../Typography/Label/Label.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+var ValidationMessage = require('../../Typography/ValidationMessage/ValidationMessage.js');
 
-const Fieldset = React.forwardRef((props, ref) => {
+const Fieldset = react.forwardRef(function Fieldset(props, ref) {
     const { children, legend, description, error, hideLegend, className, ...rest } = props;
-    const { fieldsetProps, size, readOnly, errorId, hasError, descriptionId } = useFieldset.useFieldset(props);
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
+    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,
-            size,
-            disabled: props?.disabled,
             readOnly,
-        }, children: jsxRuntime.jsxs("fieldset", { ...fieldsetProps, className: lite.clsx('ds-fieldset', !hideLegend && 'ds-fieldset--spacing', readOnly && 'ds-fieldset--readonly', className), disabled: props?.disabled, ref: ref, ...rest, children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("legend", { className: 'ds-fieldset__legend', children: jsxRuntime.jsxs("span", { className: lite.clsx('ds-fieldset__legend__content', hideLegend && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { className: 'ds-fieldset__readonly__icon', "aria-hidden": true })), legend] }) }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, variant: 'short', asChild: true, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx('ds-fieldset__description', 'ds-font-weight--regular', hideLegend && `ds-sr-only`), children: description }) })), children, jsxRuntime.jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: 'ds-fieldset__error-message', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) })] }) }));
+            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 })) })] }) }));
 });
-Fieldset.displayName = 'Fieldset';
 
 exports.Fieldset = Fieldset;

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

@@ -1,8 +1,8 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 
-const FieldsetContext = React.createContext(null);
+const FieldsetContext = react.createContext(null);
 
 exports.FieldsetContext = FieldsetContext;

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

@@ -2,17 +2,17 @@
 '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');
 var useRadio = require('./useRadio.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var omit = require('../../../utilities/omit/omit.js');
 var Label = require('../../Typography/Label/Label.js');
 
-const Radio = React.forwardRef((props, ref) => {
+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: lite.clsx('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: lite.clsx('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 }) }))] }))] }) }));
+    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.displayName = 'Radio';
 

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

@@ -2,20 +2,20 @@
 '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');
 var Fieldset = require('../Fieldset/Fieldset.js');
 
-const RadioGroupContext = React.createContext(null);
-const RadioGroup = React.forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'md', required, inline, className, ...rest }, ref) => {
-    const nameId = React.useId();
+const RadioGroupContext = react.createContext(null);
+const RadioGroup = react.forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'md', required, inline, className, ...rest }, ref) => {
+    const nameId = react.useId();
     return (jsxRuntime.jsx(Fieldset.Fieldset, { readOnly: readOnly, size: size, className: className, ref: ref, ...rest, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
                 value,
                 defaultValue,
                 name: name ?? `radiogroup-name-${nameId}`,
                 onChange,
                 required,
-            }, children: jsxRuntime.jsx("div", { className: lite.clsx('ds-radio__group', `ds-radio__group--${size}`, inline && 'ds-radio__group--horizontal'), children: children }) }) }));
+            }, children: jsxRuntime.jsx("div", { className: cl('ds-radio__group', `ds-radio__group--${size}`, inline && 'ds-radio__group--horizontal'), children: children }) }) }));
 });
 RadioGroup.displayName = 'RadioGroup';
 

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

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var useFormField = require('../useFormField.js');
 var RadioGroup = require('./RadioGroup.js');
 
 /** Handles props for `Radio` in context with `Radio.Group` (and `Fieldset`) */
 const useRadio = (props) => {
-    const radioGroup = React.useContext(RadioGroup.RadioGroupContext);
+    const radioGroup = react.useContext(RadioGroup.RadioGroupContext);
     const { inputProps, readOnly, ...rest } = useFormField.useFormField(props, 'radio');
     return {
         ...rest,

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

@@ -2,12 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var react$1 = require('@floating-ui/react');
 var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var useSearch = require('./useSearch.js');
+var cl = require('clsx/lite');
+var react = require('react');
 var Button = require('../../Button/Button.js');
+var useSearch = require('./useSearch.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var Label = require('../../Typography/Label/Label.js');
 var omit = require('../../../utilities/omit/omit.js');
@@ -19,13 +19,13 @@ var omit = require('../../../utilities/omit/omit.js');
  * <Search label="Search" label">
  * ```
  */
-const Search = React.forwardRef((props, ref) => {
+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 = floatingUi_react.useMergeRefs([ref, inputRef]);
-    const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
-    const handleChange = React.useCallback((e) => {
+    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);
@@ -40,9 +40,9 @@ const Search = React.forwardRef((props, ref) => {
     };
     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: lite.clsx('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: lite.clsx('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: lite.clsx('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: lite.clsx('ds-search__input', `ds-focus`, isSimple
+    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: lite.clsx('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 }))] })] }) }));
+                                        : '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 }))] })] }) }));
 });
 Search.displayName = 'Search';
 

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

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var FieldsetContext = require('../Fieldset/FieldsetContext.js');
 var useFormField = require('../useFormField.js');
 
 /** Handles props for `Search` in context with `Fieldset` */
 const useSearch = (props) => {
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
     const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'search');
     return {
         ...rest,

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

@@ -0,0 +1,20 @@
+'use client';
+'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 Label = require('../../Typography/Label/Label.js');
+var omit = require('../../../utilities/omit/omit.js');
+var ValidationMessage = require('../../Typography/ValidationMessage/ValidationMessage.js');
+var Paragraph = require('../../Typography/Paragraph/Paragraph.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 }) }))] }) }));
+});
+
+exports.Select = Select;

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

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+const SelectOptgroup = react.forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'optgroup';
+    return jsxRuntime.jsx(Component, { ...rest, ref: ref });
+});
+
+exports.SelectOptgroup = SelectOptgroup;

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

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+const SelectOption = react.forwardRef(function SelectOption({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'option';
+    return jsxRuntime.jsx(Component, { ...rest, ref: ref });
+});
+
+exports.SelectOption = SelectOption;

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+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;
+Select.Option.displayName = 'Select.Option';
+Select.Optgroup.displayName = 'Select.Optgroup';
+
+exports.SelectOptgroup = SelectOptgroup.SelectOptgroup;
+exports.SelectOption = SelectOption.SelectOption;
+exports.Select = Select;

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

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var FieldsetContext = require('../Fieldset/FieldsetContext.js');
+var useFormField = require('../useFormField.js');
+
+/** Handles props for `Select` in context with `Fieldset` */
+const useSelect = (props) => {
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
+    const { inputProps: selectProps, readOnly = false, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'select');
+    return {
+        ...rest,
+        readOnly,
+        size,
+        selectProps: {
+            ...selectProps,
+            readOnly,
+            onClick: (event) => {
+                if (readOnly)
+                    return event.preventDefault();
+                props?.onClick?.(event);
+            },
+            onKeyDown: (event) => {
+                if (readOnly) {
+                    if (event.key === 'Tab')
+                        return;
+                    return event.preventDefault();
+                }
+                props?.onKeyDown?.(event);
+            },
+            onMouseDown: (event) => {
+                if (readOnly) {
+                    if (event.target instanceof HTMLElement)
+                        event.target.focus();
+                    return event.preventDefault();
+                }
+                props?.onMouseDown?.(event);
+            },
+            onChange: (event) => {
+                if (readOnly)
+                    return event.preventDefault();
+                props?.onChange?.(event);
+            },
+        },
+    };
+};
+
+exports.useSelect = useSelect;

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

@@ -3,17 +3,17 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 var useSwitch = require('./useSwitch.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var omit = require('../../../utilities/omit/omit.js');
 var Label = require('../../Typography/Label/Label.js');
 
-const Switch = React.forwardRef((props, ref) => {
+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, children: jsxRuntime.jsxs("div", { className: lite.clsx(`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: lite.clsx(`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 }) }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, 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.displayName = 'Switch';
 

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

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var CheckboxGroup = require('../Checkbox/CheckboxGroup.js');
 var useFormField = require('../useFormField.js');
 
 /** Handles props for `Switch` in context with `Checkbox.Group` (and `Fieldset`) */
 const useSwitch = (props) => {
-    const checkboxGroup = React.useContext(CheckboxGroup.CheckboxGroupContext);
+    const checkboxGroup = react.useContext(CheckboxGroup.CheckboxGroupContext);
     const { inputProps, readOnly, ...rest } = useFormField.useFormField(props, 'switch');
     const propsValue = props.value || '';
     return {

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

@@ -3,14 +3,14 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 var CharacterCounter = require('../CharacterCounter.js');
 var useTextarea = require('./useTextarea.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var Label = require('../../Typography/Label/Label.js');
 var omit = require('../../../utilities/omit/omit.js');
-var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+var ValidationMessage = require('../../Typography/ValidationMessage/ValidationMessage.js');
 
 /** Textarea field
  *
@@ -19,17 +19,17 @@ var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
  * <Textarea label="Textarea label">
  * ```
  */
-const Textarea = React.forwardRef((props, ref) => {
+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 [value, setValue] = react.useState(props.defaultValue);
     const characterLimitId = `${textareaProps.id}-charactercount}`;
     const hasCharacterLimit = characterLimit != null;
-    const describedBy = lite.clsx(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: lite.clsx('ds-textarea', `ds-textarea--${size}`, hasError && `ds-textarea--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: lite.clsx('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: lite.clsx('ds-textarea__description', hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("textarea", { className: lite.clsx('ds-textarea__input', `ds-focus`), ref: ref, "aria-describedby": describedBy, disabled: textareaProps.disabled, readOnly: readOnly, ...omit.omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
+    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(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
+                    } }), 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 })) })] }) }));
 });
 Textarea.displayName = 'Textarea';
 

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

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var FieldsetContext = require('../Fieldset/FieldsetContext.js');
 var useFormField = require('../useFormField.js');
 
 /** Handles props for `Textarea` in context with `Fieldset` */
 const useTextarea = (props) => {
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
     const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'textarea');
     return {
         ...rest,