@skatteetaten/ds-overlays 1.2.0 → 1.4.0

package/Modal/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useImperativeHandle } from 'react';
+import { forwardRef, useId, useRef, useImperativeHandle, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from '@skatteetaten/ds-buttons';
 import { dsI18n, SkatteetatenLogo, Separator, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
@@ -42,6 +42,17 @@ shadowRootNode, onClose, children }, ref)=>{
     });
     const modalRef = useRef(null);
     useImperativeHandle(ref, ()=>modalRef?.current);
+    useEffect(()=>{
+        /**
+       * Hvis konsument endrer children i en åpen modal, vil fokus settes til body og dismissOnEsc vil slutte å fungere.
+       * Setter derfor fokus tilbake til modalen.
+       */ if (!dismissOnEsc && modalRef.current?.open && document.activeElement?.nodeName === 'BODY') {
+            modalRef.current.focus();
+        }
+    }, [
+        children,
+        dismissOnEsc
+    ]);
     const isClickOutside = (event)=>{
         if (!(event.target instanceof HTMLElement)) {
             return true;
@@ -78,7 +89,8 @@ shadowRootNode, onClose, children }, ref)=>{
         "data-testid": dataTestId,
         "aria-labelledby": headingId,
         autoFocus: true,
-        /* Merk at onCancel kan ikke brukes til å hindre lukking fordi to trykk på esc lukker allikevel i chrome  */ onKeyDown: (e)=>{
+        /* Må bruke onCancel i kombinasjon med onKeyDown siden to trykk på esc lukker modalen i chrome (https://issues.chromium.org/issues/41491338) */ onCancel: (e)=>!dismissOnEsc && e.preventDefault(),
+        onKeyDown: (e)=>{
             if (e.key === 'Escape') {
                 if (dismissOnEsc) {
                     onClose?.();

package/Popover/index.esm.js

@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useMemo } from 'react';
 import { useFloating, autoUpdate, offset, flip, shift, arrow, useDismiss, useInteractions } from '@floating-ui/react';
 import { useMediaQuery } from '@skatteetaten/ds-core-utils';
-import { P as PopoverContent, a as getPopoverPositionDefault } from '../PopoverContent-QCKf0esL.js';
-export { g as getPopoverColorDefault, b as getPopoverRestoreFocusDefault } from '../PopoverContent-QCKf0esL.js';
+import { P as PopoverContent, a as getPopoverPositionDefault } from '../PopoverContent.esm.js';
+export { g as getPopoverColorDefault, b as getPopoverRestoreFocusDefault } from '../PopoverContent.esm.js';
 import { PopoverContext } from '../PopoverContext/index.esm.js';
 import { PopoverTrigger } from '../PopoverTrigger/index.esm.js';
 import 'react-i18next';

package/PopoverContent/index.esm.js

@@ -5,5 +5,5 @@ import '@floating-ui/react';
 import '@skatteetaten/ds-buttons';
 import '@skatteetaten/ds-core-utils';
 import '@skatteetaten/ds-icons';
-export { P as PopoverContent } from '../PopoverContent-QCKf0esL.js';
+export { P as PopoverContent } from '../PopoverContent.esm.js';
 import '../PopoverContext/index.esm.js';

package/{PopoverContent-QCKf0esL.js → PopoverContent.esm.js}

@@ -29,7 +29,7 @@ var styles = {
 };
 
 const PopoverContent = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, children }, ref)=>{
-    const { floatingData, interactions, arrowRef, isOpen, setIsOpen, color = getPopoverColorDefault(), isMobile, shouldRestoreFocus = getPopoverRestoreFocusDefault(), onClose } = useContext(PopoverContext);
+    const { floatingData, interactions, arrowRef, isOpen, setIsOpen, color = getPopoverColorDefault(), shouldRestoreFocus = getPopoverRestoreFocusDefault(), onClose } = useContext(PopoverContext);
     const { refs, floatingStyles, placement, middlewareData } = floatingData;
     const { getFloatingProps } = interactions;
     const { t } = useTranslation('Shared', {
@@ -69,7 +69,6 @@ const PopoverContent = /*#__PURE__*/ forwardRef(({ id, className = getCommonClas
                     }),
                     /*#__PURE__*/ jsx(IconButton, {
                         className: styles.popoverContentCloseButton,
-                        size: isMobile ? 'small' : 'large',
                         svgPath: CancelSVGpath,
                         title: t('shared.Close'),
                         onClick: ()=>{

package/index.esm.js

@@ -1,7 +1,7 @@
 export { Modal, getModalDismissOnEscDefault, getModalDismissOnOutsideClickDefault, getModalPaddingDefault, getModalVariantDefault } from './Modal/index.esm.js';
 export { Popover } from './Popover/index.esm.js';
 import { colorNamesArr } from '@skatteetaten/ds-core-utils';
-export { g as getPopoverColorDefault, a as getPopoverPositionDefault, b as getPopoverRestoreFocusDefault } from './PopoverContent-QCKf0esL.js';
+export { g as getPopoverColorDefault, a as getPopoverPositionDefault, b as getPopoverRestoreFocusDefault } from './PopoverContent.esm.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'react-i18next';

package/package.json

@@ -1,24 +1,26 @@
 {
   "name": "@skatteetaten/ds-overlays",
   "groupId": "no.skatteetaten.aurora",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "main": "./index.esm.js",
   "type": "module",
   "module": "./index.esm.js",
+  "types": "./index.esm.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Skatteetaten/designsystemet.git"
   },
+  "license": "Apache-2.0",
   "homepage": "https://www.skatteetaten.no/stilogtone/designsystemet/",
   "peerDependencies": {
     "i18next": "^23",
     "react": "^18",
     "react-i18next": "^14",
-    "@skatteetaten/ds-core-utils": "1.2.0",
-    "@skatteetaten/ds-buttons": "1.2.0",
-    "@skatteetaten/ds-icons": "1.2.0",
-    "@skatteetaten/ds-typography": "1.2.0",
-    "@skatteetaten/ds-progress": "1.2.0",
+    "@skatteetaten/ds-core-utils": "1.4.0",
+    "@skatteetaten/ds-buttons": "1.4.0",
+    "@skatteetaten/ds-icons": "1.4.0",
+    "@skatteetaten/ds-typography": "1.4.0",
+    "@skatteetaten/ds-progress": "1.4.0",
     "@floating-ui/react": "0.26.17"
   },
   "dependencies": {},

package/src/Modal/Modal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { getModalDismissOnEscDefault, getModalDismissOnOutsideClickDefault, getModalPaddingDefault, getModalVariantDefault } from './defaults';
 import { ModalProps } from './Modal.types';
 export declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDialogElement>>;

package/src/PopoverContent/PopoverContent.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { PopoverContentProps } from './PopoverContent.types';
 export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/src/PopoverContext/PopoverContext.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { PopoverContextProps } from '../Popover/Popover.types';
 export declare const PopoverContext: import("react").Context<PopoverContextProps>;

package/src/PopoverTrigger/PopoverTrigger.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { PopoverTriggerProps } from './PopoverTrigger.types';
 export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;