@amboss/design-system 1.22.0 → 1.23.2

package/build/cjs/src/components/Toggletip/BasePopover.js

@@ -1,181 +0,0 @@
-'use strict';
-
-var _extends = require('@babel/runtime/helpers/extends');
-var React = require('react');
-var TooltipContent = require('../Tooltip/TooltipContent.js');
-var Sheet = require('../Sheet/Sheet.js');
-var FocusTrapWrapper = require('../../shared/FocusTrapWrapper.js');
-var _breakpoints = require('../../../build-tokens/_breakpoints.json.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefault(_extends);
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-const FocusTrapContent = /*#__PURE__*/React__default.default.forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    ref: ref
-  }, children);
-});
-const VisibilityChangeReason = {
-  triggerClick: "triggerClick",
-  outsideClick: "outsideClick"
-};
-function BasePopover(_ref2) {
-  let {
-    placement = "auto",
-    content,
-    children,
-    contentPadding = "m",
-    maxWidth,
-    externalTriggerRef,
-    portalContainer,
-    name = "Popover",
-    isVisible: isPopoverVisible,
-    dismissOnOutsideClick = true,
-    "data-e2e-test-id": dataE2eTestId,
-    hasInvertedSubTheme,
-    defaultVerticalPlacement,
-    onVisibilityChange,
-    disableInitialFocus = false,
-    disableReturnFocusToTrigger = false,
-    renderAsSheetOnMobile = false,
-    ...restContentProps
-  } = _ref2;
-  const tooltipId = React.useMemo(() => `DS${name}_${Math.floor(Date.now() * Math.random())}`, [name]);
-  const [isVisible, setVisible] = React.useState(isPopoverVisible);
-  const [isMobileBreakPoint, setIsMobileBreakpoint] = React.useState(false);
-  const internalTriggerRef = React.useRef(null);
-  const triggerRef = externalTriggerRef || internalTriggerRef;
-  const isOutsideClickOnTrigger = React.useRef(false);
-  const isPrevMobileBreakPointRef = React.useRef(false);
-  const toggleVisibility = React.useCallback((status, reason) => {
-    setVisible(status);
-    if (onVisibilityChange) {
-      onVisibilityChange(status, reason);
-    }
-  }, [onVisibilityChange]);
-
-  // Outside click is also fired when the Popover is open and trigger is clicked. `isOutsideClickOnTrigger` saves this condition and we check for it so as to not toggle the Popover twice.
-  const handleTriggerClick = React.useCallback(() => {
-    if (!isOutsideClickOnTrigger.current) {
-      toggleVisibility(!isVisible, VisibilityChangeReason.triggerClick);
-    } else {
-      // reset this value so that Popover can open in next click
-      isOutsideClickOnTrigger.current = false;
-    }
-  }, [toggleVisibility, isVisible]);
-  const handleClickOutsideDeactivates = React.useCallback(evt => {
-    if (triggerRef.current.contains(evt.target)) {
-      isOutsideClickOnTrigger.current = true;
-    }
-    return true;
-  }, [triggerRef, isOutsideClickOnTrigger]);
-  const handlePostDeactivate = React.useCallback(() => {
-    const reason = isOutsideClickOnTrigger.current ? VisibilityChangeReason.triggerClick : VisibilityChangeReason.outsideClick;
-    toggleVisibility(false, reason);
-  }, [toggleVisibility]);
-  React.useEffect(() => {
-    setVisible(isPopoverVisible);
-  }, [isPopoverVisible]);
-  React.useEffect(() => {
-    // Check if this is a mobile breakpoint
-    if (renderAsSheetOnMobile) {
-      setIsMobileBreakpoint(window.innerWidth <= _breakpoints.default.medium.value);
-    }
-  }, [isVisible, renderAsSheetOnMobile]);
-  React.useEffect(() => {
-    isPrevMobileBreakPointRef.current = isMobileBreakPoint;
-  }, [isMobileBreakPoint]);
-  React.useEffect(() => {
-    let trigger;
-    if (externalTriggerRef?.current && !children) {
-      trigger = externalTriggerRef.current;
-      trigger.setAttribute("tabindex", "0");
-      trigger.addEventListener("click", handleTriggerClick);
-    }
-    return () => {
-      if (trigger) {
-        trigger.removeEventListener("click", handleTriggerClick);
-      }
-    };
-  }, [externalTriggerRef, children, handleTriggerClick]);
-  React.useEffect(() => {
-    if (externalTriggerRef?.current && !children) {
-      const trigger = externalTriggerRef.current;
-      if (isVisible) {
-        trigger.setAttribute("aria-expanded", true);
-        trigger.setAttribute("aria-controls", tooltipId);
-      } else {
-        trigger.removeAttribute("aria-expanded");
-        trigger.removeAttribute("aria-controls");
-      }
-    }
-  }, [externalTriggerRef, children, tooltipId, isVisible]);
-  const triggerElm = children ? /*#__PURE__*/React__default.default.cloneElement(children, {
-    ref: triggerRef,
-    ...(isVisible && {
-      "aria-expanded": true,
-      "aria-controls": tooltipId
-    }),
-    tabIndex: 0,
-    onClick: evt => {
-      handleTriggerClick();
-      if (children.props.onClick) {
-        children.props.onClick(evt);
-      }
-    }
-  }) : null;
-  if (isMobileBreakPoint) {
-    // render as Sheet
-    const sheetElm = /*#__PURE__*/React__default.default.createElement(Sheet.Sheet, {
-      id: tooltipId,
-      isVisible: isVisible,
-      portalContainer: portalContainer,
-      dismissOnOutsideClick: dismissOnOutsideClick,
-      disableInitialFocus: disableInitialFocus,
-      disableReturnFocusToTrigger: disableReturnFocusToTrigger,
-      onClose: handlePostDeactivate,
-      onClickOutsideDeactivates: handleClickOutsideDeactivates
-    }, content);
-    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, triggerElm, sheetElm);
-  }
-
-  // render as Popover
-  const contentElm = /*#__PURE__*/React__default.default.createElement(FocusTrapWrapper.FocusTrapWrapper, {
-    focusTrapOptions: {
-      clickOutsideDeactivates: dismissOnOutsideClick && handleClickOutsideDeactivates,
-      // de-active focus trap on outside click
-      allowOutsideClick: true,
-      escapeDeactivates: true,
-      // de-activate focus trap on escape key
-      fallbackFocus: `#${tooltipId}`,
-      // set focus to tooltip content container if it has no focusable element
-      onPostDeactivate: handlePostDeactivate,
-      preventScroll: true,
-      initialFocus: () => !disableInitialFocus,
-      returnFocusOnDeactivate: !disableReturnFocusToTrigger
-    }
-  }, /*#__PURE__*/React__default.default.createElement(FocusTrapContent, null, content));
-  const tooltipElm = /*#__PURE__*/React__default.default.createElement(TooltipContent.TooltipContent, _extends__default.default({}, restContentProps, {
-    // eslint-disable-line react/jsx-props-no-spreading
-    defaultVerticalPlacement: defaultVerticalPlacement,
-    dataDSId: name,
-    content: contentElm,
-    contentPadding: contentPadding,
-    maxWidth: maxWidth,
-    placement: placement,
-    portalContainer: portalContainer,
-    dataE2eTestId: dataE2eTestId,
-    hasInvertedSubTheme: hasInvertedSubTheme,
-    isVisible: isVisible,
-    tooltipId: tooltipId,
-    triggerRef: triggerRef
-  }));
-  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, triggerElm, tooltipElm);
-}
-
-exports.BasePopover = BasePopover;

package/build/cjs/src/components/Toggletip/Toggletip.js

@@ -1,18 +0,0 @@
-'use strict';
-
-var _extends = require('@babel/runtime/helpers/extends');
-var React = require('react');
-var BasePopover = require('./BasePopover.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefault(_extends);
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-function Toggletip(props) {
-  return /*#__PURE__*/React__default.default.createElement(BasePopover.BasePopover, _extends__default.default({
-    name: "Toggletip"
-  }, props));
-}
-
-exports.Toggletip = Toggletip;

package/build/cjs/src/components/Tooltip/BaseTooltip.js

@@ -1,163 +0,0 @@
-'use strict';
-
-var React = require('react');
-var TooltipContent = require('./TooltipContent.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-const SHOW_HIDE_DELAY = 200;
-function BaseTooltip(_ref) {
-  let {
-    placement = "auto",
-    content,
-    children,
-    externalTriggerRef,
-    portalContainer,
-    contentPadding,
-    maxWidth,
-    "data-e2e-test-id": dataE2eTestId,
-    onVisibilityChange
-  } = _ref;
-  const tooltipId = React.useMemo(() => `DSTooltip_${Math.floor(Date.now() * Math.random())}`, []);
-  const [isVisible, setVisible] = React.useState(false);
-  const triggeredByEvent = React.useRef(null); // indicates if triggered by hover or focus
-  const isTooltipHovered = React.useRef(false);
-  const isTriggerHovered = React.useRef(false);
-  const hideTooltipTimeoutId = React.useRef(null);
-  const showTooltipTimeoutId = React.useRef(null);
-  const internalTriggerRef = React.useRef(null);
-  const triggerRef = externalTriggerRef || internalTriggerRef;
-  const toggleVisibility = React.useCallback(status => {
-    setVisible(status);
-    if (onVisibilityChange) {
-      onVisibilityChange(status);
-    }
-  }, [onVisibilityChange]);
-  const handleTriggerPointerEnter = React.useCallback(() => {
-    isTriggerHovered.current = true;
-    if (!isTooltipHovered.current) {
-      clearTimeout(showTooltipTimeoutId.current);
-      // Delay show tooltip to prevent flickering when mouse moves quickly over trigger
-      showTooltipTimeoutId.current = setTimeout(() => {
-        if (isTriggerHovered.current) {
-          triggeredByEvent.current = "hover";
-          toggleVisibility(true);
-        }
-      }, SHOW_HIDE_DELAY);
-    }
-  }, [toggleVisibility]);
-  const handleTriggerPointerLeave = React.useCallback(() => {
-    isTriggerHovered.current = false;
-    clearTimeout(hideTooltipTimeoutId.current);
-    // Delay removing tooltip from DOM to allow hover over tooltip element
-    hideTooltipTimeoutId.current = setTimeout(() => {
-      if (!isTooltipHovered.current && triggeredByEvent.current === "hover" && !isTriggerHovered.current) {
-        toggleVisibility(false);
-      }
-    }, SHOW_HIDE_DELAY);
-  }, [toggleVisibility]);
-  const handleTriggerFocus = React.useCallback(() => {
-    triggeredByEvent.current = "focus";
-    toggleVisibility(true);
-  }, [toggleVisibility]);
-  const handleTriggerBlur = React.useCallback(() => {
-    if (triggeredByEvent.current === "focus") {
-      toggleVisibility(false);
-    }
-  }, [toggleVisibility]);
-  const handleTriggerKeyDown = React.useCallback(evt => {
-    if (evt.key === "Escape") {
-      toggleVisibility(false);
-    }
-  }, [toggleVisibility]);
-  const handleTooltipPointerEnter = () => {
-    isTooltipHovered.current = true;
-  };
-  const handleTooltipPointerLeave = () => {
-    isTooltipHovered.current = false;
-    if (triggeredByEvent.current === "hover") {
-      toggleVisibility(false);
-    }
-  };
-  React.useEffect(() => () => {
-    // clear timers
-    clearTimeout(showTooltipTimeoutId.current);
-    clearTimeout(hideTooltipTimeoutId.current);
-  }, []);
-  React.useEffect(() => {
-    let trigger;
-    if (externalTriggerRef?.current && !children) {
-      trigger = externalTriggerRef.current;
-      trigger.setAttribute("tabindex", "0");
-      trigger.addEventListener("pointerenter", handleTriggerPointerEnter);
-      trigger.addEventListener("pointerleave", handleTriggerPointerLeave);
-      trigger.addEventListener("focus", handleTriggerFocus);
-      trigger.addEventListener("blur", handleTriggerBlur);
-      trigger.addEventListener("keydown", handleTriggerKeyDown);
-    }
-    return () => {
-      if (trigger) {
-        trigger.removeEventListener("pointerenter", handleTriggerPointerEnter);
-        trigger.removeEventListener("pointerleave", handleTriggerPointerLeave);
-        trigger.removeEventListener("focus", handleTriggerFocus);
-        trigger.removeEventListener("blur", handleTriggerBlur);
-        trigger.removeEventListener("keydown", handleTriggerKeyDown);
-      }
-    };
-  }, [externalTriggerRef, children, handleTriggerPointerEnter, handleTriggerPointerLeave, handleTriggerFocus, handleTriggerBlur, handleTriggerKeyDown]);
-  React.useEffect(() => {
-    if (externalTriggerRef?.current && !children) {
-      const trigger = externalTriggerRef.current;
-      if (isVisible) {
-        trigger.setAttribute("aria-describedby", tooltipId);
-      } else {
-        trigger.removeAttribute("aria-describedby");
-      }
-    }
-  }, [externalTriggerRef, children, tooltipId, isVisible]);
-  const triggerElm = children ? /*#__PURE__*/React__default.default.cloneElement(children, {
-    ref: triggerRef,
-    ...(isVisible && {
-      "aria-describedby": tooltipId
-    }),
-    tabIndex: 0,
-    onPointerEnter: handleTriggerPointerEnter,
-    onPointerLeave: handleTriggerPointerLeave,
-    onFocus: evt => {
-      handleTriggerFocus();
-      if (children.props.onFocus) {
-        children.props.onFocus(evt);
-      }
-    },
-    onBlur: evt => {
-      handleTriggerBlur();
-      if (children.props.onBlur) {
-        if (children.props.onBlur) {
-          children.props.onBlur(evt);
-        }
-      }
-    },
-    onKeyDown: handleTriggerKeyDown
-  }) : null;
-  const tooltipElm = /*#__PURE__*/React__default.default.createElement(TooltipContent.TooltipContent, {
-    dataDSId: "Tooltip",
-    content: content,
-    placement: placement,
-    portalContainer: portalContainer,
-    dataE2eTestId: dataE2eTestId,
-    isVisible: isVisible,
-    tooltipId: tooltipId,
-    triggerRef: triggerRef,
-    "aria-hidden": true,
-    role: "tooltip",
-    contentPadding: contentPadding,
-    maxWidth: maxWidth,
-    onTooltipPointerEnter: handleTooltipPointerEnter,
-    onTooltipPointerLeave: handleTooltipPointerLeave
-  });
-  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, triggerElm, tooltipElm);
-}
-
-exports.BaseTooltip = BaseTooltip;

package/build/cjs/src/components/Tooltip/Tooltip.js

@@ -1,27 +0,0 @@
-'use strict';
-
-var _extends = require('@babel/runtime/helpers/extends');
-var React = require('react');
-var Text = require('../Typography/Text/Text.js');
-var BaseTooltip = require('./BaseTooltip.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefault(_extends);
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-function Tooltip(_ref) {
-  let {
-    content,
-    ...rest
-  } = _ref;
-  const contentElm = /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    size: "s"
-  }, content);
-  /* eslint-disable-next-line react/jsx-props-no-spreading */
-  return /*#__PURE__*/React__default.default.createElement(BaseTooltip.BaseTooltip, _extends__default.default({
-    content: contentElm
-  }, rest));
-}
-
-exports.Tooltip = Tooltip;