@carbon/react 1.24.0-rc.0 → 1.25.0

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -31,9 +31,9 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["id", "ariaLabel", "children", "iconDescription", "direction", "flipped", "focusTrap", "menuOffset", "menuOffsetFlip", "iconClass", "onClick", "onOpen", "selectorPrimaryFocus", "renderIcon", "innerRef", "menuOptionsClass", "light", "size"];
+var _excluded = ["id", "aria-label", "ariaLabel", "children", "iconDescription", "direction", "flipped", "focusTrap", "menuOffset", "menuOffsetFlip", "iconClass", "onClick", "onOpen", "selectorPrimaryFocus", "renderIcon", "innerRef", "menuOptionsClass", "light", "size"];
 
-var _triggerButtonPositio, _triggerButtonPositio2;
+var _triggerButtonPositio, _triggerButtonPositio2, _defineProperty2, _defineProperty3;
 
 var on = function on(element) {
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -299,7 +299,8 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
 
       var _this$props = this.props,
           id = _this$props.id,
-          ariaLabel = _this$props.ariaLabel,
+          ariaLabel = _this$props['aria-label'],
+          deprecatedAriaLabel = _this$props.ariaLabel,
           children = _this$props.children,
           iconDescription = _this$props.iconDescription,
           direction = _this$props.direction,
@@ -339,7 +340,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         className: overflowMenuOptionsClasses,
         tabIndex: "-1",
         role: "menu",
-        "aria-label": ariaLabel,
+        "aria-label": ariaLabel || deprecatedAriaLabel,
         onKeyDown: this.handleKeyPress
       }, childrenWithProps);
       var wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu["default"], {
@@ -389,144 +390,17 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
   return OverflowMenu;
 }(React.Component);
 
-_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
-  /**
-   * The ARIA label.
-   */
-  ariaLabel: PropTypes__default["default"].string.isRequired,
-
-  /**
-   * The child nodes.
-   */
-  children: PropTypes__default["default"].node,
-
-  /**
-   * The CSS class names.
-   */
-  className: PropTypes__default["default"].string,
-
-  /**
-   * The menu direction.
-   */
-  direction: PropTypes__default["default"].oneOf([FloatingMenu.DIRECTION_TOP, FloatingMenu.DIRECTION_BOTTOM]),
-
-  /**
-   * `true` if the menu alignment should be flipped.
-   */
-  flipped: PropTypes__default["default"].bool,
-
-  /**
-   * Enable or disable focus trap behavior
-   */
-  focusTrap: PropTypes__default["default"].bool,
-
-  /**
-   * The CSS class for the icon.
-   */
-  iconClass: PropTypes__default["default"].string,
-
-  /**
-   * The icon description.
-   */
-  iconDescription: PropTypes__default["default"].string.isRequired,
-
-  /**
-   * The element ID.
-   */
-  id: PropTypes__default["default"].string,
-
-  /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
-   * Don't use this to make OverflowMenu background color same as container background color.
-   */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
-
-  /**
-   * The adjustment in position applied to the floating menu.
-   */
-  menuOffset: PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
-    top: PropTypes__default["default"].number,
-    left: PropTypes__default["default"].number
-  }), PropTypes__default["default"].func]),
-
-  /**
-   * The adjustment in position applied to the floating menu.
-   */
-  menuOffsetFlip: PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
-    top: PropTypes__default["default"].number,
-    left: PropTypes__default["default"].number
-  }), PropTypes__default["default"].func]),
-
-  /**
-   * The class to apply to the menu options
-   */
-  menuOptionsClass: PropTypes__default["default"].string,
-
-  /**
-   * The event handler for the `click` event.
-   */
-  onClick: PropTypes__default["default"].func,
-
-  /**
-   * Function called when menu is closed
-   */
-  onClose: PropTypes__default["default"].func,
-
-  /**
-   * The event handler for the `focus` event.
-   */
-  onFocus: PropTypes__default["default"].func,
-
-  /**
-   * The event handler for the `keydown` event.
-   */
-  onKeyDown: PropTypes__default["default"].func,
-
-  /**
-   * Function called when menu is opened
-   */
-  onOpen: PropTypes__default["default"].func,
-
-  /**
-   * `true` if the menu should be open.
-   */
-  open: PropTypes__default["default"].bool,
-
-  /**
-   * Function called to override icon rendering.
-   */
-  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
-
-  /**
-   * Specify a CSS selector that matches the DOM element that should
-   * be focused when the OverflowMenu opens
-   */
-  selectorPrimaryFocus: PropTypes__default["default"].string,
-
-  /**
-   * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
-   */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
-});
+_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", (_defineProperty2 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty2, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "direction", PropTypes__default["default"].oneOf([FloatingMenu.DIRECTION_TOP, FloatingMenu.DIRECTION_BOTTOM])), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "flipped", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "focusTrap", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "iconClass", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "iconDescription", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "light", deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.')), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "menuOffset", PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
+  top: PropTypes__default["default"].number,
+  left: PropTypes__default["default"].number
+}), PropTypes__default["default"].func])), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "menuOffsetFlip", PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
+  top: PropTypes__default["default"].number,
+  left: PropTypes__default["default"].number
+}), PropTypes__default["default"].func])), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "menuOptionsClass", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onFocus", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onOpen", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "renderIcon", PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "size", PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])), _defineProperty2));
 
 _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "contextType", usePrefix.PrefixContext);
 
-_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", {
-  ariaLabel: null,
-  iconDescription: 'Options',
-  open: false,
-  direction: FloatingMenu.DIRECTION_BOTTOM,
-  flipped: false,
-  focusTrap: true,
-  renderIcon: iconsReact.OverflowMenuVertical,
-  onClick: function onClick() {},
-  onKeyDown: function onKeyDown() {},
-  onClose: function onClose() {},
-  onOpen: function onOpen() {},
-  menuOffset: getMenuOffset,
-  menuOffsetFlip: getMenuOffset,
-  selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
-});
+_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", (_defineProperty3 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty3, 'aria-label', null), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "iconDescription", 'Options'), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "open", false), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "direction", FloatingMenu.DIRECTION_BOTTOM), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "flipped", false), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "focusTrap", true), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "renderIcon", iconsReact.OverflowMenuVertical), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "onClick", function onClick() {}), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "onKeyDown", function onKeyDown() {}), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "onClose", function onClose() {}), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "onOpen", function onOpen() {}), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "menuOffset", getMenuOffset), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "menuOffsetFlip", getMenuOffset), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "selectorPrimaryFocus", '[data-overflow-menu-primary-focus]'), _defineProperty3));
 ((function () {
   var forwardRef = function forwardRef(props, ref) {
     return /*#__PURE__*/React__default["default"].createElement(OverflowMenu, _rollupPluginBabelHelpers["extends"]({}, props, {

package/lib/components/OverflowMenuItem/OverflowMenuItem.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { ForwardRefReturn } from '../../types/common';
+export interface OverflowMenuItemProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * The CSS class name to be placed on the button element
+     */
+    className?: string;
+    /**
+     * A callback to tell the parent menu component that the menu should be closed.
+     */
+    closeMenu?: () => void;
+    /**
+     * `true` to make this menu item disabled.
+     */
+    disabled?: boolean;
+    handleOverflowMenuItemFocus?: (options: {
+        currentIndex?: number;
+        direction: number;
+    }) => void;
+    /**
+     * `true` to make this menu item a divider.
+     */
+    hasDivider?: boolean;
+    /**
+     * If given, overflow item will render as a link with the given href
+     */
+    href?: string;
+    index?: number;
+    /**
+     * The text to show for the menu item
+     */
+    itemText?: React.ReactNode;
+    /**
+     * `true` to make this menu item a danger button.
+     */
+    isDelete?: boolean;
+    /**
+     * `true` to require the title attribute.
+     */
+    requireTitle?: boolean;
+    /**
+     * The title attribute.
+     */
+    title?: string;
+    /**
+     * The CSS class name to be placed on the wrapper element
+     */
+    wrapperClassName?: string;
+}
+export type OverflowMenuItemComponent = ForwardRefReturn<HTMLElement, OverflowMenuItemProps>;
+declare const OverflowMenuItem: OverflowMenuItemComponent;
+export default OverflowMenuItem;

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -13,8 +13,8 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var warning = require('../../internal/warning.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var warning = require('../../internal/warning.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -54,14 +54,14 @@ var OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functio
 
   function setTabFocus(evt) {
     if (match.match(evt, keys.ArrowDown)) {
-      handleOverflowMenuItemFocus({
+      handleOverflowMenuItemFocus === null || handleOverflowMenuItemFocus === void 0 ? void 0 : handleOverflowMenuItemFocus({
         currentIndex: index,
         direction: 1
       });
     }
 
     if (match.match(evt, keys.ArrowUp)) {
-      handleOverflowMenuItemFocus({
+      handleOverflowMenuItemFocus === null || handleOverflowMenuItemFocus === void 0 ? void 0 : handleOverflowMenuItemFocus({
         currentIndex: index,
         direction: -1
       });
@@ -101,17 +101,22 @@ var OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functio
     className: overflowMenuBtnClasses,
     disabled: disabled,
     href: href,
-    index: index,
     onClick: handleClick,
     onKeyDown: function onKeyDown(evt) {
       setTabFocus(evt);
 
       _onKeyDown(evt);
     },
-    role: "menuitem",
+    role: "menuitem" // ref as any: the type of `ref` is `ForwardedRef<HTMLButtonElement>` in `Button` component
+    // but `OverflowMenuItem` can be rendered as `a` tag as well, which is `HTMLAnchorElement`
+    // so we have to use `any` here
+    ,
     ref: ref,
-    tabIndex: "-1",
-    title: requireTitle ? title || itemText : null
+    tabIndex: -1 // itemText as any: itemText may be a ReactNode, but `title` only accepts string
+    // to avoid compatibility issue, we use `any` here. Consider to enforce `itemText` to be `string?`
+    // in the next major release
+    ,
+    title: requireTitle ? title || itemText : undefined
   }, rest), OverflowMenuItemContent));
 });
 OverflowMenuItem.propTypes = {

package/lib/components/OverflowMenuV2/index.js

@@ -14,9 +14,10 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
-var useId = require('../../internal/useId.js');
 var Menu = require('../Menu/Menu.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,53 +40,16 @@ function OverflowMenuV2(_ref) {
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var id = useId.useId('overflowmenu');
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var _useState3 = React.useState([[0, 0], [0, 0]]),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      position = _useState4[0],
-      setPosition = _useState4[1];
-
-  var triggerRef = React.useRef(null);
   var prefix = usePrefix.usePrefix();
+  var triggerRef = React.useRef(null);
 
-  function openMenu() {
-    if (triggerRef.current) {
-      var _triggerRef$current$g = triggerRef.current.getBoundingClientRect(),
-          left = _triggerRef$current$g.left,
-          top = _triggerRef$current$g.top,
-          right = _triggerRef$current$g.right,
-          bottom = _triggerRef$current$g.bottom;
-
-      setPosition([[left, right], [top, bottom]]);
-    }
-
-    setOpen(true);
-  }
-
-  function closeMenu() {
-    setOpen(false);
-  }
-
-  function handleClick() {
-    if (open) {
-      closeMenu();
-    } else {
-      openMenu();
-    }
-  }
-
-  function handleMousedown(e) {
-    // prevent default for mousedown on trigger element to avoid
-    // the "blur" event from firing on the menu as this would close
-    // it and immediately re-open since "click" event is fired after
-    // "blur" event.
-    e.preventDefault();
-  }
+  var _useAttachedMenu = useAttachedMenu.useAttachedMenu(triggerRef),
+      open = _useAttachedMenu.open,
+      x = _useAttachedMenu.x,
+      y = _useAttachedMenu.y,
+      handleClick = _useAttachedMenu.handleClick,
+      handleMousedown = _useAttachedMenu.handleMousedown,
+      handleClose = _useAttachedMenu.handleClose;
 
   var containerClasses = cx__default["default"]("".concat(prefix, "--overflow-menu__container"));
   var triggerClasses = cx__default["default"]("".concat(prefix, "--overflow-menu"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--open"), open), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames), size !== defaultSize && "".concat(prefix, "--overflow-menu--").concat(size));
@@ -106,9 +70,9 @@ function OverflowMenuV2(_ref) {
     id: id,
     size: size,
     open: open,
-    onClose: closeMenu,
-    x: position[0],
-    y: position[1]
+    onClose: handleClose,
+    x: x,
+    y: y
   }, children));
 }
 

package/lib/components/Popover/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { PolymorphicProps } from '../../types/common';
+export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
+interface PopoverBaseProps {
+    /**
+     * Specify how the popover should align with the trigger element
+     */
+    align?: PopoverAlignment;
+    /**
+     * 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?: boolean;
+    /**
+     * Specify whether a caret should be rendered
+     */
+    caret?: boolean;
+    /**
+     * Provide elements to be rendered inside of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom class name to be added to the outermost node in the
+     * component
+     */
+    className?: string;
+    /**
+     * Specify whether a drop shadow should be rendered on the popover
+     */
+    dropShadow?: boolean;
+    /**
+     * Render the component using the high-contrast variant
+     */
+    highContrast?: boolean;
+    /**
+     * Render the component using the tab tip variant
+     */
+    isTabTip?: boolean;
+    /**
+     * Specify whether the component is currently open or closed
+     */
+    open: boolean;
+}
+export type PopoverProps<T extends React.ElementType> = PolymorphicProps<T, PopoverBaseProps>;
+declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverBaseProps & Omit<any, "as"> & {
+    as?: React.ElementType<any> | undefined;
+}, string | number | symbol> & React.RefAttributes<Element>>;
+export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
+export { Popover, PopoverContent };

package/lib/components/Popover/index.js

@@ -23,41 +23,50 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["align", "as", "autoAlign", "caret", "className", "children", "dropShadow", "highContrast", "open"],
+var _excluded = ["isTabTip", "align", "as", "autoAlign", "caret", "className", "children", "dropShadow", "highContrast", "open"],
     _excluded2 = ["className", "children"];
 var PopoverContext = /*#__PURE__*/React__default["default"].createContext({
   floating: {
     current: null
   }
 });
-var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover(props, forwardRef) {
+var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, forwardRef) {
   var _cx;
 
-  var _props$align = props.align,
-      align = _props$align === void 0 ? 'bottom' : _props$align,
-      _props$as = props.as,
-      BaseComponent = _props$as === void 0 ? 'span' : _props$as,
-      _props$autoAlign = props.autoAlign,
-      autoAlign = _props$autoAlign === void 0 ? false : _props$autoAlign,
-      _props$caret = props.caret,
-      caret = _props$caret === void 0 ? true : _props$caret,
-      customClassName = props.className,
-      children = props.children,
-      _props$dropShadow = props.dropShadow,
-      dropShadow = _props$dropShadow === void 0 ? true : _props$dropShadow,
-      _props$highContrast = props.highContrast,
-      highContrast = _props$highContrast === void 0 ? false : _props$highContrast,
-      open = props.open,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var isTabTip = _ref.isTabTip,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? isTabTip ? 'bottom-left' : 'bottom' : _ref$align,
+      as = _ref.as,
+      _ref$autoAlign = _ref.autoAlign,
+      autoAlign = _ref$autoAlign === void 0 ? false : _ref$autoAlign,
+      _ref$caret = _ref.caret,
+      caret = _ref$caret === void 0 ? isTabTip ? false : true : _ref$caret,
+      customClassName = _ref.className,
+      children = _ref.children,
+      _ref$dropShadow = _ref.dropShadow,
+      dropShadow = _ref$dropShadow === void 0 ? true : _ref$dropShadow,
+      _ref$highContrast = _ref.highContrast,
+      highContrast = _ref$highContrast === void 0 ? false : _ref$highContrast,
+      open = _ref.open,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var floating = React.useRef();
-  var popover = React.useRef();
+  var floating = React.useRef(null);
+  var popover = React.useRef(null);
   var value = React.useMemo(function () {
     return {
       floating: floating
     };
   }, []);
+
+  if (isTabTip) {
+    var tabTipAlignments = ['bottom-left', 'bottom-right'];
+
+    if (!tabTipAlignments.includes(align)) {
+      align = 'bottom-left';
+    }
+  }
+
   var ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
 
   var _useState = React.useState(false),
@@ -70,13 +79,13 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover
       autoAlignment = _useState4[0],
       setAutoAlignment = _useState4[1];
 
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned && !isTabTip), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--tab-tip"), isTabTip), _cx), customClassName);
   useIsomorphicEffect["default"](function () {
     if (!open) {
       return;
     }
 
-    if (!autoAlign) {
+    if (!autoAlign || isTabTip) {
       setAutoAligned(false);
       return;
     }
@@ -118,6 +127,10 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover
     }
 
     function isVisible(alignment) {
+      if (!popover.current || !floating.current) {
+        return false;
+      }
+
       popover.current.classList.add("".concat(prefix, "--popover--").concat(alignment));
       var rect = floating.current.getBoundingClientRect(); // Check if popover is not visible to the left of the screen
 
@@ -163,13 +176,27 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover
       setAutoAligned(true);
       setAutoAlignment(alignment);
     }
-  }, [autoAligned, align, autoAlign, prefix, open]);
+  }, [autoAligned, align, autoAlign, prefix, open, isTabTip]);
+  var BaseComponent = as !== null && as !== void 0 ? as : 'span';
+  var mappedChildren = React__default["default"].Children.map(children, function (child) {
+    var item = child;
+
+    if ((item === null || item === void 0 ? void 0 : item.type) === 'button') {
+      var _className = item.props.className;
+      var tabTipClasses = cx__default["default"]("".concat(prefix, "--popover--tab-tip__button"), _className);
+      return /*#__PURE__*/React__default["default"].cloneElement(item, {
+        className: tabTipClasses
+      });
+    } else {
+      return item;
+    }
+  });
   return /*#__PURE__*/React__default["default"].createElement(PopoverContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     ref: ref
-  }), children));
+  }), isTabTip ? mappedChildren : children));
 }); // Note: this displayName is temporarily set so that Storybook ArgTable
 // correctly displays the name of this component
 
@@ -190,7 +217,7 @@ Popover.propTypes = {
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
 
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to futurue changes.
+   * 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,
 
@@ -220,15 +247,20 @@ Popover.propTypes = {
    */
   highContrast: PropTypes__default["default"].bool,
 
+  /**
+   * Render the component using the tab tip variant
+   */
+  isTabTip: PropTypes__default["default"].bool,
+
   /**
    * Specify whether the component is currently open or closed
    */
   open: PropTypes__default["default"].bool.isRequired
 };
-var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref, forwardRef) {
-  var className = _ref.className,
-      children = _ref.children,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
+var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref2, forwardRef) {
+  var className = _ref2.className,
+      children = _ref2.children,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
 
   var prefix = usePrefix.usePrefix();
 

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -22,6 +22,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+var _excluded = ["children", "className", "defaultSelected", "disabled", "labelPosition", "legendText", "name", "onChange", "orientation", "readOnly", "valueSelected"];
 var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function RadioButtonGroup(_ref, ref) {
   var _classNames;
 
@@ -38,7 +39,9 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
       _ref$orientation = _ref.orientation,
       orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
       readOnly = _ref.readOnly,
-      valueSelected = _ref.valueSelected;
+      valueSelected = _ref.valueSelected,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
   var prefix = usePrefix.usePrefix();
 
   var _useState = React.useState(valueSelected !== null && valueSelected !== void 0 ? valueSelected : defaultSelected),
@@ -95,11 +98,11 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses,
     ref: ref
-  }, /*#__PURE__*/React__default["default"].createElement("fieldset", {
+  }, /*#__PURE__*/React__default["default"].createElement("fieldset", _rollupPluginBabelHelpers["extends"]({
     className: fieldsetClasses,
     disabled: disabled,
     "aria-readonly": readOnly
-  }, legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
+  }, rest), legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
     className: "".concat(prefix, "--label")
   }, legendText), getRadioButtons()));
 });