@dnb/eufemia 9.32.0 → 9.33.0

package/cjs/elements/H3.js

@@ -41,7 +41,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var H3 = function H3(props) {
   return _react.default.createElement(_H.default, _extends({
-    is: "h3"
+    as: "h3"
   }, props));
 };
 

package/cjs/elements/H4.js

@@ -41,7 +41,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var H4 = function H4(props) {
   return _react.default.createElement(_H.default, _extends({
-    is: "h4"
+    as: "h4"
   }, props));
 };
 

package/cjs/elements/H5.js

@@ -41,7 +41,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var H5 = function H5(props) {
   return _react.default.createElement(_H.default, _extends({
-    is: "h5"
+    as: "h5"
   }, props));
 };
 

package/cjs/elements/H6.js

@@ -41,7 +41,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var H6 = function H6(props) {
   return _react.default.createElement(_H.default, _extends({
-    is: "h6"
+    as: "h6"
   }, props));
 };
 

package/cjs/elements/Hr.js

@@ -70,7 +70,7 @@ var Hr = function Hr() {
   }
 
   return _react.default.createElement(_Element.default, _extends({
-    is: "hr"
+    as: "hr"
   }, props));
 };
 

package/cjs/elements/Img.js

@@ -95,13 +95,13 @@ var Img = function Img(_ref) {
       setError = _React$useState2[1];
 
   return _react.default.createElement(_Element.default, {
-    is: element,
+    as: element,
     internalClass: "dnb-img",
     className: (0, _classnames.default)(className, _class, (0, _SpacingHelper.createSpacingClasses)(p, p.is)),
     skeleton: skeleton,
     skeleton_method: "shape"
   }, _react.default.createElement(_Element.default, _extends({
-    is: "img",
+    as: "img",
     alt: alt,
     internalClass: 'dnb-img__img' + (hasError ? " dnb-img__img--error" : ""),
     className: img_class,

package/cjs/elements/Li.js

@@ -52,7 +52,7 @@ var Li = function Li() {
   }
 
   return _react.default.createElement(_Element.default, _extends({
-    is: "li"
+    as: "li"
   }, p, {
     className: className
   }));

package/cjs/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/cjs/elements/Ol.js

@@ -50,7 +50,7 @@ var Ol = function Ol() {
   }
 
   return _react.default.createElement(_Element.default, _extends({
-    is: "ol"
+    as: "ol"
   }, p, {
     skeleton: false
   }));

package/cjs/elements/P.js

@@ -105,7 +105,7 @@ var P = function P(_ref) {
   }
 
   return _react.default.createElement(_Element.default, _extends({
-    is: element
+    as: element
   }, props, {
     className: (0, _classnames.default)('dnb-p', modifier, className)
   }));

package/cjs/elements/Span.js

@@ -41,7 +41,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var Span = _react.default.forwardRef(function (props, ref) {
   return _react.default.createElement(_Element.default, _extends({
-    is: "span",
+    as: "span",
     inner_ref: ref
   }, props));
 });

package/cjs/elements/Ul.js

@@ -50,7 +50,7 @@ var Ul = function Ul() {
   }
 
   return _react.default.createElement(_Element.default, _extends({
-    is: "ul"
+    as: "ul"
   }, p, {
     skeleton: false
   }));

package/cjs/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/cjs/fragments/drawer-list/DrawerListPortal.js

@@ -199,6 +199,14 @@ var DrawerListPortal = function (_React$PureComponent) {
           width = window.innerWidth;
         }
 
+        if (top < 0) {
+          top = 0;
+        }
+
+        if (left < 0) {
+          left = 0;
+        }
+
         var style = {
           width: width,
           '--drawer-list-width': "".concat(width / 16, "rem"),
@@ -220,21 +228,18 @@ var DrawerListPortal = function (_React$PureComponent) {
       }
 
       this.setPosition = function () {
-        clearTimeout(_this2._ddt);
-        _this2._ddt = setTimeout(function () {
+        clearTimeout(_this2.positionTimeout);
+        _this2.positionTimeout = setTimeout(function () {
           if (_this2.props.opened) {
             _this2.setState({
               random: Date.now()
             });
           }
-        }, 30);
+        }, 200);
       };
 
-      this.customElem = (0, _componentHelper.isInsideScrollView)(this.props.rootRef.current, true);
-
-      if (this.customElem) {
-        this.customElem.addEventListener('scroll', this.setPosition);
-      }
+      this.customElem = (0, _componentHelper.getClosestScrollViewElement)(this.props.rootRef.current) || window;
+      this.customElem.addEventListener('scroll', this.setPosition);
 
       try {
         this.resizeObserver = new ResizeObserver(this.setPosition);
@@ -246,7 +251,7 @@ var DrawerListPortal = function (_React$PureComponent) {
   }, {
     key: "removePositionObserver",
     value: function removePositionObserver() {
-      clearTimeout(this._ddt);
+      clearTimeout(this.positionTimeout);
 
       if (typeof window !== 'undefined' && this.setPosition) {
         if (this.customElem) {

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

@@ -113,6 +113,35 @@ var DrawerListProvider = function (_React$PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "correctHiddenView", function () {
+      if (!_this._refShell.current || !_this._refUl.current) {
+        return;
+      }
+
+      try {
+        var spaceToLeft = (0, _helpers.getOffsetLeft)(_this._refUl.current);
+
+        var spaceToRight = window.innerWidth - ((0, _helpers.getOffsetLeft)(_this._refUl.current) + _this._refUl.current.offsetWidth);
+
+        var triangleStyle = _this._refTriangle.current.style;
+        var shellStyle = _this._refShell.current.style;
+
+        if (spaceToLeft < 0) {
+          shellStyle.transform = "translateX(".concat(Math.abs(spaceToLeft / 16), "rem)");
+          triangleStyle.right = "".concat(Math.abs(spaceToLeft / 16), "rem");
+        } else if (spaceToRight < 0) {
+          shellStyle.transform = "translateX(".concat(spaceToRight / 16, "rem)");
+          triangleStyle.left = "".concat(Math.abs(spaceToRight / 16), "rem");
+        } else {
+          if (shellStyle.transform) {
+            shellStyle.transform = '';
+            triangleStyle.left = 'auto';
+            triangleStyle.right = 'auto';
+          }
+        }
+      } catch (e) {}
+    });
+
     _defineProperty(_assertThisInitialized(_this), "scrollToItem", function (active_item) {
       var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
           _ref$scrollTo = _ref.scrollTo,
@@ -229,7 +258,7 @@ var DrawerListProvider = function (_React$PureComponent) {
       if (wrapper_element !== _this.state.wrapper_element) {
         _this.setState({
           wrapper_element: wrapper_element
-        }, _this.setOutsideClickObserver);
+        });
       }
 
       return _assertThisInitialized(_this);
@@ -672,6 +701,8 @@ var DrawerListProvider = function (_React$PureComponent) {
         });
 
         var delayHandler = function delayHandler() {
+          _this.removeObservers();
+
           _this.setState({
             hidden: true,
             isOpen: false
@@ -684,8 +715,6 @@ var DrawerListProvider = function (_React$PureComponent) {
           DrawerListProvider.isOpen = false;
 
           _this.setActiveState(false);
-
-          _this.removeObservers();
         };
 
         if ((0, _componentHelper.isTrue)(_this.props.no_animation)) {
@@ -863,9 +892,9 @@ var DrawerListProvider = function (_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);
     }
   }, {
     key: "refreshScrollObserver",
@@ -979,7 +1008,7 @@ var DrawerListProvider = function (_React$PureComponent) {
       var customElem = typeof observer_element === 'string' ? document.querySelector(observer_element) : null;
 
       if (!customElem) {
-        customElem = (0, _componentHelper.isInsideScrollView)(this._refRoot.current, true);
+        customElem = (0, _componentHelper.getClosestScrollViewElement)(this._refRoot.current);
       }
 
       this.removeDirectionObserver();
@@ -1035,22 +1064,22 @@ var DrawerListProvider = function (_React$PureComponent) {
         } catch (e) {
           (0, _componentHelper.warn)('List could not set onResize:', e);
         }
+
+        _this6.correctHiddenView();
       };
 
       this.setDirection = function (e) {
-        clearTimeout(_this6._ddTimeout);
-        _this6._ddTimeout = setTimeout(renderDirection, 30);
-
-        if (useDrawer && e.type === 'resize') {
-          if (!_this6._bodyLockIsEnabled && (window.innerWidth / 16 <= 40 || window.innerHeight / 16 <= 40)) {
-            _this6.enableBodyLock();
-          } else if (_this6._bodyLockIsEnabled && !useBodyLock) {
-            _this6.disableBodyLock();
-          }
-        }
+        clearTimeout(_this6._directionTimeout);
+        _this6._directionTimeout = setTimeout(renderDirection, 50);
 
         if (e.type === 'resize') {
-          _this6.correctHiddenView();
+          if (useDrawer) {
+            if (!_this6._bodyLockIsEnabled && (window.innerWidth / 16 <= 40 || window.innerHeight / 16 <= 40)) {
+              _this6.enableBodyLock();
+            } else if (_this6._bodyLockIsEnabled && !useBodyLock) {
+              _this6.disableBodyLock();
+            }
+          }
         }
       };
 
@@ -1069,35 +1098,9 @@ var DrawerListProvider = function (_React$PureComponent) {
         this.enableBodyLock();
       }
 
-      this.correctHiddenView();
       this.refreshScrollObserver();
       renderDirection();
     }
-  }, {
-    key: "correctHiddenView",
-    value: function correctHiddenView() {
-      try {
-        var ui = this._refUl.current;
-        var spaceToLeft = (0, _helpers.getOffsetLeft)(ui);
-        var spaceToRight = window.innerWidth - ((0, _helpers.getOffsetLeft)(ui) + ui.offsetWidth);
-        var tri = this._refTriangle.current.style;
-        var shell = this._refShell.current.style;
-
-        if (spaceToLeft < 0) {
-          shell.transform = "translateX(".concat(Math.abs(spaceToLeft), "px)");
-          tri.right = "".concat(Math.abs(spaceToLeft), "px");
-        } else if (spaceToRight < 0) {
-          shell.transform = "translateX(".concat(spaceToRight, "px)");
-          tri.left = "".concat(Math.abs(spaceToRight), "px");
-        } else {
-          if (shell.transform) {
-            shell.transform = '';
-            tri.left = 'auto';
-            tri.right = 'auto';
-          }
-        }
-      } catch (e) {}
-    }
   }, {
     key: "findItemByValue",
     value: function findItemByValue(value) {
@@ -1144,7 +1147,7 @@ var DrawerListProvider = function (_React$PureComponent) {
     key: "removeDirectionObserver",
     value: function removeDirectionObserver() {
       this.disableBodyLock();
-      clearTimeout(this._ddTimeout);
+      clearTimeout(this._directionTimeout);
 
       if (typeof window !== 'undefined' && this.setDirection) {
         var _this$_rootElem;

package/cjs/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/cjs/icons/hierarchy.d.ts

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

package/cjs/icons/hierarchy.js

@@ -0,0 +1,42 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _g, _defs;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var hierarchy = function hierarchy(props) {
+  return _react.default.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.default.createElement("g", {
+    clipPath: "url(#a)"
+  }, _react.default.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.default.createElement("defs", null, _react.default.createElement("clipPath", {
+    id: "a"
+  }, _react.default.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h16v16H0z"
+  })))));
+};
+
+var _default = hierarchy;
+exports.default = _default;

package/cjs/icons/hierarchy_medium.d.ts

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

package/cjs/icons/hierarchy_medium.js

@@ -0,0 +1,42 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _g, _defs;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var hierarchy_medium = function hierarchy_medium(props) {
+  return _react.default.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.default.createElement("g", {
+    clipPath: "url(#a)"
+  }, _react.default.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.default.createElement("defs", null, _react.default.createElement("clipPath", {
+    id: "a"
+  }, _react.default.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h24v24H0z"
+  })))));
+};
+
+var _default = hierarchy_medium;
+exports.default = _default;

package/cjs/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/cjs/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
   }
 }