carbon-react 118.5.1 → 118.6.0

package/esm/components/accordion/accordion.component.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
@@ -7,59 +6,54 @@ import createGuid from "../../__internal__/utils/helpers/guid";
 import Events from "../../__internal__/utils/helpers/events";
 import { StyledAccordionContainer, StyledAccordionHeadingsContainer, StyledAccordionTitleContainer, StyledAccordionTitle, StyledAccordionSubTitle, StyledAccordionIcon, StyledAccordionContentContainer, StyledAccordionContent } from "./accordion.style";
 import ValidationIcon from "../../__internal__/validations";
-const Accordion = /*#__PURE__*/React.forwardRef(({
-  borders = "default",
-  defaultExpanded,
-  expanded,
-  onChange,
-  children,
-  handleKeyboardAccessibility,
-  id,
-  index,
-  iconType = "chevron_down",
-  iconAlign = "right",
-  scheme = "white",
-  size = "large",
-  subTitle,
-  title,
-  width,
-  headerSpacing,
-  disableContentPadding = false,
-  error,
-  warning,
-  info,
-  buttonHeading,
-  buttonWidth = "150px",
-  openTitle,
-  ...rest
-}, ref) => {
+const Accordion = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    borders = "default",
+    defaultExpanded,
+    expanded,
+    onChange,
+    children,
+    handleKeyboardAccessibility,
+    id,
+    index,
+    iconType = "chevron_down",
+    iconAlign = "right",
+    scheme = "white",
+    size = "large",
+    subTitle,
+    title,
+    width,
+    headerSpacing,
+    disableContentPadding = false,
+    error,
+    warning,
+    info,
+    buttonHeading,
+    buttonWidth = "150px",
+    openTitle,
+    ...rest
+  } = _ref;
   const isControlled = expanded !== undefined;
   const [isExpandedInternal, setIsExpandedInternal] = useState(defaultExpanded || false);
   const [contentHeight, setContentHeight] = useState(isExpandedInternal ? "auto" : 0);
   const accordionContent = useRef(null);
   const isExpanded = isControlled ? expanded : isExpandedInternal;
   useResizeObserver(accordionContent, () => {
-    var _accordionContent$cur;
-
-    setContentHeight((_accordionContent$cur = accordionContent.current) === null || _accordionContent$cur === void 0 ? void 0 : _accordionContent$cur.scrollHeight);
+    setContentHeight(accordionContent.current?.scrollHeight);
   });
   useEffect(() => {
-    var _accordionContent$cur2;
-
-    setContentHeight((_accordionContent$cur2 = accordionContent.current) === null || _accordionContent$cur2 === void 0 ? void 0 : _accordionContent$cur2.scrollHeight);
+    setContentHeight(accordionContent.current?.scrollHeight);
   }, [isExpanded]);
   const toggleAccordion = useCallback(ev => {
     if (!isControlled) {
       setIsExpandedInternal(!isExpanded);
     }
-
     if (onChange) onChange(ev, !isExpanded);
   }, [isControlled, isExpanded, onChange]);
   const handleKeyDown = useCallback(ev => {
     if (handleKeyboardAccessibility) {
       handleKeyboardAccessibility(ev, index);
     }
-
     if (Events.isEnterKey(ev) || Events.isSpaceKey(ev)) {
       toggleAccordion(ev);
     }
@@ -69,9 +63,7 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   const headerId = `AccordionHeader_${guid.current}`;
   const contentId = `AccordionContent_${guid.current}`;
   const showValidationIcon = !!(error || warning || info);
-
   const getTitle = () => isExpanded ? openTitle || title : title;
-
   return /*#__PURE__*/React.createElement(StyledAccordionContainer, _extends({
     id: accordionId,
     "data-component": "accordion",

package/esm/components/accordion/accordion.style.js

@@ -9,31 +9,46 @@ const StyledAccordionGroup = styled.div`
 const StyledAccordionContainer = styled.div`
   ${space}
   display: flex;
-  align-items: ${({
-  buttonHeading
-}) => buttonHeading ? "flex-start" : "stretch"};
+  align-items: ${_ref => {
+  let {
+    buttonHeading
+  } = _ref;
+  return buttonHeading ? "flex-start" : "stretch";
+}};
   justify-content: center;
   flex-direction: column;
   box-sizing: border-box;
-  width: ${({
-  width
-}) => width || "100%"};
+  width: ${_ref2 => {
+  let {
+    width
+  } = _ref2;
+  return width || "100%";
+}};
   color: var(--colorsUtilityYin090);
-  background-color: ${({
-  scheme
-}) => scheme === "white" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
+  background-color: ${_ref3 => {
+  let {
+    scheme
+  } = _ref3;
+  return scheme === "white" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)";
+}};
   border: 1px solid var(--colorsUtilityMajor100);
-  ${({
-  borders
-}) => borders === "default" && css`
+  ${_ref4 => {
+  let {
+    borders
+  } = _ref4;
+  return borders === "default" && css`
       border-left: none;
       border-right: none;
-    `}
-  ${({
-  borders
-}) => borders === "none" && css`
+    `;
+}}
+  ${_ref5 => {
+  let {
+    borders
+  } = _ref5;
+  return borders === "none" && css`
       border: none;
-    `}
+    `;
+}}
 
   & + & {
     margin-top: -1px;
@@ -42,12 +57,18 @@ const StyledAccordionContainer = styled.div`
   }
 `;
 const StyledAccordionTitle = styled.h3`
-  font-size: ${({
-  size
-}) => size === "small" ? "14" : "20"}px;
-  font-weight: ${({
-  size
-}) => size === "small" ? 700 : 900};
+  font-size: ${_ref6 => {
+  let {
+    size
+  } = _ref6;
+  return size === "small" ? "14" : "20";
+}}px;
+  font-weight: ${_ref7 => {
+  let {
+    size
+  } = _ref7;
+  return size === "small" ? 700 : 900;
+}};
   line-height: 1;
   user-select: none;
   margin: 0;
@@ -57,22 +78,28 @@ const StyledAccordionSubTitle = styled.span`
 `;
 const StyledAccordionIcon = styled(Icon)`
   transition: transform 0.3s;
-  margin-right: ${({
-  iconAlign
-}) => iconAlign === "left" ? "var(--spacing200)" : "var(--spacing000)"};
-  ${({
-  isExpanded,
-  iconAlign
-}) => {
+  margin-right: ${_ref8 => {
+  let {
+    iconAlign
+  } = _ref8;
+  return iconAlign === "left" ? "var(--spacing200)" : "var(--spacing000)";
+}};
+  ${_ref9 => {
+  let {
+    isExpanded,
+    iconAlign
+  } = _ref9;
   return !isExpanded && (iconAlign === "right" ? "transform: rotate(90deg)" : "transform: rotate(-90deg)");
 }};
   color: var(--colorsActionMinor500);
 `;
 const StyledAccordionHeadingsContainer = styled.div`
-  ${({
-  buttonHeading,
-  hasValidationIcon
-}) => !buttonHeading && css`
+  ${_ref10 => {
+  let {
+    buttonHeading,
+    hasValidationIcon
+  } = _ref10;
+  return !buttonHeading && css`
       display: grid;
       ${hasValidationIcon && css`
         grid-template-columns: min-content auto;
@@ -91,16 +118,19 @@ const StyledAccordionHeadingsContainer = styled.div`
         position: relative;
         top: 2px;
       }
-    `}
+    `;
+}}
 `;
 const StyledAccordionTitleContainer = styled.div`
-  ${({
-  buttonHeading,
-  buttonWidth,
-  iconAlign,
-  size,
-  hasButtonProps
-}) => css`
+  ${_ref11 => {
+  let {
+    buttonHeading,
+    buttonWidth,
+    iconAlign,
+    size,
+    hasButtonProps
+  } = _ref11;
+  return css`
     padding: ${size === "small" ? "var(--spacing200)" : "var(--spacing300)"};
     ${space}
     display: flex;
@@ -159,35 +189,42 @@ const StyledAccordionTitleContainer = styled.div`
         width: ${typeof buttonWidth === "number" ? `${buttonWidth}px` : buttonWidth};
       `}
     `}
-  `}
+  `;
+}}
 `;
 const StyledAccordionContentContainer = styled.div`
   flex-grow: 1;
   box-sizing: border-box;
   overflow: hidden;
   transition: all 0.3s;
-  ${({
-  maxHeight,
-  isExpanded
-}) => css`
+  ${_ref12 => {
+  let {
+    maxHeight,
+    isExpanded
+  } = _ref12;
+  return css`
     max-height: ${isExpanded ? `${maxHeight}px` : "0px"};
     height: ${isExpanded ? `${maxHeight}px` : "0px"};
 
     ${!isExpanded && `
       visibility: hidden;
     `}
-  `}
+  `;
+}}
 `;
 const StyledAccordionContent = styled.div`
   padding: var(--spacing300);
   padding-top: 0;
   overflow: hidden;
 
-  ${({
-  disableContentPadding
-}) => disableContentPadding && css`
+  ${_ref13 => {
+  let {
+    disableContentPadding
+  } = _ref13;
+  return disableContentPadding && css`
       padding: 0;
-    `}
+    `;
+}}
 `;
 StyledAccordionGroup.defaultProps = {
   theme: baseTheme

package/esm/components/action-popover/action-popover-item/action-popover-item.component.d.ts

@@ -23,7 +23,7 @@ export interface ActionPopoverItemProps {
     horizontalAlignment?: "left" | "right";
 }
 export declare const ActionPopoverItem: {
-    ({ children, icon, disabled, onClick: onClickProp, submenu, placement, focusItem, download, href, horizontalAlignment, ...rest }: ActionPopoverItemProps): JSX.Element;
+    ({ children, icon, disabled, onClick: onClickProp, submenu, placement, focusItem, download, href, horizontalAlignment, ...rest }: ActionPopoverItemProps): React.JSX.Element;
     displayName: string;
 };
 export default ActionPopoverItem;

package/esm/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useCallback, useEffect, useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -10,11 +9,9 @@ import ActionPopoverContext from "../action-popover-context";
 import useLocale from "../../../hooks/__internal__/useLocale";
 import ActionPopoverMenu from "../action-popover-menu/action-popover-menu.component";
 const INTERVAL = 150;
-
 function checkRef(ref) {
   return Boolean(ref && ref.current);
 }
-
 function leftAlignSubmenu(ref, submenuRef) {
   /* istanbul ignore if */
   if (!ref.current || !submenuRef.current) return true;
@@ -26,7 +23,6 @@ function leftAlignSubmenu(ref, submenuRef) {
   } = submenuRef.current;
   return left >= offsetWidth;
 }
-
 function getContainerPosition(itemRef, submenuRef, placement) {
   /* istanbul ignore if */
   if (!itemRef.current || !submenuRef.current) return undefined;
@@ -44,20 +40,20 @@ function getContainerPosition(itemRef, submenuRef, placement) {
     right: "auto"
   };
 }
-
-const ActionPopoverItem = ({
-  children,
-  icon,
-  disabled = false,
-  onClick: onClickProp,
-  submenu,
-  placement = "bottom",
-  focusItem,
-  download,
-  href,
-  horizontalAlignment,
-  ...rest
-}) => {
+export const ActionPopoverItem = _ref => {
+  let {
+    children,
+    icon,
+    disabled = false,
+    onClick: onClickProp,
+    submenu,
+    placement = "bottom",
+    focusItem,
+    download,
+    href,
+    horizontalAlignment,
+    ...rest
+  } = _ref;
   const l = useLocale();
   const context = useContext(ActionPopoverContext);
   !context ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverItem must be used within an ActionPopover component") : invariant(false) : void 0;
@@ -91,11 +87,8 @@ const ActionPopoverItem = ({
   }, [submenu, placement]);
   useEffect(() => {
     alignSubmenu();
-
     if (focusItem) {
-      var _ref$current;
-
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      ref.current?.focus();
     }
   }, [alignSubmenu, focusItem]);
   useEffect(() => {
@@ -113,18 +106,14 @@ const ActionPopoverItem = ({
   }, [alignSubmenu]);
   const onClick = useCallback(e => {
     e.stopPropagation();
-
     if (!disabled) {
       setOpenPopover(false);
       focusButton();
-
       if (onClickProp) {
         onClickProp(e);
       }
     } else {
-      var _ref$current2;
-
-      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
+      ref.current?.focus();
       e.preventDefault();
     }
   }, [disabled, focusButton, onClickProp, setOpenPopover]);
@@ -141,10 +130,8 @@ const ActionPopoverItem = ({
             setFocusIndex(0);
             e.stopPropagation();
           } else if (Events.isRightKey(e)) {
-            var _ref$current3;
-
             setOpen(false);
-            (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
+            ref.current?.focus();
             e.stopPropagation();
           }
         } else {
@@ -154,38 +141,30 @@ const ActionPopoverItem = ({
             setFocusIndex(0);
             e.stopPropagation();
           }
-
           if (Events.isLeftKey(e)) {
-            var _ref$current4;
-
             setOpen(false);
-            (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.focus();
+            ref.current?.focus();
             e.stopPropagation();
           }
         }
-
         e.preventDefault();
       } else if (Events.isEnterKey(e)) {
         if (isHref && download) {
-          var _ref$current5;
-
-          (_ref$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.click();
+          ref.current?.click();
         }
-
-        e.preventDefault(); // this type assertion should be safe as the onclick handler is designed to catch events propagating from the inner buttons
-
+        e.preventDefault();
+        // this type assertion should be safe as the onclick handler is designed to catch events propagating from the inner buttons
         onClick(e);
       }
     } else if (Events.isEnterKey(e)) {
       e.stopPropagation();
     }
   }, [disabled, download, isHref, isLeftAligned, onClick, submenu]);
-  const itemSubmenuProps = { ...(!disabled && {
+  const itemSubmenuProps = {
+    ...(!disabled && {
       onClick: e => {
-        var _ref$current6;
-
         setOpen(true);
-        (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.focus();
+        ref.current?.focus();
         e.preventDefault();
         e.stopPropagation();
       }
@@ -195,7 +174,8 @@ const ActionPopoverItem = ({
     "aria-controls": `ActionPopoverMenu_${guid}`,
     "aria-expanded": isOpen
   };
-  const wrapperDivProps = { ...(!disabled && {
+  const wrapperDivProps = {
+    ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
         setFocusIndex(-1);
@@ -213,14 +193,12 @@ const ActionPopoverItem = ({
       }
     })
   };
-
   const renderMenuItemIcon = () => {
     return icon && /*#__PURE__*/React.createElement(MenuItemIcon, {
       as: undefined,
       type: icon
     });
   };
-
   return /*#__PURE__*/React.createElement(StyledMenuItemWrapper, submenu && wrapperDivProps, /*#__PURE__*/React.createElement("div", {
     onKeyDown: onKeyDown,
     role: "presentation"
@@ -254,19 +232,5 @@ const ActionPopoverItem = ({
     focusIndex
   }) : null));
 };
-
-ActionPopoverItem.propTypes = {
-  "children": PropTypes.string.isRequired,
-  "disabled": PropTypes.bool,
-  "download": PropTypes.bool,
-  "focusItem": PropTypes.bool,
-  "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
-  "href": PropTypes.string,
-  "icon": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
-  "onClick": PropTypes.func,
-  "placement": PropTypes.oneOf(["bottom", "top"]),
-  "submenu": PropTypes.node
-};
-export { ActionPopoverItem };
 ActionPopoverItem.displayName = "ActionPopoverItem";
 export default ActionPopoverItem;

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useCallback, useMemo, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -8,18 +7,19 @@ import Events from "../../../__internal__/utils/helpers/events";
 import ActionPopoverItem from "../action-popover-item/action-popover-item.component";
 import ActionPopoverDivider from "../action-popover-divider/action-popover-divider.component";
 import ActionPopoverContext from "../action-popover-context";
-const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
-  children,
-  parentID,
-  focusIndex,
-  isOpen,
-  menuID,
-  setOpen,
-  setFocusIndex,
-  placement = "bottom",
-  horizontalAlignment,
-  ...rest
-}, ref) => {
+const ActionPopoverMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    parentID,
+    focusIndex,
+    isOpen,
+    menuID,
+    setOpen,
+    setFocusIndex,
+    placement = "bottom",
+    horizontalAlignment,
+    ...rest
+  } = _ref;
   const context = useContext(ActionPopoverContext);
   !context ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverMenu must be used within an ActionPopover component") : invariant(false) : void 0;
   const {
@@ -31,7 +31,6 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return true;
       }
-
       return child.type !== ActionPopoverItem && child.type !== ActionPopoverDivider;
     });
     return !incorrectChild;
@@ -44,8 +43,8 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
   }, [children]);
   const onKeyDown = useCallback(e => {
     if (Events.isTabKey(e)) {
-      e.preventDefault(); // TAB: close menu and allow focus to change to next focusable element
-
+      e.preventDefault();
+      // TAB: close menu and allow focus to change to next focusable element
       focusButton();
       setOpen(false);
     } else if (Events.isDownKey(e)) {
@@ -81,13 +80,11 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
           if (firstMatch === undefined) {
             firstMatch = index;
           }
-
           if (index > focusIndex && nextMatch === undefined) {
             nextMatch = index;
           }
         }
       });
-
       if (nextMatch !== undefined) {
         setFocusIndex(nextMatch);
       } else if (firstMatch !== undefined) {
@@ -106,7 +103,6 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
           horizontalAlignment
         });
       }
-
       return child;
     });
   }, [children, focusIndex, isOpen, placement, horizontalAlignment]);

package/esm/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { ButtonIconPosition, ButtonTypes, SizeOptions } from "../../button/button.component";
 import { IconType } from "../../icon";
 export declare type ActionPopoverMenuButtonAria = {
@@ -26,7 +26,7 @@ export interface ActionPopoverMenuButtonProps {
     tabIndex: number;
 }
 export declare const ActionPopoverMenuButton: {
-    ({ buttonType, iconType, iconPosition, size, children, ...props }: ActionPopoverMenuButtonProps): JSX.Element;
+    ({ buttonType, iconType, iconPosition, size, children, ...props }: ActionPopoverMenuButtonProps): React.JSX.Element;
     displayName: string;
 };
 export default ActionPopoverMenuButton;