carbon-react 158.42.0 → 158.43.0

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

@@ -49,6 +49,8 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
     role?: string;
     /** Sets the size of the sidebar when open. */
     size?: "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+    /** Enables width animation when the sidebar width changes. */
+    widthAnimation?: boolean;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
     focusableContainers?: RefObject<HTMLElement>[];
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */

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

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as o,useCallback as a}from"react";import n from"../../__internal__/modal/modal.component.js";import{StyledSidebar as i,StyledSidebarContent as l}from"./sidebar.style.js";import s from"../icon-button/icon-button.component.js";import c from"../icon/icon.component.js";import d from"../../__internal__/focus-trap/focus-trap.component.js";import u,{SidebarSubHeader as b}from"./__internal__/sidebar-header/sidebar-header.component.js";import p from"../../__internal__/utils/helpers/guid/index.js";import m from"../../hooks/__internal__/useLocale/useLocale.js";import f from"../../style/utils/filter-styled-system-padding-props.js";import y from"../../__internal__/utils/helpers/tags/tags.js";import O from"../../hooks/__internal__/useModalAria/useModalAria.js";import h from"./__internal__/sidebar.context.js";function j(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){j(e,r,t[r])}))}return e}function g(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const P=t.forwardRef(((t,j)=>{var{"aria-describedby":P,"aria-label":w,"aria-labelledby":v,"data-element":k="sidebar","data-role":F,open:S,bespokeFocusTrap:C,closeButtonDataProps:E,disableAutoFocus:x=!1,disableEscKey:D=!1,enableBackgroundUI:I=!1,header:B,headerVariant:M="light",subHeader:A,position:H="right",size:N="medium",children:z,onCancel:K,role:L="dialog",focusFirstElement:R,focusableContainers:T,focusableSelectors:U,width:V,headerPadding:W={},subHeaderPadding:q={},topModalOverride:G,restoreFocusOnClose:J=!0,className:Q,hidden:X}=t,Y=function(e,r){if(null==e)return{};var t,o,a=function(e,r){if(null==e)return{};var t,o,a={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(t,["aria-describedby","aria-label","aria-labelledby","data-element","data-role","open","bespokeFocusTrap","closeButtonDataProps","disableAutoFocus","disableEscKey","enableBackgroundUI","header","headerVariant","subHeader","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","width","headerPadding","subHeaderPadding","topModalOverride","restoreFocusOnClose","className","hidden"]);const Z=m(),{current:$}=o(p()),{current:ee}=o(p()),re=o(null),te=a((e=>{re.current=e,j&&("object"==typeof j&&(j.current=e),"function"==typeof j&&j(e))}),[j]),oe=O(re,X),ae=()=>K?r(s,g(_({"aria-label":Z.sidebar.ariaLabels.close(),onClick:K},y("close",_({"data-element":"close"},E))),{children:r(c,{type:"close"})})):null,ne=e(i,{"aria-modal":!I&&oe,"aria-describedby":P||ee,"aria-label":w,"aria-labelledby":v||w?v:$,"data-component":"sidebar","data-element":k,"data-role":F,ref:te,position:H,size:N,onCancel:K,role:L,width:V,className:Q,children:[B&&r(u,g(_({headerVariant:M,closeIcon:ae()},W),{id:$,children:B})),A&&r(b,g(_({},q),{id:ee,children:A})),!B&&ae(),r(l,g(_({"data-element":"sidebar-content","data-role":"sidebar-content"},f(Y)),{children:r(h.Provider,{value:{isInSidebar:!0},children:z})}))]});return r(n,{open:S,onCancel:K,disableEscKey:D,enableBackgroundUI:I,topModalOverride:G,restoreFocusOnClose:J,children:I?ne:r(d,{wrapperRef:re,isOpen:S,additionalWrapperRefs:T,focusableSelectors:U,focusFirstElement:R,autoFocus:!x,bespokeTrap:C,children:ne})})}));P.displayName="Sidebar";export{P as Sidebar,P as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import o,{useRef as t,useCallback as a}from"react";import n from"../../__internal__/modal/modal.component.js";import{StyledSidebar as i,StyledSidebarContent as s}from"./sidebar.style.js";import l from"../icon-button/icon-button.component.js";import c from"../icon/icon.component.js";import d from"../../__internal__/focus-trap/focus-trap.component.js";import u,{SidebarSubHeader as p}from"./__internal__/sidebar-header/sidebar-header.component.js";import b from"../../__internal__/utils/helpers/guid/index.js";import m from"../../hooks/__internal__/useLocale/useLocale.js";import f from"../../style/utils/filter-styled-system-padding-props.js";import y from"../../__internal__/utils/helpers/tags/tags.js";import h from"../../hooks/__internal__/useModalAria/useModalAria.js";import O from"./__internal__/sidebar.context.js";import j from"../../hooks/useMediaQuery/useMediaQuery.js";function _(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function g(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),t.forEach((function(r){_(e,r,o[r])}))}return e}function P(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object(r)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})),e}const w=o.forwardRef(((o,_)=>{var{"aria-describedby":w,"aria-label":v,"aria-labelledby":k,"data-element":F="sidebar","data-role":S,open:C,bespokeFocusTrap:E,closeButtonDataProps:A,disableAutoFocus:M=!1,disableEscKey:x=!1,enableBackgroundUI:D=!1,header:I,headerVariant:B="light",subHeader:H,position:N="right",size:z="medium",children:K,onCancel:L,role:R="dialog",focusFirstElement:T,focusableContainers:U,focusableSelectors:V,width:Q,widthAnimation:W=!1,headerPadding:q={},subHeaderPadding:G={},topModalOverride:J,restoreFocusOnClose:X=!0,className:Y,hidden:Z}=o,$=function(e,r){if(null==e)return{};var o,t,a=function(e,r){if(null==e)return{};var o,t,a={},n=Object.keys(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||(a[o]=e[o]);return a}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o])}return a}(o,["aria-describedby","aria-label","aria-labelledby","data-element","data-role","open","bespokeFocusTrap","closeButtonDataProps","disableAutoFocus","disableEscKey","enableBackgroundUI","header","headerVariant","subHeader","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","width","widthAnimation","headerPadding","subHeaderPadding","topModalOverride","restoreFocusOnClose","className","hidden"]);const ee=m(),re=j("screen and (prefers-reduced-motion: no-preference)"),{current:oe}=t(b()),{current:te}=t(b()),ae=t(null),ne=a((e=>{ae.current=e,_&&("object"==typeof _&&(_.current=e),"function"==typeof _&&_(e))}),[_]),ie=h(ae,Z),se=()=>L?r(l,P(g({"aria-label":ee.sidebar.ariaLabels.close(),onClick:L},y("close",g({"data-element":"close"},A))),{children:r(c,{type:"close"})})):null,le=e(i,{"aria-modal":!D&&ie,"aria-describedby":w||te,"aria-label":v,"aria-labelledby":k||v?k:oe,"data-component":"sidebar","data-element":F,"data-role":S,ref:ne,position:N,size:z,onCancel:L,role:R,width:Q,widthAnimation:W&&re,className:Y,children:[I&&r(u,P(g({headerVariant:B,closeIcon:se()},q),{id:oe,children:I})),H&&r(p,P(g({},G),{id:te,children:H})),!I&&se(),r(s,P(g({"data-element":"sidebar-content","data-role":"sidebar-content"},f($)),{children:r(O.Provider,{value:{isInSidebar:!0},children:K})}))]});return r(n,{open:C,onCancel:L,disableEscKey:x,enableBackgroundUI:D,topModalOverride:J,restoreFocusOnClose:X,children:D?le:r(d,{wrapperRef:ae,isOpen:C,additionalWrapperRefs:U,focusableSelectors:V,focusFirstElement:T,autoFocus:!M,bespokeTrap:E,children:le})})}));w.displayName="Sidebar";export{w as Sidebar,w as default};

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

@@ -1,6 +1,6 @@
 import { PaddingProps } from "styled-system";
 import { SidebarProps } from "./sidebar.component";
-type StyledSidebarProps = Pick<SidebarProps, "onCancel" | "position" | "size" | "width">;
+type StyledSidebarProps = Pick<SidebarProps, "onCancel" | "position" | "size" | "width" | "widthAnimation">;
 declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, {
     theme: object;
 } & StyledSidebarProps, "theme">;

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

@@ -1 +1 @@
-import o,{css as i}from"styled-components";import{padding as t}from"styled-system";import e from"../../style/utils/element-sizing.js";import s from"../../style/themes/apply-base-theme.js";import n from"../icon-button/icon-button.style.js";import{SIDEBAR_SIZES_CSS as r}from"./sidebar.config.js";import{StyledForm as d,StyledFormContent as a}from"../form/form.style.js";const l=o.div.attrs(s).withConfig({displayName:"sidebar.style__StyledSidebar",componentId:"sc-de94cc74-0"})([":focus{outline:none;}",""],(({onCancel:o,position:t,size:s,theme:d,width:a})=>i(["background:var(--colorsUtilityYang100);border-radius:1px;bottom:0;position:fixed;display:flex;flex-direction:column;top:0;z-index:",";max-width:100vw;"," "," "," ",""],d.zIndex.fullScreenModal,!a&&s&&i(["width:",";"],r[s]),a&&e({width:a}),t&&i(["box-shadow:var(--boxShadow300);",":0;"],t),o&&i(["> ",":first-of-type{position:absolute;z-index:1;right:25px;top:25px;}"],n)))),p=o.div.withConfig({displayName:"sidebar.style__StyledSidebarContent",componentId:"sc-de94cc74-1"})(["box-sizing:border-box;display:block;overflow-y:auto;flex-grow:1;padding:var(--spacing300) var(--spacing400) var(--spacing400);"," &:has(",".sticky){display:flex;flex-direction:column;overflow-y:hidden;padding:0;",".sticky{","{padding:var(--spacing300) var(--spacing400) var(--spacing400);","}}}"],t,d,d,a,t);export{l as StyledSidebar,p as StyledSidebarContent};
+import i,{css as o}from"styled-components";import{padding as t}from"styled-system";import e from"../../style/utils/element-sizing.js";import s from"../../style/themes/apply-base-theme.js";import n from"../icon-button/icon-button.style.js";import{SIDEBAR_SIZES_CSS as r}from"./sidebar.config.js";import{StyledForm as a,StyledFormContent as d}from"../form/form.style.js";const l=i.div.attrs(s).withConfig({displayName:"sidebar.style__StyledSidebar",componentId:"sc-925b46ee-0"})([":focus{outline:none;}",""],(({onCancel:i,position:t,size:s,theme:a,width:d,widthAnimation:l})=>o(["background:var(--colorsUtilityYang100);border-radius:1px;bottom:0;position:fixed;display:flex;flex-direction:column;top:0;z-index:",";max-width:100vw;"," "," "," "," ",""],a.zIndex.fullScreenModal,!d&&s&&o(["width:",";"],r[s]),d&&e({width:d}),l&&o(["transition:width 0.3s ease;"]),t&&o(["box-shadow:var(--boxShadow300);",":0;"],t),i&&o(["> ",":first-of-type{position:absolute;z-index:1;right:25px;top:25px;}"],n)))),p=i.div.withConfig({displayName:"sidebar.style__StyledSidebarContent",componentId:"sc-925b46ee-1"})(["box-sizing:border-box;display:block;overflow-y:auto;flex-grow:1;padding:var(--spacing300) var(--spacing400) var(--spacing400);"," &:has(",".sticky){display:flex;flex-direction:column;overflow-y:hidden;padding:0;",".sticky{","{padding:var(--spacing300) var(--spacing400) var(--spacing400);","}}}"],t,a,a,d,t);export{l as StyledSidebar,p as StyledSidebarContent};

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

@@ -49,6 +49,8 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
     role?: string;
     /** Sets the size of the sidebar when open. */
     size?: "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+    /** Enables width animation when the sidebar width changes. */
+    widthAnimation?: boolean;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
     focusableContainers?: RefObject<HTMLElement>[];
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../__internal__/modal/modal.component.js"),a=require("./sidebar.style.js"),n=require("../icon-button/icon-button.component.js"),o=require("../icon/icon.component.js"),l=require("../../__internal__/focus-trap/focus-trap.component.js"),s=require("./__internal__/sidebar-header/sidebar-header.component.js"),i=require("../../__internal__/utils/helpers/guid/index.js"),d=require("../../hooks/__internal__/useLocale/useLocale.js"),c=require("../../style/utils/filter-styled-system-padding-props.js"),u=require("../../__internal__/utils/helpers/tags/tags.js"),b=require("../../hooks/__internal__/useModalAria/useModalAria.js"),p=require("./__internal__/sidebar.context.js");function f(e){return e&&e.__esModule?e:{default:e}}function y(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function j(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(r){y(e,r,t[r])}))}return e}function O(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const h=f(r).default.forwardRef(((f,y)=>{var{"aria-describedby":h,"aria-label":_,"aria-labelledby":m,"data-element":g="sidebar","data-role":P,open:S,bespokeFocusTrap:x,closeButtonDataProps:v,disableAutoFocus:w=!1,disableEscKey:q=!1,enableBackgroundUI:k=!1,header:C,headerVariant:F="light",subHeader:E,position:M="right",size:D="medium",children:I,onCancel:R,role:B="dialog",focusFirstElement:H,focusableContainers:A,focusableSelectors:N,width:z,headerPadding:K={},subHeaderPadding:L={},topModalOverride:T,restoreFocusOnClose:U=!0,className:V,hidden:W}=f,G=function(e,r){if(null==e)return{};var t,a,n=function(e,r){if(null==e)return{};var t,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(f,["aria-describedby","aria-label","aria-labelledby","data-element","data-role","open","bespokeFocusTrap","closeButtonDataProps","disableAutoFocus","disableEscKey","enableBackgroundUI","header","headerVariant","subHeader","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","width","headerPadding","subHeaderPadding","topModalOverride","restoreFocusOnClose","className","hidden"]);const J=d.default(),{current:Q}=r.useRef(i.default()),{current:X}=r.useRef(i.default()),Y=r.useRef(null),Z=r.useCallback((e=>{Y.current=e,y&&("object"==typeof y&&(y.current=e),"function"==typeof y&&y(e))}),[y]),$=b.default(Y,W),ee=()=>R?e.jsx(n.default,O(j({"aria-label":J.sidebar.ariaLabels.close(),onClick:R},u.default("close",j({"data-element":"close"},v))),{children:e.jsx(o.default,{type:"close"})})):null,re=e.jsxs(a.StyledSidebar,{"aria-modal":!k&&$,"aria-describedby":h||X,"aria-label":_,"aria-labelledby":m||_?m:Q,"data-component":"sidebar","data-element":g,"data-role":P,ref:Z,position:M,size:D,onCancel:R,role:B,width:z,className:V,children:[C&&e.jsx(s.default,O(j({headerVariant:F,closeIcon:ee()},K),{id:Q,children:C})),E&&e.jsx(s.SidebarSubHeader,O(j({},L),{id:X,children:E})),!C&&ee(),e.jsx(a.StyledSidebarContent,O(j({"data-element":"sidebar-content","data-role":"sidebar-content"},c.default(G)),{children:e.jsx(p.default.Provider,{value:{isInSidebar:!0},children:I})}))]});return e.jsx(t.default,{open:S,onCancel:R,disableEscKey:q,enableBackgroundUI:k,topModalOverride:T,restoreFocusOnClose:U,children:k?re:e.jsx(l.default,{wrapperRef:Y,isOpen:S,additionalWrapperRefs:A,focusableSelectors:N,focusFirstElement:H,autoFocus:!w,bespokeTrap:x,children:re})})}));h.displayName="Sidebar",exports.Sidebar=h,exports.default=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../__internal__/modal/modal.component.js"),a=require("./sidebar.style.js"),n=require("../icon-button/icon-button.component.js"),o=require("../icon/icon.component.js"),i=require("../../__internal__/focus-trap/focus-trap.component.js"),s=require("./__internal__/sidebar-header/sidebar-header.component.js"),l=require("../../__internal__/utils/helpers/guid/index.js"),d=require("../../hooks/__internal__/useLocale/useLocale.js"),u=require("../../style/utils/filter-styled-system-padding-props.js"),c=require("../../__internal__/utils/helpers/tags/tags.js"),b=require("../../hooks/__internal__/useModalAria/useModalAria.js"),p=require("./__internal__/sidebar.context.js"),f=require("../../hooks/useMediaQuery/useMediaQuery.js");function y(e){return e&&e.__esModule?e:{default:e}}function j(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function h(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(r){j(e,r,t[r])}))}return e}function m(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const O=y(r).default.forwardRef(((y,j)=>{var{"aria-describedby":O,"aria-label":_,"aria-labelledby":g,"data-element":P="sidebar","data-role":w,open:S,bespokeFocusTrap:x,closeButtonDataProps:v,disableAutoFocus:q=!1,disableEscKey:k=!1,enableBackgroundUI:C=!1,header:F,headerVariant:E="light",subHeader:M,position:A="right",size:D="medium",children:I,onCancel:R,role:B="dialog",focusFirstElement:H,focusableContainers:N,focusableSelectors:z,width:K,widthAnimation:L=!1,headerPadding:T={},subHeaderPadding:U={},topModalOverride:V,restoreFocusOnClose:Q=!0,className:W,hidden:G}=y,J=function(e,r){if(null==e)return{};var t,a,n=function(e,r){if(null==e)return{};var t,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(y,["aria-describedby","aria-label","aria-labelledby","data-element","data-role","open","bespokeFocusTrap","closeButtonDataProps","disableAutoFocus","disableEscKey","enableBackgroundUI","header","headerVariant","subHeader","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","width","widthAnimation","headerPadding","subHeaderPadding","topModalOverride","restoreFocusOnClose","className","hidden"]);const X=d.default(),Y=f.default("screen and (prefers-reduced-motion: no-preference)"),{current:Z}=r.useRef(l.default()),{current:$}=r.useRef(l.default()),ee=r.useRef(null),re=r.useCallback((e=>{ee.current=e,j&&("object"==typeof j&&(j.current=e),"function"==typeof j&&j(e))}),[j]),te=b.default(ee,G),ae=()=>R?e.jsx(n.default,m(h({"aria-label":X.sidebar.ariaLabels.close(),onClick:R},c.default("close",h({"data-element":"close"},v))),{children:e.jsx(o.default,{type:"close"})})):null,ne=e.jsxs(a.StyledSidebar,{"aria-modal":!C&&te,"aria-describedby":O||$,"aria-label":_,"aria-labelledby":g||_?g:Z,"data-component":"sidebar","data-element":P,"data-role":w,ref:re,position:A,size:D,onCancel:R,role:B,width:K,widthAnimation:L&&Y,className:W,children:[F&&e.jsx(s.default,m(h({headerVariant:E,closeIcon:ae()},T),{id:Z,children:F})),M&&e.jsx(s.SidebarSubHeader,m(h({},U),{id:$,children:M})),!F&&ae(),e.jsx(a.StyledSidebarContent,m(h({"data-element":"sidebar-content","data-role":"sidebar-content"},u.default(J)),{children:e.jsx(p.default.Provider,{value:{isInSidebar:!0},children:I})}))]});return e.jsx(t.default,{open:S,onCancel:R,disableEscKey:k,enableBackgroundUI:C,topModalOverride:V,restoreFocusOnClose:Q,children:C?ne:e.jsx(i.default,{wrapperRef:ee,isOpen:S,additionalWrapperRefs:N,focusableSelectors:z,focusFirstElement:H,autoFocus:!q,bespokeTrap:x,children:ne})})}));O.displayName="Sidebar",exports.Sidebar=O,exports.default=O;

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

@@ -1,6 +1,6 @@
 import { PaddingProps } from "styled-system";
 import { SidebarProps } from "./sidebar.component";
-type StyledSidebarProps = Pick<SidebarProps, "onCancel" | "position" | "size" | "width">;
+type StyledSidebarProps = Pick<SidebarProps, "onCancel" | "position" | "size" | "width" | "widthAnimation">;
 declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, {
     theme: object;
 } & StyledSidebarProps, "theme">;

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

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("styled-system"),i=require("../../style/utils/element-sizing.js"),o=require("../../style/themes/apply-base-theme.js"),s=require("../icon-button/icon-button.style.js"),d=require("./sidebar.config.js"),r=require("../form/form.style.js");function n(e){return e&&e.__esModule?e:{default:e}}var a=n(e);const l=a.default.div.attrs(o.default).withConfig({displayName:"sidebar.style__StyledSidebar",componentId:"sc-de94cc74-0"})([":focus{outline:none;}",""],(({onCancel:t,position:o,size:r,theme:n,width:a})=>e.css(["background:var(--colorsUtilityYang100);border-radius:1px;bottom:0;position:fixed;display:flex;flex-direction:column;top:0;z-index:",";max-width:100vw;"," "," "," ",""],n.zIndex.fullScreenModal,!a&&r&&e.css(["width:",";"],d.SIDEBAR_SIZES_CSS[r]),a&&i.default({width:a}),o&&e.css(["box-shadow:var(--boxShadow300);",":0;"],o),t&&e.css(["> ",":first-of-type{position:absolute;z-index:1;right:25px;top:25px;}"],s.default)))),c=a.default.div.withConfig({displayName:"sidebar.style__StyledSidebarContent",componentId:"sc-de94cc74-1"})(["box-sizing:border-box;display:block;overflow-y:auto;flex-grow:1;padding:var(--spacing300) var(--spacing400) var(--spacing400);"," &:has(",".sticky){display:flex;flex-direction:column;overflow-y:hidden;padding:0;",".sticky{","{padding:var(--spacing300) var(--spacing400) var(--spacing400);","}}}"],t.padding,r.StyledForm,r.StyledForm,r.StyledFormContent,t.padding);exports.StyledSidebar=l,exports.StyledSidebarContent=c;
+"use strict";var e=require("styled-components"),i=require("styled-system"),t=require("../../style/utils/element-sizing.js"),s=require("../../style/themes/apply-base-theme.js"),o=require("../icon-button/icon-button.style.js"),d=require("./sidebar.config.js"),n=require("../form/form.style.js");function a(e){return e&&e.__esModule?e:{default:e}}var r=a(e);const l=r.default.div.attrs(s.default).withConfig({displayName:"sidebar.style__StyledSidebar",componentId:"sc-925b46ee-0"})([":focus{outline:none;}",""],(({onCancel:i,position:s,size:n,theme:a,width:r,widthAnimation:l})=>e.css(["background:var(--colorsUtilityYang100);border-radius:1px;bottom:0;position:fixed;display:flex;flex-direction:column;top:0;z-index:",";max-width:100vw;"," "," "," "," ",""],a.zIndex.fullScreenModal,!r&&n&&e.css(["width:",";"],d.SIDEBAR_SIZES_CSS[n]),r&&t.default({width:r}),l&&e.css(["transition:width 0.3s ease;"]),s&&e.css(["box-shadow:var(--boxShadow300);",":0;"],s),i&&e.css(["> ",":first-of-type{position:absolute;z-index:1;right:25px;top:25px;}"],o.default)))),c=r.default.div.withConfig({displayName:"sidebar.style__StyledSidebarContent",componentId:"sc-925b46ee-1"})(["box-sizing:border-box;display:block;overflow-y:auto;flex-grow:1;padding:var(--spacing300) var(--spacing400) var(--spacing400);"," &:has(",".sticky){display:flex;flex-direction:column;overflow-y:hidden;padding:0;",".sticky{","{padding:var(--spacing300) var(--spacing400) var(--spacing400);","}}}"],i.padding,n.StyledForm,n.StyledForm,n.StyledFormContent,i.padding);exports.StyledSidebar=l,exports.StyledSidebarContent=c;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "158.42.0",
+  "version": "158.43.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",