@digdir/designsystemet-react 0.55.1-alpha.0 → 0.56.0

package/dist/cjs/components/Chip/Chip.module.css.js

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-var classes = {"chip":"fds-chip-chip-4563db0f","chipButton":"fds-chip-chipButton-4563db0f","label":"fds-chip-label-4563db0f","removable":"fds-chip-removable-4563db0f","xMark":"fds-chip-xMark-4563db0f","icon":"fds-chip-icon-4563db0f","spacing":"fds-chip-spacing-4563db0f","small":"fds-chip-small-4563db0f","checkmarkIcon":"fds-chip-checkmarkIcon-4563db0f","medium":"fds-chip-medium-4563db0f","large":"fds-chip-large-4563db0f","groupContainer":"fds-chip-groupContainer-4563db0f"};
+var classes = {"chip":"fds-chip-chip-4563db0f","chipButton":"fds-chip-chipButton-4563db0f","label":"fds-chip-label-4563db0f","removable":"fds-chip-removable-4563db0f","xMark":"fds-chip-xMark-4563db0f","small":"fds-chip-small-4563db0f","medium":"fds-chip-medium-4563db0f","large":"fds-chip-large-4563db0f","icon":"fds-chip-icon-4563db0f","spacing":"fds-chip-spacing-4563db0f","checkmarkIcon":"fds-chip-checkmarkIcon-4563db0f","groupContainer":"fds-chip-groupContainer-4563db0f"};
 
 module.exports = classes;

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -4,10 +4,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
-const DropdownMenu = ({ open, onClose, placement = 'bottom-end', size = 'medium', portal, children, ...rest }) => {
+const DropdownMenu = ({ open, onClose, placement = 'bottom-end', size = 'medium', portal, children, }) => {
     const triggerRef = React.useRef(null);
     const [internalOpen, setInternalOpen] = React.useState(open ?? false);
-    const anchorEl = rest.anchorEl ?? triggerRef.current;
+    const anchorEl = triggerRef.current;
     const isControlled = typeof open === 'boolean';
     React.useEffect(() => {
         setInternalOpen(open ?? false);

package/dist/cjs/components/Popover/Popover.js

@@ -23,7 +23,7 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const Popover = ({ children, placement = 'top', open, variant = 'default', size = 'medium', portal, onOpenChange, onClose, ...rest }) => {
+const Popover = ({ children, placement = 'top', open, variant = 'default', size = 'medium', portal, onOpenChange, onClose, }) => {
     const triggerRef = React.useRef(null);
     const [internalOpen, setInternalOpen] = React.useState(open ?? false);
     const randomPopoverId = React.useId();
@@ -34,7 +34,7 @@ const Popover = ({ children, placement = 'top', open, variant = 'default', size
     React__namespace.useEffect(() => {
         setInternalOpen(open ?? false);
     }, [open]);
-    const anchorEl = rest.anchorEl ?? triggerRef.current;
+    const anchorEl = triggerRef.current;
     return (jsxRuntime.jsx(PopoverContext.Provider, { value: {
             triggerRef,
             anchorEl,

package/dist/cjs/components/Popover/PopoverContent.js

@@ -9,7 +9,7 @@ var Popover = require('./Popover.js');
 var Popover_module = require('./Popover.module.css.js');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
-var floatingUi_reactDom = require('../../node_modules/@floating-ui/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
+var floatingUi_reactDom = require('../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
@@ -60,7 +60,7 @@ const PopoverContent = React.forwardRef(({ className, children, style, id, ...re
         },
         whileElementsMounted: floatingUi_dom.autoUpdate,
         elements: {
-            reference: anchorEl,
+            reference: anchorEl ?? undefined,
             floating: floatingEl.current,
         },
         middleware: [

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -8,7 +8,7 @@ var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/float
 var Tooltip_module = require('./Tooltip.module.css.js');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
-var floatingUi_reactDom = require('../../node_modules/@floating-ui/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
+var floatingUi_reactDom = require('../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);

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

@@ -12,7 +12,7 @@ var objectUtils = require('../../../utilities/objectUtils.js');
 var Label = require('../../Typography/Label/Label.js');
 
 const Checkbox = React.forwardRef((props, ref) => {
-    const { children, description, className, ...rest } = props;
+    const { children, description, className, style, ...rest } = props;
     const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useCheckbox.useCheckbox(props);
     const inputRef = floatingUi_react.useMergeRefs([
         ref,
@@ -22,7 +22,7 @@ const Checkbox = React.forwardRef((props, ref) => {
             }
         },
     ]);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Checkbox_module.container, Checkbox_module[size], inputProps.disabled && Checkbox_module.disabled, hasError && Checkbox_module.error, readOnly && Checkbox_module.readonly, className), children: [jsxRuntime.jsx("input", { className: Checkbox_module.input, ref: inputRef, ...objectUtils.omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), jsxRuntime.jsx(Label.Label, { className: Checkbox_module.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: Checkbox_module.description, children: description }) }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Checkbox_module.container, Checkbox_module[size], inputProps.disabled && Checkbox_module.disabled, hasError && Checkbox_module.error, readOnly && Checkbox_module.readonly, className), style: style, children: [jsxRuntime.jsx("input", { className: Checkbox_module.input, ref: inputRef, ...objectUtils.omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), jsxRuntime.jsx(Label.Label, { className: Checkbox_module.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: Checkbox_module.description, children: description }) }))] }) }));
 });
 Checkbox.displayName = 'Checkbox';
 

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

@@ -5,7 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
-var index = require('../../../node_modules/@tanstack/react-virtual/build/lib/index.js');
+var index = require('../../../node_modules/@tanstack/react-virtual/dist/esm/index.js');
+var ReactDOM = require('react-dom');
 var useFormField = require('../useFormField.js');
 var useDebounce = require('../../../utilities/useDebounce.js');
 var useCombobox = require('./useCombobox.js');
@@ -62,9 +63,23 @@ const Combobox = React.forwardRef(({ value, initialValue = [], onValueChange, la
     }, [multiple, value, options]);
     // floating UI
     const { refs, floatingStyles, context } = floatingUi_react.useFloating({
-        whileElementsMounted: floatingUi_dom.autoUpdate,
         open,
-        onOpenChange: setOpen,
+        onOpenChange: (newOpen) => {
+            ReactDOM.flushSync(() => {
+                if (refs.floating.current && !newOpen) {
+                    refs.floating.current.scrollTop = 0;
+                }
+                setTimeout(() => {
+                    setOpen(newOpen);
+                }, 1);
+            });
+        },
+        whileElementsMounted: (reference, floating, update) => {
+            floatingUi_dom.autoUpdate(reference, floating, update);
+            return () => {
+                floating.scrollTop = 0;
+            };
+        },
         middleware: [
             floatingUi_core.flip({ padding: 10 }),
             floatingUi_core.size({
@@ -223,7 +238,7 @@ const Combobox = React.forwardRef(({ value, initialValue = [], onValueChange, la
     const rowVirtualizer = index.useVirtualizer({
         count: optionsChildren.length,
         getScrollElement: () => refs.floating.current,
-        estimateSize: () => 40,
+        estimateSize: () => 70,
         measureElement: (elem) => {
             return elem.getBoundingClientRect().height;
         },

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

@@ -11,9 +11,9 @@ var objectUtils = require('../../../utilities/objectUtils.js');
 var Label = require('../../Typography/Label/Label.js');
 
 const Radio = React.forwardRef((props, ref) => {
-    const { children, description, className, ...rest } = props;
+    const { children, description, className, style, ...rest } = props;
     const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useRadio.useRadio(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Radio_module.container, Radio_module[size], inputProps.disabled && Radio_module.disabled, hasError && Radio_module.error, readOnly && Radio_module.readonly, className), children: [jsxRuntime.jsx("input", { className: Radio_module.input, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsx(Label.Label, { className: Radio_module.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: Radio_module.description, children: description }) }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Radio_module.container, Radio_module[size], inputProps.disabled && Radio_module.disabled, hasError && Radio_module.error, readOnly && Radio_module.readonly, className), style: style, children: [jsxRuntime.jsx("input", { className: Radio_module.input, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsx(Label.Label, { className: Radio_module.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: Radio_module.description, children: description }) }))] }) }));
 });
 Radio.displayName = 'Radio';
 

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

@@ -43,7 +43,7 @@ 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: clsx.clsx(Search_module.formField, inputProps.disabled && Search_module.disabled, Search_module[size], className), children: [label && (jsxRuntime.jsx(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx.clsx(Search_module.label, hideLabel && utility_module.visuallyHidden), children: jsxRuntime.jsx("span", { children: label }) })), jsxRuntime.jsxs("div", { className: Search_module.field, children: [jsxRuntime.jsxs("div", { className: clsx.clsx(Search_module.field, Search_module[size]), children: [isSimple && (jsxRuntime.jsx(akselIcons.MagnifyingGlassIcon, { className: Search_module.icon, "aria-hidden": true })), jsxRuntime.jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: clsx.clsx(Search_module.input, utility_module.focusable, isSimple && Search_module.simple, !isSimple && Search_module.withSearchButton), ...objectUtils.omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxRuntime.jsxs("button", { className: clsx.clsx(Search_module.clearButton, utility_module.focusable), type: 'button', onClick: handleClear, disabled: disabled, children: [jsxRuntime.jsx("span", { className: utility_module.visuallyHidden, children: clearButtonLabel }), jsxRuntime.jsx(akselIcons.XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsxRuntime.jsx(Button.Button, { className: Search_module.searchButton, size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] }), jsxRuntime.jsx("div", { className: Search_module.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: clsx.clsx(Search_module.formField, inputProps.disabled && Search_module.disabled, Search_module[size], className), children: [label && (jsxRuntime.jsx(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx.clsx(Search_module.label, hideLabel && utility_module.visuallyHidden), children: jsxRuntime.jsx("span", { children: label }) })), jsxRuntime.jsxs("div", { className: Search_module.field, children: [jsxRuntime.jsxs("div", { className: Search_module.field, children: [isSimple && (jsxRuntime.jsx(akselIcons.MagnifyingGlassIcon, { className: Search_module.icon, "aria-hidden": true })), jsxRuntime.jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: clsx.clsx(Search_module.input, utility_module.focusable, Search_module[size], isSimple && Search_module.simple, !isSimple && Search_module.withSearchButton), ...objectUtils.omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxRuntime.jsxs("button", { className: clsx.clsx(Search_module.clearButton, utility_module.focusable), type: 'button', onClick: handleClear, disabled: disabled, children: [jsxRuntime.jsx("span", { className: utility_module.visuallyHidden, children: clearButtonLabel }), jsxRuntime.jsx(akselIcons.XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsxRuntime.jsx(Button.Button, { className: Search_module.searchButton, size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] }), jsxRuntime.jsx("div", { className: Search_module.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
 });
 Search.displayName = 'Search';
 

package/dist/cjs/node_modules/@floating-ui/react/dist/floating-ui.react.js

@@ -4,7 +4,7 @@
 var React = require('react');
 var floatingUi_react_utils = require('../utils/dist/floating-ui.react.utils.js');
 var floatingUi_utils = require('../node_modules/@floating-ui/utils/dist/floating-ui.utils.js');
-var floatingUi_reactDom = require('../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
+var floatingUi_reactDom = require('../../react-dom/dist/floating-ui.react-dom.js');
 var floatingUi_utils_dom$1 = require('../node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.js');
 var index_esm = require('../../../tabbable/dist/index.esm.js');
 var ReactDOM = require('react-dom');

package/dist/cjs/node_modules/@floating-ui/{react/node_modules/@floating-ui/react-dom → react-dom}/dist/floating-ui.react-dom.js

@@ -1,10 +1,10 @@
 'use client';
 'use strict';
 
-var floatingUi_dom = require('../../../../../dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../dom/dist/floating-ui.dom.js');
 var React = require('react');
 var ReactDOM = require('react-dom');
-var floatingUi_core = require('../../../../../core/dist/floating-ui.core.js');
+var floatingUi_core = require('../../core/dist/floating-ui.core.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/dist/cjs/node_modules/@tanstack/react-virtual/{build/lib → dist/esm}/index.js

@@ -1,10 +1,9 @@
 'use client';
 'use strict';
 
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var ReactDOM = require('react-dom');
-var index = require('../../../virtual-core/build/lib/index.js');
+var index = require('../../../virtual-core/dist/esm/index.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -25,53 +24,40 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-/**
- * react-virtual
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
-//
-
-var useIsomorphicLayoutEffect = typeof document !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 function useVirtualizerBase(options) {
-  var rerender = React__namespace.useReducer(function () {
-    return {};
-  }, {})[1];
-  var resolvedOptions = _rollupPluginBabelHelpers.extends({}, options, {
-    onChange: function onChange(instance, sync) {
+  const rerender = React__namespace.useReducer(() => ({}), {})[1];
+  const resolvedOptions = {
+    ...options,
+    onChange: (instance2, sync) => {
+      var _a;
       if (sync) {
         ReactDOM.flushSync(rerender);
       } else {
         rerender();
       }
-      options.onChange == null || options.onChange(instance, sync);
+      (_a = options.onChange) == null ? void 0 : _a.call(options, instance2, sync);
     }
-  });
-  var _React$useState = React__namespace.useState(function () {
-      return new index.Virtualizer(resolvedOptions);
-    }),
-    instance = _React$useState[0];
+  };
+  const [instance] = React__namespace.useState(
+    () => new index.Virtualizer(resolvedOptions)
+  );
   instance.setOptions(resolvedOptions);
-  React__namespace.useEffect(function () {
+  React__namespace.useEffect(() => {
     return instance._didMount();
   }, []);
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     return instance._willUpdate();
   });
   return instance;
 }
 function useVirtualizer(options) {
-  return useVirtualizerBase(_rollupPluginBabelHelpers.extends({
+  return useVirtualizerBase({
     observeElementRect: index.observeElementRect,
     observeElementOffset: index.observeElementOffset,
-    scrollToFn: index.elementScroll
-  }, options));
+    scrollToFn: index.elementScroll,
+    ...options
+  });
 }
 
 exports.Virtualizer = index.Virtualizer;