@skatteetaten/ds-overlays 1.4.0 → 1.5.1

package/Modal/index.esm.js

@@ -1,5 +1,5 @@
 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';
@@ -31,8 +31,7 @@ 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(), // eslint-disable-next-line @typescript-eslint/no-unused-vars
-shadowRootNode, onClose, children }, ref)=>{
+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 headingId = `modalHeadingId-${useId()}`;
     const { t } = useTranslation('ds_overlays', {
         i18n: dsI18n
@@ -42,6 +41,46 @@ shadowRootNode, onClose, children }, ref)=>{
     });
     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.
@@ -54,10 +93,10 @@ shadowRootNode, onClose, children }, ref)=>{
         dismissOnEsc
     ]);
     const isClickOutside = (event)=>{
-        if (!(event.target instanceof HTMLElement)) {
+        if (!(event.currentTarget instanceof HTMLElement)) {
             return true;
         }
-        const rect = event.target.getBoundingClientRect();
+        const rect = event.currentTarget.getBoundingClientRect();
         return rect.left > event.clientX || rect.right < event.clientX || rect.top > event.clientY || rect.bottom < event.clientY;
     };
     const handleMouseEvent = (event)=>{
@@ -94,6 +133,7 @@ shadowRootNode, onClose, children }, ref)=>{
             if (e.key === 'Escape') {
                 if (dismissOnEsc) {
                     onClose?.();
+                    modalRef.current?.close();
                 } else {
                     e.preventDefault();
                 }
@@ -125,6 +165,9 @@ shadowRootNode, onClose, children }, ref)=>{
                         variant === 'important' && /*#__PURE__*/ jsx(SkatteetatenLogo, {
                             className: styles.modalLogo
                         }),
+                        renderIcon && /*#__PURE__*/ jsx("div", {
+                            children: renderIcon?.()
+                        }),
                         /*#__PURE__*/ jsx(Heading, {
                             className: `${styles.modalHeading} ${headingNoPaddingClassName} ${hideTitleClassName}`.trim(),
                             id: headingId,

package/PopoverContent.esm.js

@@ -28,7 +28,7 @@ var styles = {
     "popoverArrow_right": "PopoverContent-module_popoverArrow_right__MPxU2"
 };
 
-const PopoverContent = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, children }, ref)=>{
+/* eslint-disable react/forbid-dom-props */ const PopoverContent = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, children }, ref)=>{
     const { floatingData, interactions, arrowRef, isOpen, setIsOpen, color = getPopoverColorDefault(), shouldRestoreFocus = getPopoverRestoreFocusDefault(), onClose } = useContext(PopoverContext);
     const { refs, floatingStyles, placement, middlewareData } = floatingData;
     const { getFloatingProps } = interactions;

package/RolePicker/index.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/RolePicker/RolePicker";

package/RolePicker/index.esm.js

@@ -0,0 +1,196 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, 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 { FavoriteSVGpath, LogOutSVGpath } from '@skatteetaten/ds-icons';
+import { Paragraph } from '@skatteetaten/ds-typography';
+import { Modal, getModalDismissOnEscDefault, getModalDismissOnOutsideClickDefault } 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';
+import { RolePickerPeopleList } from '../RolePickerPeopleList/index.esm.js';
+import { RolePickerRow } from '../RolePickerRow/index.esm.js';
+import '@skatteetaten/ds-forms';
+import '@skatteetaten/ds-navigation';
+import '@skatteetaten/ds-status';
+import './styles.css';
+
+
+const getRolePickerHideCloseButtonDefault = ()=>false;
+const getRolePickerShowSubunitsDefault = ()=>true;
+const getRolePickerShowInactiveBusinessesDefault = ()=>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"
+};
+
+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 [filter, setFilter] = useState('');
+    const [loadingEntityId, setLoadingEntityId] = useState(undefined);
+    const [error, setError] = useState(undefined);
+    const { t } = useTranslation('ds_overlays', {
+        i18n: dsI18n
+    });
+    const deferredFilter = useDeferredValue(filter);
+    const businessesCount = businesses ? businesses.total : 0;
+    const peopleCount = people ? people.total : 0;
+    const displaySearch = businessesCount + peopleCount > 10;
+    const modalRef = useRef(null);
+    useImperativeHandle(ref, ()=>modalRef.current);
+    const handleClose = ()=>{
+        setError(undefined);
+        setLoadingEntityId(undefined);
+        onClose?.();
+    };
+    const getRepresentationText = ()=>{
+        if (people && people.total > 0 && businesses && businesses.total > 0) {
+            return /*#__PURE__*/ jsxs(Paragraph, {
+                children: [
+                    t('rolepicker.YouCanRepresent'),
+                    /*#__PURE__*/ jsx("strong", {
+                        children: ` ${people.total} ${people.total > 1 ? t('rolepicker.People') : t('rolepicker.Person')} ${t('rolepicker.And')} ${businesses.total} ${businesses.total > 1 ? t('rolepicker.Businesses') : t('rolepicker.Business')}.`
+                    })
+                ]
+            });
+        } else if (people && people.total > 0) {
+            return /*#__PURE__*/ jsxs(Paragraph, {
+                children: [
+                    t('rolepicker.YouCanRepresent'),
+                    /*#__PURE__*/ jsx("strong", {
+                        children: ` ${people.total} ${people.total > 1 ? t('rolepicker.People') : t('rolepicker.Person')}.`
+                    })
+                ]
+            });
+        } else if (businesses && businesses.total > 0) {
+            return /*#__PURE__*/ jsxs(Paragraph, {
+                children: [
+                    t('rolepicker.YouCanRepresent'),
+                    /*#__PURE__*/ jsx("strong", {
+                        children: ` ${businesses.total} ${businesses.total > 1 ? t('rolepicker.Businesses') : t('rolepicker.Business')}.`
+                    })
+                ]
+            });
+        } else {
+            return null;
+        }
+    };
+    const concatenatedClassName = `${styles.container} ${className}`.trim();
+    const noValidBusinesses = !me && !people && (!businesses || businesses.total === 0);
+    let internalTitle = title ? title : t('rolepicker.Heading');
+    if (noValidBusinesses) {
+        internalTitle = t('rolepicker.NoBusinessesErrorTitle');
+    }
+    const contextValue = useMemo(()=>({
+            onEntitySelect,
+            error,
+            setError,
+            loadingEntityId,
+            setLoadingEntityId
+        }), [
+        error,
+        loadingEntityId,
+        onEntitySelect
+    ]);
+    return /*#__PURE__*/ jsx(RolePickerContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(Modal, {
+            ref: modalRef,
+            id: id,
+            className: concatenatedClassName,
+            lang: lang,
+            title: internalTitle,
+            "data-testid": dataTestId,
+            dismissOnEsc: dismissOnEsc,
+            dismissOnOutsideClick: dismissOnOutsideClick,
+            hideCloseButton: hideCloseButton,
+            onClose: handleClose,
+            children: /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: styles.rolePicker,
+                        children: [
+                            me ? /*#__PURE__*/ jsx(RolePickerRow, {
+                                id: me.personId,
+                                title: t('rolepicker.MeHeading'),
+                                description: `${t('rolepicker.PeopleDescriptionPrefix')} ${me.personId}`,
+                                svgPath: FavoriteSVGpath,
+                                titleAs: 'h2',
+                                onClick: ()=>{
+                                    setLoadingEntityId(me.personId);
+                                    onEntitySelect?.(me).then((res)=>{
+                                        if (res?.error) {
+                                            setError({
+                                                entityId: me.personId,
+                                                message: res.error
+                                            });
+                                        }
+                                        setLoadingEntityId(undefined);
+                                    });
+                                }
+                            }) : null,
+                            getRepresentationText(),
+                            displaySearch ? /*#__PURE__*/ jsx(RolePickerFilterInput, {
+                                label: people && businesses ? t('rolepicker.SearchAll') : people ? t('rolepicker.SearchPeople') : t('rolepicker.SearchBusinesses'),
+                                value: filter,
+                                onChange: (e)=>setFilter(e.target.value),
+                                onClear: ()=>setFilter('')
+                            }) : null,
+                            people && people?.total > 0 ? /*#__PURE__*/ jsx(RolePickerPeopleList, {
+                                people: people,
+                                filterQuery: deferredFilter
+                            }) : null,
+                            businesses && businesses.total > 0 ? /*#__PURE__*/ jsx(RolePickerBusinessList, {
+                                businesses: businesses,
+                                filterQuery: deferredFilter,
+                                showSubunits: showSubunits,
+                                showInactiveBusinesses: showInactiveBusinesses
+                            }) : null,
+                            noValidBusinesses ? /*#__PURE__*/ jsxs(Paragraph, {
+                                children: [
+                                    t('rolepicker.NoBusinessesDescription'),
+                                    ' ',
+                                    /*#__PURE__*/ jsxs("strong", {
+                                        children: [
+                                            t('rolepicker.Business'),
+                                            '.'
+                                        ]
+                                    })
+                                ]
+                            }) : null,
+                            children
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: styles.rolePickerFooter,
+                        children: noValidBusinesses ? /*#__PURE__*/ jsx(Button, {
+                            href: `https://skatt.skatteetaten.no/web/minside/person`,
+                            children: t('rolepicker.GoToMyPage')
+                        }) : /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    variant: 'secondary',
+                                    svgPath: LogOutSVGpath,
+                                    onClick: onLogout,
+                                    children: t('rolepicker.Logout')
+                                }),
+                                !hideCloseButton ? /*#__PURE__*/ jsx(Button, {
+                                    variant: 'secondary',
+                                    onClick: ()=>modalRef.current?.close(),
+                                    children: t('rolepicker.Cancel')
+                                }) : null
+                            ]
+                        })
+                    })
+                ]
+            })
+        })
+    });
+});
+RolePicker.displayName = 'RolePicker';
+
+export { RolePicker, getRolePickerHideCloseButtonDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault };

package/RolePicker/styles.css

@@ -0,0 +1 @@
+html:has(dialog[open]){overflow:hidden}.RolePicker-module_rolePicker__pTz4X{display:flex;flex-direction:column;gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.RolePicker-module_rolePickerFooter__64Pj-{align-items:center;display:flex;gap:var(--spacing-s)}.RolePicker-module_container__VtHRL{margin-top:var(--spacing-xl);width:var(--container-s)}.RolePicker-module_showMoreButton__rY5m5{text-align:right}.RolePicker-module_srOnly__ePXta{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/RolePickerBusinessList/index.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/RolePickerBusinessList/RolePickerBusinessList";

package/RolePickerBusinessList/index.esm.js

@@ -0,0 +1,225 @@
+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 { Checkbox } from '@skatteetaten/ds-forms';
+import { BriefcaseOffSVGpath, BriefcaseMultipleSVGpath, BriefcaseSVGpath } from '@skatteetaten/ds-icons';
+import { Heading } from '@skatteetaten/ds-typography';
+import { RolePickerContext } from '../RolePickerContext/index.esm.js';
+import { RolePickerRow } from '../RolePickerRow/index.esm.js';
+import '@skatteetaten/ds-navigation';
+import '@skatteetaten/ds-status';
+import './styles.css';
+
+
+var styles = {
+    "businessList": "RolePickerBusinessList-module_businessList__15fne",
+    "checkboxGroup": "RolePickerBusinessList-module_checkboxGroup__cdE2w",
+    "showAllButtonWrapper": "RolePickerBusinessList-module_showAllButtonWrapper__ZffHt",
+    "subUnitsList": "RolePickerBusinessList-module_subUnitsList__bDv87",
+    "subUnit": "RolePickerBusinessList-module_subUnit__DIX6O"
+};
+
+const MAX_INITIAL_ITEMS = 5;
+const RolePickerBusinessList = ({ businesses, filterQuery, showInactiveBusinesses: externalShowInactiveBusinesses, showSubunits: externalShowSubUnits })=>{
+    const { t } = useTranslation('ds_overlays', {
+        i18n: dsI18n
+    });
+    const ctx = useContext(RolePickerContext);
+    const [showAll, setShowAll] = useState(false);
+    const [showInactiveBusinesses, setShowInactiveBusinesses] = useState(externalShowInactiveBusinesses);
+    const [showSubUnits, setShowSubUnits] = useState(externalShowSubUnits);
+    const navRef = useRef(null);
+    const handleShowAll = ()=>{
+        const visibleLinks = navRef.current?.querySelectorAll('a').length ?? 1;
+        setShowAll(true);
+        navRef.current?.querySelectorAll('a')[visibleLinks - 1].focus();
+    };
+    const handleEntityClicked = async (entity)=>{
+        ctx?.setLoadingEntityId(entity.organizationNumber);
+        ctx?.onEntitySelect?.(entity).then((res)=>{
+            if (res?.error) {
+                ctx?.setError({
+                    entityId: entity.organizationNumber,
+                    message: res.error
+                });
+            }
+            ctx.setLoadingEntityId(undefined);
+        });
+    };
+    const visibleItems = useMemo(()=>{
+        // lager en dyp kopiering av business-listen for å unngå mutasjon
+        let items = JSON.parse(JSON.stringify(businesses.list));
+        items = !showInactiveBusinesses ? items.filter((p)=>!p.isDeleted) : items;
+        if (filterQuery) {
+            // Filteret sjekker om `filterQuery` er til stede i organisasjonens navn, enhetstype eller organisasjonsnummer.
+            // Hvis `showSubUnits` er sann, sjekker det også om noen av underenhetenes navn inkluderer `filterQuery`.
+            items = items.filter((business)=>{
+                const mainMatch = (business.name + business.unitType).toLowerCase().includes(filterQuery.toLowerCase()) || business.organizationNumber.includes(filterQuery.toLowerCase()) || business.mainOrganizationNumber?.includes(filterQuery.toLowerCase());
+                const subunitMatch = showSubUnits && business.subunits?.some((sub)=>(sub.name.toLowerCase() + sub.unitType.toLowerCase()).includes(filterQuery.toLowerCase()) && (showInactiveBusinesses || !sub.isDeleted));
+                if (mainMatch) {
+                    return true;
+                }
+                if (subunitMatch) {
+                    const filteredSubunits = business.subunits?.filter((sub)=>(sub.name.toLowerCase() + sub.unitType.toLowerCase()).includes(filterQuery.toLowerCase()) && (showInactiveBusinesses || !sub.isDeleted));
+                    business.subunits = filteredSubunits;
+                    return true;
+                }
+                return false;
+            });
+        } else {
+            items = showAll ? items : items.slice(0, MAX_INITIAL_ITEMS);
+        }
+        return items;
+    }, [
+        filterQuery,
+        businesses.list,
+        showAll,
+        showInactiveBusinesses,
+        showSubUnits
+    ]);
+    const hasInactiveItems = businesses.list.some((business)=>business.isDeleted || business.subunits?.some((sub)=>sub.isDeleted));
+    const hasItemsWithSubOranizations = businesses.list.some((business)=>business.subunits);
+    const getShowAllCount = useCallback(()=>{
+        if (showSubUnits && showInactiveBusinesses) {
+            return businesses.total;
+        }
+        if (showSubUnits) {
+            return businesses.list.filter((item)=>!item.isDeleted).reduce((total, curr)=>{
+                const subUnitsCount = curr.subunits?.filter((sub)=>!sub.isDeleted).length ?? 0;
+                return total + 1 + subUnitsCount;
+            }, 0);
+        }
+        if (showInactiveBusinesses) {
+            return businesses.list.length;
+        }
+        return businesses.list.filter((item)=>!item.isDeleted).length;
+    }, [
+        businesses.list,
+        businesses.total,
+        showInactiveBusinesses,
+        showSubUnits
+    ]);
+    const displayShowAllButton = !showAll && !filterQuery && businesses.list?.length > MAX_INITIAL_ITEMS;
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(Heading, {
+                as: 'h2',
+                level: 3,
+                id: 'businessesHeadingId',
+                children: filterQuery ? `${visibleItems.length} ${t('rolepicker.BusinessHits')}` : t('rolepicker.BusinessesHeading')
+            }),
+            hasInactiveItems || hasItemsWithSubOranizations ? /*#__PURE__*/ jsxs("div", {
+                className: styles.checkboxGroup,
+                children: [
+                    hasInactiveItems ? /*#__PURE__*/ jsx(Checkbox, {
+                        checked: showInactiveBusinesses,
+                        onChange: (e)=>setShowInactiveBusinesses(e.target.checked),
+                        children: t('rolepicker.ShowInactiveBusinessesHeader')
+                    }) : null,
+                    hasItemsWithSubOranizations ? /*#__PURE__*/ jsx(Checkbox, {
+                        checked: showSubUnits,
+                        onChange: (e)=>setShowSubUnits(e.target.checked),
+                        children: t('rolepicker.ShowSubBusinessesHeading')
+                    }) : null
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx("nav", {
+                ref: navRef,
+                "aria-labelledby": 'businessesHeadingId',
+                children: /*#__PURE__*/ jsx("ul", {
+                    className: styles.businessList,
+                    children: visibleItems?.map((item)=>{
+                        if (showSubUnits && item.subunits) {
+                            const subUnits = showInactiveBusinesses ? item.subunits : item.subunits.filter((sub)=>!sub.isDeleted);
+                            return /*#__PURE__*/ jsxs("li", {
+                                children: [
+                                    /*#__PURE__*/ jsx(RolePickerRow, {
+                                        id: item.organizationNumber,
+                                        title: `${item.name} ${item.unitType} ${item.isDeleted ? `(${t('rolepicker.Deleted')})` : ''}`,
+                                        description: /*#__PURE__*/ jsxs(Fragment, {
+                                            children: [
+                                                t('rolepicker.BusinessDescriptionPrefix'),
+                                                ' ',
+                                                item.organizationNumber,
+                                                ' ',
+                                                /*#__PURE__*/ jsxs("em", {
+                                                    children: [
+                                                        '(',
+                                                        t('rolepicker.MainBusiness'),
+                                                        ')'
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        svgPath: item.isDeleted ? BriefcaseOffSVGpath : BriefcaseMultipleSVGpath,
+                                        onClick: ()=>{
+                                            handleEntityClicked(item);
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsx("ul", {
+                                        className: styles.subUnitsList,
+                                        children: subUnits.map((sub)=>{
+                                            return /*#__PURE__*/ jsx("li", {
+                                                className: styles.subUnit,
+                                                children: /*#__PURE__*/ jsx(RolePickerRow, {
+                                                    id: sub.organizationNumber,
+                                                    title: `${sub.name} ${sub.unitType} ${sub.isDeleted ? `(${t('rolepicker.Deleted')})` : ''}`,
+                                                    titleAs: 'h4',
+                                                    description: /*#__PURE__*/ jsxs(Fragment, {
+                                                        children: [
+                                                            t('rolepicker.BusinessDescriptionPrefix'),
+                                                            ' ',
+                                                            sub.organizationNumber,
+                                                            ' ',
+                                                            /*#__PURE__*/ jsxs("em", {
+                                                                children: [
+                                                                    '(',
+                                                                    t('rolepicker.SubUnit'),
+                                                                    ')'
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }),
+                                                    svgPath: sub.isDeleted ? BriefcaseOffSVGpath : BriefcaseSVGpath,
+                                                    onClick: ()=>{
+                                                        handleEntityClicked(sub);
+                                                    }
+                                                })
+                                            }, sub.organizationNumber);
+                                        })
+                                    })
+                                ]
+                            }, item.organizationNumber);
+                        } else {
+                            const svgPath = item.subunits ? BriefcaseMultipleSVGpath : BriefcaseSVGpath;
+                            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}`,
+                                    svgPath: item.isDeleted ? BriefcaseOffSVGpath : svgPath,
+                                    onClick: ()=>{
+                                        handleEntityClicked(item);
+                                    }
+                                })
+                            }, item.organizationNumber);
+                        }
+                    })
+                })
+            }),
+            displayShowAllButton ? /*#__PURE__*/ jsx("div", {
+                className: styles.showAllButtonWrapper,
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: 'tertiary',
+                    onClick: handleShowAll,
+                    children: `${t('rolepicker.ShowAll')} ${t('rolepicker.Businesses')} (${getShowAllCount()})`
+                })
+            }) : null
+        ]
+    });
+};
+RolePickerBusinessList.displayName = 'RolePickerBusinessList';
+
+export { RolePickerBusinessList };

package/RolePickerBusinessList/styles.css

@@ -0,0 +1 @@
+.RolePickerBusinessList-module_businessList__15fne{display:flex;flex-direction:column;gap:var(--spacing-s);list-style-type:none;padding:0}.RolePickerBusinessList-module_checkboxGroup__cdE2w{display:flex;flex-direction:column;gap:var(--spacing-s);margin:var(--spacing-s) 0}@media (min-width:480px){.RolePickerBusinessList-module_checkboxGroup__cdE2w{flex-direction:row}}.RolePickerBusinessList-module_showAllButtonWrapper__ZffHt{margin-top:var(--spacing-xs);text-align:right}.RolePickerBusinessList-module_subUnitsList__bDv87{display:flex;flex-direction:column;gap:var(--spacing-s);list-style-type:none;margin-top:var(--spacing-s);padding:0}.RolePickerBusinessList-module_subUnit__DIX6O{padding-left:var(--spacing-xl)}

package/RolePickerContext/index.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/RolePickerContext/RolePickerContext";

package/RolePickerContext/index.esm.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const RolePickerContext = /*#__PURE__*/ createContext(null);
+
+export { RolePickerContext };

package/RolePickerFilterInput/index.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/RolePickerFilterInput/RolePickerFilterInput";

package/RolePickerFilterInput/index.esm.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '@skatteetaten/ds-buttons';
+import { dsI18n } from '@skatteetaten/ds-core-utils';
+import { CancelSVGpath, Icon, FilterSVGpath } from '@skatteetaten/ds-icons';
+import './styles.css';
+
+
+var styles = {
+    "searchContainer": "RolePickerFilterInput-module_searchContainer__o-Vzy",
+    "topContainer": "RolePickerFilterInput-module_topContainer__yFxDA",
+    "label": "RolePickerFilterInput-module_label__lgvnq",
+    "clearButton": "RolePickerFilterInput-module_clearButton__etHYm",
+    "filterIcon": "RolePickerFilterInput-module_filterIcon__v--p8",
+    "inputWrapper": "RolePickerFilterInput-module_inputWrapper__wGC-J",
+    "input": "RolePickerFilterInput-module_input__eShOX",
+    "srOnly": "RolePickerFilterInput-module_srOnly__CFhaY"
+};
+
+const RolePickerFilterInput = /*#__PURE__*/ forwardRef(({ label, value, onChange, onClear }, ref)=>{
+    const { t: formsT } = useTranslation('ds_forms', {
+        i18n: dsI18n
+    });
+    const { t } = useTranslation('ds_overlays', {
+        i18n: dsI18n
+    });
+    const inputRef = useRef(null);
+    const [liveRegionContent, setLiveRegionContent] = useState('');
+    const [showClearButton, setShowClearButton] = useState(!!value);
+    useEffect(()=>{
+        // Midlertidig tøm innholdet for å tvinge ny kunngjøring
+        setLiveRegionContent('');
+        const timeoutId = setTimeout(()=>{
+            setLiveRegionContent(t('rolepicker.SearchResultUpdated'));
+        }, 100); // Kort forsinkelse for å sikre at skjermleseren oppdager endringen
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        value,
+        t
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.topContainer,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: styles.searchContainer,
+            children: [
+                /*#__PURE__*/ jsx("label", {
+                    className: styles.label,
+                    htmlFor: 'filterInputId',
+                    children: label
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: styles.srOnly,
+                    id: 'liveSearchId',
+                    children: t('rolepicker.SearchResultDescription')
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: styles.srOnly,
+                    "aria-live": 'assertive',
+                    "aria-atomic": 'true',
+                    children: value ? /*#__PURE__*/ jsx("span", {
+                        children: liveRegionContent
+                    }) : null
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: styles.inputWrapper,
+                    children: [
+                        /*#__PURE__*/ jsx("input", {
+                            ref: inputRef,
+                            id: 'filterInputId',
+                            "aria-describedby": 'liveSearchId',
+                            className: styles.input,
+                            name: 'filter',
+                            value: value,
+                            type: 'search',
+                            onChange: (event)=>{
+                                onChange?.(event);
+                                if (event.target.value.length) {
+                                    setShowClearButton(true);
+                                } else {
+                                    setShowClearButton(false);
+                                }
+                            }
+                        }),
+                        showClearButton && /*#__PURE__*/ jsx(IconButton, {
+                            type: 'reset',
+                            className: styles.clearButton,
+                            size: 'extraSmall',
+                            svgPath: CancelSVGpath,
+                            title: formsT('searchfield.ClearButtonTitle'),
+                            onClick: (event)=>{
+                                onClear?.(event);
+                                setShowClearButton(false);
+                                inputRef.current?.focus();
+                            }
+                        }),
+                        /*#__PURE__*/ jsx(Icon, {
+                            svgPath: FilterSVGpath,
+                            className: styles.filterIcon
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+});
+RolePickerFilterInput.displayName = 'RolePickerFilterInput';
+
+export { RolePickerFilterInput };

package/RolePickerFilterInput/styles.css

@@ -0,0 +1 @@
+html:has(dialog[open]){overflow:hidden}.RolePickerFilterInput-module_searchContainer__o-Vzy{display:flex;flex-direction:column;gap:var(--spacing-s);position:relative}.RolePickerFilterInput-module_topContainer__yFxDA{--input-padding:var(--spacing-xs) calc(var(--spacing-m)*2 + var(--size-medium) + 2px) var(--spacing-xs) var(--spacing-s)}.RolePickerFilterInput-module_label__lgvnq{color:var(--palette-graphite-100);font-size:var(--font-size-m);font-weight:var(--font-weight-regular);line-height:var(--semantic-line-height-input);overflow-wrap:anywhere}.RolePickerFilterInput-module_clearButton__etHYm{position:absolute;right:var(--spacing-xl);top:5px;z-index:10}.RolePickerFilterInput-module_filterIcon__v--p8{fill:var(--palette-graphite-50);position:absolute;right:var(--spacing-s);top:5px;z-index:10}.RolePickerFilterInput-module_inputWrapper__wGC-J{flex-grow:1;position:relative}.RolePickerFilterInput-module_input__eShOX{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--semantic-page-background);border:none;border-radius:0;box-shadow:inset 0 0 0 1px var(--palette-graphite-100);color:var(--semantic-page-foreground);font-size:var(--font-size-m);line-height:var(--semantic-line-height-input);outline:none;outline-offset:0;padding:var(--input-padding);position:relative;width:100%}.RolePickerFilterInput-module_input__eShOX::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.RolePickerFilterInput-module_input__eShOX::-moz-placeholder{color:var(--palette-graphite-50)}.RolePickerFilterInput-module_input__eShOX::placeholder{color:var(--palette-graphite-50)}.RolePickerFilterInput-module_input__eShOX:hover{box-shadow:inset 0 0 0 2px var(--semantic-interactive-main);outline:2px solid var(--semantic-interactive-background);z-index:1}.RolePickerFilterInput-module_input__eShOX:enabled:active,.RolePickerFilterInput-module_input__eShOX:enabled:focus,.RolePickerFilterInput-module_input__eShOX:has(~div :focus-within){box-shadow:inset 0 0 0 2px var(--semantic-interactive-main);outline:1px solid var(--semantic-interactive-main);z-index:1}.RolePickerFilterInput-module_input__eShOX:enabled:active::-moz-selection,.RolePickerFilterInput-module_input__eShOX:enabled:focus::-moz-selection,.RolePickerFilterInput-module_input__eShOX:has(~div :focus-within)::-moz-selection{background:var(--semantic-interactive-background)}.RolePickerFilterInput-module_input__eShOX:enabled:active::selection,.RolePickerFilterInput-module_input__eShOX:enabled:focus::selection,.RolePickerFilterInput-module_input__eShOX:has(~div :focus-within)::selection{background:var(--semantic-interactive-background)}.RolePickerFilterInput-module_srOnly__CFhaY{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/RolePickerPeopleList/index.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/RolePickerPeopleList/RolePickerPeopleList";

package/RolePickerPeopleList/index.esm.js

@@ -0,0 +1,96 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useContext, useRef, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@skatteetaten/ds-buttons';
+import { dsI18n } from '@skatteetaten/ds-core-utils';
+import { PersonSVGpath } from '@skatteetaten/ds-icons';
+import { Heading } from '@skatteetaten/ds-typography';
+import { RolePickerContext } from '../RolePickerContext/index.esm.js';
+import { RolePickerRow } from '../RolePickerRow/index.esm.js';
+import '@skatteetaten/ds-navigation';
+import '@skatteetaten/ds-status';
+import './styles.css';
+
+
+var styles = {
+    "peopleList": "RolePickerPeopleList-module_peopleList__dEumR",
+    "showAllButtonWrapper": "RolePickerPeopleList-module_showAllButtonWrapper__-ErxO"
+};
+
+const MAX_INIITAL_ITEMS = 5;
+const RolePickerPeopleList = ({ people, filterQuery })=>{
+    const { t } = useTranslation('ds_overlays', {
+        i18n: dsI18n
+    });
+    const [showAll, setShowAll] = useState(false);
+    const ctx = useContext(RolePickerContext);
+    const navRef = useRef(null);
+    const handleShowAll = ()=>{
+        setShowAll(true);
+        navRef.current?.querySelectorAll('a')[MAX_INIITAL_ITEMS - 1].focus();
+    };
+    const handleEntityClicked = async (entity)=>{
+        ctx?.setLoadingEntityId(entity.personId);
+        ctx?.onEntitySelect?.(entity).then((res)=>{
+            if (res?.error) {
+                ctx?.setError({
+                    entityId: entity.personId,
+                    message: res.error
+                });
+            }
+            ctx.setLoadingEntityId(undefined);
+        });
+    };
+    const visibleItems = useMemo(()=>{
+        if (filterQuery) {
+            return people.list.filter((f)=>f.name.toLowerCase().includes(filterQuery.toLowerCase()) || f.personId.includes(filterQuery.toLowerCase()));
+        }
+        if (showAll) {
+            return people.list;
+        }
+        return people.list.slice(0, MAX_INIITAL_ITEMS);
+    }, [
+        filterQuery,
+        showAll,
+        people.list
+    ]);
+    const displayShowAllButton = !showAll && !filterQuery && people.total > MAX_INIITAL_ITEMS;
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(Heading, {
+                as: 'h2',
+                level: 3,
+                id: 'otherPeopleHeadingId',
+                children: filterQuery ? `${visibleItems.length} ${t('rolepicker.PeopleHits')}` : t('rolepicker.PeopleHeading')
+            }),
+            /*#__PURE__*/ jsx("nav", {
+                ref: navRef,
+                "aria-labelledby": 'otherPeopleHeadingId',
+                children: /*#__PURE__*/ jsx("ul", {
+                    className: styles.peopleList,
+                    children: visibleItems.map((item)=>{
+                        return /*#__PURE__*/ jsx("li", {
+                            children: /*#__PURE__*/ jsx(RolePickerRow, {
+                                id: item.personId,
+                                title: item.name,
+                                description: `${t('rolepicker.PeopleDescriptionPrefix')} ${item.personId}`,
+                                svgPath: PersonSVGpath,
+                                onClick: ()=>handleEntityClicked(item)
+                            })
+                        }, item.personId);
+                    })
+                })
+            }),
+            displayShowAllButton ? /*#__PURE__*/ jsx("div", {
+                className: styles.showAllButtonWrapper,
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: 'tertiary',
+                    onClick: handleShowAll,
+                    children: `${t('rolepicker.ShowAll')} ${t('rolepicker.People')} (${people.total})`
+                })
+            }) : null
+        ]
+    });
+};
+
+export { RolePickerPeopleList };

package/RolePickerPeopleList/styles.css

@@ -0,0 +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}

package/RolePickerRow/index.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/RolePickerRow/RolePickerRow";

package/RolePickerRow/index.esm.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { NavigationTile } from '@skatteetaten/ds-navigation';
+import { Alert } from '@skatteetaten/ds-status';
+import { RolePickerContext } from '../RolePickerContext/index.esm.js';
+import './styles.css';
+
+
+var styles = {
+    "withAlert": "RolePickerRow-module_withAlert__DxPmf"
+};
+
+function RolePickerRow({ id, title, description, svgPath, titleAs, onClick }) {
+    const ctx = useContext(RolePickerContext);
+    const hasError = ctx?.error?.entityId === id;
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(NavigationTile, {
+                href: '#',
+                className: `${hasError ? styles.withAlert : ''}`,
+                titleAs: titleAs ?? 'h3',
+                title: title,
+                svgPath: svgPath,
+                hasSpinner: ctx?.loadingEntityId === id,
+                size: 'medium',
+                description: description,
+                onClick: async (e)=>{
+                    e.preventDefault();
+                    onClick?.(e);
+                }
+            }),
+            /*#__PURE__*/ jsx(Alert, {
+                variant: 'neutral',
+                showAlert: hasError,
+                onClose: ()=>ctx?.setError(undefined),
+                children: ctx?.error?.message
+            })
+        ]
+    });
+}
+RolePickerRow.displayName = 'RolePickerRow';
+
+export { RolePickerRow };

package/RolePickerRow/styles.css

@@ -0,0 +1 @@
+.RolePickerRow-module_withAlert__DxPmf{box-shadow:none}

package/index.esm.js

@@ -1,6 +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 { g as getPopoverColorDefault, a as getPopoverPositionDefault, b as getPopoverRestoreFocusDefault } from './PopoverContent.esm.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -11,6 +12,14 @@ import '@skatteetaten/ds-typography';
 import '@floating-ui/react';
 import './PopoverContext/index.esm.js';
 import './PopoverTrigger/index.esm.js';
+import './RolePickerBusinessList/index.esm.js';
+import '@skatteetaten/ds-forms';
+import './RolePickerContext/index.esm.js';
+import './RolePickerRow/index.esm.js';
+import '@skatteetaten/ds-navigation';
+import '@skatteetaten/ds-status';
+import './RolePickerFilterInput/index.esm.js';
+import './RolePickerPeopleList/index.esm.js';
 
 const modalPaddingArr = [
     'none',

package/package.json

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

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

@@ -1,5 +1,6 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } 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"];
@@ -29,6 +30,12 @@ export interface ModalProps extends BaseProps {
     imageSource?: string;
     /** Alt tekst til illustrasjonsbilde. Hvis bildet er meningsbærende, legg på alt tekst. */
     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.
+     */
     shadowRootNode?: Document | ShadowRoot;
     /** Callback når modalen lukkes */
     onClose?: () => void;

package/src/RolePicker/RolePicker.d.ts

@@ -0,0 +1,4 @@
+import { getRolePickerHideCloseButtonDefault, 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, };

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

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '@skatteetaten/ds-core-utils';
+import { ModalProps } from '../Modal/Modal.types';
+export type Paginated<T> = {
+    total: number;
+    list: T[];
+};
+export type Entity = {
+    name: string;
+    isDeleted?: boolean;
+    type: string;
+};
+export interface Person extends Entity {
+    personId: string;
+}
+export interface Business extends Entity {
+    organizationNumber: string;
+    unitType: string;
+    subunits?: Business[];
+    mainOrganizationNumber?: string | null;
+}
+export type OnEntitySelectHandler = (entity: Entity) => Promise<{
+    error: string;
+} | void>;
+export interface RolePickerProps extends BaseProps, Partial<Pick<ModalProps, 'dismissOnEsc' | 'dismissOnOutsideClick' | 'hideCloseButton' | 'onClose'>> {
+    /** Egendefinert tittel på modal. */
+    title?: string;
+    /** Den nåværende brukeren representert som et Person-objekt. */
+    me?: Person;
+    /** En paginert liste over personer. */
+    people?: Paginated<Person>;
+    /** En paginert liste over virksomheter. */
+    businesses?: Paginated<Business>;
+    /** Om avviklede virksomheter skal vises. */
+    showInactiveBusinesses?: boolean;
+    /** Om underenheter av virksomheter skal vises. */
+    showSubunits?: boolean;
+    /** Tilbakekallingsfunksjon for å håndtere valg av virksomhet/person. */
+    onEntitySelect?: OnEntitySelectHandler;
+    /** Tilbakekallingsfunksjon for å håndtere utlogging. */
+    onLogout?: () => void;
+    /** Eventuelt annet innhold som rendres etter listen med roller. */
+    children?: ReactNode;
+}
+export type RolePickerContextProps = {
+    onEntitySelect?: OnEntitySelectHandler;
+    error?: {
+        entityId: string;
+        message: string;
+    };
+    setError: (error?: {
+        entityId: string;
+        message: string;
+    }) => void;
+    loadingEntityId?: string;
+    setLoadingEntityId: (entityId?: string) => void;
+};

package/src/RolePicker/defaults.d.ts

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

package/src/RolePickerBusinessList/RolePickerBusinessList.d.ts

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

package/src/RolePickerBusinessList/RolePickerBusinessList.types.d.ts

@@ -0,0 +1,7 @@
+import { Business, Paginated } from '../RolePicker/RolePicker.types';
+export type RolePickerBusinessListProps = {
+    filterQuery?: string;
+    businesses: Paginated<Business>;
+    showInactiveBusinesses?: boolean;
+    showSubunits?: boolean;
+};

package/src/RolePickerContext/RolePickerContext.d.ts

@@ -0,0 +1,2 @@
+import { RolePickerContextProps } from '../RolePicker/RolePicker.types';
+export declare const RolePickerContext: import("react").Context<RolePickerContextProps | null>;

package/src/RolePickerFilterInput/RolePickerFilterInput.d.ts

@@ -0,0 +1,2 @@
+import { RolePickerFilterInputProps } from './RolePickerFilterInput.types';
+export declare const RolePickerFilterInput: import("react").ForwardRefExoticComponent<RolePickerFilterInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/RolePickerFilterInput/RolePickerFilterInput.types.d.ts

@@ -0,0 +1,7 @@
+import { ChangeEventHandler, MouseEventHandler } from 'react';
+export type RolePickerFilterInputProps = {
+    label: string;
+    value: string;
+    onClear?: MouseEventHandler<HTMLButtonElement>;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+};

package/src/RolePickerPeopleList/RolePickerPeopleList.d.ts

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

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

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

package/src/RolePickerRow/RolePickerRow.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { RolePickerRowProps } from './RolePickerRow.types';
+export declare function RolePickerRow({ id, title, description, svgPath, titleAs, onClick, }: RolePickerRowProps): JSX.Element;
+export declare namespace RolePickerRow {
+    var displayName: string;
+}

package/src/RolePickerRow/RolePickerRow.types.d.ts

@@ -0,0 +1,4 @@
+import { NavigationTileProps } from '@skatteetaten/ds-navigation';
+export interface RolePickerRowProps extends Pick<NavigationTileProps, 'title' | 'description' | 'svgPath' | 'titleAs' | 'onClick'> {
+    id: string;
+}

package/src/index.d.ts

@@ -2,3 +2,5 @@ export * from './Modal/Modal';
 export * from './Modal/Modal.types';
 export * from './Popover/Popover';
 export * from './Popover/Popover.types';
+export * from './RolePicker/RolePicker';
+export * from './RolePicker/RolePicker.types';