@salesforce-ux/design-system/__internal/chunked/showcase/ui/components/panels/base/example.jsx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t={1594:function(e){e.exports=React},2174:function(e,t,n){n.r(t),n.d(t,{default:function(){return w},examples:function(){return A}});var l=n(1594),i=n.n(l),r=n(4187),a=n.n(r),o=n(942),s=n.n(o),c=n(6333),d=n.n(c),u=n(6955);function m(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=Array(t);n<t;n++)l[n]=e[n];return l}var h=function(e){return i().createElement("div",{className:s()("slds-panel",e.size&&"slds-size_".concat(e.size),e.docked&&"slds-panel_docked slds-panel_docked-".concat(e.docked),e.isAnimated&&"slds-panel_animated",e.drawer&&"slds-panel_drawer",e.isVisible?"slds-is-open":"slds-hidden"),hidden:!e.isVisible,id:e.id},e.children)},f=function(e){var t=e.children;return i().createElement("div",{className:"slds-panel__header-actions"},t)},p=function(e){var t=e.symbol,n=e.handleVisibility,l=e.title,r=s()({"slds-panel__back":"back"===t||"chevronleft"===t,"slds-panel__close":"close"===t});return i().createElement(u.A,{key:"panel-header-close-button",className:r,symbol:t,size:"small",assistiveText:"Collapse ".concat(l),title:"Collapse ".concat(l),onClick:n})};p.propTypes={symbol:a().oneOf(["back","chevronleft","close"]),handleVisibility:a().func,title:a().string};var y=function(e){return i().createElement("h2",{className:"slds-panel__header-title slds-text-heading_small slds-truncate",key:"panel-header-title",title:e.title},e.title)},b=function(e){var t="close",n=i().createElement(i().Fragment,null,i().createElement(y,{title:e.title}),i().createElement(f,null,e.headerActions,i().createElement(p,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})));return"drill-in"===e.invoke&&(n=e.isInvokedByTab?i().createElement(i().Fragment,null,i().createElement(p,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),i().createElement(y,{title:e.title})):i().createElement(i().Fragment,null,i().createElement(p,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),i().createElement(y,{title:e.title}),i().createElement(f,null,e.headerActions,i().createElement(p,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})))),i().createElement("div",{className:s()("slds-panel__header",e.hasCenterTitle&&"slds-panel__header_align-center",e.customHeader&&"slds-panel__header_custom")},e.customHeader?e.customHeader:n)},v=function(e){var t=e.title,n=e.closeSymbol,l=e.hasCenterTitle,r=e.customHeader;return i().createElement("div",{className:s()("slds-panel__header",l&&"slds-panel__header_align-center",r&&"slds-panel__header_custom")},r||i().createElement(i().Fragment,null,i().createElement(y,{title:t}),i().createElement(p,{title:t,symbol:n})))};v.propTypes={title:a().string,closeSymbol:a().string,hasCenterTitle:a().bool,customHeader:a().node},v.defaultProps={title:"Deprecated Panel Header",closeSymbol:"close"};var g=function(e){return i().createElement("div",{className:"slds-panel__body"},e.children)},k=function(e){var t=e.size,n=e.title,l=e.docked,r=e.invoke,a=e.drawer,o=e.isVisible,s=void 0===o||o,c=e.handleVisibility,d=e.customHeader,u=e.children,m=e.isAnimated,f=e.hasCenterTitle,p=e.isInvokedByTab,y=e.iconBack,v=e.headerActions,k=e.headerSlot,_=e.id;return i().createElement(h,{docked:l,drawer:a,size:t,invoke:r,isVisible:s,isAnimated:m,id:_},k||i().createElement(b,{title:n,docked:l,invoke:r,customHeader:d,handleVisibility:c,hasCenterTitle:f,isInvokedByTab:p,iconBack:y,headerActions:v}),i().createElement(g,null,u))};k.propTypes={size:a().oneOf(["small","medium","large","x-large","full"]),docked:a().oneOf(["left","right","bottom"]),invoke:a().oneOf(["drill-in","toggle"]),hasCenterTitle:a().bool,isInvokedByTab:a().bool,iconBack:a().string,headerActions:a().node,headerSlot:a().node,id:a().string},k.defaultProps={iconBack:"chevronleft"};var _=k,E=function(e){var t,n,r=e.size,a=e.title,o=e.docked,c=e.invoke,h=e.drawer,f=e.hasCenterTitle,p=e.icon,y=e.iconTitle,b=e.children,v=(t=(0,l.useState)(!0),n=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,i,r,a,o=[],s=!0,c=!1;try{if(r=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(l=r.call(n)).done)&&(o.push(l.value),o.length!==t);s=!0);}catch(e){c=!0,i=e}finally{try{if(!s&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw i}}return o}}(t,n)||function(e,t){if(e){if("string"==typeof e)return m(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?m(e,t):void 0}}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),g=v[0],_=v[1],E=d()("example-unique-id-"),S=s()("demo-only-element","slds-theme_default","slds-border_bottom","slds-p-around_small",{"slds-text-align_right":"right"===o}),w=function(){return _(!g)},T={backgroundColor:"#fafaf9",position:"relative",height:"600px",overflow:"hidden",display:"flex",flexDirection:"right"===o&&"row-reverse"};return i().createElement(i().Fragment,null,i().createElement("header",{className:S,style:{zIndex:"1"}},i().createElement(u.A,{theme:"neutral",selected:g,symbol:p,title:y,className:"slds-button_icon-border",onClick:w,"aria-expanded":g,"aria-controls":E,"aria-pressed":g})),i().createElement("div",{className:"demo-only-element",style:T},i().createElement(k,{isVisible:g,size:r,title:a,docked:o,invoke:c,drawer:h,handleVisibility:w,hasCenterTitle:f,id:E},b),i().createElement("div",{className:"demo-only-content slds-col slds-p-around_medium"},"This section is demo-only content representing a custom layout in conjunction with the panel. It is not a part of the blueprint.")))};E.propTypes={size:a().string,title:a().string,docked:a().string,invoke:a().string,drawer:a().bool,hasCenterTitle:a().bool,icon:a().string,iconTitle:a().string,children:a().node},E.defaultProps={size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",icon:"toggle_panel_left",iconTitle:"Toggle panel",children:"A panel body accepts any layout or component"};var S=n(4760),w=i().createElement(E,null),T="\n  background-color: #fafaf9;\n  overflow: hidden;\n",A=[{id:"with-centered-title",label:"With Centered Title",element:i().createElement(E,{hasCenterTitle:!0})},{id:"with-truncated-title",label:"With Truncated Title",element:i().createElement(E,{title:"Panel Header with a really, really long name"})},{id:"with-secondary-actions",label:"With Secondary Actions",demoStyles:"".concat(T," height: 240px;"),storybookStyles:!0,element:i().createElement(_,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",headerActions:i().createElement(S.ActionOverflow,{position:"right",size:"small",isOpen:!0})},"A panel body accepts any layout or component")},{id:"with-drilled-in-left",label:"With Drilled-In State - Position Left",demoStyles:"".concat(T," height: 200px;"),storybookStyles:!0,element:i().createElement(_,{size:"medium",title:"Panel Header",docked:"left",invoke:"drill-in"},"A panel body accepts any layout or component")},{id:"with-drilled-in-left-secondary-actions",label:"With Drilled-In State & Secondary Actions - Position left",demoStyles:"".concat(T," height: 200px;"),storybookStyles:!0,element:i().createElement(_,{size:"medium",title:"Panel Header",docked:"left",invoke:"drill-in",headerActions:i().createElement(S.ActionOverflow,{size:"small",position:"right",isOpen:!0})},"A panel body accepts any layout or component")},{id:"with-drilled-in-right",label:"With Drilled-In State - Position Right",demoStyles:"".concat(T," height: 200px;"),storybookStyles:!0,element:i().createElement(_,{size:"medium",title:"Panel Header",docked:"right",invoke:"drill-in"},"A panel body accepts any layout or component")},{id:"drawer",label:"Open as a drawer",element:i().createElement(E,{drawer:!0})},{id:"deprecated-panel-header",label:"DEPRECATED - Panel Header",element:i().createElement(_,{size:"medium",docked:"left",headerSlot:i().createElement(v,null)},"A panel body accepts any layout or component")}]}},n={};function l(e){var i=n[e];if(void 0!==i)return i.exports;var r=n[e]={exports:{}};return t[e](r,r.exports,l),r.exports}l.m=t,l.amdO={},e=[],l.O=function(t,n,i,r){if(!n){var a=1/0;for(d=0;d<e.length;d++){n=e[d][0],i=e[d][1],r=e[d][2];for(var o=!0,s=0;s<n.length;s++)(!1&r||a>=r)&&Object.keys(l.O).every(function(e){return l.O[e](n[s])})?n.splice(s--,1):(o=!1,r<a&&(a=r));if(o){e.splice(d--,1);var c=i();void 0!==c&&(t=c)}}return t}r=r||0;for(var d=e.length;d>0&&e[d-1][2]>r;d--)e[d]=e[d-1];e[d]=[n,i,r]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},l.d=function(e,t){for(var n in t)l.o(t,n)&&!l.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=1697,function(){var e={518:0,1117:0,1252:0,1578:0,1697:0,1974:0,2033:0,2274:0,2782:0,3140:0,4268:0,4583:0,4723:0,4924:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};l.O.j=function(t){return 0===e[t]};var t=function(t,n){var i,r,a=n[0],o=n[1],s=n[2],c=0;if(a.some(function(t){return 0!==e[t]})){for(i in o)l.o(o,i)&&(l.m[i]=o[i]);if(s)var d=s(l)}for(t&&t(n);c<a.length;c++)r=a[c],l.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return l.O(d)},n=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),l.nc=void 0;var i=l.O(void 0,[6790],function(){return l(2174)});i=l.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/panels/base/example.jsx.js"]=i}();