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