@salesforce-ux/design-system/__internal/chunked/docs/ui/components/split-view/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/split-view/docs.mdx.js"]=function(e){function t(t){for(var s,n,c=t[0],r=t[1],i=t[2],m=0,u=[];m<c.length;m++)n=c[m],Object.prototype.hasOwnProperty.call(a,n)&&a[n]&&u.push(a[n][0]),a[n]=0;for(s in r)Object.prototype.hasOwnProperty.call(r,s)&&(e[s]=r[s]);for(d&&d(t);u.length;)u.shift()();return o.push.apply(o,i||[]),l()}function l(){for(var e,t=0;t<o.length;t++){for(var l=o[t],s=!0,c=1;c<l.length;c++){var r=l[c];0!==a[r]&&(s=!1)}s&&(o.splice(t--,1),e=n(n.s=l[0]))}return e}var s={},a={71:0},o=[];function n(t){if(s[t])return s[t].exports;var l=s[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,n),l.l=!0,l.exports}n.m=e,n.c=s,n.d=function(e,t,l){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(n.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(l,s,function(t){return e[t]}.bind(null,s));return l},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],r=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var d=r;return o.push([783,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},783:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return x})),l.d(t,"getContents",(function(){return j}));var s=l(0),a=l.n(s),o=l(4),n=l(2),c=l(9),r=l(5),i=l.n(r),d=l(7),m=[{unread:!0,colOne:"Riley Shultz",colTwo:"99",colThree:"Biotech, Inc.",colFour:"Nurturing"},{unread:!0,colOne:"Jason A. - VP of Sales",colTwo:"92",colThree:"Case Management Solutions",colFour:"Contacted"},{unread:!0,colOne:"Josh Smith",colTwo:"90",colThree:"Acme, Inc.",colFour:"Contacted"},{unread:!0,colOne:"Bobby Tree",colTwo:"89",colThree:"Salesforce, Inc.",colFour:"Closing"},{selected:!0,colOne:"Riley Shultz",colTwo:"74",colThree:"Tesla",colFour:"Contacted"},{unread:!0,colOne:"Andy Smith",colTwo:"72",colThree:"Universal Technologies",colFour:"New"},{colOne:"Jim Steele",colTwo:"71",colThree:"BigList, Inc.",colFour:"New"},{colOne:"John Gardner",colTwo:"70",colThree:"3C Systems",colFour:"Contacted"},{colOne:"Sarah Loehr",colTwo:"68",colThree:"MedLife, Inc.",colFour:"New"}],u="display: flex; width: 20rem; height: 37.5rem;",p=function(e){return a.a.createElement("div",{className:i()("slds-split-view_container",e.hidden?"slds-is-closed":"slds-is-open")},a.a.createElement(d.b,{"aria-controls":"split-view-id","aria-expanded":e.hidden?"false":"true",className:i()("slds-button_icon slds-split-view__toggle-button",e.hidden?"slds-is-closed":"slds-is-open"),iconClassName:"slds-button__icon_x-small",symbol:"left",assistiveText:e.hidden?"Open Split View":"Close Split View",title:e.hidden?"Open Split View":"Close Split View"}),a.a.createElement("article",{hidden:e.hidden?"true":"false",id:"split-view-id",className:i()("slds-split-view slds-grid slds-grid_vertical slds-grow",e.className)},a.a.createElement("header",{className:"slds-split-view__header"},a.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-m-bottom_xx-small"},a.a.createElement("div",{className:"slds-has-flexi-truncate"},a.a.createElement("div",{className:"slds-media slds-media_center"},a.a.createElement("div",{className:"slds-media__figure"},a.a.createElement("div",{className:"slds-icon_container slds-icon-standard-lead"},a.a.createElement(c.a,{className:"slds-icon",sprite:"standard",symbol:"lead"}),a.a.createElement("span",{className:"slds-assistive-text"},"Leads"))),a.a.createElement("div",{className:"slds-media__body"},a.a.createElement("h1",{className:"slds-text-heading_small slds-text-color_default slds-p-right_x-small"},a.a.createElement("button",{className:"slds-button slds-button_reset slds-type-focus slds-truncate","aria-haspopup":"true",title:""},a.a.createElement("span",{className:"slds-grid slds-has-flexi-truncate slds-grid_vertical-align-center"},a.a.createElement("span",{className:"slds-truncate",title:"My Leads"},"My Leads"),a.a.createElement(c.a,{className:"slds-button__icon slds-button__icon_right slds-no-flex",sprite:"utility",symbol:"down"}))))))),a.a.createElement("div",{className:"slds-no-flex slds-grid"},a.a.createElement(d.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"}))),a.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},a.a.createElement("p",{className:"slds-text-body_small slds-text-color_weak"},"42 items • Updated just now"),a.a.createElement("div",{className:"slds-no-flex slds-grid slds-col_bump-left"},a.a.createElement("div",{className:"slds-button-group"},a.a.createElement(d.b,{hasDropdown:!0,className:"slds-button_icon slds-button_icon-container-more",symbol:"side_list",title:"Display As Split View",assistiveText:"Display As Split View"})),a.a.createElement("div",{className:"slds-button-group"},a.a.createElement(d.b,{className:"slds-button_icon slds-button_icon-container",symbol:"refresh",title:"Refresh List",assistiveText:"Refresh List"}))))),a.a.createElement("div",{className:"slds-grid slds-grid_vertical"},a.a.createElement("div",{className:"slds-split-view__list-header slds-grid"},a.a.createElement("span",{className:"slds-assistive-text"},"Sorted by:"),a.a.createElement("span",null,"Lead Score",a.a.createElement(c.a,{className:"slds-icon slds-icon_xx-small slds-icon-text-default slds-align-top",sprite:"utility",symbol:"arrowdown"})),a.a.createElement("span",{className:"slds-assistive-text"},"- Descending")),a.a.createElement("ul",{"aria-multiselectable":"true",className:"slds-scrollable_y",role:"listbox","aria-label":"Select an item to open it in a new workspace tab."},e.children))))},b=function(e){return a.a.createElement("li",{className:i()("slds-split-view__list-item",e.className,e.unread?"slds-is-unread":null),role:"presentation"},a.a.createElement("a",{href:"#","aria-current":e.current&&"page","aria-selected":e.selected&&!!e.selected,role:"option",className:"slds-split-view__list-item-action slds-grow slds-has-flexi-truncate",tabIndex:e.tabIndex,onClick:function(e){return e.preventDefault()}},e.unread?a.a.createElement("abbr",{className:"slds-indicator_unread",title:"Unread Item","aria-label":"Unread Item"},a.a.createElement("span",{className:"slds-assistive-text"},"●")):null,a.a.createElement("div",{className:"slds-grid slds-wrap"},a.a.createElement("span",{className:"slds-truncate slds-text-body_regular slds-text-color_default",title:e.colOne||"Object Name"},e.colOne||"Column 1"),a.a.createElement("span",{className:"slds-truncate slds-col_bump-left",title:e.colTwo||"Column 2"},e.colTwo||"Column 2")),a.a.createElement("div",{className:"slds-grid slds-wrap"},a.a.createElement("span",{className:"slds-truncate",title:e.colThree||"Column 3"},e.colThree||"Column 3"),a.a.createElement("span",{className:"slds-truncate slds-col_bump-left",title:e.colFour||"Column 4"},e.colFour||"Column 4"))))},h=[{id:"default",label:"Base - Default",demoStyles:u,storybookStyles:!0,element:a.a.createElement(p,null,m.slice(0,5).map((function(e,t){return a.a.createElement(b,{key:t,colOne:e.colOne,colTwo:e.colTwo,colThree:e.colThree,colFour:e.colFour,tabIndex:0===t?0:-1})})))}],f=[{id:"selected-item",label:"Selected Item",demoStyles:u,storybookStyles:!0,element:a.a.createElement(p,null,m.slice(0,5).map((function(e,t){return a.a.createElement(b,{key:t,current:e.selected,colOne:e.colOne,colTwo:e.colTwo,colThree:e.colThree,colFour:e.colFour,tabIndex:0===t?0:-1})})))},{id:"selected-item-deprecated",label:"Deprecated - Selected Item",demoStyles:u,storybookStyles:!0,element:a.a.createElement(p,null,m.slice(0,5).map((function(e,t){return a.a.createElement(b,{key:t,selected:e.selected,colOne:e.colOne,colTwo:e.colTwo,colThree:e.colThree,colFour:e.colFour,tabIndex:0===t?0:-1})})))},{id:"overflow",label:"Overflow",demoStyles:u,storybookStyles:!0,element:a.a.createElement(p,null,m.map((function(e,t){return a.a.createElement(b,{key:t,colOne:e.colOne,colTwo:e.colTwo,colThree:e.colThree,colFour:e.colFour,tabIndex:0===t?0:-1})})))},{id:"unread",label:"Unread Items",demoStyles:u,storybookStyles:!0,element:a.a.createElement(p,null,m.map((function(e,t){return a.a.createElement(b,{key:t,unread:e.unread,colOne:e.colOne,colTwo:e.colTwo,colThree:e.colThree,colFour:e.colFour,tabIndex:0===t?0:-1})})))},{id:"panel-collapsed",label:"Collapsed Panel",demoStyles:u,storybookStyles:!0,element:a.a.createElement(p,{hidden:!0},m.map((function(e,t){return a.a.createElement(b,{key:t,unread:e.unread,colOne:e.colOne,colTwo:e.colTwo,colThree:e.colThree,colFour:e.colFour,tabIndex:0===t?0:-1})})))}],y=l(1),w=o.c.a,_=o.c.code,v=o.c.em,E=o.c.h2,S=o.c.h3,O=o.c.li,g=o.c.p,T=o.c.strong,N=o.c.ul,x=function(){return Object(s.createElement)(o.b,{},Object(s.createElement)("div",{className:"doc lead"},"Split view is used to navigate between records in a list while staying on the same screen."),Object(s.createElement)(n.a,{exampleOnly:!0,demoStyles:Object(y.e)(f,"selected-item")},Object(y.f)(f,"selected-item")),E({id:"About-Split-View"},"About Split View"),S({id:"Accessibility"},"Accessibility"),g({},"The list component of the Split View consists of an ARIA Listbox, and as such must abide by the following rules:"),N({},O({},"Each option can only be a single actionable element. No child actions are allowed"),O({},T({},"Must")," implement the keyboard interaction as described by the ",w({href:"https://www.w3.org/TR/wai-aria-practices/#Listbox"},"ARIA Authoring Practices")),O({},"For each open workspace tab, the corresponding option ",v({},"should")," be set to ",_({},'aria-selected="true"'))),E({id:"Base"},"Base"),Object(s.createElement)(n.a,{demoStyles:Object(y.e)(h)},Object(y.f)(h)),E({id:"States"},"States"),S({id:"Selected-Item"},"Selected Item"),Object(s.createElement)(n.a,{demoStyles:Object(y.e)(f,"selected-item")},Object(y.f)(f,"selected-item")),S({id:"Overflow"},"Overflow"),Object(s.createElement)(n.a,{demoStyles:Object(y.e)(f,"overflow")},Object(y.f)(f,"overflow")),S({id:"Unread-Items"},"Unread Items"),Object(s.createElement)(n.a,{demoStyles:Object(y.e)(f,"unread")},Object(y.f)(f,"unread")),S({id:"Collapsed-Panel"},"Collapsed Panel"),Object(s.createElement)(n.a,{demoStyles:Object(y.e)(f,"panel-collapsed")},Object(y.f)(f,"panel-collapsed")))},j=function(){return Object(o.a)(x())}}});