@dnb/eufemia 9.32.0 → 9.33.0

package/components/tooltip/TooltipPortal.js

@@ -6,7 +6,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { makeUniqueId, warn } from '../../shared/component-helper';
 import TooltipContainer from './TooltipContainer';
-import { getTargetElement } from './TooltipHelpers';
 var tooltipPortal;
 
 if (typeof globalThis !== 'undefined') {
@@ -18,7 +17,7 @@ if (typeof globalThis !== 'undefined') {
 
 function TooltipPortal(props) {
   var active = props.active,
-      target = props.target,
+      targetElement = props.targetElement,
       hideDelay = props.hideDelay,
       keepInDOM = props.keepInDOM,
       noAnimation = props.noAnimation,
@@ -38,41 +37,61 @@ function TooltipPortal(props) {
     return props.group || makeUniqueId();
   }),
       _React$useState6 = _slicedToArray(_React$useState5, 1),
-      group = _React$useState6[0];
+      id = _React$useState6[0];
 
   var isInDOM = React.useRef(false);
   var hasGroup = props.group;
 
-  if (tooltipPortal[group]) {
-    tooltipPortal[group].inDOM = isInDOM.current;
-  }
-
   var makePortal = function makePortal() {
-    if (!tooltipPortal[group]) {
-      tooltipPortal[group] = {
-        node: hasGroup ? createGroupElement(group) : createRootElement('dnb-tooltip__portal')
+    if (!tooltipPortal[id]) {
+      tooltipPortal[id] = {
+        count: 0,
+        node: hasGroup ? createGroupElement(id) : createRootElement()
       };
     }
   };
 
-  var removeFromDOM = function removeFromDOM() {
-    if (!keepInDOM && hasGroup && tooltipPortal[group] && !tooltipPortal[group].inDOM) {
-      ReactDOM.unmountComponentAtNode(tooltipPortal[group].node);
+  var clearTimers = function clearTimers() {
+    var _tooltipPortal$id, _tooltipPortal$id2;
+
+    clearTimeout((_tooltipPortal$id = tooltipPortal[id]) === null || _tooltipPortal$id === void 0 ? void 0 : _tooltipPortal$id.delayTimeout);
+    clearTimeout((_tooltipPortal$id2 = tooltipPortal[id]) === null || _tooltipPortal$id2 === void 0 ? void 0 : _tooltipPortal$id2.hiddenTimeout);
+  };
+
+  var removeFromDOM = function removeFromDOM(hide) {
+    if (isActive && hide) {
+      return;
+    }
+
+    var ref = tooltipPortal[id];
+
+    if (ref !== null && ref !== void 0 && ref.node) {
+      ref.count--;
+
+      if (ref.count <= 0) {
+        if (hasGroup) {
+          ReactDOM.unmountComponentAtNode(ref.node);
+          createRootElement().removeChild(ref.node);
+        }
+
+        delete tooltipPortal[id];
+      }
     }
   };
 
   React.useEffect(function () {
-    var _tooltipPortal$group, _tooltipPortal$group2;
-
     setIsMounted(true);
-    clearTimeout((_tooltipPortal$group = tooltipPortal[group]) === null || _tooltipPortal$group === void 0 ? void 0 : _tooltipPortal$group.delayTimeout);
-    clearTimeout((_tooltipPortal$group2 = tooltipPortal[group]) === null || _tooltipPortal$group2 === void 0 ? void 0 : _tooltipPortal$group2.hiddenTimeout);
+    clearTimers();
 
     if (active) {
       makePortal();
       setIsActive(true);
       isInDOM.current = true;
 
+      if (!isMounted) {
+        tooltipPortal[id].count++;
+      }
+
       if (hasGroup) {
         renderPortal(true);
       }
@@ -87,19 +106,21 @@ function TooltipPortal(props) {
 
       var delayHidden = function delayHidden() {
         isInDOM.current = false;
-        removeFromDOM();
+        removeFromDOM(true);
       };
 
       if (noAnimation || globalThis.IS_TEST) {
         delayRender();
         delayHidden();
-      } else if (tooltipPortal[group]) {
+      } else if (tooltipPortal[id]) {
         var delay = parseFloat(String(hideDelay));
-        tooltipPortal[group].delayTimeout = setTimeout(delayRender, delay);
-        tooltipPortal[group].hiddenTimeout = setTimeout(delayHidden, delay + 300);
+        tooltipPortal[id].delayTimeout = setTimeout(delayRender, delay);
+        tooltipPortal[id].hiddenTimeout = setTimeout(delayHidden, delay + 300);
       }
     }
-  }, [children, active, group, hideDelay, noAnimation]);
+
+    return clearTimers;
+  }, [children, active, id, hideDelay, noAnimation]);
   React.useEffect(function () {
     if (keepInDOM) {
       makePortal();
@@ -109,13 +130,13 @@ function TooltipPortal(props) {
   }, []);
 
   var renderPortal = function renderPortal(isActive) {
-    var _tooltipPortal$group3;
+    var _tooltipPortal$id3;
 
-    var root = (_tooltipPortal$group3 = tooltipPortal[group]) === null || _tooltipPortal$group3 === void 0 ? void 0 : _tooltipPortal$group3.node;
+    var root = (_tooltipPortal$id3 = tooltipPortal[id]) === null || _tooltipPortal$id3 === void 0 ? void 0 : _tooltipPortal$id3.node;
 
     if (root && hasGroup && isInDOM.current) {
       ReactDOM.render(React.createElement(TooltipContainer, _extends({}, props, {
-        targetElement: getTargetElement(target),
+        targetElement: targetElement,
         active: isActive
       })), root);
     }
@@ -124,13 +145,13 @@ function TooltipPortal(props) {
   };
 
   if (!hasGroup) {
-    var _tooltipPortal$group4;
+    var _tooltipPortal$id4;
 
-    var root = (_tooltipPortal$group4 = tooltipPortal[group]) === null || _tooltipPortal$group4 === void 0 ? void 0 : _tooltipPortal$group4.node;
+    var root = (_tooltipPortal$id4 = tooltipPortal[id]) === null || _tooltipPortal$id4 === void 0 ? void 0 : _tooltipPortal$id4.node;
 
     if (root) {
       return ReactDOM.createPortal(isInDOM.current || keepInDOM ? React.createElement(TooltipContainer, _extends({}, props, {
-        targetElement: getTargetElement(target),
+        targetElement: targetElement,
         active: isActive
       }), children) : null, root);
     }
@@ -146,14 +167,16 @@ var createGroupElement = function createGroupElement(id) {
     var elem = document.createElement('div');
     elem.classList.add('dnb-tooltip__group');
     elem.setAttribute('id', id);
-    createRootElement('dnb-tooltip__portal').appendChild(elem);
+    createRootElement().appendChild(elem);
     return elem;
   } catch (e) {
     warn(e);
   }
 };
 
-var createRootElement = function createRootElement(className) {
+var createRootElement = function createRootElement() {
+  var className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'dnb-tooltip__portal';
+
   try {
     var element = document.querySelector(".".concat(className));
 

package/components/tooltip/TooltipWithEvents.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import { TooltipProps } from './types';
 declare type TooltipWithEventsProps = {
-    target: React.ReactElement & React.RefObject<HTMLElement>;
+    target: HTMLElement | React.ReactElement;
     active: boolean;
     internalId: string;
 };

package/components/tooltip/TooltipWithEvents.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "target"];
+var _excluded = ["children"];
 
 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; }
 
@@ -20,15 +20,23 @@ import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
 import React from 'react';
 import { combineDescribedBy, warn } from '../../shared/component-helper';
+import TooltipContainer from './TooltipContainer';
 import { getRefElement, injectTooltipSemantic, isTouch, useHandleAria } from './TooltipHelpers';
 import TooltipPortal from './TooltipPortal';
 
 function TooltipWithEvents(props) {
   var children = props.children,
-      target = props.target,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var _React$useState = React.useState(false),
+  var active = restProps.active,
+      target = restProps.target,
+      skipPortal = restProps.skipPortal,
+      noAnimation = restProps.noAnimation,
+      showDelay = restProps.showDelay,
+      hideDelay = restProps.hideDelay,
+      internalId = restProps.internalId;
+
+  var _React$useState = React.useState(active),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isActive = _React$useState2[0],
       setIsActive = _React$useState2[1];
@@ -38,21 +46,23 @@ function TooltipWithEvents(props) {
       isNotSemanticElement = _React$useState4[0],
       setIsNotSemanticElement = _React$useState4[1];
 
-  var _React$useState5 = React.useState(false),
+  var _React$useState5 = React.useState(!target),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       isMounted = _React$useState6[0],
       setIsMounted = _React$useState6[1];
 
-  var onEnterTimeout = React.useRef();
-  var targetRef = React.useRef();
+  var delayTimeout = React.useRef();
   var cloneRef = React.useRef();
-  React.useEffect(function () {
-    targetRef.current = getRefElement(cloneRef);
+  var targetRef = React.useRef();
 
-    if (!targetRef.current) {
-      targetRef.current = target.current;
-    }
+  var clearTimers = function clearTimers() {
+    clearTimeout(delayTimeout.current);
+  };
 
+  React.useLayoutEffect(function () {
+    targetRef.current = getRefElement(cloneRef);
+  }, [target]);
+  React.useLayoutEffect(function () {
     if (targetRef.current) {
       setIsMounted(true);
       addEvents(targetRef.current);
@@ -60,28 +70,14 @@ function TooltipWithEvents(props) {
     }
 
     return function () {
-      clearTimeout(onEnterTimeout.current);
-      var element = targetRef.current;
-
-      if (element) {
-        try {
-          element.removeEventListener('click', onMouseLeave);
-          element.removeEventListener('focus', onFocus);
-          element.removeEventListener('blur', onMouseLeave);
-          element.removeEventListener('mouseenter', onMouseEnter);
-          element.removeEventListener('mouseleave', onMouseLeave);
-          element.removeEventListener('touchstart', onMouseEnter);
-          element.removeEventListener('touchend', onMouseLeave);
-        } catch (e) {
-          warn(e);
-        }
-      }
+      clearTimers();
+      removeEvents(targetRef.current);
     };
   }, []);
 
   var handleSemanticElement = function handleSemanticElement() {
     try {
-      var targetElement = document.querySelector("*[aria-describedby*=\"".concat(props.internalId, "\"]"));
+      var targetElement = document.querySelector("*[aria-describedby*=\"".concat(internalId, "\"]"));
 
       if (targetElement) {
         var role = targetElement.getAttribute('role');
@@ -110,16 +106,26 @@ function TooltipWithEvents(props) {
     }
   };
 
-  var onFocus = function onFocus(e) {
+  var removeEvents = function removeEvents(element) {
+    if (!element) return;
+
     try {
-      if (document.documentElement.getAttribute('data-whatintent') === 'keyboard') {
-        return onMouseEnter(e);
-      }
+      element.removeEventListener('click', onMouseLeave);
+      element.removeEventListener('focus', onFocus);
+      element.removeEventListener('blur', onMouseLeave);
+      element.removeEventListener('mouseenter', onMouseEnter);
+      element.removeEventListener('mouseleave', onMouseLeave);
+      element.removeEventListener('touchstart', onMouseEnter);
+      element.removeEventListener('touchend', onMouseLeave);
     } catch (e) {
       warn(e);
     }
   };
 
+  var onFocus = function onFocus(e) {
+    return onMouseEnter(e);
+  };
+
   var onMouseEnter = function onMouseEnter(e) {
     try {
       if (isTouch(e.type)) {
@@ -134,15 +140,19 @@ function TooltipWithEvents(props) {
       setIsActive(true);
     };
 
-    if (props.noAnimation || globalThis.IS_TEST) {
+    if (noAnimation || globalThis.IS_TEST) {
       run();
     } else {
-      clearTimeout(onEnterTimeout.current);
-      onEnterTimeout.current = setTimeout(run, parseFloat(String(props.showDelay)) || 1);
+      clearTimers();
+      delayTimeout.current = setTimeout(run, parseFloat(String(showDelay)) || 1);
     }
   };
 
   var onMouseLeave = function onMouseLeave(e) {
+    if (active) {
+      return;
+    }
+
     try {
       if (isTouch(e.type)) {
         var elem = e.currentTarget;
@@ -152,8 +162,17 @@ function TooltipWithEvents(props) {
       warn(e);
     }
 
-    clearTimeout(onEnterTimeout.current);
-    setIsActive(false);
+    clearTimers();
+
+    var run = function run() {
+      setIsActive(false);
+    };
+
+    if (skipPortal) {
+      delayTimeout.current = setTimeout(run, parseFloat(String(hideDelay)));
+    } else {
+      run();
+    }
   };
 
   var componentWrapper = React.useMemo(function () {
@@ -164,19 +183,23 @@ function TooltipWithEvents(props) {
       return React.cloneElement(target, _objectSpread(_objectSpread({
         ref: cloneRef
       }, params), {}, {
-        'aria-describedby': combineDescribedBy(target.props, props.internalId)
+        'aria-describedby': combineDescribedBy(target.props, internalId)
       }));
+    } else {
+      cloneRef.current = target;
     }
 
     return null;
   }, [target]);
-  useHandleAria(target, props.internalId);
-  return React.createElement(React.Fragment, null, componentWrapper, isMounted && React.createElement(TooltipPortal, _extends({
-    key: "tooltip",
+  useHandleAria(targetRef.current, internalId);
+  return React.createElement(React.Fragment, null, isMounted && (skipPortal ? React.createElement(TooltipContainer, _extends({}, restProps, {
+    active: isActive,
+    targetElement: targetRef.current
+  }), children) : React.createElement(TooltipPortal, _extends({}, restProps, {
     active: isActive,
-    target: targetRef.current,
+    targetElement: targetRef.current,
     keepInDOM: true
-  }, restProps), children));
+  }), children)), componentWrapper);
 }
 
 export default TooltipWithEvents;

package/components/tooltip/style/_tooltip.scss

@@ -21,10 +21,10 @@
   opacity: 0;
   visibility: hidden;
 
-  transition: opacity 200ms #{$defaultEasing};
+  transition: opacity 200ms var(--easing-default);
   &--animate_position {
-    transition: all 200ms #{$defaultEasing},
-      opacity 200ms #{$defaultEasing};
+    transition: all 200ms var(--easing-default),
+      opacity 200ms var(--easing-default);
   }
 
   &--active {
@@ -34,15 +34,15 @@
       because of the first "show" we also use animation
       also, use forwards because of the usage of visibility
     */
-    animation: show-tooltip 200ms #{$defaultEasing} forwards;
+    animation: show-tooltip 200ms var(--easing-default) forwards;
   }
   html[data-visual-test] &--active,
   &--active#{&}--no-animation {
-    animation: show-tooltip 1ms #{$defaultEasing} forwards;
+    animation: show-tooltip 1ms var(--easing-default) forwards;
   }
   &--hide {
     visibility: visible;
-    animation: hide-tooltip 200ms #{$defaultEasing} forwards;
+    animation: hide-tooltip 200ms var(--easing-default) forwards;
   }
   &--hide#{&}--no-animation {
     animation: hide-tooltip 1ms linear forwards;

package/components/tooltip/style/dnb-tooltip.css

@@ -92,12 +92,16 @@
   opacity: 0;
   visibility: hidden;
   -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: opacity 200ms var(--easing-default);
+  transition: opacity 200ms var(--easing-default); }
   .dnb-tooltip--large {
     padding: 0.25rem 1rem; }
   .dnb-tooltip--animate_position {
     -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default);
+    transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); }
   .dnb-tooltip--active {
     visibility: visible;
     /*
@@ -105,14 +109,20 @@
       also, use forwards because of the usage of visibility
     */
     -webkit-animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 200ms var(--easing-default) forwards;
+            animation: show-tooltip 200ms var(--easing-default) forwards; }
   html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
     -webkit-animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 1ms var(--easing-default) forwards;
+            animation: show-tooltip 1ms var(--easing-default) forwards; }
   .dnb-tooltip--hide {
     visibility: visible;
     -webkit-animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: hide-tooltip 200ms var(--easing-default) forwards;
+            animation: hide-tooltip 200ms var(--easing-default) forwards; }
   .dnb-tooltip--hide.dnb-tooltip--no-animation {
     -webkit-animation: hide-tooltip 1ms linear forwards;
             animation: hide-tooltip 1ms linear forwards; }

package/components/tooltip/style/dnb-tooltip.min.css

@@ -1 +1 @@
-.dnb-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tooltip *,.dnb-tooltip :after,.dnb-tooltip :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tooltip :after,.dnb-tooltip :before{text-decoration:inherit;vertical-align:inherit}.dnb-tooltip{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;-webkit-transition:opacity .2s cubic-bezier(.42,0,0,1);transition:opacity .2s cubic-bezier(.42,0,0,1);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--animate_position{-webkit-transition:all .2s cubic-bezier(.42,0,0,1),opacity .2s cubic-bezier(.42,0,0,1);transition:all .2s cubic-bezier(.42,0,0,1),opacity .2s cubic-bezier(.42,0,0,1)}.dnb-tooltip--active{-webkit-animation:show-tooltip .2s cubic-bezier(.42,0,0,1) forwards;animation:show-tooltip .2s cubic-bezier(.42,0,0,1) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{-webkit-animation:show-tooltip 1ms cubic-bezier(.42,0,0,1) forwards;animation:show-tooltip 1ms cubic-bezier(.42,0,0,1) forwards}.dnb-tooltip--hide{-webkit-animation:hide-tooltip .2s cubic-bezier(.42,0,0,1) forwards;animation:hide-tooltip .2s cubic-bezier(.42,0,0,1) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{-webkit-animation:hide-tooltip 1ms linear forwards;animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{-webkit-animation:hide-tooltip 1ms linear 1s forwards;animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{bottom:0;content:"";height:1rem;left:0;position:absolute;-webkit-transform:translateY(70%) rotate(45deg);transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{-ms-flex-item-align:start;align-self:flex-start}.dnb-tooltip__arrow__arrow--right{-ms-flex-item-align:end;align-self:flex-end}@-webkit-keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}
+.dnb-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tooltip *,.dnb-tooltip :after,.dnb-tooltip :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tooltip :after,.dnb-tooltip :before{text-decoration:inherit;vertical-align:inherit}.dnb-tooltip{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;-webkit-transition:opacity .2s cubic-bezier(.42,0,0,1);transition:opacity .2s cubic-bezier(.42,0,0,1);-webkit-transition:opacity .2s var(--easing-default);transition:opacity .2s var(--easing-default);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--animate_position{-webkit-transition:all .2s cubic-bezier(.42,0,0,1),opacity .2s cubic-bezier(.42,0,0,1);transition:all .2s cubic-bezier(.42,0,0,1),opacity .2s cubic-bezier(.42,0,0,1);-webkit-transition:all .2s var(--easing-default),opacity .2s var(--easing-default);transition:all .2s var(--easing-default),opacity .2s var(--easing-default)}.dnb-tooltip--active{-webkit-animation:show-tooltip .2s cubic-bezier(.42,0,0,1) forwards;animation:show-tooltip .2s cubic-bezier(.42,0,0,1) forwards;-webkit-animation:show-tooltip .2s var(--easing-default) forwards;animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{-webkit-animation:show-tooltip 1ms cubic-bezier(.42,0,0,1) forwards;animation:show-tooltip 1ms cubic-bezier(.42,0,0,1) forwards;-webkit-animation:show-tooltip 1ms var(--easing-default) forwards;animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{-webkit-animation:hide-tooltip .2s cubic-bezier(.42,0,0,1) forwards;animation:hide-tooltip .2s cubic-bezier(.42,0,0,1) forwards;-webkit-animation:hide-tooltip .2s var(--easing-default) forwards;animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{-webkit-animation:hide-tooltip 1ms linear forwards;animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{-webkit-animation:hide-tooltip 1ms linear 1s forwards;animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{bottom:0;content:"";height:1rem;left:0;position:absolute;-webkit-transform:translateY(70%) rotate(45deg);transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{-ms-flex-item-align:start;align-self:flex-start}.dnb-tooltip__arrow__arrow--right{-ms-flex-item-align:end;align-self:flex-end}@-webkit-keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}

package/components/tooltip/types.d.ts

@@ -24,5 +24,6 @@ export declare type TooltipProps = IncludeSnakeCase<{
     tooltip?: React.ReactNode;
     className?: string;
     children?: React.ReactNode;
+    style?: React.CSSProperties;
 }>;
 export declare type TooltipAllProps = TooltipProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, keyof TooltipProps>;

package/components/upload/Upload.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import useUpload from './useUpload';
+import { defaultProps } from './UploadContext';
+import type { UploadAllProps } from './types';
+export { defaultProps };
+declare const Upload: {
+    (localProps: UploadAllProps): JSX.Element;
+    useUpload: typeof useUpload;
+};
+export default Upload;

package/components/upload/Upload.js

@@ -0,0 +1,129 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+
+var _UploadInfo, _UploadFileInput, _UploadFileList;
+
+var _excluded = ["id", "skeleton", "className", "acceptedFileTypes", "filesAmountLimit", "fileMaxSize", "onChange", "onFileDelete", "title", "text", "fileTypeDescription", "fileSizeDescription", "fileAmountDescription", "fileSizeContent", "buttonText", "loadingText", "errorLargeFile", "errorUnsupportedFile", "errorAmountLimit", "deleteButton", "fileListAriaLabel"];
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.slice.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 React from 'react';
+import classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import Provider from '../../shared/Provider';
+import Context from '../../shared/Context';
+import { extendPropsWithContext, makeUniqueId } from '../../shared/component-helper';
+import UploadFileInput from './UploadFileInput';
+import useUpload from './useUpload';
+import UploadDropzone from './UploadDropzone';
+import { UploadContext, defaultProps } from './UploadContext';
+import { verifyFiles } from './UploadVerify';
+import UploadFileList from './UploadFileList';
+import UploadInfo from './UploadInfo';
+export { defaultProps };
+
+var Upload = function Upload(localProps) {
+  var context = React.useContext(Context);
+  var extendedProps = extendPropsWithContext(localProps, defaultProps, {
+    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
+  }, context.getTranslation(localProps).Upload, context.Upload);
+
+  var id = extendedProps.id,
+      skeleton = extendedProps.skeleton,
+      className = extendedProps.className,
+      acceptedFileTypes = extendedProps.acceptedFileTypes,
+      filesAmountLimit = extendedProps.filesAmountLimit,
+      fileMaxSize = extendedProps.fileMaxSize,
+      onChange = extendedProps.onChange,
+      onFileDelete = extendedProps.onFileDelete,
+      title = extendedProps.title,
+      text = extendedProps.text,
+      fileTypeDescription = extendedProps.fileTypeDescription,
+      fileSizeDescription = extendedProps.fileSizeDescription,
+      fileAmountDescription = extendedProps.fileAmountDescription,
+      fileSizeContent = extendedProps.fileSizeContent,
+      buttonText = extendedProps.buttonText,
+      loadingText = extendedProps.loadingText,
+      errorLargeFile = extendedProps.errorLargeFile,
+      errorUnsupportedFile = extendedProps.errorUnsupportedFile,
+      errorAmountLimit = extendedProps.errorAmountLimit,
+      deleteButton = extendedProps.deleteButton,
+      fileListAriaLabel = extendedProps.fileListAriaLabel,
+      props = _objectWithoutProperties(extendedProps, _excluded);
+
+  var spacingClasses = createSpacingClasses(props);
+
+  var _useUpload = useUpload(id),
+      files = _useUpload.files,
+      setFiles = _useUpload.setFiles,
+      setInternalFiles = _useUpload.setInternalFiles;
+
+  return React.createElement(UploadContext.Provider, {
+    value: _objectSpread(_objectSpread({}, extendedProps), {}, {
+      id: id,
+      onInputUpload: onInputUpload
+    })
+  }, React.createElement(Provider, {
+    skeleton: skeleton
+  }, React.createElement(UploadDropzone, _extends({
+    "data-testid": "upload",
+    className: classnames('dnb-upload', spacingClasses, className)
+  }, props), _UploadInfo || (_UploadInfo = React.createElement(UploadInfo, null)), _UploadFileInput || (_UploadFileInput = React.createElement(UploadFileInput, null)), _UploadFileList || (_UploadFileList = React.createElement(UploadFileList, null)))));
+
+  function onInputUpload(newFiles) {
+    var existsInFiles = function existsInFiles(file) {
+      return files.some(function (_ref) {
+        var f = _ref.file;
+        return f.name === file.name && f.size === file.size && f.lastModified === file.lastModified;
+      });
+    };
+
+    var uniqueFiles = [].concat(_toConsumableArray(files), _toConsumableArray(newFiles.filter(function (_ref2) {
+      var file = _ref2.file;
+      return !existsInFiles(file);
+    }).map(function (fileItem) {
+      if (!fileItem.id) {
+        fileItem.id = makeUniqueId();
+      }
+
+      return fileItem;
+    })));
+    var verifiedFiles = verifyFiles(uniqueFiles, {
+      fileMaxSize: fileMaxSize,
+      acceptedFileTypes: acceptedFileTypes,
+      errorUnsupportedFile: errorUnsupportedFile,
+      errorLargeFile: errorLargeFile
+    });
+
+    var validFiles = _toConsumableArray(verifiedFiles).slice(0, filesAmountLimit);
+
+    setFiles(validFiles);
+    setInternalFiles(verifiedFiles);
+
+    if (typeof onChange === 'function') {
+      onChange({
+        files: validFiles
+      });
+    }
+
+    return validFiles;
+  }
+};
+
+Upload.useUpload = useUpload;
+export default Upload;

package/components/upload/UploadContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { UploadContextProps } from './types';
+export declare const defaultProps: {
+    fileMaxSize: number;
+    filesAmountLimit: number;
+};
+export declare const UploadContext: import("react").Context<UploadContextProps>;

package/components/upload/UploadContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+export var defaultProps = {
+  fileMaxSize: 5,
+  filesAmountLimit: 100
+};
+export var UploadContext = createContext(null);

package/components/upload/UploadDropzone.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { UploadAllProps } from './types';
+export default function UploadDropzone({ children, className, ...rest }: Partial<UploadAllProps>): JSX.Element;