@digdir/designsystemet-react 1.8.0 → 1.10.0

package/dist/esm/components/chip/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { ChipRemovable, ChipRadio, ChipCheckbox, ChipButton } from './chips.js';
+import { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './chips.js';
 
 const ChipComponent = {
     Button: ChipButton,

package/dist/esm/components/details/details.js

@@ -2,8 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useEffect } from 'react';
-import '@u-elements/u-details';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@u-elements/u-details';
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.

package/dist/esm/components/dialog/dialog.js

@@ -3,9 +3,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 import { Button } from '../button/button.js';
 import { Context } from './dialog-trigger-context.js';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 /**
  * Dialog component, used to display a dialog dialog.
@@ -30,7 +30,7 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
  *   Content
  * </Dialog>
  */
-const Dialog = forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
+const Dialog = forwardRef(function Dialog({ asChild, children, className, placement = 'center', closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
     const contextRef = useContext(Context);
     const dialogRef = useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
     const Component = asChild ? Slot : 'dialog';
@@ -87,7 +87,7 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
         currentRef?.addEventListener('close', handleClose);
         return () => currentRef?.removeEventListener('close', handleClose);
     }, [onClose]);
-    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
+    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-placement": placement, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
 });
 
 export { Dialog };

package/dist/esm/components/error-summary/error-summary.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { forwardRef, createContext, useId, useState } from 'react';
+import { createContext, forwardRef, useId, useState } from 'react';
 
 const ErrorSummaryContext = createContext({
     headingId: 'heading',

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

@@ -1,10 +1,12 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useEffect } from 'react';
+import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
 import { Paragraph } from '../paragraph/paragraph.js';
 import { ValidationMessage } from '../validation-message/validation-message.js';
 import { isInputLike } from './field-observer.js';
-import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
 
 const label = (text, count) => text.replace('%d', Math.abs(count).toString());
 /**

package/dist/esm/components/field/field.js

@@ -3,8 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useEffect } from 'react';
-import { fieldObserver } from './field-observer.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { fieldObserver } from './field-observer.js';
 
 /**
  * Field component, used to wrap a form field.

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

@@ -1,6 +1,6 @@
 'use client';
 import { ListItem } from './list-item.js';
-import { ListUnordered, ListOrdered } from './lists.js';
+import { ListOrdered, ListUnordered } from './lists.js';
 
 const ListComponent = {
     Item: ListItem,

package/dist/esm/components/popover/popover.js

@@ -4,8 +4,8 @@ import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/d
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
-import { Context } from './popover-trigger-context.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Context } from './popover-trigger-context.js';
 
 /**
  * Popover component, used to display content in a popover over an element.
@@ -45,7 +45,7 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
                 setInternalOpen(false);
                 onClose?.();
             }
-            else if (isTrigger) {
+            else if (!controlledOpen && isTrigger) {
                 setInternalOpen(true);
                 onOpen?.();
             }

package/dist/esm/components/skeleton/skeleton.js

@@ -3,8 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
 
 /**
  * Skeleton is used to represent a draft of page while the content loads.

package/dist/esm/components/spinner/spinner.js

@@ -2,8 +2,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
 
 /**
  * Spinner component used for indicating busy or indeterminate loading.

package/dist/esm/components/suggestion/suggestion-clear.js

@@ -15,7 +15,7 @@ import { Button } from '../button/button.js';
  *   <Suggestion.List />
  * </Suggestion>
  */
-const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
     return (jsx(Button, { "aria-label": label, asChild: true, icon: true, hidden: true, ref: ref, variant: 'tertiary', ...rest, children: jsx("del", {}) }));
 });
 

package/dist/esm/components/suggestion/suggestion-list.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useEffect } from 'react';
 import '@u-elements/u-datalist';
-import { autoUpdate, computePosition } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, shift } from '@floating-ui/dom';
 import { SuggestionContext } from './suggestion.js';
 
 /**
@@ -16,7 +16,7 @@ import { SuggestionContext } from './suggestion.js';
  *   <Suggestion.List />
  * </Suggestion>
  */
-const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
+const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, autoPlacement = true, ...rest }, ref) {
     const { handleFilter, uComboboxRef } = useContext(SuggestionContext);
     useEffect(handleFilter); // Must run on every render
     // Position with floating-ui
@@ -28,9 +28,22 @@ const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forsl
                 computePosition(trigger, list, {
                     placement: 'bottom',
                     strategy: 'fixed',
-                    middleware: [triggerWidth],
-                }).then(({ x, y }) => {
-                    list.style.translate = `${Math.round(x)}px calc(${Math.round(y)}px + var(--dsc-suggestion-list-gap))`;
+                    middleware: [
+                        ...(autoPlacement
+                            ? [
+                                flip({
+                                    fallbackAxisSideDirection: 'start',
+                                    fallbackPlacements: ['top'],
+                                }),
+                                shift(),
+                            ]
+                            : []),
+                        undefined,
+                        triggerWidth,
+                    ],
+                }).then(({ x, y, placement }) => {
+                    const varOperator = placement.startsWith('top') ? '-' : '+';
+                    list.style.translate = `${Math.round(x)}px calc(${Math.round(y)}px ${varOperator} var(--dsc-suggestion-list-gap))`;
                 });
             });
         }

package/dist/esm/components/suggestion/suggestion.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, createContext, useRef, useId, useState, useEffect, useCallback } from 'react';
+import { forwardRef, useRef, useId, useState, useEffect, useCallback, createContext } from 'react';
 import '@u-elements/u-combobox';
 import cl from 'clsx/lite';
-import { Chip as ChipComponent } from '../chip/index.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Chip as ChipComponent } from '../chip/index.js';
 
 const text = (el) => el.textContent?.trim() || '';
 const sanitizeItems = (values = []) => typeof values === 'string'

package/dist/esm/components/tabs/tabs-list.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
 import { Context } from './tabs.js';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 /**
  * The container for all `Tab` components.

package/dist/esm/components/tabs/tabs-panel.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useId, useState, useRef, useEffect } from 'react';
-import { Context } from './tabs.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Context } from './tabs.js';
 
 /**
  * A single content item in a Tabs component.

package/dist/esm/components/tabs/tabs.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, createContext, useRef, useState } from 'react';
+import { createContext, forwardRef, useRef, useState } from 'react';
 
 const Context = createContext({});
 /**

package/dist/esm/components/toggle-group/toggle-group.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, useId, useState, createContext } from 'react';
+import { createContext, forwardRef, useId, useState } from 'react';
 import { RovingFocusRoot } from '../../utilities/roving-focus/roving-focus-root.js';
 
 const ToggleGroupContext = createContext({});

package/dist/esm/index.js

@@ -1,106 +1,107 @@
 'use client';
+export { Alert } from './components/alert/alert.js';
+export { Avatar } from './components/avatar/avatar.js';
+export { Badge } from './components/badge/index.js';
+export { Breadcrumbs } from './components/breadcrumbs/index.js';
+export { Button } from './components/button/button.js';
+export { Combobox } from './components/Combobox/index.js';
+export { Card } from './components/card/index.js';
+export { Checkbox } from './components/checkbox/checkbox.js';
+export { Chip } from './components/chip/index.js';
+export { Details } from './components/details/index.js';
+export { Dialog } from './components/dialog/index.js';
+export { Divider } from './components/divider/divider.js';
+export { Dropdown } from './components/dropdown/index.js';
+export { ErrorSummary } from './components/error-summary/index.js';
+export { Field } from './components/field/index.js';
+export { Fieldset } from './components/fieldset/index.js';
+export { Heading } from './components/heading/heading.js';
+export { Input } from './components/input/input.js';
+export { Label } from './components/label/label.js';
+export { Link } from './components/link/link.js';
+export { List } from './components/list/index.js';
+export { Pagination } from './components/pagination/index.js';
+export { Paragraph } from './components/paragraph/paragraph.js';
+export { Popover } from './components/popover/index.js';
+export { Radio } from './components/radio/radio.js';
+export { Search } from './components/search/index.js';
+export { Select } from './components/select/index.js';
+export { Skeleton } from './components/skeleton/skeleton.js';
+export { SkipLink } from './components/skip-link/skip-link.js';
+export { Spinner } from './components/spinner/spinner.js';
+export { EXPERIMENTAL_Suggestion } from './components/suggestion/index.js';
+export { Switch } from './components/switch/switch.js';
+export { Table } from './components/table/index.js';
+export { Tabs } from './components/tabs/index.js';
+export { Tag } from './components/tag/tag.js';
+export { Textarea } from './components/textarea/textarea.js';
+export { Textfield } from './components/textfield/textfield.js';
+export { ToggleGroup } from './components/toggle-group/index.js';
+export { Tooltip } from './components/tooltip/tooltip.js';
+export { ValidationMessage } from './components/validation-message/validation-message.js';
 export { omit } from './components/Combobox/omit/omit.js';
-export { RovingFocusItem } from './utilities/roving-focus/roving-focus-item.js';
-export { RovingFocusRoot } from './utilities/roving-focus/roving-focus-root.js';
-export { useCheckboxGroup } from './utilities/hooks/use-checkbox-group/use-checkbox-group.js';
 export { useDebounceCallback } from './utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
 export { useIsomorphicLayoutEffect } from './utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js';
 export { useMediaQuery } from './utilities/hooks/deprecated/use-media-query/use-media-query.js';
+export { useCheckboxGroup } from './utilities/hooks/use-checkbox-group/use-checkbox-group.js';
+import 'react';
 export { usePagination } from './utilities/hooks/use-pagination/use-pagination.js';
 export { useRadioGroup } from './utilities/hooks/use-radio-group/use-radio-group.js';
 export { useSynchronizedAnimation } from './utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
-export { Alert } from './components/alert/alert.js';
-export { Avatar } from './components/avatar/avatar.js';
-export { Badge } from './components/badge/index.js';
+export { RovingFocusItem } from './utilities/roving-focus/roving-focus-item.js';
+export { RovingFocusRoot } from './utilities/roving-focus/roving-focus-root.js';
 export { BadgePosition } from './components/badge/badge-position.js';
-export { Breadcrumbs } from './components/breadcrumbs/index.js';
 export { BreadcrumbsItem } from './components/breadcrumbs/breadcrumbs-item.js';
 export { BreadcrumbsLink } from './components/breadcrumbs/breadcrumbs-link.js';
 export { BreadcrumbsList } from './components/breadcrumbs/breadcrumbs-list.js';
-export { Button } from './components/button/button.js';
-export { Combobox } from './components/Combobox/index.js';
 export { ComboboxEmpty } from './components/Combobox/Empty.js';
 export { ComboboxOption } from './components/Combobox/Option/Option.js';
-export { Card } from './components/card/index.js';
 export { CardBlock } from './components/card/card-block.js';
-export { Checkbox } from './components/checkbox/checkbox.js';
-export { Chip } from './components/chip/index.js';
 export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './components/chip/chips.js';
-export { Details } from './components/details/index.js';
 export { DetailsContent } from './components/details/details-content.js';
 export { DetailsSummary } from './components/details/details-summary.js';
-export { Dialog } from './components/dialog/index.js';
 export { DialogBlock } from './components/dialog/dialog-block.js';
 export { DialogTrigger } from './components/dialog/dialog-trigger.js';
 export { DialogTriggerContext } from './components/dialog/dialog-trigger-context.js';
-export { Divider } from './components/divider/divider.js';
-export { Dropdown } from './components/dropdown/index.js';
 export { DropdownButton } from './components/dropdown/dropdown-button.js';
 export { DropdownHeading } from './components/dropdown/dropdown-heading.js';
 export { DropdownItem } from './components/dropdown/dropdown-item.js';
 export { DropdownList } from './components/dropdown/dropdown-list.js';
 export { DropdownTrigger } from './components/dropdown/dropdown-trigger.js';
 export { DropdownTriggerContext } from './components/dropdown/dropdown-trigger-context.js';
-export { ErrorSummary } from './components/error-summary/index.js';
 export { ErrorSummaryHeading } from './components/error-summary/error-summary-heading.js';
 export { ErrorSummaryItem } from './components/error-summary/error-summary-item.js';
 export { ErrorSummaryLink } from './components/error-summary/error-summary-link.js';
 export { ErrorSummaryList } from './components/error-summary/error-summary-list.js';
-export { Field } from './components/field/index.js';
 export { FieldAffix, FieldAffixes } from './components/field/field-affix.js';
 export { FieldCounter } from './components/field/field-counter.js';
 export { FieldDescription } from './components/field/field-description.js';
-export { Fieldset } from './components/fieldset/index.js';
 export { FieldsetDescription } from './components/fieldset/fieldset-description.js';
 export { FieldsetLegend } from './components/fieldset/fieldset-legend.js';
-export { Heading } from './components/heading/heading.js';
-export { Input } from './components/input/input.js';
-export { Label } from './components/label/label.js';
-export { Link } from './components/link/link.js';
-export { List } from './components/list/index.js';
 export { ListItem } from './components/list/list-item.js';
 export { ListOrdered, ListUnordered } from './components/list/lists.js';
-export { Pagination } from './components/pagination/index.js';
 export { PaginationButton } from './components/pagination/pagination-button.js';
 export { PaginationItem } from './components/pagination/pagination-item.js';
 export { PaginationList } from './components/pagination/pagination-list.js';
-export { Paragraph } from './components/paragraph/paragraph.js';
-export { Popover } from './components/popover/index.js';
 export { PopoverTrigger } from './components/popover/popover-trigger.js';
 export { PopoverTriggerContext } from './components/popover/popover-trigger-context.js';
-export { Radio } from './components/radio/radio.js';
-export { Search } from './components/search/index.js';
 export { SearchButton } from './components/search/search-button.js';
 export { SearchClear } from './components/search/search-clear.js';
 export { SearchInput } from './components/search/search-input.js';
-export { Select } from './components/select/index.js';
 export { SelectOptgroup } from './components/select/select-optgroup.js';
 export { SelectOption } from './components/select/select-option.js';
-export { Skeleton } from './components/skeleton/skeleton.js';
-export { SkipLink } from './components/skip-link/skip-link.js';
-export { Spinner } from './components/spinner/spinner.js';
-export { EXPERIMENTAL_Suggestion } from './components/suggestion/index.js';
 export { SuggestionClear as EXPERIMENTAL_SuggestionClear } from './components/suggestion/suggestion-clear.js';
 export { SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty } from './components/suggestion/suggestion-empty.js';
 export { SuggestionInput as EXPERIMENTAL_SuggestionInput } from './components/suggestion/suggestion-input.js';
 export { SuggestionList as EXPERIMENTAL_SuggestionList } from './components/suggestion/suggestion-list.js';
 export { SuggestionOption as EXPERIMENTAL_SuggestionOption } from './components/suggestion/suggestion-option.js';
-export { Switch } from './components/switch/switch.js';
-export { Table } from './components/table/index.js';
 export { TableBody } from './components/table/table-body.js';
 export { TableCell } from './components/table/table-cell.js';
 export { TableFoot } from './components/table/table-foot.js';
 export { TableHead } from './components/table/table-head.js';
 export { TableHeaderCell } from './components/table/table-header-cell.js';
 export { TableRow } from './components/table/table-row.js';
-export { Tabs } from './components/tabs/index.js';
 export { TabsList } from './components/tabs/tabs-list.js';
 export { TabsPanel } from './components/tabs/tabs-panel.js';
 export { TabsTab } from './components/tabs/tabs-tab.js';
-export { Tag } from './components/tag/tag.js';
-export { Textarea } from './components/textarea/textarea.js';
-export { Textfield } from './components/textfield/textfield.js';
-export { ToggleGroup } from './components/toggle-group/index.js';
 export { ToggleGroupItem } from './components/toggle-group/toggle-group-item.js';
-export { Tooltip } from './components/tooltip/tooltip.js';
-export { ValidationMessage } from './components/validation-message/validation-message.js';

package/dist/esm/utilities/roving-focus/roving-focus-item.js

@@ -2,8 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
-import { useRovingFocus } from './use-roving-focus.js';
 import { useMergeRefs } from '../hooks/use-merge-refs/use-merge-refs.js';
+import { useRovingFocus } from './use-roving-focus.js';
 
 /** Get the next focusable RovingFocusItem */
 function getNextFocusableValue(items, value) {

package/dist/esm/utilities/roving-focus/roving-focus-root.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useState, useRef, useEffect, createContext } from 'react';
+import { createContext, forwardRef, useState, useRef, useEffect } from 'react';
 import { useMergeRefs } from '../hooks/use-merge-refs/use-merge-refs.js';
 
 const RovingFocusContext = createContext({

package/dist/types/components/dialog/dialog.d.ts

@@ -15,6 +15,12 @@ export type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDia
      * @default 'closerequest'
      */
     closedby?: 'none' | 'closerequest' | 'any';
+    /**
+     * When not center, displays dialog as a "drawer" from the specified side.
+     *
+     * @default 'center'
+     */
+    placement?: 'center' | 'left' | 'right' | 'top' | 'bottom';
     /**
      * Toogle modal and non-modal dialog.
      *
@@ -62,7 +68,7 @@ export type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDia
  *   Content
  * </Dialog>
  */
-export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "open" | "closedby" | "onClose" | "closeButton" | "modal"> & {
+export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "open" | "placement" | "closedby" | "onClose" | "closeButton" | "modal"> & {
     /**
      * Screen reader label of close button. Set false to hide the close button.
      * @default 'Lukk dialogvindu'
@@ -76,6 +82,12 @@ export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<Defa
      * @default 'closerequest'
      */
     closedby?: "none" | "closerequest" | "any";
+    /**
+     * When not center, displays dialog as a "drawer" from the specified side.
+     *
+     * @default 'center'
+     */
+    placement?: "center" | "left" | "right" | "top" | "bottom";
     /**
      * Toogle modal and non-modal dialog.
      *

package/dist/types/components/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA9Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;;;OAMG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;;;OAKG;cACO,OAAO;qDA8HpB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC3D;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IApEf;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;;;OAMG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;OAIG;gBACS,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ;IAC1D;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;;;OAKG;cACO,OAAO;qDAgIpB,CAAC"}

package/dist/types/components/suggestion/suggestion-clear.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion-clear.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-clear.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IAC7E;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;IAnB1B;;;OAGG;mBACY,MAAM;qDAmCrB,CAAC"}
+{"version":3,"file":"suggestion-clear.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-clear.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IAC7E;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;IAnB1B;;;OAGG;mBACY,MAAM;qDAgCrB,CAAC"}

package/dist/types/components/suggestion/suggestion-list.d.ts

@@ -13,6 +13,11 @@ export type SuggestionListProps = MergeRight<DefaultProps & HTMLAttributes<HTMLD
      * @default '%d forslag'
      */
     plural?: string;
+    /**
+     * Whether to enable auto placement.
+     * @default true
+     */
+    autoPlacement?: boolean;
 }>;
 /**
  * Component that provides a Suggestion list.
@@ -25,7 +30,7 @@ export type SuggestionListProps = MergeRight<DefaultProps & HTMLAttributes<HTMLD
  *   <Suggestion.List />
  * </Suggestion>
  */
-export declare const SuggestionList: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDataListElement>, "singular" | "plural"> & {
+export declare const SuggestionList: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDataListElement>, "autoPlacement" | "singular" | "plural"> & {
     /**
      * The screen reader announcement for singular Suggestion, where %d is the number of Suggestions
      * @default '%d forslag'
@@ -36,5 +41,10 @@ export declare const SuggestionList: import("react").ForwardRefExoticComponent<O
      * @default '%d forslag'
      */
     plural?: string;
+    /**
+     * Whether to enable auto placement.
+     * @default true
+     */
+    autoPlacement?: boolean;
 } & import("react").RefAttributes<HTMLDataListElement>>;
 //# sourceMappingURL=suggestion-list.d.ts.map

package/dist/types/components/suggestion/suggestion-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion-list.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,wBAAwB,CAAC;AAMhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAC1C,YAAY,GAAG,cAAc,CAAC,mBAAmB,CAAC,EAClD;IACE;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc;IAxBvB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;aACM,MAAM;uDAuDjB,CAAC"}
+{"version":3,"file":"suggestion-list.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,wBAAwB,CAAC;AAQhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAC1C,YAAY,GAAG,cAAc,CAAC,mBAAmB,CAAC,EAClD;IACE;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc;IA7BvB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;aACM,MAAM;IACf;;;OAGG;oBACa,OAAO;uDA2EzB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -24,7 +24,6 @@
       "types": "./dist/react-types.d.ts"
     }
   },
-  "sideEffects": false,
   "files": [
     "dist/**"
   ],
@@ -38,42 +37,40 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react": "0.26.23",
-    "@navikt/aksel-icons": "^7.35.0",
+    "@navikt/aksel-icons": "^7.37.0",
     "@radix-ui/react-slot": "^1.2.4",
-    "@tanstack/react-virtual": "^3.13.12",
-    "@u-elements/u-combobox": "^1.0.4",
+    "@tanstack/react-virtual": "^3.13.16",
+    "@u-elements/u-combobox": "^1.0.5",
     "@u-elements/u-datalist": "^1.0.14",
     "@u-elements/u-details": "^0.1.5",
     "clsx": "^2.1.1",
-    "@digdir/designsystemet-types": "^1.8.0"
+    "@digdir/designsystemet-types": "^1.10.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-vitest": "^9.1.16",
-    "@storybook/react-vite": "^9.1.16",
-    "@testing-library/dom": "^10.4.1",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "rimraf": "^6.1.2",
-    "rollup": "^4.53.3",
+    "rollup": "^4.54.0",
     "rollup-plugin-copy": "^3.5.0",
-    "storybook": "^9.1.16",
+    "storybook": "^10.1.11",
     "tsx": "4.21.0",
     "typescript": "^5.9.3",
-    "@digdir/designsystemet": "^1.8.0",
-    "@digdir/designsystemet-css": "^1.8.0"
+    "@digdir/designsystemet": "^1.10.0",
+    "@digdir/designsystemet-css": "^1.10.0"
   },
   "scripts": {
     "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",
     "clean": "rimraf dist && rimraf tsc-build && rimraf --glob \"*.tsbuildinfo\"",
-    "copy-css-to-build": "copyfiles -u 1 ./src/**/*.css ./tsc-build/",
     "types": "tsc --noEmit"
   }
 }