carbon-react/lib/components/drawer/drawer.component.js

A library of reusable React components for easily building user interfaces.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("invariant"),n=require("../../__internal__/utils/helpers/guid/index.js"),a=require("../../hooks/__internal__/usePrevious/index.js"),o=require("../icon/icon.component.js"),i=require("./drawer.style.js"),l=require("../../__internal__/utils/helpers/tags/tags.js"),d=require("./__internal__/drawer-sidebar.context.js"),s=require("../../__internal__/utils/logger/index.js");function c(e){return e&&e.__esModule?e:{default:e}}var u=c(t);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}let p=!1,f=!1,h=!1;const y=t=>{var{"aria-label":c,sidebarAriaLabel:y,defaultExpanded:w,expanded:g,onChange:j,children:x,expandedWidth:O="30vw",sidebar:v,animationDuration:m="400ms",backgroundColor:_,title:D,footer:S,showControls:P,height:k="100%",stickyHeader:C,stickyFooter:q}=t,E=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(t,["aria-label","sidebarAriaLabel","defaultExpanded","expanded","onChange","children","expandedWidth","sidebar","animationDuration","backgroundColor","title","footer","showControls","height","stickyHeader","stickyFooter"]);"400ms"===m||p||(s.default.deprecate("The `animationDuration` prop in `Drawer` is deprecated and will soon be removed."),p=!0),void 0===P||h||(s.default.deprecate("The `showControls` prop in `Drawer` is deprecated and will soon be removed."),h=!0),void 0===w||f||(s.default.deprecate("The `defaultExpanded` prop in `Drawer` is deprecated and will soon be removed."),f=!0);const T=r.useRef(n.default()),H=`DrawerSidebar_${T.current}`,A=`DrawerTitle_${T.current}`,F=r.useRef(null),R=r.useRef(null),W=r.useRef(void 0!==g),[I,L]=r.useState(W.current?g:null==w||w),M=a.default(g);r.useEffect((()=>{u.default(W.current===(void 0!==g),"Drawer should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Drawer element for the lifetime of the component"),W.current&&M!==g&&L(g)}),[g,M,P]),r.useEffect((()=>{const e=R.current;e&&(e.scrollHeight>e.clientHeight?e.setAttribute("tabindex","0"):e.removeAttribute("tabindex"))}),[v,I]);const $=r.useCallback((e=>{L(!I),null==j||j(e,!I),I&&F.current&&(F.current.scrollTop=0)}),[I,j]);return e.jsxs(i.StyledDrawerWrapper,(B=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){b(e,r,t[r])}))}return e}({"aria-label":c,height:k},l.default("drawer",E)),z=null!=(z={children:[e.jsxs(i.StyledDrawerContent,{expandedWidth:O,animationDuration:m,isExpanded:I,showControls:P,ref:F,backgroundColor:_,"data-element":"drawer-content","data-role":"drawer-content","aria-label":y,"aria-labelledby":D?A:void 0,children:[D&&e.jsx(i.StyledSidebarTitle,{id:A,stickyHeader:C,children:D}),P&&e.jsx(i.StyledSidebarToggleButton,{"aria-label":"toggle sidebar","aria-expanded":I,"aria-controls":H,"data-element":"drawer-toggle",onClick:$,isExpanded:I,children:e.jsx(o.default,{type:"chevron_right"})}),e.jsx(i.StyledDrawerSidebar,{"data-element":"drawer-sidebar",id:H,ref:R,children:e.jsx(d.default.Provider,{value:{isInSidebar:!0},children:v})}),S&&e.jsx(i.StyledSidebarFooter,{stickyFooter:q,children:S})]}),x]})?z:{},Object.getOwnPropertyDescriptors?Object.defineProperties(B,Object.getOwnPropertyDescriptors(z)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(z)).forEach((function(e){Object.defineProperty(B,e,Object.getOwnPropertyDescriptor(z,e))})),B));var B,z};exports.DrawerSidebarContext=d.default,exports.Drawer=y,exports.default=y;