npm - @salesforce-ux/design-system - Versions diffs - 2.25.2 → 2.25.4 - Mend

@salesforce-ux/design-system 2.25.2 → 2.25.4

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

Files changed (754) hide show

package/__internal/chunked/docs/ui/components/color-picker/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/color-picker/docs.mdx.js"]=function(e){function t(t){for(var o,s,l=t[0],i=t[1],c=t[2],u=0,m=[];u<l.length;u++)s=l[u],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(o in i)Object.prototype.hasOwnProperty.call(i,o)&&(e[o]=i[o]);for(d&&d(t);m.length;)m.shift()();return a.push.apply(a,c\|\|[]),r()}function r(){for(var e,t=0;t<a.length;t++){for(var r=a[t],o=!0,l=1;l<r.length;l++){var i=r[l];0!==n[i]&&(o=!1)}o&&(a.splice(t--,1),e=s(s.s=r[0]))}return e}var o={},n={21:0},a=[];function s(t){if(o[t])return o[t].exports;var r=o[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,s),r.l=!0,r.exports}s.m=e,s.c=o,s.d=function(e,t,r){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(s.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(r,o,function(t){return e[t]}.bind(null,o));return r},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var d=i;return a.push([722,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},722:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return Y})),r.d(t,"getContents",(function(){return Z}));var o=r(0),n=r.n(o),a=r(4),s=r(2),l=(r(28),r(45),r(14)),i=r(1),c=r(5),d=r.n(c),u=r(10),m=r(12),h=r(30),p=r(40),f=r(8),b=r(17);function y(e){return(y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function k(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function v(e,t){return(v=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function E(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=g(e);if(t){var n=g(this).constructor;r=Reflect.construct(o,arguments,n)}else r=o.apply(this,arguments);return O(this,r)}}function O(e,t){if(t&&("object"===y(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return _(e)}function _(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var w=["#e3abec","#c2dbf7","#9fd6ff","#9de7da","#9df0c0","#fff099","#fed49a","#d073e0","#86baf3","#5ebbff","#44d8be","#3be282","#ffe654","#ffb758","#bd35bd","#5779c1","#5ebbff","#00aea9","#3cba4c","#f5bc25","#f99221","#580d8c","#001970","#0a2399","#0b7477","#0b6b50","#b67e11","#b85d0d"],j=function(e){return n.a.createElement("span",{key:i.d.uniqueId("swatch-"),className:"slds-swatch",style:{background:e.color}},n.a.createElement("span",{className:"slds-assistive-text","aria-hidden":e.ariaHidden},e.color))},x=function(e){var t=e.hasSummaryError,r="color-picker-summary-error";return n.a.createElement(f.b,{formElementClassName:"slds-color-picker__summary",labelContent:"Choose Color",labelClassName:"slds-color-picker__summary-label",inputId:"color-picker-summary-input",hasError:t},n.a.createElement(m.a,{className:"slds-color-picker__summary-button slds-button_icon slds-button_icon-more",title:"Choose Color"},n.a.createElement(j,{color:"hsl(220, 46%, 55%)",suppressAssistiveText:!0}),n.a.createElement(u.a,{className:"slds-button__icon slds-button__icon_small slds-m-left_xx-small",sprite:"utility",symbol:"down"}),n.a.createElement("span",{className:"slds-assistive-text"},"Choose a color. Current color: #5679C0")),n.a.createElement("div",{className:"slds-color-picker__summary-input"},n.a.createElement(b.a,{id:"color-picker-summary-input",defaultValue:"#5679C0","aria-describedby":t?r:null})),t?n.a.createElement("p",{className:"slds-form-error",id:r},"Please ensure value is correct"):null)},S=function(e){var t=e.isMenuRole,r=t?"menu":"listbox",o=t?"menuitem":"option";return n.a.createElement("ul",{className:"slds-color-picker__swatches",role:r,"aria-label":"Preset colors"},w.map((function(e,t){return n.a.createElement("li",{key:i.d.uniqueId("color-picker-swatch-"),className:"slds-color-picker__swatch",role:"presentation"},n.a.createElement("a",{className:"slds-color-picker__swatch-trigger",href:"#",role:o,tabIndex:0===t?0:-1},n.a.createElement(j,{color:e,index:t})))})))},C=function(e){var t=i.d.uniqueId("color-picker-input-range-"),r=i.d.uniqueId("color-picker-input-hex-"),o=i.d.uniqueId("color-picker-input-r-"),a=i.d.uniqueId("color-picker-input-g-"),s=i.d.uniqueId("color-picker-input-b-"),l=e.hasCustomError;return n.a.createElement("div",{className:"slds-color-picker__custom"},n.a.createElement("p",{id:"color-picker-instructions",className:"slds-assistive-text"},"Use arrow keys to select a saturation and brightness, on an x and y axis."),n.a.createElement("div",{className:"slds-color-picker__custom-range",style:{background:"hsl(220, 100%, 50%)"}},n.a.createElement("a",{className:"slds-color-picker__range-indicator",style:{bottom:"45%",left:"46%"},href:"#","aria-live":"assertive","aria-atomic":"true","aria-describedby":"color-picker-instructions"},n.a.createElement("span",{className:"slds-assistive-text"},"hex #5679C0"))),n.a.createElement("div",{className:"slds-color-picker__hue-and-preview"},n.a.createElement("label",{className:"slds-assistive-text",htmlFor:t},"Select Hue"),n.a.createElement("input",{type:"range",className:"slds-color-picker__hue-slider",min:"0",max:"360",defaultValue:"208",id:t}),n.a.createElement(j,{color:"#5679C0",ariaHidden:!0})),n.a.createElement("div",{className:"slds-color-picker__custom-inputs"},n.a.createElement(f.b,{labelContent:"Hex",formElementClassName:"slds-color-picker__input-custom-hex",hasError:l,inputId:r},n.a.createElement(b.a,{id:r,defaultValue:"#5679C0","aria-describedby":l?"color-picker-custom-error":null})),n.a.createElement(f.b,{labelContent:n.a.createElement("abbr",{title:"Red"},"R"),inputId:o},n.a.createElement(b.a,{defaultValue:"86",id:o})),n.a.createElement(f.b,{labelContent:n.a.createElement("abbr",{title:"Green"},"G"),inputId:a},n.a.createElement(b.a,{defaultValue:"121",id:a})),n.a.createElement(f.b,{labelContent:n.a.createElement("abbr",{title:"blue"},"B"),inputId:s},n.a.createElement(b.a,{defaultValue:"192",id:s}))),l?n.a.createElement("p",{className:"slds-form-error",id:"color-picker-custom-error"},"Please ensure value is correct"):null)},T=function(){return n.a.createElement("div",{className:"slds-color-picker__selector-footer"},n.a.createElement(m.a,{isNeutral:!0},"Cancel"),n.a.createElement(m.a,{isBrand:!0},"Done"))},I=function(e){return n.a.createElement(h.a,{selectedIndex:e.selectedTabIndex},n.a.createElement(h.a.Item,{title:"Default",id:"color-picker-default"},n.a.createElement(S,null)),n.a.createElement(h.a.Item,{title:"Custom",id:"color-picker-custom"},n.a.createElement(C,{hasCustomError:e.hasCustomError})))},P=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&v(e,t)}(s,e);var t,r,o,a=E(s);function s(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(t=a.call(this)).state={selectedTabIndex:e.selectedTabIndex\|\|0},t.isFullFeatureMode=t.isFullFeatureMode.bind(_(t)),t.isPredefinedMode=t.isPredefinedMode.bind(_(t)),t.isCustomOnlyMode=t.isCustomOnlyMode.bind(_(t)),t.isSwatchesOnlyMode=t.isSwatchesOnlyMode.bind(_(t)),t}return t=s,(r=[{key:"isFullFeatureMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(!t\|\|!r)}},{key:"isPredefinedMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(!t\|\|r)}},{key:"isCustomOnlyMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(t\|\|!r)}},{key:"isSwatchesOnlyMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(t\|\|r)}},{key:"render",value:function(){var e=this.state.selectedTabIndex,t=this.props,r=t.isOpen,o=t.hasSummaryError,a=t.hasCustomError,s=r?"slds-show":"slds-hide",l=this.isSwatchesOnlyMode()?null:n.a.createElement(x,{hasSummaryError:o}),i=this.isSwatchesOnlyMode()?null:n.a.createElement(T,null),c=null;return this.isFullFeatureMode()?c=n.a.createElement(I,{hasCustomError:a,selectedTabIndex:e}):this.isPredefinedMode()?c=n.a.createElement(S,null):this.isCustomOnlyMode()?c=n.a.createElement(C,{hasCustomError:a}):this.isSwatchesOnlyMode()&&(c=n.a.createElement(I,{selectedTabIndex:e})),n.a.createElement("div",{className:"slds-color-picker"},l,n.a.createElement(p.a,{title:"Choose a color",className:d()("slds-color-picker__selector",s),footer:i},c))}}])&&k(t.prototype,r),o&&k(t,o),Object.defineProperty(t,"prototype",{writable:!1}),s}(n.a.Component);P.defaultProps={selectedTabIndex:0,isOpen:!1,hasPredefined:!0,hasCustom:!0};var N=P,M=n.a.createElement(N,null),A=[{id:"summary-error",label:"Summary Error",element:n.a.createElement(N,{hasSummaryError:!0})},{id:"color-picker-open",label:"Open, default tab selected",element:n.a.createElement(N,{isOpen:!0})},{id:"custom-tab-selected",label:"Open, custom tab selected",element:n.a.createElement(N,{isOpen:!0,selectedTabIndex:1})},{id:"custom-tab-selected-error",label:"Open, custom tab selected, error state",element:n.a.createElement(N,{isOpen:!0,hasCustomError:!0,selectedTabIndex:1})}],R=n.a.createElement(N,{hasPredefined:!1}),B=[{id:"custom-color-picker-open",label:"Open",element:n.a.createElement(N,{isOpen:!0,hasPredefined:!1})},{id:"custom-color-picker-open-error",label:"Open with Error",element:n.a.createElement(N,{isOpen:!0,hasCustomError:!0,hasPredefined:!1})}],F=n.a.createElement(N,{hasCustom:!1}),H=[{id:"predefined-color-picker-open",label:"Open",element:n.a.createElement(N,{isOpen:!0,hasCustom:!1})}],D=r(9),q=[{id:"default",label:"Default",element:n.a.createElement(D.l,null,n.a.createElement("div",{className:"slds-dropdown slds-dropdown_left"},n.a.createElement("div",{className:"slds-color-picker slds-color-picker_swatches-only"},n.a.createElement("div",{className:"slds-color-picker__selector"},n.a.createElement(S,{isMenuRole:!0})))))}],L=[{id:"open-swatches-only-color-picker",label:"Open",element:n.a.createElement("div",{style:{height:"12rem"}},n.a.createElement(D.l,{isOpen:!0},n.a.createElement("div",{className:"slds-dropdown slds-dropdown_left"},n.a.createElement("div",{className:"slds-color-picker slds-color-picker_swatches-only"},n.a.createElement("div",{className:"slds-color-picker__selector"},n.a.createElement(S,{isMenuRole:!0}))))))}],V=a.c.code,G=a.c.em,U=a.c.h2,K=a.c.h3,J=a.c.h4,W=a.c.li,z=a.c.p,Q=a.c.strong,X=a.c.ul,Y=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"doc lead"},"A configurable interface for color selection"),Object(o.createElement)(s.a,{exampleOnly:!0},Object(i.f)(A,"color-picker-open")),U({id:"About-Color-Picker"},"About Color Picker"),z({},"The Unified Color Picker component allows for a fully accessible and configurable color picker, allowing the user to pick from a set of predefined colors (swatches), or to pick a custom color using a HSB selection interface."),z({},"It can be configured to show one or both of those color selection interfaces."),z({},"The Unified Color Picker component allows for a fully accessible and configurable\ncolor picker, allowing the user to pick from a set of predefined colors\n(swatches), or to pick a custom color using a HSB selection interface."),z({},"It can be configured to show one or both of those color selection interfaces."),K({id:"Accessibility"},"Accessibility"),z({},"This component makes use of other components, such as Popovers, Tabs, and Input.\nAll accessibility rules and guidelines for those components ",G({},"need")," to be followed\nfor proper accessibility support."),z({},"As this is a highly interactive component, there are some key accessibility\nguidelines that must be followed for specific elements:"),z({},Q({},".slds-color-picker__summary-label")),z({},"This element ",G({},"needs")," a for attribute with the value of the\n",V({},".slds-color-picker__summary-input"),"'s ID"),z({},Q({},".slds-color-picker__swatches")),z({},"This element ",G({},"needs")," a ",V({},"role")," of ",V({},"listbox"),"."),z({},Q({},".slds-color-picker__swatch")),z({},"This element ",G({},"needs")," a ",V({},"role")," of ",V({},"presentation"),"."),z({},Q({},".slds-color-picker__swatch-trigger")),z({},"This element ",G({},"needs")," a ",V({},"role")," of ",V({},"option"),"."),z({},Q({},".slds-color-picker__range-indicator")),z({},"Since this element is focused and moved to indicate the ",G({},"working color")," it ",G({},"needs"),"\nproper aria tags to indicate its job and value. First, an ",V({},"aria-live")," attribute\n",G({},"needs")," to be set to ",V({},"assertive"),", ",V({},"aria-atomic")," ",G({},"needs")," to be set to ",V({},"true"),", and\n",V({},"aria-describedby")," needs to reference the instructions text for the custom color\npicker range, which in our example is the hidden ",V({},"#color-picker-instructions"),"\nelement."),U({id:"Base"},"Base"),Object(o.createElement)(s.a,null,Object(i.f)(M)),K({id:"States"},"States"),J({id:"Summary-Error"},"Summary Error"),Object(o.createElement)(s.a,null,Object(i.f)(A,"summary-error")),J({id:"Open-default-tab-selected"},"Open, default tab selected"),Object(o.createElement)(s.a,null,Object(i.f)(A,"color-picker-open")),J({id:"Open-custom-tab-selected"},"Open, custom tab selected"),Object(o.createElement)(s.a,null,Object(i.f)(A,"custom-tab-selected")),J({id:"Open-custom-tab-selected-error-state"},"Open, custom tab selected, error state"),Object(o.createElement)(s.a,null,Object(i.f)(A,"custom-tab-selected-error")),U({id:"Custom-Only"},"Custom Only"),z({},"The Custom-Only variant should only render the custom color selection tool in the Color Picker popover. It should not be inside a tabset."),Object(o.createElement)(s.a,null,Object(i.f)(R)),K({id:"States-2"},"States"),J({id:"Open"},"Open"),Object(o.createElement)(s.a,null,Object(i.f)(B,"custom-color-picker-open")),J({id:"Open-with-Error"},"Open with Error"),Object(o.createElement)(s.a,null,Object(i.f)(B,"custom-color-picker-open-error")),U({id:"Predefined-Only"},"Predefined Only"),z({},"The Predefined Only variant should only render the predefined colors selection in the Color Picker popover. It should not be inside a tabset."),Object(o.createElement)(s.a,null,Object(i.f)(F)),K({id:"States-3"},"States"),J({id:"Open-2"},"Open"),Object(o.createElement)(s.a,null,Object(i.f)(H,"predefined-color-picker-open")),U({id:"Swatches-Only"},"Swatches Only"),z({},"The Swatches Only variant should only render a group of individual swatches. It should not render any of the main chrome of the color picker UI (no Summary section, no Popover, no Tabset), it should only render the Color Picker swatches selector. This component should be rendered inside a menu."),Object(o.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(o.createElement)("p",null,"The accessibility requirements for this Variant are slightly different from the others:"),Object(o.createElement)("ul",{className:"slds-list_dotted"},Object(o.createElement)("li",null,Object(o.createElement)("code",null,".slds-color-picker__swatches")," ",Object(o.createElement)("em",null,"needs")," a ",Object(o.createElement)("code",null,"role")," of ",Object(o.createElement)("code",null,"menu"),"."),Object(o.createElement)("li",null,Object(o.createElement)("code",null,".slds-color-picker__swatch-trigger")," ",Object(o.createElement)("em",null,"needs")," a ",Object(o.createElement)("code",null,"role")," of ",Object(o.createElement)("code",null,"option")))),Object(o.createElement)(s.a,null,Object(i.f)(q)),K({id:"States-4"},"States"),J({id:"Open-3"},"Open"),Object(o.createElement)(s.a,null,Object(i.f)(L,"open-swatches-only-color-picker")),U({id:"Implementation-Guidelines"},"Implementation Guidelines"),z({},"The Color Picker is a dynamic component with several 'live' areas. These areas need to update when certain user interactions occur."),K({id:"Terms"},"Terms"),z({},"Several terms are used in this document, each with particular meaning. Please take note of the following:"),X({},W({},G({},Q({},"Need/s"))," This rule must be implemented for the component to appear or function as expected."),W({},G({},Q({},"Current color"))," The current selected, submitted, and validated color."),W({},G({},Q({},"Working color"))," The working, unsubmitted color, built with the custom-range tool.")),K({id:"Functionality"},"Functionality"),z({},"When creating an implementation of this UI component, please take note to include the following functionality:"),z({},Q({},".slds-color-picker__button")),z({},"Aside from the 'swatches-only' variant, all Color Picker variants have a summary section with a clickable button. This button ",G({},"needs")," to toggle the visibility of the ",V({},".slds-color-picker__selector")," popover."),z({},Q({},".slds-color-picker__button .slds-swatch")),z({},"This swatch ",G({},"needs")," an inline style of ",V({},"background"),", set to the ",G({},"current color"),". It ",G({},"needs")," to update whenever the ",G({},"current color")," is updated."),z({},Q({},".slds-color-picker__summary-input")),z({},"This input ",G({},"needs")," to display the hex value of the ",G({},"current color"),". It should update whenever ",G({},"current color")," is updated. The user can enter a hex color manually. The implementation should check for the validity of the submitted value before setting the color to be the ",G({},"current color"),"."),z({},Q({},".slds-color-picker__hue-slider")),z({},"In the custom picker, the hue slider is a range input element that allows the user to select a hue base for a ",G({},"working color"),". Its value ranges from 0 - 360, and represents the hue in an expected hsv color format."),z({},"When the user updates the ",G({},"current color"),", the value on this slider ",G({},"needs")," to be adjusted to the ",G({},"current color"),"'s hue."),z({},Q({},".slds-color-picker__custom-range")),z({},"The custom range represents a matrix of all saturation and brightness combinations of the ",G({},"working color"),"'s hue. The x axis of the form represents saturation, and goes from 0% to 100%. On the y axis, brightness is represented, with 0% brightness at the bottom, and 100% brightness at the top."),z({},"Keep in mind that when implementing color conversions, this custom range picker is utilizing the HSB/HSV color model, and not the HSL model."),z({},"This element ",G({},"needs")," an inline style, with the ",V({},"background")," property set to the ",G({},"working color"),"'s hue, as defined by the hue range input element described above. As this element is meant to represent the current ",G({},"working color"),"'s hue's saturation and lightness matrix, css's hsl() syntax is the most appropriate format here, with the hue being the current ",G({},"working color"),"'s hue, the saturation set to 100% and the lightness set to 50% (the 50% lightness is to adjust this HSL range for the HSB color model)."),z({},"A gradient overlay will produce the effect of the saturation and brightness matrix automatically."),z({},"Any mouse clicks on the custom range ",G({},"need")," to set the position of the ",V({},".slds-color-picker__range-indicator")," to the clicked coordinates, and also ",G({},"need")," to update the saturation and brightness values on the working color."),z({},Q({},".slds-color-picker__range-indicator")),z({},"This is the targeting element inside the custom range, and represents the current brightness and saturation values of the ",G({},"working color"),"."),z({},"It ",G({},"needs")," declarations for ",V({},"bottom")," and ",V({},"left")," positioning, so it will be properly placed over the correct area of the ",V({},".slds-color-picker__custom-range"),"."),z({},"Conveniently, the values are uniformly represented. The ",V({},"left")," declaration indicates the saturation value, from 0% to 100%, and the ",V({},"bottom")," declaration indicates the brightness value, from 0% to 100%."),z({},Q({},".slds-color-picker__hue-and-preview .slds-swatch")),z({},"This swatch is a preview element of the ",G({},"working color")," value from the hue slider and range indicator above. It ",G({},"needs")," an inline style for ",V({},"background"),", set to the completed ",G({},"working color")," value."),z({},Q({},".slds-color-picker__custom-inputs")),z({},"The Hex, R(ed), G(reen), and B(lue) text inputs included in this section are representative of the current ",G({},"working color"),"'s converted Hex or RGB values, and ",G({},"need")," to display those as their value."),z({},"Users can, however, directly input into these elements. A valid entry ",G({},"needs")," to update the working color and update related elements. The implementation should protect against invalid submissions."),K({id:"Keyboard-Interactions"},"Keyboard Interactions"),z({},Q({},".slds-color-picker__swatches")),z({},"This element has the role of ",V({},"listbox"),", and keyboard interactions when its <a> children are focused ",G({},"needs")," to behave in a menu-like fashion. Keypresses ",G({},"need")," to move the actively focused element in the appropriate direction (left/up will move to the previous item, down/right will move to the next item)."),z({},"Additionally, when focused on the first or last item, the appropriate key action ",G({},"needs")," to move the focus to the last or first item, respectively. It is expected to behave in a cyclical fashion."),z({},Q({},".slds-color-picker__range-indicator")),z({},"The range indicator, when focused, ",G({},"needs")," to respond to arrow keypresses by moving 1% in the appropriate direction, unless prohibited by a boundary."),z({},"For an additional effect, if an arrow key is pressed in combination with shift, the indicator can move 10% in the given direction, unless prohibited by a boundary."),z({},Q({},"Other Interactions")),z({},"Other expected keyboard interactions (such as input field updates) and their effects on UI can be found in the Implementation Guidelines section above."))},Z=function(){return Object(a.a)(Y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/color-picker/docs.mdx.js"]=function(e){function t(t){for(var o,s,l=t[0],i=t[1],c=t[2],u=0,m=[];u<l.length;u++)s=l[u],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(o in i)Object.prototype.hasOwnProperty.call(i,o)&&(e[o]=i[o]);for(d&&d(t);m.length;)m.shift()();return a.push.apply(a,c\|\|[]),r()}function r(){for(var e,t=0;t<a.length;t++){for(var r=a[t],o=!0,l=1;l<r.length;l++){var i=r[l];0!==n[i]&&(o=!1)}o&&(a.splice(t--,1),e=s(s.s=r[0]))}return e}var o={},n={21:0},a=[];function s(t){if(o[t])return o[t].exports;var r=o[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,s),r.l=!0,r.exports}s.m=e,s.c=o,s.d=function(e,t,r){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(s.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(r,o,function(t){return e[t]}.bind(null,o));return r},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var d=i;return a.push([722,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},722:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return Y})),r.d(t,"getContents",(function(){return Z}));var o=r(0),n=r.n(o),a=r(4),s=r(2),l=(r(29),r(45),r(14)),i=r(1),c=r(5),d=r.n(c),u=r(10),m=r(12),h=r(31),p=r(40),f=r(8),b=r(17);function y(e){return(y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function k(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function v(e,t){return(v=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function E(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=g(e);if(t){var n=g(this).constructor;r=Reflect.construct(o,arguments,n)}else r=o.apply(this,arguments);return O(this,r)}}function O(e,t){if(t&&("object"===y(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return _(e)}function _(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var w=["#e3abec","#c2dbf7","#9fd6ff","#9de7da","#9df0c0","#fff099","#fed49a","#d073e0","#86baf3","#5ebbff","#44d8be","#3be282","#ffe654","#ffb758","#bd35bd","#5779c1","#5ebbff","#00aea9","#3cba4c","#f5bc25","#f99221","#580d8c","#001970","#0a2399","#0b7477","#0b6b50","#b67e11","#b85d0d"],j=function(e){return n.a.createElement("span",{key:i.d.uniqueId("swatch-"),className:"slds-swatch",style:{background:e.color}},n.a.createElement("span",{className:"slds-assistive-text","aria-hidden":e.ariaHidden},e.color))},x=function(e){var t=e.hasSummaryError,r="color-picker-summary-error";return n.a.createElement(f.b,{formElementClassName:"slds-color-picker__summary",labelContent:"Choose Color",labelClassName:"slds-color-picker__summary-label",inputId:"color-picker-summary-input",hasError:t},n.a.createElement(m.a,{className:"slds-color-picker__summary-button slds-button_icon slds-button_icon-more",title:"Choose Color"},n.a.createElement(j,{color:"hsl(220, 46%, 55%)",suppressAssistiveText:!0}),n.a.createElement(u.a,{className:"slds-button__icon slds-button__icon_small slds-m-left_xx-small",sprite:"utility",symbol:"down"}),n.a.createElement("span",{className:"slds-assistive-text"},"Choose a color. Current color: #5679C0")),n.a.createElement("div",{className:"slds-color-picker__summary-input"},n.a.createElement(b.a,{id:"color-picker-summary-input",defaultValue:"#5679C0","aria-describedby":t?r:null})),t?n.a.createElement("p",{className:"slds-form-error",id:r},"Please ensure value is correct"):null)},S=function(e){var t=e.isMenuRole,r=t?"menu":"listbox",o=t?"menuitem":"option";return n.a.createElement("ul",{className:"slds-color-picker__swatches",role:r,"aria-label":"Preset colors"},w.map((function(e,t){return n.a.createElement("li",{key:i.d.uniqueId("color-picker-swatch-"),className:"slds-color-picker__swatch",role:"presentation"},n.a.createElement("a",{className:"slds-color-picker__swatch-trigger",href:"#",role:o,tabIndex:0===t?0:-1},n.a.createElement(j,{color:e,index:t})))})))},C=function(e){var t=i.d.uniqueId("color-picker-input-range-"),r=i.d.uniqueId("color-picker-input-hex-"),o=i.d.uniqueId("color-picker-input-r-"),a=i.d.uniqueId("color-picker-input-g-"),s=i.d.uniqueId("color-picker-input-b-"),l=e.hasCustomError;return n.a.createElement("div",{className:"slds-color-picker__custom"},n.a.createElement("p",{id:"color-picker-instructions",className:"slds-assistive-text"},"Use arrow keys to select a saturation and brightness, on an x and y axis."),n.a.createElement("div",{className:"slds-color-picker__custom-range",style:{background:"hsl(220, 100%, 50%)"}},n.a.createElement("a",{className:"slds-color-picker__range-indicator",style:{bottom:"45%",left:"46%"},href:"#","aria-live":"assertive","aria-atomic":"true","aria-describedby":"color-picker-instructions"},n.a.createElement("span",{className:"slds-assistive-text"},"hex #5679C0"))),n.a.createElement("div",{className:"slds-color-picker__hue-and-preview"},n.a.createElement("label",{className:"slds-assistive-text",htmlFor:t},"Select Hue"),n.a.createElement("input",{type:"range",className:"slds-color-picker__hue-slider",min:"0",max:"360",defaultValue:"208",id:t}),n.a.createElement(j,{color:"#5679C0",ariaHidden:!0})),n.a.createElement("div",{className:"slds-color-picker__custom-inputs"},n.a.createElement(f.b,{labelContent:"Hex",formElementClassName:"slds-color-picker__input-custom-hex",hasError:l,inputId:r},n.a.createElement(b.a,{id:r,defaultValue:"#5679C0","aria-describedby":l?"color-picker-custom-error":null})),n.a.createElement(f.b,{labelContent:n.a.createElement("abbr",{title:"Red"},"R"),inputId:o},n.a.createElement(b.a,{defaultValue:"86",id:o})),n.a.createElement(f.b,{labelContent:n.a.createElement("abbr",{title:"Green"},"G"),inputId:a},n.a.createElement(b.a,{defaultValue:"121",id:a})),n.a.createElement(f.b,{labelContent:n.a.createElement("abbr",{title:"blue"},"B"),inputId:s},n.a.createElement(b.a,{defaultValue:"192",id:s}))),l?n.a.createElement("p",{className:"slds-form-error",id:"color-picker-custom-error"},"Please ensure value is correct"):null)},T=function(){return n.a.createElement("div",{className:"slds-color-picker__selector-footer"},n.a.createElement(m.a,{isNeutral:!0},"Cancel"),n.a.createElement(m.a,{isBrand:!0},"Done"))},I=function(e){return n.a.createElement(h.a,{selectedIndex:e.selectedTabIndex},n.a.createElement(h.a.Item,{title:"Default",id:"color-picker-default"},n.a.createElement(S,null)),n.a.createElement(h.a.Item,{title:"Custom",id:"color-picker-custom"},n.a.createElement(C,{hasCustomError:e.hasCustomError})))},P=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&v(e,t)}(s,e);var t,r,o,a=E(s);function s(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(t=a.call(this)).state={selectedTabIndex:e.selectedTabIndex\|\|0},t.isFullFeatureMode=t.isFullFeatureMode.bind(_(t)),t.isPredefinedMode=t.isPredefinedMode.bind(_(t)),t.isCustomOnlyMode=t.isCustomOnlyMode.bind(_(t)),t.isSwatchesOnlyMode=t.isSwatchesOnlyMode.bind(_(t)),t}return t=s,(r=[{key:"isFullFeatureMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(!t\|\|!r)}},{key:"isPredefinedMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(!t\|\|r)}},{key:"isCustomOnlyMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(t\|\|!r)}},{key:"isSwatchesOnlyMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(t\|\|r)}},{key:"render",value:function(){var e=this.state.selectedTabIndex,t=this.props,r=t.isOpen,o=t.hasSummaryError,a=t.hasCustomError,s=r?"slds-show":"slds-hide",l=this.isSwatchesOnlyMode()?null:n.a.createElement(x,{hasSummaryError:o}),i=this.isSwatchesOnlyMode()?null:n.a.createElement(T,null),c=null;return this.isFullFeatureMode()?c=n.a.createElement(I,{hasCustomError:a,selectedTabIndex:e}):this.isPredefinedMode()?c=n.a.createElement(S,null):this.isCustomOnlyMode()?c=n.a.createElement(C,{hasCustomError:a}):this.isSwatchesOnlyMode()&&(c=n.a.createElement(I,{selectedTabIndex:e})),n.a.createElement("div",{className:"slds-color-picker"},l,n.a.createElement(p.a,{title:"Choose a color",className:d()("slds-color-picker__selector",s),footer:i},c))}}])&&k(t.prototype,r),o&&k(t,o),Object.defineProperty(t,"prototype",{writable:!1}),s}(n.a.Component);P.defaultProps={selectedTabIndex:0,isOpen:!1,hasPredefined:!0,hasCustom:!0};var N=P,M=n.a.createElement(N,null),A=[{id:"summary-error",label:"Summary Error",element:n.a.createElement(N,{hasSummaryError:!0})},{id:"color-picker-open",label:"Open, default tab selected",element:n.a.createElement(N,{isOpen:!0})},{id:"custom-tab-selected",label:"Open, custom tab selected",element:n.a.createElement(N,{isOpen:!0,selectedTabIndex:1})},{id:"custom-tab-selected-error",label:"Open, custom tab selected, error state",element:n.a.createElement(N,{isOpen:!0,hasCustomError:!0,selectedTabIndex:1})}],R=n.a.createElement(N,{hasPredefined:!1}),B=[{id:"custom-color-picker-open",label:"Open",element:n.a.createElement(N,{isOpen:!0,hasPredefined:!1})},{id:"custom-color-picker-open-error",label:"Open with Error",element:n.a.createElement(N,{isOpen:!0,hasCustomError:!0,hasPredefined:!1})}],F=n.a.createElement(N,{hasCustom:!1}),H=[{id:"predefined-color-picker-open",label:"Open",element:n.a.createElement(N,{isOpen:!0,hasCustom:!1})}],D=r(9),q=[{id:"default",label:"Default",element:n.a.createElement(D.l,null,n.a.createElement("div",{className:"slds-dropdown slds-dropdown_left"},n.a.createElement("div",{className:"slds-color-picker slds-color-picker_swatches-only"},n.a.createElement("div",{className:"slds-color-picker__selector"},n.a.createElement(S,{isMenuRole:!0})))))}],L=[{id:"open-swatches-only-color-picker",label:"Open",element:n.a.createElement("div",{style:{height:"12rem"}},n.a.createElement(D.l,{isOpen:!0},n.a.createElement("div",{className:"slds-dropdown slds-dropdown_left"},n.a.createElement("div",{className:"slds-color-picker slds-color-picker_swatches-only"},n.a.createElement("div",{className:"slds-color-picker__selector"},n.a.createElement(S,{isMenuRole:!0}))))))}],V=a.c.code,G=a.c.em,U=a.c.h2,K=a.c.h3,J=a.c.h4,W=a.c.li,z=a.c.p,Q=a.c.strong,X=a.c.ul,Y=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"doc lead"},"A configurable interface for color selection"),Object(o.createElement)(s.a,{exampleOnly:!0},Object(i.f)(A,"color-picker-open")),U({id:"About-Color-Picker"},"About Color Picker"),z({},"The Unified Color Picker component allows for a fully accessible and configurable color picker, allowing the user to pick from a set of predefined colors (swatches), or to pick a custom color using a HSB selection interface."),z({},"It can be configured to show one or both of those color selection interfaces."),z({},"The Unified Color Picker component allows for a fully accessible and configurable\ncolor picker, allowing the user to pick from a set of predefined colors\n(swatches), or to pick a custom color using a HSB selection interface."),z({},"It can be configured to show one or both of those color selection interfaces."),K({id:"Accessibility"},"Accessibility"),z({},"This component makes use of other components, such as Popovers, Tabs, and Input.\nAll accessibility rules and guidelines for those components ",G({},"need")," to be followed\nfor proper accessibility support."),z({},"As this is a highly interactive component, there are some key accessibility\nguidelines that must be followed for specific elements:"),z({},Q({},".slds-color-picker__summary-label")),z({},"This element ",G({},"needs")," a for attribute with the value of the\n",V({},".slds-color-picker__summary-input"),"'s ID"),z({},Q({},".slds-color-picker__swatches")),z({},"This element ",G({},"needs")," a ",V({},"role")," of ",V({},"listbox"),"."),z({},Q({},".slds-color-picker__swatch")),z({},"This element ",G({},"needs")," a ",V({},"role")," of ",V({},"presentation"),"."),z({},Q({},".slds-color-picker__swatch-trigger")),z({},"This element ",G({},"needs")," a ",V({},"role")," of ",V({},"option"),"."),z({},Q({},".slds-color-picker__range-indicator")),z({},"Since this element is focused and moved to indicate the ",G({},"working color")," it ",G({},"needs"),"\nproper aria tags to indicate its job and value. First, an ",V({},"aria-live")," attribute\n",G({},"needs")," to be set to ",V({},"assertive"),", ",V({},"aria-atomic")," ",G({},"needs")," to be set to ",V({},"true"),", and\n",V({},"aria-describedby")," needs to reference the instructions text for the custom color\npicker range, which in our example is the hidden ",V({},"#color-picker-instructions"),"\nelement."),U({id:"Base"},"Base"),Object(o.createElement)(s.a,null,Object(i.f)(M)),K({id:"States"},"States"),J({id:"Summary-Error"},"Summary Error"),Object(o.createElement)(s.a,null,Object(i.f)(A,"summary-error")),J({id:"Open-default-tab-selected"},"Open, default tab selected"),Object(o.createElement)(s.a,null,Object(i.f)(A,"color-picker-open")),J({id:"Open-custom-tab-selected"},"Open, custom tab selected"),Object(o.createElement)(s.a,null,Object(i.f)(A,"custom-tab-selected")),J({id:"Open-custom-tab-selected-error-state"},"Open, custom tab selected, error state"),Object(o.createElement)(s.a,null,Object(i.f)(A,"custom-tab-selected-error")),U({id:"Custom-Only"},"Custom Only"),z({},"The Custom-Only variant should only render the custom color selection tool in the Color Picker popover. It should not be inside a tabset."),Object(o.createElement)(s.a,null,Object(i.f)(R)),K({id:"States-2"},"States"),J({id:"Open"},"Open"),Object(o.createElement)(s.a,null,Object(i.f)(B,"custom-color-picker-open")),J({id:"Open-with-Error"},"Open with Error"),Object(o.createElement)(s.a,null,Object(i.f)(B,"custom-color-picker-open-error")),U({id:"Predefined-Only"},"Predefined Only"),z({},"The Predefined Only variant should only render the predefined colors selection in the Color Picker popover. It should not be inside a tabset."),Object(o.createElement)(s.a,null,Object(i.f)(F)),K({id:"States-3"},"States"),J({id:"Open-2"},"Open"),Object(o.createElement)(s.a,null,Object(i.f)(H,"predefined-color-picker-open")),U({id:"Swatches-Only"},"Swatches Only"),z({},"The Swatches Only variant should only render a group of individual swatches. It should not render any of the main chrome of the color picker UI (no Summary section, no Popover, no Tabset), it should only render the Color Picker swatches selector. This component should be rendered inside a menu."),Object(o.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(o.createElement)("p",null,"The accessibility requirements for this Variant are slightly different from the others:"),Object(o.createElement)("ul",{className:"slds-list_dotted"},Object(o.createElement)("li",null,Object(o.createElement)("code",null,".slds-color-picker__swatches")," ",Object(o.createElement)("em",null,"needs")," a ",Object(o.createElement)("code",null,"role")," of ",Object(o.createElement)("code",null,"menu"),"."),Object(o.createElement)("li",null,Object(o.createElement)("code",null,".slds-color-picker__swatch-trigger")," ",Object(o.createElement)("em",null,"needs")," a ",Object(o.createElement)("code",null,"role")," of ",Object(o.createElement)("code",null,"option")))),Object(o.createElement)(s.a,null,Object(i.f)(q)),K({id:"States-4"},"States"),J({id:"Open-3"},"Open"),Object(o.createElement)(s.a,null,Object(i.f)(L,"open-swatches-only-color-picker")),U({id:"Implementation-Guidelines"},"Implementation Guidelines"),z({},"The Color Picker is a dynamic component with several 'live' areas. These areas need to update when certain user interactions occur."),K({id:"Terms"},"Terms"),z({},"Several terms are used in this document, each with particular meaning. Please take note of the following:"),X({},W({},G({},Q({},"Need/s"))," This rule must be implemented for the component to appear or function as expected."),W({},G({},Q({},"Current color"))," The current selected, submitted, and validated color."),W({},G({},Q({},"Working color"))," The working, unsubmitted color, built with the custom-range tool.")),K({id:"Functionality"},"Functionality"),z({},"When creating an implementation of this UI component, please take note to include the following functionality:"),z({},Q({},".slds-color-picker__button")),z({},"Aside from the 'swatches-only' variant, all Color Picker variants have a summary section with a clickable button. This button ",G({},"needs")," to toggle the visibility of the ",V({},".slds-color-picker__selector")," popover."),z({},Q({},".slds-color-picker__button .slds-swatch")),z({},"This swatch ",G({},"needs")," an inline style of ",V({},"background"),", set to the ",G({},"current color"),". It ",G({},"needs")," to update whenever the ",G({},"current color")," is updated."),z({},Q({},".slds-color-picker__summary-input")),z({},"This input ",G({},"needs")," to display the hex value of the ",G({},"current color"),". It should update whenever ",G({},"current color")," is updated. The user can enter a hex color manually. The implementation should check for the validity of the submitted value before setting the color to be the ",G({},"current color"),"."),z({},Q({},".slds-color-picker__hue-slider")),z({},"In the custom picker, the hue slider is a range input element that allows the user to select a hue base for a ",G({},"working color"),". Its value ranges from 0 - 360, and represents the hue in an expected hsv color format."),z({},"When the user updates the ",G({},"current color"),", the value on this slider ",G({},"needs")," to be adjusted to the ",G({},"current color"),"'s hue."),z({},Q({},".slds-color-picker__custom-range")),z({},"The custom range represents a matrix of all saturation and brightness combinations of the ",G({},"working color"),"'s hue. The x axis of the form represents saturation, and goes from 0% to 100%. On the y axis, brightness is represented, with 0% brightness at the bottom, and 100% brightness at the top."),z({},"Keep in mind that when implementing color conversions, this custom range picker is utilizing the HSB/HSV color model, and not the HSL model."),z({},"This element ",G({},"needs")," an inline style, with the ",V({},"background")," property set to the ",G({},"working color"),"'s hue, as defined by the hue range input element described above. As this element is meant to represent the current ",G({},"working color"),"'s hue's saturation and lightness matrix, css's hsl() syntax is the most appropriate format here, with the hue being the current ",G({},"working color"),"'s hue, the saturation set to 100% and the lightness set to 50% (the 50% lightness is to adjust this HSL range for the HSB color model)."),z({},"A gradient overlay will produce the effect of the saturation and brightness matrix automatically."),z({},"Any mouse clicks on the custom range ",G({},"need")," to set the position of the ",V({},".slds-color-picker__range-indicator")," to the clicked coordinates, and also ",G({},"need")," to update the saturation and brightness values on the working color."),z({},Q({},".slds-color-picker__range-indicator")),z({},"This is the targeting element inside the custom range, and represents the current brightness and saturation values of the ",G({},"working color"),"."),z({},"It ",G({},"needs")," declarations for ",V({},"bottom")," and ",V({},"left")," positioning, so it will be properly placed over the correct area of the ",V({},".slds-color-picker__custom-range"),"."),z({},"Conveniently, the values are uniformly represented. The ",V({},"left")," declaration indicates the saturation value, from 0% to 100%, and the ",V({},"bottom")," declaration indicates the brightness value, from 0% to 100%."),z({},Q({},".slds-color-picker__hue-and-preview .slds-swatch")),z({},"This swatch is a preview element of the ",G({},"working color")," value from the hue slider and range indicator above. It ",G({},"needs")," an inline style for ",V({},"background"),", set to the completed ",G({},"working color")," value."),z({},Q({},".slds-color-picker__custom-inputs")),z({},"The Hex, R(ed), G(reen), and B(lue) text inputs included in this section are representative of the current ",G({},"working color"),"'s converted Hex or RGB values, and ",G({},"need")," to display those as their value."),z({},"Users can, however, directly input into these elements. A valid entry ",G({},"needs")," to update the working color and update related elements. The implementation should protect against invalid submissions."),K({id:"Keyboard-Interactions"},"Keyboard Interactions"),z({},Q({},".slds-color-picker__swatches")),z({},"This element has the role of ",V({},"listbox"),", and keyboard interactions when its <a> children are focused ",G({},"needs")," to behave in a menu-like fashion. Keypresses ",G({},"need")," to move the actively focused element in the appropriate direction (left/up will move to the previous item, down/right will move to the next item)."),z({},"Additionally, when focused on the first or last item, the appropriate key action ",G({},"needs")," to move the focus to the last or first item, respectively. It is expected to behave in a cyclical fashion."),z({},Q({},".slds-color-picker__range-indicator")),z({},"The range indicator, when focused, ",G({},"needs")," to respond to arrow keypresses by moving 1% in the appropriate direction, unless prohibited by a boundary."),z({},"For an additional effect, if an arrow key is pressed in combination with shift, the indicator can move 10% in the given direction, unless prohibited by a boundary."),z({},Q({},"Other Interactions")),z({},"Other expected keyboard interactions (such as input field updates) and their effects on UI can be found in the Implementation Guidelines section above."))},Z=function(){return Object(a.a)(Y())}}});

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

	@@ -1 +1 @@
1	- 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([726,0]),o()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},726: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(57),p=o(24),u=o(70),m=o(7),h=o(11),b=o(34),x=o(67),g=o(29),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(40),W=o(12),R=o(8),U=o(31),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(38),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 highlight the desired option and pressing the ",V({},"Enter")," or ",V({},"Tab")," key."),ie({},"Upon selection the Combobox collapses, only showing the ",V({},"input")," field. The value of the ",V({},"input")," inside the Combobox is set to match the selected option name so the user can see what was previously selected from the ",V({},"listbox")," of options."),Object(i.createElement)(s.a,null,Object(f.f)(C,"selected-an-option-closed")),ee({id:"Single-selection"},"Single selection"),ie({},"When an option becomes selected, the class ",V({},"slds-is-selected")," should be applied to the ",V({},"slds-listbox__option")," element with the ",V({},'role="option"'),". This will provide visual feedback that the user has selected that element."),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(C,"selecting-a-single-option")),te({id:"Re-opening-with-a-selection"},"Re-opening with a selection"),ie({},"When re-opening a Combobox that already has a selected value, the ",V({},"listbox")," should be displayed with the selected option already highlighted."),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"Be sure to re-set the ",Object(i.createElement)("code",null,"aria-activedescendant")," attribute on the `input` to the value of the ID of the highlighted option. The highlighted option must also have ",Object(i.createElement)("code",null,'aria-selected="true"'),".")),ee({id:"Multiple-selections"},"Multiple selections"),ie({},"When more than one option has been selected, the value of the ",V({},"input"),' should be updated with the total number of selected items, such as "3 options selected".'),Object(i.createElement)(a.a,{toggleCode:!1},Object(i.createElement)(p.d,{name:"Accounts",selected:!0})),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(C,"selecting-multiple-options")),ie({},"When a Combobox with multiple selected options is closed, a ",Q({href:"/components/pills/#Listbox-Of-Pill-Options"},"Listbox of Pills")," is also used to represent those selected options."),ie({},"The ",Q({href:"/components/pills/#Listbox-Of-Pill-Options"},"Listbox of Pills")," is positioned below the read-only ",V({},"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."),Object(i.createElement)(s.a,null,Object(f.f)(C,"selected-multiple-options-closed")),ee({id:"Editing-multiple-selections"},"Editing multiple selections"),ie({},"The ",Q({href:"/components/pills/#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.'),ie({},"The ",Q({href:"/components/pills/#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."),Z({id:"Autocomplete-Combobox"},"Autocomplete Combobox"),ie({},"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 ",V({},"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."),ie({},"If no option matches, the user can complete the value of the combobox by finishing their own text entry."),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Difference"},Object(i.createElement)("p",null,"The difference between the ",Object(i.createElement)("strong",null,"Base Combobox")," and the"," ",Object(i.createElement)("strong",null,"Autocomplete Combobox"),", is that the text ",Object(i.createElement)("code",null,"input")," ","must have the ",Object(i.createElement)("code",null,"readonly")," attribute removed and replaced with"," ",Object(i.createElement)("code",null,'aria-autocomplete="list"'),".")),Object(i.createElement)(s.a,{demoStyles:"height: 12rem;"},Object(f.f)(P)),$({id:"Displaying-options-2"},"Displaying options"),ie({},"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 ",V({},"input")," will automatically expand the Combobox and display the options."),ie({},"When a user stops interacting with the Combobox, or selects an option, the Combobox collapses and hides the options."),Object(i.createElement)(s.a,{demoStyles:"height: 12rem;"},Object(f.f)(N,"focused-open")),$({id:"Displaying-options-based-on-user-input"},"Displaying options based on user input"),ie({},"If an option from the pre-populated ",V({},"listbox")," isn't what the user wants, they can start typing into the ",V({},"input"),". This term will be used to filter the options by and narrow down the size of the list to something more relevant."),ie({},"Whilst typing, the highlighted option in the ",V({},"listbox")," should be the user's text string."),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 `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"'),".")),Object(i.createElement)(s.a,{demoStyles:"height: 12rem;"},Object(f.f)(N,"typeahead")),$({id:"Drill-In-for-Autocomplete"},"Drill In for Autocomplete"),ie({},"The options in the autocomplete ",V({},"listbox")," can have a right icon to indicate an option that drills in for more options."),Object(i.createElement)(s.a,{demoStyles:"position: relative; height: 10rem;"},Object(i.createElement)(p.e,{id:"listbox-id-3",snapshot:E.g,type:"entity",count:3,visualSelection:!0})),$({id:"Keyboard-interaction"},"Keyboard interaction"),ie({},"The same keyboard interactions apply from the base Combobox, but with these differences:"),le({},oe({},V({},"Up")," and ",V({},"Down")," arrows ",ne({},"should optionally")," update the ",V({},"input")," value to reflect the currently selected option")),Object(i.createElement)(s.a,{demoStyles:"height: 12rem;"},Object(f.f)(N,"highlighting-an-option")),$({id:"Selecting-an-option-2"},"Selecting an option"),ie({},"The user again can click on the desired option or press the ",V({},"Enter")," or ",V({},"Tab")," key with the desired option highlighted. Alternatively they can leave their entered text string as the value of the Combobox."),ie({},"Selecting an option from the ",V({},"listbox")," will close the ",V({},"listbox"),"."),ie({},"To remove the selected option, simply clear the text ",V({},"input"),"."),Object(i.createElement)(s.a,null,Object(f.f)(N,"selected-an-option")),$({id:"Multiple-selection"},"Multiple selection"),ie({},"Multiple selection is much the same as the Base Combobox. A list of selected options are displayed below the Combobox as a ",Q({href:"/components/pills/#Listbox-Of-Pill-Options"},"Listbox of Pills"),"."),Object(i.createElement)(s.a,null,Object(f.f)(N,"selected-multiple-options")),ee({id:"Editing-multiple-selections-2"},"Editing multiple selections"),ie({},"The ",Q({href:"/components/pills/#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.'),ie({},"The ",Q({href:"/components/pills/#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."),Z({id:"Entity-Autocomplete-Combobox-(Lookup)"},"Entity Autocomplete Combobox (Lookup)"),ie({},"An Entity Autocomplete Combobox or Lookup, is used to search for and select Salesforce Entities."),Object(i.createElement)(s.a,{demoStyles:"height: 10rem;"},Object(f.f)(A,"lookup")),$({id:"Displaying-options-3"},"Displaying options"),ie({},"Displaying options happens just like an Autocomplete Combobox, by placing user focus inside the Combobox text ",V({},"input"),"."),ie({},"The options now have extra information about them, such as the type of entity and any other important metadata."),Object(i.createElement)(s.a,{demoStyles:"height: 10rem;"},Object(f.f)(N,"lookup-focused-open")),$({id:"Displaying-options-based-on-user-input-2"},"Displaying options based on user input"),ie({},"As with the Autocomplete Combobox, the user can start typing into the ",V({},"input")," to search for Salesforce Entities that match their search term."),ie({},"In the resultant displayed options, we highlight the matched term by bolding it using the ",V({},"<mark>")," element."),Object(i.createElement)(s.a,{demoStyles:"height: 15rem;"},Object(f.f)(N,"lookup-typeahead")),$({id:"Keyboard-interaction-2"},"Keyboard interaction"),ie({},"The same keyboard interactions apply from the base Combobox, but with these differences:"),le({},oe({},V({},"Up")," and ",V({},"Down")," arrows ",ne({},"should not")," update the ",V({},"input")," value to reflect the currently selected option. The ",V({},"input")," value should only be updated upon selection.")),Object(i.createElement)(s.a,{demoStyles:"height: 10rem;"},Object(f.f)(N,"lookup-highlighting-an-option")),$({id:"Selecting-an-option-3"},"Selecting an option"),ie({},"The user again can click on the desired option or press the ",V({},"Enter")," or ",V({},"Tab")," 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."),ie({},"The selected option is still set as the value of the text ",V({},"input"),", but this time we make the ",V({},"input")," look like a dismissible pill. This ",V({},"input")," becomes readonly at this point, so the user can no longer type into it."),ie({},"To remove the selected option, simply press the ",V({},"Delete")," key when focused inside the text ",V({},"input"),' or click the remove "x".'),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"When the option is selected, make sure to add the ",Object(i.createElement)("code",null,"readonly")," ","attribute to the text ",Object(i.createElement)("code",null,"input"),". Be sure to remove it again when the option is cleared.")),Object(i.createElement)(s.a,null,Object(f.f)(N,"lookup-selected-an-option")),$({id:"Multiple-selection-2"},"Multiple selection"),ie({},"Multiple selection is handled the same as the Base and Autocomplete Combobox, a list of selected entities is displayed under the combobox as a ",Q({href:"/components/pills/#Listbox-Of-Pill-Options"},"Listbox of Pills"),"."),Object(i.createElement)(s.a,null,Object(f.f)(N,"lookup-multiple-options")),Object(i.createElement)(Y.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"comboboxes with multiple selection"}),Object(i.createElement)(s.a,{frameOnly:!0,frameTitle:"Example mobile styles for comboboxes with multiple selection"},Object(f.f)(N,"lookup-multiple-options")),Z({id:"Grouped-Comboboxes-(Cross-entity-Polymorphic)"},"Grouped Comboboxes (Cross-entity / Polymorphic)"),ie({},"The Grouped Comboboxes should be used when a Combobox has another Combobox appended or prepended to itself."),ie({},"The containing ",V({},"div")," of the comboboxes should have the class ",V({},"slds-combobox-group")," on it."),Object(i.createElement)(c.a,{type:"warning",header:"Keep in mind"},Object(i.createElement)("p",null,"The grouped combobox only accepts ",Object(i.createElement)("em",null,"one")," addon, in addition to the primary combobox. Use the classes ",Object(i.createElement)("code",null,"slds-combobox_addon-start")," and"," ",Object(i.createElement)("code",null,"slds-combobox_addon-end")," to describe the position of the form element.")),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"Be sure to set ",Object(i.createElement)("code",null,"aria-controls")," on the Object Switcher, which points to the Search Combobox ID.")),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(B)),Object(i.createElement)(Y.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"grouped comboboxes (cross-entity / polymorphic)"}),Object(i.createElement)(s.a,{frameStyles:{height:"21rem"},frameOnly:!0,frameTitle:"Example mobile styles for grouped comboboxes"},Object(f.f)(B)),$({id:"User-input-(Typeahead)"},"User input (Typeahead)"),Object(i.createElement)(s.a,{demoStyles:"height: 15rem;"},Object(f.f)(G,"typeahead")),$({id:"User-input-(Typeahead)-Loading"},"User input (Typeahead) - Loading"),Object(i.createElement)(s.a,{demoStyles:"height: 15rem;"},Object(f.f)(G,"typeahead-loading")),$({id:"Selecting-options"},"Selecting options"),Object(i.createElement)(s.a,null,Object(f.f)(G,"selected-options")),$({id:"User-input-with-selection(s)-made"},"User input with selection(s) made"),Object(i.createElement)(s.a,{demoStyles:"height: 15rem;"},Object(f.f)(G,"selected-options-open")),$({id:"Selected-options-overflow"},"Selected options overflow"),ie({},"When a user is not focused on any element inside of the combobox group, the pill container should become collapsed to reduce vertical space."),ie({},"The combobox group element needs the class ",V({},"slds-has-selection")," when a selection has been made. The pill selections are found inside of a ",Q({href:"/components/pills/#Listbox-Of-Pill-Options"},"Listbox of Pills")," located after the combobox group. It requires the class ",V({},"slds-listbox_selection-group")," to provide appropriate styling for the expanding and collapsing behavior of this region."),ee({id:"Collapsed"},"Collapsed"),ie({},"By default, the ",V({},"slds-listbox_selection-group")," is collapsed."),Object(i.createElement)(s.a,null,Object(f.f)(G,"overflow-collapsed")),ee({id:"Expanded"},"Expanded"),ie({},"When a user focuses on ",X({},"any")," element inside of the combobox group, the class ",V({},"slds-is-expanded")," should be applied to the ",V({},"slds-listbox_selection-group"),". The selection group should remain open until the user moves away from any element inside the combobox group."),Object(i.createElement)(s.a,null,Object(f.f)(G,"overflow-expanded")),ie({},'For mouse users, clicking on the "+{x} more" text would expand the selection group and place the user\'s focus on the first pill inside the Listbox of Pills.'),$({id:"Scoping-results"},"Scoping results"),ie({},"A grouped combobox is intended to be used to filter down or scope you search results. You can do so by interacting with the object switcher to scope down to an object type."),ie({},"The containing element should receive the class ",V({},"slds-combobox_object-switcher")," and ",V({},"slds-combobox_addon-start"),"."),ee({id:"Text-variant"},"Text variant"),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(G,"scoping-results-focused")),ee({id:"Icon-variant"},"Icon variant"),te({id:"Blurred"},"Blurred"),Object(i.createElement)(s.a,null,Object(f.f)(G,"scoping-results-icon")),te({id:"Focused"},"Focused"),Object(i.createElement)(s.a,{demoStyles:"height: 13rem;"},Object(f.f)(G,"scoping-results-icon-focused")),Z({id:"Combobox-with-a-Dialog"},"Combobox with a Dialog"),ie({},"If the data displayed within the dropdown of a combobox cannot be represented as a listbox (as shown above), tree, grid, or tree-grid, then the dropdown should be represented as a dialog, with ",V({},'role="dialog"'),"."),ie({},"The key difference for ",V({},"dialog")," dropdowns lies in how they handle focus. In ",V({},"listbox")," dropdowns, users can enter values in the input while arrowing through the listbox options using ",V({},"aria-activedescendant"),". In ",V({},"dialog")," dropdowns, the dropdown becomes a focus trap, so users must have a way to clear or save any selections or changes made."),Object(i.createElement)(c.a,{type:"a11y",header:"Implementation Details"},Object(i.createElement)("ol",null,Object(i.createElement)("li",null,"1. The input does not have `aria-autocomplete`, it is essentially readonly"),Object(i.createElement)("li",null,"2. The input for this dialog variant will also never have `aria-activedescendant`"),Object(i.createElement)("li",null,'3. The combobox `<div>` with `class="slds-combobox"` has `aria-haspopup=”dialog”`'),Object(i.createElement)("li",null,'4. The dropdown is a dialog with `role="dialog"`'),Object(i.createElement)("li",null,"5. The dialog should have an `aria-label` with a value for the dialog's title"),Object(i.createElement)("li",null,'6. The combobox has `aria-expanded="false"` when the dialog is closed, and `aria-expanded="true"` when the dialog is open.'," "))),Object(i.createElement)(s.a,null,Object(f.f)(H)),$({id:"Open-Dialog"},"Open Dialog"),ie({},"To open the dialog, remove the class ",V({},"slds-popover_hide")," from the ",V({},"<div>")," with ",V({},'class="slds-popover"'),". Any content can go inside a ",V({},"dialog")," dropdown."),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(i.createElement)("p",null,'When the dialog is open, be sure to change `aria-expanded` to true on the combobox `<div>` with `class="slds-combobox"`.')),Object(i.createElement)(s.a,null,Object(f.f)(K,"open")),$({id:"Keyboard-Interaction"},"Keyboard Interaction"),le({},oe({},"Focusing on the input does not open the dropdown"),oe({},"Typing in the input does nothing"),oe({},"Pressing the ",V({},"down arrow")," from the input opens the dialog and moves the user's focus into the dialog."),oe({},"The dialog dropdown is a focus trap",le({},oe({},"Pressing the ",V({},"Tab")," key cycles the user through all UI elements in the dialog"))),oe({},"Pressing ",V({},"Escape")," closes the dialog and clears any changes"),oe({},"Pressing the Cancel button closes the dialog and clears any changes"),oe({},"Pressing the Save button updates the selected value in the input and closes the dialog")),$({id:"Focus-Management"},"Focus Management"),le({},oe({},"Clicking on the input opens and focuses the cursor inside the dialog on the first focusable element."),oe({},"Placing focus on the input ",X({},"does not")," open the dialog"),oe({},"Pressing the ",V({},"down arrow")," whilst focused on the input opens the dialog and moves focus to the first focusable element")),$({id:"Examples"},"Examples"),ee({id:"Multiple-Selection"},"Multiple Selection"),ie({},"Below is an example of a ",V({},"dialog")," combobox where users can make multiple selections using checkboxes. The main difference between the ",ne({},"dialog variant")," of a multi-select combobox and the ",Q({href:"/components/combobox/#Multiple-selection-2"},"multi-select Entity Autocomplete")," involves the behavior after a selection is made. A ",V({},"dialog")," will not close after each selection, since it is a focus trap, while the ",V({},"listbox")," dropdown of the Entity Autocomplete example closes after each selection made, forcing users to re-open the listbox if they need to make another selection."),Object(i.createElement)(c.a,{type:"note",header:"Dueling Picklist vs. Multi Select Combobox"},Object(i.createElement)("p",null,"We recommend using the"," ",Object(i.createElement)("a",{href:"/components/dueling-picklist/"}," Dueling Picklist")," when there are many items to choose from, such as “Select Country”. Use a multiselect combobox with a dialog when you have less horizontal real estate available and fewer items to select from.")),te({id:"Open"},"Open"),Object(i.createElement)(s.a,null,Object(f.f)(J,"with-checkbox-group")),te({id:"Open-and-Selecting"},"Open and Selecting"),ie({},'If nothing has been selected yet, the input\'s placeholder remains "Select an Option" or something similar.'),Object(i.createElement)(s.a,null,Object(f.f)(J,"selecting-options")),te({id:"Closed-with-One-Option-Selected"},"Closed with One Option Selected"),ie({},"When only one selection has been made, the input's value takes on the value of the selection - German in this case."),Object(i.createElement)(s.a,null,Object(f.f)(J,"closed-one-option-selected")),te({id:"Open-with-One-Option-Selected"},"Open with One Option Selected"),Object(i.createElement)(s.a,null,Object(f.f)(J,"open-one-option-selected")),te({id:"Closed-with-Two-or-More-Options-Selected"},"Closed with Two or More Options Selected"),ie({},'When more then one option has been selected, the input\'s value reads "{# of items selected} options selected".'),Object(i.createElement)(s.a,null,Object(f.f)(J,"closed-two-or-more-options-selected")),te({id:"Open-with-Two-or-More-Options-Selected"},"Open with Two or More Options Selected"),Object(i.createElement)(s.a,null,Object(f.f)(J,"open-two-or-more-options-selected")))},ae=function(){return Object(l.a)(se())}}});
1	+ 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([726,0]),o()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},726: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(57),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(40),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(38),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 highlight the desired option and pressing the ",V({},"Enter")," or ",V({},"Tab")," key."),ie({},"Upon selection the Combobox collapses, only showing the ",V({},"input")," field. The value of the ",V({},"input")," inside the Combobox is set to match the selected option name so the user can see what was previously selected from the ",V({},"listbox")," of options."),Object(i.createElement)(s.a,null,Object(f.f)(C,"selected-an-option-closed")),ee({id:"Single-selection"},"Single selection"),ie({},"When an option becomes selected, the class ",V({},"slds-is-selected")," should be applied to the ",V({},"slds-listbox__option")," element with the ",V({},'role="option"'),". This will provide visual feedback that the user has selected that element."),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(C,"selecting-a-single-option")),te({id:"Re-opening-with-a-selection"},"Re-opening with a selection"),ie({},"When re-opening a Combobox that already has a selected value, the ",V({},"listbox")," should be displayed with the selected option already highlighted."),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"Be sure to re-set the ",Object(i.createElement)("code",null,"aria-activedescendant")," attribute on the `input` to the value of the ID of the highlighted option. The highlighted option must also have ",Object(i.createElement)("code",null,'aria-selected="true"'),".")),ee({id:"Multiple-selections"},"Multiple selections"),ie({},"When more than one option has been selected, the value of the ",V({},"input"),' should be updated with the total number of selected items, such as "3 options selected".'),Object(i.createElement)(a.a,{toggleCode:!1},Object(i.createElement)(p.d,{name:"Accounts",selected:!0})),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(C,"selecting-multiple-options")),ie({},"When a Combobox with multiple selected options is closed, a ",Q({href:"/components/pills/#Listbox-Of-Pill-Options"},"Listbox of Pills")," is also used to represent those selected options."),ie({},"The ",Q({href:"/components/pills/#Listbox-Of-Pill-Options"},"Listbox of Pills")," is positioned below the read-only ",V({},"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."),Object(i.createElement)(s.a,null,Object(f.f)(C,"selected-multiple-options-closed")),ee({id:"Editing-multiple-selections"},"Editing multiple selections"),ie({},"The ",Q({href:"/components/pills/#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.'),ie({},"The ",Q({href:"/components/pills/#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."),Z({id:"Autocomplete-Combobox"},"Autocomplete Combobox"),ie({},"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 ",V({},"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."),ie({},"If no option matches, the user can complete the value of the combobox by finishing their own text entry."),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Difference"},Object(i.createElement)("p",null,"The difference between the ",Object(i.createElement)("strong",null,"Base Combobox")," and the"," ",Object(i.createElement)("strong",null,"Autocomplete Combobox"),", is that the text ",Object(i.createElement)("code",null,"input")," ","must have the ",Object(i.createElement)("code",null,"readonly")," attribute removed and replaced with"," ",Object(i.createElement)("code",null,'aria-autocomplete="list"'),".")),Object(i.createElement)(s.a,{demoStyles:"height: 12rem;"},Object(f.f)(P)),$({id:"Displaying-options-2"},"Displaying options"),ie({},"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 ",V({},"input")," will automatically expand the Combobox and display the options."),ie({},"When a user stops interacting with the Combobox, or selects an option, the Combobox collapses and hides the options."),Object(i.createElement)(s.a,{demoStyles:"height: 12rem;"},Object(f.f)(N,"focused-open")),$({id:"Displaying-options-based-on-user-input"},"Displaying options based on user input"),ie({},"If an option from the pre-populated ",V({},"listbox")," isn't what the user wants, they can start typing into the ",V({},"input"),". This term will be used to filter the options by and narrow down the size of the list to something more relevant."),ie({},"Whilst typing, the highlighted option in the ",V({},"listbox")," should be the user's text string."),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 `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"'),".")),Object(i.createElement)(s.a,{demoStyles:"height: 12rem;"},Object(f.f)(N,"typeahead")),$({id:"Drill-In-for-Autocomplete"},"Drill In for Autocomplete"),ie({},"The options in the autocomplete ",V({},"listbox")," can have a right icon to indicate an option that drills in for more options."),Object(i.createElement)(s.a,{demoStyles:"position: relative; height: 10rem;"},Object(i.createElement)(p.e,{id:"listbox-id-3",snapshot:E.g,type:"entity",count:3,visualSelection:!0})),$({id:"Keyboard-interaction"},"Keyboard interaction"),ie({},"The same keyboard interactions apply from the base Combobox, but with these differences:"),le({},oe({},V({},"Up")," and ",V({},"Down")," arrows ",ne({},"should optionally")," update the ",V({},"input")," value to reflect the currently selected option")),Object(i.createElement)(s.a,{demoStyles:"height: 12rem;"},Object(f.f)(N,"highlighting-an-option")),$({id:"Selecting-an-option-2"},"Selecting an option"),ie({},"The user again can click on the desired option or press the ",V({},"Enter")," or ",V({},"Tab")," key with the desired option highlighted. Alternatively they can leave their entered text string as the value of the Combobox."),ie({},"Selecting an option from the ",V({},"listbox")," will close the ",V({},"listbox"),"."),ie({},"To remove the selected option, simply clear the text ",V({},"input"),"."),Object(i.createElement)(s.a,null,Object(f.f)(N,"selected-an-option")),$({id:"Multiple-selection"},"Multiple selection"),ie({},"Multiple selection is much the same as the Base Combobox. A list of selected options are displayed below the Combobox as a ",Q({href:"/components/pills/#Listbox-Of-Pill-Options"},"Listbox of Pills"),"."),Object(i.createElement)(s.a,null,Object(f.f)(N,"selected-multiple-options")),ee({id:"Editing-multiple-selections-2"},"Editing multiple selections"),ie({},"The ",Q({href:"/components/pills/#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.'),ie({},"The ",Q({href:"/components/pills/#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."),Z({id:"Entity-Autocomplete-Combobox-(Lookup)"},"Entity Autocomplete Combobox (Lookup)"),ie({},"An Entity Autocomplete Combobox or Lookup, is used to search for and select Salesforce Entities."),Object(i.createElement)(s.a,{demoStyles:"height: 10rem;"},Object(f.f)(A,"lookup")),$({id:"Displaying-options-3"},"Displaying options"),ie({},"Displaying options happens just like an Autocomplete Combobox, by placing user focus inside the Combobox text ",V({},"input"),"."),ie({},"The options now have extra information about them, such as the type of entity and any other important metadata."),Object(i.createElement)(s.a,{demoStyles:"height: 10rem;"},Object(f.f)(N,"lookup-focused-open")),$({id:"Displaying-options-based-on-user-input-2"},"Displaying options based on user input"),ie({},"As with the Autocomplete Combobox, the user can start typing into the ",V({},"input")," to search for Salesforce Entities that match their search term."),ie({},"In the resultant displayed options, we highlight the matched term by bolding it using the ",V({},"<mark>")," element."),Object(i.createElement)(s.a,{demoStyles:"height: 15rem;"},Object(f.f)(N,"lookup-typeahead")),$({id:"Keyboard-interaction-2"},"Keyboard interaction"),ie({},"The same keyboard interactions apply from the base Combobox, but with these differences:"),le({},oe({},V({},"Up")," and ",V({},"Down")," arrows ",ne({},"should not")," update the ",V({},"input")," value to reflect the currently selected option. The ",V({},"input")," value should only be updated upon selection.")),Object(i.createElement)(s.a,{demoStyles:"height: 10rem;"},Object(f.f)(N,"lookup-highlighting-an-option")),$({id:"Selecting-an-option-3"},"Selecting an option"),ie({},"The user again can click on the desired option or press the ",V({},"Enter")," or ",V({},"Tab")," 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."),ie({},"The selected option is still set as the value of the text ",V({},"input"),", but this time we make the ",V({},"input")," look like a dismissible pill. This ",V({},"input")," becomes readonly at this point, so the user can no longer type into it."),ie({},"To remove the selected option, simply press the ",V({},"Delete")," key when focused inside the text ",V({},"input"),' or click the remove "x".'),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"When the option is selected, make sure to add the ",Object(i.createElement)("code",null,"readonly")," ","attribute to the text ",Object(i.createElement)("code",null,"input"),". Be sure to remove it again when the option is cleared.")),Object(i.createElement)(s.a,null,Object(f.f)(N,"lookup-selected-an-option")),$({id:"Multiple-selection-2"},"Multiple selection"),ie({},"Multiple selection is handled the same as the Base and Autocomplete Combobox, a list of selected entities is displayed under the combobox as a ",Q({href:"/components/pills/#Listbox-Of-Pill-Options"},"Listbox of Pills"),"."),Object(i.createElement)(s.a,null,Object(f.f)(N,"lookup-multiple-options")),Object(i.createElement)(Y.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"comboboxes with multiple selection"}),Object(i.createElement)(s.a,{frameOnly:!0,frameTitle:"Example mobile styles for comboboxes with multiple selection"},Object(f.f)(N,"lookup-multiple-options")),Z({id:"Grouped-Comboboxes-(Cross-entity-Polymorphic)"},"Grouped Comboboxes (Cross-entity / Polymorphic)"),ie({},"The Grouped Comboboxes should be used when a Combobox has another Combobox appended or prepended to itself."),ie({},"The containing ",V({},"div")," of the comboboxes should have the class ",V({},"slds-combobox-group")," on it."),Object(i.createElement)(c.a,{type:"warning",header:"Keep in mind"},Object(i.createElement)("p",null,"The grouped combobox only accepts ",Object(i.createElement)("em",null,"one")," addon, in addition to the primary combobox. Use the classes ",Object(i.createElement)("code",null,"slds-combobox_addon-start")," and"," ",Object(i.createElement)("code",null,"slds-combobox_addon-end")," to describe the position of the form element.")),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"Be sure to set ",Object(i.createElement)("code",null,"aria-controls")," on the Object Switcher, which points to the Search Combobox ID.")),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(B)),Object(i.createElement)(Y.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"grouped comboboxes (cross-entity / polymorphic)"}),Object(i.createElement)(s.a,{frameStyles:{height:"21rem"},frameOnly:!0,frameTitle:"Example mobile styles for grouped comboboxes"},Object(f.f)(B)),$({id:"User-input-(Typeahead)"},"User input (Typeahead)"),Object(i.createElement)(s.a,{demoStyles:"height: 15rem;"},Object(f.f)(G,"typeahead")),$({id:"User-input-(Typeahead)-Loading"},"User input (Typeahead) - Loading"),Object(i.createElement)(s.a,{demoStyles:"height: 15rem;"},Object(f.f)(G,"typeahead-loading")),$({id:"Selecting-options"},"Selecting options"),Object(i.createElement)(s.a,null,Object(f.f)(G,"selected-options")),$({id:"User-input-with-selection(s)-made"},"User input with selection(s) made"),Object(i.createElement)(s.a,{demoStyles:"height: 15rem;"},Object(f.f)(G,"selected-options-open")),$({id:"Selected-options-overflow"},"Selected options overflow"),ie({},"When a user is not focused on any element inside of the combobox group, the pill container should become collapsed to reduce vertical space."),ie({},"The combobox group element needs the class ",V({},"slds-has-selection")," when a selection has been made. The pill selections are found inside of a ",Q({href:"/components/pills/#Listbox-Of-Pill-Options"},"Listbox of Pills")," located after the combobox group. It requires the class ",V({},"slds-listbox_selection-group")," to provide appropriate styling for the expanding and collapsing behavior of this region."),ee({id:"Collapsed"},"Collapsed"),ie({},"By default, the ",V({},"slds-listbox_selection-group")," is collapsed."),Object(i.createElement)(s.a,null,Object(f.f)(G,"overflow-collapsed")),ee({id:"Expanded"},"Expanded"),ie({},"When a user focuses on ",X({},"any")," element inside of the combobox group, the class ",V({},"slds-is-expanded")," should be applied to the ",V({},"slds-listbox_selection-group"),". The selection group should remain open until the user moves away from any element inside the combobox group."),Object(i.createElement)(s.a,null,Object(f.f)(G,"overflow-expanded")),ie({},'For mouse users, clicking on the "+{x} more" text would expand the selection group and place the user\'s focus on the first pill inside the Listbox of Pills.'),$({id:"Scoping-results"},"Scoping results"),ie({},"A grouped combobox is intended to be used to filter down or scope you search results. You can do so by interacting with the object switcher to scope down to an object type."),ie({},"The containing element should receive the class ",V({},"slds-combobox_object-switcher")," and ",V({},"slds-combobox_addon-start"),"."),ee({id:"Text-variant"},"Text variant"),Object(i.createElement)(s.a,{demoStyles:"height: 17rem;"},Object(f.f)(G,"scoping-results-focused")),ee({id:"Icon-variant"},"Icon variant"),te({id:"Blurred"},"Blurred"),Object(i.createElement)(s.a,null,Object(f.f)(G,"scoping-results-icon")),te({id:"Focused"},"Focused"),Object(i.createElement)(s.a,{demoStyles:"height: 13rem;"},Object(f.f)(G,"scoping-results-icon-focused")),Z({id:"Combobox-with-a-Dialog"},"Combobox with a Dialog"),ie({},"If the data displayed within the dropdown of a combobox cannot be represented as a listbox (as shown above), tree, grid, or tree-grid, then the dropdown should be represented as a dialog, with ",V({},'role="dialog"'),"."),ie({},"The key difference for ",V({},"dialog")," dropdowns lies in how they handle focus. In ",V({},"listbox")," dropdowns, users can enter values in the input while arrowing through the listbox options using ",V({},"aria-activedescendant"),". In ",V({},"dialog")," dropdowns, the dropdown becomes a focus trap, so users must have a way to clear or save any selections or changes made."),Object(i.createElement)(c.a,{type:"a11y",header:"Implementation Details"},Object(i.createElement)("ol",null,Object(i.createElement)("li",null,"1. The input does not have `aria-autocomplete`, it is essentially readonly"),Object(i.createElement)("li",null,"2. The input for this dialog variant will also never have `aria-activedescendant`"),Object(i.createElement)("li",null,'3. The combobox `<div>` with `class="slds-combobox"` has `aria-haspopup=”dialog”`'),Object(i.createElement)("li",null,'4. The dropdown is a dialog with `role="dialog"`'),Object(i.createElement)("li",null,"5. The dialog should have an `aria-label` with a value for the dialog's title"),Object(i.createElement)("li",null,'6. The combobox has `aria-expanded="false"` when the dialog is closed, and `aria-expanded="true"` when the dialog is open.'," "))),Object(i.createElement)(s.a,null,Object(f.f)(H)),$({id:"Open-Dialog"},"Open Dialog"),ie({},"To open the dialog, remove the class ",V({},"slds-popover_hide")," from the ",V({},"<div>")," with ",V({},'class="slds-popover"'),". Any content can go inside a ",V({},"dialog")," dropdown."),Object(i.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(i.createElement)("p",null,'When the dialog is open, be sure to change `aria-expanded` to true on the combobox `<div>` with `class="slds-combobox"`.')),Object(i.createElement)(s.a,null,Object(f.f)(K,"open")),$({id:"Keyboard-Interaction"},"Keyboard Interaction"),le({},oe({},"Focusing on the input does not open the dropdown"),oe({},"Typing in the input does nothing"),oe({},"Pressing the ",V({},"down arrow")," from the input opens the dialog and moves the user's focus into the dialog."),oe({},"The dialog dropdown is a focus trap",le({},oe({},"Pressing the ",V({},"Tab")," key cycles the user through all UI elements in the dialog"))),oe({},"Pressing ",V({},"Escape")," closes the dialog and clears any changes"),oe({},"Pressing the Cancel button closes the dialog and clears any changes"),oe({},"Pressing the Save button updates the selected value in the input and closes the dialog")),$({id:"Focus-Management"},"Focus Management"),le({},oe({},"Clicking on the input opens and focuses the cursor inside the dialog on the first focusable element."),oe({},"Placing focus on the input ",X({},"does not")," open the dialog"),oe({},"Pressing the ",V({},"down arrow")," whilst focused on the input opens the dialog and moves focus to the first focusable element")),$({id:"Examples"},"Examples"),ee({id:"Multiple-Selection"},"Multiple Selection"),ie({},"Below is an example of a ",V({},"dialog")," combobox where users can make multiple selections using checkboxes. The main difference between the ",ne({},"dialog variant")," of a multi-select combobox and the ",Q({href:"/components/combobox/#Multiple-selection-2"},"multi-select Entity Autocomplete")," involves the behavior after a selection is made. A ",V({},"dialog")," will not close after each selection, since it is a focus trap, while the ",V({},"listbox")," dropdown of the Entity Autocomplete example closes after each selection made, forcing users to re-open the listbox if they need to make another selection."),Object(i.createElement)(c.a,{type:"note",header:"Dueling Picklist vs. Multi Select Combobox"},Object(i.createElement)("p",null,"We recommend using the"," ",Object(i.createElement)("a",{href:"/components/dueling-picklist/"}," Dueling Picklist")," when there are many items to choose from, such as “Select Country”. Use a multiselect combobox with a dialog when you have less horizontal real estate available and fewer items to select from.")),te({id:"Open"},"Open"),Object(i.createElement)(s.a,null,Object(f.f)(J,"with-checkbox-group")),te({id:"Open-and-Selecting"},"Open and Selecting"),ie({},'If nothing has been selected yet, the input\'s placeholder remains "Select an Option" or something similar.'),Object(i.createElement)(s.a,null,Object(f.f)(J,"selecting-options")),te({id:"Closed-with-One-Option-Selected"},"Closed with One Option Selected"),ie({},"When only one selection has been made, the input's value takes on the value of the selection - German in this case."),Object(i.createElement)(s.a,null,Object(f.f)(J,"closed-one-option-selected")),te({id:"Open-with-One-Option-Selected"},"Open with One Option Selected"),Object(i.createElement)(s.a,null,Object(f.f)(J,"open-one-option-selected")),te({id:"Closed-with-Two-or-More-Options-Selected"},"Closed with Two or More Options Selected"),ie({},'When more then one option has been selected, the input\'s value reads "{# of items selected} options selected".'),Object(i.createElement)(s.a,null,Object(f.f)(J,"closed-two-or-more-options-selected")),te({id:"Open-with-Two-or-More-Options-Selected"},"Open with Two or More Options Selected"),Object(i.createElement)(s.a,null,Object(f.f)(J,"open-two-or-more-options-selected")))},ae=function(){return Object(l.a)(se())}}});