@norges-domstoler/dds-components 7.1.0 → 8.0.0

package/dist/cjs/utils/getFocusableElements.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function getFocusableElements<T extends HTMLElement>(elementRef: RefObject<T>): NodeListOf<HTMLElement> | [];

package/dist/cjs/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './idGenerator';
 export * from './getScrollbarSize';
 export * from './text';
 export * from './color';
+export * from './getFocusableElements';

package/dist/components/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -1,7 +1,7 @@
 import { BreadcrumbsProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLElement>, "id" | "className"> & {
         smallScreen?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;

package/dist/components/Button/Button.stories.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onFocus" | "onBlur" | "onClick">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onFocus" | "onBlur" | "onClick">, "id" | "className"> & {
         size?: import("./Button.types").ButtonSize | undefined;
         label?: string | undefined;
         purpose?: import("./Button.types").ButtonPurpose | undefined;

package/dist/components/Button/Button.styles.js

@@ -9,7 +9,7 @@ import { buttonTokens } from './Button.tokens.js';
 var ButtonWrapper = styled.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(["", " display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], buttonTokens.base, function (_ref) {
+})(["", " user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], buttonTokens.base, function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
 }, focusVisibleTransitionValue, function (_ref2) {

package/dist/components/Card/CardAccordion/CardAccordionHeader.js

@@ -29,7 +29,7 @@ var HeaderContainer = styled.div.withConfig({
 var HeaderWrapper = styled.button.withConfig({
   displayName: "CardAccordionHeader__HeaderWrapper",
   componentId: "sc-1qs6bkj-2"
-})(["position:relative;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", " display:block;width:100%;&:hover{", "}&:focus-visible,&.focus-visible{outline:none;", "}"], removeButtonStyling, cardAccordionHeaderTokens.hover.base, cardAccordionHeaderTokens.focus.base);
+})(["user-select:text;position:relative;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", " display:block;width:100%;&:hover{", "}&:focus-visible,&.focus-visible{outline:none;", "}"], removeButtonStyling, cardAccordionHeaderTokens.hover.base, cardAccordionHeaderTokens.focus.base);
 var ChevronWrapper = styled.span.withConfig({
   displayName: "CardAccordionHeader__ChevronWrapper",
   componentId: "sc-1qs6bkj-3"

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -1,7 +1,7 @@
 import { CheckboxProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "value" | "checked">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "value" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;

package/dist/components/Chip/Chip.stories.d.ts

@@ -1,7 +1,7 @@
 import { ChipProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         text?: string | undefined;
         onClose?: (() => void) | undefined;
     } & {

package/dist/components/DescriptionList/DescriptionList.stories.d.ts

@@ -1,7 +1,7 @@
 import { DescriptionListProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
         appearance?: import("./DescriptionList").DescriptionListAppearance | undefined;
     } & {
         children?: import("react").ReactNode;

package/dist/components/Divider/Divider.stories.d.ts

@@ -1,7 +1,7 @@
 import { DividerProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHRElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHRElement>, "id" | "className"> & {
         color?: import("./Divider").DividerColor | undefined;
     } & {
         htmlProps?: import("react").HTMLAttributes<HTMLHRElement> | undefined;

package/dist/components/Drawer/Drawer.js

@@ -21,6 +21,7 @@ import '../../hooks/useFloatPosition.js';
 import { useFocusTrap } from '../../hooks/useFocusTrap.js';
 import { useMountTransition } from '../../hooks/useMountTransition.js';
 import '../../hooks/useScreenSize.js';
+import '../../utils/color.js';
 import { drawerTokens } from './Drawer.tokens.js';
 import { focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
@@ -110,6 +111,8 @@ var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
     id: headerId
   };
   return isOpen || hasTransitionedIn ? /*#__PURE__*/createPortal(jsxs(Container, Object.assign({}, containerProps, {
+    elevation: 4
+  }, {
     children: [jsx(ScrollableContainer, {
       children: jsxs(ContentContainer, {
         children: [hasHeader && jsx(HeaderContainer, Object.assign({}, headerContainerProps, {

package/dist/components/Drawer/Drawer.stories.d.ts

@@ -1,7 +1,7 @@
 import { DrawerProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         size?: import("./Drawer").DrawerSize | undefined;
         placement?: import("./Drawer").DrawerPlacement | undefined;
         header?: import("react").ReactNode;

package/dist/components/GlobalMessage/GlobalMessage.stories.d.ts

@@ -1,7 +1,7 @@
 import { GlobalMessageProps } from './GlobalMessage';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         message?: string | undefined;
         purpose?: import("./GlobalMessage").GlobalMessagePurpose | undefined;
         closable?: boolean | undefined;

package/dist/components/Grid/Grid.context.js

@@ -1,5 +1,6 @@
 import { createContext, useContext } from 'react';
 import '../../hooks/useFloatPosition.js';
+import '../../utils/color.js';
 import { ScreenSize } from '../../hooks/useScreenSize.js';
 
 var GridContext = /*#__PURE__*/createContext({

package/dist/components/Grid/Grid.js

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
 import 'react';
 import '../../hooks/useFloatPosition.js';
+import '../../utils/color.js';
 import { useScreenSize } from '../../hooks/useScreenSize.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { gridTokens } from './Grid.tokens.js';

package/dist/components/Grid/Grid.tokens.js

@@ -2,6 +2,7 @@ import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginB
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 import 'react';
 import '../../hooks/useFloatPosition.js';
+import '../../utils/color.js';
 import { ScreenSize } from '../../hooks/useScreenSize.js';
 
 var _halfWayColumn, _gridTokens;

package/dist/components/Grid/Grid.utils.js

@@ -1,5 +1,6 @@
 import 'react';
 import '../../hooks/useFloatPosition.js';
+import '../../utils/color.js';
 import { ScreenSize } from '../../hooks/useScreenSize.js';
 
 var getLiteralScreenSize = function getLiteralScreenSize(screenSize) {

package/dist/components/InputMessage/InputMessage.stories.d.ts

@@ -1,7 +1,7 @@
 import { InputMessageProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         message: string;
         messageType: import("./InputMessage").InputMessageType;
     } & {

package/dist/components/List/List.stories.d.ts

@@ -1,7 +1,7 @@
 import { ListProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLOListElement | HTMLUListElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLOListElement | HTMLUListElement>, "id" | "className"> & {
         listType?: import("./List").ListType | undefined;
         typographyType?: import("./List").ListTypographyType | undefined;
     } & {

package/dist/components/LocalMessage/LocalMessage.stories.d.ts

@@ -1,7 +1,7 @@
 import { LocalMessageProps } from './LocalMessage';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         message?: string | undefined;
         purpose?: import("./LocalMessage").LocalMessagePurpose | undefined;
         closable?: boolean | undefined;

package/dist/components/Modal/Modal.js

@@ -11,6 +11,7 @@ import '../../hooks/useFloatPosition.js';
 import { useFocusTrap } from '../../hooks/useFocusTrap.js';
 import { useMountTransition } from '../../hooks/useMountTransition.js';
 import '../../hooks/useScreenSize.js';
+import '../../utils/color.js';
 import { createPortal } from 'react-dom';
 import { Typography } from '../Typography/Typography/Typography.js';
 import { Backdrop } from '../../helpers/Backdrop/Backdrop.js';

package/dist/components/Modal/Modal.stories.d.ts

@@ -1,7 +1,7 @@
 import { ModalProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         isOpen?: boolean | undefined;
         onClose?: (() => void) | undefined;
         parentElement?: HTMLElement | undefined;

package/dist/components/OverflowMenu/OverflowMenu.js

@@ -17,6 +17,7 @@ import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { useFloatPosition } from '../../hooks/useFloatPosition.js';
 import { useRoveFocus } from '../../hooks/useRoveFocus.js';
+import '../../utils/color.js';
 import '../../hooks/useScreenSize.js';
 import { OverflowMenuItem } from './OverflowMenuItem.js';
 import { overflowMenuTokens } from './OverflowMenu.tokens.js';

package/dist/components/OverflowMenu/OverflowMenu.stories.d.ts

@@ -1,7 +1,7 @@
 import { OverflowMenuProps, OverflowMenuContextItem, OverflowMenuNavItem } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         items?: OverflowMenuContextItem[] | undefined;
         userProps?: ({
             name: string;

package/dist/components/OverflowMenu/OverflowMenuItem.js

@@ -6,6 +6,7 @@ import { overflowMenuTokens } from './OverflowMenu.tokens.js';
 import { Icon } from '../Icon/Icon.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import '../../hooks/useFloatPosition.js';
+import '../../utils/color.js';
 import '../../hooks/useScreenSize.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { focusVisibleLink } from '../../helpers/styling/focusVisible.js';
@@ -24,7 +25,7 @@ var Span = styled.span.withConfig({
 var Link = styled.a.withConfig({
   displayName: "OverflowMenuItem__Link",
   componentId: "sc-1ka2asi-1"
-})(["border:none;cursor:pointer;outline:inherit;width:100%;", " @media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", "}"], elementBaseCSS, link.hover.color, link.active.color, focusVisibleLink);
+})(["user-select:text;border:none;cursor:pointer;outline:inherit;width:100%;", " @media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", "}"], elementBaseCSS, link.hover.color, link.active.color, focusVisibleLink);
 
 var isAnchorProps = function isAnchorProps(props) {
   return props.href !== undefined;

package/dist/components/Pagination/Pagination.stories.d.ts

@@ -1,7 +1,7 @@
 import { PaginationProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLElement>, "onChange">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLElement>, "onChange">, "id" | "className"> & {
         itemsAmount: number;
         defaultItemsPerPage?: number | undefined;
         defaultActivePage?: number | undefined;

package/dist/components/Popover/Popover.d.ts

@@ -25,10 +25,14 @@ export declare type PopoverProps = BaseComponentPropsWithChildren<HTMLDivElement
     offset?: number;
     /** Ekstra logikk kjørt når lukkeknappen trykkes. */
     onCloseButtonClick?: () => void;
-    /** Ekstra logikk kjørt når lukkeknappen mister fokus. */
-    onCloseButtonBlur?: () => void;
+    /** Ekstra logikk kjørt når popover mister fokus. */
+    onBlur?: () => void;
     /**Custom størrelse. */
     sizeProps?: PopoverSizeProps;
+    /** **OBS!** Propen settes automatisk av `<PopoverGroup />`. Funksjon kjørt ved lukking. */
+    onClose?: () => void;
+    /**Spesifiserer hvilken DOM node `<Popover />` skal ha som forelder via React portal. Brukes med f.eks `document.getElementById("id")` (skaper ikke ny DOM node). */
+    parentElement?: HTMLElement;
 }>;
 export declare const Popover: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
     /**Tittel. */
@@ -45,10 +49,14 @@ export declare const Popover: import("react").ForwardRefExoticComponent<Pick<imp
     offset?: number | undefined;
     /** Ekstra logikk kjørt når lukkeknappen trykkes. */
     onCloseButtonClick?: (() => void) | undefined;
-    /** Ekstra logikk kjørt når lukkeknappen mister fokus. */
-    onCloseButtonBlur?: (() => void) | undefined;
+    /** Ekstra logikk kjørt når popover mister fokus. */
+    onBlur?: (() => void) | undefined;
     /**Custom størrelse. */
     sizeProps?: PopoverSizeProps | undefined;
+    /** **OBS!** Propen settes automatisk av `<PopoverGroup />`. Funksjon kjørt ved lukking. */
+    onClose?: (() => void) | undefined;
+    /**Spesifiserer hvilken DOM node `<Popover />` skal ha som forelder via React portal. Brukes med f.eks `document.getElementById("id")` (skaper ikke ny DOM node). */
+    parentElement?: HTMLElement | undefined;
 } & {
     children?: ReactNode;
 } & {

package/dist/components/Popover/Popover.js

@@ -4,14 +4,18 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 import { forwardRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { visibilityTransition } from '../../helpers/styling/visibilityTransition.js';
-import '../../helpers/styling/focusVisible.js';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import '../../helpers/styling/selection.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 import { useFloatPosition } from '../../hooks/useFloatPosition.js';
+import '../../utils/color.js';
+import { useMountTransition } from '../../hooks/useMountTransition.js';
 import '../../hooks/useScreenSize.js';
+import { useReturnFocusOnBlur } from '../../hooks/useReturnFocusOnBlur.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Button } from '../Button/Button.js';
 import { Typography } from '../Typography/Typography/Typography.js';
@@ -20,59 +24,73 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
-import '../../helpers/Paper/Paper.js';
+import { Paper } from '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../Typography/Link/Link.js';
 import { popoverTokens } from './Popover.tokens.js';
 import '../../icons/utils/StyledSvg.js';
 import { CloseIcon } from '../../icons/tsx/close.js';
+import { createPortal } from 'react-dom';
 
 var Spacing = ddsBaseTokens.spacing;
-var Wrapper = styled.div.withConfig({
+var wrapper = popoverTokens.wrapper,
+    content = popoverTokens.content,
+    closeButton = popoverTokens.closeButton,
+    title = popoverTokens.title;
+var Wrapper = styled(Paper).withConfig({
   displayName: "Popover__Wrapper",
   componentId: "sc-1fecd7e-0"
-})(["", " box-sizing:border-box;position:absolute;width:fit-content;z-index:20;", " ", ""], function (_ref) {
-  var isOpen = _ref.isOpen;
-  return visibilityTransition(isOpen);
-}, popoverTokens.wrapper.base, function (_ref2) {
+})(["opacity:0;", " position:absolute;width:fit-content;z-index:20;padding:", ";&:focus-visible{", "}", ""], function (_ref) {
+  var hasTransitionedIn = _ref.hasTransitionedIn,
+      isOpen = _ref.isOpen;
+  return hasTransitionedIn && visibilityTransition(hasTransitionedIn && isOpen);
+}, wrapper.padding, focusVisible, function (_ref2) {
   var sizeProps = _ref2.sizeProps;
   return sizeProps && css(["", ""], sizeProps);
 });
 var TitleContainer = styled.div.withConfig({
   displayName: "Popover__TitleContainer",
   componentId: "sc-1fecd7e-1"
-})(["", ""], popoverTokens.title.base);
+})(["margin-right:", ";"], title.marginRight);
 var ContentContainer = styled.div.withConfig({
   displayName: "Popover__ContentContainer",
   componentId: "sc-1fecd7e-2"
 })(["", ""], function (_ref3) {
   var withCloseButton = _ref3.withCloseButton,
       hasTitle = _ref3.hasTitle;
-  return withCloseButton && !hasTitle && css(["margin-top:", ";"], popoverTokens.content.spaceTopNoTitle);
+  return withCloseButton && !hasTitle && css(["margin-top:", ";"], content.noTitle.marginTop);
 });
 var StyledButton = styled(Button).withConfig({
   displayName: "Popover__StyledButton",
   componentId: "sc-1fecd7e-3"
-})(["", ""], popoverTokens.button.base);
+})(["position:absolute;top:", ";right:", ";"], closeButton.top, closeButton.right);
 var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
       _props$isOpen = props.isOpen,
       isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
       _props$withCloseButto = props.withCloseButton,
       withCloseButton = _props$withCloseButto === void 0 ? true : _props$withCloseButto,
+      onBlur = props.onBlur,
       onCloseButtonClick = props.onCloseButtonClick,
-      onCloseButtonBlur = props.onCloseButtonBlur,
+      onClose = props.onClose,
       anchorElement = props.anchorElement,
       children = props.children,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom' : _props$placement,
+      _props$parentElement = props.parentElement,
+      parentElement = _props$parentElement === void 0 ? document.body : _props$parentElement,
       _props$offset = props.offset,
       offset = _props$offset === void 0 ? Spacing.SizesDdsSpacingLocalX05NumberPx : _props$offset,
       id = props.id,
       className = props.className,
       _props$htmlProps = props.htmlProps,
       htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-      rest = __rest(props, ["title", "isOpen", "withCloseButton", "onCloseButtonClick", "onCloseButtonBlur", "anchorElement", "children", "placement", "offset", "id", "className", "htmlProps"]);
+      rest = __rest(props, ["title", "isOpen", "withCloseButton", "onBlur", "onCloseButtonClick", "onClose", "anchorElement", "children", "placement", "parentElement", "offset", "id", "className", "htmlProps"]);
+
+  var popoverRef = useReturnFocusOnBlur(isOpen, function () {
+    onClose && onClose();
+    onBlur && onBlur();
+  }, anchorElement && anchorElement);
 
   var _useFloatPosition = useFloatPosition(null, {
     placement: placement,
@@ -82,20 +100,28 @@ var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
       floating = _useFloatPosition.floating,
       styles = _useFloatPosition.styles;
 
-  var multiRef = useCombinedRef(ref, floating);
+  var multiRef = useCombinedRef(ref, popoverRef, floating);
   useEffect(function () {
-    isOpen && anchorElement ? reference(anchorElement) : reference(null);
-    return function () {
-      return reference(null);
-    };
-  }, [anchorElement, isOpen]);
+    anchorElement ? reference(anchorElement) : reference(null);
+  }, [anchorElement]);
+  var elements = [popoverRef.current];
+  if (anchorElement) elements.push(anchorElement);
+  useOnClickOutside(elements, function () {
+    if (isOpen) onClose && onClose();
+  });
+  var hasTransitionedIn = useMountTransition(isOpen, 400);
   var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     ref: multiRef,
     isOpen: isOpen,
+    hasTransitionedIn: hasTransitionedIn,
+    tabIndex: -1,
     style: Object.assign(Object.assign({}, htmlProps.style), styles.floating),
     role: 'dialog'
   });
-  return jsxs(Wrapper, Object.assign({}, wrapperProps, {
+  return isOpen || hasTransitionedIn ? /*#__PURE__*/createPortal(jsxs(Wrapper, Object.assign({}, wrapperProps, {
+    elevation: 3,
+    border: "light"
+  }, {
     children: [title && jsx(TitleContainer, {
       children: typeof title === 'string' ? jsx(Typography, Object.assign({
         typographyType: "headingSans02"
@@ -113,10 +139,9 @@ var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
       purpose: "secondary",
       size: "small",
       onClick: onCloseButtonClick,
-      "aria-label": "Lukk",
-      onBlur: onCloseButtonBlur
+      "aria-label": "Lukk"
     })]
-  }));
+  })), parentElement) : null;
 });
 
 export { Popover };

package/dist/components/Popover/Popover.stories.d.ts

@@ -2,7 +2,7 @@ import { PopoverProps } from '.';
 import { Placement } from '../../hooks';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         title?: import("react").ReactNode;
         isOpen?: boolean | undefined;
         withCloseButton?: boolean | undefined;
@@ -10,8 +10,10 @@ declare const _default: {
         placement?: Placement | undefined;
         offset?: number | undefined;
         onCloseButtonClick?: (() => void) | undefined;
-        onCloseButtonBlur?: (() => void) | undefined;
+        onBlur?: (() => void) | undefined;
         sizeProps?: import("./Popover").PopoverSizeProps | undefined;
+        onClose?: (() => void) | undefined;
+        parentElement?: HTMLElement | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {

package/dist/components/Popover/Popover.tokens.d.ts

@@ -1,15 +1,18 @@
-import { CSSObject } from 'styled-components';
 export declare const popoverTokens: {
+    content: {
+        noTitle: {
+            marginTop: string;
+        };
+    };
     wrapper: {
-        base: CSSObject;
+        padding: string;
     };
-    button: {
-        base: CSSObject;
+    closeButton: {
+        position: string;
+        top: string;
+        right: string;
     };
     title: {
-        base: CSSObject;
-    };
-    content: {
-        spaceTopNoTitle: string;
+        marginRight: string;
     };
 };

package/dist/components/Popover/Popover.tokens.js

@@ -1,38 +1,27 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
-var Colors = ddsBaseTokens.colors,
-    BorderRadius = ddsBaseTokens.borderRadius,
-    Spacing = ddsBaseTokens.spacing,
-    OuterShadow = ddsBaseTokens.outerShadow,
-    Border = ddsBaseTokens.border;
-var wrapperBase = {
-  backgroundColor: Colors.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX15, " ").concat(Spacing.SizesDdsSpacingLocalX1),
-  boxShadow: OuterShadow.DdsShadow3Onlight,
-  border: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Border.BordersDdsBorderStyleLightStroke)
+var spacing = ddsBaseTokens.spacing;
+var wrapper = {
+  padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX15, " ").concat(spacing.SizesDdsSpacingLocalX1)
 };
-var buttonBase = {
+var closeButton = {
   position: 'absolute',
-  top: Spacing.SizesDdsSpacingLocalX025,
-  right: Spacing.SizesDdsSpacingLocalX025
+  top: spacing.SizesDdsSpacingLocalX025,
+  right: spacing.SizesDdsSpacingLocalX025
 };
-var titleBase = {
-  marginRight: Spacing.SizesDdsSpacingLocalX2
+var title = {
+  marginRight: spacing.SizesDdsSpacingLocalX2
 };
-var popoverTokens = {
-  wrapper: {
-    base: wrapperBase
-  },
-  button: {
-    base: buttonBase
-  },
-  title: {
-    base: titleBase
-  },
-  content: {
-    spaceTopNoTitle: Spacing.SizesDdsSpacingLocalX2
+var content = {
+  noTitle: {
+    marginTop: spacing.SizesDdsSpacingLocalX2
   }
 };
+var popoverTokens = {
+  content: content,
+  wrapper: wrapper,
+  closeButton: closeButton,
+  title: title
+};
 
 export { popoverTokens };

package/dist/components/Popover/PopoverGroup.js

@@ -1,9 +1,9 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect, useId, useRef, Children, isValidElement, cloneElement } from 'react';
-import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
+import { useState, useId, useRef, Children, isValidElement, cloneElement } from 'react';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import '../../hooks/useFloatPosition.js';
+import '../../utils/color.js';
 import '../../hooks/useScreenSize.js';
 
 var PopoverGroup = function PopoverGroup(_ref) {
@@ -19,9 +19,6 @@ var PopoverGroup = function PopoverGroup(_ref) {
       open = _useState2[0],
       setOpen = _useState2[1];
 
-  useEffect(function () {
-    setOpen(isOpen);
-  }, [isOpen]);
   var generatedId = useId();
   var uniquePopoverId = popoverId !== null && popoverId !== void 0 ? popoverId : "".concat(generatedId, "-popover");
 
@@ -37,16 +34,6 @@ var PopoverGroup = function PopoverGroup(_ref) {
 
   var buttonRef = useRef(null);
   var popoverRef = useRef(null);
-
-  var handleBlur = function handleBlur() {
-    setTimeout(function () {
-      var _a;
-
-      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, 5);
-    setOpen(false);
-  };
-
   useOnKeyDown(['Esc', 'Escape'], function () {
     var _a;
 
@@ -55,9 +42,11 @@ var PopoverGroup = function PopoverGroup(_ref) {
       (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   });
-  useOnClickOutside([popoverRef.current, buttonRef.current], function () {
-    if (open) setOpen(false);
-  });
+
+  var handleClose = function handleClose() {
+    return setOpen(false);
+  };
+
   var Children$1 = Children.map(children, function (child, childIndex) {
     return /*#__PURE__*/isValidElement(child) && (childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
       'aria-haspopup': 'dialog',
@@ -70,9 +59,9 @@ var PopoverGroup = function PopoverGroup(_ref) {
       'aria-hidden': !open,
       id: uniquePopoverId,
       onCloseButtonClick: handleOnCloseButtonClick,
-      onCloseButtonBlur: handleBlur,
       anchorElement: buttonRef.current,
-      ref: popoverRef
+      ref: popoverRef,
+      onClose: handleClose
     }));
   });
   return jsx(Fragment, {