@skatteetaten/ds-overlays 2.8.1 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Modal/index.esm.js +1 -1
- package/Popover/PopoverContent/PopoverContent.css +1 -1
- package/Popover/PopoverContent/PopoverContent.module.css +1 -1
- package/Popover/PopoverTrigger/PopoverTrigger.esm.js +2 -2
- package/Popover/index.esm.js +3 -2
- package/RolePicker/RolePickerFilterInput/RolePickerFilterInput.css +1 -1
- package/RolePicker/RolePickerFilterInput/RolePickerFilterInput.module.css +1 -1
- package/RolePicker/index.esm.js +2 -2
- package/package.json +11 -11
- package/src/Popover/PopoverTrigger/PopoverTrigger.d.ts +1 -1
- package/src/Popover/PopoverTrigger/PopoverTrigger.types.d.ts +2 -0
- package/src/RolePicker/RolePicker.types.d.ts +2 -2
package/Modal/index.esm.js
CHANGED
|
@@ -5,7 +5,7 @@ import { IconButton } from '@skatteetaten/ds-buttons';
|
|
|
5
5
|
import { dsI18n, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
|
|
6
6
|
import { CancelSVGpath } from '@skatteetaten/ds-icons';
|
|
7
7
|
import { Heading } from '@skatteetaten/ds-typography';
|
|
8
|
-
import { getModalDismissOnEscDefault,
|
|
8
|
+
import { getModalDismissOnEscDefault, getModalDismissOnOutsideClickDefault, getModalPaddingDefault, getModalVariantDefault } from './defaults.esm.js';
|
|
9
9
|
import styles from './Modal.module.scss.esm.js';
|
|
10
10
|
|
|
11
11
|
import './Modal.css';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.PopoverContent-module_popover__p0BhU{--popover-max-height: 560px;z-index:50;width
|
|
1
|
+
.PopoverContent-module_popover__p0BhU{--popover-max-height: 560px;z-index:50;width:fit-content;max-width:var(--container-s);border:1px solid var(--border-color);background-color:var(--background-color)}.PopoverContent-module_popover_forest__HD4fi{--background-color: var(--semantic-success-background);--border-color: var(--semantic-success-foreground)}.PopoverContent-module_popover_ochre__KKnbi{--background-color: var(--semantic-warning-background);--border-color: var(--semantic-warning-foreground)}.PopoverContent-module_popover_white__TaNXR{--background-color: var(--palette-graphite-0);--border-color: var(--palette-graphite-100)}.PopoverContent-module_popoverContent__q0qTL{display:flex;max-height:var(--popover-max-height);overflow-y:auto}.PopoverContent-module_popoverContentWrapper__-lefQ{flex-grow:1;padding:var(--spacing-s) 0 var(--spacing-s) var(--spacing-s);margin:0}@media(min-width: 480px){.PopoverContent-module_popoverContentWrapper__-lefQ{padding:var(--spacing-m) 0 var(--spacing-m) var(--spacing-m)}}.PopoverContent-module_popoverContentCloseButton__ryJUt{align-self:start;margin:var(--spacing-s) var(--spacing-s) 0 0;--icon-button-icon-color: var(--palette-graphite-100)}.PopoverContent-module_popoverContentCloseButton__ryJUt:active{--icon-button-icon-color: var(--palette-graphite-0)}.PopoverContent-module_popoverArrow__t-CMj{position:absolute;z-index:-1;width:var(--size-large);height:var(--size-large);border:1px solid var(--border-color);background-color:var(--background-color);transform:rotate(45deg)}.PopoverContent-module_popoverArrow_top__pDZp9{border-top-color:rgba(0,0,0,0);border-left-color:rgba(0,0,0,0)}.PopoverContent-module_popoverArrow_bottom__PG8BL{border-right-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,0)}.PopoverContent-module_popoverArrow_left__92grH{border-bottom-color:rgba(0,0,0,0);border-left-color:rgba(0,0,0,0)}.PopoverContent-module_popoverArrow_right__-NMZe{border-top-color:rgba(0,0,0,0);border-right-color:rgba(0,0,0,0)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.PopoverContent-module_popover__p0BhU{--popover-max-height: 560px;z-index:50;width
|
|
1
|
+
.PopoverContent-module_popover__p0BhU{--popover-max-height: 560px;z-index:50;width:fit-content;max-width:var(--container-s);border:1px solid var(--border-color);background-color:var(--background-color)}.PopoverContent-module_popover_forest__HD4fi{--background-color: var(--semantic-success-background);--border-color: var(--semantic-success-foreground)}.PopoverContent-module_popover_ochre__KKnbi{--background-color: var(--semantic-warning-background);--border-color: var(--semantic-warning-foreground)}.PopoverContent-module_popover_white__TaNXR{--background-color: var(--palette-graphite-0);--border-color: var(--palette-graphite-100)}.PopoverContent-module_popoverContent__q0qTL{display:flex;max-height:var(--popover-max-height);overflow-y:auto}.PopoverContent-module_popoverContentWrapper__-lefQ{flex-grow:1;padding:var(--spacing-s) 0 var(--spacing-s) var(--spacing-s);margin:0}@media(min-width: 480px){.PopoverContent-module_popoverContentWrapper__-lefQ{padding:var(--spacing-m) 0 var(--spacing-m) var(--spacing-m)}}.PopoverContent-module_popoverContentCloseButton__ryJUt{align-self:start;margin:var(--spacing-s) var(--spacing-s) 0 0;--icon-button-icon-color: var(--palette-graphite-100)}.PopoverContent-module_popoverContentCloseButton__ryJUt:active{--icon-button-icon-color: var(--palette-graphite-0)}.PopoverContent-module_popoverArrow__t-CMj{position:absolute;z-index:-1;width:var(--size-large);height:var(--size-large);border:1px solid var(--border-color);background-color:var(--background-color);transform:rotate(45deg)}.PopoverContent-module_popoverArrow_top__pDZp9{border-top-color:rgba(0,0,0,0);border-left-color:rgba(0,0,0,0)}.PopoverContent-module_popoverArrow_bottom__PG8BL{border-right-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,0)}.PopoverContent-module_popoverArrow_left__92grH{border-bottom-color:rgba(0,0,0,0);border-left-color:rgba(0,0,0,0)}.PopoverContent-module_popoverArrow_right__-NMZe{border-top-color:rgba(0,0,0,0);border-right-color:rgba(0,0,0,0)}
|
|
@@ -7,7 +7,7 @@ import { dsI18n } from '@skatteetaten/ds-core-utils';
|
|
|
7
7
|
import { HelpSimpleSVGpath } from '@skatteetaten/ds-icons';
|
|
8
8
|
import { PopoverContext } from '../PopoverContext.esm.js';
|
|
9
9
|
|
|
10
|
-
const PopoverTrigger = ({ ref, id, className, lang, 'data-testid': dataTestId, title, ariaDescribedby, size, svgPath, onClick, onBlur, onFocus })=>{
|
|
10
|
+
const PopoverTrigger = ({ ref, id, className, lang, 'data-testid': dataTestId, title, ariaDescribedby, size, svgPath, hideOutline, onClick, onBlur, onFocus })=>{
|
|
11
11
|
const { t } = useTranslation('Shared', {
|
|
12
12
|
i18n: dsI18n
|
|
13
13
|
});
|
|
@@ -29,7 +29,7 @@ const PopoverTrigger = ({ ref, id, className, lang, 'data-testid': dataTestId, t
|
|
|
29
29
|
size: size,
|
|
30
30
|
ariaDescribedby: ariaDescribedby,
|
|
31
31
|
ariaExpanded: isOpen,
|
|
32
|
-
isOutlined:
|
|
32
|
+
isOutlined: !hideOutline,
|
|
33
33
|
onClick: (event)=>{
|
|
34
34
|
onClick?.(event);
|
|
35
35
|
setIsOpen(!isOpen);
|
package/Popover/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useRef, useState, useEffect, useMemo } from 'react';
|
|
3
|
-
import { useFloating, offset, flip, shift, arrow,
|
|
3
|
+
import { useFloating, autoUpdate, offset, flip, shift, arrow, useDismiss, useInteractions } from '@floating-ui/react';
|
|
4
4
|
import { useMediaQuery } from '@skatteetaten/ds-core-utils';
|
|
5
5
|
import { getPopoverPositionDefault } from './defaults.esm.js';
|
|
6
6
|
export { getPopoverColorDefault, getPopoverContentAsDefault, getPopoverRestoreFocusDefault } from './defaults.esm.js';
|
|
@@ -31,6 +31,7 @@ import { PopoverTrigger } from './PopoverTrigger/PopoverTrigger.esm.js';
|
|
|
31
31
|
onClose?.();
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
|
+
strategy: 'fixed',
|
|
34
35
|
placement: kebabize(position),
|
|
35
36
|
whileElementsMounted: autoUpdate,
|
|
36
37
|
middleware: [
|
|
@@ -47,7 +48,7 @@ import { PopoverTrigger } from './PopoverTrigger/PopoverTrigger.esm.js';
|
|
|
47
48
|
});
|
|
48
49
|
const dismiss = useDismiss(floatingData.context, {
|
|
49
50
|
enabled: shouldAutoDismiss,
|
|
50
|
-
ancestorScroll:
|
|
51
|
+
ancestorScroll: false
|
|
51
52
|
});
|
|
52
53
|
const interactions = useInteractions([
|
|
53
54
|
dismiss
|
|
@@ -1 +1 @@
|
|
|
1
|
-
html:has(dialog[open]){overflow:hidden}.RolePickerFilterInput-module_searchContainer__03i0C{position:relative;display:flex;flex-direction:column;gap:var(--spacing-s)}.RolePickerFilterInput-module_topContainer__Gp2XP{--input-padding: var(--spacing-xs) calc(2 * var(--spacing-m) + var(--size-medium) + 2px) var(--spacing-xs) var(--spacing-s)}.RolePickerFilterInput-module_label__tz82y{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__aYK-n{position:absolute;z-index:10;top:5px;right:var(--spacing-xl)}.RolePickerFilterInput-module_filterIcon__Nc4Kq{position:absolute;z-index:10;top:5px;right:var(--spacing-s);fill:var(--palette-graphite-50)}.RolePickerFilterInput-module_inputWrapper__mYpsO{position:relative;flex-grow:1}.RolePickerFilterInput-module_input__GgGK1{position:relative;width:100%;padding:var(--input-padding);border:none;border-radius:0
|
|
1
|
+
html:has(dialog[open]){overflow:hidden}.RolePickerFilterInput-module_searchContainer__03i0C{position:relative;display:flex;flex-direction:column;gap:var(--spacing-s)}.RolePickerFilterInput-module_topContainer__Gp2XP{--input-padding: var(--spacing-xs) calc(2 * var(--spacing-m) + var(--size-medium) + 2px) var(--spacing-xs) var(--spacing-s)}.RolePickerFilterInput-module_label__tz82y{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__aYK-n{position:absolute;z-index:10;top:5px;right:var(--spacing-xl)}.RolePickerFilterInput-module_filterIcon__Nc4Kq{position:absolute;z-index:10;top:5px;right:var(--spacing-s);fill:var(--palette-graphite-50)}.RolePickerFilterInput-module_inputWrapper__mYpsO{position:relative;flex-grow:1}.RolePickerFilterInput-module_input__GgGK1{position:relative;width:100%;padding:var(--input-padding);border:none;border-radius:0;appearance:none;background:var(--semantic-page-background);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}.RolePickerFilterInput-module_input__GgGK1::-webkit-search-cancel-button{appearance:none}.RolePickerFilterInput-module_input__GgGK1::placeholder{color:var(--palette-graphite-50)}.RolePickerFilterInput-module_input__GgGK1:hover{z-index:1;box-shadow:inset 0 0 0 2px var(--semantic-interactive-main);outline:2px solid var(--semantic-interactive-background)}.RolePickerFilterInput-module_input__GgGK1:has(~div :focus-within),.RolePickerFilterInput-module_input__GgGK1:enabled:focus-visible,.RolePickerFilterInput-module_input__GgGK1:enabled:active{z-index:1;box-shadow:inset 0 0 0 2px var(--semantic-interactive-main);outline:1px solid var(--semantic-interactive-main)}.RolePickerFilterInput-module_input__GgGK1:has(~div :focus-within)::selection,.RolePickerFilterInput-module_input__GgGK1:enabled:focus-visible::selection,.RolePickerFilterInput-module_input__GgGK1:enabled:active::selection{background:var(--semantic-interactive-background)}.RolePickerFilterInput-module_srOnly__9NWBD{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0, 0, 0, 0);white-space:nowrap}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
html:has(dialog[open]){overflow:hidden}.RolePickerFilterInput-module_searchContainer__03i0C{position:relative;display:flex;flex-direction:column;gap:var(--spacing-s)}.RolePickerFilterInput-module_topContainer__Gp2XP{--input-padding: var(--spacing-xs) calc(2 * var(--spacing-m) + var(--size-medium) + 2px) var(--spacing-xs) var(--spacing-s)}.RolePickerFilterInput-module_label__tz82y{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__aYK-n{position:absolute;z-index:10;top:5px;right:var(--spacing-xl)}.RolePickerFilterInput-module_filterIcon__Nc4Kq{position:absolute;z-index:10;top:5px;right:var(--spacing-s);fill:var(--palette-graphite-50)}.RolePickerFilterInput-module_inputWrapper__mYpsO{position:relative;flex-grow:1}.RolePickerFilterInput-module_input__GgGK1{position:relative;width:100%;padding:var(--input-padding);border:none;border-radius:0
|
|
1
|
+
html:has(dialog[open]){overflow:hidden}.RolePickerFilterInput-module_searchContainer__03i0C{position:relative;display:flex;flex-direction:column;gap:var(--spacing-s)}.RolePickerFilterInput-module_topContainer__Gp2XP{--input-padding: var(--spacing-xs) calc(2 * var(--spacing-m) + var(--size-medium) + 2px) var(--spacing-xs) var(--spacing-s)}.RolePickerFilterInput-module_label__tz82y{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__aYK-n{position:absolute;z-index:10;top:5px;right:var(--spacing-xl)}.RolePickerFilterInput-module_filterIcon__Nc4Kq{position:absolute;z-index:10;top:5px;right:var(--spacing-s);fill:var(--palette-graphite-50)}.RolePickerFilterInput-module_inputWrapper__mYpsO{position:relative;flex-grow:1}.RolePickerFilterInput-module_input__GgGK1{position:relative;width:100%;padding:var(--input-padding);border:none;border-radius:0;appearance:none;background:var(--semantic-page-background);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}.RolePickerFilterInput-module_input__GgGK1::-webkit-search-cancel-button{appearance:none}.RolePickerFilterInput-module_input__GgGK1::placeholder{color:var(--palette-graphite-50)}.RolePickerFilterInput-module_input__GgGK1:hover{z-index:1;box-shadow:inset 0 0 0 2px var(--semantic-interactive-main);outline:2px solid var(--semantic-interactive-background)}.RolePickerFilterInput-module_input__GgGK1:has(~div :focus-within),.RolePickerFilterInput-module_input__GgGK1:enabled:focus-visible,.RolePickerFilterInput-module_input__GgGK1:enabled:active{z-index:1;box-shadow:inset 0 0 0 2px var(--semantic-interactive-main);outline:1px solid var(--semantic-interactive-main)}.RolePickerFilterInput-module_input__GgGK1:has(~div :focus-within)::selection,.RolePickerFilterInput-module_input__GgGK1:enabled:focus-visible::selection,.RolePickerFilterInput-module_input__GgGK1:enabled:active::selection{background:var(--semantic-interactive-background)}.RolePickerFilterInput-module_srOnly__9NWBD{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0, 0, 0, 0);white-space:nowrap}
|
package/RolePicker/index.esm.js
CHANGED
|
@@ -5,8 +5,8 @@ import { Button } from '@skatteetaten/ds-buttons';
|
|
|
5
5
|
import { dsI18n, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
|
|
6
6
|
import { FavoriteSVGpath, LogOutSVGpath } from '@skatteetaten/ds-icons';
|
|
7
7
|
import { Paragraph } from '@skatteetaten/ds-typography';
|
|
8
|
-
import { getRolePickerHideCloseButtonDefault,
|
|
9
|
-
import {
|
|
8
|
+
import { getRolePickerHideCloseButtonDefault, getRolePickerMinimumEntitiesForSearchDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault, getRolePickerShowDeceasedPeopleDefault } from './defaults.esm.js';
|
|
9
|
+
import { getModalDismissOnEscDefault, getModalDismissOnOutsideClickDefault } from '../Modal/defaults.esm.js';
|
|
10
10
|
import { Modal } from '../Modal/index.esm.js';
|
|
11
11
|
import { RolePickerBusinessList } from './RolePickerBusinessList/RolePickerBusinessList.esm.js';
|
|
12
12
|
import { RolePickerContext } from './RolePickerContext.esm.js';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skatteetaten/ds-overlays",
|
|
3
3
|
"groupId": "no.skatteetaten.aurora",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.9.0",
|
|
5
5
|
"main": "./index.esm.js",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"module": "./index.esm.js",
|
|
@@ -16,18 +16,18 @@
|
|
|
16
16
|
"i18next": "^24 || ^25",
|
|
17
17
|
"react": "^19.2.0",
|
|
18
18
|
"react-i18next": "^15",
|
|
19
|
-
"@skatteetaten/ds-core-utils": "2.
|
|
20
|
-
"@skatteetaten/ds-buttons": "2.
|
|
21
|
-
"@skatteetaten/ds-forms": "2.
|
|
22
|
-
"@skatteetaten/ds-icons": "2.
|
|
23
|
-
"@skatteetaten/ds-navigation": "2.
|
|
24
|
-
"@skatteetaten/ds-typography": "2.
|
|
25
|
-
"@skatteetaten/ds-progress": "2.
|
|
26
|
-
"@skatteetaten/ds-status": "2.
|
|
19
|
+
"@skatteetaten/ds-core-utils": "2.9.0",
|
|
20
|
+
"@skatteetaten/ds-buttons": "2.9.0",
|
|
21
|
+
"@skatteetaten/ds-forms": "2.9.0",
|
|
22
|
+
"@skatteetaten/ds-icons": "2.9.0",
|
|
23
|
+
"@skatteetaten/ds-navigation": "2.9.0",
|
|
24
|
+
"@skatteetaten/ds-typography": "2.9.0",
|
|
25
|
+
"@skatteetaten/ds-progress": "2.9.0",
|
|
26
|
+
"@skatteetaten/ds-status": "2.9.0",
|
|
27
27
|
"date-fns": "^4",
|
|
28
|
-
"@skatteetaten/ds-content": "2.
|
|
28
|
+
"@skatteetaten/ds-content": "2.9.0",
|
|
29
29
|
"@floating-ui/react": "0.26.28",
|
|
30
|
-
"@skatteetaten/ds-collections": "2.
|
|
30
|
+
"@skatteetaten/ds-collections": "2.9.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {},
|
|
33
33
|
"scripts": {}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { JSX } from 'react';
|
|
2
2
|
import { PopoverTriggerProps } from './PopoverTrigger.types';
|
|
3
3
|
export declare const PopoverTrigger: {
|
|
4
|
-
({ ref, id, className, lang, "data-testid": dataTestId, title, ariaDescribedby, size, svgPath, onClick, onBlur, onFocus, }: PopoverTriggerProps): JSX.Element;
|
|
4
|
+
({ ref, id, className, lang, "data-testid": dataTestId, title, ariaDescribedby, size, svgPath, hideOutline, onClick, onBlur, onFocus, }: PopoverTriggerProps): JSX.Element;
|
|
5
5
|
displayName: string;
|
|
6
6
|
};
|
|
@@ -4,6 +4,8 @@ import { BaseProps } from '@skatteetaten/ds-core-utils';
|
|
|
4
4
|
type PropsFromIconButton = Pick<IconButtonProps, 'size' | 'svgPath' | 'title' | 'ariaDescribedby' | 'onClick' | 'onBlur' | 'onFocus'>;
|
|
5
5
|
type PopoverTriggerCommonProps = BaseProps & {
|
|
6
6
|
ref?: Ref<HTMLButtonElement>;
|
|
7
|
+
/** Om rammen til knappen skal skjules */
|
|
8
|
+
hideOutline?: boolean;
|
|
7
9
|
};
|
|
8
10
|
export interface PopoverTriggerProps extends PopoverTriggerCommonProps, Partial<PropsFromIconButton> {
|
|
9
11
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactNode, Ref } from 'react';
|
|
2
2
|
import { BaseProps } from '@skatteetaten/ds-core-utils';
|
|
3
3
|
import { ModalProps } from '../Modal/Modal.types';
|
|
4
4
|
export type Paginated<T> = {
|
|
@@ -24,7 +24,7 @@ export type OnEntitySelectHandler = (entity: Entity) => Promise<{
|
|
|
24
24
|
error: string;
|
|
25
25
|
} | void>;
|
|
26
26
|
export interface RolePickerProps extends BaseProps, Partial<Pick<ModalProps, 'dismissOnEsc' | 'dismissOnOutsideClick' | 'hideCloseButton' | 'onClose'>> {
|
|
27
|
-
ref?:
|
|
27
|
+
ref?: Ref<HTMLDialogElement>;
|
|
28
28
|
/** Egendefinert tittel på modal. */
|
|
29
29
|
title?: string;
|
|
30
30
|
/** Den nåværende brukeren representert som et Person-objekt. */
|