carbon-react 110.4.1 → 110.5.2

package/esm/components/flat-table/flat-table-header/flat-table-header-utils.js

@@ -0,0 +1,18 @@
+const getAlternativeBackgroundColor = colorTheme => {
+  switch (colorTheme) {
+    case "light":
+      return "var(--colorsActionMinor100)";
+
+    case "transparent-base":
+      return "var(--colorsUtilityMajor025)";
+
+    case "transparent-white":
+      return "var(--colorsUtilityYang100)";
+    // default theme is "dark"
+
+    default:
+      return "var(--colorsActionMinor550)";
+  }
+};
+
+export default getAlternativeBackgroundColor;

package/esm/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -1,10 +1,11 @@
 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); }
 
-import React, { useLayoutEffect, useRef } from "react";
+import React, { useLayoutEffect, useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import StyledFlatTableHeader from "./flat-table-header.style";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
+import { FlatTableThemeContext } from "../flat-table.component";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 
 const FlatTableHeader = ({
@@ -21,6 +22,9 @@ const FlatTableHeader = ({
   ...rest
 }) => {
   const ref = useRef(null);
+  const {
+    colorTheme
+  } = useContext(FlatTableThemeContext);
   useLayoutEffect(() => {
     if (ref.current && reportCellWidth) {
       reportCellWidth(ref.current.offsetWidth, cellIndex);
@@ -31,6 +35,7 @@ const FlatTableHeader = ({
     leftPosition: leftPosition || 0,
     makeCellSticky: !!reportCellWidth,
     align: align,
+    colorTheme: colorTheme,
     "data-element": "flat-table-header",
     colSpan: colspan,
     rowSpan: rowspan,

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

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import { padding } from "styled-system";
+import getAlternativeBackgroundColor from "./flat-table-header-utils";
 const verticalBorderSizes = {
   small: "1px",
   medium: "2px",
@@ -12,7 +13,8 @@ const StyledFlatTableHeader = styled.th`
   colWidth,
   leftPosition,
   makeCellSticky,
-  verticalBorder
+  verticalBorder,
+  colorTheme
 }) => css`
     background-color: transparent;
     border-width: 0;
@@ -47,11 +49,11 @@ const StyledFlatTableHeader = styled.th`
     }
 
     ${alternativeBgColor && css`
-        &&&:first-child {
-          border-left: 1px solid var(--colorsActionMinor550);
-        }
         &&& {
-          background-color: var(--colorsActionMinor550);
+          background-color: ${getAlternativeBackgroundColor(colorTheme)};
+        }
+        &&&:first-child {
+          border-left: unset;
         }
       `};
 

package/esm/components/icon/icon.component.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import Tooltip from "../tooltip";
@@ -7,6 +7,7 @@ import { TooltipContext } from "../../__internal__/tooltip-provider";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledIcon from "./icon.style";
 import { ICON_TOOLTIP_POSITIONS } from "./icon-config";
+import { TabTitleContext } from "../tabs/__internal__/tab-title/tab-title.component";
 const Icon = /*#__PURE__*/React.forwardRef(({
   "aria-hidden": ariaHidden,
   ariaLabel,
@@ -47,9 +48,12 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     disabled: disabledFromContext,
     target
   } = useContext(TooltipContext);
+  const {
+    isInTab
+  } = useContext(TabTitleContext);
   /** Return Icon type with overrides */
 
-  const iconType = () => {
+  const iconType = useMemo(() => {
     // switch tweaks icon names for actual icons in the set
     switch (type) {
       case "help":
@@ -71,10 +75,16 @@ const Icon = /*#__PURE__*/React.forwardRef(({
       default:
         return type;
     }
-  };
-
+  }, [type]);
   const isFocusable = focusableFromContext !== undefined ? focusableFromContext : focusable;
   const hasTooltip = !disabled && !disabledFromContext && !!tooltipMessage && isFocusable;
+  const computedTabIndex = useMemo(() => {
+    if (isInTab) {
+      return undefined;
+    }
+
+    return hasTooltip && tabIndex === undefined ? 0 : tabIndex;
+  }, [isInTab, hasTooltip, tabIndex]);
   const styledIconProps = {
     "aria-hidden": ariaHidden,
     "aria-label": ariaLabel,
@@ -83,7 +93,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     bgShape,
     className: className || undefined,
     color,
-    "data-element": iconType(),
+    "data-element": iconType,
     disabled: disabledFromContext || disabled,
     fontSize,
     hasTooltip,
@@ -92,15 +102,18 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     key: "icon",
     ref,
     role,
-    tabIndex: hasTooltip && tabIndex === undefined ? 0 : tabIndex,
-    type: iconType(),
+    tabIndex: computedTabIndex,
+    type: iconType,
     ...tagComponent("icon", rest),
     ...filterStyledSystemMarginProps(rest)
   };
 
+  const shouldShowTooltip = () => {
+    return tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
+  };
+
   if (tooltipMessage) {
-    const showTooltip = tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
-    const visible = disabled ? undefined : showTooltip;
+    const visible = disabled ? undefined : shouldShowTooltip();
     return /*#__PURE__*/React.createElement(Tooltip, {
       message: tooltipMessage,
       position: tooltipPositionFromContext || tooltipPosition,

package/esm/components/message/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./message";
+export { default } from "./message.component";
+export type { MessageProps } from "./message.component";

package/esm/components/message/message-content/message-content.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface MessageContentProps {
+    /** set message title */
+    title?: React.ReactNode;
+    /** set content to component */
+    children?: React.ReactNode;
+}
+declare const MessageContent: ({ title, children }: MessageContentProps) => JSX.Element;
+export default MessageContent;

package/esm/components/message/message-content/message-content.component.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Content from "../../content/content.component.js";
+import Content from "../../content";
 import MessageContentStyle from "./message-content.style";
 
 const MessageContent = ({
@@ -8,13 +8,12 @@ const MessageContent = ({
   children
 }) => {
   return /*#__PURE__*/React.createElement(MessageContentStyle, null, /*#__PURE__*/React.createElement(Content, {
-    title: title,
-    className: "message-content"
+    title: title
   }, children));
 };
 
 MessageContent.propTypes = {
-  title: PropTypes.node,
-  children: PropTypes.node
+  "children": PropTypes.node,
+  "title": PropTypes.node
 };
 export default MessageContent;

package/esm/components/message/message-content/message-content.style.d.ts

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

package/esm/components/message/message-content/message-content.style.js

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { margin } from "styled-system";
 const MessageContentStyle = styled.div`
   padding: 15px 50px 15px 20px;
   white-space: pre-wrap;
@@ -12,7 +11,5 @@ const MessageContentStyle = styled.div`
   .carbon-content__body {
     margin-top: 0px;
   }
-
-  ${margin}
 `;
 export default MessageContentStyle;

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export declare type MessageVariant = "error" | "info" | "success" | "warning";
+export interface MessageProps extends MarginProps {
+    /** set content to component */
+    children?: React.ReactNode;
+    /** set custom class to component */
+    className?: string;
+    /** set custom aria label for message close button */
+    closeButtonAriaLabel?: string;
+    /** set custom id to component root */
+    id?: string;
+    /** function runs when user click dismiss button */
+    onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** show message component */
+    open?: boolean;
+    /** determines if the close icon is shown */
+    showCloseIcon?: boolean;
+    /** set message title */
+    title?: React.ReactNode;
+    /** set background to be invisible */
+    transparent?: boolean;
+    /** set type of message based on new DLS standard */
+    variant?: MessageVariant;
+}
+export declare const Message: ({ open, transparent, title, variant, children, onDismiss, id, className, closeButtonAriaLabel, showCloseIcon, ...props }: MessageProps) => JSX.Element | null;
+export default Message;

package/esm/components/message/message.component.js

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import MessageStyle from "./message.style";
 import TypeIcon from "./type-icon/type-icon.component";
 import MessageContent from "./message-content/message-content.component";
@@ -11,7 +10,6 @@ import Icon from "../icon";
 import IconButton from "../icon-button";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Message = ({
   open = true,
@@ -34,14 +32,13 @@ const Message = ({
     return /*#__PURE__*/React.createElement(IconButton, {
       "data-element": "close",
       "aria-label": closeButtonAriaLabel || l.message.closeButtonAriaLabel(),
-      onAction: onDismiss,
-      variant: variant
+      onAction: onDismiss
     }, /*#__PURE__*/React.createElement(Icon, {
       type: "close"
     }));
   };
 
-  return open && /*#__PURE__*/React.createElement(MessageStyle, _extends({}, tagComponent("Message", props), {
+  return open ? /*#__PURE__*/React.createElement(MessageStyle, _extends({}, tagComponent("Message", props), {
     className: className,
     transparent: transparent,
     variant: variant,
@@ -52,39 +49,174 @@ const Message = ({
     transparent: transparent
   }), /*#__PURE__*/React.createElement(MessageContent, {
     title: title
-  }, children), renderCloseIcon());
+  }, children), renderCloseIcon()) : null;
 };
 
-Message.propTypes = { ...marginPropTypes,
-
-  /** set type of message based on new DLS standard */
-  variant: PropTypes.oneOf(["error", "info", "success", "warning"]),
-
-  /** set content to component */
-  children: PropTypes.node,
-
-  /** set custom class to component */
-  className: PropTypes.string,
-
-  /** set custom id to component root */
-  id: PropTypes.string,
-
-  /** show message component */
-  open: PropTypes.bool,
-
-  /** function runs when user click dismiss button */
-  onDismiss: PropTypes.func,
-
-  /** set message title */
-  title: PropTypes.node,
-
-  /** set background to be invisible */
-  transparent: PropTypes.bool,
-
-  /** determines if the close icon is shown */
-  showCloseIcon: PropTypes.bool,
-
-  /** set custom aria label for message close button */
-  closeButtonAriaLabel: PropTypes.string
+Message.propTypes = {
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "closeButtonAriaLabel": PropTypes.string,
+  "id": PropTypes.string,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "onDismiss": PropTypes.func,
+  "open": PropTypes.bool,
+  "showCloseIcon": PropTypes.bool,
+  "title": PropTypes.node,
+  "transparent": PropTypes.bool,
+  "variant": PropTypes.oneOf(["error", "info", "success", "warning"])
 };
+export { Message };
 export default Message;

package/esm/components/message/message.style.d.ts

@@ -0,0 +1,8 @@
+import { MarginProps } from "styled-system";
+import { MessageVariant } from "./message.component";
+declare type MessageStyleProps = {
+    variant: MessageVariant;
+    transparent?: boolean;
+};
+declare const MessageStyle: import("styled-components").StyledComponent<"div", any, MessageStyleProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+export default MessageStyle;

package/esm/components/message/message.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
@@ -37,12 +36,6 @@ const MessageStyle = styled.div`
   ${margin}
 `;
 MessageStyle.defaultProps = {
-  variant: "info",
-  theme: BaseTheme,
-  transparent: false
-};
-MessageStyle.propTypes = {
-  variant: PropTypes.string,
-  transparent: PropTypes.bool
+  theme: BaseTheme
 };
 export default MessageStyle;

package/esm/components/message/type-icon/type-icon.component.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MessageVariant } from "../message.component";
+export interface TypeIconProps {
+    /** set background to be invisible */
+    transparent?: boolean;
+    /** set type of message based on new DLS standard */
+    variant?: MessageVariant;
+}
+declare const TypeIcon: ({ variant, transparent }: TypeIconProps) => JSX.Element;
+export default TypeIcon;

package/esm/components/message/type-icon/type-icon.component.js

@@ -4,8 +4,8 @@ import TypeIconStyle from "./type-icon.style";
 import Icon from "../../icon";
 
 const TypeIcon = ({
-  variant,
-  transparent
+  variant = "info",
+  transparent = false
 }) => {
   return /*#__PURE__*/React.createElement(TypeIconStyle, {
     variant: variant,
@@ -15,12 +15,8 @@ const TypeIcon = ({
   }));
 };
 
-TypeIcon.defaultProps = {
-  variant: "info",
-  transparent: false
-};
 TypeIcon.propTypes = {
-  variant: PropTypes.oneOf(["error", "info", "success", "warning"]),
-  transparent: PropTypes.bool
+  "transparent": PropTypes.bool,
+  "variant": PropTypes.oneOf(["error", "info", "success", "warning"])
 };
 export default TypeIcon;

package/esm/components/message/type-icon/type-icon.style.d.ts

@@ -0,0 +1,9 @@
+import { MessageVariant } from "../message.component";
+declare type TypeIconStyleProps = {
+    /** set background to be invisible */
+    transparent?: boolean;
+    /** set type of message based on new DLS standard */
+    variant: MessageVariant;
+};
+declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, TypeIconStyleProps, never>;
+export default TypeIconStyle;

package/esm/components/message/type-icon/type-icon.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 const messageVariants = {
   error: "var(--colorsSemanticNegative500)",
   info: "var(--colorsSemanticNeutral500)",
@@ -34,13 +33,4 @@ const TypeIconStyle = styled.div`
       }
     `}
 `;
-TypeIconStyle.defaultProps = {
-  variant: "info",
-  transparent: false
-};
-TypeIconStyle.propTypes = {
-  variant: PropTypes.oneOf(["error", "info", "success", "warning"]),
-  border: PropTypes.bool,
-  transparent: PropTypes.bool
-};
 export default TypeIconStyle;

package/esm/components/search/search.component.js

@@ -30,6 +30,10 @@ const Search = ({
   "aria-label": ariaLabel = "search",
   inputRef,
   tabIndex,
+  error,
+  warning,
+  info,
+  tooltipPosition,
   ...rest
 }) => {
   const isControlled = value !== undefined;
@@ -159,7 +163,11 @@ const Search = ({
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     inputRef: assignInput,
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    error: error,
+    warning: warning,
+    info: info,
+    tooltipPosition: tooltipPosition
   }), searchButton && /*#__PURE__*/React.createElement(StyledSearchButton, null, Boolean(isFocused || (!isControlled ? searchValue.length : value.length)) && /*#__PURE__*/React.createElement(Button, _extends({
     tabIndex: iconTabIndex,
     size: "medium",
@@ -238,6 +246,24 @@ Search.propTypes = {
   }),
 
   /** Input tabindex */
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+
+  /** Indicate that error has occurred
+  Pass string to display icon, tooltip and red border
+  Pass true boolean to only display red border */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Indicate that warning has occurred
+  Pass string to display icon, tooltip and orange border
+  Pass true boolean to only display orange border */
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Indicate additional information
+  Pass string to display icon, tooltip and blue border
+  Pass true boolean to only display blue border */
+  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Overrides the default tooltip position */
+  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"])
 };
 export default Search;

package/esm/components/search/search.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { MarginProps } from "styled-system";
 
-export interface SearchProps extends MarginProps {
+export interface SearchProps extends ValidationProps, MarginProps {
   /** Prop to specify the aria-label of the search component */
   "aria-label"?: string;
   /** Prop for `uncontrolled` use */
@@ -42,6 +42,8 @@ export interface SearchProps extends MarginProps {
   inputRef?: React.RefObject<HTMLInputElement>;
   /** Input tabindex */
   tabIndex?: number;
+  /** Overrides the default tooltip position */
+  tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 
 declare function Search(props: SearchProps): JSX.Element;

package/esm/components/sidebar/__internal__/sidebar-header/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./sidebar-header.component";