@dnb/eufemia 9.30.0 → 9.31.0

package/es/shared/helpers/EventEmitter.d.ts

@@ -0,0 +1,46 @@
+/**
+ * EventEmitter
+ *
+ * This is a tiny event emitter meant to be used at several components that relay on each other to sync data in parallel.
+ *
+ * - In your class: this._emitterInstance = EventEmitter.createInstance(id) // unique id
+ * - Listen to changes: this._emitterInstance.listen(function)
+ * - Set new data: this._emitterInstance.set({...})
+ * - Update new data: this._emitterInstance.update({...})
+ * - Get new data: this._emitterInstance.get()
+ * - Remove it like this: this._emitterInstance.remove()
+ *
+ * __EEE__ stands for __EUFEMIA_EVENT_EMITTER__
+ */
+declare global {
+    interface Window {
+        __EEE__?: EventEmitterEEE;
+    }
+}
+export declare type EventEmitterId = string;
+export declare type EventEmitterData = Record<string, unknown>;
+export declare type EventEmitterListener = (data: EventEmitterData) => void;
+export declare type EventEmitterEEE = Record<EventEmitterId, EventEmitterScopeObject>;
+export declare type EventEmitterScope = ({
+    __EEE__?: EventEmitterEEE;
+} & Window) | EventEmitter;
+export declare type EventEmitterScopeInstances = Array<EventEmitter>;
+export declare type EventEmitterScopeObject = {
+    count: number;
+    instances: EventEmitterScopeInstances;
+    data: EventEmitterData;
+};
+declare class EventEmitter {
+    static createInstance(id: EventEmitterId): EventEmitter;
+    static __EEE__?: Record<EventEmitterId, EventEmitterScopeObject>;
+    id: EventEmitterId;
+    listeners: Array<EventEmitterListener>;
+    constructor(id: EventEmitterId);
+    update: (data: EventEmitterData) => void;
+    set: (data: EventEmitterData) => void;
+    get: () => EventEmitterData;
+    listen(fn: EventEmitterListener): this;
+    unlisten(fn?: EventEmitterListener | undefined): void;
+    remove(): void;
+}
+export default EventEmitter;

package/es/shared/{EventEmitter.js → helpers/EventEmitter.js}

@@ -10,6 +10,30 @@ class EventEmitter {
   }
 
   constructor(id) {
+    _defineProperty(this, "id", void 0);
+
+    _defineProperty(this, "listeners", void 0);
+
+    _defineProperty(this, "update", data => {
+      this.set(data);
+
+      scope.__EEE__[this.id].instances.forEach(instance => {
+        instance.listeners.forEach(fn => {
+          if (typeof fn === 'function') {
+            fn(instance.get());
+          }
+        });
+      });
+    });
+
+    _defineProperty(this, "set", data => {
+      scope.__EEE__[this.id].data = _objectSpread(_objectSpread({}, scope.__EEE__[this.id].data), data);
+    });
+
+    _defineProperty(this, "get", () => {
+      return scope.__EEE__[this.id].data;
+    });
+
     scope.__EEE__ = scope.__EEE__ || {};
 
     if (!scope.__EEE__[id]) {
@@ -29,26 +53,6 @@ class EventEmitter {
     return this;
   }
 
-  update(data) {
-    this.set(data);
-
-    scope.__EEE__[this.id].instances.forEach(instance => {
-      instance.listeners.forEach(fn => {
-        if (typeof fn === 'function') {
-          fn(instance.get());
-        }
-      });
-    });
-  }
-
-  set(data) {
-    scope.__EEE__[this.id].data = _objectSpread(_objectSpread({}, scope.__EEE__[this.id].data), data);
-  }
-
-  get() {
-    return scope.__EEE__[this.id].data;
-  }
-
   listen(fn) {
     if (!this.listeners.includes(fn)) {
       this.listeners.push(fn);
@@ -59,7 +63,7 @@ class EventEmitter {
 
   unlisten(fn) {
     for (let i = 0, l = this.listeners.length; i < l; i++) {
-      if (!fn || fn && this.listeners[i] === fn) {
+      if (!fn || fn && fn === this.listeners[i]) {
         this.listeners[i] = null;
       }
     }
@@ -76,5 +80,7 @@ class EventEmitter {
 
 }
 
+_defineProperty(EventEmitter, "__EEE__", void 0);
+
 const scope = typeof window !== 'undefined' ? window : EventEmitter;
 export default EventEmitter;

package/es/shared/helpers/InteractionInvalidation.d.ts

@@ -0,0 +1,30 @@
+export declare type TargetElement = HTMLElement;
+export declare type TargetSelector = string;
+export declare type HTMLElementNode = TargetElement & {
+    __ariahidden: string;
+    __tabindex: string;
+};
+export declare type InteractionInvalidationOptions = {
+    /**
+     * Use false to omit processing aria-hidden. Defaults to true.
+     */
+    ariaHidden?: boolean;
+    /**
+     * Use false to omit processing tabindex. Defaults to true.
+     */
+    tabIndex?: boolean;
+};
+export declare class InteractionInvalidation {
+    bypassElement: TargetElement;
+    bypassSelectors: Array<TargetSelector>;
+    _nodesToInvalidate: Array<HTMLElementNode>;
+    options: InteractionInvalidationOptions;
+    constructor(options?: InteractionInvalidationOptions);
+    setBypassElement(bypassElement: TargetElement): this;
+    setBypassSelector(bypassSelector: TargetSelector | Array<TargetSelector>): this;
+    activate(targetElement?: TargetElement | TargetSelector): void;
+    revert(): void;
+    _runInvalidaiton(targetElement: TargetElement | TargetSelector): void;
+    _revertInvalidation(): void;
+    getNodesToInvalidate(targetElement?: TargetElement | TargetSelector): Array<HTMLElementNode>;
+}

package/es/shared/helpers/InteractionInvalidation.js

@@ -0,0 +1,141 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { IS_IE11 } from '../helpers';
+export class InteractionInvalidation {
+  constructor(options = null) {
+    _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;
+  }
+
+  setBypassElement(bypassElement) {
+    if (bypassElement instanceof HTMLElement) {
+      this.bypassElement = bypassElement;
+    }
+
+    return this;
+  }
+
+  setBypassSelector(bypassSelector) {
+    if (!Array.isArray(bypassSelector)) {
+      bypassSelector = [bypassSelector];
+    }
+
+    this.bypassSelectors = bypassSelector;
+    return this;
+  }
+
+  activate(targetElement = null) {
+    if (!this._nodesToInvalidate) {
+      this._runInvalidaiton(targetElement);
+    }
+  }
+
+  revert() {
+    this._revertInvalidation();
+
+    this._nodesToInvalidate = null;
+  }
+
+  _runInvalidaiton(targetElement) {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    this._nodesToInvalidate = this.getNodesToInvalidate(targetElement);
+
+    for (const node of this._nodesToInvalidate) {
+      if (!node) {
+        continue;
+      }
+
+      if (this.options.tabIndex !== false) {
+        const tabindex = node.getAttribute('tabindex');
+
+        if (tabindex !== null && typeof node.__tabindex === 'undefined') {
+          node.__tabindex = tabindex;
+        }
+
+        node.setAttribute('tabindex', '-1');
+      }
+
+      if (this.options.ariaHidden !== false) {
+        const ariahidden = node.getAttribute('aria-hidden');
+
+        if (ariahidden !== null && typeof node.__ariahidden === 'undefined') {
+          node.__ariahidden = ariahidden;
+        }
+
+        node.setAttribute('aria-hidden', 'true');
+      }
+    }
+  }
+
+  _revertInvalidation() {
+    if (!Array.isArray(this._nodesToInvalidate)) {
+      return;
+    }
+
+    for (const node of this._nodesToInvalidate) {
+      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');
+        }
+      }
+    }
+  }
+
+  getNodesToInvalidate(targetElement = null) {
+    if (typeof document === 'undefined') {
+      return [];
+    }
+
+    if (typeof targetElement === 'string') {
+      targetElement = document.querySelector(targetElement);
+    }
+
+    const rootSelector = targetElement ? '*' : 'html *';
+    const elementSelector = this.bypassSelectors.map(s => `:not(${s})`).join('');
+    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/{cjs/shared/hooks/usePropsWithContext.d.ts → es/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/es/shared/{hooks/usePropsWithContext.js → helpers/extendPropsWithContext.js}

@@ -4,23 +4,35 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
-function usePropsWithContext(props, defaults = {}, ...contexts) {
-  const context = contexts.reduce((acc, cur) => {
+export function extendPropsWithContext(props, defaults = {}, ...contexts) {
+  props = _objectSpread(_objectSpread({}, defaults), props);
+  return _objectSpread(_objectSpread({}, props), reduceContextWithValue(props, defaults, contexts));
+}
+export function extendPropsWithContextInClassComponent(props, defaults = {}, ...contexts) {
+  return _objectSpread(_objectSpread({}, props), reduceContextWithValue(props, defaults, contexts, {
+    checkPropKey: true
+  }));
+}
+
+function reduceContext(contexts) {
+  return contexts.reduce((acc, cur) => {
     if (cur) {
       acc = _objectSpread(_objectSpread({}, acc), cur);
     }
 
     return acc;
   }, {});
-  props = _objectSpread(_objectSpread({}, defaults), props);
-  return _objectSpread(_objectSpread({}, props), Object.entries(context).reduce((acc, [key, value]) => {
-    if (props[key] === defaults[key]) {
+}
+
+function reduceContextWithValue(props, defaults, contexts, {
+  checkPropKey = false
+} = {}) {
+  const context = reduceContext(contexts);
+  return Object.entries(context).reduce((acc, [key, value]) => {
+    if ((checkPropKey ? Object.prototype.hasOwnProperty.call(props, key) : true) && props[key] === defaults[key]) {
       acc[key] = value;
     }
 
     return acc;
-  }, {}));
-}
-
-export { usePropsWithContext };
-export default usePropsWithContext;
+  }, {});
+}

package/es/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/es/shared/helpers/filterValidProps.js

@@ -3,7 +3,7 @@ function filterValidProps(props, validKeys, excludeKeys) {
         o = Object.prototype.hasOwnProperty;
 
   for (const 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/es/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/es/shared/helpers/getPreviousSibling.js

@@ -0,0 +1,33 @@
+import { warn } from '../helpers';
+export const getPreviousSibling = (selector, element) => {
+  try {
+    const tagName = /[A-Z]/.test(selector) ? selector : null;
+    const className = tagName ? null : selector.replace(/^\./, '');
+
+    const 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/es/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/es/shared/helpers/useEventEmitter.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import EventEmitter from './EventEmitter';
+export const useEventEmitter = (id = null) => {
+  const [, updateState] = React.useState(null);
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+  React.useEffect(() => () => emitter === null || emitter === void 0 ? void 0 : emitter.unlisten(forceUpdate), []);
+  const [emitter] = React.useState(() => {
+    if (id) {
+      const emitter = EventEmitter.createInstance(id);
+      emitter.listen(forceUpdate);
+      return emitter;
+    }
+  });
+
+  if (!emitter) {
+    return {
+      data: null
+    };
+  }
+
+  const {
+    get,
+    update
+  } = emitter;
+  const data = get();
+  return {
+    data,
+    update
+  };
+};

package/es/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/es/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/es/shared/locales/en-GB.d.ts

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

package/es/shared/locales/en-GB.js

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

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

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

package/es/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/es/shared/locales/nb-NO.d.ts

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

package/es/shared/locales/nb-NO.js

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

package/es/shared/useMediaQuery.js

@@ -10,9 +10,16 @@ export default function useMediaQuery(props) {
     query,
     when,
     not,
-    matchOnSSR
+    matchOnSSR,
+    disabled
   } = props;
-  let [matches] = React.useState(() => !isMatchMediaSupported() && isTrue(matchOnSSR) ? true : false);
+  let matches = React.useMemo(() => {
+    if (disabled) {
+      return false;
+    }
+
+    return isTrue(matchOnSSR) && !isMatchMediaSupported();
+  }, [disabled, matchOnSSR]);
   const mediaQueryList = React.useRef(makeMediaQueryList(props, context.breakpoints));
 
   if ((_mediaQueryList$curre = mediaQueryList.current) !== null && _mediaQueryList$curre !== void 0 && _mediaQueryList$curre.matches) {
@@ -21,7 +28,11 @@ export default function useMediaQuery(props) {
 
   const [match, matchUpdate] = React.useState(matches);
   const listenerRef = React.useRef();
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
+    if (disabled) {
+      return;
+    }
+
     if (typeof listenerRef.current === 'function') {
       listenerRef.current();
       mediaQueryList.current = makeMediaQueryList(props, context.breakpoints);
@@ -30,6 +41,6 @@ export default function useMediaQuery(props) {
 
     listenerRef.current = createMediaQueryListener(mediaQueryList.current, match => matchUpdate(match));
     return listenerRef.current;
-  }, [query, when, not]);
+  }, [query, when, not, disabled]);
   return match;
 }

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

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

package/es/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; }