carbon-react 105.0.1 → 105.1.1

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/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -5,7 +5,7 @@ import { useDrop, DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import PropTypes from "prop-types";
 import StyledIcon from "../../icon/icon.style";
-import FlatTableBody from "../flat-table-body/flat-table-body.component";
+import StyledFlatTableBodyDraggable from "./flat-table-body-draggable.style";
 import FlatTableCell from "../flat-table-cell/flat-table-cell.component";
 
 const DropTarget = ({
@@ -13,16 +13,23 @@ const DropTarget = ({
   getOrder,
   ...rest
 }) => {
+  const [isDragging, setIsDragging] = useState(false);
   const [, drop] = useDrop({
     accept: "flatTableRow",
+    hover: (_, monitor) => {
+      if (!isDragging && monitor.isOver()) setIsDragging(true);
+    },
 
     drop() {
+      setIsDragging(false);
       getOrder();
     }
 
   });
-  return /*#__PURE__*/React.createElement(FlatTableBody, _extends({
-    ref: drop
+  return /*#__PURE__*/React.createElement(StyledFlatTableBodyDraggable, _extends({
+    "data-testid": "flat-table-body-draggable",
+    ref: drop,
+    isDragging: isDragging
   }, rest), children);
 };
 

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledFlatTableBodyDraggable;
+declare const StyledFlatTableBodyDraggable: import("styled-components").StyledComponent<"tbody", any, {}, never>;

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.js

@@ -0,0 +1,9 @@
+import styled, { css } from "styled-components";
+const StyledFlatTableBodyDraggable = styled.tbody`
+  ${({
+  isDragging
+}) => isDragging && css`
+      cursor: grabbing;
+    `}
+`;
+export default StyledFlatTableBodyDraggable;

package/esm/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -248,7 +248,6 @@ const StyledFlatTableRow = styled.tr`
       ${isDragging && css`
         border: ${isInSidebar ? "var(--colorsUtilityMajor300)" : "var(--colorsUtilityMajor200)"}
           2px solid;
-        cursor: grabbing;
         ${allCellTypes} {
           background-color: ${isInSidebar ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor150)"};
         }

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

@@ -99,7 +99,7 @@ const Button = ({
     deprecatedWarnTriggered = true;
 
     _logger.default.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] = (0, _react.useState)(null);

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -15,7 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
-var _flatTableBody = _interopRequireDefault(require("../flat-table-body/flat-table-body.component"));
+var _flatTableBodyDraggable = _interopRequireDefault(require("./flat-table-body-draggable.style"));
 
 var _flatTableCell = _interopRequireDefault(require("../flat-table-cell/flat-table-cell.component"));
 
@@ -32,16 +32,23 @@ const DropTarget = ({
   getOrder,
   ...rest
 }) => {
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
   const [, drop] = (0, _reactDnd.useDrop)({
     accept: "flatTableRow",
+    hover: (_, monitor) => {
+      if (!isDragging && monitor.isOver()) setIsDragging(true);
+    },
 
     drop() {
+      setIsDragging(false);
       getOrder();
     }
 
   });
-  return /*#__PURE__*/_react.default.createElement(_flatTableBody.default, _extends({
-    ref: drop
+  return /*#__PURE__*/_react.default.createElement(_flatTableBodyDraggable.default, _extends({
+    "data-testid": "flat-table-body-draggable",
+    ref: drop,
+    isDragging: isDragging
   }, rest), children);
 };
 

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledFlatTableBodyDraggable;
+declare const StyledFlatTableBodyDraggable: import("styled-components").StyledComponent<"tbody", any, {}, never>;

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+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 StyledFlatTableBodyDraggable = _styledComponents.default.tbody`
+  ${({
+  isDragging
+}) => isDragging && (0, _styledComponents.css)`
+      cursor: grabbing;
+    `}
+`;
+var _default = StyledFlatTableBodyDraggable;
+exports.default = _default;

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -269,7 +269,6 @@ const StyledFlatTableRow = _styledComponents.default.tr`
       ${isDragging && (0, _styledComponents.css)`
         border: ${isInSidebar ? "var(--colorsUtilityMajor300)" : "var(--colorsUtilityMajor200)"}
           2px solid;
-        cursor: grabbing;
         ${allCellTypes} {
           background-color: ${isInSidebar ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor150)"};
         }

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

@@ -51,7 +51,7 @@ const MultiActionButton = ({
     deprecatedWarnTriggered = true;
 
     _logger.default.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 = (0, _react.useRef)();

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

@@ -67,7 +67,7 @@ const SplitButton = ({
     deprecatedWarnTriggered = true;
 
     _logger.default.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 = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;

package/lib/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/lib/components/tile/tile.component.js

@@ -13,18 +13,30 @@ var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _tileStyle = require("./tile.style.js");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
 
+let deprecatedWarnTriggered = false;
+
 const Tile = ({
-  as = "tile",
+  as,
+  variant = "tile",
   p = 3,
   children,
   orientation = "horizontal",
   width,
   ...props
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.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";
@@ -54,7 +66,7 @@ const Tile = ({
   });
 
   return /*#__PURE__*/_react.default.createElement(_tileStyle.StyledTile, _extends({
-    tileTheme: as,
+    tileTheme: as || variant,
     width: width,
     "data-component": "tile",
     isHorizontal: isHorizontal(orientation),
@@ -69,6 +81,9 @@ Tile.propTypes = {
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   as: _propTypes.default.oneOf(["tile", "transparent"]),
 
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  variant: _propTypes.default.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/lib/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/lib/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/lib/components/toast/toast.component.js

@@ -27,6 +27,8 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 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,8 +37,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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); }
 
+let deprecatedWarnTriggered = false;
+
 const Toast = ({
-  as = "success",
+  as,
   children,
   className,
   id,
@@ -49,6 +53,13 @@ const Toast = ({
   variant,
   ...restProps
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.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 = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
@@ -100,7 +111,7 @@ const Toast = ({
     if (!open) return null;
     const toastProps = {
       isCenter,
-      variant: variant || as,
+      variant: variant || as || "success",
       id,
       maxWidth
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "105.0.1",
+  "version": "105.1.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -84,6 +84,8 @@
     "@storybook/components": "^6.4.18",
     "@storybook/react": "^6.4.18",
     "@storybook/theming": "^6.4.18",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^26.0.19",
@@ -172,8 +174,8 @@
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
     "react-day-picker": "~7.4.10",
-    "react-dnd": "^14.0.5",
-    "react-dnd-html5-backend": "^14.1.0",
+    "react-dnd": "^15.1.1",
+    "react-dnd-html5-backend": "^15.1.2",
     "react-is": "^17.0.2",
     "react-transition-group": "^4.4.1",
     "styled-system": "^5.1.5",