npm - @salesforce-ux/design-system - Versions diffs - 2.17.2 → 2.17.3 - Mend

@salesforce-ux/design-system 2.17.2 → 2.17.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (963) hide show

package/__internal/chunked/docs/ui/components/input/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/input/docs.mdx.js"]=function(e){function t(t){for(var a,r,o=t[0],s=t[1],c=t[2],u=0,p=[];u<o.length;u++)r=o[u],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&p.push(l[r][0]),l[r]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(d&&d(t);p.length;)p.shift()();return i.push.apply(i,c\|\|[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],a=!0,o=1;o<n.length;o++){var s=n[o];0!==l[s]&&(a=!1)}a&&(i.splice(t--,1),e=r(r.s=n[0]))}return e}var a={},l={44:0},i=[];function r(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=a,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(n,a,function(t){return e[t]}.bind(null,a));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var d=s;return i.push([699,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},699:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return Y})),n.d(t,"getContents",(function(){return U}));var a=n(0),l=n.n(a),i=n(4),r=n(2),o=(n(25),n(14)),s=n(3),c=n.n(s),d=n(16),u=n(10),p=n(7),m=n(50),b=n(8),h=n(26),f=n.n(h),E="Input Label",y="Placeholder text…",x=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,isRequired:!0},l.a.createElement(d.a,{id:e,placeholder:y,required:!0}))},g=function(){var e=f()("text-input-id-"),t=f()("error-message-id-");return l.a.createElement(b.b,{hasError:!0,labelContent:E,inputId:e,errorId:t,isRequired:!0,inlineMessage:"Enter a value."},l.a.createElement(d.a,{id:e,placeholder:y,required:!0,"aria-describedby":t}))},v=function(){var e=f()("text-input-id-"),t=f()("error-message-id-");return l.a.createElement(b.b,{hasError:!0,labelContent:E,inputId:e,hasLeftIcon:!0,errorId:t,isRequired:!0,inlineMessage:"Enter a value."},l.a.createElement(u.a,{className:"slds-input__icon",sprite:"utility",symbol:"error"}),l.a.createElement(d.a,{id:e,required:!0,placeholder:y,"aria-describedby":t}))},_=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e},l.a.createElement(d.a,{id:e,placeholder:y,disabled:!0}))},I=function(e){var t=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:t},l.a.createElement(d.a,{id:t,readOnly:!0,hasBorders:e.hasBorders,defaultValue:"Read Only",placeholder:""}))},O=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,hasLeftIcon:!0},l.a.createElement(u.a,{className:"slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default",sprite:"utility",symbol:"search"}),l.a.createElement(d.a,{id:e,placeholder:y}))},j=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,hasRightIcon:!0},l.a.createElement(u.a,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),l.a.createElement(d.a,{id:e,placeholder:y}))},w=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,hasLeftIcon:!0,hasRightIcon:!0},l.a.createElement(u.a,{className:"slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default",sprite:"utility",symbol:"search"}),l.a.createElement(d.a,{id:e,placeholder:y}),l.a.createElement(p.b,{symbol:"clear",className:"slds-input__icon slds-input__icon_right",iconClassName:"slds-icon-text-light",assistiveText:"Clear",title:"Clear"}))},S=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,hasLeftIcon:!0,hasRightIcon:!0,hasRightIconGroup:!0},l.a.createElement(u.a,{className:"slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default",sprite:"utility",symbol:"search"}),l.a.createElement(d.a,{id:e,placeholder:y}),l.a.createElement("div",{className:"slds-input__icon-group slds-input__icon-group_right"},l.a.createElement(m.a,{className:"slds-spinner_brand slds-spinner_x-small slds-input__spinner"}),l.a.createElement(p.b,{symbol:"clear",className:"slds-input__icon slds-input__icon_right",iconClassName:"slds-icon-text-light",assistiveText:"Clear",title:"Clear"})))},C=function(e){var t=f()("".concat(e.type,"-input-id-"));return l.a.createElement(b.b,{labelContent:e.label,inputId:t},l.a.createElement(d.a,{id:t,type:e.type,placeholder:e.placeholder}))};C.propTypes={type:c.a.string,label:c.a.string,placeholder:c.a.string},C.defaultProps={label:"Input Label"};var T=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,formControlClassName:"slds-input-has-fixed-addon",labelId:"fixed-text-label"},l.a.createElement("span",{className:"slds-form-element__addon",id:"fixed-text-addon-pre"},"$"),l.a.createElement(d.a,{id:e,placeholder:y,"aria-labelledby":"fixed-text-label fixed-text-addon-pre fixed-text-addon-post"}),l.a.createElement("span",{className:"slds-form-element__addon",id:"fixed-text-addon-post"},"euro"))},L=function(){var e=f()("text-input-id-"),t=f()("error-message-id-");return l.a.createElement(b.b,{labelId:"inline-text-label",labelContent:E,inputId:e,errorId:t,inlineMessage:"ex: (415)111-2222"},l.a.createElement(d.a,{id:e,placeholder:y,"aria-describedby":t}))},R=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,hasTooltip:!0,showTooltip:!0},l.a.createElement(d.a,{id:e,placeholder:y}))},N=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e},l.a.createElement(d.a,{id:e,isBare:!0,placeholder:y}))},k=l.a.createElement(b.b,{labelContent:E,inputId:"text-input-id-0"},l.a.createElement(d.a,{id:"text-input-id-0",placeholder:y})),D=[{id:"input-required",label:"Required",element:l.a.createElement(x,null)},{id:"input-disabled",label:"Disabled",element:l.a.createElement(_,null)},{id:"input-error",label:"Error",element:l.a.createElement(g,null)},{id:"input-error-icon",label:"Error with icon",element:l.a.createElement(v,null)},{id:"read-only",label:"Readonly",element:l.a.createElement(I,null)},{id:"read-only-borders",label:"Readonly with borders",element:l.a.createElement(I,{hasBorders:!0})},{id:"static",label:"Static",element:l.a.createElement(b.h,null,l.a.createElement("span",{className:"slds-form-element__label"},"Input Label"),l.a.createElement(b.c,null,l.a.createElement("span",{className:"slds-form-element__static"},"Read Only")))}],M=[{id:"left-icon",label:"Left Icon",element:l.a.createElement(O,null)},{id:"right-icon",label:"Right Icon",element:l.a.createElement(j,null)},{id:"double-icon",label:"Left Icon & Clear Button",element:l.a.createElement(w,null)},{id:"double-icon-spinner",label:"Clear Button with Spinner",element:l.a.createElement(S,null)},{id:"email-input",label:"Email Input",element:l.a.createElement(C,{type:"email",label:"Email",placeholder:"Email"})},{id:"date-input",label:"Date Input",element:l.a.createElement(C,{type:"date"})},{id:"search-input",label:"Search Input",element:l.a.createElement(C,{type:"search"})},{id:"url-input",label:"URL Input",element:l.a.createElement(C,{type:"url"})},{id:"tel-input",label:"Telephone Input",element:l.a.createElement(C,{type:"tel"})},{id:"fixed-text",label:"Fixed text",element:l.a.createElement(T,null)},{id:"inline-help",label:"Inline Help",element:l.a.createElement(L,null)},{id:"field-level-help",label:"Field level help",demoStyles:"\n padding-top: 3rem;\n position: relative;\n ",storybookStyles:"\n padding-top: 4rem;\n position: relative;\n ",element:l.a.createElement(R,null)},{id:"bare",label:"Bare",element:l.a.createElement(N,null)}],q=n(1),P=n(35),B=n(37),H=i.c.a,F=i.c.code,A=i.c.h2,W=i.c.h3,J=i.c.h4,z=i.c.li,G=i.c.ol,V=i.c.p,Y=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"Text inputs are used for freeform data entry"),Object(a.createElement)(r.a,{exampleOnly:!0},Object(q.f)(k)),A({id:"About-Inputs"},"About Inputs"),V({},"You can style the HTML ",F({},"<input>")," element to align with the Salesforce brand by using the ",F({},".slds-input")," class on the ",F({},"<input>")," element."),V({},"The ",F({},"<input>")," element includes support for all HTML5 types: ",F({},"text"),",\n",F({},"password"),", ",F({},"datetime"),", ",F({},"datetime-local"),", ",F({},"date"),", ",F({},"month"),", ",F({},"time"),", ",F({},"week"),",\n",F({},"number"),", ",F({},"email"),", ",F({},"url"),", ",F({},"search"),", ",F({},"tel"),", and ",F({},"color"),"."),V({},"The static state is for form elements that can’t be modified by the user. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text."),W({id:"Pointer-Events"},"Pointer Events"),V({},"In order to have an actionable SVG within the input, like a clear or increment/decrement button, the icon must be contained within a button, not an anchor ",F({},"<a>"),", in order for pointer events to work properly."),V({},"You can see examples of the correct markup in the ",H({href:"#Icon-and-clear-button"},"Left Icon & Clear Button example")," or the ",H({href:"/components/counter/"},"Counter component"),"."),W({id:"Accessibility"},"Accessibility"),V({},"Inputs with errors should have ",F({},"aria-describedby")," to insure that the associated field level error message is read by assistive technology."),V({},"If the error message has an ",F({},'id="my-error-message"'),", then the input should have ",F({},'aria-describedby="my-error-message"')," and ",F({},'aria-invalid="true"'),"."),V({},"If you need some type of field level help and if your tooltips are available on hover, make sure they’re also available on keyboard focus. The help icon needs to be associated to the tooltip so that when the user focuses\non the icon, assistive technology reads out the content of the tooltip. If the tooltip has an ",F({},'id="help"'),", then the ",F({},"<button>")," containing the icon should have ",F({},'aria-describedby="help"'),"."),V({},"In some cases, the read-only field state is swapped and has no ",F({},"<input>"),". This is called ",F({},"static")," in the examples. In that case, don’t use a ",F({},"<label>"),". This provides better accessibility for screen readers and keyboard navigators. Instead, use a ",F({},"<span>")," with the ",F({},".slds-form-element__label")," class. Instead of an ",F({},"<input>"),", use the ",F({},".slds-form-element__static")," class inside the ",F({},".slds-form-element__control")," wrapper."),W({id:"Mobile"},"Mobile"),Object(a.createElement)(P.a,{patternSpecificText:"inputs will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(a.createElement)(r.a,{frameOnly:!0,frameTitle:"Example mobile styles for inputs"},Object(q.f)(k)),A({id:"States"},"States"),W({id:"Required"},"Required"),Object(a.createElement)(r.a,null,Object(q.f)(D,"input-required")),W({id:"Disabled"},"Disabled"),Object(a.createElement)(r.a,null,Object(q.f)(D,"input-disabled")),W({id:"Error"},"Error"),Object(a.createElement)(r.a,null,Object(q.f)(D,"input-error")),W({id:"Error-with-icon"},"Error with icon"),Object(a.createElement)(r.a,null,Object(q.f)(D,"input-error-icon")),W({id:"Read-Only"},"Read Only"),Object(a.createElement)(r.a,null,Object(q.f)(D,"read-only")),A({id:"Examples"},"Examples"),W({id:"With-Icons"},"With Icons"),J({id:"Icon-on-the-left"},"Icon on the left"),Object(a.createElement)(o.a,{type:"warning"},Object(a.createElement)("p",null,"A left aligned icon cannot be paired with fixed text.")),Object(a.createElement)(r.a,null,Object(q.f)(M,"left-icon")),J({id:"Icon-on-the-right"},"Icon on the right"),Object(a.createElement)(r.a,null,Object(q.f)(M,"right-icon")),J({id:"Icon-and-clear-button"},"Icon and clear button"),Object(a.createElement)(r.a,null,Object(q.f)(M,"double-icon")),J({id:"Icon-and-clear-button-with-loading-spinner"},"Icon and clear button, with loading spinner"),Object(a.createElement)(r.a,null,Object(q.f)(M,"double-icon-spinner")),W({id:"Fixed-Text"},"Fixed Text"),Object(a.createElement)(o.a,{type:"warning"},Object(a.createElement)("p",null,"Fixed text cannot be paired with an icon that is aligned left.")),V({},"When using the fixed text variants for prepending or appending symbols to inputs, please be sure to use ",F({},"aria-labelledby")," on the input, that points to the ids of the label, prepended text and appended text as a space separated list."),V({},"The IDs must appear in that order:"),G({},z({},"label,"),z({},"prepended"),z({},"then appended.")),V({},"The reason we do this is to create a better association between the input and the supporting labels around it."),V({},"By only using the traditional ",F({},"label[for]")," method, the fixed text is never read out in the context of editing the input value. With using the ",F({},"aria-labelledby")," attribute we can create a better label with all the visual labels associated with it, in a relevant order, that is read by assistive technology when the user needs it; when they're editing the value."),Object(a.createElement)(r.a,null,Object(q.f)(M,"fixed-text")),W({id:"Inline-Help"},"Inline Help"),Object(a.createElement)(r.a,null,Object(q.f)(M,"inline-help")),W({id:"Field-Level-Help"},"Field Level Help"),Object(a.createElement)(r.a,null,Object(q.f)(M,"field-level-help")),A({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(B.a,{name:"input",type:"component"}))},U=function(){return Object(i.a)(Y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/input/docs.mdx.js"]=function(e){function t(t){for(var a,r,o=t[0],s=t[1],c=t[2],u=0,p=[];u<o.length;u++)r=o[u],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&p.push(l[r][0]),l[r]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(d&&d(t);p.length;)p.shift()();return i.push.apply(i,c\|\|[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],a=!0,o=1;o<n.length;o++){var s=n[o];0!==l[s]&&(a=!1)}a&&(i.splice(t--,1),e=r(r.s=n[0]))}return e}var a={},l={44:0},i=[];function r(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=a,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(n,a,function(t){return e[t]}.bind(null,a));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var d=s;return i.push([700,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},700:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return Y})),n.d(t,"getContents",(function(){return U}));var a=n(0),l=n.n(a),i=n(4),r=n(2),o=(n(26),n(14)),s=n(3),c=n.n(s),d=n(17),u=n(10),p=n(7),m=n(51),b=n(8),h=n(27),f=n.n(h),E="Input Label",y="Placeholder text…",x=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,isRequired:!0},l.a.createElement(d.a,{id:e,placeholder:y,required:!0}))},g=function(){var e=f()("text-input-id-"),t=f()("error-message-id-");return l.a.createElement(b.b,{hasError:!0,labelContent:E,inputId:e,errorId:t,isRequired:!0,inlineMessage:"Enter a value."},l.a.createElement(d.a,{id:e,placeholder:y,required:!0,"aria-describedby":t}))},v=function(){var e=f()("text-input-id-"),t=f()("error-message-id-");return l.a.createElement(b.b,{hasError:!0,labelContent:E,inputId:e,hasLeftIcon:!0,errorId:t,isRequired:!0,inlineMessage:"Enter a value."},l.a.createElement(u.a,{className:"slds-input__icon",sprite:"utility",symbol:"error"}),l.a.createElement(d.a,{id:e,required:!0,placeholder:y,"aria-describedby":t}))},_=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e},l.a.createElement(d.a,{id:e,placeholder:y,disabled:!0}))},I=function(e){var t=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:t},l.a.createElement(d.a,{id:t,readOnly:!0,hasBorders:e.hasBorders,defaultValue:"Read Only",placeholder:""}))},O=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,hasLeftIcon:!0},l.a.createElement(u.a,{className:"slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default",sprite:"utility",symbol:"search"}),l.a.createElement(d.a,{id:e,placeholder:y}))},j=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,hasRightIcon:!0},l.a.createElement(u.a,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),l.a.createElement(d.a,{id:e,placeholder:y}))},w=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,hasLeftIcon:!0,hasRightIcon:!0},l.a.createElement(u.a,{className:"slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default",sprite:"utility",symbol:"search"}),l.a.createElement(d.a,{id:e,placeholder:y}),l.a.createElement(p.b,{symbol:"clear",className:"slds-input__icon slds-input__icon_right",iconClassName:"slds-icon-text-light",assistiveText:"Clear",title:"Clear"}))},S=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,hasLeftIcon:!0,hasRightIcon:!0,hasRightIconGroup:!0},l.a.createElement(u.a,{className:"slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default",sprite:"utility",symbol:"search"}),l.a.createElement(d.a,{id:e,placeholder:y}),l.a.createElement("div",{className:"slds-input__icon-group slds-input__icon-group_right"},l.a.createElement(m.a,{className:"slds-spinner_brand slds-spinner_x-small slds-input__spinner"}),l.a.createElement(p.b,{symbol:"clear",className:"slds-input__icon slds-input__icon_right",iconClassName:"slds-icon-text-light",assistiveText:"Clear",title:"Clear"})))},C=function(e){var t=f()("".concat(e.type,"-input-id-"));return l.a.createElement(b.b,{labelContent:e.label,inputId:t},l.a.createElement(d.a,{id:t,type:e.type,placeholder:e.placeholder}))};C.propTypes={type:c.a.string,label:c.a.string,placeholder:c.a.string},C.defaultProps={label:"Input Label"};var T=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,formControlClassName:"slds-input-has-fixed-addon",labelId:"fixed-text-label"},l.a.createElement("span",{className:"slds-form-element__addon",id:"fixed-text-addon-pre"},"$"),l.a.createElement(d.a,{id:e,placeholder:y,"aria-labelledby":"fixed-text-label fixed-text-addon-pre fixed-text-addon-post"}),l.a.createElement("span",{className:"slds-form-element__addon",id:"fixed-text-addon-post"},"euro"))},L=function(){var e=f()("text-input-id-"),t=f()("error-message-id-");return l.a.createElement(b.b,{labelId:"inline-text-label",labelContent:E,inputId:e,errorId:t,inlineMessage:"ex: (415)111-2222"},l.a.createElement(d.a,{id:e,placeholder:y,"aria-describedby":t}))},R=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e,hasTooltip:!0,showTooltip:!0},l.a.createElement(d.a,{id:e,placeholder:y}))},N=function(){var e=f()("text-input-id-");return l.a.createElement(b.b,{labelContent:E,inputId:e},l.a.createElement(d.a,{id:e,isBare:!0,placeholder:y}))},k=l.a.createElement(b.b,{labelContent:E,inputId:"text-input-id-0"},l.a.createElement(d.a,{id:"text-input-id-0",placeholder:y})),D=[{id:"input-required",label:"Required",element:l.a.createElement(x,null)},{id:"input-disabled",label:"Disabled",element:l.a.createElement(_,null)},{id:"input-error",label:"Error",element:l.a.createElement(g,null)},{id:"input-error-icon",label:"Error with icon",element:l.a.createElement(v,null)},{id:"read-only",label:"Readonly",element:l.a.createElement(I,null)},{id:"read-only-borders",label:"Readonly with borders",element:l.a.createElement(I,{hasBorders:!0})},{id:"static",label:"Static",element:l.a.createElement(b.h,null,l.a.createElement("span",{className:"slds-form-element__label"},"Input Label"),l.a.createElement(b.c,null,l.a.createElement("span",{className:"slds-form-element__static"},"Read Only")))}],M=[{id:"left-icon",label:"Left Icon",element:l.a.createElement(O,null)},{id:"right-icon",label:"Right Icon",element:l.a.createElement(j,null)},{id:"double-icon",label:"Left Icon & Clear Button",element:l.a.createElement(w,null)},{id:"double-icon-spinner",label:"Clear Button with Spinner",element:l.a.createElement(S,null)},{id:"email-input",label:"Email Input",element:l.a.createElement(C,{type:"email",label:"Email",placeholder:"Email"})},{id:"date-input",label:"Date Input",element:l.a.createElement(C,{type:"date"})},{id:"search-input",label:"Search Input",element:l.a.createElement(C,{type:"search"})},{id:"url-input",label:"URL Input",element:l.a.createElement(C,{type:"url"})},{id:"tel-input",label:"Telephone Input",element:l.a.createElement(C,{type:"tel"})},{id:"fixed-text",label:"Fixed text",element:l.a.createElement(T,null)},{id:"inline-help",label:"Inline Help",element:l.a.createElement(L,null)},{id:"field-level-help",label:"Field level help",demoStyles:"\n padding-top: 3rem;\n position: relative;\n ",storybookStyles:"\n padding-top: 4rem;\n position: relative;\n ",element:l.a.createElement(R,null)},{id:"bare",label:"Bare",element:l.a.createElement(N,null)}],q=n(1),P=n(36),B=n(38),H=i.c.a,F=i.c.code,A=i.c.h2,W=i.c.h3,J=i.c.h4,z=i.c.li,G=i.c.ol,V=i.c.p,Y=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"Text inputs are used for freeform data entry"),Object(a.createElement)(r.a,{exampleOnly:!0},Object(q.f)(k)),A({id:"About-Inputs"},"About Inputs"),V({},"You can style the HTML ",F({},"<input>")," element to align with the Salesforce brand by using the ",F({},".slds-input")," class on the ",F({},"<input>")," element."),V({},"The ",F({},"<input>")," element includes support for all HTML5 types: ",F({},"text"),",\n",F({},"password"),", ",F({},"datetime"),", ",F({},"datetime-local"),", ",F({},"date"),", ",F({},"month"),", ",F({},"time"),", ",F({},"week"),",\n",F({},"number"),", ",F({},"email"),", ",F({},"url"),", ",F({},"search"),", ",F({},"tel"),", and ",F({},"color"),"."),V({},"The static state is for form elements that can’t be modified by the user. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text."),W({id:"Pointer-Events"},"Pointer Events"),V({},"In order to have an actionable SVG within the input, like a clear or increment/decrement button, the icon must be contained within a button, not an anchor ",F({},"<a>"),", in order for pointer events to work properly."),V({},"You can see examples of the correct markup in the ",H({href:"#Icon-and-clear-button"},"Left Icon & Clear Button example")," or the ",H({href:"/components/counter/"},"Counter component"),"."),W({id:"Accessibility"},"Accessibility"),V({},"Inputs with errors should have ",F({},"aria-describedby")," to insure that the associated field level error message is read by assistive technology."),V({},"If the error message has an ",F({},'id="my-error-message"'),", then the input should have ",F({},'aria-describedby="my-error-message"')," and ",F({},'aria-invalid="true"'),"."),V({},"If you need some type of field level help and if your tooltips are available on hover, make sure they’re also available on keyboard focus. The help icon needs to be associated to the tooltip so that when the user focuses\non the icon, assistive technology reads out the content of the tooltip. If the tooltip has an ",F({},'id="help"'),", then the ",F({},"<button>")," containing the icon should have ",F({},'aria-describedby="help"'),"."),V({},"In some cases, the read-only field state is swapped and has no ",F({},"<input>"),". This is called ",F({},"static")," in the examples. In that case, don’t use a ",F({},"<label>"),". This provides better accessibility for screen readers and keyboard navigators. Instead, use a ",F({},"<span>")," with the ",F({},".slds-form-element__label")," class. Instead of an ",F({},"<input>"),", use the ",F({},".slds-form-element__static")," class inside the ",F({},".slds-form-element__control")," wrapper."),W({id:"Mobile"},"Mobile"),Object(a.createElement)(P.a,{patternSpecificText:"inputs will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(a.createElement)(r.a,{frameOnly:!0,frameTitle:"Example mobile styles for inputs"},Object(q.f)(k)),A({id:"States"},"States"),W({id:"Required"},"Required"),Object(a.createElement)(r.a,null,Object(q.f)(D,"input-required")),W({id:"Disabled"},"Disabled"),Object(a.createElement)(r.a,null,Object(q.f)(D,"input-disabled")),W({id:"Error"},"Error"),Object(a.createElement)(r.a,null,Object(q.f)(D,"input-error")),W({id:"Error-with-icon"},"Error with icon"),Object(a.createElement)(r.a,null,Object(q.f)(D,"input-error-icon")),W({id:"Read-Only"},"Read Only"),Object(a.createElement)(r.a,null,Object(q.f)(D,"read-only")),A({id:"Examples"},"Examples"),W({id:"With-Icons"},"With Icons"),J({id:"Icon-on-the-left"},"Icon on the left"),Object(a.createElement)(o.a,{type:"warning"},Object(a.createElement)("p",null,"A left aligned icon cannot be paired with fixed text.")),Object(a.createElement)(r.a,null,Object(q.f)(M,"left-icon")),J({id:"Icon-on-the-right"},"Icon on the right"),Object(a.createElement)(r.a,null,Object(q.f)(M,"right-icon")),J({id:"Icon-and-clear-button"},"Icon and clear button"),Object(a.createElement)(r.a,null,Object(q.f)(M,"double-icon")),J({id:"Icon-and-clear-button-with-loading-spinner"},"Icon and clear button, with loading spinner"),Object(a.createElement)(r.a,null,Object(q.f)(M,"double-icon-spinner")),W({id:"Fixed-Text"},"Fixed Text"),Object(a.createElement)(o.a,{type:"warning"},Object(a.createElement)("p",null,"Fixed text cannot be paired with an icon that is aligned left.")),V({},"When using the fixed text variants for prepending or appending symbols to inputs, please be sure to use ",F({},"aria-labelledby")," on the input, that points to the ids of the label, prepended text and appended text as a space separated list."),V({},"The IDs must appear in that order:"),G({},z({},"label,"),z({},"prepended"),z({},"then appended.")),V({},"The reason we do this is to create a better association between the input and the supporting labels around it."),V({},"By only using the traditional ",F({},"label[for]")," method, the fixed text is never read out in the context of editing the input value. With using the ",F({},"aria-labelledby")," attribute we can create a better label with all the visual labels associated with it, in a relevant order, that is read by assistive technology when the user needs it; when they're editing the value."),Object(a.createElement)(r.a,null,Object(q.f)(M,"fixed-text")),W({id:"Inline-Help"},"Inline Help"),Object(a.createElement)(r.a,null,Object(q.f)(M,"inline-help")),W({id:"Field-Level-Help"},"Field Level Help"),Object(a.createElement)(r.a,null,Object(q.f)(M,"field-level-help")),A({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(B.a,{name:"input",type:"component"}))},U=function(){return Object(i.a)(Y())}}});

package/__internal/chunked/docs/ui/components/list-builder/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- 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([693,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},693: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(74),u=a(22),p=a(23),b=a(24),E=a(11),h=a(6),y=a(28);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.e,{variant:"container-bare"},n.a.createElement(y.b,null,n.a.createElement(y.c,null,n.a.createElement(y.a,{label:"Analytics",tabIndex:"0"}))))},j=function(e){return n.a.createElement(y.e,{variant:"container-bare"},n.a.createElement(y.b,null,n.a.createElement(y.c,null,n.a.createElement(y.a,{label:"Option A",tabIndex:"0"})),n.a.createElement(y.c,null,n.a.createElement(y.a,{label:"Option B"}))))},O=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())}}});
1	+ 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([694,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},694: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(22),m=a(75),u=a(23),p=a(24),b=a(25),E=a(11),h=a(6),y=a(29);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.e,{variant:"container-bare"},n.a.createElement(y.b,null,n.a.createElement(y.c,null,n.a.createElement(y.a,{label:"Analytics",tabIndex:"0"}))))},j=function(e){return n.a.createElement(y.e,{variant:"container-bare"},n.a.createElement(y.b,null,n.a.createElement(y.c,null,n.a.createElement(y.a,{label:"Option A",tabIndex:"0"})),n.a.createElement(y.c,null,n.a.createElement(y.a,{label:"Option B"}))))},O=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())}}});

package/__internal/chunked/docs/ui/components/lookups/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/lookups/docs.mdx.js"]=function(e){function t(t){for(var s,n,i=t[0],c=t[1],r=t[2],m=0,u=[];m<i.length;m++)n=i[m],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&u.push(o[n][0]),o[n]=0;for(s in c)Object.prototype.hasOwnProperty.call(c,s)&&(e[s]=c[s]);for(d&&d(t);u.length;)u.shift()();return l.push.apply(l,r\|\|[]),a()}function a(){for(var e,t=0;t<l.length;t++){for(var a=l[t],s=!0,i=1;i<a.length;i++){var c=a[i];0!==o[c]&&(s=!1)}s&&(l.splice(t--,1),e=n(n.s=a[0]))}return e}var s={},o={46:0},l=[];function n(t){if(s[t])return s[t].exports;var a=s[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=s,n.d=function(e,t,a){n.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},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 a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(a,s,function(t){return e[t]}.bind(null,s));return a},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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=i.push.bind(i);i.push=t,i=i.slice();for(var r=0;r<i.length;r++)t(i[r]);var d=c;return l.push([671,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},671:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return T})),a.d(t,"getContents",(function(){return k}));var s=a(0),o=a.n(s),l=a(4),n=a(2),i=(a(27),a(41),a(14),a(1)),c=a(22),r=a(23),d=a(7),m=a(11),u=a(32),p=a(24),b=o.a.createElement(c.b,{id:"combobox-id-1","aria-controls":"listbox-id-1",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.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:o.a.createElement(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:3}),resultsType:"listbox",hasInteractions:!0}),h=[{id:"focused",label:"Focused",element:o.a.createElement(c.b,{id:"combobox-id-2","aria-controls":"listbox-id-2",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.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:o.a.createElement(r.e,{id:"listbox-id-2",snapshot:p.b,type:"entity",count:3}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(c.b,{id:"combobox-id-3","aria-controls":"listbox-id-3",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.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:o.a.createElement(r.e,{id:"listbox-id-3",snapshot:p.c,type:"entity",count:3}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{id:"displaying-options-based-on-input",label:"Displaying options based on user input",element:o.a.createElement(c.b,{id:"combobox-id-4","aria-controls":"listbox-id-4",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.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}),value:"salesforce",results:o.a.createElement(r.e,{id:"listbox-id-4",snapshot:p.e,term:"salesforce",type:"entity",count:4}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{id:"closed-option-selected",label:"Option Selected",element:o.a.createElement(c.b,{id:"combobox-id-5","aria-controls":"listbox-id-5",inputIconPosition:"left-right",leftInputIcon:o.a.createElement(u.a,{symbol:"account",className:"slds-icon_small",containerClassName:"slds-combobox__input-entity-icon",assistiveText:"Account",title:"Account"}),rightInputIcon:o.a.createElement(d.b,{className:"slds-input__icon slds-input__icon_right",symbol:"close",title:"Remove selected option",assistiveText:"Remove selected option"}),results:o.a.createElement(r.e,{id:"listbox-id-5",snapshot:p.b,type:"entity",count:2}),resultsType:"listbox",hasSelection:!0,value:"Salesforce.com, Inc.",selectOnly:!0})}],y=a(10),E=a(21),x=o.a.createElement("div",{className:"demo-only",style:{height:"640px"}},o.a.createElement(E.a,null,o.a.createElement(E.b,{className:"slds-modal_large"},o.a.createElement(E.e,null,o.a.createElement("h1",{className:"slds-text-heading_medium"},"Account name")),o.a.createElement(E.c,null,o.a.createElement("div",{className:"slds-lookup","data-select":"multi","data-scope":"single","data-typeahead":"true"},o.a.createElement("div",{className:"slds-form-element slds-p-top_medium slds-p-horizontal_medium slds-m-bottom_small"},o.a.createElement("label",{className:"slds-form-element__label",htmlFor:"lookup"},"Accounts"),o.a.createElement("div",{className:"slds-form-element__control slds-input-has-icon slds-input-has-icon_right"},o.a.createElement(y.a,{className:"slds-icon slds-input__icon slds-icon-text-default",sprite:"utility",symbol:"search"}),o.a.createElement("input",{id:"lookup",className:"slds-input",type:"text",role:"combobox","aria-activedescendant":"","aria-autocomplete":"list","aria-controls":"lookup-grouped-table-id-1","aria-haspopup":"listbox","aria-expanded":"true"}))),o.a.createElement("table",{className:"slds-table slds-table_bordered slds-table_cell-buffer slds-no-row-hover",role:"listbox",id:"lookup-grouped-table-id-1","aria-label":"Example table for advanced modal lookup"},o.a.createElement("thead",null,o.a.createElement("tr",null,o.a.createElement("th",{colSpan:"4",scope:"col"},o.a.createElement("div",{className:"slds-float_right"},o.a.createElement(d.b,{className:"slds-button_icon slds-button_icon-x-small",symbol:"filterList",assistiveText:"Filter List",title:"Filter List"}),o.a.createElement(d.b,{className:"slds-button_icon slds-button_icon-x-small",symbol:"sort",assistiveText:"Sort",title:"Sort"})),"5 Results, sorted by relevancy")),o.a.createElement("tr",null,o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Account Name"},"Account Name")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Location"},"Location")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Secondary Column"},"Secondary Column")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Column"},"Tertiary Column")))),o.a.createElement("tbody",null,o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s01",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Acme Landscape"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Acme Landscape"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Seattle, WA"},"Seattle, WA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s02",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"ACME Construction"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"ACME Construction"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"San Francisco, CA"},"San Francisco, CA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s03",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Action Sports"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Action Sports"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Madison, WI"},"Madison, WI")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s04",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Moderno Bistro"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Moderno Bistro"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Acton, OH"},"Acton, OH")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s05",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Cozy Kitchen"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Cozy Kitchen"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Acton, CA"},"Acton, CA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))))))),o.a.createElement(E.d,{className:"slds-modal__footer_directional"},o.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),o.a.createElement("button",{className:"slds-button slds-button_neutral"},"New Account"))))),f=a(52),_=a(65),v=o.a.createElement(c.a,{id:"combobox-id-1","aria-controls":"listbox-id-1",comboboxID:"primary-combobox-id-1",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-1"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasInteractions:!0}),g=[{id:"focused",label:"Focused",element:o.a.createElement(c.a,{id:"combobox-id-1","aria-controls":"listbox-id-1",comboboxID:"primary-combobox-id-1",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-1"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),isOpen:!0,hasFocus:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(c.a,{id:"combobox-id-2","aria-controls":"listbox-id-2",comboboxID:"primary-combobox-id-2",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-2",snapshot:p.c,type:"entity",count:4}),resultsType:"listbox","aria-activedescendant":"option1",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-2"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),isOpen:!0,hasFocus:!0})},{id:"options-selected",label:"Option(s) Selected",element:o.a.createElement(c.a,{id:"combobox-id-3","aria-controls":"listbox-id-3",comboboxID:"primary-combobox-id-3",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-3",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",hasFocus:!0,addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-3"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasSelection:!0,listboxOfSelections:o.a.createElement(_.a,{snapshot:p.f,count:2})})},{id:"focused-options-selected",label:"Focused - Option(s) Selected",element:o.a.createElement(c.a,{id:"combobox-id-4","aria-controls":"listbox-id-4",comboboxID:"primary-combobox-id-4",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-4",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",isOpen:!0,hasFocus:!0,addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-4"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasSelection:!0,listboxOfSelections:o.a.createElement(_.a,{snapshot:p.f,count:2})})}],N=l.c.a,S=l.c.code,O=l.c.h2,I=l.c.h3,F=l.c.li,C=l.c.p,j=l.c.strong,A=l.c.ul,T=function(){return Object(s.createElement)(l.b,{},Object(s.createElement)("div",{className:"doc lead"},"Lookup is an autocomplete combobox that will search against a database object."),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;",exampleOnly:!0},Object(i.f)(h,"displaying-options-based-on-input")),O({id:"About-Lookups"},"About Lookups"),C({},j({},"Note")," — A lookup is a combobox component, please find implementation documentation under the ",N({href:"/components/combobox/#Base-Combobox"},"combobox component"),"."),C({},"The lookup can parse through single or multi scoped datasets. The parsed dataset can be filtered by single or multi option selects."),C({},"You can find the lookup component throughout most data fields that allow inline inputs. Most commonly used on ",j({},"record home")," and ",j({},"object home"),"."),I({id:"Accessibility"},"Accessibility"),C({},"Lookups allow the user to have dual keyboard focus: while focus in the input search field, the user can type text into the field and simultaneously use arrow keys to navigate up and down the results list. Use the appropriate ",j({},"ARIA")," attributes in your markup in order to effectively communicate the relationship between the input field and the results list to users of assistive technology."),C({},j({},"Expected markup:")),A({},F({},"A Combobox must come with an associated ",S({},"label")," element, with an appropriate ",S({},"for")," attribute"),F({},S({},"slds-combobox")," acts as the root node to the composite Combobox widget. It takes the ",S({},'role="combobox"')," attribute as a result",A({},F({},S({},'aria-haspopup="listbox"')," attribute is then applied to indicate the Combobox will display a popup, of type ",S({},"listbox")),F({},S({},'aria-expanded="true\|false"')," attribute is applied to describe whether the popup of ",S({},"listbox")," is currently visible or not"))),F({},S({},"aria-activedescendant")," must be set to the currently selected option within the list"),F({},S({},'role="listbox"')," must be added to the list of results, each result should have ",S({},'role="option"'))),C({},j({},"Expected keyboard interactions:")),A({},F({},S({},"Up")," and ",S({},"Down")," arrow keys to cycle through the available options in the list, also updates ",S({},"aria-activedescendant")," on the input"),F({},S({},"Enter")," selects the current option and collapses the list"),F({},S({},"Escape")," collapses the list"),F({},"Character keys jumps to the first option with those characters")),O({id:"Base"},"Base"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(b)),O({id:"States"},"States"),I({id:"Focused"},"Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(h,"focused")),I({id:"Open-Item-Focused"},"Open - Item Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(h,"open-item-focused")),I({id:"Displaying-options-based-on-user-input"},"Displaying options based on user input"),Object(s.createElement)(n.a,{demoStyles:"height: 14rem;"},Object(i.f)(h,"displaying-options-based-on-input")),I({id:"Option-Selected"},"Option Selected"),Object(s.createElement)(n.a,null,Object(i.f)(h,"closed-option-selected")),O({id:"Grouped"},"Grouped"),Object(s.createElement)(n.a,{isViewport:!0},Object(i.f)(x)),O({id:"Multi-Entity"},"Multi Entity"),Object(s.createElement)(n.a,{demoStyles:"height: 17rem;"},Object(i.f)(v)),O({id:"States-2"},"States"),I({id:"Focused-2"},"Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"focused")),I({id:"Open-Item-Focused-2"},"Open - Item Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"open-item-focused")),I({id:"Option(s)-Selected"},"Option(s) Selected"),Object(s.createElement)(n.a,null,Object(i.f)(g,"options-selected")),I({id:"Focused-Option(s)-Selected"},"Focused - Option(s) Selected"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"focused-options-selected")))},k=function(){return Object(l.a)(T())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/lookups/docs.mdx.js"]=function(e){function t(t){for(var s,n,i=t[0],c=t[1],r=t[2],m=0,u=[];m<i.length;m++)n=i[m],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&u.push(o[n][0]),o[n]=0;for(s in c)Object.prototype.hasOwnProperty.call(c,s)&&(e[s]=c[s]);for(d&&d(t);u.length;)u.shift()();return l.push.apply(l,r\|\|[]),a()}function a(){for(var e,t=0;t<l.length;t++){for(var a=l[t],s=!0,i=1;i<a.length;i++){var c=a[i];0!==o[c]&&(s=!1)}s&&(l.splice(t--,1),e=n(n.s=a[0]))}return e}var s={},o={46:0},l=[];function n(t){if(s[t])return s[t].exports;var a=s[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=s,n.d=function(e,t,a){n.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},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 a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(a,s,function(t){return e[t]}.bind(null,s));return a},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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=i.push.bind(i);i.push=t,i=i.slice();for(var r=0;r<i.length;r++)t(i[r]);var d=c;return l.push([672,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},672:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return T})),a.d(t,"getContents",(function(){return k}));var s=a(0),o=a.n(s),l=a(4),n=a(2),i=(a(28),a(42),a(14),a(1)),c=a(23),r=a(24),d=a(7),m=a(11),u=a(33),p=a(25),b=o.a.createElement(c.b,{id:"combobox-id-1","aria-controls":"listbox-id-1",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.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:o.a.createElement(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:3}),resultsType:"listbox",hasInteractions:!0}),h=[{id:"focused",label:"Focused",element:o.a.createElement(c.b,{id:"combobox-id-2","aria-controls":"listbox-id-2",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.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:o.a.createElement(r.e,{id:"listbox-id-2",snapshot:p.b,type:"entity",count:3}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(c.b,{id:"combobox-id-3","aria-controls":"listbox-id-3",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.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:o.a.createElement(r.e,{id:"listbox-id-3",snapshot:p.c,type:"entity",count:3}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{id:"displaying-options-based-on-input",label:"Displaying options based on user input",element:o.a.createElement(c.b,{id:"combobox-id-4","aria-controls":"listbox-id-4",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.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}),value:"salesforce",results:o.a.createElement(r.e,{id:"listbox-id-4",snapshot:p.e,term:"salesforce",type:"entity",count:4}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{id:"closed-option-selected",label:"Option Selected",element:o.a.createElement(c.b,{id:"combobox-id-5","aria-controls":"listbox-id-5",inputIconPosition:"left-right",leftInputIcon:o.a.createElement(u.a,{symbol:"account",className:"slds-icon_small",containerClassName:"slds-combobox__input-entity-icon",assistiveText:"Account",title:"Account"}),rightInputIcon:o.a.createElement(d.b,{className:"slds-input__icon slds-input__icon_right",symbol:"close",title:"Remove selected option",assistiveText:"Remove selected option"}),results:o.a.createElement(r.e,{id:"listbox-id-5",snapshot:p.b,type:"entity",count:2}),resultsType:"listbox",hasSelection:!0,value:"Salesforce.com, Inc.",selectOnly:!0})}],y=a(10),E=a(22),x=o.a.createElement("div",{className:"demo-only",style:{height:"640px"}},o.a.createElement(E.a,null,o.a.createElement(E.b,{className:"slds-modal_large"},o.a.createElement(E.e,null,o.a.createElement("h1",{className:"slds-text-heading_medium"},"Account name")),o.a.createElement(E.c,null,o.a.createElement("div",{className:"slds-lookup","data-select":"multi","data-scope":"single","data-typeahead":"true"},o.a.createElement("div",{className:"slds-form-element slds-p-top_medium slds-p-horizontal_medium slds-m-bottom_small"},o.a.createElement("label",{className:"slds-form-element__label",htmlFor:"lookup"},"Accounts"),o.a.createElement("div",{className:"slds-form-element__control slds-input-has-icon slds-input-has-icon_right"},o.a.createElement(y.a,{className:"slds-icon slds-input__icon slds-icon-text-default",sprite:"utility",symbol:"search"}),o.a.createElement("input",{id:"lookup",className:"slds-input",type:"text",role:"combobox","aria-activedescendant":"","aria-autocomplete":"list","aria-controls":"lookup-grouped-table-id-1","aria-haspopup":"listbox","aria-expanded":"true"}))),o.a.createElement("table",{className:"slds-table slds-table_bordered slds-table_cell-buffer slds-no-row-hover",role:"listbox",id:"lookup-grouped-table-id-1","aria-label":"Example table for advanced modal lookup"},o.a.createElement("thead",null,o.a.createElement("tr",null,o.a.createElement("th",{colSpan:"4",scope:"col"},o.a.createElement("div",{className:"slds-float_right"},o.a.createElement(d.b,{className:"slds-button_icon slds-button_icon-x-small",symbol:"filterList",assistiveText:"Filter List",title:"Filter List"}),o.a.createElement(d.b,{className:"slds-button_icon slds-button_icon-x-small",symbol:"sort",assistiveText:"Sort",title:"Sort"})),"5 Results, sorted by relevancy")),o.a.createElement("tr",null,o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Account Name"},"Account Name")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Location"},"Location")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Secondary Column"},"Secondary Column")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Column"},"Tertiary Column")))),o.a.createElement("tbody",null,o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s01",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Acme Landscape"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Acme Landscape"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Seattle, WA"},"Seattle, WA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s02",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"ACME Construction"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"ACME Construction"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"San Francisco, CA"},"San Francisco, CA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s03",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Action Sports"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Action Sports"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Madison, WI"},"Madison, WI")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s04",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Moderno Bistro"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Moderno Bistro"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Acton, OH"},"Acton, OH")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s05",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Cozy Kitchen"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Cozy Kitchen"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Acton, CA"},"Acton, CA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))))))),o.a.createElement(E.d,{className:"slds-modal__footer_directional"},o.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),o.a.createElement("button",{className:"slds-button slds-button_neutral"},"New Account"))))),f=a(53),_=a(66),v=o.a.createElement(c.a,{id:"combobox-id-1","aria-controls":"listbox-id-1",comboboxID:"primary-combobox-id-1",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-1"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasInteractions:!0}),g=[{id:"focused",label:"Focused",element:o.a.createElement(c.a,{id:"combobox-id-1","aria-controls":"listbox-id-1",comboboxID:"primary-combobox-id-1",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-1"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),isOpen:!0,hasFocus:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(c.a,{id:"combobox-id-2","aria-controls":"listbox-id-2",comboboxID:"primary-combobox-id-2",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-2",snapshot:p.c,type:"entity",count:4}),resultsType:"listbox","aria-activedescendant":"option1",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-2"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),isOpen:!0,hasFocus:!0})},{id:"options-selected",label:"Option(s) Selected",element:o.a.createElement(c.a,{id:"combobox-id-3","aria-controls":"listbox-id-3",comboboxID:"primary-combobox-id-3",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-3",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",hasFocus:!0,addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-3"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasSelection:!0,listboxOfSelections:o.a.createElement(_.a,{snapshot:p.f,count:2})})},{id:"focused-options-selected",label:"Focused - Option(s) Selected",element:o.a.createElement(c.a,{id:"combobox-id-4","aria-controls":"listbox-id-4",comboboxID:"primary-combobox-id-4",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-4",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",isOpen:!0,hasFocus:!0,addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-4"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasSelection:!0,listboxOfSelections:o.a.createElement(_.a,{snapshot:p.f,count:2})})}],N=l.c.a,S=l.c.code,O=l.c.h2,I=l.c.h3,F=l.c.li,C=l.c.p,j=l.c.strong,A=l.c.ul,T=function(){return Object(s.createElement)(l.b,{},Object(s.createElement)("div",{className:"doc lead"},"Lookup is an autocomplete combobox that will search against a database object."),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;",exampleOnly:!0},Object(i.f)(h,"displaying-options-based-on-input")),O({id:"About-Lookups"},"About Lookups"),C({},j({},"Note")," — A lookup is a combobox component, please find implementation documentation under the ",N({href:"/components/combobox/#Base-Combobox"},"combobox component"),"."),C({},"The lookup can parse through single or multi scoped datasets. The parsed dataset can be filtered by single or multi option selects."),C({},"You can find the lookup component throughout most data fields that allow inline inputs. Most commonly used on ",j({},"record home")," and ",j({},"object home"),"."),I({id:"Accessibility"},"Accessibility"),C({},"Lookups allow the user to have dual keyboard focus: while focus in the input search field, the user can type text into the field and simultaneously use arrow keys to navigate up and down the results list. Use the appropriate ",j({},"ARIA")," attributes in your markup in order to effectively communicate the relationship between the input field and the results list to users of assistive technology."),C({},j({},"Expected markup:")),A({},F({},"A Combobox must come with an associated ",S({},"label")," element, with an appropriate ",S({},"for")," attribute"),F({},S({},"slds-combobox")," acts as the root node to the composite Combobox widget. It takes the ",S({},'role="combobox"')," attribute as a result",A({},F({},S({},'aria-haspopup="listbox"')," attribute is then applied to indicate the Combobox will display a popup, of type ",S({},"listbox")),F({},S({},'aria-expanded="true\|false"')," attribute is applied to describe whether the popup of ",S({},"listbox")," is currently visible or not"))),F({},S({},"aria-activedescendant")," must be set to the currently selected option within the list"),F({},S({},'role="listbox"')," must be added to the list of results, each result should have ",S({},'role="option"'))),C({},j({},"Expected keyboard interactions:")),A({},F({},S({},"Up")," and ",S({},"Down")," arrow keys to cycle through the available options in the list, also updates ",S({},"aria-activedescendant")," on the input"),F({},S({},"Enter")," selects the current option and collapses the list"),F({},S({},"Escape")," collapses the list"),F({},"Character keys jumps to the first option with those characters")),O({id:"Base"},"Base"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(b)),O({id:"States"},"States"),I({id:"Focused"},"Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(h,"focused")),I({id:"Open-Item-Focused"},"Open - Item Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(h,"open-item-focused")),I({id:"Displaying-options-based-on-user-input"},"Displaying options based on user input"),Object(s.createElement)(n.a,{demoStyles:"height: 14rem;"},Object(i.f)(h,"displaying-options-based-on-input")),I({id:"Option-Selected"},"Option Selected"),Object(s.createElement)(n.a,null,Object(i.f)(h,"closed-option-selected")),O({id:"Grouped"},"Grouped"),Object(s.createElement)(n.a,{isViewport:!0},Object(i.f)(x)),O({id:"Multi-Entity"},"Multi Entity"),Object(s.createElement)(n.a,{demoStyles:"height: 17rem;"},Object(i.f)(v)),O({id:"States-2"},"States"),I({id:"Focused-2"},"Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"focused")),I({id:"Open-Item-Focused-2"},"Open - Item Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"open-item-focused")),I({id:"Option(s)-Selected"},"Option(s) Selected"),Object(s.createElement)(n.a,null,Object(i.f)(g,"options-selected")),I({id:"Focused-Option(s)-Selected"},"Focused - Option(s) Selected"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"focused-options-selected")))},k=function(){return Object(l.a)(T())}}});

package/__internal/chunked/docs/ui/components/map/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/map/docs.mdx.js"]=function(e){function t(t){for(var a,l,i=t[0],s=t[1],c=t[2],u=0,m=[];u<i.length;u++)l=i[u],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&m.push(o[l][0]),o[l]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(d&&d(t);m.length;)m.shift()();return r.push.apply(r,c\|\|[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],a=!0,i=1;i<n.length;i++){var s=n[i];0!==o[s]&&(a=!1)}a&&(r.splice(t--,1),e=l(l.s=n[0]))}return e}var a={},o={47:0},r=[];function l(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,l),n.l=!0,n.exports}l.m=e,l.c=a,l.d=function(e,t,n){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(l.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)l.d(n,a,function(t){return e[t]}.bind(null,a));return n},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=s;return r.push([~~673~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~673~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return P})),n.d(t,"getContents",(function(){return F}));var a=n(0),o=n.n(a),r=n(4),l=n(2),i=n(1),s=n(35),c=n(32),d=n(21),u=n(5),m=n.n(u),p=[{title:"Worldwide Corporate Headquarters",address:"The Landmark @ One Market, San Francisco, CA"},{title:"salesforce.com inc Atlanta",address:"950 East Paces Ferry Road NE, Atlanta, GA"},{title:"salesforce.com inc Bellevue",address:"929 108th Ave NE, Bellevue, WA"},{title:"salesforce.com inc Boston",address:"500 Boylston Street 19th Floor, Boston, MA"},{title:"salesforce.com inc Chicago",address:"111 West Illinois Street, Chicago, IL"},{title:"salesforce.com inc Herndon",address:"2550 Wasser Terrace, Herndon, VA"},{title:"salesforce.com inc Hillsboro",address:"2035 NE Cornelius Pass Road, Hillsboro, OR"},{title:"salesforce.com inc Indy",address:"111 Monument Circle, Indianapolis, IN"},{title:"salesforce.com inc Irvine",address:"300 Spectrum Center Drive, Irvine, CA"}];function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function b(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function y(e,t){return(y=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function E(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,a=g(e);if(t){var o=g(this).constructor;n=Reflect.construct(a,arguments,o)}else n=a.apply(this,arguments);return S(this,n)}}function S(e,t){return!t\|\|"object"!==f(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var v=function(e){return o.a.createElement("div",{className:"slds-coordinates"},o.a.createElement("div",{className:"slds-coordinates__header"},o.a.createElement("h2",{className:"slds-coordinates__title"},e.heading)),o.a.createElement("ul",{className:"slds-coordinates__list"},p.map((function(t,n){return o.a.createElement("li",{className:"slds-coordinates__item",key:n},o.a.createElement("span",{className:"slds-assistive-text","aria-live":"polite"},parseInt(e.selection,0)===n?t.title+" is currently selected":null),o.a.createElement(_,{title:t.title,address:t.address,selected:parseInt(e.selection,0)===n}))}))))},_=function(e){return o.a.createElement("button",{className:"slds-coordinates__item-action slds-button_reset slds-media","aria-pressed":e.selected},o.a.createElement("span",{className:"slds-media__figure"},o.a.createElement(c.a,{symbol:"account"})),o.a.createElement("span",{className:"slds-media__body"},o.a.createElement("span",{className:"slds-text-link"},e.title),o.a.createElement("span",null,e.address)))},O=function(){return o.a.createElement(d.d,null,o.a.createElement("button",{className:"slds-button slds-button_brand"},"Open in Google Maps"))},j=function(e){return o.a.createElement("div",{className:"slds-map"},!e.hideMap&&o.a.createElement("iframe",{id:"GoogleMapID",title:"Google Maps iframe",src:"https://www.google.com/maps/embed/v1/place?q=1%20market%2C%20san%20francisco&key=AIzaSyDliLquGXGts9S8YtkWVolSQEJdBL1ZuWc"}))},C=function(e){return o.a.createElement("div",{className:m()("slds-grid",e.multipleCoordinates&&"slds-has-coordinates")},o.a.createElement("div",{className:"slds-map_container"},o.a.createElement(j,{hideMap:e.hideMap})),e.multipleCoordinates&&o.a.createElement(v,{heading:e.heading,selection:e.selection}))},M=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&y(e,t)}(l,e);var t,n,a,r=E(l);function l(){return b(this,l),r.apply(this,arguments)}return t=l,(n=[{key:"render",value:function(){var e=this.props,t=e.heading,n=e.multipleCoordinates,a=e.selection,r=e.hideMap,l=e.footer;return o.a.createElement(d.b,{className:"slds-modal_medium","aria-labelledby":"modal-heading-id-01"},o.a.createElement(d.e,null,o.a.createElement("h1",{id:"modal-heading-id-01",className:"slds-text-heading_medium slds-hyphenate"},t)),o.a.createElement(d.c,{id:"modal-content-id-01"},o.a.createElement(C,{multipleCoordinates:n,heading:t,selection:a,hideMap:r})),l&&o.a.createElement(O,null))}}])&&h(t.prototype,n),a&&h(t,a),l}(a.Component),N=o.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0}),w=[{id:"multiple-coordinates-item-one-selection",label:"First Coordinate Selected",element:o.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,selection:"0"})},{id:"multiple-coordinates-item-two-selection",label:"Second Coordinate Selected",element:o.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,selection:"1"})}],x=[{id:"single-coordinate",label:"In Modal - Single Coordinate - With Footer",element:o.a.createElement(o.a.Fragment,null,o.a.createElement(M,{heading:"Geo Code: 37°48'08.3\"N 122°15'55.2W",footer:!0}),o.a.createElement("div",{className:"slds-backdrop slds-backdrop_open",role:"presentation"}))},{id:"multiple-coordinates",label:"In Modal - Multiple Coordinates",element:o.a.createElement(o.a.Fragment,null,o.a.createElement(M,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,footer:!0}),o.a.createElement("div",{className:"slds-backdrop slds-backdrop_open",role:"presentation"}))}],k=r.c.h2,I=r.c.h3,P=function(){return Object(a.createElement)(r.b,{},Object(a.createElement)("div",{className:"lead doc"},"A map component is used to find a location"),k({id:"Base"},"Base"),Object(a.createElement)(l.a,null,Object(i.f)(N)),I({id:"Mobile"},"Mobile"),Object(a.createElement)(s.a,{patternSpecificText:"maps will have increased header text size along with other small adjustments"}),Object(a.createElement)(l.a,{frameOnly:!0,frameTitle:"Example mobile styles for maps"},Object(i.f)(N)),k({id:"States"},"States"),I({id:"First-Coordinate-Selected"},"First Coordinate Selected"),Object(a.createElement)(l.a,null,Object(i.f)(w,"multiple-coordinates-item-one-selection")),I({id:"Second-Coordinate-Selected"},"Second Coordinate Selected"),Object(a.createElement)(l.a,null,Object(i.f)(w,"multiple-coordinates-item-two-selection")),k({id:"Examples"},"Examples"),I({id:"In-Modal-Single-Coordinate-With-Footer"},"In Modal - Single Coordinate With Footer"),Object(a.createElement)(l.a,{isViewport:!0,demoStyles:"height: 660px;"},Object(i.f)(x,"single-coordinate")),I({id:"In-Modal-Multiple-Coordinates-With-Footer"},"In Modal - Multiple Coordinates With Footer"),Object(a.createElement)(l.a,{isViewport:!0,demoStyles:"height: 660px;"},Object(i.f)(x,"multiple-coordinates")))},F=function(){return Object(r.a)(P())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/map/docs.mdx.js"]=function(e){function t(t){for(var a,l,i=t[0],s=t[1],c=t[2],u=0,m=[];u<i.length;u++)l=i[u],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&m.push(o[l][0]),o[l]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(d&&d(t);m.length;)m.shift()();return r.push.apply(r,c\|\|[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],a=!0,i=1;i<n.length;i++){var s=n[i];0!==o[s]&&(a=!1)}a&&(r.splice(t--,1),e=l(l.s=n[0]))}return e}var a={},o={47:0},r=[];function l(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,l),n.l=!0,n.exports}l.m=e,l.c=a,l.d=function(e,t,n){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(l.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)l.d(n,a,function(t){return e[t]}.bind(null,a));return n},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=s;return r.push([674,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},674:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return P})),n.d(t,"getContents",(function(){return F}));var a=n(0),o=n.n(a),r=n(4),l=n(2),i=n(1),s=n(36),c=n(33),d=n(22),u=n(5),m=n.n(u),p=[{title:"Worldwide Corporate Headquarters",address:"The Landmark @ One Market, San Francisco, CA"},{title:"salesforce.com inc Atlanta",address:"950 East Paces Ferry Road NE, Atlanta, GA"},{title:"salesforce.com inc Bellevue",address:"929 108th Ave NE, Bellevue, WA"},{title:"salesforce.com inc Boston",address:"500 Boylston Street 19th Floor, Boston, MA"},{title:"salesforce.com inc Chicago",address:"111 West Illinois Street, Chicago, IL"},{title:"salesforce.com inc Herndon",address:"2550 Wasser Terrace, Herndon, VA"},{title:"salesforce.com inc Hillsboro",address:"2035 NE Cornelius Pass Road, Hillsboro, OR"},{title:"salesforce.com inc Indy",address:"111 Monument Circle, Indianapolis, IN"},{title:"salesforce.com inc Irvine",address:"300 Spectrum Center Drive, Irvine, CA"}];function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function b(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function y(e,t){return(y=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function E(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,a=g(e);if(t){var o=g(this).constructor;n=Reflect.construct(a,arguments,o)}else n=a.apply(this,arguments);return S(this,n)}}function S(e,t){return!t\|\|"object"!==f(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var v=function(e){return o.a.createElement("div",{className:"slds-coordinates"},o.a.createElement("div",{className:"slds-coordinates__header"},o.a.createElement("h2",{className:"slds-coordinates__title"},e.heading)),o.a.createElement("ul",{className:"slds-coordinates__list"},p.map((function(t,n){return o.a.createElement("li",{className:"slds-coordinates__item",key:n},o.a.createElement("span",{className:"slds-assistive-text","aria-live":"polite"},parseInt(e.selection,0)===n?t.title+" is currently selected":null),o.a.createElement(_,{title:t.title,address:t.address,selected:parseInt(e.selection,0)===n}))}))))},_=function(e){return o.a.createElement("button",{className:"slds-coordinates__item-action slds-button_reset slds-media","aria-pressed":e.selected},o.a.createElement("span",{className:"slds-media__figure"},o.a.createElement(c.a,{symbol:"account"})),o.a.createElement("span",{className:"slds-media__body"},o.a.createElement("span",{className:"slds-text-link"},e.title),o.a.createElement("span",null,e.address)))},O=function(){return o.a.createElement(d.d,null,o.a.createElement("button",{className:"slds-button slds-button_brand"},"Open in Google Maps"))},j=function(e){return o.a.createElement("div",{className:"slds-map"},!e.hideMap&&o.a.createElement("iframe",{id:"GoogleMapID",title:"Google Maps iframe",src:"https://www.google.com/maps/embed/v1/place?q=1%20market%2C%20san%20francisco&key=AIzaSyDliLquGXGts9S8YtkWVolSQEJdBL1ZuWc"}))},C=function(e){return o.a.createElement("div",{className:m()("slds-grid",e.multipleCoordinates&&"slds-has-coordinates")},o.a.createElement("div",{className:"slds-map_container"},o.a.createElement(j,{hideMap:e.hideMap})),e.multipleCoordinates&&o.a.createElement(v,{heading:e.heading,selection:e.selection}))},M=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&y(e,t)}(l,e);var t,n,a,r=E(l);function l(){return b(this,l),r.apply(this,arguments)}return t=l,(n=[{key:"render",value:function(){var e=this.props,t=e.heading,n=e.multipleCoordinates,a=e.selection,r=e.hideMap,l=e.footer;return o.a.createElement(d.b,{className:"slds-modal_medium","aria-labelledby":"modal-heading-id-01"},o.a.createElement(d.e,null,o.a.createElement("h1",{id:"modal-heading-id-01",className:"slds-text-heading_medium slds-hyphenate"},t)),o.a.createElement(d.c,{id:"modal-content-id-01"},o.a.createElement(C,{multipleCoordinates:n,heading:t,selection:a,hideMap:r})),l&&o.a.createElement(O,null))}}])&&h(t.prototype,n),a&&h(t,a),l}(a.Component),N=o.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0}),w=[{id:"multiple-coordinates-item-one-selection",label:"First Coordinate Selected",element:o.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,selection:"0"})},{id:"multiple-coordinates-item-two-selection",label:"Second Coordinate Selected",element:o.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,selection:"1"})}],x=[{id:"single-coordinate",label:"In Modal - Single Coordinate - With Footer",element:o.a.createElement(o.a.Fragment,null,o.a.createElement(M,{heading:"Geo Code: 37°48'08.3\"N 122°15'55.2W",footer:!0}),o.a.createElement("div",{className:"slds-backdrop slds-backdrop_open",role:"presentation"}))},{id:"multiple-coordinates",label:"In Modal - Multiple Coordinates",element:o.a.createElement(o.a.Fragment,null,o.a.createElement(M,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,footer:!0}),o.a.createElement("div",{className:"slds-backdrop slds-backdrop_open",role:"presentation"}))}],k=r.c.h2,I=r.c.h3,P=function(){return Object(a.createElement)(r.b,{},Object(a.createElement)("div",{className:"lead doc"},"A map component is used to find a location"),k({id:"Base"},"Base"),Object(a.createElement)(l.a,null,Object(i.f)(N)),I({id:"Mobile"},"Mobile"),Object(a.createElement)(s.a,{patternSpecificText:"maps will have increased header text size along with other small adjustments"}),Object(a.createElement)(l.a,{frameOnly:!0,frameTitle:"Example mobile styles for maps"},Object(i.f)(N)),k({id:"States"},"States"),I({id:"First-Coordinate-Selected"},"First Coordinate Selected"),Object(a.createElement)(l.a,null,Object(i.f)(w,"multiple-coordinates-item-one-selection")),I({id:"Second-Coordinate-Selected"},"Second Coordinate Selected"),Object(a.createElement)(l.a,null,Object(i.f)(w,"multiple-coordinates-item-two-selection")),k({id:"Examples"},"Examples"),I({id:"In-Modal-Single-Coordinate-With-Footer"},"In Modal - Single Coordinate With Footer"),Object(a.createElement)(l.a,{isViewport:!0,demoStyles:"height: 660px;"},Object(i.f)(x,"single-coordinate")),I({id:"In-Modal-Multiple-Coordinates-With-Footer"},"In Modal - Multiple Coordinates With Footer"),Object(a.createElement)(l.a,{isViewport:!0,demoStyles:"height: 660px;"},Object(i.f)(x,"multiple-coordinates")))},F=function(){return Object(r.a)(P())}}});

package/__internal/chunked/docs/ui/components/menus/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/menus/docs.mdx.js"]=function(e){function t(t){for(var l,r,o=t[0],c=t[1],d=t[2],m=0,u=[];m<o.length;m++)r=o[m],Object.prototype.hasOwnProperty.call(a,r)&&a[r]&&u.push(a[r][0]),a[r]=0;for(l in c)Object.prototype.hasOwnProperty.call(c,l)&&(e[l]=c[l]);for(i&&i(t);u.length;)u.shift()();return s.push.apply(s,d\|\|[]),n()}function n(){for(var e,t=0;t<s.length;t++){for(var n=s[t],l=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(l=!1)}l&&(s.splice(t--,1),e=r(r.s=n[0]))}return e}var l={},a={48:0},s=[];function r(t){if(l[t])return l[t].exports;var n=l[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=l,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)r.d(n,l,function(t){return e[t]}.bind(null,l));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=o.push.bind(o);o.push=t,o=o.slice();for(var d=0;d<o.length;d++)t(o[d]);var i=c;return s.push([667,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},667:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return X})),n.d(t,"getContents",(function(){return Y}));var l=n(0),a=n.n(l),s=n(4),r=n(2),o=n(25),c=n(15),d=n(14),i=n(3),m=n.n(i);function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function h(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e,t){for(var n=0;n<t.length;n++){var l=t[n];l.enumerable=l.enumerable\|\|!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}function b(e,t){return(b=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function g(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,l=f(e);if(t){var a=f(this).constructor;n=Reflect.construct(l,arguments,a)}else n=l.apply(this,arguments);return E(this,n)}}function E(e,t){return!t\|\|"object"!==u(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var w=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&b(e,t)}(o,e);var t,n,s,r=g(o);function o(){return h(this,o),r.apply(this,arguments)}return t=o,(n=[{key:"render",value:function(){return a.a.createElement(l.Fragment,null,this.props.fragmentChildren)}}])&&p(t.prototype,n),s&&p(t,s),o}(a.a.Component);w.propTypes={fragmentChildren:m.a.node.isRequired};var O=n(9),y=n(10),_=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"260px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-5"},a.a.createElement(O.g,{tabIndex:"0"},"Menu Item One"),a.a.createElement(O.g,null,"Menu Item Two"),a.a.createElement(O.g,null,"Menu Item Three"),a.a.createElement(O.g,null,"Menu Item Four"),a.a.createElement(O.g,null,"Menu Item Five"),a.a.createElement(O.g,null,"Menu Item Six"),a.a.createElement(O.g,null,"Menu Item Seven"),a.a.createElement(O.g,null,"Menu Item Eight"),a.a.createElement(O.g,null,"Menu Item Nine"),a.a.createElement(O.g,null,"Menu Item Ten")))))},j=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"300px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-7"},a.a.createElement(O.g,{tabIndex:"0"},"Menu Item One"),a.a.createElement(O.g,null,"Menu Item Two"),a.a.createElement(O.g,null,"Menu Item Three"),a.a.createElement(O.g,null,"Menu Item Four"),a.a.createElement(O.g,null,"Menu Item Five"),a.a.createElement(O.g,null,"Menu Item Six"),a.a.createElement(O.g,null,"Menu Item Seven"),a.a.createElement(O.g,null,"Menu Item Eight"),a.a.createElement(O.g,null,"Menu Item Nine"),a.a.createElement(O.g,null,"Menu Item Ten")))))},v=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"430px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-10"},a.a.createElement(O.g,{tabIndex:"0"},"Menu Item One"),a.a.createElement(O.g,null,"Menu Item Two"),a.a.createElement(O.g,null,"Menu Item Three"),a.a.createElement(O.g,null,"Menu Item Four"),a.a.createElement(O.g,null,"Menu Item Five"),a.a.createElement(O.g,null,"Menu Item Six"),a.a.createElement(O.g,null,"Menu Item Seven"),a.a.createElement(O.g,null,"Menu Item Eight"),a.a.createElement(O.g,null,"Menu Item Nine"),a.a.createElement(O.g,null,"Menu Item Ten")))))},I=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"260px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-with-icon-5"},a.a.createElement(O.g,{tabIndex:"0"},a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},x=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"320px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-with-icon-7"},a.a.createElement(O.g,{tabIndex:"0"},a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},M=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"450px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-with-icon-10"},a.a.createElement(O.g,{tabIndex:"0"},a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},N=[{id:"dropdown-menu-length-5",label:"5 items",element:a.a.createElement(_,null)},{id:"dropdown-menu-length-7",label:"7 items",element:a.a.createElement(j,null)},{id:"dropdown-menu-length-10",label:"10 items",element:a.a.createElement(v,null)},{id:"dropdown-menu-length-5-icon",label:"5 items with icon",element:a.a.createElement(I,null)},{id:"dropdown-menu-length-7-icon",label:"7 items with icon",element:a.a.createElement(x,null)},{id:"dropdown-menu-length-10-icon",label:"10 items with icon",element:a.a.createElement(M,null)}],S=n(5),T=n.n(S),k=["ariaExpanded","className","children","iconRight","itemName","tabIndex","title","submenuClassnames"];function C(){return(C=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}function P(e,t){if(null==e)return{};var n,l,a=function(e,t){if(null==e)return{};var n,l,a={},s=Object.keys(e);for(l=0;l<s.length;l++)n=s[l],t.indexOf(n)>=0\|\|(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(l=0;l<s.length;l++)n=s[l],t.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var R=a.a.createElement(y.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_small slds-shrink-none",sprite:"utility",symbol:"right"}),A=function(e){var t=e.ariaExpanded,n=e.className,l=(e.children,e.iconRight),s=e.itemName,r=e.tabIndex,o=e.title,c=e.submenuClassnames,d=P(e,k);return a.a.createElement("li",C({},d,{className:T()("slds-dropdown__item slds-has-submenu",n),role:"presentation"}),a.a.createElement("a",{role:"menuitem",href:"#","aria-haspopup":"true","aria-expanded":t,tabIndex:r\|\|"-1",onClick:function(e){return e.preventDefault()}},a.a.createElement("span",{className:"slds-truncate",title:o\|\|s},e.itemName),l\|\|null),a.a.createElement(O.f,{className:T()("slds-dropdown_submenu",c)},a.a.createElement(O.h,{ariaLabel:s},a.a.createElement(O.g,{tabIndex:"0"},"Submenu Item One"),a.a.createElement(O.g,null,"Submenu Item Two"),a.a.createElement(O.g,null,"Submenu Item Three"),a.a.createElement("li",{className:"slds-has-divider_top-space",role:"separator"}),a.a.createElement(O.g,null,"Submenu Item Four"))))},W=function(e){var t=e.ariaExpanded,n=e.parentIsOpen,l=e.submenuClassnames;return a.a.createElement(O.l,{isOpen:n},a.a.createElement(O.f,{className:"slds-dropdown_left"},a.a.createElement(O.h,{ariaLabel:"Show More"},a.a.createElement(O.g,{tabIndex:"0"},"Menu Item One"),a.a.createElement(O.g,null,"Menu Item Two"),a.a.createElement(A,{ariaExpanded:t,iconRight:R,itemName:"Menu Item Three",submenuClassnames:l\|\|"slds-dropdown_submenu-right"}))))},L=(n(136),n(1)),F=s.c.code,D=s.c.h2,B=s.c.h3,H=s.c.h4,J=s.c.li,q=s.c.p,K=s.c.table,$=s.c.tbody,z=s.c.td,G=s.c.th,Q=s.c.thead,U=s.c.tr,V=s.c.ul,X=function(){return Object(l.createElement)(s.b,{},Object(l.createElement)("div",{className:"doc lead"},"A Menu offers a list of actions or functions that a user can access."),Object(l.createElement)(r.a,{exampleOnly:!0,demoStyles:"height: 150px;"},Object(l.createElement)(O.d,{hasLeftIcon:!0})),D({id:"About-Menu"},"About Menu"),q({},"The unordered menu list ",F({},"<ul>")," with ",F({},'role="menu"')," should be contained in a ",F({},"<div>")," with the class ",F({},".slds-dropdown"),"."),q({},"The target HTML element and dropdown need to be wrapped in the class ",F({},".slds-dropdown-trigger dropdown-trigger_click"),"."),B({id:"Accessibility"},"Accessibility"),H({id:"Markup"},"Markup"),V({},J({},"The menu trigger is a focusable element (",F({},"<a>")," or ",F({},"<button>"),") with ",F({},'aria-haspopup="true"')),J({},"The menu trigger has the ",F({},"aria-expanded")," attribute applied and the value is set to ",F({},'"true"')," or ",F({},'"false"')," depending on if the menu is open or not."),J({},"The menu has ",F({},'role="menu"')," and an ",F({},"aria-label")," attribute whose value is the name of the menu trigger"),J({},"The menu items have ",F({},'role="menuitem"'),", ",F({},'role="menuitemcheckbox"'),", or ",F({},'role="menuitemradio"'),", depending on the selection options")),H({id:"Keyboard-Interactions"},"Keyboard Interactions"),q({},"The main thing that distinguishes menus from other popover blocks is keyboard navigation: elsewhere, users press the Tab key to navigate through actionable items, but in a menu, users press the arrow keys to navigate."),V({},J({},"Arrow keys cycle focus through menu items (including disabled menu items)"),J({},"If a menu item opens a submenu, pressing Enter or the right arrow key opens the submenu and focus goes to the first item in the submenu"),J({},"If a submenu is open, pressing the left arrow key closes the submenu and puts focus back on the menu item that opened the submenu"),J({},"Tab key closes the menu and moves focus to the next focusable element on the page"),J({},"Esc key closes the menu and moves focus back to the menu trigger"),J({},"Any character key moves focus to the next menu item that starts with that character, if applicable")),D({id:"Base"},"Base"),Object(l.createElement)(c.a,{title:"Menu Base"},Object(l.createElement)(r.a,{demoStyles:"height: 200px;"},Object(l.createElement)(O.b,{className:"slds-dropdown_left"}))),D({id:"With-Subheaders"},"With Subheaders"),Object(l.createElement)(d.a,{type:"a11y",header:"Accessible Role"},Object(l.createElement)("p",null,"A subheading must have ",Object(l.createElement)("code",null,'role="separator"')," on the"," ",Object(l.createElement)("code",null,"<li>")," and the content inside the ",Object(l.createElement)("code",null,"<li>")," ","should be in a ",Object(l.createElement)("code",null,"<span>"),".")),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("li",{className:"slds-dropdown__header slds-truncate",title:"Menu Sub Heading",role:"separator"},Object(l.createElement)("span",null,"Menu Sub Heading"))),Object(l.createElement)(c.a,{title:"Menu with Subheaders"},Object(l.createElement)(r.a,{demoStyles:"height: 300px;"},Object(l.createElement)(O.k,null))),D({id:"With-Icons"},"With Icons"),q({},"Icons can be included on either the left, right, or both sides of an option."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"If using one of the icons to indicate selection (e.g. checkmarks), be sure to check out the"," ",Object(l.createElement)("a",{href:"#With-Selectable-Items"},"Menus with Selectable Items")," docs for the Accessibility implications.")),B({id:"Icon-on-the-Left"},"Icon on the Left"),Object(l.createElement)(c.a,{title:"Menu with Icon Left"},Object(l.createElement)(r.a,{demoStyles:"height: 150px;"},Object(l.createElement)(O.d,{hasLeftIcon:!0}))),B({id:"Icon-on-the-Right"},"Icon on the Right"),Object(l.createElement)(c.a,{title:"Menu with Icon Right"},Object(l.createElement)(r.a,{demoStyles:"height: 150px;"},Object(l.createElement)(O.e,null))),B({id:"Double-Icon"},"Double Icon"),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"If using one of the icons to indicate selection (e.g. checkmarks), be sure to check out the"," ",Object(l.createElement)("a",{href:"#With-Selectable-Items"},"Menus with Selectable Items")," docs.")),Object(l.createElement)(c.a,{title:"Menu with Double Icon"},Object(l.createElement)(r.a,{demoStyles:"height: 150px;"},Object(l.createElement)(O.c,null))),D({id:"With-Selectable-Items"},"With Selectable Items"),q({},"When creating a menu with selectable items:"),V({},J({},"All selectable items need the proper role, either ",F({},'role="menuitemcheckbox"')," or ",F({},'role="menuitemradio"')),J({},"All selectable items should contain an icon"),J({},"Each icon must have the class ",F({},"slds-icon_selected")," on the ",F({},"<svg>"),V({},J({},"This hides icons of non-selected items"))),J({},"Items that have been selected need ",F({},'aria-checked="true"')," on the ",F({},"<a>")," element")),Object(l.createElement)(d.a,{type:"a11y",header:"Revealing Icons for Selected Items"},Object(l.createElement)("p",null,"A selected item reveals its icon when the class"," ",Object(l.createElement)("code",null,"slds-is-selected")," is applied to the ",Object(l.createElement)("code",null,"<li>")," and"," ",Object(l.createElement)("code",null,'aria-checked="true"')," is applied to its"," ",Object(l.createElement)("code",null,"menuitemcheckbox")," or ",Object(l.createElement)("code",null,"menuitemradio")," child.")),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("li",{className:"slds-dropdown__item slds-is-selected",role:"presentation"},Object(l.createElement)("a",{role:"menuitemcheckbox","aria-checked":"true"},"..."))),Object(l.createElement)(c.a,{title:"Menu with Selectable Icon Left"},Object(l.createElement)(r.a,{demoStyles:"height: 150px;"},Object(l.createElement)(O.d,{isSelectable:!0}))),D({id:"With-Status-Notifications"},"With Status Notifications"),Object(l.createElement)(r.a,{demoStyles:"height: 250px;"},Object(l.createElement)(O.i,null)),q({},"To enable menu items to reflect status level notifications like Error, Success and Warning, place a modifier class onto the ",F({},"menuitem")," that has the offending notification."),q({},"The class is based on the ",F({},"slds-has-${level}")," pattern, where ",F({},"${level}")," corresponds to the level you wish to set."),V({},J({},F({},"slds-has-error")),J({},F({},"slds-has-success")),J({},F({},"slds-has-warning"))),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("a",{className:"slds-has-warning",href:"#",onClick:function(e){return e.preventDefault()},role:"menuitem",tabIndex:"-1"},"...")),Object(l.createElement)(d.a,{type:"note",header:"Warning Icon"},Object(l.createElement)("p",null,"For warning level menu items it is required that you switch the icon to use the ",Object(l.createElement)("code",null,"currentColor")," variant for icons.")),D({id:"With-Overflow-Scrolling"},"With Overflow Scrolling"),Object(l.createElement)(c.a,{title:"Menu with Overflow Scrolling"},Object(l.createElement)(r.a,{demoStyles:"height: 220px;"},Object(l.createElement)(O.j,{className:"slds-dropdown_left slds-dropdown_length-5"}))),q({},"To force overflow scrolling after either 5, 7, or 10 items, add the modifier ",F({},"slds-dropdown_length-")," to the ",F({},"<div>")," with class ",F({},"slds-dropdown")," where the ",F({},"")," is either 5, 7, or 10."),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-dropdown slds-dropdown_length-5"},"...")),B({id:"Scrolling-for-Menu-Items-with-Icons"},"Scrolling for Menu Items with Icons"),q({},"To force overflow scrolling after either 5, 7, or 10 items with icons, add the modifier ",F({},"slds-dropdown_length-with-icon-")," to the ",F({},"<div>")," with class ",F({},"slds-dropdown")," where the ",F({},"")," is either 5, 7, or 10."),Object(l.createElement)(r.a,{demoStyles:"height: 250px;"},Object(l.createElement)(O.j,{isSelectable:!0,isSelected:"true",className:"slds-dropdown_left slds-dropdown_length-with-icon-5"})),D({id:"With-a-Submenu"},"With a Submenu"),q({},"To create a menu with a submenu, add the ",F({},"slds-has-submenu")," class to the list item, ",F({},"<li>"),", that will open the submenu."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"Any menu item that opens a submenu must have ",Object(l.createElement)("code",null,'aria-haspop="true"')," ","on the ",Object(l.createElement)("code",null,"<a>")," within the ",Object(l.createElement)("code",null,"<li>"),". In order to open the submenu, set ",Object(l.createElement)("code",null,"aria-expanded")," to ",Object(l.createElement)("code",null,"true")," on that ",Object(l.createElement)("code",null,"<a>")," when the user clicks or hovers over the list item, or presses enter while focused on the list item. Additionally, the submenu should have ",Object(l.createElement)("code",null,'role="menu"')," and an ",Object(l.createElement)("code",null,"aria-label")," ","attribute whose value matches the name of the ",Object(l.createElement)("code",null,"<li>")," that opened the submenu.")),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("li",{className:"slds-dropdown__item slds-has-submenu",role:"presentation"},Object(l.createElement)("a",{role:"menuitem",href:"#",onClick:function(e){return e.preventDefault()},"aria-haspopup":"true","aria-expanded":"true",tabIndex:"-1"},"..."),Object(l.createElement)("div",{className:"slds-dropdown slds-dropdown_submenu slds-dropdown_submenu-left"},Object(l.createElement)("ul",{className:"slds-dropdown__list",role:"menu","aria-label":"Name of Item that Opened this Menu"},"...")))),B({id:"Submenu-to-Right"},"Submenu to Right"),q({},"To open the submenu to the right of the main menu, add ",F({},"slds-dropdown_submenu-right")," to the ",F({},"<div>")," with the ",F({},"slds-dropdown_submenu")," class."),Object(l.createElement)(c.a,{title:"Menu with Submenu Right"},Object(l.createElement)(r.a,{demoStyles:"height: 300px;"},Object(l.createElement)(W,{ariaExpanded:"true"}))),B({id:"Submenu-to-Left"},"Submenu to Left"),q({},"To open the submenu to the left, add ",F({},"slds-dropdown_submenu-left")," to the ",F({},"<div>")," with the ",F({},"slds-dropdown_submenu")," class."),Object(l.createElement)(c.a,{title:"Menu with Submenu Left"},Object(l.createElement)(r.a,{demoStyles:"height: 300px; margin-left: 150px;"},Object(l.createElement)(W,{ariaExpanded:!0,submenuClassnames:"slds-dropdown_submenu-left"}))),D({id:"Overflow-Menu-with-Actions"},"Overflow Menu with Actions"),q({},"For an overflow of action items, use the overflow menu with actions styling by adding the modifier ",F({},"slds-dropdown_actions")," to the ",F({},"div")," with class ",F({},"slds-dropdown"),". This pattern is typically used in conjunction with a button group."),Object(l.createElement)(c.a,{title:"Menu with Action Overflow"},Object(l.createElement)(r.a,{demoStyles:"height: 150px;"},Object(l.createElement)(O.a,{isOpen:!0}))),D({id:"Positioning"},"Positioning"),q({},"There are 3 options for the positioning of the menu dropdown -- left, right, and bottom. To access these options, add a modifier to the ",F({},"<div>")," with class name ",F({},"slds-dropdown"),". For the standard positioning where the dropdown aligns with the left side of the dropdown trigger, use ",F({},"slds-dropdown_left"),", as seen above."),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-dropdown slds-dropdown_left"},"...")),B({id:"Positioned-Right"},"Positioned Right"),q({},"To position the dropdown to align with the right of the dropdown trigger, use ",F({},"slds-dropdown_right"),"."),Object(l.createElement)(c.a,{title:"Menu Positioned Right"},Object(l.createElement)(r.a,{demoStyles:"height: 200px; margin-left: 90px;"},Object(l.createElement)(O.b,{className:"slds-dropdown_right"}))),B({id:"Positioned-Bottom"},"Positioned Bottom"),q({},"To position the dropdown to sit on top of the dropdown trigger, use ",F({},"slds-dropdown_bottom"),"."),Object(l.createElement)(c.a,{title:"Menu Positioned Bottom"},Object(l.createElement)(r.a,{demoStyles:"margin-left: 45px; margin-top: 163px;"},Object(l.createElement)(O.b,{className:"slds-dropdown_bottom"}))),D({id:"Width"},"Width"),q({},"To adjust the width of the menu dropdown add modifier ",F({},"slds-dropdown_")," to the ",F({},"<div>")," with class ",F({},"slds-dropdown")," where the ",F({},"")," is ",F({},"xx-small"),", ",F({},"x-small"),", ",F({},"small"),", ",F({},"medium"),", or ",F({},"large"),"."),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_medium"},"...")),K({},Q({},U({},G({},"Modifier"),G({},"Example"))),$({},U({},z({},F({},".slds-dropdown_xx-small")," ",Object(l.createElement)("br",null)," 6rem / 96px"),z({},Object(l.createElement)("div",{style:{height:"200px",width:"320px"}},Object(l.createElement)(O.b,{className:"slds-dropdown_left slds-dropdown_xx-small"})))),U({},z({},F({},".slds-dropdown_x-small")," ",Object(l.createElement)("br",null)," 12rem / 192px"),z({},Object(l.createElement)("div",{style:{height:"200px",width:"320px"}},Object(l.createElement)(O.b,{className:"slds-dropdown_left slds-dropdown_x-small"})))),U({},z({},F({},".slds-dropdown_small")," ",Object(l.createElement)("br",null)," 15rem / 240px"),z({},Object(l.createElement)("div",{style:{height:"200px",width:"320px"}},Object(l.createElement)(O.b,{className:"slds-dropdown_left slds-dropdown_small"})))),U({},z({},F({},".slds-dropdown_medium")," ",Object(l.createElement)("br",null)," 20rem / 320px"),z({},Object(l.createElement)("div",{style:{height:"200px",width:"320px"}},Object(l.createElement)(O.b,{className:"slds-dropdown_left slds-dropdown_medium"})))),U({},z({},F({},".slds-dropdown_large")," ",Object(l.createElement)("br",null)," 25rem / 400px"),z({},Object(l.createElement)("div",{style:{height:"200px",width:"320px"}},Object(l.createElement)(O.b,{className:"slds-dropdown_left slds-dropdown_large"})))))),D({id:"Height"},"Height"),q({},"To adjust the length of visible menu dropdown items before overflow scrolling activates, add modifier ",F({},"slds-dropdown_length-"),", or when using icons, ",F({},"slds-dropdown_length-with-icon-"),", where the ",F({},"*")," is ",F({},"5"),", ",F({},"7"),", ",F({},"10"),". Apply the height classes to both the ",F({},"<div>"),"s with class ",F({},"slds-dropdown")," and ",F({},"slds-dropdown__list")),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_length-7"},Object(l.createElement)("ul",{class:"slds-dropdown__list slds-dropdown_length-7"},"..."))),K({},Q({},U({},G({},"Modifier"),G({},"Example"))),$({},U({},z({},F({},".slds-dropdown_length-5")," ",Object(l.createElement)("br",null)," 5 items"),z({},Object(l.createElement)("div",{style:{height:"16rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-5")})))),U({},z({},F({},".slds-dropdown_length-7")," ",Object(l.createElement)("br",null)," 7 items"),z({},Object(l.createElement)("div",{style:{height:"21rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-7")})))),U({},z({},F({},".slds-dropdown_length-10")," ",Object(l.createElement)("br",null)," 10 items"),z({},Object(l.createElement)("div",{style:{height:"26rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-10")})))),U({},z({},F({},".slds-dropdown_length-with-icon-5")," ",Object(l.createElement)("br",null)," 5 items"),z({},Object(l.createElement)("div",{style:{height:"16rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-5-icon")})))),U({},z({},F({},".slds-dropdown_length-with-icon-7")," ",Object(l.createElement)("br",null)," 7 items"),z({},Object(l.createElement)("div",{style:{height:"21rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-7-icon")})))),U({},z({},F({},".slds-dropdown_length-with-icon-10")," ",Object(l.createElement)("br",null)," 10 items"),z({},Object(l.createElement)("div",{style:{height:"28rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-10-icon")})))))))},Y=function(){return Object(s.a)(X())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/menus/docs.mdx.js"]=function(e){function t(t){for(var l,r,o=t[0],c=t[1],d=t[2],m=0,u=[];m<o.length;m++)r=o[m],Object.prototype.hasOwnProperty.call(a,r)&&a[r]&&u.push(a[r][0]),a[r]=0;for(l in c)Object.prototype.hasOwnProperty.call(c,l)&&(e[l]=c[l]);for(i&&i(t);u.length;)u.shift()();return s.push.apply(s,d\|\|[]),n()}function n(){for(var e,t=0;t<s.length;t++){for(var n=s[t],l=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(l=!1)}l&&(s.splice(t--,1),e=r(r.s=n[0]))}return e}var l={},a={48:0},s=[];function r(t){if(l[t])return l[t].exports;var n=l[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=l,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)r.d(n,l,function(t){return e[t]}.bind(null,l));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=o.push.bind(o);o.push=t,o=o.slice();for(var d=0;d<o.length;d++)t(o[d]);var i=c;return s.push([668,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},668:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return X})),n.d(t,"getContents",(function(){return Y}));var l=n(0),a=n.n(l),s=n(4),r=n(2),o=n(26),c=n(15),d=n(14),i=n(3),m=n.n(i);function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function h(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e,t){for(var n=0;n<t.length;n++){var l=t[n];l.enumerable=l.enumerable\|\|!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}function b(e,t){return(b=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function g(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,l=f(e);if(t){var a=f(this).constructor;n=Reflect.construct(l,arguments,a)}else n=l.apply(this,arguments);return E(this,n)}}function E(e,t){return!t\|\|"object"!==u(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var w=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&b(e,t)}(o,e);var t,n,s,r=g(o);function o(){return h(this,o),r.apply(this,arguments)}return t=o,(n=[{key:"render",value:function(){return a.a.createElement(l.Fragment,null,this.props.fragmentChildren)}}])&&p(t.prototype,n),s&&p(t,s),o}(a.a.Component);w.propTypes={fragmentChildren:m.a.node.isRequired};var O=n(9),y=n(10),_=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"260px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-5"},a.a.createElement(O.g,{tabIndex:"0"},"Menu Item One"),a.a.createElement(O.g,null,"Menu Item Two"),a.a.createElement(O.g,null,"Menu Item Three"),a.a.createElement(O.g,null,"Menu Item Four"),a.a.createElement(O.g,null,"Menu Item Five"),a.a.createElement(O.g,null,"Menu Item Six"),a.a.createElement(O.g,null,"Menu Item Seven"),a.a.createElement(O.g,null,"Menu Item Eight"),a.a.createElement(O.g,null,"Menu Item Nine"),a.a.createElement(O.g,null,"Menu Item Ten")))))},j=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"300px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-7"},a.a.createElement(O.g,{tabIndex:"0"},"Menu Item One"),a.a.createElement(O.g,null,"Menu Item Two"),a.a.createElement(O.g,null,"Menu Item Three"),a.a.createElement(O.g,null,"Menu Item Four"),a.a.createElement(O.g,null,"Menu Item Five"),a.a.createElement(O.g,null,"Menu Item Six"),a.a.createElement(O.g,null,"Menu Item Seven"),a.a.createElement(O.g,null,"Menu Item Eight"),a.a.createElement(O.g,null,"Menu Item Nine"),a.a.createElement(O.g,null,"Menu Item Ten")))))},v=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"430px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-10"},a.a.createElement(O.g,{tabIndex:"0"},"Menu Item One"),a.a.createElement(O.g,null,"Menu Item Two"),a.a.createElement(O.g,null,"Menu Item Three"),a.a.createElement(O.g,null,"Menu Item Four"),a.a.createElement(O.g,null,"Menu Item Five"),a.a.createElement(O.g,null,"Menu Item Six"),a.a.createElement(O.g,null,"Menu Item Seven"),a.a.createElement(O.g,null,"Menu Item Eight"),a.a.createElement(O.g,null,"Menu Item Nine"),a.a.createElement(O.g,null,"Menu Item Ten")))))},I=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"260px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-with-icon-5"},a.a.createElement(O.g,{tabIndex:"0"},a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},x=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"320px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-with-icon-7"},a.a.createElement(O.g,{tabIndex:"0"},a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},M=function(e){return a.a.createElement("div",{className:"demo-only",style:{height:"450px"}},a.a.createElement(O.l,{isOpen:!0},a.a.createElement(O.f,{className:"slds-dropdown_left slds-dropdown_small"},a.a.createElement(O.h,{className:"slds-dropdown_length-with-icon-10"},a.a.createElement(O.g,{tabIndex:"0"},a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),a.a.createElement(O.g,null,a.a.createElement(y.a,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},N=[{id:"dropdown-menu-length-5",label:"5 items",element:a.a.createElement(_,null)},{id:"dropdown-menu-length-7",label:"7 items",element:a.a.createElement(j,null)},{id:"dropdown-menu-length-10",label:"10 items",element:a.a.createElement(v,null)},{id:"dropdown-menu-length-5-icon",label:"5 items with icon",element:a.a.createElement(I,null)},{id:"dropdown-menu-length-7-icon",label:"7 items with icon",element:a.a.createElement(x,null)},{id:"dropdown-menu-length-10-icon",label:"10 items with icon",element:a.a.createElement(M,null)}],S=n(5),T=n.n(S),k=["ariaExpanded","className","children","iconRight","itemName","tabIndex","title","submenuClassnames"];function C(){return(C=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}function P(e,t){if(null==e)return{};var n,l,a=function(e,t){if(null==e)return{};var n,l,a={},s=Object.keys(e);for(l=0;l<s.length;l++)n=s[l],t.indexOf(n)>=0\|\|(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(l=0;l<s.length;l++)n=s[l],t.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var R=a.a.createElement(y.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_small slds-shrink-none",sprite:"utility",symbol:"right"}),A=function(e){var t=e.ariaExpanded,n=e.className,l=(e.children,e.iconRight),s=e.itemName,r=e.tabIndex,o=e.title,c=e.submenuClassnames,d=P(e,k);return a.a.createElement("li",C({},d,{className:T()("slds-dropdown__item slds-has-submenu",n),role:"presentation"}),a.a.createElement("a",{role:"menuitem",href:"#","aria-haspopup":"true","aria-expanded":t,tabIndex:r\|\|"-1",onClick:function(e){return e.preventDefault()}},a.a.createElement("span",{className:"slds-truncate",title:o\|\|s},e.itemName),l\|\|null),a.a.createElement(O.f,{className:T()("slds-dropdown_submenu",c)},a.a.createElement(O.h,{ariaLabel:s},a.a.createElement(O.g,{tabIndex:"0"},"Submenu Item One"),a.a.createElement(O.g,null,"Submenu Item Two"),a.a.createElement(O.g,null,"Submenu Item Three"),a.a.createElement("li",{className:"slds-has-divider_top-space",role:"separator"}),a.a.createElement(O.g,null,"Submenu Item Four"))))},W=function(e){var t=e.ariaExpanded,n=e.parentIsOpen,l=e.submenuClassnames;return a.a.createElement(O.l,{isOpen:n},a.a.createElement(O.f,{className:"slds-dropdown_left"},a.a.createElement(O.h,{ariaLabel:"Show More"},a.a.createElement(O.g,{tabIndex:"0"},"Menu Item One"),a.a.createElement(O.g,null,"Menu Item Two"),a.a.createElement(A,{ariaExpanded:t,iconRight:R,itemName:"Menu Item Three",submenuClassnames:l\|\|"slds-dropdown_submenu-right"}))))},L=(n(137),n(1)),F=s.c.code,D=s.c.h2,B=s.c.h3,H=s.c.h4,J=s.c.li,q=s.c.p,K=s.c.table,$=s.c.tbody,z=s.c.td,G=s.c.th,Q=s.c.thead,U=s.c.tr,V=s.c.ul,X=function(){return Object(l.createElement)(s.b,{},Object(l.createElement)("div",{className:"doc lead"},"A Menu offers a list of actions or functions that a user can access."),Object(l.createElement)(r.a,{exampleOnly:!0,demoStyles:"height: 150px;"},Object(l.createElement)(O.d,{hasLeftIcon:!0})),D({id:"About-Menu"},"About Menu"),q({},"The unordered menu list ",F({},"<ul>")," with ",F({},'role="menu"')," should be contained in a ",F({},"<div>")," with the class ",F({},".slds-dropdown"),"."),q({},"The target HTML element and dropdown need to be wrapped in the class ",F({},".slds-dropdown-trigger dropdown-trigger_click"),"."),B({id:"Accessibility"},"Accessibility"),H({id:"Markup"},"Markup"),V({},J({},"The menu trigger is a focusable element (",F({},"<a>")," or ",F({},"<button>"),") with ",F({},'aria-haspopup="true"')),J({},"The menu trigger has the ",F({},"aria-expanded")," attribute applied and the value is set to ",F({},'"true"')," or ",F({},'"false"')," depending on if the menu is open or not."),J({},"The menu has ",F({},'role="menu"')," and an ",F({},"aria-label")," attribute whose value is the name of the menu trigger"),J({},"The menu items have ",F({},'role="menuitem"'),", ",F({},'role="menuitemcheckbox"'),", or ",F({},'role="menuitemradio"'),", depending on the selection options")),H({id:"Keyboard-Interactions"},"Keyboard Interactions"),q({},"The main thing that distinguishes menus from other popover blocks is keyboard navigation: elsewhere, users press the Tab key to navigate through actionable items, but in a menu, users press the arrow keys to navigate."),V({},J({},"Arrow keys cycle focus through menu items (including disabled menu items)"),J({},"If a menu item opens a submenu, pressing Enter or the right arrow key opens the submenu and focus goes to the first item in the submenu"),J({},"If a submenu is open, pressing the left arrow key closes the submenu and puts focus back on the menu item that opened the submenu"),J({},"Tab key closes the menu and moves focus to the next focusable element on the page"),J({},"Esc key closes the menu and moves focus back to the menu trigger"),J({},"Any character key moves focus to the next menu item that starts with that character, if applicable")),D({id:"Base"},"Base"),Object(l.createElement)(c.a,{title:"Menu Base"},Object(l.createElement)(r.a,{demoStyles:"height: 200px;"},Object(l.createElement)(O.b,{className:"slds-dropdown_left"}))),D({id:"With-Subheaders"},"With Subheaders"),Object(l.createElement)(d.a,{type:"a11y",header:"Accessible Role"},Object(l.createElement)("p",null,"A subheading must have ",Object(l.createElement)("code",null,'role="separator"')," on the"," ",Object(l.createElement)("code",null,"<li>")," and the content inside the ",Object(l.createElement)("code",null,"<li>")," ","should be in a ",Object(l.createElement)("code",null,"<span>"),".")),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("li",{className:"slds-dropdown__header slds-truncate",title:"Menu Sub Heading",role:"separator"},Object(l.createElement)("span",null,"Menu Sub Heading"))),Object(l.createElement)(c.a,{title:"Menu with Subheaders"},Object(l.createElement)(r.a,{demoStyles:"height: 300px;"},Object(l.createElement)(O.k,null))),D({id:"With-Icons"},"With Icons"),q({},"Icons can be included on either the left, right, or both sides of an option."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"If using one of the icons to indicate selection (e.g. checkmarks), be sure to check out the"," ",Object(l.createElement)("a",{href:"#With-Selectable-Items"},"Menus with Selectable Items")," docs for the Accessibility implications.")),B({id:"Icon-on-the-Left"},"Icon on the Left"),Object(l.createElement)(c.a,{title:"Menu with Icon Left"},Object(l.createElement)(r.a,{demoStyles:"height: 150px;"},Object(l.createElement)(O.d,{hasLeftIcon:!0}))),B({id:"Icon-on-the-Right"},"Icon on the Right"),Object(l.createElement)(c.a,{title:"Menu with Icon Right"},Object(l.createElement)(r.a,{demoStyles:"height: 150px;"},Object(l.createElement)(O.e,null))),B({id:"Double-Icon"},"Double Icon"),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"If using one of the icons to indicate selection (e.g. checkmarks), be sure to check out the"," ",Object(l.createElement)("a",{href:"#With-Selectable-Items"},"Menus with Selectable Items")," docs.")),Object(l.createElement)(c.a,{title:"Menu with Double Icon"},Object(l.createElement)(r.a,{demoStyles:"height: 150px;"},Object(l.createElement)(O.c,null))),D({id:"With-Selectable-Items"},"With Selectable Items"),q({},"When creating a menu with selectable items:"),V({},J({},"All selectable items need the proper role, either ",F({},'role="menuitemcheckbox"')," or ",F({},'role="menuitemradio"')),J({},"All selectable items should contain an icon"),J({},"Each icon must have the class ",F({},"slds-icon_selected")," on the ",F({},"<svg>"),V({},J({},"This hides icons of non-selected items"))),J({},"Items that have been selected need ",F({},'aria-checked="true"')," on the ",F({},"<a>")," element")),Object(l.createElement)(d.a,{type:"a11y",header:"Revealing Icons for Selected Items"},Object(l.createElement)("p",null,"A selected item reveals its icon when the class"," ",Object(l.createElement)("code",null,"slds-is-selected")," is applied to the ",Object(l.createElement)("code",null,"<li>")," and"," ",Object(l.createElement)("code",null,'aria-checked="true"')," is applied to its"," ",Object(l.createElement)("code",null,"menuitemcheckbox")," or ",Object(l.createElement)("code",null,"menuitemradio")," child.")),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("li",{className:"slds-dropdown__item slds-is-selected",role:"presentation"},Object(l.createElement)("a",{role:"menuitemcheckbox","aria-checked":"true"},"..."))),Object(l.createElement)(c.a,{title:"Menu with Selectable Icon Left"},Object(l.createElement)(r.a,{demoStyles:"height: 150px;"},Object(l.createElement)(O.d,{isSelectable:!0}))),D({id:"With-Status-Notifications"},"With Status Notifications"),Object(l.createElement)(r.a,{demoStyles:"height: 250px;"},Object(l.createElement)(O.i,null)),q({},"To enable menu items to reflect status level notifications like Error, Success and Warning, place a modifier class onto the ",F({},"menuitem")," that has the offending notification."),q({},"The class is based on the ",F({},"slds-has-${level}")," pattern, where ",F({},"${level}")," corresponds to the level you wish to set."),V({},J({},F({},"slds-has-error")),J({},F({},"slds-has-success")),J({},F({},"slds-has-warning"))),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("a",{className:"slds-has-warning",href:"#",onClick:function(e){return e.preventDefault()},role:"menuitem",tabIndex:"-1"},"...")),Object(l.createElement)(d.a,{type:"note",header:"Warning Icon"},Object(l.createElement)("p",null,"For warning level menu items it is required that you switch the icon to use the ",Object(l.createElement)("code",null,"currentColor")," variant for icons.")),D({id:"With-Overflow-Scrolling"},"With Overflow Scrolling"),Object(l.createElement)(c.a,{title:"Menu with Overflow Scrolling"},Object(l.createElement)(r.a,{demoStyles:"height: 220px;"},Object(l.createElement)(O.j,{className:"slds-dropdown_left slds-dropdown_length-5"}))),q({},"To force overflow scrolling after either 5, 7, or 10 items, add the modifier ",F({},"slds-dropdown_length-")," to the ",F({},"<div>")," with class ",F({},"slds-dropdown")," where the ",F({},"")," is either 5, 7, or 10."),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-dropdown slds-dropdown_length-5"},"...")),B({id:"Scrolling-for-Menu-Items-with-Icons"},"Scrolling for Menu Items with Icons"),q({},"To force overflow scrolling after either 5, 7, or 10 items with icons, add the modifier ",F({},"slds-dropdown_length-with-icon-")," to the ",F({},"<div>")," with class ",F({},"slds-dropdown")," where the ",F({},"")," is either 5, 7, or 10."),Object(l.createElement)(r.a,{demoStyles:"height: 250px;"},Object(l.createElement)(O.j,{isSelectable:!0,isSelected:"true",className:"slds-dropdown_left slds-dropdown_length-with-icon-5"})),D({id:"With-a-Submenu"},"With a Submenu"),q({},"To create a menu with a submenu, add the ",F({},"slds-has-submenu")," class to the list item, ",F({},"<li>"),", that will open the submenu."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"Any menu item that opens a submenu must have ",Object(l.createElement)("code",null,'aria-haspop="true"')," ","on the ",Object(l.createElement)("code",null,"<a>")," within the ",Object(l.createElement)("code",null,"<li>"),". In order to open the submenu, set ",Object(l.createElement)("code",null,"aria-expanded")," to ",Object(l.createElement)("code",null,"true")," on that ",Object(l.createElement)("code",null,"<a>")," when the user clicks or hovers over the list item, or presses enter while focused on the list item. Additionally, the submenu should have ",Object(l.createElement)("code",null,'role="menu"')," and an ",Object(l.createElement)("code",null,"aria-label")," ","attribute whose value matches the name of the ",Object(l.createElement)("code",null,"<li>")," that opened the submenu.")),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("li",{className:"slds-dropdown__item slds-has-submenu",role:"presentation"},Object(l.createElement)("a",{role:"menuitem",href:"#",onClick:function(e){return e.preventDefault()},"aria-haspopup":"true","aria-expanded":"true",tabIndex:"-1"},"..."),Object(l.createElement)("div",{className:"slds-dropdown slds-dropdown_submenu slds-dropdown_submenu-left"},Object(l.createElement)("ul",{className:"slds-dropdown__list",role:"menu","aria-label":"Name of Item that Opened this Menu"},"...")))),B({id:"Submenu-to-Right"},"Submenu to Right"),q({},"To open the submenu to the right of the main menu, add ",F({},"slds-dropdown_submenu-right")," to the ",F({},"<div>")," with the ",F({},"slds-dropdown_submenu")," class."),Object(l.createElement)(c.a,{title:"Menu with Submenu Right"},Object(l.createElement)(r.a,{demoStyles:"height: 300px;"},Object(l.createElement)(W,{ariaExpanded:"true"}))),B({id:"Submenu-to-Left"},"Submenu to Left"),q({},"To open the submenu to the left, add ",F({},"slds-dropdown_submenu-left")," to the ",F({},"<div>")," with the ",F({},"slds-dropdown_submenu")," class."),Object(l.createElement)(c.a,{title:"Menu with Submenu Left"},Object(l.createElement)(r.a,{demoStyles:"height: 300px; margin-left: 150px;"},Object(l.createElement)(W,{ariaExpanded:!0,submenuClassnames:"slds-dropdown_submenu-left"}))),D({id:"Overflow-Menu-with-Actions"},"Overflow Menu with Actions"),q({},"For an overflow of action items, use the overflow menu with actions styling by adding the modifier ",F({},"slds-dropdown_actions")," to the ",F({},"div")," with class ",F({},"slds-dropdown"),". This pattern is typically used in conjunction with a button group."),Object(l.createElement)(c.a,{title:"Menu with Action Overflow"},Object(l.createElement)(r.a,{demoStyles:"height: 150px;"},Object(l.createElement)(O.a,{isOpen:!0}))),D({id:"Positioning"},"Positioning"),q({},"There are 3 options for the positioning of the menu dropdown -- left, right, and bottom. To access these options, add a modifier to the ",F({},"<div>")," with class name ",F({},"slds-dropdown"),". For the standard positioning where the dropdown aligns with the left side of the dropdown trigger, use ",F({},"slds-dropdown_left"),", as seen above."),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-dropdown slds-dropdown_left"},"...")),B({id:"Positioned-Right"},"Positioned Right"),q({},"To position the dropdown to align with the right of the dropdown trigger, use ",F({},"slds-dropdown_right"),"."),Object(l.createElement)(c.a,{title:"Menu Positioned Right"},Object(l.createElement)(r.a,{demoStyles:"height: 200px; margin-left: 90px;"},Object(l.createElement)(O.b,{className:"slds-dropdown_right"}))),B({id:"Positioned-Bottom"},"Positioned Bottom"),q({},"To position the dropdown to sit on top of the dropdown trigger, use ",F({},"slds-dropdown_bottom"),"."),Object(l.createElement)(c.a,{title:"Menu Positioned Bottom"},Object(l.createElement)(r.a,{demoStyles:"margin-left: 45px; margin-top: 163px;"},Object(l.createElement)(O.b,{className:"slds-dropdown_bottom"}))),D({id:"Width"},"Width"),q({},"To adjust the width of the menu dropdown add modifier ",F({},"slds-dropdown_")," to the ",F({},"<div>")," with class ",F({},"slds-dropdown")," where the ",F({},"")," is ",F({},"xx-small"),", ",F({},"x-small"),", ",F({},"small"),", ",F({},"medium"),", or ",F({},"large"),"."),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_medium"},"...")),K({},Q({},U({},G({},"Modifier"),G({},"Example"))),$({},U({},z({},F({},".slds-dropdown_xx-small")," ",Object(l.createElement)("br",null)," 6rem / 96px"),z({},Object(l.createElement)("div",{style:{height:"200px",width:"320px"}},Object(l.createElement)(O.b,{className:"slds-dropdown_left slds-dropdown_xx-small"})))),U({},z({},F({},".slds-dropdown_x-small")," ",Object(l.createElement)("br",null)," 12rem / 192px"),z({},Object(l.createElement)("div",{style:{height:"200px",width:"320px"}},Object(l.createElement)(O.b,{className:"slds-dropdown_left slds-dropdown_x-small"})))),U({},z({},F({},".slds-dropdown_small")," ",Object(l.createElement)("br",null)," 15rem / 240px"),z({},Object(l.createElement)("div",{style:{height:"200px",width:"320px"}},Object(l.createElement)(O.b,{className:"slds-dropdown_left slds-dropdown_small"})))),U({},z({},F({},".slds-dropdown_medium")," ",Object(l.createElement)("br",null)," 20rem / 320px"),z({},Object(l.createElement)("div",{style:{height:"200px",width:"320px"}},Object(l.createElement)(O.b,{className:"slds-dropdown_left slds-dropdown_medium"})))),U({},z({},F({},".slds-dropdown_large")," ",Object(l.createElement)("br",null)," 25rem / 400px"),z({},Object(l.createElement)("div",{style:{height:"200px",width:"320px"}},Object(l.createElement)(O.b,{className:"slds-dropdown_left slds-dropdown_large"})))))),D({id:"Height"},"Height"),q({},"To adjust the length of visible menu dropdown items before overflow scrolling activates, add modifier ",F({},"slds-dropdown_length-"),", or when using icons, ",F({},"slds-dropdown_length-with-icon-"),", where the ",F({},"*")," is ",F({},"5"),", ",F({},"7"),", ",F({},"10"),". Apply the height classes to both the ",F({},"<div>"),"s with class ",F({},"slds-dropdown")," and ",F({},"slds-dropdown__list")),Object(l.createElement)(o.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_length-7"},Object(l.createElement)("ul",{class:"slds-dropdown__list slds-dropdown_length-7"},"..."))),K({},Q({},U({},G({},"Modifier"),G({},"Example"))),$({},U({},z({},F({},".slds-dropdown_length-5")," ",Object(l.createElement)("br",null)," 5 items"),z({},Object(l.createElement)("div",{style:{height:"16rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-5")})))),U({},z({},F({},".slds-dropdown_length-7")," ",Object(l.createElement)("br",null)," 7 items"),z({},Object(l.createElement)("div",{style:{height:"21rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-7")})))),U({},z({},F({},".slds-dropdown_length-10")," ",Object(l.createElement)("br",null)," 10 items"),z({},Object(l.createElement)("div",{style:{height:"26rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-10")})))),U({},z({},F({},".slds-dropdown_length-with-icon-5")," ",Object(l.createElement)("br",null)," 5 items"),z({},Object(l.createElement)("div",{style:{height:"16rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-5-icon")})))),U({},z({},F({},".slds-dropdown_length-with-icon-7")," ",Object(l.createElement)("br",null)," 7 items"),z({},Object(l.createElement)("div",{style:{height:"21rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-7-icon")})))),U({},z({},F({},".slds-dropdown_length-with-icon-10")," ",Object(l.createElement)("br",null)," 10 items"),z({},Object(l.createElement)("div",{style:{height:"28rem",width:"320px"}},Object(l.createElement)(w,{fragmentChildren:Object(L.f)(N,"dropdown-menu-length-10-icon")})))))))},Y=function(){return Object(s.a)(X())}}});

package/__internal/chunked/docs/ui/components/modals/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/modals/docs.mdx.js"]=function(e){function t(t){for(var o,s,l=t[0],r=t[1],d=t[2],h=0,u=[];h<l.length;h++)s=l[h],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(c&&c(t);u.length;)u.shift()();return n.push.apply(n,d\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],o=!0,l=1;l<a.length;l++){var r=a[l];0!==i[r]&&(o=!1)}o&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var o={},i={49:0},n=[];function s(t){if(o[t])return o[t].exports;var a=o[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=o,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 o in e)s.d(a,o,function(t){return e[t]}.bind(null,o));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 l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=l.push.bind(l);l.push=t,l=l.slice();for(var d=0;d<l.length;d++)t(l[d]);var c=r;return n.push([~~649~~,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~649~~:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return w}));var o=a(0),i=a(4),n=a(21),s=a(2),l=a(37),r=a(1),d=a(35),c=i.c.a,h=i.c.code,u=i.c.h2,m=i.c.h3,f=i.c.h4,p=i.c.li,b=i.c.p,g=i.c.ul,y=function(){return Object(o.createElement)(i.b,{},Object(o.createElement)("div",{className:"doc lead"},"Modals are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards."),Object(o.createElement)(s.a,{exampleOnly:!0,isViewport:!0,demoStyles:Object(r.e)(n.f)},Object(r.f)(n.f)),u({id:"About-Modals"},"About Modals"),b({},"Default modals are used in the vast majority of cases. They are as wide as 50% of the viewport, but include a minimum and maximum width to avoid going too narrow or too wide."),b({},"Modals always have an equal amount of space at the top and bottom to account for the height of the close button."),b({},"Modals grow according to how much content is within, but once the modal full height (including the previously mentioned space on top and bottom), the content area will begin to scroll. (This scrolling is currently not available in Salesforce1 Mobile.)"),b({},"Modals can have a tagline in the header, simply by adding a paragraph after the heading."),b({},"By default, the content area of the modal does not have spacing. This allows for content such as Tables to be full-width to the modal. To get spacing when you need it, apply a padding utility (",h({},".slds-p-around_medium"),")."),b({},"Modal headers can also have taglines, if you need to provide additional context. This tagline can also contain links, or the whole thing could be a link in and of itself."),b({},"Large modals call for large amounts of content. The height follows the same behavior and styles of other modals. The width changes to 90% of the viewport, and uses a wider minimum width and no maximum width."),b({},"These are modals that require a linearly directional paradigm of navigation (“Next” and “Back”, etc.) — the actionable buttons in the modal footer live on the left and right, rather than all on the right. These can either be within a large or default modal, depending on the use case."),b({},"If you're using a Modal for a system alert that the user must acknowledge, consider using a ",c({href:"/components/prompt"},"Prompt"),"."),m({id:"Accessibility"},"Accessibility"),b({},"Modals, by definition, trap focus. This means that if a user presses Tab or Shift+Tab while their keyboard focus is in the modal, their focus should stay in and cycle through the modal’s content. Focus shouldn’t return to the underlying page until the user presses the Esc key, presses an explicit “Cancel” or “Close” button in the modal, or performs another action that closes the modal."),f({id:"Expected-markup"},"Expected markup"),g({},p({},"Modal has ",h({},'role="dialog"')),p({},"When the modal is open, everything behind it has HTML attribute ",h({},'aria-hidden="true"'),", so assistive technology won't read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle ",h({},'aria-hidden="true"'),"/",h({},'aria-hidden="false"')," on the main page's wrapper depending on whether or not the modal is open."),p({},"Modal contains an HTML heading. This is an ",h({},"h1")," tag by default but should update according to the surrounding DOM structure. While a semantic heading tag is preferable, if necessary applying ",h({},"role=”heading”")," and ",h({},"aria-level")," to a more generic element is acceptable."),p({},"Modal has an ",h({},"aria-labelledby")," attribute whose value is the id of the modal’s heading"),p({},"Modal has an optional ",h({},"aria-describedby")," attribute whose value is the id of the modal's content. This should not be used for all modals, but in instances where the modal is being used as an analog to a javascript ",h({},"confirm()")," or ",h({},"alert()")," dialog to deliver a short prompt that can be responded to with a confirm/cancel button set (eg: ",c({href:"/components/prompt/"},"Prompt"),")."),p({},"Buttons which close the modal should have the same accessible text per ",c({href:"https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html"},"WCAG guidelines"),".")),f({id:"Expected-keyboard-interactions"},"Expected keyboard interactions"),g({},p({},"Esc key closes the modal and moves focus to whatever triggered the modal to open"),p({},"Tab key at bottom of modal cycles focus back to first focusable element at top of modal"),p({},"Shift+Tab keys at top of modal cycle focus back to last focusable element at bottom of modal"),p({},"Enter key submits modal’s form data, if applicable")),f({id:"Focus-guidelines"},"Focus guidelines"),g({},p({},"Focus for modals must follow the guidelines described in the ",c({href:"/accessibility/guidelines/global-focus/#dialogs"},"Accessibility Guidelines for Dialogs"),". Pay special attention to where focus is set when the modal opens.")),m({id:"Mobile"},"Mobile"),Object(o.createElement)(d.a,{patternSpecificText:"modals will have buttons of increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(o.createElement)(s.a,{frameOnly:!0,frameStyles:{height:"640px"},frameTitle:"Example mobile styles for modals"},Object(r.f)(n.f)),u({id:"Base"},"Base"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.f)},Object(r.f)(n.f)),u({id:"Examples"},"Examples"),m({id:"Taglines"},"Taglines"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"taglines")},Object(r.f)(n.g,"taglines")),m({id:"Headless"},"Headless"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"headless")},Object(r.f)(n.g,"headless")),m({id:"Footless"},"Footless"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"footless")},Object(r.f)(n.g,"footless")),m({id:"Directional"},"Directional"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"directional")},Object(r.f)(n.g,"directional")),m({id:"Small-Modal"},"Small Modal"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"small")},Object(r.f)(n.g,"small")),m({id:"Medium-Modal"},"Medium Modal"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"medium")},Object(r.f)(n.g,"medium")),m({id:"Large-Modal"},"Large Modal"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"large")},Object(r.f)(n.g,"large")),u({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(l.a,{name:"modals",type:"component"}))},w=function(){return Object(i.a)(y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/modals/docs.mdx.js"]=function(e){function t(t){for(var o,s,l=t[0],r=t[1],d=t[2],h=0,u=[];h<l.length;h++)s=l[h],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(c&&c(t);u.length;)u.shift()();return n.push.apply(n,d\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],o=!0,l=1;l<a.length;l++){var r=a[l];0!==i[r]&&(o=!1)}o&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var o={},i={49:0},n=[];function s(t){if(o[t])return o[t].exports;var a=o[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=o,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 o in e)s.d(a,o,function(t){return e[t]}.bind(null,o));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 l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=l.push.bind(l);l.push=t,l=l.slice();for(var d=0;d<l.length;d++)t(l[d]);var c=r;return n.push([650,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},650:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return w}));var o=a(0),i=a(4),n=a(22),s=a(2),l=a(38),r=a(1),d=a(36),c=i.c.a,h=i.c.code,u=i.c.h2,m=i.c.h3,f=i.c.h4,p=i.c.li,b=i.c.p,g=i.c.ul,y=function(){return Object(o.createElement)(i.b,{},Object(o.createElement)("div",{className:"doc lead"},"Modals are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards."),Object(o.createElement)(s.a,{exampleOnly:!0,isViewport:!0,demoStyles:Object(r.e)(n.f)},Object(r.f)(n.f)),u({id:"About-Modals"},"About Modals"),b({},"Default modals are used in the vast majority of cases. They are as wide as 50% of the viewport, but include a minimum and maximum width to avoid going too narrow or too wide."),b({},"Modals always have an equal amount of space at the top and bottom to account for the height of the close button."),b({},"Modals grow according to how much content is within, but once the modal full height (including the previously mentioned space on top and bottom), the content area will begin to scroll. (This scrolling is currently not available in Salesforce1 Mobile.)"),b({},"Modals can have a tagline in the header, simply by adding a paragraph after the heading."),b({},"By default, the content area of the modal does not have spacing. This allows for content such as Tables to be full-width to the modal. To get spacing when you need it, apply a padding utility (",h({},".slds-p-around_medium"),")."),b({},"Modal headers can also have taglines, if you need to provide additional context. This tagline can also contain links, or the whole thing could be a link in and of itself."),b({},"Large modals call for large amounts of content. The height follows the same behavior and styles of other modals. The width changes to 90% of the viewport, and uses a wider minimum width and no maximum width."),b({},"These are modals that require a linearly directional paradigm of navigation (“Next” and “Back”, etc.) — the actionable buttons in the modal footer live on the left and right, rather than all on the right. These can either be within a large or default modal, depending on the use case."),b({},"If you're using a Modal for a system alert that the user must acknowledge, consider using a ",c({href:"/components/prompt"},"Prompt"),"."),m({id:"Accessibility"},"Accessibility"),b({},"Modals, by definition, trap focus. This means that if a user presses Tab or Shift+Tab while their keyboard focus is in the modal, their focus should stay in and cycle through the modal’s content. Focus shouldn’t return to the underlying page until the user presses the Esc key, presses an explicit “Cancel” or “Close” button in the modal, or performs another action that closes the modal."),f({id:"Expected-markup"},"Expected markup"),g({},p({},"Modal has ",h({},'role="dialog"')),p({},"When the modal is open, everything behind it has HTML attribute ",h({},'aria-hidden="true"'),", so assistive technology won't read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle ",h({},'aria-hidden="true"'),"/",h({},'aria-hidden="false"')," on the main page's wrapper depending on whether or not the modal is open."),p({},"Modal contains an HTML heading. This is an ",h({},"h1")," tag by default but should update according to the surrounding DOM structure. While a semantic heading tag is preferable, if necessary applying ",h({},"role=”heading”")," and ",h({},"aria-level")," to a more generic element is acceptable."),p({},"Modal has an ",h({},"aria-labelledby")," attribute whose value is the id of the modal’s heading"),p({},"Modal has an optional ",h({},"aria-describedby")," attribute whose value is the id of the modal's content. This should not be used for all modals, but in instances where the modal is being used as an analog to a javascript ",h({},"confirm()")," or ",h({},"alert()")," dialog to deliver a short prompt that can be responded to with a confirm/cancel button set (eg: ",c({href:"/components/prompt/"},"Prompt"),")."),p({},"Buttons which close the modal should have the same accessible text per ",c({href:"https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html"},"WCAG guidelines"),".")),f({id:"Expected-keyboard-interactions"},"Expected keyboard interactions"),g({},p({},"Esc key closes the modal and moves focus to whatever triggered the modal to open"),p({},"Tab key at bottom of modal cycles focus back to first focusable element at top of modal"),p({},"Shift+Tab keys at top of modal cycle focus back to last focusable element at bottom of modal"),p({},"Enter key submits modal’s form data, if applicable")),f({id:"Focus-guidelines"},"Focus guidelines"),g({},p({},"Focus for modals must follow the guidelines described in the ",c({href:"/accessibility/guidelines/global-focus/#dialogs"},"Accessibility Guidelines for Dialogs"),". Pay special attention to where focus is set when the modal opens.")),m({id:"Mobile"},"Mobile"),Object(o.createElement)(d.a,{patternSpecificText:"modals will have buttons of increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(o.createElement)(s.a,{frameOnly:!0,frameStyles:{height:"640px"},frameTitle:"Example mobile styles for modals"},Object(r.f)(n.f)),u({id:"Base"},"Base"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.f)},Object(r.f)(n.f)),u({id:"Examples"},"Examples"),m({id:"Taglines"},"Taglines"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"taglines")},Object(r.f)(n.g,"taglines")),m({id:"Headless"},"Headless"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"headless")},Object(r.f)(n.g,"headless")),m({id:"Footless"},"Footless"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"footless")},Object(r.f)(n.g,"footless")),m({id:"Directional"},"Directional"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"directional")},Object(r.f)(n.g,"directional")),m({id:"Small-Modal"},"Small Modal"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"small")},Object(r.f)(n.g,"small")),m({id:"Medium-Modal"},"Medium Modal"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"medium")},Object(r.f)(n.g,"medium")),m({id:"Large-Modal"},"Large Modal"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(r.e)(n.g,"large")},Object(r.f)(n.g,"large")),u({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(l.a,{name:"modals",type:"component"}))},w=function(){return Object(i.a)(y())}}});