carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 4.17 kB
JavaScript
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};