@skatteetaten/ds-overlays 1.6.0 → 2.0.1

package/Modal/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useImperativeHandle, useState, useEffect } from 'react';
+import { useId, useRef, useImperativeHandle, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from '@skatteetaten/ds-buttons';
-import { dsI18n, getCommonClassNameDefault, SkatteetatenLogo, Separator } from '@skatteetaten/ds-core-utils';
+import { dsI18n, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
 import { CancelSVGpath } from '@skatteetaten/ds-icons';
 import { Heading } from '@skatteetaten/ds-typography';
 import './styles.css';
@@ -16,11 +16,9 @@ const getModalDismissOnEscDefault = ()=>true;
 var styles = {
     "modal": "Modal-module_modal__Kyr-Y",
     "modalContainer": "Modal-module_modalContainer__muf75",
-    "modalLogo": "Modal-module_modalLogo__Vaf6E",
     "modalHeading": "Modal-module_modalHeading__uwT1R",
     "modalHeadingNoPadding": "Modal-module_modalHeadingNoPadding__t2hkH",
     "modalIllustration": "Modal-module_modalIllustration__jbA32",
-    "modalNoBorder": "Modal-module_modalNoBorder__ReNVP",
     "modalPaddingNONE": "Modal-module_modalPaddingNONE__02HaX",
     "modalPaddingS": "Modal-module_modalPaddingS__O93ax",
     "modalPaddingM": "Modal-module_modalPaddingM__c5Wi2",
@@ -31,13 +29,15 @@ var styles = {
     "srOnly": "Modal-module_srOnly__W8dQv"
 };
 
-const Modal = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefault(), classNames, lang, 'data-testid': dataTestId, dismissOnEsc = getModalDismissOnEscDefault(), dismissOnOutsideClick = getModalDismissOnOutsideClickDefault(), hideCloseButton, hideTitle, imageSource, imageSourceAltText, padding = getModalPaddingDefault(), title, variant = getModalVariantDefault(), shadowRootNode, onClose, renderIcon, children }, ref)=>{
+const Modal = ({ ref, id, className = getCommonClassNameDefault(), classNames, lang, 'data-testid': dataTestId, dismissOnEsc = getModalDismissOnEscDefault(), dismissOnOutsideClick = getModalDismissOnOutsideClickDefault(), hideCloseButton, hideTitle, imageSource, imageSourceAltText, padding = getModalPaddingDefault(), title, variant = getModalVariantDefault(), shadowRootNode, onClose, renderIcon, children })=>{
     const headingId = `modalHeadingId-${useId()}`;
     const { t } = useTranslation('ds_overlays', {
         i18n: dsI18n
     });
     const statusFlagRef = useRef({
-        mouseDownCaptured: false
+        mouseDownCaptured: false,
+        hasUserInteractionBeforeOpen: false,
+        isOpenedAtLeastOnce: false
     });
     const modalRef = useRef(null);
     useImperativeHandle(ref, ()=>modalRef?.current);
@@ -47,21 +47,32 @@ const Modal = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefa
         if (dialog) {
             const originalMethod = dialog.showModal;
             dialog.showModal = function showModal(...args) {
-                setIsAutoOpened(document.activeElement?.nodeName === 'BODY');
+                statusFlagRef.current.isOpenedAtLeastOnce = true;
+                setIsAutoOpened(!statusFlagRef.current.hasUserInteractionBeforeOpen);
                 originalMethod.apply(dialog, args);
             };
         }
+        const handleUserInteraction = ()=>{
+            if (!statusFlagRef.current.isOpenedAtLeastOnce) {
+                statusFlagRef.current.hasUserInteractionBeforeOpen = true;
+            }
+        };
+        document.addEventListener('mousedown', handleUserInteraction);
+        document.addEventListener('keydown', handleUserInteraction);
+        return ()=>{
+            document.removeEventListener('mousedown', handleUserInteraction);
+            document.removeEventListener('keydown', handleUserInteraction);
+        };
     }, []);
     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();
+                statusFlagRef.current.hasUserInteractionBeforeOpen = true;
+                const elementToFocus = shadowRootNode ? shadowRootNode.querySelector('#topbanner-focus-target') : document.querySelector('#topbanner-focus-target');
+                if (elementToFocus) {
+                    elementToFocus?.focus();
                 } else {
                     const prevTabIndex = document.body.tabIndex;
                     document.body.tabIndex = -1;
@@ -79,13 +90,14 @@ const Modal = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefa
             }
         };
     }, [
-        isAutoOpened
+        isAutoOpened,
+        shadowRootNode
     ]);
     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') {
+     * 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();
         }
     }, [
@@ -116,20 +128,17 @@ const Modal = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefa
         }
     };
     const hideTitleClassName = hideTitle ? styles.srOnly : '';
-    const hideOutlineClassName = variant === 'plain' || variant === 'important' ? styles.modalNoBorder : '';
     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,
-        className: `${styles.modal} ${hideOutlineClassName} ${className} ${classNames?.container ?? ''}`.trim(),
+        className: `${styles.modal} ${className} ${classNames?.container ?? ''}`.trim(),
         lang: lang,
         "data-testid": dataTestId,
         "aria-labelledby": headingId,
+        "data-variant": variant,
         autoFocus: true,
         /* 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)=>{
@@ -165,9 +174,6 @@ const Modal = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefa
                 /*#__PURE__*/ jsxs("div", {
                     className: `${paddingClassName} ${noPaddingTop}`.trim(),
                     children: [
-                        variant === 'important' && /*#__PURE__*/ jsx(SkatteetatenLogo, {
-                            className: styles.modalLogo
-                        }),
                         renderIcon && /*#__PURE__*/ jsx("div", {
                             children: renderIcon?.()
                         }),
@@ -181,12 +187,11 @@ const Modal = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefa
                         }),
                         children
                     ]
-                }),
-                variant === 'important' && /*#__PURE__*/ jsx(Separator, {})
+                })
             ]
         })
     });
-});
+};
 Modal.displayName = 'Modal';
 
 export { Modal, getModalDismissOnEscDefault, getModalDismissOnOutsideClickDefault, getModalPaddingDefault, getModalVariantDefault };

package/Modal/styles.css

@@ -1 +1 @@
-html:has(dialog[open]){overflow:hidden}.Modal-module_modal__Kyr-Y{background-color:var(--palette-graphite-0);border:.25rem solid var(--theme-primary);box-shadow:0 0 8px 2px rgba(0,0,0,.16),0 2px 4px -4px rgba(0,0,0,.16);box-sizing:border-box;font-size:var(--font-size-m);font-weight:var(--font-weight-regular);line-height:var(--semantic-line-height-article);max-height:calc(100vh - var(--spacing-m)*2);max-width:calc(var(--semantic-responsive-article) - var(--spacing-m)*2);min-width:calc(300px - var(--spacing-m)*2);overflow-y:auto;padding:0;position:fixed}.Modal-module_modal__Kyr-Y::backdrop{background:hsla(0,0%,100%,.8)}.Modal-module_modalContainer__muf75{outline:none}.Modal-module_modalLogo__Vaf6E{margin-bottom:var(--spacing-m)}.Modal-module_modalHeading__uwT1R{padding-right:var(--spacing-xl)}.Modal-module_modalHeadingNoPadding__t2hkH{padding-right:0}.Modal-module_modalIllustration__jbA32{margin-bottom:var(--spacing-m);width:100%}.Modal-module_modalNoBorder__ReNVP{border:none}.Modal-module_modalPaddingNONE__02HaX{padding:0}.Modal-module_modalPaddingS__O93ax{padding:calc(var(--spacing-s) - .25rem)}.Modal-module_modalPaddingM__c5Wi2{padding:calc(var(--spacing-m) - .25rem)}.Modal-module_modalPaddingL__IbVyg{padding:calc(var(--spacing-l) - .25rem)}.Modal-module_modalPaddingMEGA__wWHwS{padding:calc(var(--spacing-mega) - .25rem)}.Modal-module_modalNoPaddingTop__REBWr{padding-top:0}.Modal-module_closeButton__jgbDq{margin:var(--spacing-s);position:absolute;right:0;top:0}.Modal-module_closeButton__jgbDq:not(:active)>svg{fill:var(--palette-graphite-100)}.Modal-module_srOnly__W8dQv{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+html:has(dialog[open]){overflow:hidden}.Modal-module_modal__Kyr-Y{background-color:var(--palette-graphite-0);border:.25rem solid var(--theme-primary);box-shadow:0 0 8px 2px rgba(0,0,0,.16),0 2px 4px -4px rgba(0,0,0,.16);box-sizing:border-box;font-size:var(--font-size-m);font-weight:var(--font-weight-regular);line-height:var(--semantic-line-height-article);max-height:calc(100vh - var(--spacing-m)*2);max-width:calc(var(--semantic-responsive-article) - var(--spacing-m)*2);min-width:calc(300px - var(--spacing-m)*2);overflow-y:auto;padding:0;position:fixed}.Modal-module_modal__Kyr-Y::backdrop{background:hsla(0,0%,100%,.8)}.Modal-module_modalContainer__muf75{outline:none}.Modal-module_modalHeading__uwT1R{padding-right:var(--spacing-xl)}.Modal-module_modalHeadingNoPadding__t2hkH{padding-right:0}.Modal-module_modalIllustration__jbA32{margin-bottom:var(--spacing-m);width:100%}.Modal-module_modal__Kyr-Y[data-variant=plain]{border:none}.Modal-module_modalPaddingNONE__02HaX{padding:0}.Modal-module_modalPaddingS__O93ax{padding:calc(var(--spacing-s) - .25rem)}.Modal-module_modalPaddingM__c5Wi2{padding:calc(var(--spacing-m) - .25rem)}.Modal-module_modalPaddingL__IbVyg{padding:calc(var(--spacing-l) - .25rem)}.Modal-module_modalPaddingMEGA__wWHwS{padding:calc(var(--spacing-mega) - .25rem)}.Modal-module_modalNoPaddingTop__REBWr{padding-top:0}.Modal-module_closeButton__jgbDq{margin:var(--spacing-s);position:absolute;right:0;top:0}.Modal-module_closeButton__jgbDq:not(:active)>svg{fill:var(--palette-graphite-100)}.Modal-module_srOnly__W8dQv{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/PopoverContent.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMergeRefs } from '@floating-ui/react';
 import { IconButton } from '@skatteetaten/ds-buttons';
@@ -28,7 +28,7 @@ var styles = {
     "popoverArrow_right": "PopoverContent-module_popoverArrow_right__MPxU2"
 };
 
-/* eslint-disable react/forbid-dom-props */ const PopoverContent = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, children }, ref)=>{
+/* eslint-disable react/forbid-dom-props */ const PopoverContent = ({ ref, id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, children })=>{
     const { floatingData, interactions, arrowRef, isOpen, setIsOpen, color = getPopoverColorDefault(), shouldRestoreFocus = getPopoverRestoreFocusDefault(), onClose } = useContext(PopoverContext);
     const { refs, floatingStyles, placement, middlewareData } = floatingData;
     const { getFloatingProps } = interactions;
@@ -94,7 +94,7 @@ var styles = {
             })
         ]
     });
-});
+};
 PopoverContent.displayName = 'PopoverContent';
 
 export { PopoverContent as P, getPopoverPositionDefault as a, getPopoverRestoreFocusDefault as b, getPopoverColorDefault as g };

package/PopoverTrigger/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMergeRefs } from '@floating-ui/react';
 import { IconButton } from '@skatteetaten/ds-buttons';
@@ -7,7 +7,7 @@ import { dsI18n } from '@skatteetaten/ds-core-utils';
 import { HelpSimpleSVGpath } from '@skatteetaten/ds-icons';
 import { PopoverContext } from '../PopoverContext/index.esm.js';
 
-const PopoverTrigger = /*#__PURE__*/ forwardRef(({ id, className, lang, 'data-testid': dataTestId, title, ariaDescribedby, size, svgPath, onClick, onBlur, onFocus }, ref)=>{
+const PopoverTrigger = ({ ref, id, className, lang, 'data-testid': dataTestId, title, ariaDescribedby, size, svgPath, onClick, onBlur, onFocus })=>{
     const { t } = useTranslation('Shared', {
         i18n: dsI18n
     });
@@ -37,7 +37,7 @@ const PopoverTrigger = /*#__PURE__*/ forwardRef(({ id, className, lang, 'data-te
         onBlur: onBlur,
         onFocus: onFocus
     });
-});
+};
 PopoverTrigger.displayName = 'PopoverTrigger';
 
 export { PopoverTrigger };

package/RolePicker/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useDeferredValue, useRef, useImperativeHandle, useMemo } from 'react';
+import { useState, useDeferredValue, useRef, useImperativeHandle, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@skatteetaten/ds-buttons';
-import { dsI18n, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
+import { dsI18n, getCommonClassNameDefault, formatNationalIdentityNumber } from '@skatteetaten/ds-core-utils';
 import { FavoriteSVGpath, LogOutSVGpath } from '@skatteetaten/ds-icons';
 import { Paragraph } from '@skatteetaten/ds-typography';
 import { Modal, getModalDismissOnOutsideClickDefault, getModalDismissOnEscDefault } from '../Modal/index.esm.js';
@@ -21,13 +21,14 @@ const getRolePickerHideCloseButtonDefault = ()=>false;
 const getRolePickerShowSubunitsDefault = ()=>true;
 const getRolePickerShowInactiveBusinessesDefault = ()=>false;
 const getRolePickerShowDeceasedPeopleDefault = ()=>false;
+const getRolePickerMinimumEntitiesForSearchDefault = ()=>11;
 
 var styles = {
     "rolePicker": "RolePicker-module_rolePicker__pTz4X",
     "rolePickerFooter": "RolePicker-module_rolePickerFooter__64Pj-",
     "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(), showDeceasedPeople = getRolePickerShowDeceasedPeopleDefault(), onClose, onEntitySelect, onLogout, children }, ref)=>{
+const RolePicker = ({ ref, id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, me, businesses, people, title, dismissOnEsc = getModalDismissOnEscDefault(), dismissOnOutsideClick = getModalDismissOnOutsideClickDefault(), hideCloseButton = getRolePickerHideCloseButtonDefault(), minimumEntitiesForSearch = getRolePickerMinimumEntitiesForSearchDefault(), showInactiveBusinesses = getRolePickerShowInactiveBusinessesDefault(), showSubunits = getRolePickerShowSubunitsDefault(), showDeceasedPeople = getRolePickerShowDeceasedPeopleDefault(), onClose, onEntitySelect, onLogout, children })=>{
     const [filter, setFilter] = useState('');
     const [loadingEntityId, setLoadingEntityId] = useState(undefined);
     const [error, setError] = useState(undefined);
@@ -37,7 +38,7 @@ const RolePicker = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNam
     const deferredFilter = useDeferredValue(filter);
     const businessesCount = businesses ? businesses.total : 0;
     const peopleCount = people ? people.total : 0;
-    const displaySearch = businessesCount + peopleCount > 10;
+    const displaySearch = businessesCount + peopleCount >= minimumEntitiesForSearch;
     const modalRef = useRef(null);
     useImperativeHandle(ref, ()=>modalRef.current);
     const handleClose = ()=>{
@@ -115,7 +116,7 @@ const RolePicker = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNam
                             me ? /*#__PURE__*/ jsx(RolePickerRow, {
                                 id: me.personId,
                                 title: t('rolepicker.MeHeading'),
-                                description: `${t('rolepicker.PeopleDescriptionPrefix')} ${me.personId}`,
+                                description: `${t('rolepicker.PeopleDescriptionPrefix')} ${formatNationalIdentityNumber(me.personId)}`,
                                 svgPath: FavoriteSVGpath,
                                 titleAs: 'h2',
                                 onClick: ()=>{
@@ -133,7 +134,7 @@ const RolePicker = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNam
                             }) : null,
                             getRepresentationText(),
                             displaySearch ? /*#__PURE__*/ jsx(RolePickerFilterInput, {
-                                label: people && businesses ? t('rolepicker.SearchAll') : people ? t('rolepicker.SearchPeople') : t('rolepicker.SearchBusinesses'),
+                                label: t('rolepicker.SearchText'),
                                 value: filter,
                                 onChange: (e)=>setFilter(e.target.value),
                                 onClear: ()=>setFilter('')
@@ -189,7 +190,7 @@ const RolePicker = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNam
             })
         })
     });
-});
+};
 RolePicker.displayName = 'RolePicker';
 
-export { RolePicker, getRolePickerHideCloseButtonDefault, getRolePickerShowDeceasedPeopleDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault };
+export { RolePicker, getRolePickerHideCloseButtonDefault, getRolePickerMinimumEntitiesForSearchDefault, getRolePickerShowDeceasedPeopleDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault };

package/RolePickerBusinessList/index.esm.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useContext, useState, useRef, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@skatteetaten/ds-buttons';
-import { dsI18n } from '@skatteetaten/ds-core-utils';
+import { dsI18n, formatOrganisationNumber } from '@skatteetaten/ds-core-utils';
 import { Checkbox } from '@skatteetaten/ds-forms';
 import { BriefcaseOffSVGpath, BriefcaseMultipleSVGpath, BriefcaseSVGpath } from '@skatteetaten/ds-icons';
 import { Heading } from '@skatteetaten/ds-typography';
@@ -13,6 +13,34 @@ import '@skatteetaten/ds-status';
 import './styles.css';
 
 
+const unitTypesToHide = [
+    'AS',
+    'DA',
+    'ANS',
+    'ASA',
+    'SE',
+    'BA',
+    'SA',
+    'SCE',
+    'STI',
+    'IKS',
+    'KF',
+    'FKF',
+    'RHF',
+    'HF',
+    'NUF'
+];
+const getBusinessTitle = (business)=>{
+    let title = business.name;
+    if (!unitTypesToHide.includes(business.unitType)) {
+        title += ` ${business.unitType}`;
+    }
+    if (business.isDeleted) {
+        title += ` (${dsI18n.t('ds_overlays:rolepicker.Deleted')})`;
+    }
+    return title;
+};
+
 var styles = {
     "businessList": "RolePickerBusinessList-module_businessList__15fne",
     "checkboxGroup": "RolePickerBusinessList-module_checkboxGroup__cdE2w",
@@ -27,15 +55,19 @@ const RolePickerBusinessList = ({ businesses, filterQuery, showInactiveBusinesse
         i18n: dsI18n
     });
     const ctx = useContext(RolePickerContext);
-    const [showAll, setShowAll] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     const [showInactiveBusinesses, setShowInactiveBusinesses] = useState(externalShowInactiveBusinesses);
     const [showSubUnits, setShowSubUnits] = useState(externalShowSubUnits);
     const navRef = useRef(null);
-    const handleShowAll = ()=>{
+    const handleExpand = ()=>{
         const visibleLinks = navRef.current?.querySelectorAll('a').length ?? 1;
-        setShowAll(true);
+        setIsExpanded(true);
         navRef.current?.querySelectorAll('a')[visibleLinks - 1].focus();
     };
+    const handleCollapse = ()=>{
+        setIsExpanded(false);
+        navRef.current?.querySelectorAll('a')[0].focus();
+    };
     const handleEntityClicked = async (entity)=>{
         ctx?.setLoadingEntityId(entity.organizationNumber);
         ctx?.onEntitySelect?.(entity).then((res)=>{
@@ -69,15 +101,15 @@ const RolePickerBusinessList = ({ businesses, filterQuery, showInactiveBusinesse
                 return false;
             });
         } else {
-            items = showAll ? items : items.slice(0, MAX_INITIAL_ITEMS);
+            items = isExpanded ? items : items.slice(0, MAX_INITIAL_ITEMS);
         }
         return items;
     }, [
-        filterQuery,
         businesses.list,
-        showAll,
         showInactiveBusinesses,
-        showSubUnits
+        filterQuery,
+        showSubUnits,
+        isExpanded
     ]);
     const hasInactiveItems = businesses.list.some((business)=>business.isDeleted || business.subunits?.some((sub)=>sub.isDeleted));
     const hasItemsWithSubOranizations = businesses.list.some((business)=>business.subunits);
@@ -101,7 +133,7 @@ const RolePickerBusinessList = ({ businesses, filterQuery, showInactiveBusinesse
         showInactiveBusinesses,
         showSubUnits
     ]);
-    const displayShowAllButton = !showAll && !filterQuery && businesses.list?.length > MAX_INITIAL_ITEMS;
+    const displayExpandCollapseButton = !filterQuery && businesses.list?.length > MAX_INITIAL_ITEMS;
     return /*#__PURE__*/ jsxs("div", {
         children: [
             /*#__PURE__*/ jsx(Heading, {
@@ -137,12 +169,12 @@ const RolePickerBusinessList = ({ businesses, filterQuery, showInactiveBusinesse
                                 children: [
                                     /*#__PURE__*/ jsx(RolePickerRow, {
                                         id: item.organizationNumber,
-                                        title: `${item.name} ${item.unitType} ${item.isDeleted ? `(${t('rolepicker.Deleted')})` : ''}`,
+                                        title: getBusinessTitle(item),
                                         description: /*#__PURE__*/ jsxs(Fragment, {
                                             children: [
                                                 t('rolepicker.BusinessDescriptionPrefix'),
                                                 ' ',
-                                                item.organizationNumber,
+                                                formatOrganisationNumber(item.organizationNumber),
                                                 ' ',
                                                 /*#__PURE__*/ jsxs("em", {
                                                     children: [
@@ -165,13 +197,13 @@ const RolePickerBusinessList = ({ businesses, filterQuery, showInactiveBusinesse
                                                 className: styles.subUnit,
                                                 children: /*#__PURE__*/ jsx(RolePickerRow, {
                                                     id: sub.organizationNumber,
-                                                    title: `${sub.name} ${sub.unitType} ${sub.isDeleted ? `(${t('rolepicker.Deleted')})` : ''}`,
+                                                    title: getBusinessTitle(sub),
                                                     titleAs: 'h4',
                                                     description: /*#__PURE__*/ jsxs(Fragment, {
                                                         children: [
                                                             t('rolepicker.BusinessDescriptionPrefix'),
                                                             ' ',
-                                                            sub.organizationNumber,
+                                                            formatOrganisationNumber(sub.organizationNumber),
                                                             ' ',
                                                             /*#__PURE__*/ jsxs("em", {
                                                                 children: [
@@ -197,8 +229,8 @@ const RolePickerBusinessList = ({ businesses, filterQuery, showInactiveBusinesse
                             return /*#__PURE__*/ jsx("li", {
                                 children: /*#__PURE__*/ jsx(RolePickerRow, {
                                     id: item.organizationNumber,
-                                    title: `${item.name} ${item.unitType} ${item.isDeleted ? `(${t('rolepicker.Deleted')})` : ''}`,
-                                    description: `${t('rolepicker.BusinessDescriptionPrefix')} ${item.organizationNumber}`,
+                                    title: getBusinessTitle(item),
+                                    description: `${t('rolepicker.BusinessDescriptionPrefix')} ${formatOrganisationNumber(item.organizationNumber)}`,
                                     svgPath: item.isDeleted ? BriefcaseOffSVGpath : svgPath,
                                     onClick: ()=>{
                                         handleEntityClicked(item);
@@ -209,11 +241,15 @@ const RolePickerBusinessList = ({ businesses, filterQuery, showInactiveBusinesse
                     })
                 })
             }),
-            displayShowAllButton ? /*#__PURE__*/ jsx("div", {
+            displayExpandCollapseButton ? /*#__PURE__*/ jsx("div", {
                 className: styles.showAllButtonWrapper,
-                children: /*#__PURE__*/ jsx(Button, {
+                children: isExpanded ? /*#__PURE__*/ jsx(Button, {
+                    variant: 'tertiary',
+                    onClick: handleCollapse,
+                    children: t('rolepicker.ShowLess')
+                }) : /*#__PURE__*/ jsx(Button, {
                     variant: 'tertiary',
-                    onClick: handleShowAll,
+                    onClick: handleExpand,
                     children: `${t('rolepicker.ShowAll')} ${t('rolepicker.Businesses')} (${getShowAllCount()})`
                 })
             }) : null

package/RolePickerFilterInput/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from '@skatteetaten/ds-buttons';
 import { dsI18n } from '@skatteetaten/ds-core-utils';
@@ -18,7 +18,7 @@ var styles = {
     "srOnly": "RolePickerFilterInput-module_srOnly__CFhaY"
 };
 
-const RolePickerFilterInput = /*#__PURE__*/ forwardRef(({ label, value, onChange, onClear }, ref)=>{
+const RolePickerFilterInput = ({ label, value, onChange, onClear })=>{
     const { t: formsT } = useTranslation('ds_forms', {
         i18n: dsI18n
     });
@@ -103,7 +103,7 @@ const RolePickerFilterInput = /*#__PURE__*/ forwardRef(({ label, value, onChange
             ]
         })
     });
-});
+};
 RolePickerFilterInput.displayName = 'RolePickerFilterInput';
 
 export { RolePickerFilterInput };

package/RolePickerPeopleList/index.esm.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 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 { dsI18n, formatNationalIdentityNumber } from '@skatteetaten/ds-core-utils';
 import { Checkbox } from '@skatteetaten/ds-forms';
 import { PersonSVGpath } from '@skatteetaten/ds-icons';
 import { Heading } from '@skatteetaten/ds-typography';
@@ -19,18 +19,22 @@ var styles = {
     "showAllButtonWrapper": "RolePickerPeopleList-module_showAllButtonWrapper__-ErxO"
 };
 
-const MAX_INIITAL_ITEMS = 5;
+const MAX_INITIAL_ITEMS = 5;
 const RolePickerPeopleList = ({ people, filterQuery, showDeceasedPeople: showDeceasedPeopleExternal })=>{
     const { t } = useTranslation('ds_overlays', {
         i18n: dsI18n
     });
-    const [showAll, setShowAll] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     const [showDeceasedPeople, setShowDeceasedPeople] = useState(showDeceasedPeopleExternal);
     const ctx = useContext(RolePickerContext);
     const navRef = useRef(null);
-    const handleShowAll = ()=>{
-        setShowAll(true);
-        navRef.current?.querySelectorAll('a')[MAX_INIITAL_ITEMS - 1].focus();
+    const handleExpand = ()=>{
+        setIsExpanded(true);
+        navRef.current?.querySelectorAll('a')[MAX_INITIAL_ITEMS - 1].focus();
+    };
+    const handleCollapse = ()=>{
+        setIsExpanded(false);
+        navRef.current?.querySelectorAll('a')[0].focus();
     };
     const handleEntityClicked = async (entity)=>{
         ctx?.setLoadingEntityId(entity.personId);
@@ -51,15 +55,15 @@ const RolePickerPeopleList = ({ people, filterQuery, showDeceasedPeople: showDec
         if (filterQuery) {
             return items.filter((f)=>f.name.toLowerCase().includes(filterQuery.toLowerCase()) || f.personId.includes(filterQuery.toLowerCase()));
         }
-        if (showAll) {
+        if (isExpanded) {
             return items;
         }
-        return items.slice(0, MAX_INIITAL_ITEMS);
+        return items.slice(0, MAX_INITIAL_ITEMS);
     }, [
         people.list,
         showDeceasedPeople,
         filterQuery,
-        showAll
+        isExpanded
     ]);
     const getShowAllCount = useCallback(()=>{
         return showDeceasedPeople ? people.total : people.list.filter((p)=>!p.isDeleted).length;
@@ -68,7 +72,7 @@ const RolePickerPeopleList = ({ people, filterQuery, showDeceasedPeople: showDec
         people.total,
         showDeceasedPeople
     ]);
-    const displayShowAllButton = !showAll && !filterQuery && people.total > MAX_INIITAL_ITEMS;
+    const displayToggleAllButton = !filterQuery && people.total > MAX_INITIAL_ITEMS;
     return /*#__PURE__*/ jsxs("div", {
         children: [
             /*#__PURE__*/ jsx(Heading, {
@@ -93,7 +97,7 @@ const RolePickerPeopleList = ({ people, filterQuery, showDeceasedPeople: showDec
                             children: /*#__PURE__*/ jsx(RolePickerRow, {
                                 id: item.personId,
                                 title: `${item.name}${item.isDeleted ? ` (${t('rolepicker.Deceased')})` : ''}`,
-                                description: `${t('rolepicker.PeopleDescriptionPrefix')} ${item.personId}`,
+                                description: `${t('rolepicker.PeopleDescriptionPrefix')} ${formatNationalIdentityNumber(item.personId)}`,
                                 svgPath: PersonSVGpath,
                                 onClick: ()=>handleEntityClicked(item)
                             })
@@ -101,11 +105,15 @@ const RolePickerPeopleList = ({ people, filterQuery, showDeceasedPeople: showDec
                     })
                 })
             }),
-            displayShowAllButton ? /*#__PURE__*/ jsx("div", {
+            displayToggleAllButton ? /*#__PURE__*/ jsx("div", {
                 className: styles.showAllButtonWrapper,
-                children: /*#__PURE__*/ jsx(Button, {
+                children: isExpanded ? /*#__PURE__*/ jsx(Button, {
+                    variant: 'tertiary',
+                    onClick: handleCollapse,
+                    children: t('rolepicker.ShowLess')
+                }) : /*#__PURE__*/ jsx(Button, {
                     variant: 'tertiary',
-                    onClick: handleShowAll,
+                    onClick: handleExpand,
                     children: `${t('rolepicker.ShowAll')} ${t('rolepicker.People')} (${getShowAllCount()})`
                 })
             }) : null

package/RolePickerRow/index.esm.js

@@ -30,7 +30,7 @@ function RolePickerRow({ id, title, description, svgPath, titleAs, onClick }) {
                 }
             }),
             /*#__PURE__*/ jsx(Alert, {
-                variant: 'neutral',
+                variant: 'warning',
                 showAlert: hasError,
                 onClose: ()=>ctx?.setError(undefined),
                 children: ctx?.error?.message

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, getRolePickerShowDeceasedPeopleDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault } from './RolePicker/index.esm.js';
+export { RolePicker, getRolePickerHideCloseButtonDefault, getRolePickerMinimumEntitiesForSearchDefault, 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';
@@ -30,8 +30,7 @@ const modalPaddingArr = [
 ];
 const modalVariantArr = [
     'outline',
-    'plain',
-    'important'
+    'plain'
 ];
 
 const popoverColorArr = [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@skatteetaten/ds-overlays",
   "groupId": "no.skatteetaten.aurora",
-  "version": "1.6.0",
+  "version": "2.0.1",
   "main": "./index.esm.js",
   "type": "module",
   "module": "./index.esm.js",
@@ -13,19 +13,20 @@
   "license": "Apache-2.0",
   "homepage": "https://www.skatteetaten.no/stilogtone/designsystemet/",
   "peerDependencies": {
-    "i18next": "^23",
-    "react": "^18",
-    "react-i18next": "^14",
-    "@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"
+    "i18next": "^24",
+    "react": "^19 ",
+    "react-i18next": "^15",
+    "@skatteetaten/ds-core-utils": "2.0.1",
+    "@skatteetaten/ds-buttons": "2.0.1",
+    "@skatteetaten/ds-forms": "2.0.1",
+    "@skatteetaten/ds-icons": "2.0.1",
+    "@skatteetaten/ds-navigation": "2.0.1",
+    "@skatteetaten/ds-typography": "2.0.1",
+    "@skatteetaten/ds-progress": "2.0.1",
+    "@skatteetaten/ds-status": "2.0.1",
+    "date-fns": "^4",
+    "@floating-ui/react": "0.26.28",
+    "@skatteetaten/ds-content": "2.0.1"
   },
   "dependencies": {},
   "scripts": {}

package/src/Modal/Modal.d.ts

@@ -1,4 +1,8 @@
+import { JSX } from '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>>;
+export declare const Modal: {
+    ({ ref, id, className, classNames, lang, "data-testid": dataTestId, dismissOnEsc, dismissOnOutsideClick, hideCloseButton, hideTitle, imageSource, imageSourceAltText, padding, title, variant, shadowRootNode, onClose, renderIcon, children, }: ModalProps): JSX.Element;
+    displayName: string;
+};
 export { getModalPaddingDefault, getModalVariantDefault, getModalDismissOnOutsideClickDefault, getModalDismissOnEscDefault, };

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

@@ -1,11 +1,12 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, Ref } from 'react';
 import { BaseProps } from '@skatteetaten/ds-core-utils';
 import { IconProps } from '@skatteetaten/ds-icons';
 export declare const modalPaddingArr: readonly ["none", "s", "m", "l", "mega"];
 export type ModalPadding = (typeof modalPaddingArr)[number];
-export declare const modalVariantArr: readonly ["outline", "plain", "important"];
+export declare const modalVariantArr: readonly ["outline", "plain"];
 export type ModalVariant = (typeof modalVariantArr)[number];
 export interface ModalProps extends BaseProps {
+    ref?: Ref<HTMLDialogElement>;
     classNames?: {
         container?: string;
         image?: string;
@@ -14,9 +15,6 @@ export interface ModalProps extends BaseProps {
     children: ReactNode;
     /**
      * Definerer stilen til Modal.
-     *
-     * **Deprecated:** Variant 'important' skal fases ut i neste major versjon.
-     * Bruk 'outline' i stedet.
      */
     variant?: ModalVariant;
     /** Padding rundt Modal */
@@ -37,10 +35,7 @@ export interface ModalProps extends BaseProps {
     imageSourceAltText?: string;
     /** Icon-komponent som en funksjon som vises over overskriften */
     renderIcon?: () => ReactElement<IconProps>;
-    /**
-     * Modal i shadowndom.
-     * @deprecated Prop skal fjernes ved lansering av neste major versjon.
-     */
+    /** Modal i shadowndom. */
     shadowRootNode?: Document | ShadowRoot;
     /** Callback når modalen lukkes */
     onClose?: () => void;

package/src/PopoverContent/PopoverContent.d.ts

@@ -1,2 +1,6 @@
+import { JSX } from 'react';
 import { PopoverContentProps } from './PopoverContent.types';
-export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverContent: {
+    ({ ref, id, className, lang, "data-testid": dataTestId, children, }: PopoverContentProps): JSX.Element | null;
+    displayName: string;
+};

package/src/PopoverContent/PopoverContent.types.d.ts

@@ -1,10 +1,11 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { BaseProps } from '@skatteetaten/ds-core-utils';
 export declare const popoverPositionArr: readonly ["top-start", "top-end", "bottom-start", "bottom-end"];
 export type PopoverPosition = (typeof popoverPositionArr)[number];
 export declare const popoverColorArr: readonly ["forest", "ochre", "white"];
 export type PopoverColor = (typeof popoverColorArr)[number];
 export interface PopoverContentProps extends BaseProps {
+    ref?: Ref<HTMLDivElement>;
     /** Tekst */
     children: ReactNode;
 }

package/src/PopoverTrigger/PopoverTrigger.d.ts

@@ -1,2 +1,6 @@
+import { JSX } from 'react';
 import { PopoverTriggerProps } from './PopoverTrigger.types';
-export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverTrigger: {
+    ({ ref, id, className, lang, "data-testid": dataTestId, title, ariaDescribedby, size, svgPath, onClick, onBlur, onFocus, }: PopoverTriggerProps): JSX.Element;
+    displayName: string;
+};

package/src/PopoverTrigger/PopoverTrigger.types.d.ts

@@ -1,6 +1,10 @@
+import { Ref } from 'react';
 import { IconButtonProps } from '@skatteetaten/ds-buttons';
 import { BaseProps } from '@skatteetaten/ds-core-utils';
 type PropsFromIconButton = Pick<IconButtonProps, 'size' | 'svgPath' | 'title' | 'ariaDescribedby' | 'onClick' | 'onBlur' | 'onFocus'>;
-export interface PopoverTriggerProps extends BaseProps, Partial<PropsFromIconButton> {
+type PopoverTriggerCommonProps = BaseProps & {
+    ref?: Ref<HTMLButtonElement>;
+};
+export interface PopoverTriggerProps extends PopoverTriggerCommonProps, Partial<PropsFromIconButton> {
 }
 export {};

package/src/RolePicker/RolePicker.d.ts

@@ -1,4 +1,8 @@
-import { getRolePickerHideCloseButtonDefault, getRolePickerShowDeceasedPeopleDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault } from './defaults';
+import { JSX } from 'react';
+import { getRolePickerHideCloseButtonDefault, getRolePickerMinimumEntitiesForSearchDefault, 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, getRolePickerShowDeceasedPeopleDefault, };
+export declare const RolePicker: {
+    ({ ref, id, className, lang, "data-testid": dataTestId, me, businesses, people, title, dismissOnEsc, dismissOnOutsideClick, hideCloseButton, minimumEntitiesForSearch, showInactiveBusinesses, showSubunits, showDeceasedPeople, onClose, onEntitySelect, onLogout, children, }: RolePickerProps): JSX.Element;
+    displayName: string;
+};
+export { getRolePickerHideCloseButtonDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault, getRolePickerShowDeceasedPeopleDefault, getRolePickerMinimumEntitiesForSearchDefault, };

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

@@ -23,6 +23,7 @@ export type OnEntitySelectHandler = (entity: Entity) => Promise<{
     error: string;
 } | void>;
 export interface RolePickerProps extends BaseProps, Partial<Pick<ModalProps, 'dismissOnEsc' | 'dismissOnOutsideClick' | 'hideCloseButton' | 'onClose'>> {
+    ref?: React.Ref<HTMLDialogElement>;
     /** Egendefinert tittel på modal. */
     title?: string;
     /** Den nåværende brukeren representert som et Person-objekt. */
@@ -31,6 +32,8 @@ export interface RolePickerProps extends BaseProps, Partial<Pick<ModalProps, 'di
     people?: Paginated<Person>;
     /** En paginert liste over virksomheter. */
     businesses?: Paginated<Business>;
+    /**  Minimum antall personer/virksomheter som kreves for at søkefelt skal være synlig. Default: 11. */
+    minimumEntitiesForSearch?: number;
     /** Om avviklede virksomheter skal vises som standard når rollevelger åpnes. */
     showInactiveBusinesses?: boolean;
     /** Om underenheter av virksomheter skal vises som standard når rollevelger åpnes. */

package/src/RolePicker/defaults.d.ts

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

package/src/RolePickerBusinessList/RolePickerBusinessList.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { RolePickerBusinessListProps } from './RolePickerBusinessList.types';
 export declare const RolePickerBusinessList: {
     ({ businesses, filterQuery, showInactiveBusinesses: externalShowInactiveBusinesses, showSubunits: externalShowSubUnits, }: RolePickerBusinessListProps): JSX.Element | null;

package/src/RolePickerBusinessList/utils.d.ts

@@ -0,0 +1,2 @@
+import { Business } from '../RolePicker/RolePicker.types';
+export declare const getBusinessTitle: (business: Business) => string;

package/src/RolePickerFilterInput/RolePickerFilterInput.d.ts

@@ -1,2 +1,6 @@
+import { JSX } from 'react';
 import { RolePickerFilterInputProps } from './RolePickerFilterInput.types';
-export declare const RolePickerFilterInput: import("react").ForwardRefExoticComponent<RolePickerFilterInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const RolePickerFilterInput: {
+    ({ label, value, onChange, onClear, }: RolePickerFilterInputProps): JSX.Element;
+    displayName: string;
+};

package/src/RolePickerPeopleList/RolePickerPeopleList.d.ts

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