@amboss/design-system 1.19.1 → 1.20.0

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

@@ -3,20 +3,28 @@
 const DISTANCE_FROM_TRIGGER = 4;
 const ANIMATION_DISTANCE = 8;
 const ARROW_SIZE = 6;
-const TOOLTIP_MARGIN = ARROW_SIZE + ANIMATION_DISTANCE + DISTANCE_FROM_TRIGGER;
-const ARROW_OFFSET = 8;
-
+const ARROW_SIZE_BIG = 8;
+const getArrowOffset = size => size * 2;
 /**
  * Get tooltip position and width
  */
-function getTooltipStyle(placement, triggerRef, tooltipRef, document, window) {
+function getTooltipStyle(placement) {
+  let defaultVerticalPlacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "top";
+  let triggerRef = arguments.length > 2 ? arguments[2] : undefined;
+  let tooltipRef = arguments.length > 3 ? arguments[3] : undefined;
+  let document = arguments.length > 4 ? arguments[4] : undefined;
+  let window = arguments.length > 5 ? arguments[5] : undefined;
+  let arrowSize = arguments.length > 6 ? arguments[6] : undefined;
   const triggerRect = triggerRef.current.getBoundingClientRect();
   const tooltipRect = tooltipRef.current.getBoundingClientRect();
   const viewportWidth = document.documentElement.clientWidth;
+  const viewportHeight = document.documentElement.clientHeight;
   let top = 0;
   let left = 0;
-  let verticalPlacement = "top";
+  let verticalPlacement = defaultVerticalPlacement;
   let horizontalPlacement = "center";
+  const arrowOffset = getArrowOffset(arrowSize);
+  const tooltipMargin = arrowSize + ANIMATION_DISTANCE + DISTANCE_FROM_TRIGGER;
   switch (placement) {
     case "top":
     case "bottom":
@@ -33,9 +41,11 @@ function getTooltipStyle(placement, triggerRef, tooltipRef, document, window) {
         break;
       }
     default:
-      // If there is no space on the top of trigger, then place it at the bottom
-      if (triggerRect.top < tooltipRect.height) {
+      // If there is no space for the default vertical position of the trigger place it on the opposite side
+      if (verticalPlacement === "top" && triggerRect.top < tooltipRect.height) {
         verticalPlacement = "bottom";
+      } else if (verticalPlacement === "bottom" && triggerRect.bottom + tooltipRect.height > viewportHeight) {
+        verticalPlacement = "top";
       }
 
       // Check if we have space on the left for half of the tooltip width
@@ -51,16 +61,16 @@ function getTooltipStyle(placement, triggerRef, tooltipRef, document, window) {
       }
   }
   if (verticalPlacement === "top") {
-    top = triggerRect.top - tooltipRect.height - TOOLTIP_MARGIN;
+    top = triggerRect.top - tooltipRect.height - tooltipMargin;
   } else {
-    top = triggerRect.bottom + TOOLTIP_MARGIN;
+    top = triggerRect.bottom + tooltipMargin;
   }
   switch (horizontalPlacement) {
     case "left":
-      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width + ARROW_OFFSET + ARROW_SIZE;
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width + arrowOffset + arrowSize;
       break;
     case "right":
-      left = triggerRect.left + triggerRect.width / 2 - ARROW_OFFSET - ARROW_SIZE;
+      left = triggerRect.left + triggerRect.width / 2 - arrowOffset - arrowSize;
       break;
     default:
       left = triggerRect.left + triggerRect.width / 2;
@@ -74,8 +84,8 @@ function getTooltipStyle(placement, triggerRef, tooltipRef, document, window) {
 }
 
 exports.ANIMATION_DISTANCE = ANIMATION_DISTANCE;
-exports.ARROW_OFFSET = ARROW_OFFSET;
 exports.ARROW_SIZE = ARROW_SIZE;
+exports.ARROW_SIZE_BIG = ARROW_SIZE_BIG;
 exports.DISTANCE_FROM_TRIGGER = DISTANCE_FROM_TRIGGER;
-exports.TOOLTIP_MARGIN = TOOLTIP_MARGIN;
+exports.getArrowOffset = getArrowOffset;
 exports.getTooltipStyle = getTooltipStyle;

package/build/cjs/src/index.js

@@ -50,6 +50,7 @@ var Tooltip = require('./components/Tooltip/Tooltip.js');
 var Tag = require('./components/Tag/Tag.js');
 var TagGroup = require('./components/TagGroup/TagGroup.js');
 var Toggletip = require('./components/Toggletip/Toggletip.js');
+var Popover = require('./components/Popover/Popover.js');
 var UserHighlightTooltip = require('./components/UserHighlightTooltip/UserHighlightTooltip.js');
 var Input = require('./components/Form/Input/Input.js');
 var PasswordInput = require('./components/Form/PasswordInput/PasswordInput.js');
@@ -134,6 +135,7 @@ exports.MAX_TAG_WIDTH = Tag.MAX_TAG_WIDTH;
 exports.Tag = Tag.Tag;
 exports.TagGroup = TagGroup.TagGroup;
 exports.Toggletip = Toggletip.Toggletip;
+exports.Popover = Popover.Popover;
 exports.UserHighlightTooltip = UserHighlightTooltip.UserHighlightTooltip;
 exports.Input = Input.Input;
 exports.PasswordInput = PasswordInput.PasswordInput;

package/build/esm/src/components/Popover/Popover.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { BasePopoverProps } from "../Toggletip/BasePopover";
+import { TooltipContentProps } from "../Tooltip/TooltipContent";
+import { TooltipConditionalProps } from "../Tooltip/types";
+export type PopoverProps = Omit<BasePopoverProps, "contentPadding"> & TooltipConditionalProps & Pick<TooltipContentProps, "hideArrow">;
+export declare function Popover(props: PopoverProps): React.ReactElement;

package/build/esm/src/components/Popover/Popover.js

@@ -0,0 +1,16 @@
+import _extends from '@babel/runtime/helpers/extends';
+import React from 'react';
+import { BasePopover } from '../Toggletip/BasePopover.js';
+
+function Popover(props) {
+  return /*#__PURE__*/React.createElement(BasePopover, _extends({
+    name: "Popover",
+    maxWidth: 400,
+    defaultVerticalPlacement: "bottom",
+    hasInvertedSubTheme: false,
+    borderRadius: "s"
+  }, props));
+}
+
+export { Popover };
+//# sourceMappingURL=Popover.js.map

package/build/esm/src/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { BasePopover, BasePopoverProps } from \"../Toggletip/BasePopover\";\nimport { TooltipContentProps } from \"../Tooltip/TooltipContent\";\nimport { TooltipConditionalProps } from \"../Tooltip/types\";\n\nexport type PopoverProps = Omit<BasePopoverProps, \"contentPadding\"> &\n  TooltipConditionalProps &\n  Pick<TooltipContentProps, \"hideArrow\">;\n\nexport function Popover(props: PopoverProps): React.ReactElement {\n  return (\n    <BasePopover\n      name=\"Popover\"\n      maxWidth={400}\n      defaultVerticalPlacement=\"bottom\"\n      hasInvertedSubTheme={false}\n      borderRadius=\"s\"\n      {...props} // eslint-disable-line react/jsx-props-no-spreading\n    />\n  );\n}\n"],"names":["Popover","props","React","createElement","BasePopover","_extends","name","maxWidth","defaultVerticalPlacement","hasInvertedSubTheme","borderRadius"],"mappings":";;;;AAUO,SAASA,OAAOA,CAACC,KAAmB,EAAsB;AAC/D,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,WAAW,EAAAC,QAAA,CAAA;AACVC,IAAAA,IAAI,EAAC,SAAS;AACdC,IAAAA,QAAQ,EAAE,GAAI;AACdC,IAAAA,wBAAwB,EAAC,QAAQ;AACjCC,IAAAA,mBAAmB,EAAE,KAAM;AAC3BC,IAAAA,YAAY,EAAC,GAAA;GACTT,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN;;;;"}

package/build/esm/src/components/Toggletip/BasePopover.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactElement } from "react";
+import type { TooltipContentProps } from "../Tooltip/TooltipContent";
+import { TooltipConditionalProps } from "../Tooltip/types";
+type BaseProps = Pick<TooltipContentProps, "placement" | "portalContainer" | "maxWidth" | "contentPadding" | "hideArrow" | "borderRadius" | "hasInvertedSubTheme"> & {
+    name?: string;
+    content: ReactElement;
+    "data-e2e-test-id"?: string;
+    isVisible?: boolean;
+    onVisibilityChange?: (isVisible: boolean) => void;
+    dismissOnOutsideClick?: boolean;
+    preventScroll?: boolean;
+};
+export type BasePopoverProps = BaseProps;
+type BasePopoverInternalProps = BaseProps & TooltipConditionalProps & Pick<TooltipContentProps, "defaultVerticalPlacement">;
+export declare function BasePopover({ placement, content, children, contentPadding, maxWidth, externalTriggerRef, portalContainer, name, isVisible: isPopoverVisible, dismissOnOutsideClick, "data-e2e-test-id": dataE2eTestId, hasInvertedSubTheme, defaultVerticalPlacement, onVisibilityChange, preventScroll, ...restContentProps }: BasePopoverInternalProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,137 @@
+import _extends from '@babel/runtime/helpers/extends';
+import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { TooltipContent } from '../Tooltip/TooltipContent.js';
+
+const FocusTrapContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, children);
+});
+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,
+    preventScroll = false,
+    ...restContentProps
+  } = _ref2;
+  const tooltipId = useMemo(() => `DS${name}_${Math.floor(Date.now() * Math.random())}`, [name]);
+  const [isVisible, setVisible] = useState(isPopoverVisible);
+  const internalTriggerRef = useRef(null);
+  const triggerRef = externalTriggerRef || internalTriggerRef;
+  const isOutsideClickOnTrigger = useRef(false);
+  const toggleVisibility = useCallback(status => {
+    setVisible(status);
+    if (onVisibilityChange) {
+      onVisibilityChange(status);
+    }
+  }, [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 = useCallback(() => {
+    if (!isOutsideClickOnTrigger.current) {
+      toggleVisibility(!isVisible);
+    } else {
+      // reset this value so that Popover can open in next click
+      isOutsideClickOnTrigger.current = false;
+    }
+  }, [toggleVisibility, isVisible]);
+  const handleClickOutsideDeactivates = useCallback(evt => {
+    if (triggerRef.current.contains(evt.target)) {
+      isOutsideClickOnTrigger.current = true;
+    }
+    return true;
+  }, [triggerRef, isOutsideClickOnTrigger]);
+  useEffect(() => {
+    toggleVisibility(isPopoverVisible);
+  }, [isPopoverVisible, toggleVisibility]);
+  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]);
+  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.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;
+  const contentElm = /*#__PURE__*/React.createElement(FocusTrap, {
+    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
+      onDeactivate: () => {
+        toggleVisibility(false);
+      },
+      preventScroll
+    }
+  }, /*#__PURE__*/React.createElement(FocusTrapContent, null, content));
+  const tooltipElm = /*#__PURE__*/React.createElement(TooltipContent, _extends({}, 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,
+    tabIndex: -1,
+    triggerRef: triggerRef
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElm, tooltipElm);
+}
+
+export { BasePopover };
+//# sourceMappingURL=BasePopover.js.map

package/build/esm/src/components/Toggletip/BasePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasePopover.js","sources":["../../../../../src/components/Toggletip/BasePopover.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  useMemo,\n  ReactElement,\n  PropsWithChildren,\n} from \"react\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { TooltipContentProps } from \"../Tooltip/TooltipContent\";\nimport { TooltipContent } from \"../Tooltip/TooltipContent\";\nimport { TooltipConditionalProps } from \"../Tooltip/types\";\n\ntype BaseProps = Pick<\n  TooltipContentProps,\n  | \"placement\"\n  | \"portalContainer\"\n  | \"maxWidth\"\n  | \"contentPadding\"\n  | \"hideArrow\"\n  | \"borderRadius\"\n  | \"hasInvertedSubTheme\"\n> & {\n  name?: string;\n  // Popover content\n  content: ReactElement;\n  \"data-e2e-test-id\"?: string;\n  // Programmatically toggle Popover visibility with this prop\n  isVisible?: boolean;\n  /* Called when tooltip appears and disappears */\n  onVisibilityChange?: (isVisible: boolean) => void;\n  /* Controls whether BasePopover  closes on outside click */\n  dismissOnOutsideClick?: boolean;\n  preventScroll?: boolean;\n};\n\nexport type BasePopoverProps = BaseProps;\n\ntype BasePopoverInternalProps = BaseProps &\n  TooltipConditionalProps &\n  Pick<TooltipContentProps, \"defaultVerticalPlacement\">;\n\nconst FocusTrapContent = React.forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<unknown>\n>(({ children }, ref) => <div ref={ref}>{children}</div>);\n\nexport function BasePopover({\n  placement = \"auto\",\n  content,\n  children,\n  contentPadding = \"m\",\n  maxWidth,\n  externalTriggerRef,\n  portalContainer,\n  name = \"Popover\",\n  isVisible: isPopoverVisible,\n  dismissOnOutsideClick = true,\n  \"data-e2e-test-id\": dataE2eTestId,\n  hasInvertedSubTheme,\n  defaultVerticalPlacement,\n  onVisibilityChange,\n  preventScroll = false,\n  ...restContentProps\n}: BasePopoverInternalProps): React.ReactElement {\n  const tooltipId = useMemo(\n    () => `DS${name}_${Math.floor(Date.now() * Math.random())}`,\n    [name]\n  );\n  const [isVisible, setVisible] = useState(isPopoverVisible);\n  const internalTriggerRef = useRef(null);\n  const triggerRef = externalTriggerRef || internalTriggerRef;\n  const isOutsideClickOnTrigger = useRef(false);\n\n  const toggleVisibility = useCallback(\n    (status: boolean) => {\n      setVisible(status);\n\n      if (onVisibilityChange) {\n        onVisibilityChange(status);\n      }\n    },\n    [onVisibilityChange]\n  );\n\n  // 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.\n  const handleTriggerClick = useCallback(() => {\n    if (!isOutsideClickOnTrigger.current) {\n      toggleVisibility(!isVisible);\n    } else {\n      // reset this value so that Popover can open in next click\n      isOutsideClickOnTrigger.current = false;\n    }\n  }, [toggleVisibility, isVisible]);\n\n  const handleClickOutsideDeactivates = useCallback(\n    (evt) => {\n      if (triggerRef.current.contains(evt.target)) {\n        isOutsideClickOnTrigger.current = true;\n      }\n      return true;\n    },\n    [triggerRef, isOutsideClickOnTrigger]\n  );\n\n  useEffect(() => {\n    toggleVisibility(isPopoverVisible);\n  }, [isPopoverVisible, toggleVisibility]);\n\n  useEffect(() => {\n    let trigger: HTMLElement;\n\n    if (externalTriggerRef?.current && !children) {\n      trigger = externalTriggerRef.current;\n\n      trigger.setAttribute(\"tabindex\", \"0\");\n      trigger.addEventListener(\"click\", handleTriggerClick);\n    }\n\n    return () => {\n      if (trigger) {\n        trigger.removeEventListener(\"click\", handleTriggerClick);\n      }\n    };\n  }, [externalTriggerRef, children, handleTriggerClick]);\n\n  useEffect(() => {\n    if (externalTriggerRef?.current && !children) {\n      const trigger = externalTriggerRef.current;\n\n      if (isVisible) {\n        trigger.setAttribute(\"aria-expanded\", true);\n        trigger.setAttribute(\"aria-controls\", tooltipId);\n      } else {\n        trigger.removeAttribute(\"aria-expanded\");\n        trigger.removeAttribute(\"aria-controls\");\n      }\n    }\n  }, [externalTriggerRef, children, tooltipId, isVisible]);\n\n  const triggerElm = children\n    ? React.cloneElement(children, {\n        ref: triggerRef,\n        ...(isVisible && {\n          \"aria-expanded\": true,\n          \"aria-controls\": tooltipId,\n        }),\n        tabIndex: 0,\n        onClick: (evt: React.MouseEvent) => {\n          handleTriggerClick();\n          if (children.props.onClick) {\n            children.props.onClick(evt);\n          }\n        },\n      })\n    : null;\n\n  const contentElm = (\n    <FocusTrap\n      focusTrapOptions={{\n        clickOutsideDeactivates:\n          dismissOnOutsideClick && handleClickOutsideDeactivates, // de-active focus trap on outside click\n        allowOutsideClick: true,\n        escapeDeactivates: true, // de-activate focus trap on escape key\n        fallbackFocus: `#${tooltipId}`, // set focus to tooltip content container if it has no focusable element\n        onDeactivate: () => {\n          toggleVisibility(false);\n        },\n        preventScroll,\n      }}\n    >\n      <FocusTrapContent>{content}</FocusTrapContent>\n    </FocusTrap>\n  );\n\n  const tooltipElm = (\n    <TooltipContent\n      {...restContentProps} // eslint-disable-line react/jsx-props-no-spreading\n      defaultVerticalPlacement={defaultVerticalPlacement}\n      dataDSId={name}\n      content={contentElm}\n      contentPadding={contentPadding}\n      maxWidth={maxWidth}\n      placement={placement}\n      portalContainer={portalContainer}\n      dataE2eTestId={dataE2eTestId}\n      hasInvertedSubTheme={hasInvertedSubTheme}\n      isVisible={isVisible}\n      tooltipId={tooltipId}\n      tabIndex={-1}\n      triggerRef={triggerRef}\n    />\n  );\n  return (\n    <>\n      {triggerElm}\n      {tooltipElm}\n    </>\n  );\n}\n"],"names":["FocusTrapContent","React","forwardRef","_ref","ref","children","createElement","BasePopover","_ref2","placement","content","contentPadding","maxWidth","externalTriggerRef","portalContainer","name","isVisible","isPopoverVisible","dismissOnOutsideClick","dataE2eTestId","hasInvertedSubTheme","defaultVerticalPlacement","onVisibilityChange","preventScroll","restContentProps","tooltipId","useMemo","Math","floor","Date","now","random","setVisible","useState","internalTriggerRef","useRef","triggerRef","isOutsideClickOnTrigger","toggleVisibility","useCallback","status","handleTriggerClick","current","handleClickOutsideDeactivates","evt","contains","target","useEffect","trigger","setAttribute","addEventListener","removeEventListener","removeAttribute","triggerElm","cloneElement","tabIndex","onClick","props","contentElm","FocusTrap","focusTrapOptions","clickOutsideDeactivates","allowOutsideClick","escapeDeactivates","fallbackFocus","onDeactivate","tooltipElm","TooltipContent","_extends","dataDSId","Fragment"],"mappings":"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"}

package/build/esm/src/components/Toggletip/Toggletip.d.ts

@@ -1,13 +1,5 @@
-import React, { ReactElement } from "react";
-import type { TooltipContentProps } from "../Tooltip/TooltipContent";
-import type { TooltipConditionalProps } from "../Tooltip/types";
-type BaseProps = Pick<TooltipContentProps, "placement" | "portalContainer" | "contentPadding" | "maxWidth"> & {
-    content: ReactElement;
-    "data-e2e-test-id"?: string;
-    isVisible?: boolean;
-    onVisibilityChange?: (isVisible: boolean) => void;
-    dismissOnOutsideClick?: boolean;
-};
-export type ToggletipProps = BaseProps & TooltipConditionalProps;
-export declare function Toggletip({ placement, content, children, contentPadding, maxWidth, externalTriggerRef, portalContainer, isVisible: isToggletipVisible, dismissOnOutsideClick, "data-e2e-test-id": dataE2eTestId, onVisibilityChange, }: ToggletipProps): React.ReactElement;
-export {};
+import React from "react";
+import { BasePopoverProps } from "./BasePopover";
+import { TooltipConditionalProps } from "../Tooltip/types";
+export type ToggletipProps = BasePopoverProps & TooltipConditionalProps;
+export declare function Toggletip(props: ToggletipProps): React.ReactElement;

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

@@ -1,125 +1,12 @@
-import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
-import FocusTrap from 'focus-trap-react';
-import { TooltipContent } from '../Tooltip/TooltipContent.js';
+import _extends from '@babel/runtime/helpers/extends';
+import React from 'react';
+import { BasePopover } from './BasePopover.js';
 
-const FocusTrapContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, children);
-});
-function Toggletip(_ref2) {
-  let {
-    placement = "auto",
-    content,
-    children,
-    contentPadding = "m",
-    maxWidth,
-    externalTriggerRef,
-    portalContainer,
-    isVisible: isToggletipVisible,
-    dismissOnOutsideClick = true,
-    "data-e2e-test-id": dataE2eTestId,
-    onVisibilityChange
-  } = _ref2;
-  const tooltipId = useMemo(() => `DSToggletip_${Math.floor(Date.now() * Math.random())}`, []);
-  const [isVisible, setVisible] = useState(isToggletipVisible);
-  const internalTriggerRef = useRef(null);
-  const triggerRef = externalTriggerRef || internalTriggerRef;
-  const isOutsideClickOnTrigger = useRef(false);
-  const toggleVisibility = useCallback(status => {
-    setVisible(status);
-    if (onVisibilityChange) {
-      onVisibilityChange(status);
-    }
-  }, [onVisibilityChange]);
-
-  // Outside click is also fired when the Toggletip is open and trigger is clicked. `isOutsideClickOnTrigger` saves this condition and we check for it so as to not toggle the Toggletip twice.
-  const handleTriggerClick = useCallback(() => {
-    if (!isOutsideClickOnTrigger.current) {
-      toggleVisibility(!isVisible);
-    } else {
-      // reset this value so that Toggletip can open in next click
-      isOutsideClickOnTrigger.current = false;
-    }
-  }, [toggleVisibility, isVisible]);
-  const handleClickOutsideDeactivates = useCallback(evt => {
-    if (triggerRef.current.contains(evt.target)) {
-      isOutsideClickOnTrigger.current = true;
-    }
-    return true;
-  }, [triggerRef, isOutsideClickOnTrigger]);
-  useEffect(() => {
-    toggleVisibility(isToggletipVisible);
-  }, [isToggletipVisible, toggleVisibility]);
-  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]);
-  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.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;
-  const contentElm = /*#__PURE__*/React.createElement(FocusTrap, {
-    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
-      onDeactivate: () => {
-        toggleVisibility(false);
-      }
-    }
-  }, /*#__PURE__*/React.createElement(FocusTrapContent, null, content));
-  const tooltipElm = /*#__PURE__*/React.createElement(TooltipContent, {
-    dataDSId: "Toggletip",
-    content: contentElm,
-    contentPadding: contentPadding,
-    maxWidth: maxWidth,
-    placement: placement,
-    portalContainer: portalContainer,
-    dataE2eTestId: dataE2eTestId,
-    isVisible: isVisible,
-    tooltipId: tooltipId,
-    triggerRef: triggerRef
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElm, tooltipElm);
+function Toggletip(props) {
+  return /*#__PURE__*/React.createElement(BasePopover, _extends({
+    name: "Toggletip",
+    defaultVerticalPlacement: "top"
+  }, props));
 }
 
 export { Toggletip };

package/build/esm/src/components/Toggletip/Toggletip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggletip.js","sources":["../../../../../src/components/Toggletip/Toggletip.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  useMemo,\n  ReactElement,\n  PropsWithChildren,\n} from \"react\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { TooltipContentProps } from \"../Tooltip/TooltipContent\";\nimport { TooltipContent } from \"../Tooltip/TooltipContent\";\nimport type { TooltipConditionalProps } from \"../Tooltip/types\";\n\ntype BaseProps = Pick<\n  TooltipContentProps,\n  \"placement\" | \"portalContainer\" | \"contentPadding\" | \"maxWidth\"\n> & {\n  // Toggletip content\n  content: ReactElement;\n  \"data-e2e-test-id\"?: string;\n  // Programmatically toggle Toggletip visibility with this prop\n  isVisible?: boolean;\n  /* Called when Toggletip appears and disappears */\n  onVisibilityChange?: (isVisible: boolean) => void;\n  /* Controls whether Toggletip closes on outside click */\n  dismissOnOutsideClick?: boolean;\n};\n\nexport type ToggletipProps = BaseProps & TooltipConditionalProps;\n\nconst FocusTrapContent = React.forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<unknown>\n>(({ children }, ref) => <div ref={ref}>{children}</div>);\n\nexport function Toggletip({\n  placement = \"auto\",\n  content,\n  children,\n  contentPadding = \"m\",\n  maxWidth,\n  externalTriggerRef,\n  portalContainer,\n  isVisible: isToggletipVisible,\n  dismissOnOutsideClick = true,\n  \"data-e2e-test-id\": dataE2eTestId,\n  onVisibilityChange,\n}: ToggletipProps): React.ReactElement {\n  const tooltipId = useMemo(\n    () => `DSToggletip_${Math.floor(Date.now() * Math.random())}`,\n    []\n  );\n  const [isVisible, setVisible] = useState(isToggletipVisible);\n  const internalTriggerRef = useRef(null);\n  const triggerRef = externalTriggerRef || internalTriggerRef;\n  const isOutsideClickOnTrigger = useRef(false);\n\n  const toggleVisibility = useCallback(\n    (status: boolean) => {\n      setVisible(status);\n\n      if (onVisibilityChange) {\n        onVisibilityChange(status);\n      }\n    },\n    [onVisibilityChange]\n  );\n\n  // Outside click is also fired when the Toggletip is open and trigger is clicked. `isOutsideClickOnTrigger` saves this condition and we check for it so as to not toggle the Toggletip twice.\n  const handleTriggerClick = useCallback(() => {\n    if (!isOutsideClickOnTrigger.current) {\n      toggleVisibility(!isVisible);\n    } else {\n      // reset this value so that Toggletip can open in next click\n      isOutsideClickOnTrigger.current = false;\n    }\n  }, [toggleVisibility, isVisible]);\n\n  const handleClickOutsideDeactivates = useCallback(\n    (evt) => {\n      if (triggerRef.current.contains(evt.target)) {\n        isOutsideClickOnTrigger.current = true;\n      }\n      return true;\n    },\n    [triggerRef, isOutsideClickOnTrigger]\n  );\n\n  useEffect(() => {\n    toggleVisibility(isToggletipVisible);\n  }, [isToggletipVisible, toggleVisibility]);\n\n  useEffect(() => {\n    let trigger: HTMLElement;\n\n    if (externalTriggerRef?.current && !children) {\n      trigger = externalTriggerRef.current;\n\n      trigger.setAttribute(\"tabindex\", \"0\");\n      trigger.addEventListener(\"click\", handleTriggerClick);\n    }\n\n    return () => {\n      if (trigger) {\n        trigger.removeEventListener(\"click\", handleTriggerClick);\n      }\n    };\n  }, [externalTriggerRef, children, handleTriggerClick]);\n\n  useEffect(() => {\n    if (externalTriggerRef?.current && !children) {\n      const trigger = externalTriggerRef.current;\n\n      if (isVisible) {\n        trigger.setAttribute(\"aria-expanded\", true);\n        trigger.setAttribute(\"aria-controls\", tooltipId);\n      } else {\n        trigger.removeAttribute(\"aria-expanded\");\n        trigger.removeAttribute(\"aria-controls\");\n      }\n    }\n  }, [externalTriggerRef, children, tooltipId, isVisible]);\n\n  const triggerElm = children\n    ? React.cloneElement(children, {\n        ref: triggerRef,\n        ...(isVisible && {\n          \"aria-expanded\": true,\n          \"aria-controls\": tooltipId,\n        }),\n        tabIndex: 0,\n        onClick: (evt: React.MouseEvent) => {\n          handleTriggerClick();\n          if (children.props.onClick) {\n            children.props.onClick(evt);\n          }\n        },\n      })\n    : null;\n\n  const contentElm = (\n    <FocusTrap\n      focusTrapOptions={{\n        clickOutsideDeactivates:\n          dismissOnOutsideClick && handleClickOutsideDeactivates, // de-active focus trap on outside click\n        allowOutsideClick: true,\n        escapeDeactivates: true, // de-activate focus trap on escape key\n        fallbackFocus: `#${tooltipId}`, // set focus to tooltip content container if it has no focusable element\n        onDeactivate: () => {\n          toggleVisibility(false);\n        },\n      }}\n    >\n      <FocusTrapContent>{content}</FocusTrapContent>\n    </FocusTrap>\n  );\n  const tooltipElm = (\n    <TooltipContent\n      dataDSId=\"Toggletip\"\n      content={contentElm}\n      contentPadding={contentPadding}\n      maxWidth={maxWidth}\n      placement={placement}\n      portalContainer={portalContainer}\n      dataE2eTestId={dataE2eTestId}\n      isVisible={isVisible}\n      tooltipId={tooltipId}\n      triggerRef={triggerRef}\n    />\n  );\n\n  return (\n    <>\n      {triggerElm}\n      {tooltipElm}\n    </>\n  );\n}\n"],"names":["FocusTrapContent","React","forwardRef","_ref","ref","children","createElement","Toggletip","_ref2","placement","content","contentPadding","maxWidth","externalTriggerRef","portalContainer","isVisible","isToggletipVisible","dismissOnOutsideClick","dataE2eTestId","onVisibilityChange","tooltipId","useMemo","Math","floor","Date","now","random","setVisible","useState","internalTriggerRef","useRef","triggerRef","isOutsideClickOnTrigger","toggleVisibility","useCallback","status","handleTriggerClick","current","handleClickOutsideDeactivates","evt","contains","target","useEffect","trigger","setAttribute","addEventListener","removeEventListener","removeAttribute","triggerElm","cloneElement","tabIndex","onClick","props","contentElm","FocusTrap","focusTrapOptions","clickOutsideDeactivates","allowOutsideClick","escapeDeactivates","fallbackFocus","onDeactivate","tooltipElm","TooltipContent","dataDSId","Fragment"],"mappings":"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"}
+{"version":3,"file":"Toggletip.js","sources":["../../../../../src/components/Toggletip/Toggletip.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { BasePopover, BasePopoverProps } from \"./BasePopover\";\nimport { TooltipConditionalProps } from \"../Tooltip/types\";\n\nexport type ToggletipProps = BasePopoverProps & TooltipConditionalProps;\n\nexport function Toggletip(props: ToggletipProps): React.ReactElement {\n  return (\n    <BasePopover\n      name=\"Toggletip\"\n      defaultVerticalPlacement=\"top\"\n      {...props} // eslint-disable-line react/jsx-props-no-spreading\n    />\n  );\n}\n"],"names":["Toggletip","props","React","createElement","BasePopover","_extends","name","defaultVerticalPlacement"],"mappings":";;;;AAOO,SAASA,SAASA,CAACC,KAAqB,EAAsB;AACnE,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,WAAW,EAAAC,QAAA,CAAA;AACVC,IAAAA,IAAI,EAAC,WAAW;AAChBC,IAAAA,wBAAwB,EAAC,KAAA;GACrBN,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN;;;;"}

package/build/esm/src/components/Tooltip/TooltipContent.d.ts

@@ -1,4 +1,5 @@
 import React, { MutableRefObject, ReactElement } from "react";
+import { BorderRadius } from "../../types";
 export type TooltipContentProps = {
     content: ReactElement;
     triggerRef: MutableRefObject<any>;
@@ -12,9 +13,13 @@ export type TooltipContentProps = {
     role?: string;
     tabIndex?: number;
     contentPadding?: "s" | "m";
+    hasInvertedSubTheme?: boolean;
     maxWidth?: number;
+    defaultVerticalPlacement?: TooltipStyle["verticalPlacement"];
     onTooltipPointerEnter?: React.PointerEventHandler<HTMLDivElement>;
     onTooltipPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
+    hideArrow?: boolean;
+    borderRadius?: BorderRadius;
 };
 export type TooltipStyle = {
     top: number;
@@ -23,4 +28,4 @@ export type TooltipStyle = {
     verticalPlacement: "top" | "bottom";
 };
 /** This component is used to display the overlay for both Toggletip and Tooltip components */
-export declare function TooltipContent({ placement, content, tooltipId, triggerRef, portalContainer, dataE2eTestId, dataDSId, isVisible, "aria-hidden": ariaHidden, role, tabIndex, contentPadding, maxWidth, onTooltipPointerEnter, onTooltipPointerLeave, }: TooltipContentProps): React.ReactElement;
+export declare function TooltipContent({ placement, content, tooltipId, triggerRef, portalContainer, dataE2eTestId, dataDSId, isVisible, "aria-hidden": ariaHidden, role, tabIndex, contentPadding, maxWidth, hasInvertedSubTheme, defaultVerticalPlacement, onTooltipPointerEnter, onTooltipPointerLeave, hideArrow, borderRadius, }: TooltipContentProps): React.ReactElement;