carbon-react 151.3.0 → 151.4.0

package/esm/components/adaptive-sidebar/__internal__/utils.d.ts

@@ -0,0 +1,6 @@
+import { AdaptiveSidebarProps } from "../adaptive-sidebar.component";
+export declare const getColors: (backgroundColor: AdaptiveSidebarProps["backgroundColor"]) => {
+    "background-color": string;
+    color: string;
+};
+export declare const kebabToCamelCase: (str: string) => string;

package/esm/components/adaptive-sidebar/__internal__/utils.js

@@ -0,0 +1,23 @@
+export const getColors = backgroundColor => {
+  switch (backgroundColor) {
+    case "app":
+      return {
+        "background-color": "var(--colorsUtilityMajor025)",
+        color: "var(--colorsUtilityYin090)"
+      };
+    case "black":
+      return {
+        "background-color": "var(--colorsUtilityYin100)",
+        color: "var(--colorsUtilityYang100)"
+      };
+    case "white":
+    default:
+      return {
+        "background-color": "var(--colorsUtilityYang100)",
+        color: "var(--colorsUtilityYin090)"
+      };
+  }
+};
+export const kebabToCamelCase = str => {
+  return str.replace(/-./g, match => match.charAt(1).toUpperCase());
+};

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { PaddingProps, MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface AdaptiveSidebarProps extends MarginProps, PaddingProps, Omit<TagProps, "data-component"> {
+    /** The breakpoint (in pixels) at which the sidebar will convert to a dialog-based sidebar */
+    adaptiveBreakpoint?: number;
+    /** The time in milliseconds for the sidebar to animate */
+    animationTimeout?: number;
+    /** The background color of the sidebar */
+    backgroundColor?: "white" | "black" | "app";
+    /** The color to use for the left-hand border of the sidebar. Should be a design token e.g. `--colorsUtilityYang100` */
+    borderColor?: string | "none";
+    /** The content of the sidebar */
+    children?: React.ReactNode;
+    /** The height of the sidebar, relative to the wrapping component */
+    height?: string;
+    /** Whether the sidebar is open or closed */
+    open: boolean;
+    /** Whether to render the sidebar as a modal component instead of as an inline sidebar */
+    renderAsModal?: boolean;
+    /** The width of the sidebar */
+    width?: string;
+}
+export declare const AdaptiveSidebar: ({ adaptiveBreakpoint, backgroundColor, borderColor, children, height, open, renderAsModal, width, ...props }: AdaptiveSidebarProps) => React.JSX.Element | null;
+export default AdaptiveSidebar;

package/esm/components/adaptive-sidebar/adaptive-sidebar.component.js

@@ -0,0 +1,56 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useEffect, useRef } from "react";
+import { getColors, kebabToCamelCase } from "./__internal__/utils";
+import Box from "../box";
+import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
+import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
+import { StyledAdaptiveSidebar, StyledSidebar } from "./adaptive-sidebar.style";
+export const AdaptiveSidebar = ({
+  adaptiveBreakpoint = 768,
+  backgroundColor = "white",
+  borderColor = "none",
+  children,
+  height = "100%",
+  open,
+  renderAsModal = false,
+  width = "320px",
+  ...props
+}) => {
+  const largeScreen = useIsAboveBreakpoint(adaptiveBreakpoint);
+  const adaptiveSidebarRef = useRef(null);
+  const colours = Object.entries(getColors(backgroundColor)).reduce((acc, [key, value]) => {
+    acc[kebabToCamelCase(key)] = value;
+    return acc;
+  }, {});
+  useEffect(() => {
+    /* istanbul ignore next */
+    if (adaptiveSidebarRef.current) {
+      adaptiveSidebarRef.current.focus();
+    }
+  }, [open]);
+  if (renderAsModal || !largeScreen) {
+    return /*#__PURE__*/React.createElement(StyledSidebar, {
+      backgroundColor: backgroundColor,
+      open: open,
+      p: 0,
+      ref: adaptiveSidebarRef
+    }, /*#__PURE__*/React.createElement(Box, _extends({
+      height: "100%",
+      "data-role": "adaptive-sidebar-content-wrapper"
+    }, colours), children));
+  }
+  return open ? /*#__PURE__*/React.createElement(StyledAdaptiveSidebar, _extends({
+    backgroundColor: backgroundColor,
+    borderColor: borderColor === "none" ? undefined : borderColor,
+    "data-element": "adaptive-sidebar",
+    "data-role": "adaptive-sidebar",
+    height: height,
+    ref: adaptiveSidebarRef,
+    role: "region",
+    tabIndex: -1,
+    width: width
+  }, filterStyledSystemMarginProps(props), filterStyledSystemPaddingProps(props)), /*#__PURE__*/React.createElement(Box, {
+    "data-role": "adaptive-sidebar-content-wrapper"
+  }, children)) : null;
+};
+export default AdaptiveSidebar;

package/esm/components/adaptive-sidebar/adaptive-sidebar.style.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { MarginProps, PaddingProps } from "styled-system";
+import { SidebarProps } from "../sidebar";
+import { AdaptiveSidebarProps } from "./adaptive-sidebar.component";
+declare const StyledAdaptiveSidebar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, Pick<AdaptiveSidebarProps, "width" | "backgroundColor" | "height" | "borderColor"> & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    tabIndex: number;
+}, never>;
+interface StyledSidebarProps extends SidebarProps {
+    backgroundColor: "app" | "black" | "white";
+}
+declare const StyledSidebar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<SidebarProps & import("react").RefAttributes<HTMLDivElement>>, any, StyledSidebarProps, never>;
+export { StyledAdaptiveSidebar, StyledSidebar };

package/esm/components/adaptive-sidebar/adaptive-sidebar.style.js

@@ -0,0 +1,35 @@
+import styled, { css } from "styled-components";
+import { margin, padding } from "styled-system";
+import Box from "../box";
+import Sidebar from "../sidebar";
+import { getColors } from "./__internal__/utils";
+const StyledAdaptiveSidebar = styled(Box)`
+  ${({
+  backgroundColor,
+  borderColor,
+  height,
+  width
+}) => css`
+    ${getColors(backgroundColor)}
+    ${borderColor && css`
+      border-left: 1px solid var(${borderColor});
+    `}
+    max-height: ${height};
+    max-width: ${width};
+    min-width: ${width};
+    overflow-y: auto;
+
+    ${margin}
+    ${padding}
+  `};
+`;
+const StyledSidebar = styled(Sidebar)`
+  ${({
+  backgroundColor
+}) => css`
+    div[data-element="sidebar-content"] {
+      ${getColors(backgroundColor)}
+    }
+  `}
+`;
+export { StyledAdaptiveSidebar, StyledSidebar };

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

@@ -0,0 +1,2 @@
+export { default } from "./adaptive-sidebar.component";
+export type { AdaptiveSidebarProps } from "./adaptive-sidebar.component";

package/esm/components/adaptive-sidebar/index.js

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

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

@@ -51,6 +51,8 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     "aria-hidden"?: "true" | "false";
     /** @private @internal @ignore */
     "data-component"?: string;
+    /** @private @internal @ignore */
+    tabIndex?: number;
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export default Box;

package/esm/components/box/box.component.js

@@ -5,6 +5,7 @@ import StyledBox from "./box.style";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 export const Box = /*#__PURE__*/React.forwardRef(({
   "data-component": dataComponent,
+  tabIndex,
   as,
   id,
   role,
@@ -63,7 +64,8 @@ export const Box = /*#__PURE__*/React.forwardRef(({
     borderRadius: borderRadius,
     "aria-hidden": ariaHidden
   }, tagComponent(dataComponent, rest), filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest), filterStyledSystemFlexboxProps(rest), filterStyledSystemGridProps(rest), filterStyledSystemLayoutProps(rest), {
-    cssProps: cssProps
+    cssProps: cssProps,
+    tabIndex: tabIndex
   }), children);
 });
 Box.displayName = "Box";

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

@@ -52,6 +52,12 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
     focusableSelectors?: string;
     /** Padding to be set on the Sidebar header */
     headerPadding?: PaddingProps;
+    /**
+     * @private
+     * @ignore
+     * @internal
+     * Sets className for component. INTERNAL USE ONLY. */
+    className?: string;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;

package/esm/components/sidebar/sidebar.component.js

@@ -38,6 +38,7 @@ export const Sidebar = /*#__PURE__*/React.forwardRef(({
   headerPadding = {},
   topModalOverride,
   restoreFocusOnClose = true,
+  className,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -75,7 +76,8 @@ export const Sidebar = /*#__PURE__*/React.forwardRef(({
     size: size,
     onCancel: onCancel,
     role: role,
-    width: width
+    width: width,
+    className: className
   }, header && /*#__PURE__*/React.createElement(SidebarHeader, _extends({
     closeIcon: closeIcon()
   }, headerPadding, {

package/lib/components/adaptive-sidebar/__internal__/utils.d.ts

@@ -0,0 +1,6 @@
+import { AdaptiveSidebarProps } from "../adaptive-sidebar.component";
+export declare const getColors: (backgroundColor: AdaptiveSidebarProps["backgroundColor"]) => {
+    "background-color": string;
+    color: string;
+};
+export declare const kebabToCamelCase: (str: string) => string;

package/lib/components/adaptive-sidebar/__internal__/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.kebabToCamelCase = exports.getColors = void 0;
+const getColors = backgroundColor => {
+  switch (backgroundColor) {
+    case "app":
+      return {
+        "background-color": "var(--colorsUtilityMajor025)",
+        color: "var(--colorsUtilityYin090)"
+      };
+    case "black":
+      return {
+        "background-color": "var(--colorsUtilityYin100)",
+        color: "var(--colorsUtilityYang100)"
+      };
+    case "white":
+    default:
+      return {
+        "background-color": "var(--colorsUtilityYang100)",
+        color: "var(--colorsUtilityYin090)"
+      };
+  }
+};
+exports.getColors = getColors;
+const kebabToCamelCase = str => {
+  return str.replace(/-./g, match => match.charAt(1).toUpperCase());
+};
+exports.kebabToCamelCase = kebabToCamelCase;

package/lib/components/adaptive-sidebar/adaptive-sidebar.component.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { PaddingProps, MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface AdaptiveSidebarProps extends MarginProps, PaddingProps, Omit<TagProps, "data-component"> {
+    /** The breakpoint (in pixels) at which the sidebar will convert to a dialog-based sidebar */
+    adaptiveBreakpoint?: number;
+    /** The time in milliseconds for the sidebar to animate */
+    animationTimeout?: number;
+    /** The background color of the sidebar */
+    backgroundColor?: "white" | "black" | "app";
+    /** The color to use for the left-hand border of the sidebar. Should be a design token e.g. `--colorsUtilityYang100` */
+    borderColor?: string | "none";
+    /** The content of the sidebar */
+    children?: React.ReactNode;
+    /** The height of the sidebar, relative to the wrapping component */
+    height?: string;
+    /** Whether the sidebar is open or closed */
+    open: boolean;
+    /** Whether to render the sidebar as a modal component instead of as an inline sidebar */
+    renderAsModal?: boolean;
+    /** The width of the sidebar */
+    width?: string;
+}
+export declare const AdaptiveSidebar: ({ adaptiveBreakpoint, backgroundColor, borderColor, children, height, open, renderAsModal, width, ...props }: AdaptiveSidebarProps) => React.JSX.Element | null;
+export default AdaptiveSidebar;

package/lib/components/adaptive-sidebar/adaptive-sidebar.component.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AdaptiveSidebar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("./__internal__/utils");
+var _box = _interopRequireDefault(require("../box"));
+var _utils2 = require("../../style/utils");
+var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
+var _adaptiveSidebar = require("./adaptive-sidebar.style");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const AdaptiveSidebar = ({
+  adaptiveBreakpoint = 768,
+  backgroundColor = "white",
+  borderColor = "none",
+  children,
+  height = "100%",
+  open,
+  renderAsModal = false,
+  width = "320px",
+  ...props
+}) => {
+  const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveBreakpoint);
+  const adaptiveSidebarRef = (0, _react.useRef)(null);
+  const colours = Object.entries((0, _utils.getColors)(backgroundColor)).reduce((acc, [key, value]) => {
+    acc[(0, _utils.kebabToCamelCase)(key)] = value;
+    return acc;
+  }, {});
+  (0, _react.useEffect)(() => {
+    /* istanbul ignore next */
+    if (adaptiveSidebarRef.current) {
+      adaptiveSidebarRef.current.focus();
+    }
+  }, [open]);
+  if (renderAsModal || !largeScreen) {
+    return /*#__PURE__*/_react.default.createElement(_adaptiveSidebar.StyledSidebar, {
+      backgroundColor: backgroundColor,
+      open: open,
+      p: 0,
+      ref: adaptiveSidebarRef
+    }, /*#__PURE__*/_react.default.createElement(_box.default, _extends({
+      height: "100%",
+      "data-role": "adaptive-sidebar-content-wrapper"
+    }, colours), children));
+  }
+  return open ? /*#__PURE__*/_react.default.createElement(_adaptiveSidebar.StyledAdaptiveSidebar, _extends({
+    backgroundColor: backgroundColor,
+    borderColor: borderColor === "none" ? undefined : borderColor,
+    "data-element": "adaptive-sidebar",
+    "data-role": "adaptive-sidebar",
+    height: height,
+    ref: adaptiveSidebarRef,
+    role: "region",
+    tabIndex: -1,
+    width: width
+  }, (0, _utils2.filterStyledSystemMarginProps)(props), (0, _utils2.filterStyledSystemPaddingProps)(props)), /*#__PURE__*/_react.default.createElement(_box.default, {
+    "data-role": "adaptive-sidebar-content-wrapper"
+  }, children)) : null;
+};
+exports.AdaptiveSidebar = AdaptiveSidebar;
+var _default = exports.default = AdaptiveSidebar;

package/lib/components/adaptive-sidebar/adaptive-sidebar.style.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { MarginProps, PaddingProps } from "styled-system";
+import { SidebarProps } from "../sidebar";
+import { AdaptiveSidebarProps } from "./adaptive-sidebar.component";
+declare const StyledAdaptiveSidebar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, Pick<AdaptiveSidebarProps, "width" | "backgroundColor" | "height" | "borderColor"> & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    tabIndex: number;
+}, never>;
+interface StyledSidebarProps extends SidebarProps {
+    backgroundColor: "app" | "black" | "white";
+}
+declare const StyledSidebar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<SidebarProps & import("react").RefAttributes<HTMLDivElement>>, any, StyledSidebarProps, never>;
+export { StyledAdaptiveSidebar, StyledSidebar };

package/lib/components/adaptive-sidebar/adaptive-sidebar.style.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSidebar = exports.StyledAdaptiveSidebar = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledSystem = require("styled-system");
+var _box = _interopRequireDefault(require("../box"));
+var _sidebar = _interopRequireDefault(require("../sidebar"));
+var _utils = require("./__internal__/utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledAdaptiveSidebar = exports.StyledAdaptiveSidebar = (0, _styledComponents.default)(_box.default)`
+  ${({
+  backgroundColor,
+  borderColor,
+  height,
+  width
+}) => (0, _styledComponents.css)`
+    ${(0, _utils.getColors)(backgroundColor)}
+    ${borderColor && (0, _styledComponents.css)`
+      border-left: 1px solid var(${borderColor});
+    `}
+    max-height: ${height};
+    max-width: ${width};
+    min-width: ${width};
+    overflow-y: auto;
+
+    ${_styledSystem.margin}
+    ${_styledSystem.padding}
+  `};
+`;
+const StyledSidebar = exports.StyledSidebar = (0, _styledComponents.default)(_sidebar.default)`
+  ${({
+  backgroundColor
+}) => (0, _styledComponents.css)`
+    div[data-element="sidebar-content"] {
+      ${(0, _utils.getColors)(backgroundColor)}
+    }
+  `}
+`;

package/lib/components/adaptive-sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./adaptive-sidebar.component";
+export type { AdaptiveSidebarProps } from "./adaptive-sidebar.component";

package/lib/components/adaptive-sidebar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _adaptiveSidebar.default;
+  }
+});
+var _adaptiveSidebar = _interopRequireDefault(require("./adaptive-sidebar.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/adaptive-sidebar/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/components/adaptive-sidebar/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/box/box.component.d.ts

@@ -51,6 +51,8 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     "aria-hidden"?: "true" | "false";
     /** @private @internal @ignore */
     "data-component"?: string;
+    /** @private @internal @ignore */
+    tabIndex?: number;
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export default Box;

package/lib/components/box/box.component.js

@@ -12,6 +12,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   "data-component": dataComponent,
+  tabIndex,
   as,
   id,
   role,
@@ -70,7 +71,8 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
     borderRadius: borderRadius,
     "aria-hidden": ariaHidden
   }, (0, _tags.default)(dataComponent, rest), (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest), (0, _utils.filterStyledSystemFlexboxProps)(rest), (0, _utils.filterStyledSystemGridProps)(rest), (0, _utils.filterStyledSystemLayoutProps)(rest), {
-    cssProps: cssProps
+    cssProps: cssProps,
+    tabIndex: tabIndex
   }), children);
 });
 Box.displayName = "Box";

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

@@ -52,6 +52,12 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
     focusableSelectors?: string;
     /** Padding to be set on the Sidebar header */
     headerPadding?: PaddingProps;
+    /**
+     * @private
+     * @ignore
+     * @internal
+     * Sets className for component. INTERNAL USE ONLY. */
+    className?: string;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;

package/lib/components/sidebar/sidebar.component.js

@@ -46,6 +46,7 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   headerPadding = {},
   topModalOverride,
   restoreFocusOnClose = true,
+  className,
   ...rest
 }, ref) => {
   const locale = (0, _useLocale.default)();
@@ -83,7 +84,8 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     size: size,
     onCancel: onCancel,
     role: role,
-    width: width
+    width: width,
+    className: className
   }, header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, _extends({
     closeIcon: closeIcon()
   }, headerPadding, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "151.3.0",
+  "version": "151.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -148,8 +148,10 @@
     "jsdom-testing-mocks": "^1.11.0",
     "lint-staged": "^11.2.6",
     "mockdate": "^2.0.5",
+    "monocart-coverage-reports": "^2.12.2",
     "nock": "^13.3.8",
     "node-fetch": "^3.3.2",
+    "nyc": "^17.1.0",
     "prettier": "~3.3.3",
     "raf": "^3.4.1",
     "react": "^18.3.1",
@@ -185,8 +187,6 @@
     "invariant": "^2.2.4",
     "lexical": "^0.21.0",
     "lodash": "^4.17.21",
-    "monocart-coverage-reports": "^2.11.4",
-    "nyc": "^17.1.0",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
     "react-day-picker": "^9.3.2",