@dnb/eufemia 9.29.0 → 9.31.0

package/shared/helpers/InteractionInvalidation.js

@@ -0,0 +1,215 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.string.ends-with.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.string.match.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.includes.js";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import { IS_IE11 } from '../helpers';
+export var InteractionInvalidation = function () {
+  function InteractionInvalidation() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+    _classCallCheck(this, InteractionInvalidation);
+
+    _defineProperty(this, "bypassElement", void 0);
+
+    _defineProperty(this, "bypassSelectors", void 0);
+
+    _defineProperty(this, "_nodesToInvalidate", void 0);
+
+    _defineProperty(this, "options", void 0);
+
+    this.bypassElement = null;
+    this.bypassSelectors = [];
+    this.options = options || {};
+    return this;
+  }
+
+  _createClass(InteractionInvalidation, [{
+    key: "setBypassElement",
+    value: function setBypassElement(bypassElement) {
+      if (bypassElement instanceof HTMLElement) {
+        this.bypassElement = bypassElement;
+      }
+
+      return this;
+    }
+  }, {
+    key: "setBypassSelector",
+    value: function setBypassSelector(bypassSelector) {
+      if (!Array.isArray(bypassSelector)) {
+        bypassSelector = [bypassSelector];
+      }
+
+      this.bypassSelectors = bypassSelector;
+      return this;
+    }
+  }, {
+    key: "activate",
+    value: function activate() {
+      var targetElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+      if (!this._nodesToInvalidate) {
+        this._runInvalidaiton(targetElement);
+      }
+    }
+  }, {
+    key: "revert",
+    value: function revert() {
+      this._revertInvalidation();
+
+      this._nodesToInvalidate = null;
+    }
+  }, {
+    key: "_runInvalidaiton",
+    value: function _runInvalidaiton(targetElement) {
+      if (typeof document === 'undefined') {
+        return;
+      }
+
+      this._nodesToInvalidate = this.getNodesToInvalidate(targetElement);
+
+      var _iterator = _createForOfIteratorHelper(this._nodesToInvalidate),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var node = _step.value;
+
+          if (!node) {
+            continue;
+          }
+
+          if (this.options.tabIndex !== false) {
+            var tabindex = node.getAttribute('tabindex');
+
+            if (tabindex !== null && typeof node.__tabindex === 'undefined') {
+              node.__tabindex = tabindex;
+            }
+
+            node.setAttribute('tabindex', '-1');
+          }
+
+          if (this.options.ariaHidden !== false) {
+            var ariahidden = node.getAttribute('aria-hidden');
+
+            if (ariahidden !== null && typeof node.__ariahidden === 'undefined') {
+              node.__ariahidden = ariahidden;
+            }
+
+            node.setAttribute('aria-hidden', 'true');
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  }, {
+    key: "_revertInvalidation",
+    value: function _revertInvalidation() {
+      if (!Array.isArray(this._nodesToInvalidate)) {
+        return;
+      }
+
+      var _iterator2 = _createForOfIteratorHelper(this._nodesToInvalidate),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var node = _step2.value;
+
+          if (!node) {
+            continue;
+          }
+
+          if (this.options.tabIndex !== false) {
+            if (typeof node.__tabindex !== 'undefined') {
+              node.setAttribute('tabindex', node.__tabindex);
+              delete node.__tabindex;
+            } else {
+              node.removeAttribute('tabindex');
+            }
+          }
+
+          if (this.options.ariaHidden !== false) {
+            if (typeof node.__ariahidden !== 'undefined') {
+              node.setAttribute('aria-hidden', node.__ariahidden);
+              delete node.__ariahidden;
+            } else {
+              node.removeAttribute('aria-hidden');
+            }
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+  }, {
+    key: "getNodesToInvalidate",
+    value: function getNodesToInvalidate() {
+      var targetElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+      if (typeof document === 'undefined') {
+        return [];
+      }
+
+      if (typeof targetElement === 'string') {
+        targetElement = document.querySelector(targetElement);
+      }
+
+      var rootSelector = targetElement ? '*' : 'html *';
+      var elementSelector = this.bypassSelectors.map(function (s) {
+        return ":not(".concat(s, ")");
+      }).join('');
+      var selector = "".concat(rootSelector, " ").concat(elementSelector, ":not(script):not(style):not(path):not(head *)");
+
+      if (IS_IE11 || process.env.NODE_ENV === 'test') {
+        var excludeSelectors = [];
+        var testSelector = selector.split(':').map(function (localSel) {
+          if (localSel.endsWith(' *)')) {
+            excludeSelectors.push.apply(excludeSelectors, _toConsumableArray(Array.from((targetElement || document.documentElement).querySelectorAll(localSel.match(/\(([^)]*)\)/)[1]))));
+            localSel = localSel.replace(' *', '');
+          }
+
+          return localSel;
+        }).join(':');
+        return Array.from((targetElement || document.documentElement).querySelectorAll(testSelector)).filter(function (node) {
+          return !excludeSelectors.includes(node);
+        });
+      }
+
+      return Array.from((targetElement || document.documentElement).querySelectorAll(selector));
+    }
+  }]);
+
+  return InteractionInvalidation;
+}();

package/{es/shared/hooks/usePropsWithContext.d.ts → shared/helpers/extendPropsWithContext.d.ts}

@@ -9,6 +9,5 @@ export declare type Contexts = Array<Record<string, unknown>>;
  * @param contexts the rest of all context to merge
  * @returns merged properties
  */
-declare function usePropsWithContext<Props>(props: Props, defaults?: DefaultsProps, ...contexts: Contexts): Props & {};
-export { usePropsWithContext };
-export default usePropsWithContext;
+export declare function extendPropsWithContext<Props>(props: Props, defaults?: DefaultsProps, ...contexts: Contexts): Props & {};
+export declare function extendPropsWithContextInClassComponent<Props>(props: Props, defaults?: DefaultsProps, ...contexts: Contexts): Props & {};

package/shared/{hooks/usePropsWithContext.js → helpers/extendPropsWithContext.js}

@@ -6,42 +6,61 @@ import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.entries.js";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.entries.js";
-
-function usePropsWithContext(props) {
+export function extendPropsWithContext(props) {
   var defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  props = _objectSpread(_objectSpread({}, defaults), props);
 
   for (var _len = arguments.length, contexts = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     contexts[_key - 2] = arguments[_key];
   }
 
-  var context = contexts.reduce(function (acc, cur) {
+  return _objectSpread(_objectSpread({}, props), reduceContextWithValue(props, defaults, contexts));
+}
+export function extendPropsWithContextInClassComponent(props) {
+  var defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  for (var _len2 = arguments.length, contexts = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+    contexts[_key2 - 2] = arguments[_key2];
+  }
+
+  return _objectSpread(_objectSpread({}, props), reduceContextWithValue(props, defaults, contexts, {
+    checkPropKey: true
+  }));
+}
+
+function reduceContext(contexts) {
+  return contexts.reduce(function (acc, cur) {
     if (cur) {
       acc = _objectSpread(_objectSpread({}, acc), cur);
     }
 
     return acc;
   }, {});
-  props = _objectSpread(_objectSpread({}, defaults), props);
-  return _objectSpread(_objectSpread({}, props), Object.entries(context).reduce(function (acc, _ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
+}
 
-    if (props[key] === defaults[key]) {
+function reduceContextWithValue(props, defaults, contexts) {
+  var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+      _ref$checkPropKey = _ref.checkPropKey,
+      checkPropKey = _ref$checkPropKey === void 0 ? false : _ref$checkPropKey;
+
+  var context = reduceContext(contexts);
+  return Object.entries(context).reduce(function (acc, _ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+
+    if ((checkPropKey ? Object.prototype.hasOwnProperty.call(props, key) : true) && props[key] === defaults[key]) {
       acc[key] = value;
     }
 
     return acc;
-  }, {}));
-}
-
-export { usePropsWithContext };
-export default usePropsWithContext;
+  }, {});
+}

package/shared/helpers/filterValidProps.d.ts

@@ -7,5 +7,5 @@
  * @param excludeKeys object with keys that should be excluded
  * @returns filtered properties
  */
-declare function filterValidProps<Props>(props: Props, validKeys: Record<string, unknown>, excludeKeys?: Record<string, unknown>): Props;
+declare function filterValidProps<Props>(props: Props, validKeys?: Record<string, unknown>, excludeKeys?: Record<string, unknown>): Props;
 export { filterValidProps };

package/shared/helpers/filterValidProps.js

@@ -3,7 +3,7 @@ function filterValidProps(props, validKeys, excludeKeys) {
       o = Object.prototype.hasOwnProperty;
 
   for (var key in props) {
-    if (o.call(validKeys, key) && (!excludeKeys || excludeKeys && !o.call(excludeKeys, key))) {
+    if ((!validKeys || validKeys && o.call(validKeys, key)) && (!excludeKeys || excludeKeys && !o.call(excludeKeys, key))) {
       res[key] = props[key];
     }
   }

package/shared/helpers/getPreviousSibling.d.ts

@@ -0,0 +1,10 @@
+export declare type TargetSelector = string;
+export declare type RootElement = Element;
+/**
+ * getPreviousSibling traverses down the DOM tree until it finds the wanted element
+ *
+ * @param  {string} selector CSS selector name (HTML class name or selector or tag name with upper case chars, like BUTTON)
+ * @param  {Element} element The element to begin with
+ * @return {Element} Found element
+ */
+export declare const getPreviousSibling: (selector: TargetSelector, element: RootElement) => Element | null;

package/shared/helpers/getPreviousSibling.js

@@ -0,0 +1,35 @@
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import { warn } from '../helpers';
+export var getPreviousSibling = function getPreviousSibling(selector, element) {
+  try {
+    var tagName = /[A-Z]/.test(selector) ? selector : null;
+    var className = tagName ? null : selector.replace(/^\./, '');
+
+    var contains = function contains(element) {
+      if (!element) {
+        return null;
+      }
+
+      if (tagName) {
+        return (element === null || element === void 0 ? void 0 : element.tagName) === tagName;
+      }
+
+      return element === null || element === void 0 ? void 0 : element.classList.contains(className);
+    };
+
+    if (contains(element)) {
+      return element;
+    }
+
+    while ((element = (_element = element) === null || _element === void 0 ? void 0 : _element.parentElement) && !contains(element)) {
+      var _element;
+
+      ;
+    }
+  } catch (e) {
+    warn(e);
+  }
+
+  return element;
+};

package/shared/helpers/useEventEmitter.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitterData, EventEmitterId } from './EventEmitter';
+/**
+ * Use this React Hook as an easy way to sync data between components without a Context/Provider
+ *
+ * @param {string} id unique id, same as used in the "lined place"
+ * @returns React Hook { data, update }
+ */
+export declare const useEventEmitter: (id?: EventEmitterId) => {
+    data: any;
+    update?: undefined;
+} | {
+    data: EventEmitterData;
+    update: (data: EventEmitterData) => void;
+};

package/shared/helpers/useEventEmitter.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import EventEmitter from './EventEmitter';
+export var useEventEmitter = function useEventEmitter() {
+  var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      updateState = _React$useState2[1];
+
+  var forceUpdate = React.useCallback(function () {
+    return updateState({});
+  }, []);
+  React.useEffect(function () {
+    return function () {
+      return emitter === null || emitter === void 0 ? void 0 : emitter.unlisten(forceUpdate);
+    };
+  }, []);
+
+  var _React$useState3 = React.useState(function () {
+    if (id) {
+      var _emitter = EventEmitter.createInstance(id);
+
+      _emitter.listen(forceUpdate);
+
+      return _emitter;
+    }
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 1),
+      emitter = _React$useState4[0];
+
+  if (!emitter) {
+    return {
+      data: null
+    };
+  }
+
+  var get = emitter.get,
+      update = emitter.update;
+  var data = get();
+  return {
+    data: data,
+    update: update
+  };
+};

package/shared/helpers/withCamelCaseProps.js

@@ -104,6 +104,13 @@ function convertCamelCaseProps(props) {
   var newProps = _objectSpread({}, props);
 
   for (var key in props) {
+    switch (key) {
+      case 'className':
+        {
+          continue;
+        }
+    }
+
     if (/^[a-z]+[A-Z]/.test(key)) {
       newProps[toSnakeCase(key)] = props[key];
       delete newProps[key];

package/shared/helpers.d.ts

@@ -34,6 +34,8 @@ export function copyToClipboard(string: any): Promise<any>;
 /**
  * Global helpers
  *
+ * NB: Do not import other deps in this file.
+ * Just to have things clean and one directional.
  */
 export const PLATFORM_MAC: "Mac|iPad|iPhone|iPod";
 export const PLATFORM_WIN: "Win";

package/shared/interfaces.d.ts

@@ -1,12 +1,13 @@
-export interface ISpacingProps extends ISpacingElementProps {
+/// <reference types="react" />
+export declare type ISpacingProps = ISpacingElementProps & {
     space?: SpaceTypes | ISpacingElementProps;
-}
-export interface ISpacingElementProps {
+};
+export declare type ISpacingElementProps = {
     top?: SpaceTypes;
     right?: SpaceTypes;
     bottom?: SpaceTypes;
     left?: SpaceTypes;
-}
+};
 export declare type SpaceTypes = string | boolean | number;
 export declare type DataAttributeTypes = {
     /**
@@ -21,3 +22,4 @@ export declare type DataAttributeTypes = {
      */
     'data-testid'?: string;
 };
+export declare type DynamicElement = keyof JSX.IntrinsicElements | React.FunctionComponent;

package/shared/locales/en-GB.d.ts

@@ -119,6 +119,9 @@ declare var _default: {
         Logo: {
             alt: string;
         };
+        Tag: {
+            removeIconTitle: string;
+        };
     };
 };
 export default _default;

package/shared/locales/en-GB.js

@@ -118,6 +118,9 @@ export default {
     },
     Logo: {
       alt: 'DNB Logo'
+    },
+    Tag: {
+      removeIconTitle: 'Remove'
     }
   }
 };

package/shared/locales/en-US.d.ts

@@ -120,6 +120,9 @@ declare var _default: {
         Logo: {
             alt: string;
         };
+        Tag: {
+            removeIconTitle: string;
+        };
     };
 };
 export default _default;

package/shared/locales/index.d.ts

@@ -119,6 +119,9 @@ declare var _default: {
         Logo: {
             alt: string;
         };
+        Tag: {
+            removeIconTitle: string;
+        };
     };
     'nb-NO': {
         TimelineItem: {
@@ -240,6 +243,9 @@ declare var _default: {
         Logo: {
             alt: string;
         };
+        Tag: {
+            removeIconTitle: string;
+        };
     };
 };
 export default _default;

package/shared/locales/nb-NO.d.ts

@@ -119,6 +119,9 @@ declare var _default: {
         Logo: {
             alt: string;
         };
+        Tag: {
+            removeIconTitle: string;
+        };
     };
 };
 export default _default;

package/shared/locales/nb-NO.js

@@ -118,6 +118,9 @@ export default {
     },
     Logo: {
       alt: 'DNB Logo'
+    },
+    Tag: {
+      removeIconTitle: 'Fjern'
     }
   }
 };

package/shared/useMediaQuery.js

@@ -10,27 +10,32 @@ export default function useMediaQuery(props) {
   var query = props.query,
       when = props.when,
       not = props.not,
-      matchOnSSR = props.matchOnSSR;
-
-  var _React$useState = React.useState(function () {
-    return !isMatchMediaSupported() && isTrue(matchOnSSR) ? true : false;
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 1),
-      matches = _React$useState2[0];
+      matchOnSSR = props.matchOnSSR,
+      disabled = props.disabled;
+  var matches = React.useMemo(function () {
+    if (disabled) {
+      return false;
+    }
 
+    return isTrue(matchOnSSR) && !isMatchMediaSupported();
+  }, [disabled, matchOnSSR]);
   var mediaQueryList = React.useRef(makeMediaQueryList(props, context.breakpoints));
 
   if ((_mediaQueryList$curre = mediaQueryList.current) !== null && _mediaQueryList$curre !== void 0 && _mediaQueryList$curre.matches) {
     matches = true;
   }
 
-  var _React$useState3 = React.useState(matches),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      match = _React$useState4[0],
-      matchUpdate = _React$useState4[1];
+  var _React$useState = React.useState(matches),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      match = _React$useState2[0],
+      matchUpdate = _React$useState2[1];
 
   var listenerRef = React.useRef();
-  React.useEffect(function () {
+  React.useLayoutEffect(function () {
+    if (disabled) {
+      return;
+    }
+
     if (typeof listenerRef.current === 'function') {
       listenerRef.current();
       mediaQueryList.current = makeMediaQueryList(props, context.breakpoints);
@@ -41,6 +46,6 @@ export default function useMediaQuery(props) {
       return matchUpdate(match);
     });
     return listenerRef.current;
-  }, [query, when, not]);
+  }, [query, when, not, disabled]);
   return match;
 }

package/style/core/helper-classes/helper-classes.scss

@@ -3,6 +3,10 @@
  *
  */
 
+:root {
+  --easing-default: #{$defaultEasing};
+}
+
 // Focus management
 .dnb-no-focus {
   outline: none;

package/style/dnb-ui-basis.css

@@ -166,6 +166,9 @@
  * Helper Classes
  *
  */
+:root {
+  --easing-default: cubic-bezier(0.42, 0, 0, 1); }
+
 .dnb-no-focus {
   outline: none; }