@dnb/eufemia 9.16.3 → 9.18.0

package/es/shared/component-helper.js

@@ -9,12 +9,8 @@ import React from 'react';
 import keycode from 'keycode';
 import whatInput from 'what-input';
 import { registerElement } from './custom-element';
-export { registerElement };
-export const PLATFORM_MAC = 'Mac|iPad|iPhone|iPod';
-export const PLATFORM_WIN = 'Win';
-export const PLATFORM_ANDROID = 'Android';
-export const PLATFORM_LINUX = 'Linux';
-export const PLATFORM_IOS = 'iOS|iPhone|iPad|iPod';
+import { warn, IS_IE11, PLATFORM_MAC, PLATFORM_WIN, PLATFORM_LINUX } from './helpers';
+export { registerElement, warn };
 
 if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test' && typeof window !== 'undefined') {
   window.IS_TEST = true;
@@ -545,11 +541,6 @@ export const isInsideScrollView = (currentElement, returnElement = false) => {
 
   return elem == window ? false : Boolean(elem);
 };
-export const warn = (...e) => {
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof console !== 'undefined' && typeof console.log === 'function') {
-    console.log('Eufemia:', ...e);
-  }
-};
 export const convertJsxToString = (elements, separator = undefined) => {
   if (!Array.isArray(elements)) {
     elements = [elements];
@@ -606,7 +597,7 @@ export class InteractionInvalidation {
   }
 
   activate(targetElement = null) {
-    if (!this.nodesToInvalidate) {
+    if (!this._nodesToInvalidate) {
       this._runInvalidaiton(targetElement);
     }
   }
@@ -614,7 +605,7 @@ export class InteractionInvalidation {
   revert() {
     this._revertInvalidation();
 
-    this.nodesToInvalidate = null;
+    this._nodesToInvalidate = null;
   }
 
   _runInvalidaiton(targetElement) {
@@ -622,66 +613,83 @@ export class InteractionInvalidation {
       return;
     }
 
-    this.nodesToInvalidate = this.getNodesToInvalidate(targetElement);
+    this._nodesToInvalidate = this.getNodesToInvalidate(targetElement);
 
-    if (Array.isArray(this.nodesToInvalidate)) {
-      this.nodesToInvalidate.forEach(node => {
-        try {
-          if (node && typeof node._orig_tabindex === 'undefined' && node.hasAttribute('tabindex')) {
-            node._orig_tabindex = node.getAttribute('tabindex');
-          }
+    for (const node of this._nodesToInvalidate) {
+      if (!node) {
+        continue;
+      }
 
-          if (node && typeof node._orig_ariahidden === 'undefined' && node.hasAttribute('aria-hidden')) {
-            node._orig_ariahidden = node.getAttribute('aria-hidden');
-          }
+      const tabindex = node.getAttribute('tabindex');
+      const ariahidden = node.getAttribute('aria-hidden');
+      const dataset = node.dataset;
+
+      if (tabindex !== null && typeof dataset._tabindex === 'undefined') {
+        node.dataset._tabindex = tabindex;
+      }
 
-          node.setAttribute('tabindex', '-1');
-          node.setAttribute('aria-hidden', 'true');
-        } catch (e) {}
-      });
+      if (ariahidden !== null && typeof dataset._ariahidden === 'undefined') {
+        node.dataset._ariahidden = ariahidden;
+      }
+
+      node.setAttribute('tabindex', '-1');
+      node.setAttribute('aria-hidden', 'true');
     }
   }
 
   _revertInvalidation() {
-    if (!this.nodesToInvalidate) {
+    if (!Array.isArray(this._nodesToInvalidate)) {
       return;
     }
 
-    this.nodesToInvalidate.forEach(node => {
-      try {
-        if (node && typeof node._orig_tabindex !== 'undefined') {
-          node.setAttribute('tabindex', node._orig_tabindex);
-          node._orig_tabindex = null;
-          delete node._orig_tabindex;
-        } else {
-          node.removeAttribute('tabindex');
-        }
+    for (const node of this._nodesToInvalidate) {
+      if (!node) {
+        continue;
+      }
 
-        if (node && typeof node._orig_ariahidden !== 'undefined') {
-          node.setAttribute('aria-hidden', node._orig_ariahidden);
-          node._orig_ariahidden = null;
-          delete node._orig_ariahidden;
-        } else {
-          node.removeAttribute('aria-hidden');
-        }
-      } catch (e) {}
-    });
+      if (typeof node.dataset._tabindex !== 'undefined') {
+        node.setAttribute('tabindex', node.dataset._tabindex);
+        node.dataset._tabindex = null;
+      } else {
+        node.removeAttribute('tabindex');
+      }
+
+      if (typeof node.dataset._ariahidden !== 'undefined') {
+        node.setAttribute('aria-hidden', node.dataset._ariahidden);
+        node.dataset._ariahidden = null;
+      } else {
+        node.removeAttribute('aria-hidden');
+      }
+    }
   }
 
   getNodesToInvalidate(targetElement = null) {
     if (typeof document === 'undefined') {
-      return;
+      return [];
     }
 
     if (typeof targetElement === 'string') {
       targetElement = document.querySelector(targetElement);
     }
 
-    const skipTheseNodes = this.bypassSelectors && this.bypassSelectors.length > 0 ? Array.from((this.bypassElement || document).querySelectorAll(this.bypassSelectors ? this.bypassSelectors.map(s => `${s} *`).join(', ') : '*')) : [];
     const rootSelector = targetElement ? '*' : 'html *';
     const elementSelector = this.bypassSelectors.map(s => `:not(${s})`).join('');
-    const selector = `${rootSelector} ${elementSelector}:not(script):not(style):not(path)`;
-    return Array.from((targetElement || document.documentElement).querySelectorAll(selector)).filter(node => !skipTheseNodes.includes(node));
+    const selector = `${rootSelector} ${elementSelector}:not(script):not(style):not(path):not(head *)`;
+
+    if (IS_IE11 || process.env.NODE_ENV === 'test') {
+      const excludeSelectors = [];
+      const testSelector = selector.split(':').map(localSel => {
+        if (localSel.endsWith(' *)')) {
+          excludeSelectors.push(...Array.from((targetElement || document.documentElement).querySelectorAll(localSel.match(/\(([^)]*)\)/)[1])));
+          localSel = localSel.replace(' *', '');
+        }
+
+        return localSel;
+      }).join(':');
+      return Array.from((targetElement || document.documentElement).querySelectorAll(testSelector)).filter(node => !excludeSelectors.includes(node));
+    }
+
+    return Array.from((targetElement || document.documentElement).querySelectorAll(selector));
   }
 
 }

package/es/shared/helpers.js

@@ -1,4 +1,8 @@
-import { warn, PLATFORM_MAC, PLATFORM_WIN, PLATFORM_ANDROID, PLATFORM_LINUX, PLATFORM_IOS } from './component-helper';
+export const PLATFORM_MAC = 'Mac|iPad|iPhone|iPod';
+export const PLATFORM_WIN = 'Win';
+export const PLATFORM_ANDROID = 'Android';
+export const PLATFORM_LINUX = 'Linux';
+export const PLATFORM_IOS = 'iOS|iPhone|iPad|iPod';
 export let IS_IE11 = false;
 export let IS_EDGE = false;
 export let IS_IOS = false;
@@ -312,4 +316,9 @@ export async function copyToClipboard(string) {
   }
 
   return success;
-}
+}
+export const warn = (...e) => {
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof console !== 'undefined' && typeof console.log === 'function') {
+    console.log('Eufemia:', ...e);
+  }
+};

package/es/style/core/helper-classes/skip-link.scss

@@ -83,7 +83,7 @@
 }
 
 // How to use the "skip-link"
-// 1. Have this on the top of Your App: <a class="dnb-skip-link dnb-button" href="#dnb-app-content">Skip to content</a>
+// 1. Have this on the top of your app: <a class="dnb-skip-link dnb-button" href="#dnb-app-content">Skip to content</a>
 // 2. Place this id="dnb-app-content" on Your main content container
 .dnb-skip-link {
   position: absolute;

package/es/style/dnb-ui-components.css

@@ -972,9 +972,10 @@
   .dnb-breadcrumb__bar.dnb-section {
     display: -webkit-box;
     display: -ms-flexbox;
-    display: flex;
-    padding: 1rem 0 0.5rem 0;
-    padding: var(--spacing-small) 0 var(--spacing-x-small) 0; }
+    display: flex; }
+  .dnb-breadcrumb--spacing .dnb-breadcrumb__bar.dnb-section {
+    padding: 0.5rem 0;
+    padding: var(--spacing-x-small) 0; }
   .dnb-breadcrumb__list {
     list-style: none;
     margin: 0;
@@ -1000,9 +1001,7 @@
             align-items: center;
     line-height: normal;
     padding: 0.5rem 0;
-    padding: var(--spacing-x-small) 0;
-    color: #333;
-    color: var(--color-black-80); }
+    padding: var(--spacing-x-small) 0; }
     .dnb-breadcrumb__item__span__icon {
       margin-left: 0.5rem;
       margin-left: calc(1rem / 2);
@@ -1017,8 +1016,8 @@
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    padding: 0.5rem 2rem;
-    padding: var(--spacing-x-small) var(--spacing-large); }
+    padding: 0 2rem;
+    padding: 0 var(--spacing-large); }
   .dnb-breadcrumb__collapse .dnb-breadcrumb__list {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
@@ -1027,6 +1026,9 @@
     -webkit-box-align: start;
         -ms-flex-align: start;
             align-items: flex-start; }
+  .dnb-breadcrumb--spacing .dnb-breadcrumb__collapse {
+    padding: 0.5rem 2rem;
+    padding: var(--spacing-x-small) var(--spacing-large); }
 
 /*
 * Button component
@@ -1179,8 +1181,6 @@
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
-  .dnb-button--tertiary .dnb-button__text {
-    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
@@ -2674,7 +2674,7 @@ html[data-visual-test] .dnb-global-status__shell {
 .dnb-global-status__title {
   position: relative;
   cursor: text;
-  min-height: 3.5rem; }
+  min-height: 4.5rem; }
   .dnb-global-status__title.dnb-p {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -2684,10 +2684,9 @@ html[data-visual-test] .dnb-global-status__shell {
             align-items: center;
     padding-top: 1rem;
     padding-bottom: 1rem;
-    padding-left: 3rem;
     padding-right: 5rem;
-    font-size: 1.25rem;
-    font-size: var(--font-size-medium); }
+    padding-left: 2.5rem;
+    margin-bottom: 0.5rem; }
   .dnb-spacing .dnb-global-status__title.dnb-p,
   .dnb-spacing .dnb-global-status__title.dnb-p:not([class*='dnb-space']) {
     margin: 0; }
@@ -2703,7 +2702,7 @@ html[data-visual-test] .dnb-global-status__shell {
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    padding: 2rem 0 2.5rem; }
+    padding: 0.5rem 0 2.5rem 2.5rem; }
     .dnb-global-status__message__content .dnb-p,
     .dnb-spacing .dnb-global-status__message__content .dnb-p,
     .dnb-spacing .dnb-global-status__message__content .dnb-p:not([class*='dnb-space']) {
@@ -2715,7 +2714,7 @@ html[data-visual-test] .dnb-global-status__shell {
   position: absolute;
   top: 0;
   left: 0;
-  margin-top: 0.75rem; }
+  margin-top: 1.5rem; }
 
 .dnb-global-status__close-button, .dnb-global-status__close-button.dnb-button--tertiary {
   position: absolute;
@@ -2734,15 +2733,14 @@ html[data-visual-test] .dnb-global-status__shell {
     margin: 0;
     margin-top: 0.5rem;
     padding-left: 1rem; }
-    .dnb-global-status__content .dnb-ul > li,
-    .dnb-spacing .dnb-global-status__content .dnb-ul > li,
-    .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) > li {
-      margin: 0;
-      padding-left: 0; }
-      .dnb-global-status__content .dnb-ul > li .dnb-anchor:last-of-type,
-      .dnb-spacing .dnb-global-status__content .dnb-ul > li .dnb-anchor:last-of-type,
-      .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) > li .dnb-anchor:last-of-type {
-        margin-left: 0.5rem; }
+    .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type,
+    .dnb-spacing .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type,
+    .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) .dnb-anchor:last-of-type {
+      margin-left: 0.5rem; }
+  .dnb-global-status__content .dnb-hr,
+  .dnb-spacing .dnb-global-status__content .dnb-hr,
+  .dnb-spacing .dnb-global-status__content .dnb-hr:not([class*='dnb-space']) {
+    margin: 0; }
 
 @media screen and (-ms-high-contrast: none) {
   .dnb-global-status__icon > .dnb-icon {
@@ -3438,35 +3436,31 @@ html[data-visual-test] .dnb-global-status__shell {
 
 @-webkit-keyframes show-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); }
+    opacity: 0; }
   to {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); } }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
 
 @keyframes show-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); }
+    opacity: 0; }
   to {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); } }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
 
 @-webkit-keyframes hide-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
   to {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); } }
+    opacity: 0; } }
 
 @keyframes hide-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
   to {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); } }
+    opacity: 0; } }
 
 :root {
   --modal-z-index: 3000;
@@ -3480,8 +3474,8 @@ html[data-visual-test] .dnb-global-status__shell {
   --modal-drawer-min-width: 25rem;
   --modal-drawer-max-width: 40rem;
   --modal-drawer-header-min-height: 6rem;
-  --modal-overlay-transparent: rgba(0, 0, 0, 0);
-  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.32; }
 
 html[data-dnb-modal-active] {
   -moz-user-select: none;
@@ -3880,37 +3874,23 @@ html[data-dnb-modal-active] {
     top: 0;
     width: 100%;
     height: 100%;
-    will-change: background-color;
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent);
-    -webkit-box-shadow: 0 100vh 0 0 rgba(0, 0, 0, 0.32);
-            box-shadow: 0 100vh 0 0 rgba(0, 0, 0, 0.32);
-    -webkit-box-shadow: 0 100vh 0 0 var(--modal-overlay-bg);
-            box-shadow: 0 100vh 0 0 var(--modal-overlay-bg); }
-    .dnb-modal__overlay--modal {
-      -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
-              animation: show-modal-overlay 300ms ease-out forwards 0ms;
-      -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
-              animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
-    .dnb-modal__overlay--drawer {
-      -webkit-animation: show-modal-overlay 300ms ease-out forwards 100ms;
-              animation: show-modal-overlay 300ms ease-out forwards 100ms;
-      -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 100ms;
-              animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 100ms; }
-    .dnb-modal__overlay--hide {
+    background-color: black;
+    background-color: var(--modal-overlay-bg); }
+  .dnb-modal-root__inner .dnb-modal__overlay {
+    -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
+            animation: hide-modal-overlay 300ms ease-in-out forwards;
+    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
+            animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+  .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
+    -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
+            animation: show-modal-overlay 300ms ease-out forwards 0ms;
+    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
+            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
       -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
               animation: hide-modal-overlay 300ms ease-in-out forwards;
       -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
               animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
-  .dnb-modal-root__inner .dnb-modal__overlay {
-    opacity: 0;
-    -webkit-transition: opacity 300ms ease-in-out;
-    transition: opacity 300ms ease-in-out; }
-  .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    opacity: 1; }
-  html[data-visual-test] .dnb-modal-root__inner .dnb-modal__overlay {
-    -webkit-transition: none;
-    transition: none; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     -webkit-animation-delay: 0ms !important;
             animation-delay: 0ms !important;
@@ -6179,12 +6159,20 @@ span.dnb-space--no-collapse > span {
     -webkit-box-shadow: 100vw 0 0 0 currentColor;
             box-shadow: 100vw 0 0 0 currentColor; }
 
-.dnb-step-indicator__sidebar {
-  max-width: 20rem;
-  margin-right: 3rem;
-  margin-right: var(--spacing-x-large); }
-  .dnb-step-indicator__sidebar .dnb-step-indicator__item {
-    min-width: 320px; }
+@media screen and (min-width: 50.1em) {
+  .dnb-step-indicator__sidebar {
+    max-width: 20rem;
+    margin-right: 3rem;
+    margin-right: var(--spacing-x-large); }
+    .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+      min-width: 320px; } }
+
+@media screen and (max-width: 50.1em) {
+  .dnb-step-indicator__sidebar--ssr-skeleton {
+    visibility: hidden;
+    overflow: hidden;
+    width: 0;
+    height: 5.5rem; } }
 
 .dnb-step-indicator-v2 .dnb-step-indicator__list {
   display: -webkit-box;
@@ -6749,6 +6737,46 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
 .dnb-tabs__content--spacing {
   padding-top: 2rem; }
 
+/*
+* Tag component
+*
+*/
+:root {
+  --tag-border-radius: 2.5rem; }
+
+.dnb-tag {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0.25rem 0.5rem;
+  padding: var(--spacing-xx-small) var(--spacing-x-small);
+  font-size: 0.875rem;
+  font-size: var(--font-size-x-small);
+  background-color: #ebebeb;
+  background-color: var(--color-black-8);
+  border-radius: 2.5rem;
+  border-radius: var(--tag-border-radius); }
+  .dnb-tag__icon {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .dnb-tag__text {
+    color: #333;
+    color: var(--color-black-80); }
+
 /*
 * Textarea component
 *
@@ -7022,6 +7050,9 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
       margin-bottom: 0.5rem; }
       .dnb-responsive-component .dnb-textarea > .dnb-form-label {
         margin-bottom: 0.5rem; } }
+  html[data-visual-test] .dnb-textarea__textarea {
+    caret-color: #fff;
+    caret-color: var(--color-white); }
   .dnb-textarea.dnb-skeleton .dnb-textarea__inner {
     margin: 0;
     border-radius: 0.25rem; }