@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 71 kB
JavaScript
var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/combobox/docs.mdx.js"]=function(e){function t(t){for(var i,s,a=t[0],c=t[1],r=t[2],p=0,u=[];p<a.length;p++)s=a[p],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&u.push(n[s][0]),n[s]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);for(d&&d(t);u.length;)u.shift()();return l.push.apply(l,r||[]),o()}function o(){for(var e,t=0;t<l.length;t++){for(var o=l[t],i=!0,a=1;a<o.length;a++){var c=o[a];0!==n[c]&&(i=!1)}i&&(l.splice(t--,1),e=s(s.s=o[0]))}return e}var i={},n={22:0},l=[];function s(t){if(i[t])return i[t].exports;var o=i[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,s),o.l=!0,o.exports}s.m=e,s.c=i,s.d=function(e,t,o){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},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 o=Object.create(null);if(s.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(o,i,function(t){return e[t]}.bind(null,i));return o},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 a=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=a.push.bind(a);a.push=t,a=a.slice();for(var r=0;r<a.length;r++)t(a[r]);var d=c;return l.push([728,0]),o()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},728:function(e,t,o){"use strict";o.r(t),o.d(t,"getElement",(function(){return se})),o.d(t,"getContents",(function(){return ae}));var i=o(0),n=o.n(i),l=o(4),s=o(2),a=o(27),c=o(14),r=(o(15),o(23)),d=o(58),p=o(24),u=o(70),m=o(7),h=o(11),b=o(35),x=o(67),g=o(30),y=o(16),f=o(1),E=o(26),O=o(25),_=o.n(O);function v(){return(v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i])}return e}).apply(this,arguments)}for(var w=_()("option"),I=_()("option"),j=function(e){return n.a.createElement(x.c,{listboxClassName:"slds-dropdown slds-dropdown_fluid",vertical:!0,id:"listbox-unique-id-03"},n.a.createElement(x.d,null,n.a.createElement(x.b,{id:w,entityTitle:"Acme",entityMeta:!0,focused:e.focused})),n.a.createElement(x.d,null,n.a.createElement(x.b,{id:I,entityTitle:"Salesforce.com, Inc.",entityMeta:!0})))},T=function(e){var t=_()("listbox-id-");return n.a.createElement(r.b,v({id:f.d.uniqueId("combobox-id-"),"aria-controls":t,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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:t,snapshot:E.h,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0},e))},S=[{context:"Select-Only (Base)",id:"".concat("Select-Only (Base)".toLowerCase(),"-default"),label:"".concat("Select-Only (Base)"," default (select-only)"),element:n.a.createElement(T,null)}],C=[{context:"Select-Only (Base)",id:"focused",label:"Focused (select-only)",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-4",selectOnly:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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:"listbox-id-4",snapshot:E.i,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",hasFocus:!0})},{context:"Select-Only (Base)",id:"focused-open",label:"Focused - Opened (select-only)",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-4",selectOnly:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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:"listbox-id-4",snapshot:E.h,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{context:"Select-Only (Base)",id:"highlighting-an-option",label:"Highlighting an option (select-only)",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-4",selectOnly:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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:"listbox-id-4",snapshot:E.i,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{context:"Select-Only (Base)",id:"selecting-a-single-option",label:"Selecting a single option (select-only)",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-6",selectOnly:!0,value:"Accounts",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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:"listbox-id-6",snapshot:E.l,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{context:"Select-Only (Base)",id:"selected-an-option-closed",label:"Selected an option - Closed (select-only)",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-5",selectOnly:!0,value:"Accounts",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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:"listbox-id-5",snapshot:E.l,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox"})},{context:"Select-Only (Base)",id:"selecting-multiple-options",label:"Selecting multiple options (select-only)",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-7",selectOnly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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:"listbox-id-7",snapshot:E.j,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{context:"Select-Only (Base)",id:"selected-multiple-options-closed",label:"Selected multiple options-closed (select-only)",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-8",selectOnly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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:"listbox-id-8",snapshot:E.j,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",listboxOfSelections:n.a.createElement(u.a,{snapshot:E.k,count:2})})},{context:"Select-Only (Base)",id:"selecting-a-single-option-truncated",label:"Selecting a single option (truncated)",demoStyles:"max-width: 225px;",storybookStyles:!0,element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-6",selectOnly:!0,value:"Accounts (should truncate)",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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:"listbox-id-6",snapshot:E.l,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{context:"Select-Only (Base)",id:"loading-options",label:"Loading more options (select-only)",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-222",selectOnly:!0,value:"Accounts",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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:"listbox-id-222",snapshot:E.h,type:"plain",count:3,visualSelection:!0,loading:!0}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{context:"Select-Only (Base)",id:"grouped-options",label:"Grouped options (select-only)",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-3",selectOnly:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",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.c,{id:"listbox-id-3",className:"slds-dropdown slds-dropdown_fluid",ariaLabel:"{{Placeholder for Dropdown Options}}"},n.a.createElement(p.b,{"aria-label":"Group One",snapshot:E.s,count:3}),n.a.createElement(p.b,{"aria-label":"Group Two",snapshot:E.t,count:3})),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{context:"Select-Only (Base)",id:"deprecated-closed",label:"Deprecated - Closed (select-only)",element:n.a.createElement("div",{className:"demo-only",style:{height:"10rem"}},n.a.createElement(x.a,{autocomplete:!0,inputIcon:"right",inputIconRightSymbol:"search",listbox:n.a.createElement(j,null)}))},{context:"Select-Only (Base)",id:"deprecated-focused",label:"Deprecated - Focused (select-only)",element:n.a.createElement("div",{className:"demo-only",style:{height:"10rem"}},n.a.createElement(x.a,{isOpen:!0,autocomplete:!0,inputIcon:"right",inputIconRightSymbol:"search",listbox:n.a.createElement(j,null)}))},{context:"Select-Only (Base)",id:"deprecated-open-item-focused",label:"Deprecated - Open - Item Focused (select-only)",element:n.a.createElement("div",{className:"demo-only",style:{height:"10rem"}},n.a.createElement(x.a,{isOpen:!0,autocomplete:!0,inputIcon:"right",inputIconRightSymbol:"search",listbox:n.a.createElement(j,{focused:!0}),"aria-activedescendant":w}))},{context:"Select-Only (Base)",id:"deprecated-closed-options-selected",label:"Deprecated - Option(s) Selected (select-only)",element:n.a.createElement("div",{className:"demo-only",style:{height:"10rem"}},n.a.createElement(x.a,{inputIcon:"right",inputIconRightSymbol:"search",autocomplete:!0,listbox:n.a.createElement(j,null)},n.a.createElement(g.c,{className:"slds-p-top_xxx-small"},n.a.createElement(g.d,null,n.a.createElement(g.b,{label:"Acme",tabIndex:"0"},n.a.createElement(b.a,{containerClassName:"slds-pill__icon_container",title:"Account",assistiveText:"Account"}))),n.a.createElement(g.d,null,n.a.createElement(g.b,{label:"Salesforce.com, Inc."},n.a.createElement(b.a,{containerClassName:"slds-pill__icon_container",title:"Account",assistiveText:"Account"}))))))},{context:"Select-Only (Base)",id:"".concat("Select-Only (Base)".toLowerCase(),"-without-placeholder"),label:"".concat("Select-Only (Base)"," without placeholder (select-only)"),element:n.a.createElement(y.b,{className:"slds-gutters"},n.a.createElement(y.a,null,n.a.createElement(T,{placeholder:"This has a placeholder…"})),n.a.createElement(y.a,null,n.a.createElement(T,{placeholder:""})),n.a.createElement(y.a,null,n.a.createElement(T,{placeholder:"…the middle one does not"})))}],P=[{context:"Autocomplete",id:"".concat("Autocomplete".toLowerCase(),"-default"),label:"".concat("Autocomplete"," default"),element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-9",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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:"listbox-id-9",snapshot:E.q,type:"plain",count:3}),resultsType:"listbox",hasInteractions:!0})}],k=f.d.uniqueId("listbox-id-"),N=[{context:"Autocomplete",id:"focused-open",label:"Focused - Open",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-10",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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:"listbox-id-10",snapshot:E.q,type:"plain",count:3}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{context:"Autocomplete",id:"lookup-focused-open",label:"Lookup - Focused - Open",element:n.a.createElement(r.b,{id:k,"aria-controls":"listbox-id-15",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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:"listbox-id-15",snapshot:E.b,type:"entity",count:2,"aria-labelledby":k,"aria-label":"{{Placeholder for Menu Items}}"}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{context:"Autocomplete",id:"typeahead",label:"Typeahead",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-11",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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:"opp",results:n.a.createElement(p.e,{id:"listbox-id-11",snapshot:E.v,term:"opp",type:"plain",count:4}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{context:"Autocomplete",id:"lookup-typeahead",label:"Lookup - Typeahead",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-16",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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:n.a.createElement(p.e,{id:"listbox-id-16",snapshot:E.e,term:"salesforce",type:"entity",count:4}),resultsType:"listbox","aria-activedescendant":"option0",isOpen:!0,hasFocus:!0})},{context:"Autocomplete",id:"highlighting-an-option",label:"Highlighting an option",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-12",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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:"listbox-id-12",snapshot:E.r,type:"plain",count:3}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{context:"Autocomplete",id:"lookup-highlighting-an-option",label:"Lookup - Highlighting an option",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-17",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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:"listbox-id-17",snapshot:E.c,type:"entity",count:2}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{context:"Autocomplete",id:"selected-an-option",label:"Selected an option",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-20",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(p.e,{id:"listbox-id-20",snapshot:E.q,type:"entity",count:3}),resultsType:"listbox",value:"GenePoint",hasSelection:!0,selectOnly:!0})},{context:"Autocomplete",id:"lookup-selected-an-option",label:"Lookup - Selected an option",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-18",inputIconPosition:"left-right",leftInputIcon:n.a.createElement(b.a,{symbol:"account",className:"slds-icon_small",containerClassName:"slds-combobox__input-entity-icon",assistiveText:"Account",title:"Account"}),rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"close",title:"Remove selected option",assistiveText:"Remove selected option"}),results:n.a.createElement(p.e,{id:"listbox-id-18",snapshot:E.b,type:"entity",count:2}),resultsType:"listbox",hasSelection:!0,value:"Salesforce.com, Inc.",selectOnly:!0})},{context:"Autocomplete",id:"selected-multiple-options",label:"Selected multiple options",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-13",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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:"listbox-id-13",snapshot:E.q,type:"entity",count:3}),resultsType:"listbox",hasSelection:!0,listboxOfSelections:n.a.createElement(u.a,{snapshot:E.u,count:2})})},{context:"Autocomplete",id:"lookup-multiple-options",label:"Lookup - Selected multiple options",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-19",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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:"listbox-id-19",snapshot:E.b,type:"entity",count:2}),resultsType:"listbox",hasSelection:!0,listboxOfSelections:n.a.createElement(u.a,{snapshot:E.f,count:2})})}],A=[{context:"Autocomplete",id:"lookup",label:"Lookup",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"listbox-id-14",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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:"listbox-id-14",snapshot:E.b,type:"entity",count:2}),resultsType:"listbox",hasInteractions:!0})}],q=f.d.uniqueId("combobox-id-"),D=f.d.uniqueId("primary-combobox-id-"),F=[],L=0;L<5;L++)F.push(f.d.uniqueId("listbox-id-"));var B=[{context:"Grouped",id:"".concat("Grouped".toLowerCase(),"-default"),label:"".concat("Grouped"," default"),element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-controls":F[0],comboboxID:"primary-combobox-id-1",autocomplete:!0,results:n.a.createElement(p.e,{id:F[0],snapshot:E.b,type:"entity",count:4}),resultsType:"listbox",addon:n.a.createElement(d.b,{id:f.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-1"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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}),hasInteractions:!0})}],G=[{context:"Grouped",id:"focused-open",label:"Focused - Open",element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-controls":F[1],comboboxID:"primary-combobox-id-2",autocomplete:!0,results:n.a.createElement(p.e,{id:F[1],snapshot:E.b,type:"entity",count:4}),resultsType:"listbox",isOpen:!0,hasFocus:!0,addon:n.a.createElement(d.b,{id:f.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-2"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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})})},{context:"Grouped",id:"typeahead",label:"Typeahead",element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-activedescendant":"option0","aria-label":"{{Placeholder for Dropdown Options}}","aria-controls":F[2],comboboxID:"primary-combobox-id-2",autocomplete:!0,results:n.a.createElement(p.e,{id:F[2],snapshot:E.e,term:"salesforce",type:"entity",count:4}),resultsType:"listbox",value:"salesforce",isOpen:!0,hasFocus:!0,addon:n.a.createElement(d.b,{id:f.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-2"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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})})},{context:"Grouped",id:"typeahead-loading",label:"Typeahead - Loading",element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-activedescendant":"option0","aria-controls":F[3],comboboxID:"primary-combobox-id-2",autocomplete:!0,results:n.a.createElement(p.e,{id:F[3],snapshot:E.e,term:"salesforce",type:"entity",count:4}),resultsType:"listbox",value:"salesforce",isOpen:!0,showCloseButton:!0,isLoading:!0,hasFocus:!0,addon:n.a.createElement(d.b,{id:f.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-2"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"group-right"})},{context:"Grouped",id:"selected-options",label:"Selected Options",element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-controls":F[4],comboboxID:"primary-combobox-id-3",autocomplete:!0,results:n.a.createElement(p.e,{id:F[4],snapshot:E.b,type:"entity",count:4}),resultsType:"listbox",hasFocus:!0,addon:n.a.createElement(d.b,{id:f.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-3"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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}),hasSelection:!0,listboxOfSelections:n.a.createElement(u.a,{snapshot:E.f,count:2})})},{context:"Grouped",id:"selected-options-open",label:"Selected Options - Open",element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-controls":F[5],comboboxID:"primary-combobox-id-4",autocomplete:!0,results:n.a.createElement(p.e,{id:F[5],snapshot:E.b,type:"entity",count:4}),resultsType:"listbox",isOpen:!0,hasFocus:!0,addon:n.a.createElement(d.b,{id:f.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-4"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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}),hasSelection:!0,listboxOfSelections:n.a.createElement(u.a,{snapshot:E.f,count:2})})},{context:"Grouped",id:"overflow-collapsed",label:"Selections in container - Overflowed - Collapsed",element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-controls":F[6],comboboxID:"primary-combobox-id-5",autocomplete:!0,results:n.a.createElement(p.e,{id:F[6],snapshot:E.b,type:"entity",count:4}),resultsType:"listbox",addon:n.a.createElement(d.b,{id:f.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-5"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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}),hasSelection:!0,listboxOfSelections:n.a.createElement(u.a,{snapshot:E.f,count:8})})},{context:"Grouped",id:"overflow-expanded",label:"Selections in container - Overflowed - Expanded",element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-controls":F[7],comboboxID:"primary-combobox-id-6",autocomplete:!0,results:n.a.createElement(p.e,{id:F[7],snapshot:E.b,type:"entity",count:4}),resultsType:"listbox",hasFocus:!0,addon:n.a.createElement(d.b,{id:f.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-6"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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}),hasSelection:!0,listboxOfSelections:n.a.createElement(u.a,{snapshot:E.f,count:8,isExpanded:!0})})},{context:"Grouped",id:"non-grouped-overflow-collapsed",label:"Selections - Collapsed",element:n.a.createElement(r.b,{id:q,"aria-controls":F[8],comboboxID:D,autocomplete:!0,results:n.a.createElement(p.e,{id:F[8],snapshot:E.b,type:"entity",count:4}),resultsType:"listbox",hasSelection:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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}),listboxOfSelections:n.a.createElement(u.a,{snapshot:E.f,count:8})})},{context:"Grouped",id:"non-grouped-overflow-expanded",label:"Selections - Expanded",element:n.a.createElement(r.b,{id:q,"aria-controls":F[9],comboboxID:D,autocomplete:!0,results:n.a.createElement(p.e,{id:F[9],snapshot:E.b,type:"entity",count:4}),resultsType:"listbox",hasSelection:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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}),listboxOfSelections:n.a.createElement(u.a,{snapshot:E.f,count:8,isExpanded:!0})})},{context:"Grouped",id:"scoping-results-focused",label:"Scoping results - Focused",element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-controls":F[10],comboboxID:"primary-combobox-id-7",autocomplete:!0,results:n.a.createElement(p.e,{id:F[10],snapshot:E.b,type:"entity",count:2}),addon:n.a.createElement(d.b,{id:f.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",isOpen:!0,hasFocus:!0,comboboxAriaControls:"primary-combobox-id-7"}),resultsType:"listbox",addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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})})},{context:"Grouped",id:"scoping-results-icon",label:"Scoping results - Icon variant",element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-controls":F[11],comboboxID:"primary-combobox-id-9",autocomplete:!0,results:n.a.createElement(p.e,{id:F[11],snapshot:E.b,type:"entity",count:2}),resultsType:"listbox",addon:n.a.createElement(d.a,{id:f.d.uniqueId("combobox-id-"),value:"Apex",filteredSymbol:"apex",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-9"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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})})},{context:"Grouped",id:"scoping-results-icon-focused",label:"Scoping results - Icon variant - Focused",element:n.a.createElement(r.a,{id:f.d.uniqueId("combobox-id-"),"aria-controls":F[12],comboboxID:"primary-combobox-id-8",autocomplete:!0,results:n.a.createElement(p.e,{id:F[12],snapshot:E.b,type:"entity",count:2}),resultsType:"listbox",addon:n.a.createElement(d.a,{id:f.d.uniqueId("combobox-id-"),value:"Apex",filteredSymbol:"apex",addonPosition:"start",isOpen:!0,hasFocus:!0,comboboxAriaControls:"primary-combobox-id-8"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.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})})}],M=o(38),W=o(12),R=o(8),U=o(32),z=function(){var e=f.d.uniqueId("popover-id-");return n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":e,label:"Languages",selectOnly:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),resultsType:"dialog",results:n.a.createElement(M.a,{popoverId:e,title:"Language Options",isFullWidth:!0,isHidden:!0,hasFormFooter:!0,size:"small",footer:n.a.createElement(n.a.Fragment,null,n.a.createElement(W.a,null),n.a.createElement(W.a,null))},n.a.createElement("div",null,"Any content can go here in this Dialog"))})},H=[{context:"Dialog",id:"".concat("Dialog".toLowerCase(),"-default"),label:"".concat("Dialog"," default"),element:n.a.createElement(z,null)}],K=[{context:"Dialog",id:"open",label:"Open",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-01",label:"Languages",selectOnly:!0,isOpen:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),resultsType:"dialog",results:n.a.createElement(M.a,{popoverId:"popover-unique-id-01",title:"Language Options",isFullWidth:!0,hasFormFooter:!0,size:"small",footer:n.a.createElement(n.a.Fragment,null,n.a.createElement(W.a,{isNeutral:!0},"Cancel"),n.a.createElement(W.a,{isBrand:!0},"Done"))},n.a.createElement("div",null,"Any content can go here in this Dialog"))})}],J=[{context:"Dialog",id:"with-checkbox-group",label:"With Checkbox Group",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-02",label:"Languages",selectOnly:!0,isOpen:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),resultsType:"dialog",results:n.a.createElement(M.a,{popoverId:"popover-unique-id-02",title:"Language Options",isFullWidth:!0,hasFormFooter:!0,size:"small",footer:n.a.createElement(n.a.Fragment,null,n.a.createElement(W.a,{isNeutral:!0},"Cancel"),n.a.createElement(W.a,{isBrand:!0},"Done"))},n.a.createElement(R.a,{label:"Select up to 2"},n.a.createElement(U.a,{label:"English"}),n.a.createElement(U.a,{label:"German"}),n.a.createElement(U.a,{label:"Tobagonian Creole English"}),n.a.createElement(U.a,{label:"Spanish"})))})},{context:"Dialog",id:"selecting-options",label:"Selecting Options",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-03",label:"Languages",selectOnly:!0,isOpen:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),resultsType:"dialog",results:n.a.createElement(M.a,{popoverId:"popover-unique-id-03",title:"Language Options",isFullWidth:!0,hasFormFooter:!0,size:"small",footer:n.a.createElement(n.a.Fragment,null,n.a.createElement(W.a,{isNeutral:!0},"Cancel"),n.a.createElement(W.a,{isBrand:!0},"Done"))},n.a.createElement(R.a,{label:"Select up to 2"},n.a.createElement(U.a,{label:"English"}),n.a.createElement(U.a,{label:"German",checked:!0}),n.a.createElement(U.a,{label:"Tobagonian Creole English",checked:!0}),n.a.createElement(U.a,{label:"Spanish"})))})},{context:"Dialog",id:"open-one-option-selected",label:"Open - One Option Selected ",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-04",label:"Languages",selectOnly:!0,isOpen:!0,value:"German",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),resultsType:"dialog",results:n.a.createElement(M.a,{popoverId:"popover-unique-id-04",title:"Language Options",isFullWidth:!0,hasFormFooter:!0,size:"small",footer:n.a.createElement(n.a.Fragment,null,n.a.createElement(W.a,{isNeutral:!0},"Cancel"),n.a.createElement(W.a,{isBrand:!0},"Done"))},n.a.createElement(R.a,{label:"Select up to 2"},n.a.createElement(U.a,{label:"English"}),n.a.createElement(U.a,{label:"German",checked:!0}),n.a.createElement(U.a,{label:"Tobagonian Creole English"}),n.a.createElement(U.a,{label:"Spanish"})))})},{context:"Dialog",id:"closed-one-option-selected",label:"Closed - One Option Selected",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-05",label:"Languages",selectOnly:!0,value:"German",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),resultsType:"dialog",results:n.a.createElement(M.a,{popoverId:"popover-unique-id-05",title:"Language Options",isHidden:!0,isFullWidth:!0,hasFormFooter:!0,size:"small",footer:n.a.createElement(n.a.Fragment,null,n.a.createElement(W.a,{isNeutral:!0},"Cancel"),n.a.createElement(W.a,{isBrand:!0},"Done"))},n.a.createElement(R.a,{label:"Select up to 2"},n.a.createElement(U.a,{label:"English"}),n.a.createElement(U.a,{label:"German",checked:!0}),n.a.createElement(U.a,{label:"Tobagonian Creole English"}),n.a.createElement(U.a,{label:"Spanish"})))})},{context:"Dialog",id:"open-two-or-more-options-selected",label:"Open - Two or More Options Selected",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-06",label:"Languages",selectOnly:!0,isOpen:!0,value:"2 options selected",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),resultsType:"dialog",results:n.a.createElement(M.a,{popoverId:"popover-unique-id-06",title:"Language Options",isFullWidth:!0,hasFormFooter:!0,size:"small",footer:n.a.createElement(n.a.Fragment,null,n.a.createElement(W.a,{isNeutral:!0},"Cancel"),n.a.createElement(W.a,{isBrand:!0},"Done"))},n.a.createElement(R.a,{label:"Select up to 2"},n.a.createElement(U.a,{label:"English"}),n.a.createElement(U.a,{label:"German",checked:!0}),n.a.createElement(U.a,{label:"Tobagonian Creole English",checked:!0}),n.a.createElement(U.a,{label:"Spanish"})))})},{context:"Dialog",id:"closed-two-or-more-options-selected",label:"Closed - Two or More Options Selected",element:n.a.createElement(r.b,{id:f.d.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-07",label:"Languages",selectOnly:!0,value:"2 options selected",inputIconPosition:"right",rightInputIcon:n.a.createElement(h.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),resultsType:"dialog",results:n.a.createElement(M.a,{popoverId:"popover-unique-id-07",title:"Language Options",isHidden:!0,isFullWidth:!0,hasFormFooter:!0,size:"small",footer:n.a.createElement(n.a.Fragment,null,n.a.createElement(W.a,{isNeutral:!0},"Cancel"),n.a.createElement(W.a,{isBrand:!0},"Done"))},n.a.createElement(R.a,{label:"Select up to 2"},n.a.createElement(U.a,{label:"English"}),n.a.createElement(U.a,{label:"German",checked:!0}),n.a.createElement(U.a,{label:"Tobagonian Creole English",checked:!0}),n.a.createElement(U.a,{label:"Spanish"})))})}],Y=o(39),Q=l.c.a,V=l.c.code,X=l.c.em,Z=l.c.h2,$=l.c.h3,ee=l.c.h4,te=l.c.h5,oe=l.c.li,ie=l.c.p,ne=l.c.strong,le=l.c.ul,se=function(){return Object(i.createElement)(l.b,{},Object(i.createElement)("div",{className:"lead doc"},"A widget that provides a user with an input field that is either an autocomplete or readonly, accompanied by a listbox of options."),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(C,"focused-open")),Z({id:"Base-Combobox"},"Base Combobox"),ie({},"A Base Combobox allows a user to select an option from a pre-defined list of options that that is functionally similar to an HTML ",V({},"select")," element. It is not made with an ",V({},"<input>")," element, does not allow free form user input, nor does it allow the user to modify the selected value."),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(S)),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(i.createElement)("p",null,"The Base Combobox follows the ARIA practice for Collapsible Dropdown Listbox. ",Object(i.createElement)("a",{href:"https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html",target:"_blank"},"See here")," for additional info and keyboard interactions.")),$({id:"Combobox-markup"},"Combobox markup"),le({},oe({},"A Combobox must come with an associated ",V({},"label")," element, with an appropriate ",V({},"for")," attribute"),oe({},V({},"slds-combobox")," acts as the root node to the composite Combobox widget."),oe({},"The element ",V({},"slds-combobox__form-element")," between the ",V({},"combobox"),' and its "input" must have ',V({},'role="none"'))),$({id:'"Input"-markup'},'"Input" markup'),le({},oe({},"The ",V({},"input"),"-appearing element is a ",V({},"button")," in the case of select-only comboboxes, otherwise An ",V({},"<input>")," when user-entered input is expected, like auto-complete."),oe({},"The ",V({},"button")," or ",V({},"input")," has the following attributes:",le({},oe({},V({},'aria-haspopup="listbox"')," to indicate the Combobox will display a popup, of type ",V({},"listbox"),"."),oe({},V({},'aria-expanded="true|false"')," to describe whether the popup of ",V({},"listbox")," is currently visible or not."),oe({},V({},'aria-controls=""')," which points to the ID of the ",V({},"listbox"),". It informs assistive technology what DOM node the ",V({},"input")," controls, in terms of visibility and / or content"))),oe({},"The ",V({},"input")," has the additional attributes:",le({},oe({},V({},'role="combobox"')," to be explicit, although the role is implicit on inputs"),oe({},V({},'autocomplete="off"')," to remove the browsers' suggestions from the ",V({},"input")),oe({},V({},"type")," attribute set to be ",V({},"text")," as it's not a search field"),oe({},V({},"readonly")))),oe({},"The ",V({},"button")," has the additional attributes:",le({},oe({},V({},"aria-labelledby")," with the value of the associated label element's ",V({},"id")," along with the button's ",V({},"id"))))),$({id:"Mobile"},"Mobile"),Object(i.createElement)(Y.a,{patternSpecificText:"comboboxes and the available options will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(i.createElement)(s.a,{frameStyles:{height:"20rem"},frameOnly:!0,frameTitle:"Example mobile styles for comboboxes"},Object(f.f)(C,"focused-open")),$({id:"Displaying-options"},"Displaying options"),ie({},"To toggle visibility of the ",V({},"listbox"),", add the class ",V({},"slds-is-open")," to the ",V({},"slds-dropdown-trigger")," element."),ie({},"It is most common to expand the ",V({},"listbox")," of options when a user clicks on the Combobox. For a more detailed description of interaction behaviors, see the ",Q({href:"#Interaction"},"Interaction")," section."),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"When toggling visibility of the Combobox, the ",Object(i.createElement)("code",null,"aria-expanded")," ","attribute needs to be toggled to ",Object(i.createElement)("code",null,"true"),". Set it to"," ",Object(i.createElement)("code",null,"false")," again when the options are hidden.")),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(i.createElement)("p",null,"The ",Object(i.createElement)("code",null,"listbox")," of options must be an ",Object(i.createElement)("b",null,"owned")," child of the"," ",Object(i.createElement)("code",null,"combobox"),". If it cannot be a direct child of the"," ",Object(i.createElement)("code",null,"combobox")," element, then ",Object(i.createElement)("code",null,"aria-owns")," must be placed on the ",Object(i.createElement)("code",null,"combobox")," and point to the ID of the ",Object(i.createElement)("code",null,"listbox")," ","instead.")),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(C,"focused-open")),ee({id:"Listbox-markup"},"Listbox markup"),le({},oe({},"The ",V({},"listbox")," has ",V({},'role="listbox"')," applied"),oe({},"The ",V({},"listbox")," can have child ",V({},"option"),"s. We place ",V({},'role="option"')," on a ",V({},"div")," element, inside a list item. As such the list item ",V({},"li")," needs to be removed from the Accessibility Tree with ",V({},'role="presentation"')),oe({},"A ",V({},"listbox")," has the ability to group options together under a visual heading or label. This means the ",V({},'role="listbox"')," attribute is placed on a common parent element, which can wrap multiple lists (or groups) of options",le({},oe({},"When a ",V({},"listbox")," has no option groups, the ",V({},"ul")," element has ",V({},'role="presentation"')," to remove it from the Accessibility Tree"))),oe({},"Every ",V({},"option")," has ",V({},'aria-selected="false"')," by default"),oe({},"Focused ",V({},"option"),"s should have ",V({},'aria-selected="true"')),oe({},"Chosen ",V({},"options"),"s should have ",V({},'aria-checked="true"')),oe({},"Disabled ",V({},"option"),"s should have ",V({},'aria-disabled="true"')," applied along with ",Q({href:"#Disabled-listbox-items"},"a class on the icon in an entity option"))),ee({id:"Loading-more-options"},"Loading more options"),ie({},"If you are dynamically loading in more items to the listbox, the very last ",V({},"<li>")," of the ",V({},"<ul>")," should receive the ",V({},'role="option"')," attribute and have the ",Q({href:"/components/spinners/"},"Spinner component")," injected into it."),ie({},"For layout purposes, wrap the spinner in a ",V({},"<div>")," with the class ",V({},"slds-align_absolute-center")," to position the spinner in the middle of the list item, as well as ",V({},"slds-p-top_medium")," to provide the appropriate amount of space for the spinner to be visible."),Object(i.createElement)(s.a,{demoStyles:"height: 14rem;"},Object(f.f)(C,"loading-options")),$({id:"Grouped-options"},"Grouped options"),ie({},"Options within a ",V({},"listbox")," can be grouped together under meaningful headings. This is useful if you wish to create separation between 2 or more sets of options within a single ",V({},"listbox"),"."),Object(i.createElement)(s.a,{demoStyles:"height: 18rem;"},Object(f.f)(C,"grouped-options")),ee({id:"Grouped-listbox-markup"},"Grouped listbox markup"),le({},oe({},"When a ",V({},"listbox")," has option groups, each group gets a visual label. Exactly like ",V({},"optgroup")," in a ",V({},"select")," element",le({},oe({},"The ",V({},"ul")," element in this case has ",V({},'role="group"')," with an ",V({},"aria-label")," that matches the visible label"),oe({},"Display the group label visually, but due to the way a ",V({},"listbox")," works it can only be marked as ",V({},'role="presentation"'),", as a ",V({},"listbox")," can only have ",V({},"option")," children. This allows us to communicate the group label visually and programmatically to a screen reader")))),$({id:"Styling-choices-for-options"},"Styling choices for options"),ie({},"The options in the ",V({},"listbox")," can have a left icon and/or metatext."),Object(i.createElement)(s.a,{demoStyles:"position: relative; height: 12rem;"},Object(i.createElement)(p.e,{id:"listbox-id-2",snapshot:E.w,type:"plain",count:4})),ee({id:"Disabled-listbox-items"},"Disabled listbox items"),ie({},"Options in a listbox that are disabled require these accessibility and styling considerations:"),le({},oe({},V({},'aria-disabled="true"')," must be applied to ",V({},"slds-listbox__option")),oe({},"if using an entity icon, apply ",V({},"slds-icon_disabled")," to ",V({},"slds-icon_container"))),ie({},X({},"Plain options: Example shows two disabled options with one enabled one")),Object(i.createElement)(s.a,{demoStyles:"position: relative; height: 9rem;"},Object(i.createElement)(p.e,{id:f.d.uniqueId("listbox-id-"),snapshot:E.m,type:"plain",count:3})),ie({},X({},"Entity options: Example shows two disabled entity options with one enabled one")),Object(i.createElement)(s.a,{demoStyles:"position: relative; height: 9rem;"},Object(i.createElement)(p.e,{id:f.d.uniqueId("listbox-id-"),snapshot:E.a,type:"entity",count:3})),$({id:"Interaction"},"Interaction"),ie({},"At its most basic, the ",V({},"listbox")," of options should be displayed when a user interacts with the Combobox. When the user leaves the combobox the options are hidden. However, there are some differences when interacting with a Combobox with a mouse versus with a keyboard."),ee({id:"Expanding-the-Combobox"},"Expanding the Combobox"),ie({},"A mouse or pointer device user can click on a Combobox and the ",V({},"listbox")," will display automatically whilst focus is placed inside the Combobox input field."),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(C,"focused-open")),ie({},"If using a keyboard, placing focus into the Combobox input field ",X({},"will not")," display the ",V({},"listbox")," of options automatically."),Object(i.createElement)(s.a,null,Object(f.f)(C,"focused")),ie({},"After focusing inside the Combobox with the keyboard, pressing the ",V({},"Down")," or ",V({},"Enter")," key will expand the collapsed Combobox and display the ",V({},"listbox")," options. Be sure to update ",V({},"aria-expanded")," to be true. This will also highlight the first option in the listbox."),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"Update ",Object(i.createElement)("code",null,"aria-expanded"),' to "true" when the Combobox is expanded.')),ee({id:"Highlighting-an-option"},"Highlighting an option"),ie({},"To Highlight an option in the ",V({},"Listbox")," use the ",V({},"Up")," and ",V({},"Down")," arrow keys to cycle through all the available options in the list."),le({},oe({},"Each press of the arrow key ",ne({},"must")," update the ",V({},"input")," value to reflect the currently selected option"),oe({},"It is common to loop the selected option to the first option when you get to the last option in the list. Similarly, loop to the last option when you reach the first option.")),ie({},"When an option from the ",V({},"listbox"),' is "in focus", user focus never leaves the ',V({},"input"),' field, since we manually create a programmatic or "faux focus" state that highlights the selected option and associates it to the ',V({},"input"),"."),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,'When highlighting an option with "faux focus", the'," ",Object(i.createElement)("code",null,"aria-activedescendant")," attribute on the ",Object(i.createElement)("code",null,"input")," needs to be set to the value of the ID of the highlighted option. The highlighted option must also have ",Object(i.createElement)("code",null,'aria-selected="true"'),". When no option is highlighted, ",Object(i.createElement)("code",null,"aria-activedescendant")," must be removed.")),ie({},"By typing the first letter of an option name, the first matching option will highlight. When the letter doesn't match an option, highlighting doesn't move."),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(C,"highlighting-an-option")),ee({id:"Collapsing-the-Combobox"},"Collapsing the Combobox"),ie({},"To collapse the Combobox the user should be able to press the ",V({},"Escape")," key on their keyboard or click anywhere outside of the Combobox."),ie({},"Pressing the ",V({},"Enter")," or ",V({},"Tab")," key while an option is highlighted selects the option as the current value and collapses the Combobox."),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"Update ",Object(i.createElement)("code",null,"aria-expanded"),' to "false" when the Combobox is collapsed.')),$({id:"Selecting-an-option"},"Selecting an option"),ie({},"A user selects an option by clicking the option they want, or by using arrow keys to high