@skatteetaten/ds-overlays 1.5.0 → 1.6.0

package/Modal/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useImperativeHandle, useEffect } from 'react';
+import { forwardRef, useId, useRef, useImperativeHandle, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from '@skatteetaten/ds-buttons';
-import { dsI18n, SkatteetatenLogo, Separator, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
+import { dsI18n, getCommonClassNameDefault, SkatteetatenLogo, Separator } from '@skatteetaten/ds-core-utils';
 import { CancelSVGpath } from '@skatteetaten/ds-icons';
 import { Heading } from '@skatteetaten/ds-typography';
 import './styles.css';
@@ -41,6 +41,46 @@ const Modal = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefa
     });
     const modalRef = useRef(null);
     useImperativeHandle(ref, ()=>modalRef?.current);
+    const [isAutoOpened, setIsAutoOpened] = useState();
+    useEffect(()=>{
+        const dialog = modalRef.current;
+        if (dialog) {
+            const originalMethod = dialog.showModal;
+            dialog.showModal = function showModal(...args) {
+                setIsAutoOpened(document.activeElement?.nodeName === 'BODY');
+                originalMethod.apply(dialog, args);
+            };
+        }
+    }, []);
+    useEffect(()=>{
+        const dialog = modalRef.current;
+        const handleClose = ()=>{
+            if (isAutoOpened) {
+                setIsAutoOpened(false);
+                //TODO skiplink kan ligge i shadowDom. Da kan vi ikke finne den med querySelector
+                // Denne modalen kan også eksistere i en shadowDom. ;-)
+                const skipLink = document.querySelector('a[data-skip-link]');
+                if (skipLink) {
+                    skipLink?.focus();
+                } else {
+                    const prevTabIndex = document.body.tabIndex;
+                    document.body.tabIndex = -1;
+                    document.body.focus();
+                    document.body.tabIndex = prevTabIndex;
+                }
+            }
+        };
+        if (dialog) {
+            dialog.addEventListener('close', handleClose);
+        }
+        return ()=>{
+            if (dialog) {
+                dialog.removeEventListener('close', handleClose);
+            }
+        };
+    }, [
+        isAutoOpened
+    ]);
     useEffect(()=>{
         /**
        * Hvis konsument endrer children i en åpen modal, vil fokus settes til body og dismissOnEsc vil slutte å fungere.
@@ -80,6 +120,9 @@ const Modal = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefa
     const paddingClassName = styles[`modalPadding${padding.toUpperCase()}`];
     const noPaddingTop = imageSource ? styles.modalNoPaddingTop : '';
     const headingNoPaddingClassName = padding === 'mega' ? styles.modalHeadingNoPadding : '';
+    if (variant === 'important') {
+        console.warn('Modal: Varianten "important" er deprekert og vil bli fjernet i neste major versjon.');
+    }
     return /*#__PURE__*/ jsx("dialog", {
         ref: modalRef,
         id: id,

package/Popover/index.esm.js

@@ -1,8 +1,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 { useFloating, offset, flip, shift, arrow, autoUpdate, useDismiss, useInteractions } from '@floating-ui/react';
 import { useMediaQuery } from '@skatteetaten/ds-core-utils';
-import { P as PopoverContent, a as getPopoverPositionDefault } from '../PopoverContent.esm.js';
+import { a as getPopoverPositionDefault, P as PopoverContent } 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';

package/RolePicker/index.esm.js

@@ -5,7 +5,7 @@ import { Button } from '@skatteetaten/ds-buttons';
 import { dsI18n, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
 import { FavoriteSVGpath, LogOutSVGpath } from '@skatteetaten/ds-icons';
 import { Paragraph } from '@skatteetaten/ds-typography';
-import { Modal, getModalDismissOnEscDefault, getModalDismissOnOutsideClickDefault } from '../Modal/index.esm.js';
+import { Modal, getModalDismissOnOutsideClickDefault, getModalDismissOnEscDefault } from '../Modal/index.esm.js';
 import { RolePickerBusinessList } from '../RolePickerBusinessList/index.esm.js';
 import { RolePickerContext } from '../RolePickerContext/index.esm.js';
 import { RolePickerFilterInput } from '../RolePickerFilterInput/index.esm.js';
@@ -20,16 +20,14 @@ import './styles.css';
 const getRolePickerHideCloseButtonDefault = ()=>false;
 const getRolePickerShowSubunitsDefault = ()=>true;
 const getRolePickerShowInactiveBusinessesDefault = ()=>false;
+const getRolePickerShowDeceasedPeopleDefault = ()=>false;
 
 var styles = {
     "rolePicker": "RolePicker-module_rolePicker__pTz4X",
     "rolePickerFooter": "RolePicker-module_rolePickerFooter__64Pj-",
-    "container": "RolePicker-module_container__VtHRL",
-    "showMoreButton": "RolePicker-module_showMoreButton__rY5m5",
-    "srOnly": "RolePicker-module_srOnly__ePXta"
-};
+    "container": "RolePicker-module_container__VtHRL"};
 
-const RolePicker = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, me, businesses, people, title, dismissOnEsc = getModalDismissOnEscDefault(), dismissOnOutsideClick = getModalDismissOnOutsideClickDefault(), hideCloseButton = getRolePickerHideCloseButtonDefault(), showInactiveBusinesses = getRolePickerShowInactiveBusinessesDefault(), showSubunits = getRolePickerShowSubunitsDefault(), onClose, onEntitySelect, onLogout, children }, ref)=>{
+const RolePicker = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, me, businesses, people, title, dismissOnEsc = getModalDismissOnEscDefault(), dismissOnOutsideClick = getModalDismissOnOutsideClickDefault(), hideCloseButton = getRolePickerHideCloseButtonDefault(), showInactiveBusinesses = getRolePickerShowInactiveBusinessesDefault(), showSubunits = getRolePickerShowSubunitsDefault(), showDeceasedPeople = getRolePickerShowDeceasedPeopleDefault(), onClose, onEntitySelect, onLogout, children }, ref)=>{
     const [filter, setFilter] = useState('');
     const [loadingEntityId, setLoadingEntityId] = useState(undefined);
     const [error, setError] = useState(undefined);
@@ -80,7 +78,7 @@ const RolePicker = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNam
         }
     };
     const concatenatedClassName = `${styles.container} ${className}`.trim();
-    const noValidBusinesses = !me && !people && (!businesses || businesses.total === 0);
+    const noValidBusinesses = !me && !people && businesses && businesses.total === 0;
     let internalTitle = title ? title : t('rolepicker.Heading');
     if (noValidBusinesses) {
         internalTitle = t('rolepicker.NoBusinessesErrorTitle');
@@ -117,7 +115,7 @@ const RolePicker = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNam
                             me ? /*#__PURE__*/ jsx(RolePickerRow, {
                                 id: me.personId,
                                 title: t('rolepicker.MeHeading'),
-                                description: me.personId,
+                                description: `${t('rolepicker.PeopleDescriptionPrefix')} ${me.personId}`,
                                 svgPath: FavoriteSVGpath,
                                 titleAs: 'h2',
                                 onClick: ()=>{
@@ -142,7 +140,8 @@ const RolePicker = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNam
                             }) : null,
                             people && people?.total > 0 ? /*#__PURE__*/ jsx(RolePickerPeopleList, {
                                 people: people,
-                                filterQuery: deferredFilter
+                                filterQuery: deferredFilter,
+                                showDeceasedPeople: showDeceasedPeople
                             }) : null,
                             businesses && businesses.total > 0 ? /*#__PURE__*/ jsx(RolePickerBusinessList, {
                                 businesses: businesses,
@@ -193,4 +192,4 @@ const RolePicker = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNam
 });
 RolePicker.displayName = 'RolePicker';
 
-export { RolePicker, getRolePickerHideCloseButtonDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault };
+export { RolePicker, getRolePickerHideCloseButtonDefault, getRolePickerShowDeceasedPeopleDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault };

package/RolePickerFilterInput/index.esm.js

@@ -49,16 +49,16 @@ const RolePickerFilterInput = /*#__PURE__*/ forwardRef(({ label, value, onChange
                     htmlFor: 'filterInputId',
                     children: label
                 }),
-                /*#__PURE__*/ jsx("span", {
+                /*#__PURE__*/ jsx("div", {
                     className: styles.srOnly,
                     id: 'liveSearchId',
                     children: t('rolepicker.SearchResultDescription')
                 }),
-                /*#__PURE__*/ jsx("span", {
+                /*#__PURE__*/ jsx("div", {
                     className: styles.srOnly,
                     "aria-live": 'assertive',
                     "aria-atomic": 'true',
-                    children: value ? /*#__PURE__*/ jsx("span", {
+                    children: value ? /*#__PURE__*/ jsx("div", {
                         children: liveRegionContent
                     }) : null
                 }),

package/RolePickerPeopleList/index.esm.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useContext, useRef, useMemo } from 'react';
+import { useState, useContext, useRef, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@skatteetaten/ds-buttons';
 import { dsI18n } from '@skatteetaten/ds-core-utils';
+import { Checkbox } from '@skatteetaten/ds-forms';
 import { PersonSVGpath } from '@skatteetaten/ds-icons';
 import { Heading } from '@skatteetaten/ds-typography';
 import { RolePickerContext } from '../RolePickerContext/index.esm.js';
@@ -14,15 +15,17 @@ import './styles.css';
 
 var styles = {
     "peopleList": "RolePickerPeopleList-module_peopleList__dEumR",
+    "showDeceasedChecbox": "RolePickerPeopleList-module_showDeceasedChecbox__4SCg3",
     "showAllButtonWrapper": "RolePickerPeopleList-module_showAllButtonWrapper__-ErxO"
 };
 
 const MAX_INIITAL_ITEMS = 5;
-const RolePickerPeopleList = ({ people, filterQuery })=>{
+const RolePickerPeopleList = ({ people, filterQuery, showDeceasedPeople: showDeceasedPeopleExternal })=>{
     const { t } = useTranslation('ds_overlays', {
         i18n: dsI18n
     });
     const [showAll, setShowAll] = useState(false);
+    const [showDeceasedPeople, setShowDeceasedPeople] = useState(showDeceasedPeopleExternal);
     const ctx = useContext(RolePickerContext);
     const navRef = useRef(null);
     const handleShowAll = ()=>{
@@ -42,17 +45,28 @@ const RolePickerPeopleList = ({ people, filterQuery })=>{
         });
     };
     const visibleItems = useMemo(()=>{
+        // lager en dyp kopiering av person-listen for å unngå mutasjon
+        let items = JSON.parse(JSON.stringify(people.list));
+        items = !showDeceasedPeople ? items.filter((p)=>!p.isDeleted) : items;
         if (filterQuery) {
-            return people.list.filter((f)=>f.name.toLowerCase().includes(filterQuery.toLowerCase()) || f.personId.includes(filterQuery.toLowerCase()));
+            return items.filter((f)=>f.name.toLowerCase().includes(filterQuery.toLowerCase()) || f.personId.includes(filterQuery.toLowerCase()));
         }
         if (showAll) {
-            return people.list;
+            return items;
         }
-        return people.list.slice(0, MAX_INIITAL_ITEMS);
+        return items.slice(0, MAX_INIITAL_ITEMS);
     }, [
+        people.list,
+        showDeceasedPeople,
         filterQuery,
-        showAll,
-        people.list
+        showAll
+    ]);
+    const getShowAllCount = useCallback(()=>{
+        return showDeceasedPeople ? people.total : people.list.filter((p)=>!p.isDeleted).length;
+    }, [
+        people.list,
+        people.total,
+        showDeceasedPeople
     ]);
     const displayShowAllButton = !showAll && !filterQuery && people.total > MAX_INIITAL_ITEMS;
     return /*#__PURE__*/ jsxs("div", {
@@ -63,6 +77,12 @@ const RolePickerPeopleList = ({ people, filterQuery })=>{
                 id: 'otherPeopleHeadingId',
                 children: filterQuery ? `${visibleItems.length} ${t('rolepicker.PeopleHits')}` : t('rolepicker.PeopleHeading')
             }),
+            people.list.some((person)=>person.isDeleted) ? /*#__PURE__*/ jsx(Checkbox, {
+                className: styles.showDeceasedChecbox,
+                checked: showDeceasedPeople,
+                onChange: (e)=>setShowDeceasedPeople(e.target.checked),
+                children: t('rolepicker.ShowDeceasedPersons')
+            }) : null,
             /*#__PURE__*/ jsx("nav", {
                 ref: navRef,
                 "aria-labelledby": 'otherPeopleHeadingId',
@@ -72,7 +92,7 @@ const RolePickerPeopleList = ({ people, filterQuery })=>{
                         return /*#__PURE__*/ jsx("li", {
                             children: /*#__PURE__*/ jsx(RolePickerRow, {
                                 id: item.personId,
-                                title: item.name,
+                                title: `${item.name}${item.isDeleted ? ` (${t('rolepicker.Deceased')})` : ''}`,
                                 description: `${t('rolepicker.PeopleDescriptionPrefix')} ${item.personId}`,
                                 svgPath: PersonSVGpath,
                                 onClick: ()=>handleEntityClicked(item)
@@ -86,7 +106,7 @@ const RolePickerPeopleList = ({ people, filterQuery })=>{
                 children: /*#__PURE__*/ jsx(Button, {
                     variant: 'tertiary',
                     onClick: handleShowAll,
-                    children: `${t('rolepicker.ShowAll')} ${t('rolepicker.People')} (${people.total})`
+                    children: `${t('rolepicker.ShowAll')} ${t('rolepicker.People')} (${getShowAllCount()})`
                 })
             }) : null
         ]

package/RolePickerPeopleList/styles.css

@@ -1 +1 @@
-.RolePickerPeopleList-module_peopleList__dEumR{display:flex;flex-direction:column;gap:var(--spacing-s);list-style-type:none;padding:0}.RolePickerPeopleList-module_showAllButtonWrapper__-ErxO{margin-top:var(--spacing-xs);text-align:right}
+.RolePickerPeopleList-module_peopleList__dEumR{display:flex;flex-direction:column;gap:var(--spacing-s);list-style-type:none;padding:0}.RolePickerPeopleList-module_showDeceasedChecbox__4SCg3{margin-top:var(--spacing-s)}.RolePickerPeopleList-module_showAllButtonWrapper__-ErxO{margin-top:var(--spacing-xs);text-align:right}

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 { RolePicker, getRolePickerHideCloseButtonDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault } from './RolePicker/index.esm.js';
+export { RolePicker, getRolePickerHideCloseButtonDefault, getRolePickerShowDeceasedPeopleDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault } from './RolePicker/index.esm.js';
 export { g as getPopoverColorDefault, a as getPopoverPositionDefault, b as getPopoverRestoreFocusDefault } from './PopoverContent.esm.js';
 import 'react/jsx-runtime';
 import 'react';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@skatteetaten/ds-overlays",
   "groupId": "no.skatteetaten.aurora",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "main": "./index.esm.js",
   "type": "module",
   "module": "./index.esm.js",
@@ -16,16 +16,16 @@
     "i18next": "^23",
     "react": "^18",
     "react-i18next": "^14",
-    "@skatteetaten/ds-core-utils": "1.5.0",
-    "@skatteetaten/ds-buttons": "1.5.0",
-    "@skatteetaten/ds-forms": "1.5.0",
-    "@skatteetaten/ds-icons": "1.5.0",
-    "@skatteetaten/ds-navigation": "1.5.0",
-    "@skatteetaten/ds-typography": "1.5.0",
-    "@skatteetaten/ds-progress": "1.5.0",
-    "@skatteetaten/ds-status": "1.5.0",
-    "@floating-ui/react": "0.26.28",
-    "date-fns": "^3"
+    "@skatteetaten/ds-core-utils": "1.6.0",
+    "@skatteetaten/ds-buttons": "1.6.0",
+    "@skatteetaten/ds-forms": "1.6.0",
+    "@skatteetaten/ds-icons": "1.6.0",
+    "@skatteetaten/ds-navigation": "1.6.0",
+    "@skatteetaten/ds-typography": "1.6.0",
+    "@skatteetaten/ds-progress": "1.6.0",
+    "@skatteetaten/ds-status": "1.6.0",
+    "date-fns": "^3",
+    "@floating-ui/react": "0.26.28"
   },
   "dependencies": {},
   "scripts": {}

package/src/Modal/Modal.types.d.ts

@@ -12,7 +12,12 @@ export interface ModalProps extends BaseProps {
     };
     /** Innhold */
     children: ReactNode;
-    /** Definerer stilen til Modal */
+    /**
+     * Definerer stilen til Modal.
+     *
+     * **Deprecated:** Variant 'important' skal fases ut i neste major versjon.
+     * Bruk 'outline' i stedet.
+     */
     variant?: ModalVariant;
     /** Padding rundt Modal */
     padding?: ModalPadding;
@@ -34,7 +39,7 @@ export interface ModalProps extends BaseProps {
     renderIcon?: () => ReactElement<IconProps>;
     /**
      * Modal i shadowndom.
-     * Deprecated: Prop skal fjernes ved lansering av neste major versjon.
+     * @deprecated Prop skal fjernes ved lansering av neste major versjon.
      */
     shadowRootNode?: Document | ShadowRoot;
     /** Callback når modalen lukkes */

package/src/RolePicker/RolePicker.d.ts

@@ -1,4 +1,4 @@
-import { getRolePickerHideCloseButtonDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault } from './defaults';
+import { getRolePickerHideCloseButtonDefault, getRolePickerShowDeceasedPeopleDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault } from './defaults';
 import { RolePickerProps } from './RolePicker.types';
 export declare const RolePicker: import("react").ForwardRefExoticComponent<RolePickerProps & import("react").RefAttributes<HTMLDialogElement>>;
-export { getRolePickerHideCloseButtonDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault, };
+export { getRolePickerHideCloseButtonDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault, getRolePickerShowDeceasedPeopleDefault, };

package/src/RolePicker/RolePicker.types.d.ts

@@ -31,10 +31,12 @@ export interface RolePickerProps extends BaseProps, Partial<Pick<ModalProps, 'di
     people?: Paginated<Person>;
     /** En paginert liste over virksomheter. */
     businesses?: Paginated<Business>;
-    /** Om avviklede virksomheter skal vises. */
+    /** Om avviklede virksomheter skal vises som standard når rollevelger åpnes. */
     showInactiveBusinesses?: boolean;
-    /** Om underenheter av virksomheter skal vises. */
+    /** Om underenheter av virksomheter skal vises som standard når rollevelger åpnes. */
     showSubunits?: boolean;
+    /** Om avdøde personer skal vises som standard når rollevelger åpnes. */
+    showDeceasedPeople?: boolean;
     /** Tilbakekallingsfunksjon for å håndtere valg av virksomhet/person. */
     onEntitySelect?: OnEntitySelectHandler;
     /** Tilbakekallingsfunksjon for å håndtere utlogging. */

package/src/RolePicker/defaults.d.ts

@@ -1,3 +1,4 @@
 export declare const getRolePickerHideCloseButtonDefault: () => boolean;
 export declare const getRolePickerShowSubunitsDefault: () => boolean;
 export declare const getRolePickerShowInactiveBusinessesDefault: () => boolean;
+export declare const getRolePickerShowDeceasedPeopleDefault: () => boolean;

package/src/RolePickerPeopleList/RolePickerPeopleList.d.ts

@@ -1,2 +1,2 @@
 import { RolePickerPeopleListProps } from './RolePickerPeopleList.types';
-export declare const RolePickerPeopleList: ({ people, filterQuery, }: RolePickerPeopleListProps) => JSX.Element | null;
+export declare const RolePickerPeopleList: ({ people, filterQuery, showDeceasedPeople: showDeceasedPeopleExternal, }: RolePickerPeopleListProps) => JSX.Element | null;

package/src/RolePickerPeopleList/RolePickerPeopleList.types.d.ts

@@ -2,4 +2,5 @@ import { Paginated, Person } from '../RolePicker/RolePicker.types';
 export type RolePickerPeopleListProps = {
     filterQuery?: string;
     people: Paginated<Person>;
+    showDeceasedPeople: boolean;
 };