carbon-react 110.5.0 → 110.5.1

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/sidebar/__internal__/sidebar-header/index.d.ts

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface SidebarHeaderProps {
+    /** This component supports children. */
+    children?: React.ReactNode;
+    /** A custom id. */
+    id: string;
+}
+declare const SidebarHeader: ({ children, id }: SidebarHeaderProps) => JSX.Element;
+export default SidebarHeader;

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -1,28 +1,17 @@
-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 from "react";
 import PropTypes from "prop-types";
-import tagComponent from "../../../../__internal__/utils/helpers/tags/tags";
 import SidebarHeaderStyle from "./sidebar-header.style";
 
 const SidebarHeader = ({
-  className,
   children,
-  id,
-  ...props
-}) => /*#__PURE__*/React.createElement(SidebarHeaderStyle, _extends({
-  className: className,
-  id: id
-}, tagComponent("sidebar-header", props)), children);
+  id
+}) => /*#__PURE__*/React.createElement(SidebarHeaderStyle, {
+  id: id,
+  "data-component": "sidebar-header"
+}, children);
 
 SidebarHeader.propTypes = {
-  /** This component supports children. */
-  children: PropTypes.node,
-
-  /** A custom class name. */
-  className: PropTypes.string,
-
-  /** A custom id. */
-  id: PropTypes.string
+  "children": PropTypes.node,
+  "id": PropTypes.string.isRequired
 };
 export default SidebarHeader;

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

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

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

@@ -1 +1,2 @@
-export { default, SidebarContext } from "./sidebar";
+export { default, SidebarContext } from "./sidebar.component";
+export type { SidebarProps } from "./sidebar.component";

package/esm/components/sidebar/index.js

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

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface SidebarContextProps {
+    isInSidebar?: boolean;
+}
+export declare const SidebarContext: React.Context<SidebarContextProps>;
+export interface SidebarProps extends PaddingProps, TagProps {
+    /** Prop to specify the aria-describedby property of the component */
+    "aria-describedby"?: string;
+    /**
+     * Prop to specify the aria-label of the component.
+     * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+     */
+    "aria-label"?: string;
+    /**
+     * Prop to specify the aria-labeledby property of the component
+     * To be used when the title prop is a custom React Node,
+     * or the component is labelled by an internal element other than the title.
+     */
+    "aria-labelledby"?: string;
+    /** Modal content */
+    children?: React.ReactNode;
+    /** Determines if the Esc Key closes the modal */
+    disableEscKey?: boolean;
+    /** Set this prop to false to hide the translucent background when the dialog is open. */
+    enableBackgroundUI?: boolean;
+    /** Node that will be used as sidebar header. */
+    header?: React.ReactNode;
+    /** A custom close event handler */
+    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
+    /** Sets the open state of the modal */
+    open: boolean;
+    /** Sets the position of sidebar, either left or right. */
+    position?: "left" | "right";
+    /** The ARIA role to be applied to the component container */
+    role?: string;
+    /** Sets the size of the sidebar when open. */
+    size?: "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+    /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
+    focusableContainers?: React.MutableRefObject<HTMLElement>[];
+}
+export declare const Sidebar: React.ForwardRefExoticComponent<Pick<SidebarProps, keyof SidebarProps> & React.RefAttributes<HTMLDivElement>>;
+export default Sidebar;