@entur/tooltip 5.2.13-beta.1 → 5.2.13-beta.10

package/dist/tooltip.esm.js

@@ -1,294 +1,329 @@
-import { useRandomId, mergeRefs, useOnClickOutside, warnAboutMissingStyles } from "@entur/utils";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect, cloneElement, createContext, useContext } from "react";
-import classNames from "classnames";
-import { useFloating, offset, flip, shift, arrow, limitShift, autoUpdate } from "@floating-ui/react";
-import { CloseIcon } from "@entur/icons";
-import { IconButton } from "@entur/button";
-import { space, borderRadiuses } from "@entur/tokens";
-import { useFloating as useFloating$1, offset as offset$1, flip as flip$1, shift as shift$1, limitShift as limitShift$1, autoUpdate as autoUpdate$1 } from "@floating-ui/react-dom";
-import { Contrast } from "@entur/layout";
+import { useRandomId, useOnClickOutside, mergeRefs, warnAboutMissingStyles } from '@entur/utils';
+import React, { useState, useRef, useEffect, cloneElement, createContext, useContext } from 'react';
+import classNames from 'classnames';
+import { useFloating, offset, flip, shift, limitShift, arrow, autoUpdate } from '@floating-ui/react';
+import { CloseIcon } from '@entur/icons';
+import { IconButton } from '@entur/button';
+import { space, borderRadiuses } from '@entur/tokens';
+import { useFloating as useFloating$1, offset as offset$1, flip as flip$1, shift as shift$1, limitShift as limitShift$1, autoUpdate as autoUpdate$1 } from '@floating-ui/react-dom';
+import { Contrast } from '@entur/layout';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
 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";
+    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;
   }
 }
-const error = "error";
-const Tooltip = ({
-  placement,
-  content,
-  children,
-  className,
-  isOpen,
-  onClickCloseButton = () => void 0,
-  disableHoverListener = false,
-  disableFocusListener = false,
-  disableKeyboardListener = true,
-  disableClickListner = true,
-  showCloseButton = true,
-  variant,
-  hoverDelay,
-  style,
-  ...rest
-}) => {
-  const [showTooltip, setShowTooltip] = useState(isOpen ?? false);
-  const tooltipArrowRef = useRef(null);
-  const tooltipId = useRandomId("eds-tooltip");
-  const hoverOpenTimer = useRef();
-  const hoverCloseTimer = useRef();
-  const isControlled = isOpen !== void 0;
-  const {
-    refs,
-    floatingStyles,
-    middlewareData,
-    placement: actualPlacement,
-    isPositioned,
-    update,
-    elements
-  } = useFloating({
-    placement: standardisePlacement(placement),
-    open: showTooltip,
-    middleware: [
-      offset(space.extraSmall),
-      flip(),
-      shift({ padding: space.extraSmall, limiter: limitShift({ offset: 8 }) }),
-      arrow({
+
+var _excluded$1 = ["placement", "content", "children", "className", "isOpen", "onClickCloseButton", "disableHoverListener", "disableFocusListener", "disableKeyboardListener", "disableClickListner", "showCloseButton", "variant", "hoverDelay", "style"];
+/** @deprecated use variant="negative" instead */
+var error = 'error';
+var Tooltip = function Tooltip(_ref) {
+  var _actualPlacement$spli, _middlewareData$arrow, _middlewareData$arrow2;
+  var placement = _ref.placement,
+    content = _ref.content,
+    children = _ref.children,
+    className = _ref.className,
+    isOpen = _ref.isOpen,
+    _ref$onClickCloseButt = _ref.onClickCloseButton,
+    onClickCloseButton = _ref$onClickCloseButt === void 0 ? function () {
+      return undefined;
+    } : _ref$onClickCloseButt,
+    _ref$disableHoverList = _ref.disableHoverListener,
+    disableHoverListener = _ref$disableHoverList === void 0 ? false : _ref$disableHoverList,
+    _ref$disableFocusList = _ref.disableFocusListener,
+    disableFocusListener = _ref$disableFocusList === void 0 ? false : _ref$disableFocusList,
+    _ref$disableKeyboardL = _ref.disableKeyboardListener,
+    disableKeyboardListener = _ref$disableKeyboardL === void 0 ? true : _ref$disableKeyboardL,
+    _ref$disableClickList = _ref.disableClickListner,
+    disableClickListner = _ref$disableClickList === void 0 ? true : _ref$disableClickList,
+    _ref$showCloseButton = _ref.showCloseButton,
+    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
+    variant = _ref.variant,
+    hoverDelay = _ref.hoverDelay,
+    style = _ref.style,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var _useState = useState(isOpen != null ? isOpen : false),
+    showTooltip = _useState[0],
+    setShowTooltip = _useState[1];
+  var tooltipArrowRef = useRef(null);
+  var tooltipId = useRandomId('eds-tooltip');
+  var hoverOpenTimer = useRef();
+  var hoverCloseTimer = useRef();
+  var isControlled = isOpen !== undefined;
+  // calculations for floating-UI tooltip position
+  var _useFloating = useFloating({
+      placement: standardisePlacement(placement),
+      open: showTooltip,
+      middleware: [offset(space.extraSmall), flip(), shift({
+        padding: space.extraSmall,
+        limiter: limitShift({
+          offset: 8
+        })
+      }), arrow({
         element: tooltipArrowRef,
         padding: borderRadiuses.medium
-      })
-    ]
-  });
-  useEffect(() => {
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    middlewareData = _useFloating.middlewareData,
+    actualPlacement = _useFloating.placement,
+    isPositioned = _useFloating.isPositioned,
+    update = _useFloating.update,
+    elements = _useFloating.elements;
+  // Since we use CSS instead of conditional rendering when hiding tooltip
+  // we can't use the whileElementsMounted option and need to handle
+  // cleanup ourselves. See https://floating-ui.com/docs/autoupdate
+  useEffect(function () {
     if (showTooltip && elements.reference && elements.floating) {
-      const cleanup = autoUpdate(elements.reference, elements.floating, update);
+      var cleanup = autoUpdate(elements.reference, elements.floating, update);
       return cleanup;
     }
   }, [showTooltip, elements, update]);
-  const onMouseEnter = () => {
+  var onMouseEnter = function onMouseEnter() {
+    var _hoverDelay$enter;
     if (isControlled) return;
     clearTimeout(hoverCloseTimer.current);
-    hoverOpenTimer.current = setTimeout(() => {
+    hoverOpenTimer.current = setTimeout(function () {
       setShowTooltip(true);
-    }, hoverDelay?.enter ?? 150);
+    }, (_hoverDelay$enter = hoverDelay == null ? void 0 : hoverDelay.enter) != null ? _hoverDelay$enter : 150);
   };
-  const onMouseLeave = () => {
+  var onMouseLeave = function onMouseLeave() {
+    var _hoverDelay$leave;
     if (isControlled) return;
     clearTimeout(hoverOpenTimer.current);
-    hoverCloseTimer.current = setTimeout(() => {
+    hoverCloseTimer.current = setTimeout(function () {
       setShowTooltip(false);
-    }, hoverDelay?.leave ?? 300);
+    }, (_hoverDelay$leave = hoverDelay == null ? void 0 : hoverDelay.leave) != null ? _hoverDelay$leave : 300);
   };
-  React.useEffect(() => {
-    return () => {
+  React.useEffect(function () {
+    return function () {
       clearTimeout(hoverOpenTimer.current);
       clearTimeout(hoverCloseTimer.current);
     };
   }, []);
-  React.useEffect(() => {
-    if (isOpen !== void 0) setShowTooltip(isOpen);
+  React.useEffect(function () {
+    if (isOpen !== undefined) setShowTooltip(isOpen);
   }, [isOpen]);
-  const referenceListenerProps = {
-    "aria-describedby": showTooltip ? tooltipId : void 0,
-    // focusListner
-    ...!disableFocusListener && !isControlled && { onFocus: () => setShowTooltip(true) },
-    ...!disableFocusListener && !isControlled && { onBlur: () => setShowTooltip(false) },
-    // hoverListner
-    ...!disableHoverListener && !isControlled && { onMouseEnter },
-    ...!disableHoverListener && !isControlled && { onMouseLeave },
-    // keyboardListner
-    ...!disableKeyboardListener && !isControlled && {
-      onKeyDown: (e) => {
-        if (e.key === "Escape") setShowTooltip(false);
-        if (e.key === " " || e.key === "Enter") {
-          e.preventDefault();
-          setShowTooltip(!showTooltip);
-        }
+  var referenceListenerProps = _extends({
+    'aria-describedby': showTooltip ? tooltipId : undefined
+  }, !disableFocusListener && !isControlled && {
+    onFocus: function onFocus() {
+      return setShowTooltip(true);
+    }
+  }, !disableFocusListener && !isControlled && {
+    onBlur: function onBlur() {
+      return setShowTooltip(false);
+    }
+  }, !disableHoverListener && !isControlled && {
+    onMouseEnter: onMouseEnter
+  }, !disableHoverListener && !isControlled && {
+    onMouseLeave: onMouseLeave
+  }, !disableKeyboardListener && !isControlled && {
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Escape') setShowTooltip(false);
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
+        setShowTooltip(!showTooltip);
       }
-    },
-    // clickListner
-    ...!disableClickListner && !isControlled && {
-      onClick: () => setShowTooltip(!showTooltip)
     }
-  };
-  const displayTooltipStyle = (!isControlled || isPositioned) && showTooltip && content ? void 0 : "none";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    cloneElement(children, {
-      ref: refs.setReference,
-      ...referenceListenerProps
+  }, !disableClickListner && !isControlled && {
+    onClick: function onClick() {
+      return setShowTooltip(!showTooltip);
+    }
+  });
+  var displayTooltipStyle = (!isControlled || isPositioned) && showTooltip && content ? undefined : 'none';
+  return React.createElement(React.Fragment, null, cloneElement(children, _extends({
+    ref: refs.setReference
+  }, referenceListenerProps)), React.createElement("div", _extends({
+    className: classNames(className, 'eds-tooltip', {
+      'eds-tooltip--negative': variant === error || variant === 'negative'
     }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classNames(className, "eds-tooltip", {
-          "eds-tooltip--negative": variant === error || variant === "negative"
-        }),
-        ref: refs.setFloating,
-        style: {
-          ...floatingStyles,
-          display: displayTooltipStyle,
-          ...style
-        },
-        role: "tooltip",
-        id: tooltipId,
-        onMouseEnter: !disableHoverListener ? onMouseEnter : void 0,
-        onMouseLeave: !disableHoverListener ? onMouseLeave : void 0,
-        ...rest,
-        children: [
-          content,
-          isOpen && showCloseButton && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              className: "eds-tooltip__close-button",
-              onClick: () => {
-                setShowTooltip(false);
-                onClickCloseButton();
-              },
-              type: "button",
-              "aria-label": "Lukk tooltip",
-              children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": "true" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `eds-tooltip__arrow--${actualPlacement?.split("-")?.[0]}`,
-              ref: tooltipArrowRef,
-              style: {
-                left: middlewareData.arrow?.x,
-                top: middlewareData.arrow?.y
-              }
-            }
-          )
-        ]
-      }
-    )
-  ] });
+    ref: refs.setFloating,
+    style: _extends({}, floatingStyles, {
+      display: displayTooltipStyle
+    }, style),
+    role: "tooltip",
+    id: tooltipId,
+    onMouseEnter: !disableHoverListener ? onMouseEnter : undefined,
+    onMouseLeave: !disableHoverListener ? onMouseLeave : undefined
+  }, rest), content, isOpen && showCloseButton && React.createElement(IconButton, {
+    className: "eds-tooltip__close-button",
+    onClick: function onClick() {
+      setShowTooltip(false);
+      onClickCloseButton();
+    },
+    type: "button",
+    "aria-label": "Lukk tooltip"
+  }, React.createElement(CloseIcon, {
+    "aria-hidden": "true"
+  })), React.createElement("div", {
+    className: "eds-tooltip__arrow--" + (actualPlacement == null || (_actualPlacement$spli = actualPlacement.split('-')) == null ? void 0 : _actualPlacement$spli[0]),
+    ref: tooltipArrowRef,
+    style: {
+      left: (_middlewareData$arrow = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow.x,
+      top: (_middlewareData$arrow2 = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow2.y
+    }
+  })));
 };
-const Popover = ({
-  children,
-  placement = "bottom-start",
-  showPopover: controlledState,
-  setShowPopover: setControlledState
-}) => {
-  const [showPopover, setShowPopover, controlled] = useCustomState(
-    controlledState,
-    setControlledState
-  );
-  const { refs, floatingStyles, elements, update } = useFloating$1({
-    placement: standardisePlacement(placement),
-    middleware: [
-      offset$1(space.extraSmall),
-      flip$1(),
-      shift$1({
+
+var _excluded = ["children"];
+var Popover = function Popover(_ref) {
+  var children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    controlledState = _ref.showPopover,
+    setControlledState = _ref.setShowPopover;
+  var _useCustomState = useCustomState(controlledState, setControlledState),
+    showPopover = _useCustomState[0],
+    setShowPopover = _useCustomState[1],
+    controlled = _useCustomState[2];
+  // calculations for floating-UI popover position
+  var _useFloating = useFloating$1({
+      placement: standardisePlacement(placement),
+      middleware: [offset$1(space.extraSmall), flip$1(), shift$1({
         padding: space.extraSmall,
-        limiter: limitShift$1({ offset: 8 })
-      })
-    ]
-  });
-  useEffect(() => {
+        limiter: limitShift$1({
+          offset: 8
+        })
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    elements = _useFloating.elements,
+    update = _useFloating.update;
+  // Since we use CSS instead of conditional rendering when hiding dropdownlist
+  // we can't use the whileElementsMounted option and need to handle
+  // cleanup ourselves. See https://floating-ui.com/docs/autoupdate
+  useEffect(function () {
     if (showPopover && elements.reference && elements.floating) {
-      const cleanup = autoUpdate$1(elements.reference, elements.floating, update);
+      var cleanup = autoUpdate$1(elements.reference, elements.floating, update);
       return cleanup;
     }
   }, [showPopover, elements, update]);
-  useOnClickOutside(
-    [refs.floating, refs.reference],
-    () => setShowPopover(false)
-  );
-  const popoverTriggerProps = {
-    "aria-haspopup": "dialog",
-    "aria-expanded": showPopover,
+  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: () => setShowPopover((prev) => !prev)
+    type: 'button'
+  }, !controlled && {
+    onClick: function onClick() {
+      return setShowPopover(function (prev) {
+        return !prev;
+      });
     }
-  };
-  const popoverContentProps = {
-    role: "dialog",
-    "aria-modal": false,
-    "aria-hidden": !showPopover,
+  });
+  var popoverContentProps = {
+    role: 'dialog',
+    'aria-modal': false,
+    'aria-hidden': !showPopover,
     ref: refs.setFloating,
-    style: { ...!showPopover && { display: "none" } },
-    onKeyDown: (event) => {
-      if (event.key === "Escape") setShowPopover(false);
+    style: _extends({}, !showPopover && {
+      display: 'none'
+    }),
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Escape') setShowPopover(false);
     },
-    onBlur: (event) => {
-      const elementReceivingFocus = event.relatedTarget;
-      if (!elementReceivingFocus || elementReceivingFocus.getAttribute("tabindex") === "-1")
-        return;
-      const focusedElementIsPopover = elementContainsElement(
-        refs.floating.current,
-        elementReceivingFocus
-      );
-      const focusedElementIsTrigger = elementContainsElement(
-        refs.reference.current,
-        elementReceivingFocus
-      );
-      const popoverShouldClose = !focusedElementIsPopover && !focusedElementIsTrigger;
+    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);
     }
   };
-  const closeButtonProps = {
-    onClick: () => setShowPopover(false),
-    type: "button"
+  var closeButtonProps = {
+    onClick: function onClick() {
+      return setShowPopover(false);
+    },
+    type: 'button'
   };
-  const contextValue = {
-    showPopover,
-    floatingStyles,
-    popoverTriggerProps,
-    popoverContentProps,
-    closeButtonProps
+  var contextValue = {
+    showPopover: showPopover,
+    floatingStyles: floatingStyles,
+    popoverTriggerProps: popoverTriggerProps,
+    popoverContentProps: popoverContentProps,
+    closeButtonProps: closeButtonProps
   };
-  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: contextValue, children });
+  return React.createElement(PopoverContext.Provider, {
+    value: contextValue
+  }, children);
 };
-const PopoverTrigger = ({ children }) => {
-  const { popoverTriggerProps } = usePopoverContext();
-  const child = React.Children.only(children);
+var PopoverTrigger = function PopoverTrigger(_ref2) {
+  var children = _ref2.children;
+  var _usePopoverContext = usePopoverContext(),
+    popoverTriggerProps = _usePopoverContext.popoverTriggerProps;
+  var child = React.Children.only(children);
   return cloneElement(child, popoverTriggerProps);
 };
-const PopoverCloseButton = ({
-  children,
-  ...rest
-}) => {
-  const { closeButtonProps } = usePopoverContext();
-  return cloneElement(children, { ...closeButtonProps, ...rest });
+var PopoverCloseButton = function PopoverCloseButton(_ref3) {
+  var children = _ref3.children,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+  var _usePopoverContext2 = usePopoverContext(),
+    closeButtonProps = _usePopoverContext2.closeButtonProps;
+  return cloneElement(children, _extends({}, closeButtonProps, rest));
 };
-const PopoverContent = React.forwardRef(({ children, className, style }, ref) => {
-  const { floatingStyles, popoverContentProps } = usePopoverContext();
-  return /* @__PURE__ */ jsx(
-    Contrast,
-    {
-      className: classNames(className, "eds-popover"),
-      ...popoverContentProps,
-      style: { ...floatingStyles, ...popoverContentProps.style, ...style },
-      ref: mergeRefs(popoverContentProps.ref, ref),
-      children
-    }
-  );
+var PopoverContent = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var children = _ref4.children,
+    className = _ref4.className,
+    style = _ref4.style;
+  var _usePopoverContext3 = usePopoverContext(),
+    floatingStyles = _usePopoverContext3.floatingStyles,
+    popoverContentProps = _usePopoverContext3.popoverContentProps;
+  return React.createElement(Contrast, _extends({
+    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: mergeRefs(popoverContentProps.ref, ref)
+  }), children);
 });
-const PopoverContext = createContext(
-  void 0
-);
-const usePopoverContext = () => {
-  const context = useContext(PopoverContext);
+var PopoverContext = /*#__PURE__*/createContext(undefined);
+var usePopoverContext = function usePopoverContext() {
+  var context = useContext(PopoverContext);
   if (context == null) {
-    throw Error("usePopoverContext must be used within <Popover/>");
+    throw Error('usePopoverContext must be used within <Popover/>');
   }
   return context;
 };
-const useCustomState = (state, setState) => {
-  const [internalState, setInternalState] = React.useState(false);
-  const controlled = state !== void 0 && setState !== void 0;
+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];
 };
@@ -296,13 +331,8 @@ function elementContainsElement(parent, child) {
   if (!parent) return false;
   return parent === child || parent.contains(child);
 }
-warnAboutMissingStyles("tooltip");
-export {
-  Popover,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverTrigger,
-  Tooltip,
-  standardisePlacement
-};
+
+warnAboutMissingStyles('tooltip');
+
+export { Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, Tooltip, standardisePlacement };
 //# sourceMappingURL=tooltip.esm.js.map