carbon-react 157.2.0 → 157.3.0

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

@@ -1,7 +1,7 @@
 import React, { RefObject } from "react";
 import { PaddingProps, WidthProps } from "styled-system";
 import { ModalProps } from "../modal";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<ModalProps, "topModalOverride" | "restoreFocusOnClose"> {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
@@ -18,6 +18,8 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
     "aria-labelledby"?: string;
     /** Modal content */
     children?: React.ReactNode;
+    /** Data tag prop bag for close Button */
+    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** 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. */

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

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

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

@@ -1,7 +1,7 @@
 import React, { RefObject } from "react";
 import { PaddingProps, WidthProps } from "styled-system";
 import { ModalProps } from "../modal";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<ModalProps, "topModalOverride" | "restoreFocusOnClose"> {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
@@ -18,6 +18,8 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
     "aria-labelledby"?: string;
     /** Modal content */
     children?: React.ReactNode;
+    /** Data tag prop bag for close Button */
+    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** 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. */

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("../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"),i=require("./__internal__/sidebar-header/sidebar-header.component.js"),s=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("../../hooks/__internal__/useModalAria/useModalAria.js"),b=require("./__internal__/sidebar.context.js");function f(e){return e&&e.__esModule?e:{default:e}}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 y(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){p(e,r,t[r])}))}return e}function j(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=f(r).default.forwardRef(((f,p)=>{var{"aria-describedby":O,"aria-label":m,"aria-labelledby":h,"data-element":_="sidebar","data-role":g,open:P,bespokeFocusTrap:S,disableAutoFocus:x=!1,disableEscKey:v=!1,enableBackgroundUI:w=!1,header:k,headerVariant:q="light",subHeader:C,position:F="right",size:E="medium",children:M,onCancel:I,role:R="dialog",focusFirstElement:H,focusableContainers:A,focusableSelectors:D,width:N,headerPadding:z={},subHeaderPadding:B={},topModalOverride:K,restoreFocusOnClose:L=!0,className:T}=f,U=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","disableAutoFocus","disableEscKey","enableBackgroundUI","header","headerVariant","subHeader","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","width","headerPadding","subHeaderPadding","topModalOverride","restoreFocusOnClose","className"]);const V=d.default(),{current:W}=r.useRef(s.default()),{current:G}=r.useRef(s.default()),J=r.useRef(null),Q=r.useCallback((e=>{J.current=e,p&&("object"==typeof p&&(p.current=e),"function"==typeof p&&p(e))}),[p]),X=u.default(J),Y=()=>I?e.jsx(n.default,{"aria-label":V.sidebar.ariaLabels.close(),onClick:I,"data-element":"close",children:e.jsx(o.default,{type:"close"})}):null,Z=e.jsxs(a.StyledSidebar,{"aria-modal":!w&&X,"aria-describedby":O||G,"aria-label":m,"aria-labelledby":h||m?h:W,"data-component":"sidebar","data-element":_,"data-role":g,ref:Q,position:F,size:E,onCancel:I,role:R,width:N,className:T,children:[k&&e.jsx(i.default,j(y({headerVariant:q,closeIcon:Y()},z),{id:W,children:k})),C&&e.jsx(i.SidebarSubHeader,j(y({},B),{id:G,children:C})),!k&&Y(),e.jsx(a.StyledSidebarContent,j(y({"data-element":"sidebar-content","data-role":"sidebar-content"},c.default(U)),{children:e.jsx(b.default.Provider,{value:{isInSidebar:!0},children:M})}))]});return e.jsx(t.default,{open:P,onCancel:I,disableEscKey:v,enableBackgroundUI:w,topModalOverride:K,restoreFocusOnClose:L,children:w?Z:e.jsx(l.default,{wrapperRef:J,isOpen:P,additionalWrapperRefs:A,focusableSelectors:D,focusFirstElement:H,autoFocus:!x,bespokeTrap:S,children:Z})})}));O.displayName="Sidebar",exports.Sidebar=O,exports.default=O;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../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":m,"aria-labelledby":_,"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":h||Q,"aria-label":m,"aria-labelledby":_||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})})}));h.displayName="Sidebar",exports.Sidebar=h,exports.default=h;

package/package.json

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