carbon-react 158.14.8 → 158.14.9

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

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as t}from"react";import{getColors as o,kebabToCamelCase as n}from"./__internal__/utils.js";import{Box as a}from"../box/box.component.js";import i from"../../style/utils/filter-styled-system-padding-props.js";import l from"../../style/utils/filter-styled-system-margin-props.js";import d from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import{StyledSidebar as s,StyledAdaptiveSidebar as c}from"./adaptive-sidebar.style.js";function b(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(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){b(e,r,t[r])}))}return e}function u(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 f=b=>{var{adaptiveBreakpoint:f=768,backgroundColor:m="white",borderColor:y="none",children:O,height:h="100%",hidden:v=!1,open:g,renderAsModal:j=!1,width:w="320px",restoreFocusOnClose:k=!1,"aria-label":P,"aria-labelledby":C}=b,S=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(b,["adaptiveBreakpoint","backgroundColor","borderColor","children","height","hidden","open","renderAsModal","width","restoreFocusOnClose","aria-label","aria-labelledby"]);const x=d(f),_=j||!x,A=r(null),E=Object.entries(o(m)).reduce(((e,[r,t])=>(e[n(r)]=t,e)),{});return t((()=>{A.current&&A.current.focus()}),[g]),t((()=>{v&&g&&document.querySelectorAll("[inert]").forEach((e=>{e.removeAttribute("inert")}))}),[v,g]),t((()=>{_&&document.dispatchEvent(new CustomEvent("adaptiveSidebarModalFocusIn",{bubbles:!0,detail:{source:"adaptiveSidebarModal"}}))}),[_]),_?e(s,{backgroundColor:m,className:"adaptive-sidebar-modal-view","data-role":"adaptive-sidebar-modal-view",enableBackgroundUI:g&&v,hidden:v,restoreFocusOnClose:k,open:g,p:0,ref:A,"aria-label":P,"aria-labelledby":C,children:e(a,u(p({"data-role":"adaptive-sidebar-content-wrapper",height:"100%"},E),{children:O}))}):g?e(c,u(p({backgroundColor:m,borderColor:"none"===y?void 0:y,"data-element":"adaptive-sidebar","data-role":"adaptive-sidebar",height:h,hidden:v,ref:A,role:"region",tabIndex:-1,width:w},l(S),i(S)),{children:e(a,{"data-role":"adaptive-sidebar-content-wrapper",children:O})})):null};export{f as AdaptiveSidebar,f as default};
+import{jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as t}from"react";import{getColors as o,kebabToCamelCase as n}from"./__internal__/utils.js";import{Box as a}from"../box/box.component.js";import i from"../../style/utils/filter-styled-system-padding-props.js";import l from"../../style/utils/filter-styled-system-margin-props.js";import d from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import{StyledSidebar as s,StyledAdaptiveSidebar as c}from"./adaptive-sidebar.style.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function b(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){p(e,r,t[r])}))}return e}function u(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 f=p=>{var{adaptiveBreakpoint:f=768,backgroundColor:m="white",borderColor:y="none",children:O,height:h="100%",hidden:v=!1,open:g,renderAsModal:j=!1,width:w="320px",restoreFocusOnClose:k=!1,"aria-label":P,"aria-labelledby":C}=p,x=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(p,["adaptiveBreakpoint","backgroundColor","borderColor","children","height","hidden","open","renderAsModal","width","restoreFocusOnClose","aria-label","aria-labelledby"]);const S=d(f),_=j||!S,I=r(null),B=Object.entries(o(m)).reduce(((e,[r,t])=>(e[n(r)]=t,e)),{});return t((()=>{I.current&&I.current.focus()}),[g]),t((()=>{_&&document.dispatchEvent(new CustomEvent("adaptiveSidebarModalFocusIn",{bubbles:!0,detail:{source:"adaptiveSidebarModal"}}))}),[_]),_?e(s,{backgroundColor:m,className:"adaptive-sidebar-modal-view","data-role":"adaptive-sidebar-modal-view",enableBackgroundUI:g&&v,hidden:v,restoreFocusOnClose:k,open:g,p:0,ref:I,"aria-label":P,"aria-labelledby":C,children:e(a,u(b({"data-role":"adaptive-sidebar-content-wrapper",height:"100%"},B),{children:O}))}):g?e(c,u(b({backgroundColor:m,borderColor:"none"===y?void 0:y,"data-element":"adaptive-sidebar","data-role":"adaptive-sidebar",height:h,hidden:v,ref:I,role:"region",tabIndex:-1,width:w},l(x),i(x)),{children:e(a,{"data-role":"adaptive-sidebar-content-wrapper",children:O})})):null};export{f as AdaptiveSidebar,f as default};

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

@@ -63,6 +63,8 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
      * @internal
      * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
+    /** @private @ignore Whether the `Sidebar` is hidden from view when rendered in an `AdaptiveSidebar`. */
+    hidden?: boolean;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;

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}=t,X=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"]);const Y=m(),{current:Z}=o(p()),{current:$}=o(p()),ee=o(null),re=a((e=>{ee.current=e,j&&("object"==typeof j&&(j.current=e),"function"==typeof j&&j(e))}),[j]),te=O(ee),oe=()=>K?r(s,g(_({"aria-label":Y.sidebar.ariaLabels.close(),onClick:K},y("close",_({"data-element":"close"},E))),{children:r(c,{type:"close"})})):null,ae=e(i,{"aria-modal":!I&&te,"aria-describedby":P||$,"aria-label":w,"aria-labelledby":v||w?v:Z,"data-component":"sidebar","data-element":k,"data-role":F,ref:re,position:H,size:N,onCancel:K,role:L,width:V,className:Q,children:[B&&r(u,g(_({headerVariant:M,closeIcon:oe()},W),{id:Z,children:B})),A&&r(b,g(_({},q),{id:$,children:A})),!B&&oe(),r(l,g(_({"data-element":"sidebar-content","data-role":"sidebar-content"},f(X)),{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?ae:r(d,{wrapperRef:ee,isOpen:S,additionalWrapperRefs:T,focusableSelectors:U,focusFirstElement:R,autoFocus:!x,bespokeTrap:C,children:ae})})}));P.displayName="Sidebar";export{P as Sidebar,P as default};
+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};

package/esm/global.d.ts

@@ -18,3 +18,9 @@ declare global {
     };
   }
 }
+
+declare module "react" {
+  interface HTMLAttributes {
+    inert?: "" | "true" | string;
+  }
+}

package/esm/hooks/__internal__/useModalAria/useModalAria.d.ts

@@ -1 +1 @@
-export default function useModalAria(containerRef: React.RefObject<HTMLDivElement>): boolean | undefined;
+export default function useModalAria(containerRef: React.RefObject<HTMLDivElement>, hidden?: boolean): boolean | undefined;

package/esm/hooks/__internal__/useModalAria/useModalAria.js

@@ -1 +1 @@
-import{useContext as t,useEffect as e}from"react";import n from"../../../components/carbon-provider/__internal__/top-modal.context.js";function r(r){const{topModal:i}=t(n),a=null==i?void 0:i.contains(r.current);return e((()=>{const t=[],e=n=>{"true"!==n.dataset.notInert&&(n.contains(i)?n!==i&&Array.from(n.children).forEach((t=>{t instanceof HTMLElement&&e(t)})):n.hasAttribute("data-modal-hidden")||(t.push({element:n,"aria-hidden":n.getAttribute("aria-hidden"),inert:n.getAttribute("inert")}),n.contains(document.activeElement)&&document.activeElement instanceof HTMLElement&&document.activeElement.blur(),n.setAttribute("aria-hidden","true"),n.setAttribute("inert",""),n.setAttribute("data-modal-hidden","true")))};return a&&e(document.body),()=>t.forEach((({element:t,"aria-hidden":e,inert:n})=>{null===e?t.removeAttribute("aria-hidden"):t.setAttribute("aria-hidden",e),null===n?t.removeAttribute("inert"):t.setAttribute("inert",n),t.removeAttribute("data-modal-hidden")}))}),[i,a]),a}export{r as default};
+import{useContext as t,useEffect as e}from"react";import n from"../../../components/carbon-provider/__internal__/top-modal.context.js";function r(r,i){const{topModal:a}=t(n),o=null==a?void 0:a.contains(r.current);return e((()=>{const t=[],e=n=>{i||"true"===n.dataset.notInert||(n.contains(a)?n!==a&&Array.from(n.children).forEach((t=>{t instanceof HTMLElement&&e(t)})):n.hasAttribute("data-modal-hidden")||(t.push({element:n,"aria-hidden":n.getAttribute("aria-hidden"),inert:n.getAttribute("inert")}),n.contains(document.activeElement)&&document.activeElement instanceof HTMLElement&&document.activeElement.blur(),n.setAttribute("aria-hidden","true"),n.setAttribute("inert",""),n.setAttribute("data-modal-hidden","true")))};return o&&e(document.body),()=>t.forEach((({element:t,"aria-hidden":e,inert:n})=>{null===e?t.removeAttribute("aria-hidden"):t.setAttribute("aria-hidden",e),null===n?t.removeAttribute("inert"):t.setAttribute("inert",n),t.removeAttribute("data-modal-hidden")}))}),[a,o,i]),o}export{r as default};

package/lib/components/adaptive-sidebar/adaptive-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__/utils.js"),o=require("../box/box.component.js"),a=require("../../style/utils/filter-styled-system-padding-props.js"),n=require("../../style/utils/filter-styled-system-margin-props.js"),i=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),l=require("./adaptive-sidebar.style.js");function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(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){d(e,r,t[r])}))}return e}function c(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 u=d=>{var{adaptiveBreakpoint:u=768,backgroundColor:b="white",borderColor:p="none",children:f,height:y="100%",hidden:O=!1,open:v,renderAsModal:h=!1,width:j="320px",restoreFocusOnClose:g=!1,"aria-label":m,"aria-labelledby":w}=d,x=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}(d,["adaptiveBreakpoint","backgroundColor","borderColor","children","height","hidden","open","renderAsModal","width","restoreFocusOnClose","aria-label","aria-labelledby"]);const k=i.default(u),C=h||!k,P=r.useRef(null),S=Object.entries(t.getColors(b)).reduce(((e,[r,o])=>(e[t.kebabToCamelCase(r)]=o,e)),{});return r.useEffect((()=>{P.current&&P.current.focus()}),[v]),r.useEffect((()=>{O&&v&&document.querySelectorAll("[inert]").forEach((e=>{e.removeAttribute("inert")}))}),[O,v]),r.useEffect((()=>{C&&document.dispatchEvent(new CustomEvent("adaptiveSidebarModalFocusIn",{bubbles:!0,detail:{source:"adaptiveSidebarModal"}}))}),[C]),C?e.jsx(l.StyledSidebar,{backgroundColor:b,className:"adaptive-sidebar-modal-view","data-role":"adaptive-sidebar-modal-view",enableBackgroundUI:v&&O,hidden:O,restoreFocusOnClose:g,open:v,p:0,ref:P,"aria-label":m,"aria-labelledby":w,children:e.jsx(o.Box,c(s({"data-role":"adaptive-sidebar-content-wrapper",height:"100%"},S),{children:f}))}):v?e.jsx(l.StyledAdaptiveSidebar,c(s({backgroundColor:b,borderColor:"none"===p?void 0:p,"data-element":"adaptive-sidebar","data-role":"adaptive-sidebar",height:y,hidden:O,ref:P,role:"region",tabIndex:-1,width:j},n.default(x),a.default(x)),{children:e.jsx(o.Box,{"data-role":"adaptive-sidebar-content-wrapper",children:f})})):null};exports.AdaptiveSidebar=u,exports.default=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./__internal__/utils.js"),o=require("../box/box.component.js"),a=require("../../style/utils/filter-styled-system-padding-props.js"),n=require("../../style/utils/filter-styled-system-margin-props.js"),i=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),l=require("./adaptive-sidebar.style.js");function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(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){d(e,r,t[r])}))}return e}function c(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 u=d=>{var{adaptiveBreakpoint:u=768,backgroundColor:b="white",borderColor:p="none",children:f,height:y="100%",hidden:O=!1,open:j,renderAsModal:v=!1,width:h="320px",restoreFocusOnClose:g=!1,"aria-label":m,"aria-labelledby":w}=d,x=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}(d,["adaptiveBreakpoint","backgroundColor","borderColor","children","height","hidden","open","renderAsModal","width","restoreFocusOnClose","aria-label","aria-labelledby"]);const k=i.default(u),C=v||!k,P=r.useRef(null),S=Object.entries(t.getColors(b)).reduce(((e,[r,o])=>(e[t.kebabToCamelCase(r)]=o,e)),{});return r.useEffect((()=>{P.current&&P.current.focus()}),[j]),r.useEffect((()=>{C&&document.dispatchEvent(new CustomEvent("adaptiveSidebarModalFocusIn",{bubbles:!0,detail:{source:"adaptiveSidebarModal"}}))}),[C]),C?e.jsx(l.StyledSidebar,{backgroundColor:b,className:"adaptive-sidebar-modal-view","data-role":"adaptive-sidebar-modal-view",enableBackgroundUI:j&&O,hidden:O,restoreFocusOnClose:g,open:j,p:0,ref:P,"aria-label":m,"aria-labelledby":w,children:e.jsx(o.Box,c(s({"data-role":"adaptive-sidebar-content-wrapper",height:"100%"},S),{children:f}))}):j?e.jsx(l.StyledAdaptiveSidebar,c(s({backgroundColor:b,borderColor:"none"===p?void 0:p,"data-element":"adaptive-sidebar","data-role":"adaptive-sidebar",height:y,hidden:O,ref:P,role:"region",tabIndex:-1,width:h},n.default(x),a.default(x)),{children:e.jsx(o.Box,{"data-role":"adaptive-sidebar-content-wrapper",children:f})})):null};exports.AdaptiveSidebar=u,exports.default=u;

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

@@ -63,6 +63,8 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
      * @internal
      * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
+    /** @private @ignore Whether the `Sidebar` is hidden from view when rendered in an `AdaptiveSidebar`. */
+    hidden?: boolean;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;

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 _=f(r).default.forwardRef(((f,y)=>{var{"aria-describedby":_,"aria-label":h,"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}=f,W=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"]);const G=d.default(),{current:J}=r.useRef(i.default()),{current:Q}=r.useRef(i.default()),X=r.useRef(null),Y=r.useCallback((e=>{X.current=e,y&&("object"==typeof y&&(y.current=e),"function"==typeof y&&y(e))}),[y]),Z=b.default(X),$=()=>R?e.jsx(n.default,O(j({"aria-label":G.sidebar.ariaLabels.close(),onClick:R},u.default("close",j({"data-element":"close"},v))),{children:e.jsx(o.default,{type:"close"})})):null,ee=e.jsxs(a.StyledSidebar,{"aria-modal":!k&&Z,"aria-describedby":_||Q,"aria-label":h,"aria-labelledby":m||h?m:J,"data-component":"sidebar","data-element":g,"data-role":P,ref:Y,position:M,size:D,onCancel:R,role:B,width:z,className:V,children:[C&&e.jsx(s.default,O(j({headerVariant:F,closeIcon:$()},K),{id:J,children:C})),E&&e.jsx(s.SidebarSubHeader,O(j({},L),{id:Q,children:E})),!C&&$(),e.jsx(a.StyledSidebarContent,O(j({"data-element":"sidebar-content","data-role":"sidebar-content"},c.default(W)),{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?ee:e.jsx(l.default,{wrapperRef:X,isOpen:S,additionalWrapperRefs:A,focusableSelectors:N,focusFirstElement:H,autoFocus:!w,bespokeTrap:x,children:ee})})}));_.displayName="Sidebar",exports.Sidebar=_,exports.default=_;
+"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;

package/lib/global.d.ts

@@ -18,3 +18,9 @@ declare global {
     };
   }
 }
+
+declare module "react" {
+  interface HTMLAttributes {
+    inert?: "" | "true" | string;
+  }
+}

package/lib/hooks/__internal__/useModalAria/useModalAria.d.ts

@@ -1 +1 @@
-export default function useModalAria(containerRef: React.RefObject<HTMLDivElement>): boolean | undefined;
+export default function useModalAria(containerRef: React.RefObject<HTMLDivElement>, hidden?: boolean): boolean | undefined;

package/lib/hooks/__internal__/useModalAria/useModalAria.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("../../../components/carbon-provider/__internal__/top-modal.context.js");exports.default=function(r){const{topModal:n}=t.useContext(e.default),i=null==n?void 0:n.contains(r.current);return t.useEffect((()=>{const t=[],e=r=>{"true"!==r.dataset.notInert&&(r.contains(n)?r!==n&&Array.from(r.children).forEach((t=>{t instanceof HTMLElement&&e(t)})):r.hasAttribute("data-modal-hidden")||(t.push({element:r,"aria-hidden":r.getAttribute("aria-hidden"),inert:r.getAttribute("inert")}),r.contains(document.activeElement)&&document.activeElement instanceof HTMLElement&&document.activeElement.blur(),r.setAttribute("aria-hidden","true"),r.setAttribute("inert",""),r.setAttribute("data-modal-hidden","true")))};return i&&e(document.body),()=>t.forEach((({element:t,"aria-hidden":e,inert:r})=>{null===e?t.removeAttribute("aria-hidden"):t.setAttribute("aria-hidden",e),null===r?t.removeAttribute("inert"):t.setAttribute("inert",r),t.removeAttribute("data-modal-hidden")}))}),[n,i]),i};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("../../../components/carbon-provider/__internal__/top-modal.context.js");exports.default=function(r,n){const{topModal:i}=t.useContext(e.default),a=null==i?void 0:i.contains(r.current);return t.useEffect((()=>{const t=[],e=r=>{n||"true"===r.dataset.notInert||(r.contains(i)?r!==i&&Array.from(r.children).forEach((t=>{t instanceof HTMLElement&&e(t)})):r.hasAttribute("data-modal-hidden")||(t.push({element:r,"aria-hidden":r.getAttribute("aria-hidden"),inert:r.getAttribute("inert")}),r.contains(document.activeElement)&&document.activeElement instanceof HTMLElement&&document.activeElement.blur(),r.setAttribute("aria-hidden","true"),r.setAttribute("inert",""),r.setAttribute("data-modal-hidden","true")))};return a&&e(document.body),()=>t.forEach((({element:t,"aria-hidden":e,inert:r})=>{null===e?t.removeAttribute("aria-hidden"):t.setAttribute("aria-hidden",e),null===r?t.removeAttribute("inert"):t.setAttribute("inert",r),t.removeAttribute("data-modal-hidden")}))}),[i,a,n]),a};

package/package.json

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