@dnb/eufemia 9.30.0 → 9.31.0

package/cjs/shared/AnimateHeight.js

@@ -9,6 +9,8 @@ require("core-js/modules/es.object.to-string.js");
 
 require("core-js/modules/web.dom-collections.for-each.js");
 
+require("core-js/modules/es.array.splice.js");
+
 require("core-js/modules/es.parse-float.js");
 
 require("core-js/modules/es.array.includes.js");
@@ -23,16 +25,47 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var AnimateHeight = function () {
   function AnimateHeight() {
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
     _classCallCheck(this, AnimateHeight);
 
+    _defineProperty(this, "isInBrowser", void 0);
+
+    _defineProperty(this, "state", void 0);
+
+    _defineProperty(this, "onStartStack", void 0);
+
+    _defineProperty(this, "onEndStack", void 0);
+
+    _defineProperty(this, "events", void 0);
+
+    _defineProperty(this, "opts", void 0);
+
+    _defineProperty(this, "elem", void 0);
+
+    _defineProperty(this, "container", void 0);
+
+    _defineProperty(this, "reqId1", void 0);
+
+    _defineProperty(this, "reqId2", void 0);
+
+    _defineProperty(this, "resizeTimeout", void 0);
+
+    _defineProperty(this, "isAnimating", void 0);
+
+    _defineProperty(this, "__currentHeight", void 0);
+
+    _defineProperty(this, "onResize", void 0);
+
     this.isInBrowser = typeof window !== 'undefined';
     this.state = 'init';
     this.onStartStack = [];
     this.onEndStack = [];
+    this.events = [];
     this.opts = opts;
   }
 
@@ -66,6 +99,16 @@ var AnimateHeight = function () {
         }
       });
     }
+  }, {
+    key: "reset",
+    value: function reset() {
+      this.state = 'init';
+      this.isAnimating = false;
+
+      this._removeEndEvents();
+
+      this._restore();
+    }
   }, {
     key: "_restore",
     value: function _restore() {
@@ -78,27 +121,28 @@ var AnimateHeight = function () {
       this.elem.style.height = '';
       this.elem.style.width = '';
     }
+  }, {
+    key: "_addEndEvents",
+    value: function _addEndEvents(listener) {
+      this._removeEndEvents();
+
+      this.events.push(listener);
+      this.elem.addEventListener('transitionend', listener);
+    }
   }, {
     key: "_removeEndEvents",
     value: function _removeEndEvents() {
+      var _this3 = this;
+
       if (!this.elem) {
         return;
       }
 
-      if (this.onOpenEnd) {
-        this.elem.removeEventListener('transitionend', this.onOpenEnd);
-        this.onOpenEnd = null;
-      }
-
-      if (this.onAdjustEnd) {
-        this.elem.removeEventListener('transitionend', this.onAdjustEnd);
-        this.onAdjustEnd = null;
-      }
+      this.events.forEach(function (listener, i) {
+        _this3.elem.removeEventListener('transitionend', listener);
 
-      if (this.onCloseEnd) {
-        this.elem.removeEventListener('transitionend', this.onCloseEnd);
-        this.onCloseEnd = null;
-      }
+        _this3.events.splice(i, 1);
+      });
     }
   }, {
     key: "_emitTransitionEnd",
@@ -114,7 +158,7 @@ var AnimateHeight = function () {
     key: "setElement",
     value: function setElement(elem) {
       var _this$elem,
-          _this3 = this;
+          _this4 = this;
 
       var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
@@ -130,9 +174,9 @@ var AnimateHeight = function () {
 
       if (this.container && this.isInBrowser) {
         this.onResize = function () {
-          clearTimeout(_this3.resizeTimeout);
-          _this3.resizeTimeout = setTimeout(function () {
-            return _this3.setContainerHeight();
+          clearTimeout(_this4.resizeTimeout);
+          _this4.resizeTimeout = setTimeout(function () {
+            return _this4.setContainerHeight();
           }, 300);
         };
 
@@ -160,7 +204,9 @@ var AnimateHeight = function () {
   }, {
     key: "getHeight",
     value: function getHeight() {
-      return parseFloat(this.elem.clientHeight) || null;
+      var _this$elem2;
+
+      return parseFloat(String((_this$elem2 = this.elem) === null || _this$elem2 === void 0 ? void 0 : _this$elem2.clientHeight)) || null;
     }
   }, {
     key: "getWidth",
@@ -214,7 +260,7 @@ var AnimateHeight = function () {
           _window$location,
           _window$location$href,
           _this$opts,
-          _this4 = this;
+          _this5 = this;
 
       var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
           _ref$animate = _ref.animate,
@@ -241,20 +287,20 @@ var AnimateHeight = function () {
         this._callOnStart();
 
         this.reqId1 = window.requestAnimationFrame(function () {
-          if (!_this4.elem) {
+          if (!_this5.elem) {
             return;
           }
 
-          _this4.elem.style.height = "".concat(fromHeight, "px");
+          _this5.elem.style.height = "".concat(fromHeight, "px");
 
-          if (_this4.container) {
-            _this4.container.style.minHeight = "".concat(fromHeight, "px");
+          if (_this5.container) {
+            _this5.container.style.minHeight = "".concat(fromHeight, "px");
           }
 
-          _this4.reqId2 = window.requestAnimationFrame(function () {
-            _this4.elem.style.height = "".concat(toHeight, "px");
+          _this5.reqId2 = window.requestAnimationFrame(function () {
+            _this5.elem.style.height = "".concat(toHeight, "px");
 
-            _this4.setContainerHeight();
+            _this5.setContainerHeight();
           });
         });
       }
@@ -294,7 +340,7 @@ var AnimateHeight = function () {
   }, {
     key: "adjustTo",
     value: function adjustTo() {
-      var _this5 = this;
+      var _this6 = this;
 
       var fromHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       var toHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -315,24 +361,21 @@ var AnimateHeight = function () {
         toHeight = this.getUnknownHeight();
       }
 
-      this.state = 'adjusting';
-
-      this._removeEndEvents();
-
-      if (!this.onAdjustEnd) {
-        this.elem.addEventListener('transitionend', this.onAdjustEnd = function () {
-          if (_this5.elem) {
-            _this5.elem.style.height = 'auto';
+      this._addEndEvents(function (e) {
+        if (e.target === e.currentTarget) {
+          if (_this6.elem) {
+            _this6.elem.style.height = 'auto';
           }
 
-          _this5.state = 'adjusted';
+          _this6.state = 'adjusted';
 
-          _this5._callOnEnd();
+          _this6._callOnEnd();
 
-          _this5.setContainerHeight();
-        });
-      }
+          _this6.setContainerHeight();
+        }
+      });
 
+      this.state = 'adjusting';
       this.start(fromHeight, toHeight, {
         animate: animate
       });
@@ -340,7 +383,7 @@ var AnimateHeight = function () {
   }, {
     key: "open",
     value: function open() {
-      var _this6 = this;
+      var _this7 = this;
 
       var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref3$animate = _ref3.animate,
@@ -351,24 +394,22 @@ var AnimateHeight = function () {
       }
 
       var height = this.getUnknownHeight();
-      this.state = 'opening';
-
-      this._removeEndEvents();
 
-      if (!this.onOpenEnd) {
-        this.elem.addEventListener('transitionend', this.onOpenEnd = function () {
-          if (_this6.elem) {
-            _this6.elem.style.height = 'auto';
+      this._addEndEvents(function (e) {
+        if (e.target === e.currentTarget) {
+          if (_this7.elem) {
+            _this7.elem.style.height = 'auto';
           }
 
-          _this6.state = 'opened';
+          _this7.state = 'opened';
 
-          _this6._callOnEnd();
+          _this7._callOnEnd();
 
-          _this6.setContainerHeight();
-        });
-      }
+          _this7.setContainerHeight();
+        }
+      });
 
+      this.state = 'opening';
       this.start(0, height, {
         animate: animate
       });
@@ -376,7 +417,7 @@ var AnimateHeight = function () {
   }, {
     key: "close",
     value: function close() {
-      var _this7 = this;
+      var _this8 = this;
 
       var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref4$animate = _ref4.animate,
@@ -392,22 +433,19 @@ var AnimateHeight = function () {
         height = this.getUnknownHeight();
       }
 
-      this.state = 'closing';
-
-      this._removeEndEvents();
-
-      if (!this.onCloseEnd) {
-        this.elem.addEventListener('transitionend', this.onCloseEnd = function () {
-          if (_this7.elem) {
-            _this7.elem.style.visibility = 'hidden';
+      this._addEndEvents(function (e) {
+        if (e.target === e.currentTarget) {
+          if (_this8.elem) {
+            _this8.elem.style.visibility = 'hidden';
           }
 
-          _this7.state = 'closed';
+          _this8.state = 'closed';
 
-          _this7._callOnEnd();
-        });
-      }
+          _this8._callOnEnd();
+        }
+      });
 
+      this.state = 'closing';
       this.start(height, 0, {
         animate: animate
       });

package/cjs/shared/Context.d.ts

@@ -18,7 +18,10 @@ import type { TimelineItemProps } from '../components/timeline/TimelineItem';
 import type { VisuallyHiddenProps } from '../components/visually-hidden/VisuallyHidden';
 import type { DrawerProps } from '../components/drawer/types';
 import type { DialogProps } from '../components/dialog/types';
+import type { TooltipProps } from '../components/tooltip/types';
+import type { SectionProps } from '../components/section/Section';
 import type { AnchorProps } from '../elements/Anchor';
+import type { ScrollViewProps } from '../fragments/scroll-view/ScrollView';
 export declare type ContextProps = {
     Button?: Partial<ButtonProps>;
     Anchor?: Partial<AnchorProps>;
@@ -36,6 +39,9 @@ export declare type ContextProps = {
     VisuallyHidden?: Partial<VisuallyHiddenProps>;
     Drawer?: Partial<DrawerProps>;
     Dialog?: Partial<DialogProps>;
+    Tooltip?: Partial<TooltipProps>;
+    Section?: Partial<SectionProps>;
+    ScrollView?: Partial<ScrollViewProps>;
     NumberFormat?: Record<string, unknown>;
     Table?: Record<string, unknown>;
     HelpButton?: Record<string, unknown>;
@@ -84,12 +90,12 @@ export declare type ContextProps = {
     locales?: Locales;
     __newContext?: Record<string, string>;
     updateTranslation?: (locale: Locale, translation: Translation) => void;
-    getTranslation?: (props?: GetTranslationProps) => Translation;
+    getTranslation?: (props: GetTranslationProps) => Translation;
 };
-export declare type GetTranslationProps = {
+export declare type GetTranslationProps = Partial<{
     lang?: Locale;
     locale?: Locale;
-} & Record<string, unknown>;
+}>;
 export declare type Locale = string | 'nb-NO' | 'en-GB' | 'en-US';
 export declare type ComponentTranslationsName = string;
 export declare type ComponentTranslations = Record<string, string>;

package/cjs/shared/Eufemia.js

@@ -21,7 +21,7 @@ function init() {
       _createClass(Eufemia, [{
         key: "version",
         get: function get() {
-          return '9.30.0';
+          return '9.31.0';
         }
       }]);
 

package/cjs/shared/MediaQueryUtils.d.ts

@@ -28,6 +28,10 @@ export declare type MediaQueryProperties = {
      * Reverts the defined queries as a whole.
      */
     not?: boolean;
+    /**
+     * If set to true, no MediaQuery will be used.
+     */
+    disabled?: boolean;
     /**
      * For debugging
      */
@@ -76,7 +80,7 @@ export declare const isMatchMediaSupported: () => boolean;
  * @property {boolean} log - print used query to console
  * @returns MediaQueryList type
  */
-export declare function makeMediaQueryList({ query, when, not, log }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
+export declare function makeMediaQueryList({ query, when, not, log, disabled, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
 /**
  * Adds a listener to the window.matchMedia Browser API
  *

package/cjs/shared/MediaQueryUtils.js

@@ -134,11 +134,13 @@ function makeMediaQueryList() {
       _ref2$not = _ref2.not,
       not = _ref2$not === void 0 ? null : _ref2$not,
       _ref2$log = _ref2.log,
-      log = _ref2$log === void 0 ? false : _ref2$log;
+      log = _ref2$log === void 0 ? false : _ref2$log,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
 
   var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
-  if (!isMatchMediaSupported()) {
+  if (disabled || !isMatchMediaSupported()) {
     return null;
   }
 
@@ -154,7 +156,7 @@ function makeMediaQueryList() {
   var mediaQueryList = window.matchMedia(mediaQueryString);
 
   if (log) {
-    console.log('mediaQueryString', mediaQueryString);
+    console.log('MediaQuery:', mediaQueryString);
   }
 
   return mediaQueryList;

package/cjs/shared/component-helper.d.ts

@@ -5,16 +5,17 @@ export function isTouchDevice(): boolean;
 export function defineNavigator(): void;
 export function convertStatusToStateOnly(status: any, state: any): any;
 export function getStatusState(status: any): boolean;
-export function getInnerRef(ref: any): any;
 export function combineLabelledBy(...params: any[]): any;
 export function combineDescribedBy(...params: any[]): any;
 export function findElementInChildren(children: any, find: any): any;
 export function escapeRegexChars(str: any): any;
 export function removeUndefinedProps(object: any): any;
+export { InteractionInvalidation } from "./helpers/InteractionInvalidation";
+export { registerElement } from "./custom-element";
+export { useEventEmitter } from "./helpers/useEventEmitter";
 export function validateDOMAttributes(props: any, params: any): any;
 export function processChildren(props: any): any;
 export function extend(...objects: any[]): any;
-export function extendPropsWithContext(props: any, defaults?: {}, ...contexts: any[]): any;
 export function isTrue(value: any): boolean;
 export function dispatchCustomElementEvent(src: any, eventName: any, eventObjectOrig: any): any;
 export function toCamelCase(s: any): any;
@@ -38,23 +39,11 @@ export function filterProps(props: any, remove?: any, allowed?: any): {};
 export function makeUniqueId(prefix?: string, length?: number): string;
 export function slugify(s: any): string;
 export function matchAll(string: any, regex: any): any[];
-export function getPreviousSibling(className: [string], element: [HTMLElement]): [HTMLElement];
 export function isChildOfElement(element: HTMLElement, target: HTMLElement, callback?: Function): HTMLElement | null;
 export function roundToNearest(num: any, target: any): any;
-export function isInsideScrollView(currentElement: any, returnElement?: boolean): boolean | [HTMLElement];
+export function isInsideScrollView(currentElement: any, returnElement?: boolean): boolean | Element;
 export function convertJsxToString(elements: any, separator?: any): any;
-export class InteractionInvalidation {
-    bypassElement: HTMLElement;
-    bypassSelectors: any[];
-    setBypassElement(bypassElement: any): InteractionInvalidation;
-    setBypassSelector(bypassSelector: any): InteractionInvalidation;
-    activate(targetElement?: any): void;
-    revert(): void;
-    _nodesToInvalidate: any[];
-    _runInvalidaiton(targetElement: any): void;
-    _revertInvalidation(): void;
-    getNodesToInvalidate(targetElement?: any): any[];
-}
-import { registerElement } from "./custom-element";
+import { getPreviousSibling } from "./helpers/getPreviousSibling";
 import { warn } from "./helpers";
-export { registerElement, warn };
+export { getPreviousSibling, warn };
+export { extendPropsWithContext, extendPropsWithContextInClassComponent } from "./helpers/extendPropsWithContext";