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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,l,s={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},7509:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return A},getElement:function(){return x}});var s=l(1594),n=l.n(s),o=l(5671),a=l(6547),r=l(8347),c=l(942),i=l.n(c),d=l(6955),u=[{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"}],m="display: flex; width: 20rem; height: 37.5rem;",p=function(e){return n().createElement("div",{className:i()("slds-split-view_container",e.hidden?"slds-is-closed":"slds-is-open")},n().createElement(d.A,{"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"}),n().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)},n().createElement("header",{className:"slds-split-view__header"},n().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-m-bottom_xx-small"},n().createElement("div",{className:"slds-has-flexi-truncate"},n().createElement("div",{className:"slds-media slds-media_center"},n().createElement("div",{className:"slds-media__figure"},n().createElement("div",{className:"slds-icon_container slds-icon-standard-lead"},n().createElement(r.A,{className:"slds-icon",sprite:"standard",symbol:"lead"}),n().createElement("span",{className:"slds-assistive-text"},"Leads"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h1",{className:"slds-text-heading_small slds-text-color_default slds-p-right_x-small"},n().createElement("button",{className:"slds-button slds-button_reset slds-type-focus slds-truncate","aria-haspopup":"true",title:""},n().createElement("span",{className:"slds-grid slds-has-flexi-truncate slds-grid_vertical-align-center"},n().createElement("span",{className:"slds-truncate",title:"My Leads"},"My Leads"),n().createElement(r.A,{className:"slds-button__icon slds-button__icon_right slds-no-flex",sprite:"utility",symbol:"down"}))))))),n().createElement("div",{className:"slds-no-flex slds-grid"},n().createElement(d.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"}))),n().createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},n().createElement("p",{className:"slds-text-body_small slds-text-color_weak"},"42 items • Updated just now"),n().createElement("div",{className:"slds-no-flex slds-grid slds-col_bump-left"},n().createElement("div",{className:"slds-button-group"},n().createElement(d.A,{hasDropdown:!0,className:"slds-button_icon slds-button_icon-container-more",symbol:"side_list",title:"Display As Split View",assistiveText:"Display As Split View"})),n().createElement("div",{className:"slds-button-group"},n().createElement(d.A,{className:"slds-button_icon slds-button_icon-container",symbol:"refresh",title:"Refresh List",assistiveText:"Refresh List"}))))),n().createElement("div",{className:"slds-grid slds-grid_vertical"},n().createElement("div",{className:"slds-split-view__list-header slds-grid"},n().createElement("span",{className:"slds-assistive-text"},"Sorted by:"),n().createElement("span",null,"Lead Score",n().createElement(r.A,{className:"slds-icon slds-icon_xx-small slds-icon-text-default slds-align-top",sprite:"utility",symbol:"arrowdown"})),n().createElement("span",{className:"slds-assistive-text"},"- Descending")),n().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))))},f=function(e){return n().createElement("li",{className:i()("slds-split-view__list-item",e.className,e.unread?"slds-is-unread":null),role:"presentation"},n().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?n().createElement("abbr",{className:"slds-indicator_unread",title:"Unread Item","aria-label":"Unread Item"},n().createElement("span",{className:"slds-assistive-text"},"●")):null,n().createElement("div",{className:"slds-grid slds-wrap"},n().createElement("span",{className:"slds-truncate slds-text-body_regular slds-text-color_default",title:e.colOne||"Object Name"},e.colOne||"Column 1"),n().createElement("span",{className:"slds-truncate slds-col_bump-left",title:e.colTwo||"Column 2"},e.colTwo||"Column 2")),n().createElement("div",{className:"slds-grid slds-wrap"},n().createElement("span",{className:"slds-truncate",title:e.colThree||"Column 3"},e.colThree||"Column 3"),n().createElement("span",{className:"slds-truncate slds-col_bump-left",title:e.colFour||"Column 4"},e.colFour||"Column 4"))))},b=[{id:"default",label:"Base - Default",demoStyles:m,storybookStyles:!0,element:n().createElement(p,null,u.slice(0,5).map(function(e,t){return n().createElement(f,{key:t,colOne:e.colOne,colTwo:e.colTwo,colThree:e.colThree,colFour:e.colFour,tabIndex:0===t?0:-1})}))}],h=[{id:"selected-item",label:"Selected Item",demoStyles:m,storybookStyles:!0,element:n().createElement(p,null,u.slice(0,5).map(function(e,t){return n().createElement(f,{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:m,storybookStyles:!0,element:n().createElement(p,null,u.slice(0,5).map(function(e,t){return n().createElement(f,{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:m,storybookStyles:!0,element:n().createElement(p,null,u.map(function(e,t){return n().createElement(f,{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:m,storybookStyles:!0,element:n().createElement(p,null,u.map(function(e,t){return n().createElement(f,{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:m,storybookStyles:!0,element:n().createElement(p,{hidden:!0},u.map(function(e,t){return n().createElement(f,{key:t,unread:e.unread,colOne:e.colOne,colTwo:e.colTwo,colThree:e.colThree,colFour:e.colFour,tabIndex:0===t?0:-1})}))}],y=l(806),w=o.XB.a,v=o.XB.code,_=o.XB.em,E=o.XB.h2,S=o.XB.h3,g=o.XB.li,N=o.XB.p,O=o.XB.strong,T=o.XB.ul,x=function(){return(0,s.createElement)(o.Ay,{},(0,s.createElement)("div",{className:"doc lead"},"Split view is used to navigate between records in a list while staying on the same screen."),(0,s.createElement)(a.A,{exampleOnly:!0,demoStyles:(0,y.GP)(h,"selected-item")},(0,y.NO)(h,"selected-item")),E({id:"About-Split-View"},"About Split View"),S({id:"Accessibility"},"Accessibility"),N({},"The list component of the Split View consists of an ARIA Listbox, and as such must abide by the following rules:"),T({},g({},"Each option can only be a single actionable element. No child actions are allowed"),g({},O({},"Must")," implement the keyboard interaction as described by the ",w({href:"https://www.w3.org/TR/wai-aria-practices/#Listbox"},"ARIA Authoring Practices")),g({},"For each open workspace tab, the corresponding option ",_({},"should")," be set to ",v({},'aria-selected="true"'))),E({id:"Base"},"Base"),(0,s.createElement)(a.A,{demoStyles:(0,y.GP)(b)},(0,y.NO)(b)),E({id:"States"},"States"),S({id:"Selected-Item"},"Selected Item"),(0,s.createElement)(a.A,{demoStyles:(0,y.GP)(h,"selected-item")},(0,y.NO)(h,"selected-item")),S({id:"Overflow"},"Overflow"),(0,s.createElement)(a.A,{demoStyles:(0,y.GP)(h,"overflow")},(0,y.NO)(h,"overflow")),S({id:"Unread-Items"},"Unread Items"),(0,s.createElement)(a.A,{demoStyles:(0,y.GP)(h,"unread")},(0,y.NO)(h,"unread")),S({id:"Collapsed-Panel"},"Collapsed Panel"),(0,s.createElement)(a.A,{demoStyles:(0,y.GP)(h,"panel-collapsed")},(0,y.NO)(h,"panel-collapsed")))},A=function(){return(0,o.Qr)(x())}}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return s[e](l,l.exports,o),l.exports}o.m=s,o.amdO={},e=[],o.O=function(t,l,s,n){if(!l){var a=1/0;for(d=0;d<e.length;d++){l=e[d][0],s=e[d][1],n=e[d][2];for(var r=!0,c=0;c<l.length;c++)(!1&n||a>=n)&&Object.keys(o.O).every(function(e){return o.O[e](l[c])})?l.splice(c--,1):(r=!1,n<a&&(a=n));if(r){e.splice(d--,1);var i=s();void 0!==i&&(t=i)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[l,s,n]},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.t=function(e,s){if(1&s&&(e=this(e)),8&s)return e;if("object"==typeof e&&e){if(4&s&&e.__esModule)return e;if(16&s&&"function"==typeof e.then)return e}var n=Object.create(null);o.r(n);var a={};t=t||[null,l({}),l([]),l(l)];for(var r=2&s&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=l(r))Object.getOwnPropertyNames(r).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},o.d(n,a),n},o.d=function(e,t){for(var l in t)o.o(t,l)&&!o.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},o.e=function(){return Promise.resolve()},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.j=221,function(){var e={221:0};o.O.j=function(t){return 0===e[t]};var t=function(t,l){var s,n,a=l[0],r=l[1],c=l[2],i=0;if(a.some(function(t){return 0!==e[t]})){for(s in r)o.o(r,s)&&(o.m[s]=r[s]);if(c)var d=c(o)}for(t&&t(l);i<a.length;i++)n=a[i],o.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return o.O(d)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),o.nc=void 0;var a=o.O(void 0,[3540],function(){return o(7509)});a=o.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/split-view/docs.mdx.js"]=a}();