// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`OuiComboBox is rendered 1`] = ` <div aria-expanded="false" aria-haspopup="listbox" aria-label="aria-label" class="ouiComboBox testClass1 testClass2" data-test-subj="test subject string" role="combobox" > <div class="ouiFormControlLayout" > <div class="ouiFormControlLayout__childrenWrapper" > <div class="ouiComboBox__inputWrap ouiComboBox__inputWrap-isClearable" data-test-subj="comboBoxInput" tabindex="-1" > <div class="ouiComboBox__input" style="font-size:14px;display:inline-block" > <input aria-controls="" data-test-subj="comboBoxSearchInput" role="textbox" style="box-sizing:content-box;width:1px" value="" /> <div style="position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre" /> </div> </div> <div class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right" > <button aria-label="Open list of options" class="ouiFormControlLayoutCustomIcon ouiFormControlLayoutCustomIcon--clickable" data-test-subj="comboBoxToggleListButton" type="button" > <span aria-hidden="true" class="ouiFormControlLayoutCustomIcon__icon" data-ouiicon-type="arrowDown" /> </button> </div> </div> </div> </div> `; exports[`props autoFocus is rendered 1`] = ` <div aria-expanded={false} aria-haspopup="listbox" className="ouiComboBox" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={true} inputRef={[Function]} isListOpen={false} noIcon={false} onChange={[Function]} onClear={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, Object { "label": "Dione", }, ] } singleSelection={false} toggleButtonRef={[Function]} updatePosition={[Function]} value="Mimas, Dione" /> </div> `; exports[`props custom icon is rendered 1`] = ` <OuiComboBox async={false} compressed={false} fullWidth={false} icon="menu" isClearable={true} options={ Array [ Object { "data-test-subj": "titanOption", "label": "Titan", }, Object { "label": "Enceladus", }, Object { "label": "Mimas", }, Object { "label": "Dione", }, Object { "label": "Iapetus", }, Object { "label": "Phoebe", }, Object { "label": "Rhea", }, Object { "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", }, Object { "label": "Tethys", }, Object { "label": "Hyperion", }, ] } selectedOptions={ Array [ Object { "label": "Mimas", }, ] } singleSelection={false} sortMatchesBy="none" > <div aria-expanded={false} aria-haspopup="listbox" className="ouiComboBox" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={true} icon="menu" inputRef={[Function]} isListOpen={false} noIcon={false} onChange={[Function]} onClear={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, ] } singleSelection={false} toggleButtonRef={[Function]} updatePosition={[Function]} value="Mimas" > <OuiFormControlLayout clear={ Object { "data-test-subj": "comboBoxClearButton", "onClick": [Function], } } compressed={false} fullWidth={false} icon={ Object { "aria-label": "Open list of options", "data-test-subj": "comboBoxToggleListButton", "disabled": undefined, "onClick": [Function], "ref": [Function], "side": "right", "type": "arrowDown", } } > <div className="ouiFormControlLayout" > <div className="ouiFormControlLayout__childrenWrapper" > <div className="ouiComboBox__inputWrap ouiComboBox__inputWrap-isClearable" data-test-subj="comboBoxInput" onClick={[Function]} tabIndex={-1} > <OuiIcon className="ouiComboBoxPill ouiComboBoxIcon" data-test-subj="comboBoxIcon" size="m" type="menu" > <span className="ouiComboBoxPill ouiComboBoxIcon" data-ouiicon-type="menu" data-test-subj="comboBoxIcon" size="m" /> </OuiIcon> <OuiComboBoxPill asPlainText={false} color="hollow" key="mimas" onClose={[Function]} option={ Object { "label": "Mimas", } } > <OuiI18n default="Remove {children} from selection in this group" token="ouiComboBoxPill.removeSelection" values={ Object { "children": "Mimas", } } > <OuiBadge className="ouiComboBoxPill" closeButtonProps={ Object { "tabIndex": -1, } } color="hollow" iconOnClick={[Function]} iconOnClickAriaLabel="Remove Mimas from selection in this group" iconSide="right" iconType="cross" title="Mimas" > <OuiInnerText> <span className="ouiBadge ouiBadge--hollow ouiBadge--iconRight ouiComboBoxPill" title="Mimas" > <span className="ouiBadge__content" > <span className="ouiBadge__text" > Mimas </span> <button aria-label="Remove Mimas from selection in this group" className="ouiBadge__iconButton" disabled={false} onClick={[Function]} title="Remove Mimas from selection in this group" type="button" > <OuiIcon className="ouiBadge__icon" color="inherit" size="s" tabIndex={-1} type="cross" > <span className="ouiBadge__icon" color="inherit" data-ouiicon-type="cross" size="s" tabIndex={-1} /> </OuiIcon> </button> </span> </span> </OuiInnerText> </OuiBadge> </OuiI18n> </OuiComboBoxPill> <AutosizeInput aria-controls="" className="ouiComboBox__input" data-test-subj="comboBoxSearchInput" injectStyles={true} inputRef={[Function]} minWidth={1} onBlur={[Function]} onChange={[Function]} onFocus={[Function]} role="textbox" style={ Object { "fontSize": 14, } } value="" > <div className="ouiComboBox__input" style={ Object { "display": "inline-block", "fontSize": 14, } } > <input aria-controls="" data-test-subj="comboBoxSearchInput" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} role="textbox" style={ Object { "boxSizing": "content-box", "width": "2px", } } value="" /> <div style={ Object { "height": 0, "left": 0, "overflow": "scroll", "position": "absolute", "top": 0, "visibility": "hidden", "whiteSpace": "pre", } } /> </div> </AutosizeInput> </div> <OuiFormControlLayoutIcons clear={ Object { "data-test-subj": "comboBoxClearButton", "onClick": [Function], } } compressed={false} icon={ Object { "aria-label": "Open list of options", "data-test-subj": "comboBoxToggleListButton", "disabled": undefined, "onClick": [Function], "ref": [Function], "side": "right", "type": "arrowDown", } } > <div className="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right" > <OuiFormControlLayoutClearButton data-test-subj="comboBoxClearButton" onClick={[Function]} size="m" > <OuiI18n default="Clear input" token="ouiFormControlLayoutClearButton.label" > <button aria-label="Clear input" className="ouiFormControlLayoutClearButton" data-test-subj="comboBoxClearButton" onClick={[Function]} type="button" > <OuiIcon className="ouiFormControlLayoutClearButton__icon" type="cross" > <span className="ouiFormControlLayoutClearButton__icon" data-ouiicon-type="cross" /> </OuiIcon> </button> </OuiI18n> </OuiFormControlLayoutClearButton> <OuiFormControlLayoutCustomIcon aria-label="Open list of options" data-test-subj="comboBoxToggleListButton" iconRef={[Function]} onClick={[Function]} size="m" type="arrowDown" > <button aria-label="Open list of options" className="ouiFormControlLayoutCustomIcon ouiFormControlLayoutCustomIcon--clickable" data-test-subj="comboBoxToggleListButton" onClick={[Function]} type="button" > <OuiIcon aria-hidden="true" className="ouiFormControlLayoutCustomIcon__icon" size="m" type="arrowDown" > <span aria-hidden="true" className="ouiFormControlLayoutCustomIcon__icon" data-ouiicon-type="arrowDown" size="m" /> </OuiIcon> </button> </OuiFormControlLayoutCustomIcon> </div> </OuiFormControlLayoutIcons> </div> </div> </OuiFormControlLayout> </OuiComboBoxInput> </div> </OuiComboBox> `; exports[`props delimiter is rendered 1`] = ` <div aria-expanded={false} aria-haspopup="listbox" className="ouiComboBox" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={true} inputRef={[Function]} isListOpen={false} noIcon={false} onChange={[Function]} onClear={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, Object { "label": "Dione", }, ] } singleSelection={false} toggleButtonRef={[Function]} updatePosition={[Function]} value="Mimas, Dione" /> </div> `; exports[`props full width is rendered 1`] = ` <div aria-expanded={false} aria-haspopup="listbox" className="ouiComboBox ouiComboBox--fullWidth" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={true} hasSelectedOptions={true} inputRef={[Function]} isListOpen={false} noIcon={false} onChange={[Function]} onClear={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, ] } singleSelection={false} toggleButtonRef={[Function]} updatePosition={[Function]} value="Mimas" /> </div> `; exports[`props icon is rendered 1`] = ` <OuiComboBox async={false} compressed={false} fullWidth={false} icon={true} isClearable={true} options={ Array [ Object { "data-test-subj": "titanOption", "label": "Titan", }, Object { "label": "Enceladus", }, Object { "label": "Mimas", }, Object { "label": "Dione", }, Object { "label": "Iapetus", }, Object { "label": "Phoebe", }, Object { "label": "Rhea", }, Object { "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", }, Object { "label": "Tethys", }, Object { "label": "Hyperion", }, ] } selectedOptions={ Array [ Object { "label": "Mimas", }, ] } singleSelection={false} sortMatchesBy="none" > <div aria-expanded={false} aria-haspopup="listbox" className="ouiComboBox" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={true} icon={true} inputRef={[Function]} isListOpen={false} noIcon={false} onChange={[Function]} onClear={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, ] } singleSelection={false} toggleButtonRef={[Function]} updatePosition={[Function]} value="Mimas" > <OuiFormControlLayout clear={ Object { "data-test-subj": "comboBoxClearButton", "onClick": [Function], } } compressed={false} fullWidth={false} icon={ Object { "aria-label": "Open list of options", "data-test-subj": "comboBoxToggleListButton", "disabled": undefined, "onClick": [Function], "ref": [Function], "side": "right", "type": "arrowDown", } } > <div className="ouiFormControlLayout" > <div className="ouiFormControlLayout__childrenWrapper" > <div className="ouiComboBox__inputWrap ouiComboBox__inputWrap-isClearable" data-test-subj="comboBoxInput" onClick={[Function]} tabIndex={-1} > <OuiIcon className="ouiComboBoxPill ouiComboBoxIcon" data-test-subj="comboBoxIcon" size="m" type="search" > <span className="ouiComboBoxPill ouiComboBoxIcon" data-ouiicon-type="search" data-test-subj="comboBoxIcon" size="m" /> </OuiIcon> <OuiComboBoxPill asPlainText={false} color="hollow" key="mimas" onClose={[Function]} option={ Object { "label": "Mimas", } } > <OuiI18n default="Remove {children} from selection in this group" token="ouiComboBoxPill.removeSelection" values={ Object { "children": "Mimas", } } > <OuiBadge className="ouiComboBoxPill" closeButtonProps={ Object { "tabIndex": -1, } } color="hollow" iconOnClick={[Function]} iconOnClickAriaLabel="Remove Mimas from selection in this group" iconSide="right" iconType="cross" title="Mimas" > <OuiInnerText> <span className="ouiBadge ouiBadge--hollow ouiBadge--iconRight ouiComboBoxPill" title="Mimas" > <span className="ouiBadge__content" > <span className="ouiBadge__text" > Mimas </span> <button aria-label="Remove Mimas from selection in this group" className="ouiBadge__iconButton" disabled={false} onClick={[Function]} title="Remove Mimas from selection in this group" type="button" > <OuiIcon className="ouiBadge__icon" color="inherit" size="s" tabIndex={-1} type="cross" > <span className="ouiBadge__icon" color="inherit" data-ouiicon-type="cross" size="s" tabIndex={-1} /> </OuiIcon> </button> </span> </span> </OuiInnerText> </OuiBadge> </OuiI18n> </OuiComboBoxPill> <AutosizeInput aria-controls="" className="ouiComboBox__input" data-test-subj="comboBoxSearchInput" injectStyles={true} inputRef={[Function]} minWidth={1} onBlur={[Function]} onChange={[Function]} onFocus={[Function]} role="textbox" style={ Object { "fontSize": 14, } } value="" > <div className="ouiComboBox__input" style={ Object { "display": "inline-block", "fontSize": 14, } } > <input aria-controls="" data-test-subj="comboBoxSearchInput" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} role="textbox" style={ Object { "boxSizing": "content-box", "width": "2px", } } value="" /> <div style={ Object { "height": 0, "left": 0, "overflow": "scroll", "position": "absolute", "top": 0, "visibility": "hidden", "whiteSpace": "pre", } } /> </div> </AutosizeInput> </div> <OuiFormControlLayoutIcons clear={ Object { "data-test-subj": "comboBoxClearButton", "onClick": [Function], } } compressed={false} icon={ Object { "aria-label": "Open list of options", "data-test-subj": "comboBoxToggleListButton", "disabled": undefined, "onClick": [Function], "ref": [Function], "side": "right", "type": "arrowDown", } } > <div className="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right" > <OuiFormControlLayoutClearButton data-test-subj="comboBoxClearButton" onClick={[Function]} size="m" > <OuiI18n default="Clear input" token="ouiFormControlLayoutClearButton.label" > <button aria-label="Clear input" className="ouiFormControlLayoutClearButton" data-test-subj="comboBoxClearButton" onClick={[Function]} type="button" > <OuiIcon className="ouiFormControlLayoutClearButton__icon" type="cross" > <span className="ouiFormControlLayoutClearButton__icon" data-ouiicon-type="cross" /> </OuiIcon> </button> </OuiI18n> </OuiFormControlLayoutClearButton> <OuiFormControlLayoutCustomIcon aria-label="Open list of options" data-test-subj="comboBoxToggleListButton" iconRef={[Function]} onClick={[Function]} size="m" type="arrowDown" > <button aria-label="Open list of options" className="ouiFormControlLayoutCustomIcon ouiFormControlLayoutCustomIcon--clickable" data-test-subj="comboBoxToggleListButton" onClick={[Function]} type="button" > <OuiIcon aria-hidden="true" className="ouiFormControlLayoutCustomIcon__icon" size="m" type="arrowDown" > <span aria-hidden="true" className="ouiFormControlLayoutCustomIcon__icon" data-ouiicon-type="arrowDown" size="m" /> </OuiIcon> </button> </OuiFormControlLayoutCustomIcon> </div> </OuiFormControlLayoutIcons> </div> </div> </OuiFormControlLayout> </OuiComboBoxInput> </div> </OuiComboBox> `; exports[`props isClearable=false disallows user from clearing input when no options are selected 1`] = ` <div aria-expanded={false} aria-haspopup="listbox" className="ouiComboBox" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={false} inputRef={[Function]} isListOpen={false} noIcon={false} onChange={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={Array []} singleSelection={false} toggleButtonRef={[Function]} updatePosition={[Function]} value="" /> </div> `; exports[`props isClearable=false disallows user from clearing input when options are selected 1`] = ` <div aria-expanded={false} aria-haspopup="listbox" className="ouiComboBox" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={true} inputRef={[Function]} isListOpen={false} noIcon={false} onChange={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, Object { "label": "Iapetus", }, ] } singleSelection={false} toggleButtonRef={[Function]} updatePosition={[Function]} value="Mimas, Iapetus" /> </div> `; exports[`props isDisabled is rendered 1`] = ` <div aria-expanded={false} aria-haspopup="listbox" className="ouiComboBox ouiComboBox-isDisabled" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={true} inputRef={[Function]} isDisabled={true} isListOpen={false} noIcon={false} onChange={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, ] } singleSelection={false} toggleButtonRef={[Function]} updatePosition={[Function]} value="Mimas" /> </div> `; exports[`props options list is rendered 1`] = ` <div aria-expanded="true" aria-haspopup="listbox" class="ouiComboBox ouiComboBox-isOpen" data-test-subj="alsoGetsAppliedToOptionsList" role="combobox" > <div class="ouiFormControlLayout" > <div class="ouiFormControlLayout__childrenWrapper" > <div class="ouiComboBox__inputWrap ouiComboBox__inputWrap-isClearable" data-test-subj="comboBoxInput" tabindex="-1" > <div class="ouiComboBox__input" style="font-size: 14px; display: inline-block;" > <input aria-controls="generated-id_listbox" data-test-subj="comboBoxSearchInput" role="textbox" style="box-sizing: content-box; width: 2px;" value="" /> <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;" /> </div> </div> <div class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right" > <button aria-label="Close list of options" class="ouiFormControlLayoutCustomIcon ouiFormControlLayoutCustomIcon--clickable" data-test-subj="comboBoxToggleListButton" type="button" > <span aria-hidden="true" class="ouiFormControlLayoutCustomIcon__icon" data-ouiicon-type="arrowDown" /> </button> </div> </div> </div> <div class="ouiPanel ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiComboBoxOptionsList ouiPopover__panel ouiPopover__panel-isAttached ouiPopover__panel-noArrow ouiPopover__panel-isOpen ouiPopover__panel--bottom" data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList" style="z-index: 100;" > <div class="ouiComboBoxOptionsList__rowWrap" > <div style="position: relative; height: 200px; width: 0px; overflow: auto; will-change: transform; direction: ltr;" > <div id="generated-id_listbox" role="listBox" style="height: 290px; width: 100%;" tabindex="0" > <button aria-selected="false" class="ouiFilterSelectItem" data-test-subj="titanOption" id="generated-id__option-0" role="option" style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;" title="Titan" type="button" > <span class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow" > <span class="ouiFlexItem ouiFilterSelectItem__content" > <span class="ouiComboBoxOption__contentWrapper" > <span class="ouiComboBoxOption__content" > Titan </span> </span> </span> </span> </button> <button aria-selected="false" class="ouiFilterSelectItem" id="generated-id__option-1" role="option" style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;" title="Enceladus" type="button" > <span class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow" > <span class="ouiFlexItem ouiFilterSelectItem__content" > <span class="ouiComboBoxOption__contentWrapper" > <span class="ouiComboBoxOption__content" > Enceladus </span> </span> </span> </span> </button> <button aria-selected="false" class="ouiFilterSelectItem" id="generated-id__option-2" role="option" style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;" title="Mimas" type="button" > <span class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow" > <span class="ouiFlexItem ouiFilterSelectItem__content" > <span class="ouiComboBoxOption__contentWrapper" > <span class="ouiComboBoxOption__content" > Mimas </span> </span> </span> </span> </button> <button aria-selected="false" class="ouiFilterSelectItem" id="generated-id__option-3" role="option" style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;" title="Dione" type="button" > <span class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow" > <span class="ouiFlexItem ouiFilterSelectItem__content" > <span class="ouiComboBoxOption__contentWrapper" > <span class="ouiComboBoxOption__content" > Dione </span> </span> </span> </span> </button> <button aria-selected="false" class="ouiFilterSelectItem" id="generated-id__option-4" role="option" style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;" title="Iapetus" type="button" > <span class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow" > <span class="ouiFlexItem ouiFilterSelectItem__content" > <span class="ouiComboBoxOption__contentWrapper" > <span class="ouiComboBoxOption__content" > Iapetus </span> </span> </span> </span> </button> <button aria-selected="false" class="ouiFilterSelectItem" id="generated-id__option-5" role="option" style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;" title="Phoebe" type="button" > <span class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow" > <span class="ouiFlexItem ouiFilterSelectItem__content" > <span class="ouiComboBoxOption__contentWrapper" > <span class="ouiComboBoxOption__content" > Phoebe </span> </span> </span> </span> </button> <button aria-selected="false" class="ouiFilterSelectItem" id="generated-id__option-6" role="option" style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;" title="Rhea" type="button" > <span class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow" > <span class="ouiFlexItem ouiFilterSelectItem__content" > <span class="ouiComboBoxOption__contentWrapper" > <span class="ouiComboBoxOption__content" > Rhea </span> </span> </span> </span> </button> <button aria-selected="false" class="ouiFilterSelectItem" id="generated-id__option-7" role="option" style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;" title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology" type="button" > <span class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow" > <span class="ouiFlexItem ouiFilterSelectItem__content" > <span class="ouiComboBoxOption__contentWrapper" > <span class="ouiComboBoxOption__content" > Pandora is one of Saturn's moons, named for a Titaness of Greek mythology </span> </span> </span> </span> </button> <button aria-selected="false" class="ouiFilterSelectItem" id="generated-id__option-8" role="option" style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;" title="Tethys" type="button" > <span class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow" > <span class="ouiFlexItem ouiFilterSelectItem__content" > <span class="ouiComboBoxOption__contentWrapper" > <span class="ouiComboBoxOption__content" > Tethys </span> </span> </span> </span> </button> </div> </div> </div> </div> </div> `; exports[`props selectedOptions are rendered 1`] = ` <div aria-expanded={false} aria-haspopup="listbox" className="ouiComboBox" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={true} inputRef={[Function]} isListOpen={false} noIcon={false} onChange={[Function]} onClear={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, Object { "label": "Iapetus", }, ] } singleSelection={false} toggleButtonRef={[Function]} updatePosition={[Function]} value="Mimas, Iapetus" /> </div> `; exports[`props singleSelection is rendered 1`] = ` <div aria-expanded={false} aria-haspopup="listbox" className="ouiComboBox" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={true} inputRef={[Function]} isListOpen={false} noIcon={false} onChange={[Function]} onClear={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, ] } singleSelection={true} toggleButtonRef={[Function]} updatePosition={[Function]} value="Mimas" /> </div> `; exports[`props singleSelection prepend and append is rendered 1`] = ` <div aria-expanded={true} aria-haspopup="listbox" className="ouiComboBox ouiComboBox-isOpen" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput append="String" autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={false} inputRef={[Function]} isListOpen={true} noIcon={false} onChange={[Function]} onClear={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} prepend="String" rootId={[Function]} searchValue="" selectedOptions={Array []} singleSelection={true} toggleButtonRef={[Function]} updatePosition={[Function]} value="" /> <OuiPortal> <OuiComboBoxOptionsList activeOptionIndex={-1} areAllOptionsSelected={false} data-test-subj="" fullWidth={false} getSelectedOptionForSearchValue={[Function]} listRef={[Function]} matchingOptions={ Array [ Object { "data-test-subj": "titanOption", "label": "Titan", }, Object { "label": "Enceladus", }, Object { "label": "Mimas", }, Object { "label": "Dione", }, Object { "label": "Iapetus", }, Object { "label": "Phoebe", }, Object { "label": "Rhea", }, Object { "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", }, Object { "label": "Tethys", }, Object { "label": "Hyperion", }, ] } onCloseList={[Function]} onOptionClick={[Function]} onOptionEnterKey={[Function]} onScroll={[Function]} optionRef={[Function]} options={ Array [ Object { "data-test-subj": "titanOption", "label": "Titan", }, Object { "label": "Enceladus", }, Object { "label": "Mimas", }, Object { "label": "Dione", }, Object { "label": "Iapetus", }, Object { "label": "Phoebe", }, Object { "label": "Rhea", }, Object { "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", }, Object { "label": "Tethys", }, Object { "label": "Hyperion", }, ] } position="bottom" rootId={[Function]} rowHeight={29} scrollToIndex={-1} searchValue="" selectedOptions={Array []} singleSelection={true} updatePosition={[Function]} width={0} /> </OuiPortal> </div> `; exports[`props singleSelection selects existing option when opened 1`] = ` <div aria-expanded={true} aria-haspopup="listbox" className="ouiComboBox ouiComboBox-isOpen" onKeyDown={[Function]} role="combobox" > <OuiComboBoxInput autoSizeInputRef={[Function]} compressed={false} fullWidth={false} hasSelectedOptions={true} inputRef={[Function]} isListOpen={true} noIcon={false} onChange={[Function]} onClear={[Function]} onClick={[Function]} onCloseListClick={[Function]} onFocus={[Function]} onOpenListClick={[Function]} onRemoveOption={[Function]} rootId={[Function]} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, ] } singleSelection={true} toggleButtonRef={[Function]} updatePosition={[Function]} value="Mimas" /> <OuiPortal> <OuiComboBoxOptionsList activeOptionIndex={-1} areAllOptionsSelected={false} data-test-subj="" fullWidth={false} getSelectedOptionForSearchValue={[Function]} listRef={[Function]} matchingOptions={ Array [ Object { "data-test-subj": "titanOption", "label": "Titan", }, Object { "label": "Enceladus", }, Object { "label": "Mimas", }, Object { "label": "Dione", }, Object { "label": "Iapetus", }, Object { "label": "Phoebe", }, Object { "label": "Rhea", }, Object { "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", }, Object { "label": "Tethys", }, Object { "label": "Hyperion", }, ] } onCloseList={[Function]} onOptionClick={[Function]} onOptionEnterKey={[Function]} onScroll={[Function]} optionRef={[Function]} options={ Array [ Object { "data-test-subj": "titanOption", "label": "Titan", }, Object { "label": "Enceladus", }, Object { "label": "Mimas", }, Object { "label": "Dione", }, Object { "label": "Iapetus", }, Object { "label": "Phoebe", }, Object { "label": "Rhea", }, Object { "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", }, Object { "label": "Tethys", }, Object { "label": "Hyperion", }, ] } position="bottom" rootId={[Function]} rowHeight={29} scrollToIndex={-1} searchValue="" selectedOptions={ Array [ Object { "label": "Mimas", }, ] } singleSelection={true} updatePosition={[Function]} width={0} /> </OuiPortal> </div> `;