@carbon/react 1.86.0 → 1.87.0

package/lib/components/PaginationNav/PaginationNav.js

@@ -20,12 +20,6 @@ var layout = require('@carbon/layout');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
 var clamp = require('../../internal/clamp.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _CaretRight, _CaretLeft, _option;
 const translationIds = {
   'carbon.pagination-nav.next': 'Next',
@@ -81,15 +75,15 @@ function DirectionButton({
   onClick
 }) {
   const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React__default["default"].createElement("li", {
+  return /*#__PURE__*/React.createElement("li", {
     className: `${prefix}--pagination-nav__list-item`
-  }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+  }, /*#__PURE__*/React.createElement(index.IconButton, {
     align: "bottom",
     disabled: disabled,
     kind: "ghost",
     label: label,
     onClick: onClick
-  }, direction === 'forward' ? _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null)) : _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))));
+  }, direction === 'forward' ? _CaretRight || (_CaretRight = /*#__PURE__*/React.createElement(iconsReact.CaretRight, null)) : _CaretLeft || (_CaretLeft = /*#__PURE__*/React.createElement(iconsReact.CaretLeft, null))));
 }
 function PaginationItem({
   page,
@@ -99,17 +93,17 @@ function PaginationItem({
 }) {
   const prefix = usePrefix.usePrefix();
   const itemLabel = t('carbon.pagination-nav.item');
-  return /*#__PURE__*/React__default["default"].createElement("li", {
+  return /*#__PURE__*/React.createElement("li", {
     className: `${prefix}--pagination-nav__list-item`
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: cx__default["default"](`${prefix}--pagination-nav__page`, {
+    className: cx(`${prefix}--pagination-nav__page`, {
       [`${prefix}--pagination-nav__page--active`]: isActive
     }),
     onClick: onClick,
     "data-page": page,
     "aria-current": isActive ? 'page' : undefined
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--pagination-nav__accessibility-label`
   }, isActive ? `${t('carbon.pagination-nav.active')}, ${itemLabel}` : itemLabel), page));
 }
@@ -125,47 +119,47 @@ function PaginationOverflow({
 
   //If overflow is disabled, return a select tag with no select options
   if (disableOverflow === true && count > 1) {
-    return /*#__PURE__*/React__default["default"].createElement("li", {
+    return /*#__PURE__*/React.createElement("li", {
       className: `${prefix}--pagination-nav__list-item`
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--pagination-nav__select`
-    }, /*#__PURE__*/React__default["default"].createElement("select", {
+    }, /*#__PURE__*/React.createElement("select", {
       className: `${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select`,
       "aria-label": `Select ${t('carbon.pagination-nav.item')} number`,
       disabled: true
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--pagination-nav__select-icon-wrapper`
-    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.OverflowMenuHorizontal, {
+    }, /*#__PURE__*/React.createElement(iconsReact.OverflowMenuHorizontal, {
       className: `${prefix}--pagination-nav__select-icon`
     }))));
   }
   if (count > 1) {
-    return /*#__PURE__*/React__default["default"].createElement("li", {
+    return /*#__PURE__*/React.createElement("li", {
       className: `${prefix}--pagination-nav__list-item`
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--pagination-nav__select`
-    }, /*#__PURE__*/React__default["default"].createElement("select", {
+    }, /*#__PURE__*/React.createElement("select", {
       className: `${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select`,
       "aria-label": `Select ${t('carbon.pagination-nav.item')} number`,
       onChange: e => {
         const index = Number(e.target.value);
         onSelect?.(index);
       }
-    }, _option || (_option = /*#__PURE__*/React__default["default"].createElement("option", {
+    }, _option || (_option = /*#__PURE__*/React.createElement("option", {
       value: "",
       hidden: true
-    })), [...Array(count)].map((e, i) => /*#__PURE__*/React__default["default"].createElement("option", {
+    })), [...Array(count)].map((e, i) => /*#__PURE__*/React.createElement("option", {
       value: (fromIndex + i).toString(),
       "data-page": fromIndex + i + 1,
       key: `overflow-${fromIndex + i}`
-    }, fromIndex + i + 1))), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, fromIndex + i + 1))), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--pagination-nav__select-icon-wrapper`
-    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.OverflowMenuHorizontal, {
+    }, /*#__PURE__*/React.createElement(iconsReact.OverflowMenuHorizontal, {
       className: `${prefix}--pagination-nav__select-icon`
     }))));
   }
   if (count === 1) {
-    return /*#__PURE__*/React__default["default"].createElement(PaginationItem, {
+    return /*#__PURE__*/React.createElement(PaginationItem, {
       page: fromIndex + 1,
       translateWithId: t,
       onClick: () => {
@@ -175,7 +169,7 @@ function PaginationOverflow({
   }
   return null;
 }
-const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function PaginationNav({
+const PaginationNav = /*#__PURE__*/React.forwardRef(function PaginationNav({
   className,
   onChange = () => {},
   totalItems = NaN,
@@ -269,20 +263,20 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   React.useEffect(() => {
     setIsOverFlowDisabled(disableOverflow);
   }, [disableOverflow]);
-  const classNames = cx__default["default"](`${prefix}--pagination-nav`, className, {
+  const classNames = cx(`${prefix}--pagination-nav`, className, {
     [`${prefix}--layout--size-${size}`]: size
   });
   const backwardButtonDisabled = !loop && currentPage === 0;
   const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
   const startOffset = itemsDisplayedOnPage <= 4 && currentPage > 1 ? 0 : 1;
-  return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React.createElement("nav", _rollupPluginBabelHelpers.extends({
     className: classNames,
     ref: ref
   }, rest, {
     "aria-label": "pagination"
-  }), /*#__PURE__*/React__default["default"].createElement("ul", {
+  }), /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--pagination-nav__list`
-  }, /*#__PURE__*/React__default["default"].createElement(DirectionButton, {
+  }, /*#__PURE__*/React.createElement(DirectionButton, {
     direction: "backward",
     "aria-label": t('carbon.pagination-nav.previous'),
     label: t('carbon.pagination-nav.previous'),
@@ -291,21 +285,21 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   }),
   // render first item if at least 5 items can be displayed or
   // 4 items can be displayed and the current page is either 0 or 1
-  (itemsDisplayedOnPage >= 5 || itemsDisplayedOnPage <= 4 && currentPage <= 1) && /*#__PURE__*/React__default["default"].createElement(PaginationItem, {
+  (itemsDisplayedOnPage >= 5 || itemsDisplayedOnPage <= 4 && currentPage <= 1) && /*#__PURE__*/React.createElement(PaginationItem, {
     page: 1,
     translateWithId: t,
     isActive: currentPage === 0,
     onClick: () => {
       jumpToItem(0);
     }
-  }), /*#__PURE__*/React__default["default"].createElement(PaginationOverflow, {
+  }), /*#__PURE__*/React.createElement(PaginationOverflow, {
     fromIndex: startOffset,
     count: cuts.front,
     onSelect: jumpToItem,
     disableOverflow: isOverflowDisabled
   }),
   // render items between overflows
-  [...Array(totalItems)].map((e, i) => i).slice(startOffset + cuts.front, (1 + cuts.back) * -1).map(item => /*#__PURE__*/React__default["default"].createElement(PaginationItem, {
+  [...Array(totalItems)].map((e, i) => i).slice(startOffset + cuts.front, (1 + cuts.back) * -1).map(item => /*#__PURE__*/React.createElement(PaginationItem, {
     key: `item-${item}`,
     page: item + 1,
     translateWithId: t,
@@ -313,27 +307,27 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     onClick: () => {
       jumpToItem(item);
     }
-  })), /*#__PURE__*/React__default["default"].createElement(PaginationOverflow, {
+  })), /*#__PURE__*/React.createElement(PaginationOverflow, {
     fromIndex: totalItems - cuts.back - 1,
     count: cuts.back,
     onSelect: jumpToItem,
     disableOverflow: isOverflowDisabled
   }),
   // render last item unless there is only one in total
-  totalItems > 1 && /*#__PURE__*/React__default["default"].createElement(PaginationItem, {
+  totalItems > 1 && /*#__PURE__*/React.createElement(PaginationItem, {
     page: totalItems,
     translateWithId: t,
     isActive: currentPage === totalItems - 1,
     onClick: () => {
       jumpToItem(totalItems - 1);
     }
-  }), /*#__PURE__*/React__default["default"].createElement(DirectionButton, {
+  }), /*#__PURE__*/React.createElement(DirectionButton, {
     direction: "forward",
     "aria-label": t('carbon.pagination-nav.next'),
     label: t('carbon.pagination-nav.next'),
     disabled: forwardButtonDisabled,
     onClick: jumpToNext
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": "true",
     className: `${prefix}--pagination-nav__accessibility-label`
@@ -343,100 +337,100 @@ DirectionButton.propTypes = {
   /**
    * The direction this button represents ("forward" or "backward").
    */
-  direction: PropTypes__default["default"].oneOf(['forward', 'backward']),
+  direction: PropTypes.oneOf(['forward', 'backward']),
   /**
    * Whether or not the button should be disabled.
    */
-  disabled: PropTypes__default["default"].bool,
+  disabled: PropTypes.bool,
   /**
    * The label shown in the button's tooltip.
    */
-  label: PropTypes__default["default"].string,
+  label: PropTypes.string,
   /**
    * The callback function called when the button is clicked.
    */
-  onClick: PropTypes__default["default"].func
+  onClick: PropTypes.func
 };
 PaginationItem.propTypes = {
   /**
    * Whether or not this is the currently active page.
    */
-  isActive: PropTypes__default["default"].bool,
+  isActive: PropTypes.bool,
   /**
    * The callback function called when the item is clicked.
    */
-  onClick: PropTypes__default["default"].func,
+  onClick: PropTypes.func,
   /**
    * The page number this item represents.
    */
-  page: PropTypes__default["default"].number,
+  page: PropTypes.number,
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message
    */
-  translateWithId: PropTypes__default["default"].func
+  translateWithId: PropTypes.func
 };
 PaginationOverflow.propTypes = {
   /**
    * How many items to display in this overflow.
    */
-  count: PropTypes__default["default"].number,
+  count: PropTypes.number,
   /**
    * From which index on this overflow should start displaying pages.
    */
-  fromIndex: PropTypes__default["default"].number,
+  fromIndex: PropTypes.number,
   /**
    * The callback function called when the user selects a page from the overflow.
    */
-  onSelect: PropTypes__default["default"].func,
+  onSelect: PropTypes.func,
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message
    */
-  translateWithId: PropTypes__default["default"].func
+  translateWithId: PropTypes.func
 };
 PaginationNav.displayName = 'PaginationNav';
 PaginationNav.propTypes = {
   /**
    * Additional CSS class names.
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
    * Set this to true if you are having performance problems with large data sets.
    */
-  disableOverflow: PropTypes__default["default"].bool,
+  disableOverflow: PropTypes.bool,
   // eslint-disable-line react/prop-types
 
   /**
    * The number of items to be shown (minimum of 4 unless props.items < 4).
    */
-  itemsShown: PropTypes__default["default"].number,
+  itemsShown: PropTypes.number,
   /**
    * Whether user should be able to loop through the items when reaching first / last.
    */
-  loop: PropTypes__default["default"].bool,
+  loop: PropTypes.bool,
   /**
    * The callback function called when the current page changes.
    */
-  onChange: PropTypes__default["default"].func,
+  onChange: PropTypes.func,
   /**
    * The index of current page.
    */
-  page: PropTypes__default["default"].number,
+  page: PropTypes.number,
   /**
    * Specify the size of the PaginationNav.
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
    * The total number of items.
    */
-  totalItems: PropTypes__default["default"].number,
+  totalItems: PropTypes.number,
   /**
    * Specify a custom translation function that takes in a message identifier
    * and returns the localized string for the message
    */
-  translateWithId: PropTypes__default["default"].func
+  translateWithId: PropTypes.func
 };
 
-exports["default"] = PaginationNav;
+exports.default = PaginationNav;

package/lib/components/Popover/index.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
@@ -23,13 +21,7 @@ var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('../Toggletip/index.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const PopoverContext = /*#__PURE__*/React__default["default"].createContext({
+const PopoverContext = /*#__PURE__*/React.createContext({
   setFloating: {
     current: null
   },
@@ -44,7 +36,7 @@ const PopoverContext = /*#__PURE__*/React__default["default"].createContext({
  * @deprecated Use NewPopoverAlignment instead.
  */
 
-const Popover = /*#__PURE__*/React__default["default"].forwardRef(function PopoverRenderFunction({
+const Popover = /*#__PURE__*/React.forwardRef(function PopoverRenderFunction({
   isTabTip,
   align: initialAlign = isTabTip ? 'bottom-start' : 'bottom',
   as: BaseComponent = 'span',
@@ -69,9 +61,10 @@ forwardRef) {
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   let align = mapPopoverAlign.mapPopoverAlign(initialAlign);
 
-  // If the `Popover` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
-  useEvent.useWindowEvent('blur', () => {
-    if (open) {
+  // The `Popover` should close whenever it and its children loses focus
+  useEvent.useEvent(popover, 'focusout', event => {
+    const relatedTarget = event.relatedTarget;
+    if (!popover.current?.contains(relatedTarget)) {
       onRequestClose?.();
     }
   });
@@ -86,7 +79,7 @@ forwardRef) {
   // Slug styling places a border around the popover content so the caret
   // needs to be placed 1px further outside the popover content. To do so,
   // we look to see if any of the children has a className containing "slug"
-  const initialCaretHeight = React__default["default"].Children.toArray(children).some(x => {
+  const initialCaretHeight = React.Children.toArray(children).some(x => {
     return x?.props?.className?.includes('slug') || x?.props?.className?.includes('ai-label');
   }) ? 7 : 6;
   // These defaults match the defaults defined in packages/styles/scss/components/popover/_popover.scss
@@ -94,7 +87,7 @@ forwardRef) {
     offset: 10,
     caretHeight: initialCaretHeight
   });
-  useIsomorphicEffect["default"](() => {
+  useIsomorphicEffect.default(() => {
     // The popover is only offset when a caret is present. Technically, the custom properties
     // accessed below can be set by a user even if caret=false, but doing so does not follow
     // the design specification for Popover.
@@ -195,7 +188,7 @@ forwardRef) {
   }, [floatingStyles, refs.floating, enableFloatingStyles, middlewareData, placement, caret]);
   const ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
   const currentAlignment = autoAlign && placement !== align ? placement : align;
-  const className = cx__default["default"]({
+  const className = cx({
     [`${prefix}--popover-container`]: true,
     [`${prefix}--popover--caret`]: caret,
     [`${prefix}--popover--drop-shadow`]: dropShadow,
@@ -205,7 +198,7 @@ forwardRef) {
     [`${prefix}--popover--${currentAlignment}`]: true,
     [`${prefix}--popover--tab-tip`]: isTabTip
   }, customClassName);
-  const mappedChildren = React__default["default"].Children.map(children, child => {
+  const mappedChildren = React.Children.map(children, child => {
     const item = child;
     const displayName = item?.type?.displayName;
 
@@ -219,11 +212,11 @@ forwardRef) {
     const isTriggerElement = item?.type === 'button';
     const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
     const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
-    if (/*#__PURE__*/React__default["default"].isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
+    if (/*#__PURE__*/React.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
       const className = item?.props?.className;
       const ref = (item?.props).ref;
-      const tabTipClasses = cx__default["default"](`${prefix}--popover--tab-tip__button`, className);
-      return /*#__PURE__*/React__default["default"].cloneElement(item, {
+      const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);
+      return /*#__PURE__*/React.cloneElement(item, {
         className: isTabTip && item?.type === 'button' ? tabTipClasses : className || '',
         // With cloneElement, if you pass a `ref`, it overrides the original ref.
         // https://react.dev/reference/react/cloneElement#parameters
@@ -255,9 +248,9 @@ forwardRef) {
     }
   });
   const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default["default"].createElement(PopoverContext.Provider, {
+  return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React.createElement(BaseComponentAsAny, _rollupPluginBabelHelpers.extends({}, rest, {
     className: className,
     ref: ref
   }), enableFloatingStyles || isTabTip ? mappedChildren : children));
@@ -272,7 +265,7 @@ Popover.propTypes = {
   /**
    * Specify how the popover should align with the trigger element
    */
-  align: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['top', 'top-left',
+  align: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead
@@ -298,54 +291,54 @@ Popover.propTypes = {
    * Provide a custom element or component to render the top-level node for the
    * component.
    */
-  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   /**
    * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
-  autoAlign: PropTypes__default["default"].bool,
+  autoAlign: PropTypes.bool,
   /**
    * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
    */
-  autoAlignBoundary: PropTypes__default["default"].oneOfType([PropTypes__default["default"].oneOf(['clippingAncestors']), PropTypes__default["default"].elementType, PropTypes__default["default"].arrayOf(PropTypes__default["default"].elementType), PropTypes__default["default"].exact({
-    x: PropTypes__default["default"].number.isRequired,
-    y: PropTypes__default["default"].number.isRequired,
-    width: PropTypes__default["default"].number.isRequired,
-    height: PropTypes__default["default"].number.isRequired
+  autoAlignBoundary: PropTypes.oneOfType([PropTypes.oneOf(['clippingAncestors']), PropTypes.elementType, PropTypes.arrayOf(PropTypes.elementType), PropTypes.exact({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired
   })]),
   /**
    * Specify whether a caret should be rendered
    */
-  caret: PropTypes__default["default"].bool,
+  caret: PropTypes.bool,
   /**
    * Provide elements to be rendered inside of the component
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * Specify whether a drop shadow should be rendered on the popover
    */
-  dropShadow: PropTypes__default["default"].bool,
+  dropShadow: PropTypes.bool,
   /**
    * Render the component using the high-contrast variant
    */
-  highContrast: PropTypes__default["default"].bool,
+  highContrast: PropTypes.bool,
   /**
    * Render the component using the tab tip variant
    */
-  isTabTip: PropTypes__default["default"].bool,
+  isTabTip: PropTypes.bool,
   /**
    * Specify a handler for closing popover.
    * The handler should take care of closing the popover, e.g. changing the `open` prop.
    */
-  onRequestClose: PropTypes__default["default"].func,
+  onRequestClose: PropTypes.func,
   /**
    * Specify whether the component is currently open or closed
    */
-  open: PropTypes__default["default"].bool.isRequired
+  open: PropTypes.bool.isRequired
 };
 function PopoverContentRenderFunction(
 // eslint-disable-next-line react/prop-types
@@ -359,39 +352,56 @@ function PopoverContentRenderFunction(
     setFloating,
     caretRef,
     autoAlign
-  } = React__default["default"].useContext(PopoverContext);
-  const ref = useMergedRefs.useMergedRefs([setFloating, forwardRef]);
+  } = React.useContext(PopoverContext);
+  const textRef = React.useRef(null);
+  const [isMultiLine, setIsMultiLine] = React.useState(false);
+  const ref = useMergedRefs.useMergedRefs([setFloating, textRef, forwardRef]);
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
-  return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  React.useEffect(() => {
+    checkIfMultiLine();
+  }, [children]);
+  const checkIfMultiLine = () => {
+    const el = textRef.current;
+    if (el) {
+      const style = getComputedStyle(el);
+      const lineHeight = parseFloat(style.lineHeight);
+      const height = el.offsetHeight;
+      const lines = Math.floor(height / lineHeight);
+      setIsMultiLine(lines > 1);
+    }
+  };
+  return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
     className: `${prefix}--popover`
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: cx__default["default"](`${prefix}--popover-content`, className),
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cx(`${prefix}--popover-content`, className, {
+      [`${prefix}--tooltip-content--multiline`]: isMultiLine
+    }),
     ref: ref
-  }, children, enableFloatingStyles && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: cx__default["default"]({
+  }, children, enableFloatingStyles && /*#__PURE__*/React.createElement("span", {
+    className: cx({
       [`${prefix}--popover-caret`]: true,
       [`${prefix}--popover--auto-align`]: true
     }),
     ref: caretRef
-  })), !enableFloatingStyles && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: cx__default["default"]({
+  })), !enableFloatingStyles && /*#__PURE__*/React.createElement("span", {
+    className: cx({
       [`${prefix}--popover-caret`]: true
     }),
     ref: caretRef
   }));
 }
-const PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(PopoverContentRenderFunction);
+const PopoverContent = /*#__PURE__*/React.forwardRef(PopoverContentRenderFunction);
 PopoverContent.displayName = 'PopoverContent';
 PopoverContent.propTypes = {
   /**
    * Provide elements to be rendered inside of the component
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 
 exports.Popover = Popover;

package/lib/components/PrimaryButton/PrimaryButton.js

@@ -14,12 +14,8 @@ var React = require('react');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const PrimaryButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+const PrimaryButton = props => /*#__PURE__*/React.createElement(Button.default, _rollupPluginBabelHelpers.extends({
   kind: "primary"
 }, props));
 
-exports["default"] = PrimaryButton;
+exports.default = PrimaryButton;