@entur/tooltip 5.2.12 → 5.2.13-beta.1

package/dist/tooltip.esm.js

@@ -1,329 +1,294 @@
-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 (e.includes(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
+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";
 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;
   }
 }
-
-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({
+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({
         element: tooltipArrowRef,
         padding: borderRadiuses.medium
-      })]
-    }),
-    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 () {
+      })
+    ]
+  });
+  useEffect(() => {
     if (showTooltip && elements.reference && elements.floating) {
-      var cleanup = autoUpdate(elements.reference, elements.floating, update);
+      const cleanup = autoUpdate(elements.reference, elements.floating, update);
       return cleanup;
     }
   }, [showTooltip, elements, update]);
-  var onMouseEnter = function onMouseEnter() {
-    var _hoverDelay$enter;
+  const onMouseEnter = () => {
     if (isControlled) return;
     clearTimeout(hoverCloseTimer.current);
-    hoverOpenTimer.current = setTimeout(function () {
+    hoverOpenTimer.current = setTimeout(() => {
       setShowTooltip(true);
-    }, (_hoverDelay$enter = hoverDelay == null ? void 0 : hoverDelay.enter) != null ? _hoverDelay$enter : 150);
+    }, hoverDelay?.enter ?? 150);
   };
-  var onMouseLeave = function onMouseLeave() {
-    var _hoverDelay$leave;
+  const onMouseLeave = () => {
     if (isControlled) return;
     clearTimeout(hoverOpenTimer.current);
-    hoverCloseTimer.current = setTimeout(function () {
+    hoverCloseTimer.current = setTimeout(() => {
       setShowTooltip(false);
-    }, (_hoverDelay$leave = hoverDelay == null ? void 0 : hoverDelay.leave) != null ? _hoverDelay$leave : 300);
+    }, hoverDelay?.leave ?? 300);
   };
-  React.useEffect(function () {
-    return function () {
+  React.useEffect(() => {
+    return () => {
       clearTimeout(hoverOpenTimer.current);
       clearTimeout(hoverCloseTimer.current);
     };
   }, []);
-  React.useEffect(function () {
-    if (isOpen !== undefined) setShowTooltip(isOpen);
+  React.useEffect(() => {
+    if (isOpen !== void 0) setShowTooltip(isOpen);
   }, [isOpen]);
-  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);
+  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);
+        }
       }
-    }
-  }, !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'
-    }),
-    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
+    // 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
+    }),
+    /* @__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
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
-
-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({
+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({
         padding: space.extraSmall,
-        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 () {
+        limiter: limitShift$1({ offset: 8 })
+      })
+    ]
+  });
+  useEffect(() => {
     if (showPopover && elements.reference && elements.floating) {
-      var cleanup = autoUpdate$1(elements.reference, elements.floating, update);
+      const cleanup = autoUpdate$1(elements.reference, elements.floating, update);
       return cleanup;
     }
   }, [showPopover, elements, update]);
-  useOnClickOutside([refs.floating, refs.reference], function () {
-    return setShowPopover(false);
-  });
-  var popoverTriggerProps = _extends({
-    'aria-haspopup': 'dialog',
-    'aria-expanded': showPopover,
+  useOnClickOutside(
+    [refs.floating, refs.reference],
+    () => setShowPopover(false)
+  );
+  const popoverTriggerProps = {
+    "aria-haspopup": "dialog",
+    "aria-expanded": showPopover,
     ref: refs.setReference,
-    type: 'button'
-  }, !controlled && {
-    onClick: function onClick() {
-      return setShowPopover(function (prev) {
-        return !prev;
-      });
+    type: "button",
+    ...!controlled && {
+      onClick: () => setShowPopover((prev) => !prev)
     }
-  });
-  var popoverContentProps = {
-    role: 'dialog',
-    'aria-modal': false,
-    'aria-hidden': !showPopover,
+  };
+  const 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);
+    style: { ...!showPopover && { display: "none" } },
+    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;
+    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;
       if (showPopover && popoverShouldClose) setShowPopover(false);
     }
   };
-  var closeButtonProps = {
-    onClick: function onClick() {
-      return setShowPopover(false);
-    },
-    type: 'button'
+  const closeButtonProps = {
+    onClick: () => setShowPopover(false),
+    type: "button"
   };
-  var contextValue = {
-    showPopover: showPopover,
-    floatingStyles: floatingStyles,
-    popoverTriggerProps: popoverTriggerProps,
-    popoverContentProps: popoverContentProps,
-    closeButtonProps: closeButtonProps
+  const contextValue = {
+    showPopover,
+    floatingStyles,
+    popoverTriggerProps,
+    popoverContentProps,
+    closeButtonProps
   };
-  return React.createElement(PopoverContext.Provider, {
-    value: contextValue
-  }, children);
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: contextValue, children });
 };
-var PopoverTrigger = function PopoverTrigger(_ref2) {
-  var children = _ref2.children;
-  var _usePopoverContext = usePopoverContext(),
-    popoverTriggerProps = _usePopoverContext.popoverTriggerProps;
-  var child = React.Children.only(children);
+const PopoverTrigger = ({ children }) => {
+  const { popoverTriggerProps } = usePopoverContext();
+  const child = React.Children.only(children);
   return cloneElement(child, popoverTriggerProps);
 };
-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 PopoverCloseButton = ({
+  children,
+  ...rest
+}) => {
+  const { closeButtonProps } = usePopoverContext();
+  return cloneElement(children, { ...closeButtonProps, ...rest });
 };
-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 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 PopoverContext = /*#__PURE__*/createContext(undefined);
-var usePopoverContext = function usePopoverContext() {
-  var context = useContext(PopoverContext);
+const PopoverContext = createContext(
+  void 0
+);
+const usePopoverContext = () => {
+  const context = useContext(PopoverContext);
   if (context == null) {
-    throw Error('usePopoverContext must be used within <Popover/>');
+    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;
+const useCustomState = (state, setState) => {
+  const [internalState, setInternalState] = React.useState(false);
+  const controlled = state !== void 0 && setState !== void 0;
   if (controlled) return [state, setState, controlled];
   return [internalState, setInternalState, controlled];
 };
@@ -331,8 +296,13 @@ 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