@skatteetaten/ds-overlays 2.3.2 → 2.4.0

package/Modal/Modal.module.scss.esm.js

@@ -4,12 +4,7 @@ var styles = {
     "modalHeading": "Modal-module_modalHeading__uwT1R",
     "modalHeadingNoPadding": "Modal-module_modalHeadingNoPadding__t2hkH",
     "modalIllustration": "Modal-module_modalIllustration__jbA32",
-    "modalPaddingNONE": "Modal-module_modalPaddingNONE__02HaX",
-    "modalPaddingS": "Modal-module_modalPaddingS__O93ax",
-    "modalPaddingM": "Modal-module_modalPaddingM__c5Wi2",
-    "modalPaddingL": "Modal-module_modalPaddingL__IbVyg",
-    "modalPaddingMEGA": "Modal-module_modalPaddingMEGA__wWHwS",
-    "modalNoPaddingTop": "Modal-module_modalNoPaddingTop__REBWr",
+    "modalContent": "Modal-module_modalContent__bSZMh",
     "closeButton": "Modal-module_closeButton__jgbDq",
     "srOnly": "Modal-module_srOnly__W8dQv"
 };

package/Modal/index.esm.js

@@ -5,7 +5,7 @@ import { IconButton } from '@skatteetaten/ds-buttons';
 import { dsI18n, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
 import { CancelSVGpath } from '@skatteetaten/ds-icons';
 import { Heading } from '@skatteetaten/ds-typography';
-import { getModalDismissOnEscDefault, getModalPaddingDefault, getModalVariantDefault, getModalDismissOnOutsideClickDefault } from './defaults.esm.js';
+import { getModalDismissOnEscDefault, getModalVariantDefault, getModalPaddingDefault, getModalDismissOnOutsideClickDefault } from './defaults.esm.js';
 import styles from './Modal.module.scss.esm.js';
 import './styles.css';
 
@@ -113,8 +113,6 @@ const Modal = ({ ref, id, className = getCommonClassNameDefault(), classNames, l
         }
     };
     const hideTitleClassName = hideTitle ? styles.srOnly : '';
-    const paddingClassName = styles[`modalPadding${padding.toUpperCase()}`];
-    const noPaddingTop = imageSource ? styles.modalNoPaddingTop : '';
     const headingNoPaddingClassName = padding === 'mega' ? styles.modalHeadingNoPadding : '';
     return /*#__PURE__*/ jsx("dialog", {
         ref: modalRef,
@@ -157,7 +155,9 @@ const Modal = ({ ref, id, className = getCommonClassNameDefault(), classNames, l
                     className: `${styles.modalIllustration} ${classNames?.image ?? ''}`.trim()
                 }),
                 /*#__PURE__*/ jsxs("div", {
-                    className: `${paddingClassName} ${noPaddingTop}`.trim(),
+                    className: styles.modalContent,
+                    "data-padding": padding,
+                    "data-no-padding-top": imageSource ? 'true' : undefined,
                     children: [
                         renderIcon && /*#__PURE__*/ jsx("div", {
                             children: renderIcon?.()

package/Modal/styles.css

@@ -1 +1 @@
-html:has(dialog[open]){overflow:hidden}.Modal-module_modal__Kyr-Y{--ds-modal-footer-height:0px;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(100dvh - 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;padding-bottom:calc(env(safe-area-inset-bottom, 0px) + var(--ds-modal-footer-height));position:fixed}@supports not (height:100dvh){.Modal-module_modal__Kyr-Y{max-height:calc(100vh - var(--spacing-m)*2)}}.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}
+html:has(dialog[open]){overflow:hidden}.Modal-module_modal__Kyr-Y{--ds-modal-footer-height:0px;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(100dvh - 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;padding-bottom:calc(env(safe-area-inset-bottom, 0px) + var(--ds-modal-footer-height));position:fixed}@supports not (height:100dvh){.Modal-module_modal__Kyr-Y{max-height:calc(100vh - var(--spacing-m)*2)}}.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_modalContent__bSZMh[data-padding=none]{padding:0}.Modal-module_modalContent__bSZMh[data-padding=s]{padding:calc(var(--spacing-s) - .25rem)}.Modal-module_modalContent__bSZMh[data-padding=m]{padding:calc(var(--spacing-m) - .25rem)}.Modal-module_modalContent__bSZMh[data-padding=l]{padding:calc(var(--spacing-l) - .25rem)}.Modal-module_modalContent__bSZMh[data-padding=mega]{padding:calc(var(--spacing-mega) - .25rem)}.Modal-module_modalContent__bSZMh[data-no-padding-top=true]{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/RolePickerFilterInput/styles.css

@@ -1 +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}
+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-visible,.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-visible::-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-visible::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/WordInfo/index.esm.js

@@ -1,5 +1,4 @@
 import { jsx } from 'react/jsx-runtime';
-export { getWordInfoHasIconDefault } from './defaults.esm.js';
 import { Popover } from '../Popover/index.esm.js';
 import { WordInfoContent } from '../WordInfoContent/index.esm.js';
 import { WordInfoTrigger } from '../WordInfoTrigger/index.esm.js';

package/index.esm.js

@@ -1,10 +1,9 @@
 export { Modal } from './Modal/index.esm.js';
-export { modalPaddingArr, modalVariantArr } from './Modal/Modal.types.esm.js';
 export { Popover } from './Popover/index.esm.js';
 export { popoverColorArr } from './Popover/Popover.types.esm.js';
 export { RolePicker } from './RolePicker/index.esm.js';
 export { WordInfo } from './WordInfo/index.esm.js';
+export { getWordInfoHasIconDefault } from './WordInfo/defaults.esm.js';
 export { getModalDismissOnEscDefault, getModalDismissOnOutsideClickDefault, getModalPaddingDefault, getModalVariantDefault } from './Modal/defaults.esm.js';
 export { getPopoverColorDefault, getPopoverContentAsDefault, getPopoverPositionDefault, getPopoverRestoreFocusDefault } from './Popover/defaults.esm.js';
 export { getRolePickerHideCloseButtonDefault, getRolePickerMinimumEntitiesForSearchDefault, getRolePickerShowDeceasedPeopleDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault } from './RolePicker/defaults.esm.js';
-export { getWordInfoHasIconDefault } from './WordInfo/defaults.esm.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@skatteetaten/ds-overlays",
   "groupId": "no.skatteetaten.aurora",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "main": "./index.esm.js",
   "type": "module",
   "module": "./index.esm.js",
@@ -16,17 +16,18 @@
     "i18next": "^24 || ^25",
     "react": "^19 ",
     "react-i18next": "^15",
-    "@skatteetaten/ds-core-utils": "2.3.2",
-    "@skatteetaten/ds-buttons": "2.3.2",
-    "@skatteetaten/ds-forms": "2.3.2",
-    "@skatteetaten/ds-icons": "2.3.2",
-    "@skatteetaten/ds-navigation": "2.3.2",
-    "@skatteetaten/ds-typography": "2.3.2",
-    "@skatteetaten/ds-progress": "2.3.2",
-    "@skatteetaten/ds-status": "2.3.2",
+    "@skatteetaten/ds-core-utils": "2.4.0",
+    "@skatteetaten/ds-buttons": "2.4.0",
+    "@skatteetaten/ds-forms": "2.4.0",
+    "@skatteetaten/ds-icons": "2.4.0",
+    "@skatteetaten/ds-navigation": "2.4.0",
+    "@skatteetaten/ds-typography": "2.4.0",
+    "@skatteetaten/ds-progress": "2.4.0",
+    "@skatteetaten/ds-status": "2.4.0",
     "date-fns": "^4",
-    "@skatteetaten/ds-content": "2.3.2",
-    "@floating-ui/react": "0.26.28"
+    "@skatteetaten/ds-content": "2.4.0",
+    "@floating-ui/react": "0.26.28",
+    "@skatteetaten/ds-collections": "2.4.0"
   },
   "dependencies": {},
   "scripts": {}

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

@@ -1,10 +1,8 @@
 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"];
-export type ModalVariant = (typeof modalVariantArr)[number];
+export type ModalPadding = 'none' | 's' | 'm' | 'l' | 'mega';
+export type ModalVariant = 'outline' | 'plain';
 export interface ModalProps extends BaseProps {
     ref?: Ref<HTMLDialogElement>;
     classNames?: {

package/src/WordInfo/WordInfo.d.ts

@@ -1,4 +1,2 @@
-import { getWordInfoHasIconDefault } from './defaults';
 import { WordInfoComponent } from './WordInfo.types';
 export declare const WordInfo: WordInfoComponent;
-export { getWordInfoHasIconDefault };

package/src/index.d.ts

@@ -6,3 +6,4 @@ export * from './RolePicker/RolePicker';
 export * from './RolePicker/RolePicker.types';
 export * from './WordInfo/WordInfo';
 export * from './WordInfo/WordInfo.types';
+export * from './WordInfo/defaults';

package/Modal/Modal.types.esm.js

@@ -1,13 +0,0 @@
-const modalPaddingArr = [
-    'none',
-    's',
-    'm',
-    'l',
-    'mega'
-];
-const modalVariantArr = [
-    'outline',
-    'plain'
-];
-
-export { modalPaddingArr, modalVariantArr };