carbon-react 104.58.8 → 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/menu/menu-full-screen/menu-full-screen.component.js

@@ -98,7 +98,8 @@ const MenuFullscreen = ({
   }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: {
       inFullscreenView: true,
-      menuType
+      menuType,
+      inMenu: true
     }
   }, child, index < React.Children.count(children) - 1 && /*#__PURE__*/React.createElement(MenuDivider, null)))))))));
 };

package/esm/components/menu/menu.component.js

@@ -43,7 +43,8 @@ const Menu = ({
       value: {
         menuType,
         handleKeyDown: ev => handleKeyDown(ev, index),
-        isFocused
+        isFocused,
+        inMenu: true
       }
     }, child);
   }));

package/esm/components/menu/menu.context.d.ts

@@ -1,5 +1,6 @@
 declare var _default: React.Context<{
     menuType: string;
+    inMenu: boolean;
 }>;
 export default _default;
 import React from "react";

package/esm/components/menu/menu.context.js

@@ -1,4 +1,5 @@
 import React from "react";
 export default /*#__PURE__*/React.createContext({
-  menuType: "light"
+  menuType: "light",
+  inMenu: false
 });

package/esm/components/menu/menu.d.ts

@@ -8,6 +8,7 @@ interface MenuContextProps {
   handleKeyDown: (ev, submenuOpen) => void;
   isFocused: boolean;
   openSubmenu: boolean;
+  inMenu: boolean;
 }
 
 export interface MenuProps extends LayoutProps, FlexBoxProps {

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/esm/components/vertical-divider/index.d.ts

@@ -1,2 +1 @@
-export { default } from "./vertical-divider";
-export * from "./vertical-divider";
+export { default } from "./vertical-divider.component";

package/esm/components/vertical-divider/vertical-divider.component.d.ts

@@ -1,10 +1,12 @@
-export default VerticalDivider;
-declare function VerticalDivider({ h, displayInline, tint, ...props }: {
-    [x: string]: any;
-    h: any;
-    displayInline?: boolean | undefined;
-    tint?: number | undefined;
-}): JSX.Element;
-declare namespace VerticalDivider {
-    const propTypes: any;
+/// <reference types="react" />
+import { SpaceProps } from "styled-system";
+declare type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
+export interface VerticalDividerPropTypes extends SpaceProps {
+    h?: number | string;
+    height?: number | string;
+    displayInline?: boolean;
+    /** the supported rage is 1-100  */
+    tint?: TintRange;
 }
+declare const VerticalDivider: ({ h, height, displayInline, tint, ...props }: VerticalDividerPropTypes) => JSX.Element;
+export default VerticalDivider;