carbon-react 110.4.1 → 110.5.2

package/esm/components/step-sequence/step-sequence.component.js

@@ -2,31 +2,183 @@ 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 StepSequenceStyle from "./step-sequence.style";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-export const StepSequenceContext = /*#__PURE__*/React.createContext({});
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+export const StepSequenceContext = /*#__PURE__*/React.createContext({
+  orientation: "horizontal"
+});
 
-const StepSequence = props => {
+const StepSequence = ({
+  children,
+  orientation = "horizontal",
+  ...props
+}) => {
   return /*#__PURE__*/React.createElement(StepSequenceStyle, _extends({
-    "data-component": "step-sequence"
+    "data-component": "step-sequence",
+    orientation: orientation
   }, props), /*#__PURE__*/React.createElement(StepSequenceContext.Provider, {
     value: {
-      orientation: props.orientation
+      orientation
     }
-  }, props.children));
+  }, children));
 };
 
-StepSequence.propTypes = { ...marginPropTypes,
-
-  /** Step sequence items to be rendered */
-  children: PropTypes.node,
-
-  /** The direction that step sequence items should be rendered */
-  orientation: PropTypes.oneOf(["horizontal", "vertical"])
-};
-StepSequence.defaultProps = {
-  orientation: "horizontal"
+StepSequence.propTypes = {
+  "children": PropTypes.node,
+  "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]),
+  "orientation": PropTypes.oneOf(["horizontal", "vertical"])
 };
+export { StepSequence };
 export default StepSequence;

package/esm/components/step-sequence/step-sequence.config.d.ts

@@ -0,0 +1,2 @@
+export declare const STEP_SEQUENCE_STEPS: string[];
+export declare const STEP_SEQUENCE_ORIENTATION: string[];

package/esm/components/step-sequence/step-sequence.style.d.ts

@@ -0,0 +1,4 @@
+declare const StepSequenceStyle: import("styled-components").StyledComponent<"ol", any, {
+    orientation: "horizontal" | "vertical";
+}, never>;
+export default StepSequenceStyle;

package/esm/components/tabs/__internal__/tab-title/tab-title.component.d.ts

@@ -0,0 +1,4 @@
+export const TabTitleContext: React.Context<{}>;
+export default TabTitle;
+import React from "react";
+declare const TabTitle: React.ForwardRefExoticComponent<React.RefAttributes<any>>;

package/esm/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -1,6 +1,6 @@
 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, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { StyledTabTitle, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator } from "./tab-title.style";
 import tagComponent from "../../../../__internal__/utils/helpers/tags/tags";
@@ -8,6 +8,8 @@ import ValidationIcon from "../../../../__internal__/validations/validation-icon
 import createGuid from "../../../../__internal__/utils/helpers/guid";
 import Icon from "../../../icon";
 import Events from "../../../../__internal__/utils/helpers/events";
+import { TooltipProvider } from "../../../../__internal__/tooltip-provider";
+export const TabTitleContext = /*#__PURE__*/React.createContext({});
 const TabTitle = /*#__PURE__*/React.forwardRef(({
   isTabSelected,
   dataTabId,
@@ -38,6 +40,18 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   const isHref = !!href;
   const hasAlternateStyling = alternateStyling || isInSidebar;
   const hasFailedValidation = error || warning || info;
+  const [shouldShowTooltip, setShouldShowTooltip] = useState(false);
+  const hasHover = useRef(false);
+
+  const showTooltip = () => {
+    setShouldShowTooltip(true);
+  };
+
+  const hideTooltip = () => {
+    if ((ref === null || ref === void 0 ? void 0 : ref.current) !== document.activeElement && !hasHover.current) {
+      setShouldShowTooltip(false);
+    }
+  };
 
   if (siblings && !keys.current.length) {
     siblings.forEach(() => keys.current.push(createGuid()));
@@ -102,7 +116,13 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     return titlePosition === "before" ? [titleText, titleSiblings] : [titleSiblings, titleText];
   };
 
-  return /*#__PURE__*/React.createElement(StyledTabTitle, _extends({
+  return /*#__PURE__*/React.createElement(TooltipProvider, {
+    tooltipVisible: shouldShowTooltip
+  }, /*#__PURE__*/React.createElement(TabTitleContext.Provider, {
+    value: {
+      isInTab: true
+    }
+  }, /*#__PURE__*/React.createElement(StyledTabTitle, _extends({
     ref: ref,
     "aria-selected": isTabSelected,
     "data-element": "select-tab",
@@ -125,7 +145,17 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   }, tagComponent("tab-header", tabTitleProps), {
     onKeyDown: handleKeyDown,
     onClick: handleClick,
-    size: size
+    size: size,
+    onMouseOver: () => {
+      hasHover.current = true;
+      showTooltip();
+    },
+    onMouseLeave: () => {
+      hasHover.current = false;
+      hideTooltip();
+    },
+    onFocus: showTooltip,
+    onBlur: hideTooltip
   }), /*#__PURE__*/React.createElement(StyledTitleContent, {
     error: error,
     warning: warning,
@@ -164,7 +194,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   }))), !(hasFailedValidation || hasAlternateStyling) && isTabSelected && /*#__PURE__*/React.createElement(StyledSelectedIndicator, {
     "data-element": "tab-selected-indicator",
     position: position
-  }));
+  }))));
 });
 TabTitle.propTypes = {
   title: PropTypes.string.isRequired,

package/esm/components/tabs/__internal__/tab-title/tab-title.d.ts

@@ -1,5 +1,9 @@
 import * as React from "react";
 
+export interface TabTitleContextProps {
+  isInTab?: boolean;
+}
+
 export interface TabTitleProps {
   title: string;
   id?: string;
@@ -34,6 +38,8 @@ export interface TabTitleProps {
   ) => void;
 }
 
+declare const TabTitleContext: React.Context<TabTitleContextProps>;
 declare function TabTitle(props: TabTitleProps): JSX.Element;
 
+export { TabTitleContext };
 export default TabTitle;

package/esm/components/tabs/__internal__/tab-title/tab-title.style.d.ts

@@ -0,0 +1,4 @@
+export const StyledTabTitle: import("styled-components").StyledComponent<"button", any, {}, never>;
+export const StyledTitleContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export const StyledLayoutWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSelectedIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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)";
+  }
+};
+
+var _default = getAlternativeBackgroundColor;
+exports.default = _default;

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

@@ -15,6 +15,8 @@ var _flatTableHeader = _interopRequireDefault(require("./flat-table-header.style
 
 var _utils = require("../../../style/utils");
 
+var _flatTable = require("../flat-table.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; }
@@ -39,6 +41,9 @@ const FlatTableHeader = ({
   ...rest
 }) => {
   const ref = (0, _react.useRef)(null);
+  const {
+    colorTheme
+  } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   (0, _react.useLayoutEffect)(() => {
     if (ref.current && reportCellWidth) {
       reportCellWidth(ref.current.offsetWidth, cellIndex);
@@ -49,6 +54,7 @@ const FlatTableHeader = ({
     leftPosition: leftPosition || 0,
     makeCellSticky: !!reportCellWidth,
     align: align,
+    colorTheme: colorTheme,
     "data-element": "flat-table-header",
     colSpan: colspan,
     rowSpan: rowspan,

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

@@ -9,6 +9,10 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
+var _flatTableHeaderUtils = _interopRequireDefault(require("./flat-table-header-utils"));
+
+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; }
@@ -25,7 +29,8 @@ const StyledFlatTableHeader = _styledComponents.default.th`
   colWidth,
   leftPosition,
   makeCellSticky,
-  verticalBorder
+  verticalBorder,
+  colorTheme
 }) => (0, _styledComponents.css)`
     background-color: transparent;
     border-width: 0;
@@ -60,11 +65,11 @@ const StyledFlatTableHeader = _styledComponents.default.th`
     }
 
     ${alternativeBgColor && (0, _styledComponents.css)`
-        &&&:first-child {
-          border-left: 1px solid var(--colorsActionMinor550);
-        }
         &&& {
-          background-color: var(--colorsActionMinor550);
+          background-color: ${(0, _flatTableHeaderUtils.default)(colorTheme)};
+        }
+        &&&:first-child {
+          border-left: unset;
         }
       `};
 

package/lib/components/icon/icon.component.js

@@ -23,6 +23,8 @@ var _icon = _interopRequireDefault(require("./icon.style"));
 
 var _iconConfig = require("./icon-config");
 
+var _tabTitle = require("../tabs/__internal__/tab-title/tab-title.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; }
@@ -69,9 +71,12 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     disabled: disabledFromContext,
     target
   } = (0, _react.useContext)(_tooltipProvider.TooltipContext);
+  const {
+    isInTab
+  } = (0, _react.useContext)(_tabTitle.TabTitleContext);
   /** Return Icon type with overrides */
 
-  const iconType = () => {
+  const iconType = (0, _react.useMemo)(() => {
     // switch tweaks icon names for actual icons in the set
     switch (type) {
       case "help":
@@ -93,10 +98,16 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
       default:
         return type;
     }
-  };
-
+  }, [type]);
   const isFocusable = focusableFromContext !== undefined ? focusableFromContext : focusable;
   const hasTooltip = !disabled && !disabledFromContext && !!tooltipMessage && isFocusable;
+  const computedTabIndex = (0, _react.useMemo)(() => {
+    if (isInTab) {
+      return undefined;
+    }
+
+    return hasTooltip && tabIndex === undefined ? 0 : tabIndex;
+  }, [isInTab, hasTooltip, tabIndex]);
   const styledIconProps = {
     "aria-hidden": ariaHidden,
     "aria-label": ariaLabel,
@@ -105,7 +116,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     bgShape,
     className: className || undefined,
     color,
-    "data-element": iconType(),
+    "data-element": iconType,
     disabled: disabledFromContext || disabled,
     fontSize,
     hasTooltip,
@@ -114,15 +125,18 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     key: "icon",
     ref,
     role,
-    tabIndex: hasTooltip && tabIndex === undefined ? 0 : tabIndex,
-    type: iconType(),
+    tabIndex: computedTabIndex,
+    type: iconType,
     ...(0, _tags.default)("icon", rest),
     ...(0, _utils.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.default.createElement(_tooltip.default, {
       message: tooltipMessage,
       position: tooltipPositionFromContext || tooltipPosition,

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

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

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _contentComponent = _interopRequireDefault(require("../../content/content.component.js"));
+var _content = _interopRequireDefault(require("../../content"));
 
 var _messageContent = _interopRequireDefault(require("./message-content.style"));
 
@@ -19,15 +19,14 @@ const MessageContent = ({
   title,
   children
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_messageContent.default, null, /*#__PURE__*/_react.default.createElement(_contentComponent.default, {
-    title: title,
-    className: "message-content"
+  return /*#__PURE__*/_react.default.createElement(_messageContent.default, null, /*#__PURE__*/_react.default.createElement(_content.default, {
+    title: title
   }, children));
 };
 
 MessageContent.propTypes = {
-  title: _propTypes.default.node,
-  children: _propTypes.default.node
+  "children": _propTypes.default.node,
+  "title": _propTypes.default.node
 };
 var _default = MessageContent;
 exports.default = _default;

package/lib/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/lib/components/message/message-content/message-content.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styledSystem = require("styled-system");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const MessageContentStyle = _styledComponents.default.div`
@@ -23,8 +21,6 @@ const MessageContentStyle = _styledComponents.default.div`
   .carbon-content__body {
     margin-top: 0px;
   }
-
-  ${_styledSystem.margin}
 `;
 var _default = MessageContentStyle;
 exports.default = _default;

package/lib/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;