carbon-react 109.1.2 → 109.1.3

package/esm/components/popover-container/popover-container.component.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import { Transition } from "react-transition-group";
 import { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon } from "./popover-container.style";
 import Icon from "../icon";
+import Popover from "../../__internal__/popover";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
@@ -60,6 +61,19 @@ renderClose.propTypes = {
   "tabIndex": PropTypes.number.isRequired
 };
 
+const offset = ({
+  reference
+}) => {
+  return [0, -reference.height];
+};
+
+const popperModifiers = [{
+  name: "offset",
+  options: {
+    offset
+  }
+}];
+
 const PopoverContainer = ({
   children,
   title,
@@ -86,7 +100,11 @@ const PopoverContainer = ({
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   useEffect(() => {
-    if (isOpen && closeButtonRef.current) closeButtonRef.current.focus();
+    if (isOpen && closeButtonRef.current) setTimeout(() => {
+      var _closeButtonRef$curre;
+
+      return (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 ? void 0 : _closeButtonRef$curre.focus();
+    }, 0);
   }, [isOpen]);
 
   const handleOpenButtonClick = e => {
@@ -140,12 +158,15 @@ const PopoverContainer = ({
     mountOnEnter: true,
     unmountOnExit: true,
     nodeRef: popoverContentNodeRef
-  }, state => /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
+  }, state => isOpen && /*#__PURE__*/React.createElement(Popover, _extends({
+    reference: openButtonRef,
+    placement: position === "right" ? "bottom-start" : "bottom-end"
+  }, shouldCoverButton && {
+    modifiers: popperModifiers
+  }), /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
     animationState: state,
-    position: position,
-    shouldCoverButton: shouldCoverButton,
     "aria-labelledby": popoverContainerId,
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
@@ -154,7 +175,7 @@ const PopoverContainer = ({
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
+  }, title), renderCloseComponent(renderCloseComponentProps)), children))));
 };
 
 PopoverContainer.propTypes = {

package/esm/components/popover-container/popover-container.style.d.ts

@@ -3,8 +3,6 @@ import IconButton from "../icon-button";
 declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
-    shouldCoverButton?: boolean;
-    position?: "left" | "right";
     animationState?: TransitionStatus;
 };
 declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerContentStyleProps, never>;

package/esm/components/popover-container/popover-container.style.js

@@ -24,14 +24,6 @@ const PopoverContainerContentStyle = styled.div`
   theme
 }) => theme.zIndex.popover};
 
-  ${({
-  shouldCoverButton
-}) => shouldCoverButton && "top: 0"}
-
-  ${({
-  position
-}) => position === "left" ? "right: 0" : "left: 0"};
-
   ${({
   animationState
 }) => {

package/lib/components/popover-container/popover-container.component.js

@@ -15,6 +15,8 @@ var _popoverContainer = require("./popover-container.style");
 
 var _icon = _interopRequireDefault(require("../icon"));
 
+var _popover = _interopRequireDefault(require("../../__internal__/popover"));
+
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _utils = require("../../style/utils");
@@ -80,6 +82,19 @@ renderClose.propTypes = {
   "tabIndex": _propTypes.default.number.isRequired
 };
 
+const offset = ({
+  reference
+}) => {
+  return [0, -reference.height];
+};
+
+const popperModifiers = [{
+  name: "offset",
+  options: {
+    offset
+  }
+}];
+
 const PopoverContainer = ({
   children,
   title,
@@ -106,7 +121,11 @@ const PopoverContainer = ({
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   (0, _react.useEffect)(() => {
-    if (isOpen && closeButtonRef.current) closeButtonRef.current.focus();
+    if (isOpen && closeButtonRef.current) setTimeout(() => {
+      var _closeButtonRef$curre;
+
+      return (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 ? void 0 : _closeButtonRef$curre.focus();
+    }, 0);
   }, [isOpen]);
 
   const handleOpenButtonClick = e => {
@@ -160,12 +179,15 @@ const PopoverContainer = ({
     mountOnEnter: true,
     unmountOnExit: true,
     nodeRef: popoverContentNodeRef
-  }, state => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
+  }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
+    reference: openButtonRef,
+    placement: position === "right" ? "bottom-start" : "bottom-end"
+  }, shouldCoverButton && {
+    modifiers: popperModifiers
+  }), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
     animationState: state,
-    position: position,
-    shouldCoverButton: shouldCoverButton,
     "aria-labelledby": popoverContainerId,
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
@@ -174,7 +196,7 @@ const PopoverContainer = ({
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
+  }, title), renderCloseComponent(renderCloseComponentProps)), children))));
 };
 
 exports.PopoverContainer = PopoverContainer;

package/lib/components/popover-container/popover-container.style.d.ts

@@ -3,8 +3,6 @@ import IconButton from "../icon-button";
 declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
-    shouldCoverButton?: boolean;
-    position?: "left" | "right";
     animationState?: TransitionStatus;
 };
 declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerContentStyleProps, never>;

package/lib/components/popover-container/popover-container.style.js

@@ -40,14 +40,6 @@ const PopoverContainerContentStyle = _styledComponents.default.div`
   theme
 }) => theme.zIndex.popover};
 
-  ${({
-  shouldCoverButton
-}) => shouldCoverButton && "top: 0"}
-
-  ${({
-  position
-}) => position === "left" ? "right: 0" : "left: 0"};
-
   ${({
   animationState
 }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.1.2",
+  "version": "109.1.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {