carbon-react 105.0.1 → 105.0.2

package/esm/__internal__/popover/popover.component.d.ts

@@ -16,7 +16,7 @@ declare namespace Popover {
         const modifiers: PropTypes.Requireable<any[]>;
         const onFirstUpdate: PropTypes.Requireable<(...args: any[]) => any>;
         const disablePortal: PropTypes.Requireable<boolean>;
-        const reference: PropTypes.Requireable<PropTypes.InferProps<{
+        const reference: PropTypes.Validator<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
         }>>;
     }

package/esm/__internal__/popover/popover.component.js

@@ -1,10 +1,11 @@
-import React, { useEffect, useLayoutEffect, useRef } from "react";
+import React, { useContext, useEffect, useLayoutEffect, useRef } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { createPopper } from "@popperjs/core";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 import StyledBackdrop from "./popover.style";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
+import { ModalContext } from "../../components/modal/modal.component";
 
 const Popover = ({
   children,
@@ -16,10 +17,18 @@ const Popover = ({
   disableBackgroundUI
 }) => {
   const elementDOM = useRef();
+  const {
+    isInModal
+  } = useContext(ModalContext);
+  let mountNode = document.body;
+
+  if (isInModal && reference.current) {
+    mountNode = reference.current.closest("[role='dialog']");
+  }
 
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");
-    document.body.appendChild(elementDOM.current);
+    mountNode.appendChild(elementDOM.current);
   }
 
   const popperInstance = useRef();
@@ -68,10 +77,11 @@ const Popover = ({
   useEffect(() => {
     return () => {
       if (!disablePortal) {
-        document.body.removeChild(elementDOM.current);
+        mountNode.removeChild(elementDOM.current);
+        elementDOM.current = null;
       }
     };
-  }, [disablePortal]);
+  }, [disablePortal, mountNode]);
 
   if (disableBackgroundUI) {
     content = /*#__PURE__*/React.createElement(StyledBackdrop, null, content);
@@ -102,6 +112,6 @@ Popover.propTypes = {
   // Reference element, children will be positioned in relation to this element - should be a ref
   reference: PropTypes.shape({
     current: PropTypes.any
-  })
+  }).isRequired
 };
 export default Popover;

package/esm/components/modal/modal.component.js

@@ -140,7 +140,8 @@ const Modal = ({
   }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: {
       isAnimationComplete,
-      triggerRefocusFlag
+      triggerRefocusFlag,
+      isInModal: true
     }
   }, content)))));
 };

package/esm/components/select/__internal__/select-text/select-text.component.d.ts

@@ -1,11 +1,9 @@
 export default SelectText;
-declare function SelectText({ disabled, formattedValue, onClick, onKeyDown, onFocus, onBlur, onMouseDown, placeholder, readOnly, textId, transparent, }: {
+declare function SelectText({ disabled, formattedValue, onClick, onKeyDown, onMouseDown, placeholder, readOnly, textId, transparent, }: {
     disabled: any;
     formattedValue?: string | undefined;
     onClick: any;
     onKeyDown: any;
-    onFocus: any;
-    onBlur: any;
     onMouseDown: any;
     placeholder: any;
     readOnly: any;
@@ -16,9 +14,7 @@ declare namespace SelectText {
     namespace propTypes {
         const disabled: PropTypes.Requireable<boolean>;
         const formattedValue: PropTypes.Requireable<string>;
-        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         const onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
         const placeholder: PropTypes.Requireable<string>;

package/esm/components/select/__internal__/select-text/select-text.component.js

@@ -1,38 +1,22 @@
-import React, { useContext } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import StyledSelectText from "./select-text.style";
-import { InputContext } from "../../../../__internal__/input-behaviour";
 
 const SelectText = ({
   disabled,
   formattedValue = "",
   onClick,
   onKeyDown,
-  onFocus,
-  onBlur,
   onMouseDown,
   placeholder,
   readOnly,
   textId,
   transparent
 }) => {
-  const inputContext = useContext(InputContext);
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
 
-  function handleFocus(event) {
-    inputContext.onFocus(event);
-
-    if (onFocus) {
-      onFocus(event);
-    }
-  }
-
-  function handleBlur(event) {
-    inputContext.onBlur(event);
-
-    if (onBlur) {
-      onBlur(event);
-    }
+  function handleClick(event) {
+    onClick(event);
   }
 
   return /*#__PURE__*/React.createElement(StyledSelectText, {
@@ -41,9 +25,7 @@ const SelectText = ({
     disabled: disabled,
     hasPlaceholder: hasPlaceholder,
     id: textId,
-    onBlur: handleBlur,
-    onClick: onClick,
-    onFocus: handleFocus,
+    onClick: handleClick,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     readOnly: readOnly,
@@ -60,15 +42,9 @@ SelectText.propTypes = {
   /** Value to be displayed */
   formattedValue: PropTypes.string,
 
-  /** Callback function for when the Select Textbox loses it's focus. */
-  onBlur: PropTypes.func,
-
   /** Callback function for when the component is clicked. */
   onClick: PropTypes.func,
 
-  /** Callback function for when the Select Textbox is focused. */
-  onFocus: PropTypes.func,
-
   /** Callback function for when the key is pressed when focused on Select Text. */
   onKeyDown: PropTypes.func,
 

package/esm/components/select/select-textbox/select-textbox.component.js

@@ -150,8 +150,11 @@ const SelectTextbox = ({
       textId: textId.current,
       transparent: transparent,
       onKeyDown: handleSelectTextKeydown,
-      placeholder: placeholder || l.select.placeholder()
-    }, getTextboxProps()));
+      placeholder: placeholder || l.select.placeholder(),
+      onClick: handleTextboxClick,
+      disabled: disabled,
+      readOnly: readOnly
+    }, restProps));
   }
 
   function handleSelectTextKeydown(event) {

package/lib/__internal__/popover/popover.component.d.ts

@@ -16,7 +16,7 @@ declare namespace Popover {
         const modifiers: PropTypes.Requireable<any[]>;
         const onFirstUpdate: PropTypes.Requireable<(...args: any[]) => any>;
         const disablePortal: PropTypes.Requireable<boolean>;
-        const reference: PropTypes.Requireable<PropTypes.InferProps<{
+        const reference: PropTypes.Validator<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
         }>>;
     }

package/lib/__internal__/popover/popover.component.js

@@ -19,6 +19,8 @@ var _popover = _interopRequireDefault(require("./popover.style"));
 
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
+var _modal = require("../../components/modal/modal.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -35,10 +37,18 @@ const Popover = ({
   disableBackgroundUI
 }) => {
   const elementDOM = (0, _react.useRef)();
+  const {
+    isInModal
+  } = (0, _react.useContext)(_modal.ModalContext);
+  let mountNode = document.body;
+
+  if (isInModal && reference.current) {
+    mountNode = reference.current.closest("[role='dialog']");
+  }
 
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");
-    document.body.appendChild(elementDOM.current);
+    mountNode.appendChild(elementDOM.current);
   }
 
   const popperInstance = (0, _react.useRef)();
@@ -88,10 +98,11 @@ const Popover = ({
   (0, _react.useEffect)(() => {
     return () => {
       if (!disablePortal) {
-        document.body.removeChild(elementDOM.current);
+        mountNode.removeChild(elementDOM.current);
+        elementDOM.current = null;
       }
     };
-  }, [disablePortal]);
+  }, [disablePortal, mountNode]);
 
   if (disableBackgroundUI) {
     content = /*#__PURE__*/_react.default.createElement(_popover.default, null, content);
@@ -122,7 +133,7 @@ Popover.propTypes = {
   // Reference element, children will be positioned in relation to this element - should be a ref
   reference: _propTypes.default.shape({
     current: _propTypes.default.any
-  })
+  }).isRequired
 };
 var _default = Popover;
 exports.default = _default;

package/lib/components/modal/modal.component.js

@@ -165,7 +165,8 @@ const Modal = ({
   }, /*#__PURE__*/_react.default.createElement(ModalContext.Provider, {
     value: {
       isAnimationComplete,
-      triggerRefocusFlag
+      triggerRefocusFlag,
+      isInModal: true
     }
   }, content)))));
 };

package/lib/components/select/__internal__/select-text/select-text.component.d.ts

@@ -1,11 +1,9 @@
 export default SelectText;
-declare function SelectText({ disabled, formattedValue, onClick, onKeyDown, onFocus, onBlur, onMouseDown, placeholder, readOnly, textId, transparent, }: {
+declare function SelectText({ disabled, formattedValue, onClick, onKeyDown, onMouseDown, placeholder, readOnly, textId, transparent, }: {
     disabled: any;
     formattedValue?: string | undefined;
     onClick: any;
     onKeyDown: any;
-    onFocus: any;
-    onBlur: any;
     onMouseDown: any;
     placeholder: any;
     readOnly: any;
@@ -16,9 +14,7 @@ declare namespace SelectText {
     namespace propTypes {
         const disabled: PropTypes.Requireable<boolean>;
         const formattedValue: PropTypes.Requireable<string>;
-        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         const onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
         const placeholder: PropTypes.Requireable<string>;

package/lib/components/select/__internal__/select-text/select-text.component.js

@@ -5,50 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _selectText = _interopRequireDefault(require("./select-text.style"));
 
-var _inputBehaviour = require("../../../../__internal__/input-behaviour");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const SelectText = ({
   disabled,
   formattedValue = "",
   onClick,
   onKeyDown,
-  onFocus,
-  onBlur,
   onMouseDown,
   placeholder,
   readOnly,
   textId,
   transparent
 }) => {
-  const inputContext = (0, _react.useContext)(_inputBehaviour.InputContext);
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
 
-  function handleFocus(event) {
-    inputContext.onFocus(event);
-
-    if (onFocus) {
-      onFocus(event);
-    }
-  }
-
-  function handleBlur(event) {
-    inputContext.onBlur(event);
-
-    if (onBlur) {
-      onBlur(event);
-    }
+  function handleClick(event) {
+    onClick(event);
   }
 
   return /*#__PURE__*/_react.default.createElement(_selectText.default, {
@@ -57,9 +36,7 @@ const SelectText = ({
     disabled: disabled,
     hasPlaceholder: hasPlaceholder,
     id: textId,
-    onBlur: handleBlur,
-    onClick: onClick,
-    onFocus: handleFocus,
+    onClick: handleClick,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     readOnly: readOnly,
@@ -76,15 +53,9 @@ SelectText.propTypes = {
   /** Value to be displayed */
   formattedValue: _propTypes.default.string,
 
-  /** Callback function for when the Select Textbox loses it's focus. */
-  onBlur: _propTypes.default.func,
-
   /** Callback function for when the component is clicked. */
   onClick: _propTypes.default.func,
 
-  /** Callback function for when the Select Textbox is focused. */
-  onFocus: _propTypes.default.func,
-
   /** Callback function for when the key is pressed when focused on Select Text. */
   onKeyDown: _propTypes.default.func,
 

package/lib/components/select/select-textbox/select-textbox.component.js

@@ -171,8 +171,11 @@ const SelectTextbox = ({
       textId: textId.current,
       transparent: transparent,
       onKeyDown: handleSelectTextKeydown,
-      placeholder: placeholder || l.select.placeholder()
-    }, getTextboxProps()));
+      placeholder: placeholder || l.select.placeholder(),
+      onClick: handleTextboxClick,
+      disabled: disabled,
+      readOnly: readOnly
+    }, restProps));
   }
 
   function handleSelectTextKeydown(event) {

package/package.json

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