@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 67.7 kB
JavaScript
var 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],u=0,p=[];u<a.length;u++)s=a[u],l[s]&&p.push(l[s][0]),l[s]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);for(d&&d(t);p.length;)p.shift()();return n.push.apply(n,r||[]),o()}function o(){for(var e,t=0;t<n.length;t++){for(var o=n[t],i=!0,a=1;a<o.length;a++){var c=o[a];0!==l[c]&&(i=!1)}i&&(n.splice(t--,1),e=s(s.s=o[0]))}return e}var i={},l={9:0},n=[];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,{configurable:!1,enumerable:!0,get:o})},s.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},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 n.push([113,0]),o()}({0:function(e,t){e.exports=React},111:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=t.ComboboxWithDialog=void 0;var i=u(o(0)),l=u(o(20)),n=o(8),s=u(o(5)),a=o(28),c=o(14),r=o(13),d=o(17);function u(e){return e&&e.__esModule?e:{default:e}}var p=t.ComboboxWithDialog=function(e){var t=s.default.uniqueId("popover-id-");return i.default.createElement(l.default,{id:s.default.uniqueId("combobox-id-"),"aria-controls":t,label:"Languages",readonly:!0,inputIconPosition:"right",rightInputIcon:i.default.createElement(n.UtilityIcon,{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:i.default.createElement(a.Popover,{popoverId:t,title:"Language Options",isFullWidth:!0,isHidden:!0,hasFormFooter:!0,size:"small",footer:i.default.createElement(i.default.Fragment,null,i.default.createElement(c.Button,null),i.default.createElement(c.Button,null))},i.default.createElement("div",null,"Any content can go here in this Dialog"))})};t.default=i.default.createElement(p,null);t.states=[{id:"open",label:"Open",element:i.default.createElement(l.default,{id:s.default.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-01",label:"Languages",readonly:!0,isOpen:!0,inputIconPosition:"right",rightInputIcon:i.default.createElement(n.UtilityIcon,{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:i.default.createElement(a.Popover,{popoverId:"popover-unique-id-01",title:"Language Options",isFullWidth:!0,hasFormFooter:!0,size:"small",footer:i.default.createElement(i.default.Fragment,null,i.default.createElement(c.Button,{isNeutral:!0},"Cancel"),i.default.createElement(c.Button,{isBrand:!0},"Done"))},i.default.createElement("div",null,"Any content can go here in this Dialog"))})}],t.examples=[{id:"with-checkbox-group",label:"With Checkbox Group",element:i.default.createElement(l.default,{id:s.default.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-02",label:"Languages",readonly:!0,isOpen:!0,inputIconPosition:"right",rightInputIcon:i.default.createElement(n.UtilityIcon,{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:i.default.createElement(a.Popover,{popoverId:"popover-unique-id-02",title:"Language Options",isFullWidth:!0,hasFormFooter:!0,size:"small",footer:i.default.createElement(i.default.Fragment,null,i.default.createElement(c.Button,{isNeutral:!0},"Cancel"),i.default.createElement(c.Button,{isBrand:!0},"Done"))},i.default.createElement(r.Fieldset,{label:"Select up to 2"},i.default.createElement(d.Checkbox,{label:"English"}),i.default.createElement(d.Checkbox,{label:"German"}),i.default.createElement(d.Checkbox,{label:"Tobagonian Creole English"}),i.default.createElement(d.Checkbox,{label:"Spanish"})))})},{id:"selecting-options",label:"Selecting Options",element:i.default.createElement(l.default,{id:s.default.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-03",label:"Languages",readonly:!0,isOpen:!0,inputIconPosition:"right",rightInputIcon:i.default.createElement(n.UtilityIcon,{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:i.default.createElement(a.Popover,{popoverId:"popover-unique-id-03",title:"Language Options",isFullWidth:!0,hasFormFooter:!0,size:"small",footer:i.default.createElement(i.default.Fragment,null,i.default.createElement(c.Button,{isNeutral:!0},"Cancel"),i.default.createElement(c.Button,{isBrand:!0},"Done"))},i.default.createElement(r.Fieldset,{label:"Select up to 2"},i.default.createElement(d.Checkbox,{label:"English"}),i.default.createElement(d.Checkbox,{label:"German",checked:!0}),i.default.createElement(d.Checkbox,{label:"Tobagonian Creole English",checked:!0}),i.default.createElement(d.Checkbox,{label:"Spanish"})))})},{id:"open-one-option-selected",label:"Open - One Option Selected ",element:i.default.createElement(l.default,{id:s.default.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-04",label:"Languages",readonly:!0,isOpen:!0,value:"German",inputIconPosition:"right",rightInputIcon:i.default.createElement(n.UtilityIcon,{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:i.default.createElement(a.Popover,{popoverId:"popover-unique-id-04",title:"Language Options",isFullWidth:!0,hasFormFooter:!0,size:"small",footer:i.default.createElement(i.default.Fragment,null,i.default.createElement(c.Button,{isNeutral:!0},"Cancel"),i.default.createElement(c.Button,{isBrand:!0},"Done"))},i.default.createElement(r.Fieldset,{label:"Select up to 2"},i.default.createElement(d.Checkbox,{label:"English"}),i.default.createElement(d.Checkbox,{label:"German",checked:!0}),i.default.createElement(d.Checkbox,{label:"Tobagonian Creole English"}),i.default.createElement(d.Checkbox,{label:"Spanish"})))})},{id:"closed-one-option-selected",label:"Closed - One Option Selected",element:i.default.createElement(l.default,{id:s.default.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-05",label:"Languages",readonly:!0,value:"German",inputIconPosition:"right",rightInputIcon:i.default.createElement(n.UtilityIcon,{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:i.default.createElement(a.Popover,{popoverId:"popover-unique-id-05",title:"Language Options",isHidden:!0,isFullWidth:!0,hasFormFooter:!0,size:"small",footer:i.default.createElement(i.default.Fragment,null,i.default.createElement(c.Button,{isNeutral:!0},"Cancel"),i.default.createElement(c.Button,{isBrand:!0},"Done"))},i.default.createElement(r.Fieldset,{label:"Select up to 2"},i.default.createElement(d.Checkbox,{label:"English"}),i.default.createElement(d.Checkbox,{label:"German",checked:!0}),i.default.createElement(d.Checkbox,{label:"Tobagonian Creole English"}),i.default.createElement(d.Checkbox,{label:"Spanish"})))})},{id:"open-two-or-more-options-selected",label:"Open - Two or More Options Selected",element:i.default.createElement(l.default,{id:s.default.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-06",label:"Languages",readonly:!0,isOpen:!0,value:"2 options selected",inputIconPosition:"right",rightInputIcon:i.default.createElement(n.UtilityIcon,{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:i.default.createElement(a.Popover,{popoverId:"popover-unique-id-06",title:"Language Options",isFullWidth:!0,hasFormFooter:!0,size:"small",footer:i.default.createElement(i.default.Fragment,null,i.default.createElement(c.Button,{isNeutral:!0},"Cancel"),i.default.createElement(c.Button,{isBrand:!0},"Done"))},i.default.createElement(r.Fieldset,{label:"Select up to 2"},i.default.createElement(d.Checkbox,{label:"English"}),i.default.createElement(d.Checkbox,{label:"German",checked:!0}),i.default.createElement(d.Checkbox,{label:"Tobagonian Creole English",checked:!0}),i.default.createElement(d.Checkbox,{label:"Spanish"})))})},{id:"closed-two-or-more-options-selected",label:"Closed - Two or More Options Selected",element:i.default.createElement(l.default,{id:s.default.uniqueId("combobox-id-"),"aria-controls":"popover-unique-id-07",label:"Languages",readonly:!0,value:"2 options selected",inputIconPosition:"right",rightInputIcon:i.default.createElement(n.UtilityIcon,{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:i.default.createElement(a.Popover,{popoverId:"popover-unique-id-07",title:"Language Options",isHidden:!0,isFullWidth:!0,hasFormFooter:!0,size:"small",footer:i.default.createElement(i.default.Fragment,null,i.default.createElement(c.Button,{isNeutral:!0},"Cancel"),i.default.createElement(c.Button,{isBrand:!0},"Done"))},i.default.createElement(r.Fieldset,{label:"Select up to 2"},i.default.createElement(d.Checkbox,{label:"English"}),i.default.createElement(d.Checkbox,{label:"German",checked:!0}),i.default.createElement(d.Checkbox,{label:"Tobagonian Creole English",checked:!0}),i.default.createElement(d.Checkbox,{label:"Spanish"})))})}]},112:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var o=0;o<t.length;o++){var i=t[o];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,o,i){return o&&e(t.prototype,o),i&&e(t,i),t}}(),l=o(0),n=r(l),s=o(58),a=o(15),c=r(o(1));function r(e){return e&&e.__esModule?e:{default:e}}var d=function(e){function t(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var e=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.renderSelections=e.renderSelections.bind(e),e}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,l.Component),i(t,[{key:"renderSelections",value:function(e){var t=this.props.snapshot[e];return n.default.createElement(s.ListboxPillsItem,{key:e},n.default.createElement(s.ListboxPill,{label:t.name,tabIndex:t.tabIndex},t.entityType&&n.default.createElement(a.StandardIcon,{containerClassName:"slds-pill__icon_container",title:t.entityType,assistiveText:t.entityType})))}},{key:"render",value:function(){var e=this.props,t=e.count,o=void 0===t?1:t,i=e.isExpanded,l=void 0!==i&&i,a=e.snapshot;return n.default.createElement("div",{className:(0,c.default)("slds-listbox_selection-group",l&&"slds-is-expanded")},o>2&&!0!==l?n.default.createElement("span",{className:"slds-listbox-toggle","aria-hidden":!0},n.default.createElement("button",{className:"slds-button",tabIndex:"-1"},"+6 more")):null,n.default.createElement(s.ListboxPills,null,Object.keys(a).slice(0,o).map(this.renderSelections)))}}]),t}();t.default=d},113:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getContents=t.getElement=void 0;var i=o(0),l=(C(i),o(7)),n=C(l),s=C(o(9)),a=C(o(11)),c=C(o(12)),r=C(o(10)),d=o(20),u=C(d),p=o(39),m=C(p),h=o(21),b=C(h),f=C(o(112)),x=C(o(3)),y=o(8),g=o(15),E=w(o(57)),v=w(o(111)),_=o(5),I=C(_);function w(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t.default=e,t}function C(e){return e&&e.__esModule?e:{default:e}}var T=l.factories.a,O=l.factories.code,S=l.factories.em,N=l.factories.h2,P=l.factories.h3,k=l.factories.h4,A=l.factories.h5,q=l.factories.li,D=l.factories.p,F=l.factories.strong,W=l.factories.ul,U=t.getElement=function(){return(0,i.createElement)(n.default,{},(0,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."),N({id:"Base-Combobox"},"Base Combobox"),D({},"A Base Combobox is a readonly text ",O({},"input")," that allows a user to select an option from a pre-defined list of options. It does not allow free form user input, nor does it allow the user to modify the selected value."),(0,i.createElement)(r.default,{title:"Combobox - Base"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"15rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-1",readonly:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-1",snapshot:E.ObjectOptions,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0}))),P({id:"Combobox-markup"},"Combobox markup"),W({},q({},"A Combobox must come with an associated ",O({},"label")," element, with an appropriate ",O({},"for")," attribute"),q({},O({},"slds-combobox")," acts as the root node to the composite Combobox widget. It takes the ",O({},'role="combobox"')," attribute as a result",W({},q({},O({},'aria-haspopup="listbox"')," attribute is then applied to indicate the Combobox will display a popup, of type ",O({},"listbox")),q({},O({},'aria-expanded="true|false"')," attribute is applied to describe whether the popup of ",O({},"listbox")," is currently visible or not"))),q({},"The element ",O({},"slds-combobox__form-element")," between the ",O({},"combobox")," and its ",O({},"input")," must have ",O({},'role="none"'))),P({id:"Input-markup"},"Input markup"),W({},q({},"The ",O({},"input")," is an ",O({},"input")," with a role of ",O({},"textbox"),". The role is implicit on inputs, but in this case it doesn't hurt to be explicit"),q({},"The ",O({},"input")," has the following attributes:",W({},q({},O({},'autocomplete="off"')," to remove the browsers' suggestions from the ",O({},"input")),q({},O({},'aria-controls=""')," which points to the ID of the ",O({},"listbox"),". It informs assistive technology what DOM node the ",O({},"input")," controls, in terms of visibility and / or content"),q({},O({},"type")," attribute set to be ",O({},"text")," as it's not a search field"),q({},O({},"readonly"))))),P({id:"Displaying-options"},"Displaying options"),D({},"To toggle visibility of the ",O({},"listbox"),", add the class ",O({},"slds-is-open")," to the ",O({},"slds-dropdown-trigger")," element."),D({},"It is most common to expand the ",O({},"listbox")," of options when a user clicks on the Combobox. For a more detailed description of interaction behaviors, see the ",T({href:"#Interaction"},"Interaction")," section."),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Requirement"},"When toggling visibility of the Combobox, the ",(0,i.createElement)("code",{className:"doc"},"aria-expanded")," attribute needs to be toggled to ",(0,i.createElement)("code",{className:"doc"},"true"),". Set it to ",(0,i.createElement)("code",{className:"doc"},"false")," again when the options are hidden."),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Note"},"The ",(0,i.createElement)("code",{className:"doc"},"listbox")," of options must be an ",(0,i.createElement)("b",null,"owned")," child of the ",(0,i.createElement)("code",{className:"doc"},"combobox"),". If it cannot be a direct child of the ",(0,i.createElement)("code",{className:"doc"},"combobox")," element, then ",(0,i.createElement)("code",{className:"doc"},"aria-owns")," must be placed on the ",(0,i.createElement)("code",{className:"doc"},"combobox")," and point to the ID of the ",(0,i.createElement)("code",{className:"doc"},"listbox")," instead."),(0,i.createElement)(r.default,{title:"Combobox - Displaying Options"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"15rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-2",readonly:!0,value:"Accounts",inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-2",snapshot:E.ObjectOptions,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",isOpen:!0,hasFocus:!0}))),k({id:"Listbox-markup"},"Listbox markup"),W({},q({},"The ",O({},"listbox")," has ",O({},'role="listbox"')," applied"),q({},"The ",O({},"listbox")," can have child ",O({},"option"),"s. We place ",O({},'role="option"')," on a ",O({},"div")," element, inside a list item. As such the list item ",O({},"li")," needs to be removed from the Accessibility Tree with ",O({},'role="presentation"')),q({},"A ",O({},"listbox")," has the ability to group options together under a visual heading or label. This means the ",O({},'role="listbox"')," attribute is placed on a common parent element, which can wrap multiple lists (or groups) of options",W({},q({},"When a ",O({},"listbox")," has no option groups, the ",O({},"ul")," element has ",O({},'role="presentation"')," to remove it from the Accessibility Tree"))),q({},"Every ",O({},"option")," has ",O({},'aria-selected="false"')," by default"),q({},"Disabled ",O({},"option"),"s should have ",O({},'aria-disabled="true"')," applied")),k({id:"Loading-more-options"},"Loading more options"),D({},"If you are dynamically loading in more items to the listbox, the very last ",O({},"<li>")," of the ",O({},"<ul>")," should receive the ",O({},'role="presentation"')," attribute and have the ",T({href:"/components/spinners/"},"Spinner component")," injected into it."),D({},"For layout purposes, wrap the spinner in a ",O({},"<div>")," with the class ",O({},"slds-align_absolute-center")," to position the spinner in the middle of the list item, as well as ",O({},"slds-p-top_medium")," to provide the appropiate amount of space for the spinner to be visible."),(0,i.createElement)(r.default,{title:"Combobox - Loading Options"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"15rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-222",readonly:!0,value:"Accounts",inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-222",snapshot:E.ObjectOptions,type:"plain",count:3,visualSelection:!0,loading:!0}),resultsType:"listbox",isOpen:!0,hasFocus:!0}))),P({id:"Grouped-options"},"Grouped options"),D({},"Options within a ",O({},"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 ",O({},"listbox"),"."),(0,i.createElement)(r.default,{title:"Combobox - Grouped Options"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"17rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-3",readonly:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(h.ListboxWrapper,{id:"listbox-id-3",className:"slds-dropdown slds-dropdown_fluid"},(0,i.createElement)(h.ListboxGroup,{"aria-label":"Group One",snapshot:E.PlainOptionsGroupOne,count:3}),(0,i.createElement)(h.ListboxGroup,{"aria-label":"Group Two",snapshot:E.PlainOptionsGroupTwo,count:3})),resultsType:"listbox",isOpen:!0,hasFocus:!0}))),k({id:"Grouped-listbox-markup"},"Grouped listbox markup"),W({},q({},"When a ",O({},"listbox")," has option groups, each group gets a visual label. Exactly like ",O({},"optgroup")," in a ",O({},"select")," element",W({},q({},"The ",O({},"ul")," element in this case has ",O({},'role="group"')," with an ",O({},"aria-label")," that matches the visible label"),q({},"Display the group label visually, but due to the way a ",O({},"listbox")," works it can only be marked as ",O({},'role="presentation"'),", as a ",O({},"listbox")," can only have ",O({},"option")," children. This allows us to communicate the group label visually and programmatically to a screen reader")))),P({id:"Styling-choices-for-options"},"Styling choices for options"),D({},"The options in the ",O({},"listbox")," can have a left icon and/or metatext."),(0,i.createElement)(s.default,{style:{position:"relative",maxWidth:"20rem",height:"12rem"}},(0,i.createElement)(b.default,{id:"listbox-id-2",snapshot:E.PlainStylingOptions,type:"plain",count:4})),P({id:"Interaction"},"Interaction"),D({},"At its most basic, the ",O({},"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."),k({id:"Expanding-the-Combobox"},"Expanding the Combobox"),D({},"A mouse or pointer device user can click on a Combobox and the ",O({},"listbox")," will display automatically whilst focus is placed inside the Combobox input field."),(0,i.createElement)(r.default,{title:"Combobox - Handling focus"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"15rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-4",readonly:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-4",snapshot:E.ObjectOptions,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",isOpen:!0,hasFocus:!0}))),D({},"If using a keyboard, placing focus into the Combobox input field ",S({},"will not")," display the ",O({},"listbox")," of options automatically."),(0,i.createElement)(r.default,{title:"Combobox - Handling focus with a keyboard"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"5rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-4",readonly:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-4",snapshot:E.ObjectOptionsFocused,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",hasFocus:!0}))),D({},"After focusing inside the Combobox with the keyboard, pressing the ",O({},"Down")," or ",O({},"Enter")," key will expand the collapsed Combobox and display the ",O({},"listbox")," options. Be sure to update ",O({},"aria-expanded")," to be true. This will also highlight the first option in the listbox."),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Requirement"},"Update ",(0,i.createElement)("code",{className:"doc"},"aria-expanded"),' to "true" when the Combobox is expanded.'),k({id:"Highlighting-an-option"},"Highlighting an option"),D({},"To Highlight an option in the ",O({},"Listbox")," use the ",O({},"Up")," and ",O({},"Down")," arrow keys to cycle through all the available options in the list."),W({},q({},"Each press of the arrow key ",F({},"must")," update the ",O({},"input")," value to reflect the currently selected option"),q({},"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.")),D({},"When an option from the ",O({},"listbox"),' is "in focus", user focus never leaves the ',O({},"input"),' field, since we manually create a programmatic or "faux focus" state that highlights the selected option and associates it to the ',O({},"input"),"."),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Requirement"},'When highlighting an option with "faux focus", the ',(0,i.createElement)("code",{className:"doc"},"aria-activedescendant")," attribute on the ",(0,i.createElement)("code",{className:"doc"},"input")," needs to be set to the value of the ID of the highlighted option. The highlighted option must also have ",(0,i.createElement)("code",{className:"doc"},'aria-selected="true"'),". When no option is highlighted, ",(0,i.createElement)("code",{className:"doc"},"aria-activedescendant")," must be removed."),D({},"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."),(0,i.createElement)(r.default,{title:"Combobox - Highlighting an option"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"15rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-4",readonly:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-4",snapshot:E.ObjectOptionsFocused,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0}))),k({id:"Collapsing-the-Combobox"},"Collapsing the Combobox"),D({},"To collapse the Combobox the user should be able to press the ",O({},"Escape")," key on their keyboard or click anywhere outside of the Combobox."),D({},"Pressing the ",O({},"Enter")," key whilst an option is highlighted will select the option as the current value and collapse the Combobox."),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Requirement"},"Update ",(0,i.createElement)("code",{className:"doc"},"aria-expanded"),' to "false" when the Combobox is collapsed.'),P({id:"Selecting-an-option"},"Selecting an option"),D({},"A user selects an option by using their mouse to click the option they require, or pressing the ",O({},"Enter")," key once they have arrowed to the desired option."),D({},"Upon selection the Combobox collapses, only showing the ",O({},"input")," field. The value of the ",O({},"input")," inside the Combobox is set to match the selected option name so the user can see what was previously selected from the ",O({},"listbox")," of options."),(0,i.createElement)(r.default,{title:"Combobox - Selecting an Option"},(0,i.createElement)("div",{className:"docs-codeblock-example"},(0,i.createElement)("div",{style:{maxWidth:"40rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-5",readonly:!0,value:"Accounts",inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-5",snapshot:E.ObjectOptionsSingleSelection,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox"})))),k({id:"Single-selection"},"Single selection"),D({},"When an option becomes selected, the class ",O({},"slds-is-selected")," should be applied to the ",O({},"slds-listbox__option")," element with the ",O({},'role="option"'),". This will provide visual feedback that the user has selected that element."),(0,i.createElement)(r.default,{title:"Combobox - Single Selection"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"15rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-6",readonly:!0,value:"Accounts",inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-6",snapshot:E.ObjectOptionsSingleSelection,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0}))),A({id:"Re-opening-with-a-selection"},"Re-opening with a selection"),D({},"When re-opening a Combobox that already has a selected value, the ",O({},"listbox")," should be displayed with the selected option already highlighted."),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Requirement"},"Be sure to re-set the ",(0,i.createElement)("code",{className:"doc"},"aria-activedescendant")," attribute on the `input` to the value of the ID of the highlighted option. The highlighted option must also have ",(0,i.createElement)("code",{className:"doc"},'aria-selected="true"'),"."),k({id:"Multiple-selections"},"Multiple selections"),D({},"When more than one option has been selected, the value of the ",O({},"input"),' should be updated with the total number of selected items, such as "3 options selected".'),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Note"},'The value of the Combobox is the only way you can communicate what option was selected to a screen reader. Given that the option names don\'t appear in the set value, adding "Current Selection:" to each selected option name allows a screen reader user to understand that the option was already selected from the list.'),(0,i.createElement)(a.default,{toggleCode:!1},(0,i.createElement)(h.Option,{name:"Accounts",selected:!0})),(0,i.createElement)(r.default,{title:"Combobox - Multiple Selections"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"15rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-7",readonly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-7",snapshot:E.ObjectOptionsMultiSelection,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",isOpen:!0,hasFocus:!0}))),D({},"When a Combobox with multiple selected options is closed, a ",T({href:"/components/pills?variant=listbox-of-pill-options"},"Listbox of Pills")," is also used to represent those selected options."),D({},"The ",T({href:"/components/pills?variant=listbox-of-pill-options"},"Listbox of Pills")," is positioned below the read-only ",O({},"input"),", outside of the Combobox. Each pill represents a selected option. This allows a user to easily see and remove selected items from the Combobox without opening it again."),(0,i.createElement)(r.default,{title:"Combobox - Multiple selection closed"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-8",readonly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-8",snapshot:E.ObjectOptionsMultiSelection,type:"plain",count:8,visualSelection:!0}),resultsType:"listbox",listboxOfSelections:(0,i.createElement)(f.default,{snapshot:E.ObjectOptionsSelected,count:2})}))),k({id:"Editing-multiple-selections"},"Editing multiple selections"),D({},"The ",T({href:"/components/pills?variant=listbox-of-pill-options"},"Listbox of Pills"),' allows you to quickly remove selections without opening the Combobox by clicking the remove "x" or using your delete key.'),D({},"The ",T({href:"/components/pills?variant=listbox-of-pill-options"},"Listbox of Pills")," acts as a single focusable element. Using the arrow keys whilst focused on the first pill will cycle the user through the pill options."),N({id:"Autocomplete-Combobox"},"Autocomplete Combobox"),D({},"An autocomplete Combobox also allows a user to select an option from a list, but that list can be affected by what the user types into the ",O({},"input")," of the Combobox. This can be useful when the list of options is very large, as user input can start to display options that only match the text they have entered."),D({},"If no option matches, the user can complete the value of the combobox by finishing their own text entry."),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Difference"},"The difference between the ",(0,i.createElement)("strong",null,"Base Combobox")," and the ",(0,i.createElement)("strong",null,"Autocomplete Combobox"),", is that the text ",(0,i.createElement)("code",{className:"doc"},"input")," must have the ",(0,i.createElement)("code",{className:"doc"},"readonly")," attribute removed and replaced with ",(0,i.createElement)("code",{className:"doc"},'aria-autocomplete="list"'),"."),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"12rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-9",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-9",snapshot:E.PlainOptions,type:"plain",count:3}),resultsType:"listbox",hasInteractions:!0}))),P({id:"Displaying-options-2"},"Displaying options"),D({},"Displaying options for the Autocomplete Combobox happens just like the base Combobox, except there is no difference between mouse and keyboard users when interacting with the Combobox for the first time. Clicking or placing focus on the Combobox text ",O({},"input")," will automatically expand the Combobox and display the options."),D({},"When a user stops interacting with the Combobox, or selects an option, the Combobox collapses and hides the options."),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Displaying Options"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"12rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-10",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-10",snapshot:E.PlainOptions,type:"plain",count:3}),resultsType:"listbox",isOpen:!0,hasFocus:!0}))),P({id:"Displaying-options-based-on-user-input"},"Displaying options based on user input"),D({},"If an option from the pre-populated ",O({},"listbox")," isn't what the user wants, they can start typing into the ",O({},"input"),". This term will be used to filter the options by and narrow down the size of the list to something more relevant."),D({},"Whilst typing, the highlighted option in the ",O({},"listbox")," should be the user's text string."),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Requirement"},'When highlighting an option with "faux focus", the ',(0,i.createElement)("code",{className:"doc"},"aria-activedescendant")," attribute on the `input` needs to be set to the value of the ID of the highlighted option. The highlighted option must also have ",(0,i.createElement)("code",{className:"doc"},'aria-selected="true"'),"."),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Displaying options based on user input"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"12rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-11",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-11",snapshot:E.PlainOptionsTypeahead,term:"opp",type:"plain",count:4}),resultsType:"listbox",isOpen:!0,hasFocus:!0}))),P({id:"Drill-In-for-Autocomplete"},"Drill In for Autocomplete"),D({},"The options in the autocomplete ",O({},"listbox")," can have a right icon to indicate an option that drills in for more options."),(0,i.createElement)(s.default,{style:{position:"relative",maxWidth:"20rem",height:"10rem"}},(0,i.createElement)(b.default,{id:"listbox-id-3",snapshot:E.EntityStylingOptions,type:"entity",count:3,visualSelection:!0})),P({id:"Keyboard-interaction"},"Keyboard interaction"),D({},"The same keyboard interactions apply from the base Combobox, but with these differences:"),W({},q({},O({},"Up")," and ",O({},"Down")," arrows ",F({},"should optionally")," update the ",O({},"input")," value to reflect the currently selected option")),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Keyboard interactions"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"12rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-12",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-12",snapshot:E.PlainOptionsFocused,type:"plain",count:3}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0}))),P({id:"Selecting-an-option-2"},"Selecting an option"),D({},"The user again can click on the desired option or press the ",O({},"Enter")," key with the desired option highlighted. Alternatively they can leave their entered text string as the value of the Combobox."),D({},"Selecting an option from the ",O({},"listbox")," will close the ",O({},"listbox"),"."),D({},"To remove the selected option, simply clear the text ",O({},"input"),"."),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Selecting an option"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-unique-id-03",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(x.default,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:(0,i.createElement)(b.default,{id:"listbox-unique-id-03",snapshot:E.PlainOptions,type:"entity",count:3}),resultsType:"listbox",value:"GenePoint"}))),P({id:"Multiple-selection"},"Multiple selection"),D({},"Multiple selection is much the same as the Base Combobox. A list of selected options are displayed below the Combobox as a ",T({href:"/components/pills?variant=listbox-of-pill-options"},"Listbox of Pills"),"."),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Multiple selections"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-13",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-13",snapshot:E.PlainOptions,type:"entity",count:3}),resultsType:"listbox",hasSelection:!0,listboxOfSelections:(0,i.createElement)(f.default,{snapshot:E.PlainOptionsSelected,count:2})}))),k({id:"Editing-multiple-selections-2"},"Editing multiple selections"),D({},"The ",T({href:"/components/pills?variant=listbox-of-pill-options"},"Listbox of Pills"),' allows you to quickly remove selections without opening the Combobox by clicking the remove "x" or using your delete key.'),D({},"The ",T({href:"/components/pills?variant=listbox-of-pill-options"},"Listbox of Pills")," acts as a single focusable element. Using the arrow keys whilst focused on the first pill will cycle the user through the pill options."),N({id:"Entity-Autocomplete-Combobox-(Lookup)"},"Entity Autocomplete Combobox (Lookup)"),D({},"An Entity Autocomplete Combobox or Lookup, is used to search for and select Salesforce Entities."),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Entity"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"10rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-14",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-14",snapshot:E.EntityOptions,type:"entity",count:2}),resultsType:"listbox",hasInteractions:!0}))),P({id:"Displaying-options-3"},"Displaying options"),D({},"Displaying options happens just like an Autocomplete Combobox, by placing user focus inside the Combobox text ",O({},"input"),"."),D({},"The options now have extra information about them, such as the type of entity and any other important metadata."),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Entity - Displaying options"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"10rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-15",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-15",snapshot:E.EntityOptions,type:"entity",count:2}),resultsType:"listbox",isOpen:!0,hasFocus:!0}))),P({id:"Displaying-options-based-on-user-input-2"},"Displaying options based on user input"),D({},"As with the Autocomplete Combobox, the user can start typing into the ",O({},"input")," to search for Salesforce Entities that match their search term."),D({},"In the resultant displayed options, we highlight the matched term by bolding it using the ",O({},"<mark>")," element."),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Entity - Displaying options based on user input"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"15rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-16",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-16",snapshot:E.EntityOptionsTypeahead,term:"salesforce",type:"entity",count:4}),resultsType:"listbox","aria-activedescendant":"option0",isOpen:!0,hasFocus:!0}))),P({id:"Keyboard-interaction-2"},"Keyboard interaction"),D({},"The same keyboard interactions apply from the base Combobox, but with these differences:"),W({},q({},O({},"Up")," and ",O({},"Down")," arrows ",F({},"should not")," update the ",O({},"input")," value to reflect the currently selected option. The ",O({},"input")," value should only be updated upon selection.")),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Entity - Keyboard interactions"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem",height:"10rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-17",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-17",snapshot:E.EntityOptionsFocused,type:"entity",count:2}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0}))),P({id:"Selecting-an-option-3"},"Selecting an option"),D({},"The user again can click on the desired option or press the ",O({},"Enter")," key with the desired option highlighted. The user can only select from the returned options; a plain text string is not a valid selection with the Entity Lookup."),D({},"The selected option is still set as the value of the text ",O({},"input"),", but this time we make the ",O({},"input")," look like a dismissable pill. This ",O({},"input")," becomes readonly at this point, so the user can no longer type into it."),D({},"To remove the selected option, simply press the ",O({},"Delete")," key when focused inside the text ",O({},"input"),' or click the remove "x".'),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Requirement"},"When the option is selected, make sure to add the ",(0,i.createElement)("code",{className:"doc"},"readonly")," attribute to the text ",(0,i.createElement)("code",{className:"doc"},"input"),". Be sure to remove it again when the option is cleared."),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Entity - Single selection"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-18",inputIconPosition:"left-right",leftInputIcon:(0,i.createElement)(g.StandardIcon,{symbol:"account",className:"slds-icon_small",containerClassName:"slds-combobox__input-entity-icon",assistiveText:"Account",title:"Account"}),rightInputIcon:(0,i.createElement)(x.default,{className:"slds-input__icon slds-input__icon_right",symbol:"close",title:"Remove selected option",assistiveText:"Remove selected option"}),results:(0,i.createElement)(b.default,{id:"listbox-id-18",snapshot:E.EntityOptions,type:"entity",count:2}),resultsType:"listbox",hasSelection:!0,value:"Salesforce.com, Inc.",readonly:!0}))),P({id:"Multiple-selection-2"},"Multiple selection"),D({},"Multiple selection is handled the same as the Base and Autocomplete Combobox, a list of selected entities is displayed under the combobox as a ",T({href:"/components/pills?variant=listbox-of-pill-options"},"Listbox of Pills"),"."),(0,i.createElement)(r.default,{title:"Combobox - Autocomplete - Entity - Multiple Selection"},(0,i.createElement)(s.default,{style:{maxWidth:"40rem"}},(0,i.createElement)(u.default,{id:I.default.uniqueId("combobox-id-"),"aria-controls":"listbox-id-19",autocomplete:!0,inputIconPosition:"right",rightInputIcon:(0,i.createElement)(y.UtilityIcon,{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:(0,i.createElement)(b.default,{id:"listbox-id-19",snapshot:E.EntityOptions,type:"entity",count:2}),resultsType:"listbox",hasSelection:!0,listboxOfSelections:(0,i.createElement)(f.default,{snapshot:E.EntitySelections,count:2})}))),N({id:"Grouped-Comboboxes-(Cross-entity-Polymorphic)"},"Grouped Comboboxes (Cross-entity / Polymorphic)"),D({},"The Grouped Comboboxes should be used when a Combobox has another Combobox appended or prepended to itself."),D({},"The containing ",O({},"div")," of the comboboxes should have the class ",O({},"slds-combobox-group")," on it."),(0,i.createElement)(c.default,{type:"warning",header:"Keep in mind"},"The grouped combobox only accepts ",(0,i.createElement)("em",null,"one")," addon, in addition to the primary combobox. Use the classes ",(0,i.createElement)("code",{className:"doc"},"slds-combobox_addon-start")," and ",(0,i.createElement)("code",{className:"doc"},"slds-combobox_addon-end")," to describe the position of the form element."),(0,i.createElement)(c.default,{type:"a11y",header:"Accessibility Requirement"},"Be sure to set ",(0,i.createElement)("code",{className:"doc"},"aria-controls")," on the Object Switcher, which points to the Search Combo