@dnb/eufemia 9.32.0 → 9.33.0

package/es/elements/H4.js

@@ -11,7 +11,7 @@ import { spacingPropTypes } from '../components/space/SpacingHelper';
 import H from './H';
 
 const H4 = props => React.createElement(H, _extends({
-  is: "h4"
+  as: "h4"
 }, props));
 
 H4.tagName = 'dnb-h4';

package/es/elements/H5.js

@@ -11,7 +11,7 @@ import { spacingPropTypes } from '../components/space/SpacingHelper';
 import H from './H';
 
 const H5 = props => React.createElement(H, _extends({
-  is: "h5"
+  as: "h5"
 }, props));
 
 H5.tagName = 'dnb-h5';

package/es/elements/H6.js

@@ -11,7 +11,7 @@ import { spacingPropTypes } from '../components/space/SpacingHelper';
 import H from './H';
 
 const H6 = props => React.createElement(H, _extends({
-  is: "h6"
+  as: "h6"
 }, props));
 
 H6.tagName = 'dnb-h6';

package/es/elements/Hr.js

@@ -34,7 +34,7 @@ const Hr = (_ref = {}) => {
   }
 
   return React.createElement(E, _extends({
-    is: "hr"
+    as: "hr"
   }, props));
 };
 

package/es/elements/Img.js

@@ -27,13 +27,13 @@ const Img = _ref => {
 
   const [hasError, setError] = React.useState(false);
   return React.createElement(E, {
-    is: element,
+    as: element,
     internalClass: "dnb-img",
     className: classnames(className, _class, createSpacingClasses(p, p.is)),
     skeleton: skeleton,
     skeleton_method: "shape"
   }, React.createElement(E, _extends({
-    is: "img",
+    as: "img",
     alt: alt,
     internalClass: 'dnb-img__img' + (hasError ? " dnb-img__img--error" : ""),
     className: img_class,

package/es/elements/Li.js

@@ -22,7 +22,7 @@ const Li = (_ref = {}) => {
   }
 
   return React.createElement(E, _extends({
-    is: "li"
+    as: "li"
   }, p, {
     className: className
   }));

package/es/elements/Link.d.ts

@@ -1,6 +1,6 @@
 export default Link;
 declare const Link: import("react").ForwardRefExoticComponent<{
-    element?: import("react").ReactNode;
+    element?: import("./Element").ElementIsType;
     href?: string;
     to?: string;
     targetBlankTitle?: string;

package/es/elements/Ol.js

@@ -26,7 +26,7 @@ const Ol = (_ref = {}) => {
   }
 
   return React.createElement(E, _extends({
-    is: "ol"
+    as: "ol"
   }, p, {
     skeleton: false
   }));

package/es/elements/P.js

@@ -57,7 +57,7 @@ const P = _ref => {
   }
 
   return React.createElement(E, _extends({
-    is: element
+    as: element
   }, props, {
     className: classnames('dnb-p', modifier, className)
   }));

package/es/elements/Span.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { spacingPropTypes } from '../components/space/SpacingHelper';
 import E from './Element';
 const Span = React.forwardRef((props, ref) => React.createElement(E, _extends({
-  is: "span",
+  as: "span",
   inner_ref: ref
 }, props)));
 Span.tagName = 'dnb-span';

package/es/elements/Ul.js

@@ -26,7 +26,7 @@ const Ul = (_ref = {}) => {
   }
 
   return React.createElement(E, _extends({
-    is: "ul"
+    as: "ul"
   }, p, {
     skeleton: false
   }));

package/es/elements/lib.d.ts

@@ -1,6 +1,6 @@
 export function getElements(): {
     Anchor: import("react").ForwardRefExoticComponent<{
-        element?: import("react").ReactNode;
+        element?: import("./Element").ElementIsType;
         href?: string;
         to?: string;
         targetBlankTitle?: string;
@@ -27,7 +27,9 @@ export function getElements(): {
     Div: import("react").FC<import("./Div").DivProps>;
     Dl: {
         ({ direction, ...props }: import("./Dl").DlAllProps): JSX.Element;
-        Item({ className, children, }: import("react").AllHTMLAttributes<HTMLSpanElement>): JSX.Element;
+        Item({ className, children, ...props }: import("react").AllHTMLAttributes<HTMLSpanElement> & import("../shared/types").SpacingElementProps & {
+            space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
+        }): JSX.Element;
     };
     Dt: import("react").ForwardRefExoticComponent<import("./Dt").DtProps & import("../shared/types").SpacingElementProps & {
         space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
@@ -51,7 +53,7 @@ export function getElements(): {
     };
     Li: ({ className, ...p }?: import("./Li").LiAllProps) => JSX.Element;
     Link: import("react").ForwardRefExoticComponent<{
-        element?: import("react").ReactNode;
+        element?: import("./Element").ElementIsType;
         href?: string;
         to?: string;
         targetBlankTitle?: string;

package/es/fragments/drawer-list/DrawerListPortal.js

@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { warn, isInsideScrollView } from '../../shared/component-helper';
+import { warn, getClosestScrollViewElement } from '../../shared/component-helper';
 
 class DrawerListPortal extends React.PureComponent {
   constructor(props) {
@@ -118,13 +118,21 @@ class DrawerListPortal extends React.PureComponent {
       const rect = rootElem.getBoundingClientRect();
       const scrollY = fixed_position ? 0 : window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
       const scrollX = fixed_position ? 0 : window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
-      const top = scrollY + rect.top;
-      const left = scrollX + rect.left + (include_owner_width ? parseFloat(ownerWidth || 0) : 0);
+      let top = scrollY + rect.top;
+      let left = scrollX + rect.left + (include_owner_width ? parseFloat(ownerWidth || 0) : 0);
 
       if (width > window.innerWidth) {
         width = window.innerWidth;
       }
 
+      if (top < 0) {
+        top = 0;
+      }
+
+      if (left < 0) {
+        left = 0;
+      }
+
       const style = {
         width,
         '--drawer-list-width': `${width / 16}rem`,
@@ -143,21 +151,18 @@ class DrawerListPortal extends React.PureComponent {
     }
 
     this.setPosition = () => {
-      clearTimeout(this._ddt);
-      this._ddt = setTimeout(() => {
+      clearTimeout(this.positionTimeout);
+      this.positionTimeout = setTimeout(() => {
         if (this.props.opened) {
           this.setState({
             random: Date.now()
           });
         }
-      }, 30);
+      }, 200);
     };
 
-    this.customElem = isInsideScrollView(this.props.rootRef.current, true);
-
-    if (this.customElem) {
-      this.customElem.addEventListener('scroll', this.setPosition);
-    }
+    this.customElem = getClosestScrollViewElement(this.props.rootRef.current) || window;
+    this.customElem.addEventListener('scroll', this.setPosition);
 
     try {
       this.resizeObserver = new ResizeObserver(this.setPosition);
@@ -168,7 +173,7 @@ class DrawerListPortal extends React.PureComponent {
   }
 
   removePositionObserver() {
-    clearTimeout(this._ddt);
+    clearTimeout(this.positionTimeout);
 
     if (typeof window !== 'undefined' && this.setPosition) {
       if (this.customElem) {

package/es/fragments/drawer-list/DrawerListProvider.js

@@ -8,7 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import keycode from 'keycode';
 import Context from '../../shared/Context';
-import { warn, isTrue, roundToNearest, isInsideScrollView, detectOutsideClick, dispatchCustomElementEvent, getPreviousSibling } from '../../shared/component-helper';
+import { warn, isTrue, roundToNearest, getClosestScrollViewElement, detectOutsideClick, dispatchCustomElementEvent, getPreviousSibling } from '../../shared/component-helper';
 import { getOffsetTop, getOffsetLeft, hasSelectedText, getSelectedElement } from '../../shared/helpers';
 import { getData, normalizeData, findClosest, getSelectedItemValue, parseContentTitle, getEventData, prepareStartupState, prepareDerivedState, drawerListPropTypes, drawerListDefaultProps, drawerListProviderPropTypes, drawerListProviderDefaultProps } from './DrawerListHelpers';
 import DrawerListContext from './DrawerListContext';
@@ -35,6 +35,35 @@ export default class DrawerListProvider extends React.PureComponent {
       }
     });
 
+    _defineProperty(this, "correctHiddenView", () => {
+      if (!this._refShell.current || !this._refUl.current) {
+        return;
+      }
+
+      try {
+        const spaceToLeft = getOffsetLeft(this._refUl.current);
+
+        const spaceToRight = window.innerWidth - (getOffsetLeft(this._refUl.current) + this._refUl.current.offsetWidth);
+
+        const triangleStyle = this._refTriangle.current.style;
+        const shellStyle = this._refShell.current.style;
+
+        if (spaceToLeft < 0) {
+          shellStyle.transform = `translateX(${Math.abs(spaceToLeft / 16)}rem)`;
+          triangleStyle.right = `${Math.abs(spaceToLeft / 16)}rem`;
+        } else if (spaceToRight < 0) {
+          shellStyle.transform = `translateX(${spaceToRight / 16}rem)`;
+          triangleStyle.left = `${Math.abs(spaceToRight / 16)}rem`;
+        } else {
+          if (shellStyle.transform) {
+            shellStyle.transform = '';
+            triangleStyle.left = 'auto';
+            triangleStyle.right = 'auto';
+          }
+        }
+      } catch (e) {}
+    });
+
     _defineProperty(this, "scrollToItem", (active_item, {
       scrollTo = true,
       element = null
@@ -143,7 +172,7 @@ export default class DrawerListProvider extends React.PureComponent {
       if (wrapper_element !== this.state.wrapper_element) {
         this.setState({
           wrapper_element
-        }, this.setOutsideClickObserver);
+        });
       }
 
       return this;
@@ -558,6 +587,7 @@ export default class DrawerListProvider extends React.PureComponent {
         });
 
         const delayHandler = () => {
+          this.removeObservers();
           this.setState({
             hidden: true,
             isOpen: false
@@ -569,7 +599,6 @@ export default class DrawerListProvider extends React.PureComponent {
 
           DrawerListProvider.isOpen = false;
           this.setActiveState(false);
-          this.removeObservers();
         };
 
         if (isTrue(this.props.no_animation)) {
@@ -727,9 +756,9 @@ export default class DrawerListProvider extends React.PureComponent {
     clearTimeout(this._showTimeout);
     clearTimeout(this._hideTimeout);
     clearTimeout(this._scrollTimeout);
-    clearTimeout(this._ddTimeout);
-    this.setActiveState(false);
+    clearTimeout(this._directionTimeout);
     this.removeObservers();
+    this.setActiveState(false);
   }
 
   refreshScrollObserver() {
@@ -834,7 +863,7 @@ export default class DrawerListProvider extends React.PureComponent {
     let customElem = typeof observer_element === 'string' ? document.querySelector(observer_element) : null;
 
     if (!customElem) {
-      customElem = isInsideScrollView(this._refRoot.current, true);
+      customElem = getClosestScrollViewElement(this._refRoot.current);
     }
 
     this.removeDirectionObserver();
@@ -890,22 +919,22 @@ export default class DrawerListProvider extends React.PureComponent {
       } catch (e) {
         warn('List could not set onResize:', e);
       }
+
+      this.correctHiddenView();
     };
 
     this.setDirection = e => {
-      clearTimeout(this._ddTimeout);
-      this._ddTimeout = setTimeout(renderDirection, 30);
-
-      if (useDrawer && e.type === 'resize') {
-        if (!this._bodyLockIsEnabled && (window.innerWidth / 16 <= 40 || window.innerHeight / 16 <= 40)) {
-          this.enableBodyLock();
-        } else if (this._bodyLockIsEnabled && !useBodyLock) {
-          this.disableBodyLock();
-        }
-      }
+      clearTimeout(this._directionTimeout);
+      this._directionTimeout = setTimeout(renderDirection, 50);
 
       if (e.type === 'resize') {
-        this.correctHiddenView();
+        if (useDrawer) {
+          if (!this._bodyLockIsEnabled && (window.innerWidth / 16 <= 40 || window.innerHeight / 16 <= 40)) {
+            this.enableBodyLock();
+          } else if (this._bodyLockIsEnabled && !useBodyLock) {
+            this.disableBodyLock();
+          }
+        }
       }
     };
 
@@ -924,35 +953,10 @@ export default class DrawerListProvider extends React.PureComponent {
       this.enableBodyLock();
     }
 
-    this.correctHiddenView();
     this.refreshScrollObserver();
     renderDirection();
   }
 
-  correctHiddenView() {
-    try {
-      const ui = this._refUl.current;
-      const spaceToLeft = getOffsetLeft(ui);
-      const spaceToRight = window.innerWidth - (getOffsetLeft(ui) + ui.offsetWidth);
-      const tri = this._refTriangle.current.style;
-      const shell = this._refShell.current.style;
-
-      if (spaceToLeft < 0) {
-        shell.transform = `translateX(${Math.abs(spaceToLeft)}px)`;
-        tri.right = `${Math.abs(spaceToLeft)}px`;
-      } else if (spaceToRight < 0) {
-        shell.transform = `translateX(${spaceToRight}px)`;
-        tri.left = `${Math.abs(spaceToRight)}px`;
-      } else {
-        if (shell.transform) {
-          shell.transform = '';
-          tri.left = 'auto';
-          tri.right = 'auto';
-        }
-      }
-    } catch (e) {}
-  }
-
   findItemByValue(value) {
     if (isTrue(this.props.skip_keysearch)) {
       return;
@@ -996,7 +1000,7 @@ export default class DrawerListProvider extends React.PureComponent {
 
   removeDirectionObserver() {
     this.disableBodyLock();
-    clearTimeout(this._ddTimeout);
+    clearTimeout(this._directionTimeout);
 
     if (typeof window !== 'undefined' && this.setDirection) {
       var _this$_rootElem;

package/es/fragments/drawer-list/style/_drawer-list.scss

@@ -68,6 +68,11 @@
 
   &__portal__style {
     position: absolute;
+    transition: all 300ms var(--easing-default);
+
+    html[data-visual-test] & {
+      animation-duration: 1ms !important;
+    }
 
     // higher than modal --modal-z-index:
     z-index: 3200;
@@ -137,9 +142,14 @@
   &--scroll &__options {
     min-height: 2rem;
     max-height: 70vh;
+    transition: max-height 300ms var(--easing-default);
 
     @include scrollY(auto);
   }
+  html[data-visual-test] &--scroll &__options,
+  &--scroll#{&}--no-animation &__options {
+    animation-duration: 1ms !important;
+  }
   &--opened &__options {
     scroll-behavior: smooth;
   }

package/es/icons/hierarchy.d.ts

@@ -0,0 +1,2 @@
+export default hierarchy;
+declare function hierarchy(props: any): JSX.Element;

package/es/icons/hierarchy.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _g, _defs;
+
+import React from 'react';
+
+const hierarchy = props => React.createElement("svg", _extends({
+  width: 16,
+  height: 16,
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _g || (_g = React.createElement("g", {
+  clipPath: "url(#a)"
+}, React.createElement("path", {
+  d: "M3.333 10.333V9.4c0-.515.418-.933.934-.933h7.466c.516 0 .934.418.934.933v.933M8 5.667v2.8M2.5 15h1.667a1.5 1.5 0 0 0 1.5-1.5v-1.667a1.5 1.5 0 0 0-1.5-1.5H2.5a1.5 1.5 0 0 0-1.5 1.5V13.5A1.5 1.5 0 0 0 2.5 15Zm4.667-9.333h1.666a1.5 1.5 0 0 0 1.5-1.5V2.5a1.5 1.5 0 0 0-1.5-1.5H7.167a1.5 1.5 0 0 0-1.5 1.5v1.667a1.5 1.5 0 0 0 1.5 1.5ZM11.833 15H13.5a1.5 1.5 0 0 0 1.5-1.5v-1.667a1.5 1.5 0 0 0-1.5-1.5h-1.667a1.5 1.5 0 0 0-1.5 1.5V13.5a1.5 1.5 0 0 0 1.5 1.5Z",
+  stroke: "#000",
+  strokeWidth: 1.5,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}))), _defs || (_defs = React.createElement("defs", null, React.createElement("clipPath", {
+  id: "a"
+}, React.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h16v16H0z"
+})))));
+
+export default hierarchy;

package/es/icons/hierarchy_medium.d.ts

@@ -0,0 +1,2 @@
+export default hierarchy_medium;
+declare function hierarchy_medium(props: any): JSX.Element;

package/es/icons/hierarchy_medium.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _g, _defs;
+
+import React from 'react';
+
+const hierarchy_medium = props => React.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _g || (_g = React.createElement("g", {
+  clipPath: "url(#a)"
+}, React.createElement("path", {
+  d: "M4.667 15.667V14.2c0-.81.656-1.467 1.466-1.467h11.734c.81 0 1.466.657 1.466 1.467v1.467M12 8.333v4.4M3.357 23h2.62a2.357 2.357 0 0 0 2.356-2.357v-2.62a2.357 2.357 0 0 0-2.357-2.356H3.357A2.357 2.357 0 0 0 1 18.024v2.619A2.357 2.357 0 0 0 3.357 23ZM10.69 8.333h2.62a2.357 2.357 0 0 0 2.357-2.357V3.357A2.357 2.357 0 0 0 13.31 1h-2.62a2.357 2.357 0 0 0-2.357 2.357v2.62a2.357 2.357 0 0 0 2.357 2.356ZM18.024 23h2.619A2.357 2.357 0 0 0 23 20.643v-2.62a2.357 2.357 0 0 0-2.357-2.356h-2.62a2.357 2.357 0 0 0-2.356 2.357v2.619A2.357 2.357 0 0 0 18.024 23Z",
+  stroke: "#000",
+  strokeWidth: 1.5,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}))), _defs || (_defs = React.createElement("defs", null, React.createElement("clipPath", {
+  id: "a"
+}, React.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h24v24H0z"
+})))));
+
+export default hierarchy_medium;

package/es/icons/icons-meta.json

@@ -3469,5 +3469,47 @@
     "name": "newspaper",
     "variant": "secondary",
     "category": "objects"
+  },
+  "layout_card_medium": {
+    "tags": [],
+    "created": 1666351885521,
+    "name": "layout_card",
+    "variant": "secondary",
+    "category": "essentials"
+  },
+  "layout_card": {
+    "tags": [],
+    "created": 1666351885645,
+    "name": "layout_card",
+    "variant": "secondary",
+    "category": "essentials"
+  },
+  "unlock_medium": {
+    "tags": [],
+    "created": 1666351885767,
+    "name": "unlock",
+    "variant": "secondary",
+    "category": "essentials"
+  },
+  "unlock": {
+    "tags": [],
+    "created": 1666351885890,
+    "name": "unlock",
+    "variant": "secondary",
+    "category": "essentials"
+  },
+  "hierarchy_medium": {
+    "tags": [],
+    "created": 1666351886001,
+    "name": "hierarchy",
+    "variant": "secondary",
+    "category": "essentials"
+  },
+  "hierarchy": {
+    "tags": [],
+    "created": 1666351886132,
+    "name": "hierarchy",
+    "variant": "secondary",
+    "category": "essentials"
   }
 }

package/es/icons/icons-pdf.lock

@@ -6420,5 +6420,83 @@
     "bundleName": "secondary_icons",
     "created": 1663768090352,
     "updated": 1663768090352
+  },
+  "layout_card_medium.pdf": {
+    "iconName": "layout_card_medium",
+    "name": "layout_card",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/af914888-1310-4595-b8c0-365e97f6c7c9",
+    "id": "4744:13",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "24",
+    "variant": "secondary",
+    "bundleName": "secondary_icons_medium",
+    "created": 1666351889579,
+    "updated": 1666351889579
+  },
+  "layout_card.pdf": {
+    "iconName": "layout_card",
+    "name": "layout_card",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/bd884801-d03e-4def-9bc0-503dd699ce43",
+    "id": "4744:15",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "16",
+    "variant": "secondary",
+    "bundleName": "secondary_icons",
+    "created": 1666351889697,
+    "updated": 1666351889697
+  },
+  "unlock_medium.pdf": {
+    "iconName": "unlock_medium",
+    "name": "unlock",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/acb072aa-b2a0-4c99-9554-6ee38aa9f365",
+    "id": "4744:21",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "24",
+    "variant": "secondary",
+    "bundleName": "secondary_icons_medium",
+    "created": 1666351889818,
+    "updated": 1666351889818
+  },
+  "unlock.pdf": {
+    "iconName": "unlock",
+    "name": "unlock",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a6a7c816-74cc-4165-93ff-75b5b966959f",
+    "id": "4744:23",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "16",
+    "variant": "secondary",
+    "bundleName": "secondary_icons",
+    "created": 1666351889953,
+    "updated": 1666351889953
+  },
+  "hierarchy_medium.pdf": {
+    "iconName": "hierarchy_medium",
+    "name": "hierarchy",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2a957b22-0bad-41cf-a55d-4ba4c8ada7b4",
+    "id": "4744:47",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "24",
+    "variant": "secondary",
+    "bundleName": "secondary_icons_medium",
+    "created": 1666351890074,
+    "updated": 1666351890074
+  },
+  "hierarchy.pdf": {
+    "iconName": "hierarchy",
+    "name": "hierarchy",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ea30469c-a1ab-40d8-b088-539b9f9a3520",
+    "id": "4744:49",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "16",
+    "variant": "secondary",
+    "bundleName": "secondary_icons",
+    "created": 1666351890205,
+    "updated": 1666351890205
   }
 }