@dnb/eufemia 9.32.0 → 9.33.0

package/es/components/tooltip/TooltipPortal.js

@@ -3,7 +3,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';
 let tooltipPortal;
 
 if (typeof globalThis !== 'undefined') {
@@ -16,7 +15,7 @@ if (typeof globalThis !== 'undefined') {
 function TooltipPortal(props) {
   const {
     active,
-    target,
+    targetElement,
     hideDelay,
     keepInDOM,
     noAnimation,
@@ -24,40 +23,60 @@ function TooltipPortal(props) {
   } = props;
   const [isMounted, setIsMounted] = React.useState(false);
   const [isActive, setIsActive] = React.useState(active);
-  const [group] = React.useState(() => props.group || makeUniqueId());
+  const [id] = React.useState(() => props.group || makeUniqueId());
   const isInDOM = React.useRef(false);
   const hasGroup = props.group;
 
-  if (tooltipPortal[group]) {
-    tooltipPortal[group].inDOM = isInDOM.current;
-  }
-
   const 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()
       };
     }
   };
 
-  const removeFromDOM = () => {
-    if (!keepInDOM && hasGroup && tooltipPortal[group] && !tooltipPortal[group].inDOM) {
-      ReactDOM.unmountComponentAtNode(tooltipPortal[group].node);
+  const 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);
+  };
+
+  const removeFromDOM = hide => {
+    if (isActive && hide) {
+      return;
+    }
+
+    const 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(() => {
-    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);
       }
@@ -72,19 +91,21 @@ function TooltipPortal(props) {
 
       const delayHidden = () => {
         isInDOM.current = false;
-        removeFromDOM();
+        removeFromDOM(true);
       };
 
       if (noAnimation || globalThis.IS_TEST) {
         delayRender();
         delayHidden();
-      } else if (tooltipPortal[group]) {
+      } else if (tooltipPortal[id]) {
         const 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(() => {
     if (keepInDOM) {
       makePortal();
@@ -94,13 +115,13 @@ function TooltipPortal(props) {
   }, []);
 
   const renderPortal = isActive => {
-    var _tooltipPortal$group3;
+    var _tooltipPortal$id3;
 
-    const root = (_tooltipPortal$group3 = tooltipPortal[group]) === null || _tooltipPortal$group3 === void 0 ? void 0 : _tooltipPortal$group3.node;
+    const 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);
     }
@@ -109,13 +130,13 @@ function TooltipPortal(props) {
   };
 
   if (!hasGroup) {
-    var _tooltipPortal$group4;
+    var _tooltipPortal$id4;
 
-    const root = (_tooltipPortal$group4 = tooltipPortal[group]) === null || _tooltipPortal$group4 === void 0 ? void 0 : _tooltipPortal$group4.node;
+    const 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);
     }
@@ -131,14 +152,14 @@ const createGroupElement = id => {
     const 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);
   }
 };
 
-const createRootElement = className => {
+const createRootElement = (className = 'dnb-tooltip__portal') => {
   try {
     const element = document.querySelector(`.${className}`);
 

package/es/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/es/components/tooltip/TooltipWithEvents.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "target"];
+const _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; }
 
@@ -9,29 +9,40 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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) {
   const {
-    children,
-    target
+    children
   } = props,
         restProps = _objectWithoutProperties(props, _excluded);
 
-  const [isActive, setIsActive] = React.useState(false);
+  const {
+    active,
+    target,
+    skipPortal,
+    noAnimation,
+    showDelay,
+    hideDelay,
+    internalId
+  } = restProps;
+  const [isActive, setIsActive] = React.useState(active);
   const [isNotSemanticElement, setIsNotSemanticElement] = React.useState(false);
-  const [isMounted, setIsMounted] = React.useState(false);
-  const onEnterTimeout = React.useRef();
-  const targetRef = React.useRef();
+  const [isMounted, setIsMounted] = React.useState(!target);
+  const delayTimeout = React.useRef();
   const cloneRef = React.useRef();
-  React.useEffect(() => {
-    targetRef.current = getRefElement(cloneRef);
+  const targetRef = React.useRef();
 
-    if (!targetRef.current) {
-      targetRef.current = target.current;
-    }
+  const clearTimers = () => {
+    clearTimeout(delayTimeout.current);
+  };
 
+  React.useLayoutEffect(() => {
+    targetRef.current = getRefElement(cloneRef);
+  }, [target]);
+  React.useLayoutEffect(() => {
     if (targetRef.current) {
       setIsMounted(true);
       addEvents(targetRef.current);
@@ -39,28 +50,14 @@ function TooltipWithEvents(props) {
     }
 
     return () => {
-      clearTimeout(onEnterTimeout.current);
-      const 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);
     };
   }, []);
 
   const handleSemanticElement = () => {
     try {
-      const targetElement = document.querySelector(`*[aria-describedby*="${props.internalId}"]`);
+      const targetElement = document.querySelector(`*[aria-describedby*="${internalId}"]`);
 
       if (targetElement) {
         const role = targetElement.getAttribute('role');
@@ -89,16 +86,26 @@ function TooltipWithEvents(props) {
     }
   };
 
-  const onFocus = e => {
+  const 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);
     }
   };
 
+  const onFocus = e => {
+    return onMouseEnter(e);
+  };
+
   const onMouseEnter = e => {
     try {
       if (isTouch(e.type)) {
@@ -113,15 +120,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);
     }
   };
 
   const onMouseLeave = e => {
+    if (active) {
+      return;
+    }
+
     try {
       if (isTouch(e.type)) {
         const elem = e.currentTarget;
@@ -131,8 +142,17 @@ function TooltipWithEvents(props) {
       warn(e);
     }
 
-    clearTimeout(onEnterTimeout.current);
-    setIsActive(false);
+    clearTimers();
+
+    const run = () => {
+      setIsActive(false);
+    };
+
+    if (skipPortal) {
+      delayTimeout.current = setTimeout(run, parseFloat(String(hideDelay)));
+    } else {
+      run();
+    }
   };
 
   const componentWrapper = React.useMemo(() => {
@@ -143,19 +163,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/es/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/es/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/es/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/es/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/es/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/es/components/upload/Upload.js

@@ -0,0 +1,116 @@
+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;
+
+const _excluded = ["id", "skeleton", "className", "acceptedFileTypes", "filesAmountLimit", "fileMaxSize", "onChange", "onFileDelete", "title", "text", "fileTypeDescription", "fileSizeDescription", "fileAmountDescription", "fileSizeContent", "buttonText", "loadingText", "errorLargeFile", "errorUnsupportedFile", "errorAmountLimit", "deleteButton", "fileListAriaLabel"];
+
+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 };
+
+const Upload = localProps => {
+  const context = React.useContext(Context);
+  const extendedProps = extendPropsWithContext(localProps, defaultProps, {
+    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
+  }, context.getTranslation(localProps).Upload, context.Upload);
+
+  const {
+    id,
+    skeleton,
+    className,
+    acceptedFileTypes,
+    filesAmountLimit,
+    fileMaxSize,
+    onChange,
+    onFileDelete,
+    title,
+    text,
+    fileTypeDescription,
+    fileSizeDescription,
+    fileAmountDescription,
+    fileSizeContent,
+    buttonText,
+    loadingText,
+    errorLargeFile,
+    errorUnsupportedFile,
+    errorAmountLimit,
+    deleteButton,
+    fileListAriaLabel
+  } = extendedProps,
+        props = _objectWithoutProperties(extendedProps, _excluded);
+
+  const spacingClasses = createSpacingClasses(props);
+  const {
+    files,
+    setFiles,
+    setInternalFiles
+  } = useUpload(id);
+  return React.createElement(UploadContext.Provider, {
+    value: _objectSpread(_objectSpread({}, extendedProps), {}, {
+      id,
+      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) {
+    const existsInFiles = file => files.some(({
+      file: f
+    }) => {
+      return f.name === file.name && f.size === file.size && f.lastModified === file.lastModified;
+    });
+
+    const uniqueFiles = [...files, ...newFiles.filter(({
+      file
+    }) => {
+      return !existsInFiles(file);
+    }).map(fileItem => {
+      if (!fileItem.id) {
+        fileItem.id = makeUniqueId();
+      }
+
+      return fileItem;
+    })];
+    const verifiedFiles = verifyFiles(uniqueFiles, {
+      fileMaxSize,
+      acceptedFileTypes,
+      errorUnsupportedFile,
+      errorLargeFile
+    });
+    const validFiles = [...verifiedFiles].slice(0, filesAmountLimit);
+    setFiles(validFiles);
+    setInternalFiles(verifiedFiles);
+
+    if (typeof onChange === 'function') {
+      onChange({
+        files: validFiles
+      });
+    }
+
+    return validFiles;
+  }
+};
+
+Upload.useUpload = useUpload;
+export default Upload;

package/es/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/es/components/upload/UploadContext.js

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

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