@entur/tooltip 4.0.0-beta.0 → 4.0.0

package/dist/Popover.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Placement } from '@popperjs/core';
+import { Placement } from './utils';
 import './Popover.scss';
 export type PopoverProps = {
     /** Innholdet i Popover */
@@ -27,5 +27,7 @@ export declare const PopoverCloseButton: React.FC<PopoverCloseButtonProps>;
 export type PopoverContentProps = {
     /**Innholdet til Popover */
     children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
 };
 export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Tooltip.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Placement } from './utils';
 import './Tooltip.scss';
 type Modifier = {
     name: string;
@@ -9,7 +10,6 @@ type Modifier = {
     data?: Record<string, unknown>;
     [key: string]: any;
 };
-export type Placement = 'top' | 'top-left' | 'top-start' | 'top-right' | 'top-end' | 'left' | 'right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-right' | 'bottom-end';
 /** @deprecated use variant="negative" instead */
 declare const error = "error";
 export type TooltipProps = {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 import './index.scss';
 export * from './Tooltip';
 export * from './Popover';
+export { Placement } from './utils';

package/dist/styles.css

@@ -1,92 +1,5 @@
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-floating-button {
-  align-items: center;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: var(--components-button-floating-standard-default);
-  border: 0;
-  border-radius: 1.5rem;
-  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
-  color: var(--components-button-floating-standard-text);
-  cursor: pointer;
-  display: flex;
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 500;
-  justify-content: center;
-  min-height: 3rem;
-  margin: 0;
-  min-width: 3rem;
-  padding: 0 1rem;
-  position: relative;
-  z-index: 10;
-}
-
-.eds-floating-button--extended {
-  padding: 0 0.9375rem;
-}
-
-.eds-floating-button:hover {
-  background-color: var(--components-button-floating-standard-hover);
-}
-
-.eds-floating-button:active {
-  background-color: var(--components-button-floating-standard-active);
-}
-
-.eds-floating-button:focus {
-  outline: 2px solid #181c56;
-  outline-color: var(--basecolors-stroke-focus-standard);
-  outline-offset: 0.125rem;
-}
-
-.eds-contrast .eds-floating-button:focus {
-  outline-color: var(--basecolors-stroke-focus-contrast);
-}
-
-.eds-contrast .eds-floating-button {
-  background: var(--components-button-floating-contrast-default);
-  color: var(--components-button-floating-contrast-text);
-  box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
-}
-
-.eds-contrast .eds-floating-button:hover {
-  background-color: var(--components-button-floating-contrast-hover);
-}
-
-.eds-contrast .eds-floating-button:active {
-  background-color: var(--components-button-floating-contrast-active);
-}
-
-.eds-floating-button--small {
-  border-radius: 1rem;
-  height: 2rem;
-  padding: 0 0.5rem;
-  min-width: 2rem;
-  min-height: 2rem;
-  flex: 0 1 auto;
-}
-
-.eds-floating-button--small.eds-floating-button--extended {
-  padding: 0 0.6875rem;
-}
-
-.eds-floating-button--extended > * {
-  margin: 0 0.5em;
-}
-
-.eds-floating-button--extended > *:first-child {
-  margin-left: 0;
-}
-
-.eds-floating-button--extended > *:last-child {
-  margin-right: 0;
-}
-
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 a.eds-button {
@@ -333,6 +246,104 @@ a.eds-button--size-large {
   border-color: transparent;
 }
 
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-button-group .eds-button {
+  margin-right: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.eds-button-group .eds-button:only-child {
+  margin: 0;
+}
+
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-floating-button {
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: var(--components-button-floating-standard-default);
+  border: 0;
+  border-radius: 1.5rem;
+  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+  color: var(--components-button-floating-standard-text);
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  justify-content: center;
+  min-height: 3rem;
+  margin: 0;
+  min-width: 3rem;
+  padding: 0 1rem;
+  position: relative;
+  z-index: 10;
+}
+
+.eds-floating-button--extended {
+  padding: 0 0.9375rem;
+}
+
+.eds-floating-button:hover {
+  background-color: var(--components-button-floating-standard-hover);
+}
+
+.eds-floating-button:active {
+  background-color: var(--components-button-floating-standard-active);
+}
+
+.eds-floating-button:focus {
+  outline: 2px solid #181c56;
+  outline-color: var(--basecolors-stroke-focus-standard);
+  outline-offset: 0.125rem;
+}
+
+.eds-contrast .eds-floating-button:focus {
+  outline-color: var(--basecolors-stroke-focus-contrast);
+}
+
+.eds-contrast .eds-floating-button {
+  background: var(--components-button-floating-contrast-default);
+  color: var(--components-button-floating-contrast-text);
+  box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
+}
+
+.eds-contrast .eds-floating-button:hover {
+  background-color: var(--components-button-floating-contrast-hover);
+}
+
+.eds-contrast .eds-floating-button:active {
+  background-color: var(--components-button-floating-contrast-active);
+}
+
+.eds-floating-button--small {
+  border-radius: 1rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+  min-width: 2rem;
+  min-height: 2rem;
+  flex: 0 1 auto;
+}
+
+.eds-floating-button--small.eds-floating-button--extended {
+  padding: 0 0.6875rem;
+}
+
+.eds-floating-button--extended > * {
+  margin: 0 0.5em;
+}
+
+.eds-floating-button--extended > *:first-child {
+  margin-left: 0;
+}
+
+.eds-floating-button--extended > *:last-child {
+  margin-right: 0;
+}
+
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-square-button {
@@ -532,13 +543,70 @@ a.eds-button--size-large {
 
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-button-group .eds-button {
-  margin-right: 0.75rem;
-  margin-bottom: 0.75rem;
+.eds-icon-button {
+  border: 0.125rem solid transparent;
+  border-radius: 0.25rem;
+  background: none;
+  color: var(--components-button-iconbutton-standard-text);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  padding: 0.5rem;
 }
 
-.eds-button-group .eds-button:only-child {
-  margin: 0;
+.eds-contrast .eds-icon-button {
+  color: var(--components-button-iconbutton-contrast-text);
+}
+
+.eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
+  background-color: var(--components-button-iconbutton-contrast-icon);
+}
+
+.eds-icon-button--size-small {
+  height: 1.5rem;
+  width: 1.5rem;
+  padding: 0;
+}
+
+.eds-icon-button:hover {
+  background-color: var(--components-button-iconbutton-standard-hover);
+}
+
+.eds-contrast .eds-icon-button:hover {
+  background-color: var(--components-button-iconbutton-contrast-hover);
+}
+
+.eds-icon-button:active {
+  background: var(--components-button-iconbutton-standard-active);
+  color: var(--components-button-iconbutton-standard-text-active);
+}
+
+.eds-contrast .eds-icon-button:active {
+  background: var(--components-button-iconbutton-contrast-active);
+  color: var(--components-button-iconbutton-contrast-text-active);
+}
+
+.eds-icon-button:focus {
+  outline: 2px solid #181c56;
+  outline-color: var(--basecolors-stroke-focus-standard);
+  outline-offset: 0.125rem;
+}
+
+.eds-contrast .eds-icon-button:focus {
+  outline-color: var(--basecolors-stroke-focus-contrast);
+}
+
+.eds-icon-button--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.eds-icon-button--disabled__wrapper {
+  cursor: not-allowed;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
 /* DO NOT CHANGE!*/
@@ -923,74 +991,6 @@ a.eds-button--size-large {
   --eds-button: 1;
 }
 
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-icon-button {
-  border: 0.125rem solid transparent;
-  border-radius: 0.25rem;
-  background: none;
-  color: var(--components-button-iconbutton-standard-text);
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1rem;
-  padding: 0.5rem;
-}
-
-.eds-contrast .eds-icon-button {
-  color: var(--components-button-iconbutton-contrast-text);
-}
-
-.eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
-  background-color: var(--components-button-iconbutton-contrast-icon);
-}
-
-.eds-icon-button--size-small {
-  height: 1.5rem;
-  width: 1.5rem;
-  padding: 0;
-}
-
-.eds-icon-button:hover {
-  background-color: var(--components-button-iconbutton-standard-hover);
-}
-
-.eds-contrast .eds-icon-button:hover {
-  background-color: var(--components-button-iconbutton-contrast-hover);
-}
-
-.eds-icon-button:active {
-  background: var(--components-button-iconbutton-standard-active);
-  color: var(--components-button-iconbutton-standard-text-active);
-}
-
-.eds-contrast .eds-icon-button:active {
-  background: var(--components-button-iconbutton-contrast-active);
-  color: var(--components-button-iconbutton-contrast-text-active);
-}
-
-.eds-icon-button:focus {
-  outline: 2px solid #181c56;
-  outline-color: var(--basecolors-stroke-focus-standard);
-  outline-offset: 0.125rem;
-}
-
-.eds-contrast .eds-icon-button:focus {
-  outline-color: var(--basecolors-stroke-focus-contrast);
-}
-
-.eds-icon-button--disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.eds-icon-button--disabled__wrapper {
-  cursor: not-allowed;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
 .eds-tooltip-wrapper {
   display: inline-block;
   position: relative;
@@ -1094,9 +1094,6 @@ a.eds-button--size-large {
   background: var(--components-tooltip-popover-contrast-fill);
   box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
 }
-.eds-popover--hidden {
-  display: none;
-}
 .eds-popover:focus {
   outline: 2px solid #181c56;
   outline-color: var(--basecolors-stroke-focus-standard);

package/dist/tooltip.cjs.development.js

@@ -9,7 +9,6 @@ var reactDom = require('@floating-ui/react-dom');
 var icons = require('@entur/icons');
 var button = require('@entur/button');
 var tokens = require('@entur/tokens');
-var reactPopper = require('react-popper');
 var layout = require('@entur/layout');
 
 function _extends() {
@@ -39,6 +38,21 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+function standardisePlacement(placement) {
+  switch (placement) {
+    case 'top-left':
+      return 'top-start';
+    case 'top-right':
+      return 'top-end';
+    case 'bottom-left':
+      return 'bottom-start';
+    case 'bottom-right':
+      return 'bottom-end';
+    default:
+      return placement;
+  }
+}
+
 var _excluded$1 = ["placement", "content", "children", "className", "isOpen", "disableHoverListener", "disableFocusListener", "disableKeyboardListener", "disableClickListner", "showCloseButton", "variant", "style"];
 /** @deprecated use variant="negative" instead */
 var error = 'error';
@@ -68,8 +82,8 @@ var Tooltip = function Tooltip(_ref) {
     setShowTooltip = _useState[1];
   var tooltipArrowRef = React.useRef(null);
   var tooltipId = utils.useRandomId('eds-tooltip');
-  var hoverOpenTimer;
-  var hoverCloseTimer;
+  var hoverOpenTimer = React.useRef();
+  var hoverCloseTimer = React.useRef();
   // calculations for floating-UI tooltip position
   var _useFloating = reactDom.useFloating({
       whileElementsMounted: function whileElementsMounted(ref, _float, update) {
@@ -91,26 +105,23 @@ var Tooltip = function Tooltip(_ref) {
     middlewareData = _useFloating.middlewareData,
     actualPlacement = _useFloating.placement;
   var onMouseEnter = function onMouseEnter() {
-    clearTimeout(hoverCloseTimer);
-    hoverOpenTimer = setTimeout(function () {
+    clearTimeout(hoverCloseTimer.current);
+    hoverOpenTimer.current = setTimeout(function () {
       setShowTooltip(true);
     }, 150);
   };
   var onMouseLeave = function onMouseLeave() {
-    clearTimeout(hoverOpenTimer);
-    hoverCloseTimer = setTimeout(function () {
+    clearTimeout(hoverOpenTimer.current);
+    hoverCloseTimer.current = setTimeout(function () {
       setShowTooltip(false);
     }, 300);
   };
   React.useEffect(function () {
     return function () {
-      clearTimeout(hoverOpenTimer);
-      clearTimeout(hoverCloseTimer);
+      clearTimeout(hoverOpenTimer.current);
+      clearTimeout(hoverCloseTimer.current);
     };
   }, []);
-  React.useEffect(function () {
-    console.log(actualPlacement);
-  }, [actualPlacement]);
   var referenceListenerProps = _extends({
     'aria-describedby': showTooltip ? tooltipId : undefined
   }, !disableFocusListener && {
@@ -170,38 +181,8 @@ var Tooltip = function Tooltip(_ref) {
     }
   })));
 };
-function standardisePlacement(placement) {
-  switch (placement) {
-    case 'top-left':
-      return 'top-start';
-    case 'top-right':
-      return 'top-end';
-    case 'bottom-left':
-      return 'bottom-start';
-    case 'bottom-right':
-      return 'bottom-end';
-    default:
-      return placement;
-  }
-}
 
 var _excluded = ["children"];
-var PopoverContext = /*#__PURE__*/React.createContext(undefined);
-var usePopoverContext = function usePopoverContext() {
-  var context = React.useContext(PopoverContext);
-  if (context == null) {
-    throw Error('usePopoverContext must be used within <Popover/>');
-  }
-  return context;
-};
-var useCustomState = function useCustomState(state, setState) {
-  var _React$useState = React.useState(false),
-    internalState = _React$useState[0],
-    setInternalState = _React$useState[1];
-  var controlled = state !== undefined && setState !== undefined;
-  if (controlled) return [state, setState, controlled];
-  return [internalState, setInternalState, controlled];
-};
 var Popover = function Popover(_ref) {
   var children = _ref.children,
     _ref$placement = _ref.placement,
@@ -212,86 +193,69 @@ var Popover = function Popover(_ref) {
     showPopover = _useCustomState[0],
     setShowPopover = _useCustomState[1],
     controlled = _useCustomState[2];
-  var triggerElement = React.useRef(null);
-  var contentElement = React.useRef(null);
-  var _usePopper = reactPopper.usePopper(triggerElement.current, contentElement.current, {
-      modifiers: [{
-        name: 'arrow',
-        enabled: false
-      }, {
-        name: 'offset',
-        options: {
-          offset: [0, 8]
-        }
-      }],
-      placement: placement
+  // calculations for floating-UI popover position
+  var _useFloating = reactDom.useFloating({
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return reactDom.autoUpdate(ref, _float, update);
+      },
+      placement: standardisePlacement(placement),
+      middleware: [reactDom.offset(tokens.space.extraSmall), reactDom.flip(), reactDom.shift({
+        padding: tokens.space.extraSmall,
+        limiter: reactDom.limitShift({
+          offset: 8
+        })
+      })]
     }),
-    styles = _usePopper.styles,
-    attributes = _usePopper.attributes,
-    forceUpdate = _usePopper.forceUpdate;
-  React.useEffect(function () {
-    if (forceUpdate) {
-      forceUpdate();
-    }
-  }, [showPopover, forceUpdate]);
-  var triggerProps = React.useCallback(function () {
-    var buttonProps = {
-      'aria-haspopup': 'dialog',
-      'aria-expanded': showPopover,
-      ref: triggerElement,
-      type: 'button'
-    };
-    var buttonOnClick = {
-      onClick: function onClick(e) {
-        e.preventDefault();
-        setShowPopover(function (prev) {
-          return !prev;
-        });
-      }
-    };
-    return controlled ? buttonProps : _extends({}, buttonProps, buttonOnClick);
-  }, [triggerElement, showPopover, setShowPopover, controlled]);
-  utils.useOnClickOutside([contentElement, triggerElement], function () {
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
+  utils.useOnClickOutside([refs.floating, refs.reference], function () {
     return setShowPopover(false);
   });
+  var popoverTriggerProps = _extends({
+    'aria-haspopup': 'dialog',
+    'aria-expanded': showPopover,
+    ref: refs.setReference,
+    type: 'button'
+  }, !controlled && {
+    onClick: function onClick() {
+      return setShowPopover(function (prev) {
+        return !prev;
+      });
+    }
+  });
+  var popoverContentProps = {
+    role: 'dialog',
+    'aria-modal': false,
+    'aria-hidden': !showPopover,
+    ref: refs.setFloating,
+    style: _extends({}, !showPopover && {
+      display: 'none'
+    }),
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Escape') setShowPopover(false);
+    },
+    onBlur: function onBlur(event) {
+      var elementReceivingFocus = event.relatedTarget;
+      // The check for 'tabindex=-1' is a special case for focus handling in Docz
+      if (!elementReceivingFocus || elementReceivingFocus.getAttribute('tabindex') === '-1') return;
+      var focusedElementIsPopover = elementContainsElement(refs.floating.current, elementReceivingFocus);
+      var focusedElementIsTrigger = elementContainsElement(refs.reference.current, elementReceivingFocus);
+      var popoverShouldClose = !focusedElementIsPopover && !focusedElementIsTrigger;
+      if (showPopover && popoverShouldClose) setShowPopover(false);
+    }
+  };
   var closeButtonProps = {
-    onClick: function onClick(e) {
-      e.preventDefault();
-      setShowPopover(false);
+    onClick: function onClick() {
+      return setShowPopover(false);
     },
     type: 'button'
   };
-  var popoverContentProps = React.useCallback(function () {
-    var contentProps = {
-      role: 'dialog',
-      'aria-modal': 'false',
-      ref: contentElement,
-      onKeyDown: function onKeyDown(event) {
-        if (event.key === 'Escape') {
-          showPopover && setShowPopover(false);
-        }
-      },
-      onBlur: function onBlur(event) {
-        var elementReceivingFocus = event.relatedTarget;
-        // The check for 'tabindex=-1' is a special case for focus handling in Docz
-        if (!elementReceivingFocus || elementReceivingFocus.getAttribute('tabindex') === '-1') return;
-        var focusElementIsPopover = elementContainsElement(contentElement.current, elementReceivingFocus);
-        var focusElementIsTrigger = elementContainsElement(triggerElement.current, elementReceivingFocus);
-        var isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;
-        if (showPopover && isValidBlur) setShowPopover(false);
-      }
-    };
-    return contentProps;
-  }, [contentElement, showPopover, setShowPopover]);
   var contextValue = {
     showPopover: showPopover,
-    triggerElement: triggerElement,
-    contentElement: contentElement,
-    styles: styles,
-    attributes: attributes,
+    floatingStyles: floatingStyles,
+    popoverTriggerProps: popoverTriggerProps,
     popoverContentProps: popoverContentProps,
-    closeButtonProps: closeButtonProps,
-    triggerProps: triggerProps
+    closeButtonProps: closeButtonProps
   };
   return React.createElement(PopoverContext.Provider, {
     value: contextValue
@@ -300,9 +264,9 @@ var Popover = function Popover(_ref) {
 var PopoverTrigger = function PopoverTrigger(_ref2) {
   var children = _ref2.children;
   var _usePopoverContext = usePopoverContext(),
-    triggerProps = _usePopoverContext.triggerProps;
+    popoverTriggerProps = _usePopoverContext.popoverTriggerProps;
   var child = React.Children.only(children);
-  return React.cloneElement(child, triggerProps());
+  return React.cloneElement(child, popoverTriggerProps);
 };
 var PopoverCloseButton = function PopoverCloseButton(_ref3) {
   var children = _ref3.children,
@@ -312,23 +276,36 @@ var PopoverCloseButton = function PopoverCloseButton(_ref3) {
   return React.cloneElement(children, _extends({}, closeButtonProps, rest));
 };
 var PopoverContent = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
-  var children = _ref4.children;
+  var children = _ref4.children,
+    className = _ref4.className,
+    style = _ref4.style;
   var _usePopoverContext3 = usePopoverContext(),
-    showPopover = _usePopoverContext3.showPopover,
-    attributes = _usePopoverContext3.attributes,
-    styles = _usePopoverContext3.styles,
+    floatingStyles = _usePopoverContext3.floatingStyles,
     popoverContentProps = _usePopoverContext3.popoverContentProps;
-  var props = popoverContentProps({
-    ref: ref
-  });
   return React.createElement(layout.Contrast, _extends({
-    className: classNames('eds-popover', {
-      'eds-popover--hidden': !showPopover
-    }, 'eds-contrast'),
-    style: styles.popper,
-    "aria-hidden": !showPopover
-  }, attributes.styles, props), children);
+    className: classNames(className, 'eds-popover')
+  }, popoverContentProps, {
+    style: _extends({}, floatingStyles, popoverContentProps.style, style),
+    // @ts-expect-error correct type for floating cannot be set via useFloating
+    ref: utils.mergeRefs(popoverContentProps.ref, ref)
+  }), children);
 });
+var PopoverContext = /*#__PURE__*/React.createContext(undefined);
+var usePopoverContext = function usePopoverContext() {
+  var context = React.useContext(PopoverContext);
+  if (context == null) {
+    throw Error('usePopoverContext must be used within <Popover/>');
+  }
+  return context;
+};
+var useCustomState = function useCustomState(state, setState) {
+  var _React$useState = React.useState(false),
+    internalState = _React$useState[0],
+    setInternalState = _React$useState[1];
+  var controlled = state !== undefined && setState !== undefined;
+  if (controlled) return [state, setState, controlled];
+  return [internalState, setInternalState, controlled];
+};
 function elementContainsElement(parent, child) {
   if (!parent) return false;
   return parent === child || parent.contains(child);