@salesforce-ux/design-system/__internal/chunked/docs/ui/components/list-builder/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/list-builder/docs.mdx.js"]=function(e){function t(t){for(var l,s,c=t[0],d=t[1],i=t[2],m=0,u=[];m<c.length;m++)s=c[m],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&u.push(n[s][0]),n[s]=0;for(l in d)Object.prototype.hasOwnProperty.call(d,l)&&(e[l]=d[l]);for(o&&o(t);u.length;)u.shift()();return r.push.apply(r,i||[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],l=!0,c=1;c<a.length;c++){var d=a[c];0!==n[d]&&(l=!1)}l&&(r.splice(t--,1),e=s(s.s=a[0]))}return e}var l={},n={45:0},r=[];function s(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=l,s.d=function(e,t,a){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)s.d(a,l,function(t){return e[t]}.bind(null,l));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],d=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var o=d;return r.push([757,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},757:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return H})),a.d(t,"getContents",(function(){return D}));var l=a(0),n=a.n(l),r=a(4),s=a(2),c=a(1),d=(a(14),a(3)),i=a.n(d),o=a(21),m=a(79),u=a(23),p=a(24),b=a(26),E=a(11),h=a(6),y=a(30);function f(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==a)return;var l,n,r=[],s=!0,c=!1;try{for(a=a.call(e);!(s=(l=a.next()).done)&&(r.push(l.value),!t||r.length!==t);s=!0);}catch(e){c=!0,n=e}finally{try{s||null==a.return||a.return()}finally{if(c)throw n}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return v(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return v(e,t)}(e,t)||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.")}()}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,l=new Array(t);a<t;a++)l[a]=e[a];return l}var N=["Name","Product Code","List Price","Product Family"],g=["Product Name"],_=[{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"}],x=function(e){var t=e.selectedFilters,a=e.itemsSelected,r=f(Object(l.useState)(c.d.uniqueId("example-unique-id-")),1)[0],s=f(Object(l.useState)(c.d.uniqueId("example-unique-id-")),1)[0];return n.a.createElement("div",{className:"slds-p-vertical_x-small slds-p-horizontal_large slds-shrink-none slds-theme_shade"},n.a.createElement(u.b,{id:r,"aria-controls":s,autocomplete:!0,label:"Search",hideLabel:!0,placeholder:"Search Salesforce",inputIconPosition:"right",rightInputIcon:n.a.createElement(E.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n.a.createElement(p.e,{id:s,snapshot:b.p,type:"plain",count:8,hideIcons:!0}),resultsType:"listbox",hasInteractions:!0}),t||null,n.a.createElement("div",{className:"slds-text-title slds-m-top_x-small","aria-live":"polite"},a||"0"," Item(s) Selected"))};x.propTypes={selectedFilters:i.a.node,itemsSelected:i.a.string};var S=function(e){return n.a.createElement("div",{className:"slds-scrollable slds-grow"},n.a.createElement("div",{className:"slds-scrollable_none"},n.a.createElement(h.s,{hasNoRowHover:!0,isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example product list"},n.a.createElement(h.q,null,n.a.createElement(h.r,null,n.a.createElement(h.c,{style:{width:"3.75rem"}}),N.map((function(e,t){return n.a.createElement(h.c,{"aria-label":e,isSortable:!0,isResizable:!0,key:t},n.a.createElement(h.i,{columnName:e}))})))),n.a.createElement(h.o,null,e.children))))},P=function(e){return n.a.createElement("div",{className:"slds-scrollable slds-grow"},n.a.createElement("div",{className:"slds-scrollable_none"},n.a.createElement(h.s,{hasHiddenHeader:!0,hasNoRowHover:!0,isBordered:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example single column product list"},n.a.createElement(h.q,{isHidden:e.hasHiddenHeader},n.a.createElement(h.r,null,n.a.createElement(h.c,{style:{width:"3.75rem"}}),e.hasHiddenHeader?n.a.createElement(h.c,{"aria-label":g[0]},n.a.createElement(h.b,{columnName:g[0]})):n.a.createElement(h.c,{"aria-label":g[0]},n.a.createElement(h.i,{columnName:g[0]})))),n.a.createElement(h.o,null,e.children))))};P.propTypes={hasHiddenHeader:i.a.bool,children:i.a.node};var w=function(e){var t="Select item "+e.index;return n.a.createElement(h.p,{isSelected:e.checked},n.a.createElement(h.t,{isRightAligned:!0,tabIndex:1===e.index?"0":null,type:"advanced"},n.a.createElement(m.b,{label:t,isChecked:e.checked,isDisabled:e.disabled,tabIndex:-1})),n.a.createElement(h.m,null,n.a.createElement(h.j,{cellText:e.name})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.productCode})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.listPrice})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.productFamily})))},A=function(e){var t="Select item "+e.index;return n.a.createElement(h.p,{isSelected:e.checked},n.a.createElement(h.t,{isRightAligned:!0,tabIndex:1===e.index?"0":"-1",type:"advanced",style:{width:"3.75rem"}},n.a.createElement(m.b,{label:t,isChecked:e.checked,isDisabled:e.disabled,tabIndex:-1})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.name})))};A.propTypes={className:i.a.string,index:i.a.number,checked:i.a.bool,disabled:i.a.bool,name:i.a.string};var C=function(e){return n.a.createElement(y.f,{variant:"container-bare"},n.a.createElement(y.c,null,n.a.createElement(y.d,null,n.a.createElement(y.b,{label:"Analytics",tabIndex:"0"}))))},j=function(e){return n.a.createElement(y.f,{variant:"container-bare"},n.a.createElement(y.c,null,n.a.createElement(y.d,null,n.a.createElement(y.b,{label:"Option A",tabIndex:"0"})),n.a.createElement(y.d,null,n.a.createElement(y.b,{label:"Option B"}))))},O=[{id:"default",label:"Default",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large slds-list-builder","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-grow"},n.a.createElement("div",{className:"slds-grid slds-grid_vertical"},n.a.createElement(x,null),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{checked:!1,key:t,index:t+1,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],k=[{id:"items-selected",label:"Items Selected",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{selectedFilters:n.a.createElement(C,null),itemsSelected:"1"}),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{key:t,index:t+1,checked:0===t,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"items-disabled",label:"Items Disabled",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{itemsSelected:"0"}),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{checked:!1,key:t,index:t+1,disabled:t%2==0||null,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"items-default-selected",label:"Items Default Selected",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{itemsSelected:"0"}),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{key:t,index:t+1,checked:t%2==1,disabled:t%2==1||null,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],F=[{id:"two-column-with-hidden-header",label:"Two Column with Hidden Header",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{itemsSelected:"0"}),n.a.createElement(P,{hasHiddenHeader:!0},_.map((function(e,t){return n.a.createElement(A,{checked:!1,key:t,index:t+1,name:e.name})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"filtered",label:"Filtered Results",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-grow"},n.a.createElement("div",{className:"slds-grid slds-grid_vertical"},n.a.createElement(x,{selectedFilters:n.a.createElement(j,null),itemsSelected:"2"}),n.a.createElement(S,null,n.a.createElement(w,{checked:!1,index:1,name:_[0].name,productCode:_[0].productCode,listPrice:_[0].listPrice,productFamily:_[0].productFamily})))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],T=r.c.h2,I=r.c.h3,L=r.c.p,H=function(){return Object(l.createElement)(r.b,{},Object(l.createElement)("div",{className:"doc lead"},"The List Builder is a quick, visual and efficient ‘shopping cart’ approach to adding multiple items to a parent object."),Object(l.createElement)(s.a,{exampleOnly:!0},Object(c.f)(O)),T({id:"About-List-Builder"},"About List Builder"),L({},"The List builder relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes."),T({id:"Base"},"Base"),Object(l.createElement)(s.a,null,Object(c.f)(O)),T({id:"States"},"States"),I({id:"Items-Selected"},"Items Selected"),Object(l.createElement)(s.a,null,Object(c.f)(k,"items-selected")),I({id:"Items-Disabled"},"Items Disabled"),Object(l.createElement)(s.a,null,Object(c.f)(k,"items-disabled")),I({id:"Items-Default-Selected"},"Items Default Selected"),Object(l.createElement)(s.a,null,Object(c.f)(k,"items-default-selected")),T({id:"Examples"},"Examples"),I({id:"Two-Column-with-Hidden-Header"},"Two Column with Hidden Header"),Object(l.createElement)(s.a,null,Object(c.f)(F,"filtered")),I({id:"Filtered-Results"},"Filtered Results"),Object(l.createElement)(s.a,null,Object(c.f)(F,"two-column-with-hidden-header")))},D=function(){return Object(r.a)(H())}}});