carbon-react 105.0.0 → 105.1.0

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/button/button.component.js

@@ -78,7 +78,7 @@ const Button = ({
   if (!deprecatedWarnTriggered && as) {
     deprecatedWarnTriggered = true;
     Logger.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `Button` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const [internalRef, setInternalRef] = useState(null);

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/multi-action-button/multi-action-button.component.js

@@ -27,7 +27,7 @@ const MultiActionButton = ({
   if (!deprecatedWarnTriggered && as) {
     deprecatedWarnTriggered = true;
     Logger.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `MultiActionButton` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const ref = useRef();

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/split-button/split-button.component.js

@@ -37,7 +37,7 @@ const SplitButton = ({
   if (!deprecatedWarnTriggered && as) {
     deprecatedWarnTriggered = true;
     Logger.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `SplitButton` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const theme = useContext(ThemeContext) || baseTheme;

package/esm/components/tile/tile.component.d.ts

@@ -1,7 +1,8 @@
 export default Tile;
-declare function Tile({ as, p, children, orientation, width, ...props }: {
+declare function Tile({ as, variant, p, children, orientation, width, ...props }: {
     [x: string]: any;
-    as?: string | undefined;
+    as: any;
+    variant?: string | undefined;
     p?: number | undefined;
     children: any;
     orientation?: string | undefined;

package/esm/components/tile/tile.component.js

@@ -4,15 +4,24 @@ import React from "react";
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
 import { StyledTile, TileContent } from "./tile.style.js";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedWarnTriggered = false;
 
 const Tile = ({
-  as = "tile",
+  as,
+  variant = "tile",
   p = 3,
   children,
   orientation = "horizontal",
   width,
   ...props
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed from the `Tile` component interface. You should use the `variant` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const isHorizontal = () => orientation === "horizontal";
 
   const isVertical = () => orientation === "vertical";
@@ -41,7 +50,7 @@ const Tile = ({
     }), /*#__PURE__*/React.cloneElement(child, childProps));
   });
   return /*#__PURE__*/React.createElement(StyledTile, _extends({
-    tileTheme: as,
+    tileTheme: as || variant,
     width: width,
     "data-component": "tile",
     isHorizontal: isHorizontal(orientation),
@@ -56,6 +65,9 @@ Tile.propTypes = {
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   as: PropTypes.oneOf(["tile", "transparent"]),
 
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  variant: PropTypes.oneOf(["tile", "transparent"]),
+
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

package/esm/components/tile/tile.d.ts

@@ -4,6 +4,8 @@ import { SpaceProps } from "styled-system";
 export interface TileProps extends SpaceProps {
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   as?: "tile" | "transparent";
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  variant?: "tile" | "transparent";
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

package/esm/components/toast/toast.component.d.ts

@@ -1,7 +1,7 @@
 export default Toast;
 declare function Toast({ as, children, className, id, isCenter, maxWidth, onDismiss, open, targetPortalId, timeout, variant, ...restProps }: {
     [x: string]: any;
-    as?: string | undefined;
+    as: any;
     children: any;
     className: any;
     id: any;

package/esm/components/toast/toast.component.js

@@ -11,9 +11,11 @@ import IconButton from "../icon-button";
 import ModalManager from "../modal/__internal__/modal-manager";
 import Events from "../../__internal__/utils/helpers/events";
 import useLocale from "../../hooks/__internal__/useLocale";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedWarnTriggered = false;
 
 const Toast = ({
-  as = "success",
+  as,
   children,
   className,
   id,
@@ -26,6 +28,12 @@ const Toast = ({
   variant,
   ...restProps
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed from the `Toast` component interface. You should use the `variant` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const locale = useLocale();
   const toastRef = useRef();
   const timer = useRef();
@@ -74,7 +82,7 @@ const Toast = ({
     if (!open) return null;
     const toastProps = {
       isCenter,
-      variant: variant || as,
+      variant: variant || as || "success",
       id,
       maxWidth
     };

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;